Ako vytvoriť webovú stránku: pre začiatočníkov

Ako vytvoriť webovú stránku: pre začiatočníkov

Vždy ste chceli vytvoriť webovú stránku? Možno ste si prečítali niektoré z našich HTML ( porozumenie HTML ) a tutoriály CSS, ale nevedia, ako tieto jazyky použiť vo väčšom projekte.





Dnes vás prevediem procesom vytvorenia kompletnej webovej stránky od začiatku. Nebojte sa, ak sa vám to zdá byť náročná úloha, prevediem vás ňou na každom kroku.



Tento web vytvoríte pomocou HTML, CSS a JavaScript s dotykom jQuery (sprievodca jQuery). Nebudete nič robiť naozaj krvácajúcu hranu, takže tento kód by mal vo väčšine moderných prehliadačov fungovať pomerne dobre.





Ak si nie ste istí žiadnym CSS, pozrite sa na Sprievodca CSS o W3Schools.com .

Dizajn

Tu je dizajn tejto webovej stránky. Ak chcete lepší vzhľad, pozrite sa na obrázok vo vysokom rozlíšení, alebo ešte lepšie, stiahnite si celý projekt tu.



Tento web som navrhol pre fiktívnu spoločnosť v roku Adobe Photoshop 2017. Ak vás to zaujíma, určite si stiahnite súbor .PSD zo sťahovania balíka. Čo získate v súbore Photoshopu:

Vnútri PSD nájdete všetky vrstvy zoskupené, pomenované a farebne označené:



Aby veci vyzerali správne, budete potrebovať nainštalovaných niekoľko písem. Prvá je Písmo úžasné , používané pre všetky ikony. Ďalšie dve písma sú PT serif a Myriad Pro (súčasť Photoshopu). Ak si nie ste istí, ako nainštalovať písma, prečítajte si nášho sprievodcu.

Nebojte sa, ak nemáte Adobe Photoshop , na pokračovanie to nepotrebujete.



Počiatočný kód

Teraz, keď je dizajn jasný, začnime s kódovaním! Vytvorte nový súbor vo svojom obľúbenom textovom editore (používam Vznešený text 3 ). Uložiť ako index.html . Môžete to nazvať ľubovoľne. Dôvod, prečo sa mnohé stránky nazývajú indexové, je spôsob, akým webové servery fungujú. Predvolená konfigurácia pre väčšinu serverov je zobrazovať stránku index.html, ak nie je zadaná žiadna stránka.

Ak sa nechcete dozvedieť podrobnosti, choďte a stiahnite si celý kód zo sťahovania.

Tu je kód, ktorý potrebujete:





Noise Media


/* CSS goes here, at the top of the page */





/* JavaScript goes here, at the bottom of the page */


To robí niekoľko vecí:

  • Definuje nevyhnutné minimum HTML.
  • Definuje názov stránky „Hlukové médiá“
  • Zahŕňa jQuery hostený v službe Google CDN (čo je CDN).
  • Obsahuje úžasné písmo hostené v službe Google CDN.
  • Definuje a štýl tag, do ktorého napíšete svoje CSS.
  • Definuje a skript tag, do ktorého napíšete svoj JavaScript.

Súbor znova uložte a otvorte vo webovom prehliadači. Pravdepodobne si toho veľa nevšimnete a rozhodne to ešte nebude vyzerať ako webová stránka.

Všimnite si, aký je názov stránky Hlukové médiá . Toto je definované textom vo vnútri titul tag. Toto má byť vo vnútri hlava tagy.

ako odstrániť disk Google z Windows 10

Hlavička

Vytvoríme hlavičku. Takto to vyzerá:

Začnime tým malým sivým kúskom na vrchu. Je to svetlošedá s mierne tmavošedou zospodu. Tu je záber zblízka:

Pridajte tento kód HTML do súboru telo značka v hornej časti:

Kým ste tu, rozoberme si to. A div je ako kontajner, do ktorého môžete vložiť ďalšie veci. Tieto „ďalšie položky“ môžu byť viac kontajnerov, textu, obrázkov alebo čokoľvek iného. Existujú určité obmedzenia týkajúce sa toho, čo môže ísť do určitých značiek, ale divy sú dosť všeobecné veci. Má id z horná lišta . Použije sa na jeho štylizáciu pomocou CSS a v prípade potreby na zacielenie pomocou JavaScriptu. Uistite sa, že máte iba jeden prvok s konkrétnym ID - mali by byť jedinečné. Ak chcete, aby viac prvkov malo rovnaký názov, použite a trieda namiesto toho - na to sú navrhnuté! Tu je CSS, ktorý potrebujete na štýl (umiestnený v hornej časti vášho súboru štýl značka):

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;
}

Všimnite si, ako sa pred názvom používa znak hash (#, hashtag, znak libry). To znamená, že prvok je ID. Ak by ste používali triedu, namiesto toho by ste použili bodku (.). The html a telo značky majú polstrovanie a okraj nastavené na nulu. Tým sa zabráni akýmkoľvek nechceným problémom s medzierami.

Je čas prejsť na logo a navbar. Než začnete, potrebujete kontajner, do ktorého chcete vložiť tento obsah. Urobme z toho triedu (aby ste ho mohli neskôr znova použiť) a keďže toto je nie responzívny web, ktorého šírka je 900 pixelov.

HTML:


CSS:

.normal-wrapper {
width: 900px;
margin: 0 auto;
padding: 15px 40px;
background: red;
overflow: auto;
}

Kým dokončíte kód, môže byť ťažké zistiť, čo sa deje, a preto môže byť užitočné pridať (dočasné) farebné pozadie, aby ste videli, čo sa deje:

background: red;

Teraz je načase vytvoriť logo. Písmo úžasné je potrebná pre samotnú ikonu. Font Awesome je sada ikon zabalených ako vektorové písmo - úžasné! Počiatočný kód vyššie už nastavil Font Awesome, takže je všetko pripravené!

Pridajte tento HTML vo vnútri the normálny-obal div:



CSS:

.logo-icon {
color: #000000;
font-size: 60pt;
float: left;
}
h1 {
float: left;
margin: 21px 0 0 25px;
}

Nebojte sa, že ostatné písma nebudú zodpovedať dizajnu - urobíte si v tom poriadok neskôr. Ak chcete použiť rôzne ikony, prejdite na položku Ikony s úžasným písmom stránku a potom zmeňte fa-zníženie hlasitosti na názov ikony, ktorú chcete použiť.

Pri prechode na navigačný panel použijete neusporiadaný zoznam ( the ) pre to. Pridajte tento HTML po the kontajner s logom (ale stále vo vnútri normálny-obal ):

The href slúži na prepojenie s inými stránkami. Tento výukový web nemá žiadne ďalšie stránky, ale môžete sem zadať názov a cestu k súboru (ak je to potrebné), napr. reviews.html . Uistite sa, že ste to uviedli v oboch úvodzovkách.

Tu je 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;
}

Tento CSS začína príponou neusporiadaný zoznam . Potom odstráni body odrážok pomocou list-style-type: none; . Odkazy sú od seba trochu vzdialené a dajú farbu, keď na ne umiestnite kurzor myši. Malý sivý oddeľovač je pravým okrajom pre každý prvok, ktorý je potom odstránený pre posledný prvok pomocou posledný odkaz trieda. Takto to vyzerá:

Všetko, čo tejto sekcii zostalo, je červené horizontálne farebné zvýraznenie. Pridajte tento HTML za normálny-obal :

A tu je CSS:

#top-color-splash {
width: 100%;
height: 4px;
background: #EB6361;
}

To je horná časť hotová. Takto to vyzerá - celkom podobné dizajnu, nie?

Hlavná oblasť obsahu

Teraz je čas prejsť na hlavnú oblasť obsahu-takzvané „nad záhybom stránky“. Ako táto časť vyzerá:

Toto je celkom jednoduchá časť, text vľavo s obrázkom vpravo. Táto oblasť bude voľne rozdelené na tretiny, zhruba sa približujúce k Zlatý pomer .

K tejto časti budete potrebovať ukážkový obrázok. Je súčasťou sťahovania. Tento obrázok je široký 670 pixelov a je z našej recenzie Panasonic Lumix DMC-G80/G85.

Pridajte HTML po the top-color-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.

xbox sa nemôže pripojiť k wifi

Alternatively, check out our review of the Panasonic G80 shown on the right!






Všimnite si, ako normálny-obal prvok sa vrátil (to je radosť z používania tried). Možno sa čudujete, prečo obrázok ( obr ) značka sa nezatvára. Toto je samozatváracia značka. Predné lomítko ( /> ) to naznačuje, pretože nie vždy má zmysel zatvárať značku.

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 */
}

Najdôležitejším atribútom je veľkosť boxu: border-box; . To zaisťuje, že prvky budú mať vždy šírku 40% alebo 60%. Predvolená hodnota (bez tohto atribútu) je vami zadaná šírka plus akékoľvek vypchávky, okraje a orámovania. Trieda obrazu ( predstavovaný obrázok ) má maximálna šírka z 500 pixlov . Ak zadáte iba jeden rozmer (šírku alebo výšku) a ostatné ponecháte prázdne, css zmení veľkosť obrázka pri zachovaní jeho pomeru strán.

Oblasť ponuky

Vytvorme oblasť citátov. Takto to vyzerá:

Toto je ďalšia jednoduchá oblasť. Obsahuje tmavosivé pozadie s bielym textom v strede.

Pridajte tento HTML po predchádzajúci normálny-obal :



makeuseof is the best website ever


Joe Coburn



A potom tento 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;
}

Tu sa toho veľa nedeje. Veľkou veľkosťou je potrebná veľkosť - veľkosť písma, medzery atď. Takto to celé teraz vyzerá - začína to vyzerať ako webová stránka!

Oblasť ikon

Pokračujme v tlačení - je takmer hotové! Tu je ďalšia oblasť, ktorú je potrebné vytvoriť:

Táto časť bude využívať niekoľko tried. Tri ikony sú väčšinou rovnaké, s výnimkou obsahu, takže dáva zmysel používať triedy namiesto ID. Pridajte tento HTML po predchádzajúci citát-oblasť :






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.



Tieto tri ikony sú tiež Písmo-úžasné . HTML opäť používa normálny-obal trieda. Tu je 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;
}

V CSS sa deje niekoľko nových vecí. Zaoblené rohy nastavuje používateľ polomer ohraničenia: 200 pixlov; . Nastavením tejto hodnoty na rovnakú šírku vznikne dokonalý kruh. Môžete to znížiť, ak by ste uprednostnili viac štvorca so zaoblenými rohmi. Všimnite si, ako sa akcie umiestnenia kurzora aplikujú na divy - nie je obmedzená iba na odkazy. Takto teraz vyzerá táto sekcia:

Posledná vec, ktorú musíte urobiť, je päta! Je to veľmi jednoduché, pretože je to len sivá oblasť bez textu. Pridajte tento HTML za oblasti ikon ' normálny-obal :

Tu je CSS:

#footer {
width: 100%;
background: #F1F1F1; /* light gray */
border-top: 1px solid #D4D4D4; /* dark gray 'topline' */
height: 150px;
}

Vidíte - skutočne jednoduché veci.

Pridajte nejaký Pizzazz

To je všetko, kódovanie je hotové! Veci môžete nechať tak, ako sú, je to hotová webová stránka. Možno ste si však všimli, že to tak nevyzerá presne tak ako dizajn. Hlavným dôvodom sú použité písma. Poďme to vyriešiť.

Písmo používané pre väčšinu názvov je Myriad Pro . S tým prichádza Adobe Vytvorte cloud, ale nie je k dispozícii ako webové písmo. Aktuálne používané písmo na webovej stránke je Helvetica . Vyzerá to dobre, takže to môžete nechať tak, ako to je PT Sans je k dispozícii ako webové písmo. Písmo použité pre celý text je PT serif , ktorý je k dispozícii ako webové písmo.

Webfonty sú jednoduchý proces. Rovnako ako načítanie nového písma do počítača, webové stránky môžu načítať písma na požiadanie. Jeden z najlepších spôsobov, ako to dosiahnuť, je prejsť Fonty Google .

Pridajte tento CSS a prepnite na lepšie písma:

@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 upravte prvky html a tela tak, aby používali nové písma:

font-family: 'PT Serif', 'Helvetica', 'Arial';

Všimnite si, ako prvok h3 nie je zahrnutý v zozname - toto bude predvolené nastavenie PT-pätka namiesto PT-Sans .

Ako poslednú ozdobu použijeme JavaScript, ktorý nám pomôže prechádzať tromi rôznymi obľúbenými obrázkami. Budete potrebovať Obrázok_2 a Obrázok_3 pre túto časť a znova je to voliteľné. Web je v tejto chvíli bez tejto funkcie úplne funkčný. Takto to bude vyzerať (zrýchlené):

Upravte svoj HTML tak, aby obsahoval tri odporúčané obrázky. Všimnite si, ako dva z nich majú triedu CSS skrytý . Každý obrázok dostal identifikačné číslo, aby mohol JavaScript na každý z nich zacieľovať nezávisle.





Tu je CSS potrebný na skrytie extra odporúčaných obrázkov:

.hidden {
display: none;
}

Keď už je o HTML a CSS postarané, prejdeme na JavaScript. Je užitočné porozumieť Document Object Model (DOM) pre túto časť, ale nie je to požiadavka.

Nájsť skript oblasť v spodnej časti stránky:


/* JavaScript goes here, at the bottom of the page */

Pridajte nasledujúci JavaScript do súboru skript značka:

/* 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;
}
}
});

Deje sa tu niekoľko vecí. Kód je obsiahnutý vo vnútri $ (dokument) .ready () . To znamená, že sa spustí, keď váš prehliadač dokončí vykresľovanie stránky - je to osvedčený postup. The setInterval () funkcia sa používa na volanie changeImage () fungovať pravidelne vo vopred definovanom intervale v milisekundách (1000 milisekúnd = 1 sekunda). Toto je uložené v priečinku čas premenná. Môžete to zvýšiť alebo znížiť, aby ste urýchlili alebo spomalili posúvanie. Nakoniec sa na zobrazenie rôznych obrázkov používa jednoduchý príkaz case a sleduje aktuálne zobrazený obrázok.

Kódovacia výzva

To je všetko! Našťastie ste sa počas toho veľa naučili. Ak máte chuť na výzvu a chcete otestovať svoje nové znalosti, prečo neskúsiť implementáciu týchto úprav:

Pridať pätu: Pridajte do päty nejaký text (rada: môžete znova použiť normálny-obal a tretina/dve tretiny triedy.).

Vylepšite posúvanie obrázku: Upravte JavaScript, aby sa animovali zmeny obrázku (rada: pozrite sa na jQuery fadein a Animovaný ).

Implementujte viac úvodzoviek: Upravte úvodzovky tak, aby sa menil z jedného z niekoľkých rôznych (tip: východiskový bod nájdete v kóde posúvania obrázku).

Nastaviť server: Nastavte server a odosielajte údaje medzi webovou stránkou a serverom (rada: prečítajte si nášho sprievodcu JSON a Python).

prenášať súbory z virtuálneho boxu na hostiteľa

Hneď ako sa vám bude páčiť používanie JavaScriptu alebo ak máte nejaké skúsenosti s Ruby, môžete si vyskúšať vytvorenie webovej stránky pomocou statického nástroja na tvorbu webových stránok, akým je GatsbyJS alebo Jekyll.

zdieľam zdieľam Tweet E -mail Ako zmeniť vzhľad a atmosféru pracovnej plochy Windows 10

Chcete vedieť, ako vylepšiť vzhľad systému Windows 10? Pomocou týchto jednoduchých úprav prispôsobte Windows 10 svojmu vlastnému.

Čítajte ďalej Súvisiace témy
  • Programovanie
  • HTML
  • Vzhľad stránky
  • CSS
O autorovi Joe Coburn(136 publikovaných článkov)

Joe je absolventom počítačových vied na University of Lincoln, UK. Je profesionálnym softvérovým vývojárom a keď nelieta s dronmi alebo nepíše hudbu, často ho zastihne fotografovanie alebo vytváranie videí.

Viac od Joe Coburn

prihlásiť sa ku odberu noviniek

Pripojte sa k nášmu bulletinu a získajte technické tipy, recenzie, bezplatné elektronické knihy a exkluzívne ponuky!

Kliknutím sem sa prihlásite na odber