Come usare progetto con HTML 5

March 23

Come usare progetto con HTML 5


Blueprint è un framework CSS che pone le basi per il vostro nuovo sito web design. Il Programma offre un foglio di stile per il layout, la tipografia e le forme che è possibile personalizzare con il proprio carattere stili, colori ed effetti. Quando utilizzato in combinazione con HTML5 o un HTML5 "boilerplate", è possibile creare una pagina web formattato e altamente funzionale in poche ore. Per iniziare, è necessario scaricare entrambi i pacchetti dalle rispettive homepage: blueprintcss.org e html5boilerplate.com.

istruzione

1 Crea il tuo documento HTML o aprire il "index.html" che viene fornito con l'HTML5 Boilerplate e salvarlo in una nuova posizione che servirà come root del sito. Se si utilizza l'HTML5 Boilerplate, aprire il style.css e salvarlo nella stessa posizione come il nuovo file HTML, o creare un secondo nuovo file e salvarlo come style.css nella stessa posizione.

2 Aprire il file "screen.css" che si trova nella cartella "progetto" del Blueprint estratto. Se non si utilizza l'HTML5 Boilerplate, copiare il contenuto di questo file nel style.css. Se si utilizza il Boilerplate, individuare la classe ".small" intorno alla linea 68. Posizionare il cursore all'inizio di questa linea e trascinare verso il basso per evidenziarlo e tutto ciò che sotto di esso. Copiare il codice e incollarlo nel style.css sotto il commento "stili primarie" alla fine del documento.

3 Personalizzare gli stili con i font, i colori desiderati, immagini di sfondo o effetti. Per ottenere il massimo del Blueprint e il Boilerplate, si dovrebbe astenersi dal modificare le informazioni sullo stile originale (come ad esempio i margini.) Il Programma contiene 12 classi personalizzate che sono illustrate nella documentazione Blueprint. Per utilizzare queste classi, li si può aggiungere a qualsiasi tag nel documento HTML. Ad esempio, "<p class =" top ">" rimuove qualsiasi imbottitura o il margine al di sopra del punto che possono essere definite con gli stili di paragrafo di default nel Blueprint.

4 Collega il tuo foglio di stile al documento HTML, se non si utilizza il Boilerplate. Per fare questo, aggiungere la seguente riga di codice sopra la </ head> tag, e soprattutto i tag <script>:

<Link rel = "stylesheet" href = "style.css? V = 2">

Si potrebbe anche voler copiare il "ie.css" e "print.css" dalla cartella Blueprint alla cartella sito web e il loro collegamento pure. Entrambi questi fogli di stile contengono classi speciali per aiutare a formattare la tua pagina web per i browser meno recenti e stampanti. Per creare un collegamento loro, utilizzare il tag link di cui sopra:

<Link rel = "stylesheet" href = "print.css">

<Link rel = "stylesheet" href = "ie.css">

5 Copiare i file rimanenti dalla boilerplate HTML5 alla cartella sito web e iniziare a costruire il tuo nuovo sito. Se non si utilizza la Boilerplate, è necessario creare cartelle separate per le immagini e file JavaScript. Per aggiungere classi personalizzate e selettori per i tag HTML5, aggiungerli al fondo del documento style.css e fare attenzione a non ripetere i selettori che già esistono.

Consigli e avvertenze

  • Se si memorizzano i tuoi fogli di stile in una cartella separata "css", assicurarsi di regolare i percorsi in modo appropriato nei tag di collegamento.
  • Usare sempre il CSS forniti dal HTML5 Boilerplate in precedenza sulla Blueprint quando si utilizza le due cose insieme. E 'importante che si copia solo le personalizzati stili, forme e griglia dal Blueprint.