دوره آموزشی رایگان و آنلاین طراحی سایت بخش هفتم

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

در این جلسه با تگ های تو در تو آشنا خواهیم شد و سعی خواهیم کرد ، صفحات بیشتری رو برای سایتمون طراحی کنید. در مطالب گذشته به این نکته اشاره شد که تگ های p ، ul و … در داخل یک تگ div قرار میگیرد ، گاهی اوقات خود تگ div هم در داخل تگ div دیگر قرار میگیرد به این حالت تگ تو در تو میگویند ، در برخی مواقع ما مجبوریم از تگ های تو در تو استفاده نماییم ، برای آشنایی با تگ های تودرتو به نمونه زیر توجه کنید :

مقداری به تصویر بالا توجه کنید ؛ همانطور که مشاهده می کنید ردیف دوم و سوم مقداری جلوتر از ردیف اول قرار گرفته ، یعنی تگ ها والد قبل از تگ ها داخلی قرار گرفته ، معمولا در برنامه نویسی همیشه سعی کنید تگ بزرگ div یا هر تگ دیگری که تگ های دیگر در داخل آن قرار گرفته قبل از تگ های داخلی قرار گیرد تا تگ بزرگ تر برای بررسی کننده ی کدها مشخص شود ، تگ های داخلی رو کمی با فاصله از ابتدای خط قرار بدید. همان طوری که می بینید تگ div  با id  مشخص nested1 کمی با فاصله بیشتر از چپ نسبت به والد خود یعنی تگ div با  id مشخص outer باز شده است.

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

نکته : استفاده از تگ های تودرتوی بی مورد از ارزش و استاندارد صفحات سایت می کاهد و هم چنین هر تگی برای منظوری ساخته شده است مثلا  p  برای متون بلند و پاراگراف ها  پس سعی کنید از هر تگی در جایگاه خود استفاده نمایید.

ساختن صفحات بیشتر برای سایت

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

برای شروع صفحه ای با نام index.html با کدهای زیر بسازید:

نحوه ساخت و تگهای استفاده شده در مثال فوق قبلا توضیح داده شده است . (آدرس تصویری را که می خواهید در صفحه اینترنتی باشه رو در تگ  img پر کنید) . از کدهایی که دانلود کردید کپی بگیرید و دو فایل متنی دیگر در Note Pad ، با نام های  contact.html و  about.html با همان کدهای بالا ایجاد و ذخیره نمایید.

محتوای صفحات ایجاد شده یکی است و باید محتوای صفحات را ویرایش کنیم تا با هم یکسان نباشد ابتدا صفحات دوم وسوم( با نام های contact.html و  about.html ) را با ابزار هایی که توضیح داده شده است مثل NotePad باز کنید و تایتل و محتوای هر صفحه را نسبت به نام آن عوض کنید . به طور مثال عبارت contact us را برای تگ تایتل در صفحه contact.html انتخاب نمایید. بعد از تغییرات در 2 صفحه موجود آن ها را save کنید . ( روش save کردن در جلسات گذشته توضیح داده شده است ، همانطور که یادتون هست این همه ی سه تا کد ذخیره شده باید در یک پوشه که قبلا در یک محل مورد نظر در کامپیوتر ذخیره کردید قرار بگیره!)

لینک کردن صفحات ایجاد شده !

لطفا صفحه index.html را در مرور گرتان باز کنید . حالا به صفحه about.html بروید ! آیا تونستید برید؟ نه ؛ خوب هیچ ارتباطی بین صفحه index.html  و about.html وجود نداره حالا این وظیفه ماست که بین این دو ارتباط یا لینک بگذاریم. برای این کار باید از link یا anchor استفاده بکنیم. به کد زیر توجه کنید:

[box type=”note” align=”alignleft” ]<a href=”filename.html”>Link text here</a>[/box]

ساختار دستور بالا:

href : یک attribute و بیان کننده آدرسی است که قراره به آنجا لینک بشه
filename.html: نام صفحه ایست که قراره به آنجا لینک شود
Link text here: چیزی که در صفحه html دیده می شود و نام لینک مورد نظر است

فکر کنم همه چیز گویا است و نیازی به توضیح اضافی نیست چرا که در ادامه در مثال ها با این مورد بیشتر کار خواهیم کرد.

حالا برای آشنایی بیشتر با لینک دهی باید بین صفحات یک منو برای سایت ایجاد کنیم . دقت نمایید نحوه ساخت منوی سایت (یا بقولی navigation) یکی از مهمترین وظایف ما است و ساختاری که در ادامه توضیح داده می شود ساختاری مناسب و استاندارد برای منوی سایت است. لطفا به تصویر زیر توجه کنید در تصویر زیر نحوه کدهای مخصوص ساخت یک منو درج شده !

حالا کد های بالا رو در صفحه index.html  ، contact.html و  about.html ذخیره شده اضافه کنید محل کدهای اضافه شده بدین صورت است در بالای همه صفحات بعد از تگ div  با آی دی header  اضافه نمایید . به طور مثال برای صفحه index :

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

مطالب جلسه هفتم هم همینجا به اتمام می رسه ، اما چند پیشنهاد دارم برای بهبود روند آموزشیمون دوستان عزیز تا جلسه آینده که تقریبا 4 روز دیگر خواهد بود ، صفحاتی رو که امروز یاد گرفتید متن های داخل صفحات رو به همراه منو ها به زبان فارسی ذخیره کنید و 3 فایل متنی رو به نام های index.html  ، contact.html و  about.html  در Note Pad ذخیره کنید و فایل های ذخیره شده رو در سایت fileup.ir آپلود کنید و آدرس فایل ها رو در قسمت نظرات سایت با توضیحاتی درباره متن صفحاتتون درج کنید. فکر کنم با این کار آموخته هاتون تا به امروز مورد سنجش قرار میگیره راستی به نفرات برتر جوایزی هم تعلق خواهد گرفت برای ارسال تمرینات تا روز پنجشنبه یعنی !