ورود به اکانت شما

نام کاربری *
رمز عبور *
مرا بخاطر بسپار

ایجاد حساب کاربری

فیلد های ستاره دار را پر کنید.
نام *
نام کاربری *
رمز عبور *
تکرار رمز عبور *
ایمیل *
تکرار ایمیل *
کپچا *
بارگذاری کپچا

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

توسط 03 فروردين, 1392 10642 0

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

HEADEدر مرحله اول طراحی قالب را در محیط فتوشاپ به طور کامل برای شما توضیح داده ام . طبق برنامه زمان بندی شده بخش مدیریت برای طراحی قالب مجاز به آموزش 10 طراحی  قالب برای بازدید کنندگان عزیز هستیم که تا به امروز 5 قالب به طور کامل آموزش داده شده است . امروز می خواهم قالبی که روز قبل در برنامه فتوشاپ طراحی کرده بودم را با HTML وCSS تبدیل به یک وب سایت کامل کنم . با ما همراه باشید تا این آموزش را شروع کنیم.

تبدیل قالب فتوشاپ به HTML

1. یک فولدر به نام Tem5 روی دسکتاپ خودتان ایجاد کنید .
2. دو فولدر به نام های images.Css درون پوشه اصلی همانند تصویر زیر ایجاد کنید .
3. نوت پد را باز کرده یکبار فایل را با نام Index.html در پوشه اصلی ویکبار بانام Style.css درپوشه Css ذخیره کنید

psd-Convert-Html-asarayan-ch5-1

 

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

psd-Convert-Html-asarayan-ch5-2

5. دستورات مربوط به تگ body را همانند تصویر زیر در فایل Style.css تایپ و سپس ذخیره کنید .
6. حال می خواهم تصویر پس زمینه را با تصویری که از فایل اصلی جدا کردیم و در پوشه images ذخیره کردیم و در فایل Style.css فراخوانی کنیم .

psd-Convert-Html-asarayan-ch5-3

7. تگ بدنه اصلی سایت id='container هست که اول بریم آن را در فایل Style.css فراخوانی کنیم و اندازه صفحه اصلی سایت را مشخص کنیم

psd-Convert-Html-asarayan-ch5-4

ایجاد بخش هدر

1. برای ایجاد لوگوی سایت از تگ h1 استفاده میکنم و لینکش میدم به صفحه اصلی بعد میرم تنظیمات اندازه و نحوه قرارگیریشو در فایل Style.css تغییر میدهم .

psd-Convert-Html-asarayan-ch5-5

psd-Convert-Html-asarayan-ch5-6

psd-Convert-Html-asarayan-ch5-7

2. حالا می خوام آن دوتا لینک بالای صفحه را ایجاد کنم . برای ایجاد آن دوتا لینک از id='top-menu در بین تگ header استفاده میکنم . هر جا که بخوام تنظیمات یک نقطه خاصی را مثل لینک صفحه اصلی را در فایل css تغییر بدم یک کلاس براش تعریف میکنم که راحت تر باشم

psd-Convert-Html-asarayan-ch5-8

psd-Convert-Html-asarayan-ch5-9

psd-Convert-Html-asarayan-ch5-10

ایجاد Content یا قسمت اصلی صفحه
1. برای ایجاد قسمت اصلی صفحه از id='main استفاده میکنم . ابتدا بوسیله کدهای Css یک کادر با اندازه مشخص شده ایجاد کرده سپس صفحه را به دو قسمت یکی برای متن و دیگری لینکهای سمت راست تقسیم می کنم

psd-Convert-Html-asarayan-ch5-11

2. حالا می خوام مطلب اولی که با یک عکس کوچیک نمایش دام را وسط صفحه اصلی ایجاد کنم . سعی میکنم برای اینکه راحت تر بتوانم ظاهر فایل ها را تغییر بدهم برای هر کدام از موضوعات یا قسمت های یک class تعریف کنم .خوب به کدهای زیر دقت کنید که بین تگ  id='main اضافه شده است

psd-Convert-Html-asarayan-ch5-12

بدون تغییر فایل css چنین صفحه ای باید داشته باشید

psd-Convert-Html-asarayan-ch5-13

3. حالا میرم Id های اضافی شده در صفحه اصلی را در فایل css فراخوانی کرده و تنظیمات آنها را تغییر میدهم . یکی یکی تغییر میدم تا ببینید چطوری صفحه اصلی تغییر پیدا میکنه

psd-Convert-Html-asarayan-ch5-14

psd-Convert-Html-asarayan-ch5-15

psd-Convert-Html-asarayan-ch5-16

psd-Convert-Html-asarayan-ch5-17

psd-Convert-Html-asarayan-ch5-18

psd-Convert-Html-asarayan-ch5-19

psd-Convert-Html-asarayan-ch5-20

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

psd-Convert-Html-asarayan-ch5-21

psd-Convert-Html-asarayan-ch5-22

5. حالا مراحل بالا را کپی میکنم برای قسمت دوم  با این تفاوت که به جای عکس اول یک عکس دیگه جایگزین میکنم دقت کنید

psd-Convert-Html-asarayan-ch5-23

psd-Convert-Html-asarayan-ch5-24

6. برای اینکه متن ها از سمت راست نمایش داده بشه دستور direction:rtl را بین تگ body اضافه میکنم. دستور text-align: justify را برای تراز کردن متن اضافه میکنم

psd-Convert-Html-asarayan-ch5-25

psd-Convert-Html-asarayan-ch5-26

لینک های پایین صفحه

1. من دو لینک پایین صفحه برای مطلب قبلی و بعدی ایجاد میکنم .

psd-Convert-Html-asarayan-ch5-27

psd-Convert-Html-asarayan-ch5-28

psd-Convert-Html-asarayan-ch5-29

ساخت قسمت منوی سمت راست

1. برای ساخت سمت راست سایت از id='sidebar استفاده میکنم . اگر فراموش نکرده باشید در فتوشاپ 7 لینک در قسمت راست وجود داشت . ابتدا این لینکها را در فایل Index.html ایجاد و تغییرات مربوط به ظاهر آن را در فایل css تغییر میدهم .

psd-Convert-Html-asarayan-ch5-30

psd-Convert-Html-asarayan-ch5-31

psd-Convert-Html-asarayan-ch5-32

psd-Convert-Html-asarayan-ch5-33

psd-Convert-Html-asarayan-ch5-34

ساخت کادر جستجو

1. حالا نوبت میرسه به ساخت کادر جستو. یک id='search برای این قسمت با دو کلاس در فایل Index.html تعریف میکنم بعد تغییرات لازم را در فایل css میدم

psd-Convert-Html-asarayan-ch5-35

psd-Convert-Html-asarayan-ch5-36

psd-Convert-Html-asarayan-ch5-37

ساخت قسمت تماس با ما

1.به کدها توجه کنید

psd-Convert-Html-asarayan-ch5-38

psd-Convert-Html-asarayan-ch5-39

2. به تگ p یک کلاس contact-us اضافه کنید تا متن را در فایل css وسط چین کنیم

psd-Convert-Html-asarayan-ch5-40

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

برای تغییر رنگ پس زمینه وسط صفحه : background: white

برای تغییر رنگ پس زمینه منوی راست و فاصلش از طرفین : padding: 15px 20px 15px 15px ; | border: 5px solid white; | background: #f8f8f8;

حالا قالب شما باید به این شکل در اومده باشه

psd-Convert-Html-asarayan-ch5-41

ساخت پایین سایت یا فوتر

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

psd-Convert-Html-asarayan-ch5-42

psd-Convert-Html-asarayan-ch5-43

psd-Convert-Html-asarayan-ch5-44

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

مشاهده دمو در مرورگر

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

این مورد را ارزیابی کنید
(0 رای‌ها)
آخرین ویرایش در سه شنبه, 08 مهر 1393 ساعت 08:53
کلیه حقوق متعلق است به فروشگاه آسارایان. طراحی و پشتیبانی: webriz
تک وب دیزاین-قالب فارسی جوملا