طراحی وب

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

فقط چند کلیک
در طراحی وب محتویات سایت خود را همیشه در دسترس بازدید کننده نگاه دارید. هر صفحه از سایت شما باید از طریق هر صفحه دیگر قابل دسترسی باشد. سعی کنید در طراحی وب پیوندهای میان صفحاتتان را طوری طراحی کنید که بازدید کننده در هر جای سایت که باشد بتواند با حداکثر ۴کلیک خود را به صفحه مورد نظر برساند. شما باید به طور مرتب ساختار صفحات و ارتباط بین آنها را در سایتتان بررسی کرده و مشکلات احتمالی را بر طرف نمایید. بازدید کننده ها برای این به سایت شما می آیند که با شما و خدماتتان آشنا بشوند پس بهتراست کاری نکنید که آنها واردار شوند برای کسب اطلاعات در سایت شما حفاری کنند!

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

مسیرهای متعددی در نظر بگیرید !
سعی کنید در طراحی وب و ایجاد پیوندهای بین صفحات سایت خود طوری عمل کنید که برای دستیابی به هر صفحه بیش از یک مسیر وجود داشته باشد و کاربران خود را به یک مسیر محدود نکنید . به عنوان راه حل در بیشتر سایت ها از منوهای کرکره ای استفاده می شود که راهی موثر برای قرار دادن مسیرهای متفاوت در صفحه است بدون اینکه فضای زیادی در صفحه اشغال کند.

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

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

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

محتویات سایت خود را همیشه در دسترس بازدید کننده نگاه دارید .
در طراحی وب هر صفحه از سایت شما باید از طریق هر صفحه دیگر قابل دسترسی باشد. سعی کنید در طراحی وب پیوندهای میان صفحاتتان را طوری طراحی کنید که بازدید کننده در هر کجای سایت که باشد بتواند با حداکثر 4 کلیک خود را به صفحه مورد نظر برساند. شما باید به طور مرتب ساختار صفحات و ارتباط بین آنها را در سایتتان بررسی کرده و مشکلات احتمالی را بر طرف نمایید. بازدید کننده ها برای این به سایت شما می آیند که با شما و خدماتتان آشنا بشوند پس بهتراست کاری نکنید که آنها وادار شوند برای کسب اطلاعات در سایت شما حفاری کنند!

---

---

---

مزایای طراحی با div نسبت به table :

حتما شنیدید که خیلی جاها توصیه میشه که برای Layout صفحه بجای Table از Div استفاده کنید . اما چرا ؟

وظیفه اصلی تگ div در واقع چیدمان صفحه و طراحی قالب صفحه است و به همین دلیل است که نسبت به table فوق العاده انعطاف پذیرتر است. شما براحتی می توانید یک div را در هر مکانی از صفحه در کوتاهترین زمان قرار بدهید. حالا به این انعطاف پذیری قابلیت حرکت ( انتقال ) را که با کمک تکنولوژی آژاکس اضافه شده نیز بی افزایید.

از طرف دیگر، div کد کمتر و بهینه‌تری (<div> </div>) نسبت به یک table (که معادل <table><tr><td></td></tr></table>) ایجاد می‌کند. که این هم باعث کاهش حجم صفحه تولیدی می‌شود و هم باعث لود شدن سریعتر صفحه .

نکته دیگری که وجود دارد آن است که crawler ها که وظیفه جستجوی و ذخیره کردن صفحات را برای موتورهای جستجو ( مثلگوگل ) بعهده دارند. چون بصورت معنایی صفحات را crawl می کنند بنابراین اگر صفحه شما بهتر و معنایی تر ایجاد شده باشد ، ازPage rank بالاتری هم برخوردار خواهد بود. مشکل Crawler ها در ایجاد ارتباط بین مطالب داخل تیبل است. زمانیکه شما مطالب مرتبط با یک موضوع را در بخش های مختلف یک تیبل قرار میدید Crawler ها در نحوه ارتباط این بخش ها با هم و همچنین نحوه ارتباطشون با مطلب اصلی دچار سردرگمی میشن.
نکته دیگری که یک div را در قالب بندی دردرجه بالاتری قرار می دهد، انعطاف پذیری آن در CSS هاست. به این معنی که شما می توانید یک قالب چندین منظوره ایجاد کنید و بعد با تغییر مکان div ها که با css انجام می‌دهید . کل قالب صفحه تغییر شکل پیدا می‌کند.

حالا با این همه برتری div نسبت به table ممکن است برای شما این سوال ایجاد شود که table برای چه مواردی باید استفاده شود. طراحان html همانطور که div را برای قالب بندی وقرار دادن متن و تصویر پیاده‌سازی کردند. table را هم برای ایجاد صفحات به شکل Tab و ایجاد جداول (‌لیست های موجود در صفحه) بوجود آوردند. در اکثر مواقع توصیه می‌شود که برای پیاده‌سازی Tab ها از table استفاده کنید. همانطور که مسلما خود شما هم متوجه شدید با استفاده از یک table براحتی می‌توان یک tab را پیاده‌سازی کرد. درصورتی که اگر بخواهید همان tab را با div پیاده‌سازی کنید باید زمان و انرژی بیشتری صرف کنید.

در کل با توجه به این نکات کلیدی :

• حجم کمتر صفحه تولید شده
• Page rank بالاتر در گوگل و سایر search engine ها
• قالب انعطاف پذیرتر
• برای قراردادن متن و تصویر در وب توصیه شده که از div استفاده شود
• کنترل بیشتر بوسیله css
• جدول صرفا برای ساختار tabی مناسب است
• کنترل و حرکت توسط آژاکس
• …

به شما اکیدا توصیه می‌کنم که بجای استفاده از table در قالب‌بندی صفحات از div استفاده کنید و از قدرت آن لذت ببرید.

---

نمونه ای از قالب بندی با استفاده از Div :

<!DOCTYPE html>

<html>

<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">

<h1 style="margin-bottom:0;">Farid Karami</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">

<b>Menu</b><br>

HTML<br>

CSS<br>

JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">

Content goes here</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">

Copyright © FaridKarami.Blogsky.com</div>

</div>

</body>

</html>

---

نمونه ای از قالب بندی با استفاده از Table :

<!DOCTYPE html>

<html>

<body>

<table width="500" border="0">

<tr>

<td colspan="2" style="background-color:#FFA500;">

<h1>Farid Karami</h1>

</td>

</tr>

<tr>

<td style="background-color:#FFD700;width:100px;">

<b>Menu</b><br>

HTML<br>

CSS<br>

JavaScript

</td>

<td style="background-color:#eeeeee;height:200px;width:400px;">

Content goes here</td>

</tr>

<tr>

<td colspan="2" style="background-color:#FFA500;text-align:center;">

Copyright © FaridKarami.Blogsky.com</td>

</tr>

</table>

</body>

</html>

---

برای درک هر چه بیشتر فرق بین Div و Table بهتر است هر کدام از روش های فوق را در یک فایل Notepad نوشته و با پسوند html ذخیره کنید سپس چنانچه با دستور زبان CSS و HTML آشنایی داشته باشید متوجه خواهید شد که استفاده از Div در قالبندی صفحات انعطاف پذیری بیشتری نسبت به Table دارد .