Sams Teach Yourself Microsoft Expression Web 3 in 24 Hours- P4 pps

In the Insert Hyperlink dialog,select Existing File or Web Page and paste the Amazon.com URL into the Address field by clicking in the text box and either pressing Ctrl+V universal paste

In the second paragraph of the home page (default.html) is a reference to the book

Do Androids Dream of Electric Sheep? Some of the readers of this website might want to

buy this book Why not give them a link to the book’s page on Amazon.com? To dothis, you first need the address In your browser, go to www.amazon.com and search

for Do Androids Dream of Electric Sheep? Click one of the search results to get to the

book’s main page Highlight the entire address in the address bar and copy it byusing Ctrl+C (the universal copy shortcut), or right-click the address and select Copy(see Figure 5.6)

Back in Expression Web 3, select the book title in the second paragraph, right-clickthe selection, and select Hyperlink as you did before In the Insert Hyperlink dialog,select Existing File or Web Page and paste the Amazon.com URL into the Address field

by clicking in the text box and either pressing Ctrl+V (universal paste shortcut) orright-clicking and selecting Paste (see Figure 5.7)

Open the ScreenTip dialog and type Do Androids Dream of Electric Sheep? is

available from Amazon.com Click OK twice and save the new file Test it in your

browser

But here is a new problem: After the visitor clicks the link, she goes to Amazon.com

How does she get back to your site? Unlike the myDesk.html file, you can’t insert ahome link in the Amazon.com page How do you keep your visitor on your site and

Creating External Links and New Windows 73

FIGURE 5.7

Pasting theAmazon.com URLfor the book byright-clicking andselecting Pastefrom the menu

FIGURE 5.8

The BrowsedPages optiongives you access

to the recentbrowser historyfrom InternetExplorer

still let her visit other sites? One solution is to edit your link so that the external page

opens in a new window

1 Right-click the Do Androids Dream of Electric Sheep? link you just created and

select Hyperlink Properties

2 In the Edit Hyperlink dialog, click the Target Frame button on the right

Using the Browsed Pages Option to Obtain Hyperlinks

If you don’t want to copy and paste the URL from the browser, there is an

alterna-tive built in to Expression Web 3: The application connects to the Internet

Explorer browser history that means you can get the URL from right inside the

pro-gram itself To use this option go to the desired target location in Internet

Explorer before creating the hyperlink When inside the Insert Hyperlink dialog,

click the Browsed Pages option (see Figure 5.8) in the main window to get the

browsing history From here you can select any of the pages you have visited with

Internet Explorer recently, and Expression Web automatically inserts the URL to

that page for you

4 Click OK twice, save the file, and test it in your browser.

Now when you click the link to the book, the page opens in a new window or tab inyour browser This is a basic way to make links open in new windows In Hour 16,

“Using Behaviors,” you learn how to use behaviors to make more advanced new dows and pop-up windows

win-Creating Internal Links Within Documents Using Bookmarks

Another type of link you can create is a bookmark (also known as an anchor), a

hyper-link that points to a specific position in the current page Designers most often use thistype of link to help people navigate longer web pages by providing a menu that leads

to different sections Bookmarks are also effective for linking directly to footnotes

Before you make bookmark links, you have to insert the bookmarks in your ment In default.html, select the first subheading (Kipple: A Definition) Select Insert,Bookmark from the menu bar, or click Ctrl+G This opens the Bookmark dialog Fromhere you can set the bookmark’s name The name becomes the address of the book-mark and is included in the hyperlink For that reason, underscores replace all spaces(see Figure 5.10)

You can change the bookmark name to whatever you want, but it’s a good idea to

keep it consistent and meaningful, especially if your document has many

book-marks

When you click OK, you see that the title now has a dotted underline in the Design

view of the page This is a visual reminder that the text has a bookmark attached

and is visible only within Expression Web, not in the web browser Follow the same

process and attach bookmarks to the two other subheadings

Now all you have to do is make a menu with links to the bookmarks This menu

should go directly under the main heading Make a new paragraph under the main

heading by clicking the beginning of the first paragraph and pressing Enter In the

new first paragraph, create an unordered (bulleted) list Each list item should be

identical to the subheadings, like this:

. Kipple: A Definition

. Show me your kipple and I’ll tell you who you are

. Every piece of kipple has a story

Highlight the first bullet point and right-click to open the Hyperlink dialog By

select-ing Link to Place in This Document from the left-side menu, you open a list of the

three bookmarks you created Select the one that matches your title (see Figure 5.11)

As before, attach a ScreenTip such as Jump to Kipple: A Definition to keep your page

accessible Finally, click OK and save your changes

Do the same with the two other menu items When you are done, save and test in

your browser You see that when you click the links, the browser jumps to the

book-marked section Because the document is relatively short, it might not look like

any-thing is happening when you click a link But if you reduce the width of your

naviga-is clicked, the browser naviga-is directed to the page in question and the bookmark withinthat page, which is signified by a # symbol followed by the bookmark name like this:

“My Web Sites/MyKipple/default.html#Kipple:_A_definiton”

Creating an Email Hyperlink

The final option in the Hyperlink dialog is the E-mail Address link With this option,you can create a link that opens the visitor’s preferred email program and sets the Toaddress and Subject line This is the easiest way to provide contact information toyour visitors because they don’t have to copy and paste or type out the email addressthemselves

To create an email hyperlink, you first need some text to work as a link On the

bot-tom of the home page, add a new paragraph and type If you want further

infor-mation about my kipple, send me an e-mail Highlight the send me an e-mail

portion of the text and open the Insert Hyperlink dialog Select E-mail Address fromthe left-side menu to open the email options In the E-mail Address line, enter theemail address to which you want the message to go When you start writing, the pro-gram automatically inserts a block of code, mailto:, directly in front of your address

This code tells the browser that this is not a regular link but an email link In theSubject line, type the default subject line that you want emails generated from thewebsite to have (see Figure 5.12) The Recently Used E-Mail Addresses option displays

FIGURE 5.12

The E-MailAddress optionunder the InsertHyperlink dialoglets you insert areceiving emailaddress and adefault subjectline

the most recent email addresses you linked to within Expression Web 3 Remember to

set a ScreenTip for your email link and click OK

When you test the page in your browser and click the new link, your computer opens

your default email program and starts an email with the address and subject line

you chose

Summary

Hyperlinks are what set the World Wide Web apart from other informational sources

By enabling the user to quickly navigate through large amounts of content and

instantly move from one source to another, hyperlinks have revolutionized the way

we find and use information In this hour, you learned how to create hyperlinks

within your own site, to the outside world, and even within one document

Hyper-links are core components of any website and create navigation and Hyper-links to the rest

of the Web You also learned how to create links that open in new windows In Hour

16, you learn how to expand on this technique using Expression Web 3’s built in

behaviors

Q&A

Q When I copied and pasted the subheading into my unordered list, the text

kept the dotted underline Is this a problem?

A If you copy and paste content such as text in Design view, all the associated

attributes come with it In this case, you copied not only the text itself but also

the bookmark To get rid of the bookmark, highlight the text, right-click, and

select Bookmark Properties Simply click Clear and Expression Web 3 removes

the bookmark

“Bringing Style to Substance with Cascading Style Sheets,” you learn how tostyle your links by changing their color, font style, and size, and by addingunderline and other effects.

Q What is the difference between a menu and a link?

A A menu is just a series of links styled to look a certain way On a website, anyitem that takes you somewhere else when you click it is just a link created inthe same way you created links in this hour The reason menus look different isthat they have heavy styling and usually use graphics instead of just text

1 What kind of content can a hyperlink be applied to?

2 What are the three different types of hyperlinks and when are they used?

3 How does a bookmark differ from a “regular” hyperlink?

3 Bookmarks make the browser navigate to a certain location within the current

page, so instead of loading a new page, it jumps down or up in the current

page to a different location

Exercise

Throughout the default.html page are several items that you can link to sites with

further information For instance, you could link the name Philip K Dick to the

Wikipedia.org page about the author and the name Blade Runner to the imdb.com

page about the movie Use the Web to find further information on these items and

make links that point to these sources Make sure you attach a ScreenTip to each link

and that each one opens in a new window

This page intentionally left blank

HOUR 6

Getting Visual, Part 1:

Adding Images and Graphics

What You’ll Learn in This Hour:

How to import and work with a completed website in Expression Web 3

What the main image file types are and when to use them

How to import an image into Expression Web 3

How to insert an image into a page

How to change the placement and appearance of an image in a page

Introduction

Because the World Wide Web is a visual medium, making your website visually

pleasing is important The easiest way to do this is by adding images and graphics to

the text But images can be so much more than just eye candy As hinted at in Hour

5, “Getting Connected With (Hyper)Links: The Cornerstone of the World Wide Web,”

an image can also be used as a link or even as a navigational tool If you dissect

websites, you find images used as borders, backgrounds, buttons, underlines, and

even text The possibilities are endless

In the past, heavy use of images in websites was frowned upon mostly because

peo-ple were on slow dial-up connections, and the images made the pages heavy and

slow to load But now that broadband Internet is becoming more and more prevalent

throughout the world and image compression technology has evolved to a point

where web-quality images take up little memory, web designers rely heavily on

image elements to make their sites look better

The bottom line is this: Used correctly, images can be a great tool to enhance the look

and feel of your website

82 HOUR 6: Getting Visual, Part 1: Adding Images and Graphics

Images on the Web: Three File Types for Three Uses

At first glance, it looks like all images on the Web have the same format But in ity they are different Web designers choose different file formats, with differentattributes, depending on how they plan to use an image That choice in turn affectshow a page looks and works

real-There are three main image formats that most current browsers support They areGIF (Graphics Interchange Format), JPEG or JPG (Joint Photographic Experts Group),and PNG (Portable Network Graphics) Each format has advantages and limitations:

. The GIF format produces the smallest files for quick downloads Unfortunately,the image quality of a GIF file is quite poor When introduced, the GIF formatwas the only format that supported transparency It gave designers the option

to create graphics that could display on top of other graphics or display out an unsightly box around them But this transparency is coarse and effec-tive only with images that have clean lines In addition, the GIF format candisplay only up to 256 colors, severely limiting the kinds of images that design-ers can use it for For these reasons, the GIF format is best suited for computer-generated content and line drawings Today’s designers use the GIF formatmostly to display small icons and buttons (see Figure 6.1)

with-. JPEG or JPG is the most common image format on the Web Its success stemsfrom its high compression rate and low image noise JPEG has become thestandard format for images not only on the Web but also in digital camerasand other devices JPEG is a compression format that uses advanced algorithms

to recalculate the image data and remove content that is not easily noticed bythe human eye Among the many different things a JPEG compressor does isevening the colors, duplicate similar looking areas, and compress the actualimage code to make it shorter At high-quality (and low-compression) settings,

Importing and Inserting an Image 83

JPEG compression can be excellent, but if you set the compression too high, the

image can end up looking a bit like a paint-by-numbers painting (see Figure

6.2) The JPEG is “solid” and cannot be made transparent

. PNG is the newest of the formats What sets the PNG format apart is that it has

an alpha layer that tells the browser what portions of the image are

transpar-ent As a result, you can superimpose PNGs on top of other images with full

transparency Unlike the GIF format, PNG transparencies are clean (see Figure

6.3), but this ability comes at a price: PNGs are often much larger files than the

two other formats Even so, the ability to create advanced transparencies

makes the format ideal for logos and other superimposed and hovering

graph-ics in websites Some older browsers, in particular Internet Explorer 6, do not

support PNG transparencies

Importing and Inserting an Image

Images are the most common nontext elements featured in web pages And because

images are so heavily used, there are many different ways to handle them depending

on how the designer plans to use them

FIGURE 6.2

A JPEG imagewith minimumcompression tothe left and max-imum compres-sion to the right

At minimumcompression,the file size is21KB; at maxi-mum compres-sion, it is14.2KB

FIGURE 6.3

A PNG imagewith trans-parency on awhite back-ground and atransparentbackground

Note that unlikethe GIF format,the transparency

in the PNG isclean The filesize is 7.1KB

84 HOUR 6: Getting Visual, Part 1: Adding Images and Graphics

The easiest use is simply inserting an image into a page To do that, you need toimport the image file into your project But before you do, it’s a good idea to startthinking about how your site is organized Look at the Folder List panel, and you seethat your site currently consists of two pages: default.html and myCameras.html

Now you are adding image files to your site, which means they appear alongsideyour two HTML files If you were adding just two or three images, this wouldn’t be aproblem But as you saw in Hour 2, “Beginning at the End: A Walkthrough of theFinished Project,” the final site has a large number of images and files So, beforethings get too complicated, it’s a good idea to start organizing everything in folders

In other words, you need to make a folder for your images

Create a New Folder and Import a New Image

Folders serve as effective tools for keeping your site organized Websites have a dency to fill up with files fast, and it’s important to think about file organizationearly The Folder List panel gives you easy access to all the files and folders in yoursite, and you can use it to create new files and folders and organize them

ten-1 With the Folder List panel selected, click the arrow next to the New Documenticon on the Common toolbar and select Folder (see Figure 6.4), or right-clickinside the panel and select New, Folder

2 Name the new folder Images and double-click it

3 Select File, Import, File as you did in Hour 5 In the Import dialog, click AddFile and browse to the location where you stored the downloaded lesson files onyour computer

4 Click Hour 6 and select the file called camerasSmall.jpg Click Open, and thenclick OK Expression Web 3 copies the file and stores it in the Images folder You

Importing and Inserting an Image 85

can see it in the Folder List panel by clicking on the + icon next to the Images

folder (see Figure 6.5)

Expression Web 3 is quite finicky when it comes to image files If you add images

into your website without importing them through Expression Web 3, they might

not work properly in Design view, and you see a small square with a red X instead

of the image This doesn’t mean that there is anything wrong with the image; in

fact, if you preview the page in a browser, you see that the image is there The

problem has to do with how Expression Web 3 handles files internally The best

(and only) way to avoid this problem is to make a habit to import all image files

properly through the Import File dialog

Watch

Out!

Now that Expression Web 3 has imported the image into your project, it’s time to

insert it into a page You can do this in Design view by dragging and dropping the

image into the text To start, open the myCameras.html file In the Folder List panel,

click and hold the camerasSmall.jpg file and drag it to Design view You see a gray

dotted marker jump around inside the text indicating where the image insertion

point will be Place the image at the beginning of the first paragraph under the

head-ing and let go Dohead-ing so opens the Accessibility Properties dialog (see Figure 6.6)

FIGURE 6.5

The importedimage file as itappears underthe Imagesfolder in theFolder List panelwhen the + iconhas beenclicked If youclick the – icon,the folder isclosed and the +icon reappears

FIGURE 6.6

The AccessibilityProperties dialoglets you cus-tomize the infor-mation attached

to the image forthose who can’tview the imageitself

86 HOUR 6: Getting Visual, Part 1: Adding Images and Graphics

The Accessibility Properties dialog gives you the option to attach alternative text and

a longer description to your images Some visitors cannot see the images in your pagebecause they are using a text-only browser, portable device, or text-to-speech browser

The alternative text displays in place of the image for these users and helps toexplain what the image shows It also appears if, for one reason or another, theimage doesn’t load properly when the page is opened by someone using a regularbrowser The alternative text should be a description of what the image is In this

case, enter Most of my cameras together in the Alternate Text text box, and click

OK Expression Web 3 inserts the image in the text at the beginning of the first graph (see Figure 6.7)

para-Save the file and preview the page in a browser Something is a bit off; the imagebreaks the text and leaves a large empty area to the right (see Figure 6.8)

This big void appears because, by default, web browsers consider images to be

“inline” elements, meaning they appear alongside the other elements on the line justlike a letter or word If you’ve ever placed images in a Word document, you are prob-ably familiar with the concept of “text wrapping.” The solution to the problem is sim-ilar when we work with websites: Tell the browser that the image should not beconsidered part of the text but rather an object around which the text should wrap

This can be done using the Picture Properties