Transcript Web Page Design I

Web Page Design I
Using Macromedia
Dreamweaver 2
Course Outline







Understanding Web Page and Dreamweaver
Creating a Web Page with Text
Adding Images and Multimedia
Set Page Properties
Displaying Data with Tables
Setting Lots of Links: Hyperlinks, URLs and
Mailto Links etc.
Upload and update data to a server
I. Understanding Web Page and
Dreamweaver
Introducing Web Page

A Web Page is made up of many HTML
(HyperText Makeup Language) document files.

The special effects which can be found in the
web page (e.g. text, images, sound, movies
and tables) are controlled by the HTML
document files.

However, it is too complicated for learning and
using HTML to make your web page. Thus, an
HTML editor (e.g. Mircosoft FrontPage,
Netscape Composer and Macromedia
Dreamweaver) is necessary for making your
web page…..
Introducing Dreamweaver

Dreamweaver is an HTML editor and a web
site management tool all rolled into one.

The free 30-day trial of Macromedia
Dreamweaver can be dowbloaded at
http://www.macromedia.com/software/dreamweaver/trial
Click “GO TO TRIAL
DOWNLOAD”
Download the English
Version
Save the File…

Then, start the installation program by doubleclick the setup file. (dreamweaver4.exe for trial
version)
Starting Dreamweaver
Two Windows will be opened…
Site Windows
Document Windows

The Site Window is used for planning, creating
and managing your web site.

The Document Window is used for editing your
web page. It displays your web page
approximately as it will appear in a Web
browser.
The Document Windows
Launcher
Object Panel
Text Property
Inspector
Download Statistic
Window Size drop-down
menu
Mini-Launcher
II. Creating a Web Page with Text
Create a New Page
To create a new Web Page,
select the New command from
the File menu
Enter Some Text…
You can simply type into
the document window to
enter text into your web
page.
Formatting Text with Property
Inspector

Text Property Inspector

Apply Text Formatting
1. Select a line in your document.
2. Apply standard HTML formatting to text using the
Format drop-down menu in the Property inspector.

Note:
–
–
Paragraph applies paragraph tags to the selection.
Heading1 through Heading 6 applies heading tags
to the selection. Heading 1 is the largest heading
and Heading 6 is the smallest.

Change Text Size
1. Select some text in your document.
2. Change the text size by selecting one of the size
settings – size 1 through size 7 – in the Property
inspector size drop-down menu.

Note: The default size is 3, so size smaller than
3 will look smaller than the default text and
sizes larger than 3 will look larger than the
default text and sizes larger than 3 will look
larger than the default text.

Select a Font
1. Select some text in your document.
2. Select the drop-down the Font Combination box in
the Property inspector.

Note: Remember, just because you can see
the font and it looks great on your computer
doesn't mean that everyone has that font. If a
font isn't available, the browser will use the
default font (Times Roman) instead.

Change Text Colour
1. Select some text in your document.
2. Click the colour box beside Text in the Property
Inspector.
Colour box
3. Use the eyedropper to pick up any colour onscreen
by simply clicking the eyedropper on it. You can pick
up any colour on the screen.

Bold and Italic
Bold
Italic

Change Text Alignment
1. Select a line in your document.
2. Click the Align Center, Align Left or Align Right icon
in the Property inspector.
Align Center
Align Left
Align Right

Turn Text into a List (Unordered and Ordered
List)
1. Drag the cursor over the items to select them.
2. Click the Unordered List button (Ordered List button)
in the Property inspector.
Unordered List Ordered List button
button
Unordered List
Ordered List
Add a Separator to a Page

Selecting the horizontal rule object from the
Object Panel.
Horizontal rule
Name Width Height
Shading
Alignment
Horizontal rule properties appear
in the Property inspector when
the rule is selected.
III. Adding Images and Multimedia
Add an Image to a Page
1. Place the cursor where you want to insert the
image.
Insertion Point
2. Select the Image command from the Object
panel.
3. Select the image file.
Width
Name
Source
Image alignment
Height
Resize Handles
Add a Sound File
1. Position the insertion point in the Dreamweaver
document window where you would like the
sound control to appear when the page is
viewed in the browser.
2. Select the Insert Plug-in from the Object panel.
3. The Select File dialog box will appear.
Navigate to a directory that contains a sound
file and select a file.
1. Select a
sound file
2. Click
Select
Plug-in
Object
4. You can resize the control by dragging one of
the resize handle.
resize handle

Note:
–
Common web sound formats include midi, wav and
mp3 etc.
–
You can also insert a movie (mpeg format) into your
web page by following the steps above.
Sound file
Movie file
Sound file
Movie file
IV. Page Properties
1. Select the Page Properties command under
the Modify menu.
To add a title to your
document, type a
descriptive title into the
title box.
Background
Colour
Text Colour
Add a Background Image

You set a background image for a Web page in
Page Properties. Background images are tiled
over the entire page.
1. Select the Background Image box at the Page
Properties title box.
Click Browse
2. Select the image file.
Click Apply
V. Displaying Data with Tables
Add a Table to a Web Page
1.
2.
Place the insertion point in your Web page
where you want the table inserted.
Select the Table icon in the Object panel.
3. The Insert Table dialog box appears. Enter the
number of rows and columns of the table that
you want to insert. You can also select the
Click
width of the table and the border size.
OK
Add and Remove Rows and Columns

Right-click a table cell and select the Table
submenu; another menu appears with a
number of commands to add and remove rows,
columns, or both. Select one of these
commands to make a change to the table.

You can also add or remove rows and columns
by editing Table Properties in the Property
inspector.
No of
Rows
No. of
columns
Change Column Width and Row Height
1. Position the cursor over a cell border until the
cursor turns into the double-line cursor.
2. Drag the double-line cursor to change the
column width or row height.
Resize a Table

With the entire table selected, drag the resize
handles to make the table a different size.
resize handle
Set Cell Padding and Cell Spacing

Cell padding sets the amount of space
between an object contained in a cell.

Cell spacing sets the amount of space between
two cells.
Cell
Padding
Cell
Spacing
Cell Spacing
Cell Padding
Practice…
Make Several Web Pages with Text,
Images and Tables etc
Save the file as “index.html”,
“index1.html”, “index2.html”…
V. Setting Lots of Links:
Hyperlinks, URLs and Mailto Links
Add a Hyperlink Within Your Web Site
1. Select some words in the text that could
logically be used to link to the other file.
2. Select the browse (folder) icon next to the Link
box.
3. Navigate to the directory where the other page
is located. Select the filename.
Click Select

The selected text appears as an underlined
blue hyperlink.

Note:
–
You can also add a hyperlink by selecting an image
in your document by following the steps above.
Add a Hyperlink to Other Web Pages
1. Select some words in the text that could
logically be used to link to the other file.
2.Enter the address of the web pages that you
want to set hyperlink to in the Link box.

The selected text appears as an underlined
blue hyperlink.

Note:
–
You can also add a hyperlink by selecting an image
in your document by following the steps above.
Add a Mailto Link
1. Select some text to be the link.
2. In the Property inspector, type mailto: followed
by an e-mail address in the Link box.

The selected text appears as an underlined
blue hyperlink.
VI. Upload and update data to a
server
Preview in a Browser

Select the Preview in Borwser command under
the File menu. Select the browser you want to
use from the menu.
Upload data to a server
1.
Click Site at the Launcher.
2. Select Define Site command under the Site
menu.
3. The Define Sites dialog box appears. Choose
one of the defined site.
Click Edit
4. Site Definition Dialog box appears. Select Web
Server Info.
5. Then choose FTP at the Server Access Menu.
www.studentweb
sy0000
Click
OK
 Host
name: www.studentweb
 Login:
sy0000
 Password:
********
Click
Connect
1. Open the
folder
“public_html”
2. Drag the files
to the
“public_html”
folder

The address of your web site is
http://10.122.64.49/~kp