Ten blog nie jest już rozwijany. Wraz ze wszystkimi artykułami zostały przeniesiony pod adres wmroczkowski.pl

Czy chcesz przejść pod nowy adres?

sobota, 20 czerwca 2009

Szablon strony HTML z podziałem na nagłówek, treść, prawe menu i stopkę zbudowany za pomocą CSS

Dzisiaj pokażę jak zrobić prosty i przejrzysty szablon strony zbudowany za pomocą CSS. Szablon będzie wyglądał mniej więcej tak:



Aby go zrobić zaczniemy od utworzenie struktury strony, a więc od utworzenia pliku index.html. Kod wygląda następująco:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

  2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  3. <html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">

  4. <head>

  5. <title>Szablon strony w CSS</title>

  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  7. <meta http-equiv="Content-Language" content="pl" />

  8. <link rel="stylesheet" type="text/css" href="style.css">

  9. </head>

  10. <body>

  11.  

  12. <div id="naglowek">

  13. <h1>Nagłówek strony</h1>

  14. </div>

  15.  

  16. <div id="menu">

  17. <h2>Menu:</h2>

  18. <ul>

  19. <li>Link 1</li>

  20. <li>Link 2</li>

  21. <li>Link 3</li>

  22. <li>Link 4</li>

  23. <li>Link 5</li>

  24. <li>Link 6</li>

  25. <li>Link 7</li>

  26. </ul>

  27. </div>

  28.  

  29. <div id="tresc">

  30. <p> Tutaj umieszczamy główną treść strony, a więc wszystko co ma znaleźć się
    w środkowej części naszej strony.

  31. </p>

  32. </div>

  33.  

  34. <div id="stopka">

  35. &copy; 2009 <a href="http://spaceofcode.blogspot.com">spaceofcode.blogspot.com</a>

  36. </div>

  37. </body>

  38. </html>

  39.  



A teraz przechodzimy do określenia prezentacji strony, a więc tworzymy plik style.css i umieszczamy w nim następujący kod:

  1. body

  2. {

  3. background-color: #b5a789;

  4. font-family: Georgia, "Times New Roman", Times, serif;

  5. font-size: small;

  6. margin: 0px;

  7. }

  8.  

  9. #naglowek

  10. {

  11. background-color: #675c47;

  12. margin: 10px;

  13. height: 70px;

  14. text-align:center;

  15. padding: 20px;

  16. }

  17.  

  18. #tresc

  19. {

  20. background-color: #efe5d0;

  21. font-size: 105%;

  22. padding: 15px;

  23. margin: 0px 250px 10px 10px;

  24. line-height: 150%;

  25. }

  26.  

  27. #menu

  28. {

  29. background-color: #efe5d0;

  30. font-size: 105%;

  31. padding: 15px;

  32. margin: 0px 10px 10px 10px;

  33. width: 200px;

  34. float: right;

  35. }

  36. a:link

  37. {

  38. color:#b76666;

  39. }

  40.  

  41. a:visted

  42. {

  43. color: #675c47;

  44. }

  45.  

  46. #stopka

  47. {

  48. background-color: #675c47;

  49. color: #efe5d0;

  50. text-align: center;

  51. padding: 15px;

  52. margin: 10px;

  53. font-size: 90%;

  54. clear: right;

  55. }

  56. #stopka a

  57. {

  58. color: #efe5d0;

  59. }

  60.  

  61.  



Standarodowo, nic skomplikowanego. Jeżeli są jakieś pytania to proszę pytać.
Autor: Admin w sobota, czerwca 20, 2009

Brak komentarzy:

Prześlij komentarz

Subskrybuj: Komentarze do posta (Atom)