آموزش طراحی وب سایت و صفحات وب html php

آموزش طراحی مقدماتی تا پیشرفته صفحات وب

با سلام خدمت همه ی بازدیدکننده گان سایت , از امروز یک بخش آموزشی برای طراحی وب سایت رو براتون آماده می کنیم . همون طور که می دونید امروزه تکنولوژی وب بسیار پیشرفته و روز به روز پیشرفته تر می شود. و داشتن یک وب سایت خوب در دنیای اینترنت اهمیت و کاربرد زیادی در رونق کسب و کار دارد و عده ای زیادی هستند که به دنبال آموزش های طراحی سایت و صفحات وب می گردند. حال تیم بیگ تم برا آن است تا یک دوره ی آموزشی کامل و حرفه ای برای دوستداران وب و اینترنت قرار دهید , این آموزش تقریبا 14 یا 15 فصل هستش که امروز فصل اولش و براتون آماده کردیم. قطعا با فراگیری این آموزش می توانید به راحتی وب سایت های حرفه ای و زیبایی طراحی کنید. یک نکته ی مهم در این آموزش اینه که کد نویسی به صورت دستی هستش یعنی تو یه ویرایشگر کلیه کدها رو باید دستی بنویسید تا تسلط کامل به کدها داشته باشید. بعد از اینکه این 15 فصل به پایان رسید دوره ی آموزش نرم افزار های کاربردی برای طراحی سایت رو معرفی و آموزش خواهیم داد. خوب بریم سراغ فصل اول از اموزشمون…

آموزش طراحی صفحات وب حرفه ای و پیشرفته طراحی سایت و قالب

کلیات

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

وب چیست؟

وب سرویس گرافیکی اینترنت و ابزار گرافیکی دسترسی به منابع موجود در اینترنت است.

وب رابط گرافیکی بین کامپیوترهای شبکه ای متشکل از کامپیوترهای دنیاست که با یک زبان نشترک بنام پروتکل به یکدیگر متصل شده اند وب شبکه جهانی وب وwwwهمه به یک معناست ولی بعضی ها وب و اینترنت را به یک معنا میدانند اینترنت شبکه شبکه های کامپیوتری در دنیاست .   وب به عنوان یکی از کاملترین سرویسهای اینترنت باسرعت تمام در حال توسعه استوب با سایر امکانات در ان نظیر جستو جو گرهای وب (مانند سایت های google وyahoo) به سرعت به جستجوی مطالب مورد نظر بپردازید صفحات وب شامل متن هایی است که به منابع موجود در اینترنت پیوند داده شده به متنهای پیوند داده شده در وب ابر متن گفته میشود ابر متن نوعی پیوند است که با انتخاب و کلیک کردن روی انکاربر به منابع اطلاعاتی شبکه اینترنت دسترسی میابد کاربران اینترنت برای مشاهدهو استفاده از صفحات وب از نرم افزاری به نام مرورگر استفاده میکنند مرورگر نرم افزاری است که امکان فراخوانی مشاهده و استفاده از صفحات وب را به کاربر میدهددو مرورگرInternet Explorer وNetscape Navigatorجزو معروفترین مرورگرها هستند

تاریخچه طراحی وب

فکر ایجاد وب به ماه مارس سال 1989باز میگرددتوسط تیم برنرزلی در ازمایشگاه فیزیک ذره ای اروپا پروژه ای را به منظور جهت تبادل نتایج در بخشهای مختلف دنیا از طریق شبکه های مختلف کامپیوتر پیشنهاد کرد در ان زمان کسی به فکر اضافه کردن صدا و تصویر به صفحات نبود در اواخر سال 1990 اولین بخش پروژه نرم افزاری ابر متن پیشنهاد شده به وسیله تیم برنرزلی روی کامپیوتری به نام Next پیدا شد و با امکان ایجاد فراپیوند در اینترنت به عنوان اولین نسخه از زبان ابر متن به جهان معرفی شد.در حال حاظر بیش از 9میلیارد عنوان صفحه وب در دسترس جهانیان قرار دارد که هر روز بر تعداد انها افزوده میشود.

نحوه کار کرد وب

شبکه وب شبکه ایست که براساس مدل سرویس دهنده/سرویس گیرنده کار میکند.در این مدل کاربران با کامپیوترهای خود تقاضای استفاده از منابع موجود در اینترنت راارسال میکنند(سرویس گیرنده)و کامپیوتر های دیگری به درخواست های ارسال شده از سرویس گیرنده ها پاسخ میدهند (سرویس دهنده).نحوه کار کرد وب به این صورت استکه اطلاعات در داخل فایل های متنی به نام صفحات وب قرار میگیرند و این فایل ها  روی کامپیوتر های میزبان به نام سرور وب ذخیره میشوند .همان طور که قبلا اشاره شد کاربران برای دیدن صفحات وب از نرم افزاری به نام مرورگر استفاده میکنند مرورگر درخواستی را برای خواندن یک صفحه وب از یک کامپیوتر مشخص به سرور وب میفرستد .این در خواست براساس استاندارد ارتباطی ارسال ابر متن به سرویس دهنده وب ارسال میشود .سرویس دهنده وب نیز بر اساس موقعیت مکانی ادرس یادشده پاسخ سرویس گیرنده را به زبان ابر متن ارسال میکند

مرور گرها چگونه به خواندن صفحات وب میپردازند ؟

  • یک مرور گر یک درخواست (Reguest) برای خوتندن یک صفحه به وب سرور ارسال میکند
  • این درخواست بر اساس استاندارد ارتباطی یا پروتکل HTTP بوده وشامل ادرس صفحه مورد نظر است
  • ادرس یک صفحه وب چیزی شبیهhttp://www.dehestani.ws/resume.htm است.بخش //:http نوع پروتکل یا استاندارد ارتباطی www نوع سرورdehestani نام دامین(WS .(domainپسوند مربوط به نوع دامین و resume.htm نام صفحه ای است که باید خوانده شود

 مرور گرها چگونه صفحات وب را نمایش میدهند؟

  • چگونگی نمایش یک صفحه وب به صورت مستتر در مرور گرها وجود دارد یعنی یک مرور گر به محض فراخوانی یک صفحه وب فرامین موجود در ان را که معمولا به زبان HTML است خوانده و اجرا میکند
  • مرور گرها با کمک فرامین و دستور العملهای داخل صفحات وب به نمایش اطلاعات  صفحات میپردازد
  • وظیفه اصلی فرامین (تگ های) HTML بیان چگونگی نمایش اطلاعات است .

 

<html>

<head>
<title>
 آموزش طراحی وب سایت 
</title>
</head>
<body>

<p> آموزش مقدماتی تا پیشرفته طراحی قالب برای وب سایت </p>

</body>
</html>

 

 چگونه میتوان فرامین سازنده یک صفحه وب را مشاهده کرد ؟

پس از فرا خوانی یک صفحه وب در مرور گر برای مشاهده فرامین سازنده صفحه مورد نظر که معمولا به زبان HTML است کافی است در مرورگر وب از منوی View گزینه Source را انتخاب کنید

روش شناسی طراحی صفحات وب

قبل از ارزیابی اصول مهم در طراحی صفحات وب به این نکته توجه کنید که طراحی صفحات وب موضوعی سلیقه ای است در اینجا تا حد امکان از ارزیابی نکات مهم در طراحی با واژه های خوب و بد اجتناب شود و به جای ان از واژه های موثر و بی تاثیر استفاده شود به خاطر داشته باشید که هیچ دستورالعمل تضمین شده ای برای طراحی کاملا موثر وجود ندارد علاوه بر این چیزی به عنوان بهترین طراحی وجود ندارد ولی کار شما به عنوان طراح وب این است که نکات مهم زیر را همیشه مد نظر داشته باشید :

شاخص های ارزیابی  یک وب سایت موثر

  • این شاخص به پنج دسته اصلی تقسیم میشوند ;
  • طراحی
  • مشتری مداری
  • ساختار (اسکلت بندی ) اطلاعات
  • محتوای اطلاعات
  • خدمات پشتیبانی
  • در این قسمت به شرح هر یک از شاخص های فوق می پردازیم;

 طراحی

  • طراحی تصاویر گرافیک صفحه ومحل قرارگیری انها
  • طراحی و پیش بینی امکانات ضروری                                                                                                        طراحی تصاویر گرافیک صغحه و محل قرار گیری انها
  • طراحی مکان (محل قرارگیری) اطلاعات و نحوه قرارگیری انها در سایت جذاب باشد
  • وع و رنگ قلم و پس زمینه مربوط به صفحات (در زبانهای مختلف) با هم متناسب باشد
  • متون سایت های چند زبانه در کلیه سیستم عامل ها قابل رویت باشد
  • صفحات و اجزای انها از اصول طراحی گرافیک پیروی کند
  • تصاویر هنری و گرافیکی مو جود در صفحه برای انجام کاری مشخص با هم ارتباط داشته باشد
  • شکل ایکن ها به روشنی انچه را که مد نظر  و هدف اصلی لست بیان کند,محل قرارگیری ایتم ها و امکانات موجود در صفحات متناسب با محتوای ان باشد
  • سایت اینترنتی ایجاد شده توانایی جذب افرادی را که به طور اتفاقی با سایت برخورد میکنند و تمایل دارند که زمانی را صرف بازدید از سایت کنند داشته باشد
  • ازامکانات صوتی گرافیکی و ویدیویی برای دادن جلوه و جذابیت بیشتر به مطالب و پیغام های سایت استفاده شود
  • صفحات و اطلاعات موجود در سایت به دور از یک روند همیشگی و کلیشه ای باشند
  • تصاویر و اشکال موجود از وضوح کافی برخوردار باشند
  • اصول کاربر پسندی در طراحی تصاویر گرافیک و محل قرارگیری امکانات سایت رعایت شود
  • زبان استفاده شده در نقشه و اجزای گرافیکی سایت با زبان استفاده شده برای ارایه اطلاعات سازگاری کافی و مناسب داشته باشد
  • از تصاویر و جلوه های گرافیکی و دینامیک (پویا) مناسب و جالب استفاده شود .

طراحی و پیش بینی امکانات ضروری

  • امکان جستجو در مطالب سایت وجود داشته باشد
  • صفحات سایت د رحالات مختلف نمایش به طور مناسب دیده شوند
  • امکاناتی برای صرف نظر کردن از اطلاعات زمانبر گرافیکی و صوتی در نظر گرفته شود و ارایه اطلاعات بیشتر به صورت متن تدارک دیده شود (مانند:Skip Introدرصفحه اول انیمیشن های فلش),سایت چند زبانه باشد
  • در هر صفحه ایکنی معین برای تغیر زبان سایت در نظر گرفته شود
  • با انتخاب گزینه “تغیر زبان سایت” در صفحات ترجمه همان صفحه نمایش داده شده یا به صفحه اصلی متصل شود
  • امکاناتی به منظور دیدن متن اطلاعات در مرور گرهای صرفا متنی علاوه بر مرورگرهای چند رسانه ای تدارک دیده شود (وجود گزینه ای به منظور مرور گرهای صرفا متنی )
  • امکاناتی مناسبی به منظور انتقال متقابل اطلاعات بین سایت و استفاده کننده ان وجود داشته باشد
  • امکان ارتباط بین سایت و موتورهای جستجو وجود داشته باشد
  • جستجوی داخلی سایت به تمام زبانهای موجود انجام پذیرد
  • زبان پیش فرض در فرمهایی که کاربر پر میکند زبان همان صفحه باشد
  • در صورت نیاز بازدید کنندگان سایت به نرم افزار مخصوص برای مشاهده محتویات سایت دسترسی به نرم افزار مورد نظر از طریق سایت فراهم باشد
  • کاربران بتوانند نظر های خلاقانه خود را به مسئولان سایت اعلان کنند
  • در صروت لزوم امکاناتی برای برگشتن به قسمت بالای صفحات (استفاده از گزینه Top) موجود باشد,دسترسی به صفحه اصلی سایت از هر صفحه ای ممکن باشد
  • قسمتی تحت عنوان “باز خورد ” برای جمع اوری نظرات انتقادات و پیشنهادات بازدید کنندگان سایت ایجاد شود
  • در صورت لزوم از گزینه “برگشب به عقب “استفاده شود
  • فایل های موجود در سایت (اعم از تصویری , متنی  , اسلاید و…) فرمت مناسبی از لحاظ حجم و کارایی داشته باشند
  • امکان تشخیص موقعیت صفحه در حال نمایش نسبت به صفحات در رده بالاتر وجود داشته باشد (سایت دارای نقشه سایت باشد )
  • قسمتی تحت عنوان “پرسشهای متداول ” در نظر گرفته شود
  • ایکن های اصلی در تمام صفحات قرار داده شوند
  • فهرست مطالب ارایه شده در بالای صفحه اصلی ارایه شوند
  • امکان دریافت نسخه کم حجم تر صفحات حجیم به حالت بدون شکل ,با شکل کوچکتر ,صفحات با قالب ساده و…برای کاربر وجود داشته باشد .

مشتری مداری

  • هدف از راه اندازی سایت و مطالبی که در بر میگیرد به روشنی مشخص است
  • هدف از ایجاد هر صفحه اشکار و مشخص باشد
  • سایت قابلیت بهره دهی واقعی به کاربران خود را داشته باشد (ارزشمند و مفید باشد ).
  • سایت از لحاظ انجام کار از راه دور اعم از شغل یا امور متفرقه اداری خدماتی را به کاربران ارایه دهد
  • سایت متناسب با مخاطبان (سن, جنس, تحصیلات ,طبقه اجتماعی و…) باشد
  • سایت در حوزه مطالب و اهداف خود جامع و فراگیر باشد
  • مطالب صفحات کلیه اهداف ان صفحه را براورده کند
  • سایت به اهداف خود نزدیک شود طرح صفحات و ساختار سایت بر اساس اهداف پیش بینی شده برای سایت توسعه یابد
  • نوع مطالب و اطلاعات ارایه شده و لغات استفاده شده در سایت متناسب با سن افراد مخاطب پیش بینی شود
  • هزینه ای برای دسترسی به محدو ده ای از اطلاعات سایت دریافت شود یا همه ان رایگان باشد .

ساختار (اسکلت بندی )اطلاعات

  • بازدید کنندگان بتوانند اطلاعات مورد نیاز را با استفاده از ارتباطات معقول به دست اورند (حداکثر 3 کلیک برای رسیدن به مقصد )
  • بازدید کنندگان سایت از طریق یک مسیر معین , معقول و کار پسند به اطلاعات دسترسی یابند
  • پیوند های موجود در صفحه فهرست موضوعی و طبقه بندی مناسب داشته باشند
  • مخاطب بتواند از اولین صفحه سایت تشخیص دهد که اطلاعات چگونه سازماندهی شده و چه مواردی در سایت موجود است
  • اطلاعات ارایه شده به اندازه کافی در بخش ها و فرمت های مخصوص دسته بندی شود تا به راحتی بتوان انها را چاپ کرد
  • گروه ها و زیر گروه های مطالب و موضو عات تا حد مناسبی منطق بر طبقه بندی ها و استاندارد ها باشد .
  • محتوای اطلاعات 

  • مقدار اطلاعات

  • مقدار اطلاعات ارایه شده در سایت کامل باشد
  • به منابع اطلاعاتی مورد نظر پیوند های کافی داده شده باشد
  • مقدار جزییات ارایه شده از موضوع مورد نظر مناسب باشد (زیاده گویی نشده باشد )
  • مقدار اطلاعات ارایه شده برای زبان های مختلف منطبق بر زیان های کاربران با زبان مربوطه باشد .

نوع اطلاعات

  • اطلاعات ضروری زیر به منظور معرفی دستگاه سازمان یا موسسه معین ارایه شود :
  • ارم سازمان
  • بخش درباره ما
  • معرفی سازمان
  • تاریخچه دستگاه
  • تشکیلات کلی دستگاه
  • معرفی واحد های وابسته
  • شرح وظایف دستگاهع و واحدهای وابسته
  • اطلاعات اماری دستگاه
  • اخبار و رویدادهای دستگاه
  • اطلاعات تماس دستگاه و واحد های وابسته
  • فرم های مورد عمل در دستگاه
  • مجموعه قوانین, مقررات, ایین نامه ها و ضوابط به دستگاه
  • فهرست عناوین خدمات قابل ارایه دستگاه به مردم و دیگر نهادها .
  • ارتباطات انتخاب شده برای سایت مناسب باشد
  •   اطلاعاتی مربوط به ارتباط یا نویسنده مطالب , سازنده و طراح سایت ارایه شود
  • در صفحه اصلی سایت اعلانی مبنی براین که کدام بخش های سایت اخیرا تغییر کرده (یا مطلب به ان ها اضافه شده ) وجود داشته باشد
  • عبارت “تاریخ ثبت اخرین تغییرات”در صفحات سایت تعبیه شود
  • توازن نسبی بین ارتباطات داخلی (ارتباطاتی که به خود این سایت متصل می شود )و ارتباطات خارجی (ارتباطاتی که به منابع اینترنتی خارج از این سایت متصل می شود )وجود داشته باشد
  • اطلاعات ارایه شده در سایت ها و منابع اطلاعاتی مرتبط جامع و فراگیر باشند یا تنها به شکل ارایه مثال عمل کنند
  • ارتباطات ارایه شده اطلاعاتی را ارایه دهند که به راحتی در منابع اطلاعاتی دیگر موجود نباشند
  • در صورت امکان از اطلاعات چند رسانه ای در سایت استفاده شود
  • تاریخ های توالی پیش بینی شده برای بروز اوری و اعمال اخرین تغییرات در مطالب و اطلاعات ارایه شده در سایت معین شود
  • نوع اطلاعات ارایه شده به منظور تبلیغات روی یک موضوع و مطلب خاص باشد
  • توازن نسبی بین نوع اطلاعات ارایه شده از لحاظ تصاویر و متن موجود باشد
  • بایگانی مطالب قدیمی سایت به کاربران ارایه شود
  • فهرست بایگانی مطالب سایت مرتبا به روز شود
  • در سایت های مربوط به سازمان ها ,موقعیت جغرافیایی ( نقشه ) و ساز مان های تابعه ان ها ارایه شود
  • قسمتی تحت عنوان “ارتباط با ما” با اطلاعات لازم و کافی در ان ارایه شود
  • قسمتی تحت عنوان “نقشه سایت” تدارک دیده شود
  • تاریخ راه اندازی سایت ارایه شود , تاریخ اماده شدن صفحات “در حال طراحی “به کاربران اعلام شود
  • مواقعی که سایت به طور موقت قابل دسترسی نیست پیغام مناسب به کاربران ارایه شود
  • امار “تعداد بازدید کنندگان “و “تعداد بازدید ها ” از سایت باجزییات زمانی و موقعیت جغرافیایی بازدید کنندگان و…قابل دسترسی باشد .

اطلاعات قابل اطمینان

  • هویت و اعتبار نویسنده مطالب و صفحات مشخص شود
  • نویسنده از صلاحیت کافی برای تالیف مطالب صفحه برخوردار باشد
  • اطلاعاتی برای تماس با نویسنده صفحه (ادرس, تلفن ,Homepage , email و…)در دسترس باشد نویسنده مراجع و مستندات اعتبار بخش به مطالب خود را ارایه کند
  • موسسه یا سازمانی که مطلبی از ان در سایت ارایه شده است به طور کامل معرفی شود
  • مطالب و اطلاعات تخصصی سایت به وسیله گروه یا فرد مستقل و صاحب نظری تایید شود .

صحت اطلاعات

  • صحت ارتباطات ارایه شده بررسی شود
  • اطلاعات به روز باشند
  • عبارت های به کار رفته برای ارتباطات منطق با مطالب صفحات مربوطه باشند وبه وسیله مخاطب به اسانی درک شوند
  • در سایت های چند زبانه مطالب صفحات همتا (زبان های مختلف ) یکسان باشند
  • به روز اوری مطالب در سایت های چند زبانه برای همه زبان ها انجام شود
  • مطالب صفحه اعتبار زمانی داشته باشند
  • درستی پیوند های سایت به شکل فرایندی دائمی بررسی شود
  • متن ها از لحاظ دستور زبان و لغات به کار رفته از الگوی درست و واحدی پیروی کنند
  • ارتباطات مربوط به موضوع صفحه باشند
  • غلط های املایی ,انشایی و تایپی در متون دیده نشود .

خدمات پشتیبانی

  • نام و پسوند دامنه متناسب با نام سازمان و نوع عملکرد ان باشد
  • عنوان مناسب برای صفحات html اختصاص یابد
  • صفحات سایت با وارد کردن کلمات صحیح و کافی در موتور های جستجو قابل دسترسی باشد
  • امنیت کل سایت تامین شده باشد .برنامه نویسی صفحات وب و پایگاه داده های  مربوط به اطلاعات کاربران سایت به گونه ای باشد که توسط نفوذ گران شبکه قابل سوء استفاده نباشد (هک نشود )
  • تمامی صفحات سایت از لحاظ فعال بودن چک شوند (بخش های ارسال,ارتباط با ما و …)
  • ارتباطات کور در سایت وجود نداشته باشد یا ارتباطاتی به منابع اطلاعاتی دیگری که از بین رفته یا وجود ندارند داده نشوند
  • صفحات سایت به سرعت بارگذاری شوند
  • منو های ثابت و تکراری صفحات برای هر صفحه مجددا بار گذاری نشوند
  • ارتباطات به روز شوند
  • یک سیستم کد گذاری امنیتی برای زمانی که اطلاعات شخصی از کاربران سایت گرفته می شود وجود داشته باشد
  • به راحتی و سرعت بتوان به صفحات سایت متصل شد
  • فضای اختصاص یافته برای سایت مناسب و کافی باشد
  • سرعت ارسال اطلاعات از طریق میزبان متناسب با حجم لحظه ای تقا ضا (از طرف کار بران )باشد امکانات مدیریت سایت (web mastering) در سایت فراهم باشد
  • نام های دامنه مشابه خریداری یا رزرو شده باشد
  • سایت به سایر نشریات و سایت ها معرفی شود
  • صندوق پستی مدیر سایت (web master)همواره چک شده و در حداقل زمان به ان ها پاسخ داده شود
  • میزبانی سایت (Hosting)مشکلی پیدا نکند (برای قرار دادن صفحات وب طراحی شده لازم است سرور وب مناسبی برای این کار در نظر گرفته شود به این سرور وب میزبان گفته می شود )
  • از کل سایت در فواصل زمانی معین نسخه پشتیبان گرفته شود (فواصل زمانی در سازمان های مختلف متفاوت است )
  • اما با وجود این تجارب نشان میدهند که طراحان وب برای طراحی های موثر صفحات خود از گام های اساسی زیر استفاده می کنند :نیاز سنجی مخاطبان و شناخت ویژگی های ان ها
  • پیش بینی زمینه های لازم برای تاثیر در مخاطب
  • پیش بینی عوامل بصری موثر در طراحی اولیه
  • پیش بینی محتویات و قسمت بندی ان در کنار عناصر تصویری
  • طراحی و ازمایش طرح اولیه
  • نهایی کردن طرح
  • ازمایش و ارزیابی صفحات وارتباط انها با همدیگر

سازماندهی صفحات وب

  • در طراحی صفحات وب ساختار زیر بنایی (ودر نتیجه شکل ظا هری )باید دنباله رو عملیات سایت باشد .برای تعریف عملیات انجام شده در سایت در زمان بازدید مشتری ضروری است که نیاز های مشتریان مشخص شده و بر اساس ان ساختار زیر بنایی و نحوه ارتباط صفحات با یکدیگر مشخص شود .برای یک سایت وب,ساختار های مختلفی وجود دارد سه نوع ساختار مهم در نحوه سازمان دهی صفحات وب عبارت است از :
  • ساختار خطی :در این ساختار میتوان از طریق صفحه قبلی به صفحه بعدی دسترسی پیدا کرد چون مرورگر فقط میتواند یک صفحه به جلو یا عقب برود کنترل حرکت در صفحات محدود است.
  •  ساختار غیر ترتیبی (چرخشی , تار عنکبوتی و…):در این ساختار میتوان از طریق چندین صفحه به یک صفحه دسترسی داشت .
  • ساختار سلسله مراتبی :در این ساختار ارتباط صفحات براساس ساختار عملیاتی از پیش تعیین شده تعریف شده است .
  • ساختار ترکیبی :ساختار ترکیبی ساختاری است که دران در هر یک از بخش های سایت وب یکی از ساختار های سه گانه خطی ,غیر ترتیبی یا سلسله مراتبی به صورت مجزا ارسال می شود در صورت نیاز میتوان در این ساختار از ترکیب ساختار های ارتباطی بالا استفاده کرد .
  • انچه یک طراح وب برای طراحی موثر نیاز دارد ,عبارت است از : داشتن دانش قابل توجهی از اخرین نسخه زبان ابر متن برای ازاد شدن از محدودیت های نرم افزارهای ویرایشگر وب اشنایی و داشتن مهارت کافی در کار با این نرم افزار شناخت و تسلط کافی در استفاده از نرم افزار های گرافیک در وب , شناخت نسبی زبان های برنامه نویسی تحت وب (به خصوص ان دسته از زبان هایی که در زمان اجرا و مشاهده صفحه وب کاربرد دارند ) نظیر اسکریپ های جاوا و CSS و در نهایت شنا خت کافی از ابزار های تواید انیمیشن های پویا و ارشیو مناسبی از عکس ها و قطعات کوتاه فیلم و موسیقی به همراه خلاقیت و مهارت های تکنیکی و اشنایی با مخا طبین و سلیقه های ان ها .      نکته ای که همواره باید به ان توجه داشته باشید این است که طراحی موثر به معنی طراحی مناسب و متناسب است نه طراحی بیش از حد نیاز .

محدودیت ها ومزیت ها در طراحی صفحه وب

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

  • محدودیت های طراحی صفحات وب
  • تاکید و گرایش به انتقال پیام به صورت بصری و شنیداری در وب : با وجود اینکه وب در زمینه انتقال اطلاعات دیداری و شنیداری از جهت انتقال اطلاعات توسعه  بسیار زیادی یافته ولی در خصوص ارایه اطلاعاتبه کمک سایر حواس (به جز بینایی و شنوایی )و نیز ارایه اطلاعات به صورت سه بعدی هنوز به بلوغ نهایی خود نرسیدهاست .
  • محدودیت در ارایه اطلاعات با توجه به طیف وسیع نیازها و در خواستهای مخاطبین و مراجعین سایت وب: به عنوان مثال ساخت وب سایت یک کارخانه صنعتی یا ساختار وب سایت یک خرده فروشی ,یک مرکز اموزشی یا یک مرکز سرگرمی و تفریحی بسیار متفاوت است این تفاوتها هم از نقطه نظر ساختارها و دستورالعمل ها و هم از نظر نحوه برخورد وارتباط با مشتری حاوی نکات مهم گرافیکی و روان شناختی استگاهی لازم است علاوه بر جذابیت تصویری به عملکرد تعاملی مشتری هم توجه شود رعایت تمامی نکات باعث طراحی سایتهای بسیار سنگین و کند خواهد شد به عنوان مثال مراکز اموزشی یکی از موسساتی هستند که بیشترین تعداد سایتهای وب را در اینترنت به خود اختصاص داده اند و تقریبا اغلب انها با مشکل ساختاری مشابه مواجه هستند کالج ها و دانشگاهها بیش از حد معمول ساخت یافته اند و باید دارای وب سایتی باشند که حس مجازی و برداشت بصری مناسبی از ساختار داخلی موسسه به بیننده  مخاطب خود ارایه دهد به گونه ای که باعث به وجود امدن احساس گردش در بیننده شود از طرف دیگر مشتریان سایتهای سرگرمی اغلب جزو بی ثبات ترین مشکل پسند ترین مشتریان برای شناسایی و گروه بندی علایق و گرایشها هستند ;بنابراین سایتهای سرگرمی و تفریحی باید دارای قابلیت تعامل بالا و استفاده از عناصر بصری بیشتری باشند که خود این مساله لزوم توجه بیشتر به سرعت بار گذاری صفحات اینترنت را طلب میکند
  • محدودیت در طراحی و تولید صفحاتی متناسب با قدرت وضوح صفحه نمایشگر قمشتریان مختلف:معمولترین صفحات وب عبارتند از :
  • 1024×768,800×600,640×480پیکسل.طراحی های موثر از نظر ابعاد صفحه انهایی هستند که با تغییر اندازه نمایشگر خود را تطبیق داده و منطبق برابعاد نمایشگر مشتری به نمایش در می ایند .
  • به دلیل انکه صفحات وب قابلیت جابه جایی طولی و عرضی دارند اندازه کاغذ در وب مفهوم متفاوتی با ابعاد کاغذ در چاب خواهد یافت به طور کلی صفحاتی که نیاز به جابه جایی بیش از سه صفحه را در پنجره معمول در مرور گر را داشته باشند باعث دلسردی مشتری میشوند
  • مساله رنگ و محدوده کاربرد ان در طراحی وب :رنگ جزو مهمترین مسایلی است که در طراحی موثر به ان پرداخته میشود با وجود این اغلب طراحان این موضوع رادرک نکرده واز رنگها بیشتر یا کمتر از حد لازم استفاده میکنندباتوجه به نکات مطرح شده در زمینه ابعاد صفحه و محدوده رنگ معمولترین روش در طراحی ان است که طراح صفحه را  برای نمایشگرهای معمولی در پایین ترین دقت ممکن (640×480 یا 800×600 و 72 پیکسل در اینج ) و تفکیک رنگ 256 طراحی کند اطمینان از دقت نمایش رنگ روی صفحات وب به دلیل خصوصیلات مختلف کارت های گرافیک کار تقریبا دشواری است با وجود اینکه کارت ویدیویی 24 بیتی قابلیت نمایش  16/7 میلیون رنگ را دارد بیشتر مردم قادر به تشخیص 7 رنگ در محدوده میدان دید هستند حتی با وجود کارتهای ویدیویی 24 بیتی تنها 7/5 میلیون رنگ قابل تمایز از 16/7 میلیون رنگ مورد نظر وجود دارد .
  • از میان 256 رنگ پایه استاندارد تنها 216 رنگ به صورت مشترک در سیستم عاملهای مختلف قابل استفاده هستند همین موضوع باعث میشود که طراح وب علاوه برمحدودیت در انتخاب طیف رنگ در زمان کار با ابزارهای ویرایش وب نیز به نحوه ذخیره سازی صفحات بر اساس رنگ بندی استاندارد ملزم بماند .
  • استفاده از فناوری های جدید یا به نسبت جدید در طراحی وب : ظهور فناوری های مختلف در  وب و سازگاری یا عدم سازگاری سیستم های مختلف با این فناوری ها مهمترین مساله در استفاده از انهاست ای مساله کار بران را وادار به نسب یا انجام تنظیمات خاصی روی مرورگر میکند . به عنوان مثال برای استفاده از فناوری جاوا در صفحات وب کاربر باید کامپایلر جاوا را روی سیستم عامل خود داشته باشد در غیر این صورت مجبور به نصب ان است همچنان که سیستم عامل ویندوز XP به صورت پیش فرض فاقد قدرت پشتیبانی از جاواست از طرف دیگر نسخه های مختلف مرورگر نسخه هایمتفاوتی از جاوا را پشتیبانی میکنند همین محدودیت باعث میشود که گاهی حتی با وجود کامپایلر فرمان خاصی از جاوا قابل دسترسی و اجرا نباشد.
  • به کاربردن فناوریهای های جدید انیمیشن سازی دروب: به عنوان مثال فناوری فلش شرکت ماکرومدیا یکی از نسخه های جدید طراحی انیمیشن های پویا در وب است کابر اینترنتی وب برای مشاهده سایت های مبتنی بر فناوری فلش ملزم به نصب برنامه خاص انیمیشن های ان است نظیر همین محدودین در مورد نمایش های ویدیویی در وب مطرح است غالب کلیپ های ویدیویی اموزشی وب از نوع Quick time و از محصولات شرکت اپل است .کاربر باید روی سیستم خود نسخه ای از نمایشگر Quick time را نصب کند ولی متاسفانه در این مورد امکان نصب به صورت خودکار فراهم نبوده و به صورت دستی هم مستلزم صرف وقت است باوجود تمام محدودیت های یاد شده برای رنگ بندی در وب دلایل محکمی برای استفاده از رنگها وجود دارد که در زیر به ان ها اشاره شده است :
  • از رنگها در طبقه بندی و مرتبط کردن موضوعات مختلف استفاده میشود .
  • رنگها باعث هدایت بیننده میشوند .
  • فضا های مثبت و منفی ایجاد شده به وسیله رنگ ها حس هیجان را در صفحات تشدید میکنند
  • رنگها باعث جلب مشتری افزایش پاسخ گویی و افزایش فروش میشوند .
  • رنگ های اضافی می توانند باعث سر در گمی مشتری شوند .
  • افراد مختلف دارای گرایشات و تعصبات رنگی متفاوتی هستند .
  • در صورت استفاده درست از رنگ ها خوانایی اطلاعات افزایش میابد و بر عکس .                   در صورت استفاده از رنگ برای هدایت مسیر نگاه بیننده ,تاکید بر عناصر موجود, نمایش ارتباط یا عدم ارتباط ان ها در صفحه , تاکید یا عدم تاکید بر متنی خاص در صفحه و افزایش سرعت جستجوی اطلاعات براساس ارزش, ترتیب یا موقعیت عناصر, اهمیت میابد .
  • مزیت ها طراحی صفحات وب
  • محور قرار دادن خواننده برای اطلاع رسانی :شاید تعجب اور باشد اگر گفته شود که تاکید و تلاش برای دسترسی و جکع اوری علایق و سلیقه های کاربران اینترنت یکی از مهم ترین منابع درامد در اینترنت و وب است .
  • گذر از متن به ابر متن :پیوستگی صفحات حاوی پیوند های مختلف با محوریت قراردادن خواننده برجسته ترین مزیت به کار گیری وب به شمار میرود این موضوع باعث هدف گیری دقیق و افزایش قابلیت استفاده از اطلاعات خواهد شد.
  • استفاده از ابزار اصلاع رسانی با جنبه های متنی , تصویری , چند رسانه ای  و متعامل برای اطلاع رسانی :استفاده از وب برای انجام بیشتر امور روز مره نظیر خرید و فروش ,رزرو بلیط,پیش بینی وضع هوا,دسترسی به اخرین اخبار و اطلاعات و بسیاری دیگر از جنبه های اطلاع رسانی ,این ابزار را به یکی از سرویس های پر مصرف اینترنت تبدیل کرده است . در سالهای اخیر ,توسعه وب در جهت حرکت به سمت مدل سه لایه ای (Three Tier ) باعث پویایی و قابلیت استفاده فراوان ان شده است .

خوب دوستان این از اموزش فصل اول. امیدوارم مفید بوده باشه براتون, آرزومند بهترین ها برای شما …

ارائه ای از تیم وردپرس بیگ تم

یک پینگ

  1. پینگ‌بک: آموزش ساخت سایت با وردپرس گام به گام| قالب های وردپرس |بیگ تم

  2. پینگ‌بک: آموزش طراحی وب سایت قسمت 4 و 5 - طراحی قالب| وردپرس

  3. پینگ‌بک: آموزش طراحی وب سایت با html | ساخت قالب حرفه ای | بیگ تم

یک نظر

  1. سحر

    سلام. خسته نباشید ممنون از سایت خوبتون
    میخواستم بگم از کجا باید ثبت نام کنم تا مطالب برام ارسال بشه؟
    منک ه نتونستن فرم خبرنامه رو پیدا کنم.

  2. هادی قربانی

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

  3. هادی قربانی

    سلام
    در زیر همه ی پست ها فرم خبرنامه قرار داده شده می تونید در خبرنامه عضو بشید و بهترین های وردپرس رو در ایمیلتون داشته باشید.

  4. هادی قربانی

    سلام دوست عزیز بخش سوم آموزش قرار داده شده. انشا ا… بخش چهارم رو به زودی آماده می کنم.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *