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

بخشی از مقاله

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

فصل اول

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.از واژه پرداز گزينه filesave 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> پايان دهيد.