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