ZAMBAK_IT_ExpressionWeb2
.pdf
M O D U L A R S Y S T E M
MICROSOFT EXPRESSION WEB
Mesut AYAN
h t t p : / / b o o k . z a m b a k . c o m
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 without the prior written permission of the publisher.
Digital Assembly
Zambak Typesetting & Design
Page Design
Edip TÜRK
Proofreader
Andy MARTIN
Publisher
Zambak Basým Yayýn Eðitim ve Turizm Ýþletmeleri Sanayi Ticaret A.Þ.
Printed by
Çaðlayan A.Þ. Sarnýç Yolu Üzeri No:7
Gaziemir / Izmir, October 2008
Tel: +90-0-232-252 22 85
+90-0-232-522-20-96-97
ISBN: 978-975-266-474-6
Printed in Turkey
DISTRIBUTION
ZAMBAK YAYINLARI Bulgurlu Mah. Haminne Çeþmesi Sok.
No. 20 34696 Üsküdar / Istanbul
_______________________
Tel.: +90-216 522 09 00 (pbx)
Fax: +90-216 443 98 39 http://book.zambak.com
"Microsoft, MSN, Microsoft Expression Web, 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:
Standards-based Web sites
Sophisticated CSS-based layouts
Extensive CSS formatting and management
Rich data presentation
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:
From Elementary to Advanced: The chapters are sorted according to difficulty levels.
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.
Step by Step: The project is explained step by step. The menu commands in the steps are highlit in orange to emphasize them.
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.
The Text Boxes: Extra information related to the subjects is given in the text boxes located at the sides of the pages.
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.
Questions: You can measure your knowledge level with multiple-choice questions at the end of each chapter.
CD: The of this book is supplied by CD. There are 4 sections on the CD.
Web Sites – It contains the complete web sites used in the chapters.
Source Metarials – It contains the digital content required to prepare the web sites, such as text, pictures and other files.
Video Tutorials – It contains the videos that teach the subjects visually.
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 . . . . . . . . . . . . . . . . . . . . . . .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
Internet
8Chapter 1
Introduction
The World Wide Web (WWW) is an Internet-based computer network that allows people at one computer to access information stored on another. People connect to these other computers so they can look at Web sites - which are groups of documents that present information.
A single document in a Web site is often called a Web page. These Web site documents are stored on high-powered computers called Servers. One server can store thousands of documents for many different Web sites. When you want to look at a particular Web site, your computer connects to
a server and receives the documents through the Internet.
What is Expression Web?
Expression Web is a powerful Web development product that allows you to easily build high-quality, standards-compliant Web sites. Cascading Style Sheets (CSS), Dynamic Web Templates (DWT), and ASP.NET Master Pages are the foundation for creating and managing your Website in Expression Web.
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 gives you the possibility to create and work with:
Standards-based Web sites
Sophisticated CSS-based layouts
Extensive CSS formatting and management
Rich data presentation
Powerful ASP.NET 2.0-based technology
What is HTML?
HTML, Hyper Text Markup Language is the language or code that Web browsers use to present Web content. An HTML file is a text file containing small markup tags that tell the Web browser how to display the page such as <p> to indicate the start of a paragraph, and </p> to indicate the end of a paragraph. HTML documents are often referred to as "Web pages". An HTML file can be created using a simple text editor such as Notepad and the file extension must be .htm or html.
This chapter covers some basic HTML tags only, but it will be enough to create simple pages and to understand complex ones. You will be able to design and create more professional Web pages and sites after learning Expression Web.
Start a Web browser such as Internet Explorer.
Type http://www.microsoft.com/expression/products/overview.aspx?key=web in the address bar and press Enter key. You will get the following view.
You can not see the HTML code, but you can see the HTML code result.
A Web page
Select View>Source and you will see the code transferred to your computer.
A Web page code
Internet Explorer retrieves code, pictures and other multimedia files and shows them as Web page visually in a neat design.
In this chapter you will create a Web page about Famous Quotes.
Basics of Web Design |
9 |
|
HTML Coding
Basic Tags
You can create HTML files using the Notepad program.
Start the Notepad program.
Type the given text.
Create a new folder and type a name, quotes.
Save the file in the quotes folder giving a name with the extension .html, default.html.
Open this file in your Web browser by selecting File>Open and specifying its location.
Your browser now has the following view:
The <meta> element is used in the head section and provides information such as descriptions and keywords about your page for search engines and refresh rates.
Define keywords for search engines
<meta name="keywords" content="good
words, quotes, good sayings, quotations" />
Redirect page after 5 seconds
<meta http-equiv="refresh” content =”5;
URL=http://www.microsoft.com”>
|
Preview in Internet Explorer |
|
|
Now have a deeper look at the code tags. |
|
|
|
|
<html>....</html> |
These tags tell your browser the start and finish of an HTML document. |
|
|
|
|
<head>....</head> |
The header information is written. The tags such as <link>, <meta>, <script>, |
|
<style>, <title> and <base> can be used inside the head tags. |
||
|
||
|
|
|
<body>....</body> |
The text that will be displayed in your browser. |
|
|
|
|
<title>....</title> |
The title that will be displayed in your browser's caption. |
|
|
|
10 Chapter 1