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

Create Text-Free Buttons with Sliding Doors The problem of preloading content has become more prevalent with the emergence of blogs because many blogs have a lot of scripts running at th

to the new

but-tons, but they

cover each other

because the list

item style has

not been

modi-fied yet

3 Import the images named blueButtonUp.gif and blueButtonOver.gif from thelesson files and save them in a new folder called buttonGraphics

4 Make a new style and give it the selector name advancedBox a In the Font

category, set font-family to Arial, Helvetica, sans-serif, font-size to 0.8em,font-weightto bold, and text-transform to uppercase, font-color to white(#FFFFFF) Check the None box under text-decoration to get rid of the lineunder the text

5 In the Background category, set background-image to the blueButtonUp.gifimage you just imported, and set background-repeat to no-repeat Becausethe image is larger than the text and you want it to surround the text, go to theBox category and set padding to 13px on all sides Click OK to apply the style

6 In Design view, you can see that the new button background is applied, but thebuttons are covering each other (see Figure 15.10) This is because the list items

have not yet been styled, and the browser assumes that the list items are theheight of the text without the padding

To fix this problem create a new style with the selector name advancedBox li

and set the padding-top and padding-bottom attributes to 13px to match thelink style you just created Click OK to apply the new style, and the buttons nolonger overlap

7 To create a hover-over effect, create a new style with the selector name

.advancedBox a:hover Because the :hover pseudoclass inherits all the

Creating Buttons from Scratch Using CSS 253

styling from the main a class, all you need to do is change background-image

to blueButtonOver.gif Click OK, and then save and preview in your browser

Now instead of the background color changing when the mouse hovers over the

but-ton, the background image swaps out And because the background image is part of

the a style, the entire image is clickable, not just the text itself

The problem with this technique is that it requires two images to work This might

not seem like a big deal, but if the user is on a slow connection, the page is on a slow

server, or if there is something else that slows the system down, the user might

experi-ence noticeable lag between hovering over the button and the new background

image being loaded One way around this problem is to preload the images using

behaviors, but this requires JavaScript to work properly

Create Text-Free Buttons with Sliding Doors

The problem of preloading content has become more prevalent with the emergence of

blogs because many blogs have a lot of scripts running at the same time, and it is

important to reduce the load on both the network and the computer as much as

pos-sible to make things work smoothly A technique often referred to as sliding doors was

developed to enable the designer to use one image file as two different backgrounds

This is done by creating a file that has two versions of the background, either on top

of or to the side of one another The name sliding doors refers to the action of literally

sliding the background from one side to the other to display only half of the image at

a time (see Figure 15.11)

You can use a similar technique to hide text content As you have seen, the regular

method of creating buttons requires there to be text superimposed on the

back-ground If you don’t want the text to appear, the quick answer is to simply swap out

the text for an image and use it as a button But if you do this, the link is not visible if

FIGURE 15.11

The name slidingdoors refers tothe action ofsliding the back-ground image sothat only half of

it is visibledepending onhow the mouseinteracts withthe button

the image doesn’t load or the visitor uses a text-only browser The way to solve this is

to push the text out of the way so that only the background image appears Anotherreason to use this technique is that designers often want to use custom fonts or fonteffects in their buttons To do this and retain full accessibility, they need to hide theregular HTML text first In this example, you create a button that uses the slidingdoors technique and hides the text at the same time

1 Import the file named slidingButtons.gif into the buttonGraphics folder from thelesson files Under the three buttons you just created, add a new subheading and

call it Sliding Doors Button with Hidden Text Below it, add a paragraph with the text Button and make it into a hyperlink pointing back to the current page.

2 Make a new class called slider Create a span around the new button text

using the Toolbox panel (make sure the <span> tags go on the outside of the

<a>tags), and apply the slider class to it using the Quick Tag Selector (seeFigure 15.12)

3 Make a new style and give it the selector name slider a Because you are

going to hide the text you don’t need change any of the Font attributes In theBackground category, set background-image to slidingButtons.gif and background-repeatto no-repeat

4 To create the sliding effect, you need to change the position of the background

image and define the visible area within the page The image has two buttons

on it: The top one is for the regular state, and the bottom one is for the :hover

state Set the (x) position to 0px and the (y)

background-positionto 0px This locks the image in place

5 To define the visible area of the button, you need to first set the display

attrib-ute under the Layout category to Block to create an independent box in which

to display the content and then change the size of the box under the Position

category The height of the image is 88px and because you will be displaying

half of it at one time, the height attribute should therefore be 44px To contain

the active area of the button to the area of the image, set the width attribute to

92px, which is the width of the image Click OK to apply the style, and the

but-ton appears in Design view, as shown in Figure 15.13

6 As you can see, the button looks the way it should, but the text is still visible To

hide the text, open the Modify Style dialog for the style, go to the Block

cate-gory, and set the text-indent attribute to -9999px (see Figure 15.14) Click OK

to save the change

7 Finally create a new style with the selector name slider a:hover Because

of the cascade, any pseudoclass inherits all the styling from its parent unless

the style is changed Therefore you need to make changes to only the

Designers frequently use the sliding doors technique to create eye-catching rolloverswithout load times getting in the way In this example, the background image onlyhad two versions, but you could have an image with more instances Likewise, youcan place the images next to one another instead of on top of each other and changethe (x) background-position value instead.

You can find more information and tutorials on how to use the sliding doors nique at the A List Apart website: www.alistapart.com

tech-Summary

Buttons are an integral part of a website, both as navigational tools and as designelements Knowing how to make and when to use different styles of buttons makesyour life easier as a designer and your sites easier to navigate for the visitors

Buttons can be anything from simple colored boxes with text inside them toadvanced image-based elements with different graphics for each state The layoutand design of the page, and what the designer wants out of it, drive the choice ofwhat kind of button to use

To simplify the process of creating interactive buttons, Expression Web 3 has a

built-in Interactive Buttons function that lets you choose a design and set properties for a

wide range of prepackaged buttons In this hour, you learned how to create and

cus-tomize these interactive buttons and insert them into your page The major benefit of

the interactive buttons is that even after inserting them in your page, you can always

go back to the Interactive Buttons dialog and change the design and font attributes

of the button without creating a new one This high level of flexibility is great when

you design pages on-the-fly and you’re not sure what the end product will look like

The downside of interactive buttons is that they are limited in the button design

If you want to move beyond the designs of the prepackaged interactive buttons, the

best way to go is to create CSS buttons instead The advantages of CSS buttons are

that they are text-based and standards-compliant, and a visitor who uses a text-only

browser can still see the hyperlinks within the buttons In this hour, you learned how

to create simple box-type buttons with interactive features using CSS You also

learned how to take these buttons to the next level by replacing the solid color

back-grounds with images Finally, you learned how to use the sliding doors technique to

use one image as the base for multiple different button states by sliding it in the

background to show different versions of the same button image

Q&A

Q I inserted an interactive button in my page, but all I see is a small box with a

red X in it What is wrong?

A When you make an interactive button, Expression Web 3 creates a series of

images to correspond to the different button states If you are seeing a red X,

the link to the image or images is broken, probably because you deleted the

images accidentally, didn’t save them when you saved the page before closing

the application, or moved them to a different folder outside of Expression Web

3 To fix the problem, simply right-click the interactive button in Design view

and select Button Properties from the context menu From here, you can make

changes to the button or, if you just want to reestablish the images, simply

click OK, and the button shows up as it is supposed to

Q I created a second copy of the sliding doors button, but it shows up

under-neath the first one no matter what I do Why can’t I make these buttons

show up next to each other?

A Although sliding doors buttons can easily be lined up next to one another,

the one you made in this example cannot do so without putting each of the

258 HOUR 15: Buttons, Buttons, Buttons

buttons in a separate table cell The reason for this has to do with the hiding ofthe button text, not the sliding doors function

2 No, not unless you want to The idea of using CSS to create box buttons is thatyou can apply the same styling and background (either color or image) to mul-tiple buttons with one set of styles That way you can make quick changes tomultiple buttons throughout your site by changing only a few styles ratherthan having to change each individual button separately You can, however,make individualized buttons with individual backgrounds or styles by wrap-ping each button instance in a <span> tag

Exercise

Using the Interactive Buttons feature, create a series of new buttons with differentdesigns and layouts After inserting them, pick one design you like and change allthe buttons to that look by changing their button properties

To give the visitor a visual cue that the button has been pressed before, make stylesfor the :active and :visited pseudoclasses for all the different CSS buttons you cre-ated The :active style usually has a bold appearance (bright colors and dark font),whereas the :visited pseudoclass is usually more muted than the other styles

HOUR 16

Using Behaviors

What You’ll Learn in This Hour:

How to apply behaviors to elements in your site

How to edit existing behaviors

How to change the events that trigger behaviors

What the different behaviors in Expression Web 3 are and how they work

Introduction

Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS) are powerful

tools that can take you a long way to making a great website But for all the virtues

of those tools, many tasks are impossible or far too cumbersome to do using them

alone To help simplify some of these tasks, Expression Web 3 comes complete with a

set of behaviors to insert into your pages Behaviors are small pieces of JavaScript

that, when inserted, perform actions within the page and give the visitor a more

powerful interactive experience

Behaviors: An Introduction

The behaviors in Expression Web 3 can be accessed from the Behaviors panel, which

when selected from the Panels menu on the toolbar, opens in the lower-right corner

of the workspace next to the Apply and Manage Styles panels (see Figure 16.1)

When you insert a behavior into your page, you are actually adding a block of

JavaScript code to it JavaScript is a basic script language that enables you to perform

many tasks that are not available or are otherwise hard to achieve using HTML and

CSS alone

Boiled down to its basic components, a behavior consists of two elements: an event

and an action An event is an interaction, usually performed by the user, which tells

the browser that something happened and asks it to respond by running a script

Events are standardized code segments that, in most cases, describe themselves prettywell Here are some examples:

. onclick—When the object is clicked. ondblclick—When the object is double-clicked. onload—When the object is loaded by the browser. onmousedown—When the mouse button is pressed. onmouseover—When the mouse pointer is over the object

When triggered, an event sends a set of predefined arguments to the browser that itpasses on to the action In short, the event describes what needs to happen for theaction to trigger

An action is a JavaScript function (tiny program) that executes when the

correspon-ding event occurs The action receives the arguments from the event, and the scriptperforms the programmed task with these arguments

Creating a Swap-Image Behavior

The easiest way to understand how a behavior works is to see it in action So, beforeyou immerse yourself in all the different behaviors available, you apply a simplebehavior to an image:

1 Create and open a new HTML page called behaviors.html in Design view

Creating a Swap-Image Behavior 261

FIGURE 16.2

Clicking theInsert button inthe Behaviorspanel opens amenu with allthe availablebehaviors

FIGURE 16.3

The Swap ImageURL is set, andthe PreloadImages andRestore onMouseout Eventoptions arechecked

2 From the buttonGraphics folder, drag and drop the blueButtonUp.gif file into

the page Give it the alternative text Behavior button.

3 Click the image to select it, and click the Insert button in the Behaviors panel

to open the Behaviors menu (see Figure 16.2)

4 Select the Swap Image behavior from the menu This opens the Swap Images

dialog

5 In the Swap Images dialog, click the Browse button and select the

blueButtonOver.gif image Click OK and the image location now appears

in the Swap Image URL column Leave Preload Images checked and check

Restore on Mouseout Event as well Click OK to apply the new behavior

(see Figure 16.3)

If you click anywhere else in the page, you see that a different behavior shows upwith the event onload and the action Preload Images To see what the combination

of these three behaviors does, save and preload the page in your browser When youhover your mouse over the image (the onmouseover event), it is swapped for theother image you defined (the Swap Images action) When you move your mouseaway from the image (the onmouseout event), the original image is restored (theSwap Image Restore action) The third behavior is triggered when the page loads (theonloadevent) and preloads the second image into the browser memory so that it isreadily available when it is needed (the Preload Images action)

The only thing you can’t do to a behavior is change its action To do that, you have

to add a new behavior to the object and delete the old one, if necessary

Experienced designers and people familiar with JavaScript can make modifications

of the different behaviors in Code view Although this book does not cover the

Modifying Behaviors 263

FIGURE 16.5

After applying abehavior, you canchange theevent by openingthe Event sub-menu from thedrop-down arrow

modification of JavaScript in Code view, it is worth your time to look under the hood

to understand how exactly behaviors work

If you click the image you inserted into the page and switch to Split view, you see

that the image code is much longer than what you have seen before:

<img id=”img1” alt=”Behavior button” height=”44”

onmouseout=”FP_swapImgRestore()”

onmouseover=”FP_swapImg(1,1,/*id*/’img1’,/*url*/

‘buttonGraphics/blueButtonOver.gif’)”

src=”buttonGraphics/blueButtonUp.gif” width=”92” /></p>

In addition to familiar components such as id, alt, src, height, and width, the

image now has a series of new code elements attached Those new code elements are

the behavior events Let’s take a closer look at the onmouseover event:

onmouseover=”FP_swapImg(1,1,/*id*/’img1’,/*url*/

‘buttonGraphics/blueButtonOver.gif’)”

The first part of this code is the event itself The next part, FP_swapImg, is the name

of the action or function the event is triggering Every JavaScript function has a name

and a set of arguments contained within parentheses and separated by commas In

this case the variables are 1, 1, ’img1’, ’buttonGraphics/blueButtonOver.gif’,

and they tell the script what image to swap out (img1) and what image to put in its

place (buttonGraphics/blueButtonOver.gif)

The actual action or function is in the head of the page (see Figure 16.6):

function FP_swapImg() {//v1.0

var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array();

for(n=2; n<args.length; n+=2) { elm=FP_getObjectByID(args[n]); if(elm) {

doc.$imgSwaps[doc.$imgSwaps.length]=elm;

elm.$src=elm.src; elm.src=args[n+1]; } }

}

page, you also

add small

pro-grams called

functions into the

head of the page

This is highly technical JavaScript code, and you do not need to understand what itmeans and how it works What you can do, however, is examine the sequence ofevents: When the page loads in the browser, the image on the page loads as normal,and the browser loads a second image into memory as per the onload event Whenthe visitor moves the mouse over the image, the onmouseover event triggers theFP_swapImg action and sends it the arguments img and buttonGraphics/

blueButtonOver.gif The action runs the tiny program with these arguments andreplaces the image When the visitor moves the mouse off the image, theonmouseoutevent triggers the FP_swapImageRestore action This action has no arguments because it just restores the old image

To put this example into context, the interactive button you created in Hour 15,

“Buttons, Buttons, Buttons,” used the same events and actions along with some tional ones to achieve its hover and click effects

addi-The Many Behaviors of Expression Web 3

The preceding example introduced you to the Preload Images, Swap Image, andSwap Image Restore behaviors Those are just three of a series of behaviors you canuse to increase interactivity for your visitors To get the full use out of the program,you should know each behavior and what it does

Call Script

The Call Script behavior calls a script that is not featured in the prepackaged

behav-iors in Expression Web 3 To put it simply, Call Script is a behavior where you define

the action When you apply Call Script to an object, a dialog opens asking you for

the JavaScript/JScript code (see Figure 16.7) This behavior is for advanced users with

previous knowledge of JavaScript

Change Property

The Change Property behavior lets you change the styling properties of the object to

which it is applied These properties include Font, Position, Borders and Shading,

and Visibility

1 Below the image you previously inserted, write a couple of lines of text in a

new paragraph With the cursor inside the text, apply the Change Property

behavior by clicking the Insert button in the Behaviors panel and selecting

Change Property This opens the Change Property dialog (see Figure 16.8)

The Borders tab

lets you set the

border style and

color

2 In the Change Property dialog, you can choose whether you want to changethe properties of the current element or selected element The Selected Elementoption lets you pick any of the defined elements within the page Leave Cur-rent Element checked

3 For this exercise you want to create a box with a gray background around theparagraph when the visitor hovers over it Click Borders to open the Bordersand Shading dialog From here you can pick the border style and shading(background color) Under the Borders tab, set the Setting to Box and leaveeverything else as it is (see Figure 16.9) Under the Shading tab, set the Back-ground Color to Silver (see Figure 16.10) Click OK

The Borders and Shading options under the Change Property dialog can be fusing because the names and functionality differ from the Add and Modify Styledialogs (In fact they look more like the Borders and Shading dialogs fromMicrosoft Word.) Despite this apparent difference, the functions within the twodialogs are the same as the ones in the Add and Modify Style dialogs, and theoutput is the same as if you were to style the element with CSS

con-4 The dialog now lists the style changes you made; as you can see from Figure16.11, they are CSS code Make further changes if you like using the other func-tions When you are done, check the Restore on Onmouseout Event box andclick OK to apply the behavior