مقدمه ای در مورد طراحی سایت 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 را زده وصفحه جدیدی برای ما باز می شود.
که می توانیم عکس مورد نظر خود را از آن انتخاب کنیم.
که در این قسمت ما mouse over را انتخاب کرده و در قسمت apply، swap picture را زده و سپس در پنجره کناری choose picture را زده وصفحه جدیدی برای ما باز می شود.
که می توانیم عکس مورد نظر خود را از آن انتخاب کنیم.
نکته:عمس مورد نظر را در فرم افزار در hphotoshop به فرم دلخواه درآورده ایم.
یکی دیگر از افکت هایی که در طراحی این site به کار گرفته شده است، page load است همانطور که دیده می شود به هنگام آمدن تصویر قسمت بالای سمت چپ از گوشهتصویر حرکت می کند و در جای خود قرار می گیرد.
برای این کار در قسمت djtml effect در قسمت on، pageload را انتخاب کرده سپس در قسمت apply باید یکی از حالات زیر را انتخاب کنیم: drop in by work blastic fly in hop spiral wave wipe zoom که ما برای صفحه خود flying را انتخاب کرده ایم.
در قسمت choose setting نیز موارد زیر را مشاهده می کنیم: along corner from bottom from bottom left from bottom right from bottom-right by word from left from right from top from top-left from top-right from top right by word که ما برای سایت خود from bottom right را انتخاب کرده ایم که یعنی از گوشه پایین سمت راست عکس مورد نظر به جای خود در هنگام load شدن تصویر می آید.
نحوه ایجاد Form: برای ایجاد کردن یک form می توان به دو طریق عمل کرد یکی اینکه از منوی insert، قسمت form را انتخاب کرد و دیگری در قسمت html کد نویسی مربوط را انجام داد.
برای ایجاد فرم ابتدا ما باید در صفحه اول خود یک link برای form بسازیم که برای این کار ما ابتدا در قسمت دلخواه متن مربوط را می نویسیم می توانیم این کار را با چسباندن یک عکس نیز انجام دهیم.
در صفحه اول در قسمت دلخواه register را می نویسیم سپس با زدن دکمه Link یک پیوند را می سازیم.
یک صفحه جدید برای باز می شود برای اینکه صفحه مورد نظر را انتخاب کنیم.
در اینجا ما creat new page را می زنیم تا به یک صفحه جدید پیوند دهیم.
یک صفحه جدید برای ما باز می شود که می توانیم صفحه جدید را که همان form است را طراحی می کنیم.
در طراحی form نکته مهمی که باید مورد توجه قرار دهیم این است که چه پرسش هایی را باید مطرح کنیم تا کاربر یا متقاضی به آن جواب دهد.
ما در این form نام و نام خانوادگی و پیشینه شغلی و حقوق درخواستی را مورد نظر قرار دادیم.
برای ایجاد form ابتدا باید در صفحه form را قرار دهیم.
action="mailto:info@tmb-co.com" metjod="post" enctype="application/x-www-form-urlencoded که در پایان باید توجه داشت که بعد از اتمام کار form آنرا باید با دستور به پایان رساند.
name:در قسمت name نام مورد نظر را برای form انتخاب می کنیم.اگر form را نامگذاری نکنیم باید از طریق یک عدد برای ارجاع به form استفاده کنیم.
برای مثال در java script برای ارجاع اولین form در صفحه web از document.format[0]استفاده می کنیم.
action در این قسمت ما محل ارسال form را مشخص می کنیم یعنی مشخص می کنیم که form باید به کجا ارسال شود.
اگر صفت mailto را اضافه کنیم form ما به آدرس email فرستاده می شود مثلاً در اینجا ما از این دستور استفاده می کنیم.
action="mail to:info@tmb-co.com dukd form ما را به آدرس info@tmb-co.com می فرستد.
enctype- روش کد نویسی جهت استفاده برای ارسال داده های فرم به اسکریپت CGI در سرور را در اختیار مرورگر web قرار می دهد معمولاُ مقدار صفت enctype به "application/x-www-form-urlencoded" تنظیم می شود.
method-روشی است که مرورگر نتیجه form را به url مشخص شده در صفت action ارسال می کند مشحص می کند مقدار صفت method به podt یا get تنظیم می شود.
در صورت تنظیم مقدار method به getمرورگر وب داده های form را به سرور وب در انتهای url مه بوسیله صفت action در نشانه مشخص شده است ارسال می کند.
در صورت تنظیم method به postمرورگر وب داده های فرم را به سرور وب در یک پیام مجزا به سرور وب ارسال می کند.
ما در این website از روش post استفاده می کنیم.
در نخستین مرحله ما احتیاج داریم که درخواست کننده نام و نام خانوادگی خود را قرار دهد.
برای این منظور این گونه عمل می کنیم.
firstname: name="Nima" size "10"> همان طور که ملاحظه می کنید با نوشتن این فرمانها یک مادری به اندازه 10 کاراکتر که در قسمت size آنرا مشخص کرده ایم ایجاد می شود.
کاربر می تواند در این قسمت نام خود را تایپ کند.در قسمت بعد برای نام خانوادگی نیز به همین ترتیب عمل می کنیم.
last name: size:"zo"> که در این قسمت کاربر می تواند نام خانوادگی خود را تایپ کند.
در قسمت بعدی برای تایپ کردن سوابق شغلی از یک محیط متنی استفاده می کنیم و این کار را به وسیله text area انجام می دهیم به این ترتیب: your experiences: rows="10" cols="bo"> در این قسمت کاربر سوابق شغلی را در محیط متنی ابعاد شده تایپ می کند.
در قسمت میزان حقوق درخواستی کاربر مشاهده می شود که آنرا به این وسیله ایجاد می کنیم.
your wanted salary: typr="text" size"10">/p> در انتها برای تکمیل form باید دکمه های submit برای ثبت نام و reset برای انصراف را قرار دهیم.
برای قرار دادن دکمه های submit و قثسثف به این شکل عمل می کنیم: معتبرسازی یک فیلد متن تک خط یا چند خط قبل از ارائه نتیجه فرم به سرور وب شامل این می باشد که داده های دارد شده برای صحیح بودن وارسی شوند برای مثال، فرض کنید که HTML صفحه وب تان تعریف فرم را دارد و می خواهیم حتماً کاربر حقوق درخوساتی خود را درج کند.
برای این کار script زیر را می نویسیم: function validate(form) { if (form.sal.value=" ") { alert ("please enter your wanted salary"); form.sal.focus( ); } else return (true); } //--> در ابتدا برای شروع نوشتن script علامت را بین نشانه های شروع و پایان قرار می دهیم.
برای اینکه مرورگرهایی که نمی توانند java script را بخوانند script در صفحه نمایش داده نشود از علامت های استفاده کرده ایم.
در ابتدای کار ما باید یک تابع را معرفی کنیم که برای این کار از فرمان function استفاده می کنیم.
سپس نام تابع را که در اینجا valid teform است تعریف می کنیم.
برای نشان دادن شروع و پایان آن از {,} استفاده می کنیم.
در قسمت بعد گفته می شود که اگر مقدار sal برابر رشته خالی بود گزارشی را چاپ کن که برای چاپ گزارش از alert استفاده می کنیم.
چهارمین و پنجمین خز در java script از مرورگر وب می خواهد تا نماگر را به فیلد ورود داده متن salary حرکت دهد و یک مقدار false به نشانه html که تابع را فراخوانی کرده است باز گرداند.
جهت اینکه مرورگر web تابع validate form( ) را پس از کلیک نمودن دکمه submit بوسیله بازدید کننده اجرا کند صفت on submit را به نشانه اضافه کنید تا به صورت زیر در آید.
form name="nima" on submit="return validate form(nima)" حتماً عبارت return را اشافه کنید.
چون در غیر اینصورت حتی اگر تابع validate یک مقدار false را برگرداند ارائه خواهد نمود.
زمانیکه on submit درست به کار رود، مرورگر وب تابع را جهت معتبر سازی فرم ارائه می دهد و زمانیکه کاربر دکمه submit را کلیک کرد، اگر تابع مقدار true را بازگرداند مرورگر web نتیجه فرم را ارسال می کند و اگر مقدار false را برگرداند، مرورگر به فرم وارد نمودن داده باز می گردد و نماگر را در عنصر مشخص شده بوسیله روش فوکوس قرار می دهد.