Upload
lenard-mccoy
View
215
Download
1
Embed Size (px)
Citation preview
Webdesign 1
Foundation Computing
I'd kill for a Nobel Peace Prize.
2 of 71
Web Design and AuthoringWorld Wide Web created whole new way
of publishing information
Special roles include: Web programmers Web design artists Web navigation specialists Content experts and authors
3 of 71
HTML
Standard format/language for Web documents:hypertext markup language
Markup language: Comprises normal text of document together with tags
Tags provide format, structure and references to other files, eg. multimedia, other web documents
4 of 71
Examining the HTML
You can look at the HTML of a Web page by selecting View->Source in Internet Explorer
Try it!As you will see, HTML is not a very easy
language to read (or write)You can directly edit HTML using a text
editor such as Notepad
5 of 71
Learning HTML
You are not expected to be an HTML expert!A lot of web designers use WYSIWYG editors
such as FrontPage or DreamweaverThey often work side by side in code and
layout view!Learn enough of the basic tags to produce
simple web pages or make minor changes to a web page
Refer to the HTML Tutorialwww.sci.usq.edu.au/courses/csc1402/resources/html
6 of 71
Overall File Structure
<html> <!-- Comment is ignored --> <head> <title>HTML Tutorial</title> </head> <body> Document body text here. </body></html>
will look like this: click here
7 of 71
Code
<html> <!-- Comment is ignored --> <head> <title>HTML Tutorial</title> </head> <body> Document body text here. </body></html>
8 of 71
Common HTML Tags
<h1>Level 1 Heading</h1> <p>Paragraph</p> <br>line break <img src="name of image file"> <a href="url">click here</a> <strong>bold</strong> <em>emphasis</em> <u>underlined</u> <center>centred text</center>
Click here
9 of 71
Common HTML Tags<h1>Level 1 Heading</h1><p>Paragraph</p><br>line break<img src="name of image file"><a href="url">click here</a><strong>bold</strong><em>emphasis</em><u>underlined</u><center>centred text</center>
10 of 71
Another example
<html> <head> <title>Birgit's Web Page</title> </head> <body> <center> <h1>Birgit's Web Page</h1> <hr> <p>My favourite colour is <strong>blue</strong>. <p>My favourite sport is <em>softball</em>. <p>My favourite movie is <u>Whalerider</u>. <p>I could say some interesting things here. </center> </body></html>
Click here
11 of 71
Another example<html> <head> <title>Birgit's Web Page</title> </head> <body> <center> <h1>Birgit's Web Page</h1> <hr> <p>My favourite colour is <strong>blue</strong>. <p>My favourite sport is <em>softball</em>. <p>My favourite movie is <u>Whalerider</u>. <p>I could say some interesting things here. </center> </body></html>
12 of 71
Spaces, gaps, new linesThis will be printed
In the same line as the text
above.
To create a line break you need to use <br>
Or <p> to start a new paragraph.
Or to add extra space between words in a sentence.
Click here
13 of 71
Spaces, gaps, new linesThis will be printed
In the same line as the text
above.
To create a line break you need to use <br>
Or <p> to start a new paragraph.
Or to add extra space between words in a sentence.
14 of 71
Navigating the Web
Each document can have numerous active links (using the HREF tag).
Someone browsing can follow a long sequence of links moving from web page (document) to web page.
Browsers keep track of where you have been so you can move back/forward.
15 of 71
Adding Links
Say I wanted to put a link to the USQ website onto my web page.
I could add the following:
I work at<a href="http://www.usq.edu.au">USQ</a>.
URL for linkText to display for link
<a> is called an anchor tag
16 of 71
Adding Images
Name of file with image
Text to display if image unavailable
Click hereClick here
Say I wanted to include a graphic image or photograph
I could add the following:
<img src=“giro.jpg” alt=“Photo”>
Image must be in same folder as HTML file.
You can add a “path” if the image is stored elsewhere.
17 of 71
18 of 71
Writing codeIn future, you may use a WYSIWYG editor
to write HTML codeFor assignment 7, you may not!
Do not save in your browser Save in Notepad only!!! Edit in Notepad only!
19 of 71
Web Page Design Issues
Page will not appear exactly the same everywhere Different computer screens, fonts etc. Different browsers (eg PDA) Default settings (eg font size) Different operating systems (eg playing WMV
files on Mac)
Size and download time
20 of 71
Web Page Design Issues (2)Content versus aestheticsConsistent Look-and-Feel
Common page layout, heading etc. Navigation bars/buttons Fonts, colours, alignment
21 of 71
Download Time
Common modems are 56 Kbps Effective download speeds across the Internet
can be substantially less WYSIWYG editors will show the download time for
a page over a standard modem Keep images small (eg. < 100K) by using GIF or
JPEG compression (see final module)
22 of 71
Separating Content and FormattingA web site with many pages can share the
same formatting information, eg. Colours & backgrounds Font size, colour, face Location of sections on screen Separate printable view
Use Cascading Style Sheet (CSS)http://www.csszengarden.com/
23 of 71
Write Less!
Guidelines Be succinct Write for scannability Use hypertext (links to other pages)
Reading from computer screens is about 25% slower than reading from paper
People don’t like reading from screensWrite 50% less text
24 of 71
Scannability
Users rarely read every wordStructure articles with headlines Use meaningful rather than "cute"
headings Use highlighting and emphasis to make
important words catch the user's eye.
25 of 71
Web Sites
A web site is a collection of related web pages, generally maintained by a single person or organisation
A web page is a separate HTML fileWith frames, a web page may comprise
many HTML filesImages and other multi-media components
are separate files also, eg. GIF, JPEG
Click here
26 of 71
Good Web Site Design
Make the site's purpose clearHelp users find what they needMake navigation easyUse visual design to enhance not distract Less is more!Use meaningful graphicsAlt text and titlesAccessible
27 of 71
Bad Web Site Design
AnimationsOrphan PagesLong Scrolling PagesLack of Navigation SupportOutdated InformationOverly Long Download TimesLinks that don’t work
28 of 71
QuizWhat does the Privacy Act regulate?
29 of 71
Quiz (2)What does the Freedom of Information Act
allow?
30 of 71
Quiz (3)What is the purpose of the Spam Act?
31 of 71
Quiz (4)What is the purpose of Copyright?
32 of 71
Quiz (5)Which HTML tag will include a line break?
A. <break>B. <linebreak>C. <br>D. <hr>
33 of 71
Quiz (6)Which HTML tag will make text bold?
A. <bold>B. <b>C. <strong>D. <s>
34 of 71
Quiz (7) What is wrong in the following HTML code?
<html><head>
<h1>Title of this page </h1><body>
<title> My website <title></html><b>Welcome to my website!!!</strong>
<body>
35 of 71
Quiz (7) What is wrong in the following HTML code?
<html><head>
<h1>Title of this page </h1><body>
<title> My website <title></html><b>Welcome to my website!!!</strong>
<body>
36 of 71
Quiz (7) What is wrong in the following HTML code?
<html><head>
<h1>Title of this page </h1><body>
<title> My website <title></html><b>Welcome to my website!!!</strong>
<body>
37 of 71
Quiz (7) What is wrong in the following HTML code?
<html><head>
<h1>Title of this page </h1><body>
<title> My website <title></html><b>Welcome to my website!!!</strong>
<body>
38 of 71
Quiz (7) What is wrong in the following HTML code?
<html><head>
<h1>Title of this page </h1><body>
<title> My website <title></html><b>Welcome to my website!!!</strong>
<body>
39 of 71
Quiz (7) What is wrong in the following HTML code?
<html><head>
<h1>Title of this page </h1><body>
<title> My website <title></html><b>Welcome to my website!!!</strong>
<body>
40 of 71
Quiz (7) What is wrong in the following HTML code?
<html><head>
<h1>Title of this page </h1><body>
<title> My website <title></html><b>Welcome to my website!!!</strong>
<body>
41 of 71
Quiz (8)How will the following HTML code appear
in a web browser?
The <em>quick</em> <b>brown</b><br>
fox jumped over the lazy dog.
42 of 71
Quiz (8)How will the following HTML code appear
in a web browser?
The <em>quick</em> <b>brown</b><br>
fox jumped over the lazy dog.
43 of 71
Quiz (9)What HTML code will include an image
with file name myphoto.jpg?
44 of 71
Quiz (9)What HTML code will include an image
with file name myphoto.jpg?
45 of 71
Quiz (9)What HTML code will include an image
with file name myphoto.jpg?
46 of 71
Quiz (9)What HTML code will include an image
with file name myphoto.jpg?
47 of 71
Quiz (10)
What is good website design?What is bad website design?
48 of 71
Missing links from last week Social context:
http://www.copyright.org.au/
CSS (cascading style sheets) http://www.csszengarden.com
HTML http://www.w3schools.com/tags/default.asp Allows you to try the code!
Colour contrast http://www.lighthouse.org/color_contrast.htm
Bad web design http://websitesthatsuck.com/
49 of 71
50 of 71
51 of 71
Missing links from last week Social context:
http://www.copyright.org.au/
CSS (cascading style sheets) http://www.csszengarden.com
HTML http://www.w3schools.com/tags/default.asp Allows you to try the code!
Colour contrast http://www.lighthouse.org/color_contrast.htm
Bad web design http://websitesthatsuck.com/
52 of 71
Browser (in)compatibility Firefox vs Internet ExplorerDefault font size
53 of 71
Use Hyperlinks
Split information up into chunks connected by hypertext links: Each chunk can be brief The full hyperspace can contain much more
information than would be feasible in a printed article
Long and detailed background information can be relegated to secondary pages
Let readers select those topics they care about and only download those pages
54 of 71
Structuring a Website
Help people navigate a web site: arrange pages hierarchically like sections and sub-sections
Provide links to the next, previous page, the parent and children pages and to the "top" home page
Consistent menu on every page (similar to TOC), in same location
Bread crumbs? http://www.usq.edu.au
55 of 71
56 of 71
Example Web Site Structure
Page 3
Home Page
Page 1.1
Page 1 Page 2
Page 3.1 Page 3.2
57 of 71
A Shallow Site Design
Home Page
Page 1 Page 2 Page 3 Page 4 Page 5 Page 6
58 of 71
A Deeper Site Design
Page 1
Page 1.1
Page 1.1.2
Page 2.1
Page 2.1.1
Page 2.1.1.1
Page 2
Home Page
Page 1.1.1
59 of 71
Big or complex Documents?What if you want to make available:
A big report written in Word? An Excel spreadsheet? A PowerPoint presentation?
Don’t assume the person viewing your web site has Microsoft Office!
Convert to Adobe PDF format, eg. using Adobe Acrobat or CutePDF.
60 of 71
Static & Dynamic PagesYou will create static pages
Look the same until you edit themDynamic pages change over time, eg.
Stock prices, sporting results etc. Webmail
Uses server side programming languages such as CGI, ASP, JSP and PHP
61 of 71
Forms and CGI
Web pages can also be set up to allow users to input data into boxes or form fields
User clicks a "submit" button and the information is sent back to the web server
Normally handled by CGI – the Common Gateway Interface, eg. the details may be emailed to someone
62 of 71
Active Pages
Web page interacts with user, eg. Image rollover Calculations Complex animations
Uses client side scripting such as JavaScript or VB Script.
More complex user interaction by downloading an applet, e.g. Java.
63 of 71
Web Hosting Many ISPs provide users with some space to place
a small web site Larger web sites may require paid web hosting
arrangements Usually you build your web site on your local
computer and then upload it to the web server using FTP or perhaps a “content management” web page
Every USQ students has some web space on the student server
http://studentweb.usq.edu.au (FTP)http://studentweb.usq.edu.au (FTP)
http://studentweb.usq.edu.au/home/lochb (view)http://studentweb.usq.edu.au/home/lochb (view)
64 of 71
65 of 71
66 of 71
67 of 71
68 of 71
69 of 71
70 of 71
Web Hosting Issues
Available SpaceISP’s server reliability and performanceYour own domain name?
Domain name registration
CGI support, eg. for enquiry forms being emailed to you
71 of 71
Getting Found
Various ways to ensure people find your website: Publicise URL Links from another website
PortalsLink exchange
Tell a search engineUse meta tags to tell the search engine keywords
(see Study Book)