دانلود مقاله طراحی و ساخت وب

1- 1 هدف
دلیل وجودی یک سایت که مهمترین بخش طراحی وب میباشد، این عنصر باید درتمامی تصمیماتی که شامل بخشهای دیگر میشود در نظر گرفته شود.به طور کلی هدف از ایجاد سایت های وب گرفتن اصل مطلب و پخش کردن آن بین چندین صفحه مرتبط است برای اینکه درک آن توسط کاربر آسان شود(ارائه این صفحات در فصل دوم انجام میگیرد.)
صرفنظرازپروژه اولین قدم همیشه یکسان است:هدف کلی پروژه راتعیین کنید.پس درابتدا لازم است که هدف خود را درطراحی این سایت بیان کنم:
سایتی که توسط اینجانب در دست طراحی است یک سایت اطلاعات گرا یا سندگرا است.این گونه سایت های متن گرا با تأکید روی محتویات متنی طراحی میشوند پس نسبتآسبک،قابل دریافت از اینترنت وتا حدودی دارای کوچکترین طراحی هستند.البته ناگفته نماند که در کنار متن از سبکهای گرافیکی (GUI)مثل آیکون ها وپنجره های گشودنی و...

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

1-2 انگیزه
انگیزه من درطراحی سایت کار با زبان HTML (البته کاملتر از آن XHTML ) است.چون وب جهانی که متشکل از میلیونها صفحه وب میباشد وهر کدام از جایی روی اینترنت قرار گرفته اند وهمه این صفحات به شکلی از html نوشته شده اندواز طرفی با توجه به اینکه من هیچ اشنایی قبلی با طراحی وب سایت نداشتم ویادگیری وکسب مهارت در html نسبت به زبان های دیگر دشوار نمی باشد تصمیم گرفتم که این زبان را برای اولین طراحی خود انتخاب کنم.
وبااستفاده ازامکانات زبان html وزبان های برنامه نویسی دیگری که مکمل این زبان درطراحی وب سایت هستندطراحی خودراانجام دهم.

1-3 مروری بر مطالب
این گزارش در 5 فصل گنجانده شده است در فصل دوم این گزارش به طورمفصل درباره پروژه وساختارتمام صفحات آن صحبت می شود.
در فصل سوم تشریح کامل زبان html وامکانات آن انجام میگیرد و ایجادسایت مورد نظر در این مرحله انجام میگیرد.
بعد از ایجاد سایت در فصل چهارم درمورد چگونگی کار با سایت ودریافت اطلاعات صحبت میشود.
و در نهایت فصل پنجم نتیجه گیری وتحویل سایت میباشد

فصل دوم


2-1 مقدمه
طراحی وب چیست؟
یک حرفه چند جنبه ای که به تصمیم گیری وتولیدسایت های وب مربوط می شود.سایت های وب به عنوان یک مکانیزم ارتباطی بین صاحبان سایت وکاربرانش وهمچنین بین خودکاربران استفاده می شوند.
ابعاد اصلی طراحی وب عبارتند از:
محتوا: content
این بخش شامل شکل ودسته بندی محتویات سایت است.محدوده این بعدازروش نوشتن متن تانحوه دسته بندی،نمایش وساختاربندی آن توسط HTML گسترش می یابد.
فناوری:technology
منظور از فناوری عناصرمختلفی از سایت است که مشخصآ توسط فناوری های برنامه نویسی تولید میشوند .
دید بصری:visuals
این بعد به طرح صفحه نمایش استفاده شده در سایت اشاره دارداین طرح معمولآ توسط HTMLوCSS یافلش یاعناصرگرافیکی دیگر ایجادمی شود.این جنبه بصری سایت آشکارترین جنبه طراحی سایت می باشد.
جابجایی:
جابجایی سایت روی اینترنت یا به عبارت دیگر آپلود کردن فایل ها روی سرور .
هدف:
دلیل وجودی یک سایت می باشد.که درفصل اول درموردآن توضیح داده شد.
مقدارتآثیرهرکدام ازجنبه های طراحی وب برطبق نوع سایتی که ساخته می شودمتغیراست.مثلآیک صفحه اصلی شخصی عمومآ مانندیک سایت فروش جنبه های مالی رادرنظرنمی گیرد.


2 -2 تشریح موضوع
یک سایت وب میتواند شامل اطلاعات زیادی راجع به یک موضوع خاص باشد اما به صفحات متفاوتی تقسیم شده است هر کدام از این اجزا‍ء یک ایده کامل است که در کل موضوع سهم دارد .

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

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

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

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

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

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

چند نمونه ازفعالیت هایی که کاربر می تواندبامراجعه به سایت انجام دهد : کاربر دستیابی به لیست اساتیددانشگاه کاربر دستیابی به مدارج اعضای هیآت علمی کاربر مشاهده کردن کاربر کسب اطلاعات گروههای اموزشی راجع به دانشگاه نتیجه گیری همان طوری که گفته شد بنیادی ترین بخش یک سایت وب صفحه می باشد وطرح صفحه همیشه کمک به استفاده کاربر ازصفحه است بعدازانتخاب ساختاربرای سایت خود بایدکارراشروع کردوبااستفاده ازفناوریهای برنامه نویسی طرح خودراعملی کردوآنرابه نمایش گذاشت درفصل بعد که پایه ترین قسمت طراحی است به طور جامع درباره کدنویسی بازبانxhtml ودرکنارآن قابلیت های css و javascript در notpad ومرحله به مرحله ایجاد صفحات مورد نظر صحبت خواهد شد.

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

فصل سوم 3-1مقدمه HTML مخفف HYPERTEXT MARKUP LANGUEGE می باشد که دارای دو ویژگی اصلی است: 1.ابر متن HYPER TEXT یعنی به کمک آن میتوان به هر صفحه وب روی اینترنت رفت به عبارت دیگر اطلاعات موجود در وب را میتوان از جهات مختلف مورد دسترسی قرار داد.

2 .سراسری بودن UNIVERSALITY به این معنی است که چون سند های HTML به صورت فایل های متنی ساده ذخیره میشوند به صورت مجازی هر کامپیوتری میتواند یک صفحه وب رابخواند مهم نیست که مراجعه کننده از ماشین WINDOWS استفاده می کند یا MACINTOSH یا...

پس با این روش درهای وب روی همه باز است.

با توجه به اینکه زبان HTML یک زبان اولیه وقدیمی است ونمیتوان فقط با تکیه بر آن همه چیز رابیان کرد در نتیجه سازمان ملل متحد برای وب که WORLD WIDE WEB CONSORTIUM (W3C) نامیده میشود تصمیم گرفت که زبان HTML را به صورت قویتر با قابلیت انعطاف بیشتر وتوانمندتر توسط XML( که یک زبان برای ایجاد زبانهای دیگر است) بیان کند که XHTML نامیده شد.

من درکنار XHTML از CSS (CASCADING STYLE SHEETS) برای قالب دهی وایجاد ظاهر حرفه ای برای سایت استفاده کرده ام.

وازطرفی بسیاری از جلوه های پرطرفدار در صفحات وب خیلی کم به (X)HTML مربوط میشوند اینها بهJAVA SCRIPT مربوط میشوند مثلآ قراردادن تاریخ وزمان فعلی در سایت که باعث نمایش تازه بودن سایت میشوند که من در اینگونه موارد از این زبان استفاده کرده ام.

برای نمایش تصاویر و جلوه دادن بیشتر به سایت از برنامه های PAINT و FOTOSHOP استفاده کرده ام.

کدنویسی برای طراحی وب سایت توسط زبان (X)HTML میتواند در هر واژه پردازی انجام گیرد از آن جمله WORDPAD,NOTPAD,MICROSOFT WORD میباشدکه من کدنویسی ام رادر NOTPAD انجام داده ام.

3-2اجزای سازنده صفحه وب یک صفحه وب از مؤ لفه های تشکیل شده است: محتویات متنی‌، تیتر ها ، پاراگرافها ،پیوند ها تصاویر و دستورالعمل های نشانه گذاری که توصیف میکند که محتویات واشاره ها چگونه باید به نمایش درآیند.

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

(مرورگر: مرور گرتفسیر کننده سایت ما میباشد دو مرورگری که در حال حاضر از همه رایجترند:مایکروسافت اینترنت اکسپلرر Microsoft internet explorer ودیگری نت اسکیپ کامیونیکتور/ناویگیتور Netscap communicator/navigator میباشند.) نشانه گذاری در xhtml xhtml دارای سه نوع اصلی نشانه گذاری است: عناصر، شاخص ها ومقدارها عناصر: عناصر شبیه برچسب های کوچکی هستند که بخشهای مختلف یک صفحه وب را شناسایی کرده و ساختاردهی میکنند مثلآ عناصر به ما میگویند که کدام بخش از صفحه یک تیتر است کدام بخش تصویر است وکدام اطلاعات مهم تلقی میشوند.

به عنوان مثال عنصر em که به صورت text استفاده میشود برای برجسته کردن متن تگ بسته تگ باز می باشد.

شاخص ها ومقدار ها شاخص ها شامل اطلاعاتی در مورد داده های موجود در سند می باشند مثلآ شاخص text در این مثال یک عنصر td (برای یک خانه جدول) به همراه شاخص و مقدار نشان داده شده است.

شاخص ها همواره درون تگ باز عناصر قرار میگیرند.

URLها URL یا Uniform Resource Locator یک نام پر زرق و برق برای آدرس میباشد.

URL شامل اطلاعاتی در مورد محل فایل و اینکه مرورگر باید با آن چه کاری انجام دهد میباشد هر فایل روی اینترنت دارای یک URL منحصر به فرد میباشد.

بخش اول URL طرح نامیده میشود که به مرورگر میگوید چگونه با فایلی که میخواهد ان را باز کند رفتار کند متداولترین طرح HTTP یا Hypertext Transfer Protocol میباشد این طرح برای دسترسی به صفحات وب به کار میرودبخش دوم URL نام سروری است که فایل روی آن قرار دارد به دنبال آن مسیری که شما را به فایل میرساندوخود نام فایل قرار دارد http://www.site.com/folder/file.html"" نام فایل مسیر نام سرور طرح 3-3ایجاد یک صفحه وب جدید 1.ویراستار متن یا واژه پرداز را باز کنید.(من از notpad استفاده میکنم.) بدون اینکه چیزی در آن بنویسید آن را save کنید تا به این ترتیب یک صفحه وب ایجاد شود.

اما برای اینکه صفحات وب برای تمام برنامه های مختلف دسترس پذیر باشند در یک قالب فقط متن ذخیره میشوندولی با دنباله نام فایل .html که نماد یک صفحه وب است که مربوط به مرورگر آن میباشدکه هر گاه روی آن فایل کلیک دوگانه شد در یک مرورگر باز شود نه دریک واژه پرداز.

3-4برای ذخیره کردن صفحه وب: 1.از واژه پرداز گزینه filesave as را انتخاب کنید.

شکل3-1 درکادر محاوره ای که باز میشود 2.در قسمت file name به فایلتان یک نام دلخواه بدهید دنباله نام فایل .html (این خیلی مهم است) قرار دهید.

3.در قسمت unicode utf-8 را انتخاب کنید چون متداول ترین شکل Unicode در html میباشد.

این سیستم کدگذاری در بر گیرنده ASCII نیز میباشد وتمام کارکترهایی که در سند استفاده میشود را شامل میشود.

شکل3-2 3-5ویرایش صفحه وب بعد از این کار هرگاه روی فایل دابل کلیک کنید یک صفحه وب توسط مروگر باز میشود برای اینکه فایل را برای ویرایش باز کنید کلیک راست روی فایل واز open width فایل را در هر ویرایشگری که مایلید باز کنید.

شکل3-3 3-6آغاز صفحه وب صفحه را باید با یک DOCTYPE برای اعلان نوع HTML که میخواهید مورد استفاده قرار دهید آغاز کنید.

DOCTYPE به مرورگرها این امکان را میدهد که بدانند باید انتظار چه چیزی را داشته باشند وبه validator ها میگوید برای چک کردن قواعد دستوری چگونه کد شما را بررسی کنند.

من در صفحه وبم از