Download præsentationen
Præsentation er lastning. Vent venligst
1
Internet, html og Dreamweaver Anden øvelsesgennemgang Onsdag den 13. juni Webkommunikation 2007 v/ Niels Christian Nielsen
2
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.
3
Internettet 1
4
Internettet 2 KlientServer Sprog HTML, javascript PHP, ASP KarakterStatiskDynamisk Browsere: Internet Explorer, Firefox, Opera, Safari browserstatistik browserstatistik Styresystem: Windows, Mac, Linux
5
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
6
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
7
Internettet 5 Farver kodes efter hexadecimalsystemet: #RRGGBB Sort: #000000 Hvid: #ffffff Blå: #0000ff Grå: #666666 Websafe colors
8
Internet og html
9
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
10
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>
11
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
12
HTML 4 Eksempel på koder 3 Standalone tags: Et billede: Et billede: Linjeskift:
13
HTML 5 Lær meget mere på http://www.w3schools.com/
14
Øvelse 1 http://nielschristiannielsen.web.student.hum.au.dk/ovelse/web1.htm
15
Ø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)
16
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.
Lignende præsentationer
