Transcript Slide 1

Goal
Using Dreamweaver learners will
create and update their own teacher
website that includes classroom rules,
assignment guidelines, course
content, and an instructional
component related to a state
standard.
Objectives
1. Identify basic design elements of a website.
2. Sketch a basic layout showing the navigation and design
of your site.
3. Create and name the pages in your site.
4. Using Fireworks, prepare images for your site.
5. Add and manipulate headlines and text.
6. Insert tables and populate them.
7. Add a background image to your pages.
8. Define and create absolute and relative links on your
pages.
9. Create .pdf files and link them to your site.
Critical Definitions
Browser Software (program) that you use to view web pages.
Examples: Internet Explorer, Netscape,
Mozilla Firefox
Monitor Resolution A variable setting used to set the size of
the page you are viewing. Choices are 640 x 480, 800 x 600,
1024 x 768
.pdf files A file that is easy to create and universally read on
the web. Also supports images. (Not everyone has Microsoft
Word)
Critical Definitions
HTML
Hypertext Markup Language: A standard code used to
create web pages.
HTTP://
Hypertext Transfer Protocol: Using this prefix will create a
link to an absolute webpage.
Absolute Link
A link which takes user outside of your website.
Relative Link
A link which takes user to another page or point
within your site.
url
The unique web address of a webpage.
Image Files
Jpeg or jpg.
A standard file format that is used for photographs.
(Recompresses each time changes are made.)
.gif
A file format used to create graphics
(Smaller file sizes. Limits on colors.)
Images for the Web
All images for the web should be converted to 72 dpi.
Images for print are to be 300 dpi.
File Considerations
Naming conventions
Refers to the way you name your pages and
files (for html… no capitals and no spaces)
Use underscores_
File sizes Limit pages to 100K
Every HTML Page has these main tags
<html>
<head> <title>
</title>
</head>
<body>
</body>
</html>
HTML Heading Tags
Headings
<H1>Mount Carmel Area School District</H1>
<H2>Mount Carmel Area School District</H2>
<H3> <i> Mount Carmel Area School District </i> </H3>
<H4> <i> Mount Carmel Area School District </i> </H4>
<H5> <em> <i>Mount Carmel Area School District </i> </em> </H5>
<H6> <em> <i>Mount Carmel Area School District </i> </em> </H6>
HTML Table Tags
<table>
<tr> <td></td>
<td></td>
<td></td> </tr>
<tr> <td></td>
<td></td>
<td></td> <tr>
</table>
More HTML
<p>
Starts new paragraph. </p>
<br> The “br” tag starts a new line of text.
(Does not need closing tag)
HTML Images
<img src=“images/school_front.jpg”
height=“168” width=“216” alt=“high
school”>
Image resolution must always be 72 dpi
for web and 300 dpi for print.
Controlling Width
Assigning a width tag with a percentage such as
width =“60%” will cause the width of your element to
stretch to 60% of the screen of the viewer, no matter
what resolution his monitor is set at.
By using pixels, width=“240” fixes the width at that size.
Creating Your Home Page
1. Open Dreamweaver
Click ‘View’ on the main menu and click on ‘Code and
Design’
2. Click on ‘File’ on the main menu and ‘New’ .
3. Choose ‘basic page’ and ‘html’ and click ‘Create’.
4. Save the page in a new folder under ‘My Documents’
To create the new folder, click on the orange folder
icon in the
‘Save Window’
Adding Text
Type some text into the design portion of the
Dreamweaver work area.
Highlight the text.
Use the text properties at the top of the work area to
change the way the text looks.
Go to “TEXT” on the main menu and choose the color
attribute to change the text color.
Inserting a Table
Go to “Insert” on
the main menu.
Choose table and
select your rows,
columns and
border attributes.
Click “OK” to create
table.
Preparing images
Open Fireworks
1
Click ‘File’ to open an
image
1
Choose “web layer in
the layers palette. This
will open the image
size controls below
your picture.
3
Change image size to
72 dots per inch.
Change size of image
to desired size.
2
Go to “File” and
“Export” image to your
images folder within
your site folder.
Inserting a Background Image or Color
Choose
“Modify” then
“page
properties”
from the main
menu.
The Page
Properties
window opens
Click browse to
navigate to
your image
desired or
color.
Inserting a Link
Be sure your
cursor is in the
design window of
the workspace
where you want
the link to go.
Choose “Insert”
then “hyperlink”
from the main
menu.
Type in the text you
want to link along
with the url and
instructions.
Click “OK”
Creating Links with HTML
Relative Link
<a href=“classroom_rules.html”>Classroom Rules</a>
Absolute Link
<a href=“http://www.pde.state.pa.us”>Course
Standards</a>