Chapter 2Chapter 2Developing a Web PageDeveloping a Web Page

Chapter 2 LessonsChapter 2 Lessons

Introduction1. Create head content and set page properties2. Create, import, and format text3. Add links to web pages4. Use the History panel and edit code5. Modify and test web pages

IntroductionIntroduction

• Steps in developing a Web page:1. Craft head content (important for search engines)2. Choose colors for page background and text3. Add page content, format, and link to other pages4. Test links regularly

Introduction

Understanding Page LayoutUnderstanding Page Layout

• Use white space effectively– Area on a page that contains

no text or graphics

• Limit multimedia elements– Too much time to load page

• Keep it simple

• Use an intuitive navigation structure– Users should know were they

are and how to get back to home page

• Apply a consistent theme– Give unified look and

promotes greater ease-of-use and accessibility

Introduction

Head Content Section

Viewing the Head ContentViewing the Head Content

Lesson 1 – Create Head Content and Set Page Properties

Document Title Text Box

Title Icon

Keyword Icon

Description Icon

Create Head ContentCreate Head Content

• A web page is composed of two sections:1. Head content includes

page title displayed in title bar of browser Meta Tags, which are not visible to the web browser,

includes information about the page keywords for web searches descriptions for web search results

2. Body Part of the page that appears in a browser window Contains text, graphics, and links

Lesson 1 – Create Head Content and Set Page Properties

Create Head Content – cont.Create Head Content – cont.• Accessing Head Content

– Select View Head Content from Menu Bar– CTRL + Shift + H

• Entering Keywords & Descriptions– Anticipate search terms– Keep them short and concise– List the most important keywords first– Consider the use of focus groups

Lesson 1 – Create Head Content and Set Page Properties

Setting Web Page PropertiesSetting Web Page Properties

• Background color• Font color• Link colors (unvisited,

visited)– Default:

Unvisited blue Visited purple

• Accessing Page Properties• Modify Page Properties

from Application Bar• Page Properties button from

Page Inspector• CTRL + J

Lesson 1 – Create Head Content and Set Page Properties

Setting Web Page Properties – Cont.Setting Web Page Properties – Cont.

• CSS Layout blocks• section of a web page that

is defined and formatted using a Cascading Style Sheet

• a set of formatting characteristics you can apply to text, links, and other page objects

Lesson 1 – Create Head Content and Set Page Properties

Choosing ColorsChoosing Colors

• Dreamweaver has two web-safe color palettes which appear consistent in all browsers and platforms• Color Cubes (default palette) and Continuous Tone• Contains 216 web-safe colors

• Color Cubes • Continuous Tone

Lesson 1 – Create Head Content and Set Page Properties

Choosing Colors – cont.Choosing Colors – cont.Default Color button

WhiteBackground color box

Hexadecimal shorthand for white (number code is

preceded with a # sign)

Lesson 1 – Create Head Content and Set Page Properties

Making Pages Accessible to AllMaking Pages Accessible to All

• Techniques you can use to ensure that your website is accessible to individuals with disabilities– Alternate text with images– Avoid certain colors– Supply text as an alternate source for information

that is presented in an audio file

Lesson 1 – Create Head Content and Set Page Properties

Using Appropriate ContentUsing Appropriate Content

• Who is your audience?• What is the age group of your audience?• What is the reading level?• Formal vs. informal tone• Consider font sizes, amount of text and images, and

amount of technical expertise needed to navigate• Use consistency

Lesson 1 – Create Head Content and Set Page Properties

Create, Import, and Format TextCreate, Import, and Format Text

• To add text to a Dreamweaver page– Type in Dreamweaver– Copy/paste

[Ctrl][C] and [Ctrl][V] (Windows)– Import Word Document

• File Import Word Document or Excel Document• Select file to be imported, then click Formatting list arrow• Always use Clean Up Word HTML command

Lesson 2 – Create, Import, and Format Test

Create, Import, and Format TextCreate, Import, and Format Text

• If text does not have a font specified, the default font on the user’s computer will be used to display the text.

• Keep in mind that some fonts might not appear the same on both a Windows and a Macintosh computer.

Lesson 2 – Create, Import, and Format Test

Formatting Text with Property InspectorFormatting Text with Property Inspector

• Make text attractive and easy to read• Change font, size, and color• Use Property Inspector to apply formatting attributes

Lesson 2 – Create, Import, and Format Test

Using HTML Tags or Using CSSUsing HTML Tags or Using CSS

• The standard practice today is to use Cascading Style Sheets (CSS) to handle the formatting and placement of web page elements.

• Default preference in Dreamweaver is to use CSS rather than HTML tags.

Lesson 2 – Create, Import, and Format Test

Changing FontsChanging Fonts

• You can format your text with different fonts by choosing a font combination from the Font list in the Property inspector.

• A font combination is a set of three fonts that specify which fonts a browser should use to display the text of your web page.

• Font combinations are used so that if one font is not available, the browser will use the next one specified in the font combination.

Lesson 2 – Create, Import, and Format Test

Changing Font SizesChanging Font Sizes• There are two ways to change the size of text using the

Property inspector – When the CSS option is selected, you can select a numerical

value for the size from 9 to 36 pixels.– You can use a size expressed in words from xx-small to larger.

Lesson 2 – Create, Import, and Format Test

Formatting ParagraphsFormatting Paragraphs

• Format– As text– As different sizes of headings

• Headings– Heading 1 is the largest– Heading 6 is the smallest– Browsers display text formatted as headings in bold, setting

them off from paragraphs of text

Lesson 2 – Create, Import, and Format Test

Formatting Text using Property InspectorFormatting Text using Property InspectorLesson 2 – Create, Import, and Format Test

HTML Button

CSS Button

CSS Rule Font Combination

Font ColorFont Size

Web FilenamesWeb Filenames

Do not use:1. Spaces2. Special characters3. Punctuation4. Uppercase letters5. Number for the first character6. Assume case-sensitive

Lesson 2 – Create, Import, and Format Test

Add Links to Web PagesAdd Links to Web Pages

• Creating a Link in Dreamweaver:1. Select the text or image that you want to serve as a link.2. Specify a path to the page to which you want to link in the Link

text box in the Property inspector.• Avoid broken links• Provide point of contact – mailto: link– Insert Panel Email Link

Lesson 3 – Add Links to Web Pages

E-mail Link Dialog BoxE-mail Link Dialog BoxLesson 3 – Add Links to Web Pages

Text for email link on the page (this could also be a person’s name or position or the actual email link)

Link information

Assets Panel URL CategoryAssets Panel URL Category

URLs button

Lesson 3 – Add Links to Web Pages

Email link on home page

Preview of email link

Navigation BarsNavigation Bars

• Contain links to the main pages• Usually located at top or side of page• Backbone of the site’s navigation structure• Can be created with text, images, or both

Lesson 3 – Add Links to Web Pages

Selecting Text for the Home LinkSelecting Text for the Home LinkLesson 3 – Add Links to Web Pages

Link text boxBrowse for File iconSelected text

Navigation Bar

Use the History panelUse the History panel

• History panel properties:– Records each editing and

formatting task performed– Each task is called a step– 50 steps– Preferences adds more steps– Increasing steps uses

memory

Lesson 4 – Use the History Panel and Edit Code

View HTML Code in Code InspectorView HTML Code in Code Inspector

• View Code– Code View– Code and Design View– Code Inspector

• Add advanced features– JavaScript - adds dynamic content such as

rollovers or interactive forms to a web page– Rollover function - special effect that changes

the appearance of an object when the mouse moves over it

Lesson 4 – Use the History Panel and Edit Code

Code displayed in the Code Inspector

Page displayed in Design view behind the Code Inspector

Modify and Test Web PagesModify and Test Web Pages

• Things to test:– Preview in a browser window– Test links– Proofread

Lesson 5 – Modify and Test Web Pages

Testing PagesTesting Pages

• Monitors– Size and resolution– Most screen resolutions are set to 1024x768 or higher– More content can be displayed at one time on a computer

screen

• Platforms– UNIX, Mac, PC, Mobile devices

• Browsers– Explorer, Netscape, Firefox, Safari, Chrome

Lesson 5 – Modify and Test Web Pages

Multiscreen PreviewMultiscreen Preview

• Mobile Devices– Multiscreen Preview button is located on the document toolbar– view a page in three device sizes in one window

Lesson 5 – Modify and Test Web Pages

Phone preview

Tablet preview

Viewport Sizes button

The Desktop preview

Adobe BrowserLabAdobe BrowserLab

• Checks pages by simulating multiple browsers and platforms

• You can use it to test your pages in browsers that are not installed on your computer

• Need an Adobe ID to utilize

Lesson 5 – Modify and Test Web Pages