Costruzione di siti web professionali comporta tutta una serie di tecniche e tecnologie, tra cui Cascading Style Sheets (CSS). È possibile creare un sito elegante, efficace utilizzando dichiarazioni CSS in combinazione con markup HTML e facoltativamente altri linguaggi come JavaScript. Ognuna delle tecnologie è accessibile, così si può imparare a utilizzare in modo efficace indipendentemente dal vostro livello di esperienza tecnica. La chiave per creare un sito che abbia un aspetto professionale è quello di eseguire ogni passaggio a sua volta, piuttosto che cercare di attuare tutti gli elementi diversi allo stesso tempo, che può essere allettante.

Istruzioni

1

Progettare il tuo sito Web. Si può essere tentati di iniziare immediatamente la scrittura di codice e creazione di pagine HTML quando si dispone di un progetto Web per lavorare, ma vostri sforzi saranno più concentrati se si prende il tempo per pianificare la loro prima. Utilizzando sia un programma di grafica o semplicemente una carta e matita, tracciare un disegno grezzo per le pagine del sito Web. Assicurati di che includere sezioni per ogni elemento di contenuto che si desidera venga visualizzato all'interno delle pagine, lavorando fuori come si desidera disporre questi elementi.

2

Crea il tuo sito HTML. A tale scopo, aprire un programma di editor di testo di base. Quindi creare un file vuoto e salvarlo con un nome di vostra scelta e ". html" come l'estensione. La homepage del tuo sito dovrebbe essere "index. html." Ma è possibile utilizzare qualsiasi nome per altre pagine. Il codice di struttura di esempio seguente viene illustrata una pagina base:
< html >
< head >
< / head >
< corpo >
<! - il contenuto della pagina - >
< / body >
< / html >

Il contenuto delle tue pagine dovrebbe apparire tra l'apertura e chiusura tag body, racchiuso nel markup HTML. Creare una sezione per ogni elemento nella pagina e racchiudere il contenuto, come nel seguente esempio:
< div >< img src="header.png" alt = "header" / >< / div >
< div >
la mia pagina < h1 > < / h1 >
< p > qui è qualche testo </p >
< / div >

Controllare il vostro disegno per assicurarsi di che aver incluso un'area per ogni elemento di contenuto.

3

Creare un file CSS e link ad esso nella tua pagina HTML. Aprire un nuovo file nell'editor di testo e salvarlo con estensione "CSS". Inserire un link ad esso nel codice HTML tra l'apertura e chiusura tag testa come segue:
< link rel = "stylesheet" type = "text/css" href="mysitestyle.css" / >

Utilizzando un file separato per le dichiarazioni CSS mantiene il vostro codice organizzato, rendendo più facile per ottenere un risultato professionale. È possibile caricare il tuo file CSS nella stessa directory come pagina Web o un'altra directory sul server, come assicurarsi che il link all'interno dei punti HTML nella posizione corretta.

4

Aggiungere gli attributi class e ID al codice HTML. Professional CSS uso coinvolge varie tecniche per l'identificazione di elementi HTML per applicare proprietà di stile per. Per gli elementi che sono univoci all'interno di una pagina, è possibile utilizzare l'attributo ID come segue:
< div id = "header" >

Per raggruppare gli elementi insieme, in modo che è possibile applicare le stesse proprietà di stile a loro, è necessario utilizzare l'attributo di classe, come segue:
< div class = "main" >

Ciò consente di ottimizzare il codice CSS, riducendo il numero dei posti che è necessario apportare modifiche nel codice, se si decide di modificare lo stile di una pagina.

5

Aggiungere il codice CSS per implementare la progettazione del sito. Con riferimento al vostro disegno, aggiungere le dichiarazioni CSS per specificare il layout e l'aspetto di ogni elemento della pagina Web. Per specificare gli elementi di tipo, utilizzare la sintassi seguente:
p {color: #333333;}

Per specificare gli elementi da ID, utilizzare le seguenti operazioni:

intestazione {font-weight: bold;}

Per specificare gli elementi dal nome della classe, utilizzare le seguenti operazioni:
div.Main {padding: 10px;}

È possibile utilizzare il modello di riquadro CSS per specificare le dimensioni di un elemento così come le zone di spaziatura e margini intorno ad esso.

Consigli & Avvertenze

• Librerie JavaScript come jQuery forniscono effetti di stile avanzato già pronti che è possibile utilizzare nelle proprie pagine.
• Assicurarsi di che testare il tuo sito in diversi browser come aspetto del vostro sito può variare.