8/6/2019 WebSite Dream Weaver Notes

1/12

KMM 3043Pembangunan Aplikasi

Multimedia

Tengku Intan Farahliza Tengku SharifPensyarah

Diploma Teknologi MaklumatKolej Ketengah, AMBS Dungun.

Macromedia

Dreamweaver

Simple Steps To Create a

Web Site

8/6/2019 WebSite Dream Weaver Notes

2/12

22

8/6/2019 WebSite Dream Weaver Notes

3/12

Macromedia Dreamweaver

33

Menu barMenu bar

8/6/2019 WebSite Dream Weaver Notes

4/12

Toolbars in Macromedia Dreamweaver

Common Tools1. 2. 3. 4. 5. 6. 7. 8. 9. 10.

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

2. Hyperlink Inserts a hyperlink at the current cursor location3. Email link Inserts an email link at the current cursor location4. Anchor Inserts an anchor at the current cursor location5. Table Inserts a table at the current cursor location6. Images Inserts an image, rollover or hot spot at the current cursor location7. Media Inserts Flash animation, Shockwave, plugins, applets etc. at the current cursor location8. Date Inserts the date at the current cursor location9. Comment Inserts a comment at the current cursor location10. Templates Create templates and editable regions

Properties Panel

Size of text

Font of text

Increase or decrease font size

Color of text

Bold text

Italicize text

Left align text

Center text

Right align text

Justified text alignment

Link

Page where link opens

Bulleted list

Numbered list

Decrease indentIncrease indent

Views1. Code view Shows HTML code of the page2. Split view Shows page of code and of the WYSIWYG of the page3. Design view Shows WYSIWYG view of the Web page

44

8/6/2019 WebSite Dream Weaver Notes

5/12

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

Getting Organized & File Structure

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

Creating a Site

3. Create a new site

a. From the Filespanel, choose Manage Sites. (Or from the Sitemenu, choose Manage Sites)

b. Select a previously created site, or press Newsite.

c. Click on the Advanced tabd. Name the site myWebSite.

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

f. Select the myWebSitefolder that is on the desktopg. Click OK.

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

55

8/6/2019 WebSite Dream Weaver Notes

6/12

Creating Pages from Templates

1. From the File menu, select New. Select the Templates tab. In the left column select myWebSite, in thecenter 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. From the File menu, select Save As. Name the file indexand save to the myWebSitefolder.

Editing Pages

1. Highlight the Page Headingtext.2. Type in the specific class that you teach. If you teach more than one subject, use to move

the cursor to the next line.

Nesting Tables

1. Click below the Bodytag.

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

66

8/6/2019 WebSite Dream Weaver Notes

7/12

3. Match the settings with the settings shown below:

4. Click OK.

Inserting Images

1. From the Site panel, drag the image yourname.jpgfrom the images folder to the left cell of the table.

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

Inserting Text in Tables1. Click in the right cell of the table.2. In the Properties panel, change the Vertical Alignment to Topand W (or Width) to 300.

3. Type your School Name. Press 4. Type your School Street Address. Press .5. Type the City, State, Zip. Press .6. Type your Room Number. Press .7. Type your Phone Number. Press .

8. Type any other information you would like to add in your personal information section. Use between lines of information. Press 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 Filemenu, choose Saveor (Ctrl+S)

77

8/6/2019 WebSite Dream Weaver Notes

8/12

2. From the Filemenu, choose Preview in Browserand iexploreor (F12).

Working with Tables

1. Open the Classassign.htmpage.2. Change the Page Headingto Class Name Assignments.

Adding Information to a Cell

1. Click in the first cell of the bottom row of the First Six Weekstable.

2. In the Properties panel, change the Alignment to Center.3. Type 1.4. Press to move to the middle cell.5. Type Assignment #1.6. Press 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 docsfolder.3. In the Properties panel, click on the Point to File symbol next to the Linkfield, and drag the arrow to

assignment1.docin the docsfolder.

(Thiscreates a relative link to the homework file. Dreamweaver keeps track of the links inside the Site).

4. In the Targetfield, select the_blankoption. (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 . This will add another row to the table. This works for all tables.

Previewing the Page

1. From the Filemenu, choose Saveor (Ctrl+S)

88

8/6/2019 WebSite Dream Weaver Notes

9/12

2. From the Filemenu, choose Preview in Browserand iexploreor (F12).

Creating a List of Links

1. Create a new page from the template. (FileNew. Click the Templatestab. Choose myWebSite,myTemplate, andCreate).

2. Save the page as links. (File Save As)3. Change the Page Headingto Links.

4. Click below the Bodytag.

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

Switch between Pages

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

99

http://www.aisd.net/http://www.aisd.net/

8/6/2019 WebSite Dream Weaver Notes

10/12

Creating Internal Links by Changing the Template

1. Open the myTemplatepage.

2. Highlight Homein the table of links.3. In the Properties panel, click on the Point to File symbol next to the Linkfield, and drag the arrow to

index.htmin the Files panel. Leave the Targetfield 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 Filemenu, choose Saveor (Ctrl+S)6. Dreamweaver will ask if you want to change all pages in the site created using that template.

7. Select Yes.

8. Dreamweaver will show how many pages were updated.

Previewing the Site

1. From the Filemenu, choose SaveAll. If there was an Untitledpage, do not save it.2. From the Filemenu, choose Preview in Browserand iexploreor (F12).3. Check all links to make sure they work.

Transporting Your Web Site1. On the desktop, right click the myWebSite folder. Select WinZipAdd to myWebSite.zip.

2. Email the resulting file to yourself.

1010

8/6/2019 WebSite Dream Weaver Notes

11/12

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

myWebSitefolder by pressing , 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 youkeep and change on your computer. The copy on your computer will be the one you edit using Dreamweaver. Aftermaking changes to the working copy on your computer, you will need to upload the changed pages to the server tomake 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.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 myWebSitefolder on the desktop. Link it as necessary. A newpage 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 allowDreamweaver to update all of your pages. Save. All pages created from the template need to be uploadedwhen 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.

1111

8/6/2019 WebSite Dream Weaver Notes

12/12

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 imagesfolder in your myWebSitefolder. If it has the samename, it will overwrite the original.

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

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 imagesfolder in your myWebSitefolder. If it has the same

name, it will overwrite the original.7. Exit Fireworks without saving.

1212