Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00493 005409 19041166 na godz. na dobę w sumie
Responsive Web Design. Nowoczesne strony WWW na przykładach - książka
Responsive Web Design. Nowoczesne strony WWW na przykładach - książka
Autor: Liczba stron: 248
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-283-4876-9 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> inne
Porównaj ceny (książka, ebook (-35%), audiobook).

Aplikacje internetowe, które dobrze działają i ładnie wyglądają wyłącznie na ekranach komputerów osobistych, już jakiś czas temu zostały uznane za przestarzałe. Przejrzysty blog, piękna strona z portfolio czy ciekawy profil z galerią zdjęć w portalu społecznościowym muszą doskonale wyglądać na urządzeniach z ekranami o rozmaitych rozmiarach i proporcjach oraz różnej rozdzielczości. Wzrost liczby urządzeń wyposażanych w przeglądarki jest jednym z sygnałów, że internet się zmienia. Projekty responsywne są odpowiedzią na tego rodzaju zmiany. Projektant aplikacji, który ma ambicję podążać za wymogami współczesnego internetu, musi sprawnie realizować takie projekty.

Ta książka jest szybkim i przystępnym przewodnikiem, dzięki któremu zdobędziesz wiedzę o sposobach włączania responsywności do procesu projektowania i budowania różnorodnych aplikacji. Opanujesz również dobre praktyki tworzenia stron WWW oraz ogólne zasady poprawnego programowania. Poszczególne przykłady bazują na powszechnie znanych technologiach i językach, takich jak HTML, CSS i JavaScript, a także na coraz popularniejszym frameworku Bootstrap. Prędko wykorzystasz obfitość zawartej tu wiedzy o wszelkich aspektach responsywności oraz o korzystaniu z Bootstrapa w projektach i programowaniu aplikacji WWW. Nauczysz się też dobierać frameworki najlepiej pasujące do specyfiki aktualnie tworzonego projektu. W efekcie Twoje strony staną się profesjonalne, kreatywne i prawdziwie responsywne.

Dzięki tej książce:

Strona responsywna: nowoczesna, dynamiczna, dostosowana do potrzeb!

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Tytuł oryginału: Responsive Web Design by Example Tłumaczenie: Jakub Hubisz ISBN: 978-83-283-4876-9 Copyright © Packt Publishing 2017. First published in the English language under the title ‘Responsive Web Design by Example (9781787287068)’ Polish edition copyright © 2019 by Helion SA All rights reserved. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher. Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Autor oraz Helion SA dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Helion SA nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Helion SA ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: helion@helion.pl WWW: http://helion.pl (księgarnia internetowa, katalog książek) Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/reswed Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis treści O autorze O korektorze merytorycznym Wstęp Rozdział 1. Czym jest projektowanie responsywnych witryn Filozofia responsywnego projektu Zasady responsywnego projektu Responsywny a adaptacyjny Punkty przełamania Jednostki relatywne Wartości maksymalne i minimalne Obiekty zagnieżdżone Najpierw komputery osobiste czy urządzenia mobilne? Bitmapy kontra wektory Responsywne siatki i kolumny Podsumowanie Rozdział 2. Czym jest Bootstrap i dlaczego z niego korzystamy Krótka historia Bootstrapa Po co korzystać z Bootstrapa Dlaczego Bootstrap? System siatki Bootstrapa Podstawy Przykłady wykorzystania Końcowe informacje o siatce Komponenty Bootstrapa Podsumowanie 9 10 11 15 16 17 17 17 18 19 19 20 20 21 22 23 23 24 25 25 26 27 36 36 37 Poleć książkęKup książkę Spis treści Rozdział 3. Szablon wielokrotnego użytku Czym jest szablon wielokrotnego użytku Wymagania odnośnie do środowiska programistycznego Tworzenie naszego szablonu wielokrotnego użytku Prosty przykład z wykorzystaniem Bootstrapa Wyłączanie Rozszerzanie nagłówka Rozszerzanie stopki Rozszerzanie głównej zawartości strony Odnajdywanie błędów Błędy PHP Style CSS nie działają Podsumowanie Rozdział 4. Tworzenie sekcji z wprowadzeniem Czym jest jednostronicowa witryna Przykłady witryn jednostronicowych Implementacja naszej sekcji wprowadzającej Czym jest jumbotron? Kotwiczenie sekcji w pasku nawigacji Animowanie kotwiczenia z paska nawigacji Ustawienie nagłówka na górze strony Zmiana aktualnie wybranego przycisku Częste pułapki Różnica w wysokości paska nawigacji na urządzeniach mobilnych Kotwiczenie przycisków paska nawigacyjnego Podsumowanie Rozdział 5. Tworzenie generycznej sekcji wielokrotnego użytku Różne sekcje na witrynach jednostronicowych Przykłady sekcji witryn jednostronicowych Implementacja naszej generycznej sekcji wielokrotnego użytku Co będzie zawierała sekcja o zespole Stworzenie kontenera dla sekcji Kotwiczenie sekcji w pasku nawigacji Dodanie zdjęć zespołu Tekst z informacjami o członku zespołu Linki do mediów społecznościowych Podsumowanie Rozdział 6. Tworzenie sekcji z formularzem kontaktowym Przykłady sekcji kontaktowych na witrynach jednostronicowych Richman Bueno This also Design museum Choice screening 4 39 39 43 43 44 45 47 49 50 51 51 51 52 53 53 54 57 57 67 69 74 76 77 77 78 78 79 80 80 84 84 85 87 88 95 97 99 101 101 102 103 104 105 106 Poleć książkęKup książkę Implementacja sekcji kontaktowej Co będzie zawierała sekcja kontaktowa? Tworzenie kontenera dla sekcji kontaktowej Zakotwiczenie sekcji kontaktowej na pasku nawigacji Dodanie formularza kontaktowego Podsumowanie Rozdział 7. Tworzenie strony głównej bloga Przykłady blogów TechCrunch Gawker Microsoft News Johnny Cupcakes TESCO Living Przygotowanie projektu podstawowego Usuwanie wszystkich niepotrzebnych plików Refaktoryzacja pliku index.css Refaktoryzacja pliku index.php Refaktoryzacja pliku HEADER.php Refaktoryzacja pliku index.js Jak będzie wyglądała strona główna bloga? Implementacja strony głównej bloga Implementacja karuzeli Wskaźniki karuzeli Implementacja wpisów na blogu Dodawanie kart Podsumowanie Rozdział 8. Tworzenie strony z wpisem na blogu Przykłady wpisów na blogach TechCrunch Gawker Microsoft News Johnny Cupcakes TESCO Living Co znajdzie się na naszej stronie wpisu? Z czego składa się wpis? Z czego składa się panel na popularne i rekomendowane wpisy? Implementacja strony wpisu na blogu Implementacja głównej zawartości wpisu Implementacja panelu bocznego Dalsza rozbudowa bloga Podsumowanie Rozdział 9. Dodanie panelu bocznego dla sieci społecznościowej Przykłady paneli bocznych w sieciach społecznościowych Facebook Google+ Spis treści 107 107 107 110 110 116 117 117 118 119 120 121 122 123 123 123 123 124 125 125 125 126 132 135 136 140 141 141 142 143 144 145 146 147 147 147 148 149 159 164 165 167 167 168 169 5 Poleć książkęKup książkę Spis treści YouTube Minds Myspace Z czego będzie składał się nasz boczny panel? Implementacja panelu bocznego Podsumowanie Rozdział 10. Tworzenie strony głównej dla naszej sieci społecznościowej Przykłady osi czasu w sieciach społecznościowych Facebook Google+ YouTube Twitter Medium Z czego będzie się składała nasza oś czasu? Implementacja osi czasu Implementacja sekcji wprowadzania Implementacja sekcji z osią czasu Dodanie głównej zawartości wiadomości Następny krok i rozszerzenie osi czasu Podsumowanie Rozdział 11. Tworzenie strony z profilem użytkownika Przykłady profili w sieciach społecznościowych Z czego będzie się składała nasza strona profilowa Implementacja jumbotrona Tworzenie podstawowego jumbotrona z banerem Dodanie tekstu Implementacja małych kart Implementacja dużych kart Podsumowanie Rozdział 12. Wyświetlanie miniatur naszych zdjęć Przykłady galerii zdjęć Pinterest 9GAG Google Photos GIPHY Vent Z czego będzie składała się strona główna naszej galerii zdjęć? Implementacja miniatur Dodanie tytułu strony głównej Dodawanie miniatur zdjęć Dodanie paginacji Podsumowanie 6 170 171 172 173 173 182 183 183 184 185 186 187 188 189 189 189 191 197 199 199 201 201 202 202 203 205 208 209 211 213 213 214 215 216 217 218 219 219 219 220 222 226 Poleć książkęKup książkę Rozdział 13. Otwieranie zdjęć z wykorzystaniem lightboxa Przykłady lightboxa Pinterest Google Photos Dan Kennedy Salter Arild Danielsen Photographer Z czego będzie składał się nasz lightbox? Implementacja lightboxa Dodanie prostego modala Dodanie obrazu do modala Dynamiczne wyświetlanie zawartości modala Podsumowanie Skorowidz Spis treści 227 227 228 229 230 231 232 233 233 233 235 238 240 241 7 Poleć książkęKup książkę Poleć książkęKup książkę 6 Tworzenie sekcji z formularzem kontaktowym W tym rozdziale objaśnię, jak stworzyć kolejną sekcję naszej jednostronicowej witryny, która może być rozwinięta na wiele sekcji. Sekcja ta będzie wyświetlała formularz kontaktowy, ale można ją będzie łatwo zaadaptować do wyświetlania informacji, jak to omówiliśmy w po- przednich rozdziałach. W rozdziale omówione zostaną następujące tematy:  kotwiczenie sekcji w pełnym nurcie witryny jednostronicowej;  formularze Bootstrapa/HTML-a  pole formularza Bootstrapa/HTML do wprowadzania jednej linii;  pole formularza Bootstrapa/HTML do wprowadzania wielu linii;  przycisk Bootstrapa/HTML;  responsywne formularze;  debugowanie i testowanie responsywnego projektu. Przykłady sekcji kontaktowych na witrynach jednostronicowych Chociaż formularze kontaktowe występują w różnej postaci, większość z nich wykorzystuje ten sam wypróbowany i przetestowany układ, który zazwyczaj jest następujący: Poleć książkęKup książkę Responsive Web Design. Nowoczesne strony WWW na przykładach  pole do wprowadzenia imienia;  pole do wprowadzenia adresu e-mail;  pole pozwalające wprowadzać tekst wiadomości;  przycisk zatwierdzający wysłanie formularza. Można dodać więcej sekcji, ale prawie wszystkie formularze kontaktowe będą posiadały po- wyższe elementy. Jeżeli chodzi o różne sekcje wyświetlane przez witryny jednostronicowe, liczba wariacji jest niezliczona. W rozdziale 4., „Tworzenie sekcji z wprowadzeniem”, zaimplementowaliśmy sekcję z wprowadzeniem zawierającą obraz szerokości całego ekranu i osadzony na nim tekst. Wykorzystanie podobnego układu dla innych sekcji jest dobrym podejściem, ale przyjrzyj- my się kilku innym często wykorzystywanym układom. Spójrzmy na kilka przykładów formularzy kontaktowych. Richman Ten przykład widzieliśmy już wcześniej — jest prosty, ale bardzo efektywny w komuniko- waniu użytkownikowi, jakie informacje są potrzebne do przesłania formularza. 102 Poleć książkęKup książkę Rozdział 6. • Tworzenie sekcji z formularzem kontaktowym Choć pola różnią się od tych opisanych w poprzednim punkcie, tak naprawdę mają za zada- nie pozyskać te same informacje:  kim jesteś;  jak się z Tobą skontaktować;  Twój problem lub zapytanie. Link do strony: http://richman-kcm.com/. Bueno Ten przykład jest prostszy i zawiera dokładnie te komponenty, o których wspomniałem wcześniej: Jako ozdobę formularza dodano również obrazek. Link do strony: https://bueno.co/#contact. 103 Poleć książkęKup książkę Responsive Web Design. Nowoczesne strony WWW na przykładach This also Ten przykład jest całkowicie inny, ponieważ nie jest formularzem. Zawiera informacje o tym, gdzie można znaleźć firmę w prawdziwym świecie: Oprócz mapy zawiera również adresy e-mail różnych oddziałów. Link do strony: http://thisalso.com/contact. 104 Poleć książkęKup książkę Rozdział 6. • Tworzenie sekcji z formularzem kontaktowym Design museum To kolejny przykład bez formularza kontaktowego. Zawiera tylko proste informacje teleadre- sowe wraz z mapą, ale tym razem wykorzystano darmowe, dobrze wszystkim znane i potężne API Map Google: Jeżeli przewiniesz stronę w dół, znajdziesz informacje kontaktowe dotyczące innych oddziałów. Link do strony: http://designmuseum.org/plan-your-visit/contact-information. 105 Poleć książkęKup książkę Responsive Web Design. Nowoczesne strony WWW na przykładach Choice screening Chociaż ten przykład jest podobny do pierwszych dwóch (również zawiera formularz z polami do wypełnienia), tutaj do podania jest znacznie więcej informacji i nie jest to wcale nic złego: Informacje, o jakie poprosisz na swoim formularzu kontaktowym, będą uzależnione od cha- rakteru strony. Link do strony: https://www.choicescreening.com/contact-choice-screening. 106 Poleć książkęKup książkę Rozdział 6. • Tworzenie sekcji z formularzem kontaktowym Implementacja sekcji kontaktowej Stworzymy teraz dla naszej strony sekcję kontaktową, którą będziesz mógł łatwo modyfiko- wać i wykorzystywać wielokrotnie. Co będzie zawierała sekcja kontaktowa? Sekcja kontaktowa będzie bardzo podobna do przykładów ze stron firmy Richman i organi- zacji Bueno, ale będzie ją można łatwo zmienić zgodnie ze stylem pozostałych przykładów. Sekcja kontaktowa będzie się składała z następujących elementów:  pole do wprowadzenia imienia;  pole do wprowadzenia adresu e-mail;  pole pozwalające wprowadzać tekst wiadomości. Wykorzystamy wiele technik omówionych w poprzednich rozdziałach, włącznie z systemem siatki Bootstrapa. Zanim jednak przejdziemy dalej, sugeruję, abyś przejrzał wszystkie przy- kłady, które omówiliśmy wcześniej, i zmieniając rozmiar przeglądarki, sprawdził, jak re- sponsywna strona reaguje na te zmiany. Tworzenie kontenera dla sekcji kontaktowej Najpierw zaimplementujmy prosty kontener, który będzie zawierał formularz kontaktowy. Następnie wykorzystamy go do stworzenia łącza na pasku nawigacji. Pod sekcją zespołu do- daj poniższy kod: 119 div class= container-fluid id= ContactSection 120 div class= row 121 div class= col-12 text-center 122 h1 Kontakt /h1 123 /div 124 /div 125 /div Omówmy, co powoduje powyższy kod:  Linia 119: Tworzymy płynny kontener, pozwalając mu rozciągnąć się na całą szerokość przeglądarki. Jeżeli chcesz, możesz zmienić go na zwykły kontener. Identyfikator zostanie wykorzystany do przygotowania łącza na pasku nawigacji.  Linia 120: Tworzymy wiersz, w którym będą przechowywane nasze elementy.  Linia 121: Tworzymy element div szeroki na 12 kolumn dla wszystkich rozmiarów ekranów i centrujemy zawarty w nim tekst.  Linia 122: Tworzymy prosty nagłówek dla sekcji kontaktowej. 107 Poleć książkęKup książkę Responsive Web Design. Nowoczesne strony WWW na przykładach Powyższy kod spowoduje wyświetlenie na stronie poniższego wyniku: 108 Poleć książkęKup książkę Rozdział 6. • Tworzenie sekcji z formularzem kontaktowym Sekcja kontaktowa zlewa się z sekcją zespołu, ponieważ mają to samo tło i kolor. Na witry- nach jednostronicowych bardzo często wykorzystuje się różne kolory tła (lub obrazy) dla po- szczególnych sekcji. Jedną z bardziej popularnych metod jest stosowanie ciemnych i jasnych kolorów tła. Sekcja zespołu ma już białe tło, zmieńmy zatem kolor sekcji kontaktowej na czarny. Dodaj poniższy kod do pliku index.css: 44 #ContactSection 45 { 46 background-color: #000000; 47 color: #FFFFFF; 48 } Omówmy powyższy kod:  Linia 45: Ustawiamy czarny kolor tła sekcji.  Linia 46: Ustawiamy biały kolor tekstu wewnątrz sekcji. Kolory zostaną zmienione jak poniżej: Być może zwróciłeś uwagę na to, że w nagłówku tej sekcji u góry jest mniej przestrzeni niż w sekcji zespołu. Jest tak dlatego, że jumbotron w Bootstrapie ma automatycznie przypisane marginesy. Zróbmy coś podobnego dla pozostałych sekcji. Zaktualizuj poprzednio wpisany kod CSS, aby zawierał marginesy i dopełnienie u góry i u dołu sekcji kontaktowej: 44 #ContactSection 45 { 46 background-color: #000000; 47 color: #FFFFFF; 48 margin-top: 2rem; 49 margin-bottom: 2rem; 50 padding-top: 2rem; 51 padding-bottom: 2rem; 52 } Wybrałem 2rem, bo taka wartość jest przypisywana dla jumbotrona, ale możesz zmienić wartość na dowolną inną. Wynik wygląda tak: 109 Poleć książkęKup książkę Responsive Web Design. Nowoczesne strony WWW na przykładach Zakotwiczenie sekcji kontaktowej na pasku nawigacji Podobnie jak w poprzednim rozdziale, dodamy link do sekcji kontaktowej na pasku nawigacji. Pozwoli to użytkownikowi przejść do sekcji kontaktowej bez konieczności przewijania strony. Na pasku nawigacji znajdują się tylko dwa elementy, które zostały już przypisane do sekcji wprowadzającej i sekcji zespołu. Będziemy musieli utworzyć nowy element — dodaj poniższy kod do istniejących elementów paska nawigacji: 23 div class= collapse navbar-collapse id= navbarTogglerDemo02 24 ul class= navbar-nav mr-auto mt-2 mt-md-0 25 li class= nav-item navLi active 26 a class= nav-link navButton href= #HomeSection Główna span class= sr-only (aktaulna) /span /a 27 /li 28 29 li class= nav-item navLi 30 a class= nav-link navButton href= #TeamSection Zespół /a 31 /li 32 33 li class= nav-item navLi 34 a class= nav-link navButton href= #ContactSection Kontakt /a 35 /li 36 /ul Mamy teraz w menu link prowadzący do sekcji kontaktowej: Kod JavaScriptu, który dodaliśmy wcześniej, sprawia, że strona automatycznie przewija się do wybranej sekcji. Dodanie formularza kontaktowego Dodajmy teraz kilka pól do formularza. Zaczniemy od tego, co poniżej:  Adres e-mail — pole do wprowadzania pojedynczej linii.  Imię — pole do wprowadzania pojedynczej linii. Pole do wprowadzania pojedynczej linii pozwala na wprowadzenie tylko jednej linii, co doskonale sprawdza się dla prostych danych jak te powyżej. 110 Poleć książkęKup książkę Rozdział 6. • Tworzenie sekcji z formularzem kontaktowym Do wiersza nagłówka, który zaimplementowaliśmy w poprzednim punkcie, dodaj poniż- szy kod: 119 div class= container-fluid id= ContactSection 120 div class= row 121 div class= col-12 text-center 122 h1 Kontakt /h1 123 /div 124 /div 125 126 form 127 div class= row 128 div 129 label for= contactEmail Adres e-mail /label 130 input type= email class= form-control id= contactEmail placeholder= Wprowadź adres e-mail 131 small class= form-text Nigdy nie przekażemy Twojego adresu nikomu innemu. /small 132 /div 133 134 div 135 label for= contactName Imię /label 136 input type= text class= form-control id= contactName placeholder=  Wprowadź imię 137 /div 138 /div 139 /form 140 /div Omówmy nowy kod linia po linii:  Linia 126: Dodajemy formularz, który będzie zawierał wszystkie pola. Można go łatwo rozbudować do w pełni funkcjonalnego formularza z wykorzystaniem języka serwerowego takiego jak PHP.  Linia 127: Tworzymy wiersz dla wszystkich elementów formularza kontaktowego. Nie ma tu nic specjalnego, robiliśmy to już milion razy.  Linia 128: Tworzymy element div, który będzie zawierał wszystkie elementy związane z adresem e-mail.  Linia 129: Dodajemy element label zawierający etykietę informującą użytkownika, że w polu należy wpisać adres e-mail.  Linia 130: Dodajemy pole wraz z walidacją do wpisania e-maila.  Linia 131: Tworzymy krótki tekst zapewniający użytkownika, że adres e-mail pozostanie wyłącznie do naszej dyspozycji i jest poufny.  Linia 134: Tworzymy element div, który będzie zawierał wszystkie elementy związane z imieniem.  Linia 135: Dodajemy etykietę informującą, że pole jest przeznaczone do wprowadzenia imienia.  Linia 136: Dodajemy pole do wprowadzenia imienia. 111 Poleć książkęKup książkę Responsive Web Design. Nowoczesne strony WWW na przykładach Cały ten kod zostanie wyrenderowany jak poniżej: Pewnie myślisz teraz, że to wcale nie wygląda tak, jak przykłady, którym przyglądaliśmy się wcześniej — i masz rację. Formularz nie wykorzystuje dostępnego miejsca. Na szczęście wystarczy dodać klasy kolumn do każdego z elementów div zawierających poszczególne składowe formularza, jak poniżej: 126 form 127 div class= row 128 div class= col-md-6 129 label for= contactEmail Adres e-mail /label 130 input type= email class= form-control id= contactEmail placeholder= Wprowadź adres e-mail 131 small class= form-text Nigdy nie przekażemy Twojego adresu nikomu innemu. /small 132 /div 133 134 div class= col-md-6 135 label for= contactName Imię /label 136 input type= text class= form-control id= contactName placeholder= Wprowadź imię 137 /div 138 /div 139 /form To sprawia, że pola będą miały połowę szerokości wiersza na ekranach o średnim rozmiarze lub większych i szerokość całego wiersza na małych i bardzo małych. Na większych ekranach formularz będzie wyglądał tak: 112 Poleć książkęKup książkę Rozdział 6. • Tworzenie sekcji z formularzem kontaktowym A na mniejszych tak: Nasz formularz kontaktowy jest już prawie gotowy. Wprowadź poniższy kod, aby dodać pole do wprowadzania wiadomości: 126 form 127 div class= row 128 div class= col-md-6 129 label for= contactEmail Adres e-mail /label 130 input type= email class= form-control id= contactEmail placeholder= Wprowadź adres e-mail 131 small class= form-text Nigdy nie przekażemy Twojego adresu nikomu innemu. /small 132 /div 133 134 div class= col-md-6 135 label for= contactName Imię /label 136 input type= text class= form-control id= contactName placeholder= Wprowadź imię 137 /div 138 139 div class= col-12 140 label for= contactMessage Wiadomość /label 141 textarea class= form-control id= contactMessage rows= 5 /textarea 142 /div 143 /div 144 /form Wynik jest następujący: 113 Poleć książkęKup książkę Responsive Web Design. Nowoczesne strony WWW na przykładach Ostatnim elementem, który musimy dodać, jest przycisk zatwierdzający wysłanie formularza, co zrobimy, dodając poniższy kod: 126 form 127 div class= row 128 div class= col-md-6 129 label for= contactEmail Adres e-mail /label 130 input type= email class= form-control id= contactEmail placeholder= Wprowadź adres e-mail 131 small class= form-text Nigdy nie przekażemy Twojego adresu nikomu innemu. /small 132 /div 133 134 div class= col-md-6 135 label for= contactName Imię /label 136 input type= text class= form-control id= contactName placeholder= Wprowadź imię 137 /div 138 139 div class= col-12 140 label for= contactMessage Wiadomość /label 141 textarea class= form-control id= contactMessage rows= 5 /textarea 142 /div 143 144 div class= col-12 145 button type= submit class= btn btn-primary col-12 Wyślij wiadomość /button 146 /div 147 /div 148 /form Omówmy kod przycisku linia po linii:  Linia 144: Tworzymy po prostu element div zawierający przycisk.  Linia 145: Tworzymy przycisk, wykorzystując wbudowane w Bootstrapa klasy do zmiany wyglądu przycisku i rozciągnięcia go na szerokość 12 kolumn (pełna szerokość kontenera nadrzędnego). Więcej informacji o przyciskach i ich wyglądzie w Bootstrapie znajdziesz pod adresem: https://getboot strap.com/docs/4.1/components/buttons/. Wynik będzie następujący: 114 Poleć książkęKup książkę Rozdział 6. • Tworzenie sekcji z formularzem kontaktowym Formularz wygląda dobrze, ale nie świetnie. Dodanie przestrzeni pomiędzy obszarem do wprowadzania wiadomości a przyciskiem zatwierdzającym wysłanie poprawi wizualną przej- rzystość formularza. Najpierw dodaj identyfikator ContactButtonContainer do elementu div nadrzędnego dla przycisku, jak poniżej: 126 form 127 div class= row 128 div class= col-md-6 129 label for= contactEmail Adres e-mail /label 130 input type= email class= form-control id= contactEmail placeholder= Wprowadź adres e-mail 131 small class= form-text Nigdy nie przekażemy Twojego adresu nikomu innemu. /small 132 /div 133 134 div class= col-md-6 135 label for= contactName Imię /label 136 input type= text class= form-control id= contactName placeholder= Wprowadź imię 137 /div 138 139 div class= col-12 140 label for= contactMessage Wiadomość /label 141 textarea class= form-control id= contactMessage rows= 5  /textarea 142 /div 143 144 div class= col-12 id= ContactButtonContainer 145 button type= submit class= btn btn-primary col-12 Wyślij wiadomość /button 146 /div 147 /div 148 /form Wizualnie strona pozostanie taka sama jak poprzednio, ponieważ musimy jeszcze dodać style dla tego elementu div. Dodaj poniższy kod do pliku index.css: 54 #ContactButtonContainer 55 { 56 margin-top: 10px; 57 } Otrzymamy doskonały efekt: 115 Poleć książkęKup książkę Responsive Web Design. Nowoczesne strony WWW na przykładach Ukończyliśmy właśnie sekcję kontaktową, jak również całą naszą witrynę jednostronicową. Podsumowanie W tym rozdziale stworzyliśmy nową sekcję zawierającą formularz kontaktowy i dodaliśmy ją do witryny jednostronicowej. W następnym rozdziale rozpoczniemy nowy projekt: utwo- rzymy blog. 116 Poleć książkęKup książkę
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Responsive Web Design. Nowoczesne strony WWW na przykładach
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: