Rysunek otaczany przez tekst

Transkrypt

1 Tekst i obrazy 1

2 Rysunek otaczany przez tekst Wprowadzanie obiektu graficznego <img class="foto_1" src="images/big/start.jpg" width="200" alt="start czesną" /> Rozmiar ramki: width= 200 deklaruje się tylko w celach testowych float:pozycja; margin-left:wartość; margin-toop:wartość; float: left; float: right;.foto_1 { float:right; margin-left:60px; margin-bottom:60px; margin-right:40px; 2

3 Określenie rozmiaru obrazków w kodzie xhtml czy html prowadzi do tego, że małe obrazy deklarowane w dyżych ramach wprowadzaja efekt pikselozy Wybrany obraz 120x79 a deklarowano ramę 360x240 Dlatego na użytek stron wykorzystuje się zespoły różnych rozmiarów: 3

4 Galeria miniaturek bez użycia tabel 1. Wprowadziłem pliki graficzne (zdjęcia) w nieuporządkowanej liście. rozmiary obrazków są kilka razy większe (800x600) niż deklarowana ramka miniaturki (120) Elementem listy jest zdjęcie <h1> Nauka latania</h1> <ul> <li><img src="images/big/lot1.jpg" width="120" alt="rozruch" />Rozruch</li> <li><img src="images/big/lot2.jpg" width="120" alt="zajęcie pasa" />Zajęcie pasa</li> <li><img src="images/big/lot3.jpg" width="120" alt="grzanie silnika" />Grzanie silnika</li> </ul> 4

5 2. Usuwam punktowanie listy-style-type: list-style-type:none; 3. Ustawiam obrazy jeden obok drugiego w liniach, znaczniki <li > zawierające obrazy formatuję dyrektywą float float:left; Układa od lewej do prawej 4. Przesuwam napisy pod obrazy, dispalay: (pamiętajmy, że napisy są w naczniku img) dispalay:block; (display:inline) 5

6 5. Rozstawiam obrazy względem siebie z marginesem prawym bądź lewym oraz z dolnym na przestrzeń opisową: margin-right: wartość; margin-bottom:wartość; 6

7 6. Modernizuje, aby liczba zdjęć w wierszu nie była automatycznie dopasowywana do szerokości okna przeglądarki. Definiuje szerokość znacznika <li>: 7. Pozycjonuję galerię w centralną część ekranu: top:40px width: wartość; position:relative; parametr1;parametr2 left:150px position:relative; left:110px; top:40px; Jak centrowałem: 1. Nagłówek <h1>text-align:center; 2. Dopasowywałem position:relative 7

8 8. Inne dostępne pozycjonowanie: a) bezwzględne, przesuwanie względem brzegów strony lub bloku position:absolute; parametr1;parametr2 b) przesuwany względem krawędzi okna przeglądarki, dodatkowo element jest nieruchomy position:fixed; parametr1;parametr2 8

9 Inny przykład pozycjonowania ( nie stosowałem tabel) 9

10 1. Wprowadziłem tekst bez akapitów (nie użyłem <p>) 2. Podzieliłem tekst na warstwy: <div id="blok1"> TCP jest niezawodnym protokołem transmisyjnym, zorientowanym połączeniowo. Komputer po upływie określonego czasu wysyła dane ponownie aż do chwili, gdy otrzyma od odbiorcy potwierdzenie.</div> <div id="blok2"> TCP jest niezawodnym protokołem transmisyjnym, zorientowanym połączeniowo. Komputer po upływie określonego czasu wysyła dane ponownie aż do chwili, gdy otrzyma od odbiorcy potwierdzenie.</div> 3. Sformatowałem warstwy #blok1{ position:absolute; left:0px; top:25px; width:200px; text-align:justify; } Kolejne warstwy są przesunięte w prawo z uwzględnieniem szerokości bloku poprzedniego i marginesu pomiędzy blokami. #blok2{ position:absolute; left:220px; top:25px; Podzielone warstwy objąłem wspólną warstwą i dokonałem wspólnego pozycjonowania i formatowania <div id= b_razem > <div id="blok1"> TCP jest niezawodnym </div> <div id="blok1"> TCP jest niezawodnym </div> </div> 10

11 Bannery To obszary o zdefiniowanej szerokości width i wysokości height Zadeklarowałem w nagłówku dlatego, że łatwo jest mi sformatować położenie <h1> <img src="images/baner.png" alt="panorama Wisły" /> </h1> h1 { margin-top:15px; text-align:center; } h1 img { width:650px; height:100px; } 11

12 Inny przypadek, banner i logo na tym samym poziomie Obramowanie tymczasowe <table id="format"> <tr><td class="g1"> <img src="images/uksw-1.gif" /></td> <td class="g2"> <img src="images/baner.png" alt="panorama Wisły" /> </td></tr> </table> #format { margin-top:15px; width:1000px; height:150px; } #format.g1 img { width:100px; height:100px; position:relative; left:40px; bottom:28px; } #format.g2 img { width:600px; height:80px; position:relative; left:200px; bottom:28px; } #format.g1,.g2{ border:groove 1px #999999; } 12

13 Odsyłacze do obrazów z jednego źródła 600x800 <a href ="images/big/lot1.jpg"><img class="a1" src="images/big/lot1.jpg" /></a> images/big/lot1.jpg.a1 { border: 0px ; width:120px; } images/big/lot1.jpg 13

14 Odsyłacze bezpośrednio do obrazów z dwóch źródeł 600x x80 <a href ="images/big/lot1.jpg"><img src="images/small/lot1.jpg" /></a> images/small/lot1.jpg images/big/lot1.jpg 14

15 W sieci jest mnóstwo programów generujących automatycznie kod galerii. Wystarczy poprawić kod na własny i włączyć w strukturę strony. Poprawianie kodów to też nauka projektowania, użytkownik zna zasady tylko wykorzystuje cudze pomysły. Dla przykładu wybrałem generator o nazwie Jalbum w wersji 9.2 Aplikacja generuje pliki w formacie html, można przerobić na PHP Tworzy domyślnie katalogi i pliki w dwóch wymiarach rozdzielczości ustawia się w zakładce Obrazy Generuje kod nawigacji Proponuję sprawdzić i czekam na uwagi 15