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

          mahdi 
            بازدید : 120
          جمعه 31 شهریور 1391
           نظرات (0)
        

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

آخرین چیدمان قالب ، چیدمان یک ستونه با عرض متغیر می باشد . 3 چیدمان اصلی را در بخش های قبلی آموزش داده ام . (چیدمان دو ستونه با عرض ثابت /چیدمان دوستونه با عرض متغیر / چیدمان یک ستونه با عرض ثابت ) علاقه مندان به قسمت طراحی وب دقت داشته باشید که ابتدا و بعد از یادگیری زبان HTM. CSS و نرم افزار دریم ویور باید با انواع قالب بندی یک قالب وب سایت آشنایی کامل داشته باشید تا بتوانید اطلاعات دقیقی را در اختیار مشتریانی که قصد طراحی وب سایت برای آنها دارید ، بزارید .

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

Website1_ASARAYAN2

2. بعد از ایجاد پوشه مورد نظر و ساخت دو فایل اصلی ابتدا به نمای کد صفحه index.html رفته و دیویژن های مختلف قالب را در آن تایپ میکنم . منظور از دیویژن تگ Div هست که با یک سلکتور نشانه گذاری میشه و بعد آن نشانه مثلا right در css فراخوانی شده و ویژگیهای آن را تغییر میدهیم .

website-tutorial_ASARAYAN1

کد صفحه index.html

<!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 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>

<div id="content">قسمت بدنه صفحه </div>

<div id="footer">فوتر</div>

</div>

</body>

</html>

کد صفحه template.css

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:100%; height:auto;}

#header{

height:100px;

background-color:#E2E2E2;

}

/**************** 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;

}

/********CONTENT*********/

#content{

width:900px;

height:200px;

}

/************ Footer **************/

#footer{

height:70px;

background-color:#CDCDCD;

}