Introduction to Web Page Design

1
Introduction to Web Page Design
2
Making Web Pages

• There are two primary ways to create and edit web
  pages
• Write HTML (HyperText Markup Language) code
• This is what Expert web page designers do. It
  takes time to learn to do this. We could spend
  the rest of the semester learning HTML coding
• Use a web page editor software program

3
Web Page Editors

• The Powerful but Expensive Programs
• Dreamweaver
• FrontPage
• Adobe GoLive

• The Less Powerful but Perfectly Adequate and FREE
  Programs
• Mozilla Composer (now a part of Sea Monkey)
• Web-O-Rama
• NVU

The instructor in this class use Mozilla Composer
to work on the course web site! The programs
listed are just examples, there are many more in
each category.
4
Step 1

• Think!
• Before you do anything else, you need to spend
  time thinking.
• What is the purpose of the web page/site?
• What color combinations will you use?
• What images will be needed to tell the story?
• You should have a good idea about what the end
  product will look like before you start.

5
Step 1a
School Web Site
Home Page for Ag Department
The Facilities

• As part of the thinking process, you may want to
  doodle a bit.

The FFA
The Faculty
CoursesOffered
SAE Programs
Course Descriptions
State Course Blueprints
National FFA
North Carolina FFA
6
Step 2

• Go on a Roundup.
• Locate images, files, etc. that you might use and
  place them in your www directory.
• It is important that all files be in the same
  folder.
• If you are going to work at home or some place
  other than the university computer lab, create a
  www directory on the hard drive, USB drive or
  whatever.

7
Step 3

• Open your Web Editor and start designing the
  home page.
• Save your work often!!!!!!!!
• Typically we name the home page in a web site
  index.html

8
Step 3 alternative
index.html

• At this point in time some people go ahead and
  create blank files for all the pages they plan to
  have. This helps in creating links from one page
  to another because you know what the names of the
  other pages are.

courses.html
ffa.html
faculty.html
sae.html
facility.html
descriptions.html
9
Naming Web Files

• Use all lower case (it will be easier to
  communicate the URL to others if it is all lower
  case).
• DO NOT have spaces in file names (some old
  browsers cannot handle spaces. You should rename
  graphic files if they have spaces)
• Try to keep file names as short as possible (this
  prevents errors in typing in URLs)

10
Step 4

• Typically, the first thing to do on a blank web
  page is to insert a table.
• Then as you add graphics and text, you can
  combine rows and columns or insert new rows and
  columns.

11
Table Commands

• 1. Select Insert Table.

Setting the width of the table
12
The Tables
13
Step 5

• Insert materials

14
Some Things to Remember

• A web page is like a picture puzzle. It is made
  up of a bunch of files. Unlike PowerPoint, web
  page editors do not embed graphics within the
  main file it just links to them. So when you
  move files to the www directory, you must move
  all files including graphic files.

15
Some Things to Remember

• You do not have the layout control in a web
  editor that you do in Word or PowerPoint.
  Therefore, the more savvy web designers used
  tables to control the layout out of their pages.
  If you set the borders to 0 width, you can't see
  the outline of the tables in the web browser. You
  will get very frustrated if you try to design a
  web page without tables. Your graphics will not
  appear where you want them.

16
Web Page Design Principles

• Use the appropriate balance of images, color, and
  space.
• Too many images on one page (or large images)
  will be slow to load.

17
Web Page Design Principles

• Dont have text wall to wall. Leave ample white
  space.
• It is best to insert a table to contain text and
  set that table to be only about 75-80 the width
  of the screen.
• This will leave adequate white space regardless
  of the monitor size or web browser used.

18
Web Page Design Principles

• Use color judiciously (in other words, dont go
  overboard with color).
• Just because you can make every cell in a table a
  different color doesnt mean you have to.
• A little color in the form of bullets, etc is
  fine.
• White or a light pastel is best for the
  background color. Avoid Gray.

19
Web Page Design Principles

• Have a common look and feel for each page in a
  web site.
• There should be a sense of uniformity.
• Perhaps there is a common graphical element and
  color on each page (like these slides)

20
Web Page Design

• Give the page a title (header).
• In the Page Properties section of a web editor,
  you can give the page a title. This is different
  than the file name. This title shows up on the
  top line of the web site when viewed in a web
  browser.
• Having a title on a page is the mark of a good
  web designer.
• Having no title indicates the designer doesnt
  know beans about web design.

21
Web Page Design

• Utilize a common scheme for page navigation.
• Once you get on a page, there should be links
  back to the home page or other pages on the web
  site.
• No links back to a home page indicates lack of
  skill in web design.
• A page with no link to the home page is known as
  an orphan page

22
Web Page Design

• Use graphics judiciously.
• Images should compliment and illustrate the
  concepts discussed on the page.
• Dont stick images on a page that have no reason
  for being on the page.

23
Web Page Design

• Have a method for contacting the author or owner
  of the web page.
• The link should be mailtogary_moore_at_ncsu.edu
• In Composer you must type the above in the link
  field
• In Dreamweaver, there is a mail to link button
  where you just enter the e-mail address
• Use a Spell Checker.

24
Some Pet Peeves

• In this class we dont teach you how to use
  frames to design web pages. However, you can
  use frames to design web pages in Dreamweaver.
• There can be problems in viewing pages with
  frames, so we say, just say no!
• Note A frame is where different parts of a web
  site show up in different windows on one page and
  each window has a slider bar

25
Some Pet Peeves

• Dont use Under Construction signs.
• This implies you are not on the ball.
• And good web designers are always making changes,
  so a page should really always be under
  construction.

26
Now, the rubber hits the road

• Create a web site based on
• http//www.cals.ncsu.edu/agexed/aee526/santagertru
  dis.html