مقاله مقدمه ای در مورد طراحی سایت TMB

توجه : به همراه فایل word این محصول فایل پاورپوینت (PowerPoint) و اسلاید های آن به صورت هدیه ارائه خواهد شد

  مقاله مقدمه ای در مورد طراحی سایت TMB دارای ۲۴ صفحه می باشد و دارای تنظیمات در microsoft word می باشد و آماده پرینت یا چاپ است

فایل ورد مقاله مقدمه ای در مورد طراحی سایت TMB  کاملا فرمت بندی و تنظیم شده در استاندارد دانشگاه  و مراکز دولتی می باشد.

توجه : در صورت  مشاهده  بهم ریختگی احتمالی در متون زیر ،دلیل ان کپی کردن این مطالب از داخل فایل ورد می باشد و در فایل اصلی مقاله مقدمه ای در مورد طراحی سایت TMB،به هیچ وجه بهم ریختگی وجود ندارد

بخشی از متن مقاله مقدمه ای در مورد طراحی سایت TMB :

مقدمه ای در مورد طراحی سایت TMB

می دانیم که زیبا بودن ظاهری یک صفحه web بسته به عکی هایی است که در آن به کار رفته است و امروزه تقریباً در تمامی صفحات web اصول کار بر قرار دادن مناسب عکس ها در یم صفحه است.

در طراحی سایت TMA نیز اصول کار بر همین اصل است.

نرم افزار به کار رفته در طراحی سایت TMB
micro soft front page است که نرم افزار متداولی در طراحی سایت به حساب می‌آید.
برای نظم دادن به کار از جداول HTML استفاده می کنیم.

نحوه شروع کار به این صورت است که ابتدا هر صفحه را به طور جداگانه ای طراحی می کنیم.
روی گزینه file رفته و سپس روی new و از منوی new گزینه page را انتخاب می کنیم.

برای شروع کار روی منوی table رفته و یک جدول مثلاً ۲*۲ را رسم می کنیم، لازم به ذکر است که اگر روی هر خانه جدول رفته و کلیک کنیم و سپس دوباره table را بزنیم در همان خانه یک جدول ترسیم می شود.

برای اینکه خطوط جدول از دید کاربر محو باشد باید روی table راست کلیک کرده و سپس روی گزینه table properties رفته و در قسمت border مقدار آنرا به ۰ تغییر می دهید، همانطوری که در شکل صقحه بعد ملاحظه می کنید خطوط table به صورت نقطه چین نشان داده شده است.
اگر در قسمت preview بروید مشاهده می کنید که جدول نشان داده نمی شود.

در ابتدا یک جدول ۲*۲ را انتخاب می کنیم سپس به روی خانه اول از جدوا رفته و دکمه 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 تنظیم می شود.