Dreamweaver MX Basics

Transcription

1 Macintosh or Windows What is Dreamweaver MX? Dreamweaver MX is a powerful, yet flexible site management tool that helps you with the process of creating and managing Web pages and sites. Using a graphical interface you can quickly put together a page of text, images, and hypertext links. The page can be designed with colors, tables, styles, graphics, and menus to make it functional and attractive. However, be forewarned that Dreamweaver cannot prevent you from making unattractive pages. Making professional looking pages requires practice, browsing other sites for ideas, listening to feedback, and lots of time. This tutorial covers the basics of Dreamweaver that are outlined in the next section. What you will learn define a Dreamweaver site work with the Dreamweaver environment code in basic HTML create a basic Web page and format text title a Web page insert images create hyperlinks to Web addresses view your pages through a Web server change Dreamweaver preferences format the page background create and format tables lay out images and text side-by-side create a bulleted list insert an link link menu items to sections within a page copy and paste text between pages work with the tag selector recognize valid folder and file names Windows Log on to a Windows computer with your Eaglenet (ANGEL) username and password. Double-click My Computer to display the available network drives. Double-click the W drive to open it into a window on the desktop. Map Your W Drive Macintosh Log on to a Macintosh computer by entering macuser in the Username and Password boxes. Click the W Drive icon in the Dock. Type your Eaglenet username in the dialog box and click OK. Another window will appear. Make sure that the Workgroup/Domain is Eaglenet, verify your username, and type your Information Technology 1 February 6, 2007

2 password (lowercase). Click OK. Your W drive window will now open and an icon will appear on the desktop titled with your username. Copying the Tutorial Folder to Your W Drive Windows Right-click on Network Places and choose Map Network drive. Choose the drive letter R in the Drives box and type \\cowles\dwtrain in the network Folder box. Do not check Reconnect at logon. Click the Finish button. The dwtrain share opens into a window on the desktop. Macintosh Choose Go > Connect to Server. Type smb://cowles/dwtrain in the Server Address box. Click Connect. Type your Eaglenet username and click OK. Another window will appear. Make sure that the Workgroup/Domain is Eaglenet, verify your username, and type your password (lowercase). Click OK. The dwtrain share opens into a window on the desktop. Open the basics folder. Drag the folder mysite to your W drive (in this example mtwain08$). Academic Tech. Services - Information Technology 2 February 6, 2007

3 Open your W drive to verify that the folder has been copied. Whether you are using a Windows or Macintosh computer, the content will be the same. Windows view of W drive Macintosh Column view of W drive Defining a Dreamweaver Web Site Dreamweaver requires that you designate as a site a working folder of HTML files, images, media files, PDF documents, and other related documents. You will define your mysite folder as a Dreamweaver site and edit the site directly on your W drive. Your site is considered a Local site. If the dialog the local root folder does not exist display, then click the Cancel button. Choose Apple menu (Macintosh) or Start Menu (Windows) > Internet or Internet Applications > Dreamweaver. A window titled Workspace Setup may appear. Click OK. It may take a few moments for Dreamweaver MX to load. Academic Tech. Services - Information Technology 3 February 6, 2007

4 Windows Choose Site > New Site. Click on the Advanced tab. Under Category select Local Info. Type My First Site in the Site Name box. Click the folder icon to the right of the Local Root Folder box and browse to your mysite folder in your W drive. Macintosh Choose Site > New Site. Click on the Advanced tab. Under Category select Local Info. Type My First Site in the Site Name box. Click the small folder icon to the right of the Local Root Folder box and browse to your mysite folder in your W drive. Click the mysite folder and the click the Select button. The Local Root folder text box should now read: W:\mysite. Click the mysite folder and the click the Select button. The Local Root folder text box should now read: mtwain08$:mysite. Windows site definition box Click the OK button. Macintosh site definition box Click the OK button. Your Dreamweaver site is now defined and displays in the Site window. Depending on the computer you are using, refer to the figure Site view for Macintosh or Site view for Windows. Included in your site are HTML files, a folder of images, a folder of non HTML Academic Tech. Services - Information Technology 4 February 6, 2007

5 files such as Word documents, and special folders (Templates, Library, and includes) that are used for site management. Sites view Windows Sites view Macintosh File Naming Conventions As you scan the files and folders in your site, read carefully the following naming conventions. Use lowercase Most Web servers are case sensitive to file names. Although Windows NT Web servers are not case-sensitive, we strongly recommend that you create all filenames in lowercase. This good habit ensures maximum portability on all Web servers. The exception would be the Library and Template folders, which are Dreamweaver specific. Extensions are required All files for the Web require a filename extension (a suffix that contains a period followed by one or more characters). Pages are usually.html,.shtml or.htm; GIF images are.gif, and JPEG are.jpg. Restricting characters The Web is more restrictive on the use of special characters in file names than what you are used to with your computer. Do not use a forward slash /, more than one dot, spaces (use underscore _ instead), or ampersands &. Academic Tech. Services - Information Technology 5 February 6, 2007

6 Dreamweaver Preferences You will customize Dreamweaver settings in order to more easily complete this tutorial. Choose Edit > Preferences. Choose General under Category and then uncheck Show Only Site Window on Startup. Under category, choose Invisible Elements and check the Line Breaks box. Then choose Code Hints and uncheck Enable Auto Tag Completion. Finally, choose Preview in Browser and choose Firefox (Macintosh) or iexplorer (Windows) as the Primary Browser. Click OK. Dreamweaver MX Environment If an untitled document appears, you do not need it, so choose File > Close. In the Site window, double click the file minervasmachine.html to open it into its own document window. Macintosh users only: the Site window will hide behind the document window. To swap between the Site and Document windows press the F8 key. Windows users work with the Dreamweaver MX Workspace (refer to the following figure, Dreamweaver MX Workspace). All windows and panels in the workspace are snapped together and do not separate. Windows and panels in a Macintosh Dreamweaver 4 Workspace do not snap together and float separately. Academic Tech. Services - Information Technology 6 February 6, 2007

7 Dreamweaver MX Workspace (Windows only) Document Window Refer to the figure Document Window as you work through this section. You build your Web pages in the Document Window. The content in the body gives the user an idea of what the page will look like when viewed in a browser such as Firefox or Internet Explorer. Refer to the following for descriptions of the other elements. Academic Tech. Services - Information Technology 7 February 6, 2007

8 Document Window (snapped in component of Dreamweaver MX workspace for Windows, a separate floating window for Macintosh Dreamweaver 4 Workspace) Elements in the Document Window The Title Bar Shows the page s title and the path of the filename. In the example above, the title is Minerva s Machine and the path is mysite_mtwain/minverasmachine.html. Mysite_mtwain is the folder name and minervasmachine.html is the filename. Document Toolbar With this toolbar, you can change the page s title in the Title box, switch between Design View (currently selected in the above example) and Code (HTML) View, and Preview the page in a Web browser. If the toolbar is not visible, it can be displayed by choosing View > Toolbars > Document. Move, but do not click, your mouse pointer over each icon of the Document toolbar going from left to right. Wait until the yellow or black balloon displays the label for each icon. Standard Toolbar The buttons in this toolbar allow you to quickly do file and edit tasks such as creating a new page, saving the page, and cutting a selected object in the page. If the toolbar is not visible, choose View > Toolbars > Standard. Academic Tech. Services - Information Technology 8 February 6, 2007

9 Move, but do not click, your mouse pointer over each icon of the Standard toolbar going from left to right. Wait until the yellow or black balloon displays the label for each icon. The Status Bar, located at the bottom of the document window, includes useful information about the Web page. The Tag Selector displays HTML tags that can be selected for precise work such as applying styles and selecting table elements. The Window Size pop-up menu displays the document window s dimensions in pixels. Download Status provides the current size of the Web page including text, images, and embedded media such as QuickTime movies and how long it would take the page to load at a predefined connection speed. Windows only: The document window is snapped into the Dreamweaver workspace. To separate it as a floating window, click the Lower Restore Down button in the right corner of your Dreamweaver workspace. Refer to the figure Click the Restore Down. Click the Restore Down Click the black arrow in the Window Size menu and choose 760 x 420 (800 x 600, Maximized). The screen resizes to 760 x 420 pixels, which is the actual editing space possible to fully display a page in a Web browser for monitors set to a resolution of 800 x 600. Choose Edit > Preferences and choose Status Bar under Categories. Set the Connection Speed to 56.0 Kilobits per second, which is the standard speed of a modem connection. Click OK. The Download Status should display 15K/3 sec in the Download Status bar. The first number (15K) is the file size of the text and the image at the top of the page. The second number (3 sec) is the approximate time it would take to load the page using a 56K modem. Academic Tech. Services - Information Technology 9 February 6, 2007

10 Dreamweaver Panel Groups and Panels The Insert bar, located at the top of the screen, is a Dreamweaver panel that allows you to choose commands (for example, Insert Anchor, Insert Table) by clicking tabs and icons. Tabbed categories include Characters, Forms, Frames, Head, and Media. In the Insert panel click the Common tab to display its collection of objects. If it does not appear, choose Window > Insert. Dreamweaver Insert Bar Move, but do not click, your mouse pointer over each icon going from left to right. Wait until the yellow balloon displays the label for each icon. Many objects you will use often such as Insert Table; others less so. Additional panels are organized in groups contained in a palette that is position to the right of the Dreamweaver document window. Choose Window > Answers to display the panels palette. (Window > Hide Panels indicates that the palette is already displayed.) Dreamweaver panel groups in collapsed view To the right of your workspace click the Design drop arrow to show the panels belong to the group: CSS Styles, HTML Styles, and Behaviors. Click the arrow again to collapse the panels. Refer to the figure Design Panel Group expanded. Academic Tech. Services - Information Technology 10 February 6, 2007

11 Design Panel Group expanded You will next work with the Files group, which typically contains the Site and Assets panel (Windows) or simply the Assets panel (Macintosh). The Assets panel displays all image files, colors, links, library items, and templates for the entire site. Refer to the figure Assets Panel as you work through these steps. Click Files drop arrow to expand the group. Windows only: Click the Assets tab. In the left sidebar are objects that organize and display site files by categories. Assets Panel Slowly move the mouse pointer over each icon to bring up its descriptive label. Click the Images object to display all image files for the Women in Computing Web site. Windows only Click the Site tab to bring up the Site window. Choose Window > Properties to check and display the Properties The Property Inspector (P.I.), located at the bottom of the screen, is the most used of all panels. It changes its look depending on what page element (text, images, links, tables) you are working on. When you edit text, the Property Inspector provides a menu of text formatting commands such as style, text alignment, fonts, color, and paragraph formats. Academic Tech. Services - Information Technology 11 February 6, 2007

12 Refer to the figure Property Inspector to see commands relevant to a hypertext link. For example, the box Target _blank only applies to links and is not available for any other page element. It will not appear unless you are working on hyperlinks. Property Inspector hypertext links Choose File > Close. A Quick Look at HTML The desire to design Web pages is probably one of the biggest learning motivators for young children, teenagers, and adults alike. There is a real attraction to creating an art form of expression that is recognized by a potentially large audience. Despite the attraction of images and other media such as sound and video in a Web page, the actual file is text-only. A Web page is coded with HTML (Hypertext Markup Language) elements and each element is associated with an HTML tag or pair of tags. All HTML documents contain the HTML, HEAD, TITLE, and BODY tags. Dreamweaver s graphical Design View reduces the need to master HTML for creating professional-looking Web pages; however, it is important to become somewhat familiar with the syntax and understand how HTML works. For example, occasionally you will need to switch from Design View to edit your page in Code View. In this section you will practice coding HTML to create a Web page and then display the results in an Internet Explorer window. Choose File > New Click the General tab, click Basic Page under Category, click HTML under Basic Page, and click Create. Academic Tech. Services - Information Technology 12 February 6, 2007

13 A blank untitled document displays. Click the Show Code View button For each new page, Dreamweaver displays default HTML code in the document window as shown in lines 1 through 9 below. HTML stands for HyperText Markup Language, which is used to lay out text, images, and links on a Web page. 1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2. <html> 3. <head> 4. <title>untitled Document</title> 5. <meta http-equiv="content-type" content="text/html; charset=iso "> 6. </head> 7. <body> 8. </body> 9. </html> All HTML pages require the tags HTML, HEAD, TITLE and BODY, which are constructed in pairs. A pair of tags with anything in between is referred to as an element. Without the beginning <HTML> and ending </HTML> tags a page would be ignored by a Web browser. The HEAD element contains the TITLE and META tags used to label the Web page and make it more available in searches. The BODY tags contain the HTML code that is displayed in Web browsers. Not all tags are in pairs, for example, the IMG SRC tag used for displaying images has no pair. Academic Tech. Services - Information Technology 13 February 6, 2007

14 Entering HTML Code Refer to the complete code in the figure GRANVILLE HTML below as you work through the steps below. Delete the words Untitled Document and type Evelyn Boyd Granville between the TITLE tags. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <TITLE> Evelyn Boyd Granville </TITLE> <meta http-equiv="content-type" content="text/html; charset=iso "> </HEAD> <BODY> </BODY> </HTML> On a separate line between the body tags type <H2>African American Pioneer</H2> Press Enter. Type Evelyn Boyd Granville was one of the first African American women to earn a Ph.D. in Mathematics. Press Enter. Choose File > Save as and navigate to your folder (mtwain08$:mysite or R:\mysite.) Enter the filename granville.html in the File Name box and click the Save button. In the Document toolbar, click the Preview Browser icon and choose Preview in Firefox or Internet Explorer. Your Web page displays the title in the Title Bar and African American Pioneer in large bold text followed by the Evelyn Boyd paragraph. Close the Firefox or Internet Explorer window. Move back to your HTML page and center the text African American Pioneer by adding the CENTER tags like this: <CENTER><H2>African American Pioneer</H2></CENTER> On the line below the first sentence, type Other Granville Facts: and press the Enter or Return key. A bulleted list consists of two tags UL to define the list as unordered and LI to denote the list items one by one. Enter this code: <UL> <LI> Earned her doctorate in 1949 from Yale <LI> Developed computer programs for trajectory analysis for the Mercury and Apollo Projects Academic Tech. Services - Information Technology 14 February 6, 2007

15 <LI> Taught mathematics at California State University at Los Angeles </UL> Press Enter. Click the Save icon in the Standard Toolbar and the choose Preview in Firefox or Internet Explorer. The first line is centered and the bulleted list of Granville facts appears. Close the Firefox or Internet Explorer window. Return to your HTML page, click on the line below </UL>, type A photograph of Dr. Granville and press the Enter key. Type the paragraph tag <P>, which creates a blank line, and press Enter or Return. Insert an image by typing <IMG SRC = "images/granville.gif"> and press Enter or Return. Surrounding quotes are required for the tag s value, which is a path to the image filename. The folder where the image file is located is denoted as images/. Click the Save button and then choose Preview in Internet Explorer. The page shows a photograph of Dr. Granville. Close Internet Explorer and return to your HTML page. On the blank line under the IMG SRC tag, type <P> and press Enter or Return. Then type For more information, read Create a hyperlink, type <a href=" My Life as a Mathematician</a> Note that the actual tags are <A> and </A>. In between the tags is the HREF property and its value which is a Web address. The text My Life as a Mathematician provides the clickable text for the link. Click the Refresh button in the Property Inspector and then choose Preview in Firefox or Internet Explorer. Click the link to open the Web address. Close Firefox or Internet Explorer and return to Dreamweaver to bring forward the Granville page. Choose File > Close and continue to the next section. The following shows the complete code. Academic Tech. Services - Information Technology 15 February 6, 2007

16 Complete HTML Code for the Granville Page <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <TITLE> Evelyn Boyd Granville </TITLE> <meta http-equiv="content-type" content="text/html; charset=iso "> </HEAD> <BODY> <CENTER><H2>African American Pioneer</H2></CENTER> Evelyn Boyd Granville was one of the first African American women to earn a Ph.D. in Mathematics. Other Granville facts: <UL> <LI> Earned her doctorate in 1949 from Yale <LI> Developed computer programs for trajectory analysis for the Mercury and Apollo Projects <LI> Taught mathematics at California State University Los Angeles </UL> A photograph of Dr. Granville. <P> <IMG SRC = "images/granville.gif" > <P> For more information, read <a href=" My Life as a Mathematician</a> </BODY> </HTML> Granville HTML code Reference for the text on this page can be found at Reference: Creating a Page in Design View You will create from scratch a Web page that contains descriptions of notable past and present women in computing and references to related pages on the Internet. Your page will be embellished with tables, photographs, drawings, and a menu of links. Choose File > New Click the General tab, click Basic Page under Category, click HTML under Basic Page, and click Create. Academic Tech. Services - Information Technology 16 February 6, 2007

17 Click the Show Design View button is selected. Design View processes the HTML code and displays your Web page in the Document window much like it shows up in a Web browser. Setting up the Page Header Type Women in Computing in the Title box, located in the document toolbar. Click in the body of the page and type Women in Computing. Center the text by clicking the Center button in the Property Inspector or choose Text > Align Center, and then press Return or Enter. Choose File > Save as and navigate to your folder (mtwain08$:mysite (Macintosh) or R:\:mysite (Windows). Type the filename womenincomputing.html in the File Name box and click the Save button. Choose Insert > Image and open uvc_women.jpg from your site s image folder. Click Choose. Click to the right of the image and then press Return or Enter. Type the line Pioneers Present Women in Computing Links and press Enter. Press Shift + \ (the key above the Enter key) to type the vertical bar. Academic Tech. Services - Information Technology 17 February 6, 2007

18 Choose Insert > Horizontal Rule. (You can also click the Horizontal Rule icon from the Insert Bar s Common tab.) Use horizontal rules sparingly if at all. Click anywhere on the page to deselect the horizontal rule. Using Fonts and Color to Contrast Text Serif fonts like Times New Roman are good for body text. Non-serif fonts like Arial are good for headings. Highlight the text Women in Computing and choose the font group Arial, Helvetica, Sans-serif (refer to the figure Property Inspector). Dreamweaver fonts are set up so that if the Arial font is not installed on the user s computer, the browser will display the selected text using Helvetica font. This usually applies to Macintosh computers that do not have MS Office installed. In the text color box type # (refer to figure Property Inspector). You can also choose the color from the drop down menu to the left by dragging to the color in the 3rd column and 9 th row of the colors table that appears. Property Inspector Refer to the figure WIC Heading to compare your progress. Save your Web page. WIC Heading Women Pioneers in Computing Type Pioneers on the first line below the horizontal rule Click the Align Left button in the Property Inspector and press Enter. Highlight Pioneers and choose the font group Arial, Helvetica, Sans-serif from the Property Inspector. Keep the text highlighted and click the Bold button. Academic Tech. Services - Information Technology 18 February 6, 2007

19 Choose File > Open to open descriptions.html or double-click the file in the Site window (Macintosh users may have to press the F8 key). Windows users only - Note the tabs in the document window that allow you to quickly go back and forth between open documents by clicking the tab. Refer to the figure Document tab. Document tab If the tabs do not display, then click the Maximize button for each window (refer to the figure Non-maximized window for an example of window that has not been expanded). Non-maximized window Be sure the cursor is on the descriptions.html window, choose Edit > Select All to select the entire text on the page and then choose Edit > Copy. Switch to the window womenincomputing.html by clicking the document tab (Windows) or by choosing Window > womenincomputing.html (Macintosh) and click below the word Pioneers, just below the horizontal rule. Choose Edit > Paste to insert the paragraphs. Be sure the new text is aligned left. The text should start with Ada Byron, Lady Lovelace, was one of the most picturesque characters and end with "You have deep engineering prowess. I bring strategic vision." Click just before the first paragraph of the text Ada Byron, Lady Lovelace, was one of the most and type Lady Lovelace. Then press Shift + Enter. This command creates a blank line. Highlight the text that you just typed and make it bold. In the first paragraph, select the text Read more... In the Property Inspector s Link box, type Make sure that you capitalize F in files, keeping everything else lowercase. In the Target box, choose _Blank, which open the link into a separate Web page window. Refer to the figure Lovelace Link. Academic Tech. Services - Information Technology 19 February 6, 2007

20 Lovelace Link Click just before the paragraph describing Grace Hopper and type Admiral Hopper. Then press Shift + Enter. Highlight and bold the text that you just typed. At the end of the Hopper paragraph, select Read more and type in the Property Inspector s Link box. In the Target box choose _Blank. Type the heading Eniac Women on the line before the paragraph beginning with There were no computer manuals. Press Shift + Enter. Click before the paragraph under the Hopper paragraph, type Minevera s Machine, and then press Shift + Enter. Highlight and bold the text that you just typed. Apply the link minervasmachine.html to Read more The linked page is internal to your site so don t apply the _blank target. Inserting an Image Click at the end of the Ada Lovelace paragraph and press Enter. Choose Insert > Image. Locate the image ada_1838.jpg in the images folder of your site and then click Choose to insert it. Then click on the image once to select it. In the Alt box of the Property Inspector panel, type Picture of the Countess of Lovelace. When displayed on a Web page, ALT text can be detected by voice readers that assist those with vision disabilities. The text is also briefly displayed on the screen when the pointer is over the graphic. Click to the right of the image and press return. Save your Web page and preview with Firefox or Internet Explorer. Refer to the following figure Women Pioneers to compare your progress: Academic Tech. Services - Information Technology 20 February 6, 2007

21 Women Pioneers Viewing your Site Through a Web Server To this point, you have previewed your site pages from your network directory, but you have not yet viewed the site directly through the Web server using a valid address. Open Firefox or Internet Explorer and type replacing mtwain with your username. This is the Web address of your site. Any networked computer on campus can access the site. Close Firefox or Internet Explorer and return to Dreamweaver. Background Formatting You can change the background color of your page by choosing from a palette of 216 Web safe colors that look the same on all computers. Academic Tech. Services - Information Technology 21 February 6, 2007

22 Choose Modify > Page Properties. Click the Color box for the Background option and choose the color in the next to last column and the next to the last row of the palette (#FFCCCC). The hexadecimal code (#FFCCCC) is the language that the computer understands for colors. Refer to the figure HTML Web safe color picker. Going from left to the right, each pair of characters sets the intensity of the primary colors Red, Green, and Blue that make up the color setting. For example, FF FF FF results in white, which is the highest intensity of red, green, and blue. The code results in black, or the absence of all three colors. There are six combinations (00, 33, 66, 99, CC, FF) for each of the colors (R, G, B) or 6 x 6 x 6 = 216 Web safe colors. HTML Web safe color picker Click the OK button to apply the color. Most professional Web pages use white background color because most text colors contrast with the page. If you must use a non-white background, make sure that the color is subtle and does not conflict with the page s text color. Choose Modify > Page Properties Click the Browse button to the right of the Background Image box and open the image uvc_women.jpg. Click Choose, and then click the OK button. What happened?! Choose Modify > Page Properties. Highlight the path in the Background Image box, press the Delete key, and then click OK to remove the background. Academic Tech. Services - Information Technology 22 February 6, 2007

23 As you learned by trial and error, a background image tiles horizontally and vertically to display the background pattern for a Web page. Background images are typically used to border a Web page on either or both sides to make it easier for readers to scan text in between the borders. In the figure Background Example, the background surrounds the home page. The menu on the right is a formatted table. Both serve to constrain the text so the reader can easily scan text in chunks reading from left to right. Background Example Present Women in Computing Scroll past the paragraphs about the Eniac Women. Click at the end of the line Continue with the rest of the article about the Eniac Women and press Enter. Type Present Women in Computing and press Enter. Highlight the text Present Women in Computing and in the Property Inspector choose the font group Arial, Helvetica, Sans-serif. Click below the line and save your Web page. Creating and Formatting a Fixed Width Table Tables provide control over the layout of text and images on a Web page. They are versatile and can be used in many ways including arranging rows and columns of numbers and text, Academic Tech. Services - Information Technology 23 February 6, 2007

24 placing text and images side-by-side, and formatting online newspaper pages in multicolumn text. You can create tables with invisible borders or turn them on in a variety of formats to guide your layout. Choose Insert > Table (or click the Insert Table icon in the Insert bar s Common panel) and enter these settings in the dialog box. The Border setting places visible borders around a table and between cells. The larger the setting, the thicker the border. In our example the border is 0 so it will be invisible. The Cell Padding controls spacing between the edge of a cell and what s inside (text, image, numbers). Cell Spacing controls spacing between cells. In this example the spacing is 0. The setting Width = 560 pixels insures that the table will remain fixed when the browser window is resized. If the Width was set to 100 percent then the table would stretch smaller and larger all the way across the browser window, regardless of its size. Click OK. Set the width of the columns from left to right as 150, 350, and 150. Click in the top row of each column and enter the width in the Property Window width box. As you proceed through the next series of steps, refer to the figure Table bios. Type Anita Borg and Sherry Turkle separately by rows in the table s first column. Open the file bios.html from your Dreamweaver site and copy the first paragraph on Anita Borg. Paste the paragraph in the cell to the right of Anita Borg and do the same for Sherry Turkle, pasting the paragraph to the right of her name in the table. Academic Tech. Services - Information Technology 24 February 6, 2007

25 Drag the mouse through the four table cells of text to select them. In Properties Inspector choose Verdana, Arial, Helvetica, Sans-serif as the font and 2 for the size. Choose Vertical Align = Top. Table cells generally look better when formatted with sans-serif fonts. Click in the right cell of the first row and choose Insert > Image. Locate and open the file borg.jpg in your site s images folder. Click once on the image and click the Center icon. In the right cell of the second row insert the image turkle.jpg and center it horizontally and vertically as instructed in the previous step. Let s add a subtle border to define the cells, but not distract from the content. Make sure that your cursor is in one of the table cells. Click the <table> tag in the Tag Editor. The entire table should now be selected. In the Property Inspector type 1 in the Border box and choose Brdr (border) Color = #ccccc from the color palette, which is a light gray. Academic Tech. Services - Information Technology 25 February 6, 2007

26 Table bios Choose Preview in Firefox, Internet Explorer (Windows), or Safari (Macintosh) and scroll down to view your newly formatted table! If you want to display a collection of images in Web format, consider using software such as iview Media Pro that automatically generates a photo gallery of thumbnail images and links to full-size images. To learn how to use iview Media Pro, ask at the Help Desk for the tutorial Creating a Photo Gallery for the Web using iview MediaPro. Choose View > Rulers > Show and then View > Rulers > Pixels to display horizontal and vertical rulers that measure your page dimensions in pixels. You can calculate the load time of your page by referring to Status Bar in the lower right corner of the Dreamweaver page window. The set 955 x 600 refers to the viewable page dimensions on a computer screen set to 1024 x 768, which is rapidly becoming the minimum standard. The set 66K / 10 seconds refers to the page s size in bytes and how long it takes to load with a 56K modem (choose Edit > Preferences > Status Bar > Connection Speed = 56.0 kilobits per seconds). In our example, the page is 66K bytes based on the sum of the images and surrounding text. The page will load in 10 seconds. Status Bar Academic Tech. Services - Information Technology 26 February 6, 2007

27 Click on each of the images in the page and refer to the image size in the Property Inspector. They are 13K, 22K, and 25K, totally 60K. The small sizes of these images allow the page to load quickly on most any Internet connection. Property Inspector Image box Images taken with a digital camera usually form a large bit map of millions of pixels that take up considerable storage space. Avoid the common error of inserting these large images into a Dreameaver page and resizing the dimensions. Although the image window can be reduced to a much smaller dimension (e.g. 216 x 144), the file size is unaffected. Inserting images with large file sizes results in a significant lag time in editing your page and most importantly increases the load time, often to unbearable levels (e.g. 5 to 10 minutes or more). Always use an image editor such as Adobe Photoshop to reize your image. For additional details, refer to the quickstart guide Resizing Digital Images for Web Pages or PowerPoint slides. Inserting an Image to the Right of your Text Create a blank line between the lines: Pioneers and the paragraph about Lady Lovelace, and then set your blinking cursor there. Insert a table with these attributes: Click in the left table cell and in the Property Inspector, set the width of the cell to 360 and change Vert to read Top. Refer to the figure Left column settings. Academic Tech. Services - Information Technology 27 February 6, 2007

28 Left column settings Click in the right table cell and set the width of the cell to 200. Choose Vert = Top and click the Align Right button. Refer to the figure Right column settings. Right column settings Refer to the figure Ada text photo as you work with the next series of steps. Click once on the Ada Lovelace image to select it. Choose Cut from the Edit menu. Click in the right cell of your new two-column table and choose Edit > Paste to insert the image. Select the paragraphs of text from Lady Lovelace through Ada Picture Gallery in October Choose Edit > Cut and then click in the left cell. Choose Edit > Paste to insert the text. You can tweak the placement of text and images in your table by adjusting the width of the both cells. Place your pointer over the table s cell divider until it turns into a doublesided arrow. Then drag to the right or left as needed. The absolute widths will automatically adjust their values. Academic Tech. Services - Information Technology 28 February 6, 2007

29 Ada text and photo Save your Web page. Preview with Firefox or Internet Explorer. Inserting an Image to the Left of your Text Create a blank line between the lines: to determine how they worked. Read more and the title Minerva s Machine. Set your blinking cursor there. Insert a table with these attributes. In the Property Inspector set the width of the left cell to 200 and the right cell to 360. Set Vert = top for both cell. Academic Tech. Services - Information Technology 29 February 6, 2007

30 Click in the table s left cell. Choose Insert > Image and open the file hopper.gif in the images folder of your site. In the Alt box of the Property Inspector panel type Photograph of Admiral Grace Hopper. Highlight to select to the descriptive paragraph for Grace Hopper and drag it to the right cell (or choose cut and paste). Hopper photo and text Creating a Bulleted List Scroll to the section Carly Fiorina, who was a former CEO of Hewlett-Packard (HP). Click before the line Carly Quotes from and then click the Text Indent button (the icon with the arrow pointing to the right) in the Property Inspector. Select (drag the mouse to highlight them) the three paragraphs of quotations. Click the Unordered List button (the icon with the three bullets) to create an indented, bulleted list. Refer to the figure Carly Quotes. Arrow pointing right is Text Indent Unordered List (Bullets) button Figure Carly Quotes Page Footer Click below the bulleted list and choose Insert > Horizontal Rule or click the Insert Bar s Horizontal Rule icon. Click below the object to deselect it. Academic Tech. Services - Information Technology 30 February 6, 2007

31 Press the Enter key and then type this text (replace Mark Twain with your name): Women in Computing Page designed by Mark Twain Press Shift + Enter to insert a line break character. Type this line: Please comments to Center the two lines by highlighting them and clicking the Align Center icon in the Property Inspector. Click to insert the cursor to the right of comments to. Click the Link icon in the Insert Bar. Type your elmira.edu address in the Text box and the same address in the box. (If you wish, you can type any text string in the Text box such as your full name.) Click the OK button to set the link (refer to the figure Footer). When a reader clicks the link on the Web server, then a new message is opened into the default er (e.g. Eudora, Outlook Express) with your address placed in the To: field. Press the Enter key and Type the word Top. Highlight all of the text in your footer except Top and apply the font Verdana, size 1. Footer Links Internal (Anchors) and External You can create within page links using anchors to quickly move up and down a page. Academic Tech. Services - Information Technology 31 February 6, 2007

32 Create an anchor for the top of the page by clicking before Women in Computing to position your blinking cursor. Refer to the figure Named anchors. Choose Insert > Named Anchor. Name the Anchor Top. In the same way, make anchors for the section titles Pioneers (name the anchor Pioneers) and Present Women in Computing (name the anchor Present). Next create links to these anchors. Return to the menu line of links Pioneers Present Women in Computing and Links. Highlight the word Pioneers and then enter #Pioneers in the Property Inspector s Link box. Repeat this process for the menu item Present Women in Computing and the word Top at the bottom of the page. Create a link from the word Links in the menu to the internal page links.html. This page has already been saved in your site. Preview your work in the browser and test the links. Named Anchors Viewing your Site Through a Web Server Web pages previewed in a browser are viewed locally. Follow these instructions to process your pages through the College s Web server, making them available from any networked computer on campus. (Keep in mind that pages can only be processed through a Web server if the site s folder is properly set up on a share (e.g. dwtrain) recognized by the server. Activate Internet Explorer and type This is the Web address of your site. With this address any networked computer on campus can access your site. Academic Tech. Services - Information Technology 32 February 6, 2007

33 What s Next? Intermediate Dreamweaver MX tutorial Congratulations on creating your first Dreamweaver site! We recommend that you next complete the Intermediate Dreamweaver MX tutorial, which is available for checkout from the Computer Center Help Desk. How do I set up my own Web site? Ask at the IT Help Desk for the handout Setting up a Personal Web Site with Dreamweaver, which provides a number of different scenarios based on the planned location of your Web site and your work environment. Please return this tutorial to the Nathenson Computer Center Help Desk when you are finished. Thank you! Written and published by Information Technology Copyright 2007 Elmira College File name: intro_dw_tutor.doc Last Update: Academic Tech. Services - Information Technology 33 February 6, 2007