طراحی قالب شماره 1 با Html و CSS

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

PSD-to-HTML-tutorial-asarayan-1.40

دیروز برای شما بازدید کنندگان عزیز طراحی قالب شماره 1 را در فتوشاپ به صورت کامل آموزش دادم. امروز می خواهم قالب طراحی شده را با استفاده از HTML و CSS شبیه سازی کنم . سعی میکنم مرحله به مرحله جلو برم تا کسی با سوالی مواجه نشه . هر جایی از مطلب آموزشی برای شما قابل فهم نبود تیکت بزارید تا در اولین فرصت پاسخ بدهم.
برای شروع فتوشاپ را باز کنید . قالبی که دیروز طراحی کرده بودیم را با زدن کلیدهای Ctrl+O وارد کنید.
1. همانطور که درتصویر زیر مشاهده می کنید قالب طراحی شده ما نمایش داده می شود . می خواهیم قسمت هایی از تصویر را برش داده و در طراحی قالب خودمان استفاده کنیم .
در اولین مرحله یک فولدر به نام tem asarayan ایجاد کرده و دو فولدر به نام Images برای تصاویر  و فولدر Css برای فایل استایل ظاهری قالب ایجاد می کنیم .

 

نوت پد را باز کنید یکبار فایل را با نام Index.html در پوشه اصلی ویکبار بانام Style.css درپوشه Css ذخیره کنید .

PSD-to-HTML-tutorial-asarayan-1.1

 

PSD-to-HTML-tutorial-asarayan-1.2

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

PSD-to-HTML-tutorial-asarayan-1.3

 

2. ابزار Slice Tool را انتخاب کنید.ناحیه بالای صفحه که کمی روشن تر هست را با این ابزار انتخاب می کنیم .کادر خودتان را جایی ادامه بدید که رنگ روشن با رنگ زمینه یکنواخت بشه.مهم نیست چه اندازه ای در بیاد در فایل Css اصلاحش میکنیم.

PSD-to-HTML-tutorial-asarayan-1.4
PSD-to-HTML-tutorial-asarayan-1.5

3. بعد از انتخاب ناحیه مورد نظر از منوی File >Save For Web را انتخاب کنید .در این صفحه مشاهده می کنید که کادر انتخاب شده نسبت به بقشه قسمت های روشن تر هست .اگر شما چند قسمت را انتخاب کرده باشید با کلیک بر روی هر کدام از آنها آن قسمت انتخاب می شود.

PSD-to-HTML-tutorial-asarayan-1.6
PSD-to-HTML-tutorial-asarayan-1.7

4.کلید Save را انتخاب کنید .در قسمت Slices می توانید تعیین کنید تمام قسمت ها ذخیره شود یا فقط قسمت مشخص شده .اسم قسمت بالای صفحه را bg.jpg قرار میدهیم.
5. بعد از ذخیره قسمت بالای صفحه لایه ها را فعال کنید . با ابزار Slice تصاویر را انتخاب می کنیم .

PSD-to-HTML-tutorial-asarayan-1.8

 

6.بعد از انتخاب ناحیه مورد نظر از منوی File >Save For Web را انتخاب کنیدو قسمت های انتخاب شده را در پوشه Images ذخیره نمایید .برای تغییر اسم ها نیز از تصویر زیر کمک بگیرید

PSD-to-HTML-tutorial-asarayan-1.9

 

نوبت میرسه به کد نویسی صفحات اصلی . یک نرم افزار ویرایشکر متن مثل نوت پد خود ویندوز یا Notepad++ را باز کنید .
7. تگ های اصلی صفحه HTML را وارد می کنیم .
برای قسمت های اصلی سایت با تگ id یک اسم مشخص میکنیم تا در فایل Css آنها را فراخوانی کرده و تغییرات ظاهری مورد نظر را اعمال کنیم .کدهای مشخص کننده قسمت صفحه اصلی را تایپ میکنم در ادامه کاملترش می کنم

PSD-to-HTML-tutorial-asarayan-1.10

 

همانطور که در تگ های بالا می بینید قسمت های اصلی بدنه با تگ ID مشخص شده

تگ Frame قسمت اصلی بدنه سایت که تمام قسمت های دیگرمثل menu.gallery.content.footer در این قسمت قرار میگیرند چون صفحه اصلی سایت ما 960 پیکسل هست
با استفاده از تگ Ligo مشخصات لوگو در فایل Css فراخوانی میشود. بقیه تگ ها هم به همین روال می باشد
8. فایل style.css را باز کنید تا تگهایی که بوسیله Id در index.html نوشته شده است را فراخوانی کنیم .قبل از فراخوانی تگها باید فایل Css را در صفحه اصلی سایت بین تگهای head فرخوانی کنیم . به این شکل

PSD-to-HTML-tutorial-asarayan-1.11

9. حالا دراولین مرحله می خواهیم کدهای مربوط به تگ body که بدنه اصلی صفحه سایت هست را در فایل css فراخوانی کنیم و ظاهر صفحه را کمی تغییر بدهیم .

PSD-to-HTML-tutorial-asarayan-1.12

در قسمت اول فاصله را مشخص کرده ایم
در قسمت دوم تگ body اول با استفاده از خاصیت background محل ذخیره تصویر را مشخص کردیم در همان قسمت به ترتیب نحوه تکرار.محل قرار گیری تصویر و رنگ پس زمینه را تعیین کردیم
درخط دوم font-family نوع فونتهای سایت و خط سوم سایز فونت را مشخص کردیم

حال صفحه شما باید به این صورت باشد

PSD-to-HTML-tutorial-asarayan-1.13

10. تمام مطالب سایت ما در یک قالب 960 پیکسلی که با Id-frame فراخوانی می شود باید قرار بگیرند.

PSD-to-HTML-tutorial-asarayan-1.16

 

11. من می خوام لوگوی شرکت خودمان را بالای صفحه سایت قرار بدم .id=logo را در فایل Css فراخوانی کرده و تنظیمات عرض و ارتفاآن را تعیین میکنم.(لوگوی شرکت خودتان را در فولدر image ذخیره کنید)
ابتدا در فایل index.html آدرس لوگو را وارد می کنم .

PSD-to-HTML-tutorial-asarayan-1.14

 

PSD-to-HTML-tutorial-asarayan-1.14.1

PSD-to-HTML-tutorial-asarayan-1.15

12. نوبت میرسه به قسمت منوی سایت ومن class منو را فراموش کردم اضافه کنم یک Div در فایل index.html ایجاد و نام آن را nav قرار میدم سپس در فایل Css فراخوانی و تغییرات لازم را اعمال میکنم.

PSD-to-HTML-tutorial-asarayan-1.17

11. اگر یادتون باشه چهار لینک ، صفحه اصلی سایت ما داشت . 4 لینک با نام های صفحه اصلی.محصولات .تماس با ما و درباره ما در فایل Index.html ایجاد میکنم

PSD-to-HTML-tutorial-asarayan-1.18

PSD-to-HTML-tutorial-asarayan-1.19

12. می خواهیم تمام لینکها از سمت راست و با یک فاصله مشخص از هم نمایش داده شود .کادر سفید رنگ هم به دور لینکها ایجاد شود .(توضیحات در تصویر زیر مشخص شده است)

PSD-to-HTML-tutorial-asarayan-1.20

13. میرویم سراغ قسمت گالری عکس یا همان اسلاید بار .ابتدا مسیر عکس را تو فایل index.htmlمشخص می کنیم سپس تنظیماتشو تو فایل style.css تغییر می دهیم .

PSD-to-HTML-tutorial-asarayan-1.21

 

PSD-to-HTML-tutorial-asarayan-1.22

14. حالا بریم تنظیمات مربوط به نحوه قرار گرفتن و رنگ و ارتفاعشو تغییر بدیم .(فایل css) توضیحات به طور کامل در تصویر زیر نوشته شده است

PSD-to-HTML-tutorial-asarayan-1.23

15. الان اگر روی لینکها کلیک کنید تغییر رنگی مشاده نمی کنید می خوام وقتی ماوس میره روی لینک ها رنگش قرمز بشه . دستور زیر را در فایل Css اضافه میکنم.

PSD-to-HTML-tutorial-asarayan-1.24

PSD-to-HTML-tutorial-asarayan-1.25

16. در قسمت اول اگر یادتون باشه پایین slidebar 4 تا عکس داشتیم که زیرشون یک نوشته داشت می خواهیم آن 4 قسمت را ایجاد کنیم اول میرویم تو فایل Index.html 4 کلاس براش تعریف میکنیم که بعدش بتوانیم آنها را در فایل style.css فراخوانی کرده و تنظیمات ظاهری آن را تغییر بدهیم .کافیه یکبار یک کلاس را تغییر بدید سپس از آن 3 کپی دیگر بگیرید و اسم تصاویر را تغییر بدید.(به تصاویر زیر دقت کنید)

PSD-to-HTML-tutorial-asarayan-1.26

PSD-to-HTML-tutorial-asarayan-1.27

PSD-to-HTML-tutorial-asarayan-1.28

17. بسیار خوب یک کادردیگه پایین 4 عکس داشتیم برای ایجاد این کادر id=content-area که در مرحله اول ایجاد کردیم استفاده می کنیم .اول یک class برای 4 عکس کوچک ایجاد می کنم.

PSD-to-HTML-tutorial-asarayan-1.29

 

PSD-to-HTML-tutorial-asarayan-1.30

PSD-to-HTML-tutorial-asarayan-1.31

حالا می خواهیم 4 عکس کنار هم قرار بگیرند

PSD-to-HTML-tutorial-asarayan-1.32

PSD-to-HTML-tutorial-asarayan-1.33

18.اجاز بدید متن کنار عکس ها را هم بزارم .یک Class به نام description ایجاد می کنم سپس با فراخوانی کردن آن در Css تغییرات لازم را اعمال می کنم.

PSD-to-HTML-tutorial-asarayan-1.34

PSD-to-HTML-tutorial-asarayan-1.35

PSD-to-HTML-tutorial-asarayan-1.36

 

19. امیدوارم خسته نشده باشید. رسیدیم به مرحله آخر یعنی درست کردن Footer . در مرحله آخر هم چند لینک اضافه میکنم سپس با استفاده از Css به آنها شکل میدهم.

20. در مرحله آخر هم تگ direction:rtl را بین تگ Body اضافه کرده تا متن ها از سمت راست نمایش داده شود .

PSD-to-HTML-tutorial-asarayan-1.39

PSD-to-HTML-tutorial-asarayan-1.37

PSD-to-HTML-tutorial-asarayan-1.38

 

PSD-to-HTML-tutorial-asarayan-1.40

برای دانلود فایل کامل آموزش کلیک کنید || لینک دانلود :سرورمستقیم

سرور دوم : کلیک کنید 
آخرین بروز رسانیسه شنبه, 23 شهریور 1395 10:29

نوشتن دیدگاه

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

دیدگاه‌ها   

0 #4 nahid 1396-07-27 18:35
سلام
چرا موقع نوشتن قطعه کد html برای قسمت thumb1 دو عدد باکس سفید ایجاد میشه؟
نقل قول کردن
0 #3 بهنام باقرپور 1396-05-14 19:15
سلام...وقت به خیر...
خدا خیرتون بده...واقعا جامع...و کامل با جزعیات
توضیح دادید...که کمتر کسی اینقدر وقت میذاره
واسه آموزش های رایگانش...!دمتو ن گرررم
نقل قول کردن
0 #2 سعید صبح خیز 1395-06-23 10:29
به نقل از sabooh:
سلام
من آموزش طراحی قالب در فتوشاپ رو میخوام اما روی لینک "طراحی قالب در فتوشاپ" که میزنم صفحه ای که میاد چیزی نیست.برای دیدن مرحله اول آموزش باید چکار کنم؟؟؟ برای تمام قالب هایی که گذاشتید همینطور هست

با سلام
لینک اصلاح شد
ممنون بابت اطلاع رسانی
نقل قول کردن
0 #1 sabooh 1395-06-20 14:40
سلام
من آموزش طراحی قالب در فتوشاپ رو میخوام اما روی لینک "طراحی قالب در فتوشاپ" که میزنم صفحه ای که میاد چیزی نیست.برای دیدن مرحله اول آموزش باید چکار کنم؟؟؟ برای تمام قالب هایی که گذاشتید همینطور هست
نقل قول کردن

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

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