Un sito Web che ha un layout a larghezza fissa propone codice il file di foglio di stile CSS che imposta le sezioni del layout del sito per una determinata larghezza in pixel. Ciò significa che il sito non verrà ridimensionata per adattare lo schermo di computer. Un sito con un layout liquido-larghezza ha codice nel file CSS che imposta le sezioni di larghezza del layout del sito ad una percentuale delle dimensioni dello schermo di visualizzazione della vista. Ciò significa che il sito verrà ridimensionata per adattarsi schermata dello spettatore. È possibile modificare un layout a larghezza fissa per un layout liquido-larghezza sostituendo le larghezze impostate in pixel con larghezza relativa in percentuale.

Istruzioni

1

Aprire il file CSS del layout che si desidera modificare una larghezza di liquida nel vostro editor preferito HTML o testo normale.

2

Individuare il wrapper principale nel codice CSS. Il wrapper principale controlla la larghezza dell'intero layout. Solitamente si trova nella parte superiore del file CSS, e il suo nome selettore generalmente contiene la parola "wrapper" o "contenitore" insieme a una parola come "Principale" o "pagina" per spiegare che è il principale wrapper per il sito. All'inizio del selettore di nome è un hashtag, e seguendo il wrapper principale è un elenco di proprietà, tra cui "larghezza".
Per esempio:

wrapper di Main () {

Larghezza: 1000px;

3

Individuare la proprietà "width" nell'elenco delle proprietà wrapper principale. Prendere nota di ciò che la larghezza fissa del wrapper principale è in pixel, quindi sostituire la larghezza in pixel con "100%"
Ad esempio, è necessario modificare questo pezzo di codice:

wrapper di Main () {

Larghezza: 1000px;

A

wrapper di Main () {

Larghezza: 100%;

4

Individuare tutti i wrapper per le barre laterali nel file CSS. Essi si trovano solitamente vicino il codice wrapper principale e hanno "sidebar" come parte del nome del selettore.
Per esempio:

sinistra-sidebar-wrapper {

Larghezza: 200px;

5

Convertire la percentuale proporzionata del sito che si desidera che la barra laterale per coprire la larghezza in pixel.
Ad esempio, se la larghezza originale del sito era 1000 pixel, modificare questo pezzo di codice:

sinistra-sidebar-wrapper {

Larghezza: 200px;

A

sinistra-sidebar-wrapper {

Larghezza: 20%;

6

Salvare il file CSS con i wrapper convertiti in percentuali.

7

Aprire il client FTP preferito e accedere al tuo server Web dal vivo. Spostarsi nel percorso del vecchio file CSS sul tuo sito Web e caricare il file CSS trascinandolo dal lato computer locale del client al lato server dal vivo. Rilasciarlo sopra il vecchio file CSS. Fare clic su "OK" per confermare che si desidera sovrascrivere il vecchio file CSS.

8

Aprire il sito Web nel tuo browser Internet per vedere che viene visualizzato correttamente con il layout liquido convertito.

Consigli & Avvertenze

• Eseguire sempre un backup del vostro sito Web prima di modificare i file sul server dal vivo, nel caso in cui si commette un errore.