طراحی قالب شرکتی به صورت خیلی ساده

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

پیش نمایش طرح وب سایت شرکتی

نرم افزار Sublime Text

برای طراحی قالب شرکتی از یک نرم افزار پیشرفته به نام Sublime Text3 استفاده می کنیم برای دریافت این نرم افزار باید وارد وب سایت SublimeText شوید و با توجه به سیستم عاملی که دارید دانلود و نصب کنید.

(تنها ویژگی بد این نرم افزار این است که فارسی را پشتیبانی نمی کند به همین دلیل متن های فارسی در این نرم افزار بهم ریخته نمایش داده می شوند)

ایجاد پروژه

خب  برای طراحی قالب شرکتی مون یک پوشه ایجاد می کنیم با نام project  (پوشه روت می باشد ) . داخل پوشه، یک text با نام index.html و یک text با نام style.css ایجاد می کنیم که هنوز هیچ کدی در آن ها ننوشته ایم.یک پوشه هم به نام images برای قرار دادن تمام تصاویر سایت ایجاد می کنیم.خب فعلا کافیه .

توجه داشته باشید که کامل شده کد امروز در انتهای آموزش قرار میدهیم.

فایل index.html

حالا فایل index.html  رو با نرم افزار sublime Text باز می کنیم .

در خط اول اگر تگ html> تایپ کنیم، خود نرم افزار تگ html را پیشنهاد می دهد که با انتخاب آن، ساختاری کامل کد html ایجاد می شود ! به همین راحتی و خوشمزگی(آموزش جلسه اول)

طراحی قالب شرکتی | ساختار کد html

تصویر2

ساختار رو به شکل زیر (تصویر 3 )با توجه به آموخته های جلسات قبل کامل می کنیم:

  • دو تا خاصیت مهم lang و dir به تگ html اضافه می کنیم.(که زبان سایت و دایرکشن را مشخص می کند)
  • داخل تگ <head></head>یک تگ meta برای پشتیبانی از زبان فارسی اضافه می کنیم که خیلی مهمه.
  • برای لینک فایل html با فایل CSS مون یک تگ <link> اضافه می کنیم .کافیه تایپ کنید link> تا خود نرم افزار تگ <link> را پیشنهاد بدهد. با انتخاب گزینه پیشنهادی، تگ link با تمام خصوصیاتش اضافه می شود. فقط باید خصوصیات تگ را مقدار بدهیم .

نکته: همانطور که می دانید باید آدرس فایل استایل را به خصوصیت href بدهیم. چون فایل css ما مستقیما داخل پوشه قرار گرفته، کافیه نام فایل رو به href بدهیم.در صورتی که فایل css داخل پوشه ای با نام styles بود باید به این شکل آدرس دهی می کردیم: styles/style.css
و در صورتی که فایل css ما یک پوشه عقب از پوشه project بود به این شکل آدرس دهی می کردیم: style.css/.. (این دوتا نقطه یعنی یک قدم برگرد عقب تر)

طراحی قالب شرکتی

تصویر 3

 

فایل style.css  و کدهای reset

در مرحله بعدی style.css را با نرم افزار sublime باز می کنیم.

همانطور که در جلسات قبل گفتیم اولین کاری که می کنیم این است کدهای reset را اضافه کنیم (یاد آوری :از طریق این کدها ،سایت ما در تمام مرورگرها تا جایی که امکان دارد به درست نمایش داده شود)

فقط این کدها رو اضافه می کنیم و فعلا کاری نداریم که تک تک خط ها چی هستند.

ایجاد بلوک اصلی سایت

خب حال می رویم سراغ اصل مطلب. ببینید برای اینکه ما هر قسمت از سایت رو ایجاد کنید (منو، کادر جستجو، هدر ، فوتر و …) از تگ div استفاده می کنیم یعنی باید اول بلوک ها رو جدا کنیم و بعد داخل هر بلوک هر المانی که مدنظرمون هست قرار بدیم.(آموزش تگ div-جلسه چهاردهم)

همانطور که از تصویر زیر مشخص است، سایتی که می خواهیم طراحی کنیم 100 در صد نیست یعنی از دو طرف فاصله دارد (کادر مشکی پایین، تمام عرض مرورگر است) .
پس در فایل html مون داخل تگ body یک تگ div با کلاس main ایجاد می کنیم. این بلوک اصلی سایت است که همه المان ها و بلوک های دیگر باید داخل ان قرار بگیرند.

 سپس در فایل style.css  به این div استایل می دهیم:

  • width (عرض) : 1200px می دهیم.
  • margin : 0 auto : این خصوصیت را به این شکل مقدار می دهیم تا div وسط قرار بگیرد.(آموزش جلسه چهاردهم)
طراحی قالب شرکتی

تصویر 4

ایجاد هدر

در تصویر زیر بلوک یا div هایی که در قسمت هدر سایت وجود دارد را مشخص کردیم که در ادامه باید تک تک آن ها را ایجاد کنیم:

 

طراحی قالب شرکتی | ساختار بلوک ها

تصویر 5

کد HTML: یک تگ div با کلاس masthead داخل تگ div با کلاس main ایجاد می کنیم که تمام بلوک ها یا div های هدر داخل این div قرار می گیرند(نام کلاس ها رو هر چی دوست دارید بذارید فقط واضح باشه) .

این بلوک masthead  خودش شامل دو تا بلوک (یا تگ div) می شود:

  • div اول  :برای منو بالایی و یکی برای کادر جستجو.
  • div دوم :برای منو اصلی و یکی برای لوگو.(این div رو در جلسات بعد ایجاد می کنیم)

پس یک div با کلاس top_menu_search برای بلوک منو بالایی و کادرجستجو  داخل div با کلاس masthead ایجاد می کنیم.

 

کد CSS:  حالا وارد فایل css می شویم و به div با کلاس top_menu_search استایل می دهیم.

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

خصوصیاتی که برای این div تعیین می کنیم:

  • Width: رو 100 درصد می دهیم تا با عرض div با کلاس main هم عرض باشد(یعنی 1200 پیکسل).
  • Background: مطابق میل خودمون رنگ رو انتخاب می کنیم.
  • Float: را right می دهیم . حدس بزنید به چه منظور از این خصوصیت استفاده کردیم؟ چون ارتفاع ندادیم ، پس رنگی که بک گراند دادیم مشاهده نمی شود بنابراین یا باید خصوصیت height استفاده کنیم یا به float مقدار بدهیم تا شناور شود.

کد HTML: قبل از اینکه بلوک منو و کادر جستجو رو ایجاد کنیم، اگر به تصویر 5 دقت کنید(خط سبز)؛ منو بالایی و کادر جستجو از لبه سایت فاصله دارند پس یک div دیگه با نام کلاس container ایجاد می کنیم.

کد CSS: در css مون به آن دو خصوصیت می دهیم:

  • Width: مقدار 1100px می دهم
  • Margin:0 auto

چون بلوک container وسط قرار گرفته و والد آن هم div با عرض 1200 پیکسل می باشد. پس این div از دو طرف(راست و چپ) به اندازه 50 پیکسل تورفتگی دارد.

طراحی قالب شرکتی | کد های CSS

ایجاد منو بالایی در هدر

کد HTML: حالا با توجه به تصویر پیش فرضی که از سایت داریم قسمت هدر سایت شامل دو بلوک منو و کادر جستجو می باشد. پس باید داخل تگ div با کلاس container دو تا دیگه بلوک (یا div) ایجاد کنیم:

  • div با کلاس pull-right
  • div با کلاس pull-left

کد CSS:  داخل فایل css مون کدی می نویسیم که بلوک pull-right سمت راست قرار بگیرد و بلوک pull-left سمت چپ.این کارو با چه خاصیتی انجام می دهیم ؟؟؟بله درسته خاصیت float (آموزش folat-جلسه دوازدهم)

کد HTML: برای ایجاد منو بالایی از لیست غیرشمارشی <ul> استفاده می کنیم.پس داخل div با کلاس pull-right یک منو با لیست غیرشمارشی <ul> ایجاد می کنیم(آموزش ul – جلسه هشتم)

 

کد CSS: سپس در فایل css بعد از کدهای reset می نویسیم :

یعنی به صورت کلی برای تمام تگ های a خط زیرین حذف شود.

  • به li ها با خصوصیات زیر استایل می دهیم:
    • خاصیت  display : inline-block : با این خاصیت تمام li ها کنار هم در یک ردیف قرار می گیرند.(می توانیم از  float:right هم استفاده کنیم، فرقی نداره می توانید تست کنید)
  • به المان a هم با خصوصیات زیر استایل می دهیم :
    • Padding: 20px 10px
    • Display:block : را مقدار block می دهیم چرا ؟ چون padding از راست و چپ اعمال می شد ولی از بالا و پایین اعمال نمیشد، پس این خاصیت رو اضافه می کنیم.
    • Color: #4c7d89
  • همچنین به تگ a در حالت هاور هم استایل می دهیم(hover:):
    • color: #0082C8

 

طراحی قالب شرکتی | ایجاد منو و استایل دهی

فایل index.html رو در مرورگر باز می کنیم، نتیجه کدها تا اینجای کار به شکل زیر می باشد:

نتیجه اجرا

تعریف فونت دلخواه

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

حالا ما می خواهیم کاری کنیم که مرورگر مجبور بشه ، دقیقا فونتی که ما دوست داریم رو اعمال کند مثلا الان فونتی که در تصویر 1 سایت داریم BYekan می باشد .

کد CSS: گام های زیر را برای اعمال فونت دلخواه به سایت طی می کنیم:

  • یک پوشه داخل پوشه اصلی project  ایجاد می کنیم به نام fonts و فونت BYekan رو داخل اون قرار می دهم.
  • بعد از کدهای reset ، یک سلکتور font-face@ می نویسیم(این نوع سلکتور رو تا حالا ندیده بودیم!) و دو خصوصیت به آن می دهیم:
    • Font-family: با این خاصیت برای فونت خودمون نام انتخاب می کنیم و هر جا به این فونت نیاز داریم با این نام صداش می زنیم. ( مثلا با نام dazhyar)
    • Src: به این خاصیت مسیر فایل رو می دهم.این خاصیت شامل دو قسمت است :
      • url : که مسیر فونت رو مشخص می کند.
      • Format: پسوند فونت را مشخص می کند.

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

کد HTML: چون ما می خواهیم در تمام سایت از همین فونت استفاده کنیم یک سلکتور body می نویسیم و به آن خاصیت های زیر را می دهیم:

  • خاصیت font-family: “dazhyar”,”Myriade pro”, Tahoma: در صورتی که فونت dazhyar نبود از Myriad pro در غیر این صورت از Tahoma استفاده می کند.(برای فونت byekan انگلیسی تعریف نشده است پس بهتره از فونت Myriade pro که خیلی به فونت بی یکان شبیه است، استفاده کنیم. در نتیجه اگر متنی شامل کلمات انگلیسی و فارسی باشد این دو فونت با هم اعمال می شود و تفاوت احساس نمی شود )
  • font-size:14px : به صورت سایز مشخص می کنیم.

طراحی قالب شرکتی | تعریف فونت

خب مجدد فایل index.html را اجرا می کنیم. نتیجه اجرا مطابق تصویر زیر است دقیقا چیزی که می خواستیم:

نتیجه اجرا

برای طراحی قالب شرکتی مون ، منو بالایی رو کامل کردیم و کدهای html  و css این جلسه به صورت کامل به شکل زیر است:

کد HTML:

کد CSS:

 

خب تا اینجای کار منوی بالایی هدر برای طراحی قالب شرکتی مون  انجام شد. می توانید در مرورگر incpect بگیرید و تک تک بلوک ها را ببینید و بهتر درک کنید. در جلسه بعد به ایجاد کادر جستجو برای هدر می پردازیم. امیدوارم از این اموزش لذت برده باشید.

باز هم تاکید می کنم اگر خودتون دست به کار نشین و کد نزنید، خوندن این مطالب هیچ فایده ای نداره! اگر سوال یا نظری دارین میتونید از طریق دیدگاه زیر همین پست با ما در ارتباط باشین. شاد باشید  ;-) 

به این مقاله چند تا ستاره میدی؟
[تعداد رای: 3 امتیاز: 5]