با تبدیل قالب به صفحه ی وب
بخش اول)
تصویر بالا مربوط به قالبی است که طراحی کرده ایم.موقعی که می خواهید یه تصویر را به صفحه وب تبدیل کنید باید به ساده ترین شکل ممکن این کار را انجام دهید.البته تا جایی که به قابل استفاده بودن و استاندارد بودن صفحه لطمه نخورد.پیشنهاد ما این است که قبل از شروع به کار،یک طرح کلی از تقسیم بندی های صفحه بکشید شاید یک سری از مشکلات به جای آینده همین حالا بروز کنند.یکی از مهمترین مسائلی که باید به آن توجه کنید بخش هایی است که سایزشان متغییر خواهد بود.مثلا در قالب ما،بخش وسط یعنی جایی که منو و پست قرار خواهد گرفت دارای این خصوصیت خواهد بود ولی بخش های دیگر مانند سرصفحه ،منظره و پایین صفحه ثابت هستند(از نظر ارتفاع).
نمی دونم شما از چه نرم افزاری استفاده می کنید ولی پیشنهاد ما Expression Web است.برادر خلف فرونت پیج که علاوه بر استاندارد بودن،سادگی برادر بزرگتر را هم به ارث برده است.
PhotoShop= PS
ExpressionWeb=EW
۱۶.برای شروع در فتوشاپ روی titlebar قالب rightclick کرده و Duplicate را انتخاب کنید.علامت چشم را از بغل layer set های Menu و MenuHover بر دارید.از منوی Layer روی Flatten Image کلیک کرده و Ok را بزنید.با فشردن کلید M و انتخاب ابزار Rectangle Marquee Tool کل فضای بالای منظره را انتخاب کرده و کلیدهای ctrl+insert را فشار دهید.حالا به مسیر File > new رفته و ok.این بار کلید های shift+insert را بزنید.چون باید صفحه ی وب ما سبک باشد،باید سعی کنیم تصاویر را با کمترین حجم ذخیره کنیم.کلید های alt+shift+ctrl+s را بزنید یا به File > Save for web رفته و بهینه ترین گزینه(اکثر اوقات jpg و گزینه ی High مناسبترین است) را برای ذخیره ی تصویر انتخاب کنید.تصویر را با نام header.jpg در پوشه ای بنام images ذخیره کنید.
حالا PS را رها کنید و به سراغ EW بروید.وقتی یک صفحه ی جدید در EW ایجاد می کنید کدهای HTML زیر را خواهید دید:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>Untitled 1</title> </head> <body> </body> </html>
باید چند کار اولیه را انجام دهیم.مثل راست به چپ کردن صفحه،اضافه کردن CSS اولیه و .. .
body{
direction:rtl;
margin:0;
background:#262626
}
خط اول مربوط به راست چین کردن صفحه است.خط دوم باعث حذف فاصله بین محتویات و لبه ی مرورگر می شود و خط سوم رنگ پس زمینه را تعیین می کند.
برای اعمال این استایل،باید آن را در داخل تگ استایل ،در بخش header صفحه قرار دهید:
... <style media="screen" type="text/css"> <!--CSS code here--> </style> ...
حالا یک div برای نگهداری قالب به بخش body اضافه کنید و id اش را container بگذارید.چرا id?چرا class نه؟چون فقط یک عدد از این نوع div در صفحه خواهیم داشت.از این عنصر برای نگهداری کل محتویات استفاده خواهیم کرد.
... <body> <div id="container"> </div> </body> ...
احتمالا شما هم حدس زدید که عرض این عنصر برابر با طول تصویر هدر می باشد.زیرا عرض این تصویر بیشتر از دیگران است.در بخش بعد این بحث را ادامه می دهیم.
