Home Page

Workshop timeline

What are web pages?

Planning your site

Basic elements

Elements of design

Advanced techniques

Posting your site

Evaluation and polish

Web Page Design: From Planning to Posting
What are web pages?

What are web pages?

Web pages are actually just pages of text with coded messages telling a web browser how to display the web page. If you open a web page through a word processor, you will see a lot of funny looking symbols and codes. When you view the same page through your browser, you see the text, colors, and images the way the web designer intended.

Note that the text and images of a single webpage are stored separately.  Let's look at the code of a web page. Use your browser to open a web page that you like. Pull down the View menu to Source (or View Source). The code you are seeing is called HTML (an acronym which stands for hypertext markup language).  

Editing the text and layout of web pages:

Free web editing software

• Nvu (Recommended): Run or double-click nvu-1.0-win32-installer-full.exe, which a free open source web editor package from  http://www.nvu.com/
• Trellian WebPage: http://www.trellian.com/webpage/
• Amaya: http://www.w3.org/Amaya/Amaya.html

Alternative commercial web editing software

• MacroMedia Contribute: http://www.macromedia.com/software/contribute/
• MacroMedia Dreamweaver: http://www.macromedia.com/software/dreamweaver/
• Microsoft FrontPage: http://office.microsoft.com/en-us/FX010858021033.aspx

• Small Planet Communications: Create Your Own Web Page
• NCSA: Beginner's Guide to HTML

Editing images for web pages:

Free image editing  software

• Gimp (Recommended): Run or double-click gtk+-2.6.9-setup.exe, followed by gimp-2.2.8-i586-setup.exe, and then gimp-help-2-0.9-setup.exe.  This is a free open source web editor package from http://www.gimp.org/.

Alternative commercial image editing software

• Adobe PaintShop Elements: http://store.adobe.com/store/
• Jasc's PaintShop Pro 8: http://www.corel.com/