آموزش طراحی چیدمان دو ستونه با عرض ثابت با نرم DreamWeaver

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

dreamweaver-icon

قرار بر این بود که بعد از پایان آموزش مقدماتی نرم افزار DreamWeaver ، چند آموزش طراحی قالب را با نرم افزار دریم ویور برای شما آموزش بدهم تا با نحوه کارکرد و ابزارهای نرم افزار بیشتر آشنا بشوید . قالبها به صورت عمومی دارای چند نوع چیدمان می باشند . چیدمان دوستونه با عرض ثابت و متغیر . چیدمان یک ستونه با عرض و ثابت متغیر . برای درک بهتر ، به قالب وب سایت شرکت طلوع فن آوران آسا دقت کنید .

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

من هر 4 نوع چیدمان را به صورت کاملا تصویری در 4 درس با نرم افزار DreamWeaver آموزش میدهم . امروز می خواهم چیدمان دو ستونه با عرض ثابت را برای شما با نرم افزار دریم ویور طراحی کنم .

 


1. نرم افزار DreamWeaver را اجرا کنید . یک صفحه HTML و یک صفحه CSS در یک فولدر به نام website1 ایجاد میکنم . (ابتدا باید یک فولدر بر روی دسکتاپ با نام مورد نظر ایجاد کنیم تا بعد از اینکه صفحات ایجاد شد ، هر فایل را در پوشه مورد نظر ذخیره نمائیم )

 

Website1 ASARAYAN1

Website1 ASARAYAN2

2. نام صفحه اصلی را با نام index.html در پوشه اصلی ذخیره میکنم .

Website1 ASARAYAN3

3. یک صفحه CSS ایجاد کرده ، اینبار این صفحه را به نام template.css در فولدر CSS ذخیره میکنم .

Website1 ASARAYAN4

4. بسیار خوب ، شروع میکنم به کد نویسی و هر قسمت را به طور کامل برای شما توضیح میدهم  .

ابتدا باید شکل کلی قالبی که می خواهم طراحی کنم را بدانم  تا نسبت به موقعیت های هر قسمت یک دیویژن در HTML تعریف کنم .

Website1 ASARAYAN5

5. با توجه به تصویری که مشاهده می کنید قالب اصلی تشکیل شده است از یک قسمت کلی به نام container که تمام قسمت های Header / Navigation / Menu / Content / Footer در آن قرار گرفته است . حالا این قسمت ها را به کد صفحه اضافه میکنم .
ابتدا قسمت کد نرم افزار را فعال کرده و دیویژن های زیر را به آن اضافه کنید .
2 موقعیت در قسمت content قرار گرفته است . پس باید هر دو موقعیت راست و متن صفحه اصلی را دریک  چهار چوب به نام content قرار بدهیم تا کد کمتری را بنویسیم

Website1 ASARAYAN6

{code brush:php}
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<link rel='stylesheet' type='text/css' href='css/template.css'>
<title>آموزش طراحی چیدمان یک ستونه با عرض ثابت با نرم DreamWeaver</title>
</head>
<body >
<div id='container'>
<div id='header'></div>
<div id='navigation'></div>
<div id='content'>
<div id='right'></div>
<div id='contentbody'>
</div>
<div id='footer'></div>
</div>
</body>
</html>
{/code}

 

 

6. اگر به قسمت Design برویم فقط یک جدول را مشاهده می کنیم . با توجه به کدهای بالا باید شروع به وارد کردن مشخصات برای هر قسمت بکنیم . مشخصات هر قسمت باید در فایل CSS فراخوانی شود .

وارد فایل template.css شده و کدهای زیر را در ابتدا وارد کنید .
ابتدا تمام تگهای HTML را تایپ میکنم و حاشیه ، فاصله و بوردر را برابر با صفر قرار میدهم . این کدها معروف به کدهای هک CSS می باشند .

Website1 ASARAYAN7

 

{code brush:php}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a,
abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td
{
margin:0;
padding:0;
outline:0;
border:0;
}
{/code}

 

 

7. در مرحله بعدی نوبت میرسه به تعیین فونت کل محتوای صفحه ، اندازه فونت ، چیدمان صفحه که باید از راست به طرف چپ باشد .

کدهای زیر را در فایل CSS وارد میکنم .

Website1 ASARAYAN8

{code brush:php}
body {
direction:rtl;
font-size:1em ;/* font-size 1em = 10px*/
font-family:Tahoma, Geneva, sans-serif;
}
{/code}

 

8. حالا باید تنظیمات سلکتورهایی که در HTML نشانه گذاری کرده ایم را در CSS فراخوانی کرده و یکسری ویژگی به آنها نسبت بدهیم . به طور مثال باید تنظیمات قسمت right را در CSSمشخص کنیم

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

Website1 ASARAYAN9

{code brush:php}
#header{
width:900px ;
height:100px;
background-color:#9f9e9e;
}
{/code}

 

9. نوبت میرسه به قسمت منوی بالای صفحه یا Navigation


ابتدا یک سری لینک در فایل HTML به صفحه اضافه میکنم و بعد از آن تغییرات ظاهری را در فایل CSS مشخص میکنم

Website1 ASARAYAN10

{code brush:php}
<div class='main-menu'>
<ul>
<li><a href='#'>صفحه اصلی</a></li>
<li><a href='#'>فروشگاه</a></li>
<li><a href='#'>درباره ما</a></li>
<li><a href='#'>ارتباط با ما</a></li>
</ul>
</div>
{/code}

 

10 . حالا تنظیمات مربوط به لینک در فایل CSS

Website1 ASARAYAN11

{code brush:php}
#navigation{
background-color:#333;
height:40px;
}
.main-manu ul li {
list-style:none;
float:right;
}
.main-manu ul li a{
display: block;
height:24px;
padding:8px 15px;
color:#fff;
text-decoration: none;
border-left: 1px solid #ccc;
}
.main-manu ul li a:hover {
background:#f9bc03;
color:black;
}
{/code}

 

11. طراحی قسمت راست و محتوای وسط صفحه

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

Website1 ASARAYAN12

{code brush:php}
#right{
float:right;
width:220px;
background-color:#999;
height:200px;
}
#contentbody{
margin-right:220px;
background-color:#CCC;
height:200px;
width:auto;
}
{/codecitation}

 

12. برای طراحی قسمت فوتر هم مثل مراحل قبل ابتدا سلکتور footer را در فایل css فراخوانی و مشخصات ظاهری آن را تغییر میدهم

Website1 ASARAYAN13

کد کلی فایل index.html

{code brush:php}
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>آموزش طراحی چیدمان یک ستونه با عرض ثابت با نرم DreamWeaver</title>
<link rel='stylesheet' type='text/css' href='css/template.css'>
</head>
<body >
<div id='container'>
<div id='header'> هدر بالای صفحه</div>
<div id='navigation'>            
<div>
<ul>
<li><a href='#'>صفحه اصلی</a></li>
<li><a href='#'>فروشگاه</a></li>
<li><a href='#'>درباره ما</a></li>
<li><a href='#'>ارتباط با ما</a></li>
</ul>
</div>
</div>
<div id='content'>
<div id='right'>سمت راست</div>
<div id='contentbody'> محتوای صفحه اصلی</div>
</div>
<div id='footer'>فوتر</div>
</div>
</body>
</html>
{/code}

 


کد صفحه template.css

{code brush:php}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form,
label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin:0;
padding:0;
outline:0;
border:0;
}
body {
direction:rtl;
font-size:1em ;/* font-size 1em = 10px*/
font-family:Tahoma, Geneva, sans-serif;
}
#container{ margin:0 auto; width:900px; height:auto;}
#header{
height:100px;
background-color:#9f9e9e;
}
/**************** Navigation / Mainmenu ************/
#navigation{
background-color:#333;
height:40px;
}
.main-manu ul li {
list-style:none;
float:right;
}
.main-manu ul li a{
display: block;
height:24px;
padding:8px 15px;
color:#fff;
text-decoration: none;
border-left: 1px solid #ccc;
}
.main-manu ul li a:hover {
background:#f9bc03;
color:black;
}    
/**************** End Navigation ******************/
/********CONTENT*********/
#right{
float:right;
width:220px;
background-color:#999;
height:200px;
}
#contentbody{
margin-right:220px;
background-color:#CCC;
height:200px;
width:auto;
}
/************ Footer **************/
#footer{
height:70px;
background-color:#333;
}
{/code}

 

آخرین بروز رسانیدوشنبه, 08 تیر 1394 17:07

نوشتن دیدگاه

تصویر امنیتی
تصویر امنیتی جدید

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»
تک وب دیزاین-قالب فارسی جوملا