Na początku było Słowo…
01.07.2020
Tworzenie i łączenie z zewnętrznymi arkuszami stylów
Osadzone arkusze stylów działają dobrze w przypadku stron internetowych jednostronicowych, ale aby naprawdę skorzystać z możliwości kaskadowych arkuszy stylów, musisz utworzyć zewnętrzny arkusz stylów. Pojedynczy zewnętrzny arkusz stylów można połączyć z wieloma dokumentami, zapewniając pełną spójność nawet w dużej witrynie. Zewnętrzny arkusz stylów ułatwia także zmianę formatowania witryny po zbudowaniu stron. Zamiast edytować każdą stronę osobno, możesz po prostu zmienić arkusz stylów. Zewnętrzny arkusz stylów jest zwykłym plikiem tekstowym, podobnie jak plik HTML. Jedyną różnicą jest to, że przypisujesz mu rozszerzenie .css zamiast rozszerzenia .htm. Zawiera wszystko, co chciałbyś umieścić w znaczniku < style>, jeśli tworzysz arkusz stylów wewnętrznie. Nie potrzebujesz samych tagów < style > i < /style >. Po utworzeniu arkusza stylów tworzysz łącze do niego w obszarze < head > każdego dokumentu, który będzie go używał. Na przykład, jeśli arkusz stylów ma nazwę default.css, należy połączyć się z nim,
wstawiając ten kod w obszarze < head > dokumentu, jak pokazano poniżej:
< link rel = "stylesheet" type = "text / css" href = "default.css" / >
Uwaga: Nazwa "default.css" jest powszechna, ale nie wymagana.
Możesz nazwać swój arkusz stylów, jak tylko chcesz, o ile nazwa kończy się rozszerzeniem .css. Osadzony arkusz stylów ma pierwszeństwo przed arkuszem zewnętrznym. Na przykład, jeśli zewnętrzny arkusz stylów określa cyfry rzymskie dla uporządkowanych list, ale osadzony arkusz stylów określa wielkie litery, listy uporządkowane będą oznaczone dużymi literami. Ponadto wszelkie stosowane style specyficzne dla znaczników mają pierwszeństwo przed zarówno osadzonymi, jak i zewnętrznymi arkuszami stylów. Tak więc, jeśli dodasz regułę stylu do pojedynczego znacznika < ol >, ustawienie to zastąpi ustawienia arkusza stylów.
Powrót
02.07.2020
Kluczowe punkty
• Style mogą definiować formatowanie określonych wystąpień znacznika, wszystkich zastosowań znacznika w dokumencie lub wszystkich zastosowań znacznika w grupie dokumentów.
• Kaskadowy arkusz stylów to lista reguł stylów zastosowanych do znaczników w dokumencie HTML. Ta lista może być wewnętrzna (osadzona) lub zewnętrzna w stosunku do dokumentu (plik połączony).
• Kiedy wystąpią konflikty reguł, są one rozwiązywane w następujący sposób (od najwyższego priorytetu do najniższego):
- Style stosowane do poszczególnych tagów
- Style zastosowane przy użyciu wewnętrznego arkusza stylów (z najwyższym priorytetem dla wpisów najbliższych na dole tego arkusza stylów)
- Style stosowane przy użyciu zewnętrznego arkusza stylów (ponownie, z najwyższym priorytetem dla wpisów najbliższych na dole)
• Istnieją trzy sposoby zastosowania stylu. Możesz użyć atrybutu style = w obrębie pojedynczego znacznika, możesz utworzyć osadzony arkusz stylów lub zewnętrzny arkusz stylów.
• Umieszczasz osadzony arkusz stylów w sekcji < head pliku i umieszczasz go w znaczniku < style >. Zewnętrzny arkusz stylów to osobny zwykły plik tekstowy z rozszerzeniem .css.
• Arkusz stylów składa się z co najmniej jednej reguły stylu. Reguła stylu to nazwa znacznika, klasy lub identyfikatora, po której następują nawiasy klamrowe, w których umieszczane są specyfikacje.
• Każda specyfikacja przyjmuje format nazwa: wartość. Na przykład typ listy: kwadrat.
• Oddziel wiele specyfikacji w ramach reguły za pomocą średników. Aby zdefiniować dwa lub więcej znaczników w ten sam sposób, dołącz oba znaczniki (z przecinkiem między nimi) przed otwierającym nawias klamrowy, tak jak to: h1, h2 {color: black}. Jeśli pominiesz przecinek, dwie nazwy znaczników w rzędzie odnoszą się do stylów zagnieżdżonych w regule. Na przykład ol ul {color: green} odnosi się do nieuporządkowanych list zagnieżdżonych w listach uporządkowanych.
• Możesz przypisać klasę do wielu elementów. Możesz zdefiniować styl na podstawie klasy. Poprzedź nazwę klasy w arkuszu stylów kropką, na przykład: .new {color: red}.
• Identyfikator musi być jednoznacznie przypisany w dokumencie. Możesz zdefiniować styl na podstawie identyfikatora. Poprzedź identyfikator w arkuszu stylów symbolem skrótu (#), na przykład: #special {color: red}.
• Zastosuj klasę lub identyfikator do znacznika, umieszczając atrybut class = lub ID = w jego znaczniku otwierającym, w ten sposób: < ol class = "new" >.
• Aby zastosować style do hiperłączy, użyj pseudoklasy typu hiperłącza. Możesz zastosować link, odwiedzony, najechać kursorem, aktywować lub skupić się na pseudoklasie w następujący sposób: a: odwiedzono {kolor: czerwony}.
• Aby utworzyć zewnętrzny arkusz stylów, uruchom nowy dokument Notatnika i umieść w nim wszystkie reguły stylu. Następnie zapoznaj się z tym w sekcji < head> każdego dokumentu, do którego powinien mieć zastosowanie ten arkusz stylów, używając tagu < link rel = "stylesheet" type = "text / css" ref = "default.css" >, gdzie domyślnie .css to nazwa twojego arkusza stylów.
Powrót
03.07.2020
Określanie rodziny czcionek
Określenie określonej czcionki do wyświetlenia na stronie może być trudne, ponieważ nie wszyscy mają zainstalowane te same czcionki. Nawet czcionki dostarczane z systemem Microsoft Windows, takie jak Courier New i Arial, nie są powszechnie akceptowane, ponieważ nie każdy, kto ma dostęp do Internetu, korzysta z komputera z systemem Windows. Aby obejść ten problem, możesz określić rodzinę czcionek zamiast pojedynczej czcionki. Rodzina czcionek to zestaw czcionek wymienionych w kolejności preferencji. Jeśli komputer wyświetla twoją stronę i nie ma pierwszej czcionki na liście, sprawdza drugą, a następnie trzecią itd., dopóki nie znajdzie pasującego tekstu. Na przykład oto jak określić rodzinę czcionek w regule stylu:
p {font-family: "Arial", "Helvetica", sans-serif}
Chociaż żadna czcionka nie jest powszechnie dostępna na wszystkich komputerach, istnieje kilka ogólnych typów czcionek, które są prawie takie: serif, sans-serif, cursive, fantasy i monospace. Określając ogólny typ czcionki jako ostatnią czcionkę w rodzinie, możesz praktycznie zagwarantować, że przynajmniej dostaniesz ostatni wybór. Jeśli przeglądarka nie może użyć żadnej z Twoich preferencji, po prostu renderuje tekst przy użyciu domyślnej czcionki. Oto kilka typowych rodzin czcionek pogrupowane według podobnych wyglądów:
• Arial Black, Helvetica Bold
• Arial, Helvetica, sans-serif
• Verdana, Geneva, Arial, Helvetica, sans-serif
• Times New Roman, Times, serif
• Courier New, Courier, monospace
• Georgia, Times New Roman, Times, serif
• Zapf-Chancery, cursive
• Western, fantas
Możesz także dodać atrybut rodziny czcionek do poszczególnych znaczników, aby upewnić się, że tekst się wyróżnia. Oto jak możesz ustawić pojedynczy akapit na drugą rodzinę czcionek z poprzedniej listy.
< p style = "font-family: Arial, Helvetica, sans-serif" >
Zauważ, że nie ma żadnych znaków cudzysłowu wokół nazw czcionek, jeśli zostaną zastosowane w ten sposób. Zamiast tego cudzysłowy są umieszczane wokół całej reguły stylu.
Powrót
04.07.2020
Określanie rozmiaru i koloru czcionki
Istnieje wiele sposobów ustawiania rozmiaru czcionki w HTML, ale wszystkie metody wykorzystują jedną z dwóch strategii: albo określ rozmiar bezwzględny, albo określ rozmiar w stosunku do znacznika nadrzędnego. Aby określić rozmiar bezwzględny, użyj liczby, a następnie jednostki miary. Najczęstszą jednostką miary dla stron internetowych jest px, co oznacza piksele. (Średni rozmiar tekstu to 10 pikseli.) Piksele to natywna jednostka miary dla trybów wyświetlania monitora komputerowego. HTML akceptuje także cale (cale), centymetry (cm), milimetry (mm), punkty (pt) i pikty (pc), ale te jednostki są najbardziej odpowiednie podczas pracy ze stroną przeznaczoną do wydrukowania. Rozmiar piksela zależy od rozdzielczości wyświetlacza monitora. Załóżmy na przykład, że ktoś wyświetla Twoją stronę przy użyciu 17-calowego monitora o rozdzielczości 800 × 600. Rozmiar monitora mierzy się po przekątnej, więc ma około 13,6 cala szerokości i 10,2 cala wysokości. Jeśli wysokość 10,2 cala reprezentuje 600 pikseli, istnieje około 60 pikseli na cal w pionie. Dlatego wysokość znaku 15 pikseli przekłada się na około 1/4 cala na ekranie. Załóżmy teraz, że rozdzielczość ekranu wynosi 1024 × 768. Oznacza to, że pionowo jest około 77 pikseli na cal; 15 znaków pikselowych przekłada się na około 1/5 cala na ekranie. Uwaga HTML zwykle nie przyjmuje rozmiaru liczbowego bez jednostki miary. Jest jednak kilka wyjątków; jeden to styl wysokości linii, o którym dowiesz się w Rozdziale 8. Aby określić względny rozmiar, użyj opisu relacyjnego: xx-small, x-small, small, medium, large, x-large lub xx-large. Dokładny rozmiar każdej z tych specyfikacji zależy od rozmiaru podstawowego w znaczniku nadrzędnym. Możesz zdefiniować rozmiar czcionki dla całego znacznika w arkuszu stylów w następujący sposób:
p {font-size: 12px}
Lub umieść go w tagu pojedynczego akapitu, takim jak ten:
< p style = "font-size: x-small" > Ten tekst jest bardzo mały. < /p >
Możesz także określić względne rozmiary jako procent rozmiaru podstawowego, na przykład 120%. Innym sposobem na określenie względnego rozmiaru jest ems. Em to mnożnik czcionki podstawowej; na przykład 2 em jest dwa razy większy niż rozmiar podstawowy lub 200%. Na przykład możesz sprawić, aby tekst oznaczony jako < h3 > dwa razy większy niż czcionka podstawowa, dołączając go do arkusza stylów, jak pokazano poniżej:
h1 {font-size: 2em}
Możesz też ustawić rozmiar pojedynczego nagłówka, na przykład:
< p style = "font-size: 2em" > Ten tekst jest dwa razy większy niż rozmiar podstawowy. < /p >
Aby określić kolor czcionki, użyj atrybutu koloru, którego nauczyłeś się w poprzednich rozdziałach. Na przykład, aby tekst we wszystkich znacznikach
był niebieski, umieść tę regułę stylu w arkuszu stylów, jak pokazano w tym przykładzie:
p {color: blue}
Aby dołączyć atrybut koloru dla pojedynczego znacznika, dołącz go do atrybutu style = w następujący sposób:
< p style = "color: blue" > To jest niebieski tekst. < /p >
Możesz użyć podstawowych lub rozszerzonych nazw kolorów lub nazewnictwa szesnastkowego lub RGB. Możesz także ustawić kolor tła tekstu. Różni się to od koloru tła w samym dokumencie. Atrybut koloru odnosi się tylko do tekstu w znaczniku, w którym jest zastosowany. Na przykład możesz użyć pierwszego planu i tła aby utworzyć tekst odwrotny (ustaw biały tekst na ciemnym tle). Aby to zrobić, w arkuszu stylów użyj atrybutu kolor tła, takiego jak:
p {background-color: yellow}
Lub, dla pojedynczej instancji, na przykład:
< p style = "background-color: yellow" > Ten tekst ma żółte tło. < /p >
Powrót
05.07.2020
Stosowanie pogrubienia i kursywy
Nauczyłeś się, jak stosować pogrubienie i kursywę, używając znaczników < b > i < i> na początku Spowiednika . Możesz nadal używać tych tagów do formatowania pojedynczych słów i wyrażeń, ale nie możesz ich używać w wewnętrznych lub zewnętrznych arkuszach stylów. Aby dołączyć pogrubienie do stylu, użyj atrybutu font-weight. Na przykład możesz utworzyć klasę o nazwie boldface w swoim arkuszu stylów w następujący sposób:
.boldface {font-weight: bold}
Możesz zastosować klasę boldface do wszystkich elementów tekstowych określonego typu, na przykład do wszystkich akapitów w arkuszach stylów.
p {font-weight: bold}
Możesz także zastosować go, używając atrybutu style = w pojedynczym akapicie.
< p style = "font-weight: bold"> Ten tekst jest pogrubiony. < /p >
Jedną z zalet korzystania ze stylu pogrubionego formatowania zamiast znacznika < b > jest to, że można kontrolować intensywność efektu. Możesz określić pogrubienie, rozjaśnienie lub wartość liczbową od 100 (najjaśniejszy) do 900 (najciemniejszy), aby wskazać pogrubienie formatowania. Jednak różnice w efektach są zauważalne tylko przy użyciu czcionki obsługującej wiele poziomów pogrubienia. Ponieważ większość czcionek ma tylko dwie grubości (normalna i pogrubiona), nie wszystkie wartości liczbowe są renderowane inaczej.
Aby zastosować formatowanie kursywą, użyj atrybutu font-style. Styl czcionki może być normalny (nie kursywą), kursywą lub ukośny. Oblique jest również nazywany "fałszywą kursywą", ponieważ jest to wersja normalnie (nie kursywą) pochylona w prawo. Niektóre czcionki mają oddzielny zestaw znaków dla kursywy, więc istnieje różnica między czcionką ukośną a kursywą; w przypadku czcionek, które tego nie robią, nie ma różnicy. Większość ludzi woli używać kursywy. Możesz zastosować formatowanie kursywą w regule stylu dla akapitów.
p {font-style: italic}
Ta reguła powoduje, że cały tekst < p > w dokumencie jest pisany kursywą. Jeśli chcesz, aby określony akapit pojawiał się bez formatowania kursywą, możesz dołączyć znacznik stylu do znacznika < p > tego akapitu w następujący sposób:
< p style = "font-style: normal" > Ten akapit nie jest pisany kursywą. < /p >
Powrót
06.07.2020
Stosowanie przekreślenia i podkreślenia
Formatowanie przekreślone jest zwykle stosowane do oznaczenia tekstu, który się zmienił. Na przykład, jeśli obniżyłeś cenę przedmiotu, możesz przekreślić oryginalną cenę. Większość projektantów stron internetowych nie używa podkreślenia jako techniki formatowania, ponieważ hiperłącza są podkreślone, i uważa się za zły projekt, aby zmylić użytkowników z tekstem, który wygląda na "klikalny", ale nie jest. Jeśli chcesz po prostu podkreślić lub przekreślić kilka słów tekstu w jednym konkretnym przypadku, który prawdopodobnie nie powtórzy się w innym miejscu na stronie (lub witrynie), najłatwiej jest użyć tagu < ins > do podkreślenia lub tagu < del > do przekreślenia. Te nazwy znaczników pochodzą od funkcji logicznych, które podkreślenie i przekreślenie często służą w edytowanym dokumencie; wstawienia są często podkreślane, a usunięcia są często przekreślane. Oto kod:
< p > Cena katalogowa: < del > 24,00 $ < /del > < ins > Teraz tylko 9,99 $ < /ins > < /p >
Uwaga: We wczesnych wersjach HTML istniał tag < strike > lub < s> do przekreślenia i tag < u > do podkreślenia, ale oba były przestarzałe w HTML4 i całkowicie usunięte w HTML5. Znaczniki < ins > i < del > prawdopodobnie staną się przestarzałe, ale na razie są nadal używane. Aby przekreślić tekst lub podkreślić go za pomocą stylu (bardziej nowoczesna i "poprawna" metoda, choć wymaga nieco więcej pisania), użyj atrybutu dekoracji tekstu. Ten atrybut akceptuje kilka słów kluczowych:
• underline
• overline (linia nad tekstem)
• line-through (przekreślenie)
• blink (migający tekst)
• none(usuwa całą odziedziczoną dekorację)
Przestroga : Nie używaj migającego tekstu, jeśli to w ogóle możliwe. To jest dość denerwujące. Odwiedzającym twoją stronę prawdopodobnie tak się jej nie spodoba, że opuszczą ją i nigdy nie wrócą. Możesz użyć słowa kluczowego none, aby usunąć podkreślenie z tekstu, który zwykle zostanie automatycznie podkreślony, na przykład hiperłącze. Bądź jednak ostrożny, ponieważ jeśli usuineszń podkreślenie z hiperłącza, wiele osób nie zdaje sobie sprawy, że może je kliknąć. Oto kilka przykładów zastosowanych do poszczególnych akapitów:
< p style = "text-decoration: underline" > Wygląda na klikalne, ale nie jest. < /p >
< p style = "text-decoration: line-through" > To jest przekreślone. < /p >
Gratulacje, wygrywasz! < /p >
Oto przykład podkreślenia zastosowanego w arkuszu stylów do klasy o nazwie podkreślony:
.underlined {text-decoration: underline}
Powrót
07.07.2020
Tworzenie zakresów wbudowanych
Problem z zastąpieniem starych znaczników stylu, takich jak < b >, < i > i < del >, stylami dla poszczególnych elementów polega na tym, że atrybut style = musi być umieszczony w istniejącym znaczniku. Na przykład, w poniższym zdaniu, w jaki sposób uniknąłbyś użycia < b >, aby pogrubić tylko jedno słowo?
< p > Miałem < b > świetny < /b > czas. < /p >
Słowa "świetny" nie otacza żaden tag kontenera, więc nie ma miejsca na umieszczenie atrybutu style =. Rozwiązaniem jest użycie rozpiętości liniowej. Rozpiętość to po prostu powłoka, w której można umieścić dowolne potrzebne atrybuty. Na przykład poprzedni przykład mógłby zostać napisany w następujący sposób, aby użyć stylu:
< p > Miałem < span style = "text-weight: bold" > świetny < /span > czas. < /p >
To strasznie dużo pisania, ale jest ku temu dobry powód. Korzystając z zakresu, możesz zastosować klasę, a stosując klasę, możesz stworzyć spójność. Załóżmy na przykład, że wiesz, że chcesz, aby nowe słowa słownikowe jakoś się wyróżniały, ale jeszcze nie zdecydowałeś, czy chcesz, aby były one odważne, pochylone, czy oba. Możesz stworzyć klasę zwaną vocabulary i zastosować tę klasę do każdego słowa vocabulary.
< span class = "vocabulary" > Liściaste < /span >
Następnie w arkuszu stylów możesz zdefiniować klasę za pomocą odpowiedniego formatowania. Załóżmy na przykład, że zdecydujesz się na pisanie kursywą słów. Po prostu stwórz styl, który definiuje słownictwo jako kursywę:
.vocabulary {font-style: italic}
Jeśli później zmienisz zdanie, musisz dokonać zmiany tylko w jednym miejscu - w arkuszu stylów.
Powrót
08.07.2020
Dostosowywanie odstępów między literami
W wielu aplikacjach do publikowania na pulpicie można precyzyjnie dostroić odstępy między literami, aby subtelnie zmienić wygląd akapitu. Dzięki stylom możesz zrobić to samo w HTML. Istnieją dwa rodzaje odstępów, które można kontrolować w HTML: odstępy między wyrazami i odstępy między literami. Odstępy między wyrazami kontrolują wielkość odstępu między poszczególnymi słowami, a odstępy między literami kontrolują odstępy między literami. Wartość domyślna to 0 dla każdego; liczby dodatnie zwiększyć odstęp, a liczby ujemne go zmniejszyć. Zwykle jeden lub dwa piksele w każdym kierunku to dużo. Aby zastosować odstępy między wyrazami i / lub literami, dodaj odstępy do atrybutu style = dla określonego znacznika.
< p style="letter-spacing: 4px" >T Ten tekst ma zwiększone odstępy między literami.< /p >
Możesz także dodać odstępy do reguły stylu w arkuszu stylów.
p {letter-spacing: 4px}
Powrót
09.07.2020
Kluczowe punkty
• Rodziny czcionek to zestawy czcionek, wymienione w kolejności preferencji. Ponieważ nie wszyscy użytkownicy mają zainstalowane te same czcionki na swoich komputerach, powinieneś użyć atrybutu font-family, aby upewnić się, że Twoja strona internetowa wygląda tak, jak chcesz.
• Rozmiar czcionki jest zazwyczaj mierzony w pikselach (px) do wyświetlania na ekranie. Aby określić rozmiar, użyj atrybutu font-size.
• Możesz zdefiniować kolor czcionki za pomocą dowolnej metody opisu koloru, w tym RGB, szesnastkowej i nazw kolorów. Użyj atrybutu color, aby zdefiniować kolor czcionki.
• Aby ustawić background-color dla tekstu, użyj atrybutu kolor tła. Aby ustawić kolor tła dla akapitu, wstaw style = atrybut do znacznika < p >.
• Nadal można użyć znacznika < b >, aby zastosować pogrubienie, a znacznika < i >, aby zastosować kursywę. W arkuszach stylów można również zastosować pogrubienie, używając atrybutu font-weight: bold, oraz kursywę, używając atrybutu font-style: italic.
• W przypadku pojedynczych przypadków przekreślenia formatowania można użyć znacznika < del >; dla poszczególnych przypadków podkreślenia użyj znacznika < ins >. Aby zastosować to formatowanie przy użyciu stylów, użyj font-decoration: line-through i font-decoration: underline.
• Zakresy śródliniowe tworzą tagi, które służą jako kontenery dla atrybutów. Użyj znacznika < span >, aby otoczyć dowolną ilość tekstu, który ma zostać w jakiś sposób oznaczony.
Powrót
10.07.2020
Formatowanie akapitów za pomocą arkuszy stylów
Przy formatowaniu tekstu przy użyciu arkuszy stylów, nauczyłeś się, jak używać reguł stylów do stosowania formatowania znaków, w tym stylu, rozmiaru i koloru czcionki. Teraz możesz pójść o krok dalej i zastosować te pojęcia do formatowania akapitów.
Formatowanie akapitów odnosi się do układu całych akapitów, a nie do rozmieszczania lub odstępów między poszczególnymi znakami. Na przykład akapit może mieć podwójne odstępy, ale pojedynczy znak nie. Przy korzystaniu z list i tła, zobaczyłeś formatowanie akapitów oparte na stylu, kiedy stosowałeś znaki punktowane i style numerowania. Później, przy wprowadzeniu do arkuszy stylów", pracowałeś z kilkoma uporządkowanymi i nieuporządkowanymi elementami listy. Te same zasady obowiązują przy formatowaniu innych typów akapitów.
W tej sekcji dowiesz się, jak kontrolować wcięcia i odstępy wokół akapitu oraz jak określić wyrównanie akapitu. Dowiesz się również, jak ustawić wysokość linii dla akapitu (to znaczy odstęp między wierszami tekstu) oraz jak umieszczać i formatować ramkę wokół akapitu.
Powrót
11.07.2020
Wcięcia akapitów
Możesz wciąć dowolny element na poziomie akapitu w HTML. Takie elementy obejmują zwykłe akapity, elementy listy, definicje, cytaty i nagłówki. Wcięcie to proces przesunięcia tekstu z jego zwykłej pozycji, w prawo lub w lewo. Możesz zastosować trzy typy wcięć w HTML:
• Wcięcie pierwszego wiersza To wcięcie tylko pierwszego wiersza akapitu. Użyj atrybutu textindent. W przypadku stylizacji liniowej pojedynczego akapitu określ ten styl:
< p style="text-indent: 20px" >
W arkuszu stylów określ regułę podobną do tej:
p {text-indent: 20px}
• Wypełnienie Dodaje określoną przestrzeń między ramką elementu a jego zawartością (wewnątrz elementu). Dotyczy to w równym stopniu wszystkich wierszy tekstu w akapicie. Użyj atrybutu padding, aby utworzyć to miejsce. W przypadku stylizacji liniowej pojedynczego akapitu określ ten styl:
< p style="padding: 20px" >
W arkuszu stylów określ taką regułę:
p {padding: 20px}
• Margines Dodaje określoną ilość białego odstępu wokół elementu na zewnątrz elementu. Dotyczy to w równym stopniu wszystkich wierszy tekstu w akapicie. Użyj atrybutu margin, aby utworzyć tę przestrzeń. Dla pojedynczego akapitu określ ten styl:
< p style = "margin: 20px" >
W arkuszu stylów określ następującą regułę:
p {margin: 20px}
Różnica między zastosowaniem atrybutów padding i margin jest najbardziej widoczna, gdy akapit ma widoczną ramkę lub gdy tło akapitu kontrastuje z otaczającym obszarem. Domyślnie atrybuty margin i padding mają zastosowanie do wszystkich czterech stron elementu, ale można dodać argumenty -top, -right, -bottom lub -left, aby ograniczyć formatowanie do jednej lub więcej określonych stron.
p style = "padding-left: 10px; padding-top: 5px; padding-bottom: 5px}
Jako jednostki miary można użyć pikseli (px) lub procentu (%). Na przykład następujący wiersz wcina pierwszy wiersz akapitu o 10 procent jego całkowitej szerokości:
< p style = " text-indent: 10%" >
Aby zastosować to samo formatowanie przy użyciu arkusza stylów, określ następującą regułę:
p { text-indent: 10%}
Powrót
12.07.2020
Stosowanie granicy do akapitu
Możesz zastosować regułę stylu granicy do prawie każdego dwustronnego znacznika. Reguły stylu obramowania są używane najczęściej w przypadku zwykłych akapitów, ale działają również z nagłówkami, listami, a nawet zakresami. Możesz także zastosować obramowanie do znacznika podziału (
Określanie stylu obramowania
Aby wybrać typ linii dla ramki, użyj atrybutu stylu ramki wraz z jednym z argumentów wymienionych w tabeli
Aby zastosować styl obramowania do pojedynczego wystąpienia znacznika, użyj następujących poleceń:
< p style = "border-style: solid" >
Aby zastosować to samo formatowanie przy użyciu arkusza stylów, określ następującą regułę:
p {border-style: solid}
Ustawianie dopełnienia obramowania
Ramka domyślnie bardzo mocno otacza element. Zazwyczaj będziesz chciał dodać trochę więcej odstępów. Utwórz odstępy za pomocą atrybutu dopełniania. Aby zastosować dopełnienie za pomocą arkusza stylów, określ następującą regułę:
p {styl graniczny: pełny; padding: 15px}
Aby zastosować to samo formatowanie do pojedynczego wystąpienia tagu, użyj następujących poleceń:
< p style = "border-style: solid; padding: 15px" >
Określanie szerokości i koloru ramki
Domyślnie ramka jest czarna i ma szerokość 4 pikseli. Aby zmienić te atrybuty, użyj atrybutów bordercolor i border-width. Kolor może być dowolną nazwą koloru podstawowego lub rozszerzonego albo dowolnym numerem koloru RGB lub szesnastkowym. Na przykład, aby zmniejszyć szerokość ramki i pokolorować ją na niebiesko za pomocą arkusza stylów, napisz taką regułę:
p {border-style: solid; border-width: 2px; border-color: blue}
Aby zastosować to samo formatowanie do pojedynczego wystąpienia tagu, użyj tego:
< p style="border-style: solid; border-width: 2px; border-color: blue" >
Uwaga Domyślnym stylem obramowania jest brak - i nie zmienia się to tylko dlatego, że określasz szerokość i kolor obramowania. Nie zapomnij włączyć obramowania, dodając atrybut stylu obramowania oprócz określenia koloru i szerokości obramowania.
Formatowanie stron granicy indywidualnie
Domyślnie atrybuty ramki mają zastosowanie do wszystkich czterech stron granicy, chyba że określono inaczej. Aby określić, że pewna strona granicy ma specjalne formatowanie, dołącz argument -top, -right, -left lub -bottom między granicą słowa a ustawianą właściwością. Na przykład, aby ustawić kolor inny niż czarny dla górnej ramki za pomocą arkusza stylów, wykonaj następujące czynności:
p {border-style: solid; border-top-color: blue}
Aby zastosować to samo formatowanie do pojedynczego wystąpienia tagu, użyj tego:
< p style = "border-style: solid; border-top-color: blue" > Możesz użyć tej techniki nie tylko z kolorem obramowania, ale także z atrybutami stylu, wypełnienia i szerokości. Na przykład następująca reguła stosuje linię przerywaną i 15 pikseli wypełnienia tylko do górnej i dolnej części akapitu:
< p style = "border-top-style: dotted; border-bottom-style: dotted; padding-top: 15 pikseli; padding-bottom: 15px " >
Oto, jak wygląda renderowany akapit:
Dla każdej strony granicy istnieje skrót do określania argumentów. Zamiast wypisywać każdy z osobna, możesz po prostu dołączyć cztery różne ustawienia argumentu. Określ je w kolejności zgodnej z ruchem wskazówek zegara, zaczynając od góry: góra, prawo, dół, lewo. Korzystając z tej metody, przykład, który właśnie widziałeś, można zapisać w następujący sposób:
< p style = "border-style: dotted none dotted none; padding: 15px 0px 15px 0px" >
Powrót
13.07.2020
Określanie wyrównania poziomego akapitu
Wyrównanie odnosi się do umieszczenia akapitu w jego kontenerze. Możesz określić wyrównanie poziome w stylu za pomocą atrybutu wyrównania tekstu. Wyrównanie można zastosować tylko do elementów na poziomie bloku, takich jak akapity, elementy listy, nagłówki i tak dalej. (Element na poziomie bloku to taki, który zajmuje cały akapit lub więcej.) Pozostawiono domyślne ustawienie wyrównania; inne opcje to wyśrodkowanie, prawo i uzasadnienie, jak pokazano w poniższym przykładzie:
Zauważ, że opcja justowania wyrównuje wszystkie wiersze akapitu (oprócz ostatniego) po prawej i lewej stronie. Ostatni wiersz uzasadnionego akapitu jest zawsze wyrównany do lewej. Tekst uzasadniony może czasem powodować niewygodne odstępy między wierszami, szczególnie gdy kolumna tekstu jest dość wąska, na przykład w poniższym przykładzie:
Na pełnowymiarowej stronie internetowej wyjustowane akapity nie powinny stanowić problemu, ponieważ jest wystarczająco dużo tekstu, aby zapewnić równe odstępy. Jednak gdy zaczniesz pracować z układami stron opartymi na tabelach lub podziałach (takimi jak te przedstawione w części 3 tej książki), możesz mieć wąskie kolumny tekstu, takie jak w poprzednim przykładzie. Jeśli to możliwe, unikaj stosowania wyrównanego wyrównania tekstu w wąskich kolumnach
Powrót
14.07.2020
Określanie odstępu pionowego w akapicie
Wysokość linii to ilość miejsca między każdą linią. Jest to również określane jako wiodące (wymawiane jak metal). Możesz użyć tego ustawienia, aby ułatwić czytanie akapitów. Nie jesteś ograniczony do pojedynczych odstępów lub podwójnych odstępów, jak na maszynie do pisania; możesz określić dowolną ilość miejsca. Wysokość linii można wyrazić jako liczbę lub procent. Jeśli używasz liczby, jest to stały pomiar (zwykle w pikselach). Jeśli później zwiększysz lub zmniejszysz rozmiar czcionki, wysokość linii nie zmieni się. Jeśli użyjesz wartości procentowej, przeglądarka pomnoży procent wysokości linii przez rozmiar czcionki, aby uzyskać odstępy. Na przykład możesz określić 200 procent, aby akapit był podwójnie rozmieszczony. Jeśli później zmienisz rozmiar czcionki, wysokość linii zostanie ponownie obliczona przy użyciu nowego rozmiaru czcionki. Aby określić wysokość linii w arkuszu stylów, ustaw atrybut wysokości linii w następujący sposób:
p {wysokość linii: 150%}
Aby określić to samo formatowanie w pojedynczym znaczniku, użyj następujących poleceń:
< p style = "wysokość linii: 150%" >
Powrót
15.07.2020
Kluczowe punkty
• Możesz wciąć pierwszy wiersz akapitów, używając atrybutu wcięcia tekstu.
• Atrybut padding określa wielkość odstępu między elementem a jego ramką; atrybut margin ustawia ilość miejsca wokół elementu.
• Atrybut border-style umieszcza ramkę wokół akapitu. Aby określić wygląd obramowania, użyj jednego z następujących argumentów: solid, dotted, dashed, double, groove, ridge, inset, outset, lub none.
• Aby ustawić szerokość ramki, użyj atrybutu border-width, a następnie szerokości w pikselach (px).
• Aby ustawić kolor obramowania, użyj atrybutu border-color, a następnie nazwy koloru lub zapisu RGB lub szesnastkowego dla koloru.
• Aby sformatować każdą stronę granicy osobno, określ cztery argumenty, w kolejności zgodnej z ruchem wskazówek zegara od góry: top, right, bottom. left. Na przykład w border-style: solid none solid bottom.
• Aby określić styl, kolor i rozmiar ramki w jednym poleceniu, użyj atrybutu border i podaj argumenty w następującej kolejności: rozmiar, kolor, styl. Na przykład border: 2px green dotted.
• Aby ustawić wyrównanie akapitu, użyj atrybutu text-align z jednym z następujących argumentów: left, center, right lub justify
• Aby ustawić wysokość linii, użyj atrybutu line-height, a następnie wysokości wyrażonej w pikselach lub jako procent wysokości czcionki.
Powrót
16.07.2020
Wybór formatu grafiki
Istnieją dziesiątki formatów graficznych, ale większość przeglądarek internetowych może wyświetlać tylko kilka. Najczęściej akceptowanymi formatami są GIF, JPG i PNG, więc większość projektantów stron internetowych je trzyma. Formaty graficzne różnią się między sobą w następujący sposób:
• Głębia kolorów Im wyższa głębia kolorów (tzn. Im więcej bitów służy do jednoznacznego opisania koloru każdego piksela), tym bardziej realistyczne będzie wyglądać zdjęcie. Głębia kolorów nie stanowi większego problemu w przypadku rysunków. Pełny kolor to 24 bity; jeśli grafika wykorzystuje więcej bitów na piksel niż to, dodatkowe bity są zwykle używane do dalszego zdefiniowania koloru (niekoniecznie konieczne do korzystania z Internetu) i / lub do ustawienia specjalnych atrybutów obrazu, takich jak przezroczystość.
• Kompresja / rozmiar pliku Pliki graficzne są zwykle duże, dlatego istnieją schematy kompresji, które zmniejszają ich rozmiar. Kompresja bezstratna zmniejsza plik bez utraty jakości obrazu; Kompresja stratna zmniejsza plik kosztem pewnej jakości. Gdy obraz jest wyświetlany na monitorze komputera, różnica jest jednak minimalna.
• Animacja Niektóre formaty graficzne obsługują bardzo prymitywny rodzaj animacji, w którym kilka wersji grafiki jest przechowywanych w jednym pliku, a strona internetowa wyświetlająca plik przechodzi przez obrazy. Proste animacje wyświetlane na stronie internetowej to zazwyczaj animowana grafika, a nie klipy wideo.
• Przezroczystość Niektóre formaty graficzne mogą powodować, że tło obrazu jest przezroczyste. Po umieszczeniu obrazu w dokumencie kolor tła dokumentu jest widoczny przez przezroczyste części obrazu. Możesz użyć tego do stworzenia interesujących efektów. Na przykład po umieszczeniu obrazu z przezroczystym tłem w dokumencie zawierającym tekst, tekst jest zawijany wokół obrazu. Zagłębianie się w tę technikę wykracza poza zakres tej książki, ale możesz eksperymentować z przezroczystością w Photoshopie lub innym programie do edycji grafiki na własną rękę. Różne formaty graficzne mają różne głębokości kolorów i typy kompresji, więc Ty możesz uznać, że jeden format jest odpowiedni w jednej sytuacji, ale nie w innej. Aby przekonwertować grafikę na inny format, otwórz ją w dowolnym programie graficznym, który zapisuje w wielu formatach, a następnie zapisz w innym formacie.
Powrót
17.07.2020
Przygotowanie grafiki do użytku w sieci
Po podjęciu decyzji, jakiego formatu grafiki użyć dla konkretnego obrazu, następną decyzją jest wielkość grafiki - to znaczy, ile pikseli powinna ona zawierać. Nazywa się to rozdzielczością obrazu i jest wyrażane w szerokości i wysokości, zawsze w tej kolejności. Na przykład obraz o wymiarach 800 × 600 ma szerokość 800 pikseli i wysokość 600 pikseli. Rozmiar pliku grafiki - ile bajtów zajmie plik na dysku - ma bezpośredni związek z jego rozdzielczością: im więcej pikseli w grafice, tym większy plik. Musisz znaleźć równowagę między ustawieniem rozdzielczości grafiki na wystarczająco wysoką, aby wyświetlała się optymalnie i na tyle nisko, aby szybko pobierać, gdy użytkownicy ładują twoją stronę. Istnieją dwa sposoby kontrolowania rozmiaru (w pikselach) grafiki na stronie internetowej:
• Jedną z metod jest użycie programu do edycji grafiki w celu zmiany jego rozmiaru przed użyciem go na stronie internetowej. Ta metoda zapewnia najmniejszy możliwy rozmiar pliku, co pozwoli na szybsze ładowanie strony. Jest to jednak także więcej pracy i uniemożliwia osobom odwiedzającym stronę pobieranie wysokiej jakości kopii grafiki. (Może to być dobra lub zła rzecz, w zależności od celu Twojej strony).
• Innym sposobem jest użycie atrybutów w kodzie HTML do określenia wysokości i szerokości, na której wyświetlana jest grafika. Przeglądarka internetowa przeskaluje grafikę do określonego rozmiaru podczas wyświetlania strony. Dzięki tej metodzie rozmiar pliku jest większy, więc ładowanie strony trwa dłużej. (W dzisiejszych czasach popularność dostępu szerokopasmowego nie powinna mieć większego znaczenia dla większości użytkowników.) Ta metoda jest również przydatna, jeśli chcesz ponownie użyć grafiki w różnych rozmiarach w wielu przypadkach. Na przykład być może używasz tej samej grafiki jako małego obrazu miniatury w jednym miejscu i jako dużego wyróżnionego zdjęcia w innym miejscu.
Kolejną kwestią do przygotowania grafiki jest paleta kolorów. Jeśli ktoś przeglądający twoją stronę ma 8-bitowy ekran na swoim komputerze (to znaczy wyświetlacz z 256 kolorami), twoje zdjęcia prawdopodobnie nie będą dla niego zbyt dobre. Większość programów do edycji grafiki, takich jak Photoshop i Paint Shop Pro, ma funkcje, których można użyć do przeniesienia kolorów na zdjęciu do tych, które są bezpieczne w Internecie. Robiąc to, możesz jednak stracić nieco oryginalną jakość obrazu, więc rozważ to tylko wtedy, gdy uważasz, że duża część odbiorców używa bardzo starego sprzętu komputerowego.
Powrót
18.07.2020
Wstawianie grafiki
Wstawianie grafiki na stronie internetowej jest tak proste, jak umieszczenie znacznika < img > w miejscu, w którym ma się pojawić grafika, w następujący sposób:
< img src = "logo.gif" >
Uwaga HTML5 obsługuje również znacznik < figure > do wstawiania obrazów, które zostaną omówione później. Jednak < figure > nie zastępuje znacznika < img >; jest to tag kontenera, w którym umieszczasz tag < img >. Następnie możesz użyć znacznika < figurecaption >, aby przypisać podpis do rysunku; podpis pozostaje z obrazem wszędzie tam, gdzie unosi się na stronie.
Jak widać, gdy plik znajduje się w tym samym folderze co dokument HTML, który się do niego odwołuje, możesz odwoływać się do tego pliku, używając tylko nazwy pliku, bez żadnych dodatkowych informacji o ścieżce. Jeśli chcesz przechowywać swoją grafikę w podfolderze folderu zawierającego pliki tekstowe (aby uporządkować swoje pliki w bardziej uporządkowany sposób), musisz odwoływać się do grafiki przy użyciu nazwy podfolderu, jak poniżej:
< img src = "images / logo.gif" >
Aby odnieść się do pliku znajdującego się o jeden poziom wyżej w strukturze folderów, użyj dwóch kropek i znaku do przodu ukośnika (../), na przykład:
< img src = "../ logo.gif" >
Aby odnieść się do obrazu, który jest przechowywany gdzie indziej - być może na głównym serwerze sieciowym Twojej firmy lub na serwerze partnera - użyj pełnego bezwzględnego adresu URL pliku, jak pokazano poniżej:
< img src = "http://i2.microsoft.com/h/all/i/ms_masthead_8x6a_ltr.jpg" >
Domyślnie, o ile nie umieścisz obrazu w znaczniku na poziomie bloku, takim jak akapit lub nagłówek, obraz blokuje całą przestrzeń poziomą w pozostałej części strony - nawet jeśli sam obraz zajmuje tylko ułamek dostępnego poziomu przestrzeń.
Aby wymusić renderowanie obrazu po lewej lub prawej stronie ekranu i zawinąć otaczający go tekst wokół obrazu, zastosuj regułę stylu float, która używa atrybutu left lun right, jak poniżej:
< img src = "logo.gif" style = "float: left" >
Możesz także utworzyć regułę stylu w obszarze < style > dokumentu lub w osobnym kaskadowym arkuszu stylów, który sprawi, że wszystkie obrazy będą się unosić, chyba że określono inaczej, jak pokazano poniżej:
img {float: left}
Zwróć uwagę, że przesunięcie w prawo przesuwa obraz aż do prawego końca strony, a nie tylko na prawo od tekstu.
Powrót
19.07.2020
Rozmieszczanie elementów na stronie
Obraz w poprzednim ćwiczeniu został starannie przygotowany, aby mieć odpowiedni rozmiar pasujący do miejsca, w którym miał zostać wstawiony. Ale co, jeśli obraz jest większy? Być może właśnie tego chcesz; ale może nie. Jednak przykład można z pewnością ulepszyć, zmieniając położenie nagłówka Ostatnie artykuły. Powinien znajdować się na lewym marginesie, wyrównany z nazwą firmy, a nie zawinięty wokół grafiki. Aby przesunąć tekst w dół w pionie, aż przestrzeń zajmowana przez grafikę stanie się "czysta", użyj reguły czyszczenia. Tę regułę stosuje się do znacznika tekstu, a nie do znacznika grafiki. Na przykład:
< h2 style = "clear: left" > Najnowsze artykuły < /h2 >
Powrót
20.07.2020
Kontrolowanie rozmiaru i wypełnienia obrazu
Rozmiar obrazu jest wyrażony w pikselach. Jeśli chcesz, możesz określić tylko szerokość; wysokość zostanie zmieniona proporcjonalnie lub odwrotnie. Możesz też określić zarówno szerokość, jak i wysokość. Załóżmy na przykład, że następujący obraz to oryginalny obraz o wysokości 150 pikseli:
Możesz dodać atrybut height = "75" do tagu
< img src = "tree.gif" style = "float: left" height = "75" >
Podczas przeglądania strony obraz zmniejsza się proporcjonalnie, na przykład:
Jeśli jednak określisz zarówno wysokość, jak i szerokość 75, na przykład: < img src = "tree.gif" style = "float: left" height = "75" width = "75" > Obraz zostanie zniekształcony, na przykład:
Podobnie jak tekst, obrazy mogą mieć marginesy i / lub wypełnienie, aby oddzielić je od otaczających elementów. Na przykład w przedstawionym przykładzie zwróć uwagę, jak blisko grafiki znajduje się tekst. Byłoby lepiej, gdyby tekst został przesunięty nieco w prawo. Jak dowiedziałeś się wcześniej, atrybut dopełnienia kontroluje przestrzeń wokół zawartości wewnątrz elementu, a atrybut marginesu kontroluje przestrzeń otaczającą element. Możesz użyć dowolnego atrybutu dla obrazu. Jeśli obraz ma obramowanie, lepiej jest użyć atrybutu marginesu. Aby zwiększyć przestrzeń wokół przykładu, możesz wstawić specyfikację prawego marginesu w ramach reguły stylu, na przykład:
< img src = "tree.gif" style = "float: left; margin-right: 10px" height = "75" width = "75" >
Zwróć uwagę, że pomiar marginesu został dodany do istniejącego atrybutu stylu dla znacznika, a nie został wstawiony jako oddzielny atrybut.
Powrót
21.07.2020
Hiperłącza z grafiki
Nauczyłeś się już, jak tworzyć hiperłącza tekstowe za pomocą znacznika < a>. Przypomnij sobie, że umieszczasz adres URL w otwierającym tagu < a >, a następnie umieszczasz tekst hiperłącza między tagami < a > i < /a >. Graficzne hiperłącze tworzy się w podobny sposób, umieszczając znacznik < img > w znaczniku < a > w następujący sposób:
< a href="http://www.contoso.com" title="Home page" >
< img src = "images / leaf.gif" style = "float: left; margin: 5px" >
< /a >
Grafika pojawia się w dokumencie w zwykły sposób, ale kiedy użytkownik przesunie nad nią wskaźnik myszy, wskaźnik zmieni się w dłoń, co oznacza, że grafika jest hiperłączem. Domyślnie grafika z hiperłączem ma obramowanie w tym samym kolorze co tekst z hiperłączem. Możesz usunąć obramowanie, dodając border: none do reguły stylu grafiki, na przykład:
< a href="http://www.contoso.com" title="Home page" >
< img src = "images / leaf.gif" style = "float: left; margin: 5px; border: none" >
< /a >
Powrót
22.07.2020
Korzystanie z miniaturowych grafik
Grafika w wysokiej rozdzielczości może spowolnić ładowanie strony, ale całkowite unikanie grafiki o wysokiej rozdzielczości może ograniczyć skuteczność witryny w dostarczaniu treści. Kompromisem jest dołączenie miniatur, które są kopiami obrazów o niskiej rozdzielczości, które są połączone z większymi wersjami o wysokiej rozdzielczości.
Uwaga : Niektóre programy do tworzenia stron internetowych automatycznie tworzą miniatury podczas konfigurowania strony albumu fotograficznego.
Aby utworzyć miniaturę, będziesz potrzebować małych wersji każdej grafiki. Możesz je utworzyć, otwierając oryginalną grafikę w programie takim jak Photoshop lub Paint Shop Pro, a następnie używając tego programu do skalowania obrazu do niższej rozdzielczości (na przykład do 100 pikseli wysokości). Następnie zapisz plik pod inną nazwą. Na przykład, jeśli oryginał to drzewo.jpg, możesz nazwać miniaturę sm-drzewo.jpg. Następnie umieszczasz miniatury obrazów na stronie i tworzysz hiperłącza do większych plików. Ustaw każdy z większych plików tak, aby otwierał się we własnym oknie, używając atrybutu target = "_ blank", jak pokazano poniżej.
< a href="tree.jpg" target="_blank" > < img src = "sm_tree.jpg" > < /a >
Miniatury są najbardziej przydatne, gdy masz dużo obrazów do wyświetlenia
Powrót
23.07.2020
Alternatywny tekst dla grafiki
Umieszczenie atrybutu alt (tradycyjnie nazywanego znacznikiem alt, chociaż tak naprawdę nie jest znacznikiem) w znaczniku < img > tworzy alternatywny tekst dla grafiki. Ten tekst zastępczy to wyskakujące okienko, które zawiera tekstowe wyjaśnienie grafiki, podobnie jak tytuł hiperłącza. Tekst zastępczy służy nie tylko do dekoracji; służy ważnemu celowi dla użytkowników, którzy nie mogą z jakiegoś powodu być w stanie wyświetlić grafiki. Może to obejmować użytkowników niedowidzących, którzy uzyskują dostęp do Twojej strony za pomocą programu do odczytywania zawartości ekranu, lub osoby przeglądające za pomocą urządzeń przenośnych. Alternatywny tekst jest łatwy do dołączenia; wystarczy umieścić atrybut alt = "tekst" w tagu < img >,
lubię to:
< img src = "leaf.gif" alt = "Logo liścia" >
Powrót
24.07.2020
Dodawanie podpisów do rysunków
HTML5 zawiera nowy tag do oznaczania rysunków: < figure >. Nie zastępuje < img >, jest raczej kontenerem, w którym umieszczasz tag < img >, na przykład:
< figure >
< img src = "images / diagram.gif" >
< /figure >
Jeśli przeglądarka nie obsługuje HTML5, tag < figure > jest ignorowany. Główną zaletą korzystania z < figure > jest to, że można następnie użyć tagu < figurecaption > do powiązania podpisu z obrazem. Ten podpis będzie następnie trzymał się obrazu bez względu na to, gdzie będzie się poruszał w układzie. Poniższy przykład pokazuje, jak go używać:
< figure >
< img src = "/ images / diagram.gif" >
< figurecaption > Ten diagram przedstawia cykl życia produktu. < /figcaption >
< /figure >
Kolejną zaletą używania < figure > jest to, że możesz przypisać style i inne atrybuty do elementu < figure > za pomocą zewnętrznego lub wewnętrznego arkusza stylów, tak jak w przypadku każdego innego znacznika kontenera. Możesz również przypisać pojedynczy podpis do grupy obrazów, jak pokazano poniżej:
< figure >
< img src = "/ images / stage1.jpg" >
< img src = "/ images / stage2.jpg" >
< img src = "/ images / stage3.jpg" > < figcaption > Trzy etapy cyklu życia < /figcaption >
< /figure >
Powrót
25.07.2020
Kluczowe punkty
• Prawidłowe formaty graficzne do użytku w Internecie to GIF, PNG i JPG.
• Jeśli to możliwe, używaj plików graficznych o rozdzielczości jak najbardziej zbliżonej do rozmiaru, w jakim będą wyświetlane na stronie internetowej. Użyj programu do edycji zdjęć, aby zmienić rozdzielczość.
• Użyj znacznika < img >, aby wstawić obraz. Atrybut src określa nazwę pliku obrazu.
• Aby odnieść się do grafiki w podfolderze, należy poprzedzić nazwę nazwą podfolderu i ukośnikiem (/).
• Aby umożliwić grafice unoszenie się po lewej lub prawej stronie tekstu, użyj atrybutu style = "float: left" lub style = "float: right" w tagu < img >.
• Aby wymusić umieszczenie tekstu pod obrazem, dodaj style = "clear: left" lub style = "clear: right" do otwierającego znacznika tekstu. • Aby zmienić rozmiar obrazu proporcjonalnie, określ jego wysokość lub szerokość jako atrybut w tagu < img >. Aby zmienić rozmiar obrazu i zniekształcić go w razie potrzeby, określ zarówno wysokość, jak i szerokość.
• Aby zamienić grafikę w hiperłącze, umieść ją w znaczniku < a >.
• Aby użyć miniatur, utwórz mniejszą wersję każdego obrazu o niskiej rozdzielczości, a następnie umieść hiperłącze do wersji o wysokiej rozdzielczości.
• W razie potrzeby w przypadku, gdy obrazu nie można wyświetlić, można dołączyć tekstowe objaśnienie obrazu w wyskakującym okienku, wstawiając atrybut alt w celu określenia tekstu zastępczego.
• Umieść obraz lub grupę obrazów, które powinny mieć pojedynczy podpis zbiorczy, w dwustronnym kontenerze < figure >. Pozwala to następnie przypisać podpis za pomocą tagu < figurecaption >.
Powrót
26.07.2020
Planowanie organizacji witryny
Paski nawigacji mogą być łatwe do utworzenia, ale wymagają pewnego planowania, aby były skuteczne. Do tego momentu tworzyłeś pojedyncze strony o wspólnym temacie do ewentualnego umieszczenia w witrynie internetowej, ale prawdopodobnie nie zastanawiałeś się jeszcze zbytnio nad dopasowaniem stron. Dlatego przed utworzeniem paska nawigacyjnego należy wziąć pod uwagę ogólny plan strukturalny witryny. Pasek nawigacyjny powinien zawierać łącza do najważniejszych sekcji serwisu WWW, plus łącze do strony głównej. Pasek nawigacji nie powinien zawierać hiperłączy do każdej strony w witrynie, chyba że witryna jest bardzo mała i prosta. Chociaż nie ma sztywnej reguły dotyczącej liczby elementów, które może zawierać pasek nawigacji, większość ludzi próbuje znaleźć od czterech do siedmiu. Mając mniej niż cztery, Twoja witryna nie wygląda na zbyt bogatą w treść; przy więcej niż siedmiu, pasek nawigacji staje się zatłoczony i zagmatwany. Ponadto na ekranach o niskiej rozdzielczości lub w wąskich oknach przeglądarki pasek nawigacji może zawijać się do drugiej (lub nawet trzeciej) linii, jeśli jest to poziomy pasek, lub może zmusić użytkownika do przewinięcia w dół, jeśli jest to pasek pionowy. W tym rozdziale omówiono tylko poziome paski, ale dowiesz się, jak tworzyć pionowe paski nawigacji przy tworzenie tabel.
Uwaga: Niektóre witryny sieci Web mają paski nawigacji, w których każde hiperłącze otwiera menu opcji gdy użytkownik wskaże go lub kliknie. Nie możesz tego stworzyć za pomocą zwykłego HTML; są one tworzone za pomocą JavaScript lub innego języka programowania opartego na sieci Web. Przed utworzeniem paska nawigacji utwórz diagram przedstawiający planowaną strukturę witryny. Nie ma znaczenia, czy nie utworzyłeś jeszcze wszystkich stron. Możesz być tak wymyślny lub tak prosty, jak chcesz, ze swoim wykresem. Można go nabazgrać na odwrocie serwetki lub utworzyć przy użyciu grafiki SmartArt (za pośrednictwem aplikacji Microsoft Office), programu Microsoft Visio lub innego narzędzia do tworzenia wykresów. Wybierz nazwy plików dla każdej planowanej strony, abyś mógł zacząć odnosić się do nich w hiperłączach, nawet jeśli jeszcze ich nie ma. Możesz dodać dziesiątki dodatkowych wskazówek, technik rozwiązywania problemów i produktów. Możesz nawet utworzyć podsekcje w jednym z głównych obszarów, jeśli treść stanie się zbyt przytłaczająca dla jednej strony.
Powrót
27.07.2020
Tworzenie paska nawigacyjnego opartego na tekście
Tekstowy pasek nawigacyjny jest najprostszy i najłatwiejszy, a także bardzo przyjazny dla użytkownika. Na prostych stronach internetowych tekstowe paski nawigacyjne są zwykle umieszczane u góry strony, w pojedynczej poziomej linii. Niektórzy projektanci stron internetowych umieszczają również kopię na dole każdej strony, aby odwiedzający nie musieli przewijać z powrotem do góry strony, aby uzyskać dostęp do łączy. HTML5 zawiera tag < nav >, dwustronny tag kontenera, w którym możesz opcjonalnie umieścić kod paska nawigacji. Znacznik < nav > został zaprojektowany, aby pomóc przeglądarkom i arkuszom stylów identyfikować zestawy łączy jako element nawigacyjny i odpowiednio je obsługiwać. Jeśli przeglądarka nie obsługuje znacznika < nav >, jest on ignorowany. W tym rozdziale użyjesz tagu < nav >, ponieważ dobrze jest zacząć umieszczać w kodzie tagi HTML5, ale nie będziesz robić nic specjalnego z atrybutami tagu < nav >. Jednak w witrynach, które tworzysz samodzielnie, możesz swobodnie definiować atrybuty stylu dla znacznika