(category) LIST of posts

Website fra starten

Afdæk formål og virkemidler

Fokuser på hvad du gerne vil

  • Hvad vil du formidle?
  • hvem skal det formidles til?
  • Selvom du skal bruge et personligt site til at profilere dig med, er det ok, at være under udvikling og ændre mening undervejs. Start ENKELT, start OVERSKUELIGT.

Research i eksisterende genre

  • for at definere hvilken kontekst eller genre produktet kommer til at være del af
  • for nærmere at afgrænse hvad du selv vil/ikke vil
  • for at få indblik i hvad andre har formået/ikke formået

Layout Skitse

  • skitseret tegning
  • title
  • filnavn.html
  • pile til links
  • fil/mappestruktur

skitse

Filsystem udfra det skitserede overblik

  • Rodmappe i stifinder
  • Opret nye tomme navngivede html-filer
  • Giv dem en titel hver
  • Opret en tom css-fil
  • Organiser undermapper

filsystem

Struktur skitse på baggrund af layout skitsen:

  • Inddel layoutet i grove overordnede blokke
  • Forsyn dem med Elementer – tags
  • Noter lidt Formodet css

skitse2c

Produktionen

Med udgangspunkt i skitserne – hvis de er gode og der er lagt indlevelse og omtanke i – er der chancer for at resten af arbejdet næsten laver sig selv..

Afhængigt af hvem du er og en masse andre faktorer, er der flere mulige rækkefølger til det videre arbejde

  • Lænk hele sitet sammen i en fungerende demo med links.
  • Tast indholdet ind i siderne, råt – Det kan senere styles og siderne lænkes.
  • Layout og styling på sidens div-beholdere – Der kan senere komme indhold i.
  • Tegn, mal og fotografer dig frem til det visuelle indhold.

Ul – li – links

xhtml css 
<ul>
<li><a href="#">punkt1</a></li>
<li><a href="#">punkt2</a></li>
<li><a href="#">punkt3</a></li>
<li><a href="#">punkt4</a></li>
</ul>
 
 ul {
background-color: #000000;
padding: 0 8px 0 8px;
display: inline;
background-image: url(slette_02.gif);
}
 
li {
display: inline;
margin: 0 4px 0 4px;
}
 
li a:link, li a:visited {
background-color: #CCCCCC;
color: #666666;
padding: 0 5px 0 5px;
text-decoration: none;
font-weight: bold;
}
 
li a:hover, li a:active {
background-color: #eee;
color: #000000;
}

html, så kan du lære det

Produktionen aktiveres med lidt humor, af hver sin slags:

Med alle forbehold for, at tabeller ikke skal bruges til at layoute med… Tabeller bruges til skemaer, og layout klares med css.

.

.

Personligt Website opgave

Website:

Indhold (til og udover følgende grundkrav,) bestemmer du selv.

Ide og Design er op til dig.

Resultatet skal afspejle de færdigheder du opnår gennem undervisningen og læsningen – i grundlæggende webdesign, brug af tilgængelige ressourcer, og problemløsning.

Teknologi*: XHTML, CSS.

Grundkrav:

  • minimum 5 validerbare (xhtml1-strict*) html-sider
  • dit personlige CV skal indgå tydeligt i websitet
  • et eksternt stylesheet, som dine html-sider refererer til
  • et galleri med billeder

* Har du af en eller anden grund behov for at afvige fra grundkravene, skal der foreligge en overbevisende argumentation.

Aflevering:

Websitet uploades til server i en velorganiseret mappestruktur (må ikke overskrive index i rodmappen).

I den korrekte afleveringsmappe i Fronter og efter navngivnings konventioner uploades følgende:

  • Link til websitets adresse, som skal læses således:  navn_efternavn-persoligt_website_v-1-0

Er du meget øvet eller haj:

Opgaven som skitseret indeholder alligevel udfordringer for dig, på trods/grund af sin enkelthed:

  • Gå helt ud til kanten af de begrænsninger du måtte finde i grundkravene – og bryd nogle andre ubeskrevede regler eller tilføj nogle nye krav. (fx.: Lav en rund hjemmeside)
  • Udse dig en problematik, eller et hul i din viden, som du udforsker imens du løser opgaven. (Måske er det et af dine egne læringsmål?)
  • Lav en ekstra hjemmeside.

Box-model

ericmeyeroncss.com/bonus/render-mode.html

quirksmode.org/css/box.html

css-fix for q-tag citationstegn

Iexplorer viser ingen citationstegn i forbindelse med q-tags. Andre browsere gør.
En måde at tvinge citationstegn igennem går ud på: at skrive citationstegnene selv – og skjule dem i alle andre browsere, med css, på en måde Iexplorer ikke forstår.
W3C anbefaler ikke at man skriver citationstegn i q-tags — så skriver man dem bare udenfor! Læs artiklen fra alistapart her .

Linket ER blevet rettet!