مشاوره رایگان
دریافت لینک های دانلود
دریافت پستی درب منزل
مبلغ کل:
تومان
جهت دریافت کد تخفیف به کانال تلگرام مراجعه و یا با پشتیبان آنلاین هماهنگ نمایید
آموزش Layout یا لایه بندی در HTML به صورت کامل
برای اینکه کاربران، نگاهی بهتر به وب سایت شما داشته باشند، Layoutیا طرح بندی صفحات وب، نقش بسیار مهمی را ایفا می کنند. برای طراحیِ طرحِ یک وب سایت با نگاه و احساس عالی، نیاز به زمانِ قابل توجهی، وقت داریم.
امروزه همه وب سایت های مدرن از CSS و فریمورک های جاوا اسکریپت استفاده می کنند تا به وب سایت های واکنشگرا (responsive) و پویا (dynamic) تبدیل شوند. اما شما می توانید حتی با استفاده از جداول ساده HTML یا به وسیله ی تقسیم بندی برچسب ها و ترکیب آنها با دیگر تگ هایِ قالب، یک طرح خوب داشته باشید. در این مقاله قصد داریم با بیان چند مثال، نحوه ایجاد یک طرح ساده، اما کارا را برای صفحه وب، آموزش دهیم. در این آموزش با استفاده از HTML خالص و ویژگی های آن، این هدف را محقق می کنیم.
چیدمان HTML - استفاده از جداول
ساده ترین و محبوب ترین روش ایجاد Layout یا قالب، استفاده از برچسب <table> است. این جداول در ستون ها و ردیف هایی مرتب شده اند، بنابراین می توانید از این ردیف ها و ستون ها به هر نحوی که می خواهید استفاده کنید.
مثال
به عنوان مثال، مثال چیدمان HTML زیر با استفاده از یک جدول با 3 ردیف و 2 ستون بدست می آید -
<!DOCTYPE html>
<html>
<head>
<title>HTML Layout using Tables</title>
</head>
<body>
<table width = "100%" border = "0">
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<h1>This is Web Page Main title</h1>
</td>
</tr>
<tr valign = "top">
<td bgcolor = "#aaa" width = "50">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
<td bgcolor = "#eee" width = "100" height = "200">
Technical and Managerial Tutorials
</td>
</tr>
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<center>
Copyright © 2007 Tutorialspoint.com
</center>
</td>
</tr>
</table>
</body>
</html>
کد فوق نتیجه زیر را تولید می کند -
طراحی قالب HTML – با استفاده از جداول
شما می توانید صفحه وب خود را به گونه ای طراحی کنید که بتوانید از یک طرح در چندین صفحه استفاده کنید ولی در عین حال این صفحات محتوای متفاوتی داشته باشند. شما می توانید مطالب مربوط به هر صفحه را در ستون وسط قرار دهید و از ستون سمت چپ برای استفاده از منو استفاده کنید و از ستون سمت راست برای تبلیغ یا موارد دیگر استفاده کنید.
مثال
در مثال زیر یک جدول با سه ستون را مشاهده می کنیم –
<!DOCTYPE html>
<html>
<head>
<title>Three Column HTML Layout</title>
</head>
<body>
<table width = "100%" border = "0">
<tr valign = "top">
<td bgcolor = "#aaa" width = "20%">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
<td bgcolor = "#b5dcb3" height = "200" width = "60%">
Technical and Managerial Tutorials
</td>
<td bgcolor = "#aaa" width = "20%">
<b>Right Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
</tr>
<table>
</body>
</html>
کد فوق نتیجه زیر را تولید می کند -
طراحی قالب HTML - با استفاده از DIV، SPAN
عنصر <div> یک عنصر block level است که برای گروه بندی عناصر HTML استفاده می شود. در حالی که برچسب <div> یک عنصر block level است، عنصر < <spanبرای گروه بندی عناصر در سطح درون خطی یا inline level استفاده می شود.
اگر چه ما می توانیم طرح های بسیار زیبایی را با استفاده از جداول HTML بسازیم، اما جداول واقعا به عنوان یک ابزار طراحی قالب، طراحی نشده اند، بلکه آنها بیشتر برای ارائه داده های به صورت جدول، مناسب هستند.
توجه داشته باشید – در این مثال از Cascading Style Sheet (CSS) استفاده می شود، بنابراین قبل از درک این مثال شما باید درک مختصری در مورد چگونگی کارکرد CSS داشته باشید.
مثال
مثال قبلی را در نظر بگیرید، در اینجا سعی خواهیم کرد تا با استفاده از تگ <div> همراه با CSS همان نتیجه را به دست آوریم. ( هرچیزی که با استفاده از برچسب <table> در مثال قبلی به دست آورده اید)
<!DOCTYPE html>
<html>
<head>
<title>HTML Layouts using DIV, SPAN</title>
</head>
<body>
<div style = "width:100%">
<div style = "background-color:#b5dcb3; width:100%">
<h1>This is Web Page Main title</h1>
</div>
<div style = "background-color:#aaa; height:200px; width:100px; float:left;">
<div><b>Main Menu</b></div>
HTML<br />
PHP<br />
PERL...
</div>
<div style = "background-color:#eee; height:200px; width:350px; float:left;" >
<p>Technical and Managerial Tutorials</p>
</div>
<div style = "background-color:#aaa; height:200px; width:100px; float:right;">
<div><b>Right Menu</b></div>
HTML<br />
PHP<br />
PERL...
</div>
<div style = "background-color:#b5dcb3; clear:both">
<center>
Copyright © 2007 Tutorialspoint.com
</center>
</div>
</div>
</body>
</html>
کد فوق نتیجه زیر را تولید می کند -
فصلِ:
5
,
تعداد قسمت ها:
177
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML
آموزش HTML5
این فصل در یک نگاه:
در این فصل صفحات قالب فروشگاهی را بطور کامل واکنشگرا می کنیم.…
HTML مخفف عبارت Hypertext Markup Language است. این زبان در واقع یک نوع زبان نشانه‌گذاری استاندارد برای ایجاد صفحات وب و وب اپلیکیشن‌ها محسوب می‌شود. در واقع HTML را عنصر کلیدی صفحات وب می…
فصلِ:
5
,
تعداد قسمت ها:
77
,
سطح:
متوسط
این فصل در یک نگاه:
ساخت منوی مدیریت سایت،ایجاد بخش دسته بندی ها ، جدول نمایش دسته ها و ایجاد دسته جدید،ایجاد بخش ویژگی های یک دسته،ایجاد وی…
این مجموعه با تلفیقی از فریمورک bootstrap و کد های html و css ارائه گردیده و پیش نیاز این آموزش ، دوره دیجی کالای آقای مهندس بلاغی است چون این پروژه در قالب mvc پیاده گردیده و با توجه به ا…
فصلِ:
11
,
تعداد قسمت ها:
162
,
سطح:
صفر تا صد
این فصل در یک نگاه:
در این فصل(فصل یازدهم مجموعه)،به طراحی CMS (سیستم مدیریت محتوا)اختصاصی فروشگاه می پردازیم.هدف از طراحی این بخش،آنست که م…
در این مجموعه آموزشی قصد داریم از صفر تا صد طراحی یک فروشگاه اینترنتی رو به صورت کامل آموزش بدهیم.این فروشگاه شامل تمامی بخش های مورد نیاز یک فروشگاه اینترنتی است. هدف از این مجموعه،آموزش…
فصلِ:
4
,
تعداد قسمت ها:
240
,
سطح:
صفر تا صد
موضوعات:
آموزش PHP
آموزش Bootstrap
آموزش CSS
آموزش JQUERY
آموزش HTML
آموزش PHP MVC
آموزش Ajax
آموزش HTML5
این فصل در یک نگاه:
طراحی پنل مدیریت(دسته بندی)- دسته بندی یا category - نمایش دسته های فرعی در view با ورود به یکی از دسته های اصلی و آشن…
توضیحات کلی مجموعه: این مجموعه توسط فریمورک محبوب و دوست داشتنی bootstrap و به صورت تضمینی و صفر تا صد جهت یادگیری کارآموزان عزیز ارائه گردیده و دوستانی که این دوره را به طور کامل و دقیق…
فصلِ:
4
,
تعداد قسمت ها:
368
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش PHP
آموزش PHP MVC
آموزش Ajax
آموزش HTML
آموزش ساخت فروشگاه اینترنتی
آموزش Bootstrap
آموزش Laravel
این فصل در یک نگاه:
مباحث تکمیلی فریم ورک لاراول…
فصل اول :آموزش مقدماتی فریم ورک لاراول معرفی فریم ورک لاراول و پیشنیازهای انجام کار انجام کانفیگ های اولیه برای نصب و راه اندازی فریم ورک معرفی روش های نصب پروژه لاراولی از طریق سایت گی…
فصلِ:
1
,
تعداد قسمت ها:
155
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش JQUERY
آموزش PHP
آموزش PHP MVC
آموزش Ajax
آموزش HTML
آموزش NodeJs
آموزش Bootstrap
آموزش Laravel
آموزش Symphony
این فصل در یک نگاه:
مباحث مقدماتی فریم ورک react.js…
توضیحات کلی مجموعه: فصل اول : آشنایی با مباحث مقدماتی فریم ورک react.js نصب و راه اندازی node.js و کلیه پیش نیازهای لازم نصب فریم ورک react روی لوکال و انجام تست های لازم آغاز آشنایی …
فصلِ:
1
,
تعداد قسمت ها:
15
,
سطح:
متوسط
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش JQUERY
آموزش PHP
آموزش ASP.NET
آموزش ASP.NET MVC
آموزش PHP MVC
آموزش Phyton
آموزش سئو
آموزش ساخت فروشگاه اینترنتی
آموزش HTML
آموزش ایمیل مارکتینگ
آموزش وردپرس
آموزش فروشگاه ساز اپن کارت
آموزش جوملا
آموزش Virtual Freer
آموزش WHMCS
این فصل در یک نگاه:
رشد و درآمدزایی یک وب سایت یا کسب و کار اینترنتی کاملا به ذوق و مهارت وب مستر یا همان مدیر اصلی وب سایت گره خورده و متاس…
اصول مدیریت وب سایت برای وب مستر شدن برای موفقیت یک وب سایت لازم الاجراست. زیرا شما دوست دارید وب سایت خود را به کارخانه پولسازی تبدیل کنید. این واقعیت رویا نیست. هرکس این اصول را بداند به …
