Come usare i CSS KompoZer

April 28

Come usare i CSS KompoZer


Kompozer è un "ciò che vedi è quello che ottieni" o strumento di authoring WYSIWYG pagina Web che gira su Windows, Mac OS X e Linux. Kompozer consente agli utenti di creare siti Web senza scrivere codice. Kompozer è una versione aggiornata di Nvu, che è stato a sua volta una versione migliorata del editor HTML di Netscape Composer chiamato. Kompozer dispone di uno strumento wizard CSS (Cascading Style Sheet), che rende lo styling contenuto del sito web relativamente facile. Inoltre, la procedura guidata CSS può esportare il codice CSS in un file esterno.

istruzione

1 Avviare l'applicazione Kompozer. Fare clic sulla scheda "Design" nell'angolo in basso a sinistra dell'area di lavoro. Tipo "Questo è un testo in un paragrafo" nell'area di lavoro. Premere due volte il tasto "Invio" o "Return". Tipo "Questo è un testo in un <div>."

2 Fare clic sull'icona "Salva". Nella casella di input "Titolo della pagina", digitare "Kompozer CSS di prova." Fare clic su OK. Nel "Salva pagina come" finestra di dialogo, inserire "test.html", come il nome del file. Fare clic sull'icona "Salva".

3 Fare doppio clic sulla prima riga di testo per selezionarla. Fare clic sulla freccia verso il basso nella casella di riepilogo a discesa con l'etichetta "corpo del testo" e selezionare "paragrafo". Torna alla zona di lavoro. Fare doppio clic sulla seconda riga di testo per selezionarla. Fare clic sulla freccia verso il basso nella casella di riepilogo a discesa con l'etichetta "corpo del testo" e "contenitore generico (div)."

4 Fare doppio clic sulla seconda riga di testo delineato in rosso. Nel editor di proprietà Avanzate, fare clic sulla freccia verso il basso nella casella di riepilogo a discesa Attribute. Selezionare "ID". Fare clic nella "Valore:" casella di input e digitare "line2" come valore ID.

5 Fare clic sull'icona "CSS" nella riga di icone sotto il menu. Fare clic sulla freccia verso il basso sul menu a discesa sopra il pulsante "Crea regola di stile" e sotto il pulsante di opzione "regola di stile personalizzato". Selezionare "p (paragrafo)."

6 Fare clic sul pulsante "Crea regola di stile". Fare clic sulla scheda grigia "Testo". Fare clic sulla freccia verso il basso nella casella di riepilogo a discesa con l'etichetta "peso Carattere" e selezionare "Bold". Fare clic sul pulsante "OK".

7 Fare clic sull'icona "CSS" nella riga di icone sotto il menu di nuovo. Fare clic sull'icona palette in alto a sinistra del testo "Fogli e le regole." Selezionare il pulsante che dice "stile applicato ad un elemento con un attributo ID specificato." Fare clic sulla freccia verso il basso nella lista a discesa sopra il pulsante "Crea regola di stile" e sotto il pulsante di opzione "regola di stile personalizzato". Selezionare "# line2."

8 Fare clic sul pulsante "Crea regola di stile". Fare clic sulla scheda grigia "Sfondo". Tipo "blu" nella casella di input con l'etichetta "Colore:". Fare clic su grigio scheda "Testo". Tipo "bianca" nella casella di input con l'etichetta "Colore:". Fare clic sul pulsante "OK".

9 Fare clic sull'icona "CSS" nella riga di icone sotto il menu, ancora una volta. Fare clic sull'icona "Salva". Fare clic sul menu File e selezionare "Esci" per chiudere la Kompozer.

10 Avviare il browser Web. Fare clic sulla voce di menu "File" e selezionare "Apri file". Individuare il file "test.html" appena creato, selezionarlo con il mouse, quindi cliccare su "Apri".

Consigli e avvertenze

  • Mentre Kompozer consente di esportare il codice CSS, non è possibile modificare direttamente il codice in Kompozer. Invece, è necessario utilizzare un editor di testo per apportare eventuali modifiche. È possibile modificare il codice CSS interna, tuttavia, utilizzando la procedura guidata o inserendo la modalità codice sorgente.
  • A volte, Kompozer farà modifiche valide, ma a volte non necessari al codice sorgente. Questo è un bug che esiste da anni - anche in Composer di Netscape. Questo bug non può mai essere risolto. Mentre i cambiamenti Kompozer fa sono sintatticamente corretto, possono influenzare il modo in cui il codice visualizzato. Sempre esaminare e testare il codice a fondo per essere certi che tutto funzioni come dovrebbe.

Articoli Correlati