Download Web Design - Greenon High School

Web Design
Dreamweaver Elements
Great Designs
• Consistency and repetition
• Elements such as banners, logs, and link
bars should be repeated on the site’s main
pages
• Universal color scheme contributes to the
consistency across the site
• A page banner helps users identify where
they are in a Web Site
Raster Graphic
•
•
•
•
Also called: A bitmapped graphic
Made up of pixels
A Seamless Image
Paint Programs are used to create Raster
Graphics
• Programs: Paint, Photoshop, Fireworks,
(Macromedia Fireworks was specifically
developed to create Web Graphics)
Vector Graphics
• Composed of simple lines defined by
mathematical equations
• Draw Programs are used to create Vector
Graphics
• Used to create Logos, Text banners, 3D
Buttons
Analyze & Identify Guidelines
•
•
•
•
Multimedia
Audio
Video
Animation
Ask yourself this question:
Is this totally my creative work?
How do Web Sites make $?
• Selling goods or services
• Displaying advertisements (banner ads &
pop-up ads)
{the more popular the site, the more expensive the
ad}
Referrals
• If you visit USA Today and you see a
banner ad for BestStuff.com
• When you click the banner and go to
BestStuff.com; USA Today earns a small
fee.
Make your Web Site Pay
• Look for local businesses that are willing
to pay a few dollars each month
• How about your ISP?
• Charge a small fee for fellow students to
run a classified ad
• Look for customers willing to float a
banner or a pop-up
Audio Files
 .wav – developed by Microsoft a& IBM; used for
short clips
 .mid – used by synthesizers and electronic
instruments
 .ram, ra – developed by RealNetworks
 .aif, aifc. aiff – Mac Users
 .mp3 – developed by Moving Picture Experts
Group for very small, highly compressed files
Interactivity Design
1. HTML code creates static Web Pages
2. Inserting scripts makes your pages dynamic
3. A script is a short program that you can insert
into the HTML code using special tags
4. Two common uses for scripts: to insert
changing information (date, time)
5. To allow interactivity
Video Files
 .avi – used with Windows Media Player; entire
file must download before it can play
 .mpg – compressed format that can be used for
streaming
 .mov; .qt – Mac Users
 .ram, .ra – Real Networks; low-speed
connections; streaming audio & video
 .wmv, .asf – Windows Media Player; audio &
video
When to use Interactivity
I.
To enhance your Web site: having a
button change color when clicked
II. But: Maintain simplicity
III. And: Label all fields for the Web Surfer
Scripting Languages
• JavaScript – fading backgrounds, button
rollovers, banner displays, & games
• Java applet – a short program; a Java
applet can be used to animate a series of
GIF images
Common Gateway Interface
(CGI)
• Provides a link or interface between an
external application & a web server
• Allows the Web server to pass a user’s
request to an application program and
return information to the user (an
application form)
Markup Languages
• Microsoft developed DHTML (dynamic) as
an extension of HTML
• DHTML allows the user to interact with a
Web page
• i.e.: rollover buttons, marquees,
animations
Markup Languages
•
Text file that contains special sequences
of characters that function as tags
1. HTML
2. XML
3. XHTML
HTML
A markup language that defines the
appearance of data. HTML tags do not
convey any meaningful information about
the internal structure or organization of the
data they describe. For instance:
<b> </b> means: ????
However: the tags do not indicate what is
between <b> and the </b>
XML
Extensible Markup Language
XML tags describe the type of data
found between tags but does not give
any information about how the
information should be displayed by the
Web Browser on a monitor.
XML Example
<student>
<first-name>Data Item 1</first-name>
<last-name>Data Item2</last-name>
<gpa>Data Item 3</gpa>
</student>
First name, Last name, GPA
Tells the reader exactly what the data items
represent and how they relate to each other
XHTML
Extensible Hypertext Markup Language
Designed to bridge the differences
between HTML and XML. It organizes
tags into modules.
Rules for XHTML
1. The value of all tag attributes must be
enclosed in quotes
2. All opening tags must have a
corresponding closing tag
3. Every closing tag has to match up with
the most recently seen opening tag
Dreamweaver Components
•
•
•
•
•
•
Start a New Page
Add A Headline
Add Text
Add color to Text
Color your Background
Add a New Page
BASICS
•
•
•
•
•
Entering and formatting text
Formatting the background
Inserting images
Creating links and anchors
Working with tables
Main Dreamweaver
Interface Elements Review
•
•
•
•
•
•
•
•
Interface - the means by which a user interacts with either a computer or a
computer program
Title Bar – display information such as the name of the current document
shown in the document window
Menu Bar – features drop-down menus that contain related options. For
example, the file menu has options that allow you to open, save and close
documents
Toolbar – allows you to select options by clicking a button. There are three
toolbars available in Dreamweaver: insert, document and standard. The Insert
toolbar has different views that display different button options
Document window – displays the document you are working on
Status bar – provides information such as the estimated download size of the
current page
Panel – contains tools and commands that you can use to manipulate your
workspace. I.e.: the files panel helps you manage and navigate the files and
folders on a website
Inspector (property inspector)– provides information about elements of a web
page.
Dreamweaver Views
• In split view, the top half of the screen
shows the HTML code while the bottom
half shows the page in Design view
• Please use the Split View
WEB SITE or WEB PAGE
•
•
•
•
•
A Web site is composed of Web pages
All graphics must be in a JPEG or GIF file format
Use a 72-ppi resolution
If you are scanning use a 600 or 1200 resolution
For your Web Page: Put your pictures in Adobe
Photoshop: use a fixed resolution of 1280 X1024.
• If you are unsure what the picture will look like try doing
a print screen and paste into your project
DREAMWEAVER INTERFACE
•
•
•
•
•
•
Pull-down menus
Keyboard shortcuts
Complex set of docking toolbars
Pop-up windows
Floating Palettes or floating panels
Disappearing dialog boxes
New Vocabulary
• Property Inspector – a palette that displays
the characteristics of whatever object is
selected on a page; changes according to
what object is selected; you can change
the object’s properties directly from this
box
MORE….
• Status Bar – shows the HTML tags being
used and the current size and download
time for the page
Panels/Panel Groups
• Panels are small windows containing
program controls
• Panel groups are related panels that
appear together
Design
Code
Application
Files
Panel Groups
• Docked or Floating Palettes
Docked: {Multiple Document Interface}
toolbars are locked together into one
unified window
Moving Around
• Switch between interfaces:
Edit to Preferences to General to Click the
Change Workspace Button; In the
Workspace Setup dialog box select either
the Designer Workspace option (docked
palettes) or the Coder Workspace option
(floating palettes)
Tool Tips
Dreamweaver Interface very similar to
other software programs:
Move your mouse over an icon and a tool tip
will pop up telling you the name of the icon
Display/hide Toolbars & Panels

View – Toolbars - Insert – Document
or Standard or select View – Show
Panels or View – Hide Panels

To display the Insert Panel or Property
Inspector put a check mark next to
Window – Insert or Window Properties
Undock Panels
• Drag them by the double lines near the left
of their title bar
• To resize a panel, drag a corner
• Resize the size of your document window:
place your mouse on the Resize Window
icon in the lower right of your document
window and drag to the desired size.
Beginning a Web Site
• First Page of your Web Site should be called
“index”
• File – Open
• Switching Views: editing, viewing HTML, and
previewing
 View – Design: formatting & adding elements
 View – Code: View HTML
 View – Code and Design: view results
Create A New Page
• File – New – New Document dialog box,
select Basic Page HTML
• As you open pages select file save…by
saving pages immediately, links are more
reliable.
• Click on Modify – Page Properties –
Appearance – Background – System Color
Picker – Select a color – Click OK
Create a Web Site
• Dreamweaver
• All About Me
Hyperlinks
Web Design
Hyperlinks
• Web Pages are linked through
hyperlinks
• Allows users to move from one online
location to another
• Hyperlinks can be a word, a phrase, a
graphic
Hyperlinks
There are three kinds of links:
1. Internal links
2. External links
3. Intrapage links
Three Links Defined
• Internal takes you to another page on
the same Web site
• External takes you to another page on a
different Web site
• Intrapage takes you to a different spot
on the same page
Connectivity Needs
• Store your page on your computer’s
hard drive or on a network server
• Purchase a Web hosting service
• Usually a monthly fee
• Make sure it has high-speed lines, T1 or
T3 to upload your Web files
• Make sure you ask about service’s
technical support
External Hyperlink
• Press Ctrl K or Insert Hyperlink dialog
box
• In Text to display: make sure your text
for link is displayed
• In Address make sure your Web page
URL is displayed
• Click OK to insert link
Hyperlink
• Pull up Web Pages and write down
current URL’S
• Study files and file extensions
• Save your files from flash drive to hard
drive
• Copy and Paste URL’S