Website development with dreamweaver

Copyright © Texas Education Agency, 2011.
All rights reserved.
1
Web Technologies
Website Development with Dreamweaver
Website Planning

Before beginning any web development
project:

A Needs Assessment should be completed.

A Story Board should be created.

The Layout and Style of the site should be
planned.
IT: Web Technologies – Website Development with Dreamweaver2
Copyright © Texas Education Agency, 2011.
All rights reserved.
Gathering Information

When meeting with the client, a Needs
Assessment should be completed.

A written document stating:

What is the client’s purpose for the site?

Who is the site being designed for / target audience?

What Information should be included on the site?


What are the client’s design preferences?

The Needs Assessment is the plan of action for
developing the site design.
IT: Web Technologies – Website Development with Dreamweaver3
Copyright © Texas Education Agency, 2011.
All rights reserved.
Storyboarding

The Storyboard is a diagram of the website’s
structure.

Should show all required pages of the site.

Should show how each page is related to the
others.

Should take into consideration:

Is the structure logical?

Can the user find their information quickly?

How many links are on each page/
IT: Web Technologies – Website Development with Dreamweaver4
Copyright © Texas Education Agency, 2011.
All rights reserved.
Sample Storyboard
IT: Web Technologies – Website Development with Dreamweaver5

Copyright © Texas Education Agency, 2011.
All rights reserved.
Layout & Design

Once the site structure has been determined,
the layout and design of the individual pages
can be considered.

Layout Considerations:

Consistency: Each page should have the same
layout and design.

Also includes the pages’ style.

The same design style should be used on each page
of the site.
IT: Web Technologies – Website Development with Dreamweaver6
Copyright © Texas Education Agency, 2011.
All rights reserved.
Layout & Design

Navigation: The navigation should be in a
standard position (top or left side)

Balance: The page should be balanced.

Fonts: The selected font should be easy to read
and generally should be a generic font.


Colors: A color scheme should be selected, with
the client. The color scheme should be applied
the same on each page.
IT: Web Technologies – Website Development with Dreamweaver7
Copyright © Texas Education Agency, 2011.
All rights reserved.
Dreamweaver

Web pages are created using HTML, a code
for specifying how content should be
formatted.

Web pages are interpreted by the web
browser.

The web pages can be created using a text
editor or a program that can create HTML
code.
IT: Web Technologies – Website Development with Dreamweaver8
Copyright © Texas Education Agency, 2011.
All rights reserved.
Dreamweaver Work Area
IT: Web Technologies – Website Development with Dreamweaver9
Copyright © Texas Education Agency, 2011.
All rights reserved.
Dreamweaver Work Area

FTP Toolbar

Manages the

uploading and
downloading of
files.
IT: Web Technologies – Website Development with Dreamweaver10
Copyright © Texas Education Agency, 2011.
All rights reserved.
Using Dreamweaver

Creating a New Document

To open a blank document in Dreamweaver,
press CTRL+N or click on the File menu at the
top left and select New.
IT: Web Technologies – Website Development with Dreamweaver11
Copyright © Texas Education Agency, 2011.
All rights reserved.
Using Dreamweaver
IT: Web Technologies – Website Development with Dreamweaver12
Copyright © Texas Education Agency, 2011.
All rights reserved.
Using Dreamweaver
IT: Web Technologies – Website Development with Dreamweaver13
Make sure you are in Design View. The Design button highlighted
above should be selected.
Copyright © Texas Education Agency, 2011.
All rights reserved.
Using Dreamweaver

Editing Page Properties


Click on the Page Properties button on the
Properties Panel at the bottom of the screen.
IT: Web Technologies – Website Development with Dreamweaver14
Copyright © Texas Education Agency, 2011.
All rights reserved.
Using Dreamweaver

Editing Page Properties
IT: Web Technologies – Website Development with Dreamweaver15
From the Page
Properties screen
you can edit the
default text, link,
and background
properties of the
page.
Copyright © Texas Education Agency, 2011.
All rights reserved.
Using Dreamweaver

Formatting Text

Default text formatting should be defined on the
Page Properties window described in the previous
slide.

If you want to format specific sections of text on
the page, you should select the text you to format
with your mouse.
IT: Web Technologies – Website Development with Dreamweaver16

Copyright © Texas Education Agency, 2011.
All rights reserved.
Using Dreamweaver

Formatting Text

For basic formatting select the HTML button.

The CSS button will provide additional advanced formatting options through Style
Sheets.

We set the selected text to a Heading 1
IT: Web Technologies – Website Development with Dreamweaver17
Copyright © Texas Education Agency, 2011.
All rights reserved.
Using Dreamweaver

Formatting Text

The text has been formatted to a Heading Level 1
IT: Web Technologies – Website Development with Dreamweaver18
Copyright © Texas Education Agency, 2011.
All rights reserved.
Using Dreamweaver

Creating a Table

Tables allow you to layout content and display
content in a grid structure.


From the Insert menu select Table.
IT: Web Technologies – Website Development with Dreamweaver19
Copyright © Texas Education Agency, 2011.
All rights reserved.
Using Dreamweaver

Creating a Table

The Table window will
appear.

Settings:

Rows – 2

Columns – 2

Table width - 500
IT: Web Technologies – Website Development with Dreamweaver20
Copyright © Texas Education Agency, 2011.
All rights reserved.
Using Dreamweaver

Creating Tables

The table structure should be displayed below the heading.
IT: Web Technologies – Website Development with Dreamweaver21
Copyright © Texas Education Agency, 2011.
All rights reserved.
Using Dreamweaver

IT: Web Technologies – Website Development with Dreamweaver22
Copyright © Texas Education Agency, 2011.
All rights reserved.
Using Dreamweaver

Inserting an Image

Before the image can be added, the page needs
to be saved.

Save the page to your Student Files folder as
dreamweaverPractice.htm
IT: Web Technologies – Website Development with Dreamweaver23
Copyright © Texas Education Agency, 2011.
All rights reserved.
Using Dreamweaver

Inserting Images

Place your cursor into the
bottom left cell of the table.
IT: Web Technologies – Website Development with Dreamweaver24
Copyright © Texas Education Agency, 2011.
All rights reserved.
Using Dreamweaver

Inserting Images

From the Insert menu, select Image.


Select the differenceEngine.jpg from your Student
Files folder.

Click Ok.
IT: Web Technologies – Website Development with Dreamweaver25
Copyright © Texas Education Agency, 2011.
All rights reserved.