سلام مجدد خدمت تمامي خوانندگان وب سايت عصر نوشتن، با قسمت چهاردهم آموزش طراحي وب سايت از پايه در خدمتتون هستيم.
در اين جلسه به معرفي خصوصيتي مي پردازيم که از طريق آن مي توانيد عناصر صفحه را در هر جايي که مي خواهيد قرار دهيد
design-web-00.jpg
تعيين موقعيت عناصر در هر جايي از صفحه که شما دوست داريد:
همواره بدون هيچ گونه مداخله اي از سوي يک مرورگر وب، تمامي عناصري که درون يک صفحه سايت قرار دارند به همان ترتيب نمايش داده مي شوند، بنابراين اگر در تگ هدر، منوي راهبري قرار داشته باشد و در سر تيتر دوم، سه پاراگراف قرار دهيم در زمان نمايش در مرورگر خواهيد ديد که نحوه نمايش آنها به همان ترتيبي است که درون سورس قرار دارد و تا اينجاي کار نحوه سايت زدن ما به همين نحوي بوده است که در اينجا توضيح داديم، اما در اين بخش از آموزش مي خواهم شما را با برخي از قدرت هاي واقعي css و تاثيراتي که مي تواند بر روي سورس مان داشته باشد آشنا کنم. در اين قسمت شما خواهيد آموخت که چطور مي توانيد براي عنصرخاصي در صفحه مشخص کنيد که به طور صريح در کدام قسمت از محتواي سايت نمايش يابد بي آنکه به ترتيب قرار گرفتن عناصر درون صفحه توجه کنيد.
نمايش ساختار:
زمانيکه از css براي استايل دهي به سايت هاي خود استفاده مي کنيد براي هر قسمت از سايت خود يک Border در نظر بگيريد به اين ترتيب به خودتان کمک مي کنيد تا به راحتي براي آن قسمت خاص استايل هاي مد نظرتان را بيافزايد وتاثير آن را مشاهده نماييد، تنها بايد به خاطر داشته باشيد که پس از اينکه کارتان با آن قسمت تمام شد(css موقتي)border اي را که افزوده ايد حذف نماييد. بياييد براي خود قسمتي از سايت را ياد آوري کنيم:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Contact Us at Bubble Under</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="style1.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="header">
<div id="sitebranding">
<h1>BubbleUnder.com</h1>
</div>
<div id="tagline">
<p>Diving club for the south-west UK - let's make a splash!</p>
</div>
</div><!-- end of header div -->
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us </a></li>
</ul>
</div>
<div id="bodycontent">
<h2>Contact Us</h2>
<p>To find out more, contact Club Secretary Bob Dobalina on 01793 641207 or email <a
href="bob@bubbleunder.com">bob@bubbleunder.com</a>.</p>
</div><!-- end of bodycontent div -->
</body>
</html>
حالا بياييد به فايل css خود يک borderبه هر يک از عناصر خود در صفحه اضافه کنيم. اين استايل را در انتهاي فايل css خود درج نماييد، بنابراين باعث مي شود تا براي تمامي عناصر سايت خود بردر را بکار ببريد و عنصري از قلم نيفتد و چنانچه عنصري داراي بردر است اين خصيصه برايش تکرار خواهد شد.
#header, #sitebranding, #tagline, #navigation, #bodycontent {
border: 1px solid red;
padding: 2px;
margin-bottom: 2px;
}
design-web-141.jpg
اين تصوير کمي زشت به نظر مي رسد، درسته؟ اين تصوير حتي براي مدت کوتاهي زشت تر هم خواهد شد زمانيکه ما متن بخش درباره ما را جابجا مي کنيم. همانطور که شما هم مي دانيد زمانيکه ميخواهيد دکوراسون منزل خود را تغيير دهيد تمامي لوازم منزل خود را جا بجا مي کنيد و جاي اصلي آنها را تغيير مي دهيد، زمانيکه در حال انجام اين کار هستيد و نصفي از کار خود را انجام داده ايد با اينکه ظاهر منزل به هم ريخته است اما مي دانيد اين جريان موقتي است و اين به هم ريختگي پايان خواهد يافت. در مورد وب سايت ما و اين تصوير نيز دقيقا همين روند پابرجاست.
موقعيت دهي مطلق( absolute) :
شايد به جرات بتوان گفت که راحت ترين روش براي موقعيت دهي به عناصر استفاده از موقعيت دهي مطلق براي عناصر است. در هنگام استفاده از موقعيت دهي مطلق مي بايست موقعيت آن عنصر را از بالا و چپ صفحه نيز معين کنيم. تصور کنيد از يک مغازه جواهر فروشي مي خواهيد خريد کنيد و آدرس يک قطعه طلا را مي خواهيد به شخص فروشنده بدهيد، مي گوييد " مي توانم آن ساعتي را که در ستون پنجم است و از بالا در رديف سوم قرار دارد را ببينم؟"
استفاده کردن از موقعيت دهي مطلق به سادگي انجام مي شود تنها کافيست که جهت هاي مد نظر خود را (موقعيت آن عنصر از بالا و چپ) در کنار موقعيت مطلق داده شده به عنصر در فايل css آن اضافه نماييد. در مثال زير، ما موقعيت هاي top و left را براي يک div با عرض 90px در نظر گرفته ايم تا هم از بالا و هم از سمت چپ پنجره مرورگرمان به ميزان px200 فاصله ايجاد کرده ايم.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Absolute Positioning</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
#redblock {
position: absolute;
top: 200px;
left: 200px;
color: white;
background-color: red;
width: 90px;
height: 90px;
padding: 5px;
}
</style>
</head>
<body>
<h1>Absolute Positioning</h1>
<div id="redblock">This is the red block.</div>
<p>The red block is positioned 200 pixels from the top and 200 pixels from the left.</p>
</body>
</html>
design-web-142.jpg
آماده شدن براي جابجايي عنصر با استفاده از موقعيت دهي:
در اين قسمت به موقعيت دهي مطلق به عناصر و با توجه به فاصله آنها از بالا و چپ نسبت به پنجره مرورگر شروع مي کنيم. به همين دليل مي بايست ابتدا زماني را در نظر بگيريد و استايل هاي موقتي را که داده ايد حذف کنيد. در نتيجه ما نيز استايل هاي پدينگ و بردر داده شده را که به عنصر body مان داده بوديم پاک مي کنيم.
- فايل style. css را باز کردهو پدينگ و بردر داده شده به عناصر Body را پاک کنيد.
- در عوض به جاي آن، دو خصيصه padding و margin را نوشته و مقادير آنها را برابر با صفر قرار دهيد.
استايل هاي بکار برده شده براي عناصر body شما در فايل css مي بايست مانند زير باشد:
body {
background-color: #e2edff;
font-family: Verdana, Helvetica, Arial, sans-serif;
line-height: 125%;
padding: 0;
margin: 0;
}
design-web-143.jpg
تگ هاي سر تيتر درون صفحه يعني BubbleUnder.com و About Us به وسيله مارجين احاطه شده اند. که اين مارجين توسط مرورگر به آنها داده شده حتي اگر ما خودمان به آنها مارجين ندهيم. ايده خوبي است که بياييم و اين مارجين ها را از بين ببريم وسعي کنيم تا تيترها تا آنجايي که امکان دارد به گوشه بالا و سمت چپ div دربرگيرنده آن نزديک شوند. اين امر باعث مي شود تا موقعيت دهي به تيتر ها براي ما راحتتر شده و همچنين مطمئن مي شويم که صفحه وب ما درون تمامي مرورگر ها به صورت يکسان نمايش مي يابد.
- در فايل style.css تگ h1 را بيابيد.
- خصوصيت جديدي به آن اضافه نماييد و مقدار مارجين آن را برابر با صفر قرار دهيد.
h1 {
font-size: x-large;
background-color: navy;
color: white;
padding-top: 2em;
padding-bottom: .2em;
padding-left: .4em;
margin: 0;
}
- tagline p# را نيز درون فايلcss يافته و مقدار مارجين آن را حذف نماييد:
#tagline p {
font-style: italic;
font-family: Georgia, Times, serif;
background-color: #bed8f3;
border-top: 3px solid #7da5d8;
border-bottom: 3px solid #7da5d8;
padding-top: .2em;
padding-bottom: .2em;
padding-left: .8em;
margin: 0;
}
صفحه سايت خود را refresh نماييد. فواصلي که قبل و بعد از تيترهاي ذکر شده در تصوير بالا گفته شد مي بايست از بين رفته شده باشد و تصويري همانند شکل زير را مشاهده نماييد.
design-web-144.jpg
خوب حالا در اين مرحله سايت شما از هر زمان ديگري زشت تر خواهد شد اما مهم نيست و نبايد نگران باشيد چرا که اين امر موقت است و تنها بايد توجه داشته باشيد که براي اينکه به راحتي جابجا شدن عناصري از صفحه را که مي خواهيد و به صورت مطلق جاي آنها را درون صفحه معين کنيد را مشاهده نماييد به آنها Border اي با رنگ قرمز بدهيد تا جابجايي آنها برايتان مشخص باشد. سپس به انتهاي فايل css خود خصوصيت جديد زير را اضافه نماييد.
#navigation, #bodycontent, #header {
position: absolute;
}
حالا فايل css را ذخيره کرده و مجددا صفحه سايت را refresh نماييد.
• به هيچ وجه از به هم ريختگي سايت خود نگران نشويد !
حتما الان از به هم ريختگي سايت خود ناراحت هستيد و با خود مي گوييد که آيا هر بار که مي خواهيد از موقعيت دهي مطلق استفاده نماييد با همچين صحنه اي روبرو خواهيد شد؟! بسياري از طراحان وب سايت براي هر عنصري از سايت که مي خواهند از موقعيت دهي مطلق استفاده کنند از همان ابتدا فاصله آن را از بالا و سمت چپ پنجره مشخص مي نمايند تا آن عنصر سر جاي خود قرار گيرد و با تصويري مانند آنچه که شما با آن مواجه شده ايد را برخورد نکنند، اين کار تنها با تمرين امکان پذير است و به نظر من اهميت کار در اينجاست که شما با اين روند به طور کامل آشنا شويد.
design-web-145.jpg
همانطور که ميبينيد هر سه قسمتي که مقدار مطلق گرفته اند در گوشه چپ و بالاي سايت بر روي يکديگر افتاده اند، چون ما به مرورگر براي هر يک از آنها مقدار مجزايي نداده ايم و بنابراين مرورگر تنها آنها را همانطور که در سورس مقدار دهي شده اند نمايش مي دهد. تنها مي داند که آنها به طور مطلق مقدار دهي شده اند و اينکه موقعيت هر يک از آنها کجاست را نمي داند.
پس بياييد با جابجا کردن محتواي اصلي سايت و منوي راهبري به سمت پايين محتواي تگ Header را ببينيد. در فايل css خود دستور زير را اضافه کنيد:
#navigation, #bodycontent {
top: 120px;
}
اين دستور باعث مي شود تا دو عنصر , #navigation #bodycontent به سمت پايين شيفت يابند. اين تغيير را مي توانيد در تصوير زير ببينيد. حالا موقعيت از top را براي اين دو عنصر تعيين کرديم اما همانطور که در شکل مي بينيد، منوي راهبري و متن درباره ما بر روي هم ديگر افتاده اند پس از سمت چپ به آنها موقعيت (فاصله) مي دهيم تا در کنار يکديگر قرار گيرند. به همين دليل به عنصر bodycontent به اندازه px200 از سمت چپ فاصله مي دهيم تا از منوي راهبري که پهنايي برابر با 180px دارد فاصله گرفته و در کنار آن قرار گيرد.
#header {
position: absolute;
}
#navigation, #bodycontent {
top: 120px;
}
#bodycontent {
left: 200px;
}
design-web-147.jpg
براي اينکه طراحي صفحه سايت ما تمام شود همچنان کمي کار لازم است تا انجام شود:
- محدوده header و tagline تا انتهاي سطر ادامه ندارند.
- بين tagline و h1 فاصله بيهوده اي وجود دارد.
- پدينگ و بردر هاي قرمز داده شده به عناصر را مي بايست حذف کنيم.
- يک يا دو کامنت مي بايست به css مان اضافه کنيم تا توضيح بدهيم که در اين قسمت چه کاري انجام داده ايم.
خوب حالا شروع مي کنيم به ايجاد تغييرات گفته شده در بالا تا طرح نهايي اين صفحه از سايتمان ساخته شود.
- تگ body و منوي راهبري را از بالا به جاي px120 به ميزان 107px فاصله دهيد . اين کار باعث مي شود تا پس از حذف کردن بردر هاي قرمز فاصله ميان تگ ها مناسب باشد.
- سپس به مرورگر ، تگ headerو tagline بگوييد تا سطر را به طور کامل اشغال کنند.(اين کار با اجراي دستور width براربر با 100% عملي خواهد شد.)
- بردرهاي قرمز رنگي را که پيش تر ايجاد کرده بوديم را حذف مي کنيم.
- در نهايت فکر خوبيست تا براي تمامي عناصري که موقعيت مطلق داده ايم کامنتي براي توضيح بنويسيم تا بدانيد که چکاري انجام داده ايد.
به اين ترتيب آنچه که با توضيحات بالا براي ايجاد تغيير در فايل css خود ايجاد کرده ايم، به صورت زير خواهد بود:
/*
This section deals with the position of items on the screen.
It uses absolute positioning - fixed x and y coordinates measured
from the top-left corner of the browser's content display.
*/
#navigation, #bodycontent, #header {
position: absolute;
}
#navigation, #bodycontent {
top: 107px;
}
#bodycontent
left: 200px;
}
#header {
width: 100%;
}
به اين صورت سوال مطرح شده اين است که اين تغييرات وب سايت ما را به چه شکلي در مي آورد؟ صفحه ساخته شده وب شما نيز بايد همانند تصوير زير باشد:
تقريبا مي توان گفت که ظاهر سايت عالي شده است اما يک کار کوچک ديگر نيز مي توان انجام داد تا ديگر طراحي سايت ما عالي به نظر برسد. به تگ Header يک بردر از بالا با ضخامت 3px بدهيد. براي منوي راهبري از همان رنگ آبي اي که براي tagline استفاده کرده ايد و بياييد تا بردر نقطه چين دور منوي راهبري را حذف کنيم. دستورات تغييرات گفته شده نيز بدين صورت خواهد بود:
#navigation {
width: 180px;
background-color: #7da5d8;
}
آغاز فعاليت