HEAD FIRST (X)HTML / CSS

Kapitel 1

Kap.1 , s.4 -5, – Kode <-> Browservisning
Kap.1 , s.12 -15, – Editorer på mac og i windows
Kap.1 , s.21, – At sætte tags rundt om indhold
Kap.1 , s.29->, – <Style> tag, body-selector

Kapitel 2

Kap.2 , s.45->, – <a href=”fil-reference”>Den tekst (eller billede(se Kap 5)) der lænkes </a>
Kap.2 , s.56->, – fil / mappestruktur, referencer, paths

Kapitel 3

Kap.3 , s.79->, – skitse -> omrids -> tags
Kap.3 , s.95->, – Block <-> Inline
Kap.3 , s.103->, – Lists
Kap.3 , s.109->, – Nesting tags
Kap.3 , s.114->, – Entities

Kapitel 4

Kap.4 , s.128->, – Domain
Kap.4 , s.133->, – FTP
Kap.4 , s.139->, – Absolute path
Kap.4 , s.141->, – Default pages
Kap.4 , s.145->, – Intern links, Extern links
Kap.4 , s.149->, – Links, Title attribute
Kap.4 , s.151->, – Anchor tags
Kap.4 , s.157->, – Target _blank

Kapitel 5

Kap.5 , s.167->, – <img>
Kap.5 , s.169->, – jpg <-> gif
Kap.5 , s.177->, – img attributes
Kap.5 , s.183->, – Resize image photoshop /save for web
Kap.5 , s.195->, – Thumbnails
Kap.5 , s.199->, – Photo pages + thumbnail links
Kap.5 , s.205->, – transparent gif

Kapitel 6

Kap.6 , s.226->, – html-history
Kap.6 , s.229->, – Doctype HTML 4 Transitional
Kap.6 , s.234->, – Validator
Kap.6 , s.240->, – <meta> Content type
Kap.6 , s.245->, – Doctype HTML 4 strict
Kap.6 , s.253->, – HTML 4 Guide

Kapitel 7

Kap.7 , s.267->, – Om XML
Kap.7 , s.272->, – XHTML 1 checklist
Kap.7 , s.272->, – Doctype XHTML 1 Strict, namespace – language

Kapitel 8

Kap.8 , s.291->, – <style type=”text/css”> tag
Kap.8 , s.295->, – Komma-separerede selectors
Kap.8 , s.305->, – external stylesheet
Kap.8 , s.319->, – class selector

Kapitel 9

Kap.9 , s.342->, – font properties
Kap.9 , s.351->, – web-fonts list
Kap.9 , s.352->, – css unities
Kap.9 , s.364->, – RGB
Kap.9 , s.367->, – Color names and codes
Kap.9 , s.377->, – Text decoration properties

Kapitel 10

Kap.10 , s.389->, – Line-height property
Kap.10 , s.391->, – Box model
Kap.10 , s.399->, – Class selector
Kap.10 , s.404->, – Background-image property
Kap.10 , s.414->, – Class <-> id
Kap.10 , s.421->, – Multiple stylesheets

Kapitel 11

Kap.11 , s.434->, – <div> + id
Kap.11 , s.444->, – Box width
Kap.11 , s.447->, – text-align property
Kap.11 , s.453->, – Descendant properties
Kap.11 , s.458->, – css shorthands
Kap.11 , s.464->, – <span>
Kap.11 , s.469->, – Pseudo:selectors
Kap.11 , s.475->, – Cascade specification

Kapitel 12

Kap.12 , s.492->, – flow
Kap.12 , s.495->, – float
Kap.12 , s.508->, – Columns: float – margins combination
Kap.12 , s.511->, – clear
Kap.12 , s.517->, – Frozen layout
Kap.12 , s.518->, – Jello layout
Kap.12 , s.520->, – Absolute positioning
Kap.12 , s.535->, – Fixed positioning
Kap.12 , s.539->, – Relative positioning

Kapitel 13

Kap.13 , s.557->, – Table elements -caption, summary
Kap.13 , s.564->, – border-collapse
Kap.13 , s.566->, – Styling alternate rows
Kap.13 , s.568->, – Rowspan (colspan)
Kap.13 , s.573->, – Nested table
Kap.13 , s.578->, – list-style properties

Kapitel 14

Kap.14 , s.592->, – How forms work
Kap.14 , s.596->, – <form action=””>
Kap.14 , s.598->, – form elements
Kap.14 , s.626->, – form in table
Kap.14 , s.630->, – CSS on table

• HVOR er man nu / HVAD ser man nu
• HVOR kan man gå hen / HVAD ellers kan man se

En tydelig forskel på global menu og lokal menu

Breadcrumbs
fx. overskriften på denne site, hjælper med at kunne finde tilbage og giver forståelse for opbygningen.

You-are-here funktionalitet
En fremhævning af det aktuelle menu-punkt, det man er på lige nu.
Eksempel: På siden tilføjes den tilsvarende link en class=”selected”, som derefter styles anderledes end de andre links.

Artikler:
Hvorfor lister kan være gode til links:
w3.org/QA/Tips/unordered-lists

Local Site

• Sørg for at du har en rod-mappe på harddisken
• Find Site-manager i Dreamweaver (site-menu, eller i bunden af valg-bogsen i files-panelet)
• Site > New site.
• Vælg fanebladet Advanced – Basic er rimeligt indviklet!
• Local info: Site name / projektnavn vælges, og Local root folder klikker du dig frem til.
• Ok, Done, Fint, Iorden hele vejen. Du kan altid redigere i indstillingerne.

Remote site

• Der forudsættes du allerede har defineret en local site.
• Find Site-manager i Dreamweaver (site-menu, eller i bunden af valg-bogsen på files-panelet, eller dobbeltklik direkte på sitenavnet i valg-boksen på files-panelet og spar turen gennem site-manager)
• Vælg dit lokale site > edit
• Remote info: Access vælges til ftp.
• ftp-host: (se info fra udbyder)
• Host directory: / efterlades som regel tomt
• Login: brugernavnet (se info fra udbyder)
• Password: (se info fra udbyder)

Pseudo selectors og baggrundsbilleder (preload problematik)

Egen test med listemenu og you-are-here | og et andet eksempel her

Tekniken forklaret:
background-image på tomme links – display:block + padding – varierende background-position på a, a:hover, a:active
preload image – 1

Den aller simpleste preload teknik for background-image på links (hover-versionen ligger klar nedenunder) Maratz.com

En super enkel og snedig alle-i-en løsning til links med forskellig id navigation-matrix-reloaded Se den i aktion her

.

Css-alternativ til image-map

Tutorial fra alistapart.com imagemap med hover og css Læs hele artiklen først og se inspirationen her.

fra shepherdweb.com Absolut-positionerede link-id’er, på et bagrundsbillede med en variation der positioneres på :hover fra shepherdweb og her er deres demo

Den flotte tutorial fra alistapart.com – Flere øvelser i samme forklarende artikel – læs den hele!
De færdige eksempler derfra: link1 | link2 | link3

Enkel forklaring fra alsacreations.com Se en variation over det færdige resultat lige her og også ved at klikke her

lidt metode historik ]]> http://curlingthebrackets.com/background-image-tricks/feed/ 0 http://curlingthebrackets.com/navngivnings-konventioner/ http://curlingthebrackets.com/navngivnings-konventioner/#comments Sun, 16 Sep 2007 20:04:12 +0000 admin http://curlingthebrackets.com/?p=83 For Mappenavne og Filnavne som refereres til i koden gælder følgende:

• almindelige latinske bogstaver + tal er tilladte
  (‘æ’ ‘ø’ ‘å’ er ikke tilladte selvom de umiddelbart virker)
• små bogstaver: minuskler (majuskler kan virke på visse servere)
• ‘-’ og ‘_’ er tilladt
  (mellemrum er ikke tilladt)

eksempel:

“cv/images/billede-2.jpg”

For id- og class-navne gælder følgende:
Det samme, bare endnu strammere: Undgå tal i starten af navnene

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

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

Struktur skitse på baggrund af layout skitsen:

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

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.