طراحی صفحات وب - پایگاه دانلود رایگان کتاب | دانلود کتاب

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

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

تصاویر برداری مقیاس پذیر SVG
قالب تصاویربرداری مقیاس پذیر (SVG) در فاز نقشه‌های کاری V3C می‌باشد . SVG در XML در تشریح اشکال اصلی کاربرد دارد . مشابه بردارهای گرافیکی دیگر SVG هنگامی که با هنرهای خطی و اشکال کار می‌کند بهینه می‌شود .
 
SVG به کمپانیهای نرم‌ا فزار‌هایی که از SVG حمایت می کنند را می‌توانید در سایت زیر پیدا کنید :
 
ایجاد تصاویر
ایجاد تصاویر با کیفیت در وب نیاز به داشتن علم و کاربرد نرم افزارهای گرافیکی دارد و از این جهت طراحی وب برای استادان آن می‌تواند مشکل باشد . یک هنرمند گرافیک کار باید بتواند بخوبی تصاویر خوبی را ایجاد کند . اگر شما ذاتاً استعداد این کار را ندارید خیلی از منابع در روی وب استفاده از این عکسها را به طور مجانی برای شما ایجاد کردند . عکسهای با کیفیت خوب معمولاً مجانی نیستند ولی به هر جهت می‌توانید برای بدست ‌آوردن کیفت مطلوب از گرافیک‌ها در سایت های مختلف ثبت نام کنید . این حق اشتراک می تواند در محدوده حق اشتراک ماهیانه تا حق اشتراک سالیانه باشد .
تذکر
ابتداد مطمئن شوید که تصاویری که در سایت خود از آنها استفاده می‌کنید حق کپی برداری از آن مجانی است . متون بکار برده شده در وب سایت یا باید توسط شما ایجاد شود و یا برای دسترسی به آنها باید اجازه داشته باشید . همیشه جملات خود را از لحاظ قانونی بررسی کنید .
ویژگی ALT
ویژگی ALT متون اختیاری در مکانهایی از تصاویر بر روی صفحات HTML ایجاد می‌کند . گرامر استفاده از ویژگی‌ ALT به شکل زیر دنبال می شود :
 
ویژگی‌ALT برای مکان‌های زیر مهم است :
کاربرانی که گزینه نمایش عکس را در مرورگرهای خود غیرفعال کردند از این طریق می‌توانند آنرا بخوانند .
هنگامی که صفحه در حال بارگذاری است کاربر می تواند توصیف آنرا بخواند
 این گزینه برای کاربرانی که قدرت بینایی یا شنوایی کمکی دارند امکانات خوبی ایجاد می‌کند .
بهینه سازی تصاویر
یک طراح وب اگر نتواند تصاویر خود را بهینه سازی کند هیچ یک از توانمندیهای Gif  و jpg و png تشخیص داده نمی‌شود . این اشتباه غلط از آنجا ناشی می شود که بگویم هیچ یک از این قالبها از دیگری بهتر نیست . در صورتیکه در قبل گفتیم که هر قالب تصویر دارای توانمندی می‌باشد که آن را منحصر به فرد می کند. به عنوان یک طراح وب باید بیاموزید که چه نوع قالبی را برای ایجاد یک تصویر خوب و جذاب و بدون مشکل به کار برید استفاده از قالبهای Gif  یا Jpg شما را به استفاده از تصاویر بهینه مطمئن نمی‌سازد .
موارد زیر راهنمایی‌ است که شما را در بهینه سازی تصاویر کمک می‌کند :
  استفاده از رنگهایی که در وب امنیت دارند
 ایجاد یک لیست از رنگهای ممکن
  استفاده از رنگ‌های یکدست در هر جایی که ممکن باشد .
اجتناب از اثرات بصری نامطلوب تا جایی که مقدور است .
 استفاده از امکانات بهینه سازی .
منابع بهینه سازی
در حال حاضر خیلی از منابع وجود دارند که برای کمک به طرح بهینه سازی تصاویر در دسترس می باشند . روش اصلی برای بهینه‌سازی ، محاسبه کوچکترین مقدار نگ ممکن و انتخاب قالب فایلی است که می‌تواند کیفیت رنگ درخواستی شما را ایجاد کند . بیشترین استفاده معمول در بهینه سازی استفاده از نرم افزارهای Image Ready , Fire Works , Photo shop و … می‌باشد .
۲ روش بهینه ساز معمول دیگر که در حال حاضر مورد استفاده قرار می‌گیرند      Desktop Version , Online Version می‌باشند .
بهینه سازی تصاویر بر روی اینترنت به نوعی نیاز به حق اشتراک سالیانه دارد که این مقدار به طور زیادی بسته به تعداد صفحات و یا عکسهایی می باشد که شما می‌خواهید آنها را بهینه کنید . بعضی از سرویسهای دیگر مجانی هستند . یک طراح وب بطور ساده یک URL برای تصاویر وارد می‌کند . یعنی بر روی سایتی می رود که امکان بهینه‌سازی برای تصاویر را به ما می دهد . برنامه‌ای روی سایت برای بارگذاری و بهینه‌سازی تصاویر آماده می‌شود .
سپس طراح برای دسترسی به بهینه سازی تصاویر صاحب امتیاز می شود . سرویسهای زیر تصاویر بهینه Online ایجاد می‌کند .
 
Image نیز به همان روش ، تصاویر شما را بهینه می کند .
تکه تکه کردن عکس و بهم اتصال دادن
روش دیگری که برای کمک به بارگذاری عکسهای بزرگ در زمان کمی وجود دارد برش دادن عکس  می‌باشد . برش تکه‌های متعددی از عکس را در بر دارد . با استفاده از جداول HTML یک  عکس می‌تواند تجدید بنا شده و در پنجره مرورگر بهم پیوند داده می‌شود . برش‌ها نمی‌توانند تغییری در سایز عکس بوجود آورند اما بارگذاری عکس را سریعتر می‌کنند زیرا کاربر قبل از بارگذاری عکس قسمتهایی از عکس را می بیند .
خلاصه فصل
در این فصل در مورد نکات مهم در تصاویر وب و با بیشتر قالبهای معمولی و امتیازات آنها و نیز تفاوت بین تصاویر BMP بحث کردیم ابزارها و تکنیک‌های بهینه‌سازی عکسها آموختید .
چند رسانه‌ای
اهداف  فصل
 تعریف تکنولوژ‌ی‌های چند رسانه‌ای که وب می‌تواند آنها را نمایش دهد .
 بکارگیری اصول طراحی چند رسانه‌ای
 انتخاب بهترین چند رسانه‌ای برای سایت خود
مقدمه
تقویت غیر  قابل انکار تمامی سرگرمیهایی که بوسیله چند رسانه‌ایها ایجاب شده است وجه عمومی وب را برای ما محبوب تر کرده است . ویدئو ، انیمیشن و صدا تأثیرگذار  است ، و همه اینها زمانی آغاز شد که چند رسانه‌ایها به عنوان بستر بزرگی از فن‌آوری اطلاعات توسعه پیدا کرد و سرگرمیهای جذاب زیادی به رسانه‌ای که بطور نسبی یک رسانه بر پایه اطلاعات می‌باشد اضافه شد .
متأسفانه استفاده نادرست از چند رسانه‌ای‌ها برای کاربران و توسعه‌دهندگان وب ایجاد یاس و ناامیدی می‌کند . رشد سریع تکنولوژیهای جدید باعث می‌شود که یک چند رسانه‌ای چیزی بیشتر از یک پیامد اخلاقی برای توسعه دهندگان وب محسوب شود . شما نه فقط باید تکنولوژی امروزی در دسترس را بدانید بلکه نیاز دارید که ‌آنچه را که بعدها در اختیارتان قرار می‌گیرد را احساس کنید . وقتی به این مهم دست یافتید باید تصمیم بگیرید و بیاموزید که تأثیرات کدام تکنولوژی در آینده بهتر و موفق‌تر است . بعلاوه باید در نظر بگیرید که  کدام تکنولوژی چند رسانه‌ای برای نیازهای کاربرانتان بهتر عمل می‌کند و مناسب‌تر است .
چند رسانه‌ای  وب ‌سایتها
برنامه‌ریزی کلیدی موفقیت‌ در ایجاد چند رسانه‌ای برای وب سایت می‌باشد . هر چند که زمانی بیش نیست که چند رسانه‌ای‌ها ایجاد شده‌اند اما به کاربردن آن در وب بصورت یک علم کامل نیست .
بکار بردن چند رسانه‌ای‌ها بر روی وب با ابزارهای گوناگون و با تکنولوژی‌هایی
امکان پذیر است که همیشه در دسترس نیستند . در این بخش شما می‌آموزید که چگونه یک چند رسانه‌ای مفید و کارآ را ایجاد کنید . چند رسانه‌ای محبوبیت زیادی بر روی وب بدست آورده است زیرا پیشرفت آن در تکنولوژی اینترنت به شما این اجازه را می‌دهد که چند  رسانه‌ای‌های مختلف را بر روی صفحات وب با هم ترکیب کنید .
این تکنولوژی‌ها توسعه دهندگان وب را به یک رقابت فرا می‌خوانید . پیش‌بینی کنید که چگونه توسعه  دهندگان با نمایش عکس‌العمل تکنولوژی‌هایی را بر روی سیستم‌های گوناگون و مرورگرهای متفاوت به نمایش در می آورند که این امر نیاز به برنامه‌ریزی و صبر و حوصله و مقدار زیادی آزمایش دارد  .
امکانات جاری
امکانات جاری چند رسانه‌ای‌ها بر روی وب مشکل به نظر می‌رسند و یک طراح وب برای کاربرد این ابزارها و تکنولوژی‌ها کوشش می‌کند . در آینده تکنولوژی‌های جدیدی در گامهایی بلند و پرقدرت ظاهر خواهد شد به هر جهت طراحان امروزی با ۲ عامل بزرگ روبرو هستند  که عبارتند از پهنای باند و حمایت مرورگر از تکنولوژی مورد نظر . برای استفاده و لذت از این تکنولوژی جدید به یک پهنای باند بالا و حمایت مرورگر از Plungins و تعداد خاصی از نرم‌افزار‌ها نیاز داریم . بنابراین طراحان وب باید اندیشه کنند و فریب استفاده از تکنولوژی‌های پر زرق و برق  در صفحات خود را نخورند ، زیرا کاربران استاندارد بر روی ارتباط Dialup هستند و مرورگرهای معمولی از هر نوع تکنولوژی نمی‌توانند حمایت کنند . این امر به آن ارتباط Dialup هستند و مرورگرهای معمولی از هر نوع تکنولوژی نمی‌توانند حمایت کنند . این امر به آن معنی نیست که شما نتوانید از تکنولوژی جدید در صفحات خود استفاده کنید ولی باید مراقب باشید که در صورت استفاده خیلی از کاربران خود را محروم می‌کنید . اگر شما کاربران خود را تعریف کنید و بدانید که کدام گروهها هستند که برای حمایت از تکنولوژی شما آماده می باشد ، دیگر لازم نیست نگران ارتباط با بقیه کاربران خود باشید . بنابراین می‌توانید از تکنولوژی استفاده کنید که باعث  توسعه و پیشر فت سایت شما باشد .
بیشتر تصمیمات درباره استفاده از چند رسانه‌ای‌ها که ما بعداً در مورد آنها بحث خواهیم کرد در طی برنامه‌ریزی در حین طراحی سایت آماده می‌شوند .
عامل زمان
برای بقیه افکار و انتخاب منابع بدون هیچ‌گونه محدودیتی برای کاربر یک الگوی جدید ایجاد می‌کند . برای مثال وقتی یک کاربر برای خرید یک کتاب یا مجله ثبت نام می‌کند یا مشترک می‌شود خود را درگیر کرده است چون شخص برای آن کتاب زمان و هزینه گذاشته است بنابراین ترجیح  می‌دهد که به جای خرید کتاب دیگر همان کتاب را بخواند . ولی در مقابل آن کاربران وب ترجیح می‌دهند که افکار خود را سریعاً تغییر دهند و به سایت دیگری مراجعه کنند . به هر  حال کاربران وب برای وقتشان سرمایه‌گذاری می‌کنند . تعیین مقدار زمان میانگینی که کاربران از وب استفاده می‌کنند مشکل است اما از نقطه نظر یک طراح زمان کاربران بسیار با اهمیت است و این زمان مشخص تا جایی باید محاسبه شود که بتوانید کاربران خود را نگهدارید . انتخاب صحیح چند رسانه‌ای به حفظ زمان بازدیدکنندگان کمک خواهد کرد و شانس بازدیدهای طولانی و عوامل بالقوه سایت را نیز افزایش می‌دهد .
انیمیشن
انیمیشن یکی از مهمترین مولفه‌هایی است که وب را از بقیه رسانه‌ها مشهور تر کرده است . درجات مختلف انیمیشن از تصاویر Gif انیمیشن ساده تا عناصر تعبیه شده سه بعدی و محیط‌های مجازی می توانند دسته‌بندی شوند و به محسوس شدن حس حرکت و درگیر کردن تعدادی از کاربران کمک می‌کند . بعضی اوقات از این انیمیشن ‌ها برای جلب توجه و در مواقع دیگر برای شرح و تفصیل مفاهیم استفاده  می شود . طرح و ابزار هدفمند نه تنها فواید انیمیشن را از مسیر خود منحرف نمی کند بلکه به ارزش آ‌ن نیز می‌افزاید . بیشتر انواع انیمیشن‌های پایه Animated Gif و فایلهای Macromedia Flash می‌باشند .
Animated Gif فایلهای (Gif Animator)
در قبل گفتیم که یک فایل انیمیشن از جمع آوری عکسهای ساکن و حرکت آنها د رتوالی رشته با سرعت و تکرار طراحی شده است .  خیلی از لوگوها با Gif Animated طراحی شده است .  اغلب آگهی‌ها فایلهای Gif هستند که خود با  حرکتشان برای آگهی چرخش ایجاد می‌کنند . فایلهای Gif Animator برای نمایش اطلاعات اضافی در مکانی مانند صفحه نمایش می‌توانند خیلی مفید باشند و توانایی  جلب نظر کاربران را نیز دارند و حرکت را در فرم قالب  عادی به صفحات ساکن اضافه می‌کند .
رویدادهای ماوسی Rollovers
رویدادهای ماوسی حرکتی است که با رد شدن مکان نمای ماوسی بر روی مکانهای معین صفحه ایجاد حرکت می‌کند . به طور معمول رویدادهای ماوسی همراه با المانهای Navigation کاربرد دارند و آنها با نشان دادن عکس‌العمل نسبت به عملیات کاربر ، کاربر را درگیر می کنند  و با کاربر بصورت متقابل عمل می کنند و نیز بعضی از عناصر با بصورت ابر اتصال نشان می‌دهند . در حالت  عادی ابر متن‌هایی که در صفحه بصورت پیش‌فرض قرار دارند به رنگ آبی هستند و زیر آنها خط کشیده شده است و این روش ظاهر صفحه راکمی متفاوت می کند .
فایلهای Flash
Macromedia Flash بطور چشم‌گیری مورد قبول همگان قرار گرفته است . Flash یک فرم جدید از انیمیشن را که در قبل ایجاد آن آسان نبود، معرفی می‌کند ودر حالی که پهنای باند را حفظ می‌کند رسانه‌ای غنی عرضه می کند .
اجتناب از Animation
اسکرول کردن متن‌ها یکی از انواع انیمیشن‌هایی است که کاربران مایل به استفاده از آن نیستند . برای دادن اطلاعات خیلی مهم نباید اسکرول ایجاد شود زیرا احتمالاً کاربران توجه کمی به آ‌نها خواهند کرد .
صوت
صوت متفاوت از بقیه مندرجات است و کاربران برای دریافت آن رسانه به نوع نمایش استناد نمی کنند و محدودیت‌های سایز مانیتور، سیستم عامل و عمق و بیت رنگی نیز در آن وجود ندارد .
اصوات می‌توانند به دو روش جداگانه انتشار داده شوند  کاربر باید صورت را بارگذاری کند و سپس مراحل اجرا آن سیستم شروع می‌شود و یا فایل صوتی می تواند در قالب رشته‌ای توزیع شود . کیفیت اجرای هر فایل ضبط شده و ابسته به مراحل  و قالبهای استفاده شده و کیفیت دستگاه خروجی سیستم کاربر برای فایل دیجیتالی می باشد .
بارگذاری صوت
اولین صوت Audio در وب بارگذاری آن فایل می‌باشد . یک فایل می‌تواند در یک صفحه وب تعبیه شود و همراه با سایر فایلها مانند  عکسها بارگذاری شود . باید در نظر داشته باشید که زمان بارگذاری فایلهای صوتری بزرگ زیاد است و بر خلاف فایلهای متنی نیاز به حافظه بیشتری برای ذخیره و اجرا دارند  .
زمان بارگذاری یک فایل صوتی در مقایسه با زمانی که آن فایل اجرا می  شود زیادتر است و این مورد برای کاربران خیلی مناسب نیست  . فایلهای صوتی تعبیه شده از بقیه قالبهایی که به کاربر برای بارگذاری اجازه نمی دهد متفاوت است . آنها جزء مولفه‌ های ضروری سایت هستند و غیر قابل تفکیک می باشند . توصیه می‌شود فایلهای صوتی را تعبیه نکنید و به جای آن به کاربر اجازه دهید که خود آنها را بارگذاری کند و گوش دهد . در حال  حاضر یک فایل تعبیه شده صوتی همراه با متن در وب استفاده می شود فایل Flash می‌باشد. فایلهای Flash فایلهای صوتی را بی‌اندازه در سایز کوچک می کنند و بصورت جریانی برای کاربر تبدیل می‌کنند و زمان بارگذاری آن را برای کاربر کاهش می‌دهند .
جدول زیر فایلهای صوتی و پسوندهای آن را نشان می‌دهد :
 
انتشار صوت
مزیتی که در روش انتشار صدا با فایلهای صوتی بارگذ اری شده است این می‌باشد که کاربر مجبور نیست که به فایل گوش دهد . به مجرد آنکه اتصال با سرور منتشر کننده صدا برقرار می شود یک حافظه موقت ایجاد می شود . فایل صوتی اجرا می گردد . یک فایل صوتی MB 10 را در نظر بگیرید ، بارگذاری آن با یک ارتباط با خط تلفن غیر ممکن است . در این نوع قالبها فایل زمانی که بارگذاری می‌شود می‌تواند اجراء شود و زمان انتظار برای تحویل آن به کاربر کاهش می‌یابد . نمایش زنده قالبهای صوت برای انتشار تکنولوژی مفید می‌باشد . گوش دادن به یک فایل صوتی بصورت Online که در همان زمان کربر منتشر می‌شود می‌تواند با گوش دادن به رادیو قابل مقایسه باشد . وقتی انتقال جریان صورت می‌گیرد بارگذاری کامل می‌شود و سپس در حافظه ذخیره می‌شود . شبکه جریان صوت را به صحنه هدایت می‌کند . Real Palayer این توانایی را دارد که جریانی از فایلهای صوتی ویدئویی را از میان ارتباط آهسته kb 28.8  با کیفیت قابل قبولی اجرا کند .
ویدئو
ویدئو در گسترش تکنولوژی Multimedia می باشد که در وب مورد استفاده قرار می‌گیرد تاثیر بسزایی دارد . درحال حاضر ویدئو برای کاربرانی که از Dialup استفاده می‌کنند از کیفیت خوبی برخوردار نیست . دیدار هر سایت‌های جدید و بزرگ‌ مثالهایی از فایلهای ویدئویی جاری که با استفاده ازReal Player , Media Player و … سایر برنامه‌ها اجرا می‌شود را ارائه می‌کند .
در این تکنولوژی از (ویدئو) بطور معمول قدرت تفکیک کمی دارد . حرکت قاب آنها کند و دارای عدم تعادل است و در ابعاد نیز کوچک هستند و لی اکثر اوقات به طور معمول قابل مشاهده و فهم هستند . مانند صوت فایلهای ویدئو نیز می‌تواند بارگذاری و اجرا شود و بصورت جریانی به سمت کاربر جاری شود و پس از قطع جریان با نرم افزارهای اجرا کننده اجرا شود . انتخاب ویدئو و استفاده از آن با زیاد شدن پهنای باند افزایش یافته
است .
ویدئو کنفرانس ، تبدیل کنندگان داده در وب ، دوربین‌های وب به عنوان وسایل حمل و نقل در وب مورد استفاده قرار می گیرد .
ویدئو بر روی وب نباید برای اشخاصی که در خارج از شبکه مثل LAN یا اینترانت هستند اجباری باشد . شما باید اتصالاتی ایجاد کنیدو با ایجاد آنها به کار اختیار دهید که خود را انتخاب کند . برای کلیپ‌های ویدئویی بایدزمان اختیاری را در حدود چند دقیقه برای انتشار صوت برای کمک به‌حفظ پهنای باند و بارگذاری ،‌زمان ایجاد کنید .
Internet TV
Internet TV  هنوز به عنوان یک جزء محکم و ثابت توسعه پیدا نکرده است و عموماً هنوز به عنوان وسیله‌ای برای ارتباط مردم با اینترنت نیست ولی بیشتر کارشناسان بر این باورند که این کار به زودی انجام خواهد شد . به طور معمول میکروسافت این تکنولوژی را داراست که نام آن Web TV می‌باشد و قسمتی از استراتژی  آن افزایش سود برای مصرف کننده می‌باشد . کنترل این وسیله شبیه به جعبه کابل و ارتباط با اینترنت با یک سرعت خط بالا می‌باشد . برای استفاده از Web TV کاربران نیاز به یک خط تلفن برای ارتباط با تلویزیون بر روی اینترنت دارند . به محض ارتباط کاربران می‌توانند تمام اعمال خود را مانند موج سواری در دریا بر روی اینترنت انجام دهد . کاربران می‌توانند از یک سایت دیدن کنند و تمامی  عسکهای آن مشاهده کنند و عکس‌العملهایی نیز برای کاربران در نظر گرفته شده که کاربران می‌توانند محصولات در دسترس داخل سایت بازدید کنند . شرکتهایی مثل سونی و فیلیپس در این تکنولوژی با TV Webtv.net متحد هستند .
اهداف یک سایت چند رسانه‌ای
چند رسانه‌ای‌ها مندرجاتی پرمحتوا ایجاد می کنند و روشهایی را برای شرح اطلاعاتی که مقصود آن واضح نیست بیان می دارند . در اوایل پیدایش چند رسانه‌ای وب متخصصان خبره وب آنقدر از این رسانه شگفت زده شده بودند که رسالت بزرگتر پیام آن را از یاد برده بودند . روشن کردن اهداف چند رسانه‌ای وب سایت قبل از ایجاد اولین صفحه یا ایجاد توالی انیمیشن سیار مهم است . د رابتدای کار با چند رسانه‌ای‌ها همیشه سئوالات زیر را ازخود داشته باشید .
۱ـ کاربران شما چه کسانی هستند ، پیام شما برای آنها چیست ؟
۲ـ تنظیمات یا بر هم‌کنش یا رابطه تقابل باید چگونه باشد ؟
۳ـ کدام یک ازالمانهای چند رسانه‌ای برای بر هم کنش وتکمیل پیام شما لازم هستند ؟
۴ـکدام نوع از ابزار و چه نوع مهارتی جهت ایجاد المانهای چند رسانه‌ای و ایجاد مطالب وب سایت نیاز دارید ؟
به عبارت دیگر هنگامی که کاربران سایت شما می‌بینند می‌خواهید چه عملی انجام دهند ؟ آیا می‌خواهید جسته گریخته مندرجات را بخوانند؟ خرید کنند ؟ پژوهش کنند ؟ یا در سیستم‌های بروز شده ثبت نام کنند ؟

مقدمه
طراحی  صفحات ب موضوعی کاملاً سلیقه ای است اینطور به نظر می رسد که بیشتر مردم دقیقاً می دانند که سلیقه شان چه چیزی را می پسندد و چه چیزی را رد می کند .
اما زیبایی و ظاهر یک سایت فقط نیمی از داستان است و اغلب  مشکلاتی نظیر قابلیت استفاده مشکلات اجرای فنی ، و صفحاتی که به کندی بارگذرای می شوند نیمه دیگر آن است که من سعی کرده ام آن را در این پروژه بیشتر  مورد بررسی قرار دهم
در اینجا  هدف آن است مه مباحثی فراتر از رفتار های بصری مورد بحث قرار گیرند ، مواردی که باعث می شوند سایت ها به درستی کار کنند . قابلیت استفاده مطمئناً یکی از این موارد خواهد بود . من تلاش کرده ام تجربیاتی که از ساخت سایت ها در طی چندین سال کسب کرده ام را در اختیار تان بگذارم ، برخی پروژه هایی که کار کرده ام موفقیت آمیز بوده اند و برخی دیگر با شکست روبه رو شده اند و من نه تنها از موفقیتهای ، بلکه از شکستها نیز درس گرفته ام و البته در صنعتی به جوانی طراحی وب ، تجربه بهترین معلم است ، من در این پروژه سعی کرده ام توازنی بین خواسته های طراح و نیاز های کاربر ، شکل ظاهری و عملکرد و منحصر به فرد بودن و انسجام بر قرار کنم ، البته با توجه به آنچه که در رسانه آشفته ای به نام وب قابل اجرا است .
بعد از مطالعه این پروژه بی خوبی درک خواهید کرد که طراحی وب ترکیبی از هنر علم و ، الهام و اجرا ، و در نهایت ناکامی و سربلند است ، شما ممکن است در زمینه طراحی و زیبا سازی سایت تبحر داشته باشید ولی در ز مینه تکنولوژی و یا تحویل سایت با مشکل مواجه باشید . حقیقت آن است که طراحی وب این دو جنبه را با هم احاطه کرده است و سرمایه گذاری در شناخت عمیقتر رسانه و مشکلات فنی در پروژه های آتی سودمند خواهد بود
با این حال هنگامی که این کتاب را می خوانید ممکن است تمام توصیه های ارائه شده از جانب من موافق نباشید و حتی شاید در یابید که بعضی قوانین و توصیه ها از انسجام کافی برخوردار نیستند . اما همانها نیز ممکن است جرقه ای را در ذهن شما باعث شوند و نقطه شروعی برای کشف های تازه به حساب بیایند . بنابراین قبل از آنکه چنین قوانین و توصیه هایی را فراموش کنید بهتر است آنها را بسنجید . طراحان بزرگ ، صرفنظر از رسانه ای که حوزه کاری آنها محسوب می شود ، سعی می کند ابتدا قوانین وضع شده را به خوبی شناخته ، سنجیده و سپس در صورت لزوم تغییر دهند . پیشرفتهای واقعی به ندرت به خاطر نادانی یا خود بینی اتفاق می افتند .
متأسفانه یک فرآیند گام به گام ثابت و تضمین شده جهت ساخت یک سایت وب عالی وجود ندارد . برخی چیز ها واقعاً نیاز به تجربه دارند . ایجاد یک سایت مطلوب و کامل نیازمند ساختن سایت های  بی شماری و حتی مرور کردن سایت های ساخته شده است . با این حال می توانم بگویم که اگر شما این پروژه را بخوانید ، حداقل نصف آنچه که برای سا ختن سایت های عالی نیاز دارید را فرا خواهید گرفت . باقی کار به عهده شما و خلاقیت شماست .
باتشکر، 
بهنام ناطق
ماهیت وب
بیشتر طراحان وب از نقطه نظر نگاه خود به طراحی وب می پردازند ، آنها علاقمند هستند که خودشان را با استعارات مشخص و با  تبلیغات فراوان نشان دهند . به هر جهت اینترنت برای شما ایجاد تجارت و نیز قابلیتی برای ارتباط نزدیک ارائه می دهد .کاربران می‌توانند اطلاعات و محصولاتی را که در خور نیازشان می‌باشد را پیدا کنند .
در این اینجا شما با انواع ابزارهای طراحی آشنا خواهید شد و به طبیعت آنها نیز پی خواهید برد . اینترنت معمولی‌ترین رسانه واسطه‌ای است که کاربر را آماده می‌سازد که تصمیم بگیرد که چه رسانه‌های انتشاری ، اینترنت یک رسانه تبادلی ( دو طرفه ) تلقی
شود .
اکثراً رسانه‌ها تأثیر گذار هستند و هدف آ‌نها ایجاد علاقه کافی است تا اینکه سرانجام بتواند تبادل مطلوب را انجام دهند .
ماهیت خواندن یک مجله و یا دیدن برنامه‌های تلویزیون ذاتی و بالفطره نیست و معمولاً کار انفردی است . در اصل عمل خواندن مطبوعات یا تماشای برنامه‌های تلویزیونی بالفطره عملی تبادلی نیست و در حقیقت بین عمل خواندن یا تماشای تلویزیون با عمل تبادل تفاوت وجود دارد . تنها تبادل انجام شده در مورد خوانندگان و بینندگان ، گرفتن اطلاعات از طریق خواندن یک کتاب یا مجله یا تماشای برنامه تلویزیون است . ( بصورت یک طرفه )
بنابراین ایجاد اطلاعات جهت رسانه‌های گروهی به راهکارهای متفاوت‌تری نسبت به ایجاد اطلاعات مربوط به اینترنت نیاز دارد .
مشاهدات بی عیب اینترنت مانند ثبت رویداد بر روی مرورگر وب ، دلالت بر درخواست کاربران و واکنش سرور دارد . به عبارت دیگر انجام یک داد و سند و تبادل می باشد .
بعلاوه با این طبیعت ، اینترنت نمی تواند بصورت خطی عمل کند . اگر کاربر تصمیم به انجام داد و ستد و تبادل داشته باشد ، ابتدا باید به سایت راهنمایی و هدایت شود، و سپس برای تجارت در سایت بماند و گردش کند و در پایان دوباره به سایت بازگردد و نیز باید در نظر داشت که کاربر می‌تواند برای انجام داد و ستد در هر لحظه به هر سایت دیگری مراجعه نماید .
 هدایت و توسعه وب جاری
پیشرفت وب از چند سال پیش شروع شد اضافه شدن چند رسانه‌ای ها در وب ، دلالت بر پیشرفت وب دارد . این نوع جدید از اطلاعات در حال حاضر در اینترنت قابل دسترس می‌باشد . محتوای اطلاعات عبوری در اینترنت به عنوان جزء اصلی خیلی از پروژه‌ها و برنامه‌ها محسوب می‌شود . مزیت عبور اطلاعات در بازتاب اطلاعات و آمار و ارقام می‌باشد . به این صورت که در زمانی که کاربر آن را در خواست کند از پایگاه داده‌ها عبور می‌کند و بدست کاربر می‌رسند . اینترنت دومین پیشرفت خود را بعد از ایجاد تجارت الکترونیک در تاریخچه توسعه وب انجام داد . کارمندان شرکتها و صنایع می توانند با این توانایی عبور اطلاعات تجاری خود را از خانه انجار سال و دریافت کنند و نتیجه آن خیلی کارآمدتر و پربارتر از حضور در محیط کاری می‌باشد . شبکه داخلی شرکت با بکارگیری وب برای فروشندگان بیرونی و شرکای تجاری می‌تواند اطلاعات درخواست شده را سریعتر از  بیرون انتقال دهند و سلسله مراتب یک تجارت را به پیش ببرند .
برای مثال شرکت A برای شرکت B کاغذ تولید می‌کند اگر کمپانی A بخواهد به شرکت B دسترسی پیدا کند این امر با بکارگیری شبکه داخلی شرکت امکانپذیر می‌باشد . بنابراین شرکت A می‌داند که چه موقع شرکت B به محموله‌ای دیگری نیاز دارد و نیز شرکت A می‌تواند نخستین قدم برای تهیه محموله قبل از درخواست از طرف شرکت B را بردارد .
ابزارها و تکنولوژی
سالها مذاکرات زیادی درباره اینکه چه ابزارهای خاصی در فرآیند گسترش وب استفاده می‌شود ، وجود داشت . به هر جهت امروزه خیلی از  ابزارهای ویرایشگر وب در رده‌های چهارم و پنجم قرار گرفتند .
 مذاکرات بیشتر پیرامون آن بود که طراحان وب از کدام ابزارها استفاده کنند نه اینکه صرفاً بخواهند از ا بزاری خاص استفاده کنند . بطور ایده‌آل ترکیب کد های دستی و WYSIWYG بهترین گزینه از نقطه نظر توسعه امروزی است . انجام این عمل ساده زمان زیادی برای توسعه یک سایت HTML با کد نویسی را می‌گیرد . احتیاجات به روز رسانی اطلاعات مستلزم آن است که بین صفحه وب و یک سایت محلی اتحاد و پیوستگی ایجاد شود . امروزه WYSIWYG از استاندارد خارج شده است .
و از Dream Wearer , Front Page استفاده می‌شود . در آینده می‌توانید تشکیلات خود را به آخرین درجه پیشرفت برسانید و همواره با زمان جلو روید این ابزارهای قدرتمند که در صنعت نیز قابل رقابت هستند در دوره CIW ارائه خواهند شد . این ابزارها با هم هماهنگی خاصی دارند .
رسانه‌های واسط
طراحان وب باید در مورد دیگر تفاوتها و مشکلاتی که در طراحی وب در مقایسه با رسانه‌های دیگر بخصوص چاپ پیش می‌آید آگاه شوند . در ابتدای زمان طراحی وب ، بسیاری از سایتها بصورت HTML ساده و بصورت بروشورولی باخاصیت وب توزیع می‌شدندو این شیوه باعث شد که کمپانیها خیلی سریع اطلاعات خود را بر روی وب ارسال کنند . بعلاوه وب به عنوان قلمرو جدید بود که نه سندیتی برای آن وجود داشت و نه اطلاعات معتبری برای تأئید اعتبار آن بود .
بیشتر کمپانی‌ها خیلی زود آموختند که ارسال بروشور بر روی وب موثر تر از استفاده از رسانه‌های دیگر نیست . به طور کلی در یک جمله می‌توان گفت صفت چاپ خاصیت خطی دارد یعنی از یک خط به خط دیگر و از یک صفحه به صفحه دیگر . ….
ولی وب یک رسانه خطی نیست و به همین سبب خواص متفاوت‌تری دارد و هنگامی که در داد و ستد از آ‌ن به عنوان یک قالب خطی استفاده شود خواص متفاوتی از خود بروز می‌دهد . بیشترین ویژگی متفاوت وب در برقراری ارتباط دو طرفه با کاربران می‌باشد . صنعت چاپ نمی‌تواند مشاهدات کاربران را بصورت فرم تخصصی در ‌آورد . و در یک جمله دیگر می‌توان گفت رسانه وب می‌تواند امکانات ارتباط دو طرفه را به بهترین صورت انجام دهد و برای کاربر فرم شخصی ایجاد کند . و این پدیده یک ارتباط مستقیم بین تجار و کاربران ( خریداران ) را برقرار می‌کند . در طی این کتاب شما با ابزارهای زیادی در توسعه صفحات وب آشنا خواهید شد اما توجه داشته باشید که هدف از این پروژه آگاهی شما از امکاناتی است که هر کدام از این ابزارها به شما می‌دهندو این شما هستید که در نهایت تصمیم گیرنده اصلی خواهید بود که کدام ابزار فواید بیشتری برای نظام مند شدن مقاصدتان دارد .
محاسبه مهارتهای HTML خود
در این تمرین شما مهارت HTML خود را با ایجاد یک صفحه ساده محاسبه خواهید کرد . شایان ذکر است که مندرجاتی شما بکار می‌برید می‌تواند متفاوت از مندرجات بکار برده شده در این تمرین باشد .
تمرین ایجاد یک صفحه وب پایه :
در این تمرین شما یک صفحه وب ساده ایجاد خواهید کرد و توانایی HTML خود را محک می‌زنید.
۱ـ از الگوی HTML برای ایجاد قالبهای زیر استفاده کنید .
ـ  Table
ـ Hyper Link ( استفاده از پروتکل HTTP )
ـ Font
ـ Image
در این فصل شما با مفاهیم تکنولوژی و ابزارهای مورد استفاده آن و مختصراً‌با مشکلاتی که برای بکارگیری این تکنولوژی استفاده می‌شود آشنا شدید و در نهایت مهارت HTML خود را محاسبه کردید .
معرفی فصل
کیفیت مندرجات سایت شما و نمایش آن از عوامل موفقیتهای اصلی سایت هستند . یکی از بزرگترین اشتباهاتی که شما در ساخت و تولید و نمایش مندرجات روی وب دارید دخالت دادن استانداردها ، تمرین‌ها و تعهدات رسانه‌های دیگر مثل چاپ می‌باشد . وب رسانه متفاوت‌تری از بقیه رسانه‌های موجود است و بنابراین استانداردهای متفاوت‌تری برای توسعه آن نسبت به بقیه رسانه‌ها مثل چاپ ویدئو و سایر رسانه‌های سنتی وجود دارد . این فصل به شما خلاصه‌ای از بیشتر ملزوماتی که شما نیاز دارید برای توسعه کار آن آنها را در نظر بگیرید ارائه می‌دهد .
کاربران وب و نکاتی در طراحی سایت
حدس می‌زنید که چه مقدار از متن صفحه وب شما به طور واقعی توسط کاربر خوانده می‌شود ؟ تمام آن ؟ بیشتر آن ؟ حقیقت آن است که کاربران اغلب هیچ مقداری از آن را نمی‌خوانند . به دنبال این جمله باید گفت که درحدود ۸۰% از مردم فقط در مندرجات سایت پویش می‌کنندو به دنبال نکات و عبارت کلیدی می‌گردند . به طور متوسط ۲۵% کاربرای در خواندن روی مانیتور نسبت به خواندن از روی چاپ آهسته‌تر عمل می کنند . بنابراین ،‌این واقعیت چگونه بر ساختار صفحه شما اثر می‌گذارد؟ به عنوان یک طراح شما باید صفحه‌ای ایجاد کنید که کاربران بتوانند سریع آن را کاوش کرده و اطلاعات مطالبه کرده را پیدا کنند . بخاطر آورید که یکی از تناقضات در طراحی وب این است که تصور کنید که وب فرم دیگری از رسانه‌ چاپ است . هنگامی که طرح یک صفحه با مندرجات مشابه به یک مجله و یا بروشور ایجاد می‌کنید کاربران به طور مسلم به سایت دیگری خواهد رفت چرا که شما در نظر نگرفتید که ماهیت مطالب بر روی وب باید با دیگر رسانه‌ها به خصوص چاپ متفاوت باشد . هنگامی که کاربران به سایت شما می‌رسند اولین حسی که در آنها ایجاد می‌شود از ا همیت زیادی برخوردار است . مثلاً ممکن است سایت وب شما که به قصد تجارت ایجاد شده است فقط یک پنجره داشته باشد ولی به هر حال اگر به نظر مشتری غیر جذاب باشد شما مشتری خود را به رقیب خود واگذار کردید . بنابراین اگر بدانید که بازدیدکنندگان فقط سایت شما را مرور  می‌کنند متوجه خواهید شد که چرا نباید کاربران رامجبور به خواندن مطالبی کنید که برای آنها جالب نیست . کاربران را راضی نگه دارید و آنچه را که می‌خواهند به آنها عطا کنید ، حتماً آنها به سایت شما باز خواهند گشت . ( قابل ذکر است قواعد بازار یابی در سایتهای تجاری متفاوت تر از دنیای واقعی می‌باشد )
کاربران نمی‌خواهند که صفحات در هم و نامربوط را ببینند و ازطرفی محتویات و مندرجات سایت نیز ضروری است پس با این وجود ساختار و انتشار آن هر دو با هم از اهمیت برخوردار هستند . معمولاً کاربران سایت شما را برای اطلاعات ویژه‌ای که در مورد جستجو و یا خرید و … می‌خواهند بازدید می‌کنند .
هر چقدر این عمل برای آنها آسانتر باشد ، کارشان را راحت و سریعتر انجام می‌دهند. کاربران وب فقط علاقه‌مند به آنچه که می‌خواهند بیابند هستند . کسانی که در کارهای تجارت خرده و جزئی هستند اعتقاد بر این دارند که مشتری‌ها خود خواه هستند ، ولی آنها می‌دانند که پرداخت صورتحساب است که درهای تجارت را باز نگه می‌دارد و اگر شما این نکته را درک کنید صفحه‌ای بوجود خواهید آورد که ساختار آن اهداف تجارت کاربران را تأمین کند .
سایتی نظیر سایت www.xnn.com را در نظر بگیرید به محض ورود به سایت سریعاً می‌توانید مرور کلی از کل سایت داشته باشید و یا به عبارت دیگر شما می‌توانید کل سایت را با نگاه از یک عبارت به عبارت بعدی مرور کنید و آنچه را که بخواهید خیلی سریع بدست آورید . بنابراین تمایل به دیدن مجدد سایت را دارید . سایت فوق از نمونه سایتهای موفق در جهان می‌باشد .
واقعیت در طراحی
یک طراح وب باید برای فن‌آوری جدید و اینکه چگونه از ابزارها در طراحی استفاده کند آماده باشد و معمولاً طراحان جدیدترین سخت افزارها و نرم افزارها را به کار می‌گیرند . به هر جهت این انگیزه ایجاد می شود که شما باید صفحات دو طرفه دینامیکی ایجاد کنید که نرم افزارهای جدید و قدیم را حمایت کنند .اکثریت استفاده کنندگان وب به جستجوی طراحی عالی و پیشرفته  نیستند و لی استثنائاتی همیشه در این قواعد وجود دارند . به هر جهت یک راهنمای خوب در هنگام طراحی وجود دارد که به قرار زیر است :
۱ـ بیشتر کاربران از مانیتورهای Inch 17 یا کمتر استفاده می کنند .
۲ـ بیشتر کاربران با تنظیم تفکیک‌پذیری ۶۴۰*۴۸۰ کار می‌کنند .
۳ـ بیشتر کاربران دارای مودم‌های با سرعت K56 هستند .
۴ـ اغلب کاربران مرورگرهای وزن ۴ به پایین دارند .
۵ـ تعداد کمی از مردم زمان زیادی را برای بارگذاری فایلها صرف می کنند .
همواره در طراحی وب نکات بالا را در نظر داشته باشید .
 
ساختار متناسب برای صفحه
طراحی اصلی روزنامه مورد علاقه خود را در نظر بگیرید . در صفحه روی جلد خبر اصلی وجود دارد و  بعلاوه متون حاشیه‌ای هم در آن قرار دارد که خبرهای دیگر روزنامه‌ در آن لیست شده است . این قضیه به چه نحوی در خواندن شما تأثیر می‌گذارد ؟ این طرح کلی شما را وادار به خواندن یک خبر در روی صفحه اول نمی‌کند . اگر خلاصه یک خبر که درستی آن را دنبال می‌کنید ببینید در آن شماره صفحه‌ای وجود دارد که از طریق آن می‌توانید وارد  کل داستان شوید . یعنی با یک اتصال شما را به کل می رساند . این ساختار  اغلب با ساختار یک هرم مقایسه می‌شود که در نمودار شکل زیر ترسیم شده است . در این مدل در ابتدا خلاصه داستان برای شما ارائه می‌شود سپس اتصال برای مأخذ و جزئیات آن برای کسانی که علاقه‌مند هستند قرار داده می‌شود . وب ایده‌آل ترین رسانه برای این نوع انتشار است .
 
با استفاده از ابر اتصالات می‌توانید کاربران خود را به شرح موضوعات در داستانها ، اخبار و محصولات و سرویسهایی که دارید هدایت کنید و نیز می‌توانید پیش  تاریخ و اطلاعات مبسوط و زمان و منابعی را که روزنامه‌ها به دلیل فقدان جا نمی‌توانند ایجاد کنند را بوجود آورید . اگر کاربران بخواهند اطلاعات را به طور کامل بخوانند می‌توانند به سمت جهت تعیین شده هدایت شوند . به عبارت دیگر می‌توانند برای پیگیری قضیه حرکت کنند .
المانهای طرح بندی یک صفحه
قبل از شروع به ساختن صفحه یک دید کلی وساختار کلی از سایت را در نظر بگیرید. شما باید المانهای صفحه و نیز چگونگی فعل و انفعالاتی که آنها با هم دارند را بدانید . از نقطه نگاه بصری باید المانهای انتخابی را در داخل سایت ایجاد کنید که این المانها عبارتند از طرح ، رنگ ،‌نوع قلم ، تصاویر و چند رسانه‌ای‌ها و … طرح صفحه منوط به آن است که طراح بتواند اطلاعات خود را به کاربر نشان دهد این نوع قالب‌بندی باید برای درک آسان‌تر اطلاعات باشد مثل اسناد و گزارشها . این نوع ساختار به دسته بندی و ساده کردن ، ویرایش و توزیع و پخش اطلاعات کمک می‌کند به عنوان یک طرح وب باید ساختار خود را توسعه دهید و در این مرحله تجربیات کاربران می‌تواند برای شما بسیار مفید واقع شود .
موارد زیر را در هنگام طراحی یک صفحه در نظر بگیرید :
۱ـ Frameset اجازه می‌دهد که صفحات چند گانه شما بصورت واحد ظاهر شود.
۲ـ Margin کنترل می‌کند که مطالب چگونه و با چه فاصله‌ای از کادر مانیتور شروع شوند .
۳ـ Border برای Frame ها و جداول HTML استفاده می شود .
۴ـ رنگ ایجاد یک احساس گیرا و کلی از ساختار سایت و باعث ازدیاد توانایی خواندن می‌شود .
۵ـ    Space  جدا کردن المانهای صفحه
۶ـ Navigation برای کنترل کاربران برای حرکت در سایت
۷ـ Rule مندرجات صفحه را به قسمتهای جداگانه و و ابسته قسمت می کند .
۸ـ White Space باعث کم تر ک ردن بی نظمی المانهای صفحه می‌گردد .
۹ـ  Table توزیع المانهای صفحه در جاهای مختلف صفحه و شکل دادن اطلاعات در ستونهای مخفی
۱۰ـ Lists  به طرح اجازه می‌دهد تا اقلام را سازماندهی کنیم .
۱۱ـ Paragraph گروهی از کاراکترهای متنی در صفحه می‌باشد .
۱۲ـ Heading level ایجاد سایزهای گوناگون از متن و طراحی و سازماندهی آن.
۱۳ـ Image مورد استفاده در ایجاد جاذبه ابعادی ، اطلاعات ، Navigation
تعیین کنید که سایت شما کدامیک از این عوامل را در بر دارد و شما را در روند توسعه یاری می‌دهد و اگر به این عوامل پرداخته نشود به تدریج منابع و نیروها و زمان خود را از دست خواهید داد .
طرح معمول صفحه
وب سایتها از قالبهای اصلی و پایه برای نمایش اجزاء صفحه استفاده می‌کنند . شما می‌توانید این قالبهای معمول را از خیلی از سایتها ایده بگیرید  .برای مثال Navigator معمولاً‌در قسمت چپ بالای صفحه نمایش داده می شود و رنگ این المان اغلب کمی متفاوت تر از رنگ بقیه صفحه است همچنین المان Navigation می‌تواند در پائین یک صفحه نیز قرار گیرد .
متن سیاه بر روی زمینه سفید و نیز قرار گرفتن تبلیغات کمپانی در بالاترین گوشه سمت چپ صفحه نمایش نیز از قالبهای متداول  می‌باشد که اغلب بکار برده می‌شود . این قالبها و نیز قالبهای دیگر برای تشخیص  اینکه از کدام قالب باید استفاده شود  در عمل می تواند کمک کند . کاربران هنگامی که سایت شما را بازدید می‌کنند می‌دانند که چه توقعی از آن دارند . در اینجا نمی خواهم بگویم که کاربران باید مندرجات و محصولات سایت شما را بدانند ولی باید اساس و اصول استفاده از سایت شما را بداند و این اصل شامل کاربردهای مختلف Navigation و متون و عکسها می باشد . طرح سایت شما می تواند با جایگزین شده Navigation در قسمتهای مختلف رده‌بندی شود و نیز نوع قالب بندی به طوری زیادی وابسته به محتویات و مندرجاتی است که داخل سایت شما قرار گیرد .
 
سرعت و سایز صفحات ( اسکرول کردن )
کاربران خواهان سرعت زیاد هستند . شما این خواسته آنها را می توانید با طراحی صفحاتی با سایزهای محدود فایلها می‌توانید تأمین کنید . با ۱۰ ثانیه مکث در سایت ، کاربران از سایت شما بریده خواهد شد و توجه آنها به سایت را از  دست خواهید و این نکته بدان معنی  است که طراح وب باید از عکسهای مقرون به صرفه استفاده کند  و انتخاب فایل‌ها باید با دقت زیادی همراه باشد . بهینه سازی عکسها عامل مهمی در بارگذاری سریعتر آنها است که بعداً به جزئیات آن می‌پردازیم . جدول  زیر ماکسیمم سایز صفحه‌ای که برای واکنش درخواست ارتباطات با سرعتهای گوناگون مجاز است .
 
سایز صفحه به معنای سایز تمام فایلها و المانهای بکار برده شده در صفحه شامل فایلهای HTML و تمامی عناصر تعبیه شده (jpg , gif) می باشد .
توجه داشته باشید که ۱ ثانیه عکس العمل به کاربران این اجازه را می دهد که آنها حس کنند که به طور آزاد و راحت در میان اطلاعات جابه‌جا می‌شوند ولی زمان ۱۰ ثانیه نیاز دارد که به توجه کاربر به سایت پرداخته شود . در اواسط سال ۱۹۹۷ مطالعات نشان می داد که متوسط سایز یک صفحه وب ۴۴ کیلوبایت است یعنی طبق جدول ۵ برابر بیشتر از زمان معمول واکنش برای کاربرانی که از ISDN استفاده می‌کنند . بنابراین بری بیشتر کاربرانی که از پهنای باند متوسط استفاده می‌کنند سرعت بارگذاری بسیار کم خواهد بود . همچنین توجه داشته باشید که kb 44 ، ۳۰ درصد بیشتر از بزرگترین حد سایز برای کاربران استفاده کننده از مودم خواهد بود .
دانستن چنین مطالعاتی شما را به سمت توسعه وب متمایل می‌کند تا جایی که کامپیوترها و ارتباطات آنها با یکدیگر سریع‌تر شود . خیلی از وب سایتهایی که منتشر شده صفحات کوچکی هستند که از عکسهای کم مصرف در آن استفاده شده است .
طراحی با دقت و توجه در کیفیت نمایش
توصیه می‌شود که برای طراحی از درجه تفکیک ۴۸۰*۶۴۰ استفاده کنید تا جایی که بدانید کاربر از Resolution nd دیگری استفاده می کند . با طراحی  با این Resolution اطمینان دارید که کاربران برای دیدن تمام صفحه شما از Scroll استفاده می کنند . برای پرهیز از ایجاد اسکرول افقی صفحه را از pix 600 پهن تر نکنید و به خاطر داشته باشید که کاربران فقط سایت شما را مرور می‌کنند و حاضر نیستند که برای دیدن تمام صفحه شما از اسکرول استفاده کنند . کیفیت استاندارد و اصلی ۴۸۰*۶۴۰ می باشد که بیشتر در عمل به کار می‌رود هنگامی که شما با تفکیک ۴۸۰*۶۴۰ طراحی می‌کنید این عدد اثر بیشتری نسبت به درجات تفکیک‌های بالاتر دارد . شکلهای زیر یک وب سایت را در انواع Resolution ها نشان می دهد . با وجود اینکه هنوز همه از مانیتورهای ۴۸۰*۶۴۰ استفاده می‌کنند اما در سالهای اخیر Resolution های بیشتری بوجود آمده‌اند و شما ممکن است که بخواهید تکنولوژی برتر را بدون رها کردن کاربران و با سخت افزار قدیمی برای آنها تأمین کنید . یک راه انجام این عمل طراحی است که بتواند سازگاری خوبی با کاربران داشته باشد . در صورت استفاده از Resolution زیاد کاربران تصمیم به بزرگتر کردن پنجره می‌کنند .
سایتهای www.altavista.com و www.amazon.com و www.cnet.com مثالهای خوبی در این زمینه  هستند .
رنگ
المانهای رنگی نقش مهمی را در اصول و نظام ارائه یک سایت دارند . سبک و روش و فرهنگ و آداب شرکتها با ارائه رنگ در سایت و چگونگی هماهنگی و ترکیب آنها با یکدیکر به تصویر کشیده  می شود . به عنوان مثال یک وب سایت با رنگ بندی قوی مثل قرمز و صورتی و زردو سبز، برداشت هنری جذابی از ماهیت‌های صنعتی و فرهنگی مثل حالتی از یک نرم افزاری با تکنولوژی بالا یا یک واحد گرافیکی به بیننده ارائه می‌دهد . و از نقطه نظر یک سایت با رنگهای ملایم تری مثل سفید و آبی روشن و یا خاکستری برای محافظه‌کاری و برای ارگانهای سنتی مثل بانک و یاشرکتهای سرمایه‌گذاری به کار برده می شود .
یکی از مسائلی که در توسعه و پیشرفت طراحی سایت با آن مواجه می شوید این است که چگون احساسها را در هنگام انتخاب رنگ برای وب سایت شرکت خود منتقل کنید . کدام رنگها بیشتر مکمل هستند چند رنگ به معرض نمایش گذاشته می شود ؟ آیا شما از خطوط پایه افقی و عمودی استفاده می کنید؟ آیا سایت شما دارای اشکال هندسی مثل چند ضلعی و مربع می باشد ؟ این سئوال و نیز بقیه سئوالات باید برای بهترین مدل به تصویر کشیدن عکس در یک کمپانی برای کاربران مطرح شود .
نمایش رنگ
یک مانیتور کامپیوتر شامل هزاران  المان است که پیکسل نامیده می شود . هر پیکسل فقط یک رنگ را در یک زمان نشان می دهد . هنگامی که به یک عکس نگاه می‌کنید شما صدها یا هزاران پیکسل می بینید که هر کدام یک رنگ ویژه دارد و ترکیب آنها باعث ایجاد تصویری می شود که شما می بینید . رنگهایی که وقتی با یکدیگر ترکیب می‌شوند رنگ سفید  را می سازند به عنوان یک رنگ افزودنی تلقی می‌گردند . اصل این رنگ شامل رنگهای قرمز و سبز و آبی است که RGB نامیده می شود . مانیتور کامپیوتر رنگهای افزودنی را نشان می دهد . اضافه کردن رنگهای بیشتری به این ترکیب در سیستم RGB باعث جابه‌جایی رنگ به سمت رنگ سفید می شود .
قالبهای رنگ
رنگها با دو قالب عددی استاندارد شده‌اند :
۱ـ درجات قرمز و سبز و آبی (RGB)
۲- هگزا دسیمال
یک طراح برای انجام یک طراحی وب دقیق باید منحصراً از کدهای هگزا دسیمال استفاده کند . ولی به هر جهت برای بحث در مورد اهداف خود هر دو مورد را در نظر می‌گیریم 
سیستم RGB و هگزا دسیمال یا هر دو ( با هررنگی که د رمحدوده دید و بینایی قرار دارندو با خواص گوناگون با یکدیگر ترکیب می‌شوند معرفی می شوند . ) قالبهای این رنگها توانایی نمایش ۱۶۷۷۲۲۱۶ رنگ را دارد .
RGB 
مقدار RGB در مبنای ۱۰ در رنج عددی ۰ تا ۲۵۵ . در سیستم مبنای ۱۰ از ارقام بین ۰ تا ۹ استفاده می شود . وقتی رقم ۱ در دسترس قرار می‌گیرد مقدار از ۰ به ۱ افزایش می‌یابد وهمینطور R=255,G=255,B=255 بنابراین مقدار RGB برای رنگ سفید R=255,G=255,B=255 که نمایش ماکسیمم درجه قرمز و سبز و آبی است ) می باشد .
مقدار درجه  RGB برای رنگ سبز به اینگونه است :
R=0,G=255,B=0
بنابراین مقدار RGB برای رنگ سبز ۰ و ۲۵۵ می باشد که نمایش %۰ برای قرمز و آبی و بیشترین درصد برای رنگ سبز است .
شما می‌توانید رنگ سبز را با کدهای HTML به قرار زیر دنبال کنید :
  المانهای رنگی نقش مهمی را دراصول و نظام ارائه یک سایت دارند . سبک و روش و فرهنگ و آداب شرکتها با ارائه رنگ در سایت و چگونگی هماهنگی و ترکیب آنها با یکدیگر به تصویر کشیده می‌شود .
به عنوان مثال یک وب سایت با رنگ‌بندی قوی مثل قرمز و صورتی و زرد و سبز ، برداشت هنری جذابی از ماهیت‌های صنعتی و فرهنگی مثل حالتی از یک نرم افزاری با تکنولوژی بالا یا یک واحد گرافیکی به بیننده ارائه می‌دهد . و از نقطه نظر یک سایت با رنگهای ملایم‌تری مثل سفید و آبی روشن و یا خاکستری برای محا فظه‌کاری و برای ارگانهای سنتی مثل بانک و یا شرکتهای سرمایه‌گذاری به کار برده می شود . یکی از مسائلی که در توسعه و پیشرفت طراحی سایت با آن مواجه می‌شوید این است که چگونه احساسها را در هنگام انتخاب رنگ برای وب سایت شرکت خود منتقل کنید . کدام رنگها بیشتر مکمل هستند چند رنگ به معرض نمایش گذاشته می شود ؟ آیا شما از خطوط پایه افقی و عمودی استفاده می‌کنید ؟ آیا سایت شما دارای اشکال هندسی مثل چند ضلعی و مربع می باشد ؟ این سئوال و نیز بقیه سئوالات باید برای بهترین مدل به تصویر  کشیدن عکس در یک کمپانی برای کاربران مطرح شود .
تذکر فنی
برای کامل کردن سیستم رنگهای RGB و درجات هگزا دسیمال می‌توانید سایت   مراجعه کنید این سایت توسط Lynda Weinman از مرکز هنری Ojai Digital ایجاد شده است .
ارقام هگزا دسیمال
درجات ارقام هگزا دسیمال در بازه بین ۰۰ تا FF بصورت زیر است :
 
عدد در مبنای ۱۰ با همان مقدار به مبنای ۱۶ تبدیل شده و نمایش داده می شود . مقدار ۰۰ هیچ درصدی را نمایش نمی‌دهد و مقدار FF بیشترین درصد مقدار رنگ را نمایش می‌دهد .
رنگ سفید در مبنای ۱۶ به این صورت نشان داده می‌شود :
 
این مقادیر بیشترین درصد رنگهای قرمز و سبز و آبی را نشان می‌دهد  .
نمایش سبز در مبنای هگزا دسیمال به قرار زیر است :
 
این مقادیر بیشتری درصد رنگ برای رنگ سبز و هیچ درصدی را برای رنگهای آبی و قرمز نشان نمی‌دهد . برای هر رنگ سبز و آبی و … در مبنای ۲,۱۶ کاراکتر اختصاص داده شده است و با توجه به این می‌باشد که اساس RGB از ارقامی ما بین ۰  تا ۲۵۵ برای هر مقدار آبی و قرمز و سبز استفاده می‌کند .نمودار فوق را ملاحظه کنید :
 
وقتی از مبنای ۱۶ در HTML استفاده می شود در ابتدای آن از علامت # استفاده می‌شود که لازم نیست اما قسمتی از ویژگی‌های رسمی HTML محسوب می‌شود . در تک Body برای مثال کد رنگ پیش زمینه آن اگر سبز باشد ، خواهیم داشت :
 
هشدار
Netscape 4 در قرار دادن    در اطراف ویژگی‌ها اشکال می‌گیرد . هنگامی که از مقدار مبنای ۱۶ در قسمت Style ها استفاده می‌کنید   را بردارید .
ترکیبات اصلی رنگها
هر مانیتور برای نمایش یک رنگ از ۳ تفنگ  الکترونیکی استفاده می کند . هر تفنگ مسئول یک رنگ منفرد است ( قرمز ، سبز‌، آبی ) ترکیبات گوناگونی از تفنگ‌ها و جریان زیادی از الکترونها یک رنگ را ایجاد می‌کنند. در یک لحظه شخصی با شلیک این تفنگ‌ها رنگ سفید بر روی صفحه تولید می کند . شلیک تفنگهای قرمز و سبز رنگ سبز ایجاد می‌کند . شلیک تفنگهای سبز و آبی رنگ فیروزه‌ای ایجاد می‌کند . ترکیب رنگهای قرمز و آبی رنگ سرخابی ایجاد می‌کند  .
نمودار فوق مثالهایی از ترکیبات این رنگها و ارتباط بین آنها است :
 

 
با وجود آنکه هر مقدار ازRGB و هگزا دسیمال برای یک رنگ خاص استفاده می‌شود ولی مهم است که به خاطر داشته باشید که فقط ۲۱۶  رنگ با ویندوز و مکینتاش و Internet Explorer , Netscape navigator حمایت می‌شوند. هر۸ بیت مانیتور هر مرورگر ۲۵۶ رنگ را می‌تواند به نمایش بگذارد که تا حدود ۴۰ مورد از این رنگها توسط سیستم عامل استفاده می‌شود . این ۲۱۶ مقدار حمایت می شوندو بقیه رنگها شدت نورشان افزایش می یابد .
افزایش شدت نور فرآیندی است که مرورگر یک رنگ را به نزدیکترین رنگی که مرورگر قادر به حمایت از آن است تبدیل می کند . وقتی رنگی با کدهای HTML ایجاد شود به رنگ ثابت و یکپارچه تبدیل می‌شود .
( امیدوار باشید که به رنگ اصلی که شما می خواستید نزدیک باشد ) اگر مرورگر نور رنگی که در یک تصویر نشان داده می شود را با ترکیب ۲ رنگی که نزدیک به یکی از آنهاست زیاد کند توسط مرورگر حمایت نخواهد شد و بصورت لکه نشان داده می شود .
جدول ۳-۲ سیستمی از مقادیر RGB و هگزا دسیمال را که بدون مشکل در مرورگرهای متعدد و بر روی سیستم‌های متعدد ترجمه خواهد شد را نشان می‌دهد . ( اگر مقادیر دیگری به غیر از اینها استفاده شود مرورگر  نور آن را به نزدیکترین مقدار تخمینی افزایش می‌دهد .
هر کدام از این مقادیر مطابق با مقدارواقعی است . برای مثال استفاده از مقدار ۵۱ در سیستم RGB درست مانند استفاده از مقدار ۳۳ در سیستم هگزا دسیمال است . به عبارت دیگر مقدار RGB (201,51,153)  معدل با مقادیر cc3399# در هگزا دسیمال است .
مرورگر ضامن هر ترکیبی از این مقادیر است و بدون تناقض و مشکل در پایگاه داده‌ها مرورگر ترجمه می‌شوند .
ترکیبات هر کدام از رنگهای قرمز و سبز و آبی شدت رنگی که باید نمایش داده شود را محاسبه می‌کند ،‌جدول ۲-۴ درصد شدت رنگهایی که توسط مرورگر از کمتر به بیشتر حمایت می‌شوند را نشان می‌دهد .
 
 
لیست کامل بالا را می توانید در سایت   پیدا کنید .
تذکر
مشکلاتی در ترجمه‌ رنگ برای مانیتورهای bit 16 وجود دارد . به دلایل ریاضی ۲۱۶ رنگی که در مرورگرها حمایت می‌شود در جدول رنگ این کامپیوترها نشان داده می‌شود و مرورگرها با استفاده از رنگهای دیگری که به آن رنگها نزدیک است این جابجایی را برای نمایش رنگ و به طور دقیق  انجام می دهند . اما مرورگرها جابجایی رنگ را به طرق مختلف ( منوط به اینکه آیا آن رنگ در یک عکس ارائه می شود یا توسط HTML ایجاد می شود) انجام می دهند .