آموزش طراحی سایت با وردپرس

طراحی سایت



قبلا در مقاله ای با عنوان مهارت های لازم برای تبدیل شدن به یک طراح سایت اشاره ای مختصر به مهارت های طراحی سایت داشتم ولی به نظرم رسید شاید بد نباشد اموزش هایی برای مبتدیان طراحی سایت بنویسم.امیدوارم که خواندن این آموزش ها برایتان مفید باشد.درابتدای این آموزش مقدمه ای کوتاه از طراحی وب بیان کرده و در ادامه آموزش های بعدی به صورت مفصل توضیح خواهم داد.

یک سایت امروزه می تواند به عنوان یک ویترین برای یک کسب و کار ویا معرف یک شرکت در هرحوزه کاری وحتی میتواند معرف یک شخص در دنیای مجازی امروز باشد.هدفم از نوشتن این مقاله مقدمه ایست برای ورد به آموزش طراحی سایت با وردپرس و اینکه علاقمندان به طراحی وب باید با چه اصولی آشنا شوند تا بتوانند براحتی سایت دلخواه خود را طراحی کنند.برای ورود به دنیای طراحی وب ابتدا باید مقدماتی رابیاموزیم که من دراین مقاله سعی میکنم از ابتدایی ترین مقدمات برای طراحی وب تا پیشرفته ترین سطح ان را ادامه دهم.

Html  چیست؟

Html کوتاه شده عبارت “hyper text markup language”  به معنای زبان نشانه گذاری است. Html  همانطور که از تعریف آن پیداست یک زبان نشانه گذاری یا برچسب گذاری (tag) است یعنی از نشانه ها برای مشخص کردن قسمت های مختلف صفحات وب ازآن استفاده می شود.به عبارت دیگر html زبانی است برای خوانده شدن توسط مرورگر ها به این معنی که همه مرور گرها با دیدن نشانه های موجود در صحفه به هویت عناصر آن اگاه می شوند. به طور مثال هرگاه در طراحی صفحات وب از علامت یا به اصطلاح تگ <p>  استقاده شود نشان دهنده متن یا پاراگراف در صفحات وب است.

طراحی سایت

نکته:هر یک از تگ ها با علامت <> باز و با علامت </> بسته می شود.البته استثنائاتی دارد که بعدا به آن اشاره خواهیم کرد.

مفهوم Hyper Text در زبان html  چیست؟.

عبارت hypertextدر html به معنای ” ابر متن “یا “متن فوق العاده” است.امامفهوم این عبارت در این زبان بسیار فراتر از معنای لفظی ان است که می خواهم آن را بیان کنم. عبارت  hypertext به این معنی است که در صفحات وب هر سندی یا صفحه ای می تواند به بینهایت صفحه دیگر انتقال یابد به این معنی ساختار صحفات براساس پیوندهایی است که بین اسناد مختلف شکل گرفته است.به عبارت دیگر مفهوم hypertext  در بی نهایت ارتباطی است که می تواند بین صفحات مختلف در دنیای وب شکل بگیرید. کلیلک کردن روی یک متن و منتقل شدن به صفحه دیگر نشان دهنده این مفهوم است.

آموزش طراحی سایت

مفهوم markupدر html  چیست؟

مفهوم بعدی کلمه markup به معنای نشانه گذاریست.اساس  صفحات وب براساس محتواست.برای اینکه بیتوانیم نوع محتوای سایت خودرا به مرورگرها مشخص کنیم باید از نشانه گذاری ها در طراحی سایت خود استفاده کنیم.به عنوان مثال برای این که  مشخص کنیم عبارت “طراحی سایت” یک عنوان است باید از یک نشانه یا tag به نام <title> استفاده کنیم.این یک مثال ساده از استفاده نشانه ها در زبان  htlml بود.

باکدام برنامه زبانhtmlنوشته می شود؟

برای اینکه بتوانیم کدهای نوشته شده توسط html را مشاهده کنیم باید ازنرم افزارهای متنی مثل notpad ویا نسخه های پیشرفته آن که بعدا به ان اشاره خواهیم کرد استفاده کنیم.فقط برای شروع کافی است کدهای نوشته شده را به صورت html در notpad ذخیره کرده وان را با استفاده از مرروگرها اجرا کنیم.

ساختار زبان html چیست؟

برای اینکه طراحی صفحات وب در تمام مروگرها به صورت یکسان نمایش داده شوند طی قرادادی جهانی ساختاری برای زبان html درنظر گرفته شده که همه طراحان وب باید آن را رعایت کنند. زبان html از شروع پیدایش خود تا به اکنون رشد محسوسی داشته وامروز شاهد به روز ترین نسخه آن یعنی نسخه ۵ آن هستیم.حال برای اینکه با سختار این زبان اشنا شویم از قاعده زیر برای شروع طراحی وب استفاده خواهیم کرد.

<!DOCTYPE html>
<html>
<head>
<title>company</title>
</head>
<body>
Content of the document……
</body>
</html>

برای شروع کد نویسی وطراحی وب باید از ساختار بالا برای طراحی سایت استفاده کرد.

  • <!DOCTYPE html> این تگ نشان می دهد که ما از html5 برای طراحی سایت استفاده کردهایم.
  •       <html> این تگ به ما می گوید که زبان برنامه نویسی ما دراین طراحی html  است.
  •      <head> ازاین تگ برای نوشتن کدها دلخواه برای اختصاصی کردن صفحات استفاده می شود.
  •     <title> از این تگ برای نوشتن عنوان صفحه استفاده می شود.
  •    <body> به طورکلی تمام محتویات یک صفحه وب در این تگ قرارداده می شود.

یکی از بهترین مراجع آموزشی برای یادگیری زبان های برنامه نویسی سایتhttps://www.w3schools.com است که درآن طرز صحیح کدها همچنین نوع عملکرد آنها به خوبی آموزش داده شده است.در ادامه جلسات آموزشی به صورت مفصلتری به این موض می پردازیم.

کاربرد Css در طراحی سایت چیست؟

زبان html  به تنهایی زبان کاملی نیست ونقص های فراوانی دارد . یکی از بزرگترین ایراداتی که به html وارد است عدم توانایی این زبان برای تغییرات ظاهری صفحات وب است.به عنوان مثال اگر می خواستیم رنگ یک فونت را به دلخواه تغییر دهیم  با این زبان برنامه نویسی این امکان وجود نداشت  بنابران زبان مکملی با نام css  این خلا را پرکرد و طراحی صفخات وب بسیار آسان تر از گذشته شد.

طراحی سایت

Css چیست؟

Css کوتاه شده عبارت Cascade Style Sheets است که نوعی زبان برنامه نویسی مکمل است.از این زبان برای تغییرات ظاهری در ساختار hml استفاده می شود.به بیان ساده هرگاه بخواهیم تغییر ظاهری در تگ های html ایجاد کنیم css بهترین گزینه خواهد بود.درواقع css برای طراحان وب به دلیل نمایش آنی تغییرات بسیار جذاب است.کاربر از کارکردن با css خسته نمی شود می تواند هرلحظه تغییرات ایجاد شده را به راحتی ببیند.

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

ثبت شماره تماس

شماره تماس خود رابه صورت کامل وارد نمایید

مثال 0912000000

WhatsApp chat