CSS - layout strony internetowej

Transkrypt

1 radmat

2 Ćwiczenie 1 Proszę przy pomocy listy stworzyć menu pionowe o następujących własnościach:

3 Ćwiczenie 1 Proszę przy pomocy listy stworzyć menu pionowe o następujących własnościach: szary kolor tła przycisku

4 Ćwiczenie 1 Proszę przy pomocy listy stworzyć menu pionowe o następujących własnościach: szary kolor tła przycisku biała czcionka przycisku

5 Ćwiczenie 1 Proszę przy pomocy listy stworzyć menu pionowe o następujących własnościach: szary kolor tła przycisku biała czcionka przycisku efekt wciśnięcia przycisku po zatrzymaniu nad nim kursora myszy

6 Ćwiczenie 1 Proszę przy pomocy listy stworzyć menu pionowe o następujących własnościach: szary kolor tła przycisku biała czcionka przycisku efekt wciśnięcia przycisku po zatrzymaniu nad nim kursora myszy Podpowiedź: display: block, list-style: none.

7 li { display: block; list-style: none; margin: 0; width: 200px; }

8 ul a:link, ul a:visited { display: block; width: 186px; text-decoration: none; background-color: #ccc; color: #ffffff; padding: 5px; border: 2px outset #ccc; } ul a:hover { border-style: inset; padding: 7px 3px 3px 7px; }

9 Menu poziome W bardzo łatwy sposób powyżej stworzone menu pionowe przerobimy na poziome. Wystarczy do selektora li dopisać regułę float : left, co spowoduje, że elementy listy będą ustawione obok siebie.

10 Ćwiczenie 2 Proszę stworzyć następujące menu: Link nieodwiedzony Link po zatrzymaniu kursora myszy

11 ul { display: block; list-style: none; margin: 0; width: 200px; padding: 2px 2px 1px 2px; background-color: #9ce; border: 3px double #28e; } li { border-bottom: 1px solid #9ce; }

12 a:link, a:visited { display: block; width: 176px; text-decoration: none; padding: 7px; font-weight: bold; background-color: #27c; color: #def; border-left: 10px solid #25b; } a:hover { width: 166px; background-color: #28e; color: #fff; border-left: 20px solid #26d; }

13 Ćwiczenie 3 Wykorzystując dziedziczenie cech oraz selektory dziecka / potomka proszę stworzyć następującą mini strukturę Wydziału Matematyki i Informatyki: Nazwiska prowadzących powinny być aktywnym linkiem prowadzącym do stron osób. Po zatrzymaniu kursora myszy nad odnośnikiem należy podkreślić tekst będący linkiem.

14 Plik index.html <ol> <li><a href="#">katedra Analizy Matematycznej i Teorii Sterowania</a> <ul> <li><a href="#"></a></li> </ul> </li> <li><a href="#">katedra Informatyki Stosowanej</a> <ul> <li><a href="#">dr Piotr Cybula</a></li> <li><a href="#">dr Wojciech Horzelski</a></li> <li><a href="#">dr Paweł Zajączkowski</a></li> </ul> </li> </ol>

15 Plik styl.css a:link { text-decoration: none; } a:hover { text-decoration: underline; } ol > li { color: green; } ul > li { color: red; }

16 ol > li > a:link, ol > li > a:visited { color: green; font-weight: bold; } ol > li > ul > li > a:link, ol > li > ul > li > a:visited { color: red; }

17 Nadawanie stylu poszczególnym elementom atrybut id - służy grupowaniu (nadawaniu cech) elementom, które są unikalne, tj. występują jednokrotnie na danej podstronie strony WWW.

18 Nadawanie stylu poszczególnym elementom atrybut id - służy grupowaniu (nadawaniu cech) elementom, które są unikalne, tj. występują jednokrotnie na danej podstronie strony WWW. atrybut class - służy grupowaniu (nadawaniu cech) elementom, które powtarzają się na danej podstronie strony WWW.

19 Przykład 1 Załóżmy, że mamy napisać serwis, który będzie się składał z dwóch podstron: index.html i kontakt.html. Na pierwszej stronie chcemy dla nagłówka H1 ustawić niebieski kolor czcionki i ją pogrubić, natomiast na drugiej podstronie chcemy, aby nagłówek H1 napisany był na zielono kursywą. Wówczas w pliku CSS określamy odpowiednie atrybuty:

20 Przykład 1 Załóżmy, że mamy napisać serwis, który będzie się składał z dwóch podstron: index.html i kontakt.html. Na pierwszej stronie chcemy dla nagłówka H1 ustawić niebieski kolor czcionki i ją pogrubić, natomiast na drugiej podstronie chcemy, aby nagłówek H1 napisany był na zielono kursywą. Wówczas w pliku CSS określamy odpowiednie atrybuty: #naglowek_glowna { color: blue; font-weight: bold; }

21 Przykład 1 Załóżmy, że mamy napisać serwis, który będzie się składał z dwóch podstron: index.html i kontakt.html. Na pierwszej stronie chcemy dla nagłówka H1 ustawić niebieski kolor czcionki i ją pogrubić, natomiast na drugiej podstronie chcemy, aby nagłówek H1 napisany był na zielono kursywą. Wówczas w pliku CSS określamy odpowiednie atrybuty: #naglowek_glowna { color: blue; font-weight: bold; } #naglowek_kontakt { color: green; font-style: italic; }

22 Wówczas w pliku index.html powinniśmy napisać <h1 id="naglowek_glowna">... </h1>

23 Wówczas w pliku index.html powinniśmy napisać <h1 id="naglowek_glowna">... </h1> natomiast w pliku kontakt.html

24 Wówczas w pliku index.html powinniśmy napisać <h1 id="naglowek_glowna">... </h1> natomiast w pliku kontakt.html <h1 id="naglowek_kontakt">... </h1>

25 Przykład 2 Załóżmy, że na jednej podstronie musimy umieścić dwie listy numerowane. Załóżmy, że elementy pierwszej listy mają zostać wyświetlone na czerwono, a drugiej na zielono. W pliku CSS powinniśmy napisać:

26 Przykład 2 Załóżmy, że na jednej podstronie musimy umieścić dwie listy numerowane. Załóżmy, że elementy pierwszej listy mają zostać wyświetlone na czerwono, a drugiej na zielono. W pliku CSS powinniśmy napisać:.lista_na_czerwono { color: red; }

27 Przykład 2 Załóżmy, że na jednej podstronie musimy umieścić dwie listy numerowane. Załóżmy, że elementy pierwszej listy mają zostać wyświetlone na czerwono, a drugiej na zielono. W pliku CSS powinniśmy napisać:.lista_na_czerwono { color: red; }.lista_na_zielono { color: green; }

28 W pliku HTML możemy napisać: <ol class="lista_na_czerwono"> <li>jeden <li>dwa <li>trzy </ol>

29 W pliku HTML możemy napisać: <ol class="lista_na_czerwono"> <li>jeden <li>dwa <li>trzy </ol> Zupełnie analogicznie należy umieścić na stronie drugą listę.

30 Ćwiczenie 4 Proszę na jednej stronie stworzyć dwie listy nieuporządkowane, składające się z czterech elementów. W pierwszej liście pozycje nieparzyste należy wyświetlić w kolorze niebieskim, a parzyste w czerwonym i dodatkowo je podkreślić.

31 Ćwiczenie 4 Proszę na jednej stronie stworzyć dwie listy nieuporządkowane, składające się z czterech elementów. W pierwszej liście pozycje nieparzyste należy wyświetlić w kolorze niebieskim, a parzyste w czerwonym i dodatkowo je podkreślić. W drugiej liście pozycje nieparzyste należy wypunktować używając obrazka (list-style-image: url( strzalka.jpg )), a pozycje parzyste wyświetlić na zielono i tekst pochylić.

32 Layout strony Layout strony będziemy tworzyć za pomocą bloków (DIV-ów). Wpiszmy w sekcji BODY:

33 Layout strony Layout strony będziemy tworzyć za pomocą bloków (DIV-ów). Wpiszmy w sekcji BODY: <body> <div id="cala_strona"> <div id="naglowek">nagłówek</div> <div id="lewo">menu</div> <div id="prawo">treść strony</div> <div id="stopka">stopka</div> </div> </body>

34 Layout strony Layout strony będziemy tworzyć za pomocą bloków (DIV-ów). Wpiszmy w sekcji BODY: <body> <div id="cala_strona"> <div id="naglowek">nagłówek</div> <div id="lewo">menu</div> <div id="prawo">treść strony</div> <div id="stopka">stopka</div> </div> </body> Utwórzmy dla bloków DIV (oprócz bloku cala strona) odpowiednie reguły CSS, dzięki którym ustawimy kolor tła dla poszczególnych bloków.

35 Płynny szablon Aby ułożyć obok siebie elementy lewo i prawo trzeba dopisać regułę float: left dla obu elementów.

36 Płynny szablon Aby ułożyć obok siebie elementy lewo i prawo trzeba dopisać regułę float: left dla obu elementów. Teraz napiszemy reguły, które ustawią nam szerokość przeznaczoną na menu np. na 30% i szerokość przeznaczoną na treść strony na 70%.

37 Płynny szablon Aby ułożyć obok siebie elementy lewo i prawo trzeba dopisać regułę float: left dla obu elementów. Teraz napiszemy reguły, które ustawią nam szerokość przeznaczoną na menu np. na 30% i szerokość przeznaczoną na treść strony na 70%. W tym celu należy napisać width: 30% i width: 70% odpowiednio.

38 Płynny szablon Aby ułożyć obok siebie elementy lewo i prawo trzeba dopisać regułę float: left dla obu elementów. Teraz napiszemy reguły, które ustawią nam szerokość przeznaczoną na menu np. na 30% i szerokość przeznaczoną na treść strony na 70%. W tym celu należy napisać width: 30% i width: 70% odpowiednio. Możemy też ustawić minimalną wysokość elementów lewo i prawo wpisując reguły min-height: 250px.

39 Płynny szablon Aby ułożyć obok siebie elementy lewo i prawo trzeba dopisać regułę float: left dla obu elementów. Teraz napiszemy reguły, które ustawią nam szerokość przeznaczoną na menu np. na 30% i szerokość przeznaczoną na treść strony na 70%. W tym celu należy napisać width: 30% i width: 70% odpowiednio. Możemy też ustawić minimalną wysokość elementów lewo i prawo wpisując reguły min-height: 250px. Proszę dopisać reguły, które wyśrodkują teksty pojawiające się w nagłówku i stopce, ustawią wielkość czcionki na 24px oraz odsuną elementy lewo i prawo od lewej krawędzi.

40 Aby uzyskać pożądany efekt plik HTML powinien wyglądać następująco: <body> <div id="cala_strona"> <div id="naglowek">nagłówek</div> <div id="lewo"><p>menu</p></div> <div id="prawo"><p>treść strony</p></div> <div id="stopka">stopka</div> </div> </body>

41 Stały szablon Stwórzmy identyczny szablon strony HTML, jak w poprzednim przykładzie.

42 Stały szablon Stwórzmy identyczny szablon strony HTML, jak w poprzednim przykładzie. Tym razem jednak szerokości elementów lewo i prawo określimy podając konkretne wartości, np. 200px i 580px odpowiednio.

43 Stały szablon Stwórzmy identyczny szablon strony HTML, jak w poprzednim przykładzie. Tym razem jednak szerokości elementów lewo i prawo określimy podając konkretne wartości, np. 200px i 580px odpowiednio. Jak łatwo się domyślić - szerokość nagłówka i stopki powinna wynosić w tym przypadku 780px, co ustawimy pisząc regułę dla cala strona.

44 Stały szablon Stwórzmy identyczny szablon strony HTML, jak w poprzednim przykładzie. Tym razem jednak szerokości elementów lewo i prawo określimy podając konkretne wartości, np. 200px i 580px odpowiednio. Jak łatwo się domyślić - szerokość nagłówka i stopki powinna wynosić w tym przypadku 780px, co ustawimy pisząc regułę dla cala strona. Jeśli chcielibyśmy wyśrodkować całą stronę, wystarczy dla zewnętrznego DIV-a dopisać regułę margin: 0 auto.