ورود به اکانت شما

نام کاربری *
رمز عبور *
مرا بخاطر بسپار

ایجاد حساب کاربری

فیلد های ستاره دار را پر کنید.
نام *
نام کاربری *
رمز عبور *
تکرار رمز عبور *
ایمیل *
تکرار ایمیل *
کپچا *
بارگذاری کپچا

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

توسط 03 فروردين, 1392 26032 0

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

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

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

 

این مورد را ارزیابی کنید
(0 رای‌ها)
آخرین ویرایش در پنج شنبه, 28 خرداد 1394 ساعت 08:43
کلیه حقوق متعلق است به فروشگاه آسارایان. طراحی و پشتیبانی: webriz
تک وب دیزاین-قالب فارسی جوملا