Upload
nayeli-lawter
View
214
Download
1
Embed Size (px)
Citation preview
Create Web Pages with Multimedia
ICPMM65DA
Julie Fairless, Lecturer
Charles Darwin University
This resource is © 2007 School of Creative Arts & Humanities, Charles Darwin University
CH
AR
LES
DA
RW
IN U
NIV
ER
SIT
YC
HA
RLE
S D
AR
WIN
UN
IVER
SIT
Y
Week 2 Feb. 26/07 2
Today’s Overview• Welcome & Introductions• Class Logistics• Unit Information• Review Mac Basics (Jeopardy style)• Your Web Experiences• Likes and Dislikes• Types of Web Publishing• Easy Personal Sites• HTML - Bootcamp• Vermeer – Art Gallery Activity• Summary
CH
AR
LES
DA
RW
IN U
NIV
ER
SIT
YC
HA
RLE
S D
AR
WIN
UN
IVER
SIT
Y
Week 2 Feb. 26/07 3
Welcome & Introductions
• A bit about me• A bit about you
– What are your ambitions for this unit?– Have you published any web resources?
CH
AR
LES
DA
RW
IN U
NIV
ER
SIT
YC
HA
RLE
S D
AR
WIN
UN
IVER
SIT
Y
Week 2 Feb. 26/07 4
Class Logistics
• The Roll
• Ensuring enrolment
• Break times
• General understandings– Illness– Extensions
• Delivery options
CH
AR
LES
DA
RW
IN U
NIV
ER
SIT
YC
HA
RLE
S D
AR
WIN
UN
IVER
SIT
Y
Week 2 Feb. 26/07 5
Unit Information
• See Unit Info Handout
• RPL
• Unit Purpose / Outcomes
• Elements / Performance Criteria
• Proposed Schedule
• Assessment Overview
CH
AR
LES
DA
RW
IN U
NIV
ER
SIT
YC
HA
RLE
S D
AR
WIN
UN
IVER
SIT
Y
Week 2 Feb. 26/07 6
Your Web Experiences
• Favourite sites
• What do you use the web for?
• Experience with web site development
• Hopes for this class
• Fears???
CH
AR
LES
DA
RW
IN U
NIV
ER
SIT
YC
HA
RLE
S D
AR
WIN
UN
IVER
SIT
Y
Week 2 Feb. 26/07 7
Likes and Dislikes
• What makes a good website?
• Group work (15 minutes)– Recorder, Time keeper, Reporter– Brainstorm and identify what makes
a website good … make a list– What are are your likes and dislikes
… again, list them– Report back to class
CH
AR
LES
DA
RW
IN U
NIV
ER
SIT
YC
HA
RLE
S D
AR
WIN
UN
IVER
SIT
Y
Week 2 Feb. 26/07 8
Types of Web Publishing
• Personal Sites– E-Portfolios– Blogs
• Photo Sites– Flickr.com
• Topical Site• Business Sites• Entertainment Sites
CH
AR
LES
DA
RW
IN U
NIV
ER
SIT
YC
HA
RLE
S D
AR
WIN
UN
IVER
SIT
Y
Week 2 Feb. 26/07 9
Easy Personal Sites
• geocities.yahoo.com• Google Page Creator
– Google.com
• AOL• .mac (dot mac)
Practice• Have a look at mine• Build your own (20 min)
– Examine your code
CH
AR
LES
DA
RW
IN U
NIV
ER
SIT
YC
HA
RLE
S D
AR
WIN
UN
IVER
SIT
Y
Week 2 Feb. 26/07 10
HTML Boot Camp• What is HTML?
– HyperText Markup Language– W3C and standards / XHTML
• What’s a Markup Language?• Why bother exploring HTML?
• Tags <b>Bold</b>
• HTML tagged text – a document with HTML tags• Plain text document – a document with no formatting embedded
(but may contain tags).
• Text editors – notepad / textedit• Viewing HTML - browsers
CH
AR
LES
DA
RW
IN U
NIV
ER
SIT
YC
HA
RLE
S D
AR
WIN
UN
IVER
SIT
Y
Week 2 Feb. 26/07 11
HTML Boot Camp• Naming webpages
– Lowercase– 8 dot 3– E.g., index.htm
• Preview HTML– Refresh frequently
• Basic HTML Rules– Most HTMl tags wok in pairs
• <html></html>
– HTML tags are written in lowercase
– HTML ignores your paragraphs & tabs
• Must use <p>
CH
AR
LES
DA
RW
IN U
NIV
ER
SIT
YC
HA
RLE
S D
AR
WIN
UN
IVER
SIT
Y
Week 2 Feb. 26/07 12
HTML Boot Camp
• Basic HTML Rules– HTML looks different on different browsers– Some tags don’t work on some browsers
• Netscape Navigator• Stick to the basics
– Users configure their browsers differently– Screen resolutions WILL vary how your
HTML looks
CH
AR
LES
DA
RW
IN U
NIV
ER
SIT
YC
HA
RLE
S D
AR
WIN
UN
IVER
SIT
Y
Week 2 Feb. 26/07 13
HTML Boot CampKey HTML tags
1. <head></head>2. <title></title>3. <body></body>4. <h1></h1>, <h2></h2>5. <b></b>6. <i></i>7. <p></p>8. <hr>9. <a></a>10. <a href=http://domepro.com
>My Business Site</a>11. <img src=“yourpic.jpg”>
CH
AR
LES
DA
RW
IN U
NIV
ER
SIT
YC
HA
RLE
S D
AR
WIN
UN
IVER
SIT
Y
Week 2 Feb. 26/07 14
HTML Boot CampTry it out
1. Open textedit2. Save a file called personal.htm3. Use the HTML reference guide to create a
personal webpage including4. Your name5. Contact6. Hobbies / interests (unordered bullet list)7. 3 favourite links (ordered numbered list)8. Preview in Safari
CH
AR
LES
DA
RW
IN U
NIV
ER
SIT
YC
HA
RLE
S D
AR
WIN
UN
IVER
SIT
Y
Week 2 Feb. 26/07 15
Vermeer Art GalleryLet’s explore Tables and
setup an Art Gallery
1. View image files2. Resize to thumbnails3. Create the home page
(index.htm) which will link to the Gallery
4. Create a gallery.htm (which will contain the table of thumbnails)
5. Create a page to host each painting and link back to the Gallery
6. Create a Contact,htm page and link to it