آموزش غیر از ویبولتینآموزش های عمومیانجمنبخش عمومی و مفید سایتعمومی

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

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

آموزش طراحی وب سایت از پایه – قسمت پنجم
با سلام خدمت خوانندگان وب سایت عصر نوشتن با قسمت پنجم آموزش طراحی وب سایت از پایه در خدمت شما هستیم . در این قسمت، برای تهیه یک سایت ساختاری را تعریف می کنیم که یک ساختار کلیدی در تهیه وب سایت های مدرن می باشد و با شناخت این ساختار می توانید در تهیه تمامی وب سایت ها توانا باشید.
اضافه کردن یک ساختار به نام div:تا این لحظه ساختار پایه ای وب سایت و تگ های html و body و p برای پاراگراف وh برای هدر ها را شناختیم و با آن ها کار کردیم و در این قسمت یک ساختار طلائی به نام div را معرفی می نماییم.
div یک تگ بلاک است و به همراه تگ span بیشترین استفاده در صفحات استاندارد وب سایت را دارد .
این تگ معمولا برای قرار دادن گروهی از عناصر داخل آن مورد استفاده قرار می گیرد و داخل آن می توان از عناصر دیگر مانند h1 , img , a , p و غیره استفاده کرد.
این تگ هیچ استایلی از جمله margin و padding ندارد و برای شکل دادن به ظاهر آن از دستورات css استفاده می کنیم.
به مثال زیر دقت نمایید :

This is a paragraph.

This is another paragraph.

This is yet another paragraph.

And just one more paragraph.

This is a div.

The content of each div appears on a new line.

But unlike paragraphs, there is no additional padding.

A div is a generic block-level container.

و خروجی:

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

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

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

BubbleUnder.com

Diving club for the south-west UK – let’s make a splash!


در این مثال علاوه بر توضیح تقسیم بندی سایت با تگ div ، استفاده از attribute بسیار مهم id هم توضیح داده می شود .
Id و آن:
• معمولا از id برای تفکیک گروه های بزرگ مانند 2 مثال قبل استفاده می شود
• یک نام id فقط یک بار در صفحه قابل استفاده است
• Id یک attribute است و header یک value برای آن طبق این قانون : attribute=”value”
• نام attribute باید با حروف کوچک باشد مانند id , class و غیره و value آن داخل “”

تگ های تو در تو (nesting tag) :
در مطالب گذشته گفتیم که در تگ div می تواند تگ های دیگری همچون p , ul و غیره قرار گیرد در حالی که خود تگ div میتواند در داخل تگ div دیگری قرار گیرد که به این نوع تگ های تو در تو گفته می شود .
در بسیاری موارد در طراحی های حرفه ای مجبوریم که از تگ های تو در تو استفاده کنیم و این روش نظم خاصی به کار طراحی شما می بخشد .
کد زیر می تواند شما را بیشتر با تگ های تو در تو آشنا کند :

A paragraph inside the first nested div.

A paragraph inside the second nested div.

در استفاده از تگ های تو در تو باید به قانونی به نام Indenting Markup توجه کرد که شرح می دهد تگ های داخلی را کمی جلوتر از سمت چپ نسبت به والد خود باز کرده و در همان راستا ببندید . همان طوری که می بینید تگ div با id مشخص nested1 کمی با فاصله بیشتر از چپ نسبت به والد خود یعنی تگ div با id مشخص outer باز شده است.
نکته دیگری که می بایست برای خوانایی بیشتر در استفاده از تگ های تو در تو دقت نمایید استفاده از کامنت گذاری است که در قسمت های قبل توضیح داده شد .

تشکر اما فکر نمیکنید بهتر بود به جای دادن این همه تاپیک ، یک تاپیک جامع میزدید؟؟؟

به علت فشردگی و پیچیدگی متن در یک تاپیک خسته کننده هستش بنابر این بهتره هر بخش جدا ارسال بشه

بهتر بود از مدیران هم یک نظر میخواستید.
به نظر من الان اسپمر به حساب میایید. البته این نظر منه.
نظر مدیران مهمه که ان شالله نظرشون رو میگن.
عیب کار شما هم میتونه از یک طرف دیگه این باشه که این تاپیک ها در آینده پشت سر هم قرار نخواهند گرفت . باید تک تک بشینی بگردی ببینی قسمت بعدیش کجاست !!!
اصلا میتونستید کل آموزش رو به صورت PDF و با نام vmizban البته اگه خودتون آموزش ها رو نوشتید طراحی کنید.
( با سلام خدمت خوانندگان وب سایت عصر نوشتن … ) این رو هم ویرایش کنید
به هر حال بیشتر از این نظر نمیدم چون در اون سطح و درجه نیستم.ببخشید اگه زیاده گویی کردم.
موفق باشید

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


(1) آموزش طراحی وب سایت از پایه قسمت اول
آموزش طراحی وب سایت از پایه قسمت اول آموزش طراحی سایت


(2) آموزش طراحی وب سایت از پایه قسمت پنجم
آموزش طراحی وب سایت از پایه قسمت پنجم مجتمع آموزشی زکریا


(3) پنجم - عصرنوشتن
آموزش طراحی وب سایت از پایه - قسمت پنجم - عصرنوشتن writeage


(4) فیلم آموزش پروژه محور طراحی وب با HTML5
فیلم آموزش پروژه محور طراحی وب با HTML5 و CSS3 قسمت 5 - میهن لرن


(5) آموزش طراحی وب - قسمت پنجم
آموزش طراحی وب سایت وردپرس قسمت اول از کانال محمد سینا موثقی نژاد. 2422. ویدیو بعدی طراحی وب سایت از نقطه صفر چگونه یک مصاحبه کاری موفق داشته باشیم از کانال علی علائی. 4421. ویدیو بعدی آموزش طراحی وب - قسمت سوم از کانال


(6) آموزش طراحی وب سایت از پایه - قسمت پنجم
آموزش طراحی وب سایت از پایه - قسمت پنجم با سلام خدمت خوانندگان وب سایت عصر نوشتن با قسمت پنجم آموزش طراحی وب سایت از پایه در خدمت شما هستیم .


(7) آموزش طراحی وب سایت قسمت پنجم
آموزش طراحی وب سایتآموزش طراحی سایتطراحی وبسایتطراحی سایتطراحی وب سایت در این مثال علاوه بر توضیح تقسیم بندی سایت با تگ div استفاده از attribute بسیار مهم id هم توضیح داده می شود .


(8) قسمت دوم دوره طراحی سایت خبری با قالب
قسمت دوم دوره طراحی سایت خبری با قالب بی - اقدامات لازم پس از نصب


(9) آموزش طراحی سایت با html5 و css قسمت پنجم 5 - سایت ویدیو
Vor 2 Tagen آموزش طراحی سایت و وبسایتاموزش طراحی وب سایتآموزش html5 آموزش css طراحی سایت با اچ تی ام ال 5 طراحی سایت با css آموزش طراحی سایت مدرس دوره علی علائی


(10) آموزش طراحی وب سایت از پایه - قسمت دوم - عصرنوشتن writeage
آموزش طراحی وب سایت از پایه قسمت اول. آموزش طراحی سایت از پایه قسمت سوم آموزش طراحی سایت از پایه قسمت چهارم آموزش طراحی سایت از پایه قسمت پنجم آموزش طراحی سایت از پایه قسمت ششم

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

5 × 4 =

دکمه بازگشت به بالا