Il Blueprint CSS è un incredibilmente utili starter kit per Web designer e principianti. Esso fornisce diversi fogli di stile, documentazione di supporto e un paio modelli HTML per farti andare. Tuttavia, il progetto non è molto uso per sé. Prima che la pagina Web può veramente prendere forma, è necessario personalizzare sia il codice HTML e fogli di stile CSS. Se sei un principiante, è difficile sapere da dove cominciare, come il progetto contiene molti diversi file e cartelle.

Istruzioni

1

Individuare la cartella di kit di Blueprint ovunque si è estratto il disco rigido e aprirlo. Aprire il "CSS" nella cartella "Blueprint" in un editor HTML o testo. Questo file contiene tutti gli stili forniti dalla cianografia.

2

Aprire il documento HTML. Se non avete uno, una pagina di esempio si trova nella cartella template sotto "test > parti." Salvare entrambi i file in una nuova posizione, ad esempio una nuova cartella sul desktop che si può chiamare "Blueprint Tutorial".

3

Collegare il foglio di stile al documento HTML aggiungendo un tag "link" nella parte superiore del documento, appena sotto il tag "< title >". Se si utilizza il documento di Sample, questo tag sarà già lì, ma sarà necessario correggere il percorso. Il tag dovrebbe assomigliare a questo:

< link rel = "stylesheet" href="screen.css" type = "text/css" media = "schermo, proiezione" >

4

Tornare al file CSS. Scorri fino alla sezione "tipografia css", che è dove avviene la maggior parte delle personalizzazioni. Individuare il selettore "corpo". Questo può essere il primo stile che si desidera personalizzare, come controlla gli stili predefiniti per sfondo e font per l'intera pagina Web. Ad esempio, modificare l'attributo di "font-size" per "14px" anziché il valore corrente. Se una dimensione del carattere non è definito per un selettore specificato, verrà utilizzato questo valore predefinito. È inoltre possibile aggiungere un colore di sfondo come "sfondo: #000000", che renderà la vostra priorità bassa nera.

5

Modificare le dimensioni di intestazione H1-H6 successivamente, se lo si desidera. Essi sono attualmente impostati su "ems" nel Blueprint e dovrebbe rimanere in quel modo. L'unità "em" dice al browser di scala del tipo di carattere un importo specifico superiore o inferiore a vostra dimensione base di 14px, che è uguale a un valore di em di 1.0.

6

Trovare la "a" e "un: hover" selettori sotto le intestazioni e impostare il colore del link desiderato. Questo colore del collegamento sarà il valore predefinito per la tua pagina web se non si imposta un colore specifico per un elemento utilizzando una dichiarazione di classe più tardi.

7

Continuare a costruire la tua pagina Web e applicando le classi e selettori dal progetto ai tuoi elementi di design. Si possono visualizzare in anteprima il tuo HTML in strumento di modifica o il browser Web e regolare di conseguenza ogni elemento. Utilizzando uno strumento come Opera Ispeziona elemento o Firebug per Firefox vi permetterà di selezionare una parte specifica della pagina Web e visualizzare il CSS associato, che lo rende più facile da individuare e modificare nel documento CSS.

Consigli & Avvertenze

• Utilizzare la libreria di riferimento disponibile sul sito Web dell'autore per ottenere una rapida comprensione degli stili disponibili nel Blueprint. Sapendo quali elementi gli stili appartengono a li renderà molto più facile da personalizzare successivamente.
• Aggiungere ulteriori selettori e gli stili alla parte inferiore del documento, quindi sono facili da trovare.
• Se si sta creando un modello per l'utilizzo con un framework CMS come Drupal o Wordpress, modificare il nome del file di "CSS" al "Style. css".