بخشی از مقاله
مقدمه اي در مورد طراحي سايت 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 ملاحظه مي كنيم كه آدرس لينك به صورت زير تعريف شده است.
<a href "http://www1.ad.simens.de/cd
/siracon/index-76.html"/> </a>
اضافه كردن 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 را زده وصفحة جديدي براي ما باز مي شود. كه مي توانيم عكس مورد نظر خود را از آن انتخاب كنيم.
نكته:عمس مورد نظر را در فرم افزار در 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 را قرار دهيم.
<form name=Nima
action="mailto:info@tmb-co.com"
metjod="post"
enctype="application/x-www-form-urlencoded
كه در پايان بايد توجه داشت كه بعد از اتمام كار form آنرا بايد با دستور </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 تنظيم مي شود.
