Project 1: Creating a Web Site from Scratch. Skills and Tools: Use Expression Web tools to create a Web site

Transcription

1 E00EW3.qxp 4/14/2007 3:17 PM Page 1 Workshops w Introduction The Workshop is all about being creative and thinking outside of the box. These workshops will help your right-brain soar, while making your left-brain happy; by explaining why things work the way they do. Exploring Expression Web's possibilities is great fun; however, always stay grounded with knowledge of how things work. Knowledge is power. Getting and Using the Project Files Each project in the Workshop includes a start file to help you get started with the project, and a final file to provide you with the results so you can see how well you accomplished the task. Before you can use the project files, you need to download them from the Web. You can access the files at After you download the files from the Web, uncompress the files into a folder on your hard drive to which you have easy access from Expression Web. Project 1: Creating a Web Site from Scratch Skills and Tools: Use Expression Web tools to create a Web site Expression Web provides the tools you need to create a professional Web site that meets industry standards, which means Web browsers everywhere can display your site. The Project In this project, you'll learn how to create a root folder to organize and store your Web site files, create a Web site from scratch, which includes starting a new site and creating Web pages. In later projects in this workshop, you ll add to the site by inserting tables, text and graphics, linking pages and other sites, adding interactivity and navigation, creating and attaching cascading style sheets, creating templates, and publishing your Web site to a remote Web server for viewing on the Web. The Process 1 In Windows Explorer or Finder, define a local root folder where you ll store all the elements that you will use to build your Web site. Navigate to the Workshops folder for Project 1, create a folder called mysite. This folder acts as the root, or main, folder for you web site. In the mysite folder, create the following folders: images, css, projects, and scripts. w 1

2 E00EW3.qxp 4/14/2007 3:18 PM Page Start Microsoft Expression Web 3. Click the Site menu, and then click New Site. Click the General category. Click the Empty Web Site page type in the second column. Click Browser, navigate to the mysite folder in the Workshops folder for Project 1, and then click Open. That s all you need to get started. You ll set other site options when you re ready to publish your site to the Web Click OK. Click the Panels menu, and the click Folder List (if necessary) to display the Folder List panel with your new web site. Now, let s create a new main web page, known as the home page, for the new web site. Click the File menu, point to New, and then click Page. Click the General category. Click the HTML page type Click OK. The new Web page appears in the Folder List panel. Click the File menu, and then click Properties Click the General tab. 2w 15 Type Website Teacher in the Title field, and then type Web site, Tutorial, Expression Web in the Keywords field. The Title field serves three purposes. First, when a visitor open this Web page in a browser, the Title appears on the title bar and tab as the title. Second, when a visitor bookmarks or adds this Web page to favorites, the Title appears as the default title. Finally, most search engines use the Title to help direct visitors to your site. 16

3 E00EW3.qxp 4/14/2007 3:18 PM Page Click OK. Click the File menu, and then click Save. Navigate to the mysite folder in the Workshops folder for Project 1, and then save the new main web site page as index.html. The index.html web page acts as the home page for your web site. When visitors access your URL for the web site, the Web server hosting your Web site automatically looks for and displays the index.html page. 19 Click the File menu, and then click Exit. The Results Finish: Compare your completed project file with the following image: Project 2: Adding Web Page Tables Skills and Tools: Insert and adjust tables to create a Web page layout Tables are grids that allow the designer to control the content of a Web page. The three main mechanisms of a table are rows, columns, and cells. A row extends across the entire table from left to right. Columns extend vertically from the top to the bottom of the table. A cell is the area where a row and column intersect. Creating a table in Expression Web is basically a three-step process: Step one: insert the table, Step two: modify the table to fit the specific design requirements of the current page, and Step three: add the content (text, graphics, etc) to the individual cells. Tables are a quick and easy way to create the layout of a Web page, however they are not as flexible as using CSS (Cascading Style Sheets). In a later project, you ll create a Web page layout using CSS. The Project In this project, you'll learn how to a insert table into a web page, nest a table in another table, set table properties, and then make adjustments to the tables. The Process 1 Start Microsoft Expression Web 3. wworkshops 3

4 E00EW3.qxp 4/14/2007 3:18 PM Page 4 2 Click the Site menu, click Open Site, click Browse, navigate to the Workshop files for Project 2, display the Start folder, click Open, and then click Open Folder Location. The Workshop folders are typically located in the following path: D:/My Folder/Expression Web 3 DVD/Workshops/P2 Add Tables/Start Where D: is your hard disk; My Folder is the location where you stored the Workshop files; and Expression Web 3 DVD is the main folder (differs between download and DVD). Click the Panels menu, and then click Folder List (if necessary) to display the Folder List panel. In the Folder List panel, double-click the index.html page icon to open the page. Click the Tools menu, click Page Editor Options, click the General tab, select the Assign unique IDs to new tables check box, and then click OK. This option has Expression Web automatically create and assign CSS IDs to tables, so you can apply styles later. In Design view, click the Table menu, and then click Insert Table. Enter the table specifications as shown in the illustration for the header part of the page, and then click OK. The table width represents the width of the Web site. In order to display your site on monitors with 800 x 600 screen size (resolution) without scrolling, it s important to keep the width of your site to less than 800 pixels. I have decided to use 675 as a table width w 7 8 In Design view, click below the current table, click the Table menu, click Insert Table, enter the following table specifications (2 rows, 2 columns, 675 table width (pixels) for the body part of the page), and then click OK. In Design view, click below the current table, click the Table menu, click Insert Table, enter the following table specifications (1 rows, 1 columns, 675 table width (pixels), 40 table height (pixels), and Background Color to #bfd0be for the footer part of the page), and then click OK. 10

5 E00EW3.qxp 4/14/2007 3:19 PM Page 5 9 Select the two cells on the right in table 2 (middle), click the Table menu, point to Modify, and then click Merge Cells. You can drag to select multiple cells. You can also use commands on the Select submenu on the Table menu Select the first cell in the first row in table 2 (middle), click the Table menu, point to Table Properties, and then click Cell. Change the Background Color to #bfd0be, set the Width to 196 (pixels), set the Height to 238 (pixels), and then click OK. Select the first cell in the second row in table 2 (middle), click the Table menu, point to Table Properties, and then click Cell. Change the Background Color to #c7c7c7, set the Horizontal alignment to Left, and set Vertical alignment to Top, and then click OK. Click in the first cell in the first row in table 2 (middle). In Design view, click the Table menu, and then click Insert Table. Enter the following table specifications (5 rows, 3 columns, background color to #bfd0be), and then click OK. Select all the cells in the nested table in the first cell in the first row in table 2 (middle), click the Table menu, point to Table Properties, and then click Cell. Change the Horizontal alignment to Left, and set Vertical alignment to Middle, set the Height to 40 (pixels), and then click OK Drag the column bars to adjust the columns widths (first column to 33, second column to 20, and third column to 131) to create a table similar to the one shown in the illustration. Click the File menu, and then click Save All Press F12 to preview your site in your default Web browser, and then click the Close button on your browser window. Click the File menu, and then click Exit. The Results Finish: Compare your completed project file with the following image: 16 w Workshops 5

6 E00EW3.qxp 4/14/2007 3:19 PM Page 6 Project 3: Using Cascading Style Sheets Skills and Tools: Add and format text using Cascading Style Sheets Cascading Style Sheets (CSS) are a collection of formatting rules that control the appearance of the content in a Web page. Using CSS styles to format a page separates content from presentation. This gives you greater flexibility and control over the exact appearance of your Web pages. With CSS you can control text properties including specific fonts and font sizes; bold, italics, underlining, and text shadows; text color and background color, link color and underlining. With CSS controlling fonts, it ensures a more consistent treatment of your page layout and appearance in multiple browsers. The Project In this project, you'll learn how to create an external CSS style sheet, and create and apply CSS styles. The Process Start Microsoft Expression Web 3. Click the File menu, click Open Site, click Browse, navigate to the Workshop files for Project 3, display the Start folder, click Open, and then click Open. Click the Panels menu, and then click Folder List (if necessary) to display the Folder List panel. In the Folder List panel, double-click the index.html page icon to open the page Enter text in the nested table and the last row as shown in the illustration. To insert the, click the Insert menu, click Symbol, select the symbol, and then click Insert. 6w 6 7 Click in the first cell in the third row (filled grey), click the Numbering button on the toolbar, enter ordered list text in the cell as shown in the illustration. Press Enter (Win) or Return (Mac) after each entry. At the bottom of the list, press Enter (Win) or Return (Mac) twice, and then type Click any project to start!. Click the New Document button arrow on the toolbar, and then click CSS. The blank CSS tabbed document appears. symbol

7 E00EW3.qxp 4/14/2007 3:20 PM Page 7 8 Click the Save button on the toolbar, navigate to the CSS folder for the project, enter Style_wbt as the file name for the CSS style in the Save As input box, leave the other options at default values, and then click Save Click the Panels menu, and then click Manage Styles. A list of styles generated by Expression Web appear in the CSS Styles list. Instead of creating styles that only apply to the current page, attach an external CSS style sheet that you can use for your entire site. 10 Click the Attach Style Sheet button in the Manage Styles task panel Click Browse, navigate to the CSS folder for the project, select the Style_wbt file, click Open, and then click OK. When you type text in Expression Web, the program uses default spacing (margin and padding), which can sometimes cause confusion when you create CSS styles. You can remove the default spacing by creating a Universal Sector style. This allows you to have full control over the CSS styling on your pages. 12 Click the New Style button on the Manage Styles panel. 13 In the Selector field, delete the current text, and then enter *, which an asterisk (Shift+8) Click the Define in list arrow, click Existing style sheet, click the URL list arrow, and then click css/style_wbt.css Click the Box category, and then enter 0 in the Top field for padding and margin. Click OK. Click the New Style button on the Manage Styles panel. The period (.) at the start of a style name creates a CSS class type. A class applies a style to a range of HTML elements. A pound sign (#) at the the start of a style name creates a CSS ID type. An ID applies to only one HTML element. w 18 In the Selector Name field, type #table Workshops 7

8 E00EW3.qxp 4/14/2007 3:20 PM Page 8 Expression automatically assigned an ID to table 1 (header) as table1, so I used #table1 to assign a CSS ID to it. This creates a CSS ID for a background image in the header table Click the Define in list arrow, click Existing style sheet, click the URL list arrow, and then click css/style_wbt.css. Click the Background category, click Browse, navigate to the images folder, select the file banner675.jpg, click Open, change background-repeat to no-repeat, and then set (x) background-position to left. Click the Position category, set the height to Click OK. 23 Click the New Style button on the Manage Styles panel In the Selector Name field, type footer to replace the current selection. The period for a class is already there, so the selector is.footer. 25 Click the Define in list arrow, click Existing style sheet, click the URL list arrow, and then click css/style_wbt.css. 26 Click the Font category, and then specify the options as shown in the illustration Click the Box category, clear the Same for all check box (padding), and then set padding: left to 15 (pixels). Click OK Select the text in the last row, click the Apply Styles tab, and then click.footer Click the New Style button on the Apply Styles panel. 31 In the Selector Name field, type list to replace the current selection. 8w Click the Define in list arrow, click Existing style sheet, click the URL list arrow, and then click css/style_wbt.css. Click the Font category, and then specify the following options: font-family as Tahoma, fontsize as small, and text-decoration select none. Click the List category, and then specify the following options: list-style-type as decimal, liststyle-position as inside

9 E00EW3.qxp 4/14/2007 3:21 PM Page 9 35 Click the Box category, clear the Same for all check box (padding), and then set padding: top and bottom to 10 (pixels), and left to 25 (pixels). 36 Click OK 37 Select the ordered list of text (1-10), and then click.list on the Apply Styles panel. 38 Click the New Style button on the Apply Styles panel. 39 In the Selector Name field, type subtext to replace the current selection. 40 Click the Define in list arrow, click Existing style sheet, click the URL list arrow, and then click css/style_wbt.css. 41 Click the Font category, and then specify the following options: font-family as Tahoma, fontsize as small, font-weight as bold, and color as #FFFFFF (white) Click the Block category, set text-align to center, click the Box category, clear the Same for all check box (padding), and then set padding: top to 10 (pixels), and bottom to 10 (pixels). 43 Click OK. 44 Select the Click any project to start! text, and then click.subtext (text white at the bottom of the list) on the Apply Styles panel. 45 Click the New Style button on the Apply Styles panel. 46 In the Selector Name field, type menulink to replace the current selection Click the Define in list arrow, click Existing style sheet, click the URL list arrow, and then click css/style_wbt.css. Click the Font category, and then specify the following options: font-family as Tahoma, font-size as small, font-weight as bold, and color as #38524f and text-decoration select none. Click OK w 50 Select the each one of the menu links text (Home, About Us, Suggestion Box, and Contact Us), and then click.menulink on the Apply Styles panel. 51 Point to.style3 on the Apply Styles panel, click the list arrow, click Delete, and then click Yes. Workshops 9

10 E00EW3.qxp 4/14/2007 3:21 PM Page Point to.style2 on the Apply Styles panel, click the list arrow, click Rename class..., type table2cell_list, and then click OK. Point to.style1 on the Apply Styles panel, click the list arrow, click Rename class..., type table2cell_nav, and then click OK. Click the File menu, and then click Save All, and then click OK to save embedded files. Press F12 to preview your site in your default Web browser, and then click the Close button on your browser window. Click the File menu, and then click Exit. The Results Finish: Compare your completed project file with the following image: Project 4: Inserting Images Skills and Tools: Define an image folder and insert images 10w It's important to set up a folder within your site folder that holds all of the images for a specific Web project. Creating this folder can be accomplished when you set up the site, or it can be made later using the Manage Sites command. Adding an image to a Web page can be as simple as a drag and a drop. Expression Web gives you several ways to add images to your Web pages, including the Image menu on the Insert panel and the Image command on the Insert menu. The method you choose to add images depends on how you like to work with Expression Web. Any time you add an image to a Web page, Expression Web (by default) asks you to type in a description, and alternate text. This information is used by screen reader applications (i.e. JAWS) for visually impaired users; therefore it's important that this information is added to the image. The Project In this project, you'll learn how to define an image folder and insert images into a Web page. The Process 1 2 Start Microsoft Expression Web 3. Click the Site menu, click Open Site, click Browse, navigate to the Workshop files for Project 4, display the Start folder, click Open, and then click Open.

11 E00EW3.qxp 4/14/2007 3:21 PM Page 11 3 Click the Panels menu, and then click Folder List (if necessary) to display the Folder List panel In the Folder List panel, double-click the index.html page icon to open the page. In the Folder List panel, click the Plus icon (+) to display images folder. Drag the main.jpg file to the cell in the right cell in table2 (middle). The Accessibility Properties dialog box opens. Click in the Alternate Text Input field, and then type main image as a short description for the image. Click OK. Repeat the steps 6 and 7 to place 10Projects.jpg at the top of the first cell in the third row, and bullet.jpg in the cell to the left of each menulink in the nested table in the first cell in the second row. Click the File menu, and then click Save All, and then click OK to save embedded files. Press F12 to preview your site in your default Web browser, and then click the Close button on your browser window. Click the File menu, and then click Exit. 8 4 The Results Finish: Compare your completed project file with the following image: Project 5: Creating Hyperlinks Skills and Tools: Insert hyperlinks Adding a link to a Web page is a relatively simple and painless operation. You will need to decide what to use for the link (text, graphic, animation), what you are linking to (Web page, site, http, etc), and the correct path to the destination (URL or Uniform Resource Locator). Once you've answered those questions, it's a simple matter of opening Expression Web and getting to work. In this example, you're creating a simple text link that will connect the active Web page to the index page on another site. w Workshops 11

12 E00EW3.qxp 4/14/2007 3:22 PM Page 12 The Project In this project, you'll learn how to create several different types of hyperlinks. The Process Start Microsoft Expression Web 3. Click the Site menu, click Open Site, click Browse, navigate to the Workshop files for Project 5, display the Start folder, click Open, and then click Open. Click the Panels menu, and then click Folder List (if necessary) to display the Folder List panel In the Folder List panel, double-click the index.html page icon to open the page. Select the Home text. Click the Insert menu, and then click Hyperlink. You can link to existing files or web pages or enter an URL address. Click the index.html file, and then click OK Create links from the About Us text to aboutus.html, Projects text to projects.html, Suggestion Box text to suggestionbox.html, and Contact Us text to contactus.html. Click the Panels menu, click Apply Styles, point to the.menulink style, click the list arrow, and then click Modify Style. Change the Selector name to a.menulink, and then click OK w This changes the CSS style to a custom hyperlink style. There are other general hyperlink styles, such as a:active, a:link (non point), a:hover (point to), a:visited (after clicked), which you ll change later. Click in table 1 (header), and then press the Left Arrow key to place the insertion point before the table. Click the Insert menu, and then click Bookmark. Type top, and then click OK. Scroll to the bottom of the page, select the Back to Top text, click the Insert menu, click Hyperlink, click Place in This Document, click top, and then click OK. This creates a link to a bookmark. 14

13 E00EW3.qxp 4/14/2007 3:22 PM Page Select the Making Table Structures text, click the Insert menu, click Hyperlink, click projects.html, click Bookmarks, click p1, click OK, and then click OK This adds a bookmark to the hyperlink (e.g..../projects.html#p1), so you can jump to a specific point on a page. You ll add these anchor names in a later project Repeat step 15 for each of the remaining projects and change the anchor point name to #p2, #p3, etc. to #10. Click the New Style button on the Apply Styles panel. Click the Selector list arrow, and then click a:hover. Click the Define in list arrow, click Existing style sheet, click the URL list arrow, and then click css/style_wbt.css In the Font category, set the color to #B32923, select the none check box, and then click OK. This changes the general style of hyperlinked text when you point to it. 21 Click the New Style button on the Apply Styles panel Click the Selector list arrow, and then click a:link. Click the Define in list arrow, click Existing style sheet, click the URL list arrow, and then click css/style_wbt.css In the Font category, set the color to # (black), select the none check box, and then click OK. This changes the general style of hyperlink text Click the New Style button on the Apply Styles panel. Click the Selector list arrow, and then click a:visitor. Click the Define in list arrow, click Existing style sheet, click the URL list arrow, and then click css/style_wbt.css. In the Font category, set the color to # (black), select the none check box, and then click OK. 28 w This changes the general style of hyperlinked text after you click (visit) it. Workshops 13

14 E00EW3.qxp 4/14/2007 3:23 PM Page Select the main.jpg image on the page. 30 Click the View menu, point to Toolbars, and then click Pictures. 31 Click the Rectangle Hotspot button on the Pictures toolbar. 32 Drag a rectangle around the Perspection logo in the main.jpg image. 33 Enter in the Address field to create a hyperlink to another Web site with a URL on the Web, and then. 34 Click ScreenTip, enter Perspection, click OK, and then click OK again. 35 Right-click the main.jpg picture, click Picture Properties, click the Appearance tab, change Border thickness to 0, and then click OK Click the Close button on the Pictures toolbar. 37 Click the File menu, and then click Save All, and then click OK to save embedded files. 38 Press F12 to preview your site in your default Web browser, and then click the Close button on your browser window. 39 Click the File menu, and then click Exit. The Results Finish: Compare your completed project file with the following image: 14w Project 6: Creating and Applying a Template Skills and Tools: Create and apply a template A template is a common structure of a Web site design. Usually Web sites follow a standard structure, such as a header, a navigation bar and a footer that are common to all your pages. Now, imagine that your site has 50 pages. If you need to make one small change, for example adding a new link, you would need to go to each of those pages and change it manually. But using a template you only need to change it in the template and all the pages will be updated automatically. Templates contain editable and locked areas, so you can add page specific content and protect template areas from being changed.

15 E00EW3.qxp 4/14/2007 3:23 PM Page 15 The Project In this project, you'll learn how to create a template from a Web page, apply a template to other pages, and then update pages after making a change to the template. The Process Start Microsoft Expression Web 3. Click the Site menu, click Open Site, click Browse, navigate to the Workshop files for Project 6, display the Start folder, click Open, and then click Open. Click the Panels menu, and then click Folder List (if necessary) to display the Folder List panel. In the Folder List panel, double-click the designtemplate.html page icon to open the page. Click the File menu, and then click Save As. Click the Save as type list arrow, and then click Dynamic Web Template (*.dwt). Enter mysitetemplate in the Save as field. Click Save. The template is saved with the.dwt file extension in the site root folder by default. Click the main.jpg image on the page, and then press Delete. The insertion point remains in the table cell where the image used to be located Click the Format menu, point to Dynamic Web Template, and then click Manage Editable Regions Enter mainpagecontent. Click Add. Click Close. The editable region on the template allows you to enter different content of pages. The common content is only changeable in the template. w 14 Click the File menu, and then click Save. 15 Open the files index.html, aboutus.html, projects.html, suggestionbox.html, and contactus.html. Workshops 15

16 E00EW3.qxp 4/14/2007 3:23 PM Page Click a document tab (opened in step 15), drag the mysitetemplate.dwt file from the Folder List panel to the blank document window, click Yes to erase current material, and then click Close. Repeat this step for each of the open documents Select the index.html tab to display the file. Select the mainpage Conten text in the editable region, and then press Delete. In the Folder List panel, drag the main.jpg file from the images folder to the mainpagecontent editable region, enter banner as Alternate text, and then click OK. Select the mysitetemplate.dwt tab to display the file. From the Folder List panel, drag the browsers.jpg file from the Folder List panel to the end of the Click any project to start! text, enter browsers as Alternate text, click OK. Right-click the picture, click Picture Properties, click the Appearance tab, click the Left Wrapping style icon, change the Horizontal and Vertical margins to 10px (pixels), and then click OK. Click the File menu, and then click Save. Click Yes to replace the template with the new changes w Click Yes to update all documents with the template changes. Click Close to complete the update. 24 Select the index.html tab to display the file with the updated template changes applied to the Web page. Click the File menu, click Save All, and then click Yes as need to update files

17 E00EW3.qxp 4/14/2007 3:24 PM Page Click the File menu, and then click Exit. The Results Finish: Compare your completed project file with the following image: Want More Projects You can access and download more workshop projects and related files at After you download the files from the Web, uncompress the files into a folder on your hard drive to which you have easy access from Expression Web 3. Get Everything on DVD Instead of downloading everything from the Web, which can take a while depending on your Internet connection speed, you can get all the files used in this book and much more on a Expression Web 3 On Demand DVD. The DVD contains task and workshop files, tips and tricks, keyboard shortcuts, and other goodies from the author. To get the Expression Web 3 On Demand DVD, go to w Workshops 17

18 E00EW3.qxp 4/14/2007 3:24 PM Page 18