curlingthebrackets / web / web-type / overblik /

• Mix
• tech
• web
• flash
• M1
• M2
• M4
• M5
• WP
• About

Links syntaks

<!--Link til relativ adresse-->
    <a href="om_mig.html">OM MIG</a>
<!--Link til absolut adresse-->
    <a href="http://google.com">GOOGLE</a>
<!--Link til mail adresse-->
    <a href="mailto:din@adresse.dk">EMAIL</a>
<!--Link på billede-->
    <a href="index.html">
        <img src="billeder/homeknap.gif" alt="knap til home" /></a>
 
<!--Link til "punkt-1" på samme side, (fx. indholdsfortegnelse) -->
    <a href="#punkt-1">PUNKT 1</a>
<!--Der forudsættes et Anchor-id længere nede på siden -->
    <a id="#punkt-1"> </a>

Bogen i fokus

Bogen er selvfølgelig:

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

Overskuelighed i navigationen

Bruger skal så hurtigt og så intuitivt som muligt have overblik over indholdet.

• 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 / remote site

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)

background-image tricks

Navngivnings konventioner

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