Dynamicdrive galleri på hover
Stu Nichols css gallery

dynamicdrive
listamatic maxdesign

layout

mycelly
intensivstation
changingman

Navigation

dynamicdrive.com/style/csslibrary

Aflevering i Fronter

Titel: ditnavn_ditefternavn-monlineindex
URL: http://ditbrugernavn.monline.dk

Forsiden på Monline

En forside kaldet index.html + mapper og filer udarbejdes anden dag og uploades fra rodmappen på C-drevet – til rodmappen på Monline-adressen med et FTP-program.
Denne index-fil suppleres dagligt med links til nye opgaveløsninger og opdateres i løbet af ugen.

ftp-adresse = monline.dk
brugernavn bliver udleveret
password bliver udleveret

Når forbindelsen til monline er oprettet med FTP, trækkes lokale filer og mapper direkte ud i samme mapper på monline serveren. Strukturen “derude” skal afspejle strukturen “derhjemme”.

#menu {
position:relative;
margin:auto;
width:420px;
}
#menu ul {
display: inline;
}
#menu li {
display: inline;
float: left;
}
#menu li a {
display: block;
width: 105px;
height: 30px;
font-size: 0;
}
#menu li a:link, #menu li a:visited  {
background-color: red;
}
#menu li a:hover, #menu li a:active  {
background-color: yellow;
}

<div id="menu"><ul>
<li><a href="index.html" title="index"> </a></li>
<li><a href="cv.html" title="cv"> </a></li>
<li><a href="musik.html" title="musik"> </a></li>
<li><a href="grafik.html" title="grafik"> </a></li>
</u></div>

.

Billedbaggrund og “you-are-here” funktionalitet

<li><a id="vi_er_her" href="index.html" title="index"> </a></li>

#menu li a:link, #menu li a:visited  {
background-image: url(sti/til/billede.jpg);
background-position: 0px 0px;/*y-akse x-akse*/
}
#menu li a:hover, #menu li a:active  {
background-position: 50px 50px;
}
#menu li a#vi_er_her:link, #menu li a#vi_er_her:visited  {
background-position: 50px 50px;
}

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)