A Most browsers that support frames handle such references correctly by treating the nested frameset document as a nested.. When you create links to pages that are supposed to load into
Trang 1} }
</script>
In this case, when the page loads, I retrieve the link by its ID and then bind a new
anony-mous function to it that calls the original popup()function Instead of hard coding the
URL, I pass this.hrefto the popup()function so that it opens the URL in the link
Using a library like jQuery can make things even easier Suppose you want any link tag
with the class popupto open a new window with the URL associated with the link
Here’s the code:
<script type=“text/javascript”>
$(document).ready(function () {
$(“a.popup”).click(function (event) {
var mywindow = window.open(this.href, ‘newwindow’,
‘height=200,width=400’);
event.preventDefault();
});
});
</script>
When the page is ready, I apply the same onclickhandler to all the links on the page
with the class popup The anonymous event handler opens a new window with the URL
stored in this.href, which returns the URL in the link that the user clicked on It then
calls the preventDefault()method on the link, which is a sort of fancy way to return
false provided by jQuery It’s used instead of just returning false because it doesn’t
dis-rupt other event handlers that may be fired in addition to this one
Summary
If your head is hurting after this lesson, you’re probably not alone Although the basic
concepts behind the use of frames are relatively straightforward, their implementation is
somewhat harder to come to grips with As a result, the best way to learn about frames is
by experimenting with them
In this lesson, you learned how to link a document to a new or existing window In
addi-tion, you learned how to create framesets and link them together by using the tags listed
in Table 17.5
526 LESSON 17: Working with Frames and Linked Windows
Trang 217
The Downside of Frames
In this lesson, I mentioned a few drawbacks of frames here and there I want to talk
about them one more time now that the discussion of frames is coming to a close.
The problem with frames is that they change the concept of a web page.
Unfortunately, many mechanisms that users are familiar with rely on the original
concept So when it comes to navigation, bookmarking pages, or using the browser’s
Back button, frames can cause confusion There are also issues when it comes to
printing, and frames can cause problems on devices with small screens, like mobile
phones.
The point here isn’t to say that frames should never be used, but rather that you
should think about what you’re trying to accomplish and decide whether another
approach wouldn’t work better Frames can combine content from multiple sites into
one, but in many cases, JavaScript can achieve similar effects My advice is to use
frames sparingly.
TABLE 17.5 New Tags Discussed in Lesson 17
<base target=“window”> Sets the global link window for a
document.
frameset.
cols Defines the number of frame
columns and their width in a frame-set.
rows Defines the number of frame rows
and their height in a frameset.
<frame> Defines the contents of a frame
within a frameset.
src Indicates the URL of the document
to be displayed inside the frame.
marginwidth Indicates the size in pixels of the
margin on each side of a frame.
marginheight Indicates the size in pixels of the
margin above and below the con-tents of a frame.
Trang 3TABLE 17.5 Continued
frameborder Indicates whether the frameset
dis-plays borders between frames.
longdesc Specifies a URL that provides a
longer description of the contents of the frameset Used with nonvisual browsers.
name Assigns a name to the frame for
tar-geting purposes.
src Indicates the URL of the document
to be displayed in the frame.
name Indicates the name of the frame for
the purpose of linking and targeting.
width Indicates the width of the frame in
pixels.
height Indicates the height of the frame in
pixels.
marginwidth Indicates the width of the margin in
pixels.
marginheight Indicates the height of the margin in
pixels.
scrolling Enables or disables the display of
scrollbars in the frame Values are yes, no, and auto.
frameborder Enables or disables the display of a
border around the frame Values are
1 and 0.
align Specifies the alignment of the frame
relative to the current line of text.
Values are left, right, middle, top, and bottom (also absbottom, absmiddle, texttop, and baseline
in Internet Explorer).
browsers that don’t support the use
of frames.
528 LESSON 17: Working with Frames and Linked Windows
Trang 4Workshop
As if you haven’t had enough already, here’s a refresher course of questions, quizzes, and
exercises that will help you remember some of the most important points you learned in
this lesson
Q&A
Q Is there any limit to how many levels of <frameset> tags I can nest within a
single screen?
A No, there isn’t a limit Practically speaking, however, the available window space
starts to become too small to be usable when you get below about four levels
Q What would happen if I included a reference to a frameset document within a
<frame> tag?
A Most browsers that support frames handle such references correctly by treating the
nested frameset document as a nested <frameset> In fact, this technique is used
regularly to reduce the complexity of nested frames
One limitation does exist, however: You cannot include a reference to the current
frameset document in one of its own frames This situation, called recursion,
causes an infinite loop
Quiz
1 What are the differences between a frameset document, a frameset, a frame, and a
page?
2 When you create links to pages that are supposed to load into a frameset, what
attribute makes the pages appear in the right frame? (Hint: It applies to the <a>
ele-ment.)
3 When a web page includes the <frameset>element, what element cannot be used
at the beginning of the HTML document?
4 What two attributes of the <frameset>tag divide the browser window into
multi-ple sections?
5 What attribute of the <frame>tag defines the HTML document that first loads into
a frameset?
17
Trang 5Quiz Answers
1 A frameset document is the HTML document that contains the definition of the
frameset A frameset is the portion of the frameset document that is defined by the
<frameset>tag, which instructs the browser to divide the window into multiple
sections A frame is one of the sections, or windows, within a frameset The page
is the web document that loads within a frame
2 Thetargetattribute of the <a>tag directs linked pages to load into the appropriate
frame
3 When a web page includes the <frameset>element, it cannot include the <body>
element at the beginning of the page They’re mutually exclusive
4 Thecolsandrowsattributes of the <frameset>tag divide the browser window
into multiple frames
5 Thesrcattribute of the <frame>tag defines the HTML document that first loads
into the frameset
Exercises
1 Create a frameset that divides the browser window into three sections, as follows:
n The left section of the frameset will be a column that spans the entire height
of the browser window and will take up one-third of the width of the browser window Name this frame contents
n Divide the right section of the frameset into two rows, each taking half the height of the browser window Name the top section topand the bottom sec-tionbottom
2 For the preceding frameset, create a page that you will use for a table of contents
in the left frame Create two links on this page, one that loads a page in the top
frame and another that loads a page in the bottom frame
530 LESSON 17: Working with Frames and Linked Windows
Trang 6Writing Good Web
Pages: Do’s and Don’ts
You won’t learn about any HTML tags in this lesson, or how to convert
files from one strange file format to another You’re mostly done with the
HTML part of web page design Next come the intangibles These are the
things that separate your pages from those of a designer who just knows
the tags and flings text and graphics around and calls it a site
Armed with the information from the lessons so far, you could put this
book down now and go off and merrily create web pages to your heart’s
content However, if you stick around, you will be able to create even
bet-ter web pages Do you need any more incentive to continue reading?
This lesson includes hints for creating well-written and well-designed web
pages, and it highlights do’s and don’ts concerning the following:
n How to make decisions about compliance with web standards
n How to write your web pages so that they can be easily scanned
and read
n Issues concerning the design and layout of your web pages
n When and why you should create links
n How to use images effectively
n Other miscellaneous tidbits and hints
Trang 7Standards Compliance and Web
Browsers
In some ways, we’re through the dark ages when it comes to cross-browser issues The
generation of browsers that includes Netscape Navigator 4 and Internet Explorer 4
proba-bly marked the low point for web developers in terms of deciding how pages should be
written In the heat of the browser wars, Netscape and Microsoft were adding new
tures to their browsers hand over fist, with no regard for published standards These
fea-tures tended to be at odds with each other, and for web designers to create complex
pages that worked in both popular browsers, they had to use some really awful
tech-niques to make things look okay Worse, the differences made things like Cascading
Style Sheets (CSS) and JavaScript very difficult to use Even if you could get things to
work properly, the work involved was immense
Currently, browser makers are working together to a greater extent than ever before The
current versions of Internet Explorer, Firefox, Safari, Chrome, and Opera all offer strong
standards support, and even the browsers for popular mobile phone platforms like
Android and iPhone have standards-based browsers Given the strong standards support
in current browsers, the biggest question most developers face is how they want to deal
with Internet Explorer 6 Version 6 of Internet Explorer was released in 2001, and it still
has a number of users, although that number continues to fall The main problem with
that browser is that it deals with CSS differently than later versions of Internet Explorer
as well as other browsers, and those differences can make life painful for web designers
Many websites are dropping support for Internet Explorer 6 entirely because it differs so
greatly from standards-based browsers
Despite the fact that the browser picture is relatively clear these days, there are still cases
where browsers differ in terms of capabilities The most obvious example is mobile
browsers They have smaller screens than regular computers, and even the most advanced
mobile browsers have fewer capabilities than desktop browsers There are also millions
of people with mobile devices that can access the Web but that have very limited support
for CSS and JavaScript Even their support for Hypertext Markup Language (HTML)
markup is somewhat limited
Progressive Enhancement
Progressive enhancement is a popular approach to creating web pages It describes an
approach that enables web designers to use the latest and greatest technology available
without leaving people using browsers with limited capabilities behind The idea is that
532 LESSON 18: Writing Good Web Pages: Do’s and Don’ts
Trang 8you start with simple but completely functional web pages and then layer on
enhance-ments that add to the experience for people with newer or more capable browsers
with-out breaking the experience for the people using their mobile device or the old browser
that their employer forces them to use
You’ll want to start with valid, standards-compliant HTML when you’re creating web
pages There are a number of relevant standards, including HTML5, which is not yet
complete I talk about the differences among them shortly Regardless, you’ll want to
choose one of them and make sure all of your pages adhere to it
Your initial pages should consist only of HTML markup with no JavaScript or CSS, and
they should look fine and work properly All of your navigation should be present and
should work properly Your main page content should be visible In other words, you
should start out with a fully functional, very plain website This ensures that your site
will work for even the most rudimentary mobile browsers and also for vision-challenged
users with screen readers Taking this approach also ensures that your markup reflects
the content of your site rather than how you want to present it
When that is complete, you can start layering on the more advanced functionality
First, implement the visual design for your website using CSS You can organize your
content into columns, transform your navigation so that it is presented in collapsible
menus, and add visual interest by using image backgrounds for various elements Given
the robust support for CSS in the current browsers, there should be no need to use
HTML to define the appearance of your website You might find you need to add
con-tainer elements to your page that provide the necessary structure for your styles For
example, if your page layout is split into columns, it will be necessary to add <div>tags
for the contents of each column Fortunately, such tags do not create any visual
differ-ences unless they are styled, so your page’s appearance will not be altered for users who
don’t have CSS support
Finally, add dynamic technology like JavaScript or Flash In Lesson 15, “Using
JavaScript in Your Pages,” I discussed unobtrusive JavaScript That approach
comple-ments progressive enhancement When you add JavaScript to the page, make sure the
page provides some minimum level of functionality without the JavaScript, and then use
JavaScript to enhance that baseline functionality For example, if your page includes
col-lapsed elements that can be expanded with JavaScript, make sure to start out with them
expanded on the page, and then collapse them when the page loads using JavaScript
18
Trang 9HTML as an alternative, by starting with HTML content on the page and using JavaScript
to hide that content and present the Flash movie instead if the user has a browser that
sup-ports Flash For example, many mobile devices do not support Flash If you are building a
website for a restaurant in Flash, it makes sense to present essential information like the
restaurant’s hours, location, and phone number in HTML, and then optionally hide that
information and replace it with your Flash movie if the Flash player is available If it isn’t,
users can still access the important information on the site
This is what progressive enhancement is all about It ensures that everyone with a
browser of any kind can view your site, while the site still provides an enhanced
experi-ence for those who can benefit from it
Choosing a Document Type
In light of these different approaches to writing HTML, let’s look at the current HTML
standards The HTML 4.01 and XHTML 1.0 definitions include three flavors of HTML,
and the main differences between HTML 4.01 and XHTML 1.0 have been noted
throughout this book The most important of them is that XHTML documents must be
valid Extensible Markup Language (XML), whereas that is not required for HTML 4.01.
The three flavors are as follows:
n HTML 4.01 or XHTML 1.0 Transitional is geared toward the web developer
who still uses deprecated tags rather than migrating to CSS For example, if you
want to write valid pages that include <font>tags, and attributes of the <body>tag
like bgcolorortext, this is your best bet
n HTML 4.01 or XHTML 1.0 Frameset is a strict specification that includes the
frame-related tags You should use this standard when you’re writing framed pages
n HTML 4.01 or XHTML 1.0 Strict is for people who don’t have deprecated tags
in their documents This specification basically mandates that tags are used strictly
for page structure, and that all your look-and-feel modifications are accomplished
using CSS
Most web developers stick with the XHTML standard that is most applicable to them,
with a strong preference toward XHTML 1.0 Strict At one time, significant differences
existed between browsers in terms of the tags they supported These days, all the
browsers support an almost identical set of tags Instead, the differences lie mainly in
how they deal with CSS Regardless of the strategy you use for creating content, the key
to making sure everything works is to test it as widely as possible If you’re concerned
about how your page looks in Internet Explorer 6, test it in Internet Explorer 6 After a
534 LESSON 18: Writing Good Web Pages: Do’s and Don’ts
Trang 10while, you’ll get the feel for how things are going to look, but at first you’ll need to test
exhaustively Even after you’ve been at it for a while, more testing never hurts You
might have a favorite browser, but as a web designer, you can’t afford to ignore the
oth-ers that aren’t your favorites
HTML5
The HTML5 standard is not finished, but it’s close enough to being finished that browser
makers are already starting to support some HTML5 features The question when you’re
creating web pages is whether you should stick with XHTML 1.0 or move on to
HTML5 In this book, I have used the new HTML5 document type for all the pages that
don’t include elements that aren’t supported in HTML5 It works fine with all the current
browsers and makes sure your pages are ready for HTML5 when it arrives I’ve also
avoided elements and attributes that have been dropped from HTML5
One thing that’s different about HTML5 from XHTML 1.0 is that HTML5 documents
are not required to be valid XML Valid XML is supported if you choose to use it, but
you can also use the older, HTML 4.01 style if you prefer
In the next lesson, I take a deeper look at what HTML5 offers and the differences
between it and XHTML 1.0
Validating Your Pages
It’s all well and good to attempt to write valid pages, but how do you know whether
you’ve succeeded? It’s easy enough to determine whether your pages look okay in your
browser, but verifying that they’re valid is another matter Fortunately, the W3C, which is
responsible for managing the HTML recommendations, also provides a service to
vali-date your pages It’s a web application that enables you to upload an HTML file or to
validate a specific URL to any W3C recommendation The URL is
http://validator.w3.org/
Figure 18.1 is a screenshot of the validator in action I’ve sent it off to validate
http://www.informit.com/
18