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

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

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


در اين مقاله 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 ]

  موضوع: آموزش, اینترنت, طراحی, وبلاگ | برچسب ها : ,
   تاريخ:۸۵/۱۱/۳   ساعت:۸:۳۲ قبل از ظهر ۵ نظر

پست هاي مرتبط

۵ دیدگاه برای “طراحی و ساخت یک وب سایت”

  1. فاطمه سادات گفت:

    با سلام و خسته نباشید
    وبلاگ شما خیلی جذاب و جالب بود فقط کمی رنگ سبز آن چشم را اذیب می کرد ولی کلاَ کارتان عالی است اپشتکار و تلاشتان برای رساندن اطلاعات علمی و با اهمیت قابل قدردانی و تشکر است. با تشکر

  2. احسان گفت:

    سلام

    لطفاً درباره طراحی قالب وبلاگ‌ات یک پست بنویس خیلی خوب و حرفه‌ایی طراحی شده

  3. محمود گفت:

    سلام خسته نباشی
    یه سر به وبلاگ من بزن مثل وبلاگ تو مطالب قشنگی داخلشه

  4. مرتضی گفت:

    با عرض سلام و خسته نباشید.
    یه زحمتی داشتم . من واقعا به آموزش شما نیاز دارم.
    می خواستم خواهش کنم که آموزش بدین که چه جوری میشه در بخش موضوعات وبلاگ قسمت ها رو از یک دیگه تفکیک کرد .
    مثلا در بعضی وبلاگ ها می بینیم که یه بخش به نام دانلود …. یه بخش با یه عکس خاص از قبلی تفکیک میشه مثلا آموزش و با عکس خاص خود و به همین ترتیب موضوعات از هم تفکیک شدن.
    امیدوارم که تونسته باشم منظورم رو انتقال بدم.
    برای مثال فقط برای مثال.
    این وبلاگ
    http://softshop.blogfa.com
    منوی آرشیو موضوعی باحالی داره.
    خواهش می کنم رسیدگی کنید.
    منتظر پاسخ هستم.
    ممنون

  5. میخواستم ویب سایت را بسازم مطالب یا رویداد های جهان را دران بگنجانم و در زمن یک نهاد دارم که میتوان دران کار کنیم.

نظر شما چیست ؟