طراحی وب به مهارت ساخت و راه‌اندازی صفحات وب گفته می‌شود.

تیم برنرز لی، مخترع وب، با برپایی یک سایت وب در اوت ۱۹۹۱، نام خود را به عنوان نخستین سازندهٔ وب در تاریخ نگاشت. او در نخستین وب سایتش، از اَبَرمتن و پیوندی برای ایمیل (پست الکترونیک) استفاده کرده بود.

در آغاز، وب سایت‌ها با کُدهای ساده HTML نوشته می‌شدند، گونه‌ای از زبان نشانه‌گذاری که ساختار ساده‌ای به وب گاه‌ها می‌داد، شامل سرتیتر و پاراگراف، و توانایی پیوند دادن به آدرس‌های دیگر از طریق ابرپیوند. در مقایسه با روش‌های دیگر، این راه تازه و متفاوتی بود که کاربران به سادگی می‌توانستند با یک مرورگر، صفحه‌های پیوند خورده را باز کنند.

با پیشرفت وب و هنر طراحی آن، زبان کُد نویسی اش، اَبَرمتن یا اچ تی ام ال، پیچیده‌تر و پرانعطاف تر شد. ابزاری مانند جدول‌ها که بیشتر برای نمایش نمودارهای داده‌ای بودند، بزودی مورد استفاده نادرست، برای چیدمان‌های پنهان در صفحه‌های وب قرار گرفتند. با پیدایش الگوهای آبشاری وب یا «CSS»، روش نادرست طراحی با جدول‌های پنهان در صفحه از گردونه خارج، و بجای آن استفاده مناسب از زبان کمکی «CSS» جایگزین شد.

فناوری‌های یکپارچه سازی پایگاه داده (Database)، مانند زبان‌های کُدنویسی سمت سرور (Server-Side Scripting) مانند CGI، PHP، ASP. NET، ASP، JSP و ColdFusion، و استانداردهای طراحی مدرن با الگوها (CSS)، ساختار وب سایت‌ها را باز هم تغییر داده و آنرا پیشرفته تر کرده‌اند. سایت واکنش گرا یا سایت ریسپانسیو (responsive) سایتی است که با ابعاد و رزولوشن دستگاه‌های مختلف سازگاری دارد و کاربران بدون توجه به اینکه صفحه نمایش دستگاهشان کوچک باشد.

همچنین با آمدن نگاره‌های جاندار و فناوری‌های پویانمایی به صفحه‌ها، مانند فلَش (Flash)، چهره وب بیشتر از پیش تغییر کرد و توانمندی‌های تازه به سازندگان رسانه و طراح‌های وب داده شد.

وبسایت یا تارنما

وبسایت یا تارنما یا وب‌گاه مجموعه‌ای از فایل‌های مختلف اعم از تصاویر، متون یا فایل‌های برنامه‌نویسی شده است که به منظوری خاص به شکلی با هم مرتبط شده‌اند. این فایلها روی یک کامپیوتر «میزبان» یا «سرور» قرار می‌گیرند و با یک نام دامنه مشترک فراخوانی می‌شوند.

انواع سایت

سایت‌ها بر اساس کاربرد و نوع برنامه‌نویسی به چند دسته تقسیم می‌شوند که عبارت است از:

 

سایت‌های ثابت (Static Website)

این سایت‌ها یکبار طراحی می‌شوند و اطلاعات مورد نیاز در داخل آن‌ها قرار می‌گیرد و پس از آن برای تغییر در آن‌ها نیاز به یک طراح حرفه‌ای یا نیمه حرفه‌ای سایت است. زبان برنامه‌نویسی اینگونه از سایتها غالباً HTML و Java Script هستند که در نوع توسعه یافته تر از CSS نیز بهره گرفته می‌شود. این نوع دسته از وب سایت‌ها به صورت HTML ساده طراحی می‌شوند.

از آنجا که حجم کمتری از کد در طراحی سایت‌های ثابت استفاده می‌شود سرعت بارگذاری (Loading) بالایی دارند. علاوه براین کاهش حجم کدها که باعث خوانایی بشتر سایت توسط ربات‌های جستجوگر می‌شود از یک سو و کاهش زمان بارگذاری از سوی دیگر سبب بهتر شدن وضعیت آن‌ها از لحاظ امتیاز دهی موتورهای جستجو یا همان «رنکینگ» می‌شود. سایتهای ثابت قیمت طراحی پایین‌تری را نیز عمدتاً نسبت به سایر سایت‌ها دارند.

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

اما از طرفی نیز عدم امکان ایجاد تغییرات توسط افراد عادی سبب می‌شود تا امکان بروز رسانی سایت توسط صاحبان و مدیران سایت صلب شود.

نکته: سایتهای ثابت (Static) برای افراد، شرکتها و سازمان‌هایی مناسب است که حداکثر یک یا دو بار در سال نیازمند به تغییر در محتوای سایت هستند.

 

سایتهای پویا (Dynamic Website)

محتوای سایتهای داینامیک بعد از طراحی توسط افراد عادی که دسترسی به سیستم مدیریت محتوای سایت را داشته باشند قابل تغییر است. زبان برنامه‌نویسی وبسایتهای پویا می‌تواند براساس نیاز متفاوت باشد اما عمدتاً از زبانهای ASP، ASP.Net و Php استفاده می‌شود و از زبانهای کمکی CSS و Silver light یا Ajax برای ایجاد قابلیتهای ویژه نیز بهره گرفته می‌شود.

در اینگونه از سایتها ابتدا اسکلت سایت توسط طراح ایجاد می‌شود و سپس محتوا توسط مدیران سایت‌ها تغییر می‌کند مانند فرم قراردادی که یکبار توسط فردی ایجاد می‌شود و توسط افراد دیگری بارها تکمیل می‌شود، از این رو طراح نسبت به محل قرار گرفتن و اندازه دقیق متون و تصاویر و سایر عناصری که بعداً توسط مدیران سایتها تغییر می‌کند اطلاع ندارد بنابر این چاره‌ای ندارد جز اینکه همه حالات را در نظر بگیرد و اینکار سبب می‌شود تاحدودی از گرافیک و جلوه سایت کاسته شود.

یکی از مزیت‌های سایت‌های داینامیک این است که هیچ محدودیتی برای ایجاد، تغییر یا حذف مطالب، تصاویر و صفحات و غیره وجود ندارد.

با توجه به اینکه در سایت‌های پویا از زبانهای برنامه‌نویسی پیشرفته استفاده می‌شود امکانات زیادی در آن‌ها قابل ایجاد است مانند ایجاد صفحات هوشمند، فرم‌ها و جستجوهای پیچیده.

استفاده زیاد از کدها سبب کند شدن بارگذاری سایت و امتیاز آن در موتورهای جستجو می‌شود.

نکته: سایتهای پویا برای افراد، شرکتها و سازمانهایی مناسب است که بیش از دوبار در سال نیاز به تغییر درمحتوای سایت را دارند.

 

پرتال‌ها (Portal)

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

تمام ویژگی‌های یک سایت پویا می‌تواند در یک پرتال نیز صدق کند.

نکته: معمولاً پرتال‌ها توسط سازمانها، گروه‌ها و شرکت‌ها خریداری می‌شوند. به دلیل نیاز به بروز رسانی بخش‌های مختلف اداره آنها توسط یک فرد بسیار مشکل است مگر آنکه به چشم یک کار حداقل پاره وقت به آن نگاه شود.

 

سایت‌های متحرک استاتیک و نیمه داینامیک (Static and Dynamic Flash Website)

سایت‌های فلش یا متحرک دو نوع استاتیک و نیمه داینامیک هستند و توسط نرم‌افزارهای خاصی ایجاد می‌شوند در برخی موارد از XML یا Action Script برای ایجاد قابلیت‌های تغییر یا هوشمندی در این سایت‌ها بهره گرفته می‌شود.

به طور کلی سایتهای فلش ثابت (استاتیک) غیرقابل تغییر می‌باشند و مانند سایتهای ثابت یکبار توسط طراح ایجاد می‌شوند و برای تغییر آن نیاز است تا افراد به صورت حرفه‌ای یا نیمه حرفه‌ای از دانش طراحی فلش برخوردار باشند.

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

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

نکته: سایت‌های فلش برای افراد و گروه‌ها یا شرکت‌ها و سازمانهایی مناسب است که نیاز به تبلیغات ندارند و عموم کاربران با آنها آشنا هستند مانند خوانندگان، سیاست مداران، بازیگران و گروه‌های موسیقی، هتلهای معروف، مکانهای توریستی.

 

سایت‌های مجهز به سیستم مدیریت محتوا (Content Management Systems)

سایت‌های مجهز به سیستم مدیریت محتوا که در اصطلاح به CMS که مخفف Content Management System است مشهورند، وبسایت‌هایی از نوع پرتال‌ها یا سایت‌های پویا هستند که برای مصارف خاص توسط طراحان حرفه‌ای یا شرکتهای طراحی حرفه‌ای ایجاد می‌شوند.

تمام مزایا و معایب مربوط به سایتهای پویا در مورد سایتهای مجهز به سیستم مدیریت محتوا صدق می‌کند.

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

از مزایای سیستمهای مدیریت محتوا نسبت به سایر سایتهای داینامیک می‌توان به آماده بودن و جامع بودن آنها اشاره کرد. از این رو اغلب اینگونه از سایتها در کمتر از ۳ روز کاری قابل نصب و استفاده هستند.

طراحی سایت‌های CMS مانند یک خط تولید محصول است و از آنجا که طراح باید نمونه‌های محدودی را به صورت انبوه تولید کند سعی در رعایت تمام اصول امنیتی، گرافیکی، موارد مربوط به رنکینگ و امتیاز موتورهای جستجو و سایر موارد مؤثر می‌کند.

با توجه به مزیت‌های آنها به تمامی افراد، سازمان‌ها و شرکتهایی که شرایط داشتن سایت‌های داینامیک را دارند توصیه می‌شود تا ابتدا به دنبال سیستم‌های مدیریت محتوای مخصوص به کار خود بگردند و در صورتی که پیدا نشد به طراحی سایت‌های پویا روی بیاورند.

 

فهرست مطالب:

فصل اول: مقدمه

اینترنت و وب

Client / Server

مرورگر وب

Static Web Pages

Client-Side Dynamic Page

جاوا اسکریپت

VB Script

ActiveX Controls

و...

فصل دوم: HTML

HTML

Tag

مثال Tag

Tag Attributes

Character Entities

Formatting

مثال ها

روشهای آدرس دهی

Image

HTML Links

Lists

فارسي نويسي در Html

جدول ها

موزیک، ویدیو و انیمیشن ها

فرم ها

Frame

و...

فصل سوم: CSS

CSS

Style Sheets

Inline Styles

Internal Style Sheet

Selector یا انتخاب کننده

External style sheet

و...

فصل چهارم: جاوا اسکریپت

جاوا اسکریپت چیست؟

تفاوت جاوا اسکريپت با جاوا

قابليتهاي جاوا اسکريپت

تگ اسکریپت

زبان

Type

Document

src

انواع خطاها

نوشتن اسکريپت در قسمت head

نوشتن اسکريپت در قسمت بدنه

فايل خارجي جاوا اسکريپت

متغیر چیست؟

انتخاب نام متغیر

انواع متغیرها

دستور if...else if...else

switch

و...