Vous êtes sur la page 1sur 160

MODULAR

SYSTEM

MICROSOFT EXPRESSION WEB 2

Mesut AYAN

MODULAR SYSTEM MICROSOFT EXPRESSION WEB 2 Mesut AYAN http://book.zambak.com

http://book.zambak.com

Copyright © Sürat Basým Reklamcýlýk ve Eðitim Araçlarý San. Tic. A.Þ. All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form of recording without the prior written permission of the publisher.

Digital Assembly Zambak Typesetting & Design

Page Design

Edip TÜRK

Proofreader

Andy MARTIN

Publisher Sürat Basým Reklamcýlýk ve Eðitim Araçlarý San. Tic. A.Þ.

Printed by

Çaðlayan A.Þ. Sarnýç Yolu Üzeri No. 7 Gaziemir / Izmir, May 2010 Tel.: 0-232 274 22 15

ISBN: 978-605-112-102-4 Printed in Turkey

DISTRIBUTION

Sürat Basým Reklamcýlýk ve Eðitim Araçlarý San. Tic. A.Þ.

Cumhuriyet Mah. Haminne Çeþme Sok. No. 13

34696 Üsküdar / ÝSTANBUL

Tel : +90-216 522 09 00 (pbx) Fax : +90-216 443 98 39 http://book.zambak.com

09 00 (pbx) Fax : +90-216 443 98 39 http://book.zambak.com "Microsoft, MSN, Microsoft Expression Web, Microsoft

"Microsoft, MSN, Microsoft Expression Web, Microsoft Office, and Windows are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries."

Expression Web is a powerful Web development product that allows you to easily build high-quality, standards-compliant Web sites. Expression Web gives you the possibility to create and work with:

4

Standards-based Web sites

4

Sophisticated CSS-based layouts

4

Extensive CSS formatting and management

4

Rich data presentation

4

Powerful ASP.NET 2.0-based technology

Expression Web includes features that help ensure your output keeps within the World Wide Web Consortium (W3C) validity standards and that enable you to cleanly separate content from a presentation by taking advantage of the functionality and capabilities in cascading style sheets. Expression Web also has features that allow you to build components on your site that previously required significant hand coding or a code editing application such as Microsoft Visual Studio or Microsoft Visual Web Developer. With the power of ASP.NET 2.0, it is possible to display data from a database, create accounts, add robust form validation and dynamic navigation and use AJAX features. Expression Web is an easy transition from Microsoft Office FrontPage. It allows the full capability of editing and managing sites that were originally created by using FrontPage, but it ignores most FrontPage proprietary features. Expression Web can be purchased alone or as part of the Microsoft Expression Studio, which is an integrated group of applications. The features of Microsoft Expression Web book:

4

From Elementary to Advanced: The chapters are sorted according to difficulty levels.

4

Project Based: There is one project for each chapter. The subjects are explained for these projects. The project is completed at the end of the chapter.

4

Step by Step: The project is explained step by step. The menu commands in the steps are highlighted in orange to emphasize them.

4

Screen Images: The subject explanations become more rich with using screen images making the subject richer and prevent the readers from being lost in the subject.

4

The Text Boxes: Extra information related to the subjects is given in the text boxes located at the sides of the pages.

4

Project: At the end of each chapter, a project should be prepared to make more practice. The recommended projects topics and required features for the projects are given.

4

Questions: You can measure your knowledge level with multiple-choice questions at the end of each chapter.

4

CD: The of this book is supplied by CD. There are 4 sections on the CD.

w

Web Sites – It contains the complete web sites used in the chapters.

w

Source Metarials – It contains the digital content required to prepare the web sites, such as text, pictures and other files.

w

Video Tutorials – It contains the videos that teach the subjects visually.

w

Quiz – It contains the multiple-choice questions at the end of each chapter.

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 Some features in Expression Web Expression Web At First Glance

 

.22

 

.

.

.

.

.

.

.

.22

 

.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

. What to Do Before Publishing

.

. Transferring Web Pages to the Web Server .35

.

.33

.33

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Project

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.37

Questions

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.38

3.

BUILDING YOUR WEB SITE FROM SCRATCH

 

Creating an Empty Web Site

.

.

.

.

.

.

.

.

.

.

.

.

.

.40

Organizing a Web Site Adding a New Page

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.40

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.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

. Creating Hyperlinks on Different Parts

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.45

of the Picture – Creating an Image Map

 

.46

Creating an E-mail Link Creating a Link within a Web Page - Bookmark

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.47

.

.

.

.

.

.

.

.

.

.

.

.48

Modifying Hyperlinks Editing Hyperlinks Changing Hyperlink Colors

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.49

.49

 

.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 Adding Rows or Columns Deleting Rows or Columns

.

.

.

.

.

.59

 

.59

.60

Defining Borders

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.60

Adding Background Color or Picture Defining Cell Padding and Cell Spacing

 

.61

.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

Cropping a Picture

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.64

.66

. Including a Text Alternative Saving an Attached Image

 

.

.

.

.

.

.

.

.

.

.

.

.

.67

 

.

.

.

.

.

.

.

.

.

.

.

.

.

.68

Project

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.69

Questions

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.70

5. ENHANCING YOUR WEB SITE

 

Cascading Style Sheets

.72

CSS Uses

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.72

External Style Sheet Embedded Style Sheet

 

.72

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.72

Inline Styles

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.73

CSS Types

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.73

. Class-Based Styles

ID-based Styles

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.73

.77

Tag-Based Styles

. Inserting a Flash Object

.

. Working with Multimedia

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.80

.82

.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 Attaching a Dynamic Web Template

.

.

.

.

.

.

.96

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

. Flashing Status Bar Page Password Protection

Greetings

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.