طراحی وب سایت
درباره سایت
آخرین مطالب
امکانات وب
شايد به جرات بتوان گفت که راحت ترين روش براي موقعيت دهي به عناصر استفاده از موقعيت دهي مطلق براي عناصر است. در هنگام استفاده از موقعيت دهي مطلق مي بايست موقعيت آن عنصر را از بالا و چپ صفحه نيز معين کنيم. تصور کنيد از يک مغازه جواهر فروشي مي خواهيد خريد کنيد و آدرس يک قطعه طلا را مي خواهيد به شخص فروشنده بدهيد، مي گوييد " مي توانم آن ساعتي را که در ستون پنجم است و از بالا در رديف سوم قرار دارد را ببينم؟"
استفاده کردن از موقعيت دهي مطلق به سادگي انجام مي شود تنها کافيست که جهت هاي مد نظر خود را (موقعيت آن عنصر از بالا و چپ) در کنار موقعيت مطلق داده شده به عنصر در فايل 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;
}
حالا مرورگر خود را refresh نماييد آنچه که ملاحظه مي نماييد مي بايست همانند تصوير زير باشد:
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 دارد فاصله گرفته و در کنار آن قرار گيرد.
design-web-146.jpg
پس با توجه به توضيحات داده شده آنچه که مي بايست به css خود اضافه کنيد تا ظاهر سايت درست شود، بدين صورت است:
#navigation, #bodycontent, #header {
position: absolute;
}
#navigation, #bodycontent {
top: 120px;
}
#bodycontent {
left: 200px;
}
design-web-147.jpg
براي اينکه طراحي صفحه سايت ما تمام شود همچنان کمي کار لازم است تا انجام شود:
- محدوده header و tagline تا انتهاي سطر ادامه ندارند.
- بين tagline و h1 فاصله بيهوده اي وجود دارد.
- پدينگ و بردر هاي قرمز داده شده به عناصر را مي بايست حذف کنيم.
- يک يا دو کامنت مي بايست به css مان اضافه کنيم تا توضيح بدهيم که در اين قسمت چه کاري انجام داده ايم.
خوب حالا شروع مي کنيم به ايجاد تغييرات گفته شده در بالا تا طرح نهايي اين صفحه از سايتمان ساخته شود.
- تگ body و منوي راهبري را از بالا به جاي px120 به ميزان 107px فاصله دهيد . اين کار باعث مي شود تا پس از حذف کردن بردر هاي قرمز فاصله ميان تگ ها مناسب باشد.
- بردرهاي قرمز رنگي را که پيش تر ايجاد کرده بوديم را حذف مي کنيم.
- در نهايت فکر خوبيست تا براي تمامي عناصري که موقعيت مطلق داده ايم کامنتي براي توضيح بنويسيم تا بدانيد که چکاري انجام داده ايد.
به اين ترتيب آنچه که با توضيحات بالا براي ايجاد تغيير در فايل 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 coer of the browser's content display.
*/
#navigation, #bodycontent, #header {
position: absolute;
}
#navigation, #bodycontent {
top: 107px;
}
#bodycontent
left: 200px;
}
#header {
width: 100%;
}
به اين صورت سوال مطرح شده اين است که اين تغييرات وب سايت ما را به چه شکلي در مي آورد؟ صفحه ساخته شده وب شما نيز بايد همانند تصوير زير باشد:
design-web-148.jpg
تقريبا مي توان گفت که ظاهر سايت عالي شده است اما يک کار کوچک ديگر نيز مي توان انجام داد تا ديگر طراحي سايت ما عالي به نظر برسد. به تگ Header يک بردر از بالا با ضخامت 3px بدهيد. براي منوي راهبري از همان رنگ آبي اي که براي tagline استفاده کرده ايد و بياييد تا بردر نقطه چين دور منوي راهبري را حذف کنيم. دستورات تغييرات گفته شده نيز بدين صورت خواهد بود:
#navigation {
width: 180px;
background-color: #7da5d8;
}
#header {
border-top: 3px solid #7da5d8;
}
برچسب: طراحی وب سایت,طراحی سایت,طراحی وب,
نویسنده: rozita