1 of 10 09.04.2015 15:49 Fra forrige gang: Om tabeller Tabeller er i utgangspunktet en måte å presentere data på. Skal ikke brukes for å legge ut sider Dreamweaver har fasiliteter for å opprette, redigere og endre tabeller i design-modus Viktige aspekter ved en "fullstendig" nettside Vi gjennomgår designet av en nettside i DW. Viktige milepæler: velge DW-utlegg (vi skal arbeide med en 1-kolonnes liquid-design) endring og stiling av topptekst-diven (header) Legge inn et avsnitt med overskrift bilde (tabell) liste endring og stiling av bunntekst-diven (footer) kontaktlenke med "fixed" posisjon
2 of 10 09.04.2015 15:49 DW-utlegg Viktig med riktig lagring av stilarkfil Opprett mappen dw5 under M:\dkdm_site, altså: M:\dkdm_site\dw5 Start Dreamweaver. Opprett en ny nettside i Dreamweaver. Bruk menyer File > New > HTML > 1 column liquid, centered, header and footer Vi antar denne siden er den første vi lager med dette designet (her ikke noen CSS for designet ennå). Her bør 'Create New File' velges for CSS. ikke 'Add to Head'. Lagre stilarket og HTMLen i dw5-mappen. Legg til en tittel, for eksempel Påsken 2015
3 of 10 09.04.2015 15:49 OBS: Hvis stilarkreglene er 'feilaktig' lagt in HTMLen (Head) vises de slik i Stilark-ruten: Endre bakgrunnsfarge på body til #FFFF99 eller en annen farge (se også under "Topptekst" lenger ned her.). Erstatt teksten i inndelingen <div.content> 'Instructions...' osv. med tekst fra f.eks.: Pakkeliste for skitur (http://www.turistforeningen.no/pakkeliste-vinter/) Kvikk lunsj (http://no.wikipedia.org/wiki/kvikk_lunsj) Endre line-height (finnes under kategorien Type) på tekst i avsnitt til 1.5. Bruk 'multiple' som enhet. (øker linjeavstanden til nåværende ganger 1.5)
4 of 10 09.04.2015 15:49 Topptekst (<div.header>-avsnittet) Her endrer vi logobilde og dens plassholder, og dertilpasset div-høyde bakgrunnsfargen, overskriftteksten Endre bakgrunnsfarge. Finn f.eks et fargetema på https://color.adobe.com /nb/explore Plasser markøren over et fargetema klikk på rediger-ikonet
5 of 10 09.04.2015 15:49 Marker og kopier HEX-koden tilhørende valgt farge fra nederst i skjermbildet Lim hexkoden inn som background-color-verdien Finn div.header i tag-selector, "Add property", finn background-color lim inn koden. (husk # foran).
6 of 10 09.04.2015 15:49 Fjern lenken som finnes rundt plassholderen for bildet. Dette er lettest å gjøre ved å gå inn i koden (code-visning). Gjør det om til et avsnitt, dvs endre a-tagg til p-tagg. Underveis fjerne du <style> og widthegenskaper. Legg et bilde ( kopier lenken til bildet paaskelilje, og lim inn lenken i src="" attributtet.) <div class="header"> <a href="#"> <img src="" alt="insert Logo Here" name="insert_logo"... (Fjerne style og width) </a> <!-- end.header --></div> Etter endring: <div class="header"> <p> <img src="" alt="insert Logo Here" name="insert_logo" </p> <!-- end.header --></div> Legg inn en hovedoverskrift, f.eks. 'Påsken 2015', ved siden av bildet. Overskriften "havner" under bildet, da bildet ligger i et avsnitt <p>, som er et block-element Gjør 'Påsken 2015' til en H1-overskrift
7 of 10 09.04.2015 15:49 Plasser overskriften ved siden av bildet. Bildet må "venstreflyte". Utlegget har en klasse,.fltlft, som kan brukes for dette formålet. Bruk klassen.fltlft som er en del av dette utleggets stilark. 1. klikk i bildet. 2. høyreklikk <p> i tag-selector 3. Set Class: fltlft Kontroller at bildet er nå til venstre for overskriften. Legg inn en height (finnes i kategorien Box) på.header. Height skal være lik høyden på bildet som du har lagt inn. Evt. prøv og feil. Klikk på bildet og se i properties-rute for å finne høyden på bildet. Her finner du også størrelsen i byte (f.eks. 9K = 9 000 byte) Eller (enda bedre): velg fra menyene øverst: View/Rulers. Pass på at "pixels" er valgt, og deretter velg "show". Deretter kan du flytte nullpunktet til øverste-venstre hjørnet av bildet, og måle størrelsen. Pass på at det er god kontrast mellom fargen på overskrift og bakgrunn. Bruk Webaim Color Contrast Checker (http://webaim.org/resources/contrastchecker/) for å sjekke. Venstrestill overskriften.
8 of 10 09.04.2015 15:49 Innholdet (<div.content>-avsnittet) Her legger vi inn et bilde en tabell en liste Legg inn et bilde Her ser vi på: ramme padding midtstilling max-width Legg til bildet http://bibin.hioa.no/~michaelp/web-publisering/dkdm/bilder/paaskeegg.png i teksten. Finn evt. et bedre bilde. Legg en ramme rundt bildet. Legg luft mellom bildet og rammen. Midtstill bildet i siden. Legg til følgende regel max-width: 100% på bildet (img). Max-width finnes ikke som valg under categories. Bruk Add Property og finn frem til regelen i listen som vises. Tips: begynn å skrive max for å gå til riktig sted i listen. Hva gjør regelen? avskaff min-width regelen for.container (sett lik 0) Ta opp nettsiden i en nettleser reduserer bredden. Hva skjer med bildet?
9 of 10 09.04.2015 15:49 Bunntekst (footer) Midtstilt navn og epost-adresse Legg inn ditt navn og e-post adresse i footer. E-post adresse skal være en mailto-lenke. I DW: Bruk insert/email link Gjør teksten mindre Midtstille teksten. begge deler gjøres ved å klikke et sted i navnet, velge <p> i tag-selektor, block text-align center type font size. eksperimenter med størrelser med em-enheten (0.9, 0.8, osv.) Plasser markøren på teksten, velg <p> (avsnittet som omfatter både teksten og lenken), reduser fontstørrelsen Sett bakgrunnsfarge i sidebunnen til #333 og tekstfargen til #FFF. For lenken kan du velge en annen lys farge.
10 of 10 09.04.2015 15:49 Plassering av tekstboks med position: fixed Hva med en kontakt-lenke som står fast øverst til venstre for innholdet i siden? Tips: Legg inn et avsnitt i.container-diven som du bruke position for å plassere. Dette verk er lisensiert under en Creative Commons Navngivelse-Ikkekommersiell-Del på samme vilkår 3.0 Unported lisens. Michael Preminger, michael.preminger@hioa.no, 20-03-2013