آموزش طراحی قالب (فصل چهارم- جلسه اول) : تعیین ساختار صفحه وب

- visibility ٣۶ mode_comment

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

طرح کلی یک صفحه HTML به شکل زیر است :

توضیحات :

  1. Doctype : تعیین می کند کدهای ما کدام نسخه از HTML است . doctype بالا doctype اچ تی ام ال 5 است. یادتان باشد همیشه این کد در اولین خط قرار می گیرد.
  2. Html : به مرورگر می شناسانیم، که این یک فایل html است.
  3. Head : محل نوشتن مشخصات فایل از جمله عنوان، توضیحات،کلمات کلیدی، و وارد کردن فایل های خارجی css و js به فایل. این کدها در صفحه مرورگر نماش داده نمی شوند، اما برای بالا بردن رتبه سایت شما در موتورهای جستجو بسیار مهم هستند.
  4. Body : محل نوشتن کدهای html که در صفحه مرورگر برای کاربر نمایش داده خواهد شد.

فایل index.html که قبلا ساخته بودیم را با نرم افزار ویرایشگر کد مورد نظرتان باز کنید (من از دریم ویور استفاده می کنم.) و کدهای بالا را درون آن قرار دهید. فایل را ذخیره کنید ( حتما Unicode فایل utf-8 باشد تا در نمایش حروف فارسی مشکلی به وجود نیاید) و با مرورگر فایل را باز کنید.

جز یک صفحه سفید چیزی نخواهید دید، چونکه هنوز کدی در قسمت body قرار نگرفته است. اگر به عنوان صفحه نگاه کنید می بینید که page title نوشته شده است، همان کدی که در قسمت head نوشتیم.

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

در اول چونکه زبان فایل فارسی خواهد بود از صفت lang با مقدار fa برای تگ html استفاده خواهیم کرد.

برای تعیین Unicode صفحه تگ metaی زیر را نیز قبل از تگ title در قسمت head قرار دهید

استفاده مناسب از کدهای استاندارد می تواند در حجم، زیبایی و راحتی کار شما تاثیر بسیاری داشته باشه، که من سعی میکنم در این آموزش از کدهای استاندارد و از روش tableless (استفاده از تگ های div بجای تگ table) برای کدنویسی استفاده کنیم.

در جلسات قبلی گفته شد که صفحه وب ما از چند بخش (header , content , sidebar , footer ) تشکیل شده، برای شروع هر یک از قسمت ها را به صورت تگ div در نظر می گیریم، به کدهای زیر دقت کنید :

همانطور که در کدها مشاهده می کنید توضیحاتی (comment) در ابتدا و انتهای هر تگ قرار گرفته این توضیحات توی راحت تر خوندن فایل کمک می کنه و ابتدا و انتهای هر قسمت مشخصه.از id هم برای نام گذاری هر قسمت استفاده کردیم.

هنگان طراحی در روش tableless معمولا یک تگ نگه دارنده (#wrapper) برای کل اجزا صفحه در نظر می گیرند و اجزا صفحه رو درون اون قرار میدن.

از #container هم برای نگه داشتن سه قسمت right-sidebar , content و left-sidebar استفاده کردیم.

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

اگر مشکلی توی آموزش این جلسه واستون پیش اومده در قسمت نظرات مطرح کنید

comment دیدگاه کاربران
bahareh

خیلی ممنون
این ‘ ‘ رو هم گذاشتم افاقه نکرد
🙁
بازم این فایل رو مطالعه میکنم

آهان

safarzad

باسلام و احترام
ممنون از زحمات شما
یه سئوال: چرا از دیو wrapper به عنوان نگهدارنده استفاده می کنیم و خیلی هم متداول هست درصورتیکه تگ body هم دقیقاً میتونه همین کار رو انجام بده؟

کیوان علی محمدی

خوب مثلا با همین wrapper ما عرض صفحه رو تعیین میکنیم،درست نیست که شما body رو محدود کنید یعنی استاندارد نیست،با wrapper دستتون بازتره و از body میشه استفاده بهتری کرد.

safarzad

ممنون
این استاندارد رو از جایی میشه پیدا کرد. منظورم جانمایی ساختار صفحه هست.

کیوان علی محمدی

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

محمد

بله با div دست طراح خیلی بازتره , body هم محدود نمییشه البته الان با استانداردهای html5 وتگ هایی مثه article , nav , . . .. کم کم div ه کنار میره همونطور که table کم رونق شد چون وجود div های زیاد باعث سر در گمی طراح هم میشه

pouya8287

داداش کارت مثل همیشه حرف نداره زدی تو خال 😉

هومن

حتما باید دریم ویور داشته باشیم

کیوان علی محمدی

نه دوست عزیز،شما می تونید از هر IDE دیگه ای هم استفاده کنید،dream به خاطر امکاناتش کارو راحتتره میکنه.

سید علی

سلام
دریم ویور به خاطر نرم افزار خوبیه اما برای تازه کارا.وقتی شما میخواید کد های سنگین رو وارد کنین و نیاز به سرعت بیشتر دارین نرم افزار phpstorm بهتره.

hooman

پس باید یه نرم افزاری مثل این داشتته باشیم دیگه :

سجاد دریس

کدوم نرم افزار؟

hooman

منظورم اینه که شما میگید دریم ویور رو باز کنید

منم گفتم باید دریم ویور داشته باشیم جواب دادی چون دریم ویور کامل تره

منم میگم اگه دریم ویور رو نداشته باشیم باید یه نرم افزاری مثل اون داشته باشیم

میتونید بگید از چه ورژن دریم ویور استفاده کنیم بهترهچون تازه میخوام دان کنم

سجاد دریس

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

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
1 2