# 1 Il modello box

Comprensione struttura del sito web

Tutti gli elementi in questa pagina tutti i blocchi all'interno di altri blocchi (aka "Box Girl"). Quando si trascina elementi web, li trascina da un blocco e cadere in un altro. Ecco come funziona HTML!

Super PIANO

$ 75 / mon

Perfetto per qualsiasi azienda con 20 o più dipendenti.

500GB di archiviazione
1 milione di pagine visualizzate
20 collaboratori
50 Reti Sociali
Premium Support

Quello che vedi

Nota: Potrai capire

come progettare qualcosa di simile con i concetti di seguito.

Quali blocchi E 'fatta di

Div Block

H2 Rubrica eccellente PIANO

Testo Block 75 $ / mon

Paragrafo Perfetto per qualsiasi attività con 20 o più dipendenti.

Lista

Elenco Articolo
500GB di archiviazione
Elenco Articolo
1 milione di pagine visualizzate
Elenco Articolo
20 collaboratori
Elenco Articolo
50 Reti Sociali
Elenco Articolo
Premium Support

prova tu

Trascina questo paragrafo ...

Tutte le caratteristiche senza le limitazioni. Tutto quello che puoi mangiare. (Questo è un elemento di paragrafo)

SUGGERIMENTO: Fare clic e trascinare l'elemento sopra il paragrafo e rilasciarlo sotto il prezzo di destra. È inoltre possibile utilizzare le scorciatoie come copia e incolla (ctrl + c, ctrl + v), copiare mentre trascinate (tenendo alt), ed eliminare (eliminare la chiave).

Nel blocco viola ...

Super PIANO

$ 75 / mon

INFORMAZIONI: Questo è come funziona HTML e web di - elementi pila sotto l'altro o uno dentro l'altro. Questo è il modo migliore per costruire un sito web fluida e reattiva.

# 2 elementi tavola

Elementi di base di layout

Aggiungere elementi al tuo sito web, cliccando sull'icona [+] nell'angolo in alto a sinistra. Qui di seguito sono alcuni degli elementi più basilari della struttura nel web design - sezioni, contenitori e colonne.

Una Sezione occupa il 100% della larghezza della finestra del browser se si aggiunge al corpo (la tela di un sito web).
E 'fantastico per i grandi sezioni orizzontali di un sito web.

Sezione Element

Un contenitore è un blocco 960px centrata nel mezzo del browser. Di solito più contenuto del sito viene aggiunto all'interno di un contenitore in modo che sia centrato. I contenitori sono solitamente aggiunti al corpo o un elemento di sezione.

Container Element

Aggiunta di colonne sono il modo più veloce per costruire un layout del sito unico. Per modificare il numero di colonne che si desidera in diversi dispositivi, è sufficiente fare clic sull'icona dell'ingranaggio in alto a destra per accedere alle impostazioni degli elementi.

Colonne Responsive

# 3 Progettare con i CSS

Styling gli elementi

Selezionare un elemento e aggiungere una classe nel riquadro giusto stile (Brush icona). In questo pannello è possibile aggiungere testo e gli stili grafici come il colore del carattere, altezza della linea, gradienti, bordi, ombre e altro ancora. Visual Web design è molto più divertente che codifica giusto?

Pulsante esempio di progettazione

Aggiungi al carrello ➜

Stile da te

Testo pulsante ➜

SUGGERIMENTO: Questo tasto ha già un "Button" classe con alcuni stili di base. Selezionare il pulsante e tenta di aggiungere il gradiente, confine, angoli arrotondati, interni / esterni, ombre hover stili di Stato, e di transizione per gli stili hover - il tutto utilizzando il pannello di stile.

Che cosa si è creato

Testo pulsante ➜

applicare la classe 'pulsante'

Testo pulsante

SUGGERIMENTO: in Web Design è possibile applicare una classe di molti elementi per farle sembrare la stessa. Applicare la classe "Button" che dallo stile al link qui sopra cliccando il pulsante [+] nella parte superiore del pannello di stile e digitando "Button" per trovare quella classe.

Esempio Form Design

Grazie!

Il tuo roccia miei calzini!

Oops! Qualcosa è andato storto durante l'invio del modulo :(

Stile da te

Grazie! L'invio è stato ricevuto!

Oops! Qualcosa è andato storto durante l'invio del modulo :(

SUGGERIMENTO: Prima di creare classi per i campi di testo e il pulsante (applicare la stessa classe per entrambi i campi). Poi cambiare stili di confine, il colore di sfondo, e aggiungere stili per l'hover e stati premuti. Non dimenticate di stile allo stato "successo" per l'elemento form, che si trova nel pannello delle impostazioni (icona ingranaggio in alto a destra).

Esempio Tipografia

Lakewood Stout

La birra scura di Lakewood, Colorado

La robusta leggendario nasce dalla bellissima matrimonio di un uomo di montagna e la sua cosa più amata, la città di Lakewood, in Colorado. L'uomo di montagna ha amato la sua ascia e il suo scatto singolo Remington fucile, ma non tanto quanto amava la sua città. Sognava di suoi fiumi flowy e maestose montagne. Così ha chiamato il suo più grande dopo la sua robusta. Così la stout gloriosa era birthed dal cuore di un uomo di montagna.

"Ho Messo questa gloriosa birra per esprimere il mio eterno amore per la mia bella città."

- Mountain Man

Stile da te

Lakewood Stout

La birra scura di Lakewood, Colorado

"Ho Messo questa gloriosa birra per esprimere il mio eterno amore per la mia bella città."

- Mountain Man

SUGGERIMENTO: Vai avanti e aggiungere tipografia costume e stili per lo sfondo. Punta fredda: se si aggiungono gli stili tipografia ad un blocco genitore, tutti i suoi elementi testuali figli erediteranno questi stili di testo. In CSS questo comportamento è chiamato "a cascata".

# 4 layout con i CSS

Layout Web Costruire con i CSS

Simili aggiungendo stile ad un elemento, per modificare la posizione di un primo elemento di aggiungere una classe e quindi modificare le proprietà di posizione. Potrai conoscere margin, padding, Display, Float, Overflow, e posizione.

Margin & Imbottitura esempio

Ultime Notizie

Gli agenti federali Raid Gunshop, Trova Armi

Proprietario di un negozio Steve Witmere precedentemente arrestato per lo scambio di mercato nero bazooka. Confessa di coinvolgimento nella mafia russa.

Tra i numerosi bazooka trovato nel Gunshop erano decine di migliaia di dipinti ottenuti illegalmente per un valore di almeno $ 10.000. Quello è un prezzo pesante da pagare per questi dipinti muti.

Descrizione: Margin e padding si trovano nella tavolozza posizione del pannello Style. Aggiunta Margine aggiungerà spazio esterno di un blocco, e aggiungendo Padding aggiungerà spazio all'interno di un blocco.

Aggiungere spaziatura Yourself

Ultime Notizie

Gli agenti federali Raid Gunshop, Trova Armi

Proprietario di un negozio Steve Witmere precedentemente arrestato per lo scambio di mercato nero bazooka. Confessa di coinvolgimento nella mafia russa.

Tra i numerosi bazooka trovato nel Gunshop erano decine di migliaia di dipinti ottenuti illegalmente per un valore di almeno $ 10.000. Quello è un prezzo pesante da pagare per questi dipinti muti.

SUGGERIMENTO: Iniziare con l'aggiunta di imbottitura su tutti i lati del principale blocco grigio (elemento principale). Quindi aggiungere margine inferiore per aggiungere spaziatura tra i singoli elementi di testo (elementi bambini). Suggerimento: Tenere premuto SHIFT durante l'utilizzo del margine di controllo / padding da applicare a tutti i lati e ALT per applicare anche per il lato opposto.

'display: block' esempi

Questa rubrica è impostato su display: block

Questo paragrafo è impostata su display: block. Quindi si riempie la larghezza della finestra genitore e pile sopra altri blocchi.

Pulsante con display: block Pulsante con display: block Questo collegamento è impostata su display: block Questo collegamento è impostata su display: block

Descrizione: Elementi di taratura 'Display Impostazione di blocco li renderà pila uno sopra l'altro e riempire il 100% la larghezza del suo blocco padre. La maggior parte degli elementi di realtà hanno questa impostazione predefinita.

Renderli 'display: block' te

Si tratta di un pulsante Questo è un Button Links sono display: inline di default link sono display: inline di default

SUGGERIMENTO: selezionare questi elementi (alcuni sono Inline Block e alcuni sono in linea) e renderli display: block in modo che impilano uno sopra l'altro.

'Display: inline-block' esempio

Scarica Modifica Elimina

Descrizione: Elementi di taratura 'Display Impostazione di linea-Block farà la larghezza del blocco conforme alla larghezza del contenuto al suo interno. Ciò significa che se il loro contenuto è abbastanza piccoli da poter impilare uno accanto all'altro. È possibile copiare incollare i pulsanti sopra e modificare il testo dentro per vedere come funziona.

li rendono inline-block te

Scarica Edit

SUGGERIMENTO: Selezionare gli elementi di cui sopra e farli display: inline-block in modo da impilare uno accanto all'altro. Vedrete che le immagini pila accanto ai pulsanti. Suggerimento: Eliminazione i pulsanti e le immagini in blocchi separati Div li farà pila uno sopra l'altro (perché blocchi Div sono display: block per impostazione predefinita).

Float esempio

Grazie! L'invio è stato ricevuto!

Oops! Qualcosa è andato storto durante l'invio del modulo :(

Descrizione: Impostazione Display: inline-block o galleggiante (questo esempio) sono i modi più comuni per impilare elementi affiancati. In questo esempio vi mostrerò come galleggiare qualcosa.

Float da te

Grazie! L'invio è stato ricevuto!

Oops! Qualcosa è andato storto durante l'invio del modulo :(

SUGGERIMENTO: Per prima cosa selezionare il campo di testo, rendono float: left e dargli una larghezza percentuale (es: 60%). Quindi impostare il pulsante per float: left come bene e impostare un altro larghezza percentuale (es: 40%), in modo che entrambi aggiungere fino a 100%. Questo è un modo manuale per forzare qualsiasi elemento di impilare fianco a fianco.

Absolute Position Esempio

My Cup of Joe

Si tratta di un testo didascalia.

In primo piano

Descrizione: se si imposta posizione di assoluta su un elemento, sarete in grado di posizionarlo in qualsiasi punto all'interno del suo blocco padre. Per scegliere quale genitore per posizionare all'interno, impostare posizione dell'elemento genitore relativa. Nota: Quando gli elementi sono assoluti posizionato galleggiano sopra altri elementi.

Stile It Yourself

My Cup of Joe

Questa è una foto didascalia per la mia tazza preferita di Joe.

In primo piano

SUGGERIMENTO: Per prima cosa selezionare l'elemento wrapper immagine e impostare la posizione relativa. Avanti selezionate il sottotitolo, trascinarlo nell'immagine impostato la sua posizione di assoluta e scegliere il 7 ° di preselezione. Per posizionare il badge in vetrina nel posto giusto scegliere la seconda preselezione e posizionare manualmente.

# 5 di stile CSS

Utilizzando stili CSS

È possibile creare facilmente variazioni di un elemento con l'aggiunta di ulteriori classi uno sopra l'altro e l'aggiunta di stili diversi in tali classi. Scopri l'esempio seguente dove abbiamo diverse varianti di un pulsante.

In comune stili di pulsanti esempio

Progettare i pulsanti te

Pulsante VERDE

Pulsante ROSSO

SUGGERIMENTO: Selezionare il secondo pulsante e cliccare sul [+] accanto alla classe per aggiungere un'altra classe. Si può chiamare "Green". Poi dare stili diversi. Questi stili sostituiranno gli stili di base della prima classe. Quindi creare il pulsante rosso.

# 6 media query

Progettare per i vari dispositivi

In WebFlow prima progetta il tuo sito web per i dispositivi desktop e quindi apportare modifiche su dispositivi mobili (accedere alle icone dei dispositivi nella barra in alto). Aggiunta di stili in un dispositivo mobile avrà la precedenza gli stili del desktop.

Responsive esempio Intestazione

Questo è un titolo del testo che diventa sempre più nei dispositivi mobili.

Descrizione: Questa rubrica è davvero grande sul desktop, ma vogliamo che sia più piccolo su dispositivi mobili. Fare clic nei dispositivi nella barra in alto per vedere che le dimensioni del testo e la linea di altezza è stata ridotta.

Fix It te

Fai di questo grande testo titolo si fanno più piccoli nei dispositivi mobili.

SUGGERIMENTO: selezionare questa rubrica sul dispositivo Tablet e rendere la dimensione del carattere e altezza della linea più piccoli. Fare lo stesso per i dispositivi del paesaggio e telefono Portrait Phone. Si può vedere che il

Responsive esempio Button

Testo pulsante

Descrizione: Questo tasto è destinato ad essere piccolo su schermi desktop perché è facile fare clic con il cursore del mouse. Ce l'abbiamo fatta più grande su dispositivi mobili in modo che è più facile toccare con il dito

Testo pulsante

Fix It te

SUGGERIMENTO: Vai al dispositivo Tablet e aumentare l'imbottitura del pulsante. Quando fate che avrà la precedenza degli stili precedenti impostati sul desktop e si cascata verso il basso per tutti i dispositivi sotto Tablet.

Colonne Responsive esempio