در ساخت سایت فرضی خود تا اینجا قدم های خوبی برداشتیم اما آیا یک وبسایت با یک صفحه یک وبسایت است؟ آیا شما می توانید یک جمله را با یک کلمه بسازید؟ جواب ساده است، بله! اما آیا شما این کتاب را برای شاخت وبسایتی با یک صفحه خریداری کرده اید؟ به نظر سایتی که از یک صفحه طراحی شده است سایتی ایده آل و عالی نخواهد بود. حالا که این نکته را بررسی کردیم بیایید نگاهی به اضافه کردن صفحه های دیگر به سایت خود بیاندازیم و اینکه این قسمت های گوناگون چگونه به یکدیگر لینک خواهند شد.
قبل از آغاز کار باید مطمئن شویم که سایت ما تا به الان بدون اشکال و درست طراحی شده است. صفحه طراحی شده ما تا به این لحظه باید شبیه به کد کاملی که آخرین بار مورد بررسی قرار گرفت باشد (بعد از اضافه کردنِ دستورات div به آن). اگر اینگونه نیست به آرشیو قرار داده شده بروید و نسخه آماده ای که برای شما قرار داده شده است را پیدا کنید (/chapter2/web-site_files/05_with_dives/index.html). آن را با عنوان index.html در پوشه وبسایت خود ذخیره کرده و در صورت مشاهده پیام جایگزینی گذینه yes را انتخاب کنید.
این کار را کردید؟ خوب حالا باید این فایل را به سه قسمت تقسیم کنید، ابتدا دو کپی دیگر از فایل بگیرید:
1. در Windows Explorer یا Finder فایل نامبرده را پیدا کرده و باز کنید.
2. برای کپی کردن فایل بر روی Edit>copy کلیک کنید.
3. برای پِیست کردن فایل در همان آدرس Edit>Paste را بزنید.
4. این سه مرحله را بار دیگر نیز تکرار کنید.
حالا شما سه فایل HTML درون پوشه سایت خود دارید. در حال حاضر فایل index.html اولیه را دستکاری نمی کنیم اما نامِ دو فایل دیگر را به contact.html و about.html تغییر می دهیم، یادتان باشد که تماماً حروف کوچک استفاده شود.
Imageنشان دادنِ Extension
اگر نام فایل شما فقط index را نشان می دهد سیستم شما بر روی مخفی کردن Extension تنظیم شده است. برای نشان داده شدن این بخش برای فایل هایی که برای ویندوز شناسایی شده هستند باید مراحل زیر را کامل کنید.
1. Windows Explorer را باز کنید.
2. بر روی Tools>Folder Option کلیک کنید.
3. بخش View tab را باز کنید.
4. در قسمتِ Advanced Settings مطمئن شوید که گزینه روبه روی Hide extensions for known file types تیک نخورده باشد.
حالا ما سه فایل XHTML در اختیار داریم و باید محتوای هرکدام از آنها را بر اساس اطلاعاتی که در هر کدام از آنها مورد نیاز ما است تغییر دهیم.
برای باز کردن فایل هایی که در نظر داریم Notepad را باز کرده و File>Open را کلیک می کنیم و در پنجره ای که باز می شود files type را به All Files تغییر می دهیم. حالا زمانه که به پوشه سایت خود می رویم تمام فایل ها را برای باز کردن میبینیم.
باز کردن یک فایل در TextEdit نیز همانند مراحل بالا ساده است. بر روی File>Open کلیک کرده و مطمئن می شویم که Ignore rich text commands تیک خورده باشد.
در برنامه ویرایش متن خود صفحه ها را به ترتیب باز کرده، تغییرات زیر را اعمال کرده، صفحه مورد نظر را ذخیره کرده و می بندیم.
Index.html: بخشِ About Us و Contact Us را به طور کلی حذف می کنیم(تمام عناوین و پاراگراف هایشان را)، اما یادتان باشد به تگ های باز و بسته ی div دست نزینید از آنجا که زیرساخت و استخان بندی سایت به هم می ریزد.
About.html: بخش مقدمه را حذف کنید (عنوانِ نوع دوم و تمام پاراگراف هایش را از جمله تصویر ضمیمه شده) بخشِ Contact Us را نیز پاک کنید.
Contact.html: در این مرحله هم قسمت های مقدمه و About Us را پاک کنید.
حالا هر سه فایل ما اطلاعاتی را دربر دارند که با نامی که به آنها اختصاص داده شده همخوانی دارند. اما تغییرات دیگری برای دو فایل تازه ساخته شده باید اجرا شود، ابتدا About.html را در برنامه ویرایش متن خود باز کرده و تغییرات زیر را به آن اعمال کنید:
1. تگِ title را به “About BubbleUnder.com: who we are; what this site is for” تغییر دهید.
2. عنوان نوع سومِ <h3>About Us</h3> را به نوع دوم تغییر دهید، از آنجا که در مراحل تغییر فایل اصلی سایت خود عنوانِ نوع دوم حذف شد. در واقع عناوینِ About Us و Contact Us که نوع سوم بودند زیر عنوان نوع دومِ Welcome قرار گرفته بودند و زیاد جالب نیست که بعد از یک عنوان نوع اصلی از یک نوعِ سوم استفاده کنیم.
سپس فایل contact.html را در برنامه ویرایش متن خود باز کنید و تغییرات زیر را به آن اعمال کنید.
1. تگِ title را به “Contact Us at Bubble Under” تغییر دهید.
2. عنوان نوع سوم را به نوع دوم تغییر دهید، همانطور که در فایل about.html این تغییر را اعمال کردیم.
اگر همه چیز طبق برنامه پیش رفته باشد شما باید سه فایل با نام های index.html، contact.html و about.html داشته باشید.
محتوای هرکدام از این سه فایل باید به صورتِ زیر باشد؛
فایلِ 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>
فایلِ about.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>About Bubble Under: who we are, what this site is for</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>About Us</h2>
<p>Bubble Under is a group of diving enthusiasts based in
the south-west UK who meet up for diving trips in the
summer months when the weather is good and the bacon
rolls are flowing. We arrange weekends away as small
groups to cut the costs of accommodation and travel and
to ensure that everyone gets a trustworthy dive
buddy.</p>
<p>Although we're based in the south-west, we don't stay on
our own turf: past diving weekends away have included
trips up to Scapa Flow in Scotland and to Malta's
numerous wreck sites.</p>
<p>When we're not diving, we often meet up in a local pub
to talk about our recent adventures (any excuse,
eh?).</p>
</div> <!-- end of bodycontent div -->
</body>
</html>
فایلِ contact.html:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Contact Us at Bubble Under</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>Contact Us</h2>
<p>To find out more, contact Club Secretary Bob Dobalina on
01793 641207 or <a href="mailto:bob@bubbleunder.com">email bob@bubbleunder.com</a>.</p>
</div> <!-- end of bodycontent div -->
</body>
</html>
