Home-theater-designers
Czy zawsze chciałeś zrobić stronę internetową? Może czytałeś niektóre z naszych HTML ( rozumienie HTML ) i tutoriale CSS , ale nie wiem, jak używać tych języków w większym projekcie.
Dzisiaj przeprowadzę Cię przez proces tworzenia kompletnej strony internetowej od podstaw. Nie martw się, jeśli wydaje się to trudnym zadaniem, poprowadzę Cię przez to na każdym kroku.
Stworzysz tę stronę używając HTML, CSS i JavaScript z odrobiną jQuery ( przewodnik po jQuery ). Nic nie będziesz robił naprawdę krwawienie krawędzi, więc ten kod powinien działać całkiem dobrze w większości nowoczesnych przeglądarek.
Jeśli nie masz pewności co do CSS, spójrz na Przewodnik po CSS w W3Schools.com .
Projektowanie
Oto projekt tej strony. Rzuć okiem na obraz w wysokiej rozdzielczości, jeśli chcesz lepiej wyglądać, a nawet lepiej, pobierz pełny projekt tutaj .
Zaprojektowałem tę stronę dla fikcyjnej firmy w Adobe Photoshop 2017. Jeśli jesteś zainteresowany, pobierz plik .PSD z pobranego pakietu . Oto, co otrzymasz w pliku Photoshopa:
Wewnątrz PSD znajdziesz wszystkie warstwy pogrupowane, nazwane i oznaczone kolorami:
Aby wszystko wyglądało poprawnie, będziesz potrzebować kilku zainstalowanych czcionek. Pierwszy to Czcionka niesamowita , używany dla wszystkich ikon. Pozostałe dwie czcionki to PT Szeryf i Myriad Pro (dołączony do programu Photoshop). Jeśli nie wiesz, jak zainstalować czcionki, przeczytaj nasz przewodnik .
Nie martw się, jeśli nie masz Adobe Photoshop , nie potrzebujesz go, aby kontynuować.
Kod początkowy
Teraz, gdy projekt jest jasny, zacznijmy kodować! Utwórz nowy plik w swoim ulubionym edytorze tekstu (używam Wzniosły tekst 3 ). Zapisz to jako index.html . Możesz nazwać to jak chcesz, powodem, dla którego wiele stron nazywa się indeksem, jest sposób działania serwerów internetowych. Domyślną konfiguracją większości serwerów jest udostępnianie strony index.html, jeśli żadna strona nie została określona.
Jeśli nie chcesz poznać szczegółów, pobierz pełny kod z pliku do pobrania .
Oto kod, którego potrzebujesz:
Noise Media
/* CSS goes here, at the top of the page */
/* JavaScript goes here, at the bottom of the page */
To robi kilka rzeczy:
- Określa minimalny wymagany kod HTML.
- Definiuje tytuł strony „Noise Media”
- Zawiera jQuery hostowane w Google CDN ( co to jest CDN ).
- Zawiera Font Awesome hostowany w Google CDN.
- Definiuje styl tag, w którym chcesz zapisać swój CSS.
- Definiuje scenariusz tag, w którym chcesz zapisać swój kod JavaScript.
Zapisz plik ponownie i otwórz go w przeglądarce internetowej. Prawdopodobnie niewiele zauważysz, a na pewno nie będzie to jeszcze wyglądało jak strona internetowa.
Zwróć uwagę na tytuł strony Nośniki hałasu . Jest to określone przez tekst wewnątrz tytuł etykietka. Ten ma być w środku głowa Tagi.
jak usunąć wydarzenia z kalendarza iPhone'a
Nagłówek
Stwórzmy nagłówek. Oto jak to wygląda:
Zacznijmy od tego małego szarego kawałka na górze. Jest jasnoszary z lekkim ciemnoszarym pod spodem. Oto zbliżenie:
Dodaj ten kod HTML do ciało tag u góry:
Skoro tu jesteś, rozwiążmy to. A div jest jak pojemnik, w którym umieszcza się inne rzeczy. Te „inne rzeczy” mogą być większą liczbą pojemników, tekstu, obrazów, czegokolwiek. Istnieją pewne ograniczenia dotyczące tego, co może trafić do niektórych tagów, ale div to dość ogólne rzeczy. Ma NS z Górny pasek . Będzie to używane do stylizowania go za pomocą CSS i kierowania go za pomocą JavaScript, jeśli jest to wymagane. Upewnij się, że masz tylko jeden element o określonym identyfikatorze – powinny być niepowtarzalne. Jeśli chcesz, aby wiele elementów miało tę samą nazwę, użyj a klasa zamiast tego - po to zostały zaprojektowane! Oto CSS, którego potrzebujesz, aby go ostylować (umieść na górze wewnątrz swojego styl etykietka):
html, body {
margin: 0;
padding: 0;
font-family: 'Helvetica', 'Arial'; /* initial fonts */
}
#top-bar {
width: 100%;
background: #F1F1F1; /* light gray */
border-bottom: 1px solid #D4D4D4; /* dark gray 'underline' */
height: 25px;
}Zwróć uwagę, jak znak hash (#, hashtag, krzyżyk) jest używany przed nazwą. Oznacza to, że element jest identyfikatorem. Jeśli używasz klasy, zamiast tego użyjesz kropki (.). ten html oraz ciało znaczniki mają swoje dopełnienie i margines ustawiony na zero. Zapobiega to wszelkim niechcianym problemom z odstępami.
Czas przejść do logo i paska nawigacyjnego. Zanim zaczniesz, potrzebujesz kontenera, w którym możesz umieścić tę zawartość. Uczyńmy to klasą (abyś mógł ponownie użyć jej później), a tak jest nie responsywną stronę internetową, o szerokości 900 pikseli.
HTML:
CSS:
.normal-wrapper {
width: 900px;
margin: 0 auto;
padding: 15px 40px;
background: red;
overflow: auto;
}Może być trudno powiedzieć, co się dzieje, dopóki nie skończysz kodu, więc pomocne może być dodanie (tymczasowego) kolorowego tła, aby zobaczyć, co się dzieje:
background: red;Czas stworzyć logo teraz. Czcionka niesamowita jest potrzebna dla samej ikony. Font Awesome to zestaw ikon spakowanych jako czcionka wektorowa — super! Powyższy kod początkowy już skonfigurował Font Awesome, więc wszystko jest gotowe do pracy!
Dodaj ten kod HTML wewnątrz ten normalne opakowanie dział:
CSS:
.logo-icon {
color: #000000;
font-size: 60pt;
float: left;
}
h1 {
float: left;
margin: 21px 0 0 25px;
}Nie martw się, że inne czcionki nie pasują do projektu — później to posprzątasz. Jeśli chcesz używać różnych ikon, przejdź do Niesamowite ikony czcionek stronę, a następnie zmień fa-zmniejszenie głośności do nazwy ikony, której chcesz użyć.
Przechodząc na pasek nawigacyjny, użyjesz nieuporządkowanej listy ( ten ) dla tego. Dodaj ten kod HTML po ten logo-kontener (ale wciąż w środku normalne opakowanie ):
ten href służy do linkowania do innych stron. Ta strona samouczka nie ma żadnych innych stron, ale możesz tutaj podać nazwę i ścieżkę do pliku (jeśli jest wymagana), np. opinie.html . Upewnij się, że umieściłeś to w obu podwójnych cudzysłowach.
Oto CSS:
#navbar {
list-style-type: none; /* remove bullet points */
margin: 29px 0 0 0;
padding: 0;
float: right;
font-size: 16pt;
}
#navbar li {
display: inline; /* make items horizontal */
}
#navbar li a:link, #navbar li a:visited, #navbar li a:active {
text-decoration: none; /* remove underline */
color: #000000;
padding: 0 16px 0 10px; /* space links apart */
margin: 0;
border-right: 2px solid #B4B4B4; /* divider */
}
#navbar li a:link.last-link {
/* remove divider */
border-right: 0px;
}
#navbar li a:hover {
/* change color on hover (mouseover) */
color: #EB6361;
}Ten CSS zaczyna się od lista nieuporządkowana . Następnie usuwa wypunktowania za pomocą typ-listy: brak; . Łącza są nieco odsunięte od siebie i po najechaniu na nie myszą otrzymują kolor. Mała szara przegroda to prawe obramowanie każdego elementu, które jest następnie usuwane dla ostatniego elementu za pomocą ostatni link klasa. Oto jak to wygląda:
Wszystko, co pozostało w tej sekcji, to czerwone, poziome podświetlenie koloru. Dodaj ten kod HTML po normalne opakowanie :
A oto CSS:
#top-color-splash {
width: 100%;
height: 4px;
background: #EB6361;
}To jest górna część skończona. Oto jak to wygląda -- całkiem podobne do projektu, prawda?
Główny obszar zawartości
Nadszedł czas, aby przejść do głównego obszaru zawartości – tak zwanego „nad zakładką”. Oto jak wygląda ta część:
To dość prosta część, tekst po lewej z obrazem po prawej. Ten obszar będzie luźno podzielony na trzy części, z grubsza przybliżając Złoty podział .
Do tej części potrzebny będzie przykładowy obraz. Jest dołączony do pobrania . Ten obraz ma szerokość 670 pikseli i pochodzi z naszego przeglądu Panasonic Lumix DMC-G80/G85.
Dodaj kod HTML po ten top-kolor-splash element:
Welcome!
Noise Media is a technology company specialising in tech reviews.
We’re very good at what we do, but unfortunately, we are not a real company.
Make sure you visit makeuseof.com for the full tutorial on how to build this website.
co to jest samsung one ui home?
Alternatively, check out our review of the Panasonic G80 shown on the right!
Zwróć uwagę, jak normalne opakowanie powrócił element (to radość z używania klas). Być może zastanawiasz się, dlaczego obraz ( obrazek ) tag nie zamyka się. To jest samozamykający się tag. Ukośnik ( /> ) wskazuje na to, ponieważ nie zawsze ma sens zamykanie tagu.
CSS:
.one-third {
width: 40%;
float: left;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
margin-top: 20px;
}
.two-third {
width: 60%;
float: left;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
padding-left: 40px;
text-align: right;
margin-top: 20px;
}
.featured-image {
max-width: 500px; /* reduce image size while maintaining aspect ratio */
}
.no-margin-top {
margin-top: 0; /* remove margin on things like headers */
}Najważniejszym atrybutem jest tutaj rozmiar pudełka: obramowanie-pudełko; . Dzięki temu elementy zawsze będą miały 40% lub 60% szerokości. Wartość domyślna (bez tego atrybutu) to określona szerokość plus wszelkie dopełnienie, marginesy i obramowania. Klasa obrazu ( przedstawiony obraz ) ma maksymalna szerokość z 500px . Jeśli określisz tylko jeden wymiar (szerokość lub wysokość), a drugi zostawisz pusty, css zmieni rozmiar obrazu, zachowując jego proporcje.
Obszar wyceny
Stwórzmy obszar cytatu. Oto jak to wygląda:
To kolejny prosty obszar. Zawiera ciemnoszare tło z białym tekstem wyśrodkowanym.
Dodaj ten kod HTML po Poprzednia normalne opakowanie :
makeuseof is the best website ever
Joe Coburn
A potem ten CSS:
#quote-area {
background: #363636;
color: #FFFFFF;
text-align: center;
padding: 15px 0;
}
h3 {
font-weight: normal;
font-size: 20pt;
margin-top: 0px;
}
h4 {
font-weight: normal;
font-size: 16pt;
margin-bottom: 0;
}Niewiele się tu dzieje. Zmiana rozmiaru to główna potrzebna regulacja — rozmiar czcionki, odstępy i tak dalej. Oto jak to wszystko teraz wygląda — zaczyna wyglądać jak strona internetowa!
Obszar ikon
Nie przestawajmy naciskać – już prawie gotowe! Oto kolejny obszar, który wymaga stworzenia:
Ta część będzie wykorzystywać kilka klas. Trzy ikony są w większości takie same, z wyjątkiem treści, więc sensowne jest używanie klas zamiast identyfikatorów. Dodaj ten kod HTML po Poprzednia obszar wyceny :
YouTube
Checkout our YouTube channel for more tech reviews, tutorials and giveaways!
Reviews
If you’re planning to buy a new gadget, check here first. We’ll give you in-depth reviews of the latest devices.
Buying Guides
At Buying Guides we strive to provide readers with the tools to get the best stuff for the lowest amount of money.
Te trzy ikony są również Czcionka niesamowita . HTML ponownie używa normalne opakowanie klasa. Oto CSS:
.icon-outer {
box-sizing: border-box; /* ensure padding and borders do not increase the size */
float: left;
width: 33.33%;
padding: 25px;
margin: 0;
text-align: center;
}
.icon-circle {
background: #EEEEEE;
color: #B4B4B4;
width: 200px;
height: 200px;
border-radius: 200px; /* make rounded corners */
margin: 0 auto;
border: 2px solid #D6D6D6;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
font-size: 75pt;
padding: 30px 0 0 0;
cursor: pointer;
}
.icon-circle:hover {
/* change color on hover (mouseover) */
color: #FFFFFF;
background: #EB6361;
}
h5 {
margin: 15px 0 10px 0;
font-size: 20pt;
}W CSS dzieje się kilka nowych rzeczy. Zaokrąglone rogi są ustawiane przez promień obramowania: 200px; . Ustawienie tej wartości na taką samą jak szerokość skutkuje powstaniem idealnego okręgu. Możesz to zmniejszyć, jeśli wolisz więcej kwadratu z zaokrąglonymi rogami. Zwróć uwagę, w jaki sposób akcje najechania są stosowane do elementów div — nie ogranicza się to tylko do linków. Oto jak teraz wygląda ta sekcja:
Stopka
Ostatnią rzeczą do zrobienia jest stopka! To naprawdę proste, ponieważ jest to tylko szary obszar bez tekstu. Dodaj ten kod HTML po obszarach ikon' normalne opakowanie :
Oto CSS:
#footer {
width: 100%;
background: #F1F1F1; /* light gray */
border-top: 1px solid #D4D4D4; /* dark gray 'topline' */
height: 150px;
}Zobacz - naprawdę proste rzeczy.
Dodaj trochę pizzy
To wszystko, kodowanie gotowe! Absolutnie możesz zostawić rzeczy takimi, jakie są, to gotowa strona internetowa. Być może zauważyłeś jednak, że nie wygląda dokładnie jak projekt. Głównym tego powodem są użyte czcionki. Rozwiążmy to.
Czcionka używana w większości tytułów to Niezliczone Pro . To pochodzi z Cegła suszona na słońcu Utwórz chmurę, ale nie jest dostępna jako czcionka internetowa. Czcionka aktualnie używana na stronie to Helvetica . Wygląda to dobrze, więc możesz zostawić to tak, jak jest PT Sans jest dostępny jako czcionka internetowa. Czcionka używana dla całego tekstu to PT Szeryf , który jest dostępny jako czcionka internetowa.
Czcionki internetowe to prosty proces. Podobnie jak ładowanie nowej czcionki na komputer, strony internetowe mogą ładować czcionki na żądanie. Jednym z najlepszych sposobów na to jest Czcionki Google .
Dodaj ten CSS, aby przełączyć się na lepsze czcionki:
@import url('https://fonts.googleapis.com/css?family=PT+Sans');
@import url('https://fonts.googleapis.com/css?family=PT+Serif');
h1, h2, h4, h5, h6 {
font-family: 'PT Sans', 'Helvetica', 'Arial';
}Teraz zmodyfikuj elementy html i body, aby używać nowych czcionek:
font-family: 'PT Serif', 'Helvetica', 'Arial';Zwróć uwagę, że element h3 nie jest zawarty na liście -- domyślnie będzie to PT-szeryfowe zamiast PT-Sans .
Jako ostatnią odrobinę ładności, użyjmy JavaScript, aby przewinąć trzy różne polecane obrazy. Będziesz potrzebować Obraz_2 oraz Obraz_3 w tej części i znowu jest to opcjonalne. Strona jest w tym momencie całkowicie funkcjonalna bez tej funkcji. Oto jak to będzie wyglądać (przyspieszone):
Zmodyfikuj swój kod HTML, aby zawierał trzy polecane obrazy. Zwróć uwagę, że dwa z nich mają klasę CSS ukryty . Każdemu obrazowi nadano identyfikator, dzięki czemu JavaScript może kierować każdy z nich niezależnie.
Oto CSS potrzebny do ukrycia dodatkowych polecanych obrazów:
.hidden {
display: none;
}Teraz, kiedy HTML i CSS są już załatwione, przejdźmy do JavaScript. Warto zapoznać się z modelem obiektów dokumentu (DOM) dla tej części, ale nie jest to wymagane.
Znaleźć scenariusz obszar na dole strony:
/* JavaScript goes here, at the bottom of the page */
Dodaj następujący kod JavaScript wewnątrz scenariusz etykietka:
/* JavaScript goes here, at the bottom of the page */
$(document).ready(function() {
// run once the page is ready
var time = 2500;
// get the image containers
$im1 = $('#f-image-1');
$im2 = $('#f-image-2');
$im3 = $('#f-image-3');
setInterval(function(){
// call function every x milliseconds (defined in time variable above)
changeImage();
}, time);
var currentImage = 1;
function changeImage(){
switch(currentImage) {
case 1:
// show image 2
$im1.hide();
$im2.show();
$im3.hide();
currentImage = 2;
break;
case 2:
// show image 3
$im1.hide();
$im2.hide();
$im3.show();
currentImage = 3;
break;
default:
// show image 1
$im1.show();
$im2.hide();
$im3.hide();
currentImage = 1;
}
}
});Dzieje się tu kilka rzeczy. Kod jest zawarty w środku $(dokument).gotowy() . Oznacza to, że zostanie uruchomiony po zakończeniu renderowania strony przez przeglądarkę — jest to dobra praktyka. ten setInterval() funkcja służy do wywołania Zmień obraz () działają regularnie w określonych odstępach czasu w milisekundach (1000 milisekund = 1 sekunda). To jest przechowywane w czas zmienny. Możesz zwiększyć lub zmniejszyć tę wartość, aby przyspieszyć lub spowolnić przewijanie. Wreszcie, prosta instrukcja case służy do pokazywania różnych obrazów i śledzenia aktualnie wyświetlanego obrazu.
Wyzwanie kodowania
Otóż to! Mam nadzieję, że wiele się nauczyłeś podczas tego procesu. Jeśli masz ochotę na wyzwanie i chcesz przetestować swoje nowo zdobyte umiejętności, spróbuj wdrożyć te modyfikacje:
Dodaj stopkę: Dodaj tekst do stopki (wskazówka: możesz użyć ponownie normalne opakowanie oraz jedna trzecia/dwie trzecie zajęcia.).
Popraw przewijanie obrazu: Zmodyfikuj JavaScript, aby animować zmiany obrazu (wskazówka: spójrz na jQuery zanikać oraz Ożywiony ).
Zaimplementuj wiele ofert: Zmodyfikuj cytaty, aby zmienić jeden z kilku różnych (wskazówka: spójrz na kod przewijania obrazu jako punkt początkowy).
Skonfiguruj serwer: Skonfiguruj serwer i przesyłaj dane między stroną internetową a serwerem (wskazówka: przeczytaj nasz przewodnik po JSON i Python ).
jaki mam model płyty głównej?
Gdy już nauczysz się korzystać z JavaScript lub masz jakieś doświadczenie z Ruby, możesz spróbować swoich sił w tworzeniu strony internetowej za pomocą statycznego narzędzia do tworzenia stron internetowych, takiego jak GatsbyJS lub Jekyll .
Udział Udział Ćwierkać E-mail Jak zmienić wygląd i styl pulpitu Windows 10?Chcesz wiedzieć, jak poprawić wygląd systemu Windows 10? Skorzystaj z tych prostych dostosowań, aby dostosować system Windows 10 do własnych potrzeb.
Czytaj dalej Powiązane tematy- Programowanie
- HTML
- Projektowanie stron
- CSS
Joe jest absolwentem informatyki na Uniwersytecie w Lincoln w Wielkiej Brytanii. Jest profesjonalnym programistą, a kiedy nie lata dronami ani nie pisze muzyki, często można go spotkać wykonującego zdjęcia lub produkującego filmy.
Więcej od Joe CoburnaZapisz się do naszego newslettera
Dołącz do naszego newslettera, aby otrzymywać porady techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!
Kliknij tutaj, aby zasubskrybować