Intermediate Web Design INSTRUCTIONAL SUPPORT SERVICES SHORT COURSE, FALL 2013 UMSL An Overview This course will primarily focus on Dreamweaver: Forms Importing File from.
Download
Report
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