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

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

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

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

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

New Page/Web Site Dialog Box If you chose New -> Page from the File menu, you will see the New dialog box with the Page tab 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

Saving a Document Save your new file to youre My Web Sites\CSIS117d\cha pter02 folder and name it default.htm After creating your new HTML document, immediately save it by opening the File menu and choosing Save or Ctrl + S

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

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

Page Properties: Advanced 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 The Advanced tab of the Page Properties dialog box lets you assign margin values to your Web page. It is important

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 pages code for the selected text

Pasting Text

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

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

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 Font dialog box

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

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 Align text left, center, or right Decrease and Increase text indenting

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

Highlighting and Text Color Color Models Supported by Expression Web – Web Safe Colors – RGB (Red, Green, Blue) – HEX (Hexidecimal) – HSL (Hue, Saturation & Luminance) the Common toolbar Highlight (Background) color Text color 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 Click on black down arrows and choose More Colors

Insert a Horizontal Rule Horizontal Rule – 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

Spell Checking Your Document

Previewing Web Pages Install Firefox Edit Browser List

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 youll 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: 1.Start by creating a new HTML document and immediately save your document as default.htm in the chapter02 folder. 2.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. 3.From the dialog box that opens chose Normal paragraph with line breaks. 4.Change the paragraphs with the text Welcome, Our Solutions, and Client Testimonials to h3 headings. 5.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. 6.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. 7.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. 8.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 9.Finally, add a solid, silver, 3 pixel high, 50% wide horizontal rule at the very bottom of the page. 10.Preview your work in the browser, and compare it with the image of the finished page you see on the next slide. 11.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 Initial + Last Name + last 3 digits of your student ID/chapter02/default.htm. If you can see your page then the URL to your instructor to receive credit. Remember to put CSIS 117d Chapter 2 in the subject field of your to your instructor.