Transcript Unit C - PowerPoint Presentation File

Unit C
Developing a Web Page
Unit C Lessons
Introduction
1. Create head content and set page properties
2. Create, import, and format text
3. Add links to web pages
4. Use the History panel and edit code
5. Modify and test web pages
Introduction
Introduction
• Steps in developing a Web page:
1.
2.
3.
4.
Craft head content (important for search engines)
Choose colors for page background and text
Add page content, format, and link to other pages
Test links regularly
Introduction
Understanding 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
Lesson 1 – Create Head Content and Set Page Properties
Viewing the Head Content
Title Icon
Head Content Section
Keyword Icon
Description Icon
Document Title Text Box
Lesson 1 – Create Head Content and Set Page Properties
Create 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.
• 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 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.
• 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 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.
Hexadecimal shorthand
for white (number code is
preceded with a # sign)
Background
color box
Default Color button
White
Lesson 1 – Create Head Content and Set Page Properties
Making 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 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 2 – Create, Import, and Format Test
Create, 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 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 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 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 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 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 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 Inspector
HTML Button
CSS Button
CSS Rule
Font Size
Font Combination
Font Color
Lesson 2 – Create, Import, and Format Test
Web Filenames
Do not use:
1.
2.
3.
4.
5.
6.
Spaces
Special characters
Punctuation
Uppercase letters
Number for the first character
Assume case-sensitive
Lesson 3 – Add Links to Web Pages
Add 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 Box
Text for email link on
the page (this could
also be a person’s
name or position or
the actual email link)
Link information
Lesson 3 – Add Links to Web Pages
Assets Panel URL Category
URLs button
Preview of email link
Email link on home page
Lesson 3 – Add Links to Web Pages
Navigation 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 Link
Navigation Bar
Browse for File icon
Selected text
Link text box
Lesson 4 – Use the History Panel and Edit Code
Use 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 Inspector
• View Code
Page displayed in
Design view behind
the Code Inspector
– 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
Code displayed in
the Code Inspector
Lesson 5 – Modify and Test Web Pages
Modify and Test Web Pages
• Things to test:
– Preview in a browser window
– Test links
– Proofread
Lesson 5 – Modify and Test Web Pages
Testing 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 Preview
• Mobile Devices
– Multiscreen Preview button is located on the document toolbar
– view a page in three device sizes in one window
Phone preview
Viewport
Sizes button
Tablet preview
The Desktop preview
Lesson 5 – Modify and Test Web Pages
Adobe 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