طراحی قالب سایت شماره 6 با HTML . CSS

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

head

آموزش طراحی قالب سایت با HTML.CSS
روز قبل قالب شماره 6 را برای شما بازدیدکنندگان عزیز در فتوشاپ مرحله به مرحله طراحی کردم .امروز می خواهم قالبی که دیروز ساخته بودم را بوسیله کدهای HTML .CSS تبدیل به یک قالب سایت کنم . دوستان تمام آموزشهای طراحی قالب به صورت رایگان می باشد و برای ایجاد هر قالب در محیط فتوشاپ و سپس تبدیل آن به html .css حداقل 10 ساعت زمان برای درست کردن آموزش وقت گذاشته می شودپس خواهشمندم از دوستانیکه مطالب آموزشی را در سایت خود قرار میدهند لینک منبع رابه صورت مستقیم (نه فقط نوشتن منبع بلکه لینک) در پایان آموزش قرار دهند در غیر اینصورت استفاده از آموزشها در سایتهای دیگر مجاز نبوده و از لحاظ اخلاقی درست نمی باشد .

1. یک فولدر ایجاد کرده و دوپوشه با نام های imagesوcss ایجاد کنید.
2. یک ویرایشگر باز کرده و یکبار فایل مورد نظر را با نام index.html در پوشه اصلی و یکبار با نام style.css در پوشه css ذخیره کنید.

psd-Convert-Html-asarayan-LE6-1

بسیار خوب فایلی که دیروز در فتوشاپ طراحی کرده بودم را اجرا میکنم و مرحله به مرحله عکسها را برای شما ذخیره میکنم بعد کدشو می نویسم تا سوالی براتون ایجاد نشه.
مرحله اول طراحی  پس زمینه
3. در اولین مرحله همه قسمتها غیر از پس زمینه را غیرفعال کنید سپس پس زمینه را با نام body-bg.jpg ذخیره نمایید .

psd-Convert-Html-asarayan-LE6-2

 

4. هر دو فایل index.html و style.css را در یک ویرایشگر باز کنید تا تغییرات لازم را اعمال کنیم .
کدهای اولیه فایل index.html به صورت زیر هست در فایل خودتان وارد نمایید . توضیحات در تصویر مشخص شده است

psd-Convert-Html-asarayan-LE6-3

5. حالا کدهای اولیه در فایل css و تغییر تصویر پس زمینه را در فایل style.css مشخص می کنم.

psd-Convert-Html-asarayan-LE6-4
psd-Convert-Html-asarayan-LE6-5

مشخص کردن قسمت های اصلی سایت
اگر دقت کرده باشید سایت ما تشکیل شده از سه قسمت header.content.footer .حالا میریم این سه قسمت را در فایل index.html بوسیله تگ div اضافه میکنیم که بتوانیم بعدش قسمت های مورد نظر را در فایل style.css فراخوانی و تنظیمات آن را تغییر بدهیم .

psd-Convert-Html-asarayan-LE6-6

 

حالا به ترتیب هر سه قسمت را ایجاد می کنیم .
قسمت اول ساخت هدر سایت
برای ایجاد هدر من قسمت بالای سایت را اول گزینه های دیگرشو مثل لینکها و لوگو را غیر فعال میکنم بعد کل هدر را با ابزار Slice Tool با نام header.jpg در پوشه Images ذخیره و سپس id='header را در فایل Style.css فراخوانی و تنظیمات آن را تغییر میدهم .

psd-Convert-Html-asarayan-LE6-7

 

psd-Convert-Html-asarayan-LE6-8

psd-Convert-Html-asarayan-LE6-9

psd-Convert-Html-asarayan-LE6-10

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

psd-Convert-Html-asarayan-LE6-11

 

 

بعد از ذخیره کردن لوگو میرم تو فایل index.html و یک قسمت به نام id='container ایجاد میکنم تا لوگو و لینکها را داخل این قسمت قرار بدم
psd-Convert-Html-asarayan-LE6-12

حالا نوبت میرسه به تغییرات id='container در فایل Style.css

psd-Convert-Html-asarayan-LE6-13

 

psd-Convert-Html-asarayan-LE6-14

ایجاد لینکهای بالای صفحه
برای ایجاد لینکهای از تگ ul همراه با شناسه id='nav استفاده میکنم .شما می توانید با اضافه کردن تگ li تعداد لینکهای خودتان را کم یا زیاد کنید

psd-Convert-Html-asarayan-LE6-15

psd-Convert-Html-asarayan-LE6-16

برای تغییر ظاهر لینکها وارد فایل Style.css میشم
اگر دقت کنید وقتی روی لینکها می روید یک مربع ظاهر می شود .من در اینجا از کدهای هکcss استفاده کردم که بعضی از مرورگرها مثل اکسپلورر از این دستورات پشتیبانی نمی کنند .

psd-Convert-Html-asarayan-LE6-17

 

psd-Convert-Html-asarayan-LE6-18

ایجاد اسلاید شو

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

psd-Convert-Html-asarayan-LE6-19

 

حالا دو قسمت دیگه به id='content' اضافه میکنم به تصویر نگاه کنید

psd-Convert-Html-asarayan-LE6-20

حالا میخوام تصویری که ذخیره کردم را در فایل style.css فراخوانی کنم .

psd-Convert-Html-asarayan-LE6-21

 

 

psd-Convert-Html-asarayan-LE6-22

حالا می خوام متن وسط اسلاید شو را اضافی کنم . یک پاراگراف ایجاد و ظاهر آن را در فایل style.css تغییر میدهم.

psd-Convert-Html-asarayan-LE6-23

psd-Convert-Html-asarayan-LE6-24

psd-Convert-Html-asarayan-LE6-25

ایجاد محتوای زیر اسلاید شو
چند مرحله قبل id='paragraphs را اضافه کردم . سه تا کلاس برای پاراگراف ها همانند تصویر زیر ایجاد میکنم و بعد از آن متن مورد نظر را داخل هر پاراگراف قرار میدهم .

psd-Convert-Html-asarayan-LE6-26

psd-Convert-Html-asarayan-LE6-27

psd-Convert-Html-asarayan-LE6-28

psd-Convert-Html-asarayan-LE6-29

فوتر

امیدوارم تا این مرحله خسته نشده باشید برای ساخت منو id='footer' چند مرحله پیش ساخته بودیم بریم قسمت پایین قالب که در فتوشاپ طراحی کرده بودیم را بریده و در پوشه images ذخیره کنیم

psd-Convert-Html-asarayan-LE6-30

اول توفایل index.html تصویر تویتر و حق کپی رایت را کدنویسی میکنم.عکس کبوترها با لینک روبروی عکس را هم به طور جدا ذخیره کنید

psd-Convert-Html-asarayan-LE6-31

 

psd-Convert-Html-asarayan-LE6-32

مشاهده دمو قالب در مرورگر

 

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

 
آخرین بروز رسانیسه شنبه, 18 آذر 1393 22:38

نوشتن دیدگاه

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

دیدگاه‌ها   

0 #1 alibalavipour 1396-01-05 13:17
با تشکر از مطالب مفید و آموزنده شما
لطفا می توانید در مورد برش تصاویر و نحوه تفکیک کردن قسمت های
head,contnt,footer بیشتر توضیح دهید.
نقل قول کردن

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

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