chapter 2: building a building a web page web page by bill bennett associate professor msjc cis mvc

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

Upload: javon-bare

Post on 28-Mar-2015

235 views

Category:

Documents


0 download

TRANSCRIPT

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

Chapter 2:

Building a Web Page

By

Bill BennettAssociate Professor

MSJC CIS MVC

Page 2: 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

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

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

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

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

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

Creating a New PageIn 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

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

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

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

Saving a Document

•Save your new file to you’re My Web Sites\CSIS117d\chapter02 folder and name it default.htm

•After creating your new HTML document, immediately save it by opening the File menu and choosing Save orCtrl + “S”

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

Page Properties: General

in the document window and choose Page Properties from the context menu that appears

•To view your new document’s page properties and to change items like the title, description, and keywords, right-click

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

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 10: Chapter 2: Building a Building a Web Page Web Page By Bill Bennett Associate Professor MSJC CIS MVC

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

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

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

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

Pasting Text

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

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

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

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 chapterthe Common toolbar

You can choose a heading size from the Styles drop-down list box

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

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

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

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

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

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

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

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

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

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

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

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

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

Spell Checking Your Document

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

Previewing Web Pages• Install Firefox • Edit Browser List

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

End-of-Chapter ExerciseIn 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:

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

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