Vi skall här ordna några enkla menyer med ett stylesheet. Några exempel på hur du kan skifta färg både i bakgrund och text med hover kommandot. |
| Hem | sida B | sida C | sida D |
sida E |
sida F |
| sid1
sid2
sid3
sid4
sid5
sid6
sid7
sid8
sid9
sid10
sid11
sid12
sid13
sid14
sid15
sid16
sid17
sid18
sid19
sid20
sid21
sid22
sid23
sid24
sid25
sid26
sid27
sid28 |
här har vi använt <!--start av kod-->.meny1 {background-color:#FFFFFF; font-family:Arial, Helvetica, sans-serif; color:#000000; border:double}
.meny1 a{background-color:#CCCCCC; font-family:Arial, Helvetica, sans-serif; color:#0000FF; display:block;}
.meny1 a:hover{background-color:#000000; font-family:Arial, Helvetica, sans-serif; color:#FFFFFF}
<!--slut på kod--> I vår css fil och sedan <!--start kod--> <table class="meny1"><tr><td><a href="#">Hem</a></td><td><a href="#">sida B</a></td><td><a href="#">sida C</a></td><td><a href="#">sida D</a></td>
<td><a href="#">sida E </a></td>
<td><a href="#">sida F </a></td>
</tr>
<tr>
<td><a href="#">sida A0</a>
<a href="#">sida A1</a>
<a href="#">sida A2</a>
<a href="#">sida A3</a>
<a href="#">sida A4</a>
<a href="#">sida A5</a>
<a href="#">sida A6</a></td>
<td colspan="5">Här skriver vi text med detta kodexempel </td>
</tr></table><!--slut på kod--> I vår tabell på sidan. Lägg märke till starttaggen för table där vi skrivit <table class="meny1> . Denna tagg säger till webbläsaren att hämta utseendet för tabellen i vår css fill på raden med vit bakgrund som vi beskriver: background-color:#FFFFFF |
|
|
Sedan säger vi att fonterna vi skall använda är Arial, Helvetica, sans-serif med kommandot: font-family: Arial, Helvetica, sans-serif, vi säger att färgen på fonterna eller bokstäverna skall vara svart med kommandot color: #000000, vi har även lagt till en border eller rand runt tabellen med kommandot border:double |
|
När det sedan gäller celler där det ingår en länk, som vi beskriver med: .meny1 a , skriver vi att bakgrundsfärgen skall vara grå med kommandot background-color:#CCCCCC, bokstäverna skall vara de samma men färgen på dem skall vara blå med kommandot color:#0000FF |
|
För att sedan få vår hover effekt skriver vi på nästa rad med start .meny1 a:hover. Här säger vi att bakgrunden skall ändras till svart med kommandot background-color:#000000 och att bokstäverna då skall bli vita med kommandot color:#FFFFFF |
|
Vi har lagt upp en variant på sidan här>>> (öppnar i ett nytt fönster) |
| För att göra det enkelt har vi bara använt olika nyanser av grått. |
|
| Du kan använda många andra bakgrundsfärger som rött, orange, blått eller vad du vill. Experimentera gärna med olika färger. Det man mest använder är RGB kodade fäger i hexadecimalt. De två första tecknen är Rött, de nästa är Grönt och de sista är blått. Skall du ha en helt röd bakgrund ancänder du alltså #FF000. Vi skall lägga några exempel på denna sidan. |
Rött får du med färg koden #FF0000 vilket ger en röd bakgrund när man använder kommandot background-color:#FF0000; |
| Denna ger en gul bakgrund med background-color:#FFFF00; |
background-color:#99FF00; |
|
| Ljusblått med background-color:#CCFFFF |
background-color:#FFFFCC; |
|
| background-color:#99FFCC |
|
|
| Självklart kan du även ändra på bokstävernas färger med liknande koder. Kommandot heter color. |
Som här där vi angett färgen på texten med kommandot color:#999999 |
användbara länkar där du kan läsa mer |
cssdrive.com
tips på stylesheets med exempel på slutliga resultatet |
cssimport.com
En sida som ger inspiration |
alistapart.com
Här hittar du mycket att sätta händerna i |
codeproject.com
har många sidor med stylesheets och exempel. |
|
| Med purecssmenu skapar du enkelt menyer online. Bestäm hur många menyer du skall, ha, avstånd emellan, färg och allt direkt online. |
Med cssmenumaker ordnar du menyer med bilder och hela kitet direkt online.
| |
Dreamweaver CS5 Grunder
(Spiral)
av
Irene Friberg
Adobe Dreamweaver CS5 används för att skapa webbsidor och bygga upp webbplatser. Med den här boken lär du dig grunderna i programmet. Du lär dig om hur du kan sätta färg på olika delar av webbsidorna, samt skapa mallar, ramar och länkar. Boken tar också upp grunderna i CSS så att du lättare ska förstå dess potential. När webbsidorna är klara ska de föras över till en server och du får kunskap om hur detta går till med programmets verktyg för filöverföring. Med dialogrutan Platskonfiguration skapar du enkelt en lokal webbplats-mapp som förenklar filöverföringen till webbservern. Boken kan användas för både pc och Mac.
I boken varvas teoridelar med steg för steg-beskrivningar som är lätta att följa. I tillämpningsuppgifterna får du arbeta självständigt och pröva dina nyvunna kunskaper. Övningsfilerna till boken laddar du ner utan kostnad från vår webbplats www.docendo.se..
Vår serie På rätt kurs är grund- och fördjupningsböcker där du genom att följa instruktioner lär dig viktiga funktioner i programmen. Teoridelar och övningar är sammanvävda och böckerna fungerar både för lärarledd undervisning och självstudier.
 Adobe Dreamweaver CS5 Classroom in a Book: The Official Training Workbook from Adobe Systems [With DVD ROM]
(Häftad)
av
James J. Maivald
Kreatörer som söker det snabbaste, enklaste och mest heltäckande sättet att lära sig Adobe Dreamweaver CS5 väljer Adobe Dreamweaver CS5 Allt i en bok från Adobe Creative Team på Adobe Press.
De 18 projektbaserade lektionerna i den här boken visar läsarna steg-för-steg de viktigaste teknikerna för att arbeta i Dreamweaver CS5. Läsarna lär sig det de behöver veta för att skapa en professionell hemsida utan att behöva gräva i koden. Denna helt reviderade utgåva CS5 omfattar Adobes Spry Framework for Ajax för att skapa dynamiska gränssnitt till Spry-widgets (färdiga användargränssnitt komponenter) snabbt lägga till vanliga komponenter till webbsidor, och Live View, en fungerande webbläsare som gör rätt i programmet. Boken visar också hur du skriver in text i rubriker, stycken, listor och tabeller, infoga grafik och Photoshop smarta objekt, lägga till länkar till text och bilder, tillämpa formatmallar, och anpassa Dreamweavers arbetsyta. Läsarna kommer också att lära sig lägga till interaktiva element på sina webbplatser, till exempel Flash video och animation, få vägledning för att arbeta med kod och slutligen publicera en färdig sajt på webben.
Följeslagar- DVD:n innehåller lektion och filer så att läsarna kan arbeta tillsammans med boken, liksom 2 timmars gratis video tutorials från "Lär dig Adobe Dreamweaver CS5 av Video" genom video2brain och Adobe Press.
"De Allt i en bok-serien är det absolut bästa utbildningsmaterial på marknaden. Allt du behöver för att behärska programvaran ingår: tydliga förklaringar av varje lektion, steg-för-steg-instruktioner, och de filer eleverna behöver för projektet "-Barbara Binder, Adobe Certified Instructor, Rocky Mountain Training.
Allt i en bok ®, den bästsäljande serien praktisk arbetsböcker programvara utbildning, hjälper dig att lära dig funktionerna i Adobe-programmen snabbt och enkelt. Allt i en bok erbjuder vad ingen annan bok eller utbildningsprogram gör-en officiell träning serie från Adobe Systems Incorporated, utvecklat med stöd av Adobe-produkt experter.
 Hostgator erbjuder en sitebuilder och 4500 olika färdiga mallar att använda.
Du väljer helt enkelt en mall du tycker ser bra ut och fyller den sedan med dina bilder, text och länkar. Du behöver knappt någon kunskap i html bara ett litet hum om hur du vill din hemsida skall se ut. Sedan skriver du dina artiklar och, voilá, din hemsida är uppe på fem minuter. Sedan har du även möjlighet att lägga upp en e-butik, ett cms system, forum, bloggar eller vad du vill snabbt och enkelt. Här finns dygnet runt support om det är något du tycker verkar krångligt. Här finns nästan inga begränsningar på varken databaser, domäner eller plats. |
