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

word قابل ویرایش
75 صفحه
12700 تومان
127,000 ریال – خرید و دانلود

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

فصل اول

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

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

هدف این است که کاربران بتوانند با مراجعه به این سایت به اطلاعات زیر دست پیداکنند:
دانشکده های دانشگاه مورد نظر،
لیست اساتید هر دانشکده،

لیست دروس دانشکده،
اعضای هیأ ت های علمی دانشگاه،
مقاطع تحصیلی اعضای هیأت های علمی،

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

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

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

 

فصل دوم

۲-۱ مقدمه
طراحی وب چیست؟
یک حرفه چند جنبه ای که به تصمیم گیری وتولیدسایت های وب مربوط می شود.سایت های وب به عنوان یک مکانیزم ارتباطی بین صاحبان سایت وکاربرانش وهمچنین بین خودکاربران استفاده می شوند.
ابعاد اصلی طراحی وب عبارتند از:
محتوا: content

این بخش شامل شکل ودسته بندی محتویات سایت است.محدوده این بعدازروش نوشتن متن تانحوه دسته بندی،نمایش وساختاربندی آن توسط HTML گسترش می یابد.
فناوری:technology

منظور از فناوری عناصرمختلفی از سایت است که مشخصآ توسط فناوری های برنامه نویسی تولید میشوند .
دید بصری:visuals

این بعد به طرح صفحه نمایش استفاده شده در سایت اشاره دارداین طرح معمولآ توسط HTMLوCSS یافلش یاعناصرگرافیکی دیگر ایجادمی شود.این جنبه بصری سایت آشکارترین جنبه طراحی سایت می باشد.
جابجایی:

جابجایی سایت روی اینترنت یا به عبارت دیگر آپلود کردن فایل ها روی سرور .
هدف:

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

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

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

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

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

 

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

 

کاربر دستیابی به لیست
اساتیددانشگاه کاربر دستیابی به مدارج
اعضای هیآت علمی

 

کاربر مشاهده کردن کاربر کسب اطلاعات
گروههای اموزشی راجع به دانشگاه

نتیجه گیری

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

فصل سوم

۳-۱مقدمه
HTML مخفف HYPERTEXT MARKUP LANGUEGE می باشد که دارای دو ویژگی اصلی است:

۱٫ابر متن HYPER TEXT
یعنی به کمک آن میتوان به هر صفحه وب روی اینترنت رفت به عبارت دیگر اطلاعات موجود در وب را میتوان از جهات مختلف مورد دسترسی قرار داد.

۲ .سراسری بودن 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 انجام داده ام.

۳-۲اجزای سازنده صفحه وب

یک صفحه وب از مؤ لفه های تشکیل شده است:
محتویات متنی‌، تیتر ها ، پاراگرافها ،پیوند ها تصاویر و دستورالعمل های نشانه گذاری که توصیف میکند که محتویات واشاره ها چگونه باید به نمایش درآیند.
ذکراین نکته اهمیت دارد که این دستور العمل ها در زبان 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””

نام فایل مسیر نام سرور طرح
۳-۳ایجاد یک صفحه وب جدید
۱٫ویراستار متن یا واژه پرداز را باز کنید.(من از notpad استفاده میکنم.)

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

۱٫از واژه پرداز گزینه filesave as را انتخاب کنید.

 

شکل۳-۱

درکادر محاوره ای که باز میشود
۲٫در قسمت file name به فایلتان یک نام دلخواه بدهید دنباله نام فایل .html (این خیلی مهم است)
قرار دهید.
۳٫در قسمت unicode utf-8 را انتخاب کنید چون متداول ترین شکل Unicode در html میباشد. این سیستم کدگذاری در بر گیرنده ASCII نیز میباشد وتمام کارکترهایی که در سند استفاده میشود را شامل میشود.

شکل۳-۲

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

شکل۳-۳

۳-۶آغاز صفحه وب
صفحه را باید با یک 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 استفاده کرد که این شاخص برای قالب دهی به گروهی از عناصر به کار میرود.

۳-۱۰ متن

قراردهی متن درون صفحه بااستفاده از تگ <p> text </p> انجام میگیرد.
اگر بخواهیم در متن مورد نظر پاراگراف ایجادکنیم برای هرقسمت ازتگ<p></p> استفاده میکنیم.
۳-۱۰-۱ تعیین حالتهای مختلف برای متن

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

۳-۱۰-۲ایجاد تیتردرصفحه
دربخش body از سند تایپ کنید<hn> که در ان n عددی بین ۱تا۶ میباشد(بسته به ردهء تیتری که میخواهید اضافه کنید)پس از تایپ محتویات بنویسید</hn> که همان n همان عدد بالایی است.
۳-۱۰-۳ ایجاد شکست خط در متن

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

۳-۱۰-۵ ایجادمتن متحرک درصفحه
تگ <marquee> به شما اجازه می دهد که یک متن را به دلخواه خود در صفحه به حرکت در آورید کدی که موردنیاز است تایک متن متحرک ایجادکنیدبه صورت زیراست:

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

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

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

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

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

باکلیک کردن روی پیوندها میتوان به اول یک صفحه وب دیگر پرش کرد برای اینکه به یک بخش خاص ازصفحه وب رسید میتوان ازلنگرها استفاده کردبه این صورت:
<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”>
استفاده کنید.
۳-۱۲تصاویر
ایجادتصاویربرای وب با ایجادتصاویربرای وب اندکی تفاوت داردشش فاکتور اصلی آنها را از هم متمایز میکند که عبارتند از:قالب ،رنگ،اندازه،قدرت تفکیک،سرعت،شفافیت ومتحرک نمایی.
۳-۱۲-۱ قالب تصویربرای وب
وب روزانه توسط میلیونها کامپیوتر با سیستم عاملهای مختلف macintosh,windows,unix مورد دسترسی قرار میگیرد.
تصاویرگرافیکی که درصفحه وب به کار برده میشوندباید درقالبی باشندکه هرکدام ازسیستم عاملها بتوانند آنهاراتشخیص دهنددوقالبی که بیشتر از همه روی وب بکار میرود jpg(jpeg),gif وقالب دیگری به نام png که روز به روز پرطرفدارتر میشود.مرورگرهای فعلی میتوانند تصاویر را باهرکدام از این قالب ها نمایش دهند.
۳-۱۲-۲ جایگذاری تصاویر روی صفحه
درجایی که میخواهیدتصویرنمایش داده شود تایپ کنید:
<img src=”image.url” /> کهimage.url مکان تصویر روی سرور میباشد.
شاخصborder=”n” که میتوان آن را درون تگ img به کار برد برای ایجاد یا حذف مرز دور تصویر میباشد.
۳-۱۲-۳ ارائه متن جایگزین به جای تصویر

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

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

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

 

۳-۱۲-۵ شناورکردن تصاویر

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

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

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

۳-۱۲-۸ استفاده از تصاویر به جای برچسب پیوندها
اضافه کردن یک تصویربه یک پیوند یک دکمه راهبری است که کاربر میتواند با کلیک کردن روی ان به url مورد اشاره دسترسی پیدا کند.
برای اینکارتایپ کنید:
<a href=”page.html”> page.html صفحه مقصداست

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

۳-۱۲-۹ انیمیشن تصاویر
یکی ازساده ترین راههای ایجادجلوه های انیمیشن توسط تصاویر ،نمایش تعدادی ازتصاویر دریک نقطه ازصفحه وب درزمان های مختلف است.
برای این کارتوسط جاوااسکریپت نیاز به یک تابع است به نام 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>

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

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

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

۳-۱۵ قالب دهی با سبک ها
همان طوری که دربخش های قبلی درموردcss صحبت شد می توان گفت که css یک زبان قابل انعطاف وقدرتمند ومؤثر است که با بهره گیری از ان میتوان به صفحه خودقالبهای خاصی داد.

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

۳-۱۵-۲ تعیین تمام مقادیرمربوط به قلم
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 متن ازچپ وراست با هم ردیف می شود.
۳-۱۳-۵ ایجاد دکمه تغییرشکل دهنده
دکمه های تغییر شکل دهنده وقتی نشانگر موس روی انها قرارمی گیرد ظاهر انها تغییر می کند.
برای تغییر ظاهرپیوندها یک مجموعه ازپیوند هارادر سندتان ایجاد کنید.
در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>

۳-۱۳-۶ ایجادفهرستها
فهرستها یا ترتیبی هستندیاغیرترتیبی .برای ایجادیک فهرست ترتیبی در محل موردنظر تایپ کنید:<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;

۳-۱۳-۷ ایجاد منوهای کرکره ای بااستفاده از فهرستها
منوهای کرکرهای به شکل یک فهرست تودرتو هستند که ایتم های رده اول همیشه مرئی می باشند، ایتم های رده دوم به بعد فقط وقتی مرئی می شوند که نشانگر موس روی انها قرار می گیرد.
برای ایجاد ابتداتمام فهرست رادرون یک تگ 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}

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

۳-۱۴-۲ اضافه کردن مرز در جدول
درون تگ table تایپ کنید border=”n” که n ضخامت مرز برحسب پیکسل می باشد.
یامیتوانید درقسمت css ویژگی های جدول را مشخص کنید.
Table{border:10px double red;}
3-14-3کنترل فضای خالی بین خانه های جدول
در تگ table ازجدول تایپ کنیدcellspacing=”n” که n تعداد پیکسل ها بین خانه هاست.
یادرقاعده سبک تایپ کنیدborder-spacing:value که value یک طول برحسب پیکسل یا درصدی از طول عنصرمادرمی باشد.
۳-۱۴-۴ کنترل فضای خالی دورمطالب موجوددر یک خانه جدول
درتگ 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”

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

این فقط قسمتی از متن مقاله است . جهت دریافت کل متن مقاله ، لطفا آن را خریداری نمایید
word قابل ویرایش - قیمت 12700 تومان در 75 صفحه
127,000 ریال – خرید و دانلود
سایر مقالات موجود در این موضوع
دیدگاه خود را مطرح فرمایید . وظیفه ماست که به سوالات شما پاسخ دهیم

پاسخ دیدگاه شما ایمیل خواهد شد