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

1
دوره آموزشی رایگان طراحی سایت
دوره آموزشی رایگان طراحی سایت

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

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

خوب بریم سراغ جلسه ششم ، در این جلسه با ساختار وبسایت ها آشنا خواهیم شد ، در ابتدا با تگ div آشنا خواهیم شد و بطور مفصل از ساختار یک سایت با تگ div کار خواهیم کرد. در جلسات گذشته دوره آموزشی رایگان و آنلاین سایت با تگ های html  ،  body  ، p   وh آشنا شدیم ، تگ P برای پاراگراف و تگ h برای هدر استفاده شد . تگ div یکی از پرکاربرد ترین تگ ها در صفحات وبسایت است ، این تگ با همراهی یک تگ Span در اغلب صفحات اینترنتی مورد استفاده قرار میگیرد.

معمولا سایر تگ از جمله  a  ،  p   ، h1 ، img در داخل تگ div استفاده می شود ، تگ div یک تگ بلاک است ، در این تگ به هیچ وجه از استایل های margin  و padding استفاده نمیکنیم ، و برای این کار از استایل هایی که درداخل css قالب قرار می دهیم استفاده می کنیم. margin  و padding در حقیقت دستور دادن فاصله بین اجرا از جمله تصویر و مطالب است ، بطور مثال برای اینکه فاصله ای بین تصویر و متن ایجاد کنیم از این تگ ها در css استفاده می کنیم. در حلسات آینده مطالب بیشتری در این مورد مطرح خواهد شد .

به مثال زیر توجه کنید:

برای دانلود کد ها کلیک کنید.
برای دانلود کد ها کلیک کنید.

و نتیجه ای که در خروجی در مرورگر مشاهده خواهید کرد :

design web
design web

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

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

design web
design web

در مثال و تصویر بالا صفحه به قسمت های متفاوتی تقسیم شده است بالا برای بنر ، سمت راست برای منو ها و سمت چپ برای قسمت اصلی سایت در نظر گرفته شده. توجه کنید ما داخل تگ div می توانیم تمامی عناصر مانند p ، h1 ، ul ، a ، img را قرار دهیم ولی امکان قرار دادن تگ div داخل p وجود ندارد .

برای درک بهتر موضوع توجه شما رو به مثال زیر جلب میکنم :

در این مثال ما صفحه اینترنتی مون روبه دو قسمت header و content body تقسیم کرده ایم . در قسمت header از دو تگ h1 و p  و در قسمت body content از تگ های بسیار زیادی استفاده کرده ایم . کدهای استفاده شده و نتیجه خروجی رو در تصویر زیر مشاهده کنید:

برای دانلود کد ها رو تصویر کلیک کنید.
برای دانلود کد ها رو تصویر کلیک کنید.
طراحی سایت
طراحی سایت

در مثال بالا علاوه بر تگ div از attribute و تگ id هم استفاده شده است ، که در ادامه توضیح داده خواهد شد .

آشنایی با  id و دستور استفاده از آن:

از id برای تفکیک گروه های بزرگ مانند دو مثال قبل استفاده میکنیم .

یک نام id را تنها یکبار میتوانیم در صفحه استفاده بکنیم.

id یک attribute است و header یک value و دستور استفاده از آنها بصورت : attribute=”value” است.
در هنگام استفاده از attribute  باید توجه کنیم که نام attribute باید با حروف کوچک باشد مانند id , class و غیره و value آن داخل “” باید قرار گیرد.

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

شما می توانید جذاب ترین اخبار و مقالات دنیای تکنولوژی را در کانال تلگرام زوم تک دنبال کنید. برای عضویت در این کانال، اینجا کلیک کنید.

1 نظر

ارسال نظر

Time limit is exhausted. Please reload CAPTCHA.