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

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

head

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

لطفا زمانیکه دارید فایل را دانلود می کنید نظرات خودتان را برای ما ارسال کنید تا بسنجیم نحوه یادگیری بازدید کنندگان به چه نحوی بوده و اگر جایی در توضیحات با ابهام و سوالی وجود داره آن را رفع کنیم

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

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

psd-Convert-Html-asarayan-ch4-1

 

3.مثل مراحل قبل اول می آییم و قسمت های اصلی یا بدنه سایت را در فایل Index.html مشخص می کنیم بعد هر قسمت را در فایل Style.css فراخوانی کرده و تنظیمات آن را تغییر می دهیم .
فایل Index.html را در یک ویرایشگر مثل نوت پد یا نرم افزارهایی که در درس اول معرفی کردم باز کنید و کدهای ابتدایی صفحه اصلی سایت را وارد کنید .

psd-Convert-Html-asarayan-ch4-2

 

4. اجازه بدید بریم وارد فایل Style.css بشیم و تصویر پس زمینه با تنظیمات اصلی بدنه را مشخص کنیم.

psd-Convert-Html-asarayan-ch4-3

psd-Convert-Html-asarayan-ch4-4

5. همیشه در اولین مرحله عرض صفحه را مشخص می کنیم.id='wrap  را در فایل Index.html ذخیره میکنم بعد میرم تو فایل Style.css و id='wrapرا فراخوانی کرده و تنظیمات آن را تغییر میدهم .

psd-Convert-Html-asarayan-ch4-5

 

psd-Convert-Html-asarayan-ch4-6

اضافه کردن لوگوی بالای صفحه

6. من id='logo' را در فایل Index.html اضافه میکنم بعد میرم فایل Style.css و id='logo' را فراخوانی کرده و تنظیمات ظاهری آن را تغییر میدهم .

psd-Convert-Html-asarayan-ch4-7

 

psd-Convert-Html-asarayan-ch4-8

psd-Convert-Html-asarayan-ch4-9


اضافه کردن لینکهای بالای صفحه

1. همیشه لینکها را با id='navigation در فایل Index.html مشخص می کنیم و بعد از اضافه کردن لینکها تنظیمات ظاهری مربوط به رنگ و نوع باز شدن آنها را در فایل css تغییر میدهیم

psd-Convert-Html-asarayan-ch4-10

 

psd-Convert-Html-asarayan-ch4-11

psd-Convert-Html-asarayan-ch4-12

اضافه کردن تصویر وسط صفحه
1. برای اضافه کردن تصویر وسط صفحه یک id='flash بین تگ id='contentarea اضافه میکنم .مسیر عکس را هم در همان فایل Index.html میدهم بعد تغییرات لازم را در فایل css میدهم

psd-Convert-Html-asarayan-ch4-13

 

psd-Convert-Html-asarayan-ch4-14

psd-Convert-Html-asarayan-ch4-15

اضافه کردن سه قسمت پایین تصویر اصلی
1. برای اضافه کردن سه قسمت پایین تصویر وسط سه
id='column ایجاد میکنم بعد تغییرات لازم را در فایل Style.css اعمال میکنم .

psd-Convert-Html-asarayan-ch4-16

 

psd-Convert-Html-asarayan-ch4-17

psd-Convert-Html-asarayan-ch4-18

اضافه کردن فوترسایت

1. ما id='footer را در مرحله اول اضافه کرده بودیم فقط من در فایل Index.html حق کپی رایت را اضافه میکنم بعد میرم تنظیمات آن را در فایل css تغییر میدهم .

psd-Convert-Html-asarayan-ch4-19

 

psd-Convert-Html-asarayan-ch4-20

2. تنظیمات مربوط به رنگ لینکها و تگهای h1.h2.h3 را هم در آخر اضافه میکنم .

psd-Convert-Html-asarayan-ch4-21

psd-Convert-Html-asarayan-ch4-22

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

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

آخرین بروز رسانیپنج شنبه, 10 مهر 1393 11:22

نوشتن دیدگاه

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

دیدگاه‌ها   

0 #1 nahid 1394-11-10 18:00
بازم ممنون مانند سایت های قبلی که آموزش دادید خیلی کامل و خوب بود ممنونم
نقل قول کردن

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

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