طراحی و ساخت یک وب سایت

در این مقاله ۲۰ترفند جهت طراحی وساخت آسان یک وب‌سایت،ارائه شده است.قطعاٌبا مراحل
طراحی و ساخت یک سایت آشنائی‌دارید.هنگامی که با طرح عظیمی مانند ساخت یک وب سایت
جدیدمـواجه می شوید،نهراسیدزیرا این کارچندان هم مشکل نیست.در اینجا تعدادی از
طراحان حرفه ای وب،راهنمایی های مفیدی در زمینه فوق ارائه کرده اند تا با بکار گیری
آنهادر زمان صرفه جوئی کرده و از همه مهم تردردسرهای شما نیز،کمترشود.

یک سایت ساده طراحی کنید
یکی از بهترین روشها برای تسهیل
طراحی سایت،سادگی آن است.اما عجیب آنکه،بسیاری ازطراحان،چنین مسئله ای رانادیده می
گیرند.بخشهای غیرضروری به سایت اضافه نکنید. متنهای متحرک جاوااسکریپتی و فایل های
انیمیشنGIFو نیز ویژگی محو شدن صفحه،نباید مورد استفاده قرار گیرند.
از یک نرم
افزار مناسب استفاده کنید
اگر می خواهید از یک برنامه کامل
WYSIWYGمانندMacromedia Dreamweaverیا Adobe Goliveاستفاده کنید،وارد تنظیماتFTPشده
و سایت خود را در برنامه Dreamweaverتعریف کنید.این کار درد سر شما را کم می
کند؛چرا که ویرایشگر شما قادر خواهد بود به سادگی،فایلهای سایت را ردیابی کرده و از
آنها مطلع باشد.

بدون flash،اجزای سایت را جذاب کنید
بدون شک flash برنامه
جذابی است و بسیـار‌ی از طراحان حـرفه ای وب از آن استفـاده می کنند.اما مشکل
اینجاست که استفاده از این برنامه برای اغلب افراد بسیار پرهزینه اسـت.برنامه های
زیـادی وجـوددارند که بـاهزینه بسیارکمـتری قادرند،جـلوه هایflash را ایجاد
کنند.برای مثال،بـرنامهSwish  امکان ایجاد جلوه های متـنی را به شمـا می
دهد و بـرنامه  نتایج مفید مشابهی خواهد داشت.

یک سایت ساده طراحی کنید
یکی از بهترین روشها برای تسهیل
طراحی سایت،سادگی آن است.اما عجیب آنکه،بسیاری ازطراحان،چنین مسئله ای رانادیده می
گیرند.بخشهای غیرضروری به سایت اضافه نکنید. متنهای متحرک جاوااسکریپتی و فایل های
انیمیشنGIFو نیز ویژگی محو شدن صفحه،نباید مورد استفاده قرار گیرند.
از یک نرم
افزار مناسب استفاده کنید
اگر می خواهید از یک برنامه کامل
WYSIWYGمانندMacromedia Dreamweaverیا Adobe Goliveاستفاده کنید،وارد تنظیماتFTPشده
و سایت خود را در برنامه Dreamweaverتعریف کنید.این کار درد سر شما را کم می
کند؛چرا که ویرایشگر شما قادر خواهد بود به سادگی،فایلهای سایت را ردیابی کرده و از
آنها مطلع باشد.

بدون flash،اجزای سایت را جذاب کنید
بدون شک flash برنامه
جذابی است و بسیـار‌ی از طراحان حـرفه ای وب از آن استفـاده می کنند.اما مشکل
اینجاست که استفاده از این برنامه برای اغلب افراد بسیار پرهزینه اسـت.برنامه های
زیـادی وجـوددارند که بـاهزینه بسیارکمـتری قادرند،جـلوه هایflash را ایجاد
کنند.برای مثال،بـرنامه (www.swishzone.com)Swish امکان ایجاد
جلوه های متـنی را به شمـا می دهد و بـرنامه( www.effectmaker.com)Efectmakerهم
نتایج مفید مشابهی خواهد داشت.

URLها و کدهای مفید را یادداشت کنیدممکن است این کار چندان
جالب به نظر نرسد،اما کارآیی خوبی دارد.هنگام مرور در وب یک سندNotepadیاWordایجاد
کنید.سپس هر URLیا مطلب جالب توجهی که می بینید،در این فایل کپی کنید.بنابراین
هنگام ساخت یک سایت می توانید به این سند مراجعه کرده و ایده های ذخیره شده،الهام
بگیرید.
از پالت libraryدرDreamweaver،استفاده کنید
سایتی بسازید که بتوانید
به سرعت و در سطحی گسترده،آن را ویرایش کنید.هنگام کار با Dreamweaver،از قالبهای
حاوی اشیای کتابخانه ای استفاده کنید.بدین ترتیب عناصر در حال تغییر را می توان
بدون نیاز به باز کردن صفحات HTMLبه طور به روز رسانی کرد.

این کار برای سایتهای پویای در حال رشد عملکرد خوبی دارد.برای شی مورد نظر،کدهای
HTMLرا انتخاب کرده و پالتlibraryبکشانید.سپس نامی برای آن انتخاب کنید.اکنون برای
استفاده مجدد،کافی است آن را از پالت به محل مورد نظرخود بکشانید.به منظور ویرایش
نیز روی پالت دابل کلیک کرده و تغییرات لازم را انجام دهید.سپس اصلاحات انجام شده
را ذخیره کرده و روی دکمه update nowکلیک کنید.اکنون کل سایت به روز رسانی می
شود

به طور خودکار یک مجموعه عکس درست کنید
اگر در حال ایجاد یک
آلبوم عکس onlineهستید،از برنامه ای استفاده کنید که تمام کارهای مشکل را انجام می
دهد.برنامه (Creater www.express-soft.com/etc) creator
Express Thumbnaiعلاوه بر ایجاد صفحاتHTMLمناسب برای استفاده در وبتغییر داده و
نمونه های کوچکی از تصاویر (Thumnail) ایجاد می کند.
 
شیوه
نامه ها (stylesheets)را استاندارد کنید
سعی کنید نحوه استفاده از شیوه
نامه های خود را استاندارد کنید.بدین ترتیب یک قالبcssیا فایل جاوااسکریپت داریدکه
می توانید از آن در سایتهای مختلف با حداقل اصلاحات، استفاده کنید.همچنین،چرا برای
تمام سایتهایی که طراحی می کنید یک ظاهراستاندارد ایجاد نکنید؟این کار در زمان دراز
مدت موجب صرفه جوئی در وقت شما می‌شود.

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

یک قالب (template)ایجاد کنید
پیش از طراحی سایت ،یک قالب
ایجاد کنیدتا حاوی تمام عناصری باشدکه در کل صفحات سایت شما تکرار می شوند.به طور
نمونه می توان به عناصری چون پیوندهای مهم،لوگو،رنگهای یک پیوند و تگهای ALTاشاره
کرد.می توانید شیوه نامه های آبشاری نیز ایجاد کنید.

از ترفندGIFتک پیکسلی استفاده کنید این ترفند،هوشمندانه
ودرعین‌حال‌بسیارساده‌است.همچنین‌به‌سایت‌شماامکان‌می دهد،هنگامی که با درجه وضوح
متفاوتی دیده می شود،ترکیب اصلی خود را حفظ کند.در ابتدا،منظور از ایجاد HTMLاین
بود که به آسانی قابل فهم باشد،نه اینکه به عنوان زبانی برای طراحی جذاب یک صفحه وب
بکاررود.این ترفند در واقع استفاده از یک تصویر شفاف (Transparent)1×۱پیکسلی است که
می توانیددر هر جائی که فاصله بین اشیاءایجاد مشکل می کند،آن را وارد کنید.برای در
یافت اطلاعات بیشتر در این زمینه می توانید به
آدرسwww.dsiegel.com/tips/wonk5/single.html مراجعه کنید.

کدها را دریافت کنید
دستیابی به کدهای از پیش آماده،از
آنچه فکر می کنید،ساده تر است البته منظور،سرقت کد نیست.منابع زیادی از جمله www.bignosebird.com انواعی
ازاسکریپتهای‌قابل دریافت راارائه می دهند.در بخشی از سایتScriptsearch.com،موارد
بسیاری،از نمونه های اسکریپتهای ASPگرفته تا جاوااسکریپت،قابل دریافت است.

از طرحهای تصویری (image maps)استفاده کنید
اگر مجبوریدبرای
یک مطلب تعداد زیادی دکمه و پیوند بسازید،بهتر است به جای این کار از یک تصویر
بزرگ،یک طرح تصویری ایجاد کنید.یک تصویر ساده،نسبت به تعداد زیادی فایل مجزا،سریع
تر دریافت می شود،به علاوه ساخت آن نیز ساده تر است.آسان ترین روش برای ایجاد چنین
طرحی،استفاده از یک بسته نرم افزاری WYSIWYGمانندDreamweaverاست.

از تصاویر آماده استفاده کنید اغلـب تصاویر مـوجود در وب
در دسـترس عمـوم بوده و تحت قانون کپی رایت هسـتند.امـا منابـع زیادی نیزوجـود
دارنـد کـه می توانـید از تصـاویـر ارائـه شده در آنـها برای طراحی های خـود
استـفاده کنید. سایـت (www.andyart.com/free.html)
ScreamDesign حــاوی دکــمـه هــای زیــادی اســـت؛بــه عــلاوه وب سـایــت
FreeGIFs and Animationswww.fg-a.com/gifs.html نیز راهنمائیهایی های ارائه می دهد
که چه کارهایی را نباید انجام داد.

با برنامه ریزی در وقت صرفه جوئی کنید سعی کنید بیشتر
بنویسید.اگر مسیرتان اشتباه،بدون فکر و با طراحی ضعیفی باشد،وقت زیادی تلف می
شود.بهتر است در شرایطی آرام و محیطی مناسب کار کنید.کاغذ هیچ وقت از کار نمی افتد
و خلاصه نویسی،تنها زبان قابل فهم برای تمام اعضای گروه است؛تنها هنگامی که طرح
مناسبی را روی کاغذ پیاده کردید آنرا در ایستگاه کاری اجرا کنید.

تمام صفحه را پر کنید اگـر گـاهی می بینیـد،بـا اینکه صفحه
شما در جـدولی با عرض صد در صد قرار دارد،پهنای‌صفحه را پر نمی کند،کل صفحـه را در
جـدولی با صد در صد عـرض،بـدون هیچ فاصلـه(spacing )یا حاشیه (padding)قرار دهید.در
این صورت خواهید دیدکه اندازه وضوح صفحه به هر میزان باشد،باز هم هر جدول تا کناره
های صفحه را پر می کند.همچنین در صورتی که بخواهید،بخشی همیشه در وسط صفحه قرار
بگیرد،این روش کاربرد خوبی دارد.برای این کار،در جدول اصلی،محل قرار گیری افقی و
عمودی را به طرف مرکز تنظیم کنید.

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

یک ترفند جاوااسکریپتی
اگر می خواهید به سرعت چند خط از یک
کد جاوااسکریپت را امتحان کنید،کافی است پنجره مرورگررا باز کرده و در نوار
آدرس،عبارت:JavaScript‌وسپس‌اسکریپتی‌راکه می خواهید اجرا شود،تایپ کنید.همچنین می
توانید این اسکریپتها را به عنوان اسکریپتهای مورد علاقه نشانه گذاری کرده و مثلاٌ
به هنگام تغییر اندازه پنجره به ۶۰۰×۸۰۰،مانند برنامه های کاربردی کوچک،از آنها
استفاده کنید.

رنگها را تغییر دهید
با افزودن ویژگی onMouseOverبه یک
خانه جدول،با عبور نشانگر ماوس از روی آن،رنـگ پـس زمینه به رنـگ دلـخواه شما تغییر
می‌کنـد،درسـت مانند یـک عمل جایگزینی(rollover).جایگزینیهایcssبسیار تاثیر
گذارتراز جایگزینیهای تصویری هستندونسبت به چند خـط کـدجاوااسکریپت که با هـر بار
حرکت ماوس روی آنها در خـواست یک تصویر می کنند،ارزش عملکردبیشتری دارند.

onmouseover=”this.bgColor=#000000; “

onmouseout=”this.bgColor=#cccccc; “

ماخذ : [ ماهنامه وب شماره۴۶ ]