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>



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

Podstawy pozycjonowania CSS

Laboratorium 1: Szablon strony w HTML5

Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp.

Nazwa implementacji: CSS i box model. Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie.

Responsywne strony WWW

Zadanie 1. Tworzenie nowej "strony sieci WEB". Będziemy korzystad ze stron w technologii ASP.NET.

Układy witryn internetowych

Danuta ROZPŁOCH-NOWAKOWSKA Strona Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional).

CSS - layout strony internetowej

Tabele. Przykład 15a.htm. <HTML><HEAD><TITLE> Cennik</TITLE></HEAD><BODY><H3>Cennik</H3> <TABLE BORDER="1"> <TR>

Spis treści. Konwencje zastosowane w książce...5. Dodawanie stylów do dokumentów HTML oraz XHTML...6. Struktura reguł...9. Pierwszeństwo stylów...

Specyfikacja techniczna dot. mailingów HTML

Elementy div i style CSS w praktyce

Widżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: Wersja: 1.

Dokument hipertekstowy

2 Podstawy tworzenia stron internetowych

CSS jest is an skrótem od Cascading Style Sheets (Kaskadowe Arkusze Stylów).

Adobe InDesign lab.1 Jacek Wiślicki, Paweł Kośla. Spis treści: 1 Podstawy pracy z aplikacją Układ strony... 2.

Pierwsza strona internetowa

PORADNIK KODOWANIA: CSS

HTML (HyperText Markup Language) hipertekstowy język znaczników

1. Przypisy, indeks i spisy.

Ćwiczenie 1 Galeria zdjęć

Rysunek otaczany przez tekst

Języki programowania wysokiego poziomu. CSS Wskazówki

Young Programmer: HTML+PHP. Dr inż. Małgorzata Janik, Zajęcia #2

CSS. Kaskadowe Arkusze Stylów

Tworzenie stron internetowych w kodzie HTML Cz 5

STRONY INTERNETOWE mgr inż. Adrian Zapała

Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css.

I. Formatowanie tekstu i wygląd strony

Przewodnik... Tworzenie Landing Page

za pomocą: definiujemy:

Aplikacje internetowe

I. Wstawianie rysunków

I. Dlaczego standardy kodowania mailingów są istotne?

Nowy szablon stron pracowników ZUT

EGZAMIN POTWIERDZAJĄCY KWALIFIKACJE W ZAWODZIE Rok 2016 CZĘŚĆ PRAKTYCZNA

Wymagania edukacyjne: Statyczne witryny internetowe (na podstawie programu nr )

Instrukcja obsługi funkcji specjalnych szablonu C01 v.1.0

Tutorial. HTML Rozdział: Ramki

WYMAGANIA EDUKACYJNE. Witryny i Aplikacje Internetowe klasa I

Box model: Content. Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości.

EGZAMIN POTWIERDZAJĄCY KWALIFIKACJE W ZAWODZIE Rok 2016 CZĘŚĆ PRAKTYCZNA

1. Dockbar, CMS + wyszukiwarka aplikacji Dodawanie portletów Widok zawartości stron... 3

Jak założyć stronę na blogu?

2. MATERIAŁ NAUCZANIA

Konfiguracja szablonu i wystawienie pierwszej aukcji allegro

Studia Podyplomowe Grafika komputerowa i Techniki Multimedialne, 2015, semestr II, dr inż. Robert Banasiak Projektowanie Stron WWW.

PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński

Języki programowania wysokiego poziomu. HTML cz.2.

Można też ściągnąć np. z:

I. Menu oparte o listę

Moduł IV Internet Tworzenie stron www

Justyna Klimczyk Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie

Pokaz slajdów na stronie internetowej

Instrukcja obsługi uczelnianego systemu zarządzania stronami internetowymi (CMS)

1. Aby na stronie ZS umieścić artykuł np. news, wymagania edukacyjne, konspekt trzeba założyć sobie konto, w tym celu naciskamy

Po zakończeniu rozważań na temat World Wide Web, poznaniu zasad organizacji witryn WWW, przeczytaniu kilkudziesięciu stron i poznaniu wielu nowych

Programowanie WEB PODSTAWY HTML

<!DOCTYPE HTML PUBLIC " //W3C//DTD HTML 4.01 Transitional//EN" "

Mailingi HTML. Specyfikacja techniczna

Masz pomysł na lepszy wygląd?

Podstawy HTML i styli CSS. selektor {właściwość1: wartość1; właściwość2: wartość2}

Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np. <BR>

Tworzenie Stron Internetowych. odcinek 9

Techniki wstawiania tabel

1. Umieść kursor w miejscu, w którym ma być wprowadzony ozdobny napis. 2. Na karcie Wstawianie w grupie Tekst kliknij przycisk WordArt.

Kaskadowe arkusze stylów (CSS)

Przed rozpoczęciem pracy otwórz nowy plik (Ctrl +N) wykorzystując szablon acadiso.dwt

Instrukcja dodawania obiektów do strony Ekonomika.

SterBox. Przygotowanie Strony Użytkownika

ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści

Proste kody html do szybkiego stosowania.

Idea of responsive web design. Roman Białek Mateusz Mikołajczak Kacper Palmowski Krzysztof Szot

Można też ściągnąć np. z:

Tworzenie infografik za pomocą narzędzia Canva

MasterEdytor. Podprogram pomocniczy do programu mpfotoalbum 1.2 INSTRUKCJA

WORDPRESS INSTRUKCJA OBSŁUGI

Ćwiczenie 8 Kolory i znaki specjalne

Edytor tekstu OpenOffice Writer Podstawy

Tworzenie szablonów użytkownika

Pasek menu. Ustawienia drukowania

Instrukcja tworzenia stron w SILNIKU Do użytku wewnętrznego

Często używanym elementem języka HTML są tabele, które wykorzystuje się do wygodnego rozmieszczania informacji i obrazów.

Personalizowanie wirtualnych pokojów

Ćwiczenie 1 - Arkusze kalkulacyjne

Ćwiczenie 3 - Odsyłacze

e r T i H M r e n L T n

Elementarz HTML i CSS

Krok 1: Stylizowanie plakatu

Podstawy technologii WWW

MySource Matrix CMS. Prosty Interfejs Użytkownika INSTRUKCJA wersja 1.3 POLAND AUSTRALIA UNITED KINGDOM NEW ZEALAND UNITED STATES

Jak posługiwać się edytorem treści

Dokumentacja techniczno-użytkowa Serwis internetowy

TWORZENIE PREZENTACJI MS POWERPOINT

INSTRUKCJA OBSŁUGI BIULETYNU INFORMACJI PUBLICZNEJ

Pozycjonowanie elementów

Transkrypt:

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 (ramką jest zaznaczony pierwszy <div>, nie będzie ona widoczna na stronie: 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. Szczebrzeszynie chsząszcz brzmi w trzcinie a Szczebrzeszyn z tego słynie. 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. Szczebrzeszynie chsząszcz brzmi w trzcinie a Szczebrzeszyn z tego słynie. Efekt: W W W Bez style="float: left" efekt byłby taki: Więcej nt. pozycjonowania DIV-ów (głównie w połączeniu z CSS): http://webmade.org/kursyonline/pozycjonowanie-absolutne-relatywne-kurs-css.php http://www.kurshtml.boo.pl/css/pozycjonowanie.html (cały rozdział nt. pozycjonowania) CSS i layout strony

Zadanie: BSI, zajęcia 2 HTML, Aleksander Krzyś Zrobimy stronę podobną do tej, której schemat jest poniżej. Nagłówek strony i logo Menu: - Strona główna - łącza do poszczególnych stron z zadaniami Poszczególne strony Stopka Autor strony, data (aktualna), adres email i przycisk wyślij email 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 właściwości i wartości tych cech. Czyli tworzymy np. jakąś klasę selektora i jej właściwości (przykład na nast. stronie).

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 chociaż przeglądarki dzisiaj pozwalają na dodanie go do kilku elementów, co mija się z tym, jak było planowane jego działanie. 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.

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 w materiałach zamieściłem gotowy zestaw obrazów. Tak więc strony od 5 do 9 można pominąć zawierają one instrukcję dot przygotowania grafiki (pocięcia jej) w Photoshopie. 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. 1004 (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ć. 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. Zapisujemy plik do sieci Web.

W oknie zapisu możemy zdecydować o formacie i parametrach zapisu poszczególnych fragmentów obrazu. 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 Warto sobie zmienić widok w Explorerze, żeby widzieć rozdzielczość poszczególnych obrazków pomoże to nam przy ustalaniu parametrów znaczników DIV.

Zadanie Następnie, skorzystamy z kaskadowych arkuszy stylów w celu rozmieszczenia elementów na stronie. Plik HTML Ustawienie jest takie (to tylko schemat) jeśli komuś nie wyjdzie idealnie, to proszę się nie przejmować to kwestia dopasowania wartości szerokości danego DIVa. DIV MenuCD jest po to, żeby tło było takie jak trzeba (czyli kontynuacja gradientu).

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 stron ie wklejam tekst - można go sobie skopiować, ale dobrze by było, żebyście Państwo wpisali przynajmniej część - dla praktyki

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; #OMnie overflow: hidden; width: 91px; height: 30px; background: green url("images/omnie.gif") no-repeat; float: left; overflow: hidden; BSI, zajęcia 2 HTML, Aleksander Krzyś #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; overflow: hidden;

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. Na kolejnych zajęciach trochę "zautomatyzujemy" proces wczytywania stron do części "Treść". Będziemy też tworzyć już konkretną witrynę.

Znacznik <span> BSI, zajęcia 2 HTML, Aleksander Krzyś 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.

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:

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: 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.