HTML Web Authoring Web Graphics

Download Report

Transcript HTML Web Authoring Web Graphics 

HTML
Web Authoring
Tonya L. DeZarn
Janice Thompson
Juana Wallace
HTML Overview
How to begin
 Barebones HTML page
 Images, sound, background
 HTML Linking

Beginning-Tools Needed



Text Editor-Notepad or Simple Text
Web browser
Internet access and password-protected account
(these are needed to publish to the WWW)
Basic Need to Know…



Create pages as .html
The first or main page is
index.html. By default
FTP used to upload files to
the server in the public_html
folder (note: computers recognize this
folder as the main web folder by default)

Best way to learn webpage
building is by viewing other
web pages (note: when using
other’s work, get their permission
and cite them)
Barebones HTML Page

<html>--tells computer this is a webpage file

<head>--metadata (general info not shown in page)
<meta – where all meta data is contained>
<title> page title, shown in upper left corner</title>
</Head>




<body various attributes placed here to apply to all the contentbackground color, font>
(note: the body is where all contents of a page go)
</body>

</html>


Images, sound, background
Points to Remember
-use non-glaring colors and non-distracting
colors
-not recommended for web pages unless
you have a good reason to have it
-Size of the image matters
Web Authoring Tools



Once you mastered the basics of HTML, you
can speed up the process by using special
software designed to expedite Web page
development, such as:
FrontPage
Dreamweaver
Netscape Composer
Dreamweaver
…is the professional choice for building web
sites and applications. It provides a powerful
combination of visual layout tools, application
development features, and code editing
support. This web authoring tool enables web
designers and developers to easily create
and manage any website.
Advantages of using Dreamweaver




Saves time entering tedious HTML codes manually
Split view of code/design: what-you-see-is-what-youget
Environment built around Cascading Style Sheets
Property Inspector: enables quick, comprehensive
property editing…and many other features that
makes Dreamweaver the web authoring tool of
choice
CSS



Used to globally apply a style to your web
page.
Inline has the highest priority and external
the lowest.
Saves a lot of work and time!
CSS Syntax

Pretty simple
–
–
–
–
–

Be sure not to leave spaces between your property value units
–

selector {property:value}
i.e. p {font-family:arial}
The selector is usually the html tag you are defining
The property is the attribute you want to change
The value is how you want that attribute to look
i.e. p {font-size: 12 px} should be p {font-size: 12px}.
Grouping
–
–
This defines attributes and values for multiple selectors - - another
time saving tool!
i.e. h1,h2,h3,h4,h5,h6 {color:red; font-family: arial}
Properties you can define in a CSS







Background
Text
Font
Borders
Margins
Padding
Lists
Words of Caution



Not all browsers will support all the CSS
defintions.
Older browsers may not display items the
way you intended.
When you design your site, keep this in mind
–
Design the site to have the same meaning with or
without the styles.
Layout Design



Frames
Layout Cells
Tables
Website Design Tips
http://www.macromedia.com/support/dreamweaver/layout/site_planning/


Set goals
Organize site structure
Design Tips (cont.)

Create the look
–
–
–


Be consistent
Maintain design throughout the site so users
aren’t confused.
Consider using named anchors
Navigation scheme
Planning and gathering assets