Ho tanta voglia di imparare a sviluppare siti web, però le guide cartacee e online o sono troppo difficili o sono troppo facili, da qui mi è venuto in mente di partecipare a questo forum chiedendo il vostro aiuto :)
In questo topic vorrei inserire i codici per creare un tema per wordpress in html completo di layout in foglio css esterno, adoperando però esclusivamente notepad ++ al posto degli editor visuali basati sul concetto WYSIWYG (che ritengo utili per iniziare ma difficilmente aiutano a fissare in mente i meccanismi e processi dietro alla creazione di una pagina web, almeno non agli inizi.
Aggiungo che sto studiando l'html e il css da una decina di giorni, quindi non sono molto ferrato, ma provando e sbagliando si impara sempre qualche cosa.
Inizio postando il codice html del file index.html, in modo da creare un layout con testata, menu, 2 colonne e
fondo pagina, della parte riguardante l'implementazione in wordpress (la più complicata oltretutto), ne parlerò in seguito, solo dopo aver personalmente colmato le mie lacune e dubbi
Code:<html>
<head>
<link rel=stylesheet href="reset.css" type="text/css"> <!--Questo file mi servirà per resettare le impostazioni di stile caricate dai vari browser-->
<link rel=stylesheet href="style.css" type="text/css"> <!-- Questo è il mio foglio di stile -->
</head>
<body >
<div id="container"> <!-- Contiene tutti gli elementi della pagina web -->
<div id="header"></div> <!-- Si riferisce alla testata della pagina web -->
<div id="menu"></div> <!-- Questo conterrà il menu posto al di sotto della testata -->
<div id="mainbar"> <!-- Contiene i contenuti e la barra laterale -->
<div id="content"></div> <!-- Contiene i contenuti del corpo della pagina-->
<div id="sidebar"></div> <!-- Contiene la barra laterale -->
</div>
<div id="footer"></div> <!-- Contiene gli elementi del fondo pagina -->
</div>
</body>
</html>
Passo incollando il contenuto del file css esterno style.css
Code:
@charset "utf-8";
body {
color: white;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-color:#CCCCCC;
}
div {
width:100%;
float:left;
}
a:link {
color:#33CC00;
}
a:hover {
color:#6666FF;
}
/*Impostazioni del div container, dichiarato con id */
#container {
width:100%;
background:pink;}
/*Impostazioni del div header, dichiarato con id */
#header {
width:100%;
height:250px;
font-size:18px;
font-weight:bold;
background:green;
}
/*Impostazioni del div menu, dichiarato con id */
#menu {
width:100%;
height:70px;
background:red;
}
/*Impostazioni del div mainbar, dichiarato con id */
#mainbar {
width:100%;
}
/*Impostazioni del div content, dichiarato con id */
#content {width:70%;
height:400px;
background:orange;}
/*Impostazioni del div sidebar, dichiarato con id */
#sidebar {
width:30%;
height:400px;
background:violet;
}
/*Impostazioni del div footer, dichiarato con id */
#footer {
width:100%;
height:250px;
background:yellow;
text-align:center;
}
Ho commentato il file html tramite la sintassi <!-- --> e il file esterno css con la sintassi /**/
Alla fine riunendo in una cartella il file index.html e style.css, andando a cliccare sul index.html otterremo questo:
Uploaded with
ImageShack.usPer ora vi porgo la seguente domanda:
Vorrei che riducendo la finestra del browser, si riduca al suo interno il contenuto del sito web, ho letto che si deve creare un layout liquido, ma non riesco a farlo funzionare... Come posso fare?
Sono graditissimi commenti, tirate di orecchie e suggerimenti, sono solo un dilettante allo sbaraglio e ho bisogno di spintoni e pedate eheheh :D
