Passando da tabelle . (Parte 1 - Creazione di un layout) 24 ottobre 2008 da Brady Feiereisel · 3 Commenti 
Buzz questo post 
Digg this Post 
Reddit 
Stumble This Post
OK, ciò che saremo qui si sta realizzando il layout e la mappatura Photoshop fuori con i CSS - div tabelle, invece di HTML di default di Photoshop -. Al fine di avere successo in questo tutorial si deve già sapere il codice HTML, CSS e qualche esperienza è utile pure.
Consente di iniziare con le basi. Invece di usare html e utilizzando celle della tabella per tenere le nostre immagini di sfondo per formare il layout, useremo <div> 's, che può agire allo stesso modo, ma sono molto più facili da modificare e formato per ogni <div> saremo connessi un id ad esso, in modo che sa come sito per formattare la cella. Così il formato del codice html è ora id="idname <div here"> </ div>. Ora siamo arrivati a impostare i parametri per la cella che corrisponde a quel nome ID, questo va all'interno del tag <head>.
A partire it off, ho impostato il colore di sfondo e l'immagine. Per questo ho deciso di utilizzare
che si trova a http://urbanm.net/blog/bg.jpg, la codifica CSS per questo è
body (
background-image: url (http://urbanm.net/blog/bg.jpg);
background-repeat: repeat-x;
background-color: # 010066;
)
Che cosa sta facendo questa è l'impostazione ogni aspetto html che è stato codificato con <body> per avere l'immagine di sfondo ripetere se stesso in senso orizzontale fino a quando non riempie tutto il browser, e l'immagine di sfondo in modo che corrisponda al fondo del gradiente abbiamo messo a nostra immagine, in modo che abbia un trasferimento senza intoppi.
Si dovrebbe avere qualcosa di simile PRESENTE
Ora dobbiamo preoccupare il contenuto effettivo del sito. Io di solito tenere centro tutto allineati, in modo da avere al centro di allineare tutto all'interno del vostro elemento <body>. Puoi aggiungere <center> dopo <body>. Così ora il tuo corpo HTML dovrebbe essere simile alla seguente:
<body>
<center>
</ center>
</ body>
Il tempo di mettere il nostro banner sul sito. Dobbiamo creare la cella che conterrà il banner, tra ur <center> tag permette di entrare nella nostra prima cella inserendo un <div id="banner"> </ div> lì. Senza impostare i parametri per l'ID con l'etichetta "banner" non apparirà, quindi dobbiamo impostare il parametro di questa cella con i CSS. Io sarò con la seguente immagine come il mio banner.
# banner (
background-image: url (http://urbanm.net/blog/banner.png);
height: 200px;
width: 800px;
)
Ciò che il precedente è detto è che ogni oggetto html che ha l'etichetta ID di banner avrà l'immagine di sfondo di cui sopra, e si avrà anche l'altezza e la larghezza dell'immagine banner che capita di essere 200px da 800px. Il nostro sito è in ripresa adesso, dovrebbe essere simile a qualcosa di simile PRESENTE.
Ora io normalmente mettere la barra di navigazione, ma voglio discutere di questo passaggio nella parte 2 di questo tutorial.
Saltare la barra di navigazione, si passa alle caselle di contenuti che conterrà tutte le informazioni in nostro possesso. Quando si effettua la tua immagine, ti ricordi che tuo sarà splicing in 3 luoghi diversi, la parte superiore, che conterrà l'intestazione, per me, io sono un fan di bordi arrotondati. La giunzione 2 avrete sarà l'immagine di contenuti che saranno ripete verticalmente in modo da riempire lo spazio che avete compilato tutte le informazioni su. La giunzione 3 è il piè di pagina, ancora una volta, sono una fan dei bordi arrotondati. Ecco le tre immagini che ho usato per questa parte. Header - Contenuto Repeater - piè di pagina.
Quando tutto è messo insieme si forma questa casella. Ora dobbiamo impostare il codice HTML, così da consentire per le immagini a formare la casella correttamente. Saremo con quattro celle totale a formare la nostra casella di contenuto. Il primo dei quattro sta per tenere gli altri tre celle all'interno di esso. Lo scopo di questa cella, lei capirà più tardi con più comprensione, ma questo sarà essenzialmente permettono di cambiare gli stili di testo sulle varie pagine farete, se necessario. Così lascia avviare l'HTML, questo è il nuovo HTML.
<body>
<center>
id="banner"> <div </ div>
<div id="indexcontent">
id="header"> <div </ div>
id="contentrepeater"> <div </ div>
id="footer"> <div </ div>
</ div>
</ center>
</ body>
Ora abbiamo le cellule impostata come vogliamo, ma ora dobbiamo impostare i parametri id per ogni etichetta. Questo dovrebbe essere simile a questo.
# indexcontent (
display: block;
width: 600px;
)
# header indexcontent # (
height: 35px;
width: 600px;
background-image: url (http://urbanm.net/blog/header.png);
background-repeat: no-repeat;
)
indexcontent # # contentbg (
background-image: url (http://urbanm.net/blog/content.png);
background-repeat: repeat-y;
height: 150px;
width: 600px;
)
# footer indexcontent # (
background-image: url (http://urbanm.net/blog/footer.png);
background-repeat: no-repeat;
height: 37px;
width: 600px;
)
Whoa - che è molto da fare in un solo passo giusto? Lasciatemi spiegare che per voi e per aiutarvi.
A partire dal numero indexcontent, abbiamo impostato la larghezza a 600px che è quello che le mie immagini Contenuto della confezione sono. Noi non impostare l'altezza, in modo che possa espandere e comprimere a seconda della quantità di contenuto che hai nella tua cellule all'interno di esso. Abbiamo impostato la visualizzazione di bloccare, in modo che la cellula si espanderà per la corretta quantità di pixel per la sua altezza.
Poi abbiamo avuto la indexcontent # # header, le dimensioni sono impostate in modo che corrisponda alla dimensione dell'immagine e abbiamo l'immagine di sfondo impostato nella posizione corretta.
Di quello che abbiamo indexcontent # # contentbg, abbiamo corretto l'immagine selezionata come la nostra immagine di sfondo, e abbiamo bisogno di impostarlo a repeat-y, in modo che si ripete in verticale per adattarsi alle dimensioni della cella. Ho scelto 150px per la sua altezza, just so you guys può vedere l'effetto ripetizione, si potrebbe modificare questo per soddisfare tutti i contenuti che hai dentro.
Infine, abbiamo indexcontent # # footer, che è proprio la stessa intestazione.
Ormai si dovrebbe avere il layout di base istituito per voi a finire!
Stay tuned per la parte 2, per spiegare come rendere la barra di navigazione.
Commenti
3 Responses to "Going dalle tabelle di . (Parte 1 - Creazione di un layout) "
24 ottobre 2008 da Brady Feiereisel · 3 Commenti Buzz questo post Digg this Post Reddit Stumble This Post
OK, ciò che saremo qui si sta realizzando il layout e la mappatura Photoshop fuori con i CSS - div tabelle, invece di HTML di default di Photoshop -. Al fine di avere successo in questo tutorial si deve già sapere il codice HTML, CSS e qualche esperienza è utile pure.
Consente di iniziare con le basi. Invece di usare html e utilizzando celle della tabella per tenere le nostre immagini di sfondo per formare il layout, useremo <div> 's, che può agire allo stesso modo, ma sono molto più facili da modificare e formato per ogni <div> saremo connessi un id ad esso, in modo che sa come sito per formattare la cella. Così il formato del codice html è ora id="idname <div here"> </ div>. Ora siamo arrivati a impostare i parametri per la cella che corrisponde a quel nome ID, questo va all'interno del tag <head>.
A partire it off, ho impostato il colore di sfondo e l'immagine. Per questo ho deciso di utilizzare
che si trova a http://urbanm.net/blog/bg.jpg, la codifica CSS per questo è
body (
background-image: url (http://urbanm.net/blog/bg.jpg);
background-repeat: repeat-x;
background-color: # 010066;
)
Che cosa sta facendo questa è l'impostazione ogni aspetto html che è stato codificato con <body> per avere l'immagine di sfondo ripetere se stesso in senso orizzontale fino a quando non riempie tutto il browser, e l'immagine di sfondo in modo che corrisponda al fondo del gradiente abbiamo messo a nostra immagine, in modo che abbia un trasferimento senza intoppi.
Si dovrebbe avere qualcosa di simile PRESENTE
Ora dobbiamo preoccupare il contenuto effettivo del sito. Io di solito tenere centro tutto allineati, in modo da avere al centro di allineare tutto all'interno del vostro elemento <body>. Puoi aggiungere <center> dopo <body>. Così ora il tuo corpo HTML dovrebbe essere simile alla seguente:
<body>
<center>
</ center>
</ body>
Il tempo di mettere il nostro banner sul sito. Dobbiamo creare la cella che conterrà il banner, tra ur <center> tag permette di entrare nella nostra prima cella inserendo un <div id="banner"> </ div> lì. Senza impostare i parametri per l'ID con l'etichetta "banner" non apparirà, quindi dobbiamo impostare il parametro di questa cella con i CSS. Io sarò con la seguente immagine come il mio banner.
# banner (
background-image: url (http://urbanm.net/blog/banner.png);
height: 200px;
width: 800px;
)
Ciò che il precedente è detto è che ogni oggetto html che ha l'etichetta ID di banner avrà l'immagine di sfondo di cui sopra, e si avrà anche l'altezza e la larghezza dell'immagine banner che capita di essere 200px da 800px. Il nostro sito è in ripresa adesso, dovrebbe essere simile a qualcosa di simile PRESENTE.
Ora io normalmente mettere la barra di navigazione, ma voglio discutere di questo passaggio nella parte 2 di questo tutorial.
Saltare la barra di navigazione, si passa alle caselle di contenuti che conterrà tutte le informazioni in nostro possesso. Quando si effettua la tua immagine, ti ricordi che tuo sarà splicing in 3 luoghi diversi, la parte superiore, che conterrà l'intestazione, per me, io sono un fan di bordi arrotondati. La giunzione 2 avrete sarà l'immagine di contenuti che saranno ripete verticalmente in modo da riempire lo spazio che avete compilato tutte le informazioni su. La giunzione 3 è il piè di pagina, ancora una volta, sono una fan dei bordi arrotondati. Ecco le tre immagini che ho usato per questa parte. Header - Contenuto Repeater - piè di pagina.
Quando tutto è messo insieme si forma questa casella. Ora dobbiamo impostare il codice HTML, così da consentire per le immagini a formare la casella correttamente. Saremo con quattro celle totale a formare la nostra casella di contenuto. Il primo dei quattro sta per tenere gli altri tre celle all'interno di esso. Lo scopo di questa cella, lei capirà più tardi con più comprensione, ma questo sarà essenzialmente permettono di cambiare gli stili di testo sulle varie pagine farete, se necessario. Così lascia avviare l'HTML, questo è il nuovo HTML.
<body>
<center>
id="banner"> <div </ div>
<div id="indexcontent">
id="header"> <div </ div>
id="contentrepeater"> <div </ div>
id="footer"> <div </ div>
</ div>
</ center>
</ body>
Ora abbiamo le cellule impostata come vogliamo, ma ora dobbiamo impostare i parametri id per ogni etichetta. Questo dovrebbe essere simile a questo.
# indexcontent (
display: block;
width: 600px;
)
# header indexcontent # (
height: 35px;
width: 600px;
background-image: url (http://urbanm.net/blog/header.png);
background-repeat: no-repeat;
)
indexcontent # # contentbg (
background-image: url (http://urbanm.net/blog/content.png);
background-repeat: repeat-y;
height: 150px;
width: 600px;
)
# footer indexcontent # (
background-image: url (http://urbanm.net/blog/footer.png);
background-repeat: no-repeat;
height: 37px;
width: 600px;
)
Whoa - che è molto da fare in un solo passo giusto? Lasciatemi spiegare che per voi e per aiutarvi.
A partire dal numero indexcontent, abbiamo impostato la larghezza a 600px che è quello che le mie immagini Contenuto della confezione sono. Noi non impostare l'altezza, in modo che possa espandere e comprimere a seconda della quantità di contenuto che hai nella tua cellule all'interno di esso. Abbiamo impostato la visualizzazione di bloccare, in modo che la cellula si espanderà per la corretta quantità di pixel per la sua altezza.
Poi abbiamo avuto la indexcontent # # header, le dimensioni sono impostate in modo che corrisponda alla dimensione dell'immagine e abbiamo l'immagine di sfondo impostato nella posizione corretta.
Di quello che abbiamo indexcontent # # contentbg, abbiamo corretto l'immagine selezionata come la nostra immagine di sfondo, e abbiamo bisogno di impostarlo a repeat-y, in modo che si ripete in verticale per adattarsi alle dimensioni della cella. Ho scelto 150px per la sua altezza, just so you guys può vedere l'effetto ripetizione, si potrebbe modificare questo per soddisfare tutti i contenuti che hai dentro.
Infine, abbiamo indexcontent # # footer, che è proprio la stessa intestazione.
Ormai si dovrebbe avere il layout di base istituito per voi a finire!
Stay tuned per la parte 2, per spiegare come rendere la barra di navigazione.
Le persone usano ancora il tag? Perché non usare i CSS per centrare il contenuto?
^ Questo dovrebbe essere il tag centro.
Il posto davvero senso per me ... ma se si tenta di controllare alcuni dei miei tutorial video in relazione al presente CSS ... di sicuro si impara di più ... fuori di esso ...