آموزش ساخت header(قسمت اول-پروژه دوم)

طراحی سایت اختصاصی | سید عباس حسینی 11 آبان 1399 0

آموزش ساخت header(قسمت اول-پروژه دوم)

به نام خدا با آموزش ساخت header(قسمت اول-پروژه دوم) در خدمت شما عزیزان هستم.

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

به جز زبان نشانه گذاری HTML و CSS چه زبان های دیگری در وبسایت استفاده می شود:

به جز زبان های نشانه گذاری در وبسایت برای ایجاد کردن حالت های نمایش خاص و اسلایدر ها از زبان های javascript و jQuery نیز استفاده می شود ما در آموزش ها و همینطور قالب های خودمان از وردپرس به عنوان مدیریت محتوا استفاده می کنیم و برای این کار نیاز به زبان php برای اضافه کردن قابلیت های دیگری به قالب خودمان داریم.

آیا تمام تصاویر در وبسایت دستی قرار می گیرند:

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

طرح اصلی وبسایت:

برای اینکه که یک قالب طراحی و کدنویسی شود نیاز به یک طرح اصلی دارید که توسط طراح گرافیک ایجاد می شود و در قالب photoshop  و یا xd وجود دارد و به افرادی که تخصص آنها در زبان نشانه گذاری HTML  و CSS است تحویل داده می شود تا نشانه گذاری شود. این طرح ها الزامی برای بهتر شدن کار است.

بررسی کردن Header وبسایت:

تصویری که مشاهده می کنید طرح اصلی است که ما می خواهیم آن را با استفاده از زبان های HTML  و CSS نشانه گذاری کنیم. در طرح مشاهده می کنید که یک نوار  در بالای صفحه قرار دارد که تصاویر لوگوی شبکه های اجتماعی در آن قرار دارد. و در قسمت بعد مشاهده می کنید که یک منو اصلی و در طرف دیگر یک لوگو وبسایت قرار دارد بررسی اولیه این را نشان می دهد که برای ایجاد نوار بالایی که شبکه های اجتماعی در آن قرار دارد باید از تگ nav استفاده کنیم. و همینطور برای ساخت منوی اصلی از یک تگ ul استفاده خواهیم کرد. نکته ای که وجود دارد مشاهده می کنید که تمام محتوای وبسایت با یک فاصله مشخص از دیواره های مرورگر فاصله گرفته اند. قبل از شروع نشانه گذاری باید آن را نیز ایجاد کنیم.

ایجاد چارچوب اصلی وبسایت:

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

توضیحات خصوصیات تگ های مهم:

تگ های مهمی که برای ایجاد این قسمت در قالب UL ، Nav ، Header

خصوصیات تگ Header:

تگ header در وبسایت همانطور که گفته ایم جز چارچوب اصلی است و به جز آن برای نمایش و ایجاد منوی اصلی وبسایت از آن استفاده می کنیم.

خصوصیات تگ Nav:

این تگ برای ایجاد کردن نوار ها در وبسایت به کار می رود این نوار ها می تواند نمایش لوگو شبکه های اجتماعی و راه ارتباطی باشد و یا قابلیت هایی که برای کاربران ایجاد کرده ایم باشد.

خصوصیات تگ Ul:

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

امیدوارم که از آموزش این قسمت راضی بوده باشید و اگر سوالی در خصوص این قسمت دارید زیر همین پست کامنت کنید و برای دانلود کردن این فایل آموزش روی این قسمت کلیک کنید.

 

قسمت های دیگر این مجموعه:

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

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

آموزش طراحی وب سایت قسمت چهارم 

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

 

 



دیدگاهتان را بنویسید

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