Sams Teach Yourself Microsoft Expression Web 3 in 24 Hours- P11 pot

Using the CSS skills you learned throughout this book, you can now make stylingchanges to the individual pages: Create a li style in the page in the left frame, andchange the List-Style-

ptg

HOUR 17

Frames and Layers

What You’ll Learn in this Hour:

How to create a frameset to separate the contents of a page

How to edit the frameset and its individual frames

How an inline frame differs from a frameset and how to use it

How to change the content of a frame using the Set Text of Frame

behavior

What layers are and how they differ from frames

How to create and edit layers to create an interactive experience

How to use layers and inline frames together to make a preview of a

hyperlink

Introduction

So far you learned how to create page layouts using Cascading Style Sheets (CSS) But

there are times when CSS just doesn’t cut it, and times when you want some added

functionality you just can’t get with a style sheet In this hour, you learn about

frames and layers and see how making smart use of these layout tools can improve

the functionality of your websites

Frames and layers are layout tools that have been around for quite some time, and

at one time each was the hot new thing in web design In this hour you take a closer

look at both these techniques and learn when to use (and when not to use) them.

Frames (plural) are a group of web pages displayed together in a web browser A

sep-arate Hypertext Markup Language (HTML) file, commonly referred to as a frameset,

controls the frames The frameset creates a group of frames, gives a name to eachframe, and tells the browser how to position the different frames in relation to one

another There is also a subset of frames called an iFrame The i is short for inline,

which as its name suggests, is a box in which a different HTML page displays insidethe current page—more on that later

For the most part, designers use frames to separate the navigational tools from thecontent That way you can let the user scroll through lists of navigational links orlarge documents independently of other page elements The Microsoft Developer Net-work (MSDN) Library uses frames in this manner to separate the header and sidebarnavigation from the document content (see Figure 17.1) That way the visitor has

immediate access to the navigational tools in the header and can scroll through thelibrary archive to the left without losing her place in the document she is currentlyreading Likewise she can scroll through the document without either the header orthe sidebar moving away from its current location

The MSDN Library page consists of three separate frames that each display differentweb pages This layout hints at one of the major problems when using frames:

a preview.

Because the actual page content is separate from the overall layout, the content

pages don’t contain any navigational tools As long as they display as intended

within the frameset, this is not a problem But if a user accesses them from outside

the frameset, the visitor loses the ability to navigate to the rest of the site This is

especially problematic because search engines usually index individual pages and

not framesets, so a visitor that finds a certain page in a search engine is likely to

land on just the content page without any of the navigation attached

Try It Yourself

Creating a Web Page with Frames

As it does with CSS layouts, Expression Web 3 comes with a series of preconfigured

framesets for you to use This makes the initial process of building a frames-based

web page much easier

1 In the Folder List panel, create a new folder called Frames and double-click it

to select it Select File, New, Page from the menu bar to open the New dialog

2 In the New dialog, select Frames Pages from the menu This opens the preset

frames layouts in the next window and gives you a short description and a

pre-view of each frameset (see Figure 17.2)

3 Select Banner and Contents and click OK to build the frameset This opens the

frameset in Design view, and Expression Web 3 asks you to set an initial page

or create a new page for each frame (see Figure 17.3)

4 Before you continue, press Ctrl+S to save the frameset Name the file

frameset.html and save it in the Frames folder Click the New Page button in

the top banner This changes the banner to a white page with a cursor in it

5 Place your cursor in the top frame and press Ctrl+S again to save the newframe pages This opens the Save As dialog for the top frame (the banner).

Name this page banner.html and click Save Expression Web 3 creates the file,

and the Save As dialog opens again—this time for the left bar Name this page

navigation.html and click Save The Save As dialog opens for a third time, this time for the main content area Name the final page camera.html and

click Save You saved all the pages, and you can now start editing each oneindividually

The Frames folder now has four files in it: frameset.html, banner.html, navigation.html, and camera.html The three last pages you created are normal

HTML pages that you can open separately frameset.html is an HTML file that tains only information about the spatial relationship between the different frames

Out!

Beyond that, it is empty If you press F12 to preview the page in your browser, you see

the three frames, but the address bar tells you that you are actually looking at the

frameset.html file—the other pages are embedded

Because you are now working with a frame layout, you need to consider the

over-all layout of the frameset, not just the individual pages For instance, applying the

layout.css style sheet to each frame means they all will have the top background

graphic applied to them individually, which will look strange

This frameset will be a simple archive with a list on the left and pages for each of the

items on the right Start by placing the cursor in the banner frame and typing Kipple

Archive Set the font style to H2, and create a body style with font-family set to

Editing Individual Frames

Now that you have created the frames pages, it’s time to insert some content into the

frames Because each frame contains a separate HTML page, you can edit it in the

same way you have done throughout this book—by inserting text and images and

applying styles or style sheets

▼

FIGURE 17.5

The contents of

each page within

the frameset are

text Canon EOS 1 In the final frame, insert the eos1.jpg image from the Images

folder

Using the CSS skills you learned throughout this book, you can now make stylingchanges to the individual pages: Create a li style in the page in the left frame, andchange the List-Style-Type setting to None Create a ul style in the same frame andset the borders and margins to 0px Create a new class called alignCenter in theright frame Change the Margin-Left and Margin-Right settings to Auto and changethe Display setting under Layout to Block Apply the new class to the <img> tag usingthe Quick Tag Selector Now you have three different style sets for the three differentpages, all working together to create an overall layout (see Figure 17.5)

Try It Yourself

Edit the Frames Layout

The actual layout and functionality of the frameset as a whole are contained withinthe frameset.html file, not the individual frames So, to change the layout and/orrelationship between the different frames, you have to edit frameset.html

There are many ways in which to change the layout of the frames The simplest one

is to grab the frame borders with the mouse and drag them to a different size But formore detailed control, it is better to use the Frame Properties dialog

Prop-These propertieshave no directeffect on thepage within theframe, only howthe browser dis-plays it.

1 To open the Frame Properties dialog, right-click inside the frame you want to

change (in this case the left frame), and select Frame Properties from the

con-text menu This opens the Frame Properties dialog (see Figure 17.6)

2 In the Frame Properties dialog, you can set various different attributes The

Nameattribute is the identifying name of the frame This is the name you use

when targeting the frame with links Change the name to sidebar.

3 Initial Page is the first page displayed when a browser opens the frameset.html

page Because this is the navigation frame, leave it the way it is

4 Long Description and Title are fields used by screen readers to describe the

con-tents of the frame for visitors that cannot see the content Long Description

links to a file with a long description Title is a short description of the frame

These two attributes work in the same way as the alternative text and long

description attached to image files Leave the Long Description field blank and

insert Kipple Archive list-menu in the Title field

5 Frame Size defines the physical size of the frame in relation to the other frames

on the page The Width and Row Height attributes can be set to a numeric

value that is relative (in relation to the other frames), percent (of the entire

width or height of the page in the browser), or pixels To give the menu some

more room, set the Width attribute to 200 pixels

6 Margins refer to the space between the walls of the frame and the content

within it in much the same way that the padding in CSS relates to the box

Changing the margin values in the frame properties creates a smaller or larger

buffer zone for the content Setting the margins to zero can look strange butmight be exactly what you want if you style the individual frame content withCSS For this example, leave the values as they are

7 Under Options, if the Resizable in Browser box is checked, the visitor can grabthe frame borders and change the size of the frame in the browser (This affectsonly the page in the browser, not the actual page on the server.) In this case,and almost every case, this option should be unchecked Show Scrollbars givesyou the option to decide whether scrollbars should be visible if the content doesn’t fit on the screen It can be set to Always, If Needed, or Never In mostcases, the If Needed option is the right way to go The user has no way to seeany content that spills outside the frame if this option is set to Never and thevisitor has a small screen or the content is too large to fit Set Show Scrollbars

to If Needed for this frame

8 The last function in the Frame Properties dialog is the Frames Page button Thisbutton opens the page properties for the frameset page (see Figure 17.7) Whenthe visitor opens the frameset page, the browser considers this file to be the pageand regards the pages within the frames as displayed information In otherwords, all the information sent to the browser, such as title, page description,keywords, and so forth, comes from the frameset page By clicking the FramesPage button, you have access to all these properties This is also where you con-trol the frame borders Their width is defined in pixels by the Frame Spacingvalue, and they can be turned on and off with the Show Borders setting Set theFrame Spacing value to 1px, and click OK twice to apply the changes

FIGURE 17.7

By clicking the

Frames Page

button, you can

access the page

properties for

the frameset

page From here

you can control

Making Framed Navigation 291

FIGURE 17.8

Creating a newfile can be aseasy as clickingSave As andchanging thename in theSave As dialog

After you createthe new file, youcan makechanges to itwithout having toworry about theold file

You can also split and delete frames just as you would with table cells To split a

frame into two frames, either horizontally or vertically, select the frame by clicking

anywhere inside it and choose Format, Frames, Split Frame from the menu bar This

opens the Split Frame dialog where you can choose whether to split the frame in two

horizontally or vertically To delete a frame, select it in the same way and choose

For-mat, Frames, Delete Frame from the menu bar

▲

Making Framed Navigation

As you previously learned, the main reason you would use frames is to separate the

navigation from the content After the frameset is set up, this is a simple operation as

long as you keep tabs on what you are doing This is where the frame name comes

in When you create a hyperlink in one frame that you mean to open in a different

frame, you target that frame using the frame’s name In the past you had to

remem-ber the names of the different frames, but Expression Web has taken away that

bar-rier and made the process much easier:

1 Before you can create a hyperlink to a new page, you need a new page to

which you can link In the Folder panel, open the Frames folder and open the

camera.html file Click File on the menu bar, select Save As, and change the

filename to eos1detail.html This creates a new HTML file, shown in the Folder

List, called eos1detail.html (see Figure 17.8) Open the new file, right-click the

image, select Picture Properties, and change the picture file to the

eos1detail.jpg file found in the Images folder Save the file and close it.

FIGURE 17.9

The Target Frame

dialog lets you

pick what frame

2 In the frameset.html file, add a second list item to the left frame and type EOS

1 Detail Highlight the first line item, right-click, and select Hyperlink from the

context menu to open the Insert Hyperlink dialog Navigate to the camera.htmlpage in the Frames folder, and then click the Target Frame button to open theTarget Frame dialog (see Figure 17.9) There you can pick what frame thehyperlink should open the new page in, either by clicking the frame in the Cur-rent Frames Page area or selecting one of the Common Targets Click the left

frame in the Current Frames area, and the Target setting changes to Main (thename of the right frame) Click OK twice to create the hyperlink

3 Repeat the same process with the second line item and link it to theeos1detail.html page you created earlier Save and preview the page in yourbrowser

When you click the two hyperlinks in your browser, you see that the right framechanges between the camera.html page and the eos1detail.html page whereas thebanner and sidebar frames remain unchanged

Creating and Modifying Inline Frames

Unlike the frameset, which is a series of frames that contain the content, the inline

frame (often referred to as the iFrame) is a frame inserted into a page to display the

contents of a different page An easy way to understand how an inline frame works is

to imagine the frame as a hole cut into the page and filled with the contents from adifferent page

Inline frames can be inserted anywhere within an HTML page and, as their name

suggests, they work as other inline items That is, they line up alongside the current

line of text Inline frames are a great way to insert content from other websites into a

page without having to either copy the content over or link to it

1 Create a new page and call it inlineFramePage.html In the page, insert a

headline and two paragraphs of text

When web designers and developers work with unfinished pages, they often need

some dummy text to work with The most common dummy text is Lorem Ipsum,

and you can find it at http://www.lipsum.com You define how many paragraphs,

words, or bytes you want, and the website generates it for you

2 Place the cursor at the beginning of the second paragraph, and press Enter to

create a new paragraph Move the cursor to the new empty paragraph in the

middle Insert an inline frame in one of two ways: Select Insert, HTML, Inline

Frame from the menu bar, or drag-and-drop an inline frame from the HTML

submenu in the Toolbox panel

3 When you insert the inline frame, Expression Web 3 gives you the same two

choices you saw with the frameset: Set Initial Page and New Page Select Set

Ini-tial Page and the Insert Hyperlink dialog opens The hyperlink you set in this

dialog becomes the content of the inline frame Set the address to http://www

designisphilosophy.com and click OK Because this is a live website, Expression

Web 3 navigates to the site and inserts the page into Design view if you have

an open Internet connection (see Figure 17.10)

4 To change the size of the inline frame, select it by clicking close to the outer

edge of the inline frame, and then drag the handles to the desired size

Inline frames can be tricky to handle because if you click anywhere inside the

frame after loading the content, you are actually selecting the content within the

frame—not the frame itself To select the inline frame, hover your mouse close to

the outer border, and click so that you see the Tag Selector iframe appear

FIGURE 17.10

When you set

the inline frame

the inline frame

To make more advanced changes to an inline frame, you can change the inlineframe properties by right-clicking the inline frame and selecting Inline Frame Proper-ties from the context menu As you can see from Figure 17.11, the Inline Frame Prop-erties dialog and its functions are similar to the Frames Properties dialog youencountered earlier (refer to Figure 17.6)

to a button oranother interac-tive element.

From here you can change the initial page URL, the size, whether to use scrollbars,

the alternative text (if the browser does not support inline frames), and a host of

other options You can also give the inline frame a unique name just like the earlier

frames so that hyperlinks and actions can target it

Set Text of Frame Behavior

You learned about behaviors in Hour 16, “Using Behaviors,” but a couple behaviors

were not covered: specifically, the Set Text behaviors which make little sense without

first understanding frames and layers Now that you know how to use frames, you

can take a closer look at the Set Text of Frame behavior

The Set Text of Frame behavior sends a block of predefined HTML code to the defined

frame and replaces the current content of the frame with this code You can use it to

target any frame, whether in a frameset or an inline frame Because the Set Text of

Frame behavior works only on frames displaying pages from the current site, before

starting this tutorial you need to change the hyperlink of the inline frame to one of

the other pages in the MyKipple site, for example default.html This can be done

from the Inline Frame Properties dialog previously described

1 First you need an element in which you can attach the behavior Place the

cur-sor below the inline frame and create a new button, either using the interactive

button feature or by dragging an Input (button) instance from the Toolbox

panel Set the button text to Change Text but don’t attach a link to it Click OK

to insert the new button (see Figure 17.12)

FIGURE 17.13

The Set Text of

Frame dialog lets

you control what

or a combination of both The Preserve Background Color check box lets youdecide whether you want to keep the background color from the last contentvisible in the frame Insert some text with basic HTML coding such as <strong>

or <em> and click OK to apply the behavior to the button A new onclick eventappears in the Behaviors panel with the Set Text of Frame action attached

4 Save the page and any embedded files if, you used the interactive buttons ture, and test it in your browser

fea-When you click the button you just inserted, the content of the inline frame changes

to the text you inserted in the Set Text of Frame dialog (see Figure 17.14)

As an example, you could use the Set Text of Frame behavior with the jump menu todisplay different messages to the user depending on his selections in the menu

2 If it’s not already visible, open the Behaviors panel by clicking Panels, iors from the menu bar With the new button selected, click Insert in the Behav-iors panel, and select Set Text of Frame from the Set Text submenu Doing soopens the Set Text of Frame dialog (see Figure 17.13)

Behav-Watch

Out! Set Text of Frame Only Works with Local Pages!

The Set Text of Frame behavior works by telling the browser to modify the content

in the frame This is why you can retain the background color of the original contentwhen replacing the text However this also causes a problem: Most browsers donot let you modify the contents of external pages, even if it is just done locally inthe browser! As a result, if your frame links to an external page (that is, a pagethat doesn’t have the same domain name as the current page), browsers includingInternet Explorer and Opera return an Access Denied error, and the behavior willnot work As a result the Set Text of Frame behavior should be used only on framesthat contain pages from your own domain