توضیحات

توجه : به همراه فایل word این محصول فایل پاورپوینت (PowerPoint) و اسلاید های آن به صورت هدیه ارائه خواهد شد

  مقاله طراحی وب سایت اساتید دانشگاه ملایر دارای 82 صفحه می باشد و دارای تنظیمات در microsoft word می باشد و آماده پرینت یا چاپ است

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

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


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

طراحی وب سایت اساتید دانشگاه ملایر

فصل اول

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 كه به صورت

<em> text </em> استفاده میشود برای برجسته كردن متن
تگ بسته تگ باز

می باشد.

 

شاخص ها ومقدار ها
شاخص ها شامل اطلاعاتی در مورد داده های موجود در سند می باشند مثلآ
شاخص

<td colspan=”1″> text </td>
در این مثال یك عنصر 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 ها میگوید برای چك كردن قواعد دستوری چگونه كد شما را بررسی كنند.

من در صفحه وبم از xhtml سند transitional استفاده كرده ام بنابراین برای اعلان آن باید از كد زیر استفاده كرد:
<!DOCTYPE HTML PUBLIC”-//w3c//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml-transitional.dtd”>.”

 

برای شروع بخش اصلی xhtml صفحه تان واعلان فضای نام آن بنویسید:
<html xmlns=”http://www.w3.org/1999/xhtml”>.

فضای خالی برای بقیه كد در نظر بگیرید وسپس تایپ كنید
</html>
3-7ایجاد زیر بنا
بیشتر صفحات وب از دو بخش head و body تشكیل شده انددربخش head عنوان صفحه تعریف میشود واطلاعاتی راجع به صفحه برای موتورهای جستجو ومكان صفحه تعیین میشود ، صفحه های سبك اضافه میشوند واسكریپتها نوشته میشوند ولی به جزء عنوان مطالب موجود در بخش head توسط مراجعه كننده دیده نمیشود.
برای ایجاد بخش head درست بعد از تگ html باز (<html>) تایپ شود<head> بعد از فضای خالی برای اضافه كردن مطالب </head> را قرار دهید.
بخش body از سند html محتویات صفحه وب را در بر میگیردمتن،تصاویرو;
برای ایجاد ان درست بعد از تگ پایانی head تایپ كنید <body> چند خط خالی بگذارید وسپس تایپ كنید </body>
3-8ایجادعنوان در صفحه

بعد از تگ باز head تایپ كنید <title>
عنوان موردنظر راواردكنید سپس تایپ كنید </title>
3-9 تقسیم صفحه به بخش ها

تقسیم صفحه به بخشها این امكان را میدهد كه سبكهارا به بخش مورد نظر از صفحه اعمال كردواین قابلیت خصوصآ برای طراحی صفحه بندی به وسبله css مفید میباشد.
برای این كار در آغاز بخش تایپ كنید
<div id=”name”> content </div>
<div class=”name”> content </div>

Name نام ان بخش است كه به طورمنحصربه فرد ان بخش را مشخص میكند.
به جای id میتوان از class استفاده كرد كه این شاخص برای قالب دهی به گروهی از عناصر به كار میرود.

3-10 متن

قراردهی متن درون صفحه بااستفاده از تگ <p> text </p> انجام میگیرد.
اگر بخواهیم در متن مورد نظر پاراگراف ایجادكنیم برای هرقسمت ازتگ<p></p> استفاده میكنیم.
3-10-1 تعیین حالتهای مختلف برای متن

برجسته كردن متن <b> text </b>
ایتالیك كردن متن <i> text </i>
بزرگتر كردن متن نسبت به متن مجاور <big> text </big>
كوچكتر كردن ————————–<small> text </small>
برای اثر مضاعف هر كدام میتوان تگ اغاز وپایان را دوبار نوشت.

3-10-2ایجاد تیتردرصفحه
دربخش body از سند تایپ كنید<hn> كه در ان n عددی بین 1تا6 میباشد(بسته به ردهء تیتری كه میخواهید اضافه كنید)پس از تایپ محتویات بنویسید</hn> كه همان n همان عدد بالایی است.
3-10-3 ایجاد شكست خط در متن

هر جایی از متن كه خواستیدشكست خط اتفاق بیفتد تایپ كنید<br /> (فاصله خالی بین br و/ حتمآ باید وجود داشته باشد.
3-10-4 ایجاد برچسب برای عناصر
به هر آیتمی كه میخواهید برچسب بزنید درون تگ باز آن تایپ كنید title=”label” كه label برچسب آن است كه هر وقت مراجعه كننده به آن عنصر اشاره كرد ظاهر میشود.

3-10-5 ایجادمتن متحرك درصفحه
تگ <marquee> به شما اجازه می دهد که یک متن را به دلخواه خود در صفحه به حرکت در آورید كدی كه موردنیاز است تایك متن متحرك ایجادكنیدبه صورت زیراست:

<marquee loop=”infinite”>
متن مورد نظر خود را اینجا بنویسید</marquee>
شناسه loop=’infinte” باعث می شود كه متن تاهنگامی كه صفحه باز است به حركت خودادامه دهد.شمامی توانیدبه جای این شناسه ازloop=”-1″ هم استفاده كنید.

ویا loop=”3″ یعنی چرخش متن رابعدازسه بار متوقف كند.
باواردكردن شناسه bgcolor=”color” می توانیدرنگ زمینه را مشخص كنید.باواردكردن شناسه width=”” می توانید عرض متن متحرك را به درصدیاپیكسل تعیین كنید.
3-11پیوندها
پیوندها ویژگی متمایز كننده وب جهانی هستند.آنها به شما این امكان را میدهند كه از یك صفحه به صفحه دیگر بروید.
یك پیوند دارای سه بخش است:1مقصد كه مهمترین بخش است طراح بااستفاده از آن میتواند مشخص كندكه وقتی كاربر روی پیوند كلیك میكند چه اتفاقی می افتد.
2برچسب پیوند كه قسمتی از آن بخشی است كه كاربر مشاهده میكند و برای رسیدن به هدف روی آن كلیك میكندبرچسب میتواند متن یا تصویر باشد.
3هدف كه اغلب چشم پوشی میشود یا به مرورگر واگذار میشود.هدف تعیین میكندكه آنچه در مقصد وجود دارد دركجا نمایش داده شودهدف میتواند یك پنجره یا یك فریم یا یك نام خاص باشد.
3-11-1 ایجاد پیوند به صفحه وب دیگر

تایپ كنید<a href=”page.html”> كه درآنpage.html url صفحه وب مقصد است.
متن برچسب راتایپ كنید یعنی متنی كه های لایت میشود ووقتی كاربر روی ان كلیك كند به صفحه مقصدمیرسد.
</a>رابنویسید تا تعریف كامل شود.

3-11-2 ایجاد میانبر صفحه كلید برای پیوندها
بااضافه كردن شاخص accesskey درون تگ پیوند میتوان یك میانبر صفحه كلید ایجادكرد به این صورت
<a href=”page.html” accesskey=”p”>page</a>
(alt-p , ctrl-p)

(alt-p , ctrl-p)متن انتخابی است كه وجودان كمك كننده است.
فقط از طریق برچسب میتوان به كاربران فهماندكه میتوانند از طریق یك میانبر به صفحه مقصد برسند.
3-11-3 ایجاد لنگرها در صفحه

باكلیك كردن روی پیوندها میتوان به اول یك صفحه وب دیگر پرش كرد برای اینكه به یك بخش خاص ازصفحه وب رسید میتوان ازلنگرها استفاده كردبه این صورت:
<a name=”anchor name”> text or picture </a>
Anchor name متنی است كه به صورت داخلی برای شناسایی بخش موردنظر به كاربرده میشود.
همچنین بعدازاین كه یك لنگر ایجاد شدمیتوان به ان لنگر پیوندایجاد كرد به این صورت:
<a href=”#anchor name”> text </a>
كه دران anchor name مقدار شاخص name درتگ a مقصد میباشد.
اگرلنگردریك سند مجزا دیگر باشداز
<a href=”page.html#anchor name”>
استفاده كنید.
3-12تصاویر
ایجادتصاویربرای وب با ایجادتصاویربرای وب اندكی تفاوت داردشش فاكتور اصلی آنها را از هم متمایز میكند كه عبارتند از:قالب ،رنگ،اندازه،قدرت تفكیك،سرعت،شفافیت ومتحرك نمایی.
3-12-1 قالب تصویربرای وب
وب روزانه توسط میلیونها كامپیوتر با سیستم عاملهای مختلف macintosh,windows,unix مورد دسترسی قرار میگیرد.
تصاویرگرافیكی كه درصفحه وب به كار برده میشوندباید درقالبی باشندكه هركدام ازسیستم عاملها بتوانند آنهاراتشخیص دهنددوقالبی كه بیشتر از همه روی وب بكار میرود jpg(jpeg),gif وقالب دیگری به نام png كه روز به روز پرطرفدارتر میشود.مرورگرهای فعلی میتوانند تصاویر را باهركدام از این قالب ها نمایش دهند.
3-12-2 جایگذاری تصاویر روی صفحه
درجایی كه میخواهیدتصویرنمایش داده شود تایپ كنید:
<img src=”image.url” /> كهimage.url مكان تصویر روی سرور میباشد.
شاخصborder=”n” كه میتوان آن را درون تگ img به كار برد برای ایجاد یا حذف مرز دور تصویر میباشد.
3-12-3 ارائه متن جایگزین به جای تصویر

برای ارائه متن جایگزین وقتی تصویر نمایش داده نمیشود میتوان شاخص alt=” replace text ” را درون تگ img استفاده كرد.درمرورگر internet explorer برای windows

هرگاه به تصویری كه دارای متن جایگزین است اشاره میشود متن جایگزین نمایش داده میشود كه درسایرمرورگرهابرای این كارمیتوان ازشاخص title درون تگ img استفاده كرد.

3-12-4 مشخص كردن اندازه برای مشاهده سریعتر تصویر
وقتی یك مرورگر كدhtml رادریافت میكند بایدتصویرراباركندتاببینداندازه ان چقدراست وچقدرفضا روی صفحه باید به ان اختصاص دهد اگر ابعاد تصویررامشخص كنیدمرورگر میتواند ضمن بار كردن تصویر متن دور تصویررانیز درجای خود قراردهدتا كاربر در زمانی كه منتظر تصویر است چیزی برای مطالعه داشته باشد.
برای تعیین مقیاس تصویرتایپ كنید:
<img src=”img.url” width=”x” height=”y” />

 

3-12-5 شناوركردن تصاویر

اگر میخواهید تصویر درسمت راست درون بخش مورد نظر قرار بگیرددرون تگimg اضافه كنید align=”right”همچنین

align=”left” برای قراردهی در سمت چپ به كار میرود.

3-12-6 اضافه كردن فضای خالی به دورتصویر
برای این كار بایداز شاخص vspace=”y”, hspace=”x”
درون تگ img استفاده كردكه hspace=”x” پیكسل های فضای خالی رابه سمت چپ وراست اضافه میكند وvspace=”y” پیكسل هایی رابه بالا وپایین تصویر اضافه میكند.
3-12-7 جلوگیری ازپیچیده شدن عناصربه دور تصاویر
میتوان ازشاخص clear درون تگ br كه برای كست خط است استفاده كرد :
<br clear=”right” /> باعث میشودكه درسمت راست شئ در صورتی كه فضای خالی مشاهده شود متن ظاهرشود.
<br clear=”left” /> به همین صورت متن درفضای خالی سمت چپ ظاهر میشود.
<br clear=”all” /> متن زمانی ظاهر میشود كه حاشیه های چپ وراست هردو خالی باشند.

3-12-8 استفاده از تصاویر به جای برچسب پیوندها
اضافه كردن یك تصویربه یك پیوند یك دكمه راهبری است كه كاربر میتواند با كلیك كردن روی ان به url مورد اشاره دسترسی پیدا كند.
برای اینكارتایپ كنید:
<a href=”page.html”> page.html صفحه مقصداست

.
سپس تایپ كنید:<img src=”image.url” /> image.url مكان تصویر روی سرور میباشد.
ودرنهایت </a> برای كامل كردن پیوند.

3-12-9 انیمیشن تصاویر
یكی ازساده ترین راههای ایجادجلوه های انیمیشن توسط تصاویر ،نمایش تعدادی ازتصاویر دریك نقطه ازصفحه وب درزمان های مختلف است.
برای این كارتوسط جاوااسكریپت نیاز به یك تابع است به نام changeimages كه درهنگام بارشدن صفحه فراخوانی می شود ویك تایمر رابرای فراخوانی تابع changeimage ایجاد می كند
تابع changeimages خاصیت src تصویرسندرابه تصویربعدی تغییرمی دهد.
<script language=”javascript”>
Var ix=0
Function changeimages(miliseconds)
{
Window.setinterval(“changeimage()”,milliseconds)
}
Function changeimage()
{
++ix
Ix %=6

Var imageref=document.images[0]
Imageref.src=”pic”+ix+”.gif”
}
</script>
<body onload=”changeimages(500)”>
<p align=”center”><img src=”pic0.gif”></p>

</body>

3-1 استفاده ازصفحه سبك ها-css
یك صفحه سبك به زبان ساده یك فایل متنی است كه شامل یك یاچندقاعده می باشد كه به وسیله ویژگی هاومقادیرتعیین می كند كه عناصر معین چگونه بایدروی صفحه وب شما به نمایش درایند
همان طور كه در قسمت متن دیدیدhtml دارای امكانات كمی در موردقالب دهی متن می باشد خوشبختانه css
امكانات بیشتری راارائه میدهد.
یك نكته شگفت انگیزcss این است كه می توان انراخارج از صفحه وب ایجاد كردوسپس انرا به یكباره به تمام صفحات یك سایت اعمال كرد.
با استفاده از css میتوانید اندازه ،نوع،قلم،ارتفاع خط،رنگ پیش زمینه وپس زمینه، فاصله هاو.. راتغییر دهید.

3-13-1 ایجاد صفحه سبك داخلی
اگر كد css درون همان سند باشد یك صفحه سبك داخلی خواهیم داشت كه برای ایجاد آن اینگونه عمل كنید:
دربخش head از سند html تایپ كنید
<style type=”text/css”> هرتعداد قاعده سبك كه موردنظرتان است تعریف كنید
سپس تایپ كنید:</style> تا صفحه سبك داخلی كامل شود.
3-13-2 ایجاد صفحه سبك خارجی
اگربخواهیدازقالب های سبك درتمام صفحات وب تان استفاده كنیدبهتراست كه از صفحه سبك خارجی استفاده كنیدوآنرابه وسیله كد زیركه در بخش head از سند نوشته میشودبه سندتان پیوندبزنید
<link rel=”stylesheet” type=”text/css” href=”url.css” /> كه url.css نام صفحه سبك css میباشد.
3-14 تعریف انتخاب كننده ها
یك قاعده سبك css دارای دو بخش اصلی است.انتخاب كننده تعیین میكند كه قالب دهی به كدام عنصر اعمال شود واعلام ها خود قالب دهی هایی كه اعمال میشوند را تعریف می كنند.
انتخاب عناصر توسط نامشان
ساده ترین نوع انتخاب نام عنصری است كه باید در قالب دهی اعمال شود مثلآ h1{color:red;} كه درآن عنصرمورد نظر h1 است كه در این انتخاب رنگ آن به رنگ قرمزدر می اید.
انتخاب عناصربرپایه class,id
اگرتوسط id یا class به عناصربرچسب زده باشید میتوانیدازآن دریك انتخاب كننده استفاده كنید.
اگربرچسب id باشد:#id{——————-}|
اگربرچسب class باشد:.class{——————}
انتخاب عناصرپیوند برپایه حالتشان
a:link{—–} ظاهرپیوندهایی كه تابه حال به انهااشاره نشده یاروی انهاكلیك نشده تغییر می كند.
a:visited{——} پیوندهایی كه مراجعه كننده قبلآ روی انها كلیك كرده تغییر می كند.
A:focus{———} پیوندهایی كه ازطریق صفحه كلید انتخاب شده واماده فعال شدن است ظاهرانها تغییر كند.
A:active{———} وقتی روی پیوندها كلیك شد ظاهر انها تغییر كند.

a:hover{————} وقتی به پیوندها اشاره شد ظاهر انها تغییر كند.

3-15 قالب دهی با سبك ها
همان طوری كه دربخش های قبلی درموردcss صحبت شد می توان گفت كه css یك زبان قابل انعطاف وقدرتمند ومؤثر است كه با بهره گیری از ان میتوان به صفحه خودقالبهای خاصی داد.

3-15-1اضافه كردن فضای خالی به دورمطالب یك عنصر
ازویژگی padding درون انتخاب كننده ها استفاده می شودكه حداكثرمیتوانددارای 4 مقدار باشد به این صورت:
class=”screen” قبلآ درون تگ عناصرتعریف شده است پس درون صفحه سبك مینویسیم:
#screen{padding:10px 20px 30px 40px;}
چهارمقدار درنظرگرفته شده برای padding به ترتیب مربوط به حاشیه بالا،راست،پایین وچپ می باشد.

3-15-2 تعیین تمام مقادیرمربوط به قلم
font-family:”name1″ , name2 نوع فونت انتخابی را مشخص می كند اگر اولین فونت(name1) درسیستم نصب نباشد name2 فونت جایگزین می باشد.
font-size:10px(10em) اندازه قلم را تعیین می كند.
Font-weight:bold(normal,..) قالب دهی را برای متن مشخص می كند كهاگر bold نوشته شود یعنی برجسته باشد normal برای حذف برجسته بودن استفاده می شود.
Font-style:italic برای ایتالیك كردن متن استفاده می شود.
برای ردیف كردن متن:
Text-align:left متن از سمت چپ ردیف می شود.
Text-align:right متن از سمت راست ردیف می شود.
Text-align:center متن در وسط قرار میگیرد.
Text-align:justify متن ازچپ وراست با هم ردیف می شود.
3-13-5 ایجاد دكمه تغییرشكل دهنده
دكمه های تغییر شكل دهنده وقتی نشانگر موس روی انها قرارمی گیرد ظاهر انها تغییر می كند.
برای تغییر ظاهرپیوندها یك مجموعه ازپیوند هارادر سندتان ایجاد كنید.
درcss ویژگی های انتخاب كننده های a:link وa:visited ازجمله رنگ وتصویرپس زمینه انها را اضافه كنید.
به این صورت:
a:link,a:visited{background:#ffff;border 2px outset#ffff
a:hover ,a:focus باتغییر رنگ و.. وقتی به پیوند ها اشاره شد ظاهر انها تغییر میكند.
به این صورت:
a:focus,a:hover{background:#fffff;border:2px outset#ffff;color:black}
باتعیین انتخاب كننده a:active می توانید ظاهر پیوندر ا وقتی كه پیوندفعال می شود تغییر دهیدبه این صورت:
a:active{background:#fffff;border:2px outset #fffff;}
من به عنوان مثال رنگ را #fffff انتخاب كرده ام شما میتوانید هر رنگی را به جای ان قرار دهید.
این كدها در بدنه <style type=”text/css”> در بخش <head> از سندتان قرار میگیرند.
پیوندهاراهمان طور كه قبلآ توضیح داده شده اندرابه صورت زیردر بدنه <body> قراردهید:
<a href=”page.html”> page</a>

3-13-6 ایجادفهرستها
فهرستها یا ترتیبی هستندیاغیرترتیبی .برای ایجادیك فهرست ترتیبی در محل موردنظر تایپ كنید:<ol>
برای فهرست غیر ترتیبی از <ul> استفاده كنید.
سپس تایپ كنید <li> تااولین ایتم فهرست ایجاد شود.
<ol>
<li> item1</li>
<li> item2 </li>
</ol>
برای نوشتن هر ایتم باید از <li> </li> استفاده كنید.
درزیر طریقه نوشتن فهرستهای غیر ترتیبی امده است:
<ul>
<li> item1</li>
<li> item2 </li>
</ul>
درایتم های فهرست های ترتیبی برای هر ایتم یك شماره قرار میگیردولی درفهرست های غیرترتیبی به طورپیش فرض گلوله قرارمیگیرد برای انتخاب نشانه های دیگر می توان درقاعده سبك مربوط به فهرست نوشت:
Li{list-style-type:marker} كه درآنmarker یكی از مقادیر disc,circle,square,decimal,upper-alpha,lower- alpha,upper-roman,lower-roman
می باشد.
برای استفاده از نشانه های سفارشی تایپ كنید:
List-style-image:url(imsge.gif) كه در ان image.gif تصویری است كه می خواهید برای نشانه های ایتم ها به كار ببرید.
برای حذف نشانه های سفارشی تایپ كنید:
List-style-image:none;
درحالت كلی برای حذف نشانه ها درفهرسته ها تایپ كنید:
List-style-type:none;

3-13-7 ایجاد منوهای كركره ای بااستفاده از فهرستها
منوهای كركرهای به شكل یك فهرست تودرتو هستند كه ایتم های رده اول همیشه مرئی می باشند، ایتم های رده دوم به بعد فقط وقتی مرئی می شوند كه نشانگر موس روی انها قرار می گیرد.
برای ایجاد ابتداتمام فهرست رادرون یك تگ div با یك نام مثل support قرار دهید <div id=”support”>
در css بااستفاده از كدزیر قالب دهی پیش فرض برای فهرست راحذف كنید:
#support ul{margin:0; padding:0; list-style:none;}
سپس كل پیوندراقابل كلیك كردن كنید وبا كدزیر عرض ان را كنترل كنید:
#support a{display:block; width:10em;}
برای اینكه ایتم ها در رده اول به طورافقی ظاهرشوند تایپ كنید:
#support li{float:left; width:10em;}
برای مخفی كردن ایتم های رده دوم به بعدمگر زمانی كه نشانگرموس روی انها قرار میگیرد تایپ كنید:
#support li ul {display:none}
برای نمایش ایتم های رده دوم به بعد وقتی نشانگر موس روی انها قرار میگیرد:
#support li:hover ul{display:block;width:10em;position:absolute;}
برای اینكه بقیه صفحه(با نام content ) دركناربخش support قرار بگیرد تایپ كنید:
div.content{clear:left}

3-14جدول ها
جدول ها یك تاریخچه داستان گونه دروب دارنددرحالی كه ابتدافقط برای نگهداری داده های جدولی درنظر گرفته شده اند اما به سرعت برای یك وظیفه خیلی بزرگتر مناسب تشخیص داده شدند.
برای ایجاد یك زیربنا جهت صفحه بندی های پیچیده به همراه ستون های چندگانه نوار های حاشیه ای وبسیاری ویژگی های دیگر كه بدون css دسترسی به انها غیر ممكن بود.
یكی از چیز های جالب در مورد جدولها این است كه شما می توانید بااستفاده ازآنهایك طراحی شناورانجام دهید
طراحی شناور به این صورت است كه هر چیز روی صفحه وب شما قرار داردباتغییر اندازه پنجره مرورگر بزرگتر یا كوچكتر می شود.
نكته كلیدی برای انجام این كار این است كه درمشخص كردن عرض هابه جای استفاده ازمقادیربرحسب پیكسل ازمقادیر درصدی استفاده كنیدواجازه دهیدمرورگر خودش فضاهاراپركند.
3-14-1 ایجادجدول
<table>
<tr> تاشروع سطر اول را مشخص كنید.
<td> تاشروع یك خانه را مشخص كنید.
محتویات خانه را تایپ كنید
</td>
</tr>
</table>

3-14-2 اضافه كردن مرز در جدول
درون تگ table تایپ كنید border=”n” كه n ضخامت مرز برحسب پیكسل می باشد.
یامیتوانید درقسمت css ویژگی های جدول را مشخص كنید.
Table{border:10px double red;}
3-14-3كنترل فضای خالی بین خانه های جدول
در تگ table ازجدول تایپ كنیدcellspacing=”n” كه n تعداد پیكسل ها بین خانه هاست.
یادرقاعده سبك تایپ كنیدborder-spacing:value كه value یك طول برحسب پیكسل یا درصدی از طول عنصرمادرمی باشد.
3-14-4 كنترل فضای خالی دورمطالب موجوددر یك خانه جدول
درتگ table از جدول تایپ كنیدcellpadding=”n”
یا درقاعده سبك تایپ كنید padding:value
3-14-5 تركیب كردن جدول ها
برای صفحه بندی پیچیده تر ممكن است كه بخواهید جدول ها را باهم تركیب كنید.
اگر بخواهید یك جدول را داخل جدول دیگر قرار دهید باید ساختار انرا بعد از تگ های باز جدول مادر قرار دهید:
<table>
<tr><td>

<table>
<tr><td>
Content
</td></tr> </table>

</td></tr>
</table>
3-14-6تعیین سایرخصوصیات یك جدول
تعیین عرض جدول:
درون تگ td یا table تایپ كنید width=”n” كه n مقدار مورد نظر برای عرض برحسب پیكسل یا برحسب درصد (n%)می باشد.
تعیین محل جدول در صفحه:
درتگtable تایپ كنیدalign=” pace” كه pace می تواند
Right یا left یاcenter باشد.
تغییردادن رنگ پس زمینه جدول:
درون تگtable تایپ كنیدbgcolor=”color”

3-14-7 توسعه تعدادستون های جدول
هرگاه به جای رسیدید كه میخواهید جدول درچندستون توسعه پیدا كندپس از تگ های table و..تایپ كنید:
<colgroup span=”n” class=”class”>
</colgroup>
3-14-8 تقسیم جدول به بخش های افقی
برای اینكه جدول شمادارای سطرهای باشد
قبل ازاولین تگ tr مربوط به بخشی كه می خواهیدایجاد كنیدتایپ كنیدیكی از <thead>یا<tbody>یا<tfoot>
درون این تگ ها همچنین می توانید شاخص تعریف كنید.سپس محتویات متن را اضافه كنیدوبخش راباتوجه به عنصری كه دربخش اول استفاده كرده ایدبا </thead>یا</tbody>یا</tfoot> پایان دهید.

برای دریافت اینجا کلیک کنید

سوالات و نظرات شما

برچسب ها

سایت پروژه word, دانلود پروژه word, سایت پروژه, پروژه دات کام,
Copyright © 2014 cpro.ir
 
Clicky