Microsoft Expression Web 2 (Zambak)

1. BASICS OF WEB DESIGN
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . .8
What is Expression Web? . . . . . . . . . . . . . . .8
What is HTML? . . . . . . . . . . . . . . . . . . . . . . .8
HTML Coding . . . . . . . . . . . . . . . . . . . . . . . . . .10
Basic Tags . . . . . . . . . . . . . . . . . . . . . . . . . . .10
Text Formatting . . . . . . . . . . . . . . . . . . . . . . .11
Horizontal Line . . . . . . . . . . . . . . . . . . . . . . .13
Background . . . . . . . . . . . . . . . . . . . . . . . . . .13
Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .14
Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15
Changing Hyperlink Colors . . . . . . . . . . . .16
Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .16
Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .19
Questions . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20
2. YOUR FIRST WEB SITE
General Overview . . . . . . . . . . . . . . . . . . . . . . .22
Some features in Expression Web . . . . . . . .22
Expression Web At First Glance . . . . . . . . . .23
Create a Web Site using Templates . . . . . . . . .24
Making a Web Site Plan . . . . . . . . . . . . . . . . .25
Modifying Web Site Content . . . . . . . . . . . . . .28
Adding data . . . . . . . . . . . . . . . . . . . . . . . . . .28
Inserting pictures . . . . . . . . . . . . . . . . . . . . . .29
Resizing Pictures . . . . . . . . . . . . . . . . . . . . . .30
Modifying Page Background . . . . . . . . . . . . . .31
Changing Background Text and Color . . . . .31
Inserting a Background Picture . . . . . . . . . .31
Closing and Opening a Web site . . . . . . . . . . .33
Publishing a Web Site . . . . . . . . . . . . . . . . . . .33
What to do before Publishing . . . . . . . . . . . .33
Transferring Web Pages to the Web Server .35
Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .37
Questions . . . . . . . . . . . . . . . . . . . . . . . . . . . . .38
3. BUILDING YOUR WEB SITE FROM
SCRATCH
Creating an Empty Web Site . . . . . . . . . . . . . .40
Organizing a Web Site . . . . . . . . . . . . . . . . . . .40
Adding a New Page . . . . . . . . . . . . . . . . . . .41
Renaming a Page . . . . . . . . . . . . . . . . . . . . .41
Deleting a Page . . . . . . . . . . . . . . . . . . . . . . .41
Creating Links . . . . . . . . . . . . . . . . . . . . . . . . . .42
Creating a Link to another Page in the
Web Site . . . . . . . . . . . . . . . . . . . . . . . . . . . .42
Creating a Link to a Web Address . . . . . . . .43
Creating a Link to a File . . . . . . . . . . . . . . . .43
Turning a picture into a hyperlink . . . . . . . . .44
Auto Thumbnail . . . . . . . . . . . . . . . . . . . . .45
Creating Hyperlinks on Different Parts
of the Picture – Creating an Image Map . . . .46
Creating an E-mail Link . . . . . . . . . . . . . . . . .47
Creating a Link within a
Web Page - Bookmark . . . . . . . . . . . . . . . . .48
Modifying Hyperlinks . . . . . . . . . . . . . . . . . . . .49
Editing Hyperlinks . . . . . . . . . . . . . . . . . . . . .49
Changing Hyperlink Colors . . . . . . . . . . . . . .50
Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .51
Questions . . . . . . . . . . . . . . . . . . . . . . . . . . . . .52
4. LAYING OUT WEB PAGES WITH TABLES
Table Uses . . . . . . . . . . . . . . . . . . . . . . . . . . . .54
Laying Out a Web Page with Tables . . . . . . . .54
Inserting Interactive Buttons . . . . . . . . . . . . .56
Creating a Table . . . . . . . . . . . . . . . . . . . . . . . .58
Formatting a Table . . . . . . . . . . . . . . . . . . . . . .59
Changing Table Size and Alignment . . . . . .59
Adding Rows or Columns . . . . . . . . . . . . . . .59
Deleting Rows or Columns . . . . . . . . . . . . . .60
Defining Borders . . . . . . . . . . . . . . . . . . . . . .60
Adding Background Color or Picture . . . . . .61
Defining cell padding and cell spacing . . . .61
AutoFit to Contents . . . . . . . . . . . . . . . . . . . .61
Formatting a Cell . . . . . . . . . . . . . . . . . . . . . . .62
Aligning Objects in a Cell . . . . . . . . . . . . . .62
Merging Cells . . . . . . . . . . . . . . . . . . . . . . . .62
Splitting Cells . . . . . . . . . . . . . . . . . . . . . . . . .63
A Table within a Table – Nested Tables . . . . . .63
Table AutoFormat . . . . . . . . . . . . . . . . . . . . . . .64
Modifying a Picture . . . . . . . . . . . . . . . . . . . . . .64
Checking Image Size and Speed . . . . . . . .64
Cropping a picture . . . . . . . . . . . . . . . . . . . .66
Including a Text Alternative . . . . . . . . . . . . .67
Saving an Attached Image . . . . . . . . . . . . . .68
Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .69
Questions . . . . . . . . . . . . . . . . . . . . . . . . . . . . .70
5. ENHANCING YOUR WEB SITE
Cascading Style Sheets . . . . . . . . . . . . . . . . . .72
CSS Uses . . . . . . . . . . . . . . . . . . . . . . . . . . .72
External Style Sheet . . . . . . . . . . . . . . . . . .72
Embedded Style Sheet . . . . . . . . . . . . . . .72
Inline styles . . . . . . . . . . . . . . . . . . . . . . . . .73
CSS Types . . . . . . . . . . . . . . . . . . . . . . . . . . .73
ID-based styles . . . . . . . . . . . . . . . . . . . . . .73
Class-based styles . . . . . . . . . . . . . . . . . . .77
Tag-based styles . . . . . . . . . . . . . . . . . . . .80
Working with Multimedia . . . . . . . . . . . . . . . .82
Inserting a Flash Object . . . . . . . . . . . . . . .82
Inserting page background sound . . . . . .83
Inserting a Video . . . . . . . . . . . . . . . . . . . .84
Page Transition . . . . . . . . . . . . . . . . . . . . . .86
Using Frames . . . . . . . . . . . . . . . . . . . . . . . .87
Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .93
Questions . . . . . . . . . . . . . . . . . . . . . . . . . . . . .94
6. IMPROVING INTERACTIVITY
Dynamic Web Templates . . . . . . . . . . . . . . . .96
Creating a Dynamic Web Template . . . . . . .96
Attaching a Dynamic Web Template
to the Pages . . . . . . . . . . . . . . . . . . . . . . . . .98
Detaching Files from a Dynamic
Web Template . . . . . . . . . . . . . . . . . . . . . . . .99
Layers and Behaviors . . . . . . . . . . . . . . . . . . . .100
Adding a Layer . . . . . . . . . . . . . . . . . . . . . . .100
Applying a Behavior to a Layer . . . . . . . . . . .102
Some Behavior Examples . . . . . . . . . . . . . . .103
Swap Image . . . . . . . . . . . . . . . . . . . . . . . .103
Open a Browser Window . . . . . . . . . . . . . .105
Jump Menu . . . . . . . . . . . . . . . . . . . . . . . .106
Using Java Script Codes in Expression Web .107
Greetings . . . . . . . . . . . . . . . . . . . . . . . . . . . .107
Flashing Status Bar . . . . . . . . . . . . . . . . . . . .108
Page Password Protection . . . . . . . . . . . . . .108
XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .110
Building an XML file . . . . . . . . . . . . . . . . . . .110
Adding XML Data to the Page . . . . . . . . . . .111
Formatting the Data . . . . . . . . . . . . . . . . . . .111
Sorting . . . . . . . . . . . . . . . . . . . . . . . . . . . .112
Filtering . . . . . . . . . . . . . . . . . . . . . . . . . . . .113
Changing the Layout . . . . . . . . . . . . . . . . .114
Conditional Formatting . . . . . . . . . . . . . . . .117
Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .119
Questions . . . . . . . . . . . . . . . . . . . . . . . . . . . . .120
7. CREATING A DYNAMIC WEB SITE
FOUNDATION
Creating a dynamic web site foundation . . .122
Create a Master Page Layout . . . . . . . . . . .122
Creating Styles . . . . . . . . . . . . . . . . . . . . . . .126
Create pages from a Master . . . . . . . . . . . . .127
Create a database . . . . . . . . . . . . . . . . . . . . . .128
Creating a connection between a database
and a web site . . . . . . . . . . . . . . . . . . . . . . . . .129
Displaying data from a database . . . . . . . . . .130
Updating your web site online . . . . . . . . . . . . .141
Uploading pictures . . . . . . . . . . . . . . . . . . . .144
Creating users . . . . . . . . . . . . . . . . . . . . . . . .145
Creating a Login Page . . . . . . . . . . . . . . . .145
Creating a New User Page . . . . . . . . . . . .145
Securing the links with a login page . . . . . .146
To allow access to particular user only
and deny everyone else . . . . . . . . . . . . . . . .148
Searching in the database . . . . . . . . . . . . . .148
ANSWER KEY . . . . . . . . . . . . . . . . . . . . . . . . . .152
HTML Color Reference . . . . . . . . . . . . . . . . . . .153
INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .154