Wykonaj następujące kroki, aby utworzyć katalog roboczy i uzyskać Skeleton

Transkrypt

1 Responsywne Portfolio Ze Skeletonem Oto na czym skupimy się w tej części: Znalezienie komponentów Skeletona Wykorzystanie ze składników Skeletona Ustawienie projektu ze Skeletonem Przygotowanie aktywów projektu Zbudowanie strony z HTML5 Wykonaj następujące kroki, aby utworzyć katalog roboczy i uzyskać Skeleton 1. Najpierw utwórz folder o nazwie portfolio. To powinien być nasz katalog roboczy dla responsywnej strony portfolio 2. W folderze portfolio utwórz dwa foldery html i psd 3. Teraz nadszedł czas, aby uzyskać Skeleton. Przejdźmy więc do strony internetowej Skeletona ( 4. Przejdź do sekcji Download i pobierz pakiet Skeleton. 5. Zapisz pobrany plik w folderze html 6. Pobrany plik jest w formacie tar.z. Wyodrębnij go, aby pobrać pliki wewnątrz pobranego pliku 7. Po wyodrębnieniu, powinieneś znaleźć dwa nowe foldery o nazwie stylesheet i images, i dokument HTML o nazwie index.html. Jest to opcjonalne, ale możemy teraz bezpiecznie usunąć plik tar.gz Co Się Stało? Właśnie utworzyliśmy katalog roboczy. Pobraliśmy pakiet Skeleton oraz szablon PSD i umieściliśmy go w odpowiednim folderze dla tego projektu. Co Zawiera Skeleton? W porównaniu do innych frameworków, o których wspomnieliśmy, Skeleton jest najprostszy. Nie jest przepełnionymi ciężkimi stylami ani dodatkowymi komponentami, takimi jak wtyczki jquery, których możesz nie potrzebować na stronie. Skeleton przychodzi tylko z plikiem index.html, kilku arkuszami stylów zawierających reguły stylu, kilkoma obrazami szablonem PSD. Startowy Dokument HTML Skeleton jest dostarczony ze startowym szablonem HTML o nazwie index.html, więc nie musimy się martwić o pisanie podstawowego dokumentu HTML. Metaznacznik viewport Metaznacznik viewport w tym szablonie startowym HTML jest ustawiony na 1 dla obu, initial-scale i maximum-scale, jak pokazano w poniższym fragmencie <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> Jak wspomnieliśmy wcześniej, ustawienie initial-scale na 1 spowoduje ustawienie strony na 100 procent rozmiaru widocznego obszaru, kiedy otwieramy stronę po raz pierwszy. Jednak, jedyną rzecz jaką powinieneś zauważyć przy ustawieniu maximum-scale na 1, jest to,że uniemożliwi powiększania.

2 W związku z tym zaleca,aby użytkownicy później mogli wyraźnie widzieli zawartość, tekst lub obrazy, bez powiększania strony internetowej. HTML5 Shim Ponieważ będziemy używać elementów HTML5 w naszym dokumencie, musimy uwzględnić bilbiotekę HTML Shim Java Script Library, tak aby Internet Eplorer 8 i jego wcześniejsze wersje rozpoznały nowe elementy HTML5. HTML5 Shim, domyślnie, został również dołączony do startera dokumentu HTML Skeletona; powinieneś znaleźć następujący wiersz w sekcji <head>:  Poprzedni skrypt HTML5 Shim jest zawarty w warunkowym znaczniku komentarza przeznaczonym dla przeglądarki Internet Explorer. Komentarz <!--[if lt IE 9]> stwierdza że jeśli mniej niż Internet Explorer 9, co oznacza,że skrypt w nim zastosowany będzie miał zastosowanie tylko do przeglądarki Internet Explorer 8 i jej wcześniejszej wersji, w których nowe elementy HTML5 nie zostaną rozpoznane. Inne przeglądarki po prostu zignorują ten znacznik tego komentarza. Siatka Elastyczna Skeleton jest wyposażony w Elastyczną Siatkę dla szybkiego zbudowania responsywnego układu. Siatka ta jest szerola na 960 pikseli i składa się z szesnastu kolumn siatki, które są zdefiniowane w bardzo logicznym systemie nazewniczym. Kolumny są zdefiniowane za pomocą klasy.columns w połączeniu z odpowiednimi numerami kolumn :.one,.two,.three,.four, itd. dla zdefiniowania szerokości kolumny. Klasy te można znaleźć w pliku skeleton.css. Poniższy fragment kodu pokazuje definicje numerów kolumn i szerokości kolumn w arkuszu stylów:.container.one.column,.container.one.columns { width: 40px; }.container.two.columns { width: 100px; }.container.three.columns { width: 160px; }.container.four.columns { width: 220px; }.container.five.columns { width: 280px; }.container.six.columns { width: 340px; }.container.seven.columns { width: 400px; }.container.eight.columns { width: 460px; }.container.nine.columns { width: 520px; }.container.ten.columns { width: 580px; }.container.eleven.columns { width: 640px; }.container.twelve.columns { width: 700px; }.container.thirteen.columns { width: 760px; }.container.fourteen.columns { width: 820px; }.container.fifteen.columns { width: 880px; }.container.sixteen.columns { width: 940px; } Jeśli nie znasz tej praktyki lub nie wiesz jak to działa, spójrz na poniższy przykład. Mamy tu trzy elementy div, jeden z nich dotyczy kontenera. Wewnątrz tego kontenera, będziemy mieli element div, który będzie zawierał główny obszar i element dodatkowy, który zawiera obszar paska bocznego <div>

3 <div> <h3>main Content</h3> elit. Aenean consequat porttitor elementum. Mauris pulvinar semper lobortis. [ ]</p> <aside> <h3>sidebar</h3> elit. Aenean consequat porttitor elementum. Mauris pulvinar semper lobortis.[ ]</p> </aside> Ponieważ wszystkie reguły stylizacji dla kolumn są predefiniowane po prostu musimy dodać odpowiednie klasy do tych elementów: <div class="container"> <div class="ten columns"> <h3>main Content</h3> elit. Aenean consequat porttitor elementum. Mauris pulvinar semper lobortis. [ ] </p> <aside class="six columns"> <h3>sidebar</h3> elit. Aenean consequat porttitor elementum. Mauris pulvinar semper lobortis. [ ]</p> </aside> Następnie, jeśli przejrzymy dokument w przeglądarce, zobaczymy coś podobnego: Tak, to takie proste. Pamiętaj,ze Skeleton, kolumny powinny być zagnieżdżone wewnątrz elementu.container, w przeciwnym razie style kolumn nie zostaną zastosowane. Czyszczenie Stylów Elementy tej kolumny są definiowane za pomocą definicji właściwości float CSS, która powoduje zwinięcie elementu nadrzędnego kolumny. Aby to rozwiązać, Skeleton dostarcza specjalnej klasy; użyjemy albo klasy.row albo klasy.clearfix dla wyczyszczenia pozycji w kolumnach. Poniższy fragment kodu pokazuje definicje stylów czyszczących, który możesz znaleźć w pliku skeleton.css:.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }.clearfix:before,.clearfix:after,

4 .row:before,.row:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }.row:after,.clearfix:after { clear: both; }.row,.clearfix { zoom: 1; }.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } Media Queries Skeleton dostarcza media queries CSS3 aby zastosować zasady określonego stylu dla standardowego rozmiaru ekranu, a także uczynić elastyczną siatkę. Na przykład, poniższe media query, określa styl o rozmiarze 959 pikseli i only screen and (max-width: 959px) { } Pamiętaj,że Skeleton jest strukturą opartą na siatce 960, co oznacza,że maksymalna szerokość strony to tylko 960 pikseli. Jeśli więc szerokość ekranu wynosi 959 pikseli lub mniej, innymi słowy, mniejszy niż rozmiar bazowy, zostaną zastosowane tego media query. Ta sama zasada dotyczy również innych zdefiniowanych media query, na przykład: / * Rozmiar portretu tabletu do standardu 960 (urządzenia i przeglądarki) * / Tylko i (min-width: 768px) i (max-width: 959px) {} / * Wszystkie rozmiary urządzeń mobilnych (urządzenia i przeglądarka) * tylko ekran i (maksymalna szerokość: 767px) {} / * Mobilny rozmiar krajobrazu do portretu na tablecie (urządzenia i przeglądarki) * / Tylko i (min-width: 480px) i (max-width: 767px) {} / * Rozmiar portretu w ruchu mobilnym na rozmiar w terenie mobilnym (urządzenia i przeglądarki) * / Tylko i (maksymalna szerokość: 479 pikseli) {} Te definicje media query mogą być znalezione w skeleton.css i layout.css. Nawiązują do naszego poprzedniego przykładu, strona internetowa jest już responsywna, ponieważ klasy kolumn i styli są ppredefiniowane w media queries w skeleton.css. Style Typograficzne Style typograficzne odgrywają kluczową rolę w tworzeniu czytelnej strony internetowe. Podczas gdy przeglądarki mają domyślne style dla typografii, Skeleton zapewnia ulepszenie w tym obszarze dla niektórych elementów, w tym nagłówków, akapitów i cytatów. W Sekelton, te style typograficzne są dostępne w arkuszu stylów base.css Style Przycisków Skeleton dostarcza podstawowych stylów dla przycisków, które są stosowane przez dodanie klasy.button do niektórych elementów, takich jak <buton> czy <a>, jak pokazuje poniższy fragment <button class="button" type="submit">button Element</button> <a href="#" class="button">anchor Tag</a>

5 Style Formularza Stylizacja elementów formularza może być skomplikowana. Ale Skeleton upraszcza proces za pomocą domyślnych stylów. Musimy po prostu poprawnie sformatować znaczniki, bez dodawania żadnych specjalnych klas, jak pokazano poniżej: <form> <label for="name">imię</label> <input type="text" id="name"> <label for="message">wiadomość</label> <textarea id="message"></textarea> <button type="submit">wyślij</button> </form> W przeglądarce otrzymamy wynik, jak pokazano na poniższym zrzucie ekranowym: Ikony Urządzeń Apple Skeleton jest dostarcza z ikonami favicon i ios, które w razie potrzeby możemy łatwo zastąpić własnymi niestandardowymi ikonami. Poniższy zrzut pokazuje te obrazy z różnych rozmiarach dla różnych urządzeń i rozdzielczości:

6 Jak Będzie Wyglądała Strona W tym momencie możesz zastanawiać się, jak będzie wyglądał nasza pierwsza witryna. Będzie miała trzy sekcje : nagłówek, głównym obszarem treści wyświetlającej portfolio i stopkę. Nawigacja Nawigacja naszej strony będzie nieco nietypowa; zamiast być wykorzystywany do poruszania się między stronami, będzie używane do sortowania portfolio. Mamy kilka kategorii portfolio : Wszystkie, Ilustracje, Plakaty, Typografia i Opakowania Efekt Ukrycia Miniatury Dodamy również fantazyjny efekt aby strona była bardziej atrakcyjna. Kiedy ustawimy kursor nad jedną z miniaturek portfolio, pojawi się opis danej miniaturki. Konfigurowanie Dokumentu Skeletona Teraz nadszedł czas,aby skonfigurować dokument Skeletona. Ważne jest aby pamiętać,że kiedy pracujemy nad strukturą, najlepiej nie zmieniać kodu w plikach podstawowych, które są oryginalnymi plikami z pobranego pakietu. Jeśli zmienimy te pliki, może to spowodować,że strona okaże się trudniejsza w utrzymaniu, a nasze zmiany mogą zostać nadpisane, jeśli struktura zostanie uaktualniona później. Zatem musimy dodać plik CSS do naszego własnego Czas Na Działanie Dodanie Dodatkowego Pliku CSS Aby dodać dodatkowy plik CSS, wykonaj następujące czynności: 1. Przejdź do katalogu roboczego portfolio 2. Przejdź do folderu stylesheets i utwórz nowy plik 3. Zmień nazwę tego pliku na styles.css 4. Otwórz plik index.html 5. Dodaj poniższe linie wewnątrz znacznika <head>. zaraz po domyślnych stylach Skeletona base.css, skeleton.css i layout.css: <link rel="stylesheet" href="stylesheets/base.css"> <link rel="stylesheet" href="stylesheets/skeleton.css"> <link rel="stylesheet" href="stylesheets/layout.css"> <link rel="stylesheet" href="stylesheets/styles.css"> Co się stało? Właśnie stworzyliśmy nowy arkusz styli o nazwie styles.css, którego będziemy używać do własnych stylów, z wyjątkiem domyślnych styli Skeleton. Następnie nazwaliśmy ten arkusz stylów w naszym dokumencie HTML, aby style w tym arkuszu pokazały swój efekt. Powodem, dla którego dodaliśmy ten arkusz stylów po innych linkach w arkuszu, jest to,że chcemy aby nasze style były stosowane w innych definicjach styli. Dodawanie Niestandardowych Czcionek Do tej pory ograniczaliśmy się do czcionek zainstalowanych na komputerze użytkownika, co oznacza, że jedynymi czcionkami były te z szeroką bazą instalacyjną, takie jak Arial, Times i Georgia. Dzisiaj

7 możemy osadzać rodziny czcionek na stronach internetowych z wyjątkiem tych na komputerze użytkownika. Istnieje kilka opcji osadzania czcionek. W tym przypadku użyjemy Google Web Fonts. Możemy tam znaleźć różne typy czcionek, które mogą być osadzone na stronach internetowych za darmo. Czas Na Działanie Osadzanie Czcionek Google Web 1. Najpierw przejdź do strony Google Web Font ( 2. Znajdź Pole wyszukiwania i wpisz Alfa Slabe One 3. Kliknij link Quick-use. Spowoduje to przejście do strony zawierającej dodatkowe informacje o tej czcionce, w tym sposób osadzenia jej na stronie 4. Istnieją trzy sposoby na sadzenie czcionki Google : użycie sposobu standadowego, użycie lub użycie JavaScript. W przypadku tej strony użyjemy sposobu standardowego. Więc skopiujmy poniższy wiersz <link href=' rel='stylesheet' type='text/css'> 5. Otwórz index.html i wklej tą linię w sekcji <head> bezpośrednio powyżej linku do innych arkuszów stylu: <link href=' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="stylesheets/base.css"> <link rel="stylesheet" href="stylesheets/skeleton.css"> <link rel="stylesheet" href="stylesheets/layout.css"> <link rel="stylesheet" href="stylesheets/styles.css"> Przygotowanie Obrazków Dla celów naszej strony, przygotuj obrazki o wymiarach 480 x 480 pikseli, najlepiej z rozszerzeniem.jpg, i w liczbie 12. Ikony Dla Social Mediów Umieścimy trzy ikony w obszarze stopki : są to ikony Facebook a, Twittera i Dribbble. Domyślnie, są one wyświetlane na szaro, ale gdy najedziemy na te ikony, na ekranie pojawi się główny kolor platformy, i tak Facebook na niebiesko, a Dribbble na różowo. Ikonki te powinny mieć rozmiar 48 x 48 pikseli. Jedyne co musimy zrobić to połączyć je w plik sprite. Czas Na Działanie Obrazki Sprite W poniższych krokach, zmienimy te ikony w obrazki sprite za pomocą darmowego narzędzia CSS Sprite Generator ( 1. Nadaj ikonom właściwe nazwy takie jak twitter.png u twitter-hover.png, jak pokazano poniżej Po przygotowaniu wszystkich ikonek dodaj je do pliku ZIP 2. Przejdź do strony 3. Prześlij plik ZIP jaki stworzyłeś w Kroku 3

8 4. W sekcji Sprite Output Options, wpisz 10 w pola Horizontal Offset i Vertical Offset, aby ustawić je na 10 pikseli. 5. Potem kliknij na przycisku Create Sprite Image & CSS, jak pokazano poniżej Zostanie wygenerowany obrazek sprite i reguła CSS do jego wyświetlenia 6. Pobierz ten obrazek i zapisz go w folderze images w swoim folderze roboczym 7. Skopiuj kawałek CSS do pliku style.css. Powinien przypominać następujący fragment kodu:.sprite-dribbble-hover{ background-position: 0 0; width: 48px; height: 48px; }.sprite-dribbble{ background-position: 0-58px; width: 48px; height: 48px; }.sprite-facebook-hover{ background-position: 0-116px; width: 48px; height: 48px; }.sprite-facebook{ background-position: 0-174px; width: 48px; height: 48px; }.sprite-twitter-hover{ background-position: 0-232px; width: 48px; height: 48px; }.sprite-twitter{ background-position: 0-290px; width: 48px; height: 48px; } Elementy HTML 5 HTML5 wprowadził wiele nowych elementów i użyjemy kilku z nich na naszej stronie, takich jak <header>, <section>, <figure>, i <footer>. <header> : służy do definiowania nagłówka sekcji. Element <header> może być użyty w nagłówku witryny jak również w nagłówkach innych sekcji, w których można go dodać. <footer> : element <footer> definiuje koniec lub najniższą część sekcji. Podobnie jak element <header>, element <footer> może być użyty w stopce strony lub stopce innych sekcji

9 <section> : może wydawać się być niejasny. Ale zgodnie ze specyfikacją ( element <section> reprezentuje ogólną sekcję dokumentu lub aplikacji <figure> : element <figure> służy do reprezentowania dokumenty w postaci takiej jak ilustracja lub obraz. Może być używany z, aby dodać podpis, jeśli to konieczne : jak wspomniano, <figcaptiona> reprezentuje podpis obrazu dokumentu. Dlatego należy go używać razem z elementem <figure> Teraz dodamy te elementy do naszego dokumentu. Niestandardowe atrybuty danych HTML5 Zdarzają się sytuacje kiedy programiści muszą pobierać dane w ramach określonych elementów dla dalszego przetwarzania danych. W przeszłości, niektórzy programiści korzystali z atrybutów rel lub class do przechowywania tych danych, ale w ten sposób doprowadzili do zerwania ważności struktury dokumentu. Aby uwzględnić taką sytuację, HTML5 wprowadził nowy atrybut o nazwie dane niestandardowe. Możemy użyć tego atrybutu do osadzania niestandardowych danych w elemencie HTML. Ten atrybut jest określony za pomocą data- i występującej po niej nazwie atrybutu Tworzenie Struktury Dokumentu Wykonaj następujące kroki dla stworzenia struktury dokumentu HTML 1. Otwórz plik index.html 2. Usuń wszystko co znajduje się między znacznikami <body> i </body> i zastąp to poniższym fragmentem kodu aby ustalić sekcję nagłówka. Nagłówek naszej strony jest zawarty wewnątrz elementu <header> i zawiera logo, zawinięte w element <div> z klasą logo <header class="header"> <div class="logo"> <h1>portfolio</h1> </header> 3. Następnie, wstaw element <form>, z klasą container i clearfix obok elementu <header>, który właśnie dodałeś. Użyjemy tego <div> dla zawarcia treści strony <form class="container clearfix"> </form> Element <form> jest zasadniczo elementem podobny do elementu <div>. Użyjemy <form> zamiast <div> jeśli będziemy używali elementów formularza HTML <imput> i <label> dla skonstruowania nawigacji sieciowej 4. Wewnątrz elementu <form> dla kontenera, dodamy strukturę HTML dla nawigacji strony. Jak wspominaliśmy wcześniej, nawigacja na naszej stronie jest rzadkością. Będziemy używać przycisku radiowego jako typu wejściowego,a każdy element <input> ma przypisany unikatowy identyfikator, a następnie odpowiedni element <label>, jak pokazano poniżej <input class="nav-menu" id="all" type="radio" name="filter" checked="checked"/> <label for="all">wszystkie</label> <input class="nav-menu" id="illustrations" type="radio" name="filter"/> <label for="illustrations">ilustracje</label>

10 <input class="nav-menu" id="posters" type="radio" name="filter"/> <label class="nav-menu" for="posters">plakaty</label> <input class="nav-menu" id="typography" type="radio" name="filter"/> <label for="typography">typografia</label> <input class="nav-menu" id="packaging" type="radio" name="filter"/> <label for="packaging">opakowania</label> 5. Potem dodajemy element <section> HTML5 z klasą portfolio obok tych elementów <input> i <label>, które już dodaliśmy <section class="portfolio"></section> Ten element <section> będzie używany dal treści portoflio, czyli miniaturek obrazków i opisów 6. Wewnątrz tego elementu <section> dodajemy miniaturki obrazków portfolio. Każda miniatura obrazu jest zawijana w element <figure> HTML5. Mamy 12 miniaturek, więc podzielimy je na cztery kolumny. Skeleton ma 16 kolumn siatki a 16 podzielone przez cztery daje w wyniku cztery kolumny. Tak więc, każdy element <figure> jest przypisany do klas four i columns kolumny z dwiema dodatkowymi klasami all i ich nazwami kategorii <figure class = "cztery kolumny wszystkie plakaty"> <img src = "images / image-1.jpg" alt = "To jest pierwsza miniatura portfolio."> </ figure> Klasy four i columns są przypisane do zastosowania stylów kolumn ze Skeletona, podczas gdy klasa all będzie używana to wybrania elementy <figure>, gdy będziemy musieli zastosować reguły CSS do wszystkich elementów <figure>. Posłużymy się kategorią nazw klas aby pogrupować obrazki, a także zastosujemy style do obrazków, które mają tę samą kategorię. Dostarczymy również tekst opisujący obraz z z atrybutem alt. Ten atrybut alt jest przydatny dla przeglądarek aby wyświetlała alternatywne informacje dla użytkownika, na wypadek gdyby obraz się nie załadował. 7. Miniaturki obrazków są pogrupowane w kategorie. Przypisujemy nazwę kategorii atrybutem title w elemencie <figure> <figure class="four columns" title="poster"> <img src="images/image-1.jpg"> 8. Miniaturki obrazów będą miały podpisy zawierające opis portfolio. Użyjemy elementu HTML5 do umieszczenia tekstu opisu i umieszczenia go wewnątrz elementu <figure> <figure class="four columns all poster"> <img src="images/image-1.jpg" alt= "This is 1st portfolio thumbnail."> 9. Dodajemy atrybut danych HTML5 do <figure> dla przechowania nazwy kategorii do której przypisany jest element <figure> a my po prostu nazywamy tę atrybut data-category

11 <figure class="four columns all poster"> <img src="images/image-1.jpg" alt= "This is 1st portfolio thumbnail."> Teraz dodamy resztę miniaturek obrazków: <figure class="four columns all illustration" datacategory=" illustration"> <img src="images/image-2.jpg" alt= "This is 2nd portfolio thumbnail."> <figure class="four columns all poster" data-category="poster"> <img src="images/image-3.jpg" alt= "This is 3rd portfolio thumbnail."> <figure class="four columns all typography" datacategory=" typography"> <img src="images/image-4.jpg" alt= "This is 4th portfolio thumbnail."> <figure class="four columns all illustration" datacategory=" illustration"> <img src="images/image-5.jpg" alt= "This is 5th portfolio thumbnail."> <figure class="four columns all poster" data-category="poster">

12 <img src="images/image-6.jpg" alt= "This is 6th portfolio thumbnail."> <figure class="four columns all illustration" datacategory=" illustration"> <img src="images/image-7.jpg" alt= "This is 7th portfolio thumbnail."> <figure class="four columns all typography " datacategory=" typography"> <img src="images/image-8.jpg" alt= "This is 8th portfolio thumbnail."> <figure class="four columns all package" data-category="package"> <img src="images/image-9.jpg" alt= "This is 8th portfolio thumbnail."> <figure class="four columns all poster" data-category="poster"> <img src="images/image-10.jpg" alt= "This is 9th portfolio thumbnail."> <figure class="four columns all package " data-category="package"> <img src="images/image-11.jpg" alt= "This is 10th portfolio thumbnail.">

13 <figure class="four columns all illustration " title="illustration"> <img src="images/image-12.jpg" alt= "This is 10th portfolio thumbnail."> 10. Na koniec, do obszaru stopki witryny, dodaj element <footer> z klasą container clearfix obok elementu <div> zdefiniowanego dla kontenera, który dodaliśmy w Kroku 3: <footer class="container clearfix"> <div class="contact"> <ul> <li class="contact-name">john Doe</li> <li class="contact-phone">(+1) </li> <li class="contact- ">me@johndoe.com</li> </ul> <div class="social"> <p class="copyright">copyright John Doe 2012</p> <ul> <li class="social-dribbble"> <a href="#">dribbble</a></li> <li class="social-facebook"> <a href="#">facebook</a></li> <li class="social-twitter"> <a href="#">twitter</a></li> </ul> </footer>