-Filhåndtering her under SSHFilhåndtering her under SSH -LinkLink -BillederBilleder -Dreamweaver her under hvordan vi opratter projektDreamweaver her under.

Præsentationer af emnet: "-Filhåndtering her under SSHFilhåndtering her under SSH -LinkLink -BillederBilleder -Dreamweaver her under hvordan vi opratter projektDreamweaver her under."— Præsentationens transcript:

1 -Filhåndtering her under SSHFilhåndtering her under SSH -LinkLink -BillederBilleder -Dreamweaver her under hvordan vi opratter projektDreamweaver her under hvordan vi opratter projekt -Tabeller og tabeller i DW.Tabeller og tabeller i DW. DAGENS PROGRAM Jakob Esben Hansen - jakobesben@itu.dk

2 Hold orden i dine filer! Sørg for at holde kladder adskildt fra færdige sider, og skab overblik over dine filer. Det hele klares nemt ved at oprette mapper til forskellige elementer: Jakob Esben Hansen - jakobesben@itu.dk Filhåndtering: - En mappe til kladder (som ikke skal på nettet) - En mappe til originalbilleder (som ikke skal på nettet) -En mappe til originaltekster (som ikke skal på nettet) -Og en mappe til selve sitet - de filer (.html) som skal på nettet. Heri oprettes flere mapper: -En mappe til sitets billeder -En mappe til sitets hjælpefiler (.css og.js etc.) -Mapper til underafdelinger af sitets indhold

3 Billedligt ser der sådan her ud: Jakob Esben Hansen - jakobesben@itu.dk Filhåndtering:

4 Filhåndteringens 9 bud: Jakob Esben Hansen - jakobesben@itu.dk Filhåndtering: 1. Kun engelske bogstaver, tal, bindestreg ( - ) og underscore ( _ ) i filnavne 2. Glem alt om æ, ø og å i filnavne 3. Aldrig mellemrum i filnavne 4. Kun små bogstaver i filnavne 5. Vælg en filendelse:.html eller.htm til alle websider i dit site, ikke begge 6. Navne må ikke være for lange navne, men heller ikke bestå af "uforst_fork". 7. Navngivningen skal være klar og logisk, for dig - men i allerhøjeste grad også for brugeren og dine gruppemedlemmer. 8. Det skal give mening for andre end dig selv... chancen er, at det vil forvirre dig mindre klokken sent lige før aflevering eller et halvt år efter! 9. Vær konsekvent i navngivningen - lad være med at skifte mellem flere "systemer"

5 Filhåndtering og ITU: Jakob Esben Hansen - jakobesben@itu.dk Filhåndtering: Filer, som skal vises på nettet, skal placeres på en webserver. Der skal filerne placeres korrekt for at virke, og det kan være svært overhovedet at finde der hen gennem et lokalt netværk. På ITU er det nu forholdsvist nemt: I dit personlige H:-drev findes fra starten nogle mapper, private og public_html. Disse mapper har nogle specifikke funktioner: private-mappen er din private mappe, hvis indhold er beskyttet mod fremmede øjne. public_html-mappen er din private webserver. Alt, hvad lægges der, er tilgængeligt for alle med en browser, og kendskab til din webservers url (uniform ressource locator=adresse), som er http://www.itu.dk/people/brugernavn/, hvor brugernavn er det som står foran @ i din itu-mailadresse. Skal du lægge nogle filer på nettet, og er på ITU, kan du derfor benytte Windows Stifinder til at kopiere og flytte filer til din public_html-mappe. Det er let.

6 Adgang hjemmefra / SSH Jakob Esben Hansen - jakobesben@itu.dk Filhåndtering / SSH: Er du ikke på ITU, foregår det på en noget anden måde. Du skal benytte et SSH-program, som Secure File Transfer Client eller lignende. Du kan også benytte et FTP-program, men det frarådes af ITUs IT-afdeling. Når du er logget ind (vha. dit brugernavn og mail-password) har du automatisk adgang til dit H:-drev, herunder også din public_html-mappe, og kan kopiere filer der til. Det er ikke så svært – når man først... MINI OPG1: 1.Åbn programmet Secure File Transfer Client. 2.Lav en forbindelse til ssh.itu.dk 3.Log ind med dit brugernavn og mail- password. 4. Du er nu i dit H:-drev.

7 Ændre rettigheder vha. SSH Jakob Esben Hansen - jakobesben@itu.dk Filhåndtering / SSH: SSH er sikret adgang og sikrer automatisk dine filer mod at blive læst af andre end dig selv. Det er selvsagt ikke så smart, når der nu er tale om en offentlig webserver. Derfor må man ændre de rettigheder som er sat på filen, så alle kan læse men kun ejeren (dig) kan skrive. MINI OPG2: 1. Find en billedfilen i din public_html-mappe. (hvis du ikke har et billede i mappen så læg et billede i den.) 2. Højreklik på filen 3. Find "Properties" i popup-menuen 4. Sæt rettighederne ("Properties") så "Group" og "Others" har ret til at læse men ikke skrive. 5. Tjek vha. en browser om alt er som det skal være. Du bør nu kunne finde din billedmappe med billedfilen indeni og kunne se den.

8 Jakob Esben Hansen - jakobesben@itu.dk Filhåndtering / SSH: MINI-OPG 3: Upload til opgave-serveren 1. Åben Secure File Transfer Client 2. Log ind med dit mail-password 3. Find menuen "View" -> "Show Root Directory" 4. I venstre oversigt klikker du på / (skråstreg) 5. Dernæst finder du mappen import - hvori du finder mappen stud - så mappen www, - og så mappen gwd - hvor du finder dit holds mappe, ?? - mappen til øvelser, - her finder du så mapper til de forskellige afleveringer og til holdene - og heri opretter din egen med dit brugernavn som mappenavn. 6. I denne mappe lægger du billedet fra første øvelse. 7. Åben en browser og gå til: http://www.itu.dk/stud/gwd/.../..../.../.../"brugernavn"/ du erstatter naturligvis "brugernavn" med dit eget brugernavn og holdfarve med den relevante kulør. Ser du noget - eller glemte du at rette rettighederne.

9 De fire link typer: Jakob Esben Hansen - jakobesben@itu.dk Link Der findes fire typer links: eksterne, hvor du linker til andres sider på deres server, mailto-links, hvor du linker til en email-adresse, interne, hvor du linker til andre websider på din server og lokale hvor du linker til et andet sted på samme webside. Fælles for disse links er at de benytter tag'et. Den generiske opskrift på et link er således Det, som skal klikkes på. Som det ses er ophørskommandoen uhyre kort i forhold til selve kommandoen!

10 De fire link typer: Jakob Esben Hansen - jakobesben@itu.dk Link I et eksternt link skal du skrive hele adressen (URL) på stedet du vil linke hen: Fx. er URLen til ITU’s sitemap: http://www.itu.dk/sw987.aps Så hvis du vil linke der til så skrives, linket sådan: ITU’s sitemap Et mailto-link fungerer ved at indeholde en emailadresse og ved klik åbner brugerens email-program. Det skrives sådan her hvis jeg skulle lave et link på min egen side: send en mail til Jakob Hansen

11 De fire link typer: Jakob Esben Hansen - jakobesben@itu.dk Link I et internt link kan man bare skrive den lokale sti, altså forskellen mellem det man linker fra og det man linker til... Et link til ens indexside vil således typisk kunne skrives: home De to prikker og skråstregen (../) foran filnavnet angiver at browseren skal gå en mappe tilbage. Lokale links fører dig fx. op og ned i den samme webside, og de skrives til toppen. Hagen ved disse er at de skal forberedes, der skal placeres et sted at gå hen. Det gør man ved at placere en stump kode det pågældende sted: fx

12 De fire link typer: Jakob Esben Hansen - jakobesben@itu.dk Link MINI-OPG: 1. Lav en lille hjemeside, som består af min to html-sider. 2. Prøv at eksperrimenter med de forskellige link typer.

13 Billeder: Jakob Esben Hansen - jakobesben@itu.dk At sige, at man lægger billeder ind på websiden er faktisk forkert, for det man gør er at lave et "hul" i websiden som billedet hentes ind i. Man kalder altså billedet. Et billede kaldes med kommandoen: Img henviser til typen, image/billeder, og src er en forkortelse for "source". Tag'et til billeder står alene. Det er ikke afsluttet, da det kun gør noget i kraft af sit indhold som det henter udefra, men også fordi det er et tag som har overlevet fra "gamle dage". Image

14 Billeder: Jakob Esben Hansen - jakobesben@itu.dk En væsetnlig detalje ved billeder er at de nogle gange ikke vises, da de bliver væk, går i stykker, nogle brugere har slået billederne helt fra fordi de ikke gider vente eller er blinde. I disse tilfælde er det godt at have en alt-attribut, som dukker op som erstatning (man kan alternativt bruge en title-attribut) og forklarer billedets indhold. Det er super nemt i DW. Image

15 Introduktion: Jakob Esben Hansen - jakobesben@itu.dk Dreamweaver er en professionel HTML-editor, som man laver websider med. Det kan umådeligt mange ting, hvoraf vi holder os til at designe siderne, og arbejde med dens filhåndtering ("Sitemanager"). Dreamweaver har en del konkurrenter, hvoraf Adobe GoLive er den nærmeste. Forskellen mellem de to er hovedsagligt en smagssag. Selvom Dreamweaver indeholder en slags browser, så viser den ikke koden fuldstændig som i de rigtige browsere. Man skal altså altid huske at tjekke designet i forskellige browsere, for at se om det ser ordentligt ud. Derfor må I ikke glemme hvordan koderne virker, for så bliver fejlretningen for alvor svær. DREAMWEAVER

16 Dreamweavers vindue: Jakob Esben Hansen - jakobesben@itu.dk Vigtige funktioner: Modes Skifter mellem tre synsvinkler på dit design,hhv. kun kode, kombineret kode og visuel, og kun visuel visning. Title Her ændrer du dokumentets titel. Når det er så nemt er der ingen undskyldning for at glemme det. Insertpanel Indsæt elementer som billeder, links og tables (fra "Common") eller formater teksten ("Text") og meget mere. Properties Fastlæg elementerne i detaljen. Properties skifter indhold (og muligheder) alt efter hvad du peger musen på. Sites/Files Sitemanageren. Snart kan du ikke leve uden.

17 Publicering på nettet: Jakob Esben Hansen - jakobesben@itu.dk Før vi giver os i kast med programmet skal vi have to begreber på plads local root folder, og remote folder Local root folder er den folder, hvor du sidder og arbejder med dine filer. Det skal være en folder, som ikke er tilgængelig for surfere på nettet. Typisk dit H:-drev. Den er dit digitale værksted. Remote folderen kommer i funktion når du er færdig og har tjekket sitet i en browser, og fundet alt godt, så du kan offentliggøre dit værk. Tidligere skete det ved at du kopierede dine filer til dit H:\public_html med ssh. Men i Dreamweaver har du Sitemanageren som gør arbejdet for dig Opdager du alligevel fejl, retter du dem i din Local Root-folder, hvorefter du kopierer filerne over i remote-folderen. Du retter aldrig direkte i filer i remote-folderen. DREAMWEAVER

18 Dreamweavers SiteManager - Site Definition Jakob Esben Hansen - jakobesben@itu.dk Indstillinger: Site Name I Site name skrives et navn på sitet. Det kan være med alle bogstaver, da det kun er for din skyld, til brug i Dreamweaver. Local Root I Local Root Folder finder du den folder hvor du arbejder, eller vil arbejde, og vælger den ved at trykke på "select". Default Images Har du en fast billedmappe, kan du med fordel definere den i Default Images Folder - det letter arbejdet. Diverse... Du sætter kryds i både Refresh Local Files List og Enable Cache. Man trykker endnu ikke på OK, men vælger næste emne i "Category" - Remote Folder. For at kunne bruge Sitemanageren, skal man sætte sit site op, og dertil åbner man [ Site - New Site...], hvorefter nedenstående menu dukker op, som man udfylder bedst muligt. Ser menuen anderledes ud, er man sikkert landet i Basic-mode, og kan man forsøge at vælge Advanced.

19 Dreamweavers SiteManager - Site Definition Jakob Esben Hansen - jakobesben@itu.dk Indstilllinger: Access: I Access vælger du mellemforskellige upload-typer. Mest gængse er FTP og Local/Network. FTP er typisk noget man bruger hvis man skal i kontakt med en fremmed computer. FTP kræver lidt mere indtastning - mere om det om lidt. Local/Network bruger man hvis man er direkte forbundet med serveren eller har et public_html. Der den type vi bruger internt i vores H: (fra "værkstedet" til public_html) Hvis du bruger FTP skifter denne menu udseende og en række yderligere kasser dukker op. Som du udfylder: ITU's FTP-server hedder ftp.itu.dk, adgangskoden er dit mail-password og - brugernavn. Og derved får du adgang til dit eget H:/ og alle dine mapper. Remote Folder Remote folder er din public_html, eller din servers home, hvis du har en sådan. Diverse: Refresh Files, holder din Sitemanager automatisk opdateret - generelt en god idé. Men sæt ikke Sitemanageren til at uploade automatisk - det er "farligt". Har man indstillet sit sites Local Root Folder er turen kommet til Remote Folder, altså din offentligt tilgængelige webfolder. Samme procedure som ved Local Root Folder...

20 Dreamweavers SiteManager - Site Definition Jakob Esben Hansen - jakobesben@itu.dk Indstilllinger: Access: FTP (ssh findes ikke som direkte funktion i Dreamweaver) FTP Host: Den server du vil sende dine filer til. På ITU hedder den ftp.itu.dk Host Directory: Den mappe dine filer skal ligge på, normalt ligger alle dine filer i roden (direkte i public_html) Host Directory - Obligatoriske opgaver W1: /import/stud/www/gwd/.../..."+nummer"/ Login og Password: Dem du altid bruger på ITU -brugernavn og mailpassword. Det er en god idé at sætte kryds i "Save" udfor Password, så husker DW det for dig.... Bruger du FTP - og det gør du når du afleverer dine obligatoriske opgaver - skal du udfylde FTP-delen af formularen. (sådan var det i hvert fald sidste semester)

21 Mere om Dreamweavers SiteManager Jakob Esben Hansen - jakobesben@itu.dk Til højre i arbejdsvinduet findes en række mørkegrå paneler. Find og klik på det som hedder "Files". Herefter dukker der, som på forrige slide blev kaldt Sitemanager op. Klikker man på knappen der viser et lyst "T" med blå tværstreg - - kan man få et mere overskueligt billede af sit site.

22 Tabeller og deres funktion Jakob Esben Hansen - jakobesben@itu.dk I webdesign har tabeller længe været en de af den mest populære layoutteknik. Tabeller kan nemlig det med at placere indhold i pæne rækker og lige spalter, og det kan almindelig html ikke. 1 2 3 4 Sæt ovenstående kode ind i koden i DW. Hvad sker der? TABELLER MED DW. En vej til orden

23 Tabeller og deres funktion Jakob Esben Hansen - jakobesben@itu.dk Koden læses så som: - tabel. I dette tag kan man lægge tabellens grundlæggende definitioner. Kan forstås som en slags body-tag for denne tabellen. - tabelrække ("table row"). Vandret. I dette tag kan man lægge rækkens grundlæggende definitioner. - tabeldata ("table data") altså en "celle". Her kan man sætte definitioner som skal gælde for denne ene celle. Der er intet tag for søjler... TABELLER MED DW. En vej til orden

24 At lave en tabel i DW. der er let. Jakob Esben Hansen - jakobesben@itu.dk I menuen "Insert" -> "Table" definerer man hurtigt antal af søjler og antal af rækker, og så er det bare at sige OK. Tabellen placeres der hvor cursoren er placeret. Således har man så lavet sin tabel. Herefter er derdog en del ting man kan gøre med indholdet (farver og sådan - kommer med css, senere). Med menuen "Commands" -> "Sort Table" kan man sortere indholdet i sin tabel (Nyttigt!). Husk at vælge første række til eller fra (efter relevans). Og så kan man, i menuen "Modify" -> "Table" ->... tilføje eller slette rækker og søjler, sammenføje eller splitte celler. TABELLER MED DW. En vej til orden