Dreamweaver grundkurs III : CSS-styling

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Feb 2006

Dreamweaver grundkurs III : CSS-styling

Ikväll skrev jag en liten guide för extrema nybörjare inom CSS kodning. Om du är osäker på vad CSS är så finns en liten beskrivning av det nedan här.

Citat:

CSS - (Cascading Style Sheets) är stilmallar som gör det enklare för både den som skapar och för den som besöker hemsidan att ladda och styla sidan. CSS används för att formge text, bakgrund, länkar, formgivning, bilder osv. En enda CSS-mall kan användas till att styra tusentals dokument vilket gör det enkelt att redigera sidans layout genom att bara ändra koden i CSS-mallen. Man kan säga att CSS har givit HTML en boost gällande formatering och enkelhet inom området, och även givit kod-möjligheter som inte finns i HTML-standarden. Så den största fördelen med CSS är enkelheten och friheten att kunna redigera flertalet hemsidor genom en fil. Man bör ha så mycket formgivningskod i en extern CSS mall, så att mängden formgivningskod minskar så mycket som möjligt, och får då sidorna att ladda snabbare. Då man använder samma mall, behöver inte webbläsaren läsa samma fil flera gånger när en sida anropas.

URL TILL GUIDE: http://www.schello.se/?page_id=537

Vore tacksam för feedback på guiden!
// Tulle

Intel Core i5-3570K @ 3.40Ghz / 16 GB ram / 120 GB SSD / 1 TB HDD / Geforce GTX 580 / Acer s273HL 27" LED

- Windows 8? Avgå!

Trädvy Permalänk
Medlem
Plats
Stenungsund
Registrerad
Sep 2004

kan du inte bara ha en tråd och länka dina guider i första posten?

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Feb 2006

Blir det för grötigt om jag skapar nya trådar varje gång?

Intel Core i5-3570K @ 3.40Ghz / 16 GB ram / 120 GB SSD / 1 TB HDD / Geforce GTX 580 / Acer s273HL 27" LED

- Windows 8? Avgå!

Trädvy Permalänk
Medlem
Registrerad
Okt 2003

ja det blir onödigt många trådar ivarje fall

Laptop - MacBook 2.0GHz, 4GB ram, Intel GMA 950
Stationär - i5 3570k @ 4ghz, 8gb ram, 120gb ssd + 2tb hdd, Windows 8 64bit, fractal design arc
Citera så jag hittar tillbaka :)

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Feb 2006
Citat:

Ursprungligen inskrivet av E_maN
ja det blir onödigt många trådar ivarje fall

Okej, då ska jag börja tänka på det i fortsättningen.
Men vad tycker ni om guiden annars då?

Intel Core i5-3570K @ 3.40Ghz / 16 GB ram / 120 GB SSD / 1 TB HDD / Geforce GTX 580 / Acer s273HL 27" LED

- Windows 8? Avgå!

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jan 2007

Ganska intetsägande guide om jag ska vara ärlig.

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Feb 2006
Citat:

Ursprungligen inskrivet av You
Ganska intetsägande guide om jag ska vara ärlig.

Ja självklart är den det för dig ja. Som verkar kunna rätt mycket om sånt här. Men om du kan tänka dig tillbaka till den tiden när du var über-nybörjare på kodning, html och design... hade du inte kanske funnit denna guide liiiite intressant?

Eller tycker du bara att den är intetsägande för att du redan kunde allt?

Exakt vad är det som är intetsägande?

Intel Core i5-3570K @ 3.40Ghz / 16 GB ram / 120 GB SSD / 1 TB HDD / Geforce GTX 580 / Acer s273HL 27" LED

- Windows 8? Avgå!

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jan 2007
Citat:

Ursprungligen inskrivet av hemfrid
Ja självklart är den det för dig ja. Som verkar kunna rätt mycket om sånt här. Men om du kan tänka dig tillbaka till den tiden när du var über-nybörjare på kodning, html och design... hade du inte kanske funnit denna guide liiiite intressant?

Eller tycker du bara att den är intetsägande för att du redan kunde allt?

Exakt vad är det som är intetsägande?

Det man i princip får veta är 1) hur man skapar en tom CSS-fil i DW, 2) hur man stylar länkar, inget annat. Ingen ingående förklaring av vad som händer och 3) hur du importerar CSS i ditt HTML-dokument. Lite om stil på body också.

Att du lär ut bad practice (t.ex. px-storlek på text) gör inte saken bättre.

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Feb 2006

Ja precis. Man får veta några få basic saker. Så att man börjar lungt. Och det är inte direkt att jag struntat i att förklara vilka steg man går igenom.

Du tyckte ju att den va intetsägande eftersom det är enkelt, ellehur. Men det finns faktiskt folk som har börjat med HTML för första gången. Dom kanske till och med har börjat idag. Eller igår, och ville bara prova på lite css. Och då är min guide alldeles utmärkt. Jag har inte skrivit någonstans att den är "Advanced" eller nåt sånt. Snarare tvärtom.

Och sen om jag lär ut bad practice eller inte gällande px-storlek på text vette fan. Det är ju lite av en smaksak och standard i mina ögon. Jag kodar alltid mina css filer i px, och kan inte förstå vad du tycker är så himla dåligt med det?

Intel Core i5-3570K @ 3.40Ghz / 16 GB ram / 120 GB SSD / 1 TB HDD / Geforce GTX 580 / Acer s273HL 27" LED

- Windows 8? Avgå!

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jan 2007
Citat:

Ursprungligen inskrivet av hemfrid
Du tyckte ju att den va intetsägande eftersom det är enkelt, ellehur. Men det finns faktiskt folk som har börjat med HTML för första gången. Dom kanske till och med har börjat idag. Eller igår, och ville bara prova på lite css. Och då är min guide alldeles utmärkt. Jag har inte skrivit någonstans att den är "Advanced" eller nåt sånt. Snarare tvärtom.

Det är inte för att det är "enkelt". Det är för att det är så sjukt begränsat att det inte leder nånstans. Man bör börja i en annan ände, förklara hur CSS är uppbyggt (dvs. selektorer och regler), och sedan kanske komma fram till att så här kan man göra. Nu blir det mer copy-paste-guide, inte särskilt lärorikt.

Citat:

Ursprungligen inskrivet av hemfrid
Och sen om jag lär ut bad practice eller inte gällande px-storlek på text vette fan. Det är ju lite av en smaksak och standard i mina ögon. Jag kodar alltid mina css filer i px, och kan inte förstå vad du tycker är så himla dåligt med det?

Teckenstorlek i px är en dålig idé.

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Feb 2006
Citat:

Ursprungligen inskrivet av You
Det är inte för att det är "enkelt". Det är för att det är så sjukt begränsat att det inte leder nånstans. Man bör börja i en annan ände, förklara hur CSS är uppbyggt (dvs. selektorer och regler), och sedan kanske komma fram till att så här kan man göra. Nu blir det mer copy-paste-guide, inte särskilt lärorikt.

Teckenstorlek i px är en dålig idé.

Okej, ska jag vara ärlig så visste jag inte det där om px i till fonts.
Men det som är tanken med min guide, är att visa att det går att göra saker med CSS. Att det går att få effekt på sidan.

Det var så jag en gång i tiden upptäckte att det var kul att använda det.
Och ser om det är en "copy-taste" guide gör ingenting. Det var så jag lärde mig.

Jag ville med att de som är extrema nybörjare inte ska skrämmas iväg av en massa invecklade förklaringar, 400 förslag på olika koder, fördjupning inom området, kräva förståelse för hur det fungerar osv osv. Jag ville mer ge information om hur & varför man använder CSS i Dreamweaver.

Därför kände jag att en copy paste guide var skönast för nybörjaren.

Intel Core i5-3570K @ 3.40Ghz / 16 GB ram / 120 GB SSD / 1 TB HDD / Geforce GTX 580 / Acer s273HL 27" LED

- Windows 8? Avgå!

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Feb 2005

Är det av någon speciell anledning du skriver guider eller bara för sakens skull?
Det är annars väldigt nyttigt för en själv att skriva guider för man inser lätt vilka delar man saknar.
En bra sida att nämna i guiden kan va http://w3schools.com/css/default.asp där man grundligt får information om hur det är strukturerat och hur man bör och inte bör göra.

i7 920 | 12GB DDR3 | GTX 480 | GA-X58A-UD7 | 160GB SSD X25-M G2 | 1TB F3 HD103SJ | W7 64-bit | Mac Mini
Webb: bluekitestudios.com

Trädvy Permalänk
Medlem
Plats
i din garderob
Registrerad
Sep 2007

Jag tycker det är ett grymt initiativ att du gör guider för nybörjare, men tycker även att de blir lite snäva ibland. Länkexemplet tycker jag är smått förvirrande men inledningsförklaringen är bra; jag skulle gärna se att den blev ännu mer utförlig för att verkligen understryka målet med CSS.

Länken till webdesignskolan.se ger minuspoäng. Många har klagat på den sidan tidigare, jag har slängt ett getöga åt dess håll och den är verkligen så usel som folk påstår. Ta det inledande stycket ur Javascript / Java som exempel:

Citat:

Javascript är ett scriptspråk som är baserat på programspråket Java. Scriptet infogas i HTML-koden till skillnad från Java som är en programfil som exekveras av webbläsaren.

Två meningar och bägge är antingen missvisande eller helt felaktiga.

Bilanaloger är som Volvo — varenda svenne kör med dem

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jun 2004

Jag håller med om kritiken angående guiden, och tillägger att om guiden behandlar DreamWeaver för nybörjare ska man väl inte behöva skriva in en massa HTML och CSS själv? Det är ju trots allt själva poängen med ett peka-klicka-program; att man inte behöver kunna så mycket.

Citat:

Ursprungligen inskrivet av You
Teckenstorlek i px är en dålig idé.

Däremot håller jag inte med om detta. Problemen med font-size i relativa enheter är en rent principiell fråga. Jag ställer mig själv dessa frågor:

  • Ska användaren tvingas till att läsa en text i 9 px bara för att webbutvecklaren tyckte att 9 px var lagom storlek?

  • Ska webbutvecklaren sluta använda ett bra verktyg bara för att en webbläsare inte klarar av att hantera det?

  • Ska en webbutvecklare räkna med att dåligt seende besökare använder den webbläsare som är sämst på att hantera textstorlekar?

Vilket för mig mynnar ut i att använda absoluta enheter, åtminstone så länge den front-end jag kodar är så pass avancerad att det tar mig väsentligt mycket längre tid att välja relativa enheter. Är det en väldigt enkel sida kan jag dock välja relativa enheter "på skoj", för att inte glömma bort dem.

Trädvy Permalänk
Medlem
Plats
Stenungsund
Registrerad
Sep 2004
Citat:

Ursprungligen inskrivet av You
Teckenstorlek i px är en dålig idé.

Den första länken där är lite... outdated... fast det kanske bara är jag som inbillar mig att de faktiskt har fixat det där i IE8? Orkar inte starta upp den skitwebbläsaren bara för att kolla

hemfrid:

Det är ingen som säger att du inte FÅR använda px, men på sidor som t ex bloggar är det vettigt att använda relativa enheter (em, %, pt) där det inte är så jätteviktigt att t ex tabulär data presenteras på ett bra vis.

Däremot: Säg att jag skulle designa ett system med t ex en varukorg. Då skulle jag aldrig använda em till den varukorgen, för det är viktigare att den håller ihop som ett element än att den skalar i storlek. Och om folk har problem med att läsa det som står så har de flesta webbläsare även en zoom-funktion.

Det här är högst individuellt och väldigt situationsanpassat.

Men jag tycker inte man ska lära ut hur man använder px utan att dessutom ha med ett avsnitt som behandlar de andra enheterna.

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jun 2004
Citat:

Ursprungligen inskrivet av darkmoon
fast det kanske bara är jag som inbillar mig att de faktiskt har fixat det där i IE8?

Man kan i IE7 och 8 sätta både minimum font-size och zooma hela sidan för att förstora texter. Man kunde förstora liten text redan i IE6, även om det var lite bökigt (man var tvungen att slå på någon accessibility option).
Källa: http://alastairc.ac/2006/11/browser-zoom-comparison/