طراحی وب سایت
درباره سایت
آخرین مطالب
امکانات وب
با سلام مجدد خدمت همه علاقه مندان به يادگيري علم طراحي سايت و با پوزش از تاخير در ارائه مطلب ، اميدوارم بتوانيم منظم تر از گذشته اين سري آموزشي را ادامه دهيم .
آيا ساختن يک صفحه کافي است؟
در قسمت هاي گذشته ساخت يک صفحه از وب سايت را آموختيم و حالا مي خواهيم چند صفحه را در کنار هم داشته باشيم و بين آن ها با لينک دهي حرکت کنيم . در واقع اين يک workshop براي جمع آوري اندوخته هاي شماست .
در ابتدا صفحه اي با نام 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>Bubble Under - The diving club for the south-west
UK</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
</head>
<body>
<div id="header">
<div id="sitebranding">
<h1>BubbleUnder.com</h1>
</div>
<div id="tagline">
<p>Diving club for the south-west UK - let's make a
splash!</p>
</div>
</div> <!-- end of header div -->
<div id="bodycontent">
<h2>Welcome to our super-dooper Scuba site</h2>
<p><img src="divers-circle.jpg"
alt="A circle of divers practice their skills"
width="200" height="162"/></p>
<p>Glad you could drop in and share some air with us! You've
passed your underwater navigation skills and
successfully found your way to the start point - or in
this case, our home page.</p>
</div> <!-- end of bodycontent div -->
</body>
</html>
نحوه ساخت و تگهاي استفاده شده در مثال فوق قبلا توضيح داده شده است . (سورس تگ img را با تصويري در کامپيتر خود پر کنيد)
حالا در فلدري که صفحه شما وجود دارد از فايل index.html مي بايست 2 بار کپي بگيريد . بدين ترتيب:
بعد از انتخاب فايل
edit > copy
و سپس 2 بار
Edit > paste
را مي زنيد حالا 3 فايل مشابه داريد که مي بايست 2 تاي کپي شده را تغيير نام دهيم براي همين روي آنها کليک راست ماوس را فشار مي دهيم و گزينه يrename را مي زنيم تا بتوانيم نام دلخواه را به آن ها بدهيم. يکي را contact.html و ديگري را about.html نام گذاري مي کنيم .
محتواي 3 صفحه فوق يکسان است و مي بايست محتواي صفحات را ويرايش کنيد تا با هم يکي نباشد براي اين کار صفحات دوم وسوم را با ابزار هايي که توضيح داده شده است مثل NotePad باز کنيد و تايتل و محتواي هر صفحه را نسبت به نام آن تغيير دهيد . به طور مثال عبارت contact us را براي تگ تايتل در صفحه contact.html انتخب نماييد.
بعد از تغييرات در 2 صفحه موجود آن ها را save کنيد . ( روش save کردن در جلسات گذشته توضيح داده شده است)
لينک کردن صفحات به هم:
صفحه اول يا همان index را باز کنيد و سعي کنيد از آن به صفحه contact برويد!
بله اين امکان در حال حاضر وجود ندارد و براي حرکت بين صفحات مختلف شما مي بايست از link و يا anchor استفاده نماييد.
<a href="filename.html">Link text here</a>
حالا بايد براي لينک دهي بين صفحات يک منو و يا navigation سايت را بسازيم . دقت نماييد نحوه ساخت navigation سايت بسيار مهم است و ساختاري که در ادامه توضيح داده مي شود ساختاري مناسب و استاندارد براي منوي سايت مي باشد و بهتر است الان نگران ظاهر آن نباشيد در ادامه مقالات ظاهر آن را زيبا مي کنيم!
ساخت يک منويnavigation
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div> <!-- end of navigation div -->
حالا کد زير را در بالاي همه صفحات بعد از تگ div با آي دي header اضافه نماييد . به طور مثال براي صفحه index
<!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>Bubble Under - The diving club for the south-west
UK</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
</head>
<body>
<div id="header">
<div id="sitebranding">
<h1>BubbleUnder.com</h1>
</div>
<div id="tagline">
<p>Diving club for the south-west UK - let's make a
splash!</p>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div> <!-- end of navigation div -->
<div id="bodycontent">
<h2>Welcome to our super-dooper Scuba site</h2>
<p><img src="divers-circle.jpg" width="200" height="162"
alt="A circle of divers practice their skills"/></p>
<p>Glad you could drop in and share some air with us!
You've passed your underwater navigation skills and
successfully found your way to the start point - or in
this case, our home page.</p>
</div> <!-- end of bodycontent div -->
</body>
</html>
حالا به راحتي مي توانيد بين 3 صفحه حرکت نماييد.
نکته نويسنده: بهترين مکان براي قرارگيري منوي سايت هم از لحاظ ظاهر و هم در ساختار html بالاترين نقطه صفحه است. مطمئن باشيد اين به نفع شماست!
و در آخر 3 صفحه خواهيد داشت که به راحتي قابليت حرکت بين يکديگر را دارند.
برچسب: طراحی وب سایت,طراحی سایت,طراحی وب,
نویسنده: ali