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

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

شروع موضوع توسط salavati1 در ‏7 اکتبر 2016 در انجمن مقالات عمومي

  1. salavati1

    salavati1 کاربر تایید شده

    تاریخ عضویت:
    ‏15 آگوست 2016
    ارسال ها:
    678
    تشکر شده:
    158
    جنسیت:
    زن
    با قسمت ششم آموزش طراحی وب سایت از پایه در خدمت شما هستیم . در این قسمت یاد خواهید گرفت که چگونه چند صفحه را در کنار هم قرار دهیم و بین آن ها حرکت کنیم.
    آیا ساختن یک صفحه کافی است؟در قسمت های گذشته ساخت یک صفحه از وب سایت را آموختیم و حالا می خواهیم چند صفحه را در کنار هم داشته باشیم و بین آن ها با لینک دهی حرکت کنیم . در واقع این یک 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 صفحه خواهید داشت که به راحتی قابلیت حرکت بین یکدیگر را دارند.
    در جلسه بعد در باره تگ های blockquote strong , em , توضیحات بیشتری ارائه خواهم داد و سپس نوبت اضافه کردن استایل(ظاهر) به صفحه در طراحی وب سایت است .
     

    موضوعات مشابه

    Last edited by a moderator: ‏7 اکتبر 2016
    دل آرا از این پست تشکر کرده است.
XenForo Add-ons by Brivium ™ © 2012-2013 Brivium LLC.