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

          mahdi 
            بازدید : 100
          سه شنبه 21 شهریور 1391
           نظرات (0)
        

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

Website1_ASARAYAN2

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

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

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

Website1_ASARAYAN1

Website1_ASARAYAN2

مشاهده دمو

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

"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>آموزش طراحی چیدمان یک ستونه با عرض ثابت با نرم DreamWeavertitle>
head>
 
<body >
<div id="container">

ارسال نظر برای این مطلب