HandoutDreamweaverMX2004

NBEA 2007 Annual Convention

New York, NY

Dreamweaver for Beginners

Building a Basic Website from the Ground Up

(Beginning Level)

Presented by:

Kellie Reese

Bloomfield High School

P.O. Box 650

Bloomfield, MO 63825

573.568.2146

kreese@mail.bloomfield.k12.mo.us

Computer Workshop 12B

Friday, April 6, 2007

8:30 a.m. - 11:30 a.m.

Steps to Create Website Using Tables

Getting Started

1. Create a new folder on your flash drive entitled NBEA2007.

2. Copy the Images file folder from your CD to the NBEA2007 file folder on your flash drive.

3. Launch Dreamweaver.

4. Create New – HTML.

Creating Site Definition

1. You must create a site definition for every website so Dreamweaver knows where to locate the site files. This ensures that the pages will show up properly in the browser. Site – Manage Sites – New – Site – NBEA 2007 - Next.

2. No, I do not want to use server technology – next – Edit local copies on my machine, then upload to server when ready.

3. Click the folder icon to navigate to the destination to which you want to save – select – next – navigate to the destination to which you want to save – select – check Refresh remote list automatically so files will automatically update every time you copy files into your website – next – No, do not enable check in and check out – next – verify information – done – done.

Creating Home Page

1. Title all pages since the title appears in the title bar of a browser. In the document toolbar in the Title textbox, key NBEA 2007 Annual Convention.

2. If you want your page layout to display properly in all browsers, use a table. Insert – Table – Rows 5 – Columns 2 (leave all other options at the default settings) - ok. You can insert and delete rows and columns and format tables very much like you would in Microsoft Word. You can change table border colors when the entire table is selected by clicking Brdr, and you can change a table cell color by clicking in the cell and then clicking Brdr. Color backgrounds can be added to a cell, a row, a column, or an entire table. To set the color background, make your selection and then click Bg color on the Properties Inspector. Background images can also be added to tables or individual cells. Data in the table can be sorted, just as in Word, by clicking Commands - Sort Table. The Format Table feature contains pre-designed formats and can be accessed by clicking Commands - Format Table

3. In Properties Inspector, Align – Center – change W (width) to 700 pixels. You can use Autostretch to automatically resize a table so it fills the browser window.

4. Click and drag to select top row – Modify – Table – Merge Cells.

5. In the Properties Inspector, click the down arrow for Format – Heading 1 – click the down arrow for Font – Georgia, Times New Roman, Times, serif – Align Center – click in top row of table - key NBEA 2007 Annual Convention.

6. If the title does not fit on one line, click table border – click and drag right center sizing handle so the title fits on one line.

7. Click and drag to select second row – Modify – Table - Merge Cells.

8. In the Properties Inspector, click the down arrow for Format – Heading 2 – click the down arrow for Font – Georgia, Times New Roman, Times, serif – Align Center - click in the second row of table – key New York City, New York.

9. Click and drag to select third row – Modify – Table – Merge Cells.

10. In the Properties Inspector, click the down arrow for Format – Heading 3 – click the down arrow for Font – Georgia, Times New Roman, Times, serif – Align Center – click in the third row of table – key April 4-7, 2007 – enter – key Educating for Success in Business and Life! – press enter. These two lines should be formatted the same.

11. Since some servers will not recognize spaces, do not use spaces in file names. Many servers expect the home page to be named index.htm or index.html. File – Save As – navigate to the destination to which you want to save (the same destination you designated when setting up the site definition) – in the filename textbox key index.htm.

12. Images should be saved in a standard format such as JPEG or GIF format. Click in the left column of the next row (cell A4) – Insert – Image – navigate to the Images file folder located in the NBEA2007 file folder on your flash drive – click NYMMTimesSquare.jpg – ok. After an image is inserted, the Image Tag Accessibility Attributes dialog box opens to allow you to specify alternate text or a long description for the image. Alternate text displays in place of the image in text-only browsers (i.e., screen readers) so the visitor knows the content of the image. For the alternate text, key Times Square – ok. If the Image Tag Accessibility Attributes dialog box does NOT open, just key the alternate text, Times Square, in the Alt textbox in the Properties Inspector.

13. Click an image to select it and display its properties. A selected image will have a black border around it with square black sizing handles. Dragging a corner handle adjusts both width and height. Use W and H in the Properties Inspector to resize an image to exact measurements. Resize image to W 360 and H 170 – key 2 for the Border size. Click off the image. The line in the table dividing columns A and B should be right beside the table border. An image border is always black, unless the image is being used as a link. When used as a link, the image’s border is the default link color.

14. The default text color in Dreamweaver is black. Select the first two rows and click the Text Color button on the Properties Inspector to open a palette of colors. Change the font color to the same shade of red as the Marriott sign in the picture using the dropper. Follow similar steps to change the font color of the first line of text in row three.

15. Select the fourth line of text and change the font color to the same shade of red as the vertical lines in the picture.

16. Dreamweaver does not recognize tabs or spaces at the beginnings of paragraphs since web paragraphs don’t have a first-line indent. Click in the right column of row 4 (cell B4) – key “Join us as NBEA returns to the Big Apple for its Annual Convention, which will be held at the New York Marriott Marquis Times Square, April 4-7.” – select text and change font to Georgia, Times New Roman, Times, serif, Justify, and change the font color to be the same color as the sky in the picture.

17. Pressing enter inserts a double space. If you do not want a double space, insert a line break <br> rather than a paragraph break by pressing shift + enter. Click after the period in the text you just keyed - press Enter (creates a double space), and key For more information you may send an e-mail to info@nbea.org. To make this an e-mail link, select the e-mail address, click in the Link textbox in the Properties Inspector, and key mailto:info@nbea.org.

18. Make NBEA a hyperlink by selecting NBEA and keying http://www.nbea.org in the Link textbox in the Properties Inspector – Target should be _blank.

19. Select row 5, Modify – Table – Merge Cells – center.

20. Horizontal rules on web pages separate sections of text. Click in row 5, press enter and insert a horizontal rule by clicking Insert – HTML – Horizontal Rule.

21. Click below the Horizontal Rule and key Innovative Programs and Events – | (this is called a pipe and is located above the Enter key – use in conjunction with Shift) - key New York City Marriott Marquis – | (pipe) – key Convention Registration Fees - shift + enter (creates a single space).

22. Click the Page Properties button at the lower right - change the Page Font to Georgia, Times New Roman, Times, serif – change the Text Color to be the same color as the sky in the picture - change the Background Color to gold FFCC33. Webpages have a white background when created. To draw attention to your page, you can change its background color.

23. Click the Links button to the left – change the links color to 3300FF – change the visited links color to the light blue shown on the left side of the image – click Apply – click Ok. Links are usually a different color than other text and are underlined.

24. Make sure the bottom line fits on one line – you may have to adjust the table width.

25. Dreamweaver can create 4 different types of links:

A. Text Links – links using a word or phrase.

B. Named Anchor Links – links from one location on a page to another location on the same page.

C. E-mail Links – links that open an e-mail program to send an e-mail message.

D. Graphic Links – links using an image.

A relative link is a link to a page within your website, and an absolute link is a link to a different website. Create a hyperlink for Innovative Programs and Events, as follows:

A. Select Innovative Programs and Events

B. In the Link textbox, key http://www.nbea.org/conferences/annual07.html

C. In the Target box, select _blank

26. Create a hyperlink for New York City Marriott Marquis by following similar steps to those above and linking to http://marriott.com/hotels/travel/nycmq-new-york-marriott-marquis-times-square/ - don’t forget to set the Target.

27. File – Save.

28. To test a link, click Preview/Debug in Browser button on the Document toolbar.

29. Text - Check Spelling – Save.

Creating Additional Web Page

1. File – New – Basic – HTML - Create.

2. In the document toolbar in the Title textbox, key Convention Registration Fees.

3. Text formats are applied in Dreamweaver using the Properties Inspector. Click the Page Properties button at the lower right - change the Page Font to Georgia, Times New Roman, Times, serif – change the Text Color to gold FFCC33 – change the Background Color to blue 3300FF.

4. Click the Links button to the left – change the links color to white – change the visited links color to light blue 33CCFF – click Apply – click Ok.

5. Format – Heading 2 – Align Center – Bold.

6. Key Convention Registration – press Enter – Format – Heading 3 – Justify align.

7. An ordered list is a list whose items should be in a certain order (i.e., a numbered list). An unordered list is a list whose items do not have to be in order (i.e., a bulleted list). Key The NBEA convention pre-registration fees are as follows: - Enter – click the icon for Unordered List in the Properties Inspector - key $190 for professional members – Enter –key $120 for student members – Enter –key $145 for retired members – Enter –key $325 for nonmembers – Enter –key $75 for spouses – Enter twice – key For registrations received after March 13 or paid on-site, there is an additional fee of $50 Enter. All of this text should be formatted as Heading 3. (Dreamweaver can also insert a definition list [Text – List – Definition] to list a term on one line and its description on the next line.)

8. File – Save As – filename is ConvReg.htm.

9. Insert Media – Flash Button – Soft-Orange – key Back to NBEA for the button text – Font – Georgia – Click the Browse to the right of Link – double-click the index.htm file – Target - _self – Save As NBEA.swf – Apply – OK.

10. Text - Check Spelling - File – Save.

Linking Pages

1. Click the tab for index.htm.

2. Select Convention Registration Fees – click the Browse for File file folder to the right of Link – double-click ConvReg.htm – File – Save.

3. Select Innovative Programs and Events | New York City Marriott Marquis | Convention Registration – right-click - Copy.

4. Open ConvReg.htm – press Enter after the Back to NBEA button – right-click - Paste.

5. File – Save.

Steps to Create Website Using Frames

A frameset contains several frames. Frames are kind of like mini HTML pages. A frameset must have a name just like every page must have a title. Each frame, or page, in a frameset can have text, images, formatting, and links just like any other web.

Getting Started

1. Create a new folder on your flash drive entitled NBEA2007Frames.

2. Copy the Images file folder from your CD to the NBEA2007Frames file folder on your flash drive.

3. Launch Dreamweaver.

4. Create From Samples – Framesets – Fixed Top Nested Left – Create.

Creating Site Definition

2. No, I do not want to use server technology – next – Edit local copies on my machine, then upload to server when ready.

Creating Home Page

1. Title all pages since the title appears in the title bar of a browser. In the document toolbar in the Title textbox, key NBEA 2007 Annual Convention. You have now named your frameset; each frame must also have a title.

2. Since some servers will not recognize spaces, do not use spaces in file names. Many servers expect the home page to be named index.htm or index.html. File – Save Frameset As – navigate to the destination to which you want to save (the same destination you designated when setting up the site definition) – in the filename textbox key index.htm - save.

3. A frame must be active to add content or a title, to change properties, or to save. To make a frame active, click in it. Click in the top frame – for the Title, key NBEA 2007 Annual Convention – File – Save Frame As – navigate to the destination to which you want to save – in the filename textbox key top.htm - save.

4. Click in the left frame – for the Title, key NBEA 2007 Annual Convention – File – Save Frame As – navigate to the destination to which you want to save – in the filename textbox key left.htm – save.

5. Click in the right frame – for the Title, key NBEA 2007 Annual Convention – File – Save Frame As – navigate to the destination to which you want to save – in the filename textbox key right.htm – save.

6. Click in the top frame. In the Properties Inspector, click the down arrow for Format – Heading 1 – click the down arrow for Font – Georgia, Times New Roman, Times, serif – Align Center – key NBEA 2007 Annual Convention – Enter – in the Properties Inspector, click the down arrow for Format – Heading 2 – click the down arrow for Font – Georgia, Times New Roman, Times, serif – key New York City, New York – Enter - in the Properties Inspector, click the down arrow for Format – Heading 3 – click the down arrow for Font – Georgia, Times New Roman, Times, serif – key April 4-7, 2007.

7. Click and drag the border below the top frame down until the text of the entire heading shows.

8. File – Save Frameset – File – Save Frame.

9. Click in the right frame. In the Properties Inspector, click the down arrow for Format – Heading 3 – click the down arrow for Font – Georgia, Times New Roman, Times, serif – Align Center - key Educating for Success in Business and Life! – press enter.

10. Images should be saved in a standard format such as JPEG or GIF format. Insert – Image – navigate to the Images file folder located in the NBEA2007Frames file folder on your flash drive – click NYMMTimesSquare.jpg – ok. After an image is inserted, the Image Tag Accessibility Attributes dialog box opens to allow you to specify alternate text or a long description for the image. Alternate text displays in place of the image in text-only browsers (i.e., screen readers) so the visitor knows the content of the image. For the alternate text, key Times Square – ok. If the Image Tag Accessibility Attributes dialog box does NOT open, just key the alternate text, Times Square, in the Alt textbox in the Properties Inspector.

11. Click in the top frame - click the Page Properties button at the lower right - change the Text Color to be the same shade of red as the Marriott sign in the picture using the dropper - change the Background Color in the top frame only to gold FFCC33. Webpages have a white background when created. To draw attention to your page, you can change its background color.

12. Click an image to select it and display its properties. A selected image will have a black border around it with square black sizing handles. Dragging a corner handle adjusts both width and height. Use W and H in the Properties Inspector to resize an image to exact measurements. Resize image to W 500 and H 210 – key 2 for the Border size. An image border is always black, unless the image is being used as a link. When used as a link, the image’s border is the default link color. Click off the image and press Enter.

13. Select the fourth line of text (located in the right frame) and change the font color to Gold #FFCC33.

14. Dreamweaver does not recognize tabs or spaces at the beginnings of paragraphs since web paragraphs don’t have a first-line indent. Just below the image, key “Join us as NBEA returns to the Big Apple for its Annual Convention, which will be held at the New York Marriott Marquis Times Square, April 4-7.” – select text and change font to Georgia, Times New Roman, Times, serif, Justify, and change the font color to be the same color as the gold background.

15. Pressing enter inserts a double space. If you do not want a double space, insert a line break <br> rather than a paragraph break by pressing shift + enter. Click after the period in the text you just keyed - press Enter (creates a double space), and key For more information you may send an e-mail to info@nbea.org. To make this an e-mail link, select the e-mail address, click in the Link textbox in the Properties Inspector, and key mailto:info@nbea.org.

16. Make NBEA a hyperlink by selecting NBEA and keying http://www.nbea.org in the Link textbox in the Properties Inspector – Target should be _blank.

17. Horizontal rules on web pages separate sections of text. Press enter after the e-mail address and insert a horizontal rule by clicking Insert – HTML – Horizontal Rule.

18. Click off the horizontal rule - click the Page Properties button at the lower right - change the Text Color to gold FFCC33 – change the Background Color to be the same shade of red as the Marriott sign in the picture using the dropper – click Apply – click Ok. Webpages have a white background when created. To draw attention to your page, you can change its background color.

19. File – Save Frame.

20. Click in the left frame. Key Innovative Programs and Events – press Enter - key New York City Marriott Marquis – Enter – key Convention Registration Fees.

21. Click the Page Properties button at the lower right of the Properties Inspector - change the Text Color to be the same shade of red as the Marriott sign in the picture using the dropper - change the Background Color to gold FFCC33. Webpages have a white background when created. To draw attention to your page, you can change its background color.

22. Click the Links button to the left – change the links color to dark blue – change the visited links color to light blue – click Apply – click Ok. Links are usually a different color than other text and are underlined.

23. Click and drag the border between the left and right frames to the right until all of the text shows.

24. Dreamweaver can create 4 different types of links:

A. Text Links – links using a word or phrase.

B. Named Anchor Links – links from one location on a page to another location on the same page.

C. E-mail Links – links that open an e-mail program to send an e-mail message.

D. Graphic Links – links using an image.

A relative link is a link to a page within your website, and an absolute link is a link to a different website. Create a hyperlink for Innovative Programs and Events, as follows:

A. Select Innovative Programs and Events

B. In the Link textbox, key http://www.nbea.org/conferences/annual07.html

C. In the Target box, select _blank

25. Create a hyperlink for New York City Marriott Marquis by following similar steps to those above and linking to http://marriott.com/hotels/travel/nycmq-new-york-marriott-marquis-times-square/ - don’t forget to set the Target.

26. File – Save Frame – File – Save All.

27. To test a link, click Preview/Debug in Browser button on the Document toolbar.

28. Text - Check Spelling – Save All.

Creating Additional Web Page

1. File – New – Basic Page – HTML - Create.

2. In the document toolbar in the Title textbox, key Convention Registration Fees.

4. Click the Links button to the left – change the links color to white – change the visited links color to light blue 33CCFF – click Apply – click Ok.

5. Format – Heading 2 – Align Center – Bold.

6. Key Convention Registration – press Enter – Format – Heading 3 – Justify align.

8. File – Save As – filename is ConvReg.htm.

10. Text - Check Spelling - File – Save.

Linking Pages

1. Click the tab for index.htm.

2. Select Convention Registration Fees – click the Browse for File file folder to the right of Link – double-click ConvReg.htm – File – Save.

3. File – Save Frame.

To use Dreamweaver templates, launch Dreamweaver – Create from Samples – Starter Pages. After you select the sample you want to use, just replace your own information with the template information.

Useful Dreamweaver Tips Not Included in Workshop

Backgrounds

Images or pictures can be used as backgrounds by using the Page Properties dialog box.

If the image is not large enough, Dreamweaver tiles the image (repeats it to fill the entire page).

Clean Up

Use the Clean Up HTML command to remove unnecessary tags and clean up coding (Commands – Clean Up HTML). If you have inserted text from Microsoft Word, you can use the Clean Up Word HTML command (Commands - Clean Up Word HTML).

Document Toolbar

The Document Toolbar is located just below the Insert Bar. You can view your website in three different views – Code, Split, or Design views.

Files and Assets Panel

The Files and Assets Panel is located at the right of your Dreamweaver window. The Files Panel lists all files and folders for your website. The Assets Panel lists colors, images, and objects used in a site.

Frame Tips

If you need a frame to scroll in order to see all of its content, select Yes or Auto in the scroll options to display scroll bars. Scroll bars will appear automatically if you select Auto and the browser window is too small to show all of the content. The Default setting is usually Auto.

If you want borders to show for the active frame, select Yes from the Borders drop-down. To remove the borders, select No. This must be done for each individual frame in the frameset. You can select a border color by using the Border Color palette.

The entire frameset must be selected in order to change frameset properties. This can be done by clicking any border or by clicking the heavy border surrounding all frames in the Frames panel.

Hotspots

Hotspots link the current page to another location. Hotspot tools are located on the Properties Inspector. You can resize a hotspot by selecting it with the Pointer Hotspot tool. To hide a hotspot, go to View - Visual Aids - Image Maps.

Images

To position an image:

Use alignment buttons on the Properties Inspector.

Use the drop-down arrow for Alignment on the Properties Inspector to select Default, Baseline, Top, Middle, Bottom, TextTop, Absolute Middle, Absolute Bottom, Left or Right.

Key a value in the V Space and H Space text boxes on the Properties Inspector.

Insert Bar

The Insert Bar is located in the upper left corner of the Dreamweaver window just below the menu bar. You can select the tools you need (i.e., Common, Layout, Forms, Text, HTML, Application, Flash Elements, and Favorites.

Navigation Bar

Dreamweaver allows you to provide up to four images for each element in a navigation bar, as follows:

Up –displays when a page opens

over – displays when the mouse pointer moves over it

down –displays when the element is clicked

over while down – displays if the pointer moves over the element after it has been clicked

To create a new Navigation Bar, Insert – Image – Objects – Navigation Bar. More elements can be added to the Navigation Bar by clicking the + button. Elements can be removed from the Navigation Bar by clicking the – button. Navigation bars can be horizontal or vertical, with horizontal being the default.

Properties Inspector

A property is considered to be HTML, alignment, size, or anything you can assign to text or pictures. The Properties Inspector is used to select formats and position items. The choices displayed in the Properties Inspector depend on what item is selected in the document. If all of the options in the Properties Inspector are not displayed, click the expander arrow at the lower-right corner to display additional fields.

Publishing Tips

Include your images file folder and all web pages when copying files for publication. This insures that the browser will display your pages correctly.

Rollover Image

An image that changes when hovering or clicking.

Targets

Dreamweaver uses the following Targets:

_blank target opens the linked page in a new browser window while keeping the current browser window open

_parent opens the linked page in the current frameset, replacing all frames

_self opens the linked page in the frame that contains the link, replacing all content in this frame

_top opens the linked page in the outermost frameset, replacing all frames

Web Design Guidelines

Include a balance of text and graphics in your web pages. Make your site user friendly and easy to navigate.

References

Baker, John Marshall. (2005). Dreamweaver MX 2004 Design and Application. St. Paul, Minnesota: Paradigm Publishing Company.

Evans, Mark A. and Hamm, Michael. (2007). Introduction to Web Design Using Dreamweaver. Woodland Hills, California: Glencoe/McGraw-Hill.

Hester, Nolan. (2006). Creating a Web Page in Dreamweaver 8. Berkeley, California: Peachpit Press.

Skintik, Catherine. (2007). Learning Macromedia Dreamweaver 8. New Jersey: Pearson Education, Inc.