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

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

haed

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

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

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

 

طراحی قسمت Footer قالب
در مرحله بعدی فایل Index.html را باز کرده و id='footer3' را همانند تصویر زیر به آن اضافه میکنم تا در مراحل بعدی بتوانم تغییرات ظاهری قسمت فوتر را در فایل css تغییر بدهم .من کدقسمت های قبلی را برای درک بهتر شما در ویرایشگر می بندم تا بهتر متوجه کدهای جدید اضافه شده بشوید

Shirin-asal-template1

فایل PDF قالب را در فتوشاپ باز کرده ام . ابزار Slice را انتخاب کرده و یک قسمت از آن را به صورت عمودی برش میزنم و در پوشه Image با نام footer.gif ذخیره میکنم .
نکته : سعی کنید کادری که انتخاب میکنید در صورتیکه طیف رنگی شما به صورت ثابت تکرار شده ظریف تر باشه چون حجم سایت شما کمتر میشه و باعث بالاتر رفتن سرعت لود صفحاتتون می شود .

Shirin-asal-template2

بعد از ذخیره تصویر وارد فایل CSS میشم تا تغییرات لازم را اعمال کنم .اول یک لینک به تصویر ذخیره شده میدهم و بعد از آن ارتفاع تصویر را برای فایل css مشخص میکنم

Shirin-asal-template3

خروجی قالب

Shirin-asal-template4

در قسمت فوتر سایت 3 قسمت وجود دارد که با نام های id='footer3' / id='footer2' / id='footer1'  در داخل یک قسمت کلی مشخص شده است .
من در ابتدا مشخصات قسمت کلی را در فایل css مشخص میکنم و بعد از آن با وارد کردن اطلاعات در 3 قسمت مشخص شده به طرح اصلی خودم نزدیک می شوم

Shirin-asal-template5

Shirin-asal-template6

داخلی هر قسمت اطلاعات خودم را در فایل index.html ایجاد میکنم و بعد از آن تغییرات لازم را در فایل css میدهم

اول عنوان فوتر 1

Shirin-asal-template7

دوم آدرس و تلفن

Shirin-asal-template8

تنظیمات footer1 در فایل css

Shirin-asal-template9

Shirin-asal-template10

اضافه کردن Footer 2 در فایل index.html

Shirin-asal-template11

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

Shirin-asal-template12

Shirin-asal-template13

اضافه کردن Footer3 به index.html  (در این قسمت من 6 عکس را از اینترنت دانلود کردم و ابعاد هر کدام را در فتوشاپ 50×50 پیکسل قرار دادم و در پوشه image ذخیره کردم )

Shirin-asal-template14

تنظیمات فایل css

Shirin-asal-template15

Shirin-asal-template16

در مرحله آخر هم نوبت میرسه به اضافه کردن کدهای کپی رایت

Shirin-asal-template17

Shirin-asal-template18

دموی نهایی قالب

پرسش و پاسخ :
سوال اول : در صورتیکه بخواهیم به تعداد لینکهای سایت ، صفحه جدید ایجاد کنیم باید چکاری انجام بدهیم و روش کار به چه صورتی می باشد ؟
باید با توجه به قسمت دوم آموزش متن بین ID=Content را پاک کرده و متن جدید با کد جدید جایگزین کنیم . فرض کنید می خواهید صفحه محصولات را طراحی کنید .
1. یک پوشه به نام Page در فولدر سایت که بر روی کامپیوتر ذخیره کرده اید ایجاد میکند .(image/css/page)
2. از صفحه index.html یک کپی گرفته و داخل پوشه page ذخیره کنید.
3. اسم index.html را به product.html تغییر بدهید .
4. product.html را با یک ویرایشگر باز کرده و فقط و فقط متن بین کد قسمت Content را تغییر بدهید . مثل عنوان .تاریخ و تصویر و بعد ذخیره کنید .
به عنوان مثال :

در صفحه index .html
<h3 >شکلات صادراتي شيرين عسل</h3>
<p>نوشته شده در تاريخ : 23/11/1390  نويسنده آموزش: سعيد صبح خيز</p>

حال صفحه product.html
<h3 >عرضه محصولات شیرین عسل</h3>
<p>نوشته شده در تاريخ : 30/10/1391  نويسنده آموزش: مرتضی والی </p>

سوال دوم : آیا می شود لینک بالای صفحه که به صورت عکس می باشد را تغییر داد ؟
بله . شما باید فایل PSD قالب را همیشه در یک فایل مستقل داشته باشید . کافیست فایل PSD قالب را در فتوشاپ باز کرده و عین مرحله اول آموزش نام جدید لینک را اضافه و بعد در پوشه تصاویر ذخیره کنید .

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

سوال چهارم : روش لینک دادن به بقیه صفحات به چه صورت هست ؟
روش لینک دادن به صفحات جزو آموزش مقدماتی HTML می باشد و کسی که می خواهد طراحی قالب را یاد بگیرد ، در ابتدا باید با آموزش مقدماتی html . css آشنایی کامل داشته باشد .

آخرین بروز رسانیشنبه, 16 اسفند 1393 14:50

نوشتن دیدگاه

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

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

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