Sito web con stile (css)
Imparate a utilizzare i fogli di stile (CSS) per agire sugli elementi di un sito Internet, senza essere costretti a operare sui singoli oggetti s Verificate com’è possibile inserire i CSS in pagine create con Frontpage oppure con Dreamweaver.
Una delle difficoltà maggiori incontrate da chi si cimenta per la prima volta nel web design è riuscire a separare il contenuto dallo stile. Infatti, l’utilizzo dei tag HTML consente di formattare il layout delle pagine di un sito in maniera abbastanza precisa, ma non permette modifiche rapide.
Se per ragioni di uniformità avete formattato il carattere utilizzato per i contenuti testuali di un sito con un corpo e una dimensione, e decidete di modificarlo con uno maggiormente leggibile, aumentando la dimensione del carattere, dovrete scorrere tutto il codice delle singole pagine per cambiarlo manualmente. Per ovviare a questo si usano i cosiddetti “fogli di stile”, che altro non sono che una raccolta di regole di formattazione che controllano l’aspetto del contenuto di una pagina. I fogli di stile (CSS, Cascading Style Sheet, ossia fogli di stile in cascata) possono essere sia interni alla singola pagina sia esterni, importati nelle pagine in cui si desidera siano applicati. Una delle funzionalità più apprezzate è quella che permette di specificare in pixel o in altre unità di misura la grandezza dei caratteri o il formato dei punti elenco. I programmi di editing visuale per il web come Dreamweaver o Frontpage possiedono strumenti che aiutano nella gestione dei CSS.
FRONTPAGE A CASCATA
Per inserire un nuovo foglio di stile incorporato in una pagina di Frontpage procedete così: fate clic su FORMATO/STILE, poi selezionate NUOVO. A questo punto digitate il nome del nuovo stile che volete applicare, scegliendo con il pulsante FORMATO le caratteristiche di formattazione, dopo avere deciso se si tratta di uno stile di paragrafo o di carattere. Impostate tutte le caratteristiche che ritenete necessarie e poi chiudete le finestre di dialogo per tornare alla pagina web. Se invece volete incorporare il foglio di stile come foglio esterno, la procedura è un po’ diversa: fate clic su FILE/NUOVO e poi su PAGINA O WEB.Nel riquadro attività NUOVA PAGINA O WEB nella sezione NUOVO DA MODELLO scegliete MODELLI DI PAGINA. Nella finestra omonima scegliete la scheda FOGLI DI STILE, selezionando poi o un modello di CSS predefinito oppure createne
uno ex novo. Applicatelo utilizzando il selettore di stile posto sulla barra degli strumenti di Frontpage, con il riquadro NORMALE.
CSS E DREAMWEAVER
In Dreamweaver, invece, la procedura di creazione e di gestione dei fogli di stile è semplificata, avendo una voce specifica del menu dedicata a questa attività. Fate clic su FINESTRA/STILI CSS oppure premete i tasti MAIUSC+F11. Vi apparirà una finestra di gestione stili. Nell’angolo in basso a destra vedrete due pulsanti, chiamati ASSOCIA FOGLIO DI STILE e NUOVO STILE CSS. Il primo serve per associare a un paragrafo un foglio di testo precedentemente creato (sia incorporato nella pagina sia esterno), mentre il secondo vi permetterà di creare un nuovo foglio di stile. Fate clic su questo tasto e vi apparirà la finestra di dialogo NUOVO STILE CSS, dalla quale potrete decidere se creare uno stile di classe personalizzato, se modificare un tag HTML preesistente oppure se usare un selettore CSS. Date un nome al nuovo stile che volete applicare e scegliete nella sezione DEFINISCI IN se volete creare un foglio di stile esterno oppure se volete creare uno stile CSS di pagina. Nel caso scegliate SOLO QUESTO DOCUMENTO, quando premerete il tasto OK si aprirà la finestra di definizione stile, che vi permetterà di determinare in maniera approfondita le caratteristiche grafiche dell’elemento scelto.
La scelta di creare un foglio di stile esterno comporterà la creazione automatica di un nuovo file, con estensione CSS, che avrà il contenuto determinato dalle vostre impostazioni. Per applicare il foglio di stile non vi resta che selezionare il testo o l’elemento HTML a cui volete venga applicato, indifferentemente in VISTA CODICE o in VISTA STRUTTURA, cliccando poi semplicemente sullo stile da applicare nella finestra PROGETTAZIONE.