Transcript Building a Web Page

Chapter 2:
Building a
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 flyout menu that appears
New Document button
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 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
•After creating your new HTML document, immediately
save it by opening the File menu and choosing Save or
Ctrl + “S”
•Save your new file
to you’re My Web
Sites\CSIS117d\cha
pter02 folder and
name it default.htm
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
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
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
Working with Text
•
•
•
•
•
Pasting Text
Line Breaks (br) vs. Paragraph Breaks (p)
Format Text Based on Elements
Applying Headings (h1 – h6)
Text in parenthesis
Formatting Text
– Choosing a Font
represents the actual
– Set Font Sizes
HTML tags that are
• Apply Text Styles
inserted into the Web
– Italics (em)
page’s code for the
– Bold (strong)
selected text
• Align and Indent Text
• Lists
– Ordered/numbered List (ol)
– Unordered/bulleted List (ul)
• Highlight and Set Text color
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
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
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
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 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.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
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 subheader. 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.