عضویت العربیة English
امام صادق علیه‌السلام: صله رحم و نیکى، حساب (قیامت) را آسان و از گناهان جلوگیرى مى‌کند. کافى، ج2، ص157

آموزش کامل و گام به گام طراحی سایت (بخش سوم)

آموزش کامل و گام به گام طراحی سایت (بخش سوم)
پنج شنبه 28 بهمن 1389  09:32 ب.ظ

 

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  نیز به صورت هماهنگ تغییر می کند.

( البته حداقل عرض این صفحه وب ۸۰۰px  خواهد بود – #container  )

آموزش کامل و گام به گام طراحی سایت (بخش سوم)

مرحله بیست و سوم – logo :

در مرحله قبل و در قسمت لوگو از تگ <h1>  در داخل div  برای جایگزینی لوگو استفاده شد است . تگ های <h1>  یکی از مهمترین تگها از نظر بهینه سازی وب سایت برای موتورهای جستجو هستند که در بالای صفحه و یا ابتدایی ترین خط در صفحه وب قرار میگیرند تا توضیحی هر چند کوتاه در مورد محتویات وب سایت شما باشند.عدم وجود این تگ شاید به نظر شما مشکلی را برای صفحه وب ایجاد نمی کند اما فقط در ظاهر..!؟

این نکته را در نظر داشته باشید استفاده از تکنیکهای غیر استاندارد در طراحی وب سایت و استفاده از متن های مخفی در صفحه وب برای گول زدن موتورهای جستجو از چشم عنکبوت های موتورهای جستجو نادیده نمی ماند و ممکن است وب سایت شما با تحریم از طرف این موتورهای جستجو مواجه شود . بنابر این فکر استفاده از تکنیکهای غیر استاندارد و زیرکانه را از ذهن خود خارج کنید و به محتوای وب سایت خود بپردازید.

برای قرار دادن لوگو در جای پیش فرض  از تکنیک ساده زیر استفاده شده است.

  1. #logo {
  2. background: url(images/logo.png) no-repeat;
  3. height: ۸۴px;
  4. width: ۲۳۵px;
  5. }

آموزش کامل و گام به گام طراحی سایت (بخش سوم)

در صورت تعیین نکردن اندازه برای  #logo   تصویر پس زمینه به طور کامل نمایش داده نخواهد شد. بنابر این با در نظر گرفتن اندازه تصویر ،  اندازه آن را برای #logo   مشخص نموده ایم  و برای پنهان کردن نوشته Logo   در داخل تگ <h1>    از کد زیر استفاده نموده ایم .

  1. #logo h1 {
  2. text-indent: -۹۹۹۹px;
  3. }

در حال حاضر نمایش صفحه وب به صورت زیر خواهد بود.ملاحظه می نمایید که اثری از نوشته Logo   در زیر تصویرلوگو نیست و لوگو به بالای صفحه چسبیده است. برای ایجاد فاصله در بالای صفحه وب از خاصیت Padding  برای #header  استفاده می نماییم . تفاوت استفاده از margin   و یا padding  در این است که در صورت استفاده از margin  کل مرزهای تگ جابه جا خواهند شد و در صورت استفاده از padding  فقط محتویات تگ جابه جا می شوند و مرزهای تگ در جای خود باقی خواهند ماند.

  1. #header {
  2. padding-top: ۴۰px;
  3. }

 

آموزش کامل و گام به گام طراحی سایت (بخش سوم)

مرحله بیست و چهارم – tagline ( شعار تبلیغاتی ):

در مرحله قبل در مورد استفاده از تگهای <h?>  و همچنین مزیت های آن بحث شد. برای ایجاد شعار تبلیغاتی به صورت پیش فرض و شکل دهی به آن طبق مراحل زیر عمل می کنیم.

با نگاهی به طرح پیش فرض طراحی شده و نوع تگ های html  استفاده شده باید راهی برای قرار دادن لوگو و شعار تبلیغاتی در کنار یکدیگر پیدا نمود . برای حل این مشکل از خاصیت float  در تگهای div   استفاده می شود. خاصیت float  باعث شناور شدن تگهای div   در صفحه وب , و افزایش  قدرت طراحان وب برای ایجاد صفحات جذاب تر می شود.

برای قرار دادن لوگو در سمت چپ ( left  )   خاصیت float را با مقدار left   به #logo    اضافه می کنیم .

  1. #logo {
  2. background: url(images/logo.png) no-repeat;
  3. height: ۸۴px;
  4. width: ۲۳۵px;
  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>

به کدهای html  مرحله قبل باز گردید و یک div  با یک کد سی اس اس کوچک به بخش  header  اضافه نمایید ( به خط هشتم در کدهای بالا دقت نمایید ).با استفاده از خاصیت ( clear:both ) برای این  div  تمامی تگ های چپ و راست به زیر این  div  تغییر موقعیت خواهند داد و مشکل بر طرف خواهد شد. این تکنیک کاربرد زیادی در طراحی صفحات وب با استفاده از div  ها دارد.

سر و شکل مناسبی به رنگ و اندازه شعار تبلیغاتی خود بدهید.

  1. #tagline h3 {font-size: ۳۰px; color: #e4dfdf; }

و جای آن را طبق طرح پیش فرض تصحیح کنید.

  1. #tagline {
  2. float: left;
  3. padding-top: ۲۰px;
  4. padding-left: ۲۰px;
  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: ۳۰px;
  6. color: #۶۷۶۶۶۶;
  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  اضافه شده است )

  1. <ul id=”menu”>
  2. <li><a href=”#”>Home</a></li>
  3. <li><a href=”#”>About</a></li>
  4. <li><a href=”#”>Portfolio</a></li>
  5. <li><a href=”#”>Contact</a></li>
  6. </ul>
  7. <div style=”clear:both”></div>
  8. </div><!–end header –>

برای ایجاد فاصله مناسب و جایگیری منوها در جای پیش فرض کدهای سی اس اس به صورت زیر تصحیح خواهند شد.

  1. ul#menu {
  2. list-style: none;
  3. padding-top: ۵۰px;
  4. }
  5. ul#menu li {
  6. float: left;
  7. padding-left: 30px;
  8. padding-right: 75px;
  9. width: ۹۵px; }

آموزش کامل و گام به گام طراحی سایت (بخش سوم)

مرحله بیست و ششم – content :

طبق طرح پیش فرض در این قسمت از فونت های مختلف با رنگها و اندازه های مختلف برای نشان دادن درجه اهمیت مطالب استفاده شده است. طبق کدهای html  نوشته شده برای هر یک از این تگها می توان یک style  خاص نوشت و آنها را به راحتی کنترل نمود.

  1. #content h2 {
  2. font-size: ۳۶px;
  3. color: #۰۱۵۸۷۸;
  4. }
  5. #content h3 {
  6. font-size: ۲۴px;
  7. color: #۴۴۴۴۴۴;
  8. }
  9. #content h4 {
  10. font-size: ۱۸px;
  11. color: #۳۷۳۷۳۷;
  12. font-weight: normal;
  13. }
  14. #content p {
  15. font-size: ۱۴px;
  16. color: #۵۹۵۸۵۸;
  17. }
  18. #content small {
  19. font-size: ۱۲px;
  20. color: #۳۷۳۷۳۷;
  21. }
  22. #content a {
  23. color: #۰f6c8d;
  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: ۳۶px;
  3. color: #۰۱۵۸۷۸;
  4. padding-top: ۲۵px;
  5. }

ایجاد فاصله مابین تگ    <h2> و <h3>  با درجات اهمیت متفاوت.

  1. #content h3 {
  2. font-size: ۲۴px;
  3. color: #۴۴۴۴۴۴;
  4. padding : ۲۰px  ۰px;
  5. }

ایجاد فاصله مابین پاراگراف <p>  و <h3>

  1. #content p {
  2. font-size: ۱۴px;
  3. color: #۵۹۵۸۵۸;
  4. padding-top: ۲۰px;
  5. }

بهتر است نگاهی به نتیجه کار تا اینجا داشته باشیم .

آموزش کامل و گام به گام طراحی سایت (بخش سوم)

طبق طرح پیش فرض کدهای سی اس اس #news   را نیز به صورت زیر می نویسیم .

  1. #news {
  2. padding-top: ۱۰px;
  3. }
  4. #news h3 {
  5. padding-bottom: ۱۰px;
  6. }
  7. #news p {
  8. padding-top: ۱۰px;
  9. padding-bottom: ۱۴px;
  10. }

و نتیجه آن به صورت زیر خواهد بود.

آموزش کامل و گام به گام طراحی سایت (بخش سوم)

مرحله بیست و هفتم – Side bar :

برای ایجاد و سر و شکل دادن به این جزء ابتدا لازم است #content  را طبق طرح پیش فرض با استفاده از اندازه ها مقید کنیم و چینش آن را با استفاده از float تعیین کنیم و آن را به صورت یک div  شناور در بیاوریم تا بتوانیم #sidebar  را در کنار آن قرار دهیم .

  1. #content {
  2. width: ۵۱۰px;
  3. float: left;
  4. }
  5. #sidebar {
  6. float: left;
  7. }

اگر هم اکنون نگاهی به صفحه وب خود بیاندازید متوجه مشکلی که در مراحل قبل نیز با تگ های شناور داشتیم خواهید شد ( #footer  به سمت راست #sidebar  تغییر مکان داده است ) و برای  حل  آن طبق مراحل قبل از یک div  با خصوصیت  clear:both  در انتهای #sidebar  استفاده می نماییم .

آموزش کامل و گام به گام طراحی سایت (بخش سوم)

  1. <div id=”contributors”>
  2. <h3>Contributors</h3>
  3. <ul>
  4. <li><a href=”#”>John Smith, freelance writer</a></li>
  5. <li><a href=”#”>Jack McCoy, designer</a></li>
  6. <li><a href=”#”>Lenny Briscoe, editor</a></li>
  7. <li><a href=”#”>John Smith, martketing</a></li>
  8. </ul>
  9. <a href=”#”>Join Our Team</a>
  10. </div>
  11. </div><!–end sidebar–>
  12. <div style=”clear:both”></div>
  13. </div><!–end main container–>
  14. </div><!–end main–>

بخش #sidebar  از سه قسمت متفاوت با اندازه ها ، فاصله ها و رنگهای مختلف تشکیل شده است ، بنابر این با استفاده از کدهای سی اس اس طبق طرح پیش فرض ( مشخصات استفاده شده برای text  ها در طرح پیش فرض ) آنها را به شکل و مکان پیش فرض در خواهیم آورد و هدایت می کنیم.

  1. #sidebar {
  2. float: left;
  3. margin-left: ۵۵px;
  4. margin-top: ۳۵px;
  5. background: #d4d6d3;
  6. border: ۱px solid #BEBDBD;
  7. padding: ۱۵px;
  8. }
  9. #sidebar h3 {
  10. font-size: ۲۴px;
  11. color: #۰۴۴۰۵۵;
  12. font-weight: normal;
  13. padding-bottom: ۲۰px;
  14. padding-left: ۱۵px;
  15. }
  16. #sidebar ul {
  17. list-style: none;
  18. padding-bottom: ۲۵px;
  19. }
  20. #sidebar ul li a {
  21. font-size: ۱۴px;
  22. color: #۳۹۳۸۳۸;
  23. }
  24. ul#subscribe li {
  25. padding-bottom: ۵px;
  26. }
  27. ul#subscribe li a {
  28. font-size: ۱۸px;
  29. }

آموزش کامل و گام به گام طراحی سایت (بخش سوم)

طبق طرح پیش فرض از سه آیکون برای معرفی خدمات وبلاگ استفاده شده است که با استفاده از کدهای سی اس اس آنها را در صفحه وب خود جا گذاری می نماییم.

  1. ul#subscribe li {
  2. padding-bottom: ۵px;
  3. padding-left: ۳۵px;
  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>

و کدهای سی اس اس برای هر کدام از اجزاء

  1. li#rss {
  2. background: url(/..images/rss_icon.png) no-repeat;
  3. }
  1. li#email {
  2. background: url(/..images/email_icon.png) no-repeat;
  3. }
  1. li#twitter {
  2. background: url(/..images/twitter_icon.png) no-repeat;
  3. }

به آدرس دهی ها در کدهای سی اس اس بسیار دقت نمایید . برای آدرس دهی ابتدا یک ریشه بالا آمده و سپس در فولدر images  آدرس دهی می کنیم . توجه داشته باشید که کدهای  سی اس اس  درفولدر  css  قرار داده شده اند.

و در اینجا نگاهی به صفحه وب .

آموزش کامل و گام به گام طراحی سایت (بخش سوم)

طبق طرح پیش فرض جای button  سبز رنگ در زیر #sidbar خالی است که با مقداری تصحیح در کدهای html  و چند خط کد سی اس اس آن را نیز در جای مناسب قرار خواهیم داد.

  1. <a href=”#” class=”button”>Join Our Team</a>

طبق کدهای بالا ملاحظه می نمایید که با استفاده از علامت گذاری تگ <a>  با استفاده از id  کنترل بیشتری بر روی آن به وسیله کدهای  سی اس اس انجام خواهد گرفت.

  1. a.button {
  2. color: #۳۹۳۸۳۸;
  3. text-decoration: none;
  4. background: url(/..images/button_slice.jpg) repeat-x;
  5. margin-left: ۱۴px;
  6. padding: ۱۳px ۲۳px;
  7. }

با اندازه گذاری دقیق و استفاده از خصوصیت های margin و padding  می توانید به خوبی مکان قرار گیری اجزاء را تغییر دهید و کنترل نمایید.

آموزش کامل و گام به گام طراحی سایت (بخش سوم)

با انجام تصحیحاتی در کدهای سی اس اس #sidebar  مکان آن را به دقت تنظیم و تصحیح می نماییم.

  1. #sidebar {
  2. float: left;
  3. margin-left: ۵۵px;
  4. margin-top: ۳۵px;
  5. background: #d4d6d3;
  6. border: ۱px solid #BEBDBD;
  7. padding: ۱۵px ۱۵px ۳۰px ۱۵px;
  8. }

مرحله بیست و هشتم – footer :

 

این قسمت نیز شباهت زیادی به بخش header  صفحه وب دارد و همانند گذشته و مراحل قبل به صورت زیر عمل می نماییم . تصویر footer_slice.jpg  در پس زمینه #footer  تکرار خواهد شد.

آموزش کامل و گام به گام طراحی سایت (بخش سوم)

آموزش کامل و گام به گام طراحی سایت (بخش سوم)

  1. #footer {
  2. background: url/..) images/footer_slice.jpg) repeat-x;
  3. padding-top: ۲۰px;
  4. padding-bottom:60px;
  5. margin-top: ۴۰px;
  6. color: #fff;
  7. }

و در انتها همه چیز آماده است برای بهره برداری.

آموزش کامل و گام به گام طراحی سایت (بخش سوم)

کریمی که جهان پاینده دارد               تواند حجتی را زنده دارد

 

دانلود پروژه و کارآموزی و کارافرینی

mohamadaminsh

mohamadaminsh
کاربر طلایی1
تاریخ عضویت : دی 1389 
تعداد پست ها : 25772
محل سکونت : خوزستان
دسترسی سریع به انجمن ها