تا این لحظه سایت هایی بسیار ساده و ابتدایی را با یکدیگر طراحی و مرور کردیم؛ شاید کدها را دستی وارد کردید یا اینکه کپی-پیست نمودید، شاید هم تا حدودی با کد نوشته شده بازی کردید و آن را مورد آزمایش های شخصی قرار دادید—این کار بسیار مفید است و به درک بهتر شما کمک می کند—شاید نمونه هایی که با یکدیگر مرور کردیم کاربردی نبوده و به درد استفاده در یک سایت نخورند اما مهم ترین چیزی که به وسیله آن ها یاد گرفتیم ایده ها و درک مفهومی درس ها بود و قطعاً در طراحی های شخصی خود از آن ها استفاده خواهید کرد. به عنوان تمرین یک پروژه کوچک را با هم انجام می دهیم، وب سایتی برای یک گروه غواصی با اهداف زیر:
- اشتراک گزاری عکس هایی از سفر های گروهی غواص ها
- مطلع نگه داشتن اعضای سایت از سفرها و برنامه های جدید گروه
- بروز نگه داشتن اعضا در مورد جلسات و اتفاقات مهم
- امکان خواندن گزارش ها و یادداشت های سایر اعضا از تجربیاتشان
- اعلام کردن اخبار گروه
این سایت همچنین اهداف زیر را نیز دنبال می کند:
- جذب اعضای جدید
- آدرس سایت های مشابه را به کاربران معرفی کند
- امکان جست و جوی آسان را برای کاربران در زمینه اطلاعات گوناگون غواصی فراهم کند.
شاید چنین سایتی بازدید کنندگان زیادی نداشته باشد اما بازدیدکنندگان و اعضای سایت بسیار پیگیر خواهند بود و حتماً بارها به سایت سر خواهند زد. علاوه بر این ها به نظر پروژه خوبی برای شروع کارمان می آید، پس کارمان را آغاز می کنیم، همان طور که پیشبینی می کردید کار را با HomePage شروع خواهیم کرد.
صفحه خانه: نقطه آغازین برای تمام سایت ها
اگر به یاد داشته باشید در آغاز این فصل یک وبسایت ساده را با هم طراحی کردیم، در آن زمان فایل را با نام basic.html ذخیره کردیم، آن فایل را در نرم افزار ویرایش متن خود باز کرده و کارهای زیر را انجام دهید.
- بخش های بین <title> و </title> را حذف کنید.
- بخش های بین <body> و </body> را نیز حذف کنید.
- در آخر هم فایل را با نام index.html ذخیره کنید.
فایل نهایی شما باید مشابه کد زیر باشد:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
</body>
</html>
خوب، همه چیز آماده است. شروع کنیم؟!
تعیین تیتر اصلی مناسب برای سایت
در مورد این بخش قبلاً به طور کامل توضیح داده بودیم، به یاد آورید که در گذشته چگونه تیتر اصلی مناسب خود را انتخاب کرده بودیم. در اینجا پیشنهاد ما به عنوان شروع کار چنین است:
- تیتر اصلی را به "Bubble Under – The diving club for the south-west UK." تغییر دهید.
- عنوان مطلب خود را به صورت روبه رو می نویسیم"BubbleUnder.com".
- بعد از تعیین عنوان یک پاراگراف به صورت زیر اضافه می کنیم:
"Diving club for the south-west UK".
زمانی که تغییرات بالا را به سایت خود اضافه کردیم کد نهایی ما به شکل زیر در خواهد آمد:
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bubble Under - The diving club for the south-west UK</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>BubbleUnder.com</h1>
<p>Diving club for the south-west UK - let's make a splash!</p>
</body>
</html>
صفحه طراحی شده خود را ذخیره کرده و با مرورگر مناسب آن را باز می کنیم؛ چیزی همچون شکل 2.13 خواهیم دید.
شکل 2.13: نمای کلی که در مرورگر خواهیم دید باید اینگونه باشد.
