waarom is de achtergrondafbeelding in .jpg en de rest in .png?
Stap 1: Maak een ontwerp in HTML
Om de proefversie te maken kunt u een model gebruiken, dat wij voor u hebben voorbereid, die u hier kunt downloaden.
Unzip het betand van uw keuze in een lege directory op uw PC. In het bestand zijn 2 bestanden opgenomen, index.html en model.css in de map css. Verder is er nog een lege map images. Dezelfde structuur heeft straks uw template map en submappen. dus de stijlen die u toepast in het model kunt u straks, zonder te wijzigen, voor uw template.css gebruiken.
Printscreen van het basismodel 2 kolommen
CSS basismodel 2 kolommen
/* ---------------
Template styles
------------------ *
div#wrapper {
width: 972px;
margin: 10px auto 0 auto;
}
div#header {
padding: 10px 10px 0 10px;
background-color: #ffff00;
}
div#top {
height: 80px;
background-color: #00ff00;
}
div#main {
width: 952px;
float: left;
padding: 10px 10px 0 10px;
background-color: #ccc;
}
div#left {
float: left;
width: 210px;
background-color: #9999ff;
}
div#content {
float: right;
width: 722px;
background-color: #fff;
}
div#footer {
clear: both;
width: 952px;
height: 20px;
padding: 10px 10px 0 10px;
background-color: #00ffff;
}
div#blanc {
clear: both;
width: 952px;
padding: 10px;
margin: 0 auto 0 auto;
height: 300px;
}
Het bestand voor 3 kolommen heeft dezelfde structuur als het 2 koloms model.
Printscreen vanhet basismodel 3 kolommen
Toelichting op de modellen
In het CSS bestand model.css vindt u de CSS statements. Vanzelfsprekend is het de bedoeling dat u de CSS aanpast aan uw eigen wensen. Dat geldt natuurlijk ook voor het html bestand. Er zijn achtergrond kleuren toegevoegd om de verschillende div's goed te kunnen zien. Het is erg handig om de achtergrondkleurente laten staan, zolang u met het model aan het "spelen" bent. U kunt dan de effeten van de stijlen direct waarnemen. Verder is er in het html document tekst opgenomen in de verschillende div's, met het zelfde doel.
div#main CSS float left?
In de CSS van de modellen heeft de div#main een float:left. Je zou denken dat dit helemaal niet nodig is, want de div loopt over de volle breedte loopt binnen de wrapper. Toch is dit hier nodig, om er voor te zorgen dat de div#main de hoogte van de subdivs aanneemt, zodat u er een achtergrond in kan plaatsen.
Aanpassen van het model naar de Joomla CSS layout
We gaan nu verder met het 2 koloms model. Van dit model willen we naar het ontwerp van deze website toewerken.
Wanneer u het index.html bestand opent met uw kladblok / notpad ziet u de volgende html code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Base model</title> <link rel="stylesheet" href="/css/model.css" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"> <div id="top">Logo, Topmenu, Search etc</div><!--top--> </div><!--header--> <div id="main"> <div id="left">Left for menus and modules</div><!--left--> <div id="content">Content</div><!--content--> </div><!--main--> <div id="footer">Footerinformation and footermenu</div><!--footer--> </div><!--wrapper--> <div id="blanc">Blanc / Spacer</div><!--blanc--> </body> </html>
Van deze html code verwijderen we eerst de content teksten. Open het index.html bestand met Kladblok en verwijder de teksten van de div's, zodat u een model krijgt zonder content. Sla dit betand op en bekijk het bestand met uw browser (bij voorkeur Firefox). De pagina ziet er nu als volgt uit.
Nadat de teksten zijn verwijderd gaan we naar het Photoshop bestand van het ontwerp van Joomla en maken de achtergrond afbeeldingen voor de website.
Printscreen van het Photoshop bestand van Joomla CSS
Van dit bestand maken we een aantal afbeeldingen die we voor de website gaan gebruiken.
- Achtergrondafbeelding (bg_body.jpg = 2.000 x 1.300 pixels)
- Header (header.png = 942 x 123 pixels)
- Content (main.png = 942 x 20 pixels)
- Footer (footer.png = 942 x 54 pixels)
De .png afbeeldingen zijn transparant (png 24 afbeeldingen).
Afbeeldingen (verkleind weergegeven)
Body
Header
Content
Footer
IE6 Transparantie
Voor IE6 zijn aangepaste png afbeeldingen gebruikt (png 8), omdat IE8 geen transparantie kan weergeven voor png 24 afbeeldingen. Er bestaan scripts om transparantie in IE6 te kunnen toepassen (PNG fix). Wij gebruiken dit niet omdat dit veelal leidt tot conflicten met andere scripts en de pagina's zeer vertraagd inladen. Wij raden u aan, als u transparante afbeeldingen gebruikt, om voor IE6 andere afbeeldingen te gebruiken. Voor deze Joomla CSS website zijn ook aangepaste IE6 afbeeldingen gemaakt.
Afbeeldingen downloaden
Wanneer u dit voorbeeld wilt volgen kunt u de originele afbeeldingen, inclusief die voor IE6 hier downloaden in een zip bestand en deze uitpakken in de lege images map van het model.
We gaan nu het CSS bestand aanpassen van het model om de Joomla CSS website te kunnen maken. Gebruik hiervoor uw kladblok.
Aangepaste CSS
Het CSS bestand bevat al de Reset, Default Fontstyles en de General Content Styles, die zijn overgenomen uit het blanl joomla css bestand (voor alle Joomla versies zijn deze stijlen gelijk). Zie voor meer informatie over deze stijlen het hoofdstuk met subitems "Lees dit eerst", uit het linkermenu bovenaan deze pagina
We tonen hieronder alleen de aangepaste template stijlen die u in het model.css kunt vinden.
/* ---------------
Template styles
------------------ */
body {
background-image: url(../images/bg_body.jpg);
background-position: top center;
background-repeat: no-repeat;
background-attachment: fixed;
}
div#wrapper {
width: 942px;
margin: 10px auto 0 auto;
}
div#header {
height: 123px;
background-image: url(../images/header.png);
background-position: 0 0;
background-repeat: no-repeat;
}
div#top {
float: right;
width: 600px;
text-align: right;
padding: 78px 40px 0 0;
}
div#main {
float: left;
width: 942px;
background-image: url(../images/main.png);
background-position: 0 0;
background-repeat: repeat-y;
padding: 10px 0 0 0;
}
div#left {
float: left;
width: 250px;
padding: 0 20px 20px 40px;
}
div#content {
float: left;
width: 590px;
padding: 0 40px 20px 0;
}
div#footer {
clear: both;
height: 75px;
background-image: url(../images/footer.png);
background-position: 0 0;
background-repeat: no-repeat;
}
div#blanc {
height: 300px;
width: 100%;
}
Printscreen van het model na toepassing CSS
Aanvullende stijlen voor het model
Om het model verder in te vullen gaan we dummy tekst plaatsen. We herstijlen hiervoor de General Content Styles sectie van het model.css bestand.
body {
font-size: 12px;
line-height: 16px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #004678;
}
h1, h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
line-height: 20px;
font-weight: bold;
margin-bottom: 6px;
}
h3, h4, h5, h6 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 20px;
font-weight: bold;
}
p, ol, ul {
font-size: 12px;
line-height: 16px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #004678;
}
a {
outline: 0 none;
text-decoration: underline;
color: #004678;
}
a:hover {
outline: 0 none;
text-decoration: none;
color: #0689e6;
}
/* Input, select en button stijlen
In de reset stylen hierboven zijn de marges en padding op 0 gezet.
Om deze reden zijn een aantal stijlen hersteld. */
input.inputbox {}
select.inputbox {}
button, input.button {
padding: 1px 7px 1px 7px;
}
/* Deze stijlen voor genummerde (ol, li), ongenummerde (ul, li) en definitie
lijsten (dl, dt, dd) zijn opgenomen om de reset stijlen te overschrijven.
Indien gewenst kunt u deze hier verwijderen. */
/* Ongenummerde en genummer lijsten */
ul {
padding: 0 0 0 15px;
list-style: disc;
}
ul li ul {
list-style: circle;
}
ol {
padding: 0 0 0 20px;
list-style: decimal;
}
ol li ol {
list-style: lower-alpha;
}
Printscreen na toepassen CSS en dummytekst en het content gedeelte.
U kunt nog verder gaan door ook een dummy topmenu, linkermenu of searchbox op te nemen. Dat laten we verder aan u over. Hoe meer u in het model gestijld heeft, hoe eenvoudiger u het in het Joomla template model kunt overbrengen.
Reacties (6)
-
1901-12-13 20:45:52 |Unregistered| Rob van Oudheusden - Re model,cssDit is een model om mee te "spelen". U kunt toevoegen of weglaten wat u wilt en het effect bekijken.
-
1901-12-13 20:45:52 |Unregistered| Loes - model.cssMijn model css ziet er wat anders uit dan het voorbeeld hier. Er staat bij mij geen body onder Template styles. Kan ik dat gewoon invoegen of is er iets gewijzigd sinds deze uitleg op de site staat?
Ik ben al lerend aan het stoeien dus als het dom klinkt dan kan dat zomaar het geval zijn. :p
-
Op deze pagina staat een download link onder het hoofdstuk IE6 transparantie, 2e alinea.
Daarin zijn zowel de normale alsmede de afbeeldingen voor IE6 opgenomen.
-
1901-12-13 20:45:52 |Unregistered| Imma - photoshopOp de site staan onderstaande instructies.
Vragen:
1. Waar vind ik het Photoshop bestand?
2. Hoe moet ik de afbeeldingen maken?
Nadat de teksten zijn verwijderd gaan we naar het Photoshop bestand van het ontwerp van Joomla en maken de achtergrond afbeeldingen voor de website.
Van dit bestand maken we een aantal afbeeldingen die we voor de website gaan gebruiken.
Achtergrondafbeelding (bg_body.jpg = 2.000 x 1.300 pixels)
Header (header.png = 942 x 123 pixels)
Content (main.png = 942 x 20 pixels)
Footer (footer.png = 942 x 54 pixels)
Powered by Compojoom comment 4.2.1