Macromedia

Dreamweaver

Simple Steps To Create a

Web Site

KMM 3043
Pembangunan Aplikasi Multimedia

Tengku Intan Farahliza Tengku Sharif

Pensyarah
Diploma Teknologi Maklumat
Kolej Ketengah, AMBS Dungun.
 Macromedia Dreamweaver

Menu bar

1
 Toolbars in Macromedia Dreamweaver

Common Tools
1. 2. 3. 4. 5. 6. 7. 8. 9. 10.

1. Insert bar - contains buttons for inserting various types of "objects," such as images, tables, and
layers, into a document.

2. Hyperlink – Inserts a hyperlink at the current cursor location

3. Email link – Inserts an email link at the current cursor location
4. Anchor – Inserts an anchor at the current cursor location
5. Table – Inserts a table at the current cursor location
6. Images – Inserts an image, rollover or hot spot at the current cursor location
7. Media – Inserts Flash animation, Shockwave, plugins, applets etc. at the current cursor location
8. Date – Inserts the date at the current cursor location
9. Comment – Inserts a comment at the current cursor location
10. Templates – Create templates and editable regions

Properties Panel

2
 Right align text
Size of text
Justified text alignment
Font of text
Link
Increase or decrease font size
Page where link opens
Color of text Bulleted list
Bold text
Numbered list
Italicize text
Decrease indent
Left align text
Increase indent
Center text

Views
1. Code view – Shows HTML code of the page
2. Split view – Shows ½ page of code and ½ of the WYSIWYG of the page
3. Design view – Shows WYSIWYG view of the Web page

You will be creating a site to be used as your website.

Getting Organized & File Structure

1. Copy the folder named myWebSite from the File server to the desktop.
2. All pages for this site will be saved in the myWebSite folder.

Creating a Site
3. Create a new site
a. From the Files panel, choose Manage Sites. (Or from the Site menu, choose Manage Sites)

b. Select a previously created site, or press New…site.

c. Click on the Advanced tab
d. Name the site myWebSite.

3
 e. Click on the yellow folder next to Local root folder.

f. Select the myWebSite folder that is on the desktop

g. Click OK.
h. Click Done.
i. In the Site panel, you will see the folder hierarchy of the files that can be used within this site.

Creating Pages from Templates

1. From the File menu, select New. Select the Templates tab. In the left column select myWebSite, in the
center mytemplate, and at the bottom, check the box to Update page when template changes. Create.

2. On the new page, change the Title to yourname home page.

3. Note that your cursor becomes a circle with a slash through it when you are not in an editable region.

4
 4. From the File menu, select Save As. Name the file index and save to the myWebSite folder.

Editing Pages
1. Highlight the Page Heading text.
2. Type in the specific class that you teach. If you teach more than one subject, use <Shift><Enter> to move
the cursor to the next line.

Nesting Tables

1. Click below the Body tag.

2. Click the Table icon on the Common tools toolbar.

3. Match the settings with the settings shown below:

4. Click OK.

Inserting Images
1. From the Site panel, drag the image yourname.jpg from the images folder to the left cell of the table.

2. In the Properties panel, change the Alignment to Center.

Inserting Text in Tables

1. Click in the right cell of the table.
2. In the Properties panel, change the Vertical Alignment to Top and W (or Width) to 300.

5
 3. Type your School Name. Press <Enter>
4. Type your School Street Address. Press <Shift><Enter>.
5. Type the City, State, Zip. Press <Shift><Enter>.
6. Type your Room Number. Press <Shift><Enter>.
7. Type your Phone Number. Press <Shift><Enter>.
8. Type any other information you would like to add in your personal information section. Use <Shift><Enter>
between lines of information. Press <Enter> after the last line.

Inserting an Email Link

1. Click on the Email Link icon in the Common tools toolbar.
2. In the Text field, type Email Your Name.
3. In the E-Mail field, type your email address.

Previewing the Page

1. From the File menu, choose Save or (Ctrl+S)
2. From the File menu, choose Preview in Browser and iexplore or (F12).

Working with Tables

1. Open the Classassign.htm page.
2. Change the Page Heading to Class Name Assignments.

Adding Information to a Cell

1. Click in the first cell of the bottom row of the First Six Weeks table.
2. In the Properties panel, change the Alignment to Center.
3. Type 1.
4. Press <Tab> to move to the middle cell.
5. Type Assignment #1.
6. Press <Tab> to move to the third cell.
7. Type the Month, Day, Year. ex: Aug. 16, 2005

Creating a Link to a Word Document

1. Highlight the text Assignment #1.
2. In the Files panel, click the plus sign to open the docs folder.

6
 3. In the Properties panel, click on the Point to File symbol next to the Link field, and drag the arrow to
assignment1.doc in the docs folder.

(This
creates a relative link to the homework file. Dreamweaver keeps track of the links inside the Site).
4. In the Target field, select the _blank option. (This will make the Homework page open in its own window).

Adding Rows to Tables

1. Click in the bottom right cell of the table.
2. Press <Tab>. This will add another row to the table. This works for all tables.

Previewing the Page

1. From the File menu, choose Save or (Ctrl+S)
2. From the File menu, choose Preview in Browser and iexplore or (F12).

Creating a List of Links

1. Create a new page from the template. (File  New. Click the Templates tab. Choose myWebSite,
myTemplate, and Create).
2. Save the page as links. (File  Save As)
3. Change the Page Heading to Links.

4. Click below the Body tag.

5. In the Properties panel, click on the Unordered List button . This will begin a bulleted list.
6. Type Arlington ISD.
7. Highlight the text.
8. In the Properties panel, in the Link box, type http://www.aisd.net. In the Target field, select _blank.
Note: external links must have the “http://”, and they should always be targeted to open in a blank window.

Adding New Items to a List

1. Click at the end of the text on the last list item.
2. Press <Enter>

Switch between Pages

7
 1. With multiple pages open, click the page name at the top of the document toolbar to switch pages.

2. An asterisk next to the page name indicates the page has not been saved since it was last changed.

Other Ideas for Pages on the Site:

 Syllabus
 News
 Class Rules
 Resume
 Teacher Schedule
 Tutoring Schedule

Creating Internal Links by Changing the Template

1. Open the myTemplate page.

2. Highlight Home in the table of links.

3. In the Properties panel, click on the Point to File symbol next to the Link field, and drag the arrow to
index.htm in the Files panel. Leave the Target field empty.

4. Repeat steps 2 and 3 for each of the other pages, linking to the appropriate page name.
5. Save changes to the template. From the File menu, choose Save or (Ctrl+S)
6. Dreamweaver will ask if you want to change all pages in the site created using that template.

7. Select Yes.

8
 8. Dreamweaver will show how many pages were updated.

Previewing the Site

1. From the File menu, choose Save All. If there was an Untitled page, do not save it.
2. From the File menu, choose Preview in Browser and iexplore or (F12).
3. Check all links to make sure they work.

Transporting Your Web Site

1. On the desktop, right click the myWebSite folder. Select WinZip…Add to myWebSite.zip.

2. Email the resulting file to yourself.

Uploading your site

1. A web site needs a file server on which to reside.
2. To copy your site from your computer to your server space, select all of the documents and folders in your
myWebSite folder by pressing <Ctrl-A>, and copy them to your server space.
3. Since your Home page is named index, the address of your site will be the same as the address of your
personal space on the server.

Site Maintenance
There will be 2 copies of your website: one on your web server, that everyone can see, and a working copy that you
keep and change on your computer. The copy on your computer will be the one you edit using Dreamweaver. After
making changes to the working copy on your computer, you will need to “upload” the changed pages to the server to
make them viewable on the net.

Working Copy of the Website

The following steps only need to be done once on your computer:
1. Download or copy the zipped web site to your desktop.
2. Unzip your web site folder to your desktop. (Right-click the folder and Extract to here.)
3. You now have a duplicate of the web site.

9
 4. To maintain site integrity, open Dreamweaver and create a new site using the procedures in the section
“Creating a Site”, page 4.

Editing Pages
1. To edit a page, open Dreamweaver and open the page. Make the necessary changes and Save.
2. To add a page, open Dreamweaver and use your template to create the new page (see page 8). File, Save
as an appropriate name, and save it to your myWebSite folder on the desktop. Link it as necessary. A new
page will normally require a change to the links on the template.
3. To change the template, open Dreamweaver and make your change. Save the template and allow
Dreamweaver to update all of your pages. Save. All pages created from the template need to be uploaded
when the template is changed.

Adding Multiple Rows or Columns in a Table

1. Click in the table where the new rows or columns will be.
2. Right-click and select Table  Insert Rows or Columns.
3. Select the Number of Rows or Columns and Above or Below the Selection.

.
4. Select OK.

Optimize Images Using Fireworks MX 2004

1. Open Fireworks.
2. File  Open the picture to be optimized.
3. Adjust the color. Filters  Adjust Color  Auto Levels.
4. Select the Crop tool , and crop the image as appropriate.
5. Change the image size. Modify  Canvas  Image Size.

6. In the Optimize panel match these settings.

7. File  Export, and export the image to the images folder in your myWebSite folder. If it has the same
name, it will overwrite the original.

10
 8. Exit Fireworks without saving.

Edit the topBanner or bg Images

1. topBanner.gif and bg.gif are used on the web site, but they cannot be edited. Only the .png files can be
edited.
2. Open Fireworks.
3. File  Open topBanner.png or bg.png.
4. Make the necessary changes.

5. In the Optimize panel match these settings.

6. File  Export, and export the image to the images folder in your myWebSite folder. If it has the same
name, it will overwrite the original.
7. Exit Fireworks without saving.

11