1. انجمن های فارس پاتوق
    مطابق با قوانین جمهوری اسلامی ایران می باشد.
    رد اعلامیه

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

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

  1. salavati1

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

    تاریخ عضویت:
    ‏15 آگوست 2016
    ارسال ها:
    1,904
    تشکر شده:
    229
    جنسیت:
    زن
    با قسمت ششم آموزش طراحی وب سایت از پایه در خدمت شما هستیم . در این قسمت یاد خواهید گرفت که چگونه چند صفحه را در کنار هم قرار دهیم و بین آن ها حرکت کنیم.
    آیا ساختن یک صفحه کافی است؟در قسمت های گذشته ساخت یک صفحه از وب سایت را آموختیم و حالا می خواهیم چند صفحه را در کنار هم داشته باشیم و بین آن ها با لینک دهی حرکت کنیم . در واقع این یک 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
    دل آرا از این پست تشکر کرده است.
  1. کانال تلگرام

    اطلاعیه ها و اخبارهای فارس پاتوق ، مسابقات و جوایز
  2. گروه تلگرام

    کتاب مذهبی ، کتاب های درسی ، کتاب های علمی ، کتاب رمان
  3. برنامه تلگرام

    اپراتور ، نرم افزار های ارتباطی
  4. سرگرمی و تفریح تلگرام

    دانستنیهای جالب ، مرکز تخصصی ترول ، انواع فال ها و طالع بینی ها ، مطالب طنز آمیز ، اس ام اس و جوک
  5. آموزش تلگرام

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

    مداحی ایام فاطمیه ، مداحی ماه محرم ، موزیک های ایرانی ، موزیک های شاد ، آهنگ های خارجی ، آهنگ های پیشواز ایرانسل ، آهنگ های پیشواز همراه اول ، آهنگ های رومانتیک ، مداحی ، آهنگ های سنتی
  7. اخبار تلگرام

    اخبار حوادث ، اخبار جهان ، اخبار ورزشی ، اخبار پزشکی ، اخبار سیاسی - اقتصادی ، اخبار فرهنگی - هنری ، اخبار علمی
  8. مد و زیبایی تلگرام

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

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

    اپراتور همراه اول ، اپراتور ایرانسل ، اپراتور رایتل
  11. تبلیغات تلگرام و اینستاگرام

    آگهی های استخدام دولتی ، آگهی های استخدام غیر دولتی ، سوالات و پاسخ های آزمون های استخدامی
  12. کانالهای ادبی تلگرام

    تاریخ ، شعر و ادبیات ، نامه نگاری و انواع نامه ها
  13. گروه چت تلگرام

    ابزار های وبلاگ ، سئو و بهینه سازی وب سایت ، سیستم های مدیریت محتوا ، قالب های وبلاگ ، ابزار های وب سایت ، قالب های وب سایت ، معرفی وبلاگ و وب سایت های مفید ، کسب و کار در اینترنت ، کسب درآمد بدون اینترنت
  14. بهترین کانال های تلگرام

    هوا و فضا ، دانش و فن آوری در پزشکی ، دانش و فناوری در کامپیوتر ، دانش و فناوری در موبایل ، دانش و فناوری در وب سایت ها ، جنگ افزار ، تکنولوژی های روز
  15. نرم افزار اینستاگرام

    سیستم عامل ها ، لپ تاپ و تبلت ، نرم افزار ها ، سخت افزار ها ، بازی های کامپیوتری
  16. کانال پزشکی و سلامت تلگرام

    روانشناسی ، تغذیه ، بهداشت ، بیماری ها و روش درمان
  17. بهترین پیج اینستاگرام

    اخبار ورزشی ، معرفی ورزش ها و تیم ها ، شخصیت های ورزشی
  18. عکس اینستاگرام

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

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

    رشته های فنی و مهندسی ، رشته های علوم تجربی ، رشته های علوم پایه و انسانی ، رشته های هنر ، معرفی رشته های دانشگاهی ، معرفی دانشگاه های ایران ، رشته های پزشکی ، رشته های زبان انگلیسی
  21. کانال مذهبی تلگرام

    اهل بیت و علما ، احکام ، مولتی مدیای مذهبی
  22. کانال خانواده تلگرام

    خانواده ، هنر در خانه
  23. کانال آشپزی تلگرام

    انواع شیرینی ، انواع دسر ، انواع غذا ها و طرز تهیه آن ها ، خورش ها ، سوپ و سالاد ، ساندویچ و پیتزا ، سس و ترشی
  24. کانال گردش و گردشگری تلگرام

    معرفی مکان های زیارتی ، معرفی مکان های تفریحی ، معرفی مکان های شگفت انگیز ، معرفی شهرها و کشورها
  25. سایر موضوعات تلگرام

    اخبار و مطالب گوناگون خبری ، معما ها و چیستان ها ، اخبار گوناگون اینترنتی ، صندلی داغ ، گفتگو با کاربران ، بازارچه خرید و فروش ، زباله دان
  26. کانال تست روانشناسی تلگرام

    تست هوش
  27. کانال روانشناسی ازدواج تلگرام

    نکات قبل از ازدواج ، نکات بعد از ازدواج
  28. کانال مشاوره جنسی تلگرام

    راهنمایی علمی جنسی
XenForo Add-ons by Brivium ™ © 2012-2013 Brivium LLC.