Transcript web-design-fundamentals

Slide 1
© 2001 By Default!
Web Design
Fundamentals
A Free sample background from www.powerpointbackgrounds.com
Slide 2
A Free sample background from www.powerpointbackgrounds.com
© 2001 By Default!
Slide 3
A Free sample background from www.powerpointbackgrounds.com
© 2001 By Default!
Slide 4
A Free sample background from www.powerpointbackgrounds.com
© 2001 By Default!
Slide 5
© 2001 By Default!
Planning your Site
 Setting your goal
– purpose, mission, reason for existence.
– does the world need another website?
– what does YOURS have to offer?
– define your target audience.
 Organizing information
– Plan your web pages.
– Create or gather content (text usually).
– Insert multimedia and links.
 Choose a webpage creation tool
– appropriate for your skill level. (HTML vs. a
visual tool).
A Free sample background from www.powerpointbackgrounds.com
Slide 6
© 2001 By Default!
Create a Storyboard
 Navigation
and usability is
paramount when it comes to web
design.
 Work out a directory structure that
shadows your story board.
 Make navigation easy for potential
surfers … from any point they may
enter your site.
A Free sample background from www.powerpointbackgrounds.com
Slide 7
A Free sample background from www.powerpointbackgrounds.com
© 2001 By Default!
Slide 8
A Free sample background from www.powerpointbackgrounds.com
© 2001 By Default!
Slide 9
A Free sample background from www.powerpointbackgrounds.com
© 2001 By Default!
Slide 10
© 2001 By Default!
Excellent software package for creating storyboards,
for brainstorming or creating concept maps.
A Free sample background from www.powerpointbackgrounds.com
Slide 11
© 2001 By Default!
What is HTML?
HTML stands for HyperText Markup
Language. HTML is the language of the
World Wide Web (WWW).
 Many webpages that you see are written with
HTML.
 With HTML, you have the ability to bring
together text, pictures, sound and links.

A Free sample background from www.powerpointbackgrounds.com
Slide 12
© 2001 By Default!
Tools of the Trade
 Raw
HTML editing (coding)
 HTML Visual Editors (Popular)
– Microsoft Front Page
– Adobe GoLive
– Macromedia Dreamweaver
 HTML Editors (FREE)
– Netscape Composer (netscape.com)
– Arachnophilia, 1st Page, etc. (non-visual)
– Go to tucows.com to find many more
(shareware, adware, freeware)
A Free sample background from www.powerpointbackgrounds.com
Slide 13
A Free sample background from www.powerpointbackgrounds.com
© 2001 By Default!
Slide 14
© 2001 By Default!
Writing in source (HTML) is known for giving
more control to the author, however, is often not
feasible for the less-experienced user.
A Free sample background from www.powerpointbackgrounds.com
Slide 15
© 2001 By Default!
Important Points
 HTML
documents are not “complete” in
themselves (such as in the case of a
MS Word document).
 HTML files rely on relatively linked data
files!!!
– Be careful to never move or remove a “data” file
from it’s original location.
– ALSO, all files in your web must be located in a
publicly accessible folder (usually a “website”
folder or often a “public_html” folder.
A Free sample background from www.powerpointbackgrounds.com
Slide 16
A Free sample background from www.powerpointbackgrounds.com
© 2001 By Default!
Slide 17
A Free sample background from www.powerpointbackgrounds.com
© 2001 By Default!
Slide 18
© 2001 By Default!
Important Points
 File
management, file naming and
organizational skills are vitally
important when creating websites.
– Do not use spaces or “special” characters in file
names (stick to numbers and letters).
– Consciously give a meaningful name every file in
your web.
– Example: Instead of naming a file pageone.html,
you might call it introduction.htm.
A Free sample background from www.powerpointbackgrounds.com
Slide 19
© 2001 By Default!
Adding Graphic Content
 Scour the web
– use Google, Altavista, Ditto or other search
engines that provide image searching. (Be
aware of copyright).
 Create your own
– from scanning, digital cameras.
– Use web-based graphic generators.
– Use image editors (Adobe Photoshop, Microsoft
Photodraw, the Gimp (free at gimp.org) to edit or
create images.
A Free sample background from www.powerpointbackgrounds.com
Slide 20
© 2001 By Default!
Google and other search engines
have a specialized image search.
A Free sample background from www.powerpointbackgrounds.com
Slide 21
A Free sample background from www.powerpointbackgrounds.com
© 2001 By Default!
Slide 22
© 2001 By Default!
Link, Link, Link
 Special caution:
– Don’t create just another “hotlist” .
– DO incorporate original and useful content.
 Types of links:
– Relative (links to pages on your web).
– Absolute (often go to other web pages).
– Anchored (link further down the same page).
– Email (link directly to an email address).
– Action (will trigger events – media or download)
A Free sample background from www.powerpointbackgrounds.com
Slide 23
© 2001 By Default!
Understanding the URL
 URL:
Uniform Resource Locator
 Example:
– http//:www.uregina.ca/courosa/hobbies/golf.htm
Domain
Subfolders
File
The “default” may be named: “index.htm(l)”,
OR “default.htm(l)”. .
 Either .htm or .html extensions can be used
for webpage filenames.

A Free sample background from www.powerpointbackgrounds.com
Slide 24
© 2001 By Default!
Where does my webpage live?
Your webpage must be hosted on a web
server.
 You can setup your own server, or (more
commonly), have your page hosted by a
web-hosting service.
 SaskTel, Access Communications, Shaw
Communications, etc. often provide free web
space with an Internet account.
 There are also free ad-driven alternatives
(e.g., Geocities, Angelfire, etc.)
 Often, you will need to use FTP software (file
transfer protocol) to upload your webpage.

A Free sample background from www.powerpointbackgrounds.com
Slide 25
© 2001 By Default!
Easier Alternatives
Free (ad-driven) services such as Geocites
or Angelfire provide free space AND both
offer simple “web-creation wizards” to create
your webpage. Although these are easier,
they restrict originality.
 Web logs (aka Blogs) have recently become
quite popular. These easy-to-use services
allow for the posting of online diaries or
“logs”. People are finding many other uses.
(See Blogger.com or Moveabletype.org. They
are free to use.

A Free sample background from www.powerpointbackgrounds.com