Sams Teach Yourself Microsoft Expression Web 3 in 24 Hours- P17 pdf

ptg
462
BONUS HOUR 25: Beyond the Basics, Part 2: Building a Site with ASP.NET
3. If you look through the code of the Contact.aspx page, you notice that there is
nowhere to input the email address the email should be sent to. This informa-
tion is stored in the Web.config file. Open the Web.config file and find the
EmailTo attribute on line 11. Change the value to your email address. You can
also change the default subject line if you want.
4. Save both pages.
Summary
As websites become more advanced and you start looking for added functionality,
ASP.NET gives you options that are far outside of the scope of straight HTML. With
this server-side script language, you can make highly advanced dynamic websites
with increased interactivity and features that are sure to impress any client.
ASP.NET is Microsoft’s server-side scripting language, and as such it is an integral
part of Expression Web 3. But because it is a server-side script language, it requires a
whole new set of skills that reach far beyond the scope of this book. For this reason,
you were introduced to the Portfolio Starter Kit, an ASP.NET-based website designed
by Microsoft to give new designers a first look at ASP.NET, and you used it to learn
the basics of how these sites work.
An ASP.NET site is different from everything you have encountered so far in this book
because unlike the regular HTML and PHP pages and even those generated from a
Dynamic Web Template, the individual pages of an ASP.NET site exist only when a
visitor opens them. In other words, rather than stored on the server as individual
fully programmed pages, the contents of an ASP.NET site are stored in web forms
(files with the suffix .aspx) and external data sources such as XML files. When the
visitor opens one of these forms, the browser and the server work together to put the
contents of the form into the layout of the master page, and look through the form
to see whether other content should be sourced from external data sources. It all
sounds complicated, but when you work with larger websites with hundreds or even
thousands of pages, this type of structure combined with a database to hold all the

external content is far more feasible than making each page individually.
In this hour, you learned the basics of how an ASP.NET site works and what makes it
different from other static sites. You learned how to edit the master page to change
the content regions that can be defined for the individual pages. And even though it
is based on ASP.NET, the layout of the master page is still nothing but HTML and CSS.
▲
From the Library of Lee Bogdanoff
ptg
Workshop
463
You also learned how to change the contents of individual web forms and how they
interact with the master page to create a complete page. In addition, you took a
closer look at how external data files are used as sources to generate content for mul-
tiple pages, and you saw how easy it is to change these external data sources for
immediate and sitewide results. Finally, you learned how to customize the project to
work as a basis for your own web portfolio or another project.
Now you have the basic skill set to customize the Portfolio Starter Kit site and make it
your own. Even if you don’t want to use it as a basis for your own or a client website,
the project is an excellent tool to learn more about how ASP.NET works and how you
can employ it to create richer and more interactive web experiences for the visitors.
The Expression website has other Starter Kits that introduces you to elements such as
login control, calendar controls, and style sheet switches. These Starter Kits are not cov-
ered in this book but are based on the same principles as the Portfolio Starter Kit, and
you can apply the same techniques learned in this hour to personalize them as well.
Q&A
Q. The Portfolio Starter Kit doesn’t work! I can open it in Expression Web 3, but
when I try to preview it, all I get is a weird error message. What is going on?
A. Unlike a website built using static HTML pages, a dynamic website like the
Portfolio Starter Kit has a specific folder and file structure that must be main-
tained for everything to work properly. If you receive an error message when

previewing the page in your browser, it is most likely because you didn’t set the
correct folder as the site folder when you first created the site. As previously
stated, the site link must be to the Portfolio Starter Kit folder and not the
Expression Portfolio Starter Kit folder or the site will not work properly.
Workshop
The Workshop has quiz questions and exercises to help you put to use what you have
just learned. If you get stuck, the answers to the quiz questions are in the next sec-
tion. But try to answer the questions first. Otherwise you’ll be cheating yourself.
Quiz
1. What is the primary difference between a static HTML-based site and a
dynamic ASP.NET-based site?
From the Library of Lee Bogdanoff
ptg
464
BONUS HOUR 25: Beyond the Basics, Part 2: Building a Site with ASP.NET
Answers
1. As the name suggests, the static HTML site consists of a series of pages that are
static, meaning they can be changed only by editing the content manually on
the server. The dynamic ASP.NET site, on the other hand, consists of a series of
pages that are populated by the server when they are opened. They get their
content from different sources and are updated by changing the sources rather
than the pages themselves. This way you can make sweeping changes to many
pages by altering their data sources. Dynamic pages can also gather content
from sources outside of the current website.
Exercise
In this hour, you learned to insert a new title, description, and keywords in the
Default.aspx page. Open the three other .aspx pages, insert the necessary content
regions, and give each of them an individual title, description, and appropriate key-
words. Keep in mind that the Details.aspx page displays the full information from
the portfolio.xml data source, so the description and keywords need to be generic

enough to describe all the different projects.
Edit the portfolio.xml file to create new portfolio items. To do so, you also need to add
new image files to the Images folder. The easiest way to do this is to open existing
image files in your favorite image editor, replace the contents of these files with new
content, and save them with new and descriptive names just as was done with the
images for the MyKipple project.
From the Library of Lee Bogdanoff
ptg
Introduction
465
APPENDIX A
Building Layers-Based Menus
Introduction
In Hour 18, “Building a Functional Menu,” you learned how to build a CSS-based
menu. This is the preferred approach for building menus because it is flexible and
allows for easy styling and dynamic content building. Nevertheless there is another
method to build menus—and in particular drop-down menus—that is often used
that involves buttons and layers. Throughout the book you learned about buttons,
behaviors, and layers. In this appendix, you use that knowledge to create an
advanced and functional drop-down menu for easy navigation.
The Layers-Based Menu
Using layers and child layers is a quick-and-dirty way to create drop-down menus
that has been around for some time. This technique allows for great flexibility when
it comes to the look and feel of the menu, but the code portion can be messy. Even so,
many designers still use the layers-based menu, and you can create it in Expression
Web 3 without writing or looking at a single line of code.
Creating the Main Menu
A drop-down menu consists of two groups of elements: the main menu that is always
visible and the child menus triggered by the main menu. The main menu buttons
can work as buttons or just as triggers for the child menus. In this lesson, you use

Expression Web 3’s interactive buttons to create the Layers menu.
1. Create a new Hypertext Markup Language (HTML) page and call it
layers-Menu.html. Open the page in Design view.
2. Open the Layers panel and click the Draw Layer button. Draw a layer the
width of the page and about one paragraph in height in Design view. After
creating the layer, double-click it in the Layers panel and change the layer ID
to
mainMenu (see Figure A.1).
From the Library of Lee Bogdanoff
ptg
466
APPENDIX A: Building Layers-Based Menus
FIGURE A.1
Naming the lay-
ers as you cre-
ate them is a
good habit that
prevents confu-
sion when your
layouts become
more compli-
cated.
FIGURE A.2
The mainMenu
layer now con-
tains five but-
tons.
3. Click the layer to place the cursor inside it and select Insert, Interactive Button
on the menu bar to create a new interactive button.
4. In the Interactive Button dialog, scroll down and select one of the Linked Row

buttons. Set the Text option to Home and click OK to insert the button.
5. You now have two choices of how to create more buttons: Either repeat steps 3
and 4 or copy the current button, paste a new one next to it, and double-click
the new button to open the Interactive Button dialog and give the button a
new name. Either way you choose, create four new buttons and call them
News, Gallery, Archive, and Contact (see Figure A.2).
Create a Submenu
Now that you have designed the main menu, it is time to add the submenus to the
page. Each submenu should reside in its own layer, and the layers should be children
of the mainMenu layer. This is because when a layer is a child of a different layer,
the parent layer defines its position. In practical terms, this means that if the parent
layer moves, the child layers move with it.
From the Library of Lee Bogdanoff
ptg
The Layers-Based Menu
467
FIGURE A.3
The – (minus
sign) in front of
the mainMenu
layer and the
slight indentation
of the new layer
indicate that the
new layer is a
child of the main-
Menu layer.
1. To create a child layer, use the Draw Layer button to draw a new layer any-
where on the page. (You will position it later.) After drawing the layer, click
and drag the new layer instance on top of the mainMenu layer instance in the

Layers panel so that the mouse pointer changes to include a superimposed box
and a + sign. When you let go, the new layer appears slightly indented under
the mainMenu layer in the list. The indentation indicates the new layer is a
child of the mainMenu layer (see Figure A.3).
2. Change the layer ID of the new layer to newsSub.
3. Place the cursor inside the new layer and select Insert, Interactive Button from
the menu bar to create a new interactive button.
4. Choose the Simple Block button and set the button text to New News. Under
the Font tab, set the Horizontal Alignment to Left. As you can see from the pre-
view, you have to insert a space before the words to separate them from the
box graphic. To do so, simply place your cursor at the beginning of the text
and press the spacebar once. Click OK to insert the button into the new layer.
5. Press Enter to go to the next line, copy and paste the first button into the sec-
ond line, and give it the name Old News. Repeat the process and make two
more buttons called Good News and Bad News.
6. Resize the layer by clicking it and dragging the handles so that the layer bor-
ders fit the content (see Figure A.4).
7. Finally, reposition the layer directly under the News button on the main menu
where you want it to appear when the visitor triggers it (see Figure A.5). To
reposition the layer, hover your mouse over the Tag Selector until the four-
direction arrow shows and then drag and drop the layer to the location of your
choice.
From the Library of Lee Bogdanoff
ptg
468
APPENDIX A: Building Layers-Based Menus
▼
FIGURE A.5
Because the pop-
up layer is likely

to overlap parts
of the mainMenu
layer, it is a good
idea to wait until
you finish the
layer before mov-
ing it to its final
position.
FIGURE A.4
After creating all
the buttons, you
can resize the
layer using the
handles.
When you save the page, you get a long list of embedded image files that you must
save. Click the Change Folder button in the Save Embedded Files dialog and create a
new folder called layerMenuButtons for all the button images.
After saving the page, preview it in your browser. As you can see, the main menu
buttons and the submenu buttons are working properly, but the submenu is visible
all the time. To create the drop-down effect, you need to apply a series of behaviors to
the different elements.
Try It Yourself
Use Behaviors to Make the Drop-Down Menu Drop Down
The whole idea of a drop-down menu is that the submenus are not visible until you
trigger them. In Hour 17, “Frames and Layers,” you learned how you could use the
Visibility property to hide and show layers in the browser. Now you are going to
use this technique to trigger the new submenu.
1. The newsSub layer should not be visible unless the user triggers it. Use the eye
column in the Layers panel, or right-click the newsSub layer and select Set Visi-
bility: Hidden from the pop-up menu (see Figure A.6).

From the Library of Lee Bogdanoff
ptg
The Layers-Based Menu
469
FIGURE A.6
You can set the
visibility of a
layer by using the
eye icon in the
leftmost column
in the Layers
panel or by right-
clicking it and
setting it from
the pop-up menu.
The newsSub layer should become visible when the visitor hovers over the
News button on the mainMenu layer.
2. Click the News button in the mainMenu layer and apply a Change Property
behavior from the Behaviors panel.
3. In the Change Property dialog, check Select Element and set the element type
to Div and the element ID to
newsSub. Click the Visibility button and set the
visibility to Visible. For this behavior, do not check the Restore on Mouseout
Event box (see Figure A.7). If you do, the submenu becomes invisible when you
move your mouse away from the News button and into the menu. Click OK to
apply the behavior.
4. In the Behaviors panel, change the event of the Change Property behavior to
onmouseover by clicking it and selecting onmouseover from the drop-down
menu.
Now the newsSub menu appears whenever the visitor hovers over the News

button. But if you test the page in your browser, you see that after submenu
triggers, it doesn’t disappear again.
5. Select the newsSub layer either by clicking it in Design view or selecting it from
the Layers panel, and go to the Behaviors panel. Apply a Change Property
behavior to the newsSub layer.
From the Library of Lee Bogdanoff
ptg
470
APPENDIX A: Building Layers-Based Menus
FIGURE A.7
Use the Change
Property behavior
in the News but-
ton to trigger the
drop-down menu.
6. In the Change Property panel, leave Current Element checked and set the Visi-
bility to Hidden. Again, do not check the Restore on Mouseout Event box. Click
OK to apply the behavior.
7. In the Behaviors panel, change the event of the Change Property behavior to
onmouseout. This tells the browser that the menu should be invisible when the
mouse is no longer hovering over it.
Save and test the page in your browser, and you see that the drop-down menu
now stays put when you hover over the first button but disappears again if you
move further down. To fix this, you need to tell the browser that as long as the
mouse is in the newsSub layer it should remain visible.
8. With the newsSub layer still selected, add a new Change Property behavior and
set the
Visibility property for the layer to Visible. Click OK to apply the new
behavior and change the event to
onmouseover (see Figure A.8).

Now the drop-down menu works almost the way it should, with one exception:
If the visitor moves the mouse to one of the other main menu buttons instead
of somewhere else on the page, the submenu stays visible.
9. To hide the submenu when the visitor moves from the News button to one of
the other buttons on the main menu, click the mainMenu layer in the Layers
panel layer and apply a Change Property behavior to it. Check Select Element
and set the element type to Div and the element ID to
newsSub. Click the Visi-
bility button and set the visibility to Hidden. Click OK twice to apply the
behavior to the layer and change the event to
onmouseout.
From the Library of Lee Bogdanoff
ptg
The Layers-Based Menu
471
FIGURE A.8
The newsSub
layer needs two
Change Property
behaviors to
work properly:
one for when the
mouse hovers
over it and one
for when the
mouse moves
away from it.
Note that I have
placed the
Behaviors panel

in the top-right
panel area so
that I can have
both Behaviors
and Layers open
at the same
time.
Now, finally, the drop-down menu for the News button works properly.
Adding and Managing Several Drop-Down Menus
As you saw in the prior section, to get the drop-down menu to work properly, you
need to apply multiple different behaviors to different elements within the page.
Unfortunately, there is no quick way to automate this process: You need to apply the
same set of behaviors to every new submenu.
1. To create a new submenu for the Gallery button, click to select the newsSub
layer in the Layers panel and press Ctrl+C to copy it and Ctrl+V to paste it. The
new layer should appear with the name newsSub0 in the Layers panel and on
top of the original newsSub layer in Design view.
2. Double-click the layer in the Layers panel to rename it. Give it the name
gallery-Sub (see Figure A.9).
3. Grab the new gallery-Sub layer in Design view and move it so that it is directly
under the Gallery button on the main menu. Toggle the layer visibility to visi-
ble by clicking the eye icon in the Layers panel.
4. Double-click the first button and give it the name My Kipple. Rename the two
other buttons to Other Kipple and Found Kipple (see Figure A.10).
▲
From the Library of Lee Bogdanoff
ptg
472
APPENDIX A: Building Layers-Based Menus
FIGURE A.10

The new button
titles are longer
than the ones in
the original layer,
so you need to
extend the
gallery-Sub layer
to the right to fit
them in.
FIGURE A.11
The Previous Tar-
get Element Was
Not Found warn-
ing tells you that
although the
behavior appears
in the Behaviors
panel, it no
longer works.
FIGURE A.9
You can copy
and paste layers
from within the
Layers panel.
They become
independent
entities, and it’s
a good idea to
rename them
immediately to

keep track.
5. With the gallery-Sub layer selected, go to the Behaviors panel. The behaviors
from the newsSub layer are still visible, but if you double-click the
onmouseout
behavior to open the Change Property dialog, you’ll be notified that it is no
longer working (see Figure A.11).
6. Click OK to close the warning box, and you see that the behavior is empty. The
event is still present but the action is gone. Set the element ID to
gallery-Sub
and the visibility to Hidden. Open the onmouseover behavior and do the same
except set the visibility to Visible.
7. To link the new layer to the main menu, select the Gallery button on the main
menu and apply a Change Property behavior to it. In the Change Properties
dialog, set the element ID to
gallery-Sub and the visibility to Visible. Click OK
to apply the new behavior and change the event in the Behaviors panel to
onmouseover.
From the Library of Lee Bogdanoff
ptg
The Layers-Based Menu
473
FIGURE A.12
Although the
menu looks
great in Design
view, the code
that makes it
work is compli-
cated and hard
to read.

8. To finalize the process, set the gallery-Sub layer visibility to Hidden in the Lay-
ers panel by clicking the eye icon twice to get the closed eye. Create a new
behavior that sets the visibility of the gallery-Sub layer to Hidden and attach it
to the mainMenu layer. Change the event of this behavior to
onmouseout. The
mainMenu layer should now have two
onmouseout events that both have
Change Property actions.
Save and preview the page in your browser, and you see that you now have a menu
with two fully working drop-down submenus under the News and Gallery buttons.
Basing Drop-Down Menus on Layers and Behaviors
Is a Double-Edged Sword
Although making a drop-down menu using layers and behaviors might seem easy
because you can do it all by pointing and clicking different elements, there are some
serious drawbacks to this technique. You are required to apply a long list of behaviors
to each element just to make the menu work properly, and you have to add even
more if you want the buttons to do something. In addition, if you switch the page
you have been working with to Split view, you can see that the code generated for this
menu is complicated and hard to read, even for seasoned professionals (see Figure
A.12). As a result, a small error or omission on the part of the designer or developer
can have catastrophic consequences for the functionality of the menu as a whole.
From the Library of Lee Bogdanoff
ptg
474
APPENDIX A: Building Layers-Based Menus
On the upside, this technique enables you to use fancy graphic elements as buttons
and gives you an easy way to create and control highly interactive menus. Although
this book does not cover the topic, for a more customized look you can create graphic
buttons outside Expression Web 3 that work the same way as the interactive buttons.
The drop-down menu tutorial serves as a demonstration of what is possible when

you use layers and behaviors together. When applied properly, this technique pro-
duces robust, attractive, and interactive menus that work both as navigation and eye
candy. But as you saw, the code is complicated, and you have to keep tabs on a lot of
buttons and behaviors, not to mention that the menu works only if JavaScript is
enabled.
Watch
Out!
If JavaScript is enabled in the browser used to visit the page, layers-based menus
are 100% nonfunctional, meaning they do not work at all!
Summary
The layers-based drop-down menu gives you complete control of the look of your
menu both in terms of buttons and functionality. Because you construct it using
images as buttons, you have unlimited options for what each button should look
like. In this appendix, you built the menu using the interactive buttons built in to
Expression Web 3, but you can do the same operation using buttons created in a dif-
ferent design application. You can also open the interactive button images created by
Expression Web 3 in a design application and edit them individually. Just keep in
mind that if you do, you can’t change them in Expression Web 3 without losing the
new design.
The downside of the layers-based drop-down menu is that it depends on behaviors
and JavaScript to work properly. For most visitors, this is not a problem. But for those
who do not have JavaScript activated or use text-only or text-to-speech browsers, it
can cause unwanted results. In addition, the layers-based menu can be hard to han-
dle because you must keep track of a long list of behaviors that work together to
make the menu function properly. Forgetting just one of these behaviors can have
fatal results for the overall function of the menu.
From the Library of Lee Bogdanoff
ptg
A
absolute hyperlinks, 71

absolute positions, 230
Accessibility Properties
dialog box, 86, 99
accessing toolbars, 10
actions, 30-31. See also
behaviors
modifying, 262
Preload Images, 262
activating hyperlinks, 70
:active element, 177
active panels, 18
Add Choice dialog box,
273
Add Folder option, 367
adding
behaviors, 262. See
also behaviors
bookmarks, 113
columns, 132
connections, 437
drop-down menus, 468
embed tags, 370-372
files, 67
Flash movies, 368
functionality
layers, 297-303
PHP, 397-399
header images, 236-
238
images, 79-82, 84-87

menus, 236-238
padding, 214
Index
From the Library of Lee Bogdanoff
ptg
rows, 132
ScreenTips, 69
Silverlight, 373
Address box, 69
addresses, email, 357. See
also email
Adobe Photoshop files,
importing, 215-218
Advanced Button, 348
advanced settings,
publishing, 438-442
.advancedBox style, 252
aligning
backgrounds, 207
cells, 132
frames, 288
images, 90
layers, 467
Alternate Text text box, 86
animation, 364
Appearance tab, 89-91
Apple (Safari), 46
Application Options dialog
box, 386
applications

ASP.NET, Design
Portfolio Starter Kit,
446-448
Flash, 32-33, 364-366.
See also Flash
Open Source software,
329
Silverlight, 364-366.
See also Silverlight
Snapshot, 404-406
SuperPreview, 407-409,
422-423
Apply Styles panel, 14,
147, 159
Apply Styles task pane,
166
areas, text, 350
Arial, 153. See also fonts
ASP.NET (Active Server
Pages .NET), 6, 443-446,
461-463
Code view, 450-452
content pages, 453
data from external
sources, retrieving,
454-458
Design Portfolio Starter
Kit, 446-448
master pages, 448-450
personalizing, 459-462

thumbnails, 456
aspect ratios, Keep Aspect
Ratio option, 91
associates, labels, 350
Attach Style Sheet dialog
box, 194
attaching
dynamic web tem-
plates, 339
hyperlinks, 66
attributes, 419
backgrounds, 205-207
href, 117
position, 229-232
audio, Play Sound
behavior, 277
Auto Thumbnail option, 96
AutoFormat option, tables,
138-139
axes, 206
B
Background category, 207
background-repeat
attribute, 206
476
From the Library of Lee Bogdanoff
ptg
backgrounds, 82 See also
images
attributes, 205-207

box models, 210-212
colors, formatting, 249
content, 207-208
design, 227
IDs, 208-210
images as, 204-212
modifying, 131
separating, 209
sliding, 254
behaviors, 30-31, 258, 280
applying, 469-471
CSS, 268
formatting, 258-260
frames, configuring
text, 295-296
modifying, 262-265
navigating, 265-279
swap-images, creating,
260-262
Behaviors panel, 19
bevel borders, 97
Block Selection, 44
blockquotes, 418
blogs, dynamic web
templates, 329
body tags, 57, 153, 451
background images,
208
dynamic web tem-
plates, 340

bold, 45, 56, 151
bookmarks, 74-76
Bootcamp, 7
Border Thickness setting,
91
borders
bevel, 97
colors, modifying, 250
formatting, 150
Box Highlighting Mode,
410
boxes
background images,
210-212
CSS. See CSS
dialog. See dialog
boxes
frameworks, 223-226
existing web pages,
232-234
new, 234-238
layout styles, 226-229
models, 178-180
separating content,
168-169
Bring Forward/Backward
buttons, 97
broken hyperlinks,
troubleshooting, 34-35
Browse button, 25, 214,

356
browsers, 46
Check Browser behav-
ior, 267-270
compatibility, 49,
417-419
cross-browsers
embed tags,
370-372
testing, 407-409
troubleshooting,
415-419
Open Browser Window
behavior, 275-276
testing, 402-404
upgrading, 419-422
How can we make this index more useful? Email us at
477
From the Library of Lee Bogdanoff
ptg
web pages, testing on,
47-49
websites, previewing,
27-33
building. See formatting
bullets, 45
Code view, 120
formatting, 45
lists, using images as,
213-215

tags, 56
buttons, 30, 241-244,
256-257
in Code View, 112
creating, 468
CSS, 248-256
definition of, 244
editing, 247-248
Flash, 366
formatting, 244-248
hovering, 249
main menus, 2
saving, 247-248
buying domain names,
428
C
Call Script behavior, 265
Cascading Style Sheets.
See CSS
Cell Properties, 136-137
cells
aligning, 132
deleting, 133
merging, 132-133
resizing, 140
splitting, 132-133
centering
frames, 288
images, 167-168
Change Folder button, 104

Change Property behavior,
266-268, 302
Change Property dialog
box, 469
Change Property Restore
behavior, 267
Check Browser behavior,
267-270
Check Plug-In behavior,
270-271
child layers, creating, 3
Chrome, 47
Circular Hotspot tool, 98
classes
creating, 166-167
CSS (Cascading Style
Sheets), 166-170
managing, 175-176
pseudoclasses,
176-178
.slider, 254
tags, applying, 188-193
cleaning up code, 58-62
CMSs (Content
Management Systems),
329
code
CSS, 147-152, 184-
190, 199-201
editing, 227

hyperlinks. See hyper-
links
creating, 76-77
inserting, 68
Code view, 116-119
email, 76-77
frames, 291-292
JavaScript. See
JavaScript
478
From the Library of Lee Bogdanoff
ptg
nonfunctional, deleting,
439
reading, 185
separation, 186-187
viewing, 11
Code view, 7, 10-12, 109
content pages, 453-
455
forms, 361-362
home pages, editing,
51-57
hyperlinks, 116-119
images, 119-120
IntelliSense, 122-123
lists, 120-123
master pages, 450-452
tags, applying classes,
188-193

tools in, 112-115
collapsing menus, 8
colors, formatting
backgrounds, 205-207,
249
columns
adding, 132
deleting, 133
resizing, 133-134
tables, 129. See also
tables
commands, echo, 389
comments
CSS, 418
HTML, 440-441
Common toolbar, 10, 48
compatibility
browsers, 49, 417-419
embed tags, 370-372
HTML, 56
testing, 50
completed websites,
navigating, 21-24
components of behaviors,
262
compressing images, 84
configuring
Connection Settings
dialog box, 430
Contact.aspx, 461-462

font families for docu-
ments, 153-156
forms, 356
layer functionality, 297-
303
publishing advanced
settings, 438-442
Set Text behavior, 279
Confirmation Page tab,
358
Connection Settings dialog
box, 430
connections
adding, 437
hyperlinks, 64-66. See
also hyperlinks
Contact button, 32
contact forms, 32
Contact pages, creating,
388-390
Contact.aspx, configuring,
461-462
content
backgrounds, 207-208
CSS. See CSS
div tag, 191
external Flash, 372
NavContent Content
Region, 451
pages

ASP.NET, 453
Code view, 453-455
panels, modifying, 19
How can we make this index more useful? Email us at
479
From the Library of Lee Bogdanoff
ptg
PHP, viewing, 390
regions, 449, 452
separating, 168-169
styles, 29
troubleshooting, 416
Content Management
Systems (CMSs), 329
ContentPlaceHolderIDs,
454
ContentPlaceHolders, 449
contrast, modifying, 97
control IDs, 176
controls, forms, 348
copying
hyperlinks, 72
lists, 314
cost of domain names,
428
creating. See configuring;
formatting
cropping images, 101
cross-browsers
embed tags, 370-372

testing, 407-409
troubleshooting,
415-419
CSS (Cascading Style
Sheets), 6, 11, 29, 143-
147, 161-166
behaviors, 268
box models, 178-180
boxes, separating con-
tent, 168-169
buttons, creating, 248-
256
centering images, 167-
168
classes, 166-170
code, 184-190
comments, 418-422
creating, 147-152
customizing, 174-175
div, formatting, 169-
170
drop-down menus, 312-
324
external style sheets,
creating, 193-199
Flash, 370-371
fonts, configuring font
families, 153-156
forms, 362
hyperlinks, 153-155,

177-178
IDs, 171-175
images, 202-204. See
also images
layouts, 220-222. See
also formatting; lay-
outs
managing, 175-176
modifying, 460
programming, 183-184,
199-201
properties, 13
pseudoclasses,
176-178
reset, 224-225, 233
tables, 128
tools, 155-161
viewing, 59
CSS Properties panel, 158
customizing
ASP.NET, 459
CSS, 174-175
drop-down menus,
312-324
Flash, 370-371
forms, 356
480
From the Library of Lee Bogdanoff
ptg
horizontal menus,

311-313
hyperlinks, 68
publishing, 429-442
Silverlight, 378-379
vertical menus,
308-310
workspaces, 16-20
D
dark images, modifying,
101
data from external
sources, retrieving,
454-458
databases, forms, 356
default workspaces,
restoring, 20
default.html file, 43
Snapshot, 407
troubleshooting, 415
Default.master page, 449
deleting
cells, 133
nonfunctional code,
439
descriptions, formatting,
454-455
design. See formatting;
layouts
backgrounds, 227
websites, planning,

222-223
Design Portfolio Starter
Kit, 446-448
Design view, 7, 10-12, 44,
129-130
development, Expression
Development Server, 32
diagnostics. See also
troubleshooting
cross browsers,
415-419
SuperPreview, 409-415
dialog boxes
Accessibility Properties,
86, 99
Add Choice, 273
Application Options,
386
Attach Style Sheet, 194
Bookmark, 74
Change Property, 469
Check Plug-In, 271
Connection Settings,
430
Edit Hyperlink, 74
Import, 67
Inline Frame Properties,
294
Insert Hyperlink, 68-69,
106, 460

Insert Picture, 99
Insert Table, 129
Interactive Buttons, 2,
245
Manage Content
Regions, 450
Modify Styles, 161,
417
New Style, 149
New Web Site, 40
Open Site, 54
Page Properties, 342,
455
Picture File Type, 89
Picture Properties, 87-
92
Push Button Properties,
354
Save As, 217
How can we make this index more useful? Email us at
481
From the Library of Lee Bogdanoff
ptg
Save Embedded Files,
103, 197, 247
Saving Results, 357
Select Media File, 368
Set Text of Frame, 295-
296
Swap Images, 262

Table AutoFormat, 139
Target Frame, 74, 292
TextArea Box
Properties, 354
div tags, creating,
169-170, 191-193
documents
CSS. See CSS
text
editing, 58-62
importing, 57-58
web pages. See web
pages
DOM Tree View, 414-415
domains
hyperlinks, 71
publishing, 428-429
downloading, 7, 26
Drop-Down Box, 349
drop-down menus
adding, 468
formatting, 312-324,
469-471
managing, 468-474
dual-monitor setups, 16
DVDs, installing, 7
DWTs (Dynamic Web
Templates), 326-328,
344, 448-450
files, 438

formatting, 328-334
navigating, 334-344
dynamic web pages,
384-385. See also PHP
Dynamic Web Templates.
See DWTs
dynamic websites,
modifying, 459. See
formatting; layouts
E
echo command, 389
Edit Browser List, 48
Edit Hyperlink dialog box,
74
editing
buttons, 247-248
code, 227
dynamic web tem-
plates, 334-344
frames, 287-291
home pages, 51-57
HTML, 11
hyperlinks, 35
images, 94
layers, 298-300
layouts, 289-290
regions, 343
styles, 233
tables, 140
text, 58-62

editors, overview of, 6
effects, sliding, 255
email
addresses, 357
filtering, 400
forms, creating, 351-
354
hyperlinks
creating, 76-77
inserting, 68
Code view, 116-119
482
From the Library of Lee Bogdanoff
ptg
email, 76-77
frames, 291-292.
See hyperlinks
PHP, creating forms,
389-400
embed tags, 370-372
Empty Web Site option, 40
events
behaviors, 260
modifying, 262
Expression Development
Server, 32
Extensible Application
Markup Language. See
XAML
external Flash content,

372
external links, 66. See also
hyperlinks
formatting, 72-74
external style sheets,
creating, 193-199
F
FAQs (Frequently Asked
Questions), 68
fields
Form Field Properties,
352
Saved Fields tab, 359
Text to Display, 69
File Systems, 25, 431, 436
File Transfer Protocol. See
FTP
File Transfer Protocol over
Secure Sockets Layer
(FTPS/SSL), 431-433
files
adding, 67
Adobe Photoshop,
importing, 215-218
code, 11
default.html
Snapshot, 407
troubleshooting, 415
Dynamic Web Template,
438

managing, 37
moving, 36
PDF, 66. See also PDF
files
servers, downloading,
26
types, images, 82-84
Fill Color button, 131
filtering email, 400
Find Matching Tag button,
113
Firefox, 46, 404. See also
browsers
fixed positions, 231
Flash, 32-33, 364-366,
371
customizing, 370-371
publishing, 367-369
sharing, 372
Flickr, 207
:focus element, 177
Folder List panel, 12, 27,
96
folders. See also files
Add Folder option, 367
managing, 37
moving, 36
My Web Sites, 25
viewing, 33
Follow Hyperlink button,

113
Font tab, 246
How can we make this index more useful? Email us at
483
From the Library of Lee Bogdanoff
ptg
fonts
CSS, 149, 153-156.
See also CSS
sizing, 150
styles, 419
Form Controls section, 348
Form Field Properties, 352
formatting
background colors, 249
behaviors, 258-260
bold, 45, 151
borders, 150
buttons, 244-248
CSS, 248-256
text-free, 253-256
child layers, 3
classes, 166-167
CSS, 143-147, 163-
166. See also CSS
descriptions, 454-455
div, 169-170
div tags, 193
drop-down menus,
312-324, 469-471

dynamic web tem-
plates, 328-334
email forms, 389-400
external links, 72-74
external style sheets,
193-199
forms, 346-348,
351-354, 461-462
frames, 284-287
home pages, 51
horizontal menus, 311-
313
hotspots, 105-106
hyperlinks
Code view, 116-119
email, 76-77
frames, 291-292
images, 82-84
inline frames, 292-295
inline styles, 150-151
internal links, 66-71,
74-76
italics, 45
keywords, 454-455
layer functionality, 297-
303
lists, 45, 213
main menus, 315-319
menus, 306-308, 464
drop-down, 469-471

images, 323-324
layers, 464-474
lists, 314
paragraphs, 45
Set Text behavior, 279
small selections, 151-
152
styles
IntelliSense, 188-
190
with mouse clicks,
147-150
subject lines, 358
submenus, 466-471
swap-images, 260-262
Table Layout Tool,
139-141
tables, 129-130
text, frame behaviors,
295-296
thumbnails, 104
titles, 454-455
vertical menus, 308-
310
web pages, 41-47
with frames, 285-
286
PHP, 388-390. See
also web pages
484

From the Library of Lee Bogdanoff
ptg
websites, 28, 38-42
windows, 72-74
form#form1 tag, 451
forms, 363
Code view, 361-362
contact, 32
creating, 346-348
customizing, 356
email
creating, 351-354
formatting, 389-400
creating forms,
389-400
filtering, 400
formatting, 461-462
HTML, 348-355
modifying, 356
properties, 360
results, 355-356
forums, dynamic web
templates, 329
frames, 30-31, 281,
303-304
aligning, 288
behaviors, configuring
text, 295-296
editing, 287-291
formatting, 284-287

inline
creating, 292-295
layers, 300-302
navigating, 291-292
splitting, 291
web pages, creating
with, 285-286
Frames Page button, 290
framesets, 287-288
framework layouts,
223-226
existing web pages,
232-234
new, 234-238
Frequently Asked
Questions. See FAQs
FrontPage Server
Extensions, 431-434
FTP (File Transfer
Protocol), 54, 430-432
FTPS/SSL (File Transfer
Protocol over Secure
Sockets Layer), 431-433
Function Lookup box, 113
functionality
layers, 297-303
pages, 34-36
PHP, adding, 397-399
Snapshot, 405
G

galleries
images, creating,
374-376
Silverlight, 32-33
General tab, 88
GIF (Graphics Interchange
Format), 82
Go to URL behavior, 272
graphics, 79-82. See also
images
Graphics Interchange
Format. See GIF
Group Box, 349
H
h1 tags, 236
head tags, 57
header images, adding,
236-238
How can we make this index more useful? Email us at
485
From the Library of Lee Bogdanoff
ptg
headings, 45
tables, modifying,
130-131
tags, 56
troubleshooting, 416
Helvetica, 153. See also
fonts
hiding

panels, 18
submenus, 471
Highlight Block button,
185
Highlight Hotspots button,
98, 106
Home links, creating, 70
home pages. See also web
pages
creating, 51
editing, 51-57
text
editing, 58-62
importing, 57-58
Horizontal Margin setting,
91
horizontal menus,
formatting, 311-313
Horizontal Split Layout,
412
hosting, publishing
websites, 428-429
hotspots
creating, 105-106
tools, 98
:hover element, 177
:hover pseudo-class, 311
hovering
buttons, 249
over hyperlinks, 70

href attribute, 117
HTML (Hypertext Markup
Language), 38
compatibility, 56
editing, 11, 51-57
forms, 348-355
optimizing, 438-441
tables, 126
Toolbox panel, 115
viewing, 59
web pages, 41-47. See
also web pages
websites, 38-42. See
also websites
hyperlinks, 33
absolute, 71
Code view, 116-119
CSS, 153-155,
177-178
customizing, 68
editing, 35
email, creating, 76-77
Flash, 366
frames, formatting,
291-292
Home links, creating,
70
hotspots, 105
hovering over, 70
menus, formatting, 314

root-relative, 71
syntax, 71
testing, 69
troubleshooting, 34-35
viewing, 28
Hypertext Markup
Language. See HTML
I
IDs
backgrounds, 208-210
control, 176
CSS, 171-175
486
From the Library of Lee Bogdanoff