Chapter 2: Building a Web Page

1. Chapter 2: Building a Web Page By Bill Bennett Associate Professor MSJC CIS MVC

2. What You Will Learn • How to set the default DTD for your Web site • How to build your first Web page • How to set page properties for a Web page • How to format text-based elements within a Web page • How to spell check your Web pages • How to preview your Web pages within a browser directly from Expression Web with one click of a button

3. Document Type Declaration • Document Type Declarations need to be added to the beginning of all Web pages in your Web site to inform the Web browsers how to correctly interpret the contents of a Web page • To set the default DTD for your Web site, open the Tools menu and click on Page Editor Options

4. Document Type Declaration • When the Page Editor Options dialog box opens, click on the Authoring tab • On the Authoring tab you can set the Default Document Type, the Doctype and Secondary Schema, and the default Cascading Style Sheet (CSS) Schema • It is recommended that for most Web pages you use the XHTML Strict DTD • Choosing a “Transitional” DTD is not desirable because it forces Web browser to go into “Quarks” mode

5. Creating a New Page In Expression Web there are 4 ways to create a new HTML document: • Open the File menu, choose New, and then choose Page from the fly-out menu that appears New Document button • Click on the down arrow to the right of the New Document button on the toolbar and choose Page • Click on the New Document button on the toolbar • Hold down the Ctrl key on your keyboard and press the letter “N” (as in “new”)

6. New Page/Web Site Dialog Box • If you chose New -> Page from the File menu, you will see the Newdialog box with the Pagetab selected • In the first column is a list of categories you can choose from. Once you choose a category, a list of page types will display in the middle column • As you select a page type in the middle column, you will see a Description and a Preview of the selected page in the right-hand column

7. Saving a Document • After creating your new HTML document, immediately save it by opening the File menu and choosing Save orCtrl + “S” • Save your new file to you’re My Web Sites\CSIS117d\chapter02folder and name it default.htm

8. Page Properties: General • To view your new document’s page properties and to change items like the title, description, and keywords, right-click • in the document window and choose Page Properties from the context menu that appears

9. Page Properties: Formatting • The Formatting tab of the Page Properties dialog box lets you assign a background picture to your Web page and lets • you assign the default background and text colors as well as the default colors for any hyperlinks you add to your Web page

10. Page Properties: Advanced • The Advanced tab of the Page Properties dialog box lets you assign margin values to your Web page. It is important • To note that the default margin setting for a Web page is 10 pixels, so if you want to have elements align to the top or left of your page you must set your margins to 0

11. Working with Text • Pasting Text • Line Breaks (br) vs. Paragraph Breaks (p) • Format Text Based on Elements • Applying Headings (h1 – h6) • Formatting Text • Choosing a Font • Set Font Sizes • Apply Text Styles • Italics (em) • Bold (strong) • Align and Indent Text • Lists • Ordered/numbered List (ol) • Unordered/bulleted List (ul) • Highlight and Set Text color Text in parenthesis represents the actual HTML tags that are inserted into the Web page’s code for the selected text

12. Pasting Text

13. Line Breaks vs. Paragraph Breaks • When you are working with text in Expression Web you can create a new paragraph by pressing the Enter key on your keyboard • If you press Alt + Enter, Expression Web will generate a line feed, but will not create a new paragraph

14. Applying Headings • The (element) Styles drop-down list box allows you to choose heading sizes 1 – 6 as well as any styles available to the Web page • The lower the heading number the larger the font size • Styles will be covered in a later chapter the Common toolbar You can choose a heading size from the Styles drop-down list box

15. Font dialog box Formatting Text • To format selected text you can: • Use the buttons on the Common toolbar or • Select Font, Paragraph, or CSS Styles from the Format menu or • Select a style from either the Apply or Manage Styles task panes or • Right-click on the selected text and choose either: • Font or • Paragraph

16. Applying Text Styles • Text styles should NOT be confused with element styles • Text styles refers to applying bolding, italics, or underlines to selected text the Common toolbar Bold Underline Italic

17. Aligning and Indenting Text • From the Common toolbar you can: • Set paragraph alignment - left, center, and right, for the selected text • Decrease the indenting of the selected text • Increase the indenting of the selected text the Common toolbar Decrease and Increase text indenting Align text left, center, or right

18. Lists: Bulleted or Numbered • In order to add a bulleted or numbered list of items to your Web page, select the text you want to be bulleted or numbered and click on the appropriate button the Common toolbar Numbered lists Bulleted lists

19. Highlighting and Text Color the Common toolbar • Color Models Supported by Expression Web • Web Safe Colors • RGB (Red, Green, Blue) • HEX (Hexidecimal) • HSL (Hue, Saturation &Luminance) Highlight (Background) color Text color Click on black down arrows and choose More Colors Opens this Click on Select to get an eyedropper tool which lets you click on elements in a page, including images, to capture its color

20. Insert a Horizontal Rule • Horizontal Rule <hr/> • To insert a Horizontal Rule, open the Insert menu, click on HTML, and then choose Horizontal Rule from the fly-out menu that appears • Tag Properties (attributes): noshade, size, width, align, style, class, title, id • Applying Borders • Configured and applied through CSS Styles

21. Spell Checking Your Document

22. Previewing Web Pages • Edit Browser List • Install Firefox

23. End-of-Chapter Exercise In this exercise you will build the home page for the fictitious Vecta Corp. Web site. All of the files that you’ll need for this exercise are in the Chapter02 folder which can be found in the WROX Exercise files folder that you downloaded and unzipped on your computer previously. When building the Web page in this exercise, you should perform the following steps: • Start by creating a new HTML document and immediately save your document as default.htm in the chapter02 folder. • Open Windows Explorer (My Computer not Internet Explorer) and navigate to your chapter02 exercise folder inside of the My Websites/CSIS117d folder. Open the Assets subfolder, then drag and drop the content text file into the new HTML page you created in Expression Web. • From the dialog box that opens chose “Normal paragraph with line breaks.” • Change the paragraphs with the text “Welcome,” “Our Solutions,” and “Client Testimonials” to h3 headings. • Select the text in each of the h3 headings and change their font to Arial, Helvetica, sans-serif. change the font color to Navy (hex 00,00,80), and align the text center. • Then select the entire h3 element and change the background (highlight) color of each heading to Silver (hex c0,c0,c0) and apply a solid 1 pt. border to all four sides. • Under the heading “Our Solutions” combine each sub-heading and its description into three individual paragraphs. Use shift + enter after each sub-header so that its description moves underneath the sub-header. Select all three paragraphs and apply an unordered list (bullets) to them. • Under the heading “Client Testimonials” select each testimonial and italicize the text. Then select the name and title of each individual under the testimonial and indent the text • Finally, add a solid, silver, 3 pixel high, 50% wide horizontal rule at the very bottom of the page. • Preview your work in the browser, and compare it with the image of the finished page you see on the next slide. • Finally right-click on the default.htm file you created in your chapter02 folder and choose “Publish selected files.” Once your file has published successfully, open a Web browser and navigate to your page by typing http://cis.msjc.edu/Sites/First Initial + Last Name + last 3 digits of your student ID/chapter02/default.htm. If you can see your page then email the URL to your instructor to receive credit. Remember to put CSIS 117d Chapter 2” in the subject field of your email to your instructor.