Css Reset
بسیاری از نمایشگر های صفحات وب ( IE , FireFox ,Opera ,… ) به صورت پیش فرض padding و margin های متفاوتی را مورد استفاده قرار می دهند . به دلیل استاندارد سازی و یکسان سازی نمایش صفحات وب برای تمامی نمایشگرها تمامی این padding و margin ها به صورت یکسان در می آیند.
-
body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }
مرحله بیست و دوم – header :
حالا همه چیز برای شروع به شکل دهی صفحه وب از بالا به پایین آماده است . برای شکل دادن به اولین قسمت این صفحه وب ( header ) از تصویر برش داده شده در بخش دوم برای تصویرپس زمینه استفاده خواهیم کرد.
این تصویر درپس زمینه #main به صورت تکرار قرار می گیرد ، به دلیل اینکه خاصیت گسترش در تمامی رزولوشن ها و نمایشگرها را داشته باشد.
-
#main {
-
background: url(images/header_slice.jpg) repeat-x;
-
}
طبق کدهای بالا ملاحظه می نمایید که تصویر header_slice.jpg به صورت افقی تکرار می شود تا تمامی عرض صفحه وب را پوشش دهد ( repeat-x ) . در صورت تغییر عرض صفحه نمایشگر و یا رزولوشن عرض #header نیز به صورت هماهنگ تغییر می کند.
( البته حداقل عرض این صفحه وب ۸۰۰px خواهد بود – #container )
مرحله بیست و سوم – logo :
در مرحله قبل و در قسمت لوگو از تگ <h1> در داخل div برای جایگزینی لوگو استفاده شد است . تگ های <h1> یکی از مهمترین تگها از نظر بهینه سازی وب سایت برای موتورهای جستجو هستند که در بالای صفحه و یا ابتدایی ترین خط در صفحه وب قرار میگیرند تا توضیحی هر چند کوتاه در مورد محتویات وب سایت شما باشند.عدم وجود این تگ شاید به نظر شما مشکلی را برای صفحه وب ایجاد نمی کند اما فقط در ظاهر..!؟
این نکته را در نظر داشته باشید استفاده از تکنیکهای غیر استاندارد در طراحی وب سایت و استفاده از متن های مخفی در صفحه وب برای گول زدن موتورهای جستجو از چشم عنکبوت های موتورهای جستجو نادیده نمی ماند و ممکن است وب سایت شما با تحریم از طرف این موتورهای جستجو مواجه شود . بنابر این فکر استفاده از تکنیکهای غیر استاندارد و زیرکانه را از ذهن خود خارج کنید و به محتوای وب سایت خود بپردازید.
برای قرار دادن لوگو در جای پیش فرض از تکنیک ساده زیر استفاده شده است.
-
#logo {
-
background: url(images/logo.png) no-repeat;
-
height: ۸۴px;
-
width: ۲۳۵px;
-
}
در صورت تعیین نکردن اندازه برای #logo تصویر پس زمینه به طور کامل نمایش داده نخواهد شد. بنابر این با در نظر گرفتن اندازه تصویر ، اندازه آن را برای #logo مشخص نموده ایم و برای پنهان کردن نوشته Logo در داخل تگ <h1> از کد زیر استفاده نموده ایم .
-
#logo h1 {
-
text-indent: -۹۹۹۹px;
-
}
در حال حاضر نمایش صفحه وب به صورت زیر خواهد بود.ملاحظه می نمایید که اثری از نوشته Logo در زیر تصویرلوگو نیست و لوگو به بالای صفحه چسبیده است. برای ایجاد فاصله در بالای صفحه وب از خاصیت Padding برای #header استفاده می نماییم . تفاوت استفاده از margin و یا padding در این است که در صورت استفاده از margin کل مرزهای تگ جابه جا خواهند شد و در صورت استفاده از padding فقط محتویات تگ جابه جا می شوند و مرزهای تگ در جای خود باقی خواهند ماند.
-
#header {
-
padding-top: ۴۰px;
-
}
مرحله بیست و چهارم – tagline ( شعار تبلیغاتی ):
در مرحله قبل در مورد استفاده از تگهای <h?> و همچنین مزیت های آن بحث شد. برای ایجاد شعار تبلیغاتی به صورت پیش فرض و شکل دهی به آن طبق مراحل زیر عمل می کنیم.
با نگاهی به طرح پیش فرض طراحی شده و نوع تگ های html استفاده شده باید راهی برای قرار دادن لوگو و شعار تبلیغاتی در کنار یکدیگر پیدا نمود . برای حل این مشکل از خاصیت float در تگهای div استفاده می شود. خاصیت float باعث شناور شدن تگهای div در صفحه وب , و افزایش قدرت طراحان وب برای ایجاد صفحات جذاب تر می شود.
برای قرار دادن لوگو در سمت چپ ( left ) خاصیت float را با مقدار left به #logo اضافه می کنیم .
-
#logo {
-
background: url(images/logo.png) no-repeat;
-
height: ۸۴px;
-
width: ۲۳۵px;
-
float: left;
-
}
با نگاهی به تصویر ملاحطه می نمایید که div های tagline و navigation از پایین #logo به سمت راست آن تغییر موقعیت داده اند.
استفاده از float تگ را به اندازه واقعی خود مقید می کند . قبل از اضافه نمودن خاصیت float ملاحظه نموده اید که تگهای div مورد استفاده در header صفحه به صورت پله ای در زیر یکدیگر قرار گرفته بودند و هر یک فضای اطراف خود را نیز اشغال نموده و اجازه قرار گرفتن تگهای دیگر را در کنار خود نمی دادند.
حال برای #tagline نیز از خاصیت float:left استفاده می نماییم.
-
#tagline {
-
float: left;
-
}
پس از اضافه نمودن این خاصیت به #tagline ملاحظه می نمایید که #navigation نیز در سمت راست #tagline قرار گرفته و تغییر موقعیت داده است . برای رفع این مشکل می توان از تکنیک زیر استفاده نمود.
-
<div id=”header”>
-
<div id=”logo”>
-
<h1>Logo</h1>
-
</div>
-
<div id=”tagline”>
-
<h3>And a little tagline, too.</h3>
-
</div>
-
<div style=”clear:both”></div>
به کدهای html مرحله قبل باز گردید و یک div با یک کد سی اس اس کوچک به بخش header اضافه نمایید ( به خط هشتم در کدهای بالا دقت نمایید ).با استفاده از خاصیت ( clear:both ) برای این div تمامی تگ های چپ و راست به زیر این div تغییر موقعیت خواهند داد و مشکل بر طرف خواهد شد. این تکنیک کاربرد زیادی در طراحی صفحات وب با استفاده از div ها دارد.
سر و شکل مناسبی به رنگ و اندازه شعار تبلیغاتی خود بدهید.
-
#tagline h3 {font-size: ۳۰px; color: #e4dfdf; }
و جای آن را طبق طرح پیش فرض تصحیح کنید.
-
#tagline {
-
float: left;
-
padding-top: ۲۰px;
-
padding-left: ۲۰px;
-
width: 400px;
-
}
حال نگاهی به صفحه وب می اندازیم.
مرحله بیست و پنجم – navigation :
منوها یکی از مهمترین اجزاء تشکیل دهنده هر وب سایت هستند که علاوه بر افزایش زیبایی باید به دسترسی پذیری وب سایت نیز کمک کنند و استفاده از آنها برای عموم مخاطبان بسیار ساده باشد.
در طراحی های امروزی از لیستها ( تگهای <ul> ،<li> ) برای طراحی منوها استفاده می شود .
با توجه به مرحله قبل و navigation طراحی شده به صورت پیش فرض از کدهای سی اس اس زیر برای طراحی ساختار navigation استفاده می نماییم.
-
ul#menu {
-
list-style: none;
-
}
-
ul#menu li a {
-
font-size: ۳۰px;
-
color: #۶۷۶۶۶۶;
-
text-decoration: none;
-
}
طبق کدهای بالا ملاحظه می نمایید که با استفاده از خصوصیت list-style : none اشکال مورد استفاده در لیست ها را از کنار اجزاء آن حذف نمودیم و اندازه ، رنگ و… را برای لینک ها تعیین کردیم.
برای شناور نمودن #menu و چینش آن در سمت چپ از خصوصیت float:left برای تگهای <li> موجود در زیر شاخه #menu استفاده می نماییم.
-
ul#menu li {
-
float: left;
-
}
اگر نگاهی دوباره به صفحه وب در مرورگر خود داشته باشیم خواهیم دید مشکل مرحله قبل در استفاده از خاصیت float ( قرار گرفتن اجزاء پایینی در کنار #menu ) تکرار شده است و برای حل آن از تکنیک مرحله قبل استفاده خواهیم کرد ، بنا براین به مرحله کد نویسی html باز می گردیم و کد ها را به صورت زیر تغییر می دهیم . ) تگ div با خصوصیت clear:both اضافه شده است )
-
<ul id=”menu”>
-
<li><a href=”#”>Home</a></li>
-
<li><a href=”#”>About</a></li>
-
<li><a href=”#”>Portfolio</a></li>
-
<li><a href=”#”>Contact</a></li>
-
</ul>
-
<div style=”clear:both”></div>
-
</div><!–end header –>
برای ایجاد فاصله مناسب و جایگیری منوها در جای پیش فرض کدهای سی اس اس به صورت زیر تصحیح خواهند شد.
-
ul#menu {
-
list-style: none;
-
padding-top: ۵۰px;
-
}
-
ul#menu li {
-
float: left;
-
padding-left: 30px;
-
padding-right: 75px;
-
width: ۹۵px; }
مرحله بیست و ششم – content :
طبق طرح پیش فرض در این قسمت از فونت های مختلف با رنگها و اندازه های مختلف برای نشان دادن درجه اهمیت مطالب استفاده شده است. طبق کدهای html نوشته شده برای هر یک از این تگها می توان یک style خاص نوشت و آنها را به راحتی کنترل نمود.
-
#content h2 {
-
font-size: ۳۶px;
-
color: #۰۱۵۸۷۸;
-
}
-
#content h3 {
-
font-size: ۲۴px;
-
color: #۴۴۴۴۴۴;
-
}
-
#content h4 {
-
font-size: ۱۸px;
-
color: #۳۷۳۷۳۷;
-
font-weight: normal;
-
}
-
#content p {
-
font-size: ۱۴px;
-
color: #۵۹۵۸۵۸;
-
}
-
#content small {
-
font-size: ۱۲px;
-
color: #۳۷۳۷۳۷;
-
}
-
#content a {
-
color: #۰f6c8d;
-
font-weight: bold;
-
text-decoration: none;
-
}
خوب کدهای اولیه بر طبق پیش فرض به صورت بالا خواهند بود و در ادامه به اصلاح وتکمیل آنها خواهیم پرداخت.
خوانایی متون در یک صفحه وب جزئی از اصول ابتدایی است که با نگاهی به صفحه وب متوجه خواهید شد که هنوز رنگی را برای پس زمینه محتوای صفحه وب انتخاب ننموده ایم . رنگ پیش فرض سفید است و با توجه به رنگ بندی صفحه وب و طرح پیش فرض رنگ #ebe8e8 را برای تگ body انتخاب می نماییم و کدهای سی اس اس اولیه را به صورت زیر تکمیل می نماییم.
-
body {
-
font-family: Arial, Helvetica, sans-serif;
-
background: #ebe8e8;
-
}
پس از انتخاب رنگ پس زمینه مناسب به نکته ای دیگر برای هر چه بهتر شدن خوانایی و ظاهر صفحه وب خواهیم رسید . این نکته رعایت فواصل مناسب ما بین اجزاء تشکیل دهنده یک صفحه وب و در اینجا ما بین متون است. فاصله بین پاراگراف ها ، عناوین با درجه اهمیت متفاوت و …..
قبل از انجام تغییرات تکمیلی صفحه وب به شکل زیر خواهد بود.
ایجاد فاصله مابین navigation و تگ <h2> عنوان متن content
-
#content h2 {
-
font-size: ۳۶px;
-
color: #۰۱۵۸۷۸;
-
padding-top: ۲۵px;
-
}
ایجاد فاصله مابین تگ <h2> و <h3> با درجات اهمیت متفاوت.
-
#content h3 {
-
font-size: ۲۴px;
-
color: #۴۴۴۴۴۴;
-
padding : ۲۰px ۰px;
-
}
ایجاد فاصله مابین پاراگراف <p> و <h3>
-
#content p {
-
font-size: ۱۴px;
-
color: #۵۹۵۸۵۸;
-
padding-top: ۲۰px;
-
}
بهتر است نگاهی به نتیجه کار تا اینجا داشته باشیم .
طبق طرح پیش فرض کدهای سی اس اس #news را نیز به صورت زیر می نویسیم .
-
#news {
-
padding-top: ۱۰px;
-
}
-
#news h3 {
-
padding-bottom: ۱۰px;
-
}
-
#news p {
-
padding-top: ۱۰px;
-
padding-bottom: ۱۴px;
-
}
و نتیجه آن به صورت زیر خواهد بود.
مرحله بیست و هفتم – Side bar :
برای ایجاد و سر و شکل دادن به این جزء ابتدا لازم است #content را طبق طرح پیش فرض با استفاده از اندازه ها مقید کنیم و چینش آن را با استفاده از float تعیین کنیم و آن را به صورت یک div شناور در بیاوریم تا بتوانیم #sidebar را در کنار آن قرار دهیم .
-
#content {
-
width: ۵۱۰px;
-
float: left;
-
}
-
#sidebar {
-
float: left;
-
}
اگر هم اکنون نگاهی به صفحه وب خود بیاندازید متوجه مشکلی که در مراحل قبل نیز با تگ های شناور داشتیم خواهید شد ( #footer به سمت راست #sidebar تغییر مکان داده است ) و برای حل آن طبق مراحل قبل از یک div با خصوصیت clear:both در انتهای #sidebar استفاده می نماییم .
-
<div id=”contributors”>
-
-
<h3>Contributors</h3>
-
<ul>
-
<li><a href=”#”>John Smith, freelance writer</a></li>
-
<li><a href=”#”>Jack McCoy, designer</a></li>
-
<li><a href=”#”>Lenny Briscoe, editor</a></li>
-
<li><a href=”#”>John Smith, martketing</a></li>
-
</ul>
-
<a href=”#”>Join Our Team</a>
-
</div>
-
</div><!–end sidebar–>
-
<div style=”clear:both”></div>
-
</div><!–end main container–>
-
</div><!–end main–>
بخش #sidebar از سه قسمت متفاوت با اندازه ها ، فاصله ها و رنگهای مختلف تشکیل شده است ، بنابر این با استفاده از کدهای سی اس اس طبق طرح پیش فرض ( مشخصات استفاده شده برای text ها در طرح پیش فرض ) آنها را به شکل و مکان پیش فرض در خواهیم آورد و هدایت می کنیم.
-
#sidebar {
-
float: left;
-
margin-left: ۵۵px;
-
margin-top: ۳۵px;
-
background: #d4d6d3;
-
border: ۱px solid #BEBDBD;
-
padding: ۱۵px;
-
}
-
#sidebar h3 {
-
font-size: ۲۴px;
-
color: #۰۴۴۰۵۵;
-
font-weight: normal;
-
padding-bottom: ۲۰px;
-
padding-left: ۱۵px;
-
}
-
#sidebar ul {
-
list-style: none;
-
padding-bottom: ۲۵px;
-
}
-
#sidebar ul li a {
-
font-size: ۱۴px;
-
color: #۳۹۳۸۳۸;
-
}
-
ul#subscribe li {
-
padding-bottom: ۵px;
-
}
-
ul#subscribe li a {
-
font-size: ۱۸px;
-
}
طبق طرح پیش فرض از سه آیکون برای معرفی خدمات وبلاگ استفاده شده است که با استفاده از کدهای سی اس اس آنها را در صفحه وب خود جا گذاری می نماییم.
-
ul#subscribe li {
-
padding-bottom: ۵px;
-
padding-left: ۳۵px;
-
}
ابتدا با استفاده از Padding یک فضای خالی برای آیکون ها در تگهای <li> زیر شاخه #subscribe ایجاد می نماییم .
سپس با اندکی تغییر در کدهای html این قسمت و دادن id های مجزا برای کنترل بیشتر بر روی اجزاء آیکون ها را با استفاده از خصوصیت background وارد می نماییم.
-
<ul id=”subscribe”>
-
<li id=”rss”><a href=”#”>Subscribe via RSS</a></li>
-
<li id=”email”><a href=”#”>Get Email Updates</a></li>
-
<li id=”twitter”><a href=”#”>Follow us on Twitter</a></li>
-
</ul>
و کدهای سی اس اس برای هر کدام از اجزاء
-
li#rss {
-
background: url(/..images/rss_icon.png) no-repeat;
-
}
-
li#email {
-
background: url(/..images/email_icon.png) no-repeat;
-
}
-
li#twitter {
-
background: url(/..images/twitter_icon.png) no-repeat;
-
}
به آدرس دهی ها در کدهای سی اس اس بسیار دقت نمایید . برای آدرس دهی ابتدا یک ریشه بالا آمده و سپس در فولدر images آدرس دهی می کنیم . توجه داشته باشید که کدهای سی اس اس درفولدر css قرار داده شده اند.
و در اینجا نگاهی به صفحه وب .
طبق طرح پیش فرض جای button سبز رنگ در زیر #sidbar خالی است که با مقداری تصحیح در کدهای html و چند خط کد سی اس اس آن را نیز در جای مناسب قرار خواهیم داد.
-
<a href=”#” class=”button”>Join Our Team</a>
طبق کدهای بالا ملاحظه می نمایید که با استفاده از علامت گذاری تگ <a> با استفاده از id کنترل بیشتری بر روی آن به وسیله کدهای سی اس اس انجام خواهد گرفت.
-
a.button {
-
color: #۳۹۳۸۳۸;
-
text-decoration: none;
-
background: url(/..images/button_slice.jpg) repeat-x;
-
margin-left: ۱۴px;
-
padding: ۱۳px ۲۳px;
-
}
با اندازه گذاری دقیق و استفاده از خصوصیت های margin و padding می توانید به خوبی مکان قرار گیری اجزاء را تغییر دهید و کنترل نمایید.
با انجام تصحیحاتی در کدهای سی اس اس #sidebar مکان آن را به دقت تنظیم و تصحیح می نماییم.
-
#sidebar {
-
float: left;
-
margin-left: ۵۵px;
-
margin-top: ۳۵px;
-
background: #d4d6d3;
-
border: ۱px solid #BEBDBD;
-
padding: ۱۵px ۱۵px ۳۰px ۱۵px;
-
}
مرحله بیست و هشتم – footer :
این قسمت نیز شباهت زیادی به بخش header صفحه وب دارد و همانند گذشته و مراحل قبل به صورت زیر عمل می نماییم . تصویر footer_slice.jpg در پس زمینه #footer تکرار خواهد شد.
-
#footer {
-
-
background: url/..) images/footer_slice.jpg) repeat-x;
-
padding-top: ۲۰px;
-
padding-bottom:60px;
-
margin-top: ۴۰px;
-
color: #fff;
-
}
و در انتها همه چیز آماده است برای بهره برداری.
میتوانید دموی نهایی و فایلهای سورس را از این قسمت دانلود نمایید :
دمو آنلاین
دانلود سورس فایلهای CSS و Html
دانلود فایل PSD قالب
دانلود خودآموز بصورت PDF
در انتهای این خود آموز لازم دانستم تا نکاتی در مورد طراحی یک وب سایت را به صورت عملی گوشزد کنم .
اولین نکته اینکه ، طراحی وب امریست سلیقه ای البته با چهار چوب های مشخص و استاندارد های اولیه و شما می توانید با دانش کافی و استفاده از تکنیکهای مناسب ایده های خودتان را در غالب یک وب سایت پیاده سازی نمایید.
دوم اینکه ، طراحان مختلف با سبک ها و متد های مختلفی اقدام به طراحی وب سایت می نمایند . روش شما روشیست که شما را زودتر و بهتر به هدفتان نزدیک کند.
هیچ طراحی از اشتباه مبرا نیست و سعی شده در طول این خود آموز از اشتباهات اجتناب شود . در صورت مشاهده هر گونه اشتباه و یا نقطه نظر تکمیلی خوشحال می شویم تا با ما گفتگو کنید حتی به بهانه یک سلام .
با امید موفقیت روز افزون. امیر سروری
