Home-theater-designers
Mindig is weboldalt akart készíteni? Talán olvastál néhány HTML -t ( a HTML megértése ) és CSS oktatóanyagok, de nem tudom, hogyan kell ezeket a nyelveket használni egy nagyobb projektben.
Ma végigvezetem Önt a teljes weboldal készítésének folyamatán a semmiből. Ne aggódjon, ha ez nehéz feladatnak tűnik, minden lépésen végigvezetem.
Ezt a webhelyet HTML, CSS és JavaScript használatával hozza létre, jQuery érintésével (jQuery útmutató). Nem fogsz csinálni semmit igazán vérző szélű, ezért ennek a kódnak a legtöbb modern böngészőben meglehetősen jól kell működnie.
Ha nem biztos valamelyik CSS -ben, nézze meg a CSS útmutató nál nél W3Schools.com .
A dizájn
Itt van a weboldal kialakítása. Nézzen meg egy nagy felbontású képet, ha jobb megjelenést szeretne, vagy még jobbat szeretne, töltse le a teljes projektet itt.
Ezt a weboldalt egy kitalált cégnek terveztem Adobe Photoshop 2017. Ha érdekel, mindenképpen ragadd meg a .PSD fájlt a csomag letöltéséből. A Photoshop fájl a következőket tartalmazza:
A PSD -n belül az összes réteget csoportosítva, elnevezve és színkóddal találja:
A helyes megjelenés érdekében telepítenie kell néhány betűtípust. Az első az Fantasztikus betűtípus , az összes ikonra használják. A másik két betűtípus az PT Serif és Myriad Pro (a Photoshop része). Ha nem biztos a betűtípusok telepítésében, olvassa el útmutatónkat.
Ne aggódjon, ha nincs Adobe Photoshop , nincs rá szüksége a folytatáshoz.
Kezdeti kód
Most, hogy a design világos, kezdjük el a kódolást! Hozzon létre egy új fájlt a kedvenc szövegszerkesztőjében (én használom Magasztos szöveg 3 ). Mentse ezt másként index.html . Nevezheti ezt bárminek, ami tetszik, ezért sok oldalt indexnek neveznek a webszerverek működésének köszönhetően. A kiszolgálók többségének alapértelmezett konfigurációja az index.html oldal megjelenítése, ha nincs megadva oldal.
Ha nem szeretné megtudni a részleteket, menjen, és szerezze be a letöltés teljes kódját.
Itt van a szükséges kód:
Noise Media
/* CSS goes here, at the top of the page */
/* JavaScript goes here, at the bottom of the page */
Ez több dolgot tesz:
- Megadja a minimálisan szükséges HTML -t.
- Megadja a „Zajos média” oldalcímét
- Tartalmazza a Google CDN -en tárolt jQuery -t (mi az a CDN).
- Tartalmazza a Font Awesome szolgáltatást a Google CDN -en.
- Meghatározza a stílus címkét a CSS beírásához.
- Meghatározza a forgatókönyv címke a JavaScript beírásához.
Mentse el újra a fájlt, és nyissa meg a webböngészőben. Valószínűleg nem fog sokat észrevenni, és még biztosan nem fog úgy kinézni, mint egy webhely.
Figyeld meg, milyen az oldal címe Noise Media . Ezt a cím címke. Ez van belül lenni fej címkék.
Hogyan lehet ellenőrizni a wifi jelszót androidon
A fejléc
Hozzuk létre a fejlécet. Ez így néz ki:
Kezdjük azzal a kis szürke színnel a tetején. Világosszürke, alatta enyhén sötétszürke. Itt egy közelkép:
Adja hozzá ezt a HTML -t a test címke a tetején:
Míg itt vagy, bontsuk le ezt. A div olyan, mint egy tartály, amibe más dolgokat helyezhet. Ez az „egyéb cucc” lehet több tárolóedény, szöveg, kép vagy bármi. Vannak bizonyos korlátozások arra vonatkozóan, hogy mi kerülhet bizonyos címkékbe, de a div -ek meglehetősen általános dolgok. Van egy id nak,-nek legjobb bár . Ezt használjuk a CSS formázásához, és szükség esetén JavaScripthez célozzuk. Győződjön meg arról, hogy csak egy eleme van egy adott azonosítóval - egyedinek kell lenniük. Ha azt szeretné, hogy több elemnek ugyanaz legyen a neve, használja a osztály helyette - erre tervezték őket! Itt van a CSS, amelyet meg kell formáznia (tegye a tetején belül stílus címke):
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;
}Figyelje meg, hogyan használják a hash jelet (#, hashtag, font jel) a név előtt. Ez azt jelenti, hogy az elem azonosító. Ha osztályt használt, helyette pontot (.) Használjon. Az html és test a címkék kitöltése és margója nullára van állítva. Ez megakadályozza a nem kívánt távközlési problémákat.
Itt az ideje, hogy továbblépjünk a logóra és a navigációs sávra. Mielőtt elkezdené, szüksége van egy tárolóra a tartalom elhelyezéséhez. Tegyük ezt osztálytá (hogy később újra felhasználhassa), és ez így van nem reszponzív webhely, legyen 900 képpont széles.
HTML:
CSS:
.normal-wrapper {
width: 900px;
margin: 0 auto;
padding: 15px 40px;
background: red;
overflow: auto;
}Nehéz lehet megmondani, hogy mi történik, amíg be nem fejezi a kódot, ezért hasznos lehet egy (ideiglenes) színes háttér hozzáadása a történtek megtekintéséhez:
background: red;Itt az ideje létrehozni a logót. Fantasztikus betűtípus magához az ikonhoz szükséges. A Font Awesome ikonkészlet vektoros betűtípusként csomagolva - fantasztikus! A fenti kezdeti kód már félelmetes betűtípust állított be, így minden készen áll a használatra!
Add hozzá ezt a HTML -t belül az normál csomagoló div:
CSS:
.logo-icon {
color: #000000;
font-size: 60pt;
float: left;
}
h1 {
float: left;
margin: 21px 0 0 25px;
}Ne aggódjon amiatt, hogy a többi betűtípus nem felel meg a dizájnnak - a későbbiekben ezt rendbe teszi. Ha különböző ikonokat szeretne használni, menjen tovább a Félelmetes betűtípusok oldalt, majd módosítsa fa-hangerő le a használni kívánt ikon nevére.
A navigációs sávra lépve rendezetlen listát fog használni ( az ) ezért. Add hozzá ezt a HTML -t után az logó-konténer (de még mindig benne normál csomagoló ):
Az href más oldalakra mutató linkekhez használható. Ez a bemutató weboldal nem tartalmaz más oldalakat, de ide teheti a nevet és a fájl elérési útját (ha szükséges), pl. reviews.html . Ügyeljen arra, hogy ezt írja be mindkét idézőjelbe.
Itt a 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;
}Ez a CSS an -nal kezdődik rendezetlen lista . Ezután a segítségével eltávolítja a pontjeleket list-style-type: nincs; . A linkek kissé távol vannak egymástól, és színt kapnak, ha az egérmutatót föléjük viszi. A kis szürke elválasztó jobb oldali szegély minden elemen, amelyet azután eltávolít az utolsó elemhez a utolsó link osztály. Ez így néz ki:
Ebben a szakaszban már csak a piros vízszintes szín kiemelés van hátra. Adja hozzá ezt a HTML -t a normál csomagoló :
És itt a CSS:
#top-color-splash {
width: 100%;
height: 4px;
background: #EB6361;
}Ez a felső rész elkészült. Így néz ki - elég hasonló a dizájnhoz?
Fő tartalomterület
Itt az ideje, hogy továbblépjünk a fő tartalmi területen-az úgynevezett „hajtás fölött”. Így néz ki ez a rész:
Ez egy meglehetősen egyszerű rész, néhány szöveg a bal oldalon, kép a jobb oldalon. Ez a terület lesz lazán harmadokra osztva, nagyjából közelítve a Aranymetszés .
Szüksége lesz a mintaképre ehhez a részhez. A letöltésben benne van. Ez a kép 670 képpont széles, és a Panasonic Lumix DMC-G80/G85 áttekintésünkből származik.
Adja hozzá a HTML -t után az top-color-splash elem:
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.
a távoli asztal nem találja a számítógépet
Alternatively, check out our review of the Panasonic G80 shown on the right!
Figyelje meg, hogyan normál csomagoló elem visszatért (ez az osztályok használatának öröme). Lehet, hogy kíváncsi, hogy miért a kép ( img ) címke nem záródik be. Ez egy önzáró címke. Az előrevágás ( /> ) ezt jelzi, mivel nem mindig van értelme a címke bezárásának.
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 */
}A legfontosabb tulajdonság itt van doboz méretezése: border-box; . Ez biztosítja, hogy az elemek szélessége mindig 40% vagy 60% legyen. Az alapértelmezett (ezen attribútum nélkül) a megadott szélesség, valamint minden kitöltés, margó és szegély. A képosztály ( Kiemelt kép ) van egy maximális szélesség nak,-nek 500 képpont . Ha csak az egyik dimenziót (szélességet vagy magasságot) adja meg, a másikat üresen hagyja, a css átméretezi a képet, miközben megtartja a képarányt.
Idézet terület
Hozzuk létre az idézetterületet. Ez így néz ki:
Ez egy másik egyszerű terület. Sötét szürke hátteret tartalmaz, fehér középre helyezett szöveggel.
Add hozzá ezt a HTML -t után az előző normál csomagoló :
makeuseof is the best website ever
Joe Coburn
És akkor ez a 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;
}Itt nem sok minden történik. A méretezés a fő szükséges kiigazítás - betűméret, távolság, stb. Így néz ki most az egész - kezd egy weboldalra hasonlítani!
Ikonterület
Folytassuk a nyomást - majdnem kész! Íme a következő terület, amelyet létre kell hozni:
Ez a rész több osztályt fog használni. A három ikon többnyire ugyanaz, kivéve a tartalmat, ezért van értelme osztályokat használni az azonosítók helyett. Add hozzá ezt a HTML -t után az előző idézet-terület :
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.
Ez a három ikon is Font-Awesome . A HTML ismét a normál csomagoló osztály. Itt a 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;
}Néhány új dolog történik a CSS -ben. A lekerekített sarkok beállítása folyamatban van határ-sugár: 200 képpont; . Ha ezt az értéket a szélességgel azonos módon állítja be, akkor tökéletes kör lesz. Ezt csökkentheti, ha inkább egy lekerekített sarkú négyzetet szeretne. Figyelje meg, hogyan alkalmazzák a lebegési műveleteket a div -ekre - ez nem korlátozódik csak a linkekre. Ez a szakasz most így néz ki:
A lábléc
Az utolsó tennivaló a lábléc! Ez nagyon egyszerű, mivel csak szürke terület, szöveg nélkül. Adja hozzá ezt a HTML -t az ikonterületek után ” normál csomagoló :
Itt a CSS:
#footer {
width: 100%;
background: #F1F1F1; /* light gray */
border-top: 1px solid #D4D4D4; /* dark gray 'topline' */
height: 150px;
}Lásd - igazán egyszerű dolgok.
Adjon hozzá egy kis Pizzát
Ennyi, a kódolás kész! Teljesen hagyhatja a dolgokat úgy, ahogy vannak, ez egy kész weboldal. Lehet, hogy észrevette, hogy nem látszik pontosan mint a dizájn. Ennek fő oka a használt betűtípusok. Ezt rendezzük el.
A legtöbb címben használt betűtípus az Myriad Pro . Ez jár Vályogtégla Hozzon létre felhőt, de nem áll rendelkezésre webfontként. A weboldalon jelenleg használt betűtípus a Helvetica . Ez jól néz ki, ezért hagyhatja úgy, ahogy van PT Sans webfontként érhető el. Az összes szöveg betűtípusa az PT Serif , amely webfontként érhető el.
A webfontok egyszerű folyamat. Csakúgy, mint egy új betűtípus betöltése a számítógépre, a weboldalak is betölthetnek betűtípusokat igény szerint. Ennek egyik legjobb módja az Google betűtípusok .
Adja hozzá ezt a CSS -t a jobb betűtípusok használatához:
@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';
}Most módosítsa a html és a törzs elemeit az új betűtípusok használatához:
font-family: 'PT Serif', 'Helvetica', 'Arial';Figyelje meg, hogy a h3 elem nem szerepel a listában - ez alapértelmezés szerint PT-Serif ahelyett PT-Sans .
A szépség utolsó részeként használjunk JavaScriptet három különböző kiemelt kép görgetéséhez. Szükséged lesz Kép_2 és Kép_3 ennél a résznél, és ismét, ez nem kötelező. A weboldal ezen a ponton teljesen működőképes ezen funkció nélkül. Így fog kinézni (felgyorsítva):
Módosítsa a HTML -t, hogy három kiemelt képet tartalmazzon. Figyelje meg, hogy ezek közül kettőnek van CSS osztálya rejtett . Minden kép azonosítót kapott, így a JavaScript mindegyiket külön megcélozhatja.
Íme a CSS, amelyre szükség van a kiemelt képek elrejtéséhez:
.hidden {
display: none;
}Most, hogy a HTML -re és a CSS -re vigyázunk, térjünk át a JavaScriptre. Hasznos megérteni a dokumentum objektum modelljét (DOM) ehhez a részhez, de ez nem követelmény.
Találd meg forgatókönyv terület az oldal alján:
/* JavaScript goes here, at the bottom of the page */
Adja hozzá a következő JavaScriptet a forgatókönyv címke:
/* 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;
}
}
});Itt történik néhány dolog. A kód benne van $ (dokumentum) .ready () . Ez azt jelenti, hogy akkor fog futni, amikor a böngészője befejezte az oldal megjelenítését - ez jó gyakorlat. Az setInterval () függvény a hívására szolgál changeImage () rendszeresen működik előre meghatározott időközönként ezredmásodpercben (1000 milliszekundum = 1 másodperc). Ezt a idő változó. Ezt növelheti vagy csökkentheti, hogy felgyorsítsa vagy lelassítsa a görgetést. Végezetül egy egyszerű esetmegjelenítést használnak a különböző képek megjelenítésére és az éppen megjelenített kép nyomon követésére.
Kódolási kihívás
Ez az! Remélhetőleg sokat tanult a folyamat során. Ha szeretne kihívást, és próbára szeretné tenni új készségeit, miért nem próbálja meg végrehajtani ezeket a módosításokat:
Lábléc hozzáadása: Adjon hozzá szöveget a lábléchez (tipp: újra használhatja a normál csomagoló és egyharmada/kétharmada osztályok.).
A kép görgetésének javítása: Módosítsa a JavaScriptet a képváltozások animálásához (tipp: nézze meg a jQuery -t fadein és Élénk ).
Több idézet végrehajtása: Módosítsa az idézeteket, hogy váltson a különböző ajánlatok közül (tipp: nézze meg a kép görgetési kódját kiindulópontként).
Szerver beállítása: Állítson be egy szervert, és küldjön adatokat a weboldal és a szerver között (tipp: olvassa el a JSON és a Python útmutatóját).
miért állt le a Google Play szolgáltatás?
Ha már kényelmesen használja a JavaScriptet, vagy ha van tapasztalata a Ruby -val, kipróbálhatja a webhely létrehozását egy statikus webhely -készítővel, például a GatsbyJS vagy a Jekyll segítségével.
Részvény Részvény Csipog Email Hogyan lehet megváltoztatni a Windows 10 asztal megjelenésétSzeretné tudni, hogyan teheti szebbé a Windows 10 -et? Használja ezeket az egyszerű testreszabásokat, hogy sajátjává tegye a Windows 10 rendszert.
Olvassa tovább Kapcsolódó témák- Programozás
- HTML
- Web Design
- CSS
Joe az Egyesült Királyságban, a Lincoln Egyetemen végzett informatikából. Professzionális szoftverfejlesztő, és amikor nem repül drónokkal és nem ír zenét, gyakran előfordul, hogy fényképeket készít vagy videókat készít.
Joe Coburn további alkotásaiIratkozzon fel hírlevelünkre
Csatlakozz hírlevelünkhöz, ahol technikai tippeket, értékeléseket, ingyenes e -könyveket és exkluzív ajánlatokat találsz!
Feliratkozáshoz kattintson ide