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

دسته بندی: آموزش
زمان مطالعه: 3 دقیقه
۱۴ تیر ۱۳۹۲

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

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

<!doctype html>
<html>
<head>
<title> Page Title </title>
</head>
<body>

</body>
</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 استفاده خواهیم کرد.

<!doctype html>
<html lang="fa">

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

<!doctype html>
<html lang="fa">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Page Title </title>
</head>

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

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

<body>
<!-- Start Wrapper -->
<div id="wrapper">

<!-- Start Header -->
<div id="header">

</div>
<!-- End Header -->

<!-- Start Container -->
<div id="container">

<!-- Start Right Sidebar -->
<div id="right-sidebar">

</div>
<!-- End Right Sidebar -->

<!-- Start Content -->
<div id="content">

</div>
<!-- End Content -->

<!-- Start Left Sidebar -->
<div id="left-sidebar">

</div>
<!-- End Left Sidebar -->

</div>
<!-- End Container -->

<!-- Start Footer -->
<div id="footer">

</div>
<!-- End Footer -->

</div>
<!-- End Wrapper -->
</body>

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

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

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

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

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

چه امتیازی به این مقاله می دید؟
نویسنده طاها دریس

نظرات کاربران

hooman

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

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

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

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

سجاد دریس

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

hooman

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

سجاد دریس

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

هومن

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

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

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

سید علی

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

pouya8287

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

safarzad

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

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

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

safarzad

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

محمد

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

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

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

meyti pugo

آهان

bahareh

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

bahareh

salam,merc az rahnameeton,man inkara ke goftid to ghesmate amoozesh anjam dadam,to ghesmate design ham tasvire background miad,vali vaghti ejra mikonam to mororgar namayesh nemide
yek soale dg ham hast
man adrese qesmate url ro intor minevisam
background-image: url (App_Data\images\1.jpg
dorost minevisam?

سجاد دریس

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

background: url(&#8216;app_date/images/1.jpg&#8217;);
meyti pugo

in app data chie minivisid??
من که بابت هر یک پوشه که میخوام برپردم عقب دو نقطه و اسلش میزارم به این صورت
background: url(../images/name.jpg)
به درستی هم اجرا میشه میشه بدونم چرا app_data میزارید؟

سجاد دریس

سلام.
من آدرسی که دوستمون قرار داده بود رو اصلاح کردم، app_data اسم یه پوشه هست.

سجاد دریس

سلام.
این آموزش رو بخونید

نیاز به لاگین

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