• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



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

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

25548 ۱۴ تیر ۹۲

در این جلسه از آموزش طراحی قالب، ساختار صفحه وبمان را با استفاده از کدهای 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 پیش خواهیم رفت. پس منتظر آموزش بعدی باشید.

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 36 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏

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

  • ‏‏
    meyti pugo(۲۲ تیر ۱۳۹۲)

    آهان

  • ‏‏

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

    • ‏‏
      کیوان علی محمدی(۱۰ مرداد ۱۳۹۲)

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

      • ‏‏

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

        • ‏‏
          کیوان علی محمدی(۱۱ مرداد ۱۳۹۲)

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

        • ‏‏

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

  • ‏‏

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

  • ‏‏

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

    • ‏‏
      کیوان علی محمدی(۱۲ شهریور ۱۳۹۲)

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

      • ‏‏

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

  • ‏‏

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

  • ‏‏

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

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

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

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

    • ‏‏
      سجاد دریس(۱۷ شهریور ۱۳۹۲)

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

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram