با قسمت ششم آموزش طراحی وب سایت از پایه در خدمت شما هستیم . در این قسمت یاد خواهید گرفت که چگونه چند صفحه را در کنار هم قرار دهیم و بین آن ها حرکت کنیم.
در ابتدا صفحه ای با نام 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>
href : یک attribute است و بیان کننده آدرسی است که قرار است به آنجا لینک شود
filename.html: نام صفحه ایست که قرار است به آنجا لینک شود
Link text here: چیزی که در صفحه html دیده می شود و نام لینک مورد نظر است
این نکته را هرگز فراموش نکنید که از کلمات با معنی برای لینک دهی استفاده نمایید و از کلماتی مانند “اینجا را کلیک نمایید” پرهیز کنید.
حالا باید برای لینک دهی بین صفحات یک منو و یا 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>
</div>
</div> <!– end of header div –>
<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 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 صفحه خواهید داشت که به راحتی قابلیت حرکت بین یکدیگر را دارند.
در جلسه بعد در باره تگ های blockquote strong , em , توضیحات بیشتری ارائه خواهم داد و سپس نوبت اضافه کردن استایل(ظاهر) به صفحه است .
برای تمرین این جلسه شما چندین منو را در سایت های مختلف مرور کنید به طور مثال برای امروز به طراحی سایت وب اسکالا رجوع نمایید و طرز لینک دهی در این سایت را ببینید. سپس توضیح دهید که چرا صفحاتی که لینک شده است پسوند ندارند؟
پاسخ های خود را به ایمیل بنده ارسال نمایید . بدیهی است که با انجام تمرین ها یک گام از سایرین جلوتر خواهید بود .
ادامه دارد اگر مورد استقبال قرار گیرد!
آموزش توسط بهزاد علی بیگی
برای مقاله های بیشتر و هم چنین دریافت pdf سری کامل آموزش ما را دنبال کنید در
- آموزش طراحی وب سایت از پایه – قسمت اول
- آموزش طراحی وب سایت از پایه – قسمت دوم
- آموزش طراحی وب سایت از پایه – قسمت سوم
- آموزش طراحی وب سایت از پایه – قسمت چهارم
- آموزش طراحی وب سایت از پایه – قسمت پنجم
- آموزش طراحی وب سایت از پایه – قسمت هفتم
- آموزش طراحی وب سایت از پایه – قسمت هشتم
- آموزش طراحی سایت از پایه – قسمت نهم
- آموزش طراحی سایت از پایه – قسمت دهم
- آموزش طراحی سایت از پایه – قسمت یازدهم
- آموزش طراحی سایت از پایه – قسمت دوازدهم
- آموزش طراحی سایت از پایه – قسمت سیزدهم
- آموزش طراحی سایت از پایه – قسمت چهاردهم
سلام دوستان ببخشید هی در امور سازنده سایت دخالت میکنم ولی اگه خیلی علاقه دارید یک فایل html آماده تهیه کنید و با notpad بازشون کنید و با مطالبی که دوستمون آموزش دادن میبینید که از بیشتر کدها سردرمیارید و میتونید ویرایششون کنید و اگر کدی اشتباه یاد گرفتید یا ناقص کامل ترشو یاد بگیرید.
سلام،سایتتون خوبه ولی خیلی اشتباه در کد ها دارید مثلا کد انتقال صفحات اشتباهه یا کد نمایش عکس و یک اشتباه دیگه در کد
که titleرو نوشتیدtitileلطفا رسیدگی کنید که دوستان علاقه مند گیج نشد.ممنون
سلام دوستان
ضمن تشکر از استاد و با اجازه ایشون موارد ذیل با توجه به مشکلاتی که خودم داشتم را می گم:
۱-برای تصویر قبل و بعد از نوشتن نام تصویر و پسوند حتما از ” ” استفاده کنید. داخل متن توضیحات با توجه به مشکلات تایپ کردن از ” ” استفاده شده است.
۲- اول تصویر را داخل همون فولدر طراحی سایت بریزید و سپس داخل متن به جای divers-circle نام فایل را وارد کنید. اگر اندازه تصویر را ندارید می تونید کلا اندازه ها را پاک کنید.
۳-در مورد لینک شدن صفحات به هم نیز اولین مشکل مربوط به مشکل ذکر شده در بند اول هست و بعد از اون هم بزرگ و کوچک بودن نام تصویر و همخوانی ان در متن برنامه مهم است.
سلام من دانش اموزی هستم با معدل بالا و ضریب هوشی نسبتا خوب باید اعتراف کنم درس امروز رو واقعا متوجه نشدم بهتر نیست که کد نویسی را یاد بدهید تا اینکه کد هارو بدید و ما کپی پیست کنیم ؟؟
من نمی فهمم چجوری عکس رو وارد کنم؟ عکس رو گذاشتم تو پوشه ای که فایل note pad توی اون ذخیره میشه اسم عکس رو هم داخل note pad اضافه کردم ولی اصلا چیزی نمیاد
ام.دمتون گرم واقعا از ابتدایی شروع کردید.تا پیشرفته.من تازه شروع کردم….خیلی ممنون..
من خودم هر سایتی را گشتم یا فیلتر بود.یا خیلی مختصر بود.یا پولی بود….اما شما بهترینید.
متاسفانه من متوجه نشدم. نمی تونم وارد لینک بعدی بشم.
با سلام
متشکرم از اموزش های کامل شما
میخواستم بدونم تمام این ها واسه طراحی سایت باید تایپ شوند؟ یعنی برنامه ای نیست ک ما به ضورت گرافیکی کار کنیم و خود نرم افزار کد های html را بسازه
چطور باید عکس از سیستم خودمون وارد کنیم تو آدرس؟
عکس رو در پوشه ای که این فایل رو ذخیره کردی بذار و بعدش نام عکس با پسوند رو در محل مشخص شده قرار بده(در اینجا نام عکس با پسوند divers-circle.jpg هستش) :
من نفهمیدم چطور اون کد دو بار کپی می کنیم و تغییر اسمش میدیم کمک لطفا
روی فایل کلیک راست کن گزینه copy رو انتخاب کن و بعد در فضای خالی داخل پوشه کلیک راست کن گزینه paste رو دوبار بزن
سلام سالار تو سایت وب اسکالا چطوری می شه نمونه کار دید
مرسی
(سورس تگ img را با تصویری در کامپیتر خود پر کنید)؟این یعنی چی کمکم کنید لطا؟؟
سلام من هنوز مشکل قرار دادن تصویر رو دارم. کسی کمک می کنه ؟
بسیار ممنون …
سلام
دستتون درد نکنه بابت این مطالب
من در بخش ۶ موقع لینک کردن صفحات به یکدیگر دچار مشکل میشوم کد رو درست میزنم ولی وقتی صفحه رو باز میکنم و روی قسمت لینک شده کلیک میکنم اررور میده میگه صفحه پیدا نشده است لطفا راهنمایی کنید
سلام
من پیشنهاد میکنم همه ” توی خط هاتون رو پاک کنید ودوباره بذارید. مرسی
من پیشنهاد می کنم خط به خط کدهاتونو با کدهای نوشته شده در درس چک کنید. مطمئتاً یه جایی یه مشکلی پیش آمده. من کدها رو که کپی میکنم بعضی کوتیشنهاش به صورت علامت سوال میاد که باید دستی درستشون کنم اما همه دستورات کامل و درستند و برای من که جواب دادند.
سلام. من هم مشکل کاربر مینا را دارم.کدهای بالا رو وارد کردم اما لینک نمیشه به صفحه بعد و پیداش نمیکنه.:(
سلام من علامت های “”کنار اسم فایل ها رو برداشتم درست شد.
سلام من میخوام از یه پیج به یکی دیگه برم میگه پیدا نشد.میشه لطفا بگید چکار کنم؟