Logo
چاپ این صفحه

آموزش طراحی وب سایت رهیاب لپ تاپ (بخش چهارم) با 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

هر آموزشی بگید تو این کانال هست 

برای به اشتراک گذاشتن مطالب اجازه لازم نیست اما برای کپی کردن از اطلاعات درج منبع لازم است .(کپی برداری از مطالب بدون درج منبع حرام است)
تک وب دیزاین-قالب فارسی جوملا