دانلود مقاله طراحی صفحات وب

بخشی از مقاله

مقدمه
طراحي  صفحات ب موضوعي كاملاً سليقه اي است اينطور به نظر مي رسد كه بيشتر مردم دقيقاً مي دانند كه سليقه شان چه چيزي را مي پسندد و چه چيزي را رد مي كند .

اما زيبايي و ظاهر يك سايت فقط نيمي از داستان است و اغلب  مشكلاتي نظير قابليت استفاده مشكلات اجراي فني ، و صفحاتي كه به كندي بارگذراي مي شوند نيمه ديگر آن است كه من سعي كرده ام آن را در اين پروژه بيشتر  مورد بررسي قرار دهم در اينجا  هدف آن است مه مباحثي فراتر از رفتار هاي بصري مورد بحث قرار گيرند ، مواردي كه باعث مي شوند سايت ها به درستي كار كنند . قابليت استفاده مطمئناً يكي از اين موارد خواهد بود . من تلاش كرده ام تجربياتي كه از ساخت سايت ها در طي چندين سال كسب كرده ام را در اختيار تان بگذارم ، برخي پروژه هايي كه كار كرده ام موفقيت آميز بوده اند و برخي ديگر با شكست روبه رو شده اند و من نه تنها از موفقيتهاي ، بلكه از شكستها نيز درس گرفته ام و البته در صنعتي به جواني طراحي وب ، تجربه بهترين معلم است ، من در اين پروژه سعي كرده ام توازني بين خواسته هاي طراح و نياز هاي كاربر ، شكل ظاهري و عملكرد و منحصر به فرد بودن و انسجام بر قرار كنم ، البته با توجه به آنچه كه در رسانه آشفته اي به نام وب قابل اجرا است .

بعد از مطالعه اين پروژه بي خوبي درك خواهيد كرد كه طراحي وب تركيبي از هنر علم و ، الهام و اجرا ، و در نهايت ناكامي و سربلند است ، شما ممكن است در زمينه طراحي و زيبا سازي سايت تبحر داشته باشيد ولي در ز مينه تكنولوژي و يا تحويل سايت با مشكل مواجه باشيد . حقيقت آن است كه طراحي وب اين دو جنبه را با هم احاطه كرده است و سرمايه گذاري در شناخت عميقتر رسانه و مشكلات فني در پروژه هاي آتي سودمند خواهد بود

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

متأسفانه يك فرآيند گام به گام ثابت و تضمين شده جهت ساخت يك سايت وب عالي وجود ندارد . برخي چيز ها واقعاً نياز به تجربه دارند . ايجاد يك سايت مطلوب و كامل نيازمند ساختن سايت هاي  بي شماري و حتي مرور كردن سايت هاي ساخته شده است . با اين حال مي توانم بگويم كه اگر شما اين پروژه را بخوانيد ، حداقل نصف آنچه كه براي سا ختن سايت هاي عالي نياز داريد را فرا خواهيد گرفت . باقي كار به عهده شما و خلاقيت شماست .

باتشكر، 

بهنام ناطق

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

در اين اينجا شما با انواع ابزارهاي طراحي آشنا خواهيد شد و به طبيعت آنها نيز پي خواهيد برد . اينترنت معمولي‌ترين رسانه واسطه‌اي است كه كاربر را آماده مي‌سازد كه تصميم بگيرد كه چه رسانه‌هاي انتشاري ، اينترنت يك رسانه تبادلي ( دو طرفه ) تلقي
شود .

اكثراً رسانه‌ها تأثير گذار هستند و هدف آ‌نها ايجاد علاقه كافي است تا اينكه سرانجام بتواند تبادل مطلوب را انجام دهند .

ماهيت خواندن يك مجله و يا ديدن برنامه‌هاي تلويزيون ذاتي و بالفطره نيست و معمولاً كار انفردي است . در اصل عمل خواندن مطبوعات يا تماشاي برنامه‌هاي تلويزيوني بالفطره عملي تبادلي نيست و در حقيقت بين عمل خواندن يا تماشاي تلويزيون با عمل تبادل تفاوت وجود دارد . تنها تبادل انجام شده در مورد خوانندگان و بينندگان ، گرفتن اطلاعات از طريق خواندن يك كتاب يا مجله يا تماشاي برنامه تلويزيون است . ( بصورت يك طرفه )

بنابراين ايجاد اطلاعات جهت رسانه‌هاي گروهي به راهكارهاي متفاوت‌تري نسبت به ايجاد اطلاعات مربوط به اينترنت نياز دارد .

مشاهدات بي عيب اينترنت مانند ثبت رويداد بر روي مرورگر وب ، دلالت بر درخواست كاربران و واكنش سرور دارد . به عبارت ديگر انجام يك داد و سند و تبادل مي باشد .

بعلاوه با اين طبيعت ، اينترنت نمي تواند بصورت خطي عمل كند . اگر كاربر تصميم به انجام داد و ستد و تبادل داشته باشد ، ابتدا بايد به سايت راهنمايي و هدايت شود، و سپس براي تجارت در سايت بماند و گردش كند و در پايان دوباره به سايت بازگردد و نيز بايد در نظر داشت كه كاربر مي‌تواند براي انجام داد و ستد در هر لحظه به هر سايت ديگري مراجعه نمايد .

 هدايت و توسعه وب جاري
پيشرفت وب از چند سال پيش شروع شد اضافه شدن چند رسانه‌اي ها در وب ، دلالت بر پيشرفت وب دارد . اين نوع جديد از اطلاعات در حال حاضر در اينترنت قابل دسترس مي‌باشد . محتواي اطلاعات عبوري در اينترنت به عنوان جزء اصلي خيلي از پروژه‌ها و برنامه‌ها محسوب مي‌شود . مزيت عبور اطلاعات در بازتاب اطلاعات و آمار و ارقام مي‌باشد . به اين صورت كه در زماني كه كاربر آن را در خواست كند از پايگاه داده‌ها عبور مي‌كند و بدست كاربر مي‌رسند .

اينترنت دومين پيشرفت خود را بعد از ايجاد تجارت الكترونيك در تاريخچه توسعه وب انجام داد . كارمندان شركتها و صنايع مي توانند با اين توانايي عبور اطلاعات تجاري خود را از خانه انجار سال و دريافت كنند و نتيجه آن خيلي كارآمدتر و پربارتر از حضور در محيط كاري مي‌باشد . شبكه داخلي شركت با بكارگيري وب براي فروشندگان بيروني و شركاي تجاري مي‌تواند اطلاعات درخواست شده را سريعتر از  بيرون انتقال دهند و سلسله مراتب يك تجارت را به پيش ببرند .

براي مثال شركت A براي شركت B كاغذ توليد مي‌كند اگر كمپاني A بخواهد به شركت B دسترسي پيدا كند اين امر با بكارگيري شبكه داخلي شركت امكانپذير مي‌باشد . بنابراين شركت A مي‌داند كه چه موقع شركت B به محموله‌اي ديگري نياز دارد و نيز شركت A مي‌تواند نخستين قدم براي تهيه محموله قبل از درخواست از طرف شركت B را بردارد .

ابزارها و تكنولوژي
سالها مذاكرات زيادي درباره اينكه چه ابزارهاي خاصي در فرآيند گسترش وب استفاده مي‌شود ، وجود داشت . به هر جهت امروزه خيلي از  ابزارهاي ويرايشگر وب در رده‌هاي چهارم و پنجم قرار گرفتند .

 مذاكرات بيشتر پيرامون آن بود كه طراحان وب از كدام ابزارها استفاده كنند نه اينكه صرفاً بخواهند از ا بزاري خاص استفاده كنند . بطور ايده‌آل تركيب كد هاي دستي و WYSIWYG بهترين گزينه از نقطه نظر توسعه امروزي است . انجام اين عمل ساده زمان زيادي براي توسعه يك سايت HTML با كد نويسي را مي‌گيرد . احتياجات به روز رساني اطلاعات مستلزم آن است كه بين صفحه وب و يك سايت محلي اتحاد و پيوستگي ايجاد شود . امروزه WYSIWYG از استاندارد خارج شده است .

و از Dream Wearer , Front Page استفاده مي‌شود . در آينده مي‌توانيد تشكيلات خود را به آخرين درجه پيشرفت برسانيد و همواره با زمان جلو رويد اين ابزارهاي قدرتمند كه در صنعت نيز قابل رقابت هستند در دوره CIW ارائه خواهند شد . اين ابزارها با هم هماهنگي خاصي دارند .

رسانه‌هاي واسط
طراحان وب بايد در مورد ديگر تفاوتها و مشكلاتي كه در طراحي وب در مقايسه با رسانه‌هاي ديگر بخصوص چاپ پيش مي‌آيد آگاه شوند . در ابتداي زمان طراحي وب ، بسياري از سايتها بصورت HTML ساده و بصورت بروشورولي باخاصيت وب توزيع مي‌شدندو اين شيوه باعث شد كه كمپانيها خيلي سريع اطلاعات خود را بر روي وب ارسال كنند . بعلاوه وب به عنوان قلمرو جديد بود كه نه سنديتي براي آن وجود داشت و نه اطلاعات معتبري براي تأئيد اعتبار آن بود .

بيشتر كمپاني‌ها خيلي زود آموختند كه ارسال بروشور بر روي وب موثر تر از استفاده از رسانه‌هاي ديگر نيست . به طور كلي در يك جمله مي‌توان گفت صفت چاپ خاصيت خطي دارد يعني از يك خط به خط ديگر و از يك صفحه به صفحه ديگر . ....

ولي وب يك رسانه خطي نيست و به همين سبب خواص متفاوت‌تري دارد و هنگامي كه در داد و ستد از آ‌ن به عنوان يك قالب خطي استفاده شود خواص متفاوتي از خود بروز مي‌دهد . بيشترين ويژگي متفاوت وب در برقراري ارتباط دو طرفه با كاربران مي‌باشد . صنعت چاپ نمي‌تواند مشاهدات كاربران را بصورت فرم تخصصي در ‌آورد . و در يك جمله ديگر مي‌توان گفت رسانه وب مي‌تواند امكانات ارتباط دو طرفه را به بهترين صورت انجام دهد و براي كاربر فرم شخصي ايجاد كند . و اين پديده يك ارتباط مستقيم بين تجار و كاربران ( خريداران ) را برقرار مي‌كند .

در طي اين كتاب شما با ابزارهاي زيادي در توسعه صفحات وب آشنا خواهيد شد اما توجه داشته باشيد كه هدف از اين پروژه آگاهي شما از امكاناتي است كه هر كدام از اين ابزارها به شما مي‌دهندو اين شما هستيد كه در نهايت تصميم گيرنده اصلي خواهيد بود كه كدام ابزار فوايد بيشتري براي نظام مند شدن مقاصدتان دارد .

محاسبه مهارتهاي HTML خود
در اين تمرين شما مهارت HTML خود را با ايجاد يك صفحه ساده محاسبه خواهيد كرد . شايان ذكر است كه مندرجاتي شما بكار مي‌بريد مي‌تواند متفاوت از مندرجات بكار برده شده در اين تمرين باشد .

تمرين ايجاد يك صفحه وب پايه :

در اين تمرين شما يك صفحه وب ساده ايجاد خواهيد كرد و توانايي HTML خود را محك مي‌زنيد.

1ـ از الگوي HTML براي ايجاد قالبهاي زير استفاده كنيد .

ـ  Table

ـ Hyper Link ( استفاده از پروتكل HTTP )

ـ Font

ـ Image

در اين فصل شما با مفاهيم تكنولوژي و ابزارهاي مورد استفاده آن و مختصراً‌با مشكلاتي كه براي بكارگيري اين تكنولوژي استفاده مي‌شود آشنا شديد و در نهايت مهارت HTML خود را محاسبه كرديد .

معرفي فصل

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

حدس مي‌زنيد كه چه مقدار از متن صفحه وب شما به طور واقعي توسط كاربر خوانده مي‌شود ؟ تمام آن ؟ بيشتر آن ؟ حقيقت آن است كه كاربران اغلب هيچ مقداري از آن را نمي‌خوانند . به دنبال اين جمله بايد گفت كه درحدود 80% از مردم فقط در مندرجات سايت پويش مي‌كنندو به دنبال نكات و عبارت كليدي مي‌گردند . به طور متوسط 25% كاربراي در خواندن روي مانيتور نسبت به خواندن از روي چاپ آهسته‌تر عمل مي كنند .

بنابراين ،‌اين واقعيت چگونه بر ساختار صفحه شما اثر مي‌گذارد؟ به عنوان يك طراح شما بايد صفحه‌اي ايجاد كنيد كه كاربران بتوانند سريع آن را كاوش كرده و اطلاعات مطالبه كرده را پيدا كنند . بخاطر آوريد كه يكي از تناقضات در طراحي وب اين است كه تصور كنيد كه وب فرم ديگري از رسانه‌ چاپ است . هنگامي كه طرح يك صفحه با مندرجات مشابه به يك مجله و يا بروشور ايجاد مي‌كنيد كاربران به طور مسلم به سايت ديگري خواهد رفت چرا كه شما در نظر نگرفتيد كه ماهيت مطالب بر روي وب بايد با ديگر رسانه‌ها به خصوص چاپ متفاوت باشد .

هنگامي كه كاربران به سايت شما مي‌رسند اولين حسي كه در آنها ايجاد مي‌شود از ا هميت زيادي برخوردار است . مثلاً ممكن است سايت وب شما كه به قصد تجارت ايجاد شده است فقط يك پنجره داشته باشد ولي به هر حال اگر به نظر مشتري غير جذاب باشد شما مشتري خود را به رقيب خود واگذار كرديد . بنابراين اگر بدانيد كه بازديدكنندگان فقط سايت شما را مرور  مي‌كنند متوجه خواهيد شد كه چرا نبايد كاربران رامجبور به خواندن مطالبي كنيد كه براي آنها جالب نيست . كاربران را راضي نگه داريد و آنچه را كه مي‌خواهند به آنها عطا كنيد ، حتماً آنها به سايت شما باز خواهند گشت . ( قابل ذكر است قواعد بازار يابي در سايتهاي تجاري متفاوت تر از دنياي واقعي مي‌باشد )

كاربران نمي‌خواهند كه صفحات در هم و نامربوط را ببينند و ازطرفي محتويات و مندرجات سايت نيز ضروري است پس با اين وجود ساختار و انتشار آن هر دو با هم از اهميت برخوردار هستند . معمولاً كاربران سايت شما را براي اطلاعات ويژه‌اي كه در مورد جستجو و يا خريد و ... مي‌خواهند بازديد مي‌كنند .

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

سايتي نظير سايت www.xnn.com را در نظر بگيريد به محض ورود به سايت سريعاً مي‌توانيد مرور كلي از كل سايت داشته باشيد و يا به عبارت ديگر شما مي‌توانيد كل سايت را با نگاه از يك عبارت به عبارت بعدي مرور كنيد و آنچه را كه بخواهيد خيلي سريع بدست آوريد . بنابراين تمايل به ديدن مجدد سايت را داريد . سايت فوق از نمونه سايتهاي موفق در جهان مي‌باشد .

واقعيت در طراحي

يك طراح وب بايد براي فن‌آوري جديد و اينكه چگونه از ابزارها در طراحي استفاده كند آماده باشد و معمولاً طراحان جديدترين سخت افزارها و نرم افزارها را به كار مي‌گيرند . به هر جهت اين انگيزه ايجاد مي شود كه شما بايد صفحات دو طرفه ديناميكي ايجاد كنيد كه نرم افزارهاي جديد و قديم را حمايت كنند .اكثريت استفاده كنندگان وب به جستجوي طراحي عالي و پيشرفته  نيستند و لي استثنائاتي هميشه در اين قواعد وجود دارند . به هر جهت يك راهنماي خوب در هنگام طراحي وجود دارد كه به قرار زير است :

1ـ بيشتر كاربران از مانيتورهاي Inch 17 يا كمتر استفاده مي كنند .

2ـ بيشتر كاربران با تنظيم تفكيك‌پذيري 640*480 كار مي‌كنند .

3ـ بيشتر كاربران داراي مودم‌هاي با سرعت K56 هستند .

4ـ اغلب كاربران مرورگرهاي وزن 4 به پايين دارند .

5ـ تعداد كمي از مردم زمان زيادي را براي بارگذاري فايلها صرف مي كنند .

همواره در طراحي وب نكات بالا را در نظر داشته باشيد .

ساختار متناسب براي صفحه

طراحي اصلي روزنامه مورد علاقه خود را در نظر بگيريد . در صفحه روي جلد خبر اصلي وجود دارد و  بعلاوه متون حاشيه‌اي هم در آن قرار دارد كه خبرهاي ديگر روزنامه‌ در آن ليست شده است . اين قضيه به چه نحوي در خواندن شما تأثير مي‌گذارد ؟ اين طرح كلي شما را وادار به خواندن يك خبر در روي صفحه اول نمي‌كند . اگر خلاصه يك خبر كه درستي آن را دنبال مي‌كنيد ببينيد در آن شماره صفحه‌اي وجود دارد كه از طريق آن مي‌توانيد وارد  كل داستان شويد .

يعني با يك اتصال شما را به كل مي رساند . اين ساختار  اغلب با ساختار يك هرم مقايسه مي‌شود كه در نمودار شكل زير ترسيم شده است . در اين مدل در ابتدا خلاصه داستان براي شما ارائه مي‌شود سپس اتصال براي مأخذ و جزئيات آن براي كساني كه علاقه‌مند هستند قرار داده مي‌شود . وب ايده‌آل ترين رسانه براي اين نوع انتشار است .

با استفاده از ابر اتصالات مي‌توانيد كاربران خود را به شرح موضوعات در داستانها ، اخبار و محصولات و سرويسهايي كه داريد هدايت كنيد و نيز مي‌توانيد پيش  تاريخ و اطلاعات مبسوط و زمان و منابعي را كه روزنامه‌ها به دليل فقدان جا نمي‌توانند ايجاد كنند را بوجود آوريد . اگر كاربران بخواهند اطلاعات را به طور كامل بخوانند مي‌توانند به سمت جهت تعيين شده هدايت شوند . به عبارت ديگر مي‌توانند براي پيگيري قضيه حركت كنند .

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

موارد زير را در هنگام طراحي يك صفحه در نظر بگيريد :

1ـ Frameset اجازه مي‌دهد كه صفحات چند گانه شما بصورت واحد ظاهر شود.

2ـ Margin كنترل مي‌كند كه مطالب چگونه و با چه فاصله‌اي از كادر مانيتور شروع شوند .

3ـ Border براي Frame ها و جداول HTML استفاده مي شود .

4ـ رنگ ايجاد يك احساس گيرا و كلي از ساختار سايت و باعث ازدياد توانايي خواندن مي‌شود .

5ـ    Space  جدا كردن المانهاي صفحه

6ـ Navigation براي كنترل كاربران براي حركت در سايت

7ـ Rule مندرجات صفحه را به قسمتهاي جداگانه و و ابسته قسمت مي كند .

8ـ White Space باعث كم تر ك ردن بي نظمي المانهاي صفحه مي‌گردد .

9ـ  Table توزيع المانهاي صفحه در جاهاي مختلف صفحه و شكل دادن اطلاعات در ستونهاي مخفي

10ـ Lists  به طرح اجازه مي‌دهد تا اقلام را سازماندهي كنيم .

11ـ Paragraph گروهي از كاراكترهاي متني در صفحه مي‌باشد .

12ـ Heading level ايجاد سايزهاي گوناگون از متن و طراحي و سازماندهي آن.

13ـ Image مورد استفاده در ايجاد جاذبه ابعادي ، اطلاعات ، Navigation

تعيين كنيد كه سايت شما كداميك از اين عوامل را در بر دارد و شما را در روند توسعه ياري مي‌دهد و اگر به اين عوامل پرداخته نشود به تدريج منابع و نيروها و زمان خود را از دست خواهيد داد .

طرح معمول صفحه
وب سايتها از قالبهاي اصلي و پايه براي نمايش اجزاء صفحه استفاده مي‌كنند . شما مي‌توانيد اين قالبهاي معمول را از خيلي از سايتها ايده بگيريد  .براي مثال Navigator معمولاً‌در قسمت چپ بالاي صفحه نمايش داده مي شود و رنگ اين المان اغلب كمي متفاوت تر از رنگ بقيه صفحه است همچنين المان Navigation مي‌تواند در پائين يك صفحه نيز قرار گيرد .

متن سياه بر روي زمينه سفيد و نيز قرار گرفتن تبليغات كمپاني در بالاترين گوشه سمت چپ صفحه نمايش نيز از قالبهاي متداول  مي‌باشد كه اغلب بكار برده مي‌شود . اين قالبها و نيز قالبهاي ديگر براي تشخيص  اينكه از كدام قالب بايد استفاده شود  در عمل مي تواند كمك كند . كاربران هنگامي كه سايت شما را بازديد مي‌كنند مي‌دانند كه چه توقعي از آن دارند .

در اينجا نمي خواهم بگويم كه كاربران بايد مندرجات و محصولات سايت شما را بدانند ولي بايد اساس و اصول استفاده از سايت شما را بداند و اين اصل شامل كاربردهاي مختلف Navigation و متون و عكسها مي باشد . طرح سايت شما مي تواند با جايگزين شده Navigation در قسمتهاي مختلف رده‌بندي شود و نيز نوع قالب بندي به طوري زيادي وابسته به محتويات و مندرجاتي است كه داخل سايت شما قرار گيرد .

سرعت و سايز صفحات ( اسكرول كردن )

كاربران خواهان سرعت زياد هستند . شما اين خواسته آنها را مي توانيد با طراحي صفحاتي با سايزهاي محدود فايلها مي‌توانيد تأمين كنيد . با 10 ثانيه مكث در سايت ، كاربران از سايت شما بريده خواهد شد و توجه آنها به سايت را از  دست خواهيد و اين نكته بدان معني  است كه طراح وب بايد از عكسهاي مقرون به صرفه استفاده كند  و انتخاب فايل‌ها بايد با دقت زيادي همراه باشد . بهينه سازي عكسها عامل مهمي در بارگذاري سريعتر آنها است كه بعداً به جزئيات آن مي‌پردازيم . جدول  زير ماكسيمم سايز صفحه‌اي كه براي واكنش درخواست ارتباطات با سرعتهاي گوناگون مجاز است .
سايز صفحه به معناي سايز تمام فايلها و المانهاي بكار برده شده در صفحه شامل فايلهاي HTML و تمامي عناصر تعبيه شده (jpg , gif) مي باشد .

توجه داشته باشيد كه 1 ثانيه عكس العمل به كاربران اين اجازه را مي دهد كه آنها حس كنند كه به طور آزاد و راحت در ميان اطلاعات جابه‌جا مي‌شوند ولي زمان 10 ثانيه نياز دارد كه به توجه كاربر به سايت پرداخته شود .

در اواسط سال 1997 مطالعات نشان مي داد كه متوسط سايز يك صفحه وب 44 كيلوبايت است يعني طبق جدول 5 برابر بيشتر از زمان معمول واكنش براي كاربراني كه از ISDN استفاده مي‌كنند . بنابراين بري بيشتر كاربراني كه از پهناي باند متوسط استفاده مي‌كنند سرعت بارگذاري بسيار كم خواهد بود . همچنين توجه داشته باشيد كه kb 44 ، 30 درصد بيشتر از بزرگترين حد سايز براي كاربران استفاده كننده از مودم خواهد بود .

دانستن چنين مطالعاتي شما را به سمت توسعه وب متمايل مي‌كند تا جايي كه كامپيوترها و ارتباطات آنها با يكديگر سريع‌تر شود . خيلي از وب سايتهايي كه منتشر شده صفحات كوچكي هستند كه از عكسهاي كم مصرف در آن استفاده شده است .

طراحي با دقت و توجه در كيفيت نمايش
توصيه مي‌شود كه براي طراحي از درجه تفكيك 480*640 استفاده كنيد تا جايي كه بدانيد كاربر از Resolution nd ديگري استفاده مي كند . با طراحي  با اين Resolution اطمينان داريد كه كاربران براي ديدن تمام صفحه شما از Scroll استفاده مي كنند . براي پرهيز از ايجاد اسكرول افقي صفحه را از pix 600 پهن تر نكنيد و به خاطر داشته باشيد كه كاربران فقط سايت شما را مرور مي‌كنند و حاضر نيستند كه براي ديدن تمام صفحه شما از اسكرول استفاده كنند .

كيفيت استاندارد و اصلي 480*640 مي باشد كه بيشتر در عمل به كار مي‌رود هنگامي كه شما با تفكيك 480*640 طراحي مي‌كنيد اين عدد اثر بيشتري نسبت به درجات تفكيك‌هاي بالاتر دارد . شكلهاي زير يك وب سايت را در انواع Resolution ها نشان مي دهد . با وجود اينكه هنوز همه از مانيتورهاي 480*640 استفاده مي‌كنند اما در سالهاي اخير Resolution هاي بيشتري بوجود آمده‌اند و شما ممكن است كه بخواهيد تكنولوژي برتر را بدون رها كردن كاربران و با سخت افزار قديمي براي آنها تأمين كنيد . يك راه انجام اين عمل طراحي است كه بتواند سازگاري خوبي با كاربران داشته باشد . در صورت استفاده از Resolution زياد كاربران تصميم به بزرگتر كردن پنجره مي‌كنند .

سايتهاي www.altavista.com و www.amazon.com و www.cnet.com مثالهاي خوبي در اين زمينه  هستند .

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

يكي از مسائلي كه در توسعه و پيشرفت طراحي سايت با آن مواجه مي شويد اين است كه چگون احساسها را در هنگام انتخاب رنگ براي وب سايت شركت خود منتقل كنيد . كدام رنگها بيشتر مكمل هستند چند رنگ به معرض نمايش گذاشته مي شود ؟ آيا شما از خطوط پايه افقي و عمودي استفاده مي كنيد؟ آيا سايت شما داراي اشكال هندسي مثل چند ضلعي و مربع مي باشد ؟ اين سئوال و نيز بقيه سئوالات بايد براي بهترين مدل به تصوير كشيدن عكس در يك كمپاني براي كاربران مطرح شود .

نمايش رنگ
يك مانيتور كامپيوتر شامل هزاران  المان است كه پيكسل ناميده مي شود . هر پيكسل فقط يك رنگ را در يك زمان نشان مي دهد . هنگامي كه به يك عكس نگاه مي‌كنيد شما صدها يا هزاران پيكسل مي بينيد كه هر كدام يك رنگ ويژه دارد و تركيب آنها باعث ايجاد تصويري مي شود كه شما مي بينيد . رنگهايي كه وقتي با يكديگر تركيب مي‌شوند رنگ سفيد  را مي سازند به عنوان يك رنگ افزودني تلقي مي‌گردند . اصل اين رنگ شامل رنگهاي قرمز و سبز و آبي است كه RGB ناميده مي شود . مانيتور كامپيوتر رنگهاي افزودني را نشان مي دهد . اضافه كردن رنگهاي بيشتري به اين تركيب در سيستم RGB باعث جابه‌جايي رنگ به سمت رنگ سفيد مي شود .

قالبهاي رنگ
رنگها با دو قالب عددي استاندارد شده‌اند :

1ـ درجات قرمز و سبز و آبي (RGB)

2- هگزا دسيمال

يك طراح براي انجام يك طراحي وب دقيق بايد منحصراً از كدهاي هگزا دسيمال استفاده كند . ولي به هر جهت براي بحث در مورد اهداف خود هر دو مورد را در نظر مي‌گيريم 

سيستم RGB و هگزا دسيمال يا هر دو ( با هررنگي كه د رمحدوده ديد و بينايي قرار دارندو با خواص گوناگون با يكديگر تركيب مي‌شوند معرفي مي شوند . ) قالبهاي اين رنگها توانايي نمايش 16772216 رنگ را دارد .

RGB  
مقدار RGB در مبناي 10 در رنج عددي 0 تا 255 . در سيستم مبناي 10 از ارقام بين 0 تا 9 استفاده مي شود . وقتي رقم 1 در دسترس قرار مي‌گيرد مقدار از 0 به 1 افزايش مي‌يابد وهمينطور R=255,G=255,B=255 بنابراين مقدار RGB براي رنگ سفيد R=255,G=255,B=255 كه نمايش ماكسيمم درجه قرمز و سبز و آبي است ) مي باشد .

مقدار درجه  RGB براي رنگ سبز به اينگونه است :

R=0,G=255,B=0

بنابراين مقدار RGB براي رنگ سبز 0 و 255 مي باشد كه نمايش %0 براي قرمز و آبي و بيشترين درصد براي رنگ سبز است .

شما مي‌توانيد رنگ سبز را با كدهاي HTML به قرار زير دنبال كنيد :

 المانهاي رنگي نقش مهمي را دراصول و نظام ارائه يك سايت دارند . سبك و روش و فرهنگ و آداب شركتها با ارائه رنگ در سايت و چگونگي هماهنگي و تركيب آنها با يكديگر به تصوير كشيده مي‌شود .

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

يكي از مسائلي كه در توسعه و پيشرفت طراحي سايت با آن مواجه مي‌شويد اين است كه چگونه احساسها را در هنگام انتخاب رنگ براي وب سايت شركت خود منتقل كنيد . كدام رنگها بيشتر مكمل هستند چند رنگ به معرض نمايش گذاشته مي شود ؟ آيا شما از خطوط پايه افقي و عمودي استفاده مي‌كنيد ؟ آيا سايت شما داراي اشكال هندسي مثل چند ضلعي و مربع مي باشد ؟ اين سئوال و نيز بقيه سئوالات بايد براي بهترين مدل به تصوير  كشيدن عكس در يك كمپاني براي كاربران مطرح شود .

تذكر فني
براي كامل كردن سيستم رنگهاي RGB و درجات هگزا دسيمال مي‌توانيد سايت  مراجعه كنيد اين سايت توسط Lynda Weinman از مركز هنري Ojai Digital ايجاد شده است .

ارقام هگزا دسيمال
درجات ارقام هگزا دسيمال در بازه بين 00 تا FF بصورت زير است :

عدد در مبناي 10 با همان مقدار به مبناي 16 تبديل شده و نمايش داده مي شود . مقدار 00 هيچ درصدي را نمايش نمي‌دهد و مقدار FF بيشترين درصد مقدار رنگ را نمايش مي‌دهد .

رنگ سفيد در مبناي 16 به اين صورت نشان داده مي‌شود :

اين مقادير بيشترين درصد رنگهاي قرمز و سبز و آبي را نشان مي‌دهد  .

نمايش سبز در مبناي هگزا دسيمال به قرار زير است :

اين مقادير بيشتري درصد رنگ براي رنگ سبز و هيچ درصدي را براي رنگهاي آبي و قرمز نشان نمي‌دهد . براي هر رنگ سبز و آبي و ... در مبناي 2,16 كاراكتر اختصاص داده شده است و با توجه به اين مي‌باشد كه اساس RGB از ارقامي ما بين 0  تا 255 براي هر مقدار آبي و قرمز و سبز استفاده مي‌كند .نمودار فوق را ملاحظه كنيد :

وقتي از مبناي 16 در HTML استفاده مي شود در ابتداي آن از علامت # استفاده مي‌شود كه لازم نيست اما قسمتي از ويژگي‌هاي رسمي HTML محسوب مي‌شود . در تك Body براي مثال كد رنگ پيش زمينه آن اگر سبز باشد ، خواهيم داشت :

هشدار
Netscape 4 در قرار دادن   در اطراف ويژگي‌ها اشكال مي‌گيرد . هنگامي كه از مقدار مبناي 16 در قسمت Style ها استفاده مي‌كنيد  را برداريد .

تركيبات اصلي رنگها
هر مانيتور براي نمايش يك رنگ از 3 تفنگ  الكترونيكي استفاده مي كند . هر تفنگ مسئول يك رنگ منفرد است ( قرمز ، سبز‌، آبي ) تركيبات گوناگوني از تفنگ‌ها و جريان زيادي از الكترونها يك رنگ را ايجاد مي‌كنند. در يك لحظه شخصي با شليك اين تفنگ‌ها رنگ سفيد بر روي صفحه توليد مي كند . شليك تفنگهاي قرمز و سبز رنگ سبز ايجاد مي‌كند . شليك تفنگهاي سبز و آبي رنگ فيروزه‌اي ايجاد مي‌كند . تركيب رنگهاي قرمز و آبي رنگ سرخابي ايجاد مي‌كند  .

نمودار فوق مثالهايي از تركيبات اين رنگها و ارتباط بين آنها است :

با وجود آنكه هر مقدار ازRGB و هگزا دسيمال براي يك رنگ خاص استفاده مي‌شود ولي مهم است كه به خاطر داشته باشيد كه فقط 216  رنگ با ويندوز و مكينتاش و Internet Explorer , Netscape navigator حمايت مي‌شوند. هر8 بيت مانيتور هر مرورگر 256 رنگ را مي‌تواند به نمايش بگذارد كه تا حدود 40 مورد از اين رنگها توسط سيستم عامل استفاده مي‌شود . اين 216 مقدار حمايت مي شوندو بقيه رنگها شدت نورشان افزايش مي يابد .

افزايش شدت نور فرآيندي است كه مرورگر يك رنگ را به نزديكترين رنگي كه مرورگر قادر به حمايت از آن است تبديل مي كند . وقتي رنگي با كدهاي HTML ايجاد شود به رنگ ثابت و يكپارچه تبديل مي‌شود .

( اميدوار باشيد كه به رنگ اصلي كه شما مي خواستيد نزديك باشد ) اگر مرورگر نور رنگي كه در يك تصوير نشان داده مي شود را با تركيب 2 رنگي كه نزديك به يكي از آنهاست زياد كند توسط مرورگر حمايت نخواهد شد و بصورت لكه نشان داده مي شود .

جدول 3-2 سيستمي از مقادير RGB و هگزا دسيمال را كه بدون مشكل در مرورگرهاي متعدد و بر روي سيستم‌هاي متعدد ترجمه خواهد شد را نشان مي‌دهد . ( اگر مقادير ديگري به غير از اينها استفاده شود مرورگر  نور آن را به نزديكترين مقدار تخميني افزايش مي‌دهد .

هر كدام از اين مقادير مطابق با مقدارواقعي است . براي مثال استفاده از مقدار 51 در سيستم RGB درست مانند استفاده از مقدار 33 در سيستم هگزا دسيمال است . به عبارت ديگر مقدار RGB (201,51,153)  معدل با مقادير cc3399# در هگزا دسيمال است .

مرورگر ضامن هر تركيبي از اين مقادير است و بدون تناقض و مشكل در پايگاه داده‌ها مرورگر ترجمه مي‌شوند .

تركيبات هر كدام از رنگهاي قرمز و سبز و آبي شدت رنگي كه بايد نمايش داده شود را محاسبه مي‌كند ،‌جدول 2-4 درصد شدت رنگهايي كه توسط مرورگر از كمتر به بيشتر حمايت مي‌شوند را نشان مي‌دهد .

ليست كامل بالا را مي توانيد در سايت  پيدا كنيد .

تذكر
مشكلاتي در ترجمه‌ رنگ براي مانيتورهاي bit 16 وجود دارد . به دلايل رياضي 216 رنگي كه در مرورگرها حمايت مي‌شود در جدول رنگ اين كامپيوترها نشان داده مي‌شود و مرورگرها با استفاده از رنگهاي ديگري كه به آن رنگها نزديك است اين جابجايي را براي نمايش رنگ و به طور دقيق  انجام مي دهند . اما مرورگرها جابجايي رنگ را به طرق مختلف ( منوط به اينكه آيا آن رنگ در يك عكس ارائه مي شود يا توسط HTML ايجاد مي شود) انجام مي دهند . براي بحث در مورد جزئيات بيشتر به آدرس زير مراجعه كنيد :

تمرين

كدام تركيب RGB  توسط مرورگر هدايت مي‌شود .

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

قابليت موقعيت‌ها  به شما اجازه مي‌دهد كه از طرح مشكلي بر روي زمينه سفيد است فاده كنيد و تا جايي كه ممكن باشد نيز ، استفاده مي‌شود . خيلي از سايتها رنگهايي دارند كه يك كمپاني خاص را نشان مي دهد و يا رنگهاي پر زرق و برق دارند و هميشه از الگوي سياه بر روي مشكي تبعيت نخواهد كرد

. دريك دسته بندي ، فقط مكانهايي كه در آنجا سايت جسارت دارد كه از مدل سياه وسفيد بدون آنكه لطمه‌اي به كارآيي آن سايت وارد شود استفاده كند Home page يا صفحه اول يك وب سايت است .مندرجات اطراف Home page فراوان هستند و سايت مي‌تواند اهداف خوبي را براي كاربر تأمين كند . اين تركيبات رنگها در المانهاي ديگر صفحه مثل عكسها و چهارچوب‌ها مي تواند استفاده شود و باعث ايجاد انگيزه براي جستجو و درخواست اطلاعات براي كاربرد گردد .

تذكر فني
براي ايجاد تركيبات مختلفل از پيش‌زمينه و متن، از سايت زير ديدن كنيد :

گذارهاي رنگ

گذار رنگها روشي است كه در آن همجواري رنگها يا جدايي آنها را بيان مي‌كند . گذارهاي رنگ ما بين رنگ متن و پيش زمينه بسيار مهم و قابل توجه است و براي كمك به جدايي قسمتهاي مختلف صفحه به كار برده مي شود . گذارا هنگامي كه با عكس در صفحه ايجاد مي شوند مسائل زيادي را بوجود مي‌آورند . وقتي كه گذاراي رنگ هموار (صاف) يا يك عكس ايجاد مي‌شود كاربران نياز به درجه رنگ بالاتري براي حمايت از آن و نيز به زمان بيشتري براي بارگذاري نياز دارد .

قلم‌ها

نظر به اينكه در ايجاد و انتشار وب ساختار آن نيز مانند ديگر تكنولوژيهاي آن به طور مداوم تغيير مي‌كنند، دو فونت معمول وجود دارند كه در اينترنت از آنها به كرات استفاده مي‌شود . اولين آن New Roman براي كامپيوترهاي PC است كه معادل آن Time بر روي سيستم‌‌هاي مكينتاش مي‌باشد ، فونت دوم ، Arial براي كامپيوترهاي pc و معادل با آن Helvetica بر روي سيستم‌هاي مكينتاش مي باشد . تكنولوژي‌ايي نظير دايناميك و فونتهاي تعبيه شده و توكار براي ارائه سريع و انتخاب بهتر ظاهر مي‌شوند .

به هر جهت اين فونتهاي معمول يك سايت زيبا و جذاب ايجاد مي‌كنند ويك نمايش خوب را ارائه دهند .

و اگر گاهي از آن استفاده كنيد احتمالاً متوجه خواهيد شد كه فونتهايي كه به آنها نگاه مي‌كنيد از موقعيت خوبي برخوردار هستند . ممكن است به سايتي نگاه كنيد كه از فونت ديگري استفاده كرده كه چشمان شما را به آساني درگير مي‌كند زيرا در بسياري از موار د از آن استفاده نمي شود .

محدوديت‌ها

يكي از محدوديت‌هايي كه در استفاده از فونت وجود دارد اين است كه فونتهاي انتخابي بادي روي سيستم كاربر نصب گردند تا در مرورگر ترجمه شود و اگر كاربر آن فونت را در سيستم خود نداشته باشد ، مرورگر آن را با فونت پيش فرض سيستم خود ترجمه مي كند. .براي pc ها فونت Time New Roman و Times براي مكينتاش . اگر قصد داريد كه از فونت ديگري استفاده كنيد ،‌اصل فونت بايد براي كاربران در دسترس باشد تا آنها بتوانند فونت را بارگذاري و سپس آن را بر روي سيستم خود نصب كنند و ا ين كار باعث مي شود كه شما را به تجارب وسرمايه‌گذاري بر روي سايت خود مطمئن مي‌كند .

فن چاپ

از آنجايي كه فونتها از اجزاء لازم هر سايتي محسوب مي شوند فونت و رنگي را انتخاب كنيد كه همراه با المانهاي ديگر صفحه بايد بتواند جملات بدون كلام ايجاد كند . خواندن متون زياد مانند چيزهاي ديگري كه مي خوانيد فشار زيادي وارد مي كند و خسته‌كننده مي باشد و باعث منحرف كردن توجه كاربر مي شود .يك فونت انتخابي خوب مي تواند در صفحه خوابيده شود و يا درخشش خود را براي  كاربر تنظيم و ايجاد كند .

serifs

زوايد آرايشي كوچكي وجود دارند كه در انتهاي هر كاراكتر اضافه مي شوند كه در شكل زير وجود دارند .

 در فونت Serif

اين زوايد به توانايي خواندن شما با هدايت چشمهاي كاربر در امتداد هر كاراكتر كمك مي‌كند ولي به هر جهت خواندن اين نوع قلم در سايزهاي خيلي كوچك يا خيلي بزرگ
( كوچكتر از 8 نقطه) مشكل مي‌باشد . با اين نوع نمايش  فونتهاي Serif بايد بيشتر در بدنه سايت جايگزين شود . شكل ظاهري Serif 4 نوع مي‌باشد :

Sans Serif ( آرايشي )

Sans Serif زوايدي كه در انتهاي هر كاراكتر در فونت Serif وجود دارد را ندارند  شكل زير را مشاهده كنيد :

در نمايش كاراكترها از اين زوائدي كه در انتهاي هر كاراكتر وجود دارد كاسته مي شود . فونت Sans Serif بايد كاراكتر به كاراكتر خوانده شود توصيه مي كنيم كه از اين فونت براي متون با اندازه كوچكتر از 8 نقطه و يا اندازه‌هاي خيلي بزرگ استفاده كنيد . معمولاً استفاده از اين 2 نوع فونت با يكديگر در يك صفحه وب تركيب خوبي را ايجاد مي كند .

بايد از مجموعه فونتهايي در سايت استفاده كنيد كه موافق هم باشند و در تناقض با يكديگر نباشند . در يك صفحه وب مي توانيد از مجموعه ‌اي از فونتهاي مختلف استفاده كنيد ولي بايد بدانيد كه براي نمايش موضوعاتي كه در سايت شبيه به هم هستند از فونت‌هاي شبيه بهم استفاده كنيد . براي مثال تمامي متنهاي Navigation بايد داراي فونت شبيه به هم باشند و يا تمامي پاراگرافهاي معمولي بايد دا رأي فونت نظير هم باشند ولي بعضي از متون مي‌باشند كه نياز به اين دارند كه با فونت متفاوتي نسبت به بقيه اجزاء صفحه ظاهر شوند مثل اعداد و رويدادها ...

از بكارگيري فونتهاي بزرگ در صفحه پرهيز كنيد چرا كه باعث شلوغ شدن صفحه و ايجاد مشكل براي خواندن آن مي شود . يك صفحه ايده‌آل ساختار ثابت و با استحكام دارد و براي كاربر ديد و منظر خوبي ايجاد مي كند . رنگ فونتها نيز بايد مستحكم باشد و نيز كاربر بداند كه آن متن چه چيزي را مي خواهد به نمايش گذارد .

سايز فونت
سايز فونت نرمال براي بيشتر مرورگرها 3 مي باشد واندازه‌هاي ديگر با اين مقدار فرضي اندازه‌گيري مي شوند . براي مثال اگر بخواهيد سايز  فونت را به 5 افزايش دهيد كدي كه براي آن به كار مي بريد بصورت فوق است :

به جاي استفاده از

سايز فونت نرمال براي بيشتر مرورگرها 3 مي باشد و اندازه‌هاي ديگر با اين مقدار فرضي اندازه‌گيري مي  شوند . براي مثال اگر بخواهيد سايز فونت را به 5 افزايش دهيد كدي كه براي آن به كار مي‌بريد بصورت فوق است :

نوع صحيح True Type
خيلي از فونتهاي شناخته شده به عنوان نوع صحيح هستند به اين معني كه آنها مي توانند در هر سايز نقطه‌اي بدون كم شدن كيفيت كاراكترها ترجمه شوند . True Type يك تكنولوژي ديجيتال است كه با كامپيوترهاي Apple توسعه يافته است و امروزه هم با سيستم‌هاي Apple و هم با سيستم هاي Microsoft استفاده مي شوند . Arial , Time new roman از نوع صحيح هستند .

بعضي از اين فونتها مثل Georgia , Verdena نسبتاً بيشتر ظاهر مي شوند و به زيبايي ترجمه مي شوند وي صفحه سنگين و پرمايه ايجاد مي‌كنند .

جلوگيري از اثرات بصري نامطلوب
اين فرآيند باعث جلوگيري از ناهمواري‌ لبه‌هاي متن يا نوشته مي شود . اغلب از تصاوير براي نمايش كاراكترها ، كلمات و جملات استفاده مي شود . اين فرآيند كناره‌هاي متن را بصورت هموار در مي‌آورد . با تيره كردن خطوط بين متن و پيش‌زمينه ( پركردن ناصافي‌هاي لبه‌هاي متن ) لبه‌هاي دندانه‌دار كنار فونت را از بين مي‌برد . اين گزينه بيشترين اثر خود را در تايپ متن با سايزهاي بزرگ ظاهر مي كند .يكي از مضرات اين فرآيند اين است كه مقداري رنگ را به تصوير يا نوشته اضافه مي‌كند . مخصوصاً در سايزهاي بزرگ ممكن است براي بارگذاري مشكلاتي ايجاد گردد .

خطوط افقي با طول زياد
براي آسانتر خواندن متن از ايجاد متن‌هايي با خطوط طولاني كه در پنجره‌هاي مرورگر ايجاد مي شود پرهيز كنيد . خواندن بصورت خط به خط هر بار بازگشت به سمت چپ صفحه در هر زمان ( اگر خطوط داخلي طولاني باشد ) كاري مشكل است . اين نكته را متذكر مي شويم كه خطوط را بصورت پاراگراف ايجاد كنيد و بيشتر از 10 تا 12 كلمه براي مرورگرهاي معمولي را در يك پاراگراف قرار ندهيد . اگر مجبوريد كه متون زيادي در صفحه داشته باشيد دو قالب ستون براي آن ايجاد كنيد .

ملاحظات ديگر
براي يافتن بهترين فونتي كه خواسته‌هاي شما را بهترين حالت برآورد كند نياز به تشخيص دامنه فونت و حدود عبارت براي تغييرات و دگرگوني آن داريد .

بايد همه اين تكنيكها و موارد را مورد آزمايش قرار دهيد . توصيه‌هاي زير مي تواند در جلوگيري از اشتباهات معمول در هنگام توسعه يك سايت به شما كمك كند .

در نظر داشته باشيد كه تمامي فونتهاي مجزا باهم يكي مي شوند و نيز بدانيد كه چگونه فونتها به طراحي شما وابسته هستند .

هر فونتي به طور جداگانه مي تواند تمامي منظورات ما را در يك زمان برطرف سازد . طراحي المانها مثل ( سايز و فاصله خطوط و رنگ پيش زمينه و پس زمينه ، Margin ) همه و همه مي‌توانند در محاسبه و ايجاد يك نتيجه مطلوب كمك مي‌كنند . متن فونتهاي نسبتاً بي اثر مانند Sansserif  مي‌تواند تنوع و دگرگوني عميق در اشكال ساده ميان تركيبات گوناگون انجام دهد .

فونتهاي مرورگر Netscape
براي مرورگر Netscape در سايت www.bitstream.com اشكال كاراكترهايي كه در صفحات كاربر دارند وجود دارد وآنها در يك فايل فشرده (PFR) ذخيره شده‌اند .

مي‌توانيد فايل PFR را به عنوان يك مرجع براي صفحات HTML و اسناد Style Sheet خود قرار دهيد . وقتي كه صفحه توسط مرورگري مشاهده شد كه از اين فايل پشتيباني مي كرد مرورگر فايل PFR را مي‌خواند و كاراكترها را دوباره ايجاد مي كند . PFR قادر است كه كاراكترها را در اسناد اصلي براي همراهي اسناد در هرجايي به كار ببرد

فونتهاي ميكروسافت
فونتهاي وب اوليه ميكروسافت Open Type ناميده مي شوند سايت  تلاش مشتركي بين ميكروسافت و Adobe مي باشد . از نقطه نظر نگاه وب Open Type مانند Truedoc عمل مي كند و كاراكترها را قادر مي سازد كه از ميان اسناد در فرم متراكم شده‌اي عبور كنند .

open type پهناي ابتدائي دارد كه post script , true type نوع 1 را به عنوان يك قالب منفرد در هم ادغام كرده است .

گر چه Type Open , True Dec تكنولوژيهاي رقابتي با يكديگر هستند ولي آنها قادر خواهند بود ه با هم در يك كامپيوتر همجوار باشند و هر فونتي را در صفحه ظاهر كنند به شرط آنكه كاربران آن فونت را بر روي سيستم‌هاي خود Install كنند . اين قالب اين تعهد را ايجاد مي‌كند كه كاربراني كه از مرورگرهاي مختلف استفاده مي‌كنند هميشه هر دو اين تكنولوژيها را حمايت كنند .

بعضي كاربران مرورگرهاي قديمي دارند . به عنون يك طراح وب بايد بتواندي بين تقاضاي خود براي تناسب فونتها و نياز به جلب بيشترين مخاطب ارتباطي برقرار سازد . و اين حقيقت كوشش بيشتر شما را براي ايجاد يك صفحه با منظر خوب ( مستقل از نوع مرورگري  كه اين صفحات با آن ديده مي‌شوند ) را مي‌طلبد .

 فضاي سفيد
هنگامي كه در ابتدا صفحه‌اي بر روي مرورگر شما بارگذاري مي شود ، علاوه برآنكه در هر قسمت صفحه با مفاهيمي مواجه مي‌شويد ، نتايج مندرجات محدودي را كه به خوبي و با هماهنگي توزيع شده‌اند مشاهده مي‌نماييد . اولين حس شما از اين نوشته‌ها چيست ؟ اگر شما بمانند خيلي از كاربران هستيد صفحه‌اي باتوزيع هماهنگ المانها و مقداري فضاي خالي ( كه در انجمن توسعه به عنوان فضاي سفيد معروف است ) را ترجيح مي‌دهيد .

توجه داشته باشيد كه كاربران به خاطر ايجاد صفحه‌اي با متنهاي زياد وشلوغ از شما قدرداني نخواهند كرد . آنها خيلي سريع صفحه شما را مرور مي كنند و اگر صفحه شما اينچنين بود ممكن است اطلاعات زيادي را ازدست بدهند اين نكته بدان معني نيست كه براي كاربران اطلاعات زياد ايجاد نكنيد بلكه به اين مفهوم است كه نبايد همه اين اطلاعات را در يك صفحه قرار دهيد . هر صفحه وب بايد حدوداً 50 درصد متن كمتري نسبت به يك صفحه مشابه چاپ شده آن داشته باشد .

هر صفحه بايد براي ارائه اجمالي اطلاعات طراحي شود و بايد اتصالاتي براي رسيدن كاربران به جزئيات بيشتر و عميق‌تر ايجاد شود . همه كاربران به يك مقدار اطلاعات نياز دارند . به كاربر اين اختيار را بدهيد كه خود انتخاب كند كه آيا جزئيات را مي خواهد يا نه ؟

و نيز صفحه را به منظور كوتاه كردن آن قسمت نكنيد . مگر آنكه شكستن آن منطبق باشد . هر صفحه بايد مستقل بوده و و ابستگي به جايي نداشته باشد . بعضي از طراحان و انتشار دهندگان وب از جدوال و عكسهاي Gif براي اضافه كردن فضا به صفحه استفاده مي‌كنند . بعد از محاسبه اينكه كاربران چه چيزي را نياز دارند كه بدانند مي توانيد صفحه‌آرايي خود را با استفاده از جداول و حاشيه‌ها HTML براي قرار دادن موفقيت سند و مندرجات صفحه در فضاهاي خالي شروع كنيد به عبارت ديگر جداول همه آن چيزهايي هستند كه شما به آنها نياز داريد .

ساختارها
ساختار صفحه با فايلهاي Gif شفاف
يك عكس شفاف مي تواند در صفحه به جاي اشغال كردن فضاهاي خالي وارد شود و نيز شما مي‌توانيد طول و عرض آن را با بكار بردن ويژگي هاي در تگ <Image> براي ايجاد ابعاد فضاي درخواستي ، كنترل كنيد . براي مثال اگر بخواهيد پاراگرافي وارد كنيد بايد تگ زير را ايجاد كنيد ( عكس gif همرنگ با background صفحه است ) :

بادادن اين مقادير پارگراف با فاصله pix 15 از سمت چپ شروع مي‌شود . باهمان رويه مي‌توانيد با دادن اين مقادير پاراگراف را با قرار دادن مقادير فوق افزايش دهيد .

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

ساختار صفحه با جداول
طراحان وب بايد به خوبي ساختار صفحه را درك كنند و از جداول در ساختار صفحات استفاده كنند . به طور پيش فرض تمامي موارد در HTML از طرف چپ تراز مي شوند . طراحان وب از جداول براي توزيع مندرجات كل صفحه نمايش در مرورگر استفاده مي كنند . ساختار جدول مي توانند با مندرجات پر گردند نيز مي توان براي جداول قاب قرار نداد تا كاربران متوجه وجود جدول در صفحه نگردند .

Cascading Style Sheet-CSS مي تواند براي رفع جداول در ساختار HTML ايجاد شوند كه متأسفانه همه مرورگرها از آن حمايت نمي‌كنند و فعلاً تا زماني كه CSS بصورت استاندارد جهانب در نيامده از جداول به عنوان استاندارد استفاده مي وشد .

ساختار صفحه با استفاده از فريم‌ها
فريم ها نيز مي توانند براي ساختار صفحات مورد استفاده قرار گيرند با اين وجود آنها نقش مياني در Navigation ها را نيز دارند . فريم‌ها مي‌توانند در يك سايت استفاده شوند و بايد به زودي در بحث روند طرح و برنامه ريزي مطرح شوند . به اين خاطر كه فريم‌ها به صورت نمايشي در طرح Navigation اثر دارند . فريم ها بر روي عاملهاي ديگر سايت نيز اثر مي‌گذارند و سايت را به خوبي آرايش مي‌كنند .

ساختار صفحه با استفاده از تعيين موقعيت
لايه ها با المانهاي پشته‌اي ديگر بصورت عمودي در آمدند و بيشتر مرورگرها از آنها حمايت مي‌كنند . تا هماهنگي اصلي در لايه‌گذاري اين است كه Netscape Navigator از تگ <Layer> استفاده مي‌كند . در صورتيكه Explorer  Internet با استانداردهاي V3C . موقعيت ياب CSS براي تمامي المانها مطابقت مي دهد . بنابراين دو فايل آغاز گر مجزا بايد براي اطمينان از مطلوبيت از عبور پايگاه داده استفاده شود . متأسفانه خيلي از ويراستارهاي HTML به طور اتوماتيك هر 2  ورژن را بصورت كد در آوردند .

خلاصه فصل
در اين فصل همه المانهايي كه بايد در يك صفحه وب به كار برده شوند و سپس درباره چگونگي كاربرد آنها بحث  كرديم  .

در مورد برنامه و قالبهاي گرافيكي و المانهايي كه ساختار صفحه را مي‌سازند و نيز درباره ساختار فونتها و انتخاب آنها نيز بحث شد و همچنين درباره ابن كه فضاي چيست و فريم‌ها و جداول چگونه در صفحات مورد استفاده قرار مي‌گيرند .

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