introduction to web design web publishing html basics web design principles multimedia on the web
TRANSCRIPT
Introduction to Web DesignIntroduction to Web Design
Web publishingHTML basicsWeb design principlesMultimedia on the Web
Web publishing – the steps
Plan your site content
Make your pages using a program Publish your site
Test your site thoroughly
Plan your site content
1. Establish the goal of your site and its users
2. Sketch site structure
3. Sketch a common layout
Make your pages
The tools you can use
Notepad (need to write HTML code) Microsoft Word WYSIWYG Web editors (e.g. FrontPage,
Dreamweaver)
Test your site
Different browsers (e.g. Internet Explore, Netscape)
Different screen resolutions (640 x 480, 800 X 600, 1024 x 768)
Publish your site
What is a web server? Where can you find a web server? How to put your pages on a web server?
HTML basics
HyperText Markup Language Inventor: Tim Berners-Lee A set of tags which tells a browser how to
format and display a web page
HTML tags
Tag structure a starting tag (e.g. <HTML>) a closing tag (e.g. </HTML>) The starting tag <tagname attribute1=”value1” attribute2=”value2”…> A sample tag <BODY BGCOLOR="#CCFFCC"> Something really cool. </BODY> Some basic tags (see the handout)
HTML tables
Using tables enables you to neatly arrange your stuff on a page.
Three main tags: The <TABLE> tag, the <TR> tag and the <TD> tag
Table attributes: border, width, cellpadding, cellspacing, bordercolor, bgcolor, etc.
Web design
What makes a good website?
From a user’s point of view, a good web site is one that… …has something he/she wants …is usable …doesn’t waste his/her time and …isn’t irritating. (Kelly, 2000)
Useful
Usable
Make your site useful
What is the purpose of your site? Consider the characteristics of your users. What key tasks do they want to do on your
site? What information do they want to look for?
Make your site usable
• How people use the web?Users don’t like to think or wait!
Users don’t read pages, they scan them.
Users choose the first reasonable link.
• How to make a site usable?Break a page into clearly defined areas.
Create a visual hierarchy.
Keep the “noise” down.
Keep the file size small and reduce the
download time.
Web design principles
• Consistency of presentation
• Clear structure to help the user to identify
information
• Clarity of display (i.e. not too much displayed)
• Visual attractiveness
(Clarke, 1997, p 84)
Task
Plan your own website for future development (see the handout)
Multimedia on the Web
Text Images (jpg, gif, png) Sound (mp3, asf, ram, wav…) Video (mpeg, wmv, ram, mov, avi…) Flash (swf)
Images for the Web
photos.jpg
cartoons.gif
animated cartoons.gif
Images for the WebFile FormatFile Format
JPEG (Joint Photographic Experts Group)
GIF (Graphic Interchange Format)
Best for photographs Best for cartoons, line art and computer-generated drawings.
Full-colour images (24 bit or true colour)
Limited to 256 colours; can have
transparent backgrounds
• How to change the file format
Images for the WebFile SizeFile Size
• Ways to reduce the file size of an image:
reducing/cropping the dimensions of the image
reducing the number of colours used
scanning images at a lower resolution
• Thumbnails
Images for the WebResourcesResources
• Search the Web (copyright protected?)• Use clipart collections• Take photos using a digital camera• Scan images using a scanner
Tasks
Edit images for your web page
http://www.gifworks.com
Make a logo
http://www.flamingtext.com/start.html
http://www.3dtextmaker.com/