آموزش طراحی وب سایت از پایه – قسمت ششم

101
7500

 

با سلام مجدد خدمت همه علاقه مندان به یادگیری علم طراحی سایت و با پوزش از تاخیر در ارائه مطلب ، امیدوارم بتوانیم منظم تر از گذشته این سری آموزشی را ادامه دهیم .
با قسمت ششم آموزش طراحی وب سایت از پایه در خدمت شما هستیم . در این قسمت یاد خواهید گرفت که چگونه چند صفحه را در کنار هم قرار دهیم و بین آن ها حرکت کنیم.

آیا ساختن یک صفحه کافی است؟در قسمت های گذشته ساخت یک صفحه از وب سایت را آموختیم و حالا می خواهیم چند صفحه را در کنار هم داشته باشیم و بین آن ها با لینک دهی حرکت کنیم . در واقع این یک 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>

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 صفحه خواهید داشت که به راحتی قابلیت حرکت بین یکدیگر را دارند.

design-web-48.gif

در جلسه بعد در باره تگ های blockquote  strong , em , توضیحات بیشتری ارائه خواهم داد و سپس نوبت اضافه کردن استایل(ظاهر) به صفحه است .
برای تمرین این جلسه شما چندین منو را در سایت های مختلف مرور کنید  به طور مثال برای امروز به طراحی سایت وب اسکالا رجوع نمایید و طرز لینک دهی در این سایت را ببینید. سپس توضیح دهید که چرا صفحاتی که لینک شده است پسوند ندارند؟

پاسخ های خود را به ایمیل بنده ارسال نمایید . بدیهی است که با انجام تمرین ها یک گام از سایرین جلوتر خواهید بود .

ادامه دارد اگر مورد استقبال قرار گیرد!

آموزش توسط بهزاد علی بیگی

برای مقاله های بیشتر و هم چنین دریافت pdf سری کامل آموزش ما را دنبال کنید در

کانال تلگرام عصرنوشتن

101 دیدگاه

  1. سلام من دانش اموزی هستم با معدل بالا و ضریب هوشی نسبتا خوب باید اعتراف کنم درس امروز رو واقعا متوجه نشدم بهتر نیست که کد نویسی را یاد بدهید تا اینکه کد هارو بدید و ما کپی پیست کنیم ؟؟

  2. من نمی فهمم چجوری عکس رو وارد کنم؟ عکس رو گذاشتم تو پوشه ای که فایل note pad توی اون ذخیره میشه اسم عکس رو هم داخل note pad اضافه کردم ولی اصلا چیزی نمیاد

  3. ام.دمتون گرم واقعا از ابتدایی شروع کردید.تا پیشرفته.من تازه شروع کردم….خیلی ممنون..
    من خودم هر سایتی را گشتم یا فیلتر بود.یا خیلی مختصر بود.یا پولی بود….اما شما بهترینید.

  4. با سلام
    متشکرم از اموزش های کامل شما
    میخواستم بدونم تمام این ها واسه طراحی سایت باید تایپ شوند؟ یعنی برنامه ای نیست ک ما به ضورت گرافیکی کار کنیم و خود نرم افزار کد های html را بسازه

    • عکس رو در پوشه ای که این فایل رو ذخیره کردی بذار و بعدش نام عکس با پسوند رو در محل مشخص شده قرار بده(در اینجا نام عکس با پسوند divers-circle.jpg هستش) :

    • روی فایل کلیک راست کن گزینه copy رو انتخاب کن و بعد در فضای خالی داخل پوشه کلیک راست کن گزینه paste رو دوبار بزن

  5. سلام
    دستتون درد نکنه بابت این مطالب
    من در بخش ۶ موقع لینک کردن صفحات به یکدیگر دچار مشکل میشوم کد رو درست میزنم ولی وقتی صفحه رو باز میکنم و روی قسمت لینک شده کلیک میکنم اررور میده میگه صفحه پیدا نشده است لطفا راهنمایی کنید

  6. من پیشنهاد می کنم خط به خط کدهاتونو با کدهای نوشته شده در درس چک کنید. مطمئتاً یه جایی یه مشکلی پیش آمده. من کدها رو که کپی میکنم بعضی کوتیشنهاش به صورت علامت سوال میاد که باید دستی درستشون کنم اما همه دستورات کامل و درستند و برای من که جواب دادند.

  7. سلام. من هم مشکل کاربر مینا را دارم.کدهای بالا رو وارد کردم اما لینک نمیشه به صفحه بعد و پیداش نمیکنه.:(

  8. سلام مجدد
    آقا علی دستت درست امروز دومین باره پیام میدم واقعا ازت ممنون بابت آموزشت اما یه مشکل که خودم باهاش روبرو شدم اینکه وقتی دستور رو کپی میکنیم به گفته آقا فربد لینک ها اشتباه میشه البت میگم که من مشکل رو تو پیج خودم حل کردم اما با تمام احترام وقتی کپی میکنیم “” به ,, تبدیل میشه برای من که این بود دوباره گیومه ها رو تغییر دادم درست شد فقط محض اطلاع گفتم قصد هیچ گونه جسارتی ندارم
    بازم ممنون

  9. با سلام و تشکر از سایت بسیار عالی و آموزنده تون. فقط یک انتقاد این کدهایی رو که مینویسین راست چین شدن و به هم ریختن نمیشه بهتر استفاده کرد . البته از قسمت سه به بعد اینطوریه لطفا درست کنید تا شما را دعا کنیم .
    با تشکر سید مهدی

  10. با سلام منظور شما از بالای صفحات در جمله زیر که در فصل ششم برای ساخت یک منوی نویگیشن توضیح دادید چیست؟ اگر ممکن است برایم شرح دهید.متشکرم
    “حالا کد زیر را در بالای همه صفحات بعد از تگ div با آی دی header اضافه نمایید . به طور مثال برای صفحه index”

  11. سلام ببخشید من یه سوال دیگه داشتم سه صفحه رو به هم لینک دادم ولی وقتی میخوام از یک صفحه برم یک صفحه دیگه پیغام میده صفحه پیدا نشد.چرا؟یه سوال دیگه جواب این سوالا رو کجا ببینیم؟ ممنون

  12. سلام و تشکر از مطالب مفیدتون.
    یک سوال داشتم بعد اینکه کد رو ذخیره کردیم و یک صفحه ایجاد شد چطور میتونیم دوباره صفحه رو اصلاح کنیم البته گفتین با notepad ولی من نتونستم با این بازش کنم میشه بیشتر توضیح بدین.ممنون

  13. با سلام با تشکر- این قسمت رو یکم ساده تر توضیح بدید >>>
    محتوای 3 صفحه فوق یکسان است و می بایست محتوای صفحات را ویرایش کنید تا با هم یکی نباشد برای این کار صفحات دوم وسوم را با ابزار هایی که توضیح داده شده است مثل NotePad باز کنید و تایتل و محتوای هر صفحه را نسبت به نام آن تغییر دهید . به طور مثال عبارت contact us را برای تگ تایتل در صفحه contact.html انتخب نمایید.

  14. این قسمت رو یکم ساده تر توضیح بدیدرا می زنید حالا 3 فایل مشابه دارید که می بایست 2 تای کپی شده را تغییر نام دهیم برای همین روی آنها کلیک راست ماوس را فشار می دهیم و گزینه یrename را می زنیم تا بتوانیم نام دلخواه را به آن ها بدهیم. یکی را contact.html و دیگری را about.html نام گذاری می کنیم .
    محتوای 3 صفحه فوق یکسان است و می بایست محتوای صفحات را ویرایش کنید تا با هم یکی نباشد برای این کار صفحات دوم وسوم را با ابزار هایی که توضیح داده شده است مثل NotePad باز کنید و تایتل و محتوای هر صفحه را نسبت به نام آن تغییر دهید . به طور مثال عبارت contact us را برای تگ تایتل در صفحه contact.html انتخب نمایید.

  15. برای سوالی که پرسیدید:”چرا صفحاتی که لینک شده است پسوند ندارند؟” میشه جواب رو بگید تا من هم بفهمم چرا…
    ممنون

  16. سلام.من با شما تا بخش 6 پیش رفتم و بسیار عالی و خوشحال کننده بود،ولی تصاویرم در سایت باز نمی شوند ، لطفا راهنمایی کنید.با تشکر فراوان از لطف و ذوق شما…

    • با سلام منظور شما از بالای صفحات در جمله زیر که در فصل ششم برای ساخت یک منوی نویگیشن توضیح دادید چیست؟ اگر ممکن است برایم شرح دهید.متشکرم
      “حالا کد زیر را در بالای همه صفحات بعد از تگ div با آی دی header اضافه نمایید . به طور مثال برای صفحه index”

  17. سلام
    ممنون از آموزش خوبتون. من 2 تا مشکل دارم
    1- عکس را در فولدر فایل html قرار دادم ولی نمایش نمی دهد!
    2- تمام موارد مربوط به لینک کردن صفحات را انجام دادم ولی روی صفحات نمی رود و پیغام not found می دهد. هر کدام از صفحه ها به تنهایی باز می شود.
    لطفا راهنمایی کنید چطور این مشکل را برطرف کنم.

  18. سلام
    متأسفانه این مرحله رو هر چند باری که انجام می دم صفحه ی about va contact رو باز نمی کنه و خطا میده ضمن اینکه توی اسمش دوتا html نخورده
    چیکار باید بکنم؟

  19. سلام. خسته نباشید
    من هم این مشکل رو دارم که با کلیک روی لینک، وارد صفحه جدید نمیشه 🙁 اسم فایل ها مو هم چک کردم.دیگه مشکل از چی میتونه باشه؟ میشه لطفا راهنماییم کنید؟

  20. سلام استاد … از اینکه وقت گذاشتین و بصورت تخصصی نحوه طراحی سایت رو یاد میدین نهایت تشکر را دارم … ولی اگه ممکنه بصورت کاملا کاربردی و ساده .ونه بصورت بیسیک و برنامه نویسی امزش بدین … البته اگه ممکنه …تشکر از سایت خوبت

  21. ُسلام بهزاد جان اول از همه ممنون که انقدر زحمت میکشی.
    اما یه سوال تو این لینک صفحات به مشکل خوردم حتی برای اطمینان بیشتر کد های خودم گذاشتم اما باز file not found lمیده.
    مشکل کجاست؟

  22. با سلام و تشکر از شما . من طبق دستور شما برای ارتباط بین صفحات عمل کردم اما بعد از کلیک روی قسمت های اِبوت یا کانتکت ، صفحه ای را با مضمون
    cannot display the webpage
    نشون میده . ممنون میشم اگر راهنماییم کنید
    با تشکر

  23. قبل از هر چیز از مطالب خوب و مفیدتان تشکر می کنم.
    لینک کردن صفحات به هم را با روشی که گفتید انجام دادم، ولی نشد.به صفحات می رود ولی error دارد.پس یک جای کار مشکل دارد.ممکن است راهنمایی کنید؟
    متشکرم

  24. در تگ اسکریپت در تگ هد
    function goBack()
    {
    window.history.back()
    }
    این کد رو هم روی دکمه خود اضافه کنید
    onclick=”goBack()”
    البته بهتر است که از کد فوق استفاده نشود و لینک باشد به آن آدرس مورد نظر

  25. سلام
    اگه بخوایم یه گزینه رو لینک کنیم به اسم “عقب” که ما رو مثلا از صفحه 2 برگردونه به صفحه اول از چه کدی باید استفاده کنیم؟

  26. سلام
    من در هر 3 صفحه لینک تماس با ما و درباره را میبینم اما نمیتوانم با کلیک بر روی لینک ها به صفخه مورد نظرم برم . با اینکه هر سه صفحه را در یک پوشه ذخیره کردم.مشکلب من کجاست؟
    با تشکر

  27. با سلام
    ممنون از حمایتتون. اول کار با نودپد کار می کنیم و در آینده از نرم افزارهای مختلفی استفاده می کنیم.
    دقت کنید فایل ها باید به صورت مجزا ذخیره بشوند
    صفحه اصلی به صورت
    .html
    صفحات سی اس اس به صورت
    .css
    به جلسه سوم دقت نمایید

  28. سلام آقای بهزاد.
    واقعا بابت این همه لطف ازتون سپاسگزارم و باید بگم شما بسیار معلم خوبی هستین.من هیچ چیزی از طراحی وب نمیدونستم اما شما با توضیحات خوبی که دادین تونستم به سادگی قضیه پی ببرم و به راحتی تمام، یه وب سایت بسازم.اما متاسفانه به چندتا سوال گنگ برخوردم.اینکه یک طراح وب باید خودش بتونه این کدها رو بنویسه؟و اینکه کدها باید به صورت جدا گانه در not pad نوشته و ذخیره بشن ویا نه همه کدها تو یه نت پد قرار میگیرن؟اگه تو یه نت پد باشن طرز ذخیره چطوری و با چه پسوندی هستش؟ممنون از زحمات شما

  29. تا اینجا واقعا از 6 فصلی ک خوندم راضیم
    کار با ارزشی میکنید
    برای ادامه فصل ها هم اگر ممکنه pdf بدید لطف میکنید
    تو ورد کپی کردم ک pdf بزنم بدجور بهم ریخت
    تو فیسبوک قرار بدید حتما

  30. سلام خسته نباشی علی عزيز
    واقعاً اين مطالب که آموزش ميدید خيلی سختن يا مغز من گنجايشش رو نداره خواهشن ميشه بگيد اين مطالب تخصصين يا واسه هر قشر و رشته تحصيلی ميتونه قابل درک باشه!؟

  31. سلام
    خيلي خيلي ممنون بابت آموزشتون
    خيلي روشن و بدرد بخور بود
    بي صبرانه منتظر ادامه آموزش هستيم
    كي ادامش ميدين؟

  32. خیلی عالیست . خواهش میکنم ادامه بدید بی صبرانه منتظر هستم . راستی به چه شکل میتوان به زبان فارسی در سایت طراحی شده تایپ کرد ؟

  33. سلام دوست خوبم ممنون از آموزشتون، چند وقت بود که می خواستم یادگیری طراحی رو شروع کنم حالا امیدوارم با آموزش شما بتونم موفق بشم

  34. سلام
    بهترین آموزشی هست که در وب در این مورد به زیان فارسی دیدم. حتما در آخر کار اون رو در یک فایل منتشر کنید. موفق باشید و حتما تا آخر ادامه بدید چون ما دنبال می کنیم.

  35. سلام دوست عزیز خواهش میکنم آموزش ها رو زود به زود بزار و در آخر که کتاب تموم شد همه رو توی یک پی دی اف بزار و برای دانلود قرار بده-آموزش هات هم خیلی کامل و کاربردی هست امیدوارم موفق بشی

ارسال یک پاسخ