Aiutamici Forum
Benvenuto Ospite Cerca | Topic Attivi | Utenti | | Log In | Registra

Creazione tema wordpress in html+CSS Opzioni
tasver
Inviato: Thursday, January 06, 2011 4:47:59 PM
Rank: Member

Iscritto dal : 1/6/2011
Posts: 11
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.us

Per 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




Sponsor
Inviato: Thursday, January 06, 2011 4:47:59 PM

 
wubullo
Inviato: Thursday, January 06, 2011 8:40:54 PM

Rank: AiutAmico

Iscritto dal : 12/9/2009
Posts: 345
Ciao Tasver, benvenuto nel forum di Aiutamici!

Cominciamo da alcune informazioni di base:

tasver ha scritto:
Aggiungo che sto studiando l'html e il css da una decina di giorni, quindi non sono molto ferrato

[...]

sono solo un dilettante allo sbaraglio e ho bisogno di spintoni e pedate


Non me la racconti giusta... Hai davvero appena iniziato a studiare? Se le cose stanno veramente così, ho come l'impressione che fra un'altra decina di giorni saremo noi a fare delle richieste a te!!! Drool
Scherzi a parte, ti faccio le mie sincere congratulazioni, perché per un novizio hai fatto già un lavoro eccellente! Applause

Venendo alla tua richiesta, credo che tu non abbia bisogno di ulteriori consigli: l'effetto che cerchi l'hai già ottenuto! Se infatti riduci le dimensioni della finestra del browser, vedrai che le singole sezioni di cui la pagina è composta (e il testo in esse contenuto) si adatteranno automaticamente in grandezza. Io ho fatto la prova e funziona già! Questo accade perché nel CSS hai ben impostato per le singole <div> il valore di larghezza (width) al 100%, senza definire una dimensione in pixel, che invece è vincolante.

Un effetto simile in altezza, però, non si può ottenere: lo scroller comparirà comunque... d'oh!

Quanto ad ulteriori suggerimenti, ti segnalo due piccoli accorgimenti (puramente marginali):

Commenta:
<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 -->


Aggiungi le virgolette e la chiusura del tag vuoto nei punti che ti ho segnalato: così rientrerai al 100% negli standard stabiliti dal W3C. Infine, per tua comodità, ti segnalo che il reset CSS non ti conviene riservarlo a un file separato, ma è meglio integrarlo all'inizio del foglio di stile principale ("style.css"); se però preferisci tenere le due cose distinte, credo che possa funzionare lo stesso.

Ancora complimenti per le competenze che hai acquisito in così poco tempo. Ti consiglierei di continuare: ho la sensazione che potrai diventare veramente bravo!

Se hai altri dubbi, siamo qua.

Buona Epifania e a presto!
alevin96
Inviato: Saturday, April 02, 2011 5:23:59 PM
Rank: Newbie

Iscritto dal : 4/2/2011
Posts: 6
Con IE9 va a capo la sidebar, perchè?
lui49
Inviato: Saturday, April 02, 2011 7:16:04 PM
Rank: AiutAmico

Iscritto dal : 5/4/2003
Posts: 2,833
temo che IE9 faccia ancora un pò di casino.....sul mio sito per esempio mi sballa qualche dimensionamento e soprattutto, altera le dimensioni dei font. Voglio vedere come si mette la faccenda....
alevin96
Inviato: Saturday, April 02, 2011 8:30:23 PM
Rank: Newbie

Iscritto dal : 4/2/2011
Posts: 6
se uso html5, lo legge bene?
altrimenti continuo a lavorare su questa ottima base, la stavo cercando da un casino...
lui49
Inviato: Saturday, April 02, 2011 8:36:10 PM
Rank: AiutAmico

Iscritto dal : 5/4/2003
Posts: 2,833
non so cosa dirti.....meglio fare un giro per i vari forum in merito e vedere quello che riscontrano gli utenti.
Utenti presenti in questo topic
Guest


Salta al Forum
Aggiunta nuovi Topic disabilitata in questo forum.
Risposte disabilitate in questo forum.
Eliminazione tuoi Post disabilitata in questo forum.
Modifica dei tuoi post disabilitata in questo forum.
Creazione Sondaggi disabilitata in questo forum.
Voto ai sondaggi disabilitato in questo forum.

Main Forum RSS : RSS

Aiutamici Theme
Powered by Yet Another Forum.net versione 1.9.1.8 (NET v2.0) - 3/29/2008
Copyright © 2003-2008 Yet Another Forum.net. All rights reserved.