آموزش طراحی وب سایت رهیاب لپ تاپ (بخش چهارم) با Html و CSS

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

demo

با آخرین قسمت طراحی قالب سایت رهیاب لپ تاپ در خدمت شما هستم .

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

امروز می خواهم Footer را برای شما طراحی کنم .

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

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

 

 

1. فایل index.html و template.css را با یک ویرایشگر متن و فایل PSD قالب را با فتوشاپ باز کنید .
2. وارد فتوشاپ شده و ابزار Slice tool را انتخاب کرده سپس یک قسمت از تصویر فوتر را انتخاب و با نام Footer.jpg ذخیره میکنم .

rahyab-template1

3. در مرحله بعد از ذخیره تصویر باید قسمت Footer را در فایل index.html ذخیره کنم تا بتوانم مشخصات ظاهری آن را در فایل css تغییر بدهم . به همین منظور من یک دیویژن با نام id='footer به index.html اضافه میکنم . برای درک بهتر کدهای قبلی را minimize کرده ام

rahyab-template2

4. دو قسمت در داخل id='footer وجود دارد . من کدهای این قسمت را داخل id='footer وارد میکنم تا یکدفعه تنظیمات ظاهری آن را بوسیله فایل css تغییر بدهم .

rahyab-template3

تغییرات ظاهری در فایل css

rahyab-template4

تنظیمات 3 قسمت لینکهای فوتر

rahyab-template5

rahyab-template6

rahyab-template7

تنظیمات مربوط به کپی رایت
یک دیویژن دیگه به نام  id='copyright  داخل index.html ایجاد میکنم و با استفاده از css نحوه قرارگیری همراه با شکل ظاهری آن را در قالب سایت تنظیم میکنم

rahyab-template8

rahyab-template9

دموی قالب در مرورگر

 

آخرین بروز رسانیپنج شنبه, 28 خرداد 1394 08:43

نوشتن دیدگاه

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

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

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