طراحی قالب سایت شماره 3 با HTML و CSS

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

 head

آموزش طراحی قالب سایت
سومین قالب سایت را می خواهم امروز برای شما طراحی کنم .

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

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

 
1. برای شروع مثل درس اول و دوم  یک فولدر به نام tem3 ایجاد و دو فولدر با نام های Images وcss ایجاد کنید .
2. در مرحله بعد نوت پد را باز کنید یکبار فایل را با نام Index.html در پوشه اصلی ویکبار بانام Style.css درپوشه Css ذخیره کنید .

PSD-to-HTML-tutorial-asarayan-1.1

PSD-to-HTML-tutorial-asarayan-1.2

3. فایل Index.html را در یک ویرایشگر باز کرده تا قسمت های اصلی و بدنه سایت را مشخص کنیم .

psd-Convert-Html-asarayan-ch3-3

4. من از عکسی که در فتوشاپ درست کردم برای قسمت پس زمینه در فایل style.css استفاده میکنم.

5. من لوگوی سایت با id='logo در فایل Index.html اضافه میکنم سپس برای تغییرات ظاهری id='logo را در فایل style.css فراخوانی و تغییرات لازم را اعمال میکنم . به تصاویر زیر دقت کنید

psd-Convert-Html-asarayan-ch3-4

psd-Convert-Html-asarayan-ch3-5

psd-Convert-Html-asarayan-ch3-6

6.حالا نوبت میرسه به قسمت سمت راست صفحه سایت . id='sidebar را در مرحله اول ایجاد کردیم .اول لینکها را در فایل Index.html اضافه میکنم بعد میرم فایل Style.css و id='sidebar را فراخوانی و تنظیمات آن را تغییر میدهم .کدهای جدید را با کادر رنگی نمایش میدم که قابل فهم باشه

psd-Convert-Html-asarayan-ch3-7

psd-Convert-Html-asarayan-ch3-8

psd-Convert-Html-asarayan-ch3-9

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

psd-Convert-Html-asarayan-ch3-10

psd-Convert-Html-asarayan-ch3-11

8. حالا تنظیمات دو قسمت اضافه شده را در فایل style.css تغییر میدهم

psd-Convert-Html-asarayan-ch3-12psd-Convert-Html-asarayan-ch3-13

 

9. نوبیت میرسه به متن وسط صفحه ، id='main-content' را که وارد کردیم بین تگها متن خودمو وارد میکنم بعد میرم id='main-content' را در فایل style.css فراخوانی و تغییرات لازم را اعمال میکنم .

psd-Convert-Html-asarayan-ch3-14

 

psd-Convert-Html-asarayan-ch3-15

psd-Convert-Html-asarayan-ch3-16

10.در مرحله آخر هم چند لینک به فوتر اضافه کرده و یک کلاس هم برای حق کپی رایت و سایت سازنده ایجاد میکنم . بعد id='footer را در فایل style.css ذخیره کرده و تغییرات لازم را اعمال میکنم .

psd-Convert-Html-asarayan-ch3-17

 

psd-Convert-Html-asarayan-ch3-18

11. برای ساخت صفحات دیگر هم یک کپی از Index.html میگیرم و به ترتیب لینکهایی که دارم نام آنها را تغییر میدهم .برای اینکه متوجه بشید وارد حساب کاربری و فایل تمرینی را دانلود کنید

دموی تمرین در مرورگر

برای دانلود فایل Html و CSS کلیک کنید|| لینک دانلود :سرورمستقیم

آخرین بروز رسانیسه شنبه, 01 مهر 1393 09:10

نوشتن دیدگاه

تصویر امنیتی
تصویر امنیتی جدید

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»
تک وب دیزاین-قالب فارسی جوملا