Com crear un lloc web: per a principiants

Com crear un lloc web: per a principiants

Sempre has volgut fer un lloc web? Potser heu llegit alguns dels nostres codis HTML ( comprensió de l'HTML ) i tutorials CSS, però no sé utilitzar aquests idiomes en un projecte més gran.





Avui us guiaré pel procés de creació d’un lloc web complet des de zero. No us preocupeu si sembla una tasca difícil, us guiaré en cada pas del camí.



Produirà aquest lloc web mitjançant HTML, CSS i JavaScript amb un toc de jQuery (guia de jQuery). No faràs res realment bleeding edge, de manera que aquest codi hauria de funcionar bastant bé en la majoria dels navegadors moderns.





Si no esteu segur de cap CSS, mireu el Guia CSS a W3Schools.com .

El disseny

Aquí teniu el disseny d’aquest lloc web. Feu un cop d'ull a una imatge d'alta resolució si voleu un aspecte millor, o fins i tot millor, descarregueu el projecte complet aquí.



Vaig dissenyar aquest lloc web per a una empresa fictícia de Adobe Photoshop 2017. Si us interessa, assegureu-vos d’agafar el fitxer .PSD de la baixada del paquet. Això és el que teniu al fitxer de Photoshop:

Dins del PSD, trobareu totes les capes agrupades, anomenades i codificades per colors:



Necessitareu uns quants tipus de lletra instal·lats perquè les coses es vegin correctes. El primer és Tipus de lletra impressionant , utilitzat per a totes les icones. Les altres dues fonts són PT Serif i Myriad Pro (inclòs amb Photoshop). Si no esteu segur de com instal·lar tipus de lletra, llegiu la nostra guia.

No us preocupeu si no en teniu Adobe Photoshop , no el necessiteu per continuar.



Codi inicial

Ara que el disseny és clar, comencem a codificar. Creeu un fitxer nou al vostre editor de text preferit (estic fent servir Text sublim 3 ). Deseu-ho com a index.html . Podeu anomenar-ho com vulgueu, la raó per la qual moltes pàgines s’anomenen índex es deu al funcionament dels servidors web. La configuració predeterminada per a la majoria de servidors és publicar la pàgina index.html si no s’especifica cap pàgina.

Si no voleu obtenir més informació, aneu a agafar el codi complet de la baixada.

Aquí teniu el codi que necessiteu:





Noise Media


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





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


Això fa diverses coses:

  • Defineix l'HTML mínim necessari.
  • Defineix el títol d'una pàgina de 'Noise Media'
  • Inclou jQuery allotjat a CDN de Google (què és un CDN).
  • Inclou Font Awesome allotjat a CDN de Google.
  • Defineix a estil per escriure el vostre CSS.
  • Defineix a guió per escriure el vostre JavaScript.

Torneu a desar el fitxer i obriu-lo al navegador web. Probablement no en notareu gaire, i segur que encara no semblarà un lloc web.

Fixeu-vos en com és el títol de la pàgina Mitjans de soroll . Això es defineix pel text dins del fitxer títol etiqueta. Això té estar dins del cap etiquetes.

quantes fotos poden contenir 32 GB

La capçalera

Creem la capçalera. Això és el que sembla:

Comencem per aquesta mica de gris a la part superior. És d’un gris clar amb un lleuger gris fosc a sota. Aquí teniu un primer pla:

Afegiu aquest HTML dins del fitxer cos etiqueta a la part superior:

Mentre estigueu aquí, desglossem això. A div és com un contenidor per posar-hi altres coses. Aquest 'altre material' pot ser més contenidors, text, imatges i qualsevol cosa realment. Hi ha algunes restriccions sobre el que pot incloure determinades etiquetes, però els divs són coses bastant genèriques. Té un identificador de barra superior . Això s'utilitzarà per dissenyar-lo amb CSS i orientar-lo amb JavaScript si cal. Assegureu-vos que només teniu un element amb un identificador concret: haurien de ser únics. Si voleu que diversos elements tinguin el mateix nom, utilitzeu un fitxer classe en canvi, és per a què estan dissenyats. Aquí teniu el CSS que necessiteu per donar-li estil (posat a la part superior del vostre fitxer estil etiqueta):

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

Fixeu-vos com s’utilitza el signe hash (#, hashtag, lliura) abans que el nom. Això significa que l'element és un identificador. Si utilitzeu una classe a, en lloc d'utilitzar un punt (.). El html i cos les etiquetes tenen el farciment i el marge ajustats a zero. D’aquesta manera s’eviten problemes d’espaiat no desitjat.

És hora de passar al logotip i a la barra de navegació. Abans de començar, necessiteu un contenidor per incloure aquest contingut. Fem que sigui una classe (perquè pugueu tornar a utilitzar-lo més endavant), i tal com és no un lloc web sensible, que tingui una amplada de 900 píxels.

HTML:


CSS:

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

Pot ser difícil saber què passa fins que finalitzeu el codi, de manera que pot ser útil afegir un fons (temporal) de colors per veure què passa:

background: red;

Ara és hora de crear el logotip. Tipus de lletra impressionant és necessari per a la pròpia icona. Font Awesome és un conjunt d'icones empaquetades com a tipus de lletra vectorial. El codi inicial anterior ja s'ha configurat Font Awesome, de manera que ja està a punt.

Afegiu aquest HTML dins el normal-embolcall div:



CSS:

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

No us preocupeu perquè els altres tipus de lletra no coincideixin amb el disseny; ho endureu més endavant. Si voleu utilitzar diferents icones, aneu a Icones de tipus de lletra impressionants pàgina i, a continuació, canvieu fa-baixar el volum al nom de la icona que voleu utilitzar.

En passar a la barra de navegació, utilitzarà una llista sense ordenar ( el ) per això. Afegiu aquest HTML després el logotip-contenidor (però encara dins de normal-embolcall ):

El href s’utilitza per enllaçar a altres pàgines. Aquest lloc web de tutorial no té cap altra pàgina, però podeu posar el nom i la ruta del fitxer (si cal) aquí, per exemple. reviews.html . Assegureu-vos de posar-ho dins de les cometes dobles.

Aquí teniu el 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;
}

Aquest CSS comença amb un fitxer llista no ordenada . A continuació, elimina els punts vius mitjançant list-style-type: cap; . Els enllaços es distancien una mica i es donen color quan passeu el ratolí per sobre d’ells. El petit divisor gris és un marge dret de cada element, que després s’elimina per a l’últim element mitjançant el fitxer últim enllaç classe. Això és el que sembla:

Només queda aquesta secció per ressaltar el color horitzontal vermell. Afegiu aquest HTML després de normal-embolcall :

I aquí teniu el CSS:

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

Aquesta és la secció superior feta. Això és el que sembla: força similar al disseny, oi?

Àrea de contingut principal

Ara és hora de passar per l’àrea de contingut principal: l’anomenat “per sobre del plec”. A continuació s’explica aquesta part:

Aquesta és una part força senzilla, un text de l'esquerra amb una imatge a la dreta. Aquesta zona serà vagament dividit en terços, aproximadament aproximadament Relació d'or .

Necessitareu la imatge de mostra per a aquesta part. S'inclou a la descàrrega. Aquesta imatge fa 670 px d’amplada i prové de la nostra revisió Panasonic Lumix DMC-G80 / G85.

Afegiu l'HTML després el 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.

El controlador Xbox One no funcionarà

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






Fixeu-vos en com funciona normal-embolcall element ha tornat (això és el plaer d'utilitzar classes). És possible que us pregunteu per què la imatge ( img ) l’etiqueta no es tanca. Aquesta és una etiqueta de tancament automàtic. La barra inclinada ( /> ) ho indica, ja que no sempre té sentit haver de tancar una etiqueta.

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

L’atribut més important aquí és box-sizing: border-box; . Això garanteix que els elements tinguin sempre un 40% o un 60% d’amplada. El valor per defecte (sense aquest atribut) és l'amplada especificada més qualsevol farciment, marges i vores. La classe d'imatges ( imatge destacada ) té amplada màx de 500 px . Si només especifiqueu una dimensió (una amplada o una alçada) i deixeu l’altra en blanc, css canviarà la mida de la imatge mantenint la seva relació d’aspecte.

Àrea de pressupost

Creem l'àrea de pressupost. Això és el que sembla:

Aquesta és una altra àrea senzilla. Conté un fons gris fosc, amb text centrat en blanc.

Afegiu aquest HTML després l'anterior normal-embolcall :



makeuseof is the best website ever


Joe Coburn



I després aquest 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;
}

Aquí no passa molt. La mida és el principal ajust necessari: mida de la lletra, espaiat, etc. Això és el que sembla ara: comença a semblar un lloc web.

Zona d'icones

Continuem pressionant, ja està gairebé acabat. Aquí teniu la següent àrea que cal crear:

Aquesta part utilitzarà diverses classes. Les tres icones són majoritàriament les mateixes, a excepció del contingut, de manera que té sentit utilitzar classes en lloc d’identificadors. Afegiu aquest HTML després l'anterior pressupost-àrea :






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.



Aquestes tres icones també ho són Tipus de lletra impressionant . L'HTML torna a utilitzar el fitxer normal-embolcall classe. Aquí teniu el 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;
}

Hi ha algunes novetats al CSS. Les cantonades arrodonides estan sent configurades per radi de la vora: 200 px; . Si definiu aquest valor igual que l'amplada, es obtindrà un cercle perfecte. Podeu reduir això si preferiu més d'un quadrat amb cantonades arrodonides. Tingueu en compte com s'apliquen les accions del cursor als divs; no es limita només als enllaços. A continuació s'explica aquesta secció:

L’últim que cal fer és el peu de pàgina! Això és realment senzill, ja que només és una zona gris sense text. Afegiu aquest HTML després de les àrees d'icones ' normal-embolcall :

Aquí teniu el CSS:

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

Veure, coses realment simples.

Afegiu una mica de Pizzazz

Ja està, la codificació està feta! Podeu deixar les coses tal com són, és una pàgina web acabada. És possible que us hàgiu adonat que no sembla exactament com el disseny. El motiu principal d'això són els tipus de lletra utilitzats. Ordenem-ho.

El tipus de lletra utilitzat per a la majoria de títols és Myriad Pro . Això ve amb Adobe Crea Cloud, però no està disponible com a font web. El tipus de lletra que s’utilitza actualment a la pàgina web és Helvetica . Sembla bé, de manera que podeu deixar-ho tal qual PT Sans està disponible com a font web. El tipus de lletra utilitzat per a tot el text és PT Serif , que està disponible com a font web.

Les fonts web són un procés senzill. Igual que carregar un tipus de lletra nou a l'ordinador, les pàgines web poden carregar tipus de lletra a petició. Una de les millors maneres de fer-ho és mitjançant Tipus de lletra de Google .

Afegiu aquest CSS per canviar a les millors fonts:

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

Ara modifiqueu els elements html i body per utilitzar els nous tipus de lletra:

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

Fixeu-vos que l'element h3 no està inclòs a la llista; PT-Serif en lloc de PT-Sans .

Com a últim aspecte de bonic, fem servir JavaScript per desplaçar-vos per tres imatges destacades diferents. Necessitarà Imatge_2 i Imatge_3 per a aquesta part, i de nou, és opcional. El lloc web és completament funcional en aquest moment sense aquesta característica. Això és el que tindrà (accelerat):

Modifiqueu l'HTML per incloure tres imatges destacades. Fixeu-vos en com dos d’aquests tenen una classe CSS amagat . A cada imatge se li ha proporcionat un identificador perquè JavaScript pugui orientar-se de manera independent a cadascuna d'elles.





Aquí teniu el CSS necessari per amagar les imatges destacades addicionals:

.hidden {
display: none;
}

Ara que ja s’encarrega l’HTML i CSS, passem a JavaScript. És útil entendre el Document Object Model (DOM) per a aquesta part, però no és un requisit.

Troba el guió a la part inferior de la pàgina:


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

Afegiu el següent JavaScript dins del fitxer guió etiqueta:

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

Aquí hi ha algunes coses que passen. El codi es troba dins $ (document) .ready () . Això vol dir que s’executarà quan el navegador hagi acabat de representar la pàgina; és una bona pràctica. El setInterval () s'utilitza per cridar a changeImage () funcionen regularment a un interval predefinit en mil·lisegons (1000 mil·lisegons = 1 segon). Això s'emmagatzema a temps variable. Podeu augmentar-lo o disminuir-lo per accelerar o alentir el desplaçament. Finalment, s’utilitza una declaració de cas simple per mostrar diferents imatges i fer un seguiment de la imatge que es mostra actualment.

Desafiament de codificació

Això és! Esperem que hagueu après molt durant el procés. Si us ve de gust un repte i voleu posar a prova les vostres noves habilitats trobades, per què no intenteu implementar aquestes modificacions:

Afegiu un peu de pàgina: Afegiu text al peu de pàgina (suggeriment: podeu tornar a utilitzar el fitxer normal-embolcall i un terç / dos terços classes.).

Milloreu el desplaçament de la imatge: Modifiqueu el JavaScript per animar els canvis d'imatge (suggeriment: mireu jQuery esvair-se en i Animat ).

Implementar diverses cometes: Modifiqueu les cometes per canviar entre una de diverses (suggeriment: mireu el codi de desplaçament de la imatge per obtenir un punt de partida).

Configureu un servidor: Configureu un servidor i envieu dades entre la pàgina web i el servidor (consell: llegiu la nostra guia de JSON i Python).

12 pro màxim vs 12 professionals

Quan estigueu còmode amb JavaScript o si teniu experiència amb Ruby, podeu provar de crear un lloc web amb un creador de llocs web estàtic com GatsbyJS o Jekyll.

Compartir Compartir Tweet Correu electrònic Com canviar l’aspecte del vostre escriptori Windows 10

Voleu saber com fer que Windows 10 es vegi millor? Utilitzeu aquestes senzilles personalitzacions per fer que Windows 10 sigui vostre.

Llegiu a continuació Temes relacionats
  • Programació
  • HTML
  • Web Design
  • CSS
Sobre l'autor Joe Coburn(136 articles publicats)

Joe és llicenciat en Informàtica per la Universitat de Lincoln, Regne Unit. És un desenvolupador de programari professional i, quan no fa volar drons ni escriu música, sovint se’l pot trobar fent fotos o produint vídeos.

Més de Joe Coburn

Subscriu-te al nostre butlletí

Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.

Feu clic aquí per subscriure-us