برای مشاهده لینک نیاز به ثبت نام دارید؛ برای ثبت نام کلیک کنید
1. نرم افزار DreamWeaver را اجرا کنید . یک صفحه HTML و یک صفحه CSS در یک فولدر به نام website2 ایجاد کنید . (ابتدا باید یک فولدر بر روی دسکتاپ با نام مورد نظر ایجاد کنیم تا بعد از اینکه صفحات ایجاد شد ، هر فایل را در پوشه مورد نظر ذخیره نمائیم )
برای مشاهده لینک نیاز به ثبت نام دارید؛ برای ثبت نام کلیک کنید
. بسیار خوب ، شروع میکنم به کد نویسی ، دقت داشته باشید که کدها در رس های دوره مقدماتی به صورت کامل آموزش داده شده است و در این مرحله من فقط کدهای اصلی را آموزش داده و سورس برنامه را در اختیار شما قرار میدهد . ابتدا باید شکل کلی قالبی که می خواهیم طراحی کنیم را بدانیم تا نسبت به موقعیت های قالب ، برای هر قسمت یک دیویژن در HTML تعریف کنیم و بعد از تعریف کردن یا نشانه گذاری هر قسمت ، مشخصات مربوط به شکل ظاهری آن را در CSS تغییر بدهیم .
برای مشاهده لینک نیاز به ثبت نام دارید؛ برای ثبت نام کلیک کنید
. با توجه به تصویری که مشاهده می کنید قالب اصلی تشکیل شده است از یک قسمت کلی به نام container که تمام قسمت های Header / Navigation / Menu / Content / Footer در آن قرار گرفته است . حالا این قسمت ها را به کد صفحه اضافه میکنم .
ابتدا قسمت کد نرم افزار را فعال کرده و دیویژن های زیر را به آن اضافه کنید .
2 موقعیت در قسمت content قرار گرفته است . پس باید هر دو موقعیت راست و متن صفحه اصلی را دریک چهار چوب به نام content قرار بدهیم تا کد کمتری را بنویسیم
برای مشاهده لینک نیاز به ثبت نام دارید؛ برای ثبت نام کلیک کنید
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" /><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>.اگر به قسمت Design برویم فقط یک جدول را مشاهده می کنیم . با توجه به کدهای بالا باید شروع به وارد کردن مشخصات برای هر قسمت بکنیم . مشخصات هر قسمت باید در فایل CSS فراخوانی شود . وارد فایل template.css شده و کدهای زیر را در ابتدا وارد کنید .
ابتدا تمام تگهای HTML را تایپ میکنم و حاشیه ، فاصله و بوردر را برابر با صفر قرار میدهم . این کدها معروف به کدهای هک CSS می باشند .
برای مشاهده لینک نیاز به ثبت نام دارید؛ برای ثبت نام کلیک کنید
HTML:
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;}.در مرحله بعدی نوبت میرسه به تعیین فونت کل محتوای صفحه ، اندازه فونت ، چیدمان صفحه که باید از راست به طرف چپ باشد . کدهای زیر را در فایل CSS وارد میکنم .
برای مشاهده لینک نیاز به ثبت نام دارید؛ برای ثبت نام کلیک کنید
HTML:
body {direction:rtl;font-size:1em ;/* font-size 1em = 10px*/font-family:Tahoma, Geneva, sans-serif;}. بعد از مشخص کردن قسمت های اصلی من کد کلی هر قسمت را برای شما وارد میکنم .ابتدا کدهای قسمت index.html و بعد از آن کدهای قسمت template.css
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"><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><div id="content"><div id="right">سمت راست</div><div id="contentbody"> محتوای صفحه اصلی</div></div><div id="footer">فوتر</div></div></body></html>کد صفحه template.css
HTML:
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;} /**************** End Navigation ******************//********CONTENT*********/#right{float:right;width:220px;background-color:#999;height:200px;}#contentbody{margin-right:220px;background-color:#E9E9E9;height:200px;width:auto;}/************ Footer **************/#footer{height:70px;background-color:#CDCDCD;}منبع: learning.asarayan.com