February 5
Durante la progettazione e la costruzione di una pagina di portafoglio, il vostro lavoro dovrebbe parlare per sé. Concentrarsi su uno stile pulito ed un un facile da navigare formato che non distrarre il visitatore. Tutto ciò che serve per creare un portafoglio è linguaggio HTML di base e CSS, con le immagini del vostro lavoro. Questo progetto fa per una buona pratica CSS perché il suo design semplice e ha ancora bisogno di un layout paio trucchi. Imparerete come per centrare il contenuto della pagina e creare un formato di griglia di stile per la visualizzazione di immagini con le informazioni.
1 Aprire Blocco note o un editor di codice e iniziare con un nuovo file, vuoto. Copia e incolla il seguente codice nel al file:
<! DOCTYPE html>
<Html>
<Head>
<title></title>
</ Head>
<Body>
<Body>
</ Html>
Digitare il nome del vostro portafoglio tra i "<title>" tag. Salvare il file con estensione HTML.
2 Aggiungere questa riga di codice sotto le "<title>" tag:
<Link rel = "stylesheet" href = "portfolio.css">
Dal momento che il codice HTML utilizza il DOCTYPE HTML5, non è necessario aggiungere un attributo "tipo" per questo tag. Creare un file vuoto e salvarlo come "portfolio.css".
3 Creare un DIV e assegnategli il nome ID di "avvolgere". All'interno che DIV, aggiungere un titolo e un testo al vostro portafoglio. Questo contenuto va dentro le "<body>" tag:
<Div id = "wrap">
<H1> Il mio catalogo </ h1>
<P> Alcuni dati su me stesso e il lavoro che faccio. </ P>
</ Div>
4 Mettere una serie di "<div>" tag sotto la fascetta pubblicitaria sul vostro portafoglio e assegnategli il nome ID di "portafoglio". Questo DIV portafoglio conterrà una galleria di immagini del tuo lavoro.
<Div id = "portafoglio">
</ Div>
5 Crea il tuo primo ingresso portafoglio. Dal momento che questo è un portafoglio, è necessario un anteprima del lavoro che viene presentato come un titolo e una frase o due su quello che hai fatto. Questo andrà tutto all'interno di un unico, galleggiava DIV:
<Div class = "oggetto">
<Img src = "path / to / thumbnail1.png" alt = "Il mio primo progetto">
<H3> Il mio primo progetto </ h3>
<P> Un progetto di design che ho fatto per il college. Questo è stato per un ente di beneficenza locale. </ P>
</ Div>
Copia e incolla l'esempio di cui sopra nel codice HTML, all'interno del DIV portafoglio. Modificare il percorso del file e il testo per abbinare il vostro primo progetto. Utilizzare questo come un modello per aggiungere altre voci alla pagina, ponendo ogni nuovo DIV dopo l'ultima.
6 Torna al file CSS e lo stile di sfondo e caratteri del portafoglio:
body {
sfondo: #eeeeee url ( 'path / to / background.png');
color: # 555555;
font-family: Georgia, serif;
font-size: 13px;
}
Nella "bassa" proprietà, il primo valore visualizzato è un colore esadecimale, seguito dal percorso URL per lo sfondo di un'immagine. Estrarre il sentiero URL, se non si vuole usare un'immagine. Il "colore" colori di proprietà del testo.
7 Stile di testo per i titoli:
h1, h2 {
font-family: Arial, sans-serif;
color: # 333333;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 18px;
}
Dal momento che i titoli di questo esempio entrambi utilizzano lo stesso tipo di carattere Arial grigio e scuro, è possibile concatenare "H1" e "H2" insieme a una virgola di separazione.
8 Impostare una larghezza per la DIV pellicola e farla centrare sulla pagina:
avvolgere {
width: 960px;
margin-left: auto;
margin-right: auto;
}
Questo codice, insieme al DIV involucro, centrerà tutti i contenuti della pagina. Una larghezza di 960 pixel è comune per i siti web e utilizzato in molti sistemi di griglia CSS, in particolare 960 Grid System.
9 Dare il portafoglio di larghezza e centrarlo pure; Diventerà centrato all'interno del DIV involucro:
portafoglio {
width: 900px;
margin-left: auto;
margin-right: auto;
}
10 Stile e galleggiare ogni voce portafoglio:
.articolo {
float: left;
margin-right: 10px;
margin-bottom: 20px;
}
portafoglio img {
border: 1px #bbbbbb solido;
padding: 5px;
sfondo: #FFFFFF;
}
Quando si galleggiare DIV all'interno di un DIV contenente, saranno riempire quanto più spazio orizzontale e poi continuare sulla riga successiva di seguito. Questo crea un effetto piastrelle. Dare ad ogni oggetto un diritto e margine inferiore per fornire spaziatura tra di loro.