RSS feed
Článok: CSS – Silný nástroj webdesignéra (Kompletný design)
(X)HTML a CSS
CSS – Silný nástroj webdesignéra (Kompletný design)

CSS – Silný nástroj webdesignéra (Kompletný design)

01.07.2008

Dnes sa budem zaoberať rozkódovaním designu, polopate povedané prevodu designu z obrázku na funkčnú webovú stránku. Rozoberieme aj optimalizáciu pre všetky hlavné vyhľadávače.

Autor: Jakub Vatrt | Hodnotenie:

Zdravím všetkých priaznivcov webdesignu. Po dlhšom čase sa opäť stretávame, teraz konkrétne pri úlohe rozkódovania designu cez CSS a XHTML. Projekt rozdelím nasledovne:

1) Zdroje

Výsledok v jpg:

Po kliknutí sa obrázok ukáže v originálnej veľkosti
Po kliknutí sa obrázok ukáže v originálnej veľkosti

Použité obrázky v archíve .zip - v sekcii download

Výsledná kompletná stránka (XHTML + CSS + obrázky) - je tu.

Obrázky si ak chcete nastrihajte z originálneho obrázku, pre istotu prikladám svoje vyššie, ide o to aby vám sedeli rozmery.

2) Základ a vzhľad stránky

Stránka ma šírku 767px, je zarovnaná dostredu. Z vrchu je okraj 10px.

Farby:

Pozadie: #051c00

Položka v menu: #aefa0d

Nadpis: #608913

Text: #97b15e

Hypertextový odkaz v hlavnom texte: #80ba04

Veľkosti písma:

Globálne: 11px

Odkaz: 14px

Nadpis: 20px

3) Príprava a telo stránky

Najskôr si navrhneme základ stránky a to #wrapper na zarovnanie na stred, farbu pozadia a pod. Doctype som zvolil XHTML 1.0 Strict a kódovanie UTF-8.

Ideme na to:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sk">
  3.  <head>
  4.   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  5.   <link rel="stylesheet" href="style.css" type="text/css" />
  6.   <title>Nightclub</title>
  7.  </head>
  8.  <body>
  9.    <div id="wrapper">
  10.    </div>    
  11.  </body>
  12. </html>

K tomu CSS súbor pribalený v súbore style.css:

  1. body &#123;
  2. background-color: #051c00;
  3. margin: 0 0 0 0;
  4. padding: 0 0 0 0;
  5. color: #97b15e;
  6. font-size: 11px;
  7. font-family: Arial;
  8. &#125;
  9.  
  10. #wrapper &#123;
  11. width: 767px;
  12. margin: 10px auto;
  13. border: 1px red solid;
  14. &#125;

Takže ako farbu pozadia v body som nastavil náš otieň #051c00. Základným typom písma bude 11px Arial zafarbený na #97b15e - viz. color. Čo sa týka atribútov margin a padding, nastavil som všade okolo 0, tj. žiadny, kôli prehliadačom, ktoré ako základný okraj udávajú vlastné hodnoty, takže som chcel docieliť, aby sa nám stránka zobrazovala rovnako v každom prehliadači.

#wrapper – čiže kontajner ktorý zarovnáva celú stránku na stred je široký presne 767px, teda stránka sa zobrazí rovnako v strede používateľovi s rozlíšením 800*600 aj tomu, kto má 1200*1024. Keďže stránka je zarovnaná 10px od vrchu, nastavil som to spolu s parametrom auto.

Pre lepší vizuálny výsledok používam červený rámček okolo celej stránky, aby ste videli výsledok.

4) Header - hlavička

Hlavička je v celku jednoduchá, bude sa jednať o vložený div #header, skôr nás bude zaujímať CSS.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sk">
  3.  <head>
  4.   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  5.   <link rel="stylesheet" href="style.css" type="text/css" />
  6.   <title>Nightclub</title>
  7.  </head>
  8.  <body>
  9.    <div id="wrapper">
  10.       <div id="header"></div>
  11.    </div>    
  12.  </body>
  13. </html>

CSS:

  1. body {
  2. background-color: #051c00;
  3. margin: 0 0 0 0;
  4. padding: 0 0 0 0;
  5. color: #97b15e;
  6. font-size: 11px;
  7. font-family: Arial;
  8. }
  9.  
  10. #wrapper {
  11. width: 767px;
  12. margin: 10px auto;
  13. border: 1px red solid;
  14. }
  15.  
  16. #header {
  17. background-image: url(images/header.jpg);
  18. width: 767px;
  19. height: 319px;
  20. background-position: top;
  21. background-repeat: no-repeat;
  22. }

Parameter background-image určite nemusím komentovať, jedná sa o cestu k súboru hlavičky. Aby nám ju prehliadač správne zobrazil, musíme nastaviť šírku a výšku pomocou parametrov width a height. Posledné dve položky znovu optimalizujú zobrazovanie v rôznych prehliadačoch, ktoré si môžu pozíciu obrázku implicitne nastaviť po svojom.

5) Menu

A dostávame sa k najťažšej časti a to návrhu a optimalizácie menu.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sk">
  3.  <head>
  4.   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  5.   <link rel="stylesheet" href="style.css" type="text/css" />
  6.   <title>Nightclub</title>
  7.  </head>
  8.  <body>
  9.    <div id="wrapper">
  10.       <div id="header"></div>
  11.       <div id="menu">
  12.         <ul>
  13.         <li><a href="#">Link</a></li>
  14.         <li><a href="#">Link</a></li>
  15.         <li><a href="#">Link</a></li>
  16.         <li><a href="#">Link</a></li>
  17.         <li><a href="#">Link</a></li>
  18.         <li><a href="#">Link</a></li>
  19.         </ul>
  20.       </div>
  21.    </div>    
  22.  </body>
  23. </html>

CSS:

  1. body {
  2. background-color: #051c00;
  3. margin: 0 0 0 0;
  4. padding: 0 0 0 0;
  5. color: #97b15e;
  6. font-size: 11px;
  7. font-family: Arial;
  8. }
  9.  
  10. #wrapper {
  11. width: 767px;
  12. margin: 10px auto;
  13. border: 1px red solid;
  14. }
  15.  
  16. #header {
  17. background-image: url(images/header.jpg);
  18. width: 767px;
  19. height: 319px;
  20. background-position: top;
  21. background-repeat: no-repeat;
  22. }
  23.  
  24. #menu {
  25. width: 767px;
  26. height: 34px;
  27. background-image: url(images/menu.jpg);
  28. background-position: top;
  29. background-repeat: no-repeat;
  30. padding-top: 10px;
  31. text-indent: 100px;
  32.  
  33. }
  34.  
  35. #menu ul {
  36. list-style-position: outside;
  37. list-style-type: none;
  38. margin-top: 0px;
  39. margin-left: 0px;
  40. padding-left: 0px;
  41. }
  42.  
  43. #menu li {
  44. display: inline;
  45. padding-left: 0px;
  46. margin-right: 70px;
  47. }
  48.  
  49. #menu a {
  50. color: #aefa0d;
  51. text-decoration: none;
  52. font-size: 14px;
  53. }
  54.  
  55. #menu a:hover {
  56. text-decoration: underline;
  57. }

Menu si zadefinujeme ako nový div, ktorý bude mať použitý background obrázok ako #header vyššie, plus všetky nastavenia – výška, šírka a pod...

Hlavné menu a jeho jednotlivé položky si nadefinujeme ako neusporiadaný zoznam ul, a jednotlivé položky li:

Najskôr som musel dosiahnuť „natlačenie“ jednotlivých položiek k ľavému okraju, aby jednotlivé prehliadače boli znovu na rovnakej úrovni. To som dosiahol pomocou margin a padding-left 0 v #menu ul a li. Aby sa mi nezobrazili bodky pri každej položke, pridal som hodnotu list-style-type: none. Nakoniec to najdôležitejšie, pre zobrazenie položiek do jedného riadku treba použiť v #menu li display: inline.

Nasleduje zarovnávanie na hviezdičky. Najskôr pomocou text-indent: 100px; v menu odsadíme prvú položku o 100px zľava.

Potom každá položka bude mať sprava margin-right: 70px; teda budú nasledovne odsadené. Rozmery som odhadoval od oka, ak chcete pohrajte sa detailnejšie.

Ale jednotlivé položky sa majú správať ako odkazy, k tomu som použil dve nové skupiny #menu a – pre nastavenie základného vzhľadu odkazu a #menu a:hover – pre nastavenie vzhľadu pri prechádzaní myšou.

Základné #menu a bude mať farbu #aefa0d – keby sme ju nenastavili, malo by farbu ako základný text, pretože sa uplatňuje tzv. dedičnosť. Samozrejme musíme nastaviť aj font-size: 14px, inak by sme mali 11px odkazy.

Zostáva dopracovať hover efekt pri prejdení myšou a to text-decoration: underline, teda podčiarknutie textu, všetko ostatné „zdedí“ po #menu a.

6) Content – obsah stránky:

Jedna z najľahších častí:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sk">
  3.  <head>
  4.   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  5.   <link rel="stylesheet" href="style.css" type="text/css" />
  6.   <title>Nightclub</title>
  7.  </head>
  8.  <body>
  9.    <div id="wrapper">
  10.       <div id="header"></div>
  11.       <div id="menu">
  12.         <ul>
  13.         <li><a href="#">Link</a></li>
  14.         <li><a href="#">Link</a></li>
  15.         <li><a href="#">Link</a></li>
  16.         <li><a href="#">Link</a></li>
  17.         <li><a href="#">Link</a></li>
  18.         <li><a href="#">Link</a></li>
  19.         </ul>
  20.       </div>
  21.       <div id="content">
  22.         <div class="dj">
  23.           
  24.         </div>
  25.         <h1>Welcome</h1>
  26.         
  27.         <a href="#">Lorem ipsum</a> dolor sit amet consectetuer justo mauris elit lacinia mattis. 
  28.         Nulla fames montes scelerisque Mauris eget massa urna sapien felis nibh. 
  29.         Tincidunt metus magna neque pellentesque id Sed eros elit Morbi Ut. 
  30.         Tortor quis montes egestas lobortis Suspendisse eros condimentum amet vitae Phasellus. 
  31.         Leo Phasellus rhoncus risus tellus facilisi sociis nulla Sed tortor Cras. Ligula Nunc faucibus velit.
  32.         
  34.         
  35.         Mi ornare non pede id dolor nonummy nunc wisi Vestibulum et. 
  36.         Ante sapien fringilla id Vestibulum quam commodo tincidunt semper est velit. 
  37.         Sed wisi tempus elit dui Proin amet non eu accumsan velit. 
  38.         Et urna urna et penatibus sem in Fusce Morbi ridiculus mauris. 
  39.         Convallis elit quis Curabitur elit parturient lobortis semper Vestibulum leo velit. 
  40.         Laoreet eget lacinia enim accumsan non pede malesuada.
  41.         
  43.         
  44.         Mi ornare non pede id dolor nonummy nunc wisi Vestibulum et. 
  45.         Ante sapien fringilla id Vestibulum quam commodo tincidunt semper est velit. 
  46.         Sed wisi tempus elit dui Proin amet non eu accumsan velit. 
  47.         Et urna urna et penatibus sem in Fusce Morbi ridiculus mauris. 
  48.         Convallis elit quis Curabitur elit parturient lobortis semper Vestibulum leo velit. 
  49.         Laoreet eget lacinia enim accumsan non pede malesuada.
  50.         
  52.       </div>
  53.    </div>    
  54.  </body>
  55. </html>

CSS:

  1. body {
  2. background-color: #051c00;
  3. margin: 0 0 0 0;
  4. padding: 0 0 0 0;
  5. color: #97b15e;
  6. font-size: 11px;
  7. font-family: Arial;
  8. }
  9.  
  10. #wrapper {
  11. width: 767px;
  12. margin: 10px auto;
  13. border: 1px red solid;
  14. }
  15.  
  16. #header {
  17. background-image: url(images/header.jpg);
  18. width: 767px;
  19. height: 319px;
  20. background-position: top;
  21. background-repeat: no-repeat;
  22. }
  23.  
  24. #menu {
  25. width: 767px;
  26. height: 34px;
  27. background-image: url(images/menu.jpg);
  28. background-position: top;
  29. background-repeat: no-repeat;
  30. padding-top: 10px;
  31. text-indent: 100px;
  32.  
  33. }
  34.  
  35. #menu ul {
  36. list-style-type: none;
  37. margin-top: 0px;
  38. margin-left: 0px;
  39. padding-left: 0px;
  40. }
  41.  
  42. #menu li {
  43. display: inline;
  44. padding-left: 0px;
  45. margin-right: 70px;
  46. }
  47.  
  48. #menu a {
  49. color: #aefa0d;
  50. text-decoration: none;
  51. font-size: 14px;
  52. }
  53.  
  54. #menu a:hover {
  55. text-decoration: underline;
  56. }
  57.  
  58. #content {
  59. margin-left: 50px;
  60. margin-top: 20px;
  61. width: 650px;
  62. }
  63.  
  64. .dj {
  65. background-image: url(images/dj.jpg);
  66. background-position: top;
  67. background-repeat: no-repeat;
  68. width: 241px;
  69. height: 198px;
  70. float: right;
  71. }
  72.  
  73. h1 {
  74. color: #608913;
  75. font-size: 20px;
  76. }
  77.  
  78. a {
  79. color: #80ba04;
  80. }
  81.  
  82. a:hover {
  83. text-decoration: none;
  84. }

Základom je div #content s okrajom zľava 50px, teda jeho šírka bude 650px, aby nám nepresahoval za 767px dlhú stránku. Pre krajšie zarovnanie som zvolil aj okraj 20px zvrchu.

Nadpis h1 som si naštýloval tak, že som použil predpísanú farbu #608913 a veľkosť 20px.

Aby som vložil obtekaný obrázok DJ, musel som ho vložiť úplne na začiatok divu, inak by mi zapadol do presného riadku. Obtekanie zabezpečuje float: right;. Ostatné hodnoty poznáte z nastavovanie header a menu. DJ je class nie id, preto ho môžete použiť koľkokrát chcete.

7) Footer – pätička stránky

Ešte vložiť odstavece s textom, aby sme to mali kompletne, naschvál som použil viac textu aby ste videli obtekanie. Text je štandardný 11px Arial #97b15e, definovaný v body. Nakoniec som použil aj link do textu, ktorý si štýlujem v skupinách a a a:hover – globálne pre celý súbor podobne ako v menu.

Na záver pridávam aj pätičku:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sk">
  3.  <head>
  4.   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  5.   <link rel="stylesheet" href="style.css" type="text/css" />
  6.   <title>Nightclub</title>
  7.  </head>
  8.  <body>
  9.    <div id="wrapper">
  10.       <div id="header"></div>
  11.       <div id="menu">
  12.         <ul>
  13.         <li><a href="#">Link</a></li>
  14.         <li><a href="#">Link</a></li>
  15.         <li><a href="#">Link</a></li>
  16.         <li><a href="#">Link</a></li>
  17.         <li><a href="#">Link</a></li>
  18.         <li><a href="#">Link</a></li>
  19.         </ul>
  20.       </div>
  21.       <div id="content">
  22.         <div class="dj">
  23.           
  24.         </div>
  25.         <h1>Welcome</h1>
  26.         
  27.         <a href="#">Lorem ipsum</a> dolor sit amet consectetuer justo mauris elit lacinia mattis. 
  28.         Nulla fames montes scelerisque Mauris eget massa urna sapien felis nibh. 
  29.         Tincidunt metus magna neque pellentesque id Sed eros elit Morbi Ut. 
  30.         Tortor quis montes egestas lobortis Suspendisse eros condimentum amet vitae Phasellus. 
  31.         Leo Phasellus rhoncus risus tellus facilisi sociis nulla Sed tortor Cras. Ligula Nunc faucibus velit.
  32.         
  34.         
  35.         Mi ornare non pede id dolor nonummy nunc wisi Vestibulum et. 
  36.         Ante sapien fringilla id Vestibulum quam commodo tincidunt semper est velit. 
  37.         Sed wisi tempus elit dui Proin amet non eu accumsan velit. 
  38.         Et urna urna et penatibus sem in Fusce Morbi ridiculus mauris. 
  39.         Convallis elit quis Curabitur elit parturient lobortis semper Vestibulum leo velit. 
  40.         Laoreet eget lacinia enim accumsan non pede malesuada.
  41.         
  43.         
  44.         Mi ornare non pede id dolor nonummy nunc wisi Vestibulum et. 
  45.         Ante sapien fringilla id Vestibulum quam commodo tincidunt semper est velit. 
  46.         Sed wisi tempus elit dui Proin amet non eu accumsan velit. 
  47.         Et urna urna et penatibus sem in Fusce Morbi ridiculus mauris. 
  48.         Convallis elit quis Curabitur elit parturient lobortis semper Vestibulum leo velit. 
  49.         Laoreet eget lacinia enim accumsan non pede malesuada.
  50.         
  52.       </div>
  53.       <div id="footer">
  54.         &copy; 2008 Nightclub All rights reserved.
  55.       </div>
  56.    </div>    
  57.  </body>
  58. </html>

CSS:

  1. body {
  2. background-color: #051c00;
  3. margin: 0 0 0 0;
  4. padding: 0 0 0 0;
  5. color: #97b15e;
  6. font-size: 11px;
  7. font-family: Arial;
  8. }
  9.  
  10. #wrapper {
  11. width: 767px;
  12. margin: 10px auto;
  13. border: 1px red solid;
  14. }
  15.  
  16. #header {
  17. background-image: url(images/header.jpg);
  18. width: 767px;
  19. height: 319px;
  20. background-position: top;
  21. background-repeat: no-repeat;
  22. }
  23.  
  24. #menu {
  25. width: 767px;
  26. height: 34px;
  27. background-image: url(images/menu.jpg);
  28. background-position: top;
  29. background-repeat: no-repeat;
  30. padding-top: 10px;
  31. text-indent: 100px;
  32.  
  33. }
  34.  
  35. #menu ul {
  36. list-style-type: none;
  37. margin-top: 0px;
  38. margin-left: 0px;
  39. padding-left: 0px;
  40. }
  41.  
  42. #menu li {
  43. display: inline;
  44. padding-left: 0px;
  45. margin-right: 70px;
  46. }
  47.  
  48. #menu a {
  49. color: #aefa0d;
  50. text-decoration: none;
  51. font-size: 14px;
  52. }
  53.  
  54. #menu a:hover {
  55. text-decoration: underline;
  56. }
  57.  
  58. #content {
  59. margin-left: 50px;
  60. margin-top: 20px;
  61. width: 650px;
  62. }
  63.  
  64. .dj {
  65. background-image: url(images/dj.jpg);
  66. background-position: top;
  67. background-repeat: no-repeat;
  68. width: 241px;
  69. height: 198px;
  70. float: right;
  71. }
  72.  
  73. h1 {
  74. color: #608913;
  75. font-size: 20px;
  76. }
  77.  
  78. a {
  79. color: #80ba04;
  80. }
  81.  
  82. a:hover {
  83. text-decoration: none;
  84. }
  85.  
  86. #footer {
  87. background-image: url(images/line.jpg);
  88. background-position: top;
  89. background-repeat: no-repeat;
  90. width: 767px;
  91. text-align: center;
  92. padding-top: 10px;
  93. margin-top: 15px;
  94. }

Keďže som chcel pätičku oddeliť pomocou čiary, musel som si ju definovať ako background-image, pričom som uviedol len šírku a nie výšku! Ale aj tak je najdôležitejší atribút background-repeat: no-repeat, ktorý zabezpečuje aby sa čiara zobrazila len raz.

Text som vycentroval odsadil od čiary 10px a celú pätičku od vrchu 15px.

Keďže pätička je posledný element designu, sme s prácou hotoví. Nakoniec ešte začnite ladiť design pre rôzne prehliadače, pričom tento som už odladil za vás. Kód aj CSS je 100% validný podľa štandardov W3C.

Týmto dielom by som chcel „neoficiálne“ uzatvoriť seriál o CSS, pričom nové lekcie môžu ešte časom pribudnúť, záleží od vôle preberať danú tému.

Ďakujem za pozornosť a prajem veľa úspechov s CSS!

--  Jakub Vatrt  --


Ohodnoťte článok :
zlý dobrý
Ďalšie články z kategórie