Nwlapcug.com


Come utilizzare CSS per progettare un negozio Online

Come utilizzare CSS per progettare un negozio Online


CSS è un modo efficace per creare modelli di successo nei siti Web. Per i siti commerciali, avendo un buon design può fare la differenza tra successo e fallimento. Utilizzando i CSS è il metodo primario coinvolti nella presentazione del contenuto di un negozio online in modo efficace. I principi di base di CSS design sono semplici e facile da raccogliere, quindi non c'è nessun problema se non si dispone di alcuna precedente esperienza di utilizzarlo. Può essere più facile raggiungere un buon design se è prima crearlo utilizzando un programma di grafica o anche da schizzo su carta, poi tradurre questo in CSS.

Istruzioni

1

Creare un file per le tue regole CSS, per tenerli separati dal sito HTML. Creare un nuovo file in un testo editor e salvarlo come "storestyle.css" o qualcosa di simile, collocandolo nella directory principale del tuo sito. A questo link nella sezione < head > di pagine HTML del tuo negozio online come segue:

< link rel = "stylesheet" type = "text/css" href="storestyle.css" / >

Cercare di assicurarsi che il codice HTML contiene solo il contenuto del sito, con indicazioni di come ha intenzione di essere in stile mantenuto nel CSS. Il codice HTML deve contenere dati, testo, immagini e controlli utente che permette una navigazione e l'ordinazione come avete bisogno.

2

Creare un elenco di regole di stile in file CSS come nell'esempio seguente:

/Stile per l'elemento HTML < corpo >/
corpo
{font-family: Arial, Helvetica, sans-serif; background: #99FFFF;}

Questo imposta il colore del carattere e dello sfondo per l'intera pagina. È possibile utilizzare CSS per impostare molte diverse proprietà dell'aspetto del sito, inclusi testo e colori di sfondo, font, layout, immagini di sfondo e posizioni dell'elemento. Lavorare attraverso ogni elemento che necessario per definire lo stile a sua volta, aggiungendo al tuo articolo di un foglio di stile alla volta e prova ogni volta che fate un'aggiunta in modo che gli errori sono più facili da identificare.

3

Impostare le proprietà universale nel foglio di stile per le regole da applicare su tutto il sito. Lo scopo principale di CSS è quello di applicare le stesse proprietà agli elementi in tutto un sito Web o una pagina. È possibile personalizzare il modo in cui ogni elemento di un certo tipo è quello di presentarsi come segue:

/Stile per gli elementi HTML < a >/
un: link, un: visitato, un: al passaggio del mouse
{text-decoration: none; font-weight: bold}

Questo rimuove la sottolineatura automatica da qualsiasi link nel codice HTML e li fa apparire in grassetto tutto il sito. Elementi di ancoraggio sono trattati in modo diverso quando sono essere svolazzavano sopra con il mouse o sono già stati visitati, ecco perche ' sono elencati tre tipi.

4

Aggiungere attributi agli elementi HTML per identificarli nel CSS. Per sfruttare le proprietà CSS di CSS per sotto-sezioni di tipi di elemento nel vostro sito, è necessario identificare gli elementi in modo che essi possono essere in stile in modo appropriato, come nell'esempio seguente:

< div class = "prodotto" > i dettagli di un prodotto vanno qui. < / div >

Nel vostro file CSS:

/Stile per gli elementi HTML < div > con l'attributo di classe di prodotto/
div.Product
{background: #FFFF99; border: 1px solid #CCCCCC;}

Questo indica che ogni < div > con l'attributo di classe "prodotto" avrà un sfondo giallo chiaro e la luce bordo grigio.

5

Combinare il tuo CSS con altre tecnologie come JavaScript. La gente si aspetta un elevato livello di interattività con negozi online, e per raggiungere questo obiettivo è necessario utilizzare una varietà di risorse. Scopri le librerie di codice libero come ad esempio jQuery per gli effetti interattivi di CSS, più dei quali sono estremamente facili da usare. CSS è uno strumento fondamentale nella creazione di progetti di grande negozio online, ma è meglio combinato con l'uso di altri mezzi di comunicazione quali immagini e video per creare un'esperienza stimolante per i clienti.