How to Make a Website (DW)/Step 6 - Make an Index or Home Page

From WSU Technology Knowledge Base
Jump to: navigation, search

First Things First

Open your previously created HTML page that you named "index.html" in Step #3.

OR

Open a new blank HTML page.

  • Save it with the name "index.html" in the root of the web site.

Choose Your Design Options

You need to decide among the options for your design.

We will be using a table to create a structure to hold your graphics and text blocks.

Think of the Layout of Your Web Site/Pages Like a Magazine Layout

Most of the time we expect the look of our web pages to be like a magazine.

The index page is like the cover page and the menu is like the table of contents. Each content page, the text is laid out neatly in columns, and the pictures are neatly framed and so on. Without some page structure--in the case of web design using things like tables or "div" tags--all the images and text will not keep fixed positions as they do on a printed page and the appearances will not be what you want.

So the first step is to determine your standard layout and design.

For simplification we are going to recommend a page design that has the following features:

  • Use of a table to structure the page (rather than other tags or scripts)
  • A fixed width of 800 pixels
  • Flushed to the center
  • No background color or design
  • A fixed graphical banner on the top with a horizontal menu beneath it
  • Use of this "model" page for all your web pages
  • Use of a plug-and-play slideshow scripts for a Media Portfolio, created by Adobe applications
  • Use of a Spry Widget for Tabbed Text Content for your Text Portfolio

We will feature options to these as this instruction builds the standard web page layout and design.

See Design Options in Other Resources.

The Standard Page Layout and Design

Click to Enlarge!
After you have inserted a table as described below, it should be modified for the content it shall receive.

Steps to Start: Setting the Table

  1. Insert a table to manage content.
  2. Set width to 800 pixels.
  3. Set rows to 8 and the columns to 8.
  4. Set cell padding and cell space to 0.
  5. Choose fixed width of the table of 800 pixels.
  6. Table will Flush Left by default. Change that to Center alignment

Table Modification

First, merge the cells of the first row.

Select the rows with your cursor (dragging it across them or selecting it by moving the cursor to the outside left of the row -- the cursor will change to an arrow).

With rows/cells selected you may use the button on the properties to merge the cells. Or select from the right-click menu.

In the following example, the cells in the first row have been selected to merge into a single cell that spans the whole row.

DW indexpage 01.png
You can merge any number of adjacent cells—as long as the entire selection is a line or a rectangle of cells—to produce a single cell that spans several columns or rows. You can split a cell into any number of rows or columns, regardless of whether it was previously merged. Dreamweaver automatically restructures the table (adding any necessary colspan or rowspan attributes) to create the specified arrangement.

Insert/Create Banner in Top Row

Click to enlarge - Banner in table.

If you previously created a banner, you will insert it in the top row of your table.

If you have not yet created your banner, you may use Photoshop or Fireworks to do so:

or

These banners are a fixed size (800 pixels), exactly the size of the fixed table width.

To insert a graphical banner, locate the file (.png, .gif, .jpg., etc) in the files of your site under the files tab.

  • Click to highlight file
  • Click for an insertion point in your table
  • Drag and drop your graphical banner into place
NOTE: It will flush-left by default.

You can also insert the file using the asset tab. See illustration below.

Using the Asset Tab to Insert a Graphic/Image


Modifying the Graphical Banner

The image will appear in the cell. Properties at the bottom of the window may be changed. DW properties image.png



Design Option: To Create A Banner out of the Table Cell/Row with Text

Instead of a complete graphical image for a banner, you can create a banner in the first row of the table by:

  • Typing text into it
  • Setting a background color to that row or cell
  • Setting a border to the row or cell
  • Placing graphical elements along with the text to enhance it

See instructions at Design Option: Text Banner

Insert Horizontal Menu Below Banner

DW select lbi file Panel.png

If you have not yet created your menu, see Step 5 - Make a Menu.

As above you must also create a ROW by merging your cells below the Banner on the Index.html page you are editing.

To insert the menu, your must use the ASSET PANEL to locate the file (.lbi).

EXPLANATION: Your .lbi menu file may be placed in the root along with HTML pages, or kept in a folder called "Library" (if you like). It can be opened and edited just like an HTML page, but to make it work inside an HTML page it must be inserted from the Asset Panel.

First: Click for an insertion point in the cell where you want to place it.

  1. Click on icon to select Library Items and click to highlight file
  2. Click on Insert button at bottom of Panel
  • Or you may also Drag & Drop your .lbi menu into place
NOTE: It will flush-left by default.

DW horizontal menu.png

Using a Vertical Menu (Optional)

Instead of the standard horizontal you may use a vertical menu, also created as a Library Item. See Step 5 - Make a Menu.

To set the vertical menu:

  1. Merge cells in the first column beneath the banner.
  2. Insert vertical menu (Library item) using the Asset Panel.
  3. Set properties for the object to align it in the cell
  • Horizontal = is set to default (but may be changed to taste)
  • Vertical = should be set to "Top"

DW example vertical menu.png


EXPLANATION - The column has apparently expanded when you inserted the vertical menu Library item, however, it will pop back into the right size (125 px with padding) when other content is added. If you wish you may resize the column by dragging the right-had column border closer to the inserted menu, but this is not necessary.

Set Page Properties (Recommended and Optional Features)

Page Properties — a button located on your properties panel at the bottom of the workspace — can be used to set several defaults for the appearance of your page.

Setting Text Font, Page Title and Other Details

Pageprop.png

The dialog for page properties includes several tabs.

The first tab "Appearance (CSS)" modifies page defaults by CSS and permits changes to these:

  • Page Font — Specifies the default font family to use in your web pages. Dreamweaver uses the font family you specify unless another font is specifically set for a text element.
  • Size — Specifies the default font size to use in your web pages. Dreamweaver uses the font size you specify unless another font size is specifically set for a text element.
  • Text Color — Specifies the default color to render fonts with.
  • Background Color — Sets a background color for your page. Click the Background color box and select a color from the Color Picker.
  • Background Image — Sets a background image. Click the Browse button, then browse to and select the image. Alternatively, enter the path to the background image in the Background Image box.
Dreamweaver tiles (repeats) the background image if it does not fill the entire window, just as browsers do.
(To prevent the background image from tiling, use Cascading Style Sheets to disable image tiling.)
  • Repeat — Specifies how the background image will be displayed on the page:
    • Select the No-repeat option to display the background image only once.
    • Select the Repeat option to repeat, or tile, the image both horizontally and vertically.
    • Select the Repeat‑x option to tile the image horizontally.
    • Select the Repeat‑y option to tile the image vertically.
  • Left Margin and Right Margin — Specify the size of the left and right page margins.
  • Top Margin and Bottom Margin — Specify the size of the top and bottom page margins.

The second tab makes similar changes but uses HTML code instead of CSS. We prefer CSS because it has more options.

The third tab sets Links with CSS — see next section for details.

The fourth tab sets style defaults for Headings.

The fifth tab sets, among other things, the title of the web page as it appears in the title bar and tab on the web browser.


Recommended: Set the "title" of your index.html page (and all your copied pages) to the title of your web site. For example, Portfolio of Jane Student.

Setting the Style of Links (CSS) for Menus

NOTE: Setting these hyperlink appearances will affect all hyperlinks including the menu, changing the default font, color, etc.
DW page prop links.png
The default for hyperlinks is to show them underlined, in blue, and in the default font.

You can modify the appearance of hyperlinks by using settings in the "Page Properties" found in the properties box. A dialog will appear and you can select the tab for "Links (CSS)".

You may change:

  • Link Font - Specifies the default font family to use for link text. By default, Dreamweaver uses the font family specified for the entire page unless you specify another font.
  • Size -Specifies the default font size to use for link text.
  • Link Color - Specifies the color to apply to link text.
  • Visited Links - Specifies the color to apply to visited links.
  • Rollover Links - Specifies the color to apply when a mouse (or pointer) hovers over a link.
  • Active Links - Specifies the color to apply when a mouse (or pointer) clicks on a link
  • Underline Style - Specifies the underline style to apply to links. If your page already has an underline link style defined (through an external CSS style sheet for example), the Underline Style menu defaults to a “don’t change” option. This option alerts you to a link style that has been defined. If you modify the underline link style using the Page Properties dialog box, Dreamweaver will change the previous link definition.
Recommended: For your links, set:
(1) a different font and color — one related to your banner, perhaps — and different from your default text;
(2) a contrasting color for a rollover effect; and
(3) default for the link to never underline.

Creating the Model page and Pages Based on the Model

Once you have completed your index.html page layout (added your banner, added your menu, set your page properties, etc.) and before you finish it up as your home page,you should make a copy of it and save it as a model for the other pages of your site.

Recommended: In this recommended web page design we have opted to save a separate file as the model.html so that we can finish the home page.
You could just as well leave your index.html page unfinished until the last and keep using it for your model until you are ready to finalize your site.

For each page that will be prompted from your menu or any pages that you want to create as sub-pages, create a copy of the model or index.html page.

  • On the menu use File>Save as... to open a dialog and change the file name to correspond to each page you need.
  • In the standard web site we are making for a portfolio, there will be three pages created:
    • "MediaPortfolio.html"
    • "TextPorfolio.html"
    • "Resume.html"

If you wish, you may also save the index.html page at this point in a copy as "model.html" for future use.

NOTE: Do not use quote marks, special characters or spaces in your page names.

Finishing the Index Page

After you have made copies of your index.html as a model for your other pages, you will want to finish the content on your index page.

As a "splash" page, in addition to providing your basic navigation, this is the first look of your web site.

You will want to use some image or text or some combination of these to make an overall impression of what your web site is about.

You may also include here, such as an e-mail link, so visitors can respond to your page.

Other Resources

Official Adobe help on creating and managing tables for design in Dreamweaver is found Here!

Design Options for Page Layout

Recommended: In this recommended web page design we have:
(1) used no color or graphic as a background;
(2) let the content flush to the left (the default setting);
(3) used a fixed width table for managing the space of our content.

Modifying these features will change appearances and sometimes relative position of content on the web page. If you are not comfortable with tweaking those things to get the look you want, we recommend using the the default settings we have provided.

For help on design options:

  • Step 6 - Make an Index or Home Page

Steps to make a website in Dreamweaver