# 1 Il modello box

Capire struttura del sito web

Tutti gli elementi di questa pagina sono tutti i blocchi all'interno di altri blocchi (alias "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 Blocco 75 $ / mon

Il paragrafo Perfetto per qualsiasi azienda con 20 o più dipendenti.

Lista

List Item
500GB di archiviazione
List Item
1 milione di pagine visualizzate
List Item
20 Collaboratori
List Item
50 Reti Sociali
List Item
Premium Support

prova tu

Trascina questo paragrafo ...

Tutte le caratteristiche senza 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 struttura - elementi pila sotto l'altro o uno dentro l'altro. Questo è il modo migliore per costruire un sito web fluida e reattiva.

# 2 ELEMENTI LAYOUT

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.

Contenitore Elemento

Aggiunta di colonne sono il modo più veloce per costruire un layout sito web unico. Per modificare il numero di colonne che si desidera in diversi dispositivi, è sufficiente fare clic sull'icona ingranaggio nell'angolo 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 (Pennello 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 è il modo più divertente di 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 cercare 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: Nel 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 Style e digitando "Button" per trovare quella classe.

Esempio Form Design

Grazie!

La tua 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 gli stili per il passaggio del mouse e stati premuti. Non dimenticare 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

Il robusto 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 anche amava 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, anch'esse 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 di tipografia a un blocco genitore, tutti i suoi elementi testuali bambini 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 cambiare la posizione di un primo elemento di aggiungere una classe e quindi modificare le proprietà di posizione. Imparerete a conoscere margin, padding, display, Salvagente, Overflow, e posizione.

Margine & Imbottitura esempio

Notizie Fresche

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: Margine e imbottiture possono essere trovati 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

Notizie Fresche

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 MAIUSC mentre si utilizza il margine di controllo / padding da applicare a tutti i lati e ALT per applicare anche al lato opposto.

'display: block' esempi

Questa rubrica è impostato su display: block

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

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

Descrizione: Elementi di taratura 'Display Impostazione a Block li renderà impilare 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 stesso

Si tratta di un pulsante Questo è un Button Links sono display: inline per impostazione predefinita Link sono display: inline di default

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

'Display: inline-block' esempio

Scaricare Modifica Elimina

Descrizione: Elementi di taratura 'Display Impostazione di Inline-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 bottoni 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 così che vengano impilate accanto all'altro. Vedrete che le immagini pila accanto ai pulsanti. Suggerimento: Eliminazione i pulsanti e le immagini in blocchi separati Div li farà impilare uno sopra l'altro (perché i blocchi sono Div 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

Questo è un testo foto didascalia.

In primo piano

Descrizione: Se si imposta posizione per Absolute 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: Prima selezionare l'elemento wrapper immagine e impostare la sua posizione a relativa. Avanti selezionate il sottotitolo, trascinarlo nell'immagine impostato la sua posizione di assoluta e scegliere il 7 preset. Per posizionare il badge in vetrina nel posto giusto scegliere la seconda preselezione e posizionare manualmente.

# 5 di stile CSS

Utilizzando stili Cascading

È 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 di aggiungere un'altra classe. Si può chiamare "Verde". 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 di progettare il vostro sito per 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 sarà sovrascrivere gli stili desktop.

Responsive esempio Intestazione

Questo è un titolo di 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

Fanno di questo grande testo rubrica 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 paesaggio Phone e ritratto del telefono. Si può vedere che la

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