قسمت سوم – کدهاي html
مرحله شانزدهم – ويرايشگر کد :
براي شروع به کار کدنويسي براي وب سايت طراحي شده احتياج به يک ويرايشگر کد داريم که در اينجا از نرم افزار DreamWeaver براي ايجاد و ويرايش کدها استفاده شده است. استفاده از اين نرم افزار براي پياده سازي و ساخت صفحات وب زياد سخت نيست اما اين هنر ، ذوق و سليقه و همچنين تکنيک است که طراحان را از يکديگر متمايز ميکند. شما مي توانيد براي ايجاد و ويرايش کدها از نرم افزارهاي ديگر نيز استفاده نماييد.(notepad )
مرحله هفدهم – ساختن فولدر ها :
اين نکته بسيار مهم است که شما براي تمامي قسمتهاي وب سايت خود برنامه اي داشته باشيد و از روي آن برنامه به پيش برويد. دسته بندي فايلهاي تشکيل دهنده وب سايت و جايگيري آنها در فولدرهاي مختلف بسيار مهم است.
براي شروع فولدري با نام “Mywebsite” بسازيد . در داخل اين فولدر فايلهاي مربوط به وب سايت شما جاي خواهند گرفت. فولدري با نام “images” در داخل اين فولدر بسازيد و تمامي تصاوير مربوط به وب سايت را در داخل آن قرار دهيد. همچنين فولدرهاي ديگري با نام “css” و “js” براي قرار گيري فايلهاي css و همچنين JavaScript” ” بسازيد . سعي کنيد رويه يکساني را براي انتخاب نام فولدر ها و حتي صفحات خود انتخاب کنيد تا هر شخصي با ديدن اين نامها متوجه محتويات داخل آنها شود.استفاده يکسان از حروف کوچک و بزرگ نيز در نامگذازي فولدرها و صفحات وب توصيه مي شود.به طور مثال در اينجا براي انتخاب نام فولدرها از حروف کوچک استفاده شده است.
صفحات وب خود را نيز در فولدر اصلي و در کنار فولدرهاي css , js , images ذخيره نماييد و در آدرس دهي ها بسيار دقت کنيد.البته در اينجا از فايلهاي js يا javascript خبري نيست و اين فولدر به صورت نمونه ساخته شده است و در طرح ما کاربردي ندارد.
مرحله هجدهم – ايجاد صفحه Index.html:
اولين مرحله ايجاد يک صفحه با نام index براي شروع است . بسياري از ويرايشگرهاي کد اين تگ ها ي اصلي و اوليه را به صورت پيش فرض ايجاد مي کنند. در زير اين تگها را ملاحظه مي نماييد.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>Untitled Document</title>
6 </head>
7 <body>
8 </body>
9 </html>
در بين تگ head اطلاعاتي در مورد صفحه وب شما قرار مي گيرد ( مانند عنوان و کلمات کليدي و….) و براي مخاطبان وب سايت شما قابل رويت نمي باشد. اين تگها در بالا بردن رتبه وب سايت شما در موتورهاي جستجو نيز بسيار مهم هستند.
1 <head>
2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
3 <title>MyWebSite</title>
4 </head>
سيار در صفحه وب شما دارند ، از جمله تعيين فرمت Text ها و زبان صفحه وب ، کلمات کليدي ، توضيحات در مورد محتويات صفحه وب و ….. تگ body يا همان بدنه صفحه وب شامل قسمتهايي از وب سايت مي باشد که براي مخاطبان قابل رويت است مانند header , content , side bar , footer و ….
استفاده مناسب از کدهاي استاندارد مي تواند در حجم ، زيبايي و راحتي کار شما تاثير بسياري داشته باشد.در اين خود اموز تلاش شده از کدهاي استاندارد و از روش tableless ( استفاده از تگهاي div ) براي کد نويسي استفاده شود.
در بخش هاي ابتدايي توضيح داده شد که صفحه وب ما از چند بخش ( header, content , side bar , footer ) تشکيل شده است . در اينجا براي شروع هر يک از اين قسمتها را که در بين تگ body قرار دارند به صورت تگ div در نظر ميگيريم . همانطور که در کدها ملاحظه مي نماييد توضيحاتي در انتهاي هر تگ براي راحتي کار قرار گرفته است. div ها مزيت هاي بسياري نسبت به table ها دارند از جمله اين مزيت ها مي توان به پايين آوردن حجم صفحات ، قدرت مانور بيشتر براي طراحان و…. اشاره کرد.
1 <body>
2 <div></div><!--end header -->
3 <div></div><!--end content-->
4 <div></div><!--end sidebar-->
5 <div></div><!--end footer-->
6 </body>
اين روش خوبي براي شروع کد نويسي يک صفحه وب است اما براي ادامه راه و اينکه در ميانه راه دچار سردرگمي و دوباره کاري نشويم ابتدا بايد مسير خود را تعيين نماييم .
مطابق تصوير صفحه وب را به دو قسمت مجزا با نامهاي main و footer تقسيم مي کنيم ( کادر بنفش رنگ و آبي رنگ ) در سيستم هاي طراحي tabelless معمولا از يک تگ div اصلي به عنوان نگه دارنده صفحه (مانند #main) استفاده مي شود.
1 <body>
2 <div>
3 <div></div><!--end header -->
<br />
4 <div></div><!--end content-->
5 <div></div><!--end sidebar-->
6 </div><!--end main-->
7 <div id="footer"></div><!--end footer-->
8
9 </body>
در اينجا محتويات div هاي #main و #footer را براي کنترل بيشتر و همچنين مجزا کردن آنها از يک ديگر داخل يک div ديگر با نام #container قرار مي دهيم .
01 <div id="main">
02 <div class="container">
03 <div id="header"></div><!--end header -->
04 <div id="content"></div><!--end content-->
05 <div id="sidebar"></div><!--end sidebar-->
06 </div><!--end main container-->
07 </div><!--end main-->
08 <div id="Div1">
09 <div class="container"></div><!--end footer container-->
10 </div><!--end footer-->
مرحله نوزدهم – تکميل محتوا :
پس از مشخص شدن ساختار کلي صفحه وب نوبت به تکميل اين ساختار و تکميل محتواي صفحه وب بر طبق پيش فرض هاي طراحي شده ميرسد . ساختار کلي وب سايت پيش از اين توسط نرم افزار photoshop طراحي شده است .
Header
اين بخش اولين و يکي از مهمترين اجزاء تشکيل دهنده صفحه وب است که از Logo , Tagline , Navigation تشکيل شده است ( لوگو ، شعار تبليغاتي و منوها ) . در ابتدا کدها در بخش header به صورت زير خواهند بود .
1 <div id="Div2">
2 <div id="logo"></div>
3 <div id="tagline"></div>
4 </div><!--end header -->
با تکميل تر شدن اين قسمت و اضافه نمودن لوگو ، منوها و شعار تبليغاتي کدها به صورت زير تغيير خواهند کرد.
01 <div id="Div3">
02 <div id="Div4">
03 <h1>Logo</h1>
04 </div>
05 <div id="Div5">
06 <h3>And a little tagline, too.</h3>
07 </div>
08 <ul id="menu">
09 <li><a href="#">Home</a></li>
10 <li><a href="#">About</a></li>
11 <li><a href="#">Portfolio</a></li>
12 <li><a href="#">Contact</a></li>
13 </ul>
14 </div><!--end header -->
براي لوگو از تگ h1 که معرف اهميت لوگو است استفاده شده است و براي شعار تبليغاتي از تگ h3 که از اهميت کمتري نسبت به تگ h1 برخوردار است استفاده ميکنيم . استفاده از Text ها به جاي استفاده ار تصاوير در طراحي يک وب سايت مزيت هاي بسياري دارد و از ان جمله شناخته شدن اين Text ها توسط موتورهاي جستجو است.
براي ساخت منوها از ليست ها و يا تگهاي ul و li استفاده شده است که کاربردهاي بسيار زيادي در طراحي و ساخت منوهاي کار آمد و پيشرفته دارند. تگهاي a در داخل تگهاي li قرار گرفته اند.
مقدار ادرس تگهاي a با # مشخص شده است اين به معني لينک شدن به بالاي صفحه است وبراي خالي نبودن مقدار href از ان استفاده مي شود و کاربردهاي ديگري نيز دارد.( با کليک کردن بر روي لينکهايي که مقدار href آنها با # مشخص شده به بالاي صفحه مي رويد )
Content
در محتواي content از نوشته هاي متفاوت با رنگها و اندازه هاي متفاوتي استفاده مي شود و اين نکته را در نظر داشته باشيد که در طراحي يک وب سايت درجه اهميت هر نوشته با اندازه يا Size و رنگ يک نوشته تعيين مي شود و براي اين کار از تگهاي h1 , h2 , h3, … , p , small استفاده شده است.
قبل از تکميل محتواي بخش اصلي تشکيل دهنده صفحه وب ( #content ) کد ها به صورت زير خواهند بود.
پس از تکميل محتواي اين بخش و با در نظر گرفتن قسمتهاي پيش فرض موجود در صفحه وب و درجه اهميت آنها کدهاي اين قسمت به شکل زير خواهند بود. توجه کنيد که در طراحي صفحات وب به صورت پيش فرض از متن هاي بخصوصي براي نمايش بهتر صفحه وب استفاده مي شود. اين متن ها معني و مفهوم خاصي ندارند.
01 <div id="Div6">
02 <h2>Lorem ipsum, Dolor sit</h2>
03 <h3>Nullam vulputate felis id odio interdum nec malesuada mi pretium. </h3>
04 <p>Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel.Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget venenatis nisl.Vestibulum id nulla eu sapienpellentesque malesuada
05 pharetra ac lacus.Curabitur et ultricies quam. Aenean pretium aliquet velit, gravida vulputate urna tempu vel. </p>
06 <p>Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet. Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel. Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget venenatis nisl.Vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus. Curabitur et ultricies quam. Aenean pretium aliquet velit,gravida vulputate urna tempus vel. Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet. </p>
07 <div id="news">
08 <h3>Latest Updates</h3>
09 <h4>Vestibulum id nulla eu sapien pellentesque</h4>
10 <small>June 1, 2009</small>
11 <p>Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpis. Aliquam metus arcu,facilisis quis pellentesque vitae, dapibus non nulla. Nulla suscipit sagittis sodales.Etiam laoreet ante in purus laoreet id malesuada dui pretium.<a href="#"> Read More</a></p>
12 <h4>Vestibulum id nulla eu sapien pellentesque</h4>
13 <small>June 1, 2009</small>
14 <p>Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpis. Aliquam metus arcu,facilisis quis pellentesque vitae, dapibus non nulla. Nulla suscipit sagittis sodales.Etiam laoreet ante in purus laoreet id malesuada dui pretium.<a href="#"> Read More</a></p>
15 </div><!–end news–>
16 </div><!–end content–>
Sidebar
بعد از قسمت content به بخش sidebar خواهيم رسد . اين بخش طبق پيش فرض از سه قسمت مجزا تشکيل شده است . هر يک از اين سه قسمت توسط يک تگ div به وجود مي آيند که عنوان آن توسط يک تگ h3 و اجزاء آن توسط ليست ها ( تگهاي ul , li ) و در داخل اين تگها نيز از تگ a براي پيوند و لينک استفاده شده است.
01 <div id="Div7">
02 <div id="subscribe">
03 <h3>Subscribe!</h3>
04 <ul>
05 <li><a href="#">Subscribe via RSS</a></li>
06 <li><a href="#">Get Email Updates</a></li>
07 <li><a href="#">Follow us on Twitter</a></li>
08 </ul>
09 </div>
10 <div id="popular">
11 <h3>Popular Items</h3>
12 <ul>
13 <li><a href="#">Lorem ipsum dolor site amet</a></li>
14 <li><a href="#">Ulvinar tincidunt, Mauris id</a></li>
15 <li><a href="#">Lorem ipsum dolor site amet</a></li>
16 <li><a href="#">Proin tempor erat sit tene</a></li>
17 </ul>
18 </div>
19 <div id="contributors">
20 <h3>Contributors</h3>
21 <ul>
22 <li><a href="#">John Smith, freelance writer</a></li>
23 <li><a href="#">Jack McCoy, designer</a></li>
24 <li><a href="#">Lenny Briscoe, editor</a></li>
25 <li><a href="#">John Smith, martketing</a></li>
26 </ul>
27 <a href="#">Join Our Team</a>
28 </div>
29 </div><!--end sidebar-->
Footer
قبل از اينکه کد هايي را که نوشتيم در داخل يک مرورگر بررسي کنيم آخرين قسمت ( footer ) را نيز تکميل مي نماييم . در قسمت footer معمولا نوشته هايي در مورد قوانين کپي رايت ، لينکها ، سياست ها ، و يا اطلاعات تماس قرار مي گيرند که در وب سايتهايي با طراحي هاي مدرن کاربردهاي بسياري پيدا کرده است.
1 <div id="Div8">
2 <div class="container">
3 <p>Copyright © 2009 MySite <br />
4 <li>All Rights Reserved</p>
5 </div><!--end footer container-->
6 </div><!--end footer-->
بعد از تکميل تمامي اطلاعات پيش فرض و نوشتن کدهاي مربوطه صفحه وب ما به شکل زير به نمايش در خواهد آمد . صفحه وب ما آماده است براي نوشتن کدهاي css و جان گرفتن ..!؟
قسمت چهارم – کدهاي css
--------------------------------------------------------------------------------
مرحله بيستم– وارد کردن فايل css :
قبل از شروع اين قسمت يک فايل سي اس اس با نام “MyStyle.css” بسازيد و آن را داخل فولدر مربوطه ( css ) بگذاريد. فايلهاي سي اس اس به چند روش در صفحات وب مورد استفاده قرار مي گيرند . در اينجا از يک فايل سي اس اس خارجي ( مجزا ) استفاده شده است که به وسيله کدهاي زير به صفحه وب لينک مي شود.اين کد در قسمت head قرار خواهد گرفت .
1 <link href="css/MyStyle.css" rel="stylesheet" type="text/css" media="screen" />
در آدرس دهي به نام صفحات نيز دقت نماييد (MyStyle.css ) بزرگي و کوچکي کلمات گاهي دردسر ساز خواهند شد بنابراين به اين نکته نيز توجه کنيد.
مرحله بيست و يکم – CSS Reset :
براي اينکه سر و شکل اوليه اي به صفحه وب بدهيم ابتدا عرض محتويات صفحه وب ( #container ) و همچنين نوع font را مشخص مي کنيم.
1 body { font-family: Arial, Helvetica, sans-serif; }
2 .container { width: 800px; margin: 0 auto;}
نوع font براي تمامي صفحه وب تعيين شده است و عرض محتويات صفحه وب نيز ) طبق پيش فرض اوليه ) 800 px تعيين شده است.در class تعيين شده براي تگ با نام #Container ملاحظه مي نماييد که پس از تعيين margin:0 از auto استفاده شده است که کاربرد آن center کردن اين div در مرکز صفحه است. پس از وارد نمودن اين کدهاي سي اس اس صفحه وب به صورت زير خواهد در آمد.
Css Reset
بسياري از نمايشگر هاي صفحات وب ( IE , FireFox ,Opera ,… ) به صورت پيش فرض padding و margin هاي متفاوتي را مورد استفاده قرار مي دهند . به دليل استاندارد سازي و يکسان سازي نمايش صفحات وب براي تمامي نمايشگرها تمامي اين padding و margin ها به صورت يکسان در مي آيند.
1 body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }
مرحله بيست و دوم – header :
حالا همه چيز براي شروع به شکل دهي صفحه وب از بالا به پايين آماده است . براي شکل دادن به اولين قسمت اين صفحه وب ( header ) از تصوير برش داده شده در بخش دوم براي تصويرپس زمينه استفاده خواهيم کرد.اين تصوير درپس زمينه #main به صورت تکرار قرار مي گيرد ، به دليل اينکه خاصيت گسترش در تمامي رزولوشن ها و نمايشگرها را داشته باشد.
1 #main {
2 background: url(images/header_slice.jpg) repeat-x;
3 }
طبق کدهاي بالا ملاحظه مي نماييد که تصوير header_slice.jpg به صورت افقي تکرار مي شود تا تمامي عرض صفحه وب را پوشش دهد ( repeat-x ) . در صورت تغيير عرض صفحه نمايشگر و يا رزولوشن عرض #header نيز به صورت هماهنگ تغيير مي کند.
( البته حداقل عرض اين صفحه وب 800 px خواهد بود – #container )
مرحله بيست و سوم – logo :
در مرحله قبل و در قسمت لوگو از تگ h1 در داخل div براي جايگزيني لوگو استفاده شد است . تگ هاي h1 يکي از مهمترين تگها از نظر بهينه سازي سايت براي موتورهاي جستجو هستند که در بالاي صفحه و يا ابتدايي ترين خط در صفحه وب قرار ميگيرند تا توضيحي هر چند کوتاه در مورد محتويات وب سايت شما باشند.عدم وجود اين تگ شايد به نظر شما مشکلي را براي صفحه وب ايجاد نمي کند اما فقط در ظاهر..!؟
اين نکته را در نظر داشته باشيد استفاده از تکنيکهاي غير استاندارد در طراحي وب سايت و استفاده از متن هاي مخفي در صفحه وب براي گول زدن موتورهاي جستجو از چشم عنکبوت هاي موتورهاي جستجو ناديده نمي ماند و ممکن است وب سايت شما با تحريم از طرف اين موتورهاي جستجو مواجه شود . بنابر اين فکر استفاده از تکنيکهاي غير استاندارد و زيرکانه را از ذهن خود خارج کنيد و به محتواي وب سايت خود بپردازيد. براي قرار دادن لوگو در جاي پيش فرض از تکنيک ساده زير استفاده شده است.
1 #logo {
2 background: url(images/logo.png) no-repeat;
3 height: 84px;
4 width: 235px;
5 }
در صورت تعيين نکردن اندازه براي #logo تصوير پس زمينه به طور کامل نمايش داده نخواهد شد. بنابر اين با در نظر گرفتن اندازه تصوير ، اندازه آن را براي #logo مشخص نموده ايم و براي پنهان کردن نوشته Logo در داخل تگ h1 از کد زير استفاده نموده ايم .
1 #logo h1 {
2 text-indent: -9999px;
3
4 }
در حال حاضر نمايش صفحه وب به صورت زير خواهد بود.ملاحظه مي نماييد که اثري از نوشته Logo در زير تصويرلوگو نيست و لوگو به بالاي صفحه چسبيده است. براي ايجاد فاصله در بالاي صفحه وب از خاصيت Padding براي #header استفاده مي نماييم . تفاوت استفاده از margin و يا padding در اين است که در صورت استفاده از margin کل مرزهاي تگ جابه جا خواهند شد و در صورت استفاده از padding فقط محتويات تگ جابه جا مي شوند و مرزهاي تگ در جاي خود باقي خواهند ماند.
1 #header {
2 padding-top: 40px;
3 }
مرحله بيست و چهارم – tagline ( شعار تبليغاتي ):
در مرحله قبل در مورد استفاده از تگهاي h2 و همچنين مزيت هاي آن بحث شد. براي ايجاد شعار تبليغاتي به صورت پيش فرض و شکل دهي به آن طبق مراحل زير عمل مي کنيم. با نگاهي به طرح پيش فرض طراحي شده و نوع تگ هاي html استفاده شده بايد راهي براي قرار دادن لوگو و شعار تبليغاتي در کنار يکديگر پيدا نمود . براي حل اين مشکل از خاصيت float در تگهاي div استفاده مي شود. خاصيت float باعث شناور شدن تگهاي div در صفحه وب , و افزايش قدرت طراحان وب براي ايجاد صفحات جذاب تر مي شود. براي قرار دادن لوگو در سمت چپ ( left ) خاصيت float را با مقدار left به #logo اضافه مي کنيم .
1 #logo {
2 background: url(images/logo.png) no-repeat;
3 height: 84px;
4 width: 235px;
5 float: left;
6 }
با نگاهي به تصوير ملاحطه مي نماييد که div هاي tagline و navigation از پايين #logo به سمت راست آن تغيير موقعيت داده اند.
استفاده از float تگ را به اندازه واقعي خود مقيد مي کند . قبل از اضافه نمودن خاصيت float ملاحظه نموده ايد که تگهاي div مورد استفاده در header صفحه به صورت پله اي در زير يکديگر قرار گرفته بودند و هر يک فضاي اطراف خود را نيز اشغال نموده و اجازه قرار گرفتن تگهاي ديگر را در کنار خود نمي دادند.
حال براي #tagline نيز از خاصيت float:left استفاده مي نماييم.
1 #tagline {
2 float: left;
3 }
پس از اضافه نمودن اين خاصيت به #tagline ملاحظه مي نماييد که #navigation نيز در سمت راست #tagline قرار گرفته و تغيير موقعيت داده است . براي رفع اين مشکل مي توان از تکنيک زير استفاده نمود.
1 <div id="header">
2 <div id="logo">
3 <h1>Logo</h1>
4 </div>
5 <div id="tagline">
6 <h3>And a little tagline, too.</h3>
7 </div>
8 <div style="clear:both"></div>
9 </div>
به کدهاي html مرحله قبل باز گرديد و يک div با يک کد سي اس اس کوچک به بخش header اضافه نماييد ( به خط هشتم در کدهاي بالا دقت نماييد ).با استفاده از خاصيت ( clear:both ) براي اين div تمامي تگ هاي چپ و راست به زير اين div تغيير موقعيت خواهند داد و مشکل بر طرف خواهد شد. اين تکنيک کاربرد زيادي در طراحي صفحات وب با استفاده از div ها دارد.
سر و شکل مناسبي به رنگ و اندازه شعار تبليغاتي خود بدهيد.
1 #tagline h3 {font-size: 30px; color: #e4dfdf; }
و جاي آن را طبق طرح پيش فرض تصحيح کنيد.
1 #tagline {
2 float: left;
3 padding-top: 20px;
4 padding-left: 20px;
5 width: 400px;
6 }
حال نگاهي به صفحه وب مي اندازيم.
مرحله بيست و پنجم – navigation :
منوها يکي از مهمترين اجزاء تشکيل دهنده هر وب سايت هستند که علاوه بر افزايش زيبايي بايد به دسترسي پذيري وب سايت نيز کمک کنند و استفاده از آنها براي عموم مخاطبان بسيار ساده باشد. در طراحي هاي امروزي از ليستها ( تگهاي ul ، li ) براي طراحي منوها استفاده مي شود . با توجه به مرحله قبل و navigation طراحي شده به صورت پيش فرض از کدهاي سي اس اس زير براي طراحي ساختار navigation استفاده مي نماييم.
1 ul#menu {
2 list-style: none;
3 }
4 ul#menu li a {
5 font-size: 30px;
6 color: #676666;
7 text-decoration: none;
8 }
طبق کدهاي بالا ملاحظه مي نماييد که با استفاده از خصوصيت list-style : none اشکال مورد استفاده در ليست ها را از کنار اجزاء آن حذف نموديم و اندازه ، رنگ و… را براي لينک ها تعيين کرديم. براي شناور نمودن #menu و چينش آن در سمت چپ از خصوصيت float:left براي تگهاي li موجود در زير شاخه #menu استفاده مي نماييم.
1 ul#menu li {
2 float: left;
3 }
اگر نگاهي دوباره به صفحه وب در مرورگر خود داشته باشيم خواهيم ديد مشکل مرحله قبل در استفاده از خاصيت float ( قرار گرفتن اجزاء پاييني در کنار #menu ) تکرار شده است و براي حل آن از تکنيک مرحله قبل استفاده خواهيم کرد ، بنا براين به مرحله کد نويسي html باز مي گرديم و کد ها را به صورت زير تغيير مي دهيم . ) تگ div با خصوصيت clear:both اضافه شده است )
01 <div id="header">
02 <div id="logo">
03 <h1>Logo</h1>
04 </div>
05 <div id="tagline">
06 <h3>And a little tagline, too.</h3>
07 </div>
08 <ul id="menu">
09 <li><a href="#">Home</a></li>
10 <li><a href="#">About</a></li>
11 <li><a href="#">Portfolio</a></li>
12 <li><a href="#">Contact</a></li>
13 </ul>
14 <div style="clear:both"></div>
15 </div><!--end header-->
براي ايجاد فاصله مناسب و جايگيري منوها در جاي پيش فرض کدهاي سي اس اس به صورت زير تصحيح خواهند شد.
1 ul#menu {
2 list-style: none;
3 padding-top: 50px;
4 }
5 ul#menu li {
6 float: left;
7 padding-left: 30px;
8 padding-right: 75px;
9 width: 95px; }
مرحله بيست و ششم – content :
طبق طرح پيش فرض در اين قسمت از فونت هاي مختلف با رنگها و اندازه هاي مختلف براي نشان دادن درجه اهميت مطالب استفاده شده است. طبق کدهاي html نوشته شده براي هر يک از اين تگها مي توان يک style خاص نوشت و آنها را به راحتي کنترل نمود.
01 #content h2 {
02 font-size: 36px;
03 color: #015878;
04 }
05 #content h3 {
06 font-size: 24px;
07 color: #444444;
08 }
09 #content h4 {
10 font-size: 18px;
11 color: #373737;
12 font-weight: normal;
13 }
14 #content p {
15 font-size: 14px;
16 color: #595858;
17 }
18 #content small {
19 font-size: 12px;
20 color: #373737;
21 }
22 #content a {
23 color: #0f6c8d;
24 font-weight: bold;
25 text-decoration: none;
26 }
خوب کدهاي اوليه بر طبق پيش فرض به صورت بالا خواهند بود و در ادامه به اصلاح وتکميل آنها خواهيم پرداخت. خوانايي متون در يک صفحه وب جزئي از اصول ابتدايي است که با نگاهي به صفحه وب متوجه خواهيد شد که هنوز رنگي را براي پس زمينه محتواي صفحه وب انتخاب ننموده ايم . رنگ پيش فرض سفيد است و با توجه به رنگ بندي صفحه وب و طرح پيش فرض رنگ #ebe8e8 را براي تگ body انتخاب مي نماييم و کدهاي سي اس اس اوليه را به صورت زير تکميل مي نماييم.
1 body {
2 font-family: Arial, Helvetica, sans-serif;
3 background: #ebe8e8;
4 }
پس از انتخاب رنگ پس زمينه مناسب به نکته اي ديگر براي هر چه بهتر شدن خوانايي و ظاهر صفحه وب خواهيم رسيد . اين نکته رعايت فواصل مناسب ما بين اجزاء تشکيل دهنده يک صفحه وب و در اينجا ما بين متون است. فاصله بين پاراگراف ها ، عناوين با درجه اهميت متفاوت و ….. قبل از انجام تغييرات تکميلي صفحه وب به شکل زير خواهد بود.
ايجاد فاصله مابين navigation و تگ h2 عنوان متن content
1 #content h2 {
2 font-size: 36px;
3 color: #015878;
4 padding-top: 25px;
5 }
ايجاد فاصله مابين تگ h2 و h3 با درجات اهميت متفاوت.
1 #content h3 {
2 font-size: 24px;
3 color: #444444;
4 padding : 20px 0px;
5 }
ايجاد فاصله مابين پاراگراف p و h3
1 #content p {
2 font-size: 14px;
3 color: #595858;
4 padding-top: 20px;
5 }
بهتر است نگاهي به نتيجه کار تا اينجا داشته باشيم .
طبق طرح پيش فرض کدهاي سي اس اس #news را نيز به صورت زير مي نويسيم .
01 #news {
02 padding-top: 10px;
03 }
04 #news h3 {
05 padding-bottom: 10px;
06 }
07 #news p {
08 padding-top: 10px;
09 padding-bottom: 14px;
10 }
و نتيجه آن به صورت زير خواهد بود.
مرحله بيست و هفتم – Side bar :
براي ايجاد و سر و شکل دادن به اين جزء ابتدا لازم است #content را طبق طرح پيش فرض با استفاده از اندازه ها مقيد کنيم و چينش آن را با استفاده از float تعيين کنيم و آن را به صورت يک div شناور در بياوريم تا بتوانيم #sidebar را در کنار آن قرار دهيم .
1 #content {
2 width: 510px;
3 float: left;
4 }
5 #sidebar {
6 float: left;
7 }
اگر هم اکنون نگاهي به صفحه وب خود بياندازيد متوجه مشکلي که در مراحل قبل نيز با تگ هاي شناور داشتيم خواهيد شد ( #footer به سمت راست #sidebar تغيير مکان داده است ) و براي حل آن طبق مراحل قبل از يک div با خصوصيت clear:both در انتهاي #sidebar استفاده مي نماييم .
01 <div id="contributors">
02 <h3>Contributors</h3>
03 <ul>
04 <li><a href="#">John Smith, freelance writer</a></li>
05 <li><a href="#">Jack McCoy, designer</a></li>
06 <li><a href="#">Lenny Briscoe, editor</a></li>
07 <li><a href="#">John Smith, martketing</a></li>
08 </ul>
09 <a href="#">Join Our Team</a>
10 </div>
11 </div><!--end sidebar-->
12 <div style="clear:both"></div>
بخش #sidebar از سه قسمت متفاوت با اندازه ها ، فاصله ها و رنگهاي مختلف تشکيل شده است ، بنابر اين با استفاده از کدهاي سي اس اس طبق طرح پيش فرض ( مشخصات استفاده شده براي text ها در طرح پيش فرض ) آنها را به شکل و مکان پيش فرض در خواهيم آورد و هدايت مي کنيم.
01 #sidebar {
02 float: left;
03 margin-left: 55px;
04 margin-top: 35px;
05 background: #d4d6d3;
06 border: 1px solid #BEBDBD;
07 padding: 15px;
08 }
09 #sidebar h3 {
10 font-size: 24px;
11 color: #044055;
12 font-weight: normal;
13 padding-bottom: 20px;
14 padding-left: 15px;
15 }
16 #sidebar ul {
17 list-style: none;
18 padding-bottom: 25px;
19 }
20 #sidebar ul li a {
21 font-size: 14px;
22 color: #393838;
23 }
24 ul#subscribe li {
25 padding-bottom: 5px;
26 }
27 ul#subscribe li a {
28 font-size: 18px;
29 }
طبق طرح پيش فرض از سه آيکون براي معرفي خدمات وبلاگ استفاده شده است که با استفاده از کدهاي سي اس اس آنها را در صفحه وب خود جا گذاري مي نماييم.
1 ul#subscribe li {
2 padding-bottom: 5px;
3 padding-left: 35px;
4 }
ابتدا با استفاده از Padding يک فضاي خالي براي آيکون ها در تگهاي li زير شاخه #subscribe ايجاد مي نماييم .سپس با اندکي تغيير در کدهاي html اين قسمت و دادن id هاي مجزا براي کنترل بيشتر بر روي اجزاء آيکون ها را با استفاده از خصوصيت background وارد مي نماييم.
1 <ul id="subscribe">
2 <li id="rss"><a href="#">Subscribe via RSS</a></li>
3 <li id="email"><a href="#">Get Email Updates</a></li>
4 <li id="twitter"><a href="#">Follow us on Twitter</a></li>
5 </ul>
و کدهاي سي اس اس براي هر کدام از اجزاء
01 li#rss {
02 background: url(/..images/rss_icon.png) no-repeat;
03 }
04
05 li#email {
06 background: url(/..images/email_icon.png) no-repeat;
07 }
08
09 li#twitter {
10 background: url(/..images/twitter_icon.png) no-repeat;
11 }
به آدرس دهي ها در کدهاي سي اس اس بسيار دقت نماييد . براي آدرس دهي ابتدا يک ريشه بالا آمده و سپس در فولدر images آدرس دهي مي کنيم . توجه داشته باشيد که کدهاي سي اس اس درفولدر css قرار داده شده اند.
و در اينجا نگاهي به صفحه وب .
طبق طرح پيش فرض جاي button سبز رنگ در زير #sidbar خالي است که با مقداري تصحيح در کدهاي html و چند خط کد سي اس اس آن را نيز در جاي مناسب قرار خواهيم داد.
1 <a href="#" class="button">Join Our Team</a>
طبق کدهاي بالا ملاحظه مي نماييد که با استفاده از علامت گذاري تگ a با استفاده از id کنترل بيشتري بر روي آن به وسيله کدهاي سي اس اس انجام خواهد گرفت.
1 a.button {
2 color: #393838;
3 text-decoration: none;
4 background: url(/..images/button_slice.jpg) repeat-x;
5 margin-left: 14px;
6 padding: 13px 23px;
7 }
با اندازه گذاري دقيق و استفاده از خصوصيت هاي margin و padding مي توانيد به خوبي مکان قرار گيري اجزاء را تغيير دهيد و کنترل نماييد.
با انجام تصحيحاتي در کدهاي سي اس اس #sidebar مکان آن را به دقت تنظيم و تصحيح مي نماييم.
1 #sidebar {
2 float: left;
3 margin-left: 55px;
4 margin-top: 35px;
5 background: #d4d6d3;
6 border: 1px solid #BEBDBD;
7 padding: 15px 15px 30px 15px;
8 }
مرحله بيست و هشتم – footer :
اين قسمت نيز شباهت زيادي به بخش header صفحه وب دارد و همانند گذشته و مراحل قبل به صورت زير عمل مي نماييم . تصوير footer_slice.jpg در پس زمينه #footer تکرار خواهد شد.
1 #footer {
2 background: url/..) images/footer_slice.jpg) repeat-x;
3 padding-top: 20px;
4 padding-bottom:60px;
5 margin-top: 40px;
6 color: #fff;
7 }
و در انتها همه چيز آماده است براي بهره برداري.
در انتهاي اين خود آموز لازم دانستم تا نکاتي در مورد طراحي يک وب سايت را به صورت عملي گوشزد کنم . اولين نکته اينکه ، طراحي وب امريست سليقه اي البته با چهار چوب هاي مشخص و استاندارد هاي اوليه و شما مي توانيد با دانش کافي و استفاده از تکنيکهاي مناسب ايده هاي خودتان را در غالب يک وب سايت پياده سازي نماييد. دوم اينکه ، طراحان مختلف با سبک ها و متد هاي مختلفي اقدام به طراحي وب سايت مي نمايند . روش شما روشيست که شما را زودتر و بهتر به هدفتان نزديک کند.هيچ طراحي از اشتباه مبرا نيست و سعي شده در طول اين خود آموز آموزش طراحي وب سايت از اشتباهات اجتناب شود . در صورت مشاهده هر گونه اشتباه و يا نقطه نظر تکميلي خوشحال مي شويم تا با ما گفتگو کنيد حتي به بهانه يک سلام .
با اميد موفقيت روز افزون.
منبع:http://www.ittutorial.ir ارسال توسط کاربر محترم سايت : meysamr