Filhåndtering her under SSH Link Billeder Dreamweaver her under hvordan vi opratter projekt

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

2. Filhåndtering: 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: - 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 Jakob Esben Hansen - jakobesben@itu.dk

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

4. Filhåndtering: Filhåndteringens 9 bud: 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" Jakob Esben Hansen - jakobesben@itu.dk

5. Filhåndtering: Filhåndtering og ITU: 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. Jakob Esben Hansen - jakobesben@itu.dk

6. Filhåndtering / SSH: Adgang hjemmefra / 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: • Åbn programmet Secure File Transfer Client. • Lav en forbindelse til ssh.itu.dk • Log ind med dit brugernavn og mail-password. • 4. Du er nu i dit H:-drev. Jakob Esben Hansen - jakobesben@itu.dk

7. Filhåndtering / SSH: Ændre rettigheder vha. SSH 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. 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. Jakob Esben Hansen - jakobesben@itu.dk

8. Filhåndtering / SSH: - 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. 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, ?? Jakob Esben Hansen - jakobesben@itu.dk

9. Link De fire link typer: 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 <a href=" ">. Den generiske opskrift på et link er således <a href="sted,-der-skal-linkes-til">Det, som skal klikkes på</a>. Som det ses er ophørskommandoen uhyre kort i forhold til selve kommandoen! Jakob Esben Hansen - jakobesben@itu.dk

10. Link De fire link typer: 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: <a href=" http://www.itu.dk/sw987.aps">ITU’s sitemap</a> 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: <a href="mailto:jakobesben@itu.dk">send en mail til Jakob Hansen</a> Jakob Esben Hansen - jakobesben@itu.dk

11. Link De fire link typer: I etinternt 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: <a href="../index.html">home</a> 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 <a href="#top">til toppen </a>. 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 <a name="top"> Jakob Esben Hansen - jakobesben@itu.dk

12. Link De fire link typer: 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. Jakob Esben Hansen - jakobesben@itu.dk

13. Image Billeder: 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 src="sti/filnavn"> 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". Jakob Esben Hansen - jakobesben@itu.dk

14. Image Billeder: 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. Jakob Esben Hansen - jakobesben@itu.dk

15. DREAMWEAVER Introduktion: 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. Jakob Esben Hansen - jakobesben@itu.dk

16. Dreamweavers vindue: 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. Jakob Esben Hansen - jakobesben@itu.dk

17. DREAMWEAVER 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. Publicering på nettet: Jakob Esben Hansen - jakobesben@itu.dk

18. Dreamweavers SiteManager - Site Definition 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. 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. Jakob Esben Hansen - jakobesben@itu.dk

19. Dreamweavers SiteManager - Site Definition 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... 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". Jakob Esben Hansen - jakobesben@itu.dk

20. Dreamweavers SiteManager - Site Definition 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) 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.... Jakob Esben Hansen - jakobesben@itu.dk

21. Mere om Dreamweavers SiteManager 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. Jakob Esben Hansen - jakobesben@itu.dk

22. TABELLER MED DW. En vej til orden Tabeller og deres funktion 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. <table> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> Sæt ovenstående kode ind i koden i DW. Hvad sker der? Jakob Esben Hansen - jakobesben@itu.dk

23. TABELLER MED DW. En vej til orden Tabeller og deres funktion Koden læses så som: <table> - tabel. I dette tag kan man lægge tabellens grundlæggende definitioner. Kan forstås som en slags body-tag for denne tabellen. <tr> - tabelrække ("table row"). Vandret. I dette tag kan man lægge rækkens grundlæggende definitioner. <td> - 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... Jakob Esben Hansen - jakobesben@itu.dk

24. TABELLER MED DW. En vej til orden At lave en tabel i DW. der er let. 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. Jakob Esben Hansen - jakobesben@itu.dk