با تبديل قالب به صفحه ي وب
بخش اول)
تصوير بالا مربوط به قالبي است كه طراحي كرده ايم.موقعي كه مي خواهيد يه تصوير را به صفحه وب تبديل كنيد بايد به ساده ترين شكل ممكن اين كار را انجام دهيد.البته تا جايي كه به قابل استفاده بودن و استاندارد بودن صفحه لطمه نخورد.پيشنهاد ما اين است كه قبل از شروع به كار،يك طرح كلي از تقسيم بندي هاي صفحه بكشيد شايد يك سري از مشكلات به جاي آينده همين حالا بروز كنند.يكي از مهمترين مسائلي كه بايد به آن توجه كنيد بخش هايي است كه سايزشان متغيير خواهد بود.مثلا در قالب ما،بخش وسط يعني جايي كه منو و پست قرار خواهد گرفت داراي اين خصوصيت خواهد بود ولي بخش هاي ديگر مانند سرصفحه ،منظره و پايين صفحه ثابت هستند(از نظر ارتفاع).
نمي دونم شما از چه نرم افزاري استفاده مي كنيد ولي پيشنهاد ما Expression Web است.برادر خلف فرونت پيج كه علاوه بر استاندارد بودن،سادگي برادر بزرگتر را هم به ارث برده است.
PhotoShop= PS
ExpressionWeb=EW
16.براي شروع در فتوشاپ روي 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> ...
احتمالا شما هم حدس زديد كه عرض اين عنصر برابر با طول تصوير هدر مي باشد.زيرا عرض اين تصوير بيشتر از ديگران است.در بخش بعد اين بحث را ادامه مي دهيم.
