Transcript Intermediate Web Design INSTRUCTIONAL SUPPORT SERVICES SHORT COURSE, FALL 2013 UMSL An Overview This course will primarily focus on Dreamweaver:  Forms  Importing File from.

Intermediate Web Design
INSTRUCTIONAL SUPPORT SERVICES
SHORT COURSE, FALL 2013
UMSL
An Overview
This course will primarily focus on Dreamweaver:
 Forms
 Importing File from Excel Document
 Importing File from Word Document
 Images (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
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.
1.
Different Types of Form Elements
 Text fields
 Checkboxes
 Radio buttons
 Pull Down Menus and Lists
 File Field
 Hidden Field
 Buttons
Forms – Text Fields
Insert  Form  Text Field
2. In the “Input Tag Accessibility Attributes” window, type
the following:
1.
1.
2.
3.
ID: Significance
Label: “How significant is web design for you and your career?”
Select “Position before item”.
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”.
3.
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.
2.
3.
ID: Meeting
Label: “Which dates are you willing to meet with
others for the organization’s first meeting?”
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 form
 Reset button – clears all
entries and allows user to reenter values/check options.


Insert  Form  Button
Button Name – reset, Value =
Reset, Action = reset form
Forms: Helpful Links
Links to Helpful Resources
Videos you may find
helpful…
 HTML Forms and Input
(W3Schools.com):
 Another way to create
http://www.w3schools.com/
forms, but using a table as
html/html_forms.asp
the form layout:
 Extra Help (W3.org):
http://www.w3.org/TR/html
401/interact/forms.html
 Server Side Script (using
ASP) programming
language:
http://www.tizag.com/aspTu
torial/aspForms.php
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/FormS
ervlet/
 Form Servelet Examples:
http://www.umsl.edu/~siegelj/FormsTalk/
 Annotated Examples:
http://www.umsl.edu/~siegelj/FormsTalk/cheatshe
et.html
Tables – Importing a File from Excel
Create a new HTML file called “books.html”.
2. File  Import  Excel Document.
3. Browse and choose the excel file and select Open.
1.
Importing a Word Document
 Create a new HTML file and save the file.
 File  Import  Word Document
 Browse 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 predesigned 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.
Design Buttons on PPT
Home
Save as home_up.jpg
Home
Save as home_down.jpg
Survey
Survey
Save as survey_down.jpg
Save as survey_down.jpg
Books
Books
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