مقدمه ای در مورد طراحی سایت TMB:
می دانیم که زیبا بودن ظاهری یک صفحه web بسته به عکی هایی است که در آن به کار رفته است و امروزه تقریباً در تمامی صفحات web اصول کار بر قرار دادن مناسب عکس ها در یم صفحه است.
در طراحی سایت TMA نیز اصول کار بر همین اصل است.
نرم افزار به کار رفته در طراحی سایت TMB
micro soft front page است که نرم افزار متداولی در طراحی سایت به حساب می‌آید.
برای نظم دادن به کار از جداول HTML استفاده می کنیم.
نحوه شروع کار به این صورت است که ابتدا هر صفحه را به طور جداگانه ای طراحی می کنیم.
روی گزینه file رفته و سپس روی new و از منوی new گزینه page را انتخاب می کنیم.
برای شروع کار روی منوی table رفته و یک جدول مثلاً 2*2 را رسم می کنیم، لازم به ذکر است که اگر روی هر خانه جدول رفته و کلیک کنیم و سپس دوباره table را بزنیم در همان خانه یک جدول ترسیم می شود.
برای اینکه خطوط جدول از دید کاربر محو باشد باید روی table راست کلیک کرده و سپس روی گزینه table properties رفته و در قسمت border مقدار آنرا به 0 تغییر می دهید، همانطوری که در شکل صقحه بعد ملاحظه می کنید خطوط table به صورت نقطه چین نشان داده شده است.
اگر در قسمت preview بروید مشاهده می کنید که جدول نشان داده نمی شود.
در ابتدا یک جدول 2*2 را انتخاب می کنیم سپس به روی خانه اول از جدوا رفته و دکمه insert option را زه و عکس مناسب خود را انتخاب می کنیم.
در طراحی این سایت ما عکس ها را داخل دایرکتور images ریخته ایم.
ابتدا مطابق آنچه گفته شده یک جدول طراحی کرده سپس در خانه اول نیز یک جدول دیگر به طوری که یک سطر در خانه اضافه شود اضافه می کنیم به قسمت insert pic رفته و عکس هایی را که در برنامه فتوشاپ به اندازه موردنظرها که است تبدیل شده را انتخاب کرده و ok را کلیک می کنیم.
در طراحی دکمه ها نیز از روش عکس استفاه شده است به این ترتیب که عکس های انتخاب شده برای دکه ها دارای اندازه کوچکتری نسبت به عکس های دیگر هستند.
به این ترتیب با ایجاد جداول و چسباندن عکس ها در جدول و نوشتن متون در قسمت های لازم صفحه web ما کامل می شود و برای ساختن دیگر صفحات نیز به همین ترتیب عمل کرده و آنها را در یک دایرکتوری مناسب ذخیره می کنیم.
نکته:چون اکثر صفحات استفاده شده در این web site دارای شکل ظاهری شبیه به یکدیگر باشند پس ما ابتدا صفحه اول را save کرده و برای ساختن صفحان بعدی تغییراتی در مکان های مورد نظر خود در قسمت های مناسب می دهیم.
link کردن:
یکی از نکات مهمی که در صفحات web وجود دارد link کردن صفحات است.
در واقع link کردن است که یک website را می سازد برای link کردن ابتدا روی قسمت مورد نظر کلیک می کنیم.
سپس دکمه insert hyper link که در قسمت بالای صفحه قرار داده شده و عکس یک کره زمین را دارد را کلیک می کنیم.
سپس یک صفحه باز می شود که در آن باید صفحه مورد نظر خود را کلیک کنید.
همچنین می توانید یک آدرس اینترنتی را در قسمت address تایپ کرده تا با کلیک کردن کاربر در آن قسمت به سایت اینترنتی مورد وصل شود.
در سایت TMB در همه صفحات یک عکس گذاشته شده که بر روی آن sivacon نوشته شده است، که هدف از گذاشتن آن اتصال به سایت Siemens است که برای این امر همانطور که گفته شد روی قسمت مورد نظر کلیک کرده سپس صفحه جدیدی با زدن دکمه insert hyper link باز می شود که در قسمت address باید آدرس مورد نظر که همان www.ad.siemens.de/cd/siva.com
/index-76.htm
است را تایپ کرده و سپس ok را کلیک کنیم.
نکته:
با کلیک کردن روی html در front page ملاحظه می کنیم که آدرس لینک به صورت زیر تعریف شده است.
/siracon/index-76.html/>
اضافه کردن DHTML effects:
DHTML یا همان dynamic htmlکه در اغلب صفحات web به کار می رود، در زیباسازی صفحات web بسیار مهم است.
dynamic Html یا همان html فعال شامل کارهایگرافیکی است که در روی صفحه web انجام می گیرد.
در طراحی سایتTMB از dhtml effects بسیار استفاده شده است.
همان طور که در شکل ها ملاحظه می کنید در ستون TMB home دکمه های زیادی وجود دارد که اگر روی هر یک از آنها mouse حرکت کند به شکل دیگری تغییر می کند.
برای این کار ابتدا روی قسمت مورد نظر کلیک می کنیم در منوی format روی dynamic HTML effects کلیک می کنیم.
یک صفحه بباریک برای ما باز می شود.
در قسمت on چند گزینه را ملاحظه می کنیم که عبارتند از:
click
double click
mouse over
page load
که در این قسمت ما mouse over را انتخاب کرده و در قسمت apply، swap picture را زده و سپس در پنجره کناری choose picture را زده وصفحه جدیدی برای ما باز می شود. که می توانیم عکس مورد نظر خود را از آن انتخاب کنیم.