Skriv ett nytt inlägg! Aktuellt just nu (5) Senaste inläggen

Datorköp Hårdvara Program för PC Program för MAC Annonsprogram / Virus Windows XP, 7 och 8.x Windows 10 01. Internet 02. Microsoft Office 03. Operativsystem 08. Tillbehör 09. Spel 10. Nätverk & Brandväggar 11. Fildelning 12. Säljes/köpes 13. Övrigt 14. Off-topic Webbläsare Undersökningar/kluring Varningar För sajtvärd och medarbetare
Webbdesign

En modern webbsida steg för steg

2007-03-23 22:38 #0 av: johan

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.

Navigation

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

 

<!--[if !supportLists]-->·         

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Roslagskonst - &Aring;ke Nordberg</title>

</head>

 

<body>

    <div class="PageContainer">

        <div class="PageHeader">

        </div>

        <div class="Navigation">

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

        <div class="ContentContainer">

            <h1>Sidans rubrik</h1>

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

            <h2>Underrubrik</h2>

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

        </div>

        <div class="SideColumn">

            <h2>Rubrik i sidospalten</h2>

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

        </div>

 

        <div class="PageFooter">

            <address class="ContactInformation">

                &Aring;ke Nordberg<br />

                Svanbergav&auml;gen 27<br />

                761&nbsp;73 Norrt&auml;lje

            </address>

            <address class="ContactInformation">

                <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 <link>-element mellan <head> och </head>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Roslagskonst - &Aring;ke Nordberg</title>

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

</head>

 

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 class="PageHeader"><img src="header-boats.jpg" alt="Sidhuvud" /></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

Datum för publicering

  • 2007-03-23
Anmäl
2007-03-23 23:30 #1 av: xarfez

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. 

Anmäl
2007-03-23 23:35 #2 av: johan

#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å.

 

Anmäl
2007-03-23 23:41 #3 av: xarfez

Finemang ju :]

JavaScript kan man alltid bli bättre på. 

Anmäl
2007-03-25 00:03 #4 av: Tom

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

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

  Tom

Ring och messa så mycket du vill för 140 kr/månad!

Just nu får du 20 GB extra surf och halva priset de tre första månaderna!

Klicka på den här länken till Vimla!

Anmäl
2007-03-31 13:28 #5 av: Kattapult

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

Jag får prova lite sedan :)

Anmäl
2007-04-08 13:42 #6 av: Niklas

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
» Besök Apple Watch iFokus.

Anmäl
2007-04-08 14:28 #7 av: johan

Härligt Niklas!

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

I sidfoten saknas det en </p>. 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

Anmäl
2007-04-08 15:37 #8 av: Niklas

#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
» Besök Apple Watch iFokus.

Anmäl
2007-04-08 15:46 #9 av: Zpookey

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"?

Anmäl
2007-04-08 15:47 #10 av: johan

#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

 

Anmäl
2008-01-05 23:54 #11 av: ryttarn

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

Anmäl
2008-01-07 20:43 #12 av: johan

#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.

 

Anmäl
2008-01-07 23:59 #13 av: ryttarn

#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

Anmäl
2008-02-21 01:23 #14 av: Tuva-Lena

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.."

 

Anmäl
2008-02-22 10:47 #15 av: Madde80

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!

Anmäl
2008-03-19 01:14 #16 av: Anken

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?

Anmäl
2008-03-19 07:21 #17 av: [cocuyo]

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:

<img src="bild.jpg"> 

Anmäl
2008-03-19 07:38 #18 av: [cocuyo]

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

<img src="bildmapp/bild.jpg"> 

Anmäl
2008-05-15 18:54 #19 av: Osterang

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/

Anmäl
2008-06-14 23:55 #20 av: Fotorika

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

Anmäl
2008-06-15 00:07 #21 av: Fotorika

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?

Anmäl
2008-06-15 00:53 #22 av: Fotorika

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.?

(<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> ) ska jag ändra någonting i den här koden? typ www.w3.org? eller ?

Anmäl
2008-11-29 01:01 #23 av: Kefa

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?

 

Anmäl
2008-11-29 11:02 #24 av: AndreasS

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 Sandberg | 021media.se - Västerås hetaste nyhetsbilder | En blogg om oss och vår vardag - Bubben´s & Bella´s Blogg | Forza Grönvitt 100% kärlek

Anmäl
2008-11-29 14:47 #25 av: guraknugen

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.

Anmäl
2008-11-30 13:02 #26 av: Kefa

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.

Anmäl
2008-12-02 15:18 #27 av: johan

#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. 

 

Anmäl
2008-12-08 16:23 #28 av: Cuyi

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

Anmäl
2008-12-10 21:10 #29 av: Cuyi

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

Anmäl
2008-12-11 00:19 #30 av: AndreasS

#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 Sandberg | 021media.se - Västerås hetaste nyhetsbilder | En blogg om oss och vår vardag - Bubben´s & Bella´s Blogg | Forza Grönvitt 100% kärlek

Anmäl
2008-12-11 22:34 #31 av: Cuyi

Ok.. tack i alla fall! :)

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

Anmäl
2008-12-14 21:07 #32 av: Cuyi

*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

Anmäl
2008-12-14 23:08 #33 av: AndreasS

#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 Sandberg | 021media.se - Västerås hetaste nyhetsbilder | En blogg om oss och vår vardag - Bubben´s & Bella´s Blogg | Forza Grönvitt 100% kärlek

Anmäl
2008-12-16 10:50 #34 av: Jona-than

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. 

Anmäl
2008-12-16 23:22 #35 av: MoaW

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

Anmäl
2008-12-17 16:25 #36 av: Inkanyezi

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

  • å = &aring;
  • ä = &auml;
  • ö = &ouml;
  • Å = &Aring;
  • Ä = &Auml;
  • Ö = &Ouml;

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

Anmäl
2008-12-21 22:47 #37 av: Cuyi

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

Anmäl
2008-12-22 11:23 #38 av: AndreasS

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

Mvh: Andréas Sandberg | 021media.se - Västerås hetaste nyhetsbilder | En blogg om oss och vår vardag - Bubben´s & Bella´s Blogg | Forza Grönvitt 100% kärlek

Anmäl
2008-12-22 19:22 #39 av: Cuyi

#38 Ok, tack :)

Anmäl
2009-06-20 19:21 #40 av: Muzzy96

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

Anmäl
2009-06-20 20:08 #41 av: Muzzy96

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

Anmäl
2009-06-20 20:24 #42 av: guraknugen

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).

Anmäl
2009-06-20 21:51 #43 av: Muzzy96

Så här ser min ut nu :)

http://mrodin.webs.com/

Anmäl
2009-06-20 22:23 #44 av: guraknugen

#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.

Anmäl
2009-06-21 21:56 #45 av: Hopoksia

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

 

 

Anmäl
2009-06-22 15:25 #46 av: Hopoksia

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

 

Anmäl
2009-06-22 16:39 #47 av: AndreasS

#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 Sandberg | 021media.se - Västerås hetaste nyhetsbilder | En blogg om oss och vår vardag - Bubben´s & Bella´s Blogg | Forza Grönvitt 100% kärlek

Anmäl
2009-06-22 18:55 #48 av: guraknugen

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.

Anmäl
2009-06-23 00:19 #49 av: Hopoksia

# 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.

Anmäl
2009-06-23 02:15 #50 av: guraknugen

#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…

Anmäl
2009-06-23 12:07 #51 av: Hopoksia

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

<html>

<head>
<meta http-equiv="Content-Language" content="sv">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Gillas Art första sidan</title>
<STYLE>BODY {
BORDER-RIGHT: #33090A 4px solid;
BORDER-TOP: #33090A 4px solid;
BORDER-LEFT: #33090A 4px solid;
BORDER-BOTTOM: #33090A 4px solid;
SCROLLBAR-ARROW-COLOR: #33090A;
SCROLLBAR-TRACK-COLOR: #D6AFBB;
SCROLLBAR-BASE-COLOR: #D6AFBB
}
.top{
width: 800px;
height: 100px;
background: #D5ACB8;
border: #F8EFF1 1px solid;
Padding: 10px
}

Anmäl
2009-06-23 13:00 #52 av: Hopoksia

Jag har lagt koden i en annan html-editor denna gången. Jag får dock inte bilderna med mig, men ni kan väl se om det ser bättre ut så här.

http://www.onatima.se

 

Anmäl
2009-06-23 15:07 #53 av: AndreasS

om du tar bort detta C:\Hemsida - Nya Art\ ur länkningen till bilderna så kommer nog bilderna med.

Mvh: Andréas Sandberg | 021media.se - Västerås hetaste nyhetsbilder | En blogg om oss och vår vardag - Bubben´s & Bella´s Blogg | Forza Grönvitt 100% kärlek

Anmäl
2009-06-23 17:26 #54 av: Hopoksia

Jag har ändrat sökvägarna nu och bilderna fungerar hos mig. Frågan är hur det ser ut hos er andra

http://www.onatima.se

 

Anmäl
2009-06-23 18:05 #55 av: AndreasS

Bilderna fungerar. Men texten till vänster om din bild är fortsfarande förskjuten åt vänster utanför ramen.

Mvh: Andréas Sandberg | 021media.se - Västerås hetaste nyhetsbilder | En blogg om oss och vår vardag - Bubben´s & Bella´s Blogg | Forza Grönvitt 100% kärlek

Anmäl
2009-06-23 18:42 #56 av: Hopoksia

Nu har jag gjort om hela koden och lagt in tabeller istället för bara divar.

Har inte länkat någonting, detta är fortfarande en test.

http://www.onatima.se

 

Anmäl
2009-06-23 18:44 #57 av: Hopoksia

Hoppas  hoppas Tungan ute

Anmäl
2009-06-23 18:55 #58 av: guraknugen

Texten nu ännu längre till vänster än förra versionen, sorry.

Angående DOCTYPE, så hittar du information om detta på följande ställe:

http://www.w3schools.com/html/html_whyusehtml4.asp

Så här står det om just DOCTYPE:

<Citat>–––

Validate Your HTML Files as HTML 4.01

An HTML document is validated against a Document Type Definition (DTD). Before an HTML file can be properly validated, a correct DTD must be added as the first line of the file.

The HTML 4.01 Strict DTD includes elements and attributes that have not been deprecated or do not appear in framesets:

<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">



The HTML 4.01 Transitional DTD includes everything in the strict DTD plus deprecated elements and attributes:

<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">



The HTML 4.01 Frameset DTD includes everything in the transitional DTD plus frames as well:

<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

–––</Citat>

Anmäl
2009-06-23 19:10 #59 av: Hopoksia

I min dator ser det helt ok ut. Jag förstår inte..........

Vilken DOCTYPE ska jag lägga in här då? Känner mig mycket förvirrad Rynkar på näsan

Så  här ser det ut hos mig

 

 

Anmäl
2009-06-23 20:17 #60 av: Hopoksia

Nu har jag ändrat igen. Hoppas att detta fungerar, annars ger jag upp.

http://www.onatima.se

 

Anmäl
2009-06-23 21:56 #61 av: Hjortronsylt

 

#60    Verkligen fina teckningar och alster! Ville gärna se mer, men kanske är sidan inte helt klar än för det går inte att klicka på någon av länkarna. I alla fall inte med Firefox.

Anmäl
2009-06-23 22:13 #62 av: guraknugen

#60: Jag vet ju inte hur du tänkt dig, men nu sitter texten på ett vettigt sett, tycker jag.

Ser ut som George Harrison längt ner till höger, förresten.

Anmäl
2009-06-23 23:03 #63 av: Hopoksia

Jaaa, nu äntligen så fungerar layouten!!!

Jag ska länka nu och lägga in de andra sidorna så att ni kan se. Pust!

Tungan ute

Anmäl

Det finns en till kommentar till den här diskussionen. Den är bara synlig för medlemmar på iFokus. För att läsa kommentaren, logga in eller registrera dig på iFokus.