Jak vytvořit web: pro začátečníky

Jak vytvořit web: pro začátečníky

Vždy jste chtěli vytvořit webové stránky? Možná jste si přečetli některé z našich HTML ( porozumění HTML ) a tutoriály CSS, ale nevíte, jak tyto jazyky použít ve větším projektu.





Dnes vás provedu procesem vytvoření úplné webové stránky od nuly. Nebojte se, pokud se vám to zdá jako obtížný úkol, provedu vás jím na každém kroku.



Tyto webové stránky vytvoříte pomocí HTML, CSS a JavaScript s nádechem jQuery (průvodce jQuery). Nebudete nic dělat opravdu krvácející okraj, takže tento kód by měl ve většině moderních prohlížečů fungovat docela dobře.





Pokud si nejste jisti žádným CSS, podívejte se na Průvodce CSS na W3Schools.com .

Design

Zde je design tohoto webu. Pokud chcete lepší vzhled, podívejte se na obrázek ve vysokém rozlišení, nebo ještě lépe, stáhněte si celý projekt zde.



Tento web jsem navrhl pro fiktivní společnost v Adobe Photoshop 2017. Pokud vás to zajímá, stáhněte si soubor .PSD ze stahování balíčku. Zde je to, co získáte v souboru Photoshopu:

Uvnitř PSD najdete všechny vrstvy seskupené, pojmenované a barevně označené:



Aby věci vypadaly správně, budete potřebovat nainstalováno několik písem. První je Písmo úžasné , používané pro všechny ikony. Další dvě písma jsou PT patka a Myriad Pro (součást Photoshopu). Pokud si nejste jisti, jak instalovat písma, přečtěte si našeho průvodce.

Nebojte se, pokud nemáte Adobe Photoshop , k pokračování to nepotřebuješ.



Počáteční kód

Nyní, když je design jasný, začněme s kódováním! Vytvořte nový soubor ve svém oblíbeném textovém editoru (používám Vznešený text 3 ). Uložit jako index.html . Můžete tomu říkat jak chcete, důvod, proč se mnoha stránkám říká index, je způsob fungování webových serverů. Výchozí konfigurace pro většinu serverů je obsluhovat stránku index.html, pokud není zadána žádná stránka.

Pokud se nechcete dozvědět podrobnosti, přejděte ke stažení celého kódu ze stahování.

Zde je kód, který potřebujete:





Noise Media


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





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


To dělá několik věcí:

  • Definuje minimální požadované HTML.
  • Definuje název stránky „Noise Media“
  • Zahrnuje jQuery hostované na Google CDN (co je CDN).
  • Zahrnuje písmo Awesome hostované na Google CDN.
  • Definuje a styl tag, do kterého napíšete CSS.
  • Definuje a skript tag, do kterého napíšete svůj JavaScript.

Uložte soubor znovu a otevřete jej ve webovém prohlížeči. Pravděpodobně si toho moc nevšimnete a rozhodně to zatím nebude vypadat jako web.

Všimněte si, jaký je název stránky Hluková média . To je definováno textem uvnitř titul štítek. Tento má být uvnitř hlava tagy.

windows nemohl automaticky detekovat nastavení proxy této sítě Google Chrome

Záhlaví

Pojďme vytvořit záhlaví. Jak to vypadá:

Začněme tím malým šedým kouskem nahoře. Je to světle šedá s mírnou tmavě šedou vespod. Zde je zblízka:

Přidejte tento HTML do souboru tělo štítek nahoře:

Když jste tady, pojďme to rozebrat. A div je jako kontejner, do kterého lze vložit další věci. Tyto „další věci“ mohou být více kontejnerů, textu, obrázků, opravdu všeho. Existují určitá omezení týkající se toho, co může jít do určitých značek, ale divy jsou poměrně obecné věci. To má id z horní lišta . To bude použito k jeho stylingu pomocí CSS a v případě potřeby bude zacíleno pomocí JavaScriptu. Ujistěte se, že máte pouze jeden prvek s konkrétním ID - měly by být jedinečné. Pokud chcete, aby více prvků mělo stejný název, použijte a třída místo toho - k tomu jsou určeny! Zde je CSS, který potřebujete k jeho stylu (umístěný nahoře uvnitř souboru styl štítek):

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šimněte si toho, jak je před jménem použit znak hash (#, hashtag, znak libry). To znamená, že prvek je ID. Pokud byste používali třídu, místo toho byste použili tečku (.). The html a tělo značky mají vycpávky a okraj nastaveny na nulu. Tím se zabrání nežádoucím problémům s mezerami.

Je čas přejít na logo a navbar. Než začnete, potřebujete kontejner, do kterého tento obsah vložíte. Udělejme z toho třídu (abyste jej mohli později znovu použít) a protože toto je ne responzivní web, který má šířku 900 pixelů.

HTML:


CSS:

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

Může být těžké říci, co se děje, dokud nedokončíte kód, takže může být užitečné přidat (dočasné) barevné pozadí, abyste viděli, co se děje:

background: red;

Nyní je čas vytvořit logo. Písmo úžasné je potřeba pro samotnou ikonu. Font Awesome je sada ikon zabalených jako vektorové písmo - úžasné! Počáteční kód výše již nastavil Font Awesome, takže je vše připraveno!

Přidejte tento HTML uvnitř the normální obal div:



CSS:

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

Nedělejte si starosti s tím, že ostatní písma nebudou odpovídat designu - později si to uklidíte. Pokud chcete použít jiné ikony, přejděte na Písmo Úžasné ikony stránku a poté změňte fa-snížení hlasitosti na název ikony, kterou chcete použít.

Při přechodu na navigační lištu použijete neuspořádaný seznam ( the ) pro tohle. Přidejte tento HTML po the logo-kontejner (ale stále uvnitř normální obal ):

The href slouží k propojení s jinými stránkami. Tento výukový web nemá žádné další stránky, ale můžete sem zadat název a cestu k souboru (je -li vyžadován), např. reviews.html . Ujistěte se, že jste to vložili do obou dvojitých uvozovek.

Tady 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číná příponou neuspořádaný seznam . Poté odstraní odrážky pomocí list-style-type: none; . Odkazy jsou od sebe trochu vzdálené a dají barvu, když na ně najedete myší. Malý šedý oddělovač je pravým okrajem každého prvku, který je pak odstraněn pro poslední prvek pomocí poslední odkaz třída. Jak to vypadá:

Vše, co pro tuto sekci zbylo, je červené vodorovné barevné zvýraznění. Přidejte tento HTML za normální obal :

A tady je CSS:

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

Tím je horní část hotová. Takto to vypadá - docela podobné designu, že?

Hlavní oblast obsahu

Nyní je čas přejít na hlavní oblast obsahu-takzvané „nad záhybem“. Tato část vypadá takto:

Toto je docela jednoduchá část, nějaký text vlevo s obrázkem vpravo. Tato oblast bude volně rozdělené na třetiny, zhruba přibližující se Zlatý řez .

K této části budete potřebovat ukázkový obrázek. Je součástí stahování. Tento obrázek je široký 670 pixelů a je z naší recenze Panasonic Lumix DMC-G80/G85.

Přidejte HTML po the stříkající barva živel:



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.

jak získat imei na iphone

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






Všimněte si, jak normální obal prvek se vrátil (to je radost z používání tříd). Možná si říkáte, proč ten obrázek ( obr ) tag se nezavře. Toto je samozavírací značka. Dopředu lomítko ( /> ) to naznačuje, protože ne vždy má smysl zavírat tag.

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

Nejdůležitějším atributem zde je box-sizing: border-box; . Tím je zajištěno, že prvky budou mít vždy šířku 40% nebo 60%. Výchozí (bez tohoto atributu) je zadaná šířka plus jakékoli odsazení, okraje a ohraničení. Třída obrázku ( představovaný obrázek ) má maximální šířka z 500 pixelů . Pokud zadáte pouze jeden rozměr (šířku nebo výšku) a druhý ponecháte prázdný, css změní velikost obrázku při zachování jeho poměru stran.

Oblast nabídky

Vytvořme oblast nabídky. Jak to vypadá:

Toto je další jednoduchá oblast. Obsahuje tmavě šedé pozadí s textem s bílým středem.

Přidejte tento HTML po předchozí normální obal :



makeuseof is the best website ever


Joe Coburn



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

Tady se toho moc neděje. Hlavní potřebnou úpravou je velikost - velikost písma, mezery atd. Takto to celé nyní vypadá - začíná to vypadat jako web!

Oblast ikon

Pokračujme dál - je téměř hotovo! Zde je další oblast, kterou je třeba vytvořit:

Tato část bude využívat několik tříd. Tyto tři ikony jsou většinou stejné, s výjimkou obsahu, takže dává smysl používat třídy namísto ID. Přidejte tento HTML po předchozí oblast citace :






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.



Tyto tři ikony jsou také Písmo-úžasné . HTML opět používá normální obal třída. Tady 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 se děje několik nových věcí. Zaoblené rohy nastavuje uživatel poloměr ohraničení: 200px; . Nastavením této hodnoty stejně jako šířky vznikne dokonalý kruh. Můžete to zmenšit, pokud dáváte přednost více čtvercům se zaoblenými rohy. Všimněte si, jak se akce vznášení aplikují na divs - není omezeno pouze na odkazy. Tato sekce nyní vypadá takto:

Poslední věc, kterou musíte udělat, je zápatí! To je opravdu jednoduché, protože je to jen šedá oblast bez textu. Přidejte tento HTML za oblasti ikon ' normální obal :

Tady je CSS:

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

Podívejte - opravdu jednoduché věci.

Přidejte nějaký Pizzazz

To je vše, kódování je hotovo! Věci můžete nechat tak, jak jsou, je to hotová webová stránka. Možná jste si ale všimli, že to nevypadá přesně jako design. Hlavním důvodem jsou použitá písma. Pojďme to vyřešit.

Písmo používané pro většinu titulů je Myriad Pro . S tím přichází Adobe Vytvořte cloud, ale není k dispozici jako webové písmo. Aktuálně používané písmo na webové stránce je Helvetica . Vypadá to dobře, takže to můžete nechat tak, jak to je PT Sans je k dispozici jako webové písmo. Písmo použité pro celý text je PT patka , který je k dispozici jako webové písmo.

Webfonty jsou jednoduchý proces. Stejně jako načítání nového písma do počítače mohou webové stránky načítat písma na vyžádání. Jedním z nejlepších způsobů, jak toho dosáhnout, je projít Fonty Google .

Chcete -li přepnout na lepší písma, přidejte tento CSS:

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

Nyní upravte prvky html a body tak, aby používaly nová písma:

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

Všimněte si, že prvek h3 není zahrnut v seznamu - toto bude výchozí nastavení PT-patka namísto PT-Sans .

Jako poslední kousek hezkosti použijme JavaScript pro procházení třemi různými vybranými obrázky. Budete potřebovat Obrázek_2 a Obrázek_3 pro tuto část a znovu je to volitelné. Web je v tuto chvíli zcela funkční bez této funkce. Jak to bude vypadat (zrychleně):

Upravte svůj HTML tak, aby obsahoval tři doporučené obrázky. Všimněte si, jak dva z nich mají třídu CSS skrytý . Každý obrázek dostal ID, aby JavaScript mohl cílit na každý z nich samostatně.





Zde je CSS potřebný ke skrytí extra doporučených obrázků:

.hidden {
display: none;
}

Nyní, když je o HTML a CSS postaráno, přepneme na JavaScript. Je užitečné porozumět Document Object Model (DOM) pro tuto část, ale není to požadavek.

Najít skript oblast v dolní části stránky:


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

Přidejte následující JavaScript do souboru skript štítek:

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

Děje se tu pár věcí. Kód je obsažen uvnitř $ (dokument) .ready () . To znamená, že se spustí, jakmile váš prohlížeč dokončí vykreslování stránky - to je dobrá praxe. The setInterval () Funkce se používá k volání changeImage () fungovat pravidelně v předem definovaném intervalu v milisekundách (1000 milisekund = 1 sekunda). Toto je uloženo v souboru čas proměnná. Toto můžete zvýšit nebo snížit, abyste zrychlili nebo zpomalili posouvání. Nakonec se pro zobrazení různých obrázků a sledování aktuálně zobrazeného obrázku používá jednoduchý příkaz case.

Kódovací výzva

A je to! Doufejme, že jste se během toho hodně naučili. Pokud máte chuť na výzvu a chcete své nově nalezené dovednosti vyzkoušet, proč nezkusit implementovat tyto úpravy:

Přidat zápatí: Přidejte do zápatí nějaký text (nápověda: můžete znovu použít normální obal a jedna třetina/dvě třetiny třídy.).

Vylepšete posouvání obrázku: Upravte JavaScript tak, aby animoval změny obrázku (nápověda: podívejte se na jQuery fadein a Animovaný ).

Implementujte více uvozovek: Upravte uvozovky a přepínejte mezi jedním z několika různých (nápověda: výchozí bod najdete v kódu pro posouvání obrázku).

Nastavení serveru: Nastavte server a odesílejte data mezi webovou stránkou a serverem (nápověda: přečtěte si našeho průvodce JSON a Python).

podívejte se, koho jste zablokovali na facebooku

Až budete s používáním JavaScriptu spokojeni, nebo pokud máte nějaké zkušenosti s Ruby, můžete si zkusit vytvořit web pomocí statického nástroje pro tvorbu webových stránek, jako je GatsbyJS nebo Jekyll.

Podíl Podíl tweet E-mailem Jak změnit vzhled a vzhled pracovní plochy Windows 10

Chcete vědět, jak vylepšit vzhled Windows 10? Pomocí těchto jednoduchých přizpůsobení si Windows 10 přizpůsobíte.

Číst dále Související témata
  • Programování
  • HTML
  • Webový design
  • CSS
O autorovi Joe Coburn(136 publikovaných článků)

Joe je absolventem informatiky na University of Lincoln, UK. Je profesionálním vývojářem softwaru, a když neletí drony nebo nepíše hudbu, často ho lze zastihnout při fotografování nebo produkci videí.

Více od Joe Coburn

Přihlaste se k odběru našeho zpravodaje

Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné elektronické knihy a exkluzivní nabídky!

Kliknutím sem se přihlásíte k odběru