Byg et website med Dreamweaver
|
|
|
- Bjarne Steensen
- 8 år siden
- Visninger:
Transkript
1 Byg et website med Dreamweaver I denne øvelse skal vi opbygge et website for Hotel Holiday i Dreamweaver. Det færdige site kan ses her: Øvelsen består af 9 trin: 1. Definér et nyt website 2. Opret ny HTML-side 3. Style layout med CSS 4. Tilføj header-billede 5. Opret CSS-Menu 6. Tilføj indhold til din side 7. Opret template 8. Validér site 9. Upload site 1
![Trin 1 Definér et nyt website 1. Åbn Dreamweaver CS3 2. Definer en ny side [Site > New Site]. Klik herefter på fanebladet Advanced. Hvis du benytter ITU s maskiner, så læs 2a.](/docs-images/22/1424223/images/2-0.png "Hvis du benytter egen computer, så læs 2b a. ITU s computere Under Local Info angiver du hvad din side skal hedde, og hvor dine filer skal gemmes på computeren. Site name Navnet på dit website.")
2 Trin 1 Definér et nyt website 1. Åbn Dreamweaver CS3 2. Definer en ny side [Site > New Site]. Klik herefter på fanebladet Advanced. Hvis du benytter ITU s maskiner, så læs 2a. Hvis du benytter egen computer, så læs 2b a. ITU s computere Under Local Info angiver du hvad din side skal hedde, og hvor dine filer skal gemmes på computeren. Site name Navnet på dit website. Kald den evt. Hotel Holiday. Local Root folder Klik på det gule mappe-ikon, og opret herefter mappen hotel_holiday under din public_html-mappe. Klik dig ind på den nye mappe, og vælg Select Default Image folder Hvor alle billeder placeres. Klik på det gule mappe-ikon, og opret en mappe kaldet images inde i mappen hotel-holiday. Klik på den nyoprettede mappe, og klik Select. Når du er færdig klikker du på OK. 2
3 b. Egen computer Under Local Info angiver du hvad din side skal hedde, og hvor dine filer skal gemmes på computeren. Site name Navnet på dit website. Kald den evt. Hotel Holiday. Local Root folder Her angiver du websites lokale placering. Klik på det gule mappe-ikon, og opret en mappe kaldet hotel-holiday. Klik på den nyoprettede mappe, og klik Select. Default Image folder Hvor alle billeder placeres. Klik på det gule mappe-ikon, og opret en mappe kaldet images inde i mappen hotel-holiday. Klik på den nyoprettede mappe, og klik Select. Dreamweaver giver også mulighed for at uploade dine filer til din public_html mappe på ITU s server. Klik på Remote Info. Under rullemenuen Access vælger du FTP. Du skal nu udfylde felterne med følgende værdier: FTP Host: ftp.itu.dk Host Directory: public_html/hotel_holidays/ (NB: FTP-funktionen i DW kan ikke oprette mapper. Du skal derfor selv oprette mappen hotel_holidays under din public_html-mappe først. Du kan evt. gøre det ved hjælp af en SSH-klient.) Login: Dit ITU-brugernavn Password: Dit ITU-password Tryk evt. på knappen Test for at se om du kan få forbindelse til serveren. Klik herefter på OK. 3
4 Trin 2 Opret ny HTML-side 1. Klik på [File > New] 2. En dialogboks åbnes. Vælg HTML under Page Type og <none> under Layout. DocType Skal være XHTML 1.0 Strict. Klik herefter på Create. NB: Hvis du ikke benytter Dreamweaver CS3, men derimod en ældre version, så skal du sørge for at copy-paste dette ind øverst i din html-fil ligefør dit <head>-tag.: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" 3. Gem siden som index.html [File > Save as ] 4. Klik på Split-view, så du både kan se html-koden øverst og designet nederst. Under Title skriver du Hotel Holiday. Læg mærke til at DW har auto-genereret noget html-kode for dig, og du behøves derfor ikke indtaste eks. title, head- og body-tags. 5. Vi skal nu tilføje en header, en menu, content-område og en footer på siden, og bagefter style dem ved hjælp af CSS. Indtast følgende mellem dine to body-tags, og gem din side: <div id="container"> <div id="header"></div> <div id="menu"></div> <div id="content"></div> <div id="footer"></div> </div> 4
![DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> 3. Gem siden som index.html [File > Save as ] 4.](/docs-images/42/1424223/images/page_4.jpg "Klik på Split-view, så du både kan se html-koden øverst og designet nederst. Under Title skriver du Hotel Holiday.")
5 Trin 3 Style layout med CSS Nu skal layoutet styles, så opbygningen kommer til at se ud som nedenstående billede: 1. Først skal body-elementet styles. Under panelet CSS (højre side) skal du klikke på ikonet New CSS Rule. Hvis panelet er skjult, så tryk [shift-f11] 2. I dialogboksen vælges Tag. Da vi skal definere body, skal du finde denne i rullemenuen. Vælg Define in New Style Sheet File, som sørger for at oprette et nyt eksternt stylesheet. Klik OK 5
![Hvis panelet er skjult, så tryk [shift-f11] 2. I dialogboksen vælges Tag.](/docs-images/42/1424223/images/page_5.jpg "Da vi skal definere body, skal du finde denne i rullemenuen.")
6 3. Du bliver nu bedt om at navngive dit stylesheet. Gem det evt. som style.css i roden af dit website. 4. I en ny dialogboks skal vi nu definere css-reglen for body i vores nyoprettede stylesheet. Der er en lang række kategorier at vælge i mellem. a. Klik på kategorien Type og ændr Font til Georgia, Times New Roman, Times, serif b. Klik på kategorien Background, og ændr Background color til #C7B18B. Klik Apply 6
7 c. Klik på kategorien Block og ændr Text-align til center d. Klik på kategorien Box, og sæt Padding til 20, og Margin til 0, og klik OK e. DW har nu generet CSS-koden i dit stylesheet. Den lille asterisk ved filnavnet betyder at dokumentet endnu ikke er gemt. Tryk på [ctrl-s] for at gemme. Du kan nu se dine ændringer ved at klikke på index.html. 7
8 f. Nu har du lært hvordan man laver nye CSS-regler, men du kan også indtaste koden manuelt, på samme måde som i notepad. Nu skal vi have stylet de andre elementer i vores dokument. Dobbeltklik på style.css i panelet Files: g. Tilføj nu følgende kode efter din body-selektor: #container { text-align: left; margin: 0px auto; width: 750px; border: 8px solid; border-color: #FFFFFF; #header { margin: 0px auto; height: 145px; border-bottom: 5px solid; border-color: #FFFFFF; #content { padding: 15px; color: #660000; background-color: #F8F3EA; #footer { text-align: center; background-color: #8A0E0B; color:#ffffff; font-size: 9px; p { font-size: 12px; Gem herefter dit stylesheet. 8
9 Trin 4 Tilføj header-billede Siden ser stadig ret kedelig ud, så nu vil vi tilføje et billede til vores header. 1. Find header.jpg på nedenstående link, og gem den i mappen images, som du oprettede i trin Åbn index.html. Under panelet Files (F8 hvis det ikke er synligt) skal du klikke på fanebladet Assets, og herefter klikke på ikonet Images. Her kan du se header.jpg, som du har lagt i mappen Images. Hvis det ikke er synligt, så klik på det lille refresh-symbol nede i hjørnet. 3. Hold musen inde når du trykker på header.jpg, og træk billedet over i din header, og slip billedet. Tilføj en passende alt-tekst når DW beder om det. I kodevinduet, kan du se at DW automatisk har generet mere HTML-kode for dig. 4. Gem siden, og preview siden i din foretrukne browser. Klik på det lille jordklode-ikon, eller tryk F12 9
10 Trin 5 - Opret CSS- Menu Hvad er et website uden en menu? Nu skal vi oprette en CSS-menu, som gerne skulle komme til at ligne nedenstående: 1. Først skal vi tilføje lidt kode til index.html. Tilføj følgende kode efter elementet <div id= menu >: <div id="menu"> <ul> <li><a href="#">velkommen</a></li> <li><a href="#">beliggenhed</a></li> <li><a href="#">værelser</a></li> <li><a href="#">priser</a></li> <li><a href="#">reservation</a></li> </ul> </div> TIP: Hvis du synes koden ser lidt rodet ud, så kan du formatere den, så den ser pæn og nydelig ud. Klik på Code-view, og klik på ikonet Format Source Code: 2. Resultatet er en kedelig liste med links, men nu skal vi style den. Klik på style.css, og tilføj følgende kode: #menu { #menu ul { font-size: 11px; text-align: center; padding-bottom: 5px; padding-top: 5px; padding-left: 0; margin-top: 0; margin-bottom: 0; margin-left: 0; background-color: #8A0E0B; color: white; width: 100%; font-family: Arial,Helvetica,sans-serif; line-height: 18px; #menu ul li 10
11 { display: inline; padding-left: 0; padding-right: 0; padding-bottom: 5px; padding-top: 5px; #menu ul li a { padding-left: 10px; padding-right: 10px; padding-bottom: 5px; padding-top: 5px; color: white; text-decoration: none; border-right: 1px solid #fff; #menu ul li a:hover { background-color: #D20000; color: white; #menu #active { border-left: 1px solid #fff; Gem dit stylesheet og preview index.html i en browser. Nu skulle du gerne have en mere spændende menu, som reagerer når du kører musen over menupunkterne. NB: Hvis du benytter en ældre version af Dreamweaver end CS3, så er det ikke sikkert at menuen vises korrekt i den indbyggede preview-browser. Den nye version formår at gengive din side næsten ligeså godt som Firefox, Explorer eller Opera. Preview hellere i en rigtig browser. Så skulle resultatet se fint ud. Hvis du er interesseret i at lære mere om ovenstående css-kode, så er der en kort beskrivelse af hvad de enkelte selektorer på sidste side af denne øvelse. 11
12 Trin 6 Tilføj indhold til din side Hvad er en side uden indhold? Nu skal der tilføjes en overskrift, tekst og billede. 1. Sørg for at index.html er åbent, og klik i content-området under din nyoprettede menu. Skriv en overskrift og lidt indholdstekst. 2. I Properties-panelet i bunden (Ctrl-F3 for at skjule/vise) har du en masse formateringsmuligheder til din overskrift og tekst. Marker din overskrift og vælg Heading 3 i rullemenuen Format. På samme måde laver du din indholdstekst til en paragraf. 3. Nu skal vi tilføje et billede under overskriften. Måske et billede af en Bellboy der byder velkommen til hotellet. Find billedet velkommen.jpg på nedenstående link, og gem det i din images-mappe: Ligesom i trin 4 skal du klikke på fanebladet Assets i files-panelet, og herefter klikke på ikonet Images. Hvis du ikke ser velkommen.jpg, så klik på refresh-ikonet billedet hen mellem din overskrift og din indholdstekst. nede i hjørnet. Træk 4. Selvom DW ikke er et program til billedredigering, så er der nogle grundlæggende funktioner til at beskære, komprimere, og redigere lysstyrke/kontrast. DW CS3 har også god integration med Photoshop, og det er faktisk nu muligt at copy-paste et billede fra Photoshop direkte ind i DW. Det var ikke muligt i tidligere versioner. Aktiver billedet du lige har placeret, ved at klikke på det. Properties-panelet giver dig nu mulighed for at redigere i billedet. Prøv at beskære billedet, så det ikke fylder så meget: 12
13 5. Nu skal der lidt indhold i footer. Tilføj hotel-adressen til elementet <div id= footer >. Eksempelvis: <div id="footer">hotel Holidays - Hotelvej 9, 1552 København V - tlf: </div> 6. Nu har vi oprettet en færdig side. Gem og preview siden i browseren [F12]. 13
14 Trin 7 Opret template Under dette trin lærer du hvordan du benytter Dreamweavers Template Management funktion. Vi skal nu lave en template/skabelon ud fra vores eksisterende side (index.html). Herefter er det muligt at oprette mange nye sider, som bygger på samme template/skabelon. Fordelene er: Alle sider forbliver konsistente Hvis du vil foretage ændringer der skal have effekt på alle sider, så behøves du kun at rette i din template. Herefter vil alle sider blive opdateret automatisk. 1. Nu skal vi gemme index.html som en template. Klik [File > Save as Template]. I tekstfeltet Save as: skrives skabelon. Klik på Save. DW spørger om du vil opdatere links. Klik Yes. I Files-panelet kan man se, at DW har oprettet mappen Templates, og gemt template som skabelon.dwt (dwt står for Dreamweaver Template). 2. Nu skal vi definerer hvilke områder af skabelonen vi vil gøre redigerbare når vi opretter nye html sider baseret på skabelonen. I dette tilfælde er det vores overskrift, billede og indholdstekst. Sørg for at skabelon.dwt er åben. Det kan være lidt svært at se om man redigerer i sin template, eller en almindelig html-fil. Er du i tvivl, så kast et blik på top-baren, hvor det er angivet med <<Template>> Markér overskriften, men sørg også for at få html-tags ene <h3></h3> med i markeringen. Klik herefter på [Insert > Template Objects > Editable region] eller tryk [Ctrl+Alt+V]. Giv et passende navn til regionen. 14
15 3. Gør nu også det på billedet og på indholdsteksten. Gem din skabelon 4. Nu er skabelonen oprettet, og vi kan nu lave nye html-sider, som baserer sig på denne denne. Klik på fanebladet Assets under panelet Files. Klik herefter på ikonet Templates. Din nyoprettede template skulle gerne kunne ses i panelet. Hvis ikke, så prøv at klikke på refresh-ikonet hjørnet. Højreklik på din template, og vælg New From Template: nede i 5. Du har nu oprettet et nyt dokument, som baserer sig på skabelonen. Gem det nye dokument og kald det velkommen.html. Der skal oprettes fire sider på samme måde, da vi har fire andre menupunkter. Gentag punkt fire, og gem de andre dokumenter som henholdsvis: beliggenhed.html, vaerelser.html, priser.html og reservation.html. 15
16 6. Nu skal menuen linke til de tilsvarende html-filer. Åbn skabelon.dwt (Ligger i Templates-mappen). Klik med markøren på teksten Velkommen: I Properties-panelet skal du klikke på sigtekorns-ikonet. Hold knappen nede, mens du trækker musen hen til velkommen.html. Du har nu oprettet første link: Gentag punkt 6 med de resterende fire menupunkter, så de linker til deres respektive sider. Gem din template. Dreamweaver spørger nu om du vil opdatere alle sider, som er baseret på skabelonen. Tryk Update. 7. Alle fem sider har stadig samme indhold, selvom de hedder noget forskelligt. Tilføj en passende overskrift og nyt indhold til siderne. Gem siderne, og preview dem i en browser. Test om menuen linker til alle de sider du har oprettet. TIP Hvis du ikke længere vil basere en side på en template, så kan du detache skabelonen [Modify > Templates > Detach From Template ] 16
17 Trin 8 Validér site Man kan validere alle sider på én gang. 1. Under Properties-panelet finder du Result-panelet [Tryk på F7]. 2. Klik på fanebladet Validation 3. Klik på den grønne Play-knap og vælg Validate Entire Current Local Site. Fordi vi allerede har angivet den korrekte doc-type, da vi oprettede det første dokument, så finder DW selv ud af at vi validerer efter XHTML 1.0 strict. Hvis dette ikke er tilfældet så klik på Settings. 4. Ret de fejl der eventuelt måtte være. 17
18 Trin 9 Upload site (NB: Dette trin er ikke nødvendigt, hvis du sidder på ITU s systemer og gemmer direkte til din public_htmlmappe på H-drevet eller til W-drevet) Hvis du sidder på egen computer eller derhjemme, så kan du uploade dine filer. Det forudsætter at du har udført punkt 1B korrekt. 1. Under Files-panelet skal du markere alle de filer du gerne vil uploade (Shift-klik for at vælge flere) 2. Klik herefter på den lyseblå pil (Put Files) 3. Dine filer uploades Sådan, Tillykke! Du har nu oprettet et site i Dreamweaver. Så skulle den ged være barberet. Har du fået blod på tanden til at lære lidt mere om Dreamweaver, så kan du evt. videotutorials ud på Adobes side: 18
19 Beskrivelse af selektorene i CSS-menuen #menu Her kan du ændre størrelsen på fonten #menu ul Sørger for at centrere menuen og giver rum mellem de enkelte menupunkter. Her kan du også ændre baggrundsfarven på menupunkterne. Bestemmer også farven på fonten. #menu ul li Sørger for at vise listen horisontalt. #menu ul li a Ingen tekstdekoration ved links #menu ul li a:hover Angiver baggrundsfarven på menupunktet når musen er over den. #menu #active { border-left: 1px solid #fff; Angiver at color skal ændre sig, når der sker en action (Eksempelvis at brugeren trykker på linket.) Der finds mange tutorials om hvordan man laver CSS-menuer. Du kan både lave drop-down-menuer, horisontale og vertikale menuer ved hjælp af CSS. Du kan finde mere inspiration på denne side: 19
Fase Forklaring Navigation. Mappen skal indeholde alle elementer til dit site.
1 Opstart af et site Opret hovedmappen Opret grafikmappen Opret dit site Mappen skal indeholde alle elementer til dit site. Opret en mappe indeni den første og kald den grafik. Heri lægges alle dine grafikfiler.
Nolde Museet. I gang med Dreamweaver. Opgave. Opgavebeskrivelse. Layout. Mål og CSS
Opgavebeskrivelse Lav en webside om i Sønderjylland. Opgaven fører dig igennem de basale ting, hvad angår opbygningen af en side med CSS. Der er ikke tale om et komplet site, men du kan bruge opgaven som
Grafisk Redegørelse Opgaven Programvalg Kvalitetsvurdering Målgruppe Arbejdsproces Kvalitet Komposition og layout Brugervenlighed
Redegørelse Grafisk Opgaven At redesigne en hjemmeside for AGF fanclub, som har et mere moderne look og et nyhedsarkiv som er let oversskueligt. Hjemmesiden er en opgave jeg selv har stillet mig og kunne
Mit grafiske workflow inkluderer:
GRAFISK WORKFLOW Opgave: Opgaven var at producere en bog og et website med temaet stilhistorie. Jeg har valgt at beskrive mit grafiske workflow i produktionen af websitet. Kravene var, at der skulle være
5. Billeder og logo til websitet er optimeret til web via Photoshop, så de fylder mindst muligt for at mindske indlæsningstiden for websitet.
GRAFISK WORKFLOW Grafisk workflow Beskrivelse Opgaven Design af website til Tipsbladet Fokus, som er noget, jeg selv har fundet på. Det er tænkt som et alternativ til Tipsbladet.dk, hvor der på Tipsbladet
Grafisk Workflow STILHISTORIE. Website lavet i forbindelse med et projekt om stilhistorie. Klik her for at se websitet:
STILHISTORIE Website lavet i forbindelse med et projekt om stilhistorie. Klik her for at se websitet: http://www.mediegrafiker-ats.dk/12gf32med8b/stil/maria/ Opgaven I forbindelse med et tema omhandlende
REDESIGN AF GRAFISK FORUMS HJEMMESIDE. Grafisk Workflow
Grafisk Workflow REDESIGN AF GRAFISK FORUMS HJEMMESIDE Før Efter REDEGØRELSE OPGAVEN Da jeg ikke har noget med web at gøre på min elevplads, opfandt jeg en fiktiv opgave - nemlig at redesigne Grafisk Forums
Projekt-studieweb. Om kommunikationsteorierne. Morten, Jacob, Kristian og Cihat
Projekt-studieweb Om kommunikationsteorierne Morten, Jacob, Kristian og Cihat Gestaltlovene Loven om nærhed Loven om lukkethed Loven om lighed Loven om forbundethed Loven om fortsættelse Loven om figur
Grafisk workflow. website til duckhead music
Grafisk workflow website til duckhead music Portfolio h1 Side 18 website til duckhead music Selvom jeg er hos et webbureau, så sidder jeg udelukkende med design, og er derfor ikke kommet til at kode endnu.
Billeder på hjemmeside
Billeder på hjemmeside Indholdsfortegnelse Emne 1. Billedredigering (Microsoft Picture Manager) Side 3 a. Komprimer billeder b. Beskæring af billeder 3 9 2. Billeder og tekst ved hjælp af en skabelon (Template
Efterlyst! Introduktion HTML & CSS. I dette projekt skal du lære, hvordan du laver din egen plakat. Arbejdsliste. Test dit Projekt.
HTML & CSS 1 Efterlyst! All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/ccwreg to register your club. Introduktion
GRAFISK WORKFLOW GRAFISK WORKFLOW DIGITAL KOMMUNIKATION OLEMOGELBY.COM
GRAFISK WORKFLOW DIGITAL KOMMUNIKATION OLEMOGELBY.COM OPGAVEN Redesign af Ole Møgelbys hjemmeside, der efter stor succes med sine værker, gerne vil have frisket udtrykket lidt op. Billedsiderne skal udvides
CSS fortsat: Boksmodel, floating & positionering
Webdesign og webkommunikation, formiddagshold (hold 1), IT Universitetet, forår 2012. Øvelse 4, individuel øvelse CSS fortsat: Boksmodel, floating & positionering 1. Lidt om hvad du har lært Du har i øvelse
Opstart. I gang med Dreamweaver. Læs mere om...
Generelle bemærkninger Programmet Dreamweaver har været på markedet i nogle år efterhånden. Den seneste version hedder Dreamweaver CS6, og programmet er på engelsk. Dreamweaver er en såkaldt grafisk editor,
web via Photoshop, så de fylder mindst muligt for at mindske indlæsningstiden for websitet.
GRAFISK WORKFLOW Grafisk workflow Beskrivelse Opgaven Redesign af website for bilforhandleren PerB. Opgave har jeg stillet mig selv med det formål at lave en simpel men indbydende udgave af PerB s website.
Opstart. I gang med Dreamweaver. Læs mere om...
Generelle bemærkninger Programmet Dreamweaver har været på markedet i nogle år efterhånden. Den seneste version hedder Dreamweaver CS5, og programmet er på engelsk. Dreamweaver er en såkaldt grafisk editor,
GRAFISK WORKFLOW. Layout Layout af hjemmesiden laves i Photoshop og siderne inddeles i mapper for bedre overblik.
GRAFISK WORKFLOW Opgaven Design og skabelse af website til maler og skrotkunstner Ole Møgelby. Websitet skal virke som en oversigt af Oles værker og som en informationsside. Programvalg Af programmer har
BRUGER KURSUS RAMBØLL HJEMMESIDE
Til Forsyningsvirksomheder i Danmark Dokumenttype Brugervejledning Rambøll Hjemmeside Full Responsive Dato Oktober 2017 BRUGER KURSUS RAMBØLL HJEMMESIDE BRUGER KURSUS RAMBØLL HJEMMESIDE Revision 01 Dato
Opstart. I gang med Dreamweaver. Læs mere om... Generelle bemærkninger. Hvilken skærmopløsning? OBS
Generelle bemærkninger Programmet Dreamweaver har været på markedet i nogle år efterhånden. Den seneste version hedder Dreamweaver CS4, og programmet er på engelsk. Dreamweaver er en såkaldt grafisk editor,
workflow Programmer: Om opgaven: Kvalitetsvurdering: Afsender: Modtager: Cathrine Laulund Web: Dreamweaver Billedbehandling: Photoshop
Om opgaven: For et halvt år siden overtog nogle bekendte værtshuset Midtskiws i Skive. De havde derfor brug for en ny hjemmeside, som kunne fungere som et online informationssted og visitkort for deres
Aptana editor til MAC og Windows
1 Aptana editor til MAC og Windows http://aptana.com/products/studio3/download For at downloade Mac versionen skal du klikke på : Customize Your Download og der efter klikke på MAC OS X. Indtast navn og
Oversigt HTML5 nye tags til sideopbygning
HTML5 er udviklet af WHATWG Oversigt HTML5 nye tags til sideopbygning (Web Hypertext Application Technology Working Group) En
Manual Serif Web & Tableau Public
Manual Serif Web & Tableau Public Indhold 2 Start 3 Festivalprogram 4-19 Kursuskatalog 20-22 Dramaskolehold 23-28 Visitkort konsulenter 29-30 Visitkort scener 31-35 Amatørkulturens tal 36-42 VIGTIGT! For
Brugervejledning til Design Manager Version 1.02
Brugervejledning til Design Manager Version 1.02 Indholdsfortegnelse 1. Introduktion... 3 1.1 Det kan du med HostedShop Design Manager... 3 1.2 Feature list... 3 2. Design... 4 3. Filer og CSS... 4 3.1
GRAFISK WORKFLOW Hjemmeside - Husk hjelmen. http://mediegrafiker-ats.dk/12gf32med8b/projekt/mette/
GRAFISK WORKFLOW Hjemmeside - Husk hjelmen http://mediegrafiker-ats.dk/12gf32med8b/projekt/mette/ Produkt Web sider Index side Underside - Cykelhjelmen - brug den rigtig. Underside - Husk nu cykelhjelmen.
Nyhedsbrev april: spørgeskemaundersøgelse
#ChronoContact_Survey { margin-bottom: 10px; margin-left: 0px;.form_element { float: left; font-family: Arial,Helvetica,sans-serif; font-size: 12px; margin-bottom: 8px; margin-left: 0; margin-top: 8px;
GRAFISK WORKFLOW H1 MARIA SCHELDE
GRAFISK WORKFLOW H1 MARIA SCHELDE DOKUMENTATION Opgaven Arkitekt Mette Schelde skulle have designet og programmeret et website, hvorpå hun kunne præsentere hendes produkter. Designkrav Sitet skal være
GRAFISK WORKFLOW GRAFISK WORKFLOW
Opgaven At lave en ny hjemmeside til tekniske skolers sportslege. Den gamle var rodet og uoveskuelig. Det vigtigste var at rydde op, samt holde en rød tråd til logo og indbydelsen. Afsender Lærerne på
Opret en formular i Dreamweaver
Opret en formular i Dreamweaver. Åben det html-dokument hvor du vil have din formular skal være på. 2. Klik i det felt (DIV eller tabel) hvor du vil have din formular skal være. Du kan se du er i feltet
Nu skal vi især se på <font> og <center> samt centrering af hele siden på skærmen.
Validering 4 Nu skal vi især se på og samt centrering af hele siden på skærmen. Det er i HTML ikke forbudt at bruge koden , men lad nu være alligevel, du får blot en masse valideringsproblemer.
OK Fonden. Umbraco CMS Quickguide
OK Fonden Umbraco CMS Quickguide 1 Indhold 1 Indhold... 2 2 Indledning... 3 2.1 Kompatible browsere... 3 2.2 Log ind i Umbraco... 3 2.3 Naviger i administrationsområdet... 4 2.4 Brug af træ menu... 5 3
Flash Logic Free CMS. Manual og brugervejledning
Flash Logic Free CMS Manual og brugervejledning Indhold: 1. Funktionalitet 2. Fil-oversigt 3. Baggrundsbillede 4. Banner-billede 5. Redigering af tekst 6. Brug af html-tags 7. Web site navn 8. Upload til
Qbrick s krav til video filtyper
Indhold Qbrick s krav til video filtyper... 1 Krav til ordningen/området... 1 Qbrick s krav til video leverandør... 1 Video og billede størrelser i WCM:... 1 Upload en video... 2 Trin 1: Mediefiler...
Vejledning til opbygning af hjemmesider
Side 1 af 9 Vejledning til opbygning af hjemmesider Hvis du er inde på din klubs hjemmeside, fx på forsiden, kan du nu gå i gang med at redigere. For at få redigeringsværktøjet frem, skal du klikke på
Fase Forklaring Navigation. Opret en div til feltet hvorpå scrollbaren ønskes placeret. Giv div'en mål og position absolut. Vælg Overflow: auto.
1 Scrollbar Åbn index.html Der skal være en side åben. Indsæt en div: scroll Opret en div til feltet hvorpå scrollbaren ønskes placeret. Definér div'en Giv div'en mål og position absolut. Vælg Overflow:
Indhold. Grafisk workflow 3 Procesbeskrivelse 4 Inspiration 5 Skitser 6 Flowchart 7 Typografi og farver 8 Skelet 9 Storyboard 12 Html, css og seo 16
GRAFISK WORKFLOW Indhold Grafisk workflow Procesbeskrivelse Inspiration 5 Skitser 6 Flowchart Typografi og farver 8 Skelet 9 Storyboard 2 Html, css og seo 6 Grafisk workflow Opgaven At skabe et nyt og
Mini brugermanual CMD 5.1
Mini brugermanual CMD 5.1 Kom i gang For at tilgå CMD skal du åbne en web browser og indtaste URL en på dit CMD website i adressefeltet, hvorefter dialogboksen til log in vises. 1. Indtast dit brugernavn
Grafisk Workflow. Endeligt layout. Om mig. Forside. Portfolio
Endeligt layout Forside Om mig Portfolio 1 Hjemmeside Opgaven I dette design projekt skulle jeg gennemføre en designproces, hvor jeg enten skulle redesigne eller designe et produkt. Jeg valgte at designe
Nedarvning. At style tags inden i andre tags. www.johnnihowardsen.dk - selektorer
Nedarvning Du styler som bekendt dit indhold med mange forskellige selektorer. De mest almindelige er class, id, tag men du kan også gruppere selektorer f.eks h1, h2, h3, p, a, img {font-family: Verdana,
Grafik & Billede weloveorganic.com webshop
Grafik & Billede weloveorganic.com webshop Opgaven og afsender: Weloveorganic.com er en forholdsvis ny virksomhed, der pånuværende tidspunkt udelukkende sælger økologisk tøj til kvinder. På længere sigt
GUIDE TIL OPRETTELSE AF SIDER OG INDHOLD I UMBRACO ONLINE BETJENING
GUIDE TIL OPRETTELSE AF SIDER OG INDHOLD I UMBRACO ONLINE BETJENING DANSKE BEDEMÆND august 2014 v1.4 1 P a g e INDHOLDSFORTEGNELSE Adgang... 3 Overordnet om Umbraco... 4 Højreklik muligheder i oversigten...
GRAFISK WORKFLOW. 1 Grafisk workflow
GRAFISK WORKFLOW 1 Opgavebeskrivelse I forbindelse med et nyt online koncept Web in a box skulle jeg lave en Photoshop-skabelon, der kan eksportere materiale til en hjemmeside automatisk. Selve konceptet
Login side 3. Visninger i mediebiblioteket side 5. Opdater din crawl side 7. Upload af billeder side 9. Upload billeder via Drag&Drop side 14
Indholdsfortegnelse: Login side 3 Visninger i mediebiblioteket side 5 Opdater din crawl side 7 Upload af billeder side 9 Upload billeder via Drag&Drop side 14 Udfyld og indsæt valgfri side i playlisten
HTML5 fortsat: Underside, links og tekstelementer på din hjemmeside Tekstformatering med CSS
Øvelse 2, individuel øvelse HTML5 fortsat: Underside, links og tekstelementer på din hjemmeside Tekstformatering med CSS 1. Lidt om hvad du har lært Du har i øvelse 1 lært at lave en HTML5-side med afsnit,
Manual Version 2. til oprettelse af hjemmesider for landsbyer i Rebild kommune
Manual Version 2 til oprettelse af hjemmesider for landsbyer i Rebild kommune Oversigt: Login Hjemmeside...... side 3 Login Administrationsmodul... side 5 Kategorier.. side 6 Opret/rediger første side...
CSS introduktion: Tekstformatering med CSS
Webdesign og webkommunikation, formiddagshold (hold 1), IT Universitetet, forår 2012. Øvelse 3, individuel øvelse CSS introduktion: Tekstformatering med CSS 1. Lidt om hvad du har lært Du har i øvelse
Indhold. Case 1: Introduktion 3. Case 2: Vælg og indstil tema 12. Case 3: Sider og indlæg 17
1. udgave 2012 Udgivet af Softworld Kurser A/S Kopiering samt gengivelse af indholdet er ikke tilladt, medmindre der er givet skriftlig tilladelse herom. Copyright Softworld Kurser A/S Forfatter: Martin
UMS Velkomst Byder nye brugere velkommen til skolen
Forord UMS Velkomst modulet giver mulighed for at give de kommende studerende et godt førstehåndsindtryk ved skolestart - den indledende kontakt til de studerende er umådelig vigtig. Velkomst modulet består
MANUAL. Siteloom CMS
MANUAL Siteloom CMS www.hjerteforeningen.dk/cms Brugernavn: Password: 3. september, 2012 BASIS FUNKTIONER 1. Kalender... 4 1.a. Opret... 5 1.b. Rediger eller slet... 8 2. Sider... 10 2.a Opret side...
MANUAL - Joomla! Version 1
MANUAL - Joomla! Version 1 Indhold Retningslinjer for hjemmesiden... 2 Log ind... 2 Ret i en artikel, der allerede er oprettet... 3 Opret ny artikel... 6 a) Skriv direkte i tekstfelt... 7 b) Indsæt tekst
Guide til Umbraco CMS
web Guide til Umbraco CMS Indhold Indledning 3 Kompatible browsere 3 Log ind i Umbraco 4 Content-delen 5 Indholdstræet 5 Tilføjelse af en side/sektion 7 Sortering af indhold 12 Galleri 14 Mediebibliotek
I gang med Adobe Muse CC
I gang med MUSE Muse er et program fra Adobe til fremstilling af websites, for de som ikke ønsker at arbejde med koder. De fremstillede websites baserer sig naturligvis på HTML, CSS, Javascript mm., du
Vejledning til Blackboards portfolio værktøj
Vejledning til Blackboards portfolio værktøj Brug denne vejledning, når du skal udarbejde din undervisningsportfolio i Blackboards portfolio værktøj. Ved at følge alle trinene nedenfor får du udarbejdet
Grafisk workflow. Maria Clausen Svendeportfolio Grafisk workflow
Grafisk workflow Maria Clausen Svendeportfolio Grafisk workflow OPGAVEN Kunden har stiftet et nyt firma som hedder Wood id, som sælger lamper, møbler og tilbehør lavet i kvalitets træ. Kunden ville gerne
Stylesheets - grundteori.
Når du designer med css gør du to ting: på den ene side opmærkes og struktureres sidens indhold med tags, eller markører på den anden side tildeles disse tags css-regler, hvormed du styrer layoutet. Her
Laura Svendsen Kernekompetencer GRAFISK WORKFLOW
Laura Svendsen Kernekompetencer GRAFISK WORKFLOW website til drømmemadpakken Hvad? Opgaven er anden del af en opgave i to dele, et trykt produkt og et digitalt produkt. Vi fik udleveret tekst og billeder
Login side 3. Upload af billeder side 8. Upload billeder via Drag&Drop side 14. Udfyld og indsæt valgfri side i playlisten side 17
Indholdsfortegnelse: Login side 3 Opdater din crawl side 5 Upload af billeder side 8 Upload billeder via Drag&Drop side 14 Udfyld og indsæt valgfri side i playlisten side 17 Vælg en valgfri side i playlisten
Præsentationsportfolio for Hovedforløb 1. Kongens Folk hjemmeside
Præsentationsportfolio for Hovedforløb 1 Kongens Folk hjemmeside Opgaven Jeg skal lave en ny hjemmeside til foreningen Kongens Folk. De har en gammel hjemmeside der skal fornyes. De ønsker en side, der
Sektornet VPN Installationsvejledning Windows Vista/7
Sektornet VPN Installationsvejledning Windows Vista/7 Version 5.0 Af Jesper Skou Jensen og Mads Udengaard Sørensen 1 Start installationen 1 1 Indledning Denne vejledning gennemgår opsætning af Sektornet
Sider, indlæg og projekter
Sider, indlæg og projekter I Divi-temaet er der tre forskellige måder at lægge artikler op på sitet; Sider, indlæg og projekter. På Villybruun.dk bruges Sider til alle artikler. Man kan oprette eller redigere
MANUAL - Joomla! Version 1
MANUAL - Joomla! Version 1 Indhold Retningslinjer for hjemmesiden... 3 Log ind... 3 Ret i en artikel, der allerede er oprettet... 4 Opret ny artikel... 8 a) Skriv direkte i tekstfelt... 9 b) Indsæt tekst
MANUAL. Siteloom CMS
MANUAL Siteloom CMS www.hjerteforeningen.dk/cms Brugernavn: Password: 3. oktober, 2013 BASIS FUNKTIONER 1. Kalender... 4 1.a. Opret... 5 1.b. Rediger eller slet... 9 2. Sider...12 2.a. Opret side...13
KT OR LOW PRODUKTION // WORKFLOW
PR D O U ION KT // W KFKF OR LOW PRODUKTION // WORKFLOW // WORKFLOW HJEMMESIDE / REDEGØRELSE / IDÉ, FARVE, FONT OG GRAFIK / SKITSER OG FLOWCHART / SKELET / STORYBOARD / CSS HVAD? Opgaven er en fiktiv hjemmeside
Manual til Dynamicweb Februar 2010
Manual til Dynamicweb Februar 2010 Login... 2 Skabeloner og formater... 3 Filarkivet... 4 Lav en PDF... 5 Opret en ny side... 7 Navngiv siden... 9 Aktiver siden... 9 Sorter sider... 9 Flyt siden... 11
Nvu hjemmesider hurtigt og let
Nvu hjemmesider hurtigt og let Brugervenlig og grafisk præsentation af textdokumenter var en af de store udfordringer indenfor softwareudvikling i slutningen af 1980erne. Tim Berners-Lee fra CERN udvikler
Byg web sider. Introduktion:
Introduktion: Du kender nu nogle enkle HTML tags, så nu er det på tide, at du kommer i gang med at lave din første side! Når du har nogle HTML-sider klar skal du have dem lagt op, så dine venner kan se
Vejledning til brug af pileforeningen.dk for redaktører.
Vejledning til brug af pileforeningen.dk for redaktører. Log in: Gå ind på: http://pileforeningen.dk Tryk på Login for medlemmer Brugernavn: contentmanager. Password: 1234 Når du er logget ind kan du se
Lav din egen forside i webtrees
Lav din egen forside i webtrees Du behøver ikke at kunne kode eller gøre noget advanceret for at designe din helt egen forside i webtrees. Alt du skal gøre er bare at gøre brug af den indbygget editor.
Dokumentation. Workflow. Grafisk produktion. Trine Alexandersen 1. hovedforløb
Dokumentation Workflow Grafisk produktion Trine Alexandersen 1. hovedforløb Jeg har valgt at vise min egen hjemmeside som workflow. Siden er min e-portfolio som skal vise hvad jeg lærer under min uddannelse
Upload af billeder til hjemmesiden m.m.
Upload af billeder til hjemmesiden m.m. Fremgangsmåde VVS-inst.dk Upload af billeder m.m., Side 1 Så går vi i gang Åben Firefox browseren Gå ind på denne adresse, for at komme til hjemmeside programmet.
MANUAL. Siteloom CMS
MANUAL Siteloom CMS www.hjerteforeningen.dk/cms Brugernavn: Password: 13. marts, 2014 BASIS FUNKTIONER 1. Kalender... 4 1.a. Opret... 5 1.b. Rediger eller slet... 9 2. Sider...12 2.a. Opret side...13 2.b.
Grafisk Workflow. Mediegrafiker - Svendeprøve. Mediegrafikeruddannelsen af Ramin Azizi
Grafisk Workflow Mediegrafiker - Svendeprøve Mediegrafikeruddannelsen 2012-2016 - af Ramin Azizi www.azizidesign.dk Dokumentation Opgavebeskrivelse: Jeg har i denne opgave valgt at redesigne s hjemmeside,
... øvelser. Fortæl mig, og jeg glemmer. Vis mig, og jeg husker. Involver mig, og jeg forstår. Konfutse
... øvelser Fortæl mig, og jeg glemmer. Vis mig, og jeg husker. Involver mig, og jeg forstår Konfutse 2 WORDPRESS ØVELSER ØVELSE 1: OPRET 2 POSTS OG 2 PAGES... 3 Opret posts... 3 Opret Page... 4 ØVELSE
Web sider. Introduktion: Har du nogensinde spekuleret over, hvordan det verdesomspændende internet virker og hvordan man snakker med det?
Introduktion: Har du nogensinde spekuleret over, hvordan det verdesomspændende internet virker og hvordan man snakker med det? I dag skal du lære at lave hjemmesider, så du også kan bidrage til at opbygge
Sådan indlægges nyheder på DSqF s hjemmeside trin for trin
Sådan indlægges nyheder på DSqF s hjemmeside trin for trin Systemkrav For at kunne bruge Composite kræves: Windows 95 eller nyere (bemærk - kun Windows kan bruges) Browseren Internet Explorer 6.0 eller
Redaktørvejledning for www.bredstrup-pjedsted.dk Skriv en artikel
Arbejdsgang - Skriv artiklens tekst - Gør billeder klar - Log-in på hjemmesiden - Opret ny artikel - Vælg kategori - Skriv overskrift - Indsæt tekst - Tilføj billeder - Gennemgå artiklens indstillinger
Introduktion til Indholdsredigering
Sitecore Foundry 4.0 Introduktion til Indholdsredigering 18. oktober 2013 - Version 1.2 Pentia A/S Store Kongensgade 66, Baghuset 1264 København K Telefon: 7023 3330 E-mail: info@foreningssite.dk Indholdsfortegnelse
Se hjemmesiden på:
Se hjemmesiden på: www.share-connect.dk Dokumentation Opgavebeskrivelse Det lokale erhvervsnetværk, Share & Connect skulle have designet og programmeret sin nye hjemmeside, hvor de ville kunne have mulighed
Sådan laver du et billedhjul i Soundslides Plus Ole Rode Jensen, oktober 2011
Sådan laver du et billedhjul i Soundslides Plus Ole Rode Jensen, oktober 2011 1 Soundslides samler billeder og lyd - ikke andet Soundslides er IKKE billedredigering og IKKE lydredigering, så billeder skal
Region Syddanmark Guide til oprettelse og udsendelse af nyhedsbreve i Peytz Mail
Region Syddanmark Guide til oprettelse og udsendelse af nyhedsbreve i Peytz Mail 10. august 2018 1 Nyhedsbreve i Peytz Mail Sådan opretter du et nyt nyhedsbrev 1. Log på Peytz Mail med dit brugernavn og
Projekt i Programmering C Menu til hjemmeside.
Projekt i Programmering C Menu til hjemmeside. 10-12-2004 Holstebro HTX Bent Arnoldsen Synopsis. Projektet her er en menu til hjemmesider, som er lavet så den er let at tilrette, når man tilføjer eller
Elevvejledning til SkoleKomNet - Min egen hjemmeside
Indledning...1 Sådan får du adgang...2 Dit KlasseWeb skrivebord Overblik...2 Dit arbejdsområde...3 Din hjemmeside på nettet...3 Sådan laver du en hjemmeside i 4 trin...3 Trin 1 Dit personlige billede på
Vejledning. Indhold. Side 1
Indhold HTML-faneblade... 2 Sådan tilføjer du et HTML-faneblad til din Facebook side.... 3 Sådan redigerer du et HTML-faneblad på din Facebook side.... 5 Sådan deler du fanebladet... 10 Side 1 HTML-faneblade
ASB E-mailsignatur. ASB E-mailsignatur. Vejledning til opsætning af e-mailsignatur IKT - Februar 2008
ASB E-mailsignatur I det følgende forklares, hvordan du opretter ASBs e-mailsignatur for medarbejdere. Det skal her noteres at e-mail signaturen ikke kan opsættes i webmail (webmail.asb.dk), men skal opsættes
Sådan redigerer du en hjemmeside i Umbraco
Brugermanual til din boligafdelings hjemmeside Sådan redigerer du en hjemmeside i Umbraco Indhold Introduktion... 2 Log på Umbraco og redigér din hjemmeside... 3 Opret ny side... 7 Gem side uden at udgive/publicere
I denne manual kan du finde en hurtig introduktion til hvordan du:
VORES NORDSJÆLLAND HURTIGT I GANG MANUAL 01: Bruger HVAD INDEHOLDER DENNE MANUAL? I denne manual kan du finde en hurtig introduktion til hvordan du: 1. Finder Vores Nordsjælland hjemmesiden 2. Opretter
www.johnnihowardsen.dk - nedarvning med selektorer
Nedarvning Du styler som bekendt dit indhold med mange forskellige selektorer. De mest almindelige er class, id, tag men du kan også gruppere selektorer f.eks h1, h2, h3, p, a, img {font-family: Verdana,
TYPO3 Nyhedsbrev. Version: 1.2 Tilpasset TYPO3: 4.2 Sidst opdateret: 20/10-2010 Copyright: IdeFA Gruppen
TYPO3 Nyhedsbrev Version:. Tilpasset TYPO3: 4. Sidst opdateret: 0/0-00 Copyright: IdeFA Gruppen IdeFA Gruppen - Havnepladsen - 9900 Frederikshavn - Tlf. 46 907 930 - info@idefa.dk - www.idefa.dk Indholdsfortegnelse.
GRAFISK PRODUKTION & WORKFLOW. Endotest website
GRAFISK PRODUKTION & WORKFLOW Endotest website DOKUMENTATION OPGAVEN: Endotest ApS ønskede at redesigne deres hjemmeside, så den fremstår mere professionel og enkel. Derudover skal det nye site præsentere
Installation af WeroShop 2.8
2013 Installation af WeroShop 2.8 Tommy Westerdahl Christensen Wero Electronics 01-01-2013 Indholdsfortegnelse INDLEDNING... 2 INSTALLATION... 3 GENEREL OPSÆTNING... 8 MOMS OPSÆTNING... 10 BETALINGSFORMER...
vorbasse.dk Redaktørmanual Kentaur
Redaktørmanual Kentaur Indholdsfortegnelse Kapitel 1 - TYPO3 Brugerfladen 3 Log ind 3 Backend 4 Frontend 5 Hvor skal jeg klikke? 5 Gem, gem og vis, gem og luk 6 Kapitel 2 - Sider & menuer 7 Sammenhæng
Active Builder - Brugermanual
Active Builder - Brugermanual Version: Release 2.0 Sprog: Dansk Copyright 2014 - Talk Active ApS INDHOLDSFORTEGNELSE INDHOLDSFORTEGNELSE... 2 1. HURTIGT OVERBLIK... 4 1.1 Vælg URL:... 4 1.2 Vælg en skabelon:...
FORSTÅELSE FOR GRAFISK PRODUKTION OG WORKFLOW
Opgaven I AArhus er en fiktiv hjemmeside. Formålet med hjemmesiden, er at Folk som befinder sig i Aarhus kan henvende sig til I AArhus og berette deres synspunkt på Aarhus. Siden henvender sig til unge,
Dannelse af PDF dokumenter
Dannelse af PDF dokumenter Indhold Dannelse af PDF-dokumenter i Phd Planner... 2 Valg af vedhæftninger i PDF dokumentet... 2 Valg af skabelon for PDF dokumentet... 3 Når PDF filen er dannet... 5 Gem PDF
Tastemanual til Webbyggeren
Tastemanual til Webbyggeren Denne tastemanual er opbygget således, at eleverne skal lave deres hjemmeside i en allerede konstrueret hjemmesideskabelon, som de kan arbejde videre i, lægge tekst ind i, ændre
Indhold Indhold... 1 Upload fil... 2 Skift sektion... 2 Rediger menu... 2 Planlæg udgivelse... 3 Opret side... 3 Opret nyhed... 3 Opret galleri...
Indhold Indhold... 1 Upload fil... 2 Skift sektion... 2 Rediger menu... 2 Planlæg udgivelse... 3 Opret side... 3 Opret nyhed... 3 Opret galleri... 3 Opret oversigtsside... 4 Opret element i række... 5
2. H vis du vil br uge egen computer til øvelser ne
W ebdesign og webkommunikation 2, I T U niversitetet, forår 2011. I ntroduktion til det praktiske 1. Målsætning Før vi går i gang med kurset, skal du have de helt lavpraktiske ting på plads, så du er helt
Quick guide Dynamicweb 9. Kom godt i gang med brugen af redigeringsværktøjet bag vores hjemmesideløsning CMS-systemet Dynamicweb
Quick guide Dynamicweb 9 Kom godt i gang med brugen af redigeringsværktøjet bag vores hjemmesideløsning CMS-systemet Dynamicweb Indholdsfortegnelse Sådan logger du på... 3 Opbygning... 4 Beskrivelse af