هدف
دلیل وجودی یک سایت که مهمترین بخش طراحی وب میباشد، این عنصر باید درتمامی تصمیماتی که شامل بخشهای دیگر میشود در نظر گرفته شود.به طور کلی هدف از ایجاد سایت های وب گرفتن اصل مطلب و پخش کردن آن بین چندین صفحه مرتبط است برای اینکه درک آن توسط کاربر آسان شود(ارائه این صفحات در فصل دوم انجام میگیرد.)
صرفنظرازپروژه اولین قدم همیشه یکسان است:هدف کلی پروژه راتعیین کنید.پس درابتدا لازم است که هدف خود را درطراحی این سایت بیان کنم:
سایتی که توسط اینجانب در دست طراحی است یک سایت اطلاعات گرا یا سندگرا است.این گونه سایت های متن گرا با تأکید روی محتویات متنی طراحی میشوند پس نسبتآسبک،قابل دریافت از اینترنت وتا حدودی دارای کوچکترین طراحی هستند.البته ناگفته نماند که در کنار متن از سبکهای گرافیکی (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> پایان دهید.
3-14-9 انتخاب نمایش مرز ها
وقتی از شاخص border استفاده می کنیدیک مرز بین هرکدام از خانه ها وهمچنین به دور خود جدول ظاهر می شودhtml به شما این امکان را می دهد که کدام لبه های داخلی وخارجی با مرزنمایش داده شوند.
برای انتخاب مرزهای خارجی درتگ table تایپ کنید
Frame="location" که دران location می تواند یکی از مقادیر زیر باشد
Void : برای اینکه هیچ مرزخارجی نمایش داده نشود.
Above :یک مرزدربالا نمایش داده شود.
Below :یک مرزدپایین نمایش داده شود.
Hsides: یک مرزدربالاوپایین نمایش داده شود.
Vsides: یک مرزدرچپ وراست نمایش داده شود.
Rhs: یک مرزدرراست نمایش داده شود.
Lhs: یک مرزدر چپ نمایش داده شود.
Box یا border برای اینکه مرز درتمام جهت ها نمایش داده شود.
برای انتخاب مرز های داخلی درتگtable تایپ کنیدrules="area" که در ان area یکی از مقادیر زیر است:
None: هیچ مرز داخلی نمایش داده نمی شود.
Rows: مرز های افقی بین هرسطر نمایش داده می شود.
Cols:مرز های عمودی بین هرستون نمایش داده می شود.
Groups:مرزها بین گروه های ستونی (که توسطcolgroup ایجاد شده اند.)وبخش های افقی نمایش داده می شوند.
All: مرزهابین تمام سطرها وستون هادرجدول نمایش داده می شوند.
3-14-10 سرعت دادن به نمایش جدول
• جدول را تا انجاکه ممکن است کوچک نگه دارید هرجاممکن است جداول بزرگ رابه جداول کوچک تقسیم کنید.
• عرض را برحسب پیکسل یا درصد تعیین کنید.
• قاعده table-layout:fixed را به قاعدهء سبک متعلق به عنصرtable اضافه کنید
Table{table-layout:fixed;}
این قاعده به مرورگر می گوید که برای تعیین عرض جدول فقط سطر اول جدول راببیند ونگران تمام خانه ها در هرسطر نباشدوجدول سریعتر نمایش داده شود.
3-2 فرم ها
در این بخش با ایجاد فرم ها به مراجعه کنندگان امکان می دهید که باشما ارتباط برقرارکنند.
دوبخش اصلی دریک فرم وجوددارد:
مجموعه فیلدها ،برچسب ها ودکمه ها که مراجعه کننده روی صفحه مشاهه می کند وقرار است که انها راپرکند واسکریپ پردازشی که اطلاعات وارد شده رامی گیرد .
ساختن فیلد ها ودکمه های یک فرم سرراست می باشد وشبیه به ایجادبقیه بخش های یک صفحه وب می باشد.
پردازش کردن داده های بدست آمده از یک فرم اندکی پیچیده تر می باشد برای این کاراز php استفاده می کنیم که این زبان اسکریپت نویسی سرراست وساده است وبرای ساختن صفحات وب تبادلی کاملآ مناسب می باشد.
3-14-1 ایجادفرم ها
یک فرم دارای سه بخش مهم می باشد:
تگ form که شامل url اسکریپی است که فرم را پردازش می کندو عناصر فرم مانند فیلدها ومنوهاودکمه submit که داده ها رابرای اسکریپت روی سرور می فرستد.
برای ایجاد تایپ کنید:
<form method="post" action="script.url">
که در انscript.url مکانی روی سرور است که اسکریپ پردازش کننده فرم در ان قرار دارد.
محتویات فرم را ایجاد کنید(بعدآ توضیح می دهم.)
سپس تایپ کنید</form>
3-14-2 سازماندهی عناصرفرم
اگرمقدارفراوانی اطلاعات دارید که بایددریک فرم واردشوند می توانید عناصر مربوط به هم را گروه بندی کنید تادنبال کردن انها روی فرم اسانترباشد.
برای سازماندهی:
پایین تگ form اما بالای هرعنصر فرمی که می خواهید درگروه اول قرار بگیردتایپ کنید:
<fieldset>
اگر می خواهید یک نام به گروه بدهید تایپ کنید:
<legend align="direction">
نام یا متن راهنما را تایپ کنیدسپس </legend>عناصرفرم راایجادکنید.
سپس</fieldset> تا تعریف اولین گروه کامل شود.
به این صورت:
<form method="post" action="script.php">
<fieldset id="id"><legend align="direction">
Groupname </legend>
محل عناصرفرم
</fieldset>
3-14-3 ایجادکادرهای متنی
کادر های متنی می توانند یک خط از متن با قالب ازاد را درخودجای دهند یعنی هرچیزی که مراجعه کننده می خواهد تایپ کند مثل نام ها ،ادرس ها ومانند انها.
برای ایجاد:
درصورت لزوم برچسب کادرمتنی راتایپ کنید
Name:<input type="text" name="label" value="default" size="n" />
Label متنی است که داده های ورودی را برای سرور شناسایی می کند default داده هایی است که در ابتده در کادر نشان داده می شود ودرصورتی که کاربر چیز دیگری تایپ نکند برای سرور فرستاده می شود.
n اندازه کادر متنی می باشد.
3-14-4 ایجاد کادر مخصوص رمز عبور
تفاوت بین کادر مخصوص رمز عبور وسایرکادرهای متنی این است که هرچیزی درکادر مخصوص رمز عبورتایپ شود به صورت ستاره یا گلوله نمایش داده می شود.
برای ایجاد تایپ کنید:
enter password:<input type="password" name="label" size="n" maxlength="m" />
3-14-5 ایجاد دکمه رادیویی
دکمه های رادیویی به این صورت عمل می کنند که هیچ گاه نمی توان بیشتر از یک دکمه را انتخاب نمود.
برای ایجادآنها تایپ کنید:
<p id="id"><label> select </label>
<input type="radio" name="select" value="value1"/>select1
</p>
متنی که بین تگهای بازوبسته label قرارمی گیرد یک متن معرفی دکمه ها می باشدکه درابتدای فرم ظاهر می شود .name="select" نامی است که برای شناسایی بکار می رود.
فرمت این مقاله به صورت Word و با قابلیت ویرایش میباشد
تعداد صفحات این مقاله 76 صفحه
پس از پرداخت ، میتوانید مقاله را به صورت انلاین دانلود کنید
دانلودمقاله طراحی وب سایت اساتید دانشگاه ملایر