Annons:
Etikettwebbdesign
Läst 16624 ggr
johan
2007-03-23 22:38

En modern webbsida steg för steg

Bild 1. Klicka för att öppna i full storlek.

Steg för steg lär du dig att bygga en modern professionell hemsida. Du kommer möta webbstandardarder, XHTML och CSS.

Tidigare har vi tittat på varje del för att bygga en professionell hemsida med modern webbstandardarder.

De tidigare delarna har varit:

I denna artikel ska du få se konkreta exempel på hur du kan sätta samman alla delarna. Du bör ha läst de tidigare artiklarna eller ha en grundförståelse för HTML och CSS.

Syftet med hemsidan

Syftet med min hemsida är att ge min pappa, konstnären Åke Nordberg, en hemsida där han kan visa upp sina tavlor. Han kan ingenting om att bygga hemsidor. Sidan måste därför vara riktigt enkel att uppdatera.

Största syftet är att kunna visa upp de nyaste tavlorna och berätta om när och var han har utställningar. Förmodligen är besökaren ganska ovan vid datorer och internet. Sidan måste därför vara väldigt enkelt att förstå.

Besökare kan dels redan kunna adressen, men mer troligt är att de hittar till den med hjälp av någon sökmotor som t ex Google. Därför måste sidan vara så anpassad som möjligt för att Google ska kunna indexera innehållet på sidan.

Besökarna kommer troligtvis inte köpa tavlor direkt från hemsidan, men däremot ska det vara väldigt enkelt att hitta kontaktuppgifter för att komma i kontakt med konstnären.

Textinnehållet

Har man väl hittat till hemsidan är man troligtvis mest ute efter att titta på tavlorna eller att veta när och var utställningarna är. Textinnehållet kommer därför vara rätt kortfattat och förmodligen inte uppdateras så himla ofta.

Däremot ska sidan innehålla många ord som användare kan tänkas söka på i sökmotorer. Förhoppningsvis kan fler hitta hemsidan av en ren slump, t ex om man söker på resmål. Det är därför viktigt att alla bilder är väl beskrivna med så kallade alt-texter. Detta gör att även Google kan ”se” bilderna.

Layout

Sidans layout och design ska vara riktigt enkel. Det kommer inte finnas speciellt många sidor så navigationen kan göras riktigt enkel och tydlig.

Designen ska även hjälpa till att visa tavlor, så färgval och illustrationer kommer vara sparsmakade.

Redan på startsidan ska användaren slussas in till visningen av tavlorna. På startsidan visas därför alltid de senast inlagda bilderna, samt länkar till de olika bildkategorierna. Tack vare kategori-länkarna kommer viktiga sökord finnas redan på startsidan.

Eftersom sajten inte kommer ha speciellt mycket innehåll räcker det att ha en väldigt enkel navigation. Sidorna kommer inte ha några undersidor.

Inledningsvis kommer sajten ha följande sidor:

  • Start
  • Tavlor
  • Utställningar
  • Om konstnären
  • Kontakt

HTML-kodens struktur

Varje del i sidan delas in i olika grupper av innehåll. Detta görs med DIV-element. Fördelen med detta är just att vi kan formge sidan nästan hur vi vill med hjälp av CSS. Vi behöver egentligen inte veta i förväg hur sidan kommer se ut, bara vi vet strukturen på sidan.

Inledningsvis tänker jag mig att sidan ska innehålla sidhuvud, navigation, stor innehållsyta, en sidospalt och en sidfot där adressuppgifter alltid ska vara tillgängliga. Sidospalten kommer inte visas på alla sidor utan bara där den fyller ett syfte.

Hemsidans olika delar och divar

Strukturen i koden ser ut så här:

· Body

  • Div för att kapsla in allt innehåll
    • Div för sidhuvud
    • Div för navigation
      • Ul för navigation
        • Li för länk
          • Länk
        • Li
          • Länk
        • Li
          • Länk
    • Div för innehåll
      • Rubrik
      • Text
      • Underrubriker
      • Mer text
    • Div för högerspalt
      • Rubrik
      • Text
    • Div för adressuppgifter
      • Adress

·

Koden kommer inte att innehåll något utseende alls. Den innehåller enbart struktur och innehåll. Tack vare att vi kapslat in varje del av sidan med olika DIV-element med unika ID eller CSS-klasser blir det enkelt att skapa en enda CSS-stilmall för alla sidor.

Detta ger många fördelar, bland annat:

  • Lätt att uppdatera innehållet
  • Lätt att få formgivningen enhetlig över hela sajten
  • Lätt att ändra utseende på hela sajten utan att behöva ändra i enskilda sidor
  • Bättre när Google ska indexera sidan
  • Bättre tillgänglighet för människor med funktionshinder

Vi bygger en mallsida

Jag tänker börja med att göra en mallsida. Denna kommer följa strukturen ovan, men ännu så länge inte ha något utseende.

Så här ser koden ut:

<head>

   

    <title>Roslagskonst - Åke Nordberg</title>

</head>

<body>

   

       

        </div>

       

<ul>

<li\><a  href\="Default.aspx">Hem</a\></li\>

<li\><a  href\="Art.aspx">Visa tavlor</a\></li\>

<li\><a  href\="Shows.aspx">Utst&auml;llingar</a\></li\>

<li\><a  href\="About.aspx">Om &Aring;ke Nordberg</a\></li\>

<li\><a  href\="Contact.aspx">Kontakt</a\></li\>

</ul>

</div>

<h1>Sidans rubrik</h1>

<p>Exempel på innehåll</p>

<h2>Underrubrik</h2>

<p>Exempel på mer innehåll.</p>

</div>

<h2>Rubrik i sidospalten</h2>

<p>Innehåll i sidospalten</p>

</div>

&Aring;ke Nordberg<br />

Svanbergav&auml;gen 27<br />

761&nbsp;73 Norrt&auml;lje

</address>

<a  href\="mailto:ake.nordberg@roslagskonst.com">

 ake.nordberg@roslagskonst.com

</a\><br />

Telefon: 0176-229 329

</address>

</div>

</div>

</body>

</html>

Om du har ett HTML-program som kan göra mallar är det en bra idé att spara detta som en mall som du sedan kan utgå från när du skapar nya sidor. Hur som helst så sparar jag denna fil som default.htm.

När man tittar på detta i webbläsaren så ser det kanske inte så kul ut än, men vi har en perfekt grund för att formge sidan precis hur vi vill.

Hemsidan utan något utseende

Trots att sidan inte är så snygg än, så fungerar den faktiskt. Det finns en tydlig navigation. Det är enkelt att se vilka rubriker som är viktigast och vi adressuppgifterna särskiljer sig från den övriga texten.

Formge sidan med CSS

Nu kommer vi till den kanske roligaste biten. Nu ska vi formge sidan. Jag kommer att lägga all CSS i en egen fil så att jag kan utnyttja samma fil på alla sidor i sajten. Jag strävar alltid efter att så långt det går separera innehåll från utseende.

Jag har en idé om att den slutliga sidan ska se ut ungefär så här:

En idé om hur hemsidan ska se ut när den är färdig.

Typografi

Det första jag tänker göra är att bestämma teckensnitt och storlekar för text och rubriker. Ett teckensnitt som jag tycker är snyggt och som många bloggar använder är ”Trebuchet Ms”. Den gör sig bra i lite större storlek.

I en helt ny fil som jag döpt till styles.css lägger jag in följande kod:

body

{

font-family: "Trebuchet MS", "Times New Roman";

font-size: 90%;

}

Att tilldela elementet body denna stildefinition gör att precis all text i hela sidan får denna stil. Det sker tack vare att alla stildefinitioner ärvs ned till alla barn-element. Alla element som har med innehåll att göra är ju barn, barnbarn etc till just body-elementet.

Koden font-family, eller selektorn som den egentligen kallas, ger all text teckensnittet ”Trebuchet MS” och om det inte finns installerat används ”Times New Roman”. Det är bra att ange flera teckensnitt. Separerar varje alternativt teckensnitt med kommatecken.

Storleken på texten bestäms med selektorn font-size. 90% betyder att det ska vara 90% av standardstorleken. Storlekar kan anges i pixlar (px), punkter (pt), procent (%) eller em. Pixlar och punkter är ofta mer exakta och förutsägbara, men gör också att texten inte kan förstoras eller förminskas i vissa webbläsare. Du bör helst använda procent eller em då användaren själv kan bestämma hur stor texten ska vara. Detta är t ex viktigt för personer med nedsatt syn.

Enheten ”em” är lite lurig. 1 em är samma som 100%. 0.8em är samma som 80% och 1.5em är samma som 150%.

Jag fortsätter med att lägga till följande kod:

h1

{

font-size: 200%;

margin: 0 0 0.5em 0;

font-weight: normal;

}

h2

{

font-size: 150%;

margin: 0 0 1em 0;

font-weight: bold;

}

p

{

margin: 0 0 1em 0;

line-height: 1.5em;

}

Denna kod gör alla h1-element, dvs. den viktigaste rubriken, dubbelt så stor som normaltexten. Selektorn margin bestämmer ur stort utrymme det ska vara runt elementet. Marginalerna anges i ordningen topp, höger, botten och vänster. Koden margin: 0 0 0.5em 0; betyder att det inte är något utrymme över, till höger eller till vänster om rubriken, men under rubriken ska det vara ett utrymme som är hälften så stort som rubrikens höjd. 0.5em bestämmer just att det är hälften av rubrikens höjd. Ju större text, desto större avstånd.

Koden font-weight: normal; bestämmer att rubriken ska vara normal stil. Som standard är rubrik 1 fet stil, därför behöver jag sätta den till normal om jag vill slippa standardutseendet.

För rubriknivå två, dvs. elementet h2, är teckenstorleken 150% av normalstorleken, avståndet under rubriken är lika högt som rubrikstorleken och rubriken ska vara fet stil.

Slutligen har jag lagt in en definition för alla p-element, dvs. vanliga textstycken. Som standard har varje p-element en tom rad ovanför sig. Jag vill hellre ha detta under stycket. Det löser jag med margin-selektorn. Dessutom ökar jag radavståndet för att texten ska bli luftigare. Koden line-height: 1.5em gör radavståndet 1.5 ggr det normala avståndet.

För att se hur sidan ser ut med dessa stilmallar behöver jag länka in stilmallen i HTML-sidan. Först sparar jag CSS-filen som styles.css i samma mapp som HTML-filen. Därefter lägger jag till -element mellan och

Roslagskonst - Åke Nordberg

<link rel="stylesheet" type="text/css" href="Styles.css" />

Om jag nu tittar på HTML-sidan har ser den ut så här:

Hemsidan med typografi

Inga stora underverk ännu så länge, men ett steg på vägen.

Layout

Nästa steg är att få lite med formgivning på sidan. Jag vill att sidan ska ha en bestämd bredd och att sidan ska vara centrerad i webbläsaren.

Tack vare att vi lade ett div-element runt allt innehåll är detta relativt enkelt. För att centrera sidan behöver vi dock göra lite annorlunda i Internet Explorer 6.0 och andra webbläsare som är bättre på att följa webbstandardarder.

Öppna CSS-filen igen och ändra definition för body-elementet så att det istället står:

body

{

font-family: "Trebuchet MS", "Times New Roman";

font-size: 90%;

background-color:#efefef;

margin: 0;

}

Lägg även till detta i slutet av filen:

.PageContainer

{

margin: 0 auto 0 auto;

width: 770px;

background-color: white;

}

Koden background-color: #efefef; bestämmer att bakgrunden för hela sidan ska vara ljust grå. Du kan lära dig mer om färgkoder på Wikipedia.

Koden margin: 0; bestämmer att sidan inte ska ha några marginaler alls. När både topp, höger, botten och vänster ska ha samma marginal, räcker det med att ange det en gång.

Som du kanske minns från Intruktion till CSS så betyder punkten i inledningen till .PageContainer att detta är namnet på en CSS-klass. Samma namn har jag angett på div-elementet i HTML-sidan.

Koden margin: 0 auto 0 auto; gör att sidan centreras horisontellt, men inte några marginaler i toppen eller botten av sidan. Det är just denna del som inte fungerar i IE6. Vi kommer till en lösning till för det.

Koden width: 770px; bestämmer att sidans bredd ska vara 770 pixlar. Jag bestämmer även att allt inuti sidan ska ha vit bakgrund. Att jag valt just 770px beror bland annat på att det ger en behaglig sidbredd för att läsa texterna och för att det får plats på en skärm med upplösningen 800x600px.

I vissa avseenden är det bättre att undvika fasta bredder. En mer flytande layout skulle anpassa sig bättre efter olika skärmar och bättre kunna visas på mobiltelefoner eller handdatorer.

Fortsätt att lägga till nedanstående kod:

.PageHeader

{

height: 120px;

background-color: Red;

}

.PageFooter

{

padding: 1em 2em 2em 2em;

border-top: 1px solid #ffcc00;
color: #666;
background-color:#efefef;
overflow: auto;

}

.PageFooter address

{

float: left;

width: 33%;

}

.ContentContainer, .SideColumn

{

padding: 2em;

}

Eftersom jag ännu inte riktigt bestämt mig för hur sidhuvudet ska se ut, så gör jag bara ned röd yta av det. I klassen .PageHeader har jag bestämt att höjden på sidhuvudet ska vara 120px. Temporärt har jag även lagt till en röd bakgrundsfärg.

I sidfoten har jag lagt till två selektorer som heter padding och border. Border skapar kantlinjer runt elementet. Padding skapar utfyllnad mellan kantlinjen och innehållet.

Boxmodellen

Förhållandet mellan margin, border och padding brukar kallas för ”boxmodell”. Hur de hänger ihop visas enklast med nedanstående bild:

Boxmodellen

Innerst ligger innehållet. Det är på denna yta du kan bestämma bredd och höjd. För att få luft mellan innehåll och eventuell kantlinje kan du använda padding. Utanför padding kommer kantlinjen. Kantlinjer kan ha olika tjocklekar, färger och stilar. För att få luft mellan kantlinjen och elementen runtomkring används margin.

Detta är viktigt då både margin, border och padding påverkar elementets bredd. Om du bestämt bredden till 200 pixlar, har 20px padding på vardera sidan, en 2px bred kantlinje och 10px bred marginal kommer elementets totala bredd bli 200 + (20*2) + (2*2) + (10*2) = 264px.

Figursättning med float

I sidfoten finns två address-element. Att jag valt att använda detta element istället för t ex div är för att det blir semantiskt mer korrekt. Det betyder att koden beskriver innehållet, utan att man behöver förstå innehållet. Detta är viktigt för sökmotorer och funktionshindrade, men har även andra användningsområden.

Jag vill att de två adressblocken ska ligga sida vid sida. Koden width: 33%; bestämmer att varje block ska vara 33% av sidfotens bredd. Koden float: left; bestämmer att elementet ska figersättas till vänster, vilket innebär att annat innehåll kan ligga flöda till höger.

Float är det kanske det viktigaste verktyget för att skapa layout utan tabeller.

Fortsätt med att lägga till följande kod:

.Navigation

{

background-color: #FFCC00;

padding: 0.5em 2em 0.5em 2em;

overflow: auto;

}

.Navigation ul

{

margin: 0;

padding:0;

list-style:none;

}

.Navigation ul li

{

float: left;

margin: 0 2em 0 0;

}

.Navigation ul li a

{

color: black;

text-decoration: underline;

}

Nu är det dags att formge navigationen. Den första koden gör egentligen ingenting nytt. Den bestämmer en brandgul bakgrundsfärg och anger utfyllnad runt texten.

Navigationen består av en punktlista. Punktlistor är utmärkta för att skapa t ex navigationer med. En stor fördel är att de har en inbyggt struktur, vilket gör det lätt att skapa trädstrukturer ungefär som filer och mappar.

Koden .Navigation ul tar bort marginal och utfyllnad på alla ul-element som är barn till klassen .Navigation. Koden list-style: none; gör att listan inte får någon punkt framför sig.

Navigation, ex 1

Koden .Navigation ul li låter varje li-element ligga bredvid varandra. Marginalen till höger om varje li-element är satt till 2em, dvs. två teckens bredd.

Navigation, ex2

Som du kan se så lägger sig länkarna nu över den gula bakgrundsfärgen. För att ordna detta har jag satt koden overflow: auto; på klassen .Navigation.

Slutligen bestämmer koden .Navigation ul li a att länkar i navigationen (a-elementen) ska vara svarta och alltid vara understrukna.

Navigation, ex 3

Att skapa kolumner med CSS

Nu återstår endast att låta innehållsytan och sidospalten visas som två kolumner. Även det ska göras genom att använda float.

Lägg till denna kod:

.ContentContainer

{

float: left;

width: 480px;

}

.SideColumn

{

float: right;

}

Koden float:left; på klassen ContentContainer styr att annat innehåll kan flöde till höger. För att verkligen göra plats för en sidospalt bestämmer jag innehållsytans bredd. Jag behöver dels tänka på om jag har marginaler, kantlinjer och padding, men även dra av så mycket som sidospaltens bredd.

I klassen för sidokolumnen sätter jag float: right; för att verkligen högerställa kolumnen. Nu har vi två kolumner vid sidan av varandra utan att ha använt layout-tabeller.

Det är dock ett litet dilemma. Hela sidfoten flödar också till höger om innehållet.

Inte riktigt bra än.

För att bestämma att ett element inte ska flöda runt ett annat element används koden clear: both;. Lägger vi till detta i klassen .PageFooter blir utseendet bättre.

Slutligen

Det sista jag ska göra är att lägga in ett lite bättre sidhuvud. Jag har skapat en bild som passar i ytan. I HTML-koden lägger jag in ett img-element.

</div>

I stilmallen anpassar jag definitionen för PageHeader lite. Jag har bort den bestämda höjden och den röda bakgrundsfärgen, och lägger istället in definition för bilden.

.PageHeader

{

}

.PageHeader img

{

width: 770px;

}

Sidan är nu färgig och med lite mer innehåll ser den ut så här:

Den färdiga hemsidan

Relaterade länkar

Av: johan

  • [Personlig sida](javascript:void top.ShowProfile('johan'))
  • [Kontakta](javascript:void top.ShowProfile('johan', 'Contact.aspx'))

Datum för publicering

  • 2007-03-23

Mvh // Johan

Född vid 334.00 PPM

Annons:
xarfez
2007-03-23 23:30
#1

Du ska ha en eloge för dessa artiklar som du lagt upp nu. Helt crazy seriös ju :).

Nu orkade jag inte läsa igenom dem då jag inte är nybörjare men iaf.

johan
2007-03-23 23:35
#2

#1: Tack! Jag tror att många av besökarna här är nybörjare, så jag tänkte ta det från grunden. Det jag egentligen tycker är roligast är CSS och JavaScript, så det kommer bli mer avancerade tips också.

Mvh // Johan

Född vid 334.00 PPM

xarfez
2007-03-23 23:41
#3

Finemang ju :]

JavaScript kan man alltid bli bättre på.

Tom
2007-03-25 00:03
#4

Oj, det där var seriöst! Superartikel!

Vem som helst kan få det att se proffsigt ut nu!

  Tom

Kattapult
2007-03-31 13:28
#5

Va kul med en sån bra artikel :D.

Jag får prova lite sedan :)

Niklas
2007-04-08 13:42
#6

Verkligen bra artikel! Jag satt och lekte med mallarna. Det blev en hemsida. :-)

http://www.photograf.se/

Vänliga hälsningar

Niklas


Vänliga hälsningar, Niklas
Är du intresserad av runstenar och runristningar?

Annons:
johan
2007-04-08 14:28
#7

Härligt Niklas!

Ser bra ut och snygg kod! Stilmallslänkningen ska ligga mellan och . Du har lagt den precis utanför .

I sidfoten saknas det en

. Visserligen inte ett krav så länge du inte kör xhtml.

Men en viktig sak du glömt är att ange alt-texter för alla bilder. Tänk på Google och funktionshindrade!

// Johan

Mvh // Johan

Född vid 334.00 PPM

Niklas
2007-04-08 15:37
#8

#7: Alt-texterna har jag inte glömt. De kommer. Jag har tagit åt mig av ditt tjat i kommentarerna till alla andras sidor. :-)

Jag ska fixa de andra sakerna.

Tack för kommentarerna!

Vänliga hälsningar

Niklas


Vänliga hälsningar, Niklas
Är du intresserad av runstenar och runristningar?

Zpookey
2007-04-08 15:46
#9

Niklas….Jag bara diggar bilden på ekorren :D
Den är ju grym :)

För att kommentera din hemsida så är den stilren och lättnavigerad…..men ska du verkligen prata om dig själv i tredje person i "Om Niklas Johansson"?

johan
2007-04-08 15:47
#10

#8: Härligt att höra att det ger effekt. :)

Läste för ett tag sedan att 97% av världens hemsidor är otillgängliga för funktionshindrade. Det absolut enklaste man kan göra för att fixa det är just alt-texter och rubrik-element. Och man har ju så mycket att vinna på det själv också med tanke på att Google också gillar sidan bättre då.

Att helt gå ifrån tabellbaserad design är svårare, men något man bör försöka lära sig.

// johan

Mvh // Johan

Född vid 334.00 PPM

ryttarn
2008-01-05 23:54
#11

Jag blev lite inspirerad och tänkte börja designa min nya hemsida med hjälp av Sidmallar, men har en liten fundering, kan man på ett enkelt sätt låta menyn styra vad som visas i "ContentContainer" utan att header och navigation behöver laddas om? eller är jag hänvisad att använda frames då…..

Anledningen till frågan är att både navigation och inehållet på sidan hämtas från en ganska maffig databas. Vill inte gärna göra för många roundtrips på menyn….

Jerker Klang,
medarbetare på ponnytrav ifokus

Gemenskap, glädje och fart - ponnytrav såklart!

Stuteri Isil, Sagolika Gotlandsruss

www.isil.se

johan
2008-01-07 20:43
#12

#11: Nej, inte utan ramar. Rent praktiskt däremot så har både DreamWeaver, Frontpage och Expression Web stöd för webbmallar där du kan skapa en mallsida där du har vissa regioner i sidan som går att ändra.

Det gör att du bara har en mallsida att ändra i när du ska lägga till eller ändra i navigationen eller byta design på sidan. Men hela sidan, inkl meny, kommer alltid sparas med varje fil.

Jag tror inte man behöver vara så väldigt rädd för att varje enskild sida blir lite störrre jämfört med ramar. Det som ofta tar tid på normala hemsidor är antalet filer som behöver hämtas, dvs. sammanlagda antalet bilder, stylesheets, javascript-filer etc som en sida behöver. När man har ramar behöver man hämta flera filer och man har ofta samma fil fler gånger i olika ramar.

Mvh // Johan

Född vid 334.00 PPM

ryttarn
2008-01-07 23:59
#13

#12 Tja, då behåller jag nog ramarna…. Den applikation jag planerar för just nu skulle bli vansinnigt tungrodd om jag skulle ladda menystrukturen varje gång då denna kan inehålla väldigt många poster beroende på vart och vad man håller på med……..

Men man kan ju ta det bästa från två världar, layoutinformationen kan man ju lägga i CSS fil, medan man håller navigationsträdet i en sepparat frame för att slippa en massa onödiga roundtrips…. Skall länka när jag kommit lite längre i prototypen så kanske du förstår varför jag vill undvika roundtrips….

Jerker Klang,
medarbetare på ponnytrav ifokus

Gemenskap, glädje och fart - ponnytrav såklart!

Stuteri Isil, Sagolika Gotlandsruss

www.isil.se

Annons:
Tuva-Lena
2008-02-21 01:23
#14

Alltså, det här blir spännande. Vilken artikel du har plitat ihop Johan! Wow! Jag gick en ettårig kurs i webb design för 8 år sen, och då var det bara html.kod som gällde, så jag har fortsatt med det. Men nu börjar jag märka luckorna som uppstår. Hoppas kunna lära mig jättemycket av dig. Vad jag kan se så är du minst lika driven som dom lärare jag hade då! Hääärligt att utvecklas! Vill du titta på min sida? Driver ett äventyrsföretag vid sidan av: www.3sjoar.se  Glad

"Att många tycker samma, betyder inte att dom har rätt.."

 

Madde80
2008-02-22 10:47
#15

Tackar för en bra och grundlig presentation till hur man bygger upp en hemsida från grunden, och hur ditt arbetssätt ser ut! Jag står i grundvalarna för att bygga om min hemsida, och hade då tänkt börja om helt - och göra det rätt, den här gången - inga halvmessyrer med lite css och lite html-formatering. Så det här är ovärdeligt. Tack!

Anken
2008-03-19 01:14
#16

hejhej, jag har inget program för att göra hemsidor så jag använder mig av anteckningar nu. jag provade skriva in det som står i atrikeln och tänkte använda den som en mall. men jag får inte in min bild som jag gjorde. jag gjorde en bild som skulle passa som header, funkar det inte bara för att jag inte använder ett "riktigt" program eller är det något annat som är fel?

[cocuyo]
2008-03-19 07:21
#17

Helt säkert är det något annat som är fel. Om du visar koden som du la in för att visa bilden kanske det går att se vad som är fel. Bilden måste så klart ligga i samma mapp om länken inte också pekar på mappen. Det behövs inte något speciellt program för att skapa en sida, det går utmärkt med en texteditor som anteckningar.

Länkadressen ska stå inom citationstecken, ungefär så här:

[cocuyo]
2008-03-19 07:38
#18

Om bilden ligger i en undermapp är avdelaren snedstreck / och inte det bakvända som används i Windows.

Osterang
2008-05-15 18:54
#19

Försökte göra en egen sida, ska fixa min egen design senare.. Men när jag försöker sätta sidokolumnen på rätt ställe blir det bara såhär "/ http://www.freewebs.com/lundegard/

Fotorika
2008-06-14 23:55
#20

Hej! Har varit på gång att försöka mig på en egen hemsida ett tag nu men är totalt värdelös på allt som handlar om webbdesign, koder osv. XD Har lärt mig havlmycket om Html och pytte lite om Css, bläddrade snabbt igen artikeln och såg att slutresultaten blev bra, hällde därför upp ett stort glas Cola för att sätta mig ner och läsa igenom den! Hoppas den ska hjälpa mig att komma någonvart med min hemsida! :D

Tack på förhand för hjälpen :D Mvh Erika

Annons:
Fotorika
2008-06-15 00:07
#21

Vad är ett Html program? Och HUR gör man en mall? Fattar inte, jag använder webhotellet Freewebs (alltså bygger förhand med html använder itne deras koder)

Jag vet inte hur jag ska göra en Css-stilmall?

Fotorika
2008-06-15 00:53
#22

En sak till, (nu har jag skrivit 3 inlägg men iallfall) Jag undrar en sak, jag gör precis som du skrivit, jag har gjort allt dwt där (tom det där med länkarna på gul bakgrund) i mitt CSS dokument men jag fattar inte hur jag ska kunna se det, asså när jag öppnar html dokumentet ser det ut som i början, borde det inte ändras.?

(

) ska jag ändra någonting i den här koden? typ www.w3.org? eller ?

Kefa
2008-11-29 01:01
#23

Tack för en utomordentlig grund. Har fått till en hyfsad grundsida..Får några problem; när jag lägger in bilden i topp som jag döpt till main-banner 770x131px så blir navigationslisten bredare än bilden, hur korrigerar jag det? Hur ändrar man den gula färgen i navigationslisten? Hur bygger man vidare med ytterligare sidor på enklaste sätt?

AndreasS
2008-11-29 11:02
#24

Den gula färgen ändrar du i detta stycket i css koden:

.Navigation

{

background-color: #FFCC00;

padding: 0.5em 2em 0.5em 2em;

overflow: auto;


Mvh: Andréas "Bubben" Sandberg | 021media.se - Västerås hetaste nyhetsbilder | En blogg om min vardag, med psykisk ohälsa - Bubben´s | Forza Grönvitt 100% kärlek

guraknugen
2008-11-29 14:47
#25

Kul att någon engagerar sig för att förklara saker utförligt. Samma information går ju att hitta på ett flertal ställen på nätet med hjälp av en enkel sökning, men det är inte så ofta man hittar något vettigt på svenska.

Själv har jag ingen hemsida numera, men har tänkt att försöka göra en så småningom. Har funderat på att använda XML och XSLT istället (bland annat för att jag ändå tänkt dokumentera alla mina inspelningar med XML-filer med så mycket information som möjligt - vem som spelar vad, vilket instrument som användes, hur instrumentet var inställt, vilka effekter som användes och hur dessa var inställda och så vidare, även länk till en sampelfil på själva låten ifråga).

Kommer jag att, som relativ nybörjare, få problem? Vet hur XML fungerar men har inte kikat så djupt på XSLT än. För- och nackdelar jämfört med HTML/CSS? Läste någonstans, kan dock inte hitta var just nu, att HTML/CSS är lite på utgående och att XML/XSLT är framtiden. Synpunkter på detta påstående? Fast om XML/XSLT är framtiden kanske man borde vänta till framtiden med att använda det…

Urtsäkta den onödigt långa parentesen i stycke 2.

Kefa
2008-11-30 13:02
#26

Finns det verkligen ingen bok om Expression Web på svenska, är det bara jag som är handikappad? Har nu fått till en master sida, och skall tydligen göra en dwt.När jag försöker spara står det "no content regions definied". Vad gör jag, jag vill alltså ha en sida att utgå ifrån och att resten i princip skall se lika ut. Och kunna göra layoutjusteringarna på en sida.

johan
2008-12-02 15:18
#27

#25: HTML är det ändå det du har för att skapa presentationen. Det är bra att du lagrar saker som XML, men det du har XSLT till är att göra om din XML till HTML.

Mvh // Johan

Född vid 334.00 PPM

Annons:
Cuyi
2008-12-08 16:23
#28

Ok.. jättebra artikel. Men hur lägger man upp hemsidan då?! T.ex på freewebs eller vad man nu har..

Cuyi
2008-12-10 21:10
#29

Skulle gärna få svar…!
:P Alla andra får ju svar på snabbt Oskyldig

AndreasS
2008-12-11 00:19
#30

#28 Vet tyvärr inte hur freewebs funkar. Men har man ett eget webbhotell kan det vara bra om man har ett ftp program för att föra över filerna från datorn till sitt webbhotell.


Mvh: Andréas "Bubben" Sandberg | 021media.se - Västerås hetaste nyhetsbilder | En blogg om min vardag, med psykisk ohälsa - Bubben´s | Forza Grönvitt 100% kärlek

Cuyi
2008-12-11 22:34
#31

Ok.. tack i alla fall! :)

någon som vet något om freewebs som kan svara på mina frågor :)?

Cuyi
2008-12-14 21:07
#32

*putt*

har även en till fråga, hur öppnar man anteckningar i sin webbläsare? alltså för att se hur det ser ut som en webbsida.. :)

TACKSAM FÖR SVAR. ska nämligen försöka knåpa ihop någe. men ingen vill ju svara på mina frågor :< men men ^^ väntar väl då! :d

AndreasS
2008-12-14 23:08
#33

#32 Om du spar ner din sida som du gjort i anteckningar och sparar du filen som t.ex index.html, index.htm och inte som index.txt så kan du öppna sidan i en webbläsare. Dvs. du skriver in index.html alternativt index.htm och inte bara index.

Hoppas att du förstår vad jag menar.


Mvh: Andréas "Bubben" Sandberg | 021media.se - Västerås hetaste nyhetsbilder | En blogg om min vardag, med psykisk ohälsa - Bubben´s | Forza Grönvitt 100% kärlek

Jona-than
2008-12-16 10:50
#34

Hej och tack för en fantastisk lärdom i konsten att skapa hemsidor.

En fråga har jag dock, Texterna jag skriver i innehållet visar inga Å,Ä,Ö. Varför inte? 

en till: 

I iexplorer visas sidan som din sida visas, med två spalter bredvid varandra, men i Firefox och i googles vebbläsare chrome hamnar den höra kolumnen under den vänstra. dock i höger sida.

Annons:
MoaW
2008-12-16 23:22
#35

#31 om du Pm:ar mig så kan jag hjälpa dig att ladda upp sidan på freewebs :)

HundGlädje.nu - Hundkurser, Dogwalking och Fotografering.
För ökad kontakt och förståelse.

Inkanyezi
2008-12-17 16:25
#36

#34 För att åäö ska visas korrekt i alla webbläsare ska de skrivas med koder:

  • å = å

  • ä = ä

  • ö = ö

  • Å = Å

  • Ä = Ä

  • Ö = Ö

Koden börjar med tecknet ampersand (&) och avslutas med semikolon.

Cuyi
2008-12-21 22:47
#37

#33 Nej, förstår inte :( Visa med en bild?
#35 Har pm:at dig!

AndreasS
2008-12-22 11:23
#38

#37 Läs egenom denna artikel där finner du svaret och har bild på det.


Mvh: Andréas "Bubben" Sandberg | 021media.se - Västerås hetaste nyhetsbilder | En blogg om min vardag, med psykisk ohälsa - Bubben´s | Forza Grönvitt 100% kärlek

Cuyi
2008-12-22 19:22
#39

#38 Ok, tack :)

Muzzy96
2009-06-20 19:21
#40

Värkligen bra! Jag fick faktiskt till det, men ska göra om det nu :) Tack, det var jätte bra Tungan ute

Muzzy96
2009-06-20 20:08
Bild 1. Klicka för att öppna i full storlek.
#41

har bara en liten fråga.. Där all text ska vara.. Hur får man den längre?

Annons:
guraknugen
2009-06-20 20:24
#42

Någon som har planer på att skriva något liknande för XML/XSLT? Har ännu inte sett någon sådan på svenska (vilket absolut inte betyder att det inte finns).

Muzzy96
2009-06-20 21:51
#43

Så här ser min ut nu :)

http://mrodin.webs.com/

guraknugen
2009-06-20 22:23
#44

#43: Trots rätt teckenkoding (UTF-8), så blev det tydligen fel på ett ställe:

”Exempel p? mer inneh?ll”

Annars antar jag att det såg ut som det skulle.

Hopoksia
2009-06-21 21:56
#45

Detta gav mig inspiration till att göra ny hemsida. Har använt samma "mall" nu så länge så jag känner för att göra om den.

så här ser den ut nu

http://www.gillasart.onatima.se

Tycker inte den ser proffsig ut

Hopoksia
2009-06-22 15:25
#46

Jag har gjort upp en ny hemsida. Alla bilder finns inte med och inga sidor förutom index sidan.

Menening är att jag på den mörkröda bakgrunden ska lägga thumbnails på olika kategorier, till exempel tecknade porträtt och blommor.

Jag kunde dock inte få den skriva koden att fungera i Frontpage, så jag fick ta hjälp av det jag redan lärt mig.

Kommentera gärna!

http://www.onatima.se

AndreasS
2009-06-22 16:39
Bild 1. Klicka för att öppna i full storlek.
#47

#46 För mig som använder firefox ser sidan konstig ut. Texten behövs justeras. Och sedan den med headern och raden med länkarna till dina undersidor har olika mått emot dom undre. Se bifogad bild.


Mvh: Andréas "Bubben" Sandberg | 021media.se - Västerås hetaste nyhetsbilder | En blogg om min vardag, med psykisk ohälsa - Bubben´s | Forza Grönvitt 100% kärlek

guraknugen
2009-06-22 18:55
#48

Samma sak i Opera.

Sidan http://validator.w3.org/ kan användas för att testa webbsidor och i din sidas fall blev det 18 fel och 2 varningar.

Annons:
Hopoksia
2009-06-23 00:19
#49

# 47 - Jag ändrade bredden på tabellerna eftersom jag fick en likadan bild tidigare idag. Men det ser konstigt ut eftersom ramen inte lägger sig i kanterna. Nu har jag en skärm med upplösning 1024x768, men detta borde ju inte ha någon betydelse.

Bakgrunden till länkarna och nedre bakgrunden är inte lika höga. På den undre mörka bakgrunden ska jag lägga thumbnails.

Jag vet dock inte vad jag ska göra för att det ska se likadant ut med alla webläsare.

# 48 - Jag förstår inte vad jag ska göra med informationen.

guraknugen
2009-06-23 02:15
#50

#49:Läste du vilka fel sidan ansåg att det var på din sida? För där finns ju förklarat några rader om varje fel den hittade, exempelvis första felet:

”The checked page did not contain a document type ("DOCTYPE") declaration. The Validator has tried to validate with a fallback DTD, but this is quite likely to be incorrect and will generate a large number of incorrect error messages. It is highly recommended that you insert the proper DOCTYPE declaration in your document -- instructions for doing this are given above -- and it is necessary to have this declaration before the page can be declared to be valid.”

Bara för att ta ett exempel, som dessutom antyder att du kanske inte gjort 18 fel; det första felet kan vara orsaken till att den tror sig hittat ytterligare 17 fel. Kedjereaktion, typ…

Hopoksia
2009-06-23 12:07
#51

Jag gör koden i Frontpage och då kommer automatiskt upp denna inledning av koden. Jag undrar var jag ska skriva DOCTYPE?






Gillas Art första sidan