Understanding Web Pages

Download Report

Transcript Understanding Web Pages 

HTML
Comprehensive Concepts and Techniques
Second Edition
Project 1
Creating and Editing
a Web Page
HTML
Comprehensive Concepts and Techniques
Second Edition
Unit Lessons
Start GoLive and use the site window
Understand the GoLive workspace
Modify page properties
Explore page views
Publish a Web site
Get Help
3
Getting Started with Adobe
GoLive 6.0
What is GoLive?
– Web site development and management
tool…with a “drag and drop” interface
4
Understanding Web Pages
What is a Web page?
– Documents composed in HTML and
displayed in a Web browser
– Images displayed in a browser are
referenced by the HTML
– Links in a Web page are referenced by
the HTML
5
Understanding Web sites
What is a Web site?
– Multiple Web pages referenced by one
another, stored on a single Web server
The path specified in a reference
must be maintained
– GoLive manages relationships between
referenced files
6
Start GoLive and use the site
window
Site folder
Expand/
collapse
Compressed
Image files
Home page
Web pages
No broken links
7
Direct or indirect link
from home page
GoLive Site Wizard
opens an
existing
.site file
8
Open the home page
index.html
Is the home
page
9
Opening a Web page
Web site
Web page
Home page
10
Understand the
GoLive Workspace
document
window
Layout editor
Source editor
Layout preview
palettes
11
Document Window
Three Views:
•Layout Editor
•Source Code Editor
•Layout Preview
12
Palettes
Default palettes
– View: modify view of document
window
– Objects: for adding objects to a page
– Color: stores color libraries
– Inspector: for modifying object
properties
13
Hide a Palette
Drag a palette
by its tab
to the edge of the
window
14
Modify Page Properties
Page title
– Internet search
– Bookmark/favorite
– Browser title bar
Default text colors
Background color
Background graphic
15
Modify Page Properties
Page title
Default text colors
Background color
Background
graphic
16
Colors
Color palette
Web-safe colors
RGB hexadecimal color codes
Site color list
17
Color Palette
Web-safe colors
RGB hexadecimal
color codes
Preview pane
18
Page Properties
background
graphic
text color
link color
19
Explore Page Views
Layout Preview
– Simulates Explorer 5
– Test links
– Test animated graphics
To open a page in Layout Preview:
Click the Preview tab
20
Explore Page Views
 View Palette
Opens in the
Layout Editor
21
Source Code Editor
Colorize
buttons
22
Source Code Editor
Essential HTML tags
– <html>
– <head>
– <title>
– <body> (compare attributes to page
properties)
– <p>
23
View in Browser
Preferences
window
Browsers
On your
computer
24
Publish a Web Site
 “Go Live!”
– Refers to first time a site is uploaded
 Web server
– Computer dedicated to hosting Web sites
 FTP
– Site IP address
– Username
– Password
 Connect
– You don’t need to leave GoLive to access your
server
25
Set Up FTP
FTP
info
26
Site Window
FTP tab
FTP server
FTP server
files
Click to
Open the
right side
27
Open site on Web
Open
Site in
browser
28
Get Help
Complete GoLive User’s Guide
PDF for printing
Opens in default Browser
29
Get Help – Three methods for
locating a topic
Contents
Index
Search
30
Search Help
Searches page titles
– all words
– any word
Searches content
– all words
– any word
31
Search Help
lists in order
of Search
32
Unit A Tasks
Open a GoLive site
Explore site window
Customize workspace
Modify page properties
Explore page views
Publish a site
Explore Help
33