How to Make a Website (DW)/Step 3 - Basic Page Design (HTML)

From WSU Technology Knowledge Base
Jump to: navigation, search

There are several ways to make web page.

Overview of Step-by-Step Web Page Design

In this step-by-step we will be creating a model page out of the "Index" page.

  • This model page will display a "banner" element (in the form of an image file) and a "menu" element (in the form of a "Library" item).
  • All other pages on the site will be copies of this model page, and will contain the identical banner and menu items.
  • We will begin with making the banner (Step 4).
  • Then the menu (Step 5).
  • Then we will complete the Index page which will be the model for all others (Step 6).
  • We will add special (optional) pages for a text portfolio and for a multimedia or slideshow portfolio (Steps 7 & 8)
  • Finally we will publish the site to the web server (Step9)

To Start

  1. Close the Dreamweaver Welcome Window
  2. From the menu choose File>New
  3. Choose Blank Page > HTML > none and then click "create".
  4. After it has opened, save it using File>Save.
  5. Name it "index.html"

The "index" page is the "home" page for your site, the one that opens when you first enter your site.

This will be our model page.

What is HTML?

The basic "code" for web pages is called Hypertext Mark-Up Language or HTML. See Wikipedia for more information.

It is based on "code" originally used by the U.S. Government to transmit typesetting instructions, such as bolding or font size, etc., to print publishers via electronic files. These special "tags" became the bases for HTML, along with the special feature of a Hyperlink for a "web" address.

Nowadays there are many kinds of specialty "codes" (such as CSS for "style sheets" and .ASP or .PHP which are typically used for database driven content). There also supplementary "scripts" such as Java or Flash used on the web to create animations and other routines.

We will be principally creating all our pages using just HTML (now in its fifth generation). In creating slide shows for portfolios we will be using software programs that will automatically generate the required codes and scripts to make them work.

You will not need to understand HTML code or any other code or script to create web pages. You will be editing pages like you do a word processor.

But there are features of the editing that will require some understanding of how the code/script works and these will be revealed in how Dreamweaver works. There are "property" settings and other "fill-in" tags that you will have to complete to make things show up the way you want them to. It is not exactly like using a word-processor.

And you will want to know how to use Photoshop for editing pictures. For example, changing sizes, cropping, saving to different file types. These will be explained in the steps which follow.

Basic HTML Page Design

See Step 6: How to Make a Website (DW)/Step 6 - Make an Index or Home Page for details on how the basic page design will be set up.

Dreamweaver will use several "codes" or tags to set up a web page.

By itself an HTML page has a hidden "header" which names the page and controls some ways it appears, e.g., a background color.

The main thing you see on the page is called the "body" -- this is where the text and images are that you can see.

Text and images on a page will be bunched up and align to the left side of the window.

Encoding the HTML can change how text and images appear in the window.

You will NOT have to learn how to write this code. You will use Dreamweaver to choose options and properties to make edit these codes and you will be able to see the changes as you make them.

Again, in this way it works like a WYSIWYG word-processor. But you will see that sometimes HTML terminology is used to describe the text or image options and formats you use. We will try to make these understandable but some technical jargon is unavoidable.

The Other Design Methods for Pages

We list in a sub-directory to this page some links to short pages to describe some of the ways that Dreamweaver can help you set up pages. Specifically these are ways to help you organize and display the "space" on your web pages.

For example, web pages commonly have sidebars, banners, columns and footers where content can be displayed and menus put. These help keep the display of pages constant as you go from one page to another, and help you navigate content.

Among those tools are tags/coding for:

We will be using tables principally as the way to manage the "space" on your web pages.

Dreamweaver Workspace

What Dreamweaver Workspace Looks Like and Uses


This is a Dreamweaver on a PC window. On the Mac the Application (Menu) Bar and Document tool Bar look slightly different.

A. Application bar = On the Mac this is the menu bar; provides options for formatting and inserting objects

B. Document toolbar = toggles views of the document/page you are working on; including code or "live" view; and updating to your web site

C. Document window = the page you are working on with all of its objects and content

D. Workspace switcher = you can chose different default views of toolbars and other workspace looks

We recommend that you use "Designer Compact" for your workspace
This what the "Designer Compact" workspace Toolbar looks like on a Pc and Mac


E. Panel groups = panels will give other options for editing and formatting, including Cascading Style Sheet (CSS) coding.

F. Tag selector = the tag selector will show you the specific object or content element you have highlighted (or selected) on the document; a tag refers to an HTML tag or code that marks off a portion of the page; each tag will have its own the "properties inspector" which is associated with it and will change as you change your selection

G. Property inspector = these are the properties that can be changed with respect to the item

H. Files panel = the files panel can be turned off or on by choosing it on Windows>Files; it shows you the files in your local computer for the web site and the files at your remote/server site.

Other Resources

  • For online (web) help on specific topics go to Adobe's own help site: Here!

Design Options

Steps to make a website in Dreamweaver