-
Dreamweaver 102: Learning the Basics of MX 2004 ITS Technology & Learning Services Dr.
-
Table of Contents LEARNING THE BASICS OF DREAMWEAVER MX 2004 .................................1 GETTING FAMILIAR WITH THE LAYOUT ..........................................................1 THE IMPORTANCE OF SITE MANAGEMENT....................................................8 MANAGING PANELS AND PANEL GROUPS ....................................................9 IMPLEMENTING CAL POLY WEB PAGE TEMPLATES ..................................12 SETTING PREFERENCES FOR WEB ACCESSIBILITY .............................
-
Learning the Basics of Dreamweaver MX 2004 Dreamweaver MX 2004 is one of the most powerful and popular HTML editing software programs on the market today. Creating a web page and managing your web site with Dreamweaver is much easier than you might imagine.
-
Figure 1: Workspace Setup Dialog Box THE START PAGE: After you have chosen your workspace configuration, Dreamweaver MX 2004 will open with the Start Page showing (Figure 2). If you’re new to Dreamweaver, the Start Page can be useful since it gives you quick access to tutorials and a tour of the key features. It also gives you immediate access to more recently opened files and one-click creation for static or dynamic pages.
-
On the Start Page, click on the HTML link under where it says Create New. This will open a new HTML page to work with. When Dreamweaver MX 2004 opens a new HTML document, it opens with the main window called the Document Window (Figure 3) and several panels and palettes appear as well. If you have opened Dreamweaver before, the panels will be placed exactly where they were the last time you quit the program.
-
LET’S EXAMINE THE DOCUMENT WINDOW: • The Title Bar displays the filename and the title of the current web page. • The Body of the HTML document is displayed in the main viewing area of the Document window. • The Status Bar at the bottom of the Document Window indicates three important properties of the document: 1. The Tag Selector: This displays all the HTML tags that apply to the current selection. 2. The Window Size indicator: This displays the current size of the Document Window (e.g., 760 X 420).
-
THE PROPERTIES INSPECTOR: The two most important properties to have turned on are the Properties Inspector (Figure 5) and the Insert Bar. From the Window menu, make sure there are checkmarks next to these two items. Figure 5: The Properties Inspector The Properties Inspector is context-sensitive. This means that it will constantly change its appearance depending upon what type of element has been selected in the Document Window.
-
ICONS RESIDING IN THE COMMON MENU: • Hyperlink Link: Insert hypertext links at the insertion point, or immediately following the current selection. • Email Link: Inserts an email link. This tool is especially useful to have someone contacted on your web page. • Named Anchor: This tool places a named anchor at the insertion point. Anchors are great for navigational purposes since it lets you link (jump) to a specific point on a page instead of requiring that someone scroll down to get there.
-
• Comment: This option places a comment in the HTML code at the insertion point. If you’re in Design view, a dialog box appears where you can enter text for the comment. To view the comment, look at the page in Split or Code view. Comments are an excellent way to keep track of special things you did in the code that you might not remember when you are looking at the code at a later date. Comments do not show up in the browser or Design view of the document.
-
The Importance of Site Management File management is one of the biggest challenges of building a web site. Web sites require the creation of many documents and their properties all at once due to numerous text and image files. Organization, folder structure, and consistent naming conventions of all the pages and graphics are a very important part of building a web site.
-
the images folder before clicking on Select. (Mac users: Simply click on the folder once and click Choose) 4. Click in the checkbox next to Refresh Local File List Automatically. Also click on the checkbox next to Cache: Enable Cache. This will increase the speed with which Dreamweaver performs its link-management features. 5. Click on the small yellow folder icon next to Default Images Folder: and take the same path as before but this time add the images folder to the entire path (i.e.
-
Figure 8: Panel Groups To expand or collapse a panel group, do one of the following: • Click on the expander arrow on the left side of the panel group’s title bar OR • Click on the panel group’s title. Let’s look at a few of the more important Panel Groups and Panels: THE FILES PANEL: You will probably find that you access this the Files Panel Group the most.
-
THE HISTORY PANEL: You may want to add the History Panel Group to the list of panels on the right of the screen in order to access its “undo” features. To add the History Panel Group, select Window>History (Shift+F10). The History Panel will show you a list of the steps you’ve performed in the active document since you created or opened that document, up to a specified maximum number of steps.
-
Implementing Cal Poly Web Page Templates The Cal Poly Web Authoring Resource Center (WARC) provides developers of Cal Poly official web sites with the information and tools necessary to plan and build a site that meets basic requirements for university identity, web accessibility, usability, and aesthetics. In addition, the WARC provides valuable information on how best to maintain web sites for currency and efficiency.
-
6. When the Save As dialog box appears, save the file to the following folder in the My Documents folder: My Documents>Class Material>Dreamweaver MX 102-LFose> A .zip file will be placed in your Dreamweaver MX 102-LFose folder. Use a utility such as Stuffit Expander, WinZip, or Power Archiver to unzip the file. (Note: Mac users will need to use Stuffit Expander to unstuff the .sit file).
-
Figure 10: Accessibility Preferences 2. In the Category column at the left side of this dialog box, click on Accessibility. 3. Click all the checkmarks under Show Attributes when Inserting: (i.e., Form Objects, Frames, Media, Images). (Note: Unlike Dreamweaver MX, you will no longer turn on accessibility options for Tables; these options have been improved and automatically incorporated into the Tables dialog box now.) 4.
-
Summary information about the content of a page is conveyed through
tags that reside within the section of your web page. Two important tags you might want to be aware of are Keyword objects and Description objects. By inserting keywords on your web page, you can assist search engines spiders in categorizing your page and have a huge impact on the accessibility of your page.
-
Setting the Page Properties When you first open a new page in Dreamweaver, your default web page is untitled, with no background image and only a plain, white background. You can change any of these proeprties (and more) with Dreamweaver’s Page Properties dialog box. In Dreamweaver MX, the Page Properties were set to use HTML tags to set up the text and link colors, the background color or background image, and the page title. These value were automatically placed within the
tag.
-
1. With Appearance selected in the Category list on the left of this dialog box, click on the pull-down arrow next to where it says Page font: and select the font list of Verdana, Arial Helvetica, sans-serif. This will now be the font list that all of your text will default to unless you change it manually. Notice that in designing web pages you don’t select just one font but rather you provide Dreamweaver with a “font list.
-
6. The Background Image area allows you to browse for a different background image if you wish to use one that you have created previously with a program such as Adobe Photoshop or Macromedia Fireworks. We won’t be using a background image in this tutorial so you can just ignore it for now. 7. Set all the Margins to 0 pixels. 8. Now in the Category list of this dialog box, click on Links so that we can set the default link properties. 9.
-
SAVING YOUR WORK: Before we make any more changes to the page, let’s save the file with a new name – we are going to call it index.html. A web page with this name has special significance. Most web servers recognize the index.html page as the default home page of a site. If you type the URL http://www.calpoly.edu, for example, what you will really see is the index.html page for the Cal Poly web site, even though you did not type the URL that way. The web server knows to open the index.
-
Figure 13: Properties Inspector with Email Link 9. Next, while the text is still highlighted, you can click on the Bold (B) button in the Properties Inspector to make the email text stand out a bit better. 10. The font color is already chosen because of the choices that were made in the Page Properties dialog box earlier. However, you can change the color of individual text selections by highlighting the text and clicking on the Text Color Palette next to the Size: box.
-
1. Click on the arrow on the Windows pop-up menu at the bottom of the Document Window to reveal the predetermined choices (Figure 15). For our index.html document, make sure that 760 X 420 is selected, which is the optimum size for an 800 X 600 monitor – the normal size of the general population’s monitor these days. The window size given reflects the inside dimensions of the browser window, without borders; the monitor size is listed in parentheses. 2.
-
5. Because our cursor resides in the area where the Sample Link 3 text previously resided, the cursor goes to this exact location in the code when we view it in Split View. After the words “Favorite Things” in the code you will see code that says . Highlight the code and press the Backspace key to erase it until the cursor is placed right after the code. Removing the will remove the extra row of the wrap.
-
4. Go to the text at the top of the page where it says “Department Name Home” and delete the text “Department Name” and replace it with “Homer J. Simpson – Home”. (Note: If you can’t see the text, click on the first table tag in the tag selector.) Highlight the Homer J. Simpson Home text at the top of the page and then go to the Link box in the Properties Inspector and type “index.html”. This will allow the user to always return to the Homer Simpson Home page from wherever they might be.
-
Using Our Index.html Page as a Template Now that we have our index.html almost completed and have the navigation bar and links set, we can save this page out to use as a template for our other web pages. 1. First, remove the text that says “Place page content here” and remove the text that says “Open the instructions.html file”. 2. Go to the File menu and select Save As… Save this page as index.html. 3. Now go to the File menu and select Save As… again. Now save the page as bio.html. 4.
-
Figure 19: Select Image Source Dialog Box 6. Since we set the preferences earlier to remind us to abide by web accessibility rules, the Image Tag Accessibility Attributes dialog box will appear (Figure 20). Where it says Alternate Text:, type “Homer Simpson”. This will allow the screen reader to skip the image and continue reading the page while it allows the user to know there was an image of Homer Simpson in that location on the web page.
-
7. If the image of Homer Simpson isn’t already selected, click on it to select it. This changes the Properties Inspector to show the attributes for the image. Go to the Link box and type the link “bio.html”. This creates a link to the image so that when a person clicks on the image, it links directly to the Biography web page. 8. In the text box next to Border: in the Properties Inspector, type 15 and then press Enter. This adds a border of 15 pixels to the image.
-
you are finished with your other web pages. 3. Notice that rollovers have been applied to the links in the navigation bar. Rollovers for the navigation bar are included within the Cal Poly template. For more information on creating rollovers, take the TLS Dreamweaver Rollovers course. 4. Minimize the browser and return to your Home page in Dreamweaver.
-
6. Notice that when you go to File >Preview in Browser now, you have the choice of Internet Explorer (F12) or Netscape (Control-F12). You can continue to set up other browsers for previewing in this manner (e.g., Macintosh users may wish to set up a preview choice for the Safari browser, which has become quite popular in the Mac community).
-
Figure 23: Attach External Style Sheet Dialog Box 5. Click the Browse button. This will open the Select Style Sheet File dialog box (Figure 24). Browse for the style sheet you saved in the root folder of mx2004_website (i.e., simpsonstyles.css) and click once on the file to highlight and select it. Make sure that this dialog box has selected the file as a document relative link by making sure that Document is the selection next to Relative to: and click on the OK button to close this dialog box.
-
6. When you are returned to the Attach External Style Sheet dialog box, make sure that Add as: Link is selected and then click OK. 7. Now you are returned to the document. If you click on the Code button and look at the
tag now, you will see that it says something like: , which clearly shows that it is linked to the external style sheet. 8. Since we’re finished with the home page (i.e., index.
-
press Ctrl-V to paste the text you copied from the .txt document. 8. Highlight all the text in this right frame window (including the Homer J. Simpson: Biography text) and if needed, reformat the font by selecting Verdana, Arial, Helvetica from the Font menu in the Properties Inspector. 9. With all the text still highlighted, click on the Text Indent button (Figure 25) in the Properties Inspector to indent the text a bit. Figure 25: Text Indent Button 10.
-
17. Go to File > Save As… and save the page. Then, preview the page in Internet Explorer. Here is a case where WYSIWYG isn’t exact. You will notice that that is not a space between the lines of the unordered list. Minimize your browser, return to Dreamweaver and place an additional Shift-Enter between each of the bullets. Save the file again and return to preview it in Internet Explorer. Now, you have the proper spacing that we intended.
-
Adding a Table to the Favorites Page Let’s add a table to the Favorites page to organize some text: 1. Go to the Files panel at the right of the Dreamweaver screen and double-click on the favorites.html page to open it. 2. Choose Modify>Page Properties (Ctrl-J), select Title/Encoding in the Category column and change the Title: to Homer J. Simpson – Favorite Things. Click the Apply button and then click OK. This will place the title on this page when it is viewed by the web browser. 3.
-
NOTE: Cell padding is the amount of space between the content of a layout cell and the cell wall and Cell Spacing is the amount of space between each layout cell. 6. Where it says Header, select Top. NOTE: This Header attribute does not display in the browser window. It is used primarily by screen readers, assistive software programs for the blind or visually impaired. This option applies scope tags to each cell of the top row of the table.
-
EXAMINING THE HTML CODE: Hand-coding a table is a tiresome task. In fact, tables are probably the most convenient feature of most WYSIWYG web page creation programs because it takes the pain out of the process. To prove this, click on the Code button and take a look at the HTML code for the table. Quite confusing, eh? This is why HTML editors like Dreamweaver are so popular! However, knowing how to examine this code can be helpful when editing a table or any other HTML code for that matter.
-
5. A plugin icon will be placed on the web page at the location you specified. With the plugin icon selected, go to the Properties Inspector below (Figure 31) and insert the following values: W = 245 and H = 25. This is the width and height of the player controls. Src = audio/32dohs.wav (this is the path to the .wav file and should already be there since you selected it in the Select File dialog box) Align = Middle Plg URL = http://www.apple.
-
9. You can try playing it with the Play button in the Properties Inspector but this often doesn’t work because it is dependent upon a default that Dreamweaver has that may be different than the configuration of your computer. The best way to test the sound is to preview it in your browser. Go to File>Preview in Browser>iexplore and click on the Play button in the controller that appears below the image of Homer Simpson. 10. Go to File>Save As… and save the file.
-
button. This will only activate rules pertaining to Section 508 standards. Click the Save button to save your choices for future reports. Figure 33: Accessibility Dialog Box 5. Click on the OK button and Dreamweaver will return to the Reports dialog box. Click Run to create a report, which will be displayed in the Results panel (Figure 34). Figure 34: Accessibility Report 6.
-
Each item listed in the Results panel cites the relevant rule according to Section 508 standards and W3C guidelines. If you need more information about a particular standard, click the More Info icon (Figure 35) in the Results panel to open the Reference panel.
-
Placing Your Files on a Web Server Eventually you will have to place your web site onto a web server so they can be viewed by the public. Here at Cal Poly, all faculty, staff and students are given web space within their Unix account. The name of the machine that houses the files is polylog1.calpoly.edu In order for your account to be able to display web pages, certain changes must first be made on that machine. DOWNLOADING SOFTWARE TO UPLOAD WEB PAGES TO UNIX SERVER 1.
-
PC (Windows) Users Running Telnet with “Run” Command To get your account set up, we can use the RUN command to access Telnet. 1. From the Start menu in Windows, select Run (or open QV Term if it is on your machine and then open polylog1.calpoly.edu). If you chose Run, you will see the following dialog box. Type in exactly what is shown here in Figure 38: telnet polylog1.calpoly.edu Figure 38: Run Telnet Program 2. Click on the OK button. 3. A new Telnet session will begin.
-
PC (Windows) Users Using QVT/Term to Access Polylog1 1. Launch the QVT/Term software program. As the program launches, you will be prompted "Do you want to make QVT/Term your default Telnet application?" We recommend "Yes". From the File pull-down menu, select Open. Type a host name in the Host Name or IP Address field. Click on OK to connect. 2. Important: In order to connect using SSH2 -- whether servers are on or off-campus -be sure to click on the radio button for SSH2.
-
Figure 40: Telnet Screen at Percentage Prompt 4. At the % prompt, type websetup and then press the Enter key. 5. When websetup is done, check the text that was created to see if polylog1 noticed that you already have a folder called public_html. This websetup command will create a public_html folder for you if you don’t already have one. 6. At the % prompt, type cd public_html (this allows you to change directories) and press the Enter key. 7.
-
Figure 41: Site Definition of Remote Info 4. In the Category column to the left, click on Site Map Layout and the Site Map Layout dialog box will appear (Figure 42). Figure 42: Site Map Layout Dialog Box 5. Click on the gold folder next to Home Page: and navigate to your home page (i.e., your index.html file). 6. Click the OK button. Click Done in the Edit Sites dialog box to close it. 7.
-
8. Click on the Connect button (Figure 43). After some processing time, you should see the inside of your public_html folder from your polylog account appear in the Remote View of the Dreamweaver’s site window. Figure 43: Connect Button 9. Click on the Expand/Collapse icon (Figure 44), which is located right below the Local View/Remote View pull-down menu. Figure 44: Expand/Collapse Icon 10. Dreamweaver will open two windowpanes, which display the Local View on the right and the Remote View on the left.
-
Viewing Your Web Site on the Web 1. Open your browser (Netscape or Internet Explorer). 2. In the location box, type in the following URL: http://www.calpoly.edu/~lfose/mx2004_website (Except change the name “lfose” to your own alias name. Your alias in UNIX at Cal Poly is the first initial of your first name plus your last name, up to 8 letters total) 3. If everything went well, you should see your index.html page that was created in this tutorial. 4.
