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

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

PSD-to-HTML-tutorial-asarayan-1.33

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

امروز می خواهم قالبی که دیروز در فتوشاپ طراحی کرده بودم با Html وCss تبدیل به یک قالب سایت کنم .

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

 


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

PSD-to-HTML-tutorial-asarayan-1.1

 

PSD-to-HTML-tutorial-asarayan-1.2

3.در مرحله دوم باید فایل PSD که دیروز طراحی کرده بودیم را در فتوشاپ باز کرده و قسمت هایی که می خواهیم در قالب خود استفاده کنیم را برید و در فولدر Images با نام های مشخص شده ذخیره کنیم .
برای برش ابزار Slice را انتخاب کرده و همانند تصویر زیر قسمت های مورد نظر را انتخاب کنید . طول همه برش ها 688px می باشد و عرض آنها با توجه به برش قسمت مورد نظر

PSD-to-HTML-tutorial-asarayan-1.3

4. از منوی File>Svae For Web را انتخاب کرده و تصاویر مورد نظر را با فرمت jpg در فولدر Images ذخیره کنید.بعد از ذخیره نام فایل ها را تغییر میدهیم .

PSD-to-HTML-tutorial-asarayan-1.4

PSD-to-HTML-tutorial-asarayan-1.5

5. می خوام وقتی موس روی کلیدها میره رنگ آنها تغییر پیدا کنه برای انجام اینکار بعد از اینکه برش های داده شده را ذخیره کردید برای تغییر رنگها مد هر 3 لایه را برابر با Overlay قرار داده سپس یکبار دیگر فقط منوها را خیره کنید .

PSD-to-HTML-tutorial-asarayan-1.6

 

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

PSD-to-HTML-tutorial-asarayan-1.7

PSD-to-HTML-tutorial-asarayan-1.8

PSD-to-HTML-tutorial-asarayan-1.9

PSD-to-HTML-tutorial-asarayan-1.10

PSD-to-HTML-tutorial-asarayan-1.11

مراحل بالا را برای دو منوی دیگر هم تکرار کنید .اسم هر تصویر را با توجه به عکس زیر تغییر دهید

PSD-to-HTML-tutorial-asarayan-1.12

 

شروع کد نویسی فایل HTML و CSS

1. هر دو فایل HTML و CSS را با یک ویرایشگر مثل نوت پو ویندوز یا نرم افزارهایی که در درس های قبل توضیح داده ام باز کنید .
2. کدهای ابتدایی فایل htmlرا تایپ کرده و آن را ذخیره می کنم

PSD-to-HTML-tutorial-asarayan-1.14

 

3. اگر یادتان باشه قسمت های اصلی بدنه سایت را اول مشخص می کنیم در فایل index.html بعد بوسیله نام هایی که برای آنها قرار دادیم در فایل Css تگهای مورد نظر را فراخوانی و تنظیمات ظاهری آنها را تغییر میدهیم .
من قسمت های اصلی را بین تگ body تایپ میکنم

PSD-to-HTML-tutorial-asarayan-1.14

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

4. من لوگو را با تگ h1 در فایل index.html مشخص میکنم و بعد تنظیمات آن را در فایل Css تغییر میدهم .

PSD-to-HTML-tutorial-asarayan-1.15

5. فایل Style.cssرا باز کنید تا تنظیمات ابتدایی مربوط به اندازه ، رنگ پس زمینه ، فونتها و لینکها را مشخص کنیم  را مشخص کنیم .

PSD-to-HTML-tutorial-asarayan-1.16

6. حالا تگ logo در فایل style.css فراخوانی میکنم .

PSD-to-HTML-tutorial-asarayan-1.17

PSD-to-HTML-tutorial-asarayan-1.18

وسط چین کردن قسمت های اصلی سایت

1. تگ Page-wrap را در Style.cssفراخوانی میکنم و تغییرات لازم را بعدش اعمال میکنم

PSD-to-HTML-tutorial-asarayan-1.19

ایجاد منوهای بالای صفحه

1. کدهای زیر را در فایل index.html ذخیره کنید

PSD-to-HTML-tutorial-asarayan-1.20

2. حالا id=nav را در فایل style.css فراخوانی میکنم و تغییرات لازم را انجام میدهم.

PSD-to-HTML-tutorial-asarayan-1.21

PSD-to-HTML-tutorial-asarayan-1.22

متن وسط صفحه

1.تگ id='article-area' را بین تگ main-content اضافه میکنم . به تصویر زیر نگاه کنید

PSD-to-HTML-tutorial-asarayan-1.23

2. حالا میریم کلاسهایی که تو فایل html اضافه کردیم را در فایل css فراخوانی و تغییرات لازم را اعمال کنیم .

PSD-to-HTML-tutorial-asarayan-1.24

PSD-to-HTML-tutorial-asarayan-1.25

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

به فایل Css دقت کنید

PSD-to-HTML-tutorial-asarayan-1.26

PSD-to-HTML-tutorial-asarayan-1.27

قسمت ساید بار

1.کنار متن می خواهم یک عکس قرار بدم من تصویر نداشتم از لوگو شرکت استفاده میکنم شما از هر تصویر دیگری خواستید استفاده کنید . مسیر عکس را در فایل index.html ذخیره میکنم

PSD-to-HTML-tutorial-asarayan-1.28

PSD-to-HTML-tutorial-asarayan-1.29

PSD-to-HTML-tutorial-asarayan-1.30

فوتر سایت

1. برای تغییر فوتر سایت footer را در تگ css فراخوانی میکنم و تغییرات لازم را بر روی آن اعمال میکنم

PSD-to-HTML-tutorial-asarayan-1.31

PSD-to-HTML-tutorial-asarayan-1.32

PSD-to-HTML-tutorial-asarayan-1.33

ساخت صفحات دیگر سایت

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

 

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

آخرین بروز رسانیچهارشنبه, 12 آذر 1393 16:45

نوشتن دیدگاه

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

دیدگاه‌ها   

0 #3 حسینی 1395-01-20 19:50
سپاس از آموزشهاتون.
تو این بخش عکس منوهارو در دو رنگ، به هم چسبوندین و شده یه عکس.... ولی تو آموزشهاتون نحوه استفادشو نذاشتین.ممنون میشم به اون روش هم یاد بدین.
نقل قول کردن
0 #2 nahid 1394-11-10 17:56
خیلی ممنونمممممممممم ممممممممم.
عالی بود خیلی کمکم کرد
نقل قول کردن
+1 #1 عبدالحکیم 1394-09-14 00:00
خیلی عالی
نقل قول کردن

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

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