Durante la progettazione e creazione di una pagina del portfolio, il vostro lavoro dovrebbe parlare per sé. Concentrarsi su stile pulito e un un facile da navigare formato che non distrarre il visitatore. Tutto ciò che serve per creare un portfolio è qualche base HTML e CSS, con screenshot del vostro lavoro. Questo progetto fa per una buona pratica CSS, perché il suo design semplice ha ancora bisogno di un paio di trucchi layout. Imparerete come centrare il contenuto della pagina e creare un formato di stile di griglia per la visualizzazione di immagini con le informazioni.

Istruzioni

Creare file e HTML

1

Aprire Blocco note o un editor di codice e iniziare con un nuovo file vuoto. Copiare e incollare il codice seguente nel file:

<! DOCTYPE html >
< html >
< head >

<title></title>

< / head >
< corpo >
< corpo >
< / html >

Digitare il nome del vostro portafoglio tra i tag "< title >". Salvare il file con estensione HTML.

2

Aggiungere questa riga di codice riportato di seguito il tag "< title >":

< link rel = "stylesheet" href="portfolio.css" >

Poiché il tuo HTML utilizza il doctype HTML5, non è necessario aggiungere un attributo "type" a questo tag. Creare un file vuoto e salvarlo come "portfolio.css".

3

Creare un DIV e assegnargli un nome ID di "avvolgere". All'interno di quel DIV, aggiungere un titolo e un testo per il vostro portafoglio. Questo contenuto va dentro il tag "< body >":

< div id = "wrap" >
< h1 > My Portfolio < / h1 >
< p > alcune informazioni su di me e il lavoro che io fare </p >
< / div >

4

Posizionare un insieme di tag "< div >" sotto il blurb circa il vostro portafoglio e dargli un nome identificativo del "portfolio". Questo portfolio DIV conterrà una galleria di immagini del vostro lavoro.

< div id = "portfolio" >
< / div >

5

Creare la prima voce di portfolio. Poiché si tratta di un portafoglio, è necessario una miniatura del lavoro viene presentato così come un titolo e una frase o due su quello che hai fatto. Tutto questo andrà all'interno di un singolo, fatto galleggiare DIV:

< div class = "item" >
< img src="path/to/thumbnail1.png" alt = "Il mio primo progetto" >
< h3 > My primo progetto < / h3 >
< p > un design progetto che ho fatto per il college. Questo è stato per una carità locale. </p >
< / div >

Copiare e incollare l'esempio di cui sopra nel codice HTML, all'interno del portfolio DIV. cambia il percorso del file e il testo per abbinare il vostro primo progetto. Utilizzare questo come un modello per aggiungere più voci alla pagina, ponendo ogni nuovo DIV dopo l'ultimo.

Stile del portafoglio con i CSS

6

Tornare al file CSS e stile del portafoglio sfondo e font:

corpo () {
Priorità bassa: #eeeeee url('path/to/background.png');
colore: #555555;
font-family: Georgia, serif;
font-size: 13px;
}

Nella proprietà "background", il primo valore mostrato è un colore esadecimale, seguito dal percorso URL a un'immagine di sfondo. Estrarre il percorso URL se non si desidera utilizzare un'immagine. La proprietà "color" i colori del testo.

7

Testo di stile per le intestazioni:

H1, h2 {
font-family: Arial, sans-serif;
Color: #333333;
}
H1 {
dimensione del carattere: 36px;
}
H2 {
dimensione del carattere: 18px;
}

Poiché le intestazioni in questo esempio entrambi utilizzano lo stesso carattere Arial e grigio scuro, è possibile concatenare "h1" e "h2" insieme a una virgola di separazione.

8

Impostare una larghezza per il wrap DIV e renderlo centrare nella pagina:

wrap () {

Larghezza: 960px;
margine sinistro: auto;
margine destro: auto;
}

Questo codice, insieme con l'involucro di DIV, avrà al centro tutto il contenuto della pagina. Una larghezza di 960 pixel è comune per i siti e utilizzato in molti sistemi di griglia CSS, in particolare 960 Grid System.

9

Dare il portafoglio una larghezza e centrarlo pure; esso sarà diventato centrata entro l'involucro DIV:

portfolio () {

Larghezza: 900px;
margine sinistro: auto;
margine destro: auto;
}

10

Stile e galleggiante ogni voce portfolio:

.Item () {
float: left;
margine destro: 10px;
margin-bottom: 20px;
}

portfolio img {

border: 1px solid #bbbbbb;
padding: 5px;
Priorità bassa: #ffffff;
}

Quando fluttuate div all'interno di un DIV contenitore, essi saranno riempire come spazio molto orizzontale e quindi continuare sulla riga successiva qui sotto. Questo crea un effetto di piastrellatura. Assegnare ogni elemento un margine destro e inferiore per ottenere una spaziatura tra di loro.

Consigli & Avvertenze

• Questo portafoglio si vedrà meglio se fate ogni miniatura della stessa dimensione.