Strona z ćwiczeniami jest stroną archiwalną,
wiele materiałów jest już nieaktualnych,
ale jeżeli ktoś ma ochotę, to zapraszam... :)

Dzieła Człowieka

Pewnego przyjaciela poznaje się w niepewnym położeniu

Zajęcia specjalizacyjne: III klasa TI
CSS

Ćwiczenie 19 - Strona na DIV-ach

Wprowadzenie:

W tym ćwiczeniu omówione zostaną sposoby wykorzystania arkuszy stylów CSS do budowy układu strony z wykorzystaniem znaczników <div>...</div>.

  1. zadania do wykonania

Dzięki znacznikom <div>...</div> można zbudować stały szablon strony, który zapisany w arkuszu CSS będzie formatował wszystkie podstrony całego serwisu w ten sam sposób. Cały serwis zawsze będzie wyglądał jednakowo, zgodnie z ustalonymi w arkuszu warunkami.

Możliwości ułożenia podstawowych elementów strony jest bardzo wiele. W niniejszym ćwiczeniu zostanie podanych kilka z nich. Wszystkie będą oparte na podstawowym zestawie: nagłówek, menu (lub dwa menu), zawartość i stopka. Menu i zawartość zostaną umieszczone w dwóch kolumnach (w przypadku dwóch menu - będą trzy kolumny).

Przykłady szblonów:


  1. dwie kolumny - menu po lewej
  2. dwie kolumny - menu po prawej
  3. trzy kolumny - menu po lewej i prawej
  4. trzy kolumny - menu po lewej i prawej - zamienione
  5. trzy kolumny - oba menu razem po lewej
  6. trzy kolumny - oba menu razem po prawej


Dwie kolumny - menu po lewej

W każdym z przykładów należy przygotować plik HTML z odpowiednimi znacznikami <div>...</div>, z przypisanymi właściwymi identyfikatorami.

Poniżej przedstawiony jest układ znaczników <div>...</div> wraz z identyfikatorami w dokumencie HTML i przykładową zawartością:


  1. <body>
  2. <div id="strona">
  3. <div id="naglowek">
  4. nagłówek
  5. </div>
  6. <div id="menu">
  7. menu
  8. <ul>
  9. <li>link 1</li>
  10. <li>link 2</li>
  11. <li>link 3</li>
  12. <li>link 4</li>
  13. <li>link 5</li>
  14. <li>link 6</li>
  15. <li>link 7</li>
  16. <li>link 8</li>
  17. <li>link 9</li>
  18. <li>link 10</li>
  19. </ul>
  20. </div>
  21. <div id="zawartosc">
  22. zawartość
  23. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  24. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  25. </div>
  26. <div id="stopka">
  27. stopka
  28. </div>
  29. </div>
  30. </body>

Kolejnym zadaniem jest napisanie w arkuszu stylów reguł formatujących poszczególne pudełka z div-ami.

Można zacząć od reguł globalnych dotyczących znacznika <body>...</body>. Tutaj jest nadany kolor tła, kolor czcionek, górny margines i rodzaj czcionki:


  1. html, body
  2. {background-color: #dadada;
  3. color: #000000;
  4. margin-top: 10px;
  5. font-family: 'Trebuchet MS', Arial, sans-serif;
  6. }

Kolejne reguły dotyczą pierwszego znacznika <div>...</div> z identyfikatorem strona. Tutaj ustala się przede wszystkim szerokość strony - czyli całej strefy roboczej strony (w nim umieszczone będą pozostałe div-y). Margines z wartościami 0 auto ustawia stronę na środku przeglądarki. Ponadto dodany jest margines wewnętrzny i kolor tła.

Podanie stałej szerokości uchroni od nieprzewidzianych zachowań, w przypadku zmiany wielkości przeglądarki spowodowanej zmianą rozdzielczości, czy też wielkością monitora. Jedynie pojawią się paski przewijania.


  1. div#strona
  2. {width: 800px;
  3. margin: 0 auto;
  4. padding: 10px;
  5. background-color: #ffd2ff;
  6. }

Następnym pudełkiem poddanym formatowaniu jest <div>...</div> z identyfikatorem naglowek. W tym przykładzie wymuszona jest wysokość tego elementu, margines wewnętrzny, a także dodatkowo inny kolor tła i kolor czcionki.


  1. div#naglowek
  2. {height: 100px;
  3. padding: 10px;
  4. background-color: #7b327b;
  5. color: #ffffff;
  6. }

Kolejny <div>...</div> to ten z identyfikatorem menu. Dla niego natomiast ustalona jest stała szerokość, wyrównanie w poziomie do lewej, obcinanie ewentualnych elementów, które by na niego nachodziły, margines wewnętrzny, a także kolor tła. I dodatkowo jeszcze dla listy wyliczeniowej wyłączone zostały znaki wypunktowania.


  1. div#menu
  2. {width: 150px;
  3. float: left;
  4. overflow: hidden;
  5. padding: 10px;
  6. background-color: #cb78cb;
  7. }
  1. div#menu ul
  2. {list-style-type: none;
  3. }

Następny znacznik <div>...</div> ma identyfikator zawartosc. W tym selektorze ustawione zostały: obcinanie elementów, które by na niego nachodziły, margines wewnętrzny i kolor tła. Szerokości się nie podaje, gdyż to pudełko będzie dopełniać do reszty (całkowitej szerokości), w zależności od marginesów i marginesów wewnętrznych.


  1. div#zawartosc
  2. {overflow: hidden;
  3. padding: 20px;
  4. background-color: #ffbeff;
  5. }

Ostatni znacznik <div>...</div> jest z identyfikatorem stopka. Dla tego selektora ustalone zostały przyleganie, margines wewnętrzny, kolor tła i kolor czcionki.


  1. div#stopka
  2. {clear: both;
  3. padding: 10px;
  4. background-color: #8f468f;
  5. color: #ffffff;
  6. }

Po wpisaniu wszystkich reguł do arkusza stylów i powiązaniu z nim pliku HTML, strona wygląda w ten sposób:

dwie kolumny - menu po lewej

do góry



Dwie kolumny - menu po prawej

W każdym z przykładów należy przygotować plik HTML z odpowiednimi znacznikami <div>...</div>, z przypisanymi właściwymi identyfikatorami.

Plik HTML jest identyczny, jak ten z pierwszego przykładu z dwiema kolumnami - tutaj.

Kolejnym zadaniem jest napisanie w arkuszu stylów reguł formatujących poszczególne pudełka z div-ami.

Arkusz stylów jest właściwie identyczny, jak ten z pierwszego przykładu, poza jedną zmianą - menu ma nadane wyrównanie w poziomie do prawej. Poniżej podany jest cały arkusz stylów - zmiana została pogrubiona.


  1. html, body
  2. {background-color: #dadada;
  3. color: #000000;
  4. margin-top: 10px;
  5. font-family: 'Trebuchet MS', Arial, sans-serif;
  6. }
  1. div#strona
  2. {width: 800px;
  3. margin: 0 auto;
  4. padding: 10px;
  5. background-color: #ffd2ff;
  6. }
  1. div#naglowek
  2. {height: 100px;
  3. padding: 10px;
  4. background-color: #7b327b;
  5. color: #ffffff;
  6. }
  1. div#menu
  2. {width: 150px;
  3. float: right;
  4. overflow: hidden;
  5. padding: 10px;
  6. background-color: #cb78cb;
  7. }
  1. div#menu ul
  2. {list-style-type: none;
  3. }
  1. div#zawartosc
  2. {overflow: hidden;
  3. padding: 20px;
  4. background-color: #ffbeff;
  5. }
  1. div#stopka
  2. {clear: both;
  3. padding: 10px;
  4. background-color: #8f468f;
  5. color: #ffffff;
  6. }

Po wpisaniu wszystkich reguł do arkusza stylów i powiązaniu z nim pliku HTML, strona wygląda w ten sposób:

dwie kolumny - menu po prawej

do góry



Trzy kolumny - menu po lewej i prawej

W każdym z przykładów należy przygotować plik HTML z odpowiednimi znacznikami <div>...</div>, z przypisanymi właściwymi identyfikatorami.

Poniżej przedstawiony jest układ znaczników <div>...</div> wraz z identyfikatorami w dokumencie HTML i przykładową zawartością:


  1. <body>
  2. <div id="strona">
  3. <div id="naglowek">
  4. nagłówek
  5. </div>
  6. <div id="menu_1">
  7. menu 1
  8. <ul>
  9. <li>link 1</li>
  10. <li>link 2</li>
  11. <li>link 3</li>
  12. <li>link 4</li>
  13. <li>link 5</li>
  14. <li>link 6</li>
  15. <li>link 7</li>
  16. <li>link 8</li>
  17. <li>link 9</li>
  18. <li>link 10</li>
  19. </ul>
  20. </div>
  21. <div id="menu_2">
  22. menu 2
  23. <ul>
  24. <li>link 11</li>
  25. <li>link 12</li>
  26. <li>link 13</li>
  27. <li>link 14</li>
  28. <li>link 15</li>
  29. <li>link 16</li>
  30. <li>link 17</li>
  31. <li>link 18</li>
  32. <li>link 19</li>
  33. <li>link 20</li>
  34. </ul>
  35. </div>
  36. <div id="zawartosc">
  37. zawartość
  38. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  39. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  40. </div>
  41. <div id="stopka">
  42. stopka
  43. </div>
  44. </div>
  45. </body>

Kolejnym zadaniem jest napisanie w arkuszu stylów reguł formatujących poszczególne pudełka z div-ami.

Można zacząć od reguł globalnych dotyczących znacznika <body>...</body>. Tutaj jest nadany kolor tła, kolor czcionek, górny margines i rodzaj czcionki:


  1. html, body
  2. {background-color: #dadada;
  3. color: #000000;
  4. margin-top: 10px;
  5. font-family: 'Trebuchet MS', Arial, sans-serif;
  6. }

Kolejne reguły dotyczą pierwszego znacznika <div>...</div> z identyfikatorem strona. Tutaj ustala się przede wszystkim szerokość strony - czyli całej strefy roboczej strony (w nim umieszczone będą pozostałe div-y). Margines z wartościami 0 auto ustawia stronę na środku przeglądarki. Ponadto dodany jest margines wewnętrzny i kolor tła.

Podanie stałej szerokości uchroni od nieprzewidzianych zachowań, w przypadku zmiany wielkości przeglądarki spowodowanej zmianą rozdzielczości, czy też wielkością monitora. Jedynie pojawią się paski przewijania.


  1. div#strona
  2. {width: 800px;
  3. margin: 0 auto;
  4. padding: 10px;
  5. background-color: #ffd2ff;
  6. }

Następnym pudełkiem poddanym formatowaniu jest <div>...</div> z identyfikatorem naglowek. W tym przykładzie wymuszona jest wysokość tego elementu, margines wewnętrzny, a także dodatkowo inny kolor tła i kolor czcionki.


  1. div#naglowek
  2. {height: 100px;
  3. padding: 10px;
  4. background-color: #7b327b;
  5. color: #ffffff;
  6. }

Kolejny <div>...</div> to ten z identyfikatorem menu_1. Dla niego natomiast ustalona jest stała szerokość, wyrównanie w poziomie do lewej, obcinanie ewentualnych elementów, które by na niego nachodziły, margines wewnętrzny, a także kolor tła. I dodatkowo jeszcze dla listy wyliczeniowej wyłączone zostały znaki wypunktowania.


  1. div#menu_1
  2. {width: 150px;
  3. float: left;
  4. overflow: hidden;
  5. padding: 10px;
  6. background-color: #cb78cb;
  7. }
  1. div#menu_1 ul
  2. {list-style-type: none;
  3. }

Następny <div>...</div> to ten z nadanym identyfikatorem menu_2. Dla niego natomiast ustalona jest stała szerokość, wyrównanie w poziomie do prawej, obcinanie ewentualnych elementów, które by na niego nachodziły, margines wewnętrzny, a także kolor tła. I dodatkowo jeszcze dla listy wyliczeniowej wyłączone zostały znaki wypunktowania.


  1. div#menu_2
  2. {width: 150px;
  3. float: right;
  4. overflow: hidden;
  5. padding: 10px;
  6. background-color: #df8cdf;
  7. }
  1. div#menu_2 ul
  2. {list-style-type: none;
  3. }

Następny znacznik <div>...</div> ma identyfikator zawartosc. W tym selektorze ustawione zostały: obcinanie elementów, które by na niego nachodziły, margines wewnętrzny i kolor tła. Szerokości się nie podaje, gdyż to pudełko będzie dopełniać do reszty (całkowitej szerokości), w zależności od marginesów i marginesów wewnętrznych.


  1. div#zawartosc
  2. {overflow: hidden;
  3. padding: 20px;
  4. background-color: #ffbeff;
  5. }

Ostatni znacznik <div>...</div> jest z identyfikatorem stopka. Dla tego selektora ustalone zostały przyleganie, margines wewnętrzny, kolor tła i kolor czcionki.


  1. div#stopka
  2. {clear: both;
  3. padding: 10px;
  4. background-color: #8f468f;
  5. color: #ffffff;
  6. }

Po wpisaniu wszystkich reguł do arkusza stylów i powiązaniu z nim pliku HTML, strona wygląda w ten sposób:

trzy kolumny - menu po lewej i prawej

do góry



Trzy kolumny - menu po lewej i prawej - zamienione

W każdym z przykładów należy przygotować plik HTML z odpowiednimi znacznikami <div>...</div>, z przypisanymi właściwymi identyfikatorami.

Plik HTML jest identyczny, jak ten z poprzedniego przykładu z trzema kolumnami - tutaj.

Kolejnym zadaniem jest napisanie w arkuszu stylów reguł formatujących poszczególne pudełka z div-ami.

Arkusz stylów jest właściwie identyczny, jak ten z poprzedniego przykładu, poza dwiema zmianami - menu_1 ma nadane wyrównanie w poziomie do prawej, a menu_2 do lewej. Poniżej podany jest cały arkusz stylów - zmiany zostały pogrubione.


  1. html, body
  2. {background-color: #dadada;
  3. color: #000000;
  4. margin-top: 10px;
  5. font-family: 'Trebuchet MS', Arial, sans-serif;
  6. }
  1. div#strona
  2. {width: 800px;
  3. margin: 0 auto;
  4. padding: 10px;
  5. background-color: #ffd2ff;
  6. }
  1. div#naglowek
  2. {height: 100px;
  3. padding: 10px;
  4. background-color: #7b327b;
  5. color: #ffffff;
  6. }
  1. div#menu_1
  2. {width: 150px;
  3. float: right;
  4. overflow: hidden;
  5. padding: 10px;
  6. background-color: #cb78cb;
  7. }
  1. div#menu_1 ul
  2. {list-style-type: none;
  3. }
  1. div#menu_2
  2. {width: 150px;
  3. float: left;
  4. overflow: hidden;
  5. padding: 10px;
  6. background-color: #df8cdf;
  7. }
  1. div#menu_2 ul
  2. {list-style-type: none;
  3. }
  1. div#zawartosc
  2. {overflow: hidden;
  3. padding: 20px;
  4. background-color: #ffbeff;
  5. }
  1. div#stopka
  2. {clear: both;
  3. padding: 10px;
  4. background-color: #8f468f;
  5. color: #ffffff;
  6. }

Po wpisaniu wszystkich reguł do arkusza stylów i powiązaniu z nim pliku HTML, strona wygląda w ten sposób:

trzy kolumny - menu po lewej i prawej - zamienione

do góry



Trzy kolumny - oba menu razem po lewej

W każdym z przykładów należy przygotować plik HTML z odpowiednimi znacznikami <div>...</div>, z przypisanymi właściwymi identyfikatorami.

Plik HTML jest identyczny, jak ten z poprzednich przykładów z trzema kolumnami - tutaj.

Kolejnym zadaniem jest napisanie w arkuszu stylów reguł formatujących poszczególne pudełka z div-ami.

Arkusz stylów jest właściwie identyczny, jak ten z poprzednich przykładu, poza dwiema zmianami - menu_1 i menu_2 mają nadane wyrównanie w poziomie do lewej. Poniżej podany jest cały arkusz stylów - zmiany zostały pogrubione.


  1. html, body
  2. {background-color: #dadada;
  3. color: #000000;
  4. margin-top: 10px;
  5. font-family: 'Trebuchet MS', Arial, sans-serif;
  6. }
  1. div#strona
  2. {width: 800px;
  3. margin: 0 auto;
  4. padding: 10px;
  5. background-color: #ffd2ff;
  6. }
  1. div#naglowek
  2. {height: 100px;
  3. padding: 10px;
  4. background-color: #7b327b;
  5. color: #ffffff;
  6. }
  1. div#menu_1
  2. {width: 150px;
  3. float: left;
  4. overflow: hidden;
  5. padding: 10px;
  6. background-color: #cb78cb;
  7. }
  1. div#menu_1 ul
  2. {list-style-type: none;
  3. }
  1. div#menu_2
  2. {width: 150px;
  3. float: left;
  4. overflow: hidden;
  5. padding: 10px;
  6. background-color: #df8cdf;
  7. }
  1. div#menu_2 ul
  2. {list-style-type: none;
  3. }
  1. div#zawartosc
  2. {overflow: hidden;
  3. padding: 20px;
  4. background-color: #ffbeff;
  5. }
  1. div#stopka
  2. {clear: both;
  3. padding: 10px;
  4. background-color: #8f468f;
  5. color: #ffffff;
  6. }

Po wpisaniu wszystkich reguł do arkusza stylów i powiązaniu z nim pliku HTML, strona wygląda w ten sposób:

trzy kolumny - oba menu razem po lewej

do góry



Trzy kolumny - oba menu razem po prawej

W każdym z przykładów należy przygotować plik HTML z odpowiednimi znacznikami <div>...</div>, z przypisanymi właściwymi identyfikatorami.

Plik HTML jest identyczny, jak ten z poprzednich przykładów z trzema kolumnami - tutaj.

Kolejnym zadaniem jest napisanie w arkuszu stylów reguł formatujących poszczególne pudełka z div-ami.

Arkusz stylów jest właściwie identyczny, jak ten z poprzednich przykładu, poza dwiema zmianami - menu_1 i menu_2 mają nadane wyrównanie w poziomie do prawej. Poniżej podany jest cały arkusz stylów - zmiany zostały pogrubione.


  1. html, body
  2. {background-color: #dadada;
  3. color: #000000;
  4. margin-top: 10px;
  5. font-family: 'Trebuchet MS', Arial, sans-serif;
  6. }
  1. div#strona
  2. {width: 800px;
  3. margin: 0 auto;
  4. padding: 10px;
  5. background-color: #ffd2ff;
  6. }
  1. div#naglowek
  2. {height: 100px;
  3. padding: 10px;
  4. background-color: #7b327b;
  5. color: #ffffff;
  6. }
  1. div#menu_1
  2. {width: 150px;
  3. float: right;
  4. overflow: hidden;
  5. padding: 10px;
  6. background-color: #cb78cb;
  7. }
  1. div#menu_1 ul
  2. {list-style-type: none;
  3. }
  1. div#menu_2
  2. {width: 150px;
  3. float: right;
  4. overflow: hidden;
  5. padding: 10px;
  6. background-color: #df8cdf;
  7. }
  1. div#menu_2 ul
  2. {list-style-type: none;
  3. }
  1. div#zawartosc
  2. {overflow: hidden;
  3. padding: 20px;
  4. background-color: #ffbeff;
  5. }
  1. div#stopka
  2. {clear: both;
  3. padding: 10px;
  4. background-color: #8f468f;
  5. color: #ffffff;
  6. }

Po wpisaniu wszystkich reguł do arkusza stylów i powiązaniu z nim pliku HTML, strona wygląda w ten sposób:

trzy kolumny - oba menu razem po prawej

do góry



Zadania do wykonania:

W tym ćwiczeniu należy zastosować własności CSS, które pozwolą zbudować szablon strony oparty na znacznikach <div>...</div>. Zadanie polega na sformatowaniu jednego pliku HTML jednym plikiem CSS i drugiego pliku HTML drugim plikiem CSS. W pierwszym pliku HTML należy uzyskać szablon z dwiema kolumnami, a w drugim z trzema kolumnami.

1. Należy zacząć od przygotowania struktury folderów i plików:


  1. foldery:
  2. cw_19 - główny
  3. pliki - zawarty w głównym
  4. style - zawarty w głównym

  1. pliki:
  2. plik_1.html - w folderze pliki
  3. plik_2.html - w folderze pliki
  4. style_1.css - w folderze style
  5. style_2.css - w folderze style

W pierwszym pliku należy umieścić treść taką samą, jak w obu przykładach opisujących budowę szablonu z dwiema kolumnami - tutaj.

Jedyna zmiana polega na dodaniu po div-ie z identyfikatorem naglowek, drugiego div-u z identyfikatorem naglowek_2 i z treścią: nagłówek 2. W pierwszym nagłówku należy napisać: nagłówek 1.

Po wpisaniu całej treści plik_1.html powinien wyglądać następująco bez żadnego formatowania:

plik_1.html

3. W pliku CSS należy przygotować reguły formatujące plik_1.html, tak by uzyskać gotowy szablon.


  1. zawartość pliku CSS style_1.css:
  2. html, body
  3. {background-color: #ffff90;
  4. color: #000000;
  5. margin-top: 5px;
  6. font-family: 'Trebuchet MS', Arial, sans-serif;
  7. }
  1. div#strona
  2. {width: 900px;
  3. margin: 0 auto;
  4. padding: 10px;
  5. background-color: #c8c8ff;
  6. }
  1. div#naglowek
  2. {height: 30px;
  3. padding: 15px;
  4. margin-bottom: 2px;
  5. background-color: #000060;
  6. color: #ffffff;
  7. }
  1. div#naglowek_2
  2. {height: 100px;
  3. padding: 15px;
  4. margin-bottom: 2px;
  5. background-color: #1e1e6e;
  6. color: #ffffff;
  7. }
  1. div#menu
  2. {width: 200px;
  3. float: right;
  4. overflow: hidden;
  5. padding: 10px;
  6. margin-left: 2px;
  7. background-color: #7878c8;
  8. }
  1. div#menu ul
  2. {list-style-type: none;
  3. }
  1. div#zawartosc
  2. {overflow: hidden;
  3. padding: 40px;
  4. background-color: #9696e1;
  5. }
  1. div#stopka
  2. {clear: both;
  3. height: 50px;
  4. padding: 10px;
  5. margin-top: 2px;
  6. background-color: #323296;
  7. color: #ffffff;
  8. }

Po wpisaniu całego arkusza CSS i połączeniu z nim pliku HTML, plik_1.html powinien wyglądać następująco:

plik_1.html

W drugim pliku należy umieścić treść taką samą, jak w trzech przykładach opisujących budowę szablonu z trzema kolumnami - tutaj.

Jedyna zmiana polega na dodaniu po div-ie z identyfikatorem naglowek, drugiego div-u z identyfikatorem naglowek_2 i z treścią: nagłówek 2. W pierwszym nagłówku należy napisać: nagłówek 1.

Po wpisaniu całej treści plik_2.html powinien wyglądać następująco bez żadnego formatowania:

plik_2.html

plik_2.html - cd

3. W pliku CSS należy przygotować reguły formatujące plik_2.html, tak by uzyskać gotowy szablon.


  1. zawartość pliku CSS style_2.css:
  2. html, body
  3. {background-color: #c8c8ff;
  4. color: #000000;
  5. margin-top: 5px;
  6. font-family: 'Trebuchet MS', Arial, sans-serif;
  7. }
  1. div#strona
  2. {width: 900px;
  3. margin: 0 auto;
  4. padding: 10px;
  5. background-color: #ffe6e6;
  6. }
  1. div#naglowek
  2. {height: 80px;
  3. padding: 10px;
  4. margin-bottom: 4px;
  5. background-color: #820000;
  6. color: #ffffff;
  7. }
  1. div#naglowek_2
  2. {height: 30px;
  3. padding: 10px;
  4. margin-bottom: 4px;
  5. background-color: #961e1e;
  6. color: #ffffff;
  7. }
  1. div#menu_1
  2. {width: 120px;
  3. float: right;
  4. overflow: hidden;
  5. padding: 5px;
  6. margin-left: 4px;
  7. background-color: #be6464;
  8. }
  1. div#menu_1 ul
  2. {list-style-type: none;
  3. }
  1. div#menu_2
  2. {width: 180px;
  3. float: right;
  4. overflow: hidden;
  5. padding: 5px;
  6. margin-left: 4px;
  7. background-color: #d29696;
  8. }
  1. div#menu_2 ul
  2. {list-style-type: none;
  3. }
  1. div#zawartosc
  2. {overflow: hidden;
  3. padding: 30px;
  4. background-color: #f0c8c8;
  5. }
  1. div#stopka
  2. {clear: both;
  3. height: 40px;
  4. padding: 10px;
  5. margin-top: 4px;
  6. background-color: #963232;
  7. color: #ffffff;
  8. }

Po wpisaniu całego arkusza CSS i połączeniu z nim pliku HTML, plik_2.html powinien wyglądać następująco:

plik_2.html

Tak wyglądają oba szablony po formatowaniu:

plik_1.html

plik_2.html


Oceniany będzie folder cw_19 z dwoma podfolderami: pliki i style, w których zawarte będą odpowiednio pliki: w folderze pliki: plik_1.html i plik_2.html, w folderze style: style_1.css i style_2.css.

Pliki HTML powinny być sformatowane zgodnie z poleceniami za pomocą zewnętrznych arkuszy stylów. Efektem formatowania winny być dwa szablony strony: z dwiema kolumnami i z trzema kolumnami.




Strona Główna


do góry

Przy przygotowywaniu powyższego ćwiczenia wielką pomocą służył kurs HTML-a - w wersji online: http://www.kurshtml.boo.pl, jak również w wersji offline do pobrania z tej samej strony.

Copyright © 2008   Sławek Rokicki