Uwaga w niektórych przeglądarkach różnice mogą być niewidoczne zależy to od przeglądarki i ew. od jej ustawień.

Transkrypt

1 Poprzednie zajęcia skończyliśmy ucząc się tworzenia odsyłaczy/hiperłączy/linków (można wrócić do poprzedniego scenariusza, jeśli ktoś go nie skończył). Skoro jesteśmy przy odsyłaczach, to warto poznać możliwości zmiany zachowania odsyłaczy (ich wygląd, przed odwiedzeniem strony, w czasie kiedy najedziemy na niego kursorem, czy też odwiedzony link). Uwaga w niektórych przeglądarkach różnice mogą być niewidoczne zależy to od przeglądarki i ew. od jej ustawień. Ustawienia stylów (np. w pliku stylów *.css): a:link właściwość: wartość a:visited właściwość: wartość a:hover właściwość: wartość a:active właściwość: wartość tak wygląda link standardowy, jeszcze nie odwiedzony tak wygląda link już odwiedzony tak wygląda link po najechaniu na niego kursorem tak wygląda link po ciśnięciu przycisku myszy Oczywiście można używać różnych właściwości/cech, np.: text-decoration: underline bold; color: red; font-size: 22pt; /*link będzie podkreślony, pogrubiony*/ /*kolor fontu linków na stronie będzie czerwony*/ /*wielkość/stopień pisma będzie wynosił 22pt*/ a tak dla przypomnienia - komentarze w css ujmujemy w znaczniki /* */ w przeciwieństwie do komentarzy w html, gdzie stosujemy znaczniki <!-- -->

2 Wykorzystanie znacznika DIV. Znacznik <DIV> można nazwać blokiem, sekcją, zasobnikiem, pudełkiem, w którym umieszczamy dowolną treść. Poszczególne DIVy można dowolnie umieszczać na stronie, względem siebie i dodatkowo można ustawiać je jak warstwy jedna nad drugą (jedna zasłaniająca drugą). Jak to działa? Jeśli umieścimy w kodzie dwa znaczniki DIV bez parametrów: <div>pierwsza treść, zdjęcie, tabele lub cokolwiek </div> <div>druga treść</div> to efekt będzie taki: Jeśli dodamy jakieś parametry stylów dla poszczególnych DIV-ów, np.: <div style="float: left">pierwsza treść, zdjęcie, tabele lub cokolwiek </div> <div>druga treść</div> to otrzymamy: Kod: czyli umieściliśmy nasz element/pudełko DIV w taki sposób, że jest z lewej strony i z drugiej strony jest umieszczony drugi element. W ten sposób można np. oblać tekstem rysunek. <div style="float: left"> <img src="kwiat.gif" alt="kwiatek" /> </div> W Szczebrzeszynie chsząszcz brzmi w trzcinie a Szczebrzeszyn z tego słynie. W Szczebrzeszynie chsząszcz brzmi w trzcinie a Szczebrzeszyn z tego słynie. W Szczebrzeszynie chsząszcz brzmi w trzcinie a Szczebrzeszyn z tego słynie. W Szczebrzeszynie chsząszcz brzmi w trzcinie a Szczebrzeszyn z tego słynie. W Szczebrzeszynie chsząszcz brzmi w trzcinie a Szczebrzeszyn z tego słynie. W Szczebrzeszynie chsząszcz brzmi w trzcinie a Szczebrzeszyn z tego słynie. Efekt: Bez style="float: left" efekt byłby taki: Więcej nt. pozycjonowania DIV-ów (głównie w połączeniu z CSS): (cały rozdział nt. pozycjonowania)

3 Znacznik <span> Do wyróżniania fragmentów dokumentu HTML jest znacznik <span>, pozwala on na grupowanie elementów. Działa trochę podobnie do <div> z tym, że sam w sobie nie wpływa na wygląd bądź pozycjonowanie wspomnianych fragmentów. Jego działanie jest bardzo proste. Przykład: CSS i HTML: Efekt: Proszę zauważyć, że wyróżnione są (zastosowany jest do nich styl określony przez klasę czerwony ) tylko te fragmenty pierwszego zdania, które są ujęte w znacznik grupujący <span>. Znacznik akapitu <p> użyłem po to żeby pokazać różnicę pomiędzy przypisaniem stylu do całego akapitu w stosunku do przypisania tylko do jego fragmentów. Takich efektów nie uzyskamy również przy użyciu <div> chyba, że bawilibyśmy się w bardzo dokładne pozycjonowanie/układanie poszczególnych divów względem siebie, co wymagało by sporo pracy a do tego każda zmiana powodowała by konieczność ponownego dopasowywania divów do siebie.

4 z-index Przy stosowaniu znaczników div można użyć znacznika położenia w osi Z: z-index Czyli czy element jest bliżej nas czy dalej. Inaczej czy jest przed innym elementem czy za nim. Przykład (świadomie wklejam zrzuty ekranu, żebyście Państwo pisali nie ma tego dużo a skuteczniej się uczy, kiedy człowiek się parę razy pomyli Będzie to strona z trzema rysunkami umieszczonymi względem strony lub elementu nadrzędnego (pozycjonowanie absolute) W pliku CSS mamy trzy selektory identyfikatorów: element1 3 (ich położenie jest ustalone poprzez trzy pierwsze właściwości position, left, top). W pliku strony dodajemy trzy znaczniki div, w których umieszczamy obrazy: Efekt na następnej stronie.

5 Efekt: Przy pomocy właściwości z-index, możemy ustalać, który element leży wyżej, a który niżej, np.: Teraz będą identycznie jak poprzednio:

6 A przy takich wartościach właściwości z-index: będą w kolejności odwrotnej pierwszy na górze : Do czego można to wykorzystać? Np. do opisywania zdjęć można umieścić tytuł zdjęcia nad nim i będziemy mieli pewność, że niezależnie od kolejności wstawiania tych elementów w kodzie strony opis będzie zawsze widoczny (przy wyższej wartość z-index). W niektórych przeglądarkach, bez ustawienia tego parametru strona będzie źle wyświetlana będziemy mieli taki przykład, kiedy będziemy używali kontrolki menu przy tworzeniu aplikacji internetowej w ASP.

7 Jeśli zostanie czas, to proszę zerknąć na stronę: jest tu fajnie wytłumaczone zagadnienie marginesów (wewnętrznego i zewnętrznego padding i margin) oraz obramowań (border) łącza do szczegółowego opisu wspomnianych funkcji są na dole strony. Proszę to przećwiczyć. Warte uwagi internetowe kursy CSS i HTML: i wiele innych, wystarczy tylko ćwiczyć, ćwiczyć i ćwiczyć :) Proszę również mieć świadomość, że niedługo będą wdrażane oficjalnie HTML w wersji 5 i CSS w wersji 3. Warto poczytać o nowościach wprowadzanych przez te przyszłe standardy.

8 CSS i layout strony Zadanie: Zrobimy stronę podobną do tej, której schemat jest poniżej. Nagłówek strony i logo Menu: - Strona główna - łącza do poszczególnyc h stron z zadaniami Poszczególne strony Stopka Autor strony, data (aktualna), adres i przycisk wyślij Działa to w taki sposób, że skorzystamy ze znaczników <div>, w których umieścimy poszczególne części strony. <div> to takie pudełko, w którym możemy umieścić dowolną zawartość i te pudełka umieszczać na stronie niezależnie od siebie. Struktura strony będzie wyglądała następująco: <html> <head> <link rel="stylesheet" type="text/css" href="style/stylesheet.css" /> <! oczywiście jeśli strona jest w tym samym katalogu, co plik arkuszy stylów, to link będzie bez nazwy katalogu podrzędnego--> </head> <body> <div><!--ten div to główne pudełko, w którym będą umieszczone pozostałe--> <div><!--tu będzie Nagłówek--></div> <div><!--tu będzie Menu--></div> <div><!--tu będzie contentplaceholder, czyli zasobnik na treść poszczególnych stron--></div> <div><!--tu będzie stopka--></div> </div> </body> </html> Jeśli zostawili byśmy tak jak to widać, to efekt byłby taki, że poszczególne <div> umieszczone byłyby jeden pod drugim. Żeby <div> mogły być ułożone tak jak tego chcemy, to w pliku CSS musimy utworzyć ich cechy i wartości tych cech.

9 Czyli plik StyleSheet.css możemy zrobić tak, jak poniżej. (dla przypomnienia jeśli selektor jest poprzedzony znakiem # to znaczy, że jest selektorem identyfikatora. Identyfikator można dodać tylko do jednego elementu na jednej stronie. Sposób dodania jest widoczny na następnej stronie). #CALOSC width: 1004px; /* warto całość umieścić w jednym pudełku, mamy wtedy pewność, że żaden <div> wewnątrz nie ucieknie nam, czyli nie przesunie się. Proszę jeszcze zwrócić uwagę, że określona jest szerokość największego zasobnika, żebyśmy mieli pewność, że strona będzie wyglądała tak jak chcemy a nie rozszerzy nam się na całą szerokość ekranu, ponieważ wtedy na różnych monitorach strona może różnie wyglądać. I jeszcze suma szerokości tych dwóch pudełek, które są koło siebie nie może być większa niż szerokość głównego pudełka, ponieważ ustawiły by się jedno pod drugim */ #NAGLOWEK /* tu nie musimy nic dodawać, w sumie to takiego selektora identyfikatora nie musielibyśmy dodawać. I tak na marginesie jeśli chcemy dodać komentarz, czyli jakiś tekt, który nie będzie brany pod uwagę a może być pomocny w opisaniu sobie gdzie co jest, to możemy umieścić gpo pomiędzy takimi znaczkami, jak na początku i na końcu zielonego tekstu */ #MENU width: 204px; float: left; overflow: hidden; /* tutaj mamy po kolei: - szerokość zasobnika - sposób umieszczenia tego zesobnika względem pozostałych - overflow, to parametr, który przy ustawieniu wartości hidden powoduje, że jeśli umieścimy w zasobniku coś, co nie będzie się w nim mieściło, to część tego nie będzie widoczna chodzi o to, żeby np. za duży rysunek nie nakładał się na inny zasobnik lub nie powodował konieczności jego przesunięcia. Prawda, że proste ;) */ #TRESC width: 800px; float:left; overflow: hidden; /* tutaj mamy podobne parametry, jak w przypadku #MENU, tylko większą szerokość */ #STOPKA clear: both; /* ten parametr blokuje możliwość umieszczenia innych <div> obok po prostu obie strony (both) muszą być czyste (clear) */ A kod stron będzie, w części <body>, wyglądał następująco: <body> <div id="calosc"> <div id="naglowek">tu będzie Nagłówek</div> <div id="menu">tu będzie Menu</div> <div id="tresc">tu będzie treść stron</div> <div id="stopka">tu będzie stopka</div> </div> </body> Efekt (dodałem kolory, żeby było lepiej widać). Proszę również dodać kolory.

10

11 Zadanie - kolejna, inna, strona - tak jak mówiłem, jeśli ktoś chce, to może sobie w domu zrobić swój layout, ale nie ma takiej konieczności - na stronie zamieściłem gotowy zestaw obrazów. Tak więc strony od 10 do 14 można pominąć. Tworzymy nowy obraz w Photoshopie. Proszę wziąć pod uwagę rozmiar tak, żeby mieścił się na standardowym ekranie (rozdzielczości). Można ustawić(zakładam, że najmniejsza rozdzielczość ekranu będzie wynosiła 1280x800): - szerokość na np (margines 20 px na suwak/pasek przewijania strony), - wysokość na 600 (te 200 px na paski przeglądarki i pasek zadań Windows; oczywiście trudno przewidzieć ile każdy odwiedzający naszą stronę ma zajętego miejsca, ale tak powinno być OK nie powinna wystąpić konieczność wyświetlania paska przewijania pionowego. Tworzymy layout strony (na poniższym przykładzie zrobiłem bardzo prosty layout, żeby było dobrze wszystko widać). Jeśli ktoś ma Layout z wcześniejszych zajęć, to może go wykorzystać.

12 Dodajemy wszystkie elementy strony. Nie ma różnicy, czy będą one na różnych warstwach itp. w efekcie i tak będziemy korzystali z Przy pomocy narzędzia Slice Tool (nóż?) dzielimy obraz na części.

13 Zapisujemy plik do sieci Web. W oknie zapisu możemy zdecydować o formacie i parametrach zapisu poszczególnych fragmentów obrazu.

14 W trakcie zapisywania można zerknąć do Preview zobaczymy jak wygląda nasza strona i będzie można zobaczyć, jak strona wygląda w przeglądarce oraz zobaczyć wygenerowany kod w postaci tabeli z poszczególnymi częściami w komórkach tabeli (my zrobimy w DIV). Po zapisaniu otrzymujemy zbiór plików

15 Warto sobie zmienić widok w Explorerze, żeby widzieć rozdzielczość poszczególnych obrazków pomoże to nam przy ustalaniu parametrów znaczników DIV.

16 Zadanie Następnie, skorzystamy z kaskadowych arkuszy stylów w celu rozmieszczenia elementów na stronie. Plik HTML Ustawienie jest takie (to tylko schemat) DIV strona DIV naglowek DIV menu DIV OMnie DIV Hobby DIV Wroclaw DIV Kontakt DIV MenuCD DIV Tresc DIV Reklama DIV MenuCD jest po to, żeby tło było takie jak trzeba (czyli kontynuacja gradientu).

17 Plik CSS (na kolejnej stronie jest to samo - jeśli ktoś chce, to może skopiować, chociaż lepiej zostaje w głowie, jeśli wpisuje się samodzielnie. width szerokość height wysokość background parametry tła: kolor url( adres obrazka ) brak powtarzania float jak mają się układać inne elementy clear że obok nie może być innych elementów overflow że zawartość DIVa nie może wychodzić poza pudełko na następnej stronie wklejam tekst - można go sobie skopiować, ale dobrze by było, żebyście Państwo wpisali przynajmniej część - dla praktyki

18 body #tlo #strona width: 1004px; margin: 2cm auto; #naglowek width:1004px; height: 80px; background: green url("images/naglowek.gif") no-repeat; #menu clear: both; #StronaGlowna width: 160px; height: 30px; background: green url("images/stronaglowna.gif") no-repeat; float: left; overflow: hidden; #OMnie width: 91px; height: 30px; background: green url("images/omnie.gif") no-repeat; float: left; overflow: hidden; #Hobby width: 76px; height: 30px; background: green url("images/hobby.gif") no-repeat; float: left; overflow: hidden; #Wroclaw width: 94px; height: 30px; background: green url("images/wroclaw.gif") no-repeat; float: left; overflow: hidden; #Kontakt width: 101px; height: 30px; background: green url("images/kontakt.gif") no-repeat; float: left; overflow: hidden; #MenuCD width: 482px; height: 30px; background: green url("images/menucd.gif") no-repeat; float: left; overflow: hidden; #Tresc width: 824px; height: 491px; background: green url("images/tresc.gif") no-repeat; float: left; overflow: hidden; #Reklama width: 180px; height: 491px; background: green url("images/reklama.gif") no-repeat; float: left;

19 overflow: hidden; TMwOSiPD, WWW zajęcia 2, Aleksander Krzyś

20 Zadanie Proszę stworzyć wszystkie strony (OMnie, Hobby, Wrocław, Kontakt) i napisać coś na nich. Strony umieścić w katalogu strony. Index.html ma być poza tym katalogiem. Standardowo robimy to tak, że tworzymy strony o identycznej treści jak index.html i w pudełku Tresc wpisujemy zawartość strony. Proszę zwrócić uwagę, że trzeba podać prawidłowe linki do poszczególnych plików html i pliku CSS. To nie jest najwygodniejszy sposób tworzenia stron, ponieważ każda strona musi zawierać całą zawartość i tylko w części jest treść strony. To nie jest bardzo "fachowy" sposób tworzenia stron, ale jest prosty i można dobrze się przy tym uczyć zasad budowania stron opartych na HTML i CSS.