Internet, html og Dreamweaver Anden øvelsesgennemgang Onsdag den 13. juni Webkommunikation 2007 v/ Niels Christian Nielsen
Første set: Om internettet - servere, klienter og browsere - filer - billede - farver, Sproget html - html-indføring - html-øvelser Programmet i dag Andet set: Dreamweaver, programmet - Introduktion af værktøjer, leg med farver og kode. - forbered FTP-upload, gemme filer - forklaring af layers - lav enkelt link mellem flere sites, og upload disse.
Internettet 1
Internettet 2 KlientServer Sprog HTML, javascript PHP, ASP KarakterStatiskDynamisk Browsere: Internet Explorer, Firefox, Opera, Safari browserstatistik browserstatistik Styresystem: Windows, Mac, Linux
Internettet 3 Filerbrugfilendelse Html-fil Indeholder htmlkodning - til visning af netsider.html /.htm Flash-fil Indeholder flashkodning - til visning af avanceret indhold til netsider.swf javascript Indeholder javascript - til visning af avanceret indhold til netsider.js Cascading Style Sheets Indeholder css-kodning - til definering af form af netsider..css asp-filer Serverside sprog, bruges til at lave dynamsike netsider (asp-sprog + andre som html).asp php-filer Serverside sprog, bruges til at lave dynamiske netsider (php-sprog + andre som html).php
Internettet 4 Billedfilerbrugfilendelse Jpg-fil Til billeder med mange forskellige farver.jpg Gif-filer Få farver plus transparent.gif Png-fil Som gif (i 8- bitversionen), blot ikke proprietært modsat gif- fil-systemet Kan også mere, følg nedenstående link.png Forskellene mellem filerne beskrevet indgående
Internettet 5 Farver kodes efter hexadecimalsystemet: #RRGGBB Sort: # Hvid: #ffffff Blå: #0000ff Grå: # Websafe colors
Internet og html
HTML 1 Hyper Text Markup Language Reglerne små bogstaver, hierarki, attributter angives i ” ” Skabelon:<start-tag>indhold</slut-tag> Stand-alone: Stand-alone: Skabelon med attribut: indhold indhold der kan være flere attributter i en tag
HTML 2 Eksempel på koder 1 Grundstrukturen: Angiv en titel her Angiv en titel her </head><body> Tekst som bliver vist på netsiden. </body></html>
HTML 3 Eksempel på koder 2 Link: Link tekst Link: Link tekst relativ sti kontra absolut sti Farvet tekst: Farvet tekst Farvet tekst: Farvet tekst NB! Semikolon efter værdien Fed tekst tekst, Kursiv tekst tekst, Overskrift: overskrift (eller h2, h3….h6 ) Paragraf: tekst Paragraf: tekst
HTML 4 Eksempel på koder 3 Standalone tags: Et billede: Et billede: Linjeskift:
HTML 5 Lær meget mere på
Øvelse 1
Øvelse 2 Opgave: - Få et billede til at fungere som link fra en side til en anden. - Få den anden side til at linke tilbage til den første side. (brug relativ sti-angivelse)
Dreamweaver ► ► Introduktion af værktøjer, leg med farver og kode. View: code vs design Insert, Properties, Advanced layout, Design, Files ► ► Forbered FTP-upload, gemme filer Filmenu: Site > New site (ftp-oplysninger) Filmenu: Modify > Page properties (indstillinger for hele site) ► ► Forklaring af layers Absolutte/relative og ’nested’ + proporties () ► ► Lav enkelt link mellem flere sites, og upload disse.