week 06 – frames, forms, final exam, Final project due, Final exam
Reminder: Your Final project is due by midnight on Thursday, February 12. No late projects accepted. Please let me know if you have any questions about the final project.
You also have a final exam due by midnight on Thursday, February 12. Please see information at the end of the class notes to download the final exam.
Below is the checklist for the Final project. Please be sure to cover all ten specifications in your final project. These are the objectives I will use to grade your projects.
Final Project checklist
| 1. Did you research the project and determine a specific look and feel for your site? Did you successfully create a strong, visually effective site? |
|
| 2. Did you follow the site map provided for this site? | |
| 3. Did you follow the specified dimensions based on a 1024 x 728 monitor resolution? Finished size should be 990 x 560 pixels. | |
| 4. Did you create your site using a combination of divs and tables? | |
| 5. Did you design effective main navigation and sub-navigation for your portfolio section? | |
| 6. Did you title your pages, insert rollovers, and highlight navigation? | |
| 7. Did you use HTML text in your site? | |
| 8. Did you create and use only one CSS file for your site? | |
| 9. Did you set up your file structure correctly? | |
| 10. Did you upload your project to the class server? |
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
The class notes for this week are for your information only. You are not required to use any of the content below in your final project. I do however feel it is important for you to have knowledge of both frames and forms. so I encourage you to read through the notes and read the pages I assigned from your textbook.
Frames
Displaying several html pages inside one browser window
Introduction
Frames offer a way to format a page so that there are several “window panes”, each with it’s own html content. Frames are similar to tables, except that the html content in each frame comes from a completely separate html file. You create a page with frames by making a FRAMESET html file that describes the layout of the page–i.e. the number of frames, their size, the name of the html file associated with each frame, etc. This frameset file points to the separate html files for the content of each frame. The frameset, which defines the page layout, stays constant. But the contents of each frame is changeable, within the format of the frameset, so that a frame can contain different html pages over time.
The primary advantage of a frames based web page is that one part of the web page can stay fixed, while other parts of the page change. For example, in a two frame page, a menu page can be fixed on the left hand side of the page in a frame. When the user clicks on a menu link, the menu remains, but the content, which is in a frame on the right, changes based on the menu selection.
Example
|
frameset.htm – defines the page
|
- In this example, frameset.htm tells the browser to display
two frames: left_menu.htm and right_page1.htm. There is no content
in the frameset.htm file. It only defines how the frames will be laid
out in the browser window. - left_menu.htm is a separate html file that contains the content
for the left frame in the browser window. In the example, links
in left_menu.htm target the frame on the right, causing a new HTML
page to be loaded into the right frame when the link is clicked. - right_page1.htm is a separate html file that contains the
content for the right frame in the browser window.
These three separate HTML files, the Frameset
and the two content html files, are all needed to show the one “page”.
The Frameset is never visible, but is the URL used to display this
page. For instance, the URLS of various files for this page are:
The individual files:
The frameset that puts them all together:
Note that when you select different pages to be displayed on the right hand side, the displayed URL stays the frameset URL. This is one downside of frames, in that the user does not see the URL of the current page.
Targets
A major benefit of frames is the ability for a link in one frame to load a new HTML file in a different frame. For example, a link in the left menu frame can change the contents of the right frame. Targeting is
the special method for making a link affect a different frame. By default, a link changes the content of the page or frame that contains the link. But you can target another frame for any link. In this case, the targeted frame gets the new HTML file specified in the link. To make this possible, each frame in a frameset must be named. Links with targets use these names to specify the frame where the new page should be loaded.
The frame names you use should be all lowercase, with no spaces. Note that there are several special target names that start the the underscore “_”. You should not use the to name frames, but instead, use them in your target to do the following:
- _blank – opens a new browser window for the specified URL.
- _parent – this is appropriate to use if you have a frameset nested in another frameset. The specified URL will replace the parent frameset of the current frame.
- _self – This is the default if no target is listed. The specified URL will be placed in the current frame or, if there is no frameset, the specified URL will fill the current window.
- _top – clears the current browser window of all framesets, and fills the entire window with the new URL.
Managing the frame files
As you’ve seen, there are many files to keep track of when you use frames. This can be confusing, and means that you need to be very organized when saving, naming, and placing your files on the disk. A few suggestions:
- As soon as you have the frames formatted in Dreamweaver, save all the files: the frameset and each HTML file in a frame
- Save all the files in the same directory
- Name the files in a way that indicates where they go. For example, HTML files that go in the top frame should start with the word top. For example, top_titlepage.html.
- Keep in mind that if several different HTML files are displayed in one of the frames on a page, each file has a different name, and only one of them is displayed when the frameset page first opens. This default page is the one referenced by the frameset.
- When you use FILE>OPEN IN FRAME… the frameset is updated to to use newly opened file as the default file for that frame. For example, if right_page1.htm was in the right frame, and you use FILE>OPEN IN FRAME to open right_page2.htm, the frameset will now open with right_page2.htm
first. So if you are editing several pages within a frame, always use FILE>OPEN IN FRAME for the default page last. As a better alternative, edit the other pages in a normal window outside the frameset. - Once you’ve set the file names, don’t use FILE>SAVE AS to resave your files. Many people make the mistake of writing over the different pages that are displayed in a frame by using SAVE AS.
Make a framed page
In Dreamweaver, do the following:
- Open the Frames window by selecting WINDOW>FRAMES
- Create a new document
- Create a new frameset by selecting MODIFY>FRAMESET>SPLIT FRAME LEFT
- Add additional frames as needed
- Save the frameset by selecting FILE>SAVE FRAMESET
- Save the HTML file for each frame by clicking in each frame and selecting FILE>SAVE
- To set the properties of the frameset, select the Frameset by clicking on the outermost border in the Frames palette:
- Set the title of the frameset by editing the Title box in the document window. The frameset title is the only one that displays for the user, and you must have the frameset selected to set this title rather than the title of one of the frames. Setting the page titles of the individual frame pages does nothing.
- Set the visibility of frameset borders in the property inspector
- Set the width of the frameset borders in the property inspector (note that if you want the borders to be completely invisible, you must also set the individual frames to have no borders and have margins of zero).
- In the right hand corner of the Property Inspector, click in each frame, and set the frame to percent or pixels. Usually, the left hand frame is set to a fixed size with pixels, and the right hand frame is set to a variable size with percent. This allows the user to change the size of the browser window, changing only the size of the right hand frame.
- To set the properties of each frame, click in the middle of a frame in the frame palette. For each frame:
- Give the frame a target name by typing it into the Frame Name box in the property inspector.
- Set the frame to be resizable or not by checking or unchecking the No Resize box. If you want one frame to be resizable, you usually need to make all the frames resizable.
- Set the scrolling to be on, off, or auto for the frame with the Scroll pull-down.
- To completely eliminate borders in the frames, set the Borders to No, and set the margin height and width to zero.
- Create a link in one frame that changes another frame:
- Make the link
- Set the target of the link in the Property Inspector to the name of the frame you want to change
- To force a link to replace the entire browser window rather than an individual frame, set the target to “_top”
Dreamweaver
Frame notes
- Adding a frame.
- To add another frame to the current frameset, press the alt key, and drag a new frame border from an existing frame boarder. Drag to the left, right, up or down. Or, use the one of the four MODIFY>FRAMESET>SPLIT commands to create a new frameset inside the current frameset.
- Deleting a frame.
- Delete a frame by dragging the frame border to the next frame border or edge of the screen.
- Frames sub-palette in the Insert palette.
- This palette allows you to quickly create a frame layout, with many of the frame attributes set to commonly desired settings. The blue box indicates the frame that will resize when the browser window is made bigger or smaller. The other frames are set to stay one size, regardless of the browser window size.
- Preventing strange previews.
- If you leave a frameset preview open in a browser window, go back to Dreamweaver, and do another preview, your page may show up inside one of the existing frames from the previous preview. This produces a kind of hall of mirrors effect. Don’t worry, just close the browser window, go back to Dreamweaver and do the preview again.
- Setting Frame Row Height and Column Width
- You adjust the frame rows and columns in the Properties inspector. You must first select the frameset by clicking on the frame border (either in the main document window, or in the Frames palette window). Once you do this, a representation of the frameset will appear in the right hand side of the Properties Inspector. Click on the left side of the the frameset box to adjust the row heights. Click on the top of the frameset box to adjust the column widths. You can also adjust the type of height or width setting to–pixels, percent, or relative.
- Frame Row Height and Column Width-Pixels Setting
- Pixels set an exact row height or column width for the frame. When the frameset is loaded in the browser, pixel measurements are followed exactly. Frames with the pixel settings have the highest priority for getting screen space from the browser.
- Frame Row Height and Column Width-Percent Setting
- Percent settings mean that the frame will be sized as a percentage of the window (or frameset) width or height. Frames with percent settings have a lower priority for space than frames with pixels.
- Frame Row Height and Column Width-Relative Setting
- Relative settings mean that the frame will be sized in relation to the sizes of other frames that have percent or pixel settings. To be honest, this doesn’t really make a lot of sense, but the net effect is that a frame with a relative setting has the lowest priority for screen space in relation to frames with percent or pixel settings.
- Keeping a frame a fixed size when the browser window is resized
- When the browser displays a page with frames, it assigns priorities to the frames based on the setting of pixels, percent or relative. If all the frames have the same setting, resizing the browser window will cause all of the frames to change size. So if you want to keep some frames fixed size, set those frames to “pixels”, while leaving at least one frame set to “relative” so that it can resize when the browser window changes. In this situation, the browser will make the frames that have relative settings smaller or larger, while the frame with pixel settings will stay the same size.
- Frame scroll setting
- If you never want scroll bars to show for a frame, even if it is made very small by the user, select “no” for the Scroll setting
- Frame noresize setting
- By default, the user can adjust the size of frames after the page is displayed. If you want to prevent this, set the noresize box to be checked.
Read pages 84-92 in our textbook Adobe Dreamweaver CS3 How-Tos: 100 Essential Techniques (How-Tos) (Paperback) by David Karlins (Author) May 2007, Adobe Press ISBN: 0321508939.
Getting information from the user
Introduction
Forms are a way to transmit information from the web page to the server. For example, if you want to collect the name and email address from people at your web site, you would use a form to do this.
The form uses different input types (e.g. check boxes and pull down menus), to collect the information. When the user “submits” the form, that information is transferred to the server, where it is processed by a “CGI” program. This program may put the form data into a database, mail it to the site webmaster, or otherwise deal with the information.
Form elements are inserted into the web page via the Forms sub-palette of the Insert palette. You must first insert the Form itself using the icon in the left hand corner of the Forms palette. You will see a dashed red line that indicates the boundary of the form. Each form element (text entry field, buttons, etc.) must be inserted within the red form outline.
Each form element has a name and a value.
- name: The name assigned to the form element, for example “phone”
- value: The contents of the form element, for example “310.555.1212″.
Some form elements also have a displayed name, for example the items in a list. For example, if you have a list of states, the user sees names like California and Colorado. But the value of those items in the list will be set to CA and CO respectively.
Form elements
Different ways for entering data
* There is a text field with a default value of “Hello there”. Note that text-fields and multi-line fields may display differently in Explorer and Netscape. Netscape fields seem to respond to font size, while Explorer fields do not.
* There is a multi-line text field
* There is a checkbox
* There are two radio buttons: Radio buttons are a special kind of form element. They are used in groups, where only one radio button can be on at a time. All the radio buttons in a group must have the same name. If you have more than one group of radio buttons, you must name the members of each group differently.
* Thereis a pull-down menu list
* There is a scrolling list
* There is a hidden field. You can’t see it, because it’s hidden. Hidden fields are used by the designer to transmit information in the form that is not seen by the user. A hidden field may contain special information about the form being filled out. For example the email address of where the form should be mailed (see the discussion of FormMail.pl below). In other cases, hidden fields are used to carry information from one web page to the next.
* There is a submit button, which sends the information to the web site
* There is a Reset button, which clears the form to its default values
CGI program
Handling the contents of the form
As described above, a form transfers its information to a CGI program running on the server. The form has to specify the name and location of CGI program it will use. To do this, you need to put a special instruction in the form that points to the CGI program.
Making a form in Dreamweaver
1. Select the Forms option of the Object palette
2. Click on the left icon, which will create the form (you’ll see this as a dashed red line)
3. In the property inspector for the form, set the method to POST
4. Set the Action: In the “real world” you would talk to your technical director, web master, programmer, or ISP for the correct CGI program to put in your form. It would typically be on the same server as your web page, and might look like this: /cgi-bin/process_form.pl
5. Inside the red dashed form box, add any form elements you want from the palette
6. For each element you add, give it an appropriate name, so the server knows what the element is for. DO NOT use the default names.
7. Set the default value(s) of the form element where appropriate
8. Be sure you include a button of the SUBMIT type
9. It is also traditional to include a button of the RESET type, which will allow the user to clear the form
10. Upload your file to the server and test
CGI software
Sources and info
To properly use forms on your website, you must use a CGI program on the web server. Your ISP may provide standard CGI programs or you may have a member of your development team who can set up a CGI program. As an alternative, there are many free forms handling CGI programs available for free on the Internet. Here are some links:
Matt’s Script Archive for lots of free scripts. Check out FormMail.pl in particular.
http://www.worldwidemart.com/scripts/
WebMonkey’s resource for CGI scripts.
http://www.webmonkey.com/tutorial/Perl_Tutorial_for_Beginners
Read pages 193-214 in our textbook Adobe Dreamweaver CS3 How-Tos: 100 Essential Techniques (How-Tos) (Paperback) by David Karlins (Author) May 2007, Adobe Press ISBN: 0321508939.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Assignments Week 06
Final Exam: due by midnight on Thursday, February 12. (no extensions to this deadline)
Review the attached PDF and answer the questions in a word or text document. Upload the file to the “Dropbox” on the smconline.org site by midnight on Thursday, February 12.
Your final project will be due by midnight on Thursday, February 12. No late projects accepted. Please let me know if you have any questions about the final project.
copyright © 2006-2009, jamie cavanaugh
Graphic Design 66 | Winter 2009 | Online 