Goal

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.

2
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.

3
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)
4
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.
5
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.)
6
Images for the Web

• All images for the web should be converted to
  72 dpi.
• Images for print are to be 300 dpi.

7
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
8
Every HTML Page has these main tags
lthtmlgt ltheadgt lttitlegt
lt/titlegt
lt/headgt ltbodygt lt/bodygt lt/htmlgt
9
HTML Heading Tags
Headings ltH1gtMount Carmel Area School
Districtlt/H1gt ltH2gtMount Carmel Area School
Districtlt/H2gt ltH3gt ltigt Mount Carmel Area School
District lt/igt lt/H3gt ltH4gt ltigt Mount Carmel Area
School District lt/igt lt/H4gt ltH5gt ltemgt ltigtMount
Carmel Area School District lt/igt lt/emgt lt/H5gt ltH6gt
ltemgt ltigtMount Carmel Area School District lt/igt
lt/emgt lt/H6gt
10
HTML Table Tags
lttablegt lttrgt lttdgtlt/tdgt lttdgtlt/tdgt
lttdgtlt/tdgt lt/trgt lttrgt lttdgtlt/tdgt
lttdgtlt/tdgt lttdgtlt/tdgt lttrgt lt/tablegt
11
More HTML

• ltpgt Starts new paragraph. lt/pgt
• ltbrgt The br tag starts a new line of text.
  (Does not need closing tag)

12
HTML Images

• ltimg srcimages/school_front.jpg height168
  width216 althigh schoolgt
• Image resolution must always be 72 dpi for web
  and 300 dpi for print.

13
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, width240 fixes the width at
  that size.

14
Creating Your Home Page

• 1. Open Dreamweaver
• Click View on the main menu and click on
  Code and Design
• Click on File on the main menu and New .
• 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

15
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.

16
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.

17
Preparing images

• Open Fireworks
• Click File to open an image
• Choose web layer in the layers palette. This
  will open the image size controls below your
  picture.
• Change image size to 72 dots per inch.
• Change size of image to desired size.
• Go to File and Export image to your images
  folder within your site folder.

1
1
3
2
18
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.

19
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

20
Creating Links with HTML

• Relative Link
• lta hrefclassroom_rules.htmlgtClassroom
  Ruleslt/agt
• Absolute Link
• lta hrefhttp//www.pde.state.pa.usgtCourse
  Standardslt/agt