آموزش طراحی وب سایت (۲)

آاموزش طراحی وب سایت (2)

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

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

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

آموزش طراحی وب سایت (2)

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

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

پس از نوشتن کدهای بالا و باز کردن فایل html توسط یک مرورگر همانند فایرفاکس، چیزی که شما مشاهده خواهید کرد، یک صفحه کاملا خالی و سفید می باشد. در اینجا شما باید طراحی psd خودتان را به یک فایل html تبدیل کنید.

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

آموزش طراحی وب سایت (2)

تا اینجا شما یک جعبه ای ساخته اید که نه اندازه ای به خود اختصاص داده است، نه رنگ و یا حتی موقعیت قرارگیری. برای اختصاص دادن ویژگی هایی نظیر رنگ، حاشیه و.. شما می بایست به فایل css خود مراجعه کنید و این گونه المان ها را در درون فایل css بنویسید اما دقت کنید که هنوز کار شما با فایل html تان تمام نشده است. شما می بایست ۲ کار را حتما انجام دهید.

  • فایل css خود را به فایل html متصل کنید.
  • برای جعبه ای که ساخته اید یک نام قرار دهید. (به این علت که فایل html متوجه شود که ویژگی های نوشته شده در درون فایل css برای کدام جعبه می باشد.)

برای اتصال فایل css شما می بایست از قطعه کد زیر استفاده کنید. دقت داشته باشید که محل قرار گیری این کد در درون فایل  html در قسمت head می باشد.

شما می بایست در قسمت address در درون قطعه کد بالا، نام و ادرس فایل css خودتان را جایگذاری کنید. به عنوان مثال اگر شما فایل  css خودتان را در درون پوشه css و با نام style.css ذخیره کرده باشید، چیزی که باید در درون قسمت آدرس دهی بنویسید، عبارت است از: css/style.css

آموزش طراحی وب سایت (2)

تمامی قسمت های فوق ثابت می باشد و نیازی به تغییر آن ها نیست.

برای نام دهی به تگ div شما دو راه در پیش رو دارید.

  • استفاده از کلاس برای ادرس دهی
  • استفاده از ID برای ادرس دهی

دانستن این نکته ضروری است که ID برای div هایی استفاده می شود که تنها یک بار در درون سایت ظاهر می شود. به عبارتی اگر شما از ID برای ادرس دهی استفاده کنید، دیگر نمی توانید از آن نام برای ID های دیگری استفاده کنید.

آموزش طراحی وب سایت (2)

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

مطالب مرتبط

نظر خود را بنویسید

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