You are on page 1of 160

M O D U L A R

S Y S T E M

MICROSOFT EXPRESSION WEB 2

Mesut AYAN

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

"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.

. . . . . . . . . . . . . . . . . . . . . . . . . . .48 Modifying Hyperlinks . . . . . . . . . . . . . . . . .41 Deleting a Page . . . . . . . . . . . . . . . . . . . . . .10 Text Formatting . . . . . . . .22 Expression Web At First Glance .8 What is Expression Web? . . . . . . . .43 Turning a Picture into a Hyperlink . . . . . . . . . . . .58 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .54 Laying Out a Web Page with Tables . . . . . . . . . . . .54 Inserting Interactive Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . LAYING OUT WEB PAGES WITH TABLES Table Uses . . . . . . . . . . .33 Transferring Web Pages to the Web Server . . . . . .52 4. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .19 Questions . . . . . . . . . . . . . .22 Some features in Expression Web . . . . . . . . . .49 Editing Hyperlinks . . . . . .38 3. . .20 2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .56 Creating a Table . . . . . .25 Modifying Web Site Content . . . . . . . . . . . .28 Adding Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .42 Creating a Link to Another Page in the Web Site . . . .31 Inserting a Background Picture . . . . . . . .45 Creating Hyperlinks on Different Parts of the Picture – Creating an Image Map . . . . . .49 Changing Hyperlink Colors . . . . . . . . . . . . . BASICS OF WEB DESIGN Introduction . . . . . . . . . . . . . . . . .10 Basic Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . .8 What is HTML? . . . . . . . . . . . . . . . .14 Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .30 Modifying Page Background . .33 What to Do Before Publishing . . . . . . . . . . . . . . . . . .43 Creating a Link to a File . .16 Tables . . . . . . YOUR FIRST WEB SITE General Overview . .16 Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1. . . . . . . . . . . . . . .31 Changing Background Text and Color . . . . . . .37 Questions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11 Horizontal Line . . . . . . . .15 Changing Hyperlink Colors . . . . . . . . . . . . . . . .35 Project . . . . . . .41 Renaming a Page . . .24 Making a Web Site Plan . . . . . . . . . . . . . . . . .40 Adding a New Page . . . . . . . . . . . . . . . . . .51 Questions . . . . . .23 Create a Web Site Using Templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .47 Creating a Link within a Web Page . . . . . . . . . . . . . . . . . . . . . . . .31 Closing and Opening a Web site . . . . . . . . . . . . . . . . . . . . . . . . . . . .33 Publishing a Web Site . .46 Creating an E-mail Link . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . BUILDING YOUR WEB SITE FROM SCRATCH Creating an Empty Web Site . . . . . . . . . . . . . . . . . . .13 Background .41 Creating Links . . . . . .42 Creating a Link to a Web Address . . . . . .44 Auto Thumbnail . . . . . . . . .28 Inserting Pictures . . . . . . . . . . . . . . . . . . . . . . . . . . . .13 Images . . . . . . . . . . . . . . . . . . . . . . . . . . . .50 Project . . . .8 HTML Coding . . . .29 Resizing Pictures .40 Organizing a Web Site . . . . . . . .Bookmark . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .72 External Style Sheet . . . . . . . . .111 Sorting . .72 CSS Uses . . . . . . . . . . . . . .62 Aligning Objects in a Cell . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .119 Questions .114 Conditional Formatting . . . . . . . . . . . . . . . . .73 CSS Types . . . . . . . . . . .110 Adding XML Data to the Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .96 Attaching a Dynamic Web Template to the Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .106 Using Java Script Codes in Expression Web . . . . . .62 Merging Cells . . . . .82 Inserting a Flash Object . . .73 Class-Based Styles . .61 Formatting a Cell . . . . . . . . . .66 Including a Text Alternative . . . . . . . . . . . . .113 Changing the Layout . . .107 Greetings . .108 XML . . . . . .86 Using Frames . . . . . . . . . . . .93 Questions . . . . . . . . .60 Adding Background Color or Picture . . . . . . . . . . . . .77 Tag-Based Styles . . . . . . . .64 Checking Image Size and Speed . .67 Saving an Attached Image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . CREATING A DYNAMIC WEB SITE FOUNDATION Creating a Dynamic Web Site Foundation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .72 Embedded Style Sheet .64 Cropping a Picture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Formatting a Table . . . . . . . . . . . . . . .98 Detaching Files from a Dynamic Web Template . . . . . . . . . . . . . . . . . . . . . . . .94 6. . . . . . . .69 Questions . . . . . . .103 Open a Browser Window . . . . . . . . . . . . . . . . . . . . . . . .96 Creating a Dynamic Web Template . . .70 5. . . . . . . .122 Create a Master Page Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .59 Deleting Rows or Columns . . . . . . . . . . .112 Filtering . . . . . . . . . . . . . . . . . . . . . . . . . . . .63 Table AutoFormat . . . . .107 Flashing Status Bar .64 Modifying a Picture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .105 Jump Menu . . . . . . . . . . . . . .72 Inline Styles . . . . . . . . . . . . . . . . . . . .61 AutoFit to Contents . . . . . . . . . . . . . . . . . . . . . .59 Adding Rows or Columns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .73 ID-based Styles .110 Building an XML file . . . . . . . . . . .100 Applying a Behavior to a Layer . . . . . . . . . . . . . . . . .61 Defining Cell Padding and Cell Spacing . . . . . . . . . . . . . . . . . . . . . . . . . .62 Splitting Cells . . . .68 Project . . . . . . . . . . . . . . . . . . . . . . . .100 Adding a Layer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .84 Page Transition . . . . . . . . .59 Changing Table Size and Alignment . . . . . . . . . . . . . . . . . . . . . . .82 Inserting Page Background Sound . . . . . . . . . . . . . . . . . .108 Page Password Protection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .60 Defining Borders . . .111 Formatting the Data .103 Swap Image . . . . . . . . . . . . . . .87 Project . .120 7. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .63 A Table within a Table – Nested Tables . . . . . . . . . . . . ENHANCING YOUR WEB SITE Cascading Style Sheets . . . .80 Working with Multimedia . .122 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .117 Project . . IMPROVING INTERACTIVITY Dynamic Web Templates . . .83 Inserting a Video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .99 Layers and Behaviors . . . . . . . . . .102 Some Behavior Examples . . . . . . . . . . . . . . . . .

. . .145 Creating a New User Page . . . . . . . . . . . . . . . . .144 Creating Users . . .148 Searching in the Database .141 Uploading Pictures . . . . .128 Creating a Connection Between a Database and a Web Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .154 . . . . . . . . . . . . . . . . . . .127 Create a Database . . . . . . . . . . . . .130 Updating Your Web Site Online . . . . . . . . . . . . . . . . . . . . . . . .152 HTML Color Reference . . . . . . . . . . . . . .148 ANSWER KEY . . . . . . . . . . . . . . . . . . . . . . . . . . . .126 Create Pages From a Master . . . . . . . . . . . . . . . . . . . . . . . . . .129 Displaying Data from a Database . . . . . . . .153 INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .145 Creating a Login Page . . . . .145 Securing the Links with a Login Page . . . .Creating Styles . . . . . . . .146 To Allow Access to Particular User Only and Deny Everyone Else . . . . . . . . . . . . . . . . . . . . .

.

NET 2. and </p> to indicate the end of a paragraph.aspx?key=web in the address bar and press Enter key.which are groups of documents that present information. This chapter covers some basic HTML tags only. Cascading Style Sheets (CSS). An HTML file can be created using a simple text editor such as Notepad and the file extension must be . Dynamic Web Templates (DWT).0-based technology What is HTML? HTML. standards-compliant Web sites.com/expression/products/overview. 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.htm or html.microsoft. 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 . Internet What is Expression Web? Expression Web is a powerful Web development product that allows you to easily build high-quality. You can not see the HTML code. People connect to these other computers so they can look at Web sites .  Start a Web browser such as Internet Explorer.NET Master Pages are the foundation for creating and managing your Website in Expression Web. One server can store thousands of documents for many different Web sites. A single document in a Web site is often called a Web page. your computer connects to a server and receives the documents through the Internet. Hyper Text Markup Language is the language or code that Web browsers use to present Web content. Expression Web is an easy transition from Microsoft Office FrontPage. HTML documents are often referred to as "Web pages". but you can see the HTML code result. but it will be enough to create simple pages and to understand complex ones. but it ignores most FrontPage proprietary features. You will get the following view. When you want to look at a particular Web site. It allows the full capability of editing and managing sites that were originally created by using FrontPage. 8 Chapter 1 . and ASP . These Web site documents are stored on high-powered computers called Servers. You will be able to design and create more professional Web pages and sites after learning Expression Web.Introduction The World Wide Web (WWW) is an Internet-based computer network that allows people at one computer to access information stored on another.  Type http://www.

Basics of Web Design 9 . A Web page code Internet Explorer retrieves code.A Web page  Select View>Source and you will see the code transferred to your computer. 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.

.</title> These tags tell your browser the start and finish of an HTML document. Start the Notepad program. Save the file in the quotes folder giving a name with the extension ..</body> <title>..com”> Preview in Internet Explorer Now have a deeper look at the code tags.. <meta>. Type the given text. The tags such as <link>. URL=http://www. 10 Chapter 1 .html. <title> and <base> can be used inside the head tags.  Open this file in your Web browser by selecting File>Open and specifying its location.</head> <body>. Define keywords for search engines <meta name="keywords" content="good words.html. The header information is written. <style>.. quotations" /> Redirect page after 5 seconds <meta http-equiv="refresh” content =”5. The text that will be displayed in your browser. 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. quotes. <script>. The title that will be displayed in your browser's caption. Create a new folder and type a name..... good sayings. <html>. quotes.</html> <head>.. default...HTML Coding Basic Tags You can create HTML files using the Notepad program.microsoft.

underline text sequentially. which can help you when you edit it later. <h6> defines the smallest heading. Comments Comments are used to explain your code. Paragraphs are defined with the <p> tag..<h6> <p>. italic and.This is a comment --> Preview in Internet Explorer You need to use tags to give formatting.<i>.Text Formatting  Write a text in the body as follows: <body> Famous Quotes Imagination is more important than knowledge..</i>...<u>. they are displayed on the same line in the browser. center or right using the following format: <p align= "left"> . <p align= "right"> Line Break: The <br> tag is used when you want to end a line. <h1> defines the largest heading. HTML automatically adds an extra blank line before and after a paragraph.</p> <br> <center>…</center> <b>.. It defines bold. <p align= "center"> .. HTML automatically adds an extra blank line before and after a heading.. Headings are defined with the <h1> to <h6> tags.</b>.. It has no closing tag. <!-... <h1>.</u> Formatting HTML tags Basics of Web Design 11 . It centers the text. You can align a paragraph to the left. Albert Einstein </body> Although you write the text on different lines.

• Add font tag to the sentence.<br> …<i>Albert Einstein</i><p> Preview – Text formatting tabs If you want to change font.Now write the following code and see the result in the browser. you can use <Font> tag: <font face="…" size="…" color="…">text</font> The size attribute can be set as an absolute value from 1 to 7 or as a relative value using the "+" or "-" sign. and font color. font size. HTML code with text formatting tags <center><h2>Famous Quotes</h2></center> <p><b>Imagination</b>… <u>knowledge</u>. <font face="arial" size="4" color="crimson"><p><b>Imagination</b> is more important than <u>knowledge</u>.</font> 12 Chapter 1 . Normal text is size 3.

x2  Save the page and see the result in the browser.  Change the <body> tag as follows: <body bgcolor="lightyellow"> You can also change the text color of the page <body bgcolor="lightyellow" text=”blue”> Preview – Background color Basics of Web Design 13 . The basic syntax for a horizontal line: <hr>  Add a horizontal line after the Heading. Preview – Horizontal line Background The <body> tag has two attributes bgcolor and background that modify the background. <center><h1>Famous Quotes</h1></center> <hr> &nbsp &copy &lt &gt &amp H<sub>2</sub>O x<sup>2</sup> .H20 .Preview – Font tag Some special characters to use in HTML codes: Horizontal Line A horizontal line is a great way to separate your Web page into different sections and add visual borders. The bgcolor attribute specifies a background color for an HTML page.space -© -< -> -& . The background can be a color or an image.

The syntax of adding an image: <img src=".. Images Images are defined with the <img> tag. The border attribute is used to change the border size by typing a number value. Preview – An image with message 14 Chapter 1 . alt and border attributes.gif"> Preview – Background picture The browser window will be tiled with the background picture. The alt attribute is used to define an "alternate text" that will be displayed either when the browser can not load images or when you hold your mouse a little on the picture. <body background= "back. Do not use large image files to avoid long delays while the image is downloaded. <img src="imagine. Pixel The information stored for a single grid point in the image. The complete image is a rectangular array of pixels." width="x" height="y" alt="…" border=x> The src attribute names the image file.  Just change the code as follows.  Add a picture after the horizontal line by specifying height. The width and height attributes specify the dimensions of the picture and help to speed the display of your Web page. otherwise the path to the picture must be specified..jpg" height="150" alt="Imagination is more important than knowledge" border="2"> Preview – An image When you hold your mouse a little on the picture.You may want to choose a background picture instead of plain color. the message appears. The background picture and the html file must be in the same folder.

jpg will be opened in a new window.jpg" target="_blank"><i>Albert Einstein</i></a> When you click the hyperlink Albert Einstein.Links The <a> (anchor) tag is used to create a link to another document such as a Web page. the document will be opened in a new browser window. a picture.  The target attribute can define where the linked document will be opened.htm"> <img src=" thank. a music file etc. Make a hyperlink of an e-mail address <a href=" mailto: info@zambak.com"> Click to send a mail> Make a hyperlink of an image <a href="friends. A hyperlink is usually blue and underlined. The syntax of creating a link: <a href="URL" target="…">Text to be displayed as a hyperlink</a>  The href attribute is used to address the document to link to. a picture. Basics of Web Design 15 . <a href="einstein. When you use it with "_blank" value.  Create a hyperlink to a picture with target attribute.  URL can be a Web address. a page inside the site.jpg" height="200"></a> Now have a deeper look at the code tags. a file or an email address. the picture einstein.

 Create a new page. data cells (with the <td> tag. and height attributes are used for the following table. alink – active link color  Add the following code to the body tag. table row).html">Seven advice of Mevlana Celalettin Rumi</a> When you click the hyperlink. A table is divided into rows (with the <tr> tag.html. table data). vlink – visited link color.html opens in the same window. A hyperlink A visited hyperlink Tables Tables are defined with the <table> tag.html page Changing Hyperlink Colors You can change hyperlink colors used on the page. and each row is divided into columns. by adding the following code: <a href="rumi.gif" link="#000080" vlink="#FF00FF" alink="#008000">  See the result in the browser. border="0" makes the border invisible <table border="1" width="750" height="300"> <tr> <td>picture of Rumi</td> <td> seven advices</td> </tr> </table> 16 Chapter 1 . rumi. <body background="back. link – link color. width. The border.  Create a hyperlink to the new page. Preview of rumi. the page rumi.

It will look like this in the browser: Preview – A table width of two columns bgcolor and background attributes can be used in the table tag to change the table background color or background picture. <table bgcolor=#ffd9b4 border="1" width="750" height="300"> <tr> <td><img src="rumi.gif" height="270" alt="Mevlana Celalettin Rumi" border="2"></td> <td><i><font face="arial" size="3" color="darkgreen"> In generosity and helping other be like a river<br> In compassion and grace be like a sun<br> In concealing other's faults be like night<br> In anger and fury be like dead<br> In modesty and humility be like earth<br> In tolerance be like a sea<br> Either exist as you are or be as you look </font></i></td> </tr> </table> Basics of Web Design 17 . <table bgcolor= #ffd9b4 border="1" width="750" height="300"> It changes table background. It is possible to add a picture inside the cell.

" height="." valign=".."> You are familiar with these attributes except align and valign. Align is used to align the text to the left.." width=".. 18 Chapter 1 .  Add align attribute to the cell.Now it will look in the browser as follows: You can also change the following attributes of the td tag. middle or bottom vertically.. right or center horizontally. <td bgcolor=". <td align="center"><i><font face="arial" size="3" color="darkgreen"> In generosity and helping other be like a river<br> In compassion and grace be like a sun<br> Save the page and see the result in the browser. the remaining parts of the Web pages given for this chapter." align="... Valign is used to align the text to the top." background=".

2. 6. Required features: 1. 4. 3. 7. 8. 5. Note: This project must be performed in the Notepad program.Subject: Famous Quotes in your language. Page title Horizontal line Heading Text formatting Pictures Background color or picture Hyperlinks Tables 1 3 2 7 7 4 6 5 8 Basics of Web Design 19 .

com.zambak. <a href="url" target="_self"> b. <font textcolor=. <a name="http://www. Ctrl= ".tr "> d. <a href="url" target="_blank"> e. You are going to change your Web site address. Explanation=”…” 9.tr">Zambak Publishing</a> b.tr "> c. Hyper Text Makeup Language d. How can you open a link in a new browser window? a.zambak. Alignment 20 Chapter 1 . <meta type=" description" index="mp3 music"> picture? a.. <a href="url" target="new"> d. Hyper Text Markup Language c.tr</a> c. <body bgcolor="yellow"> d. What is “td” used for in creating a table? b.zambak." c. <Meta HTTP-EQUIV="redirect" CONTENT="3. <Meta HTTP-EQUIV="expires" TIME="3.gif< /img > d. <body background="yellow"> 8.com. <background>yellow c.zambak.zambak. <Meta HTTP-EQUIV="refresh"CONTENT="3." e.com. Border 4.zambak. <Meta HTTP-EQUIV="expires" TIME="3. <meta type="keywords" index="mp3 music"> b. Rows d.tr "> image? a.> < /fontcolor> d.zambak.gif > e.> 2.URL =http://www. <meta name="keywords" index="mp3 music"> e.> < /font> b.URL =http://www..com.. <img>friends.zambak.com. <a href="url" target="_parent"> 7.com. <body color="yellow"> e.tr "> e. Web Page Creating Program e.com. <fontcolor=. Table delete c. Alt= ".zambak. <body backgroundcolor="yellow"> b.. What is the correct way to give color to the text? 3. Title= ". Hyperlinks and Text Markup Language b.HREF =http://www. <a >http://www.. <a href="http://www.com. How can you give a text description to a 10.. <font face=…> < /font> e.Questions 1.gif > b... <acronym>…< /acronym> d. URL=http://www. <meta name="keywords" content="mp3 music"> d. <image src="friends. What is the correct HTML for inserting an 5.zambak..tr"> b.gif" > a.tr"> Zambak Publishing </a> e." b. <meta name="description" content="mp3 music"> c..> < /font> c. a. a..com. <Meta HTTP-EQUIV="redirect" TIME="3.. <a href="url" new> c.com.tr"> Zambak Publishing a. after 3 seconds he will be redirected to the new address.tr"> Zambak Publishing </a> d. <font textcolor=. You want that your Web site will be found when a visitor writes "music" or "mp3" in search engines. What is the correct HTML for making a hyperlink? a. Hyperlink Text Markup Language 6. <a url="http://www.. What does HTML stand for? a. URL=http://www. <img href="friends.. <img url="friends. <font color=.gif" > c. <img src="friends. Data cells e. <a url="http://www. What is the correct HTML for adding a background color? a. that's why when a visitor writes your Web site address.

.

a wide variety of controls. data and publishing tools needed to create dynamic and sophisticated Web sites. Capture the power of ASP . Present data using XSLT. Get a visual overview of CSS rules with CSS management tools.NET 3. Some features in Expression Web • Standards-based Web sites Design sites to today's exacting standards with task panes and menus just where you need them and see results in better browser rendering and more relevant search engine indexing. even editing views on live XML data. Include.NET with easy drag-and-drop controls. filter and sort and style data from any XML source easily. and deploy Web pages with deep support for the newly released ASP .5 standard. • Rich data presentation Design customized views of industry-standard XML data using powerful drag-and-drop tools.NET 3-based technology Create. Separate design from content with Cascading Style Sheets. • PHP editing Open and edit PHP pages directly in Expression Web 2 and apply the full range of standards-based design tools to PHP . Design high-quality Web sites and applications with a professional toolset and design surface. • Powerful ASP . 22 Chapter 2 .General Overview Expression Web provides flexibility and functionality to help you build better Web sites. logins and database integration. calendars. including navigation. authoring. It includes the professional design. Make your own CSS designs from a host of DIV-based templates. edit. and see how your data will look within your CSS site design. • Sophisticated CSS-based layouts and templates Get up to speed fast with professionally designed templates that are fully XHTML and CSS compliant. • Extensive CSS formatting and management Generate CSS styles automatically or manually for absolute control over the type of rule created and its precise location.

Closes the web page Quick Tag Selector Bar shows HTML tags in nested order. page size and etc. for the Close Toolbars contain buttons that let you access common Expression Web commands easily. download speed.Expression Web At First Glance Title bar displays the name of the Web site Help Web page name The name of a current page Switch pages using Ctrl+Tab shows help written text. Task panes display and organize common Expression Web tasks so you can access them quickly Folder List organizes files and folders Editing window where you edit web pages Page Views Design: to design a web site Code: to show the written code for a web page Split: to see the Design and Code together Switch tabs using Ctrl+PageUp Scroll Bars Scroll to another part of the page Status Bar shows the information about hyperlinks. Your Fırst Web Site 23 .

Otherwise when you take this site to another computer or the Internet. folders. For example if you want to create a web site about yourself. you should select ‘Personal Web Site’ template. In this chapter you will create a web site about Mevlana Celaleddin Rumi. then select ‘Organization’ or ‘Small Business’. Each site relies on a Dynamic Web Template to control page layout and presentation and change site-wide items. Expression Web adds new pages. Works. containing the pages such as Life. To create a Personal Web Site:  Select File>New and then click Web Site. in one place and have them automatically updated on all your pages. put all files. The New dialog box opens. you'll find valid HTML code and layouts that use cascading style sheets rather than tables for positioning. After completing a web site with a template. Each template is a framework that you can customize by adding and removing text and making other changes. Important When you create a web site. videos etc. and you should select which one you need.  Select Templates>Personal 5 on the Web Site tab. Expression Web does most of the structural work for you and you can spend your efforts customizing your site. if it is about your company. you simply customize the template’s content and then replace the site’s other pages with your own content. Legacy. pictures and objects to the folder automatically. sounds. in the same folder. In these site templates. pictures. such as the masthead and navigation links. ensuring uniform display in as many Web browsers as possible. and Links. Expression Web contains many templates. Selecting a template 24 Chapter 2 . you’ll have problems in finding your files.Create a Web Site Using Templates You can develop a complete web site more quickly using Templates.

You can specify another location for your web site using the Browse button. Making a Web Site Plan You introduce your visitors with a home page. Default. If you cannot see the Folder List.htm etc.html’.html’ are web site pages such as about_me. Rumi.  Click the Preview button to see the web site in your browser and click the links to the other pages within the site to examine them. Other areas of the page. such as the site’s name and navigation bar. you need to make a web site plan and design and decide which parts and pages your web site will contain. the initial page is ‘default.dwt. When the page opens. select View -Folder List or press Alt+F1 A complete web site has just been created for you. cannot be clicked or changed because these areas are created through the template. You can see all files and folders in the ‘Folder List’. All other pages are connected to the default.htm.html is the home page. delete or rename a page Site home page Your Fırst Web Site 25 .htm page to open the site’s home page. The home page gives visitors an impression of your site's style. It is a good spot to let visitors know the purpose of the Web site on the home page. master. double-click the default. Folder List shows Web site folders and files. Before you create a web site. some areas can be clicked. content and sidebar. The default location is My Web Sites folder in My Documents. You can add a new or existing page.  Type a folder name for your web site. which means their contents can be replaced.  Click OK to complete your web site. The files with the extension ‘. The home page. You can make any changes to the template itself by directly editing the Dynamic Web Template. contact.  In the Folder List.

Creating a new HTML page 26 Chapter 2 . Never rename a folder or file name in Windows Explorer since the hyperlinks will be broken. Deleting a folder  Click the Yes button to confirm delete.  Click General>HTML on the Page tab and click OK to complete. It warns you that you are sure to delete or not. You are going to delete the photo_gallery folder because your web site will not have a photo gallery. To delete a folder/page: You can delete a folder or a file.To rename a folder/page:  Right-click the folder or page and select Rename in the Folder List. How to change page size You can modify web page size by selecting View>Page Size and choose a page size or Click the Page Size section on the Status Bar and choose a page size. When you delete a folder. When you rename a file in the Folder List. ‘contact’ to ‘works. it also deletes the files containing in it. ‘about_ me’ to ‘life’. The updated hyperlinks  Right click the folder which you want to delete and select the Delete option. Renaming a folder  Click the Yes button to update the hyperlinks. ‘resume’ to ‘legacy’.  Rename the folders and pages. or from the menu select File>New>Page. New the dialog box opens. To add a page:  Right-click in the Folder List and select New>HTML. it asks you to update the given hyperlinks to those pages.

To add a template-based page:  Right click the page whose basic elements you want to use and select New From Existing Page from the dropdown menu. The default location for saving a file is My Document/My Web sites Create new folder A web page file extension is usually HTM or HTML.htm and when you save the web page. A new page's codes To save a page:  Select File>Save (Ctrl+S).  Click the Change title button to give a new title for the web page. The Save As dialog box opens. Its default name is Untitled_1. Another way to set the Page Title  Right-click on the page and select Page Properties  Type your title in the Title text box on the General tab. Typing a title name Your Fırst Web Site 27 . Hyper Text Markup Language Saving a page  Type a name for the web page in the File name box.  Change all pages’ titles. you can give it a different name. or click Save button on the common toolbar. Type the new title in the Set Page Title dialog box.The default name given to the new web page And now you have just created a blank web page.

 Click the Save button.  Select and replace the site name and navigation labels. These elements are used by all pages and the changes are applied to all pages.  Double click the master.The title of a page is displayed in the Web browser's title bar. The * sign in the pages’ tab shows that the page has been modified and has not been saved. master. It is also used by search engines. Modifying Web Site Content Adding Data You can add your data in all pages by deleting the existing text and typing the new one.  Press Ctrl+S to save the template.dwt file in the Folder List. You can click and change the contents after the template page opens.html to poems.dwt file in the Folder List  Select the Photo Gallery navigation label and press the Del key to delete. The web page file name is created and its name is changed from Untitled_1. A warning dialog box for updating files  Click Yes and then click the Close button. A dialog box opens and warns you that the files attached to the template will be updated. The changes in the template are applied to the pages. 28 Chapter 2 .html.

 Select the text. and images on all pages as you need. Headings range in size from 1 (largest) to 6 (smallest). and pick one of the six heading sizes. You can replace headings.  Type your text into the Heading 2 on the default page. pressing the Enter key starts a new paragraph (paragraph break). open the Style pull-down menu. You can change its heading style by opening the Style pulldown menu and picking one of the six heading sizes. Typing an alternate text for picture Your Fırst Web Site 29 . Inserting Pictures  Select an image by clicking on it. You can select a heading or a paragraph and type your own.  Select Insert>Picture>From File and navigate to the image you want to use and click Insert. Important For arranging line spacing.  Select the Center button on the common toolbar to place it at the center. The template’s styling is applied automatically. Select File>Save All to save all pages. pressing the Shift+Enter keys starts a new line (line break). text. Selecting an image Choosing a picture to insert The Accessibility Properties dialog box opens.

The Picture Properties dialog box opens. then you need to use GIF format. Keeping pressed Shift key while dragging will constrain the proportions of the picture. Add a brief description to the Alternate text field and click OK. 30 Chapter 2 .  Click the Appearance tab and specify a size value for the Width of the picture in the Size section.  Click and hold your mouse button. you may want to make its size smaller. Specifying size of the picture The Keep aspect ratio keeps the height and width of your picture in proportion. If you want a transparent image or an animated image. or  Double click the picture. and PNG. then drag your mouse to change the size of the image. JPEG. Resizing Pictures All graphic images appearing in web sites usually come in two file formats: GIF. The replaced picture If the size of the inserted picture is large. Although you change only the width of the picture.  You will see sizing dots at the corners and sides of the image. The pointer will turn into a twoheaded arrow. Move your mouse pointer over the right bottom dot. Your image replaces the original image. the height of the picture will also be changed since the Keep aspect ratio option is checked. To resize the picture  Select the image by clicking on it. Expression Web can convert many different types of graphic images into either of these file types.

Opening Page Properties dialog box changing background color Inserting a Background Picture You can put a picture at the background of the web page. The Page Properties dialog box opens. right click on the page and select Page Properties. Choose a small picture for your background to keep the page size smaller. The background will be filled with the selected picture.Modifying the Page Background Changing Background Text and Color To change background and text color:  Open the master. Make it a watermark The Background picture will be fixed although you scroll down the page Inserting a background picture  Select the check box for the Background picture.  Click the Browse button and choose a picture to put at the background of the web page.  Click the Formatting tab and choose a color for background and text in Colors section. Your Fırst Web Site 31 .  Click OK to finish. To put a background picture:  Click the Formatting tab on the Page Properties dialog box.dwt file and in the Design view.

The background picture has been changed and applied to all pages.  Press the Ctrl+S keys to save your changes. Saving an embedded image file Expression Web added the inserted picture to your site. Preview in browser 32 Chapter 2 . The Save Embedded Files dialog box opens.  Select File>Preview in Browser and choose a browser with its size or press the F12 key to preview the page. You can specify the location where to save by using Change Folder button.

What to Do Before Publishing You have to make sure that your web site is ready for publishing by checking for broken hyperlinks. and checking the status of your files in the Reports view. verifying that the pages look the way you want them to and testing the web site to see that everything works. navigating through the site. and the password. The best way to ensure your web is ready is by previewing it in a Web browser. Selecting a site to open Publishing a Web Site After completing your web site. Web Presence Provider.Closing and Opening a Web site After finishing your work. Web hosting company etc. you may want to publish it. You must gather the following information from the Web host to complete the Web publishing process: The path for publishing. Click a file or files in the Folder List. the login name.  Run spell check over the entire site. You can publish your web site by using Expression Web’s Publish function or a third-party FTP program. To open your web site:  Select File>Open Site and select your web site folder and click the Open button. select Tools>Spelling and then Spelling (F7) Choosing a spelling option Your Fırst Web Site 33 . you can close the web site by selecting File>Close Site. Publishing is the process of copying your Web site from your computer that you created it on to a Web server accessible to the world. This server is usually called Internet Service Provider.

You can know how big your Web site is. – Slow pages. double-click the file listed. Files that have no hyperlinks to them from any of your pages. – Broken hyperlinks. Hyperlinks pointing to unavailable target files. Choose your option to check spelling of the selected page(s) or entire Web site and click the Start button. Some of Expression Web site reports. You can use these reports to identify and fix many common problems. The Site Summary report gives you a quick overview of the statistics available about your Web site. To see and make changes. Reports can give you detailed information about the performance of your Web site. All files in the current Web site. Each underlined item has a more detailed report. Pages whose download speed exceeds a certain amount of time. – All files. – Unlinked files. Files listed here may be orphaned files that you can delete from your Web site. Web Site Report Summary 34 Chapter 2 . how many files it contains. Adding a word to the dictionary  Check for problems in your web site by selecting Site>Reports>Site Summary. broken hyperlinks and pages that load too slowly. Found misspelled words It checks spelling and finds misspelled words. You can ignore that word or change it to one of the suggestions or add it to the dictionary.

 Type the web address where the site will be published in the Remote Web site location field and click OK. Choosing a publish method  Choose the method that will be used to publish files to the server. to publish all pages. the address will begin with ftp:// instead. Publishing tab Publishing tab You can choose to publish changed pages only. and synchronize Web site data. and much more. extra white space. When using FTP . or whether or not to publish any subsites. If this is the first time that the site has been published. The Remote Web Site Properties dialog box opens. Your Fırst Web Site 35 . you will be asked whether a Web site should be created at that location. View all hyperlinks by selecting Site>Hyperlinks. Web site hyperlinks  Preview the site on different screen resolutions and different browsers as much as possible. Transferring Web Pages to the Web Server  Open the site and select File>Publish Site. You can repair hyperlinks. update information. Optimize HTML tab You can elect to remove comments. database information and categories by selecting Site>Recalculate Hyperlinks. click Yes.

You can choose to publish from your computer to your host (Local to remote). displaying a status bar which tracks its progress.The connection is created between the local web site and the remote web site. 36 Chapter 2 . the Status section shows the message "Last publish status: successful". Expression Web also reports any files that are found on the Web server but not in the folder on your computer.  Click the View your Remote Web site hyperlink to see the site on the Web server. type them in the Username and Password fields. As files are being published. Expression Web copies the files in your site to the Web server. When you are asked for your username and password. A publishing Web site window  Click the Publish Web site button to start publishing. When everything has been published correctly. from your web site back to your computer (Remote to local) or whether to Synchronize files between the two. and click OK.

Subject: Build a personal web site about one of the local popular writers in your region. Required features: 1. Modify Link Bar Modify Background picture 1 3 2 4 5 6 7 Your Fırst Web Site 37 . Personal Web Site template 4. Resized pictures 3. 6. Web Site Reports 2. Modify Web Site Content 7. Modify the Page Banner 5.

View>Reports>Broken hyperlinks b. b. View>Reports>Unlinked files d. Ctrl+L 3. Rich data presentation b. To give washout effect to a picture e. update information. Tools>Page Options 5. Wrapping style c. Select File>Page Setup and then Header. Press the Shift+Enter keys c. How can you change the text which will be shown on the title bar? a. Bulleted List b. Layout b. How can you know how big your Web site is? a. database information. d. Select File>Preview in the Browser c. To mark a text with water effect c. Tools>Site Settings>Navigation 38 Chapter 2 . Sophisticated CSS-based layouts and templates d. F5 d. Select the Heading Style from the Formatting toolbar. Directory List 7. ‘When you enter a value for either the Height or Width of a picture. Heading Style d. Insert>Hyperlink e. File>Publish Site c. b. Click the Preview button on the Page View Options. View>Reports>Site Summary b. Press the Shift+Tab keys 8. Press F12 key d. Select the Change title on the Save As dialog box. Ctrl+F1 c. Progressive passes 2. Expression Web automatically changes the value in the other box to preserve the original proportions’. Select View>Page 4. How can you start a new paragraph using keyboard? a. What is the ‘Make it a watermark’ option used for? a. Tools>Recalculate Hyperlinks c. Press the Tab key e. What cannot be used to preview your page? a. Click Preview button from the Standard toolbar. Definition e. Numbered List c. Powerful PHP-based technology 6. Ctrl+F b. c. To fix background picture on the page b. To give water effect to a text d. What keys can be used to view the Folder List? a. e. Keep aspect ratio e. Which command can be used to repair hyperlinks. Which one is explained in the above definition? a. Press the Ctrl+Enter keys b. e. What can be used to make titles? a. 10. Press the Enter key d. Extensive CSS formatting and management e. and categories? a. Tools>Site Settings e. Select Insert>Page Banner. File>Properties d. Which one is not a feature in Expression Web? a. Alt+F1 e.Questions 1. Standards-based Web sites c. Select the Page Title on the Formatting tab of Page Properties. Crop tool d. and synchronize the Web site data. To make a semitransparent picture 9.

.

 Right click in the Folder List and select New>Folder. To create an empty Web site:  Select File>New>Web site. In Expression Web. You can create Web site pages now. You have just created an empty Web site with the home page. In this chapter you will create a Web site about the Seven Wonders of the Ancient World. Creating a new folder  Type a name for the folder.  Click OK to complete creating an empty Web site. By default. One page Web site in General is selected. 40 Chapter 3 . you need to decide the purpose of the Web site and make a site plan containing a home page and other pages connected to the home page.  Specify the location and name of the site folder.Creating an Empty Web Site Before starting to build your site.html. images. default. You can create an images folder to collect Web site images. and press the Enter key. you can organize your Web site in the Folder List pane. Creating a one page Web site Organizing Web Site Now you can create other pages and folders in the Folder List.

You can rename the file names in the Folder List.  Click the Appearance tab and select which wrapping style you want. keeping the file extension . After inserting the picture 7wonders.  Double click the pages to open and modify them. give background colors to the pages. To align a picture to the left or right. Deleting a Page  Right click the file and select Delete or directly press the Delete key on the keyboard. You have completed building your Web site with pages. Another way to rename a page Select the page Creating a new HTML file and just click one time on it  Type the name of the new page. Give logical file names to remember the file contents later. If you think that one added page is unnecessary anymore. it will be necessary to align it to the left because a text should be written to the right side of the picture.  Click Yes to complete the deletion.jpg.html. Selecting a wrapping style for picture Buildin Your Web Site from Scratch 41 .  Double click on the picture to open Picture Properties. and type new name. Now fill in pages with text and pictures. Renaming a Page  Right click the file. The Confirm Delete dialog box opens.Adding a New Page  Right click in the Folder List and select New>HTML. select Rename (or press F2) and type a new file name. you can delete that page in the Folder List.

The expression "Surfing the Net" actually refers to the experience of jumping from one page to another using hyperlinks. To create a hyperlink to a page:  Select the text that you want to hyperlink.  Select Insert>Hyperlink or press the Ctrl+K keys. including a picture or multimedia file. The Insert Hyperlink dialog box opens. or to an e-mail address or program. You can create links (called hyperlinks) to make a connection between the pages. Selecting a page to hyperlink 42 Chapter 3 .  Click OK to complete the hyperlink.The picture is aligned to the left and the text is on the right side of the picture. Screen Tip If you want to show a text when you rest the mouse pointer over the hyperlink. Creating a Link to Another Page on the Web Site The home page should have the hyperlinks to the pages connected to it directly because each page should have hyperlinks to the child pages. click on the ScreenTip button and type a text to be displayed. You can use the Insert Hyperlink button on the standard toolbar or right click after selecting the word and select Hyperlink. To Hyperlink a Text Creating Links A hyperlink is a link from one Web page or file to another.  Select the page to which you want to hyperlink.

 Press Ctrl+K keys and choose a picture file in the Insert Hyperlink dialog box. The hyperlinks to pages Surfing will be more comfortable if you add a hyperlink from all pages to the Home page and the upper page (Parent page). When you click a hyperlink that is linked to a picture. you should see the following message. Creating a Link to a File You can create a hyperlink to a file such as a picture. when you move the mouse pointer onto the hyperlink. Selecting a picture to hyperlink Buildin Your Web Site from Scratch 43 . Creating a Link to a Web Address A Web address is also called URL which stands for Uniform Resource Locator. To Follow a Hyperlink Right click and select Follow Hyperlink It means this text has a hyperlink and if you want to open the destination page in the Design view.The hyperlinked text is underlined and blue.  Create hyperlinks to other pages in the same way. To create a hyperlink to a picture:  Select the text that you want to hyperlink. In the Design view. The Web address is converted automatically into a hyperlink.  Type a Web address and press the Enter key. a compressed file etc. click the hyperlink by holding down the Ctrl key. the picture opens in the browser.

 Select the page or picture file you want to link to and click OK. a larger version of the same picture opens separately.  Click the hyperlink and see that the picture opens in a new window. 44 Chapter 3 .To open a hyperlinked page or picture in a new window:  Click the Target Frame button.  Press the Ctrl+K keys. Selecting target frame The picture opened in a new window Turning a Picture into a Hyperlink You can use a graphic as a navigation button that links to another page in your site or you can link a thumbnail version of an image to a larger version of the same image. A small version of the picture can be prepared using Thumbnail. That’s why you can use small versions of the pictures and when the visitor clicks the picture. You want to put many pictures on your page. The Target Frame dialog box opens. _blank appears automatically in the Target setting.  Select New Window and click OK. To turn a picture into a hyperlink  Select the image by clicking on it. but you know that putting lots of picture on the same page makes your page’s size bigger and page speed slower. The Insert Hyperlink dialog box opens.  Press F12 to see the page in your browser.

The thumbnail is created. You can specify some properties of a thumbnail which will be created. When you click the thumbnail.To create a thumbnail:  Select the picture by clicking it. Auto Thumbnail You can create a thumbnail of a picture: Click the Auto Thumbnail button on the Picture toolbar.  Right click on the picture and select Auto Thumbnail. and then click the AutoThumbnail tab. Buildin Your Web Site from Scratch 45 .  Select Tools>Page Editor Options. To create a hyperlink to a compressed file: When you click a hyperlink that is linked to a compressed file. Changing the AutoThumbnail options You can change size and border of the thumbnail and give a beveled edge effect to it.  Select the text that you want to hyperlink. you are about to download the file. Selecting Auto Tumbnail A new file is created for the thumbnail version of the picture. the file created for the thumbnail will also be saved. The Insert Hyperlink dialog box opens. It has a blue border since it has a hyperlink. the larger version of the picture opens.  Press Ctrl+K keys. When you save the page.

To compress a file. These hyperlinks are called hotspots. WinZip etc. Working with smaller files means working with a faster internet.  Click any of the hotspot buttons (Rectangular. Compressed File A file is compressed to make the file smaller in size. and then click your new image map to check your linked hotspot.  Press F12 to see the page in your browser.  Select the name of the Web page you want to link to and click OK.Mouseover a picture 46 Chapter 3 .  Click the hyperlink. Select the compressed file and click OK. Downloading a file Creating Hyperlinks on Different Parts of the Picture – Creating an Image Map An image map is a single graphic that has several hyperlinked sections. you can use a program such as WinRar. Click the Open button to open the file or click the Save button to save the file. The Insert Hyperlink dialog box opens automatically after you outline the hotspot area. To add a hotspot to a picture:  Click the picture and select View>Toolbars>Pictures. you will see Run instead of Open.  Click the Preview button.A picture Preview . Choosing a hotspot Selecting an area Preview . The Picture Toolbar dialog box opens. The File Download dialog box opens. Circular or Polygonal) and select an area within the image This is the area where you want to create a hyperlink. If your file is an executable file.

 Select E-mail address in the Link to. Typing an e-mail address  Type an e-mail address in the E-mail address box and click OK to finish. and comments. The highlighted hotspots Creating an E‐mail Link An e-mail link allows the visitors to give feedback. The Insert Hyperlink dialog box opens. the word mailto will be added automatically before the e-mail address.  Click the Insert Hyperlink button on the common toolbar. To create an e-mail hyperlink  Select the text that you want to hyperlink. they can send you an e-mail message by writing in the launched e-mail pop-up box. A message window appears using your installed e-mail program.  Preview the page and click the e-mail hyperlink. When you start typing an e-mail address.You can use the highlight hotspots button to show highlights clearly. send questions. The installed e-mail program Buildin Your Web Site from Scratch 47 . Outlook. When visitors click your e-mail hyperlink.

Creating a Bookmark  The first step in making a bookmark is to select the destination section where you jump to. bookmarks. These sections are marked with bookmarks. This option is good when you have a long Web page with many different categories of information. Without bookmarks. there is some information about each wonder according to the list. There is a list of the seven wonders at the top of the page. the visitors may want to get back to where they started. You can also bookmark an index. a table of contents. For example. That’s why you should also bookmark the top of the page. you want to put all seven wonders on one page. The list of seven wonders Destination section First of all you need to create the destination sections. Then you can jump straight to any wonder by clicking its name. 48 Chapter 3 .Creating a Link within a Web Page ‐ Bookmark Hyperlinks are useful not only for jumping from one Web page to another but also for quickly sending visitors to another section of the same Web page. After the list. After jumping to the searched part. It will be a good way to bookmark the name of each wonder in a list at the top of the page.htm. you would have to scroll down the entire page searching for that part. SevenInOne. a subheading or anything else that helps to organize your Web site content.

 Select Place in This Document in Link to and select the bookmark. The bookmark has the following view.  Select the text to which you want to give a hyperlink.  Create other bookmarks and hyperlinks to them. The Bookmark dialog box opens. Typing a bookmark name  Click the Insert Hyperlink button on the common toolbar. The Insert Hyperlink dialog box opens.  Test your new bookmark in the Design view by holding down the CTRL key and clicking the new hyperlink. Select Insert>Bookmark or press the Ctrl+G keys. and click OK.  Right click the hyperlink and select Hyperlink Properties. it may be necessary to change the words it displays or the page to which it jumps.  Type a name for the bookmark in the Bookmark name box. Linking to a Bookmark You have created the bookmark. Modifying Hyperlinks Choose a bookmark to hyperlink Editing Hyperlinks After you create a hyperlink. Changing a hyperlink's options Buildin Your Web Site from Scratch 49 . now you need to link to it.

 Click the Formatting tab. If you use standard HTML attributes. select a different color for each hyperlink type and click OK Opening Page Properties Choosing hyperlinks colors Hyperlink Hovered Visited 50 Chapter 3 . click Remove Link and click OK. you can select four colors to use for a hyperlink.A hyperlink that has already been followed Hovered hyperlink – red – A hyperlink that the pointer is over To change hyperlink colors on a single Web page:  Right click on the page and select Page Properties.A hyperlink that has not been selected Active hyperlink – red .A hyperlink that is currently selected Visited hyperlink – purple . depending on its state: Hyperlink – blue . To remove a hyperlink:  In the Edit Hyperlink dialog box. You can choose the colors that a Web browser will use for displaying hyperlinks. Changing Hyperlink Colors Hyperlink text has a different color from the rest of the text so the visitors can identify it easily.You can change the type of link by changing your selection from the Link to section and edit the settings for the current selection and click OK.

Picture Create hyperlink .Hot spots 8. Change hyperlink colors 1 7 2 10 4 3 6 9 8 5 3 Buildin Your Web Site from Scratch 51 . Create a hyperlink . 2. Required features: Create hyperlink .Web address 7. 1.Email Create hyperlinks .Subject: Create a Web site from scratch about possible new 7 wonders 4. Create an empty Web site 6. Create bookmarks 10. Create hyperlinks . Thumbnail 9.Pages 3.File Create hyperlinks . 5.

Bookmark c. The compressed file is opened in a new window d. True b. or polygons. False 6. A Hotspot is formed by image maps. Text to display 3. Target Frame b. e.Questions 1. email: b. Which one is not a way to create a hyperlink? a. Style d. mailto: d. File>Properties>Formatting 10. The file directly starts running 5. e-mail: c. d. 52 Chapter 3 . Double click e. What key combination is used to open the Bookmark dialog box? a. Right click the hyperlink and select Remove Hyperlink. Click the Remove Hyperlink in the Edit Hyperlink dialog box. Which one in not True? a. Ctrl+click c. mail: 8. The hyperlinked sections of a picture are called hotspots. An image map is a graphic with one or more hot spots. Sihft+click d. Click the Remove Link in the Edit Hyperlink dialog box. mail: e. Where can you change hyperlink colors on the page? a. Tools>Application Options b. Alt+K 9. What happens when you click a hyperlink which is linked to a compressed file in a browser? a. Format>Background c. Click 4. Select Format>Hyperlink b. Select the hyperlink and select Format>Remove Formatting. Select Insert>Hyperlink c. c. 7. Right click and select Follow the hyperlink b. ‘A new file is created for the thumbnail version of the picture. Ctrl+G b. The files in the compressed file are shown b. Click the Insert Hyperlink button on the common toolbar 2. When you type an e-mail in the E-mail box while creating an e-mail hyperlink. d. Hot spots can be shaped as rectangles. what text will be added before the e-mail? a. e. Which one can be used if you want to show a text when you rest the mouse pointer over the hyperlink? a. The File Download dialog box opens c. Format>Page Transition d. b. Right click the hyperlink and select Remove Link. Right click and select Hyperlink e. Ctrl+K e. A text on a graphic can also be a hotspot.’ Is it True or False? a. ScreenTip e. circles. How can you remove a hyperlink? a. Alt+B d. The compressed file is opened in the same window e. b. Which ways can be used to follow a hyperlink in the Design view? (select two of them) a. c. Ctrl+B c. Tools>Page Editor Options e. Press the Ctrl+K keys d.

.

Keeping the same layout throughout the entire site gives you the possibility to come up with an overall design that is appropriate for all the pages. You can build the structure of the page using tables. Tables can firmly position text and images on the page and when the window is resized they will keep their places in the table. you can edit a Web page that contains layout tables and cells. To add a predefined layout table:  Create an empty web site and then build all web site pages. you need to consider in advance the various elements that will be placed in each page. well-organized web page by using tables for laying out a page. but you may still need to understand table layout if you're working with an older site and don't have time to bring it up to CSS standards. word processing programs etc. Creating a new Web site The created pages 54 Chapter 4 . However. for both Web page layout and data. Another usage of tables is to lay out text and images as a graphic design tool on your web page. CSS is no doubt the future and it will eventually replace table layout. Table-based layout is easier to master than CSS layout. On web pages. You can also create your own custom layout table by drawing tables and cells. because page-sized tables take longer to load than CSS-based layouts. layout tables are being replaced by CSS.Table Uses The traditional use of tables is to display information in columns and rows – similar to how they are used in other Microsoft Office programs: spreadsheets. tables can serve many functions:  Page layout  Displaying information in formatted tabular form  Adding background color and borders to blocks of text In this chapter you will create a web site about the Solar System and we will cover how to build and format tables. When you plan your web page layout. Laying Out a Web Page with Tables You can create an easy-to-read. Additionally. and also tables cannot be easily adjusted to accommodate small displays. You can use the predefined layout tables that are available in the Layout Tables and Cells task pane to help you get a quick start on a Web page. so you can get your site up much more quickly. You need to decide which page elements will be used and their locations on the page. such as cell phones.

 Insert your page elements into the cells. select Change Column Width and specify a value. The Layout Tables task pane opens. banner. Open the default page and select Table>Layout Tables. interactive buttons and change the background color. Navigation will be created by using interactive buttons.  Prepare all pages in the same way. Navigation Buttons Web site content Laying Out Web Pages With T ables 55 . Choosing a table layout  Click the Table layout which you want to use for your page. logo. Specify 130 for the column with of the navigation buttons To edit the table layout Click on the arrow. Specifying the table layout size Logo Banner The selected table layout is applied to the page.

When you create an Interactive Button.  Select Insert>Interactive Button. You can choose from many ready-made buttons. and pressed states. it prompts you to save the button image files. and then buttons are automatically created for normal. or to an e-mail address. Expression Web creates the image files for states that make up the button. 56 Chapter 4 . size. When you save your Web pages. You can link it to another page in the current Web site. specify the font style.  Click OK and preview the page to see the effect. click a button style in the Buttons list. to a site on the World Wide Web. including the original. specify the text you want on each button. The Interactive Buttons dialog box opens Choosing a button style Specifying Font options Specifying image size Previewing the Web site  On the Button tab. locating the file for the Link box.  Link the button to a page by clicking Browse.  Change the size and proportions of the button on the Image tab.Inserting Interactive Buttons Expression Web allows you the ability to create professional looking rollover interactive buttons for your web pages instead of using a separate graphics program. hovered. and pressed states.  On the Font tab. type your button text in the Text box. hovered.  Place your mouse pointer where you want to add the button. and color for all states of the button.

and select Cell Properties.  Right click on the page. To take the interactive buttons to the top of the cell.  Right click in the cell. but you can take the table to the center of the page and take the interactive buttons to the top of the cell to have a better view of the page. Placing the table at the center  Select Center for the Alignment in the Layout section. Previewing a Web site Laying Out Web Pages With T ables 57 . and select Table Properties.  Save and preview the page to see the changes.Your site appearance has been changed. Placing vertically at the top  Select Top for the Vertical Alignment in the Layout section. To take the table to the center of the page.

Inserting a new table  Specify how many columns and rows you want to create in the Insert Table dialog box. Specifying table size The table is inserted into the web page. Specifying table size  Click OK to see the inserted table. Cursor on the cell divider Dragging the cell divider 58 Chapter 4 .Creating a Table Before you create a table. If it is not certain you can add or delete rows and columns later. highlighting the cells that should appear on the table.  Select Table>Insert Table. Tables are displayed as an empty grid when they are added to a page  Resize the cells by putting your cursor on the cell divider and dragging it. Another way to create a table:  Click the Insert Table button on the common toolbar. you must specify how many columns and rows it will contain. The Insert Table dialog box opens. To insert a table:  Open the default page and place the cursor where you want to insert the table. When the table size has been selected. release the mouse button.  Drag the mouse over the grid.

When you're filling out a table. your table will grow horizontally to fit the content you place inside of it. Formatting a Table Changing Table Size and Alignment  Select Table>Table Properties>Table. you can equalize the width or height of selected rows or columns:  Select the rows or columns which you want to make an equal height or width.it will be resized automatically when you resize your browser window). Placing the table at the center You can also add rows and columns  Select the row or column where you want to add. Adding text to cells  Click your cursor within a cell and begin typing. you can press the Tab key to jump to the next cell on the right (or the next row) or press the Shift and Tab keys simultaneously to move in the opposite direction. Adding Rows or Columns  Place the cursor where you want to add rows or columns  Select Table>Insert>Rows or Columns.If you have a table of varying row heights and column widths.  Select Table>Modify>Distribute Rows Evenly or Distribute Columns Evenly. Decide how many rows or columns will be added Adding a new row Laying Out Web Pages With T ables 59 .  Select Center from the Alignment drop-down arrow to place the table at the center of the page. The Table Properties dialog box opens. The Insert Rows or Columns dialog box opens. Specify width: You can have a fixed width (In pixels) or a width relative to the page (In percent .  Right click and select Insert>Rows or Columns. If not defined.  Specify a value for table width that determines how big you want your table to be by using Specify width in the Table Properties dialog box.  Input the desired settings and click OK.

Making table borders visible Now the table borders are visible. The Table Properties dialog box opens.  Check the Collapse table border box to make the table border solid. instead of the default bevel style. Defining Borders To make the borders visible:  Select the table by clicking Table>Select>Table. If you set the Size to 0. the border and all of its grid lines will disappear. Opening Table Properties dialog box  Specify the Size and Color in the Borders section.Deleting Rows or Columns  Select the row or column which you want to delete by selecting Table>Select>Row or Column. You can also select the row or column by moving the cursor around the border until it changes to a small black arrow that points at the table and clicking. You can specify the border size and color.  Select All Borders from the common toolbar. Making table border solid 60 Chapter 4 . Before click: After click:  Select Table>Delete>Delete Columns or Edit>Cut or  Right click and select Delete>Delete Rows or Delete>Delete Columns.  Right click on the table and select Table Properties.

 Open Table Properties to add to the entire table or open Cell Properties to add to the selected cells.  Double-click the border. The pointer changes to a doubleheaded arrow.  Point to the right border of the column. The column is resized to fit its contents. Cell padding is the space between the cell edge and text AutoFit to Contents You can adjust all the table columns to the exact width of their contents. You can also resize the column to exactly fit its content.  Specify values for Cell padding and Cell spacing in the Layout section. Laying Out Web Pages With T ables 61 . To define cell padding and cell spacing  Open Table Properties.  Choose a color or a picture in the Background section.  Click anywhere in the table and select Table>Modify>AutoFit to Contents.Adding Background Color or Picture You can add background color to your entire table or to the selected cells. Choosing a background color Defining Cell Padding and Cell Spacing Cell padding is the amount of empty space that surrounds the contents of each cell. Cell spacing is the amount of space in the grid border between each cell.

62 Chapter 4 .  Type a title in the cell.  Add a new row at the top of the table and select all cells at the top row.Formatting a Cell Aligning Objects in a Cell You can align the objects in the cell horizontally or vertically.  Right click on the selection and select Modify>Merge Cells. Changing alignments The text in the cell is located at the center horizontally and at the top vertically.  Right click and select Cell Properties. Merging cells The cells are merged. Merging Cells You can combine two or more adjacent cells to make a larger cell by merging them. For horizontal alignments you can use also alignment buttons on the common toolbar.  Change the Horizontal and Vertical alignment values how you want. This command is only available when two or more adjacent cells are selected and the selected cells form a rectangle. You can add a title at the top row.  Select the cells where you want to change the alignment.

Nested table Laying Out Web Pages With T ables 63 .  Resize the height of the cell and insert the animated picture into the cell. Splitting cells Splitting into rows The cell is split into two rows.  Place the cursor in the cell where you want to split the table. The new table is inserted into the cell.Splitting Cells You can divide a cell into several columns or rows by splitting it.  Select Table>Modify>Split Table. To place a table within a table:  Place the cursor in the cell into which you want to add a table.  Right click in the cell that you want to split and select Modify>Split Cells. and how many to split into. You can also divide a table into parts and you will have two separate tables.  Click the Insert Table button on the common toolbar and select how many rows and columns you want to insert.  Choose if you want to split the cell into rows or columns. You may want to do this if you have a very complex graphic layout and need to align objects in particular way. A Table within a Table – Nested Tables You can place a table into a cell .creating a table within a table.

and if your visitors have to wait too long. and then Text to Table or Table to Text The new format is applied to the table. font. 64 Chapter 4 .  Select a format from Formats to create the look you want and click OK. shading. Download Statistics at the bottom of the Expression Web editor screen shows you the total download size. borders.  Click anywhere in the table and select Table>Modify>Table AutoFormat. You can see how your selected format looks in Preview How to convert a text to table or a table to text Select Table>Convert. Using the AutoFormat feature to apply a style automatically changes your table's size. The bigger the image file. the longer it will take . they may get bored and leave. and color. Selecting a table format Modifying a Picture Checking Image Size and Speed It's important to keep track of how long it will take for your page to download onto your web site visitor's computer.Table AutoFormat Table AutoFormat helps you quickly create good looking tables on your web pages.  Insert a picture on the default page by using the Insert Picture from File button on the common toolbar.

Why? Because you resized only the image size on the page but the image file size was left the same. Now check the total download size to see whether it changed or not. It is too big and takes too much time for a page.  Resize the picture to make it smaller in size. the total download size is still the same.Download statistics You inserted a large picture and the total download size is 178 KB. Changing the picture file type  Lowering the quality reduces the file size of the picture. To change the image file size:  Double click on the image to open the Picture Properties dialog box. Although you resized the image file. Laying Out Web Pages With T ables 65 .  Select the Picture File Type from General tab.

or right click on the picture in the Design view.  Select the image by clicking on it.  Click the Crop button on the Pictures toolbar. Crop lines The cropped picture 66 Chapter 4 .  Press the Enter key The picture is cropped.Picture File Type You can change picture file type by selecting another type on this window. and select Change Picture File Type Lowering the quality After changing the picture file size and saving it.  Resize the crop lines on which part of the picture you want to show. the total download size is remarkably changed.but not all . Cropping a Picture Crop an image means to remove a portion of it. To crop a picture:  Activate the Pictures toolbar by selecting View>Toolbars>Pictures.of a particular image. You may only want to show part .

Including a Text Alternative Some people shut off the image display on their web browsers because they don't want to wait for images to download. or you want to change it:  Double click on the image to open the Picture Properties dialog box. Creating hot spots Laying Out Web Pages With T ables 67 . And also this text appears when you keep your mouse a little on the picture. you can provide alternate text to show in place of the images. and the text appears. A picture with alternate text  Create hot spots for the planets on the picture to jump to their pages directly.no graphics. This means they see text only . Typing an alternate text  Keep your mouse a little on the picture. If you did not enter a text here. For these visitors. When you insert a picture. it prompts you to enter this alternate text in the Accessibility Properties dialog box.  Select the General tab and type the alternate text into the Accessibility Properties box.

Saving your work every time you insert an image gives you the chance to change file name and location. 68 Chapter 4 . If you have not yet saved the newly inserted images. they are not a permanent part of the site until each one is saved individually. The box will list the files you have inserted. Expression Web lets you rename the files.Saving an Attached Image When you insert images into your web page. It's a good idea to save all your images in one folder to keep files organized  Click OK when you are done. You can preview each image by clicking on it. To save your web page and new image files:  Click the Save button on the common toolbar.  Click the Change Folder button and select the images folder in your web site. When you save your images.  Rename the picture file by clicking the Rename button and typing a new name. the Save Embedded Files dialog box will appear. move them to different folders or choose not to save particular files with the rest of the web page you are saving.

Change Appearance 3. Modify pictures. Text Alternative 2 5 3 4 Laying Out Web Pages With T ables 69 . Table AutoFormat 5. Lay out pages with tables 2. Crop.Subject: Create a web site about the popular cities of your country. Required features: î Background 1. Image Size. Create and format tables î Borders color or picture î Cell padding and spacing î Merge or split cells 4.

Cell padding 9. For positioning absolutely c. 8. e. It is the amount of space in the grid border between each cell. For resizing a picture e. 3. c. Select the Table and press the Delete key. Select the table and select No Border from the Borders button on the Formatting toolbar. What is used to make the table border solid. c. Click the Change File Type button on the Picture toolbar. b. A new row is created. Which is correct for cell padding? a. Wrap Cells b. It is used to combine many cells. Select the column and press the Delete key . e. b. For making the picture transparent 70 Chapter 4 . What is used to combine two or more adjacent cells to make a larger cell? a. Collapse table border b. d. Select Center for Horizontal alignment on the Cell Properties. When the cursor is in the last cell of the table. c. Select the table and click the Center button on the Formatting toolbar. Cell padding c. It is the amount of empty space that surrounds the contents of each cell. Select Center for Alignment on the Table Properties. For making a hotspot d. b.Questions 1. Click Picture File Type from the General tab on Picture Properties. Eraser 7. e. The cursor exits the table. d. Select the column and select Edit>Cut. Set Size to 0 in the Borders section of the Table Properties dialog box. c. Displaying information in formatted tabular form c. Which one is not a way to delete a column? a. Select the picture and select File Type from the Format menu. d. Set Size to No Border in the Borders section of the Table Properties dialog box. Select the column and select Table>Delete Columns. c. Overlap. Click the Center button on the Formatting toolbar. Click Change File Type from the General tab on Picture Properties. Split Cells d. How can you locate the table at the center of the page horizontally? a. A new column is created. The cursor goes to the first cell of the same row. It is used to make the table border solid. what happens? a. 2. e. instead of the default bevel style? a. Select AutoFit to Contents from the Table menu. e. d. Solid border e. Which ways can be used to change the file type of a picture? (choose two of them) a. e. For cropping pictures b. Select the column and right click and select Delete Columns. It is used to fill in the cell. Adding background color and borders to blocks of text d. and show or hide page elements on a page. b. Combine Cells c. b. Select the picture. 5. d. Which ones are the uses of the tables? (choose three of them) a. if you press the Tab key. c. nest. d. right click and select Change Picture File Type. The cursor goes to the first cell of the table. b. What is this button used for? a. 6. Page layout b. Which ways can be used to make table’s borders hidden? (choose two of them) a. Cell spacing d. 10. Select the column and press the Alt+Delete keys. Set Size to none in the Borders section of the Table Properties dialog box. Position page elements absolutely e. Merge Cells e. 4.

.

size. you simply make changes to a CSS file and it will apply to all relevant formatting across the entire site. and so on.css file name extension. straighten it out for printing.Cascading Style Sheets Cascading Style Sheets (CSS) is a language that defines how the contents of a Web page should be presented. When you apply formatting with CSS. CSS has quite a few advantages over tables: Not only does CSS separate content from formatting but also you can use different style sheets to dress up a plain page for the Web. CSS Uses There are three ways you can use style sheets on pages in your web site: External Style Sheet You can create an external style sheet file or files. and style using CSS. It allows you to separate your content from your formatting. CSS is the preferred method to use for your web page layout. You can link a page to an external style sheet using the following code in the <head> tags.css. As a result. Tables for layout are out of fashion and such web pages do not work well in alternative web devices. tables. such as format. For example. An external style sheet uses the . An embedded style sheet is defined between the <style> tags in the <head> section. and even other tables in a graphically pleasing way. and simplify it for viewing on a pocket-size PDA. images. link them to pages and you can apply them consistently across some or all pages in your web site. pictures. Cascading style sheets give you more control over the appearance and presentation of your pages. you can change font color. You can apply formatting to page elements. clear its decorative formatting to make it accessible for all visitors. <HEAD> <link rel="stylesheet" type="text/css" href="mystyle. 72 Chapter 5 . designers had to use tables if they wanted to arrange chunks of text. If you decide to change a style.css"> </HEAD> Embedded Style Sheet You can use an embedded style sheet when you want to define styles only for the current page. Before CSS. And you also can change the position of text. you only need to make changes in the external style sheet and all of the pages linked to that style sheet will be affected by the change.

and position the page elements on the page where you want. Creating a new Web site Creating an empty Web site Enhancing Your Web Site 73 . you will create a web site about butterflies.  Create an empty web site by selecting File>New>Web site…  Specify the location and name of the site folder. ID‐based Styles You can lay out a page using CSS. An inline style is defined in the HTML tags using the style word.An embedded style sheet would look like this: <HEAD> <style> <!-a:link { text-decoration: none: } --> </style> </HEAD> Inline Styles You can use inline styles when you wan to apply styles to individual elements on a page. An inline style looks like this: <p style="border-style: solid"> CSS Types • ID-based styles • Class-based styles • Tag-based styles In this chapter.

Creating a new page  Add a new page by selecting File>New>Web site. If you can not see it. The selected page layout contains a header. That limitation makes them ideal for styling such once-a page items as mastheads. The used CSS styles 74 Chapter 5 . and a title Butterfly .Wonderful creature. two columns and footer.  Select a page layout which you want to use for your page from CSS Layouts.  Save the page giving a name default. To make changes in the CSS styles. CSS and HTML pages CSS layouts depend on two items: div tags (page divisions) and ID-based styles.  Save the CSS file giving a name layout. Choosing a CSS layout A page that is formatted with CSS and a separate CSS page are created. and footers.css. and click OK. The red circles with the # sign are ID-based styles. To change the background color of the page:  Right-click the body style and select Modify Style. click the Task panes menu and then Manage Styles. navigation bars. navigation bar. layout columns. ID-based styles can only be applied once per Web page. right-click the style and select Modify Style. The Modify Style dialog box opens. The CSS file is automatically attached to the page. The blue circles are HTML tags modified by CSS. You can see the used CSS styles on the page in Manage Styles.html.

Instead. Changing the background color Changing the width of the page divisions Change the page background of the page elements.  Type a width value in the Position category. The background color is changed and its code is added to the CSS file. you can copy all pictures from the source to the images folder in the Folder List. and footer. css. banner into masthead. but it takes too much time if you have a lot of pictures. create folders in the Folder List. After that. Locating the page at the center of the window To organize your files. Specify a background color in the Background category and click OK. top_nav. multimedia. container. You should change the width of the page divisions. Move the css file to the css folder in the Folder List. Insert your page elements into the page divisions. you can simply drag and drop the pictures from the Folder List into the page. images. The created folders Moving a file into a folder Moving a picture into the page Putting objects at the center Enhancing Your Web Site 75 . To locate your page at the center of the window:  Select the right and left margins in the Box category. To put page objects at the center of the cell:  Select center for text-align in the Block category. You can use the Insert>Picture>From File. masthead. and navigation buttons into the top_nav.

The container division has two columns. You can resize column widths.  Change the left_col width in the Position category.

Changing the division width

After changing the left_col width, it is necessary to shift the page_content to the right leaving some space between the two columns.  Change the left value in the Box category.

Changing the left margin

The two columns are divided as shown in the figure:

To give a good appearance to the page, it is also important to regulate the spaces between the border and page division (margin) and between the page division and text (padding), they are illustrated in the picture.

Make necessary changes to have a good appearance.

 Change page_content’s background color and border.

76

Chapter 5

 Create hyperlinks for the navigation buttons.  Type a text in the footer. You can create other pages using this page because all pages have the same structure.  Right-click the default.html and select New From Existing Page from the pop up menu.

Creating a new page from the existing page

Untitled_x.html page is created, now you can save it.  Add text and pictures from a source to the pages.

Class‐Based Styles
So far you have used ID-based styles for styling page items. ID-based styles can be used only once on a page. You added many pictures to the pages. To apply styles to the pictures, you need to use a class-based style which gives the possibility to apply many times on a page. A class-based style starts with a dot (.mystyle). To create a class-based style by shifting the picture to the left and wrapping text around it:  Click New Style in the Manage Styles task pane.

 Give a logical name starting with a dot.
Creating a new class-based style

 Set float to left in the Layout category to shift the picture to the left.

Setting margin options

Shifting to the left

Enhancing Your Web Site

77

 Give a value for the right and bottom margins to leave some space between the picture and text and click OK. The .img-left style is created.

Copying a style

 To create .img-right style, right-click .img-left style and select New Style Copy.  Change its name to .img-right, float to right in Layout and give values for left and bottom margins. Now you have two new styles for positioning pictures.

To organize your CSS files and work easily, you can write them to different CSS files.  Create a new CSS file multimedia.css in the Folder list.

Creating a new CSS file

To attach a new css file to all HTML pages.  Click Attach Style Sheet in the Manage Styles task pane.
Attaching a CSS file

 Find your CSS file using the Browse button, select All HTML pages for the Attach to option and Link for the Attach as option.

78

Chapter 5

img-left and . To insert . CSS file with codes Now you can apply these styles to the pictures. multimedia. The Multimedia.css file contains style codes for images. To apply a style to a picture:  Click the picture to select it.img-right styles into the multimedia.css and now it is in the multimedia. Do that action also for the . Enhancing Your Web Site 79 .css file.css is available in Manage Styles.css file: Moving a style  Click the style and drag and drop it into the multimedia.Now.img-right style.

you can use tag-based styles. To create a Heading style:  Click the New Style button in the Apply Styles task pane and select h1 for the Selector. Create a new css file text. find the css file where you want to place style codes. A picture applied a style Tag‐Based Styles If you want to change the style of an HTML element. and click the style that you want to apply. Click the Apply Styles tab. select Existing style sheet. Applying a style The style is applied to the picture.css to insert tag-based styles and attach that file to all HTML files. Selecting a Heading To place new style codes into the css file directly:  In Define in. and for the URL. Defining in an existing style sheet 80 Chapter 5 .

html. Open the lifecycle. Select the options which you want to apply to h1. and select a for Selector by defining in existing style sheet text. To apply a tag-based style:  Select the text and choose the style that want to apply.css file to style pictures. caterpillars. Choosing a style  The style is automatically applied to the selected text.html page and create hyperlinks by setting the New Window to Target Frame. Applied h1 style Create new pages and add text and pictures. apply them to your pages. click OK.html. Normal view Mouseover view Enhancing Your Web Site 81 .css. Also make similar changes for Heading2.  Do the same actions for a:hover by selecting different colors. Create a new style app. Selected options for h1 Selected options for h2 After changing the HTML tags with CSS.css to format their background and headings and attach the multimedia.html. egg. The hyperlinks have the view as shown in the figure: Select none in the textdecoration column so that the links will not be underlined.html and imago. To create Hyperlink style:  Click the New Style button in the Apply Styles task pane. pupa.  Choose the font and background colors for a link style.

 Find the flash file and click Insert button. The flash object is added to the page. click the Clear Style button… To detach an external style sheet from multiple pages: In the Folder List.  Select Insert>Media>Flash Movie. games.To remove a style from an element: Select the element whose style you want to remove.  Click the place on the page where you want to display a Flash object. Flash object file extension which will be displayed in your browser is . and other interactive programs to your Web pages.swf 82 Chapter 5 . rightclick the external style sheet listing and choose the Remove Link from the drop-down menu. and click Remove. Flash requires special player software to run within a web browser. To detach an external style sheet from a page: In the Manage Styles tab. to select all the pages from which you want to detach an external style sheet: Choose Format > CSS Styles > Manage Style Sheet Links Select the style sheet you want to detach. Working with Multimedia Inserting a Flash Object You can add animations. The Select Media File dialog box opens. In the Apply Styles tab. The most popular way is to use Flash used on graphical programs and multimedia presentations.

It is not recommended to play a background sound since most people find them annoying. You can also choose to loop the sound a specific number of times or infinitely. MIDI (. AIFF (.snd). specify new values for the Width and Height properties in the Size section  Make other desired changes and click OK.You may want to change the flash object size.  To change the flash object size. . select Transparent for Background color in the Movie section. Enhancing Your Web Site 83 .  Double-click on the flash object. Preview .midi). including WAV (.a Flash pbject Create a new page video.html and selecting New From Existing Page. Expression Web supports a variety of sound formats. The Flash SWF Properties dialog box opens.au and .aiff) and AU (. Inserting Page Background Sound Background sound starts as soon as the page loads. Create a hyperlink from the banner picture to the video page. remove its background color and make some other changes.html by right-clicking the default.aifc and . Making a flash object transparent  To remove the flash background color.aif.wav).

 Select Insert>Media>Windows Media Player. AVI (Audio Video Interleave). FLV. and MOV files.  Find the video file and click the Insert button. Opening Page Properties  Select the sound file using the Browse button on the General tab. When you save the page. Video clips are usually saved as WMV. The video object is added to the page. Click the place on the page where you want to display the video. If Forever is selected. Saving the embedded sound file Inserting a Video You can add a video to your web site. The Select Media File dialog box opens. it plays continuously. Right click on the page and select Page Properties. the sound file will be added into the web site folder. The Page Properties dialog box opens. 84 Chapter 5 . The added video object  Double-click on the video object to see its properties. Selecting a sound file Loop is used to specify how many times the sound will repeat.

Play count specifies how many times the video will repeat. Auto start starts the movie automatically when the page is loaded.a Flash video Enhancing Your Web Site 85 .Changing video object properties You can change many options in the General tab. so it is a flash object which contains a . Changing movie size • After making changes.flv. Preview .html page with by setting New Window to Target Frame.  Insert a picture butterfly.flv video file is usually inserted into a flash file . save and preview the page.  Click the picture to select and create a hyperlink to the butterfly.  Save and preview the page. Another popular video file format is FLV. You can resize the movie by changing the width and height options on the Object Tag tab. The .jpg into your page. Note: If you cannot watch the movie in Mozilla Firefox browser.  Copy all files from source\multimedia\flash_movie into your site. you have to install the Windows Media Player plugin for Mozilla Firefox.flv video.swf.

select a page event (Page Enter. choose a transition effect (or choose No Effect to remove an existing transition from the page). Page Exit.Page Transition You can create special effects that are displayed when a site visitor enters or leaves your site or browses to or from a specific page.  Open the page that you want to create a page transition. Choosing a page transition  In the Event combo box. Preview .  Enter the amount of time that the effect should last by typing a value from 1 to 30 in the Duration text box.  Select Format>Page Transition. You can add different transition effects for different events.Page transition on the page 86 Chapter 5 . Keep in mind that choosing longer transitions slows down people who are using your site.  In the Transition effect list box. Site Enter or Site Exit) that will trigger the transition. The Page Transitions dialog box opens.  Save the page and preview it in a browser.

Copied images  Select New>Page. Enhancing Your Web Site 87 . A frames page itself contains no visible content— it is just a container that specifies which other Web pages to display in a frame and how to display them in one browser window. The New dialog box opens.  Create a new folder gallery and copy images that will be used in the photo gallery.Using Frames A frames page is a type of Web page that divides the browser window into different areas called frames. Creating a frames page  Select a frames page Contents that is favorable with your web site on the Frames Pages tab and click OK. each of which can display a different page. You are going to create a photo gallery by using frames. The selected frames page creates a contents frame on the left containing hyperlinks that change the page shown on the right.

which is the container. and the two pages shown in each of the two frames. The created new pages 88 Chapter 5 .The frames page The frames page template actually shows three pages simultaneously in the browser: the frames page.  Create new pages by clicking the New Page button on each frame.

Saving the left page First you are asked to type a name for the left page. Click the Save button to save three pages.  Type a name and click the Save button. Saving the main page Enhancing Your Web Site 89 .

90 Chapter 5 . or visible when needed.  Right click on the left page and select Frame Properties. hidden. Saving the frames page.  Type a name and click the Save button. container Third you are asked to type a name for the frames page that contains the left and the main pages. Show Borders You can show or hide frame borders Show scrollbars You can make scrollbars visible.html that contains two pages. left and main. Resizable in browser It is possible to resize the page in a browser if it is checked. Now you have a frames page.Second you are asked to type a name for the main page.  Type a name and click the Save button. gallery.

 Insert a picture into the left page. Enhancing Your Web Site 91 . Making an Auto Thumbnail When you click the thumbnail.  Right-click the thumbnail and select Hyperlink Properties. the picture opens.  Click the Target Frame button in the Edit Hyperlink dialog box. Moving a picture to the page To specify thumbnail size:  Select the Tools>Page Editor Options and click Auto Thumbnail tab. You need to display the picture on the main frame. Choosing a target frame  Do the same actions for all pictures which you want to include in your photo gallery.  Right-click the picture and select Auto Thumbnail to make its thumbnail. Opening target frame  Click the main frame in the Current frames page section and click OK.

 Save and preview the page.  Click the thumbnails on the left page to see how the pictures change on the right. 92 Chapter 5 . you will be asked to save the images that are created for the thumbnails. Saving thumbnail images Preview .A frames page  Specify a folder to save the images in and click OK. When you save the page. Insert the first picture of the photo gallery into the main page in order not to leave the page empty initially.

images with CSS 3. Multimedia – Flash 4. Multimedia – Page Transition 6.Subject: Create a web site about popular cities of your country Required features: 1.Frames 2 2 1 3 5 4 6 Enhancing Your Web Site 93 . Styling headings. hyperlinks. Multimedia – Video 5. Lay out pages with CSS 2. Photo Gallery .

e. How can you remove the background color from a Flash object? a. MP3 b. Insert>Bookmark e. Tag-based style d. If Needed for Show scrollbars 4. Tools>Page Editor Options>Picture c. Insert>Media>Windows Media Player c. Converting Style Shapes 6. Internal Style d. Insert>Media>Flash Movie d. Resizable in browser d. Insert>Video 3. Which style category options are used to locate your page at the center of the window? a. 94 Chapter 5 . Tools>Page Editor Options>AutoThumbnail b. RAM e. d. Cascading Style Sheets d. Class-based style 8. File>Import>File e. c. Embedded Style Sheet b. Relative for Frame size b. External Style Sheet c. Changing Style Shapes e. Set the ‘position’ option to ‘absolute’ in the ‘Position’ category.Questions 1. e. 9. What does CSS refer to? a. Which sound format is NOT supported for the background sound in EW? a.mystyle)’ Which CSS type is explained above? a. How can you specify a new thumbnail size for pictures? a. Format>Behaviors d. Set the ‘right’ and ‘left’ margins to ‘auto’ in the ‘Box’ category. Inline styles e. Merged Style Sheet e. ‘This style can be used many times on a page and starts with a dot. b. Format>Page Transition resize a frames page in a browser? a. Select ‘keep aspect ratio’ in the Size section. Show Borders c. WAV c. Tools>Application Options>AutoThumbnail d.(. Set the ‘right’ and ‘left’ options to ‘auto’ in the ‘Position’ category. Select ‘No border’ for the Scale in the Movie section. Set the ‘text-align’ option to ‘auto’ in the ‘Box’ category. Tools>Customize>Toolbars e. d. Select Best for Quality in the Movie section. Select Automatic for the Background color in the Movie section. Merged Style Sheet 7. Format>Background c. Changing Style Sheets b. c. b. Which one is a way to add a video to your page? a. How can you create special effects that are displayed when a site visitor enters or leaves your site? a. Embedded Style Sheet b. Cascading Style Shapes c. ID-based style c. AIF 2. Insert>Picture>From File b. Percent for Frame size e. MID d. Select Transparent for Background color in the Movie section. Which one do you select in Frame Properties to 10. Tools>Customize>Options 5. Which of the following ways are the uses of CSS? (choose three of them) a. Set the ‘float’ to ‘center’ in the ‘Layout’ category. Insert>Symbol b.

.

Dynamic Web Templates
Dynamic Web Templates are used to create Web pages that share the same web design or layout and you can make some editable regions in a template while preventing changes to other regions in that template. Dynamic Web templates are pages that have been divided into parts that can be edited and parts that must remain unchanged. In this way, you can rest assured that the page's layout and design remain consistent, even when several people work on the site. Most of the Web sites on the Internet today are each made up of pages that contain a lot of duplicated content. Dynamic Web Templates share an entire layout and offer much more control over the parts of your pages that are available for editing. You can easily attach the design to any number of pages that you want. You will have the advantage of updating the template in one single location and of having those changes immediately affect all of the pages attached to the Dynamic Web Template. You can create and use any number of Dynamic Web Templates on a Web site and then change the look of the web site by switching the Dynamic Web Template attached to that page. In this chapter you will create a Web site about Fascinating Animals.

To create a Dynamic Web Template  Select File>New>Page and choose Dynamic Web Template from General on the Page tab.

Creating a Dynamic Web Template
 Create an empty Web site and create Web pages in the Folder list. You are going to use a CSS layout in your template page, so firstly create a new page with CSS layout.  Select File>New>Page and choose your CSS layout on the Page tab. Page divisions are inserted into the page. You don’t need top_nav division, so you can delete it.  Select the top_nav division and press the Del key You can select the division easily. When you see the mouse pointer like in the picture, click once and it is selected.

 Set a value for the division’s width, 800 and put a 10 The created Web pages pixel space from the left and top.  Click the Save button on the common toolbar. The Save As dialog box opens.

Selecting the dynamic web template type

 Select Dynamic Web Template for the Save as type and type a name template.dwt in the File name. After saving the template page, the Save As dialog box opens again to save CSS file.

96

Chapter 6

 Type a name for the CSS file layout.css. You have just created a dynamic web template. You need to make a web design that will be used and remain unchanged in all pages of the Web site and define some editable regions that can be modified in other pages.  Copy the images folder from the source in the Folder List and insert the objects that you want to share in the pages.  Create hyperlinks to pages.  Change the background color setting to the same color as the menu picture.

Pictures for navigation prepared in Photoshop, inserted into the left_col division.

A picture for a banner prepared in Photoshop, inserted into the masthead division.

A Web page design

Adding an editable region  Click on the page where you want to put an editable region, page_content division.  Select Format>Dynamic Web Template>Manage Editable Regions or Right click on the page and select the Manage Editable Regions from the popup menu. The Editable Regions dialog box opens.

When you are in the editable region, if you open the Editable Regions dialog box, you will see the Rename button instead of the Add button Remove is used to delete the editable region
Adding an editable region

Improving Interactivity

97

 Type a name for the region in the Region name text box and click Add. The main region is added to the page and denoted by boxes with orange borders You can add many regions in this way.  Click Close and save the page.

An added editable region

Any page created from this template is only editable in the regions that have been defined. After creating a Dynamic Web Template, you can attach it to the pages which will be affected.

Attaching a Dynamic Web Template to the Pages
If you want to attach a page, open it. If you want to attach the dynamic Web template to more than one page, select the pages you want.  Select the pages which are listed in the menu picture.  Select Format> Dynamic Web Template> Attach Dynamic Web Template. To select many pages in the Folder list, hold down CTRL and click each page you want.

Selecting a DWT to attach

98

Chapter 6

After a page has been attached to a dynamic Web template. the formatting of the page stays. you need to edit the page.  Fill in the pages with text and pictures from a source. click Yes to continue. h3 styles with the following settings: h2 Improving Interactivity 99 .  Select Format>Dynamic Web Template>Detach from Dynamic Web Template. Detaching Files from a Dynamic Web Template  Select the file or files that you want to detach from the Dynamic Web Template.  It warns you that the template will be applied and make changes on the page. Expression Web asks if the pages using the template should be updated. Whenever you save the template file after making a change. You can open any page and see that the dynamic web template has been applied to the page. If you want to change the look. Although you detach files from the Dynamic Web Template. The Dynamic Web Template is attached to the selected files and then the files are updated.  Define the h2. Locate and click the dynamic Web template you want to attach and then click Open. any change to the template can be applied automatically to that page.

Adding a Layer  Select Insert>HTML>Layer. You can also animate layers by using Behaviors which add script to any element in a page. The layer1 is added to the page. Ants. tables. A layer is defined as an absolutely positioned Division and is represented by the <div> tag. and move it where you want on the page. You can overlap. a text is displayed.h3 Layers and Behaviors A layer is a container that you can place anywhere on your page. or even a video.  Click the layer. and show or hide layers on a page. An inserted layer Resizing a layer 100Chapter 6 . The text is written in a layer and animating the layer is performed by behaviors. resize. but in the right view when you move your mouse on to the picture. pictures. It can hold anything such as text. nest. You will learn this subject on an example as shown: Normal view Mouse over view In the left view there is no text in the middle.

or positioning. resize. You can add layers. Fill in the layer with text. and position them on the page where you want them them to show. Changing borders and shading Positioning the layer Improving Interactivity 101 . shading. tables. You can also add pictures. You can change the properties of the layer such as borders. videos etc.  Add one layer for each animal. You have only one layer for now. You can position the layer exactly where you want on the page and specify its size. and give background color and picture in Shading.  Right-click the layer and select Borders and Shading or Positioning. A layer Opening Borders and Shading Layers You can choose border style. as many as you want. color in Borders. You can manage the layers and change the properties of the layers by using the Layers task pane.  Select Format>Layers to open the Layers task pane.

You can apply a behavior to a particular HTML tag.  Click Insert and choose Change Property to change the layer property.  Click on the layer visibility to set the Visibility to Hidden. You can change other properties of the object if you want. Opening Change Property  Click the Visibility button and choose Visible. The Behaviors task pane opens. Click Restore on mouseout event check box to set the previous state of the layer (invisible) when you move the mouse out of the picture. the layer appears and when you move the mouse out of the picture. (Initially it was invisible. and then select the layer in the Element ID.  Set the Element Type to div. Selecting the picture  Click the picture which will control the layer. You can change other properties of the object if you want. and then select the layer in the Element ID. the layer disappears. 102Chapter 6 . now you are making it visible) Set the Element Type to div.You need to make the layer invisible since it is invisible initially. You need to apply this behavior to the <div> tag since the layer uses the div tag.  Select Format>Behaviors. Click the Visibility button and choose Visible. Applying a Behavior to a Layer When you move the mouse over the picture. Changing layer visibility Now you can apply behaviors to the layer to animate it.

 Click the picture which you want to swap.The Behaviors task pane has the following view:  Click the onclick combo box and choose the onmouseover event. A picture changes with another picture when a mouse passes over it. Selecting a swap picture Improving Interactivity 103 . Interactive Buttons also use the Swap Image behavior to implement the interactivity of the button. Rollover buttons are created by using this behavior. you can use swap image behavior. Some Behaviors Examples Swap Image If you want to swap one image for another when a specified event occurs. Changing the event  Select Insert>Swap Image on the Behaviors task pane. otherwise the swap picture is resized to fit the area. You need two pictures that should have the same size. Here you set the Visibility to onmouseover event and the Restore Property to onmouseout event. You just specified which action happens for which event. The Swap Image dialog box opens.  Save and preview the page to see how it works.

 Click the Browse button and find your image that will play.  Save and preview the page. music plays. it plays the sound. When the onclick event occurs.  Click the Browse button and find your sound that will play and click OK. 104Chapter 6 . Opening Play Sound Locating the sound file The following script is added to the Behavior task pane.  Click the picture to listen to the music.  Save and preview the page.  Select Insert>Play Sound on the Behaviors task pane.  Click the picture to select it.  Click the Restore on mouseout event check box to show the initial picture when you move the mouse pointer out of the picture and click OK to complete. Normal view Mouseover view Play Sound When you click the picture. The following script is added to the Behavior task pane. The Play Sound dialog box opens.

An opened window after click Improving Interactivity 105 . the bees page opens in a window whose size and attributes you can specify.  Select Insert>Open Browser Window on the Behaviors task pane. Preview .  Click the Browse button and find your file that will open in the browser window.  Click the picture to select it.Open Browser Window When you click the picture.  Save and preview the page. The Open Browser Window dialog box opens.  Click the picture and you’ll see that the page opens in a separate and specified window. You can give a window name You can change window size You can change window attributes  Make desired changes and click OK.

 Select Insert>Jump Menu on the Behaviors task pane.  Select a page from the menu drop-down list.Jump Menu  Place the cursor where you want to add a jump menu. The menu is added to the page. Placing the cursor Adding a menu item  Select New Window from Open URLs in the drop-down list and click OK.A jump menu 106Chapter . the page which you select from the menu will be opened and the first item will be selected automatically. it opens in a new window. Opening URLs in a new window The added menu If you click the Select first item after URL change check box. When you click any page.  Click Add button to add the pages which your menu will contain. 6 Preview .  Save and preview the page. The Jump Menu dialog box opens.

so you need to detach the page from the template. Format>Dynamic Web  Insert the above code anywhere inside the <body> tags.  Open the page Bees.  Save the page and preview the page. When the page is loaded. <script language=”JavaScript”> alert(“Welcome to Fascinating Bees World”).Using Java Script Codes in Expression Web JavaScript is a scripting language and used to improve the design. The easiest way to use JavaScript code in Expression Web is to just copy and paste scripts into the HTML. the greetings appears. </script> You are going to add some code inside the HTML codes. Greetings A script is used to say welcome to the visitors when they open the page. validate forms. When the page is loaded. Preview . create cookies and much more.html and select Template>Detach Dynamic Web Template. detect browsers. you are first met with “Welcome to Fascinating Bees World” greetings. You can find and use a lot of free JavaScript examples which are guided on how to add them to your HTML codes on the Internet.Greetings Improving Interactivity 107 .

Flashing Status Bar
A script is used to display a flashing message in the status bar.
<SCRIPT language=”JavaScript”><!—var text = “Welcome to the Fascinating Bees World...”; var speed = 200; You can change the text var control = 1; and speed how you want function flash() {if (control == 1) {window.status=text; control=0;} else {window.status=”“; control=1;} setTimeout(“flash();”,speed);} // —></SCRIPT>

 Insert the above code anywhere inside the <body> tags.  Change the <body> tag with <body OnLoad=”flash();”>  Save and preview the page. When you open the page, you see the flashing message in the status bar.

Preview - Status bar

You can also set a simple text on the status bar by using Insert>Set Text>Set Text of Status Bar.

Page Password Protection
A script is used to protect a page with a password. This script has two sections; one part is put into the head, the other into the body.  Insert the code below anywhere inside the <head> tags.

108Chapter

6

<script language=”Javascript”> <!— function pass(){ var password = “bees“ var x = prompt(“Please enter the password”,” “) if (x.toLowerCase() == password) { alert(“Correct password \n \n Click OK to enter the page”) location = “bees2.htm” } else { location = “bees.html“ } } //—> </script>

 Insert the code below anywhere inside the <body> tags.
<a href=”Javascript:pass()”>The worker bees</a>

When you click the hyperlink, you are prompted to enter the password. If you enter the correct password “bees”, the bees2.html page opens, otherwise it opens the bees.html page.  Save and preview the page. When you click the hyperlink, you are prompted to enter the password

When you click the hyperlink, you are prompted to enter the password

Prompted password window

Improving Interactivity

109

XML
XML stands for Extensible Markup Language. XML and HTML are used with different goals: HTML was designed to display data, but XML is used to transport and store data. XML is used to structure, store, and transport information. XML provides an immediate opportunity for database-driven site development. XML describes what that content is instead of describing how that content should be displayed. You can mark up the contents of a document, describing that content in terms of its relevance as data. Have a look at the following HTML element: <h2>Red Oranda</h2> This example shows the text as a heading in a web browser, but if you want to access those words as data, you can use XML: <FISH>Red Oranda</FISH> As you can see, you can choose the tag name that best describes the contents of the element in XML. HTML deals with structuring data, XML deals with defining data. You can present XML data in a browser by using eXtensible Stylesheet Language (XSL). XSL describes how the XML document should be displayed! With even very little knowledge of XML, you can easily and effortlessly create data bindings between your XML files and your Web pages. Before you can begin integrating XML data into your Web pages, you must first build the XML file that will contain the data to be offered within the Web pages.

Building an XML file
You are going to create a goldfish catalog, so the root is catalog and under the root the next is fish. In the fish, you type the fields. Each field gives specific information.
<CATALOG> <FISH> <ITEM>7131</ITEM> <NAME>Red Oranda</NAME> <SIZE>2” to 2.5”</SIZE> <IMAGE>catalog/images/oranda_red_small.jpg</IMAGE> <PRICE>5</PRICE> <INSTOCK>yes</INSTOCK> </FISH> <FISH> … </FISH> … </CATALOG> <CATALOG> <FISH> </FISH> </CATALOG>

This structure repeats to how many records you want to include.

110Chapter

6

The Edit Columns dialog box opens.Adding XML Data to the Page It is very easy to add XML data to your page.  Copy the catalog folder from source to the web site folder in the Folder List.  Select Data View>Edit Columns. An xml file shown in a table Formatting the Data Editing Columns You can specify which fields will be displayed. Improving Interactivity 111 .  Create a new page from the Dynamic Web Template.  Move the xml file to your page. The catalog folder contains an XML file and images folder. Moving the XML file to the page  All information in the xml file is carried to the page and shown in a table.

112Chapter 6 .  Click the image field in the Displayed Columns section and click the Move Up button to carry it up. Sorting You can sort the data in the table by a field or fields. You can change the positions of the fields. Moving a field up Also its position has been changed in the table. It is added to the Displayed Columns.You can add fields to the table. The Sort dialog box opens.  Select Data View>Sort. Now the image field comes after the item field. Adding fields to table  Select the instock field in the Available fields section and click the Add button. You can also remove the fields from the table if you need.

Improving Interactivity 113 .Sorting by price in an increasing order  Select the price(number) field by which the data will be sorted and choose Ascending in the Sort Properties and click OK. Descending is decreasing order. The Filter dialog box opens. The data is sorted by price in the increasing order. Ascending is increasing order. Filtering You can use the filter to determine which list items will be displayed.  Select Data View>Filter. You are going to display only the fish that are available in stock.

Changing the Layout You can change the layout to give a good appearance to the table. Only the list items that have the ‘yes’ value for the instock field are displayed. The Change Layout dialog box opens.  Select Data View>Change Layout. Changing the layout 114Chapter 6 .Specifying filter criteria  Select instock in the Field name and type yes for the Value and click OK.

The selected style is applied to the table. Choose which style you want to apply to your table and click OK. To place the picture:  Select the path to the picture.  Click Yes in the Confirm dialog box to continue.  Select Data View>Format item as and click Picture. You see that for the image only its path and name is written. Improving Interactivity 115 .

You can also give a currency format to the price.The pictures are now displayed instead of their path and names. 116Chapter 6 . You can make some formatting changes here to have a good appearance.  Select the price.  Select Data View>Format item as and click Currency.

 Select Task Panes>Conditional Formatting to open it. you can use conditional formatting. but the fields that have the ‘no’ value for the instock field will have a different background color. remove the filter to show all list items. Conditional Formatting In this table you display only the list items that have the ‘yes’ value for the instock field. So if you want to change some formatting options depending on some conditions.Formatting an item as currency  Make the changes that you want and click OK.  Select the area where you are going to apply the conditional formatting in the table. If you want to show all fields. Firstly. Applying a conditional formatting  Click the Create button and choose Apply formatting. Improving Interactivity 117 . Now the price format has been changed.

 Save the page and preview it in a browser. you need to make server-based web sites.js and . you may see some warning messages for security because you use html files. That is the subject of the next chapter. Specifying a background color  Specify a background color and click OK. To make sure that your web site will work in all browsers. 118Chapter 6 . two new files (. When you save the page.xsl) will be added to your site. Now if the fish is not available in stock. type no for the Value and click OK. When you preview the page in different browsers.Specifying a condition criteria  Select instock in the Field name. it can be recognized easily since its background color is different. and they are browser-based.

Flashing 2 1 3 3 3 6 4 5 Improving Interactivity 119 . Play sound. open browser window. Actions. Greetings 5. Dynamic Web Template 2. jump menu 4.Subject: Create a web site about your favorite animals. Layers and Behavior 3. Required features: 1.

After applying conditional formatting in XML. Shading c. which new files will be added to your site? a. Select Format>Dynamic Web Template>Attach Dynamic Web Template. script e. Powerful PHP-based technology d. Select Format>Dynamic Web Template> Update All Pages. js and xsl 120Chapter 6 . Select Format>Dynamic Web Template> Manage Editable Regions. newwindow. EncryptionMediaLink d.write(“…”) d. d. What does XML stand for? a. Format>Add layer 5. Which one is not true for Dynamic Web Templates? a. How do you specify which fields will be displayed? a. Which tag is a layer represented by? a. Extensible Markup Language c. status. Which properties of a layer can be changed? (choose three of them) a. Popup Message 7. link d. b. b. Data View>Insert Formula 10. Right click on the page and select Manage Editable Regions. div 4. td b. dwt and css b. Preload Images c. style c. html and css e. Borders 6. Which one is not a feature in Expression Web? a. d. Rich data presentation 2. You can not use any number of DWT in a web site c. Format>Layer c. You can attach a DWT to many pages d. Data View>Change Layout c. Swap Image b. Sophisticated CSS-based layouts and templates b. You can make some editable regions in DWT e. Change Property d. Extensive CSS formatting and management e. Data View>Edit Columns d. How can you create an editable region? (Select two of them) a.status=”…” e. What is the code to write a text on the status bar? a. js and css d. c. alert(“…”) c. window.document. EmulationMemoryLatency 9. js and xls c. Position d. Standards-based Web sites c. Data View>Sort e. 3. DWT offers more control over the pages 2. prompt(“…”) b. Bullets and Numbering e. ExpansionMediaLink e. Select Format>Dynamic Web Template> Detach from Dynamic Web Template. e. Insert>HTML>Layer e. Which behavior is used to change a picture with another picture when a mouse passes over it? a. DWT share the same web design b.Questions 1. Data View>Manage Data Sources b. EncryptionMultimediaLocalhost b.write(“…”) 8. Right click on the page and select Layers. Style b. Click the Insert Layer button on the standard toolbar. How can you add a layer? a. Jump Menu e.

.

There is only one difference: After making a change in the master page. They will not be updated. and click OK. choose Empty Web Site in the Web Site tab and type a name in the Specify the location of the new Web site. but now most Internet pages are dynamic pages.NET and PHP pages browsed from a disk-based Web site.Creating a Dynamic Web Site Foundation In the previous chapters you have created static web pages. create accounts.  Select File>New>Web Site. A dynamic web site is based on Master pages.  Select File>New>Page.NET or PHP page is previewed in your browser. The Microsoft Expression Development Server is used by default for all ASP . add robust form validation and dynamic navigation and use AJAX features. choose a CSS layout in the Page tab and click OK Choosing a CSS layout 122Chapter 7 . the other pages connected to the master page are changed immediately. A master page is the same as a Dynamic Web Template which is explained in the previous chapter. Create an empty web site naming ‘x-life’. They use a server-side technology to provide a more powerful and dynamic user experience. You can display data from a database. Expression Web 2 starts the Microsoft Expression Development Server on a random port when an ASP . It is also used to create Web pages that share the same web design or layout. Creating an empty Web site Create a Master Page Layout Create a Master page prepared from a CSS layout.

Saving the CSS file Creating a Dynamic Web Site 123 . The CSS and HTML pages Expression Web gives a warning message: ‘The Master page does not have any content regions defined. After saving the Master page. Do you want to save anyway?’. You will define the content regions later. type a name for the master in the File name and click the Save button.An HTML page and a CSS page are created. Expression Web opens the Save As dialog box again to save the CSS file. choose Master Page in Save as type. so you can click the Yes button.  Select File>Save. Save the html page as a Master page.

Fill in the master page with the elements which will be shared in all pages such as the banner and navigation buttons. When you want to make a change in design.  Move the banner picture to the masthead division and type an alternate text.net technology. 124Chapter 7 . For example if you want to put your page at the center of the window. it will be enough to put only the container. Gallery. Types. The page names will be the same with the button names but file extension will be aspx because you create a dynamic web site based on the . Search.  Type <div id=”container”> …</div> putting all other divisions inside. it will be necessary to do that in all divisions. That’s why it is a good idea to put all divisions in one division named ‘container’. The Master and CSS files There are four divisions in the selected CSS layout.  Create an images folder and copy the images from source. Moving the picture to the page  Create navigation buttons in the top_nav division: Home. The Master and CSS files are created and you can see them in the Folder List.  Click the Split view to see the codes. Type a CSS file name and click OK.

NET Content Regions. The main region is added to the page and the word (main) is written to show the place.  Right-click and select Manage Microsoft ASP.  Place the cursor in the page_content division. Adding a content region  Type a name and click the Add button. You filled the elements that will be the same in all pages and these elements can not be modified in other pages. Creating a Dynamic Web Site 125 . Type a text in the footer division. Now you need to add a content region that can be modified in all pages.  Click the Close button and delete the word (main) inside the main region.

and store this style in the existing file format1. Change the colors of the divisions. Changing the page background color  Specify a background-color in the Background category.  Name the style typing #container in the Selector name.  Click the New Style button in the Manage Styles task pane. Placing the page at the center  To specify page width.Creating Styles Create CSS styles to have a good appearance for your web site.css. 126Chapter 7 . Specifying page width To change the background color:  Create a new style and choose body for selector. choose Position category and type a value for width. Creating a new style To place the container division at the center of the window:  Choose Box category and select auto for the left and right margins.

each_type. Creating a new page from the Master Page  Select a Master Page using the Browse button and click OK.aspx.  Click Save button on the toolbar.aspx pages.  Select File>New>Create from Master Page. types. search.aspx page that has the same structure with the Master page is created.aspx. Creating a Dynamic Web Site 127 . A faster way Right-click on the Master page in the Folder List and Select New from Master Page. type the name for the page and click OK. Saving the page  Create other pages which you need in the same way.Create Pages From Master You created the master page and you can create web pages whose structure will be the same with the Master page. Specifying the Master Page An Untitled_1.

 Create a new folder named App_Data in the Folder List. types.Create a Database where the Information is Stored The information will be stored in an Access database. type a name data.  Start the Access database program.. Saving the database in the App_Data folder  Create a new table with the following table structure and save it by typing the name. Creating a new table  Double click the types table to open it and fill in the fields. Filling data in the fields 128Chapter 7 . create a new blank database.mdb and click the Create button to save it in the App_Data.

types. Testing the connection Creating a Dynamic Web Site 129 . choose Data Source and click OK.  Select Task Panes>Data Source Library. you need to create a connection between the database and the web site.  Click New ASP.aspx.  Open the page where you need to create the connection.NET Connection. Creating a new ASP>NET connection Choosing a data source  Click the Browse button and select the access database file in the App_Data folder. The Data Source Library task pane opens.  Click the Create Custom Content button to make the main content region active.Creating a Connection between the Database and the Web Site After creating a database.

 Drag the AccessDataSource control to the page from the ASP. Sorting data Click the ORDER BY button to sort the data.NET Controls>Data section. 130Chapter 7 . Now you see that there is one connection created. If the connection has succeeded. click OK. enter a name for this connection and click OK.  Click the Configure Data Source link and choose a database. The data will be sorted by id in a decreasing order. Displaying Data from a Database on a Web Page  Open the Toolbox task pane by selecting Task Panes>Toolbox. Click the Test Connection button to check the connection.  Configure the Select Statement to retrieve data from your database and click the Next button.  In the New Connection dialog box. you will see the following dialog box.

 Click Test Query to preview the data returned by this data source and click Finish. You can use the DataList control to show all records.  Drag the DataList control to the page and choose Data Source. Choosing data source Creating a Dynamic Web Site 131 . Now you need to select the control through which you want to show the data. The connection between the database and web page is completely created.

You can make some changes in the formatting. You see that all selected data is sorted in a descending order and shown on the page. 132Chapter 7 .  Click the Edit Templates link.Now you have the following figure on the page.  Save and preview the page.

 Select ItemTemplate for Display and make your desired changes.

 Save and preview the page.

You need to show the picture instead of writing its name.  Drag the Image control from ASP.NET Controls>Standard and click the Edit DataBindings link.

 Choose ImageURL, select pic_small for Bound to, and type images/types/{0} for Format in the Field binding section.

Specifying the image data bindings

Creating a Dynamic Web Site

133

 Choose AlternateText, select title for Bound to in the Field binding section and click OK.

 Save and preview the page.

You have created a page where there is a small picture and short information about each type. When you click each type, a big picture and long information about that type should show on a new page. If you create a static page, preparing a new page for each type takes too much time and work. But you can do that dynamically by preparing only one page.  Open the page which will show a big picture and long information of each type, each_type.aspx.  Click the Create Custom Content link to add your content into the main region.

 Drag the AccessDataSource control to the page from ASP.NET Controls>Data.

 Click the Configure Data Source link and choose a database.

134Chapter

7

 Select the fields to retrieve data from your database.

 Click the WHERE button to add one condition.  Specify a parameterized value that gets their values at runtime, click the Add button and then OK. You specify the id number and it shows that record. Here the default value is set to -1 and will not be shown any records. This value is assigned at runtime.

Adding conditions to the Where clause

 After the adding Where Clause, click the Next button and then the Test Query button to preview the data.

Creating a Dynamic Web Site

135

 Save and preview the page. That is the FormView control.  Add the following parameter to the page in the address bar and press the Enter key.NET Controls>Data and choose Data Source. each_type. but no record is shown because there is no record whose id equals to -1. click the Finish button. The access data source is ready and now you need a control which can show only one record’s information.  If the first record information is shown as the following.  Drag the FormView control to the page from ASP.aspx?which_type=1 Now you see the first record’s information. 136Chapter 7 . Type 1 for Value to show the first record and click OK.

aspx page and click Edit Templates.  Open the types. Now you need to return to the types page and create the hyperlink to the each_type. Creating a Dynamic Web Site 137 . Make changes to get a good result using Edit Templates.aspx page with parameter.

select id for Bound to and type the following code for Format and click OK. 138Chapter 7 . now you see the title hyperlinked. When you click the hyperlink. select title for the Bound to.aspx?which_type={0}  Save and preview the page.aspx shows the clicked record’s information. Specifying hyperlink data bindings  In the NavigateUrl section.NET Controls>Standard and click Edit DataBindings. Drag the Hyperlink control to the page from ASP.  In the Text section. the page each_type. each_type.

 Choose a Database and click Next.  Choose ‘Specify a custom SQL statement or stored procedure’ and click the Next button. You can also show the last news on the home page of your web site.  Open the home page default.aspx and click the Create Custom Content link. SELECT TOP 1 * FROM [types] ORDER BY [id] DESC Creating a SQL statement Creating a Dynamic Web Site 139 . When you prepare a news part for your web site.  Drag the AccessDataSource control to the page from ASP.NET Controls>Data and click Configure Data Source.Now you can delete titleLabel in the Edit Templates because it is no longer required.  Type the following code for the SQL Statement in the SELECT tab and click Next. the last news is usually shown on the home page.

140Chapter 7 .  Save and preview the page. Click the Test Query button to preview the data returned and click Finish.  Drag the FormView control to the page from ASP.NET Controls>Data and choose Data Source.  Make desired changes in the formatting of the ItemTemplate.

select the * sign to select all columns and then click the Advanced button. Creating a Dynamic Web Site 141 .  On the next window. but in a dynamic web site it is possible to modify or delete a page or add a new page online.  Do not make any changes and click Next button.Updating Your Web Site Online A traditional way to update your web site is to change your web site in your local computer and then upload that page to the web server.aspx that you want to update online and click the Configure Data Source link.  Open the page each_type.

 The following picture shows how the ItemTemplate has been changed. and New are added. Adding Insert. UPDATE. Three new buttons Edit. Update. Delete. and Delete statements  Click the Next button. test the query and finish the wizard. and DELETE statements box and click OK. click Yes. The FormView is regenerated and the existing template is deleted. Check the Generate INSERT. 142Chapter 7 .  Click Edit Templates and make the desired changes for the ItemTemplate.  A warning message to regenerate the FormView is displayed.

The Edit Item Template You can change the properties of each object. Creating a Dynamic Web Site 143 .You can also change templates for the Edit and New statements. The Edit Item Template after making changes  In the Tag Properties.  Select the textbox whose size you want to change. for example the sizes of short and long text boxes.  Click EditItemTemplate from the Display drop-down menu. type values for the Width and Height to change its size and select MultiLine for TextMode to write text on many lines. EditItemTemplate is displayed in the FormView.

 Select File>New>ASPX to create a new dynamic page and save the page naming it upload_pic.  Type a text in the EditItemTemplate.FileName). create a hyperlink to the upload page setting the Target Frame to New Window. Created a hyperlink  Open the upload page and type a title. and Label controls to the page from the ASP. Button.Text = “No File Uploaded.  Drag the FileUpload.FileName . } } </script> The picture file will be uploaded to the ‘C:\x-life\images\types\’ folder.  Add the following script in the Code view. You can create a page to upload picture files. type ‘UploadBtn’ for the ID and ‘Upload’ for the Text in the Tag Properties. If the file is uploaded. Changing button properties <script runat=”server”> protected void UploadBtn_Click(object sender.  Save and preview the page to check how it is working.Text = “File Uploaded: “ + FileUpLoad1.  Select the Button.aspx. 144Chapter 7 . Label1. otherwise ‘No file Uploaded’.HasFile) { FileUpLoad1. it writes ‘File Uploaded’ and its file name.Uploading Pictures You can change all text including the name of the pictures. } else { Label1.SaveAs(@”C:\x-life\images\types\” + FileUpLoad1.NET Controls>Standard.”. EventArgs e) { if (FileUpLoad1. but you cannot upload pictures to the web server using this template.

login. <system.Creating Users You have created the buttons to modify the page. So you should create some users and modifying buttons must be available only for these users.aspx.  Drag the CreateUserWizard control to the page from the Login section in the ASP. now save and preview the page. It is required for the Login Controls to work.  Drag the Login control to the page from ASP.NET Controls.NET Controls>Login. but they are now available for all visitors and any user can change your web site.web> Creating a Login Page  Create a new page from the Master page and click the Create Custom Content link.config file. The Create User Wizard control Creating a Dynamic Web Site 145 .  Add the following code to the web. Creating a New User Page  Create a new page from the Master page and click the Create Custom Content link. The Log In control  The Login page is ready.web> <roleManager enabled=”true” /> <authentication mode=”Forms” /> </system.

Securing the Links with the Login Page  Open the page each_type.NET Controls>Login.  Preview the login page. It may take a few minutes to complete creating the new user for the first time because development server is creating a new user database to store the users’ information in the background. To check the new user.  Drag the CreateUserWizard control to the ItemTemplate section from ASP. The home page opens. The Login control with Anonymous Template 146Chapter 7 . click Edit Templates and select ItemTemplate.  Fill in the form and click the Create User button. You can see the user database in the App_Data folder. The user page is ready. The following message shows that the user has been created successfully and you can create many users in the same way.aspx. now save and preview the page. create-user.aspx.  Type the user name and password and click the Log In button.

 Click the Login to Modify link. The Login Status control The LoginStatus also has two views: Logged Out and Logged In. The LoginView has two views: The AnonymousTemplate and LoggedInTemplate. The LoggedInTemplate is used to show the links when you are logged in. type the user name and password.  You are now logged in. Creating a Dynamic Web Site 147 . The links to modify and the Logout link are visible. The Login View with the Logged in Template  Select the Logged In view in the LoginStatus.  Change the LoginText in the Tag Properties.  Select the AnonymousTemplate and drag the LoginStatus control to the LoginView section. The AnonymousTemplate is used to show the links when you are NOT logged in. The Login Status with the Logged In view  Save and preview the page. Changing the Login Status text  Select LoggedInTemplate view for the LoginView and add the links to be viewed by logged in users. click the Log In button.

net button onto your page.NET Controls>Standard and click the Configure Data Source link. add the following code to the web.net text box control and an asp.aspx is now protected and only the user mesay can open the page.  Choose a database and click Next.To Allow Access to Particular User Only and Deny Everyone Else If you want to protect a page and allow access to a particular user.web> <authorization> <allow users=”mesay“/> <deny users =”*” /> </authorization> </system.aspx”> <system.  Drag and drop an asp. <location path=”search. 148Chapter 7 . Searching in the Database You can do searching in a database and show the found items on the page.  Open the page search.web> </location> The page search.  Select the fields that you want to display and check the ‘Return only unique rows’ box. other users cannot.  Drag and drop the AccessDataSource control to the page from ASP.aspx and click the Create Custom Content link.config page.

Changing button properties  Save and preview the page. written in the TextBox1. test the query and finish the wizard. in the long column of the database and it gets the records with the similar (like) text. Preview the page Creating a Dynamic Web Site 149 .  Click the Next button. Click the WHERE button to add a where clause and make the settings like in the following picture.  Select the button. Adding a condition to the Where clause It searches the text. click the Add button and then OK. The following SQL Select statement is prepared.  Drag and drop a the DataList control and choose the data source. check how it is working. type a name for the button in the Text property and type the current page name (which you are working on) for the PostBackUrl property.

4.Subject: Create a dynamic web site about your favorite sport. Required features: 1. 2. 5. 3. Creating a dynamic web site Uploading pictures Creating a Login Page Creating a New User Page Searching in the database 1 2 3 4 5 150Chapter 7 .

ListView b. Shtml b. Forms e. SORT b. Behaviors e. When you configure a data source. Which tag property is used to write text in a textbox on many lines? a. Right-click the Master page in the Folder List and select New from the Master Page. AccessKey c. Fill in the blanks. 1 c. What is the file extension for a dynamic web page based on the . Login c.aspx…which_type=… a. After adding a control to the page. 1 8. Which control shows only one record’s information? a. Property Builder b. e. Select File>New>ASPX. Dwt e. ?. d. SORT BY 5. Data 4. Css d. ORDER BY e. Text e. which link is used to make changes in formatting? a. False. Configure Data Source c. MaxLength 3. Conditional Formatting b. Refresh Schema d. Select File>New>CSS. 1. Aspx page? (Select two of them) a. False. Fill in the blanks. WHERE c. False. Html c. FormView d. True. connection? a. >. PostbackUrl Creating a Dynamic Web Site 151 . ID d. Columns e.web> <roleManager enabled="… " /> <authentication mode="… " /> </system.web> a. which button is used to sort the data? a..config file. DataPager e. DataList c. Select File>New>Create from the Master Page. = e. Data d. c. <system. The following code is added to the web. It is required for the Login Controls to work. each_type. Select File>New>Create from a Dynamic Web Template. Wrap d. for which property is the search page file name written? a. 1. Text b. Forms b. ? d.NET 9. The following parameter is added to the page to show the first record’s information. TextMode c. Where do you create a new ASP. =. b. Data Source Details c. Modify Data 10. GridView 2. When you create a Search button. How can you create a new page from a Master 7. Layers 6. Advanced d. Data Source Library d. 1ı b.net technology in Expression Web? a. Edit Templates e. True. CommandName b.Questions 1.

C A 10 10 Chapter 5 1 2 3 4 5 6 7 8 9 10 C A.Answer Key Chapter 1 1 2 3 4 5 6 7 8 9 10 B D C C D A B A E B 1 2 3 4 5 6 7 8 9 10 Chapter 2 E C C A B D D E A B 1 2 3 4 5 6 7 8 9 Chapter 3 A D B B A D C A E C 1 2 3 4 5 6 7 8 9 Chapter 4 A B C D D A E D B. E E D B.D C D D B A B E E 10 10 152 . D E D D A B E C A 1 2 3 4 5 6 7 8 9 Chapter 6 C B. E A D B C E 1 2 3 4 5 6 7 8 9 Chapter 7 E A. B. C.

HTML Color Reference Buildin Your Web Site from Scratch 153 .

154 .

61 Behavior 102 Bookmark 48 Broken hyperlinks 34 Frames page 87 Folder List 23. 149 Development Server 122 Download Statistics 64.77 Collapse table border 60 Comments 11 Compressed File 46 Crop 66 CSS Layouts 74 H Home page 25 Horizontal Line 13 Hotspot 46 Hovered hyperlink 50 HTML 8. 67 Active hyperlink 50 AJAX 122 Alternate text 30. 42 N Nested Tables 63 I ID-based styles 73 Image 14 Image map 46 Inline styles 73 Interactive Button 56 Internet Service Provider (ISP) 33 P Padding 76 Page Background 31 Page size 26 Page Title 27 Page Views 23 PHP 122 Pixel 14 PNG 30 Publishing 33 D Database 128.Index A Accessibility Properties 29. 127 Merging Cells 62 Meta 10 C Cascading Style Sheets (CSS) 54. 25 G GIF 30 M Margin 76 Markup tags 8 Master page 122. 91 AutoFit to Contents 61 AutoFormat 64 E Editable region 97 E-mail Link 47 Embedded Style Sheet 72 Expression Web 8 eXtensibleStylesheet Language (XSL) 110 External Style Sheet 72 J . 31. 129. 67 Anchor 15 Appearance 30 ASP . 27 Hyperlink 15.NET 122 Auto Thumbnail 45. 65 Dynamic Web Templates (DWT) 96 Buildin Your Web Site from Scratch 155 .42 Loop 84 B Background 13. 72 Cell padding 61 Cell spacing 61 Class-based styles 73.js 118 JavaScript 107 JPEG 30 K Keep aspect ratio 30 Keywords 10 F FrontPage 8 File Download 46 FLV 85 L Layer 100 Layout Tables 54 Line break 11 Links 15.

54 Tag-based styles 73. 80 Target Frame 44 Task panes 23 Templates 24 Thumbnail 44 Title bar 23 Toolbars 23 Transparent 83 S Save Embedded Files 32.Q Quality 66 Query 131 Quick Tag Selector Bar 23 <i> 11 <u> 11 <font> 12 <hr> 13 bgcolor 13 Web Presence Provider 33 Web site 8 World Wide Web (WWW) 8 X . 68 Screen Tip 42 Scroll Bars 23 Server 8 Site Summary 34 Slow pages 34 Sound formats 83 Spelling 33 Splitting Cells 63 Status Bar 23. 108 Swap Image 103 Swf 82 Synchronize files 36 T tag 8 <html> 10 <head> 10 <body> 10 <title> 10 <h1> 11 <p> 11 <br> 11 <center> 11 <b> 11 U Uniform Resource Locator (URL) 43 Unlinked files 34 V Visited hyperlink 50 W Watermark 31 Web hosting company 33 Web page 8 156 .xsl 118 Extensible Markup Language (XML) 110 R Recalculate Hyperlinks 35 Remote Web Site 35 Reports 33 background 13 <img> 14 <a> 15 link 16 vlink 16 alink 16 <table> 16 <style> 72 <div> 100 Table AutoFormat 64 Table layout 55 Tables 16.

net/Learn Keyboard shortcuts keyboard shortcut allows you to select a menu command or perform an action in Microsoft Expression Web by pressing one or more keys on your keyboard instead of using the mouse.com/Expression Expression Web customer support center http://support.microsoft. For example. tutorials.com/xweb/ Feedback and bug reporting center http://connect. CTRL+TAB CTRL+SHIFT+TAB Buildin Your Web Site from Scratch 157 . Switch between open web pages Switch between open web pages in reverse order. the following additional content and resources are available: î î î î î î Expression Community website (support. refresh Code view changes in Design view.msdn. to open the Insert Hyperlink dialog box.com Expression Web forum http://forums.com/default.APPENDIX Learning and community resources Apart from the Expression Web Help. Press CTRL+N CTRL+O CTRL+F4 CTRL+S CTRL+P Refresh a web page. videos. Save a web page. and webcasts) http://expression. press CTRL+K.com/en-US/web/threads Expression Web team blog http://blogs.microsoft.microsoft. Print a web page.expression. Close a web page.microsoft. Web page shortcuts To do this Create a new web page Open a web page.aspx/ph/12105 Silverlight http://silverlight. refresh the Folder List task pane F5 and Web Site tab. training.

CTRL+PAGE DOWN or CTRL+PAGE UP ALT+PAGE DOWN or ALT+PAGE UP ALT+F1 Rename the currently selected file in the Folder List task F2 pane. Press ALT+F4 ESC CTRL+Z or ALT+BACKSPACE CTRL+Y or SHIFT+ALT+BACKSPACE ALT+F6 ALT+SHIFT+F6 Find and replace shortcuts To do this Find text or code. Undo an action. Show or hide the Folder List task pane. Move between Code and Design panes in Split view. Design. Esc CTRL+/ CTRL+ALT+/ Application shortcuts To do this Quit Expression Web. Press CTRL+F F3 SHIFT+F3 CTRL+F3 CTRL+SHIFT+F3 CTRL+H F7 SHIFT+F7 158 .Preview a web page in a web browser. Toggle between open dialog boxes. show or hide Visual Aids. Find the next occurrence of the current selection. Cancel an action. Toggle between open dialog boxes in reverse order. and Split views. Find the next occurrence of the most recent search. show or hide Formatting Marks. Find the previous occurrence of the current selection. Move between Code. Select the element that contains the current selection. Modify page properties. Check spelling. Redo or repeat an action. In Design view. Replace text or code. Find the previous occurrence of the most recent search. Look up a word in the thesaurus. F12 or CTRL+SHIFT+B ALT+ENTER Delete a web page or folder in the Folder List task pane or DELETE any dialog box. In Design view.

Next temporary bookmark. Press CTRL+Q CTRL+F2 F2 SHIFT+F2 CTRL+G CTRL+ENTER CTRL+PERIOD CTRL+COMMA CTRL+/ CTRL+SPACEBAR CTRL+SHIFT+: CTRL+. Select tag and its contents. Apply italic formatting. Increase font size Decrease font size Cut selected text or graphics. Insert start tag. Find matching tag. Press CTRL+B CTRL+U CTRL+I CTRL+PLUS SIGN CTRL+EQUAL SIGN CTRL+C or CTRL+INSERT CTRL+SHIFT+> CTRL+SHIFT+< CTRL+X or SHIFT+DELETE CTRL+V or SHIFT+INSERT CTRL+ SHIFT+C CTRL+SHIFT+V Buildin Your Web Site from Scratch 159 . Apply superscript formatting.Code view shortcuts To do this Show the Quick Tag Editor. CTRL+SHIFT+SPACE CTRL+SPACE CTRL+ENTER Perform an incremental search. Insert end tag. Insert temporary bookmark. To do this Increase indent. List Code Snippets. Insert code snippet. CTRL+L Show an IntelliSense code tip. Copy text or graphics. Follow code hyperlink. Insert HTML comment. Go to next code hyperlink. Press TAB SHIFT+TAB CTRL+: CTRL+' CTRL+] CTRL+[ ALT+LEFT ARROW ALT+RIGHT ARROW Show an IntelliSense popup menu. Decrease indent. Copy formatting. Select tag. Select block. Paste text or graphics. Complete word. Previous temporary bookmark. Paste formatting. Apply subscript formatting. Apply an underline. CTRL+ALT+F Text shortcuts To do this Apply bold formatting. Find matching brace. Complete a partially typed word. Go to line. Go to previous code hyperlink.

Select the Style menu in the Common or Formatting toolbar Select the Font menu in the Common or Formatting toolbar Select the Font Size menu in the Common or Formatting toolbar Select the element that contains the current text CTRL+SHIFT+Z or CTRL+SPACEBAR CTRL+E CTRL+L CTRL+R CTRL+M CTRL+ SHIFT+M SHIFT+ENTER CTRL+SHIFT+SPACEBAR CTRL+SHIFT+S CTRL+SHIFT+F CTRL+SHIFT+P ESC Tables. Right align a paragraph. Select the preceding table cell's content. Indent a paragraph from the left. Select the cell or table that contains the current element With a graphic selected. Left align a paragraph.Remove manual formatting. Insert a line break. Press CTRL+SHIFT+R CTRL+SHIFT+T CTRL+SHIFT+V Frames shortcuts To do this Select the next frame or frameset. Press SHIFT+CTRL+ALT+T TAB SHIFT+TAB ESC CTRL +T CTRL+K Remote Web Site view To do this Display the Remote Web Site Properties dialog box. Center a paragraph. Press CTRL+SHIFT+F6 CTRL+F6 160 . Insert a nonbreaking space. Display the Optimize HTML tab of the Remote Web Site Properties dialog box. and hyperlinks shortcuts To do this Insert a table. Create a hyperlink. Indent a paragraph from the right. graphics. create an auto thumbnail. Select the next table cell's content. Open the selected folder. Select the previous frame or frameset.