| Objectives:
The Student will learn to
- Plan
a small web site
- Use the Dreamweaver interface
- Organize and set up a website
- Work
with text and text properties
- Insert
hyperlinks
- Insert
graphics
- Create and edit a table
- Publish your website
Demonstration
Overview & what you really need
- Menu bar
- Panels
- Properties Window
Defining a New Site
- Create local folder (done in previous
assignment)
- Create Images folder (optional)
- This must be done everyday due to Deepfreeze
Creating a New File
Page Title
Saving a File
Tables for Page Layout
- Pixels vs. Relative Size
- Rows/Columns
- Borders
- Background Color/Graphic
Text
- Fonts
- Size
- Headings
- Color
- Alignment
- Links
- Ordered lists/Unordered Lists
- Cut & Paste
Next is Graphics, but first...
Assgnment 1
Step 1: Plan your page
Your first web
page assignment is to create a...web page. You get to select
the topic of your web page and basic layout. Here are the
requirements:
- Pick a
topic: something cool like...
- The Second Law of Thermodynamics
- The Joy of WASL Preparation
- It should
be...
- related to a subject or topic
you are studying in school, a hobby, or a career
you may pursue
- specific (don't pick a broad
topic you can't cover in one page)
- Narrow your topic: Select a subtopic
(i.e. Types of Skateboards)
- Graphics: Decide what
graphics you will need and where you will get them (created
by you or downloaded
from
Clips On-line)
Step 2: Construct Your page using Dreamweaver
- Open a new page
- Give it a title (Head)
- Select a background color
- Save your file in your personal folder on H: drive in
your p_firstl_web_page
- Create a Table for Your Page Layout
- 3 rows
- 3 columns
- 3 pixel cell padding
- 3 pixel cell space
- 0 pixel border
- 600 pixels wide
- Set Table Columns as follows:
- 1st column 100 pixels wide
- 2nd column 300 pixels wide
- 3rd column 200 pixels wide
- Merege cells of column one
Your table should look like Fig. 1
- Put links to other page(s) and site(s)
in column 1
- Put title in column 2, row 1
- Put text in column 2 rows, 2 & 3
- Put graphics in column 3, rows 2 & 3
Your page should look like Fig. 2 |
Homework:
If you
miss the demonstration you can catch up by following the links
below
Dreamweaver
basics
- Click
on the above link
- Read pages 4 - 14
- Some graphics are interactive so move
your mouse around and explore
- This part of the assignment is provided
to familiarize you with how Dreamweaver looks and works.
The next part shows you how to actually setup a web site
for work in Dreamweaver
Defining
a Site
- Click on the above link
- Read pages 15 - 24 (skip pp 20-21; we
will not use Check In/Out)
- Some graphics are interactive so move
your mouse around and explore
- In this assignment you will be shown
how to create a web site for your web pages
Constructing
Web Pages
- Click on the above link
- Read pages 25 - 30
- Some graphics are interactive so move
your mouse around and explore
- This assignment will show you how to
construct your own web pages
Page
Elements
- Click on the above link
- Read pages 31 - 36
- Some graphics are interactive so move
your mouse around and explore
- This assignment will show you how to
construct your own web pages by adding text, links, and
graphics
Tables
- Click on the above link
- Read pages 37 - 45
- Some graphics are interactive so move
your mouse around and explore
- You will be shown how tables help you
organize and layout your web page
Assignment 1 Evaluation
| Layout:
Good use of CRAP principals |
|
3
|
2
|
1
|
| Text: Good use of
grammar, color, font |
|
3
|
2
|
1
|
| Links:
Required links work |
|
3
|
2
|
1
|
| Graphics:
Linked, correct size, add interest to page |
3
|
2
|
1
|
Fig. 1: Table Layout
Fig. 2: Page Layout
|
