 در اين مقاله قصد دارم شما را با يکي از کارآمد ترين فناوري هاي طراحي صفحات اينترنتي ، يعني طراحي CSS صفحه اينترنتي ريا، آشنا کنم . طراحي CSS به اين معني است که ديگر نيازي به کشيدن جدول در صفحات اينترنتي نيست . به اين معني است که شما صفحات اينترنتي را با کار اندک و خيلي سريع توليد خواهيد نمود . صفحاتي که خيلي سريع تر در مرورگر بارگذاري مي شوند ، خيلي راحت به روز مي شوند و براي چاپ مناسب ترند . اين صفحات داراي تمام استانداردهاي روز طراحي صفحات وب هستند و در 99% مرورگرهايي که امروز استفاده مي شوند ، کار مي کنند .
طرح بندي ( Layout ) صفحات CSS :
تگ هاي مورد استفاده در طرح بندي
CSS ، اين امکان را به ما مي دهد که از تگ هاي HTML کمتري براي طراحي صفحاتمان ، استفاده کنيم . با اين همه قادر خواهيم بود تا صفحاتي بسيار زيبا و جذاب را طراحي کنيم . تنها با 6 نوع از تگ هاي HTML :
- <.h> : اينها تگ هاي سرصفحه يا Heading هستند . که داراي محدوده اي از <h1></h1> تا <h6></h6> هستند . با استفاده از اين تگ ها ، قالب اصلي صفحه را طراحي مي کنيم . درجه اهميت اين تگ ها هم از 1 به 6 کمتر مي شود . يعني کدهاي Heading با بيشترين درجه اهميت ، در <h1></h1> و کدهاي با کمترين درجه اهميت در <h6></h6> قرار خواهند گرفت . براي اين تگ ها شما مي توانيد يک نوع قالب بندي را تعريف کنيد . حالا اگر مثلا بنويسيد : <h1/> کمکي آراز <h1> اين تگ به مرورگر شما و حتي به موتورهاي جستجو اعلام مي کند که اين صفحه درباره کمکي آراز است . تمام مرورگر ها اندازه هاي پيش فرضي براي هرکدام از اين تگ ها دارند . يعني ، اگر شما قالب بندي را براي Heading تعيين نکنيد ، مرورگر خودش متن داخل اين تگ ها را با حالت پيش فرض خودش نمايش مي دهد . که البته بيشتر آنها در عمل غير قابل استفاده اند و از زيبايي صفحات شما مي کاهند . بهتر است با ابتکار خودتان و با استفاده از مقاله امروز ، اين کدهاي Heading را بنويسيد .
- <p> : اين تگ ، تگ پاراگراف است . يعني شما مي توانيد بخش هايي از صفحه تان را با استفاده از اين تگ ، به عنوان يک پاراگراف جدا کنيد . البته مي توان از اين تگ حتي به عنوان بلوک هم استفاده کرد .
- تگ هاي <ul> و <ol> : براي ايجاد ليست از اين تگ ها استفاده مي کنيم . تگ <ul> مخفف Un-ordered List است . يعني ليستي که هيچ گونه ترتيبي در آن حاکم نيست . در اين حالت از دايره هاي کوچک يا هر آيکن انتخابي ديگري براي ليست بندي ، استفاده مي کند . اما بر خلاف <ul> ، با استفاده از <ol> ، مي توان ليست هاي شماره بندي شده توليد نمود که داراي ترتيب هستند ( Ordered List ) . البته به جاي شماره مي توان از حروف انگليسي نيز استفاده نمود .
- <div> : با استفاده از تگ هاي div ، مي توانيد يک نوع قالب بندي ويژه براي متن داخل <div></div> تعريف کنيد که با قسمت هاي ديگر صفحه تان متمايز باشد . مثلا اين متن را مي توان متحرک يا نامرئي کرد و يا ... . اين تگ جايگزين بسيار مناسبي براي جدول است . مثلا در طراحي ساده HTML ، براي اينکه منوي اصلي سايت را ايجاد کنيم ، بايد يک جدول با استفاده از تگ هاي خسته کننده <tr> ، <td> ، <table> توليد مي کرديم . ولي در طراحي CSS براي ايجاد همين منو تنها استفاده از div کافي است .
- <a href> : مهمترین تگ در بین تگ های HTML ، همین <a href> است که برای ایجاد لینک یا همان Hyperlink مورد استفاده قرار می گیرد . با این تگ می توان یک لینک یا پیوند ایجاد نمود که با کلیک روی آن یک صفحه جدید باز شود . همچنین می توان یک اسکریپت جاوا ( Java Script ) را فعال یا فراخوانی نمود .
- <img> : این تگ برای درج تصویر در صفحه ما ، مورد استفاده قرار می گیرد . این تگ تصویر مورد نظر را وارد صفحه نمی کند ( یعنی درون صفحه جاسازی نمی کند .) بلکه فقط به محل عکس مورد نظر که ما آدرس آن را وارد کرده ایم ، می رود و آن عکس را در صفحه ما نشان می دهد . حتی این عکس می تواند در یک سرور دیگر باشد .
تنها اين تگ هاي HTML هستند که ما در طراحي صفحه خود مورد استفاده قرار خواهيم داد . بدون اينکه به تگ هاي خسته کننده اي مثل font ، table ، br و ... نيازي داشته باشيم .
ساخت قالب اصلی صفحه :
بهتر است برای اینکه بیشتر در جریان کار قرار بگیرید ، با هم یک صفحه HTML بسازیم .
ابتدا به محیط دسکتاپ ویندوز خود بروید . در دسکتاپ ، کلیک راست کرده ، وارد New بشوید و گزینه Text Document را انتخاب کنید . با این کار یک فایل متنی ساده در دسکتاپ شما ایجاد می شود . اسم آن را tamrin.htm بگذارید و کلید Enter را فشار دهید . در این لحظه ، ویندوز از شما سوال خواهد کرد که آیا می خواهید پسوند فایل خود را تغییر دهید ؟ که شما Yes را انتخاب کنید . حالا روی فایل کلیک راست کرده وارد Open with شده و Notepad را کلیک کنید .
در داخل فایل این کدها را کپی کنید .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My HTML Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
</body>
</html>
این کد ساختار اساسی تمام صفحات HTML را تشکیل می دهد . کد های مثال ذکر شده در این مقاله را داخل این تگ ها کپی خواهید کرد . ولی فعلا این کار را انجام ندهید .
<body> می توانید کد ها را اینجا هم کپی کنید </body>
در بین کدهای HTML بالا ، یک تگ به شکل <--توضیح--!> مشاهده می کنید . در داخل این تگ و به جای کلمه توضیح ، شما می توانید برای قسمت های مختلف صفحه HTML خود توضیحاتی ارائه کنید . این توضیحات اصلاً در اجرای صفحات نقشی ندارند و دیده نمی شوند . اینها نوعی مستند سازی صفحه اینترنتی هستند . به طوری که اگر کسی به غیر از شما بخواهد تغییری در آن ایجاد کند ، بتواند به راحتی و با کمک این توضیحات ، صفحه را ویرایش کند .
ساختن CSS :
حالا که فایل HTML خود را ساختید ، یک فولدر با نام دلخواهی مثل MyPage بسازید و فایل HTML را به آن انتقال دهید . در همان فولدر ، یک فایل متنی دیگر باز کرده و اسم آن را tamrin.css بگذارید . حالا با Notepad آن را باز کنید و این کد ها را به آن کپی کنید .
/* Generic Selectors */
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #333333;
background-color: #F9F9F9;
}
p {
width: 80%;
}
li {
list-style-type: none;
line-height: 150%;
list-style-image: url(../images/arrowSmall.gif);
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: bold;
color: #000000;
}
h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
font-weight: bold;
color: #000000;
border-bottom: 1px solid #C6EC8C;
}
/**************** classes ****************/
a:link {
color: #00CC00;
text-decoration: underline;
font-weight: bold;
}
li a:link {
color: #00CC00;
text-decoration: none;
font-weight: bold;
}
a:visited {
color: #00CC00;
text-decoration: underline;
font-weight: bold;
}
li a:visited {
color: #00CC00;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: rgb(0, 96, 255);
padding-bottom: 5px;
font-weight: bold;
text-decoration: underline;
}
li a:hover {
display: block;
color: rgb(0, 96, 255);
padding-bottom: 5px;
font-weight: bold;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #C6EC8C;
}
a:active {
color: rgb(255, 0, 102);
font-weight: bold;
}
/************************* ID's *************************/
#navigation {
position: absolute;
z-index: 10;
width: 210px;
height: 600px;
margin: 0;
border-right: 1px solid #C6EC8C;
font-weight: normal;
}
#centerDoc {
position: absolute;
z-index: 15;
padding: 0 0 20px 20px; /*top right bottom left*/
margin-top: 50px;
margin-left: 235px;
}
حالا فایل را Save کنید .
اگر از این کدها سر در نمی آورید ، اصلاً نگران نباشید . در مقاله بعدی مفصلاً به توضیح آنها خواهم پرداخت . حالا همان فایل HTML را دوباره با Notepad باز کنید .
در داخل تگ <body></body> این کد را وارد کنید . <div id="navigation"> <h2>The Main navigation</h2> </div> <div id="centerDoc"> <h1>The Main Heading</h1> <p> web site KemkiAraz.com , baraye anan ke mikhahand computer ra fara begirand . KemkiAraz erae dahandeye khadamate barname nevisi va tarrahi site </p> </div>
در داخل تگ های <head></head> هم این کد را وارد کنید . <title>My HTML Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="tamrin.css" rel="stylesheet" type="text/css">
در مقاله بعدی ، توضیحات لازم را خواهم داد . فایل HTML را با یک مرورگر باز کنید .
تعجب نکنید . این کار را شما انجام داده اید !!
اگر تا اینجا مشکلی داشتید ، به انجمن های سایت مراجعه کرده و با ما در میان بگذارید .
با تشکر امید اصفهانی علمداری
|
