Hi everybody,
I was very happy with how things went in class this past Wednesday. You all seemed to pick each new thing we do rather well. But, whether fortunately or unfortunately, that is the only time we will be doing Framesets in this class. For a further discussion of why, please read
advantages and disadvantages of framesets below.
All the CSS that we learn in this class, however, we WILL be using over and over, so please do not forget it.
From this week until the end of the term, everything I assign as homework, you will be able to use directly in the project you turn into me the last day of class. This week's homework is
PART I of your final project. Therefore, if you do not do your homework, you will actually lose points out of your final project.
This final project consists of a small
web-site of
six (6) pages of content. This does not mean six html files, no, but six pages OF CONTENT. There may be other files that you will produce that do not contain any content (or very little), such as the
frameset files I introduced in this week's class, or the navigation file with the links—the .html file that contains the menu navigation does not officially count as a
page of your site even if the links are technically content. Another example of a document that will not count as content that we produced this week is the
external stylesheet.
Carter-
- TOPICS:
- Final Project;
- LINK Design Requirements;
- LINK Technical Requirements;
- Introduce:
- LINK Creating Frameset Documents;
- LINK Frames within Framesets;
- LINK Primary Content;
- LINK Secondary Content;
- LINK Targeting Frames;
- LINK Targeting Frames;
- LINK Targeting Frames;
- HOMEWORK—Final Project, Part I: Starting this week, the homework for each class is part of the final project. Each part will be do one week from the time that it was assigned. This means that the assignment for this week will be due in the next class. Each week I will assign a new part to the website. If you produce these assignments on time each week, you will have accumulated HALF THE POINTS for the final.
The site that we are going to produce accompanies a book that has already been published that highlights some of the best web-designs of last year. It will have four main parts: the home page, an about page, two gallery pages, and a mailing list page with a form for submitting personal information.
- Due in class next week: you have to come up with a color scheme that works with a white background. Your color scheme can only consist of two colors, not including black or gray. Your entire site can include only these colors as well as lighter or darker variations of them. White, black and gray will be part of your palette although they will not be presented as part of your scheme.
- Due in class next week: you will have to produce in PhotoShop and/or Illustrator what is known as a color template of all the colors you plan to use in your site. This is NOT a design, but simply a color scheme. Make sure you include the following: secondary background color, heading color, sub-heading color, paragraph text color, the a:link color, and the a:hover color. If there are other colors, you can decide upon them later. If you need to look at other websites for ideas, please do so. Other sites are good sources of inspiration.
DO NOT begin coding the website as I have to give you more information in class next week. All you need to do for next week regarding this site is what is stated above.
- QUIZ next week covering CSS. Review the questions from last week's post as well as those from the posts of the following weeks that concern CSS:
from week 6 and week 2.
- FINAL PROJECT
- DESIGN REQUIREMENTS:
- Color Scheme—you must choose a color scheme for your web-site that you can show to me or describe to me. My suggestions are to keep it simple, easy, non-complicated. Keep in mind who your audience is and what the subject matter is. There is a 2-color limit.
- Page Layout—centering all your content in the page does not make for page layout. If you this, you will get a poor grade for your final project. All pages must use CSS and/or tables to lay them out in a pleasing way. If you are not certain how to do this, consult our past classes and me for assistance.
- TECHNICAL REQUIREMENTS:
- XHTML—ALL CODE for this site must be typed using STRICT XHTML standards. This means the following:
- that all tags and their attributes must be typed in lower case;
- that all attribute values must be typed in quotes and with units;
- that the DTD for strict XHTML must be typed at the top of the document;
- that all empty tags must be typed with the slash at the end, such as with the <br/> tag;
- that none of the deprecated inline tags are to be used, such as the <font>, <b>, <u>, or <i> tags;
- and, in addition, that the <tbody> and the <thead> tags, as well as the height attribute for the <table> and <td> tags, are not permitted.
If you are uncertain about something, you can consult the requirements at the w3schools site (LINK), or you may ask me.
- CSS—ALL STYLING must be done using CSS. We have used it extensively in this class, so it is a requirement that this site use CSS for the styling of the page. All three levels of styles may be, and are encouraged to be used. Please consult me if you need additional assistance with this.
- QUESTIONS—Here are some questions to help guide you through this weeks' material:
- What is the one type of XHTML document that does not have a body section? In place of the body section, what is used? What is the purpose of this sort of document?
- What are four attributes that may be used with a <frameset> tag?
- What are four attributes that may be used with the <frame/> tag?
- Of the three kinds of tags—inline, block, empty—which sort is the <frame/> tag?
- What kind of content is contained within a frameset document? Why?
- If you wish to create a webpage with a two-frame frameset, how many documents do you need to create at a minimum? Why?
- Which attribute for the <frameset> tag causes the frames to divide up the browser window horizontally?
- What is the purpose of naming frames?
- INTRODUCE: Framesets—In this week's class we saw the introduction of the issue of one of the more advanced issues and final of HTML that we will cover in this term, frames and framesets. Essentially, a frameset is a series of documents, held together by a frame, that work together to divide the browser window into multiple browser windows, much like a window frame divides the space of the window into several panes. Similarly, each pane, or frame of a frameset may contain and hold a different web-document or web-site.
There is virtually no limit to the number of frames that may be contained within a frameset, as it depends on how many are programmed into the frameset document; however, design and function are first and foremost the constraints that should guide you when attempting to determine how many frames are necessary and practical.
- The Frameset Documents—As mentioned, the guiding document is the frameset document; which, as mentioned, works much as a window frame. I do not mean the panes of glass, but rather the frame that binds the panes together. As it is merely a frame, this document, the frameset document, has no <body> tag. Furthermore, as it has no body section, it therefore has no content. Instead, replacing the body section, frameset documents have a frameset section that sets up the parameters of the frameset, exactly how many frames and what their orientation will be. Therefore, a frameset document starts out pretty much the same as an ordinary HTML document, but diverges with the second section:
<html>
<head>
<title>frameset document</title>
</head>
<frameset>
</frameset>
</html>
Above, you can see that the frameset section, instead of the body section, follows the head section instead in the document. This is where the browser window is carved up into frames. For horizontal frames, the attribute rows is used; and for vertical frames, the attribute cols is used.
<frameset cols="150px, *">
In the above frameset tag, a two-frame frameset is created, where the first frame (the first column) is 150 pixels wide, and the second one, indicated by the asterisk, is whatever remains of the open browser window.
- The <frame/> tag—To complete the frameset, however, there must be a <frame/> tag for each frame. Since there are two measurements (150, *) in the above setup there must also be two frame tags.
<html>
<head>
<title>frameset document</title>
</head>
<frameset cols="150px, *">
<frame/>
<frame/>
</frameset>
</html>
The <frame/> tags are empty tags, but there are nonetheless still two tags, one for each frame in the frameset. Furthermore, each must be accompanied with the src attribute in order to place another document within the frameset:
<frame src="nav.html"/>
<frame src="p1.html"/>
In this example, Notice that the second src attribute is followed by what we will consider our first primary content file p1.html (see below). Also, above that following the first src attribute, another document named nav.html will appear in the first frame of the frameset. This will be a file that we compose solely of links.
To remove the borders between frames, the <frameset> tag require two additional attributes and values: frameborder="no" border="0px".
You should notice above, that in addition to the attributes regulating the border, and indicating the source files for the frames, that there is a name attribute for each frame. There is an important reason for giving names to frames, particularly the frame where the primary content of the website will go. Primary content here refers to those documents that contain most of the content of the site, the images and text, as opposed to the document that contains the navigation, or the frameset document itself. This is so that the frame can be targeted. This can be done with links, for example, so that linked documents can be targeted to open up into a particular frame.
- Primary Content—We will return to the issue of linking and targeting windows in a moment. Let us instead create all the other necessary files to complete the frameset. First, comes the primary content documents. Once again, these are files that contain the "pages" of the site, those files that contain the actual stuff that makes up the site, the information that the site is there to dispense, all the text, the images, and anything else that the site must tell the casual user.
In class, we created three of these and named them p1.html, p2.html, and p3.html. Since we weren't creating a real website, these pages were just dummy pages filled with dummy content, but we included text formatted by the <h1> tag, the <h2> tag, and the <p> tag. Below is an example of what one of those pages that we created in class might have looked like. It is a very minimal page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>p1.html: primary content document 1</title>
</head>
<body>
<h1>A Primary Heading</h1>
<h2>A Sub-heading</h2>
<p>Finally, in this last line, you get a very brief and simple
paragraph. If we are going to follow the rules of proper grammar,
then this paragraph must have at least three sentences. Therefore,
if you count them after reading this, you will discover that this
paragraph is indeed grammatically correct.</p>
</body>
</html>
Once saved, this is how the file should appear in a browser:
- Secondary Content—This sort of content includes all those files that have content that fill a purely functional role. Examples of this would be links and navigation. While still technically content in that they are usually words or images or some other visual element, they do not dispense any particular information. Instead they are purely mechanical devices that connect disparate areas of content within a single file or among various files.
In any well-made site composed of a frameset, there must be at least one frame that serves the purely functional role of navigation. This frame will contain all the primary navigation of the site and allows the visitor to move easily from page to page. The advantage to centralizing most of the navigation into one frame in this way is that this frame need not ever change. It remains visible in a steady location no matter which page of the site the user is viewing. The most common location of this frame is horizontally across the top of the browser window, or vertically along the left side.
In the example we worked with in class on Wednesday, we created a navigation file in which the links appeared vertically along the left-hand side of the screen. Below is the code for that file which we named nav.html. Notice that we have linked to the three primary content documents:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>nav.html: secondary content document 1</title>
</head>
<body>
<br/>
<br/>
<br/>
<a href="p1.html">one</a>
<br/>
<br/>
<a href="p2.html">two</a>
<br/>
<br/>
<a href="p3.html">three</a>
</body>
</html>
This is a very simple file consisting entirely of those links, so the window will be nearly blank. Below is how it will appear in a browser:
When we put all the files together inside the frameset document, the following image of it is what we get:
- Targeting Windows—In past classes, we have created links that opened up completely new browser windows or new tabs when clicked. The way we did this was by adding another attribute to the tag that creates links, the <a> tag. This attribute is target, and it points the new document to be opened up into a browser window other than the current one, either another window that is already open, or a blank window that has not yet been opened. To open up into a new browser window, the value for the attribute is "_blank" . Below is an example of how this attribute might be used:
<a href="something.html" target="_blank">click here</a>
This same attribute is used when you use frameset documents in order to have a link open up a document in a new frame. For example, if you click on a link in one frame, you may want it to open up into a different frame. To do this, you simply target the name of a particular frame. Recall, therefore, when we named our frames in the frameset document:
<html>
<head>
<title>frameset document</title>
</head>
<frameset cols="150px, *">
<frame src="nav.html" name="nav" noresize="noresize"/>
<frame src="p1.html" name="content" noresize="noresize"/>
</frameset>
</html>
Given that we know that the narrow first frame is named nav and the larger second frame is named content, it would be easy to point to a particular frame using the target attribute. Therefore, in the navigation document, the links would look like so:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>nav.html: secondary content document 1</title>
</head>
<body>
<br/>
<br/>
<br/>
<a href="p1.html" target="content";>one</a>
<br/>
<br/>
<a href="p2.html" target="content">two</a>
<br/>
<br/>
<a href="p3.html" target="content">three</a>
</body>
</html>
- Framesets: Advantages & Disadvantages—Frames and framesets are but one tool used to achieve certain results and resolve some difficult problems when designing a website. They certainly have some unmatched advantages, but they also result in some serious disadvantages. There are many pros and cons on the issue of frames and framesets, but it is my opinion that in most cases, they present more problems than they are worth. Other people may have differing opinions; however, I would say that the consensus on this subject is that the use framesets are to be avoided.
- Advantages: The most advantageous feature, and where their superiority is unmatched by other techniques, is their capability to hold one part of the page in place and static while allowing for the possibility of changing another part. For this reason frames are often used for navigation menus which for practical purposes should be kept in the same place throughout the site.
Frames can also help reduce file size and therefore alleviate the burden on bandwidth and server load as identical content need not be loaded each time a user vists a different page within the site.
- Disadvantages:
- Disfunctional Framesets: A frameset breaks when its frames do not load or display properly; when, for example, a navigation frame, for whatever reason, is missing or one of the frames takes up more space than it should. A broken frameset makes a website inaccessible and worthless.
Framesets become non-functional fairly frequently because of several because of several commonly known reasons:
- Visitors link to a page intended as only a part of a frameset by way of a search engine like Google instead of a frameset.
- The user's web browser malfunctions and temporarily has problems parsing frameset information, which occurs frequently with Internet Explorer in particular.
- Some browsers do not support frames.
- A difficult to locate typing error in your code may break the frameset.
- For some of these errors, you may think that including in your code a link intended to reload the frameset will resolve these problems, such as "click here to restore the broken frameset"; however, most users will not notice or ignore such suggestions or warnings, and the large majority of them will have no idea to what it refers.
Search Engines: Search engines are unable to contend with frames and framesets well. Most are not able to locate them at all, but even the most advanced of them will have difficulties. In fact, the algorithms of many search engines were not written to locate and index frames and framestes simply because they are so problematic.
To understand the reason for this, you must remember that search engines find individual pages with the content relative to the terms of a search; but how would a search engine locate a page without any content whatsoever? The answer is that hey can't, so they don't try. To understand why this is a problem, you have to keep in mind that frameset documents do not contain content! The only possibility is to show the individual pages of content as isolated and independent of their organizing frameset. Therefore, most search listings to framed pages result in broken framesets.
These issues for framesets with regard to search engines will not change for a couple reasons:
- The root of the problem is with frames themselves, not the search engines, so there is little hope that search engines will "get better" at dealing with them.
- Frames are out of fashion, especially amongst the types of site the search engines are trying to target, so the problems associated with frames are not a priority for search engines.
Search engines can index the content of a frameset if it is presented within noframes parameters, but this is why some search engines may show a description of a site as something like: "Sorry, your browser doesn't support frames so you are unable to view this website." How many patrons will visit your site if that shows up in a browser search?!?! You might bypass this to some degree by providing more detailed and pertinent noframes content, but it is extra work and does not have the same results as non-frameset websites.
Bookmarks & Favorites: When users bookmark a framed page they may discover that when they return that the bookmark takes them to a different page.
Miscellaneous:
- Back buttons on web browers often do not work properly with framesets.
Frames may reduce the amount of space on the page for content.
The URL in the address bar remains the same throughout a visit to any particular site regardless of which page the user views. For most, this is undesirable as it may make web browsing disorienting.
Printing intact framesets is impossible.
Many designers and technicians are vehemently against frames. Many reviewers and commentators consider them amateurish and they will tell you.
/ol>
Alternative—IFrames: There is one alternative to ordinary frames and framesets, and so is worth mentioning here—IFrames. I won't go into the details here this week, but IFrames are fairly well supported, can achieve most of the same effects as frames, and have fewer problems. Worth a try if you really need frames-type functionality. I will cover IFrames briefly in another class.
As a way of conclusion I will state that the disadvantages of using framesets outweigh the advantages. In my opinion, you should be very wary about using frames, and only consider them if there really is no other option.
No comments:
Post a Comment