January 18
Una pagina Web è costituito da due parti fondamentali: il contenuto e lo stile. Il codice HTML definisce il contenuto di un sito web, mentre i fogli di stile a cascata (CSS) dettano la modalità di visualizzazione del contenuto. CSS è spesso salvato in un documento CSS esterno, perché un documento CSS esterno può essere collegato a più documenti HTML --- può essere riutilizzato. Per creare una galleria Web foto usando i CSS, gli elementi HTML di base (la struttura) devono prima essere definiti prima di poter utilizzare i CSS per migliorare l'aspetto della galleria.
1 Disegnare uno schizzo di come si desidera la vostra galleria di immagini a guardare su un pezzo di carta. Includi la posizione dell'immagine sulla pagina, tutte le caratteristiche che si desidera includere nella tua galleria (ad esempio, le descrizioni delle foto) e altri elementi della pagina che non sono legati alla galleria (ad esempio, collegamenti di nuovo alla tua home page). Pianificazione di come si desidera guardare prima di iniziare a digitare il codice vi aiuterà a decidere ciò che si desidera in una galleria e si dà obiettivi di lavorare per la creazione di galleria.
2 Aprire un editor di testo come Blocco note o TextEdit. È inoltre possibile utilizzare un editor HTML, ma il semplice editor di testo che viene pre-installato con il computer è tutto ciò che ha realmente bisogno di creare un sito web. Fai clic su "Salva con nome" dal menu "File" e un nome al documento HTML "index.html".
3 Digitare gli elementi di base necessari per ogni pagina Web, tra cui "html", "testa" e "apertura del corpo" e chiusura tag come illustrato di seguito nel vostro editor di testo o HTML. I documenti HTML sono composti da etichette, che sono racchiuse tra parentesi angolari. Ad esempio, un tag di apertura "html" si presenta così: <html>. tag di chiusura comprendono una barra prima la parola: </ html> è un tag di chiusura "html". La "testa" e "corpo" tag devono andare tra l'apertura e chiusura tag "HTML" e il tag "testa" dovrebbe andare dopo i tag "body". Questa è la struttura di una pagina Web di base con alcuni elementi aggiuntivi (<p> crea paragrafi, <a> crea collegamenti e <img> include immagini):
<Html>
<Head>
<Title> My Web pagina </ title>
</ Head>
<Body>
<H1> Il mio primo titolo </ h1>
<P> Scrittura di testo in questa sezione per creare un paragrafo. </ P>
<a href="This"> http://www.example.com "> Questo è un link a una pagina di esempio sul web. </a>
</ Body>
</ Html>
4 Aggiungere alcune immagini per la pagina Web. Per fare questo, aggiungere il tag "img" completo con la sorgente del file ( "src"), larghezza, altezza e testo alternativo ( "alt"). Per esempio:
<Img width = "250" height = "200" alt = "il mio cane" />
Posizionare il tag nella sezione "corpo" del documento HTML. Aggiungi questo tag per ogni immagine aggiuntiva che si desidera includere nella tua galleria.
5 Aprire un nuovo documento in vostro editor di testo o HTML, il nome "style.css" e salvarlo nella stessa directory del documento HTML viene salvato. In alto, tipo: "@CHARSET" UTF8 ";"
6 Digitare "<link rel =" "type =" stylesheet text / css "href =" style.css "/>" nella sezione "testa" del documento HTML. Questo collega il nuovo foglio di stile "style.css" al tuo documento HTML.
7 Aggiungere elementi di stile alle immagini. Intorno il tag "img", includere apertura "div" e tag di chiusura e di tipo "class =" immagine "" in apertura "tag div". Ad esempio, digitare:
<Div class = "image">
<Img width = "250" height = "200" alt = "il mio cane" />
</ Div>
Questo selettore di classe, class = "immagine", fa riferimento al documento CSS per definire lo stile delle immagini nella tua galleria. Mettere nel tag "div" per definire lo stile di tutto ciò tra l'apertura e chiusura tag "div".
8 Definire lo stile della vostra galleria nel documento CSS utilizzando selettori di classe nel documento CSS che corrispondono con i selettori di classe nel documento HTML. Digitare il selettore di classe ".image" nel documento CSS per corrispondere con la "class =" immagine "" selettore di classe nel documento HTML. Poi, tra parentesi graffe, specificare lo stile e il posizionamento delle immagini. Ad esempio, per rimuovere il bordo blu ( "border: 0") dall'elemento, aggiungere un po 'di spazio intorno alle immagini ( "margin: 2px;") e galleggiare le immagini sul lato sinistro della pagina ( "float: left; "), digitare quanto segue:
.Immagine
{
margin: 2px;
border: 0;
height: auto;
width: auto;
float: left;
}
Per rimuovere il bordo blu dall'immagine, visualizzare le immagini una accanto all'altra e aggiungere ulteriore spazio intorno al immagini, tipo:
.image img
{
display: inline;
margin: 3px;
border: 0;
}