در این مقاله 20ترفند جهت طراحی وساخت آسان یك وب‌سایت،ارائه شده است.قطعاٌبا مراحل طراحی و ساخت یك سایت آشنائی‌دارید.هنگامی كه با طرح عظیمی مانند ساخت یك وب سایت جدیدمـواجه می شوید،نهراسیدزیرا این كارچندان هم مشكل نیست.در اینجا تعدادی از طراحان حرفه ای وب،راهنمایی های مفیدی در زمینه فوق ارائه كرده اند تا با بكار گیری آنهادر زمان صرفه جوئی كرده و از همه مهم تردردسرهای شما نیز،كمترشود.
یك سایت ساده طراحی كنید یكی از بهترین روشها برای تسهیل طراحی سایت،سادگی آن است.اما عجیب آنكه،بسیاری ازطراحان،چنین مسئله ای رانادیده می گیرند.بخشهای غیرضروری به سایت اضافه نكنید. متنهای متحرك جاوااسكریپتی و فایل های انیمیشن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×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وسپس‌اسكریپتی‌راكه می خواهید اجرا شود،تایپ كنید.همچنین می توانید این اسكریپتها را به عنوان اسكریپتهای مورد علاقه نشانه گذاری كرده و مثلاٌ به هنگام تغییر اندازه پنجره به 600×800،مانند برنامه های كاربردی كوچك،از آنها استفاده كنید.
رنگها را تغییر دهید با افزودن ویژگی onMouseOverبه یك خانه جدول،با عبور نشانگر ماوس از روی آن،رنـگ پـس زمینه به رنـگ دلـخواه شما تغییر می‌كنـد،درسـت مانند یـك عمل جایگزینی(rollover).جایگزینیهایcssبسیار تاثیر گذارتراز جایگزینیهای تصویری هستندونسبت به چند خـط كـدجاوااسكریپت كه با هـر بار حركت ماوس روی آنها در خـواست یك تصویر می كنند،ارزش عملكردبیشتری دارند.
onmouseover="this.bgColor=#000000; "
onmouseout="this.bgColor=#cccccc; "
ماخذ : [ ماهنامه وب شماره46 ]
| 