Intermediate Web Design

1. Intermediate Web Design Instructional Support Services Short course, fall 2013 umsl

2. 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

3. 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.

4. 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

5. Creating Forms Create a new page called “forms.html”. We’ll be creating a survey. Type “Contact Us” and highlight text. In the Properties bar below, choose Heading 1 under the Format drop-down. Click Enter. Insert  Form  Form. A thin red rectangle will appear. This will contain all of the form elements.

6. Different Types of Form Elements Text fields Checkboxes Radio buttons Pull Down Menus and Lists File Field Hidden Field Buttons

7. Forms – Text Fields • Insert  Form  Text Field • In the “Input Tag Accessibility Attributes” window, type the following: • ID: Significance • Label: “How significant is web design for you and your career?” • Select “Position before item”. • Click on the text field box. • Set the following under properties inspector: Char Width – 100, Num lines – 5, Type – Multi line, Initial Val (optional) = “Please type your response here”.

8. 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”.

9. 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.

10. 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?” • In the “Input Tag Accessibility Attributes” window, type the following: • 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.

11. 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 re-enter values/check options. • Insert  Form  Button • Button Name – reset, Value = Reset, Action = reset form

12. Forms: Helpful Links Links to Helpful Resources HTML 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

13. Forms: UMSL Servelet Form Servelet Instructions: http://www.umsl.edu/technology/weboffice/FormServlet/ Form ServeletExamples: http://www.umsl.edu/~siegelj/FormsTalk/ Annotated Examples: http://www.umsl.edu/~siegelj/FormsTalk/cheatsheet.html

14. Tables – Importing a File from Excel Create a new HTML file called “books.html”. File  Import  Excel Document. Browse and choose the excel file and select Open.

15. 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.

16. 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.

17. Design Buttons on PPT Launch Microsoft Power Point Insert  Smart Art  Basic Block List 5 text boxes in rectangular shape will appear. Delete all except for one of the rectangles. Resize the rectangle so that it is smaller and copy/paste the rectangles on another slide until you have 6 copies. Name each button as “Home”, “Survey”, and “Books” Design two sets of buttons: one for the main navigation, and one set as the “rollover image”. For the first set of buttons: upon double clicking the image, you can change the style, fill, add an outline or other effects. See next slide for “Save As” naming conventions.

18. Design Buttons on PPT • Home • Home • Survey • Survey • Books • Books 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

19. Rollover Images (Navigation Bar) Open index.html from the previous course. After the horizontal rule, press Enter. Insert a table with 1 row and 3 columns. In the first cell: Insert  Image Objects  Image Rollover 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. Browse and upload both the original and rollover images. Ensure that the “Preload rollover image” option is checked. Enter in the web page (either internal or external) that you want the user to be directed upon clicking the navigation image. Click ok. Adjust the size of the image (suggested: 150 W, 50 H or 3:1 ratio or less) Under properties, Target: _parent For the other two navigation bar buttons, repeat steps 4-10.

20. Creating Frameset Open Dreamweaver File  New  Page from Sample Choose Frameset from the Sample Folder column and select “Fixed Top, Nested Left” frameset and click “Create”. In the Frame Tag Accessibility Attributes window, click ok. Once you have created your frameset, you can drag the corner of each frame appropriately to adjust the size/proportion of each frame. See next slide for instructions.

21. Example of a Frameset Once you’ve created all three frames, select File  Save All and name the entire frameset as index.html