INSTRUCTIONAL SUPPORT SERVICES

SHORT COURSE, FALL 2013UMSL

Intermediate Web Design

An Overview

This course will primarily focus on Dreamweaver:

FormsImporting File from Excel DocumentImporting File from Word DocumentImages (rollover images navigation bar).Extras: Designing sites using Frames

Dreamweaver’s Pre-Designed Layouts

Forms and How They’re Useful

You can create forms for several purposes: Surveys – design questionnaires for data collection

purposes.

A “Contact Us” Page – a page where the end user can request more information or give customer feedback.

E-Commerce – forms with validation and security designed to collect information about the purchaser and confirm the purchase of a product or service.

Tip: It’s first important to know your audience and the purpose of your form.

The 3 Aspects of a Form

Form Content – this is the actual form itself, containing all elements. This is what we’ll create in this course.

Form Validation – ensures that end users type in the correct response and do not miss out on entering important information before submitting.

Server Script – tells where the information from the form will be sent to and the format of the info received. This is separate from html coding and is primarily programming. Programming languages that can be incorporated include ASP, PHP, Cold

Fusion, etc. Adobe Dreamweaver allows you to program codes for this purposes using

the languages stated above.

This course will focus on the Form Content. A few sources are provided for you to understand form validation and server scripts.

Source: “Build a Form in Dreamweaver!” Youtube Video

Creating Forms

1. Create a new page called “forms.html”. We’ll be creating a survey.

2. Type “Contact Us” and highlight text. In the Properties bar below, choose Heading 1 under the Format drop-down. Click Enter.

3. Insert Form Form. 4. A thin red rectangle will appear. This will

contain all of the form elements.

Different Types of Form Elements

Text fieldsCheckboxesRadio buttonsPull Down Menus and ListsFile FieldHidden FieldButtons

Forms – Text Fields

1. Insert Form Text Field2. In the “Input Tag Accessibility Attributes” window,

type the following:1. ID: Significance2. Label: “How significant is web design for you and your career?”3. Select “Position before item”.

3. Click on the text field box.4. Set the following under properties inspector: Char

Width – 100, Num lines – 5, Type – Multi line, Initial Val (optional) = “Please type your response here”.

Forms – Checkbox Group

Allows user to check as many options that apply to them on a form.

Type “What are your interests in web designing? Check all that apply.”

Insert Form Checkbox Group

For “Name” type in “Interests”.

In the checkbox group window, type the following under the Checkboxes column: “Frames”, “Div Tags”, “HTML Basics”, “Java”, and “Pre-Designed Layouts”. Layout using “Line Breaks”.

Forms – Radio Groups

Options in Dreamweaver: Radio Buttons or Radio Groups

The user must choose one option only.

Type in 3rd Question: How often do you work/practice on designing websites?

For “Name” type in “Practice”.

In the radio group window, type the following under the “Radio Buttons” column: “Every Day”, “Once a Week”, “Once a Month”,..etc.

Choose “Table” as the preferable layout.

Pull Down Menus and Lists

Insert Form Select (List/Menu)

Menu vs. List Menu – allows user to select 1 option. List – allows users to select multiple options.

4th Question: “Which dates are you willing to meet with others for the organization’s first meeting?”

1. In the “Input Tag Accessibility Attributes” window, type the following:

1. ID: Meeting2. Label: “Which dates are you willing to meet with

others for the organization’s first meeting?”3. Select “Position before item”.

Click on the element in design view.

Under properties inspector, select the following: type – menu

Click “List Values” and enter in options under “Item Label”. Under value, type in “dates” for all three entered.

Forms – Submit & Reset

Submit button – the final step on the user’s end. Insert Form Button; Click

OK. Select the element in design

view. Button Name – submit, Value =

Submit, Action = submit formReset button – clears all

entries and allows user to re-enter values/check options. Insert Form Button Button Name – reset, Value =

Reset, Action = reset form

Forms: Helpful Links

Links to Helpful ResourcesHTML Forms and Input

(W3Schools.com): http://www.w3schools.com/html/html_forms.asp

Extra Help (W3.org): http://www.w3.org/TR/html401/interact/forms.html

Server Side Script (using ASP) programming language: http://www.tizag.com/aspTutorial/aspForms.php

Videos you may find helpful…

Another way to create forms, but using a table as the form layout: http://www.youtube.com/watch?v=7soyO5DwJMY

Server Side Script (using PHP) programming language: http://www.youtube.com/watch?v=rdsz9Ie6h7I

Forms: UMSL Servelet

Form Servelet Instructions: http://www.umsl.edu/technology/weboffice/FormServlet/

Form Servelet Examples: http://www.umsl.edu/~siegelj/FormsTalk/

Annotated Examples: http://www.umsl.edu/~siegelj/FormsTalk/cheatsheet.html

Tables – Importing a File from Excel

1. Create a new HTML file called “books.html”.

2. File Import Excel Document.3. Browse and choose the excel file and select

Open.

Importing a Word Document

Create a new HTML file and save the file.File Import Word DocumentBrowse and choose the word document and

select Okay.The file will be imported with the same layout

as in Word.

Navigation Bars – Enhance Creativity & Interactivity

Instead of using text hyperlinks to create your navigation bar, use other innovative/interactive ways: Power Point, Adobe Photoshop, or other graphic

design software. Spry Navigation bar on Dreamweaver. Some websites will allow you to create or use their

pre-designed buttons; some may be free of cost.

Design Buttons on PPT

1. Launch Microsoft Power Point

2. Insert Smart Art Basic Block List

3. 5 text boxes in rectangular shape will appear. Delete all except for one of the rectangles.

4. Resize the rectangle so that it is smaller and copy/paste the rectangles on another slide until you have 6 copies.

5. Name each button as “Home”, “Survey”, and “Books”

6. Design two sets of buttons: one for the main navigation, and one set as the “rollover image”.

7. For the first set of buttons: upon double clicking the image, you can change the style, fill, add an outline or other effects.

8. See next slide for “Save As” naming conventions.

HomeHome

SurveySurvey

BooksBooks

Design Buttons on PPT

Save as home_up.jpg Save as home_down.jpg

Save as survey_down.jpg

Save as survey_down.jpg

Save as books_up.jpg Save as books_down.jpg

Rollover Images (Navigation Bar)

1. Open index.html from the previous course.

2. After the horizontal rule, press Enter.

3. Insert a table with 1 row and 3 columns.

4. In the first cell: Insert Image Objects Image Rollover

5. The Original Image will be displayed as soon as index.html is loaded. Upon placing the curser over the image, the Rollover image will display with a “hand-pause” icon, prompting the user to click on the link.

6. Browse and upload both the original and rollover images.

7. Ensure that the “Preload rollover image” option is checked.

8. Enter in the web page (either internal or external) that you want the user to be directed upon clicking the navigation image. Click ok.

9. Adjust the size of the image (suggested: 150 W, 50 H or 3:1 ratio or less)

10. Under properties, Target: _parent

11. For the other two navigation bar buttons, repeat steps 4-10.

Creating Frameset

1. Open Dreamweaver

2. File New Page from Sample

3. Choose Frameset from the Sample Folder column and select “Fixed Top, Nested Left” frameset and click “Create”.

4. In the Frame Tag Accessibility Attributes window, click ok.

5. Once you have created your frameset, you can drag the corner of each frame appropriately to adjust the size/proportion of each frame.

6. See next slide for instructions.

Example of a Frameset

Once you’ve created all three frames, select File Save All and name the entire frameset as index.html