Building A Website With   This will be a busy lab day! In this exercise students will learn how easy it is to import and reformat text [among other things]. Likewise, because there are many HTML tag attributes that can provide certain layout techniques used by many "Webmasters" to customize a Web page's appearance, students will also play with some text and image tag attributes to learn what affect they have on text and image layout. Students will also create horizontal rules, build lists and create hyperlinks between their Web pages as they begin the process of building a full-on Website. Students will also learn the proceedures Dreamweaver uses to create tables and forms and -- if students feel particularly energetic -- there is a special tutorial section covering the creation and use of image maps and simple rollovers using DHTML. Specifically, in today's lab session students will: Log-on to the Social Science Mac Lab Computers Learn how to import text, format a list, change image format options and build hyperlinks Learn the proceedures for creating tables & forms If time permits, students will explore how to build image maps & rollovers. Don't forget to upload your efforts to your UHUNIX account and email the URL your instructor. Finally, remember to Log-out before you leave the lab!   Text, Lists, Images & Hyperlinks   Creating A Page & Importing Text With the "index.html" file you created in the last lab session open in Dreamweaver, choose File > New Window. This opens up a new page in a new window, so you can have both pages open at the same time. You can use the Window menu to toggle back and forth between two or more active files. Repeat the procedures for setting the page properties that you learned in the first Dreamweaver lab session [or copy and paste the HTML code if you know how]. Give this page the title "On The Coffeetable," and save it as "coftable.html." Now, copy some text from an existing text file into your new page. Minimize or hide both Dreamweaver windows and find the text file called "books.txt" in the "Bookstore" folder you downloaded/copied to your computer's Guest folder earlier. Open "books.txt" in any text editor, such as SimpleText, Notepad, MS Word, etc., and highlight and copy the text [HINT: double clicking on the file usually opens it in SimpleText on the Mac]. Switch back to the new Dreamweaver document window, and click on it, then choose Edit > Paste and paste in the text. The text from "books.txt" now appears on your Web page. Note that it has lost all its formatting, including paragraph returns. Click to place your cursor right after the words "On the coffeetable" and press the Return key to insert a paragraph break. Do it again between "our sleeves" and "This month's specials," and between "This month's specials" and "The Arica Conundrum"; "cold war" and "Heal Your Cat"; "kittikat cards" and "Varoom"; and "kitsch" and "Our catalog." Next, highlight the words "On The Coffeetable" and in the Property inspector, choose the Heading2 option from the Format pull-down menu. Use the Align Center icon to align it in the center of the page. Choose the Arial, Helvetica, sans-serif option from the Font pull-down menu. Now deselect "On The Coffeetable" and highlight "This Month's Specials." Leave it left aligned [the default] but change the font to Arial, Helvetica, or sans-serif and the format to Heading3. Deselect "This Month's Specials" and highlight all the text below it down through "Dated kitsch." In the Size pull-down menu, choose 2. Line & Paragraph Breaks We've already learned to insert a paragraph tag by hitting the Return key. This gives you a double space break. When you only want a single line break use a line break instead. Copy the words "The Arica Conundrum" and paste them in front of the words you copied [with a space in-between] so that the line begins ""The Arica Conundrum The Arica Conundrum." Insert your cursor after the first "Conundrum" and press Shift+Return. Highlight the first "The Arica Conundrum" and click on the B [for Bold] button in the Property inspector. Repeat the same action with "Heal Your Cat, Heal Your Life," and "Varoom." You can also insert a break tag by choosing Insert > Line Break or by clicking the Insert Line Break icon in the "Invisibles" section of the Object palette. Adding a Horizontal Rule The Horizontal Rule tag creates a line that spans the width of a Web page. By changing the tag's attributes, you can alter the thickness of the rule and limit its span to only a portion of the page. First, copy and paste the words "Our Catalog" so the phrase repeats itself. This time insert a paragraph break between them, highlight the first occurrence, and format it as a Heading3. Change the font to Arial, Helvetica, or Sans Serif. Now click on the space just before the headline, "Our catalog" then click on the HR button on the Objects palette [or choose Insert > Horizontal Rule from the menu bar at the top of the page]. Use the Property inspector to change the width to 75% and the alignment to center. [You have your choice of pixels or a percentage of page width.] Now click after the line that begins "Our catalog..." and following the same steps, add another horizontal rule. Creating Lists Dreamweaver makes it easy to create ordered lists [set off by numbers or letters], unordered lists [preceded by bullets], and definition lists [indented but not preceded by numbers or bullets]. You can create lists as you type text into a document, or you can highlight existing text and apply the list format. Lists can also be nested to create outlines and other more complicated lists within lists. To create a new list, position the cursor after "parade of the desperate" and add a paragraph break. Next, click the Numbered List button in the Property inspector [or choose Text > Format and select ordered list]. Enter the items list, pressing Return for each new list item. Make the items "Lovedogs," "Spacebopping," and "Purp L. Elephant." Press Return twice to complete the list. Creating a list from existing text is just as easy. Select all the text between "This Month's Specials" and the first horizontal rule. Click on the bullet list button in the Property inspector [or select Text > Format > unordered list from the menu bar]. A bullet will appear before every bold line. Every text block surrounded by paragraph tags is turned into a separate list item. Typically, we use the definition list format to make indented lists without bullets or numbers. It can also be used to indent paragraphs and text blocks. To make such an indented list, select the text between the headline "On the Coffeetable" and "This Month's Specials" and click the Text Indent icon in the Property inspector. Dreamweaver creates indents at the left and right of the block. Image Format Options In the first Dreamweaver lab exercise, you learned how to position images to the left, right, or center of the page by clicking next to the image and then using the text align icon in the Property inspector. In this part of the lesson, you'll learn how to position images in relation to text and how to add spacing. Aligning Pictures Against Text With the file coftable.html open, place your cursor to the left of the headline "On the Coffeetable." Do not insert a paragraph break. Click the top button on the objects tool, or choose Insert > Image from the menu bar. Browse to find "books2.jpg" in the "images" folder in the "bookstore" folder and double-click to select it. Click OK. Select the picture so the Image Property inspector will open. In the Align pull-down menu select Absolute Middle. Type the words "books" in the Alt text box on the Property inspector. Save your work, but don't close the page. Wrapping Text Around a Picture Select File > Open and open "arica.htm", located in the "catalog" folder inside the "bookstore" folder. Set page properties as before, and then position your cursor to the left of the book title, The Arica Conundrum. Click on the Object palette as before to insert an image, browsing to locate an image called "arica.gif" in the "images" folder inside the "bookstore" folder. Click on the image so the image properties are displayed. Now click on the Align pull-down menu at the top right of the Property inspector and choose Left. Note that the image aligns to the left of the page, and the text aligns to the right of the image. Type the name of the book, "Arica Conundrum" in the Alt text box on the Property inspector. In the H Space text box in the bottom left of the Property inspector, enter the number "10." This places 10 pixels of horizontal space on either side of the image, separating it from the text that appears on the right. Use the V Space text box if you want to add vertical space. Your image is now aligned to the left of the page, with the text wrapped around the right of it. The image below shows how it should look. If you align the image to the right, the text moves to the left of the image. Repeat steps 1-5, but this time open the file called "varoom.htm" and use the picture "varoom.jpg". Save your changes. Setting Hyperlinks Web sites are constructed so that the visitor can click on buttons or "hotspots" to jump from one document to another or from one place to another on the same document. In this part of the lab exercise you'll learn how to use Dreamweaver to set hyperlinks and make this happen. Before you begin, however, I'd like to say a few words about setting up link paths. Basically, there are three options when you set links in HTML -- an absolute path, a document-relative path, or a site-root-relative path. The default path in Dreamweaver is relative to the document. An absolute path is a link to a complete address, such as: http://www2.hawaii.edu/~ogden/com337/index.html You must use an absolute path when you link to a page on another Website, but should avoid using the full address to link to pages within the same site. Document-relative paths are relative to the directory containing the current document. For example, "books.htm" specifies another document in the same folder/directory; best/books.htm specifies a document in a folder inside of the current folder, named "best"; and ../books.htm specifies a document one level above the current directory. Site-root-relative paths always begin with a forward slash, indicating the site root [or top-level directory] of the server. All visible files branch from the site root. The path /books/index.html links to a document named index.html in the books directory, which is at the root level [or top level] of the site. This is a good way to link files in a Web development environment where content must be moved frequently. The links continue to work even if the document is moved within the site [but not if the linked files are moved]. To make the link relative to the Site Root, use the pull-down menu at the bottom of the Select HTML dialog box that opens when you click on the "Link Folder" in the Property inspector. Create a Link from One Page to Another with Text With the file "coftable.html" open, scroll down to the first line under the headline "This month's specials." Select the words "The Arica Conundrum." In the Property inspector, click on the Folder icon to the right of the Link text area. Browse to find "arica.htm" in the "catalog" folder and double-click to set it. The text changes to the link color chosen previously in the Page Properties dialog box. [Blue is the default.] Repeat the same steps with the words "Varoom," linking it to "varoom.htm." Save your work and preview it in a browser, clicking on the new link and then back. Create a Link to Another Page from an Image Linking from an image works exactly the same way as linking from text. Open or switch to "index.html," and select the image "books.jpg." Click on the "Link" folder in the Property inspector, and browse to find the file coftable.htm in the same folder. Remove the colored border that appears around the image when you make it a hyperlink, selecting the image and setting Border to "0" in the Property inspector. Save your work and preview it in a browser, clicking on the new link and then back. Setting Internal Links To create an internal link [also called a jump link] from one part of a page to another or from one page to a specific location on another page, you must first place an anchor in the place you want to link to. This is particularly helpful for long pages. Switch to the page coftable.htm and place the cursor to the left of the headline "This month's specials." Choose Insert > Named Anchor from the menu bar [or click on the top button in the "Invisibles" section of the Object tool, which you can access by using the scroll arrow at the top of the tool.] When the Named Anchor dialog box appears, enter the name "specials" to represent this location on the page, and click "OK." It's a good idea to choose a name you will remember when you set the link to this location. If View > Invisibles is checked Dreamweaver displays a small icon that looks like an anchor. It won't be visible when the page is displayed in a browser. Creating an Anchor Link on Another Page Open or switch to the "arica.htm" page in the "catalog" folder and insert your cursor to the right of the price of the book. Press the Return key to insert a paragraph break, and type in the words "This month's specials." Select the words "This month's specials" and use the Property inspector Link icon to browse to the "coftable.html" file. Now click in the text box, just to the right of the coftable.htm filename, and type "#specials". The "#" followed by the anchor name specifies that the link should go directly to the anchor. If you wanted to link to a Named Anchor called "specials" on the same page where the link originated, you would type "#specials" in the Link Text area of the Property inspector without specifying the file name. Making sure you are still on the document window for arica.htm, save the page, and press F-12 to preview your links in a browser [or select File > Preview in Browser]. Click on the link to test it. Linking to Other Websites Dreamweaver makes is easy to set a link to another Web site -- all you need to do is type in the complete URL in the Link box in the Property inspector. Creating Tables & Forms   Creating Tables Tables are an integral part of many good designs on the Web. You can insert any image, text, or multimedia file in a table cell, which will help you position it on the page. By merging and dividing the cells and then hiding the borders you can create complex designs. Tables are especially useful when you want to arrange images or text side-by-side on a page or stagger pictures and text. You can use them to create columns like those in a newspaper or magazine, or more open designs with elements distributed around the page. Controling Page Layout by Arranging Images in a Table Say you want to position images of different sizes on you Web page so they appear side-by-side on a page. Perfect "quandry" for applying a table! Open the file "garden.htm" [in the "garden" folder, inside the "bookstore" folder]. The page includes five images: four small images -- an apple, an artichoke, a carrot, and an eggplant -- and a large image of a pumpkin. Click to insert your cursor at the top left of the page, just to the left of the apple, and insert the headline "Garden Emporium." Use the Property inspector to center the headline and format it as a Heading2. Now choose Insert > Line Break and type the words, "Check out our specials." Hit Return to enter a paragraph break. Again place your cursor to the left of the apple [without selecting the apple image], then click the Table icon in the Object palette or choose Insert > Table from the menu bar. When the Insert Table dialog box appears, enter "4" in the Rows field and "2" in the Columns field and set the Width to "80" percent. Then Click "OK." When you choose a percentage, the table will adjust to the viewer's window size. This works well if you want your table to fill a certain percentage of the screen no matter what size your viewer's browser window or monitor is. If you want better design control, select pixels rather than percent to create a fixed-width table to ensure that the elements you arrange in the table cells do not shift around when the table adjusts. Select the pumpkin image and drag it to the top left cell of the table. Select the apple image and drag it to the top right cell of the table. Select the artichoke image and drag it to the second cell on the right. Select the carrot image and drag it to the third cell on the right. Select the eggplant image and drag it to the fourth [and bottom] cell on the right. Drag your cursor across the entire table [or click on the outside border] to select it, then use the Align pull down menu in the table Property inspector to center it on the page. Adjust Spacing by Merging Cells Select the column of cells that includes the cell containing the pumpkin. [But don''t select the image itself.] Choose Modify > Table > Increase Row Span. The apple, artichoke, carrot and eggplant images should all line-up to the right of the pupkin! Click on the cell border that separates the pumpkin from the other fruit and vegetables. Your cursor should turn into a tiny line with arrows at both ends. Use it to drag the border to the left so it is closer to the pumpkin. Click inside the cell with the apple [but not on the image]. Now choose Modify > Table > Cell Properties from the menu bar and change the horizontal alignment to center. Do the same with the cells containing the artichoke, carrot, and eggplant. Note that you can also select cell properties with a Control-key + Mouse click inside the cell. Click on the outside border of the table to select the entire table. In the Table Property inspector, set the Table Border to "0." Setting the border to 0 makes the table itself invisible when viewed in a browser. Save your work and use the F-12 key to preview it in a browser. Open the file "coftable.html", highlight the words "garden emporium" in the first paragraph and use the Property inspector to create a link to "garden.htm." Building Forms Dreamweaver can create a variety of forms you can use to capture information of all kinds from the visitors to your site. You can conduct a survey, collect customer contact information, or put a guest book on your Web site with fields for visitors' names, addresses, interests, comments, and questions they might want to ask. When the visitor has filled out the form they click on the Submit button to send it to you. You'll need to provide a mechanism for the visitor's computer to send you the information they have entered into the form. Most often this is done using a CGI script, a program that will process the submission of the information and then send it to you via email, or post it dynamically to a page on your Web site. CGI or Common Gateway Interface scripts are programs, usually written in a programming language such as Perl, Java, C, or C++. CGI scripts are the engines behind many HTML forms and other dynamic features on a Web site. To create a CGI script you'll have to know how to program or hire a programmer to do it for you [because I ain't going to teach it in an introductory class!]. You can also find and modify existing scripts. But to keep it simple [simple is good!], we're going to use a less sophisticated but much simpler method of sending information from a form back to your server using a simple mailto: tag . Whereas the text reponse you receive from a "mailto:" is not very user friendly and must be interpreted, it can be just as effective as a CGI script. Creating an HTML Form Dreamweaver's Object palette has a series of insert buttons for a variety of different forms. Let's look at some of them. With "coftable.html" open, scroll to the bottom of the page, click your cursor after the second horizontal rule, and insert a paragraph break. If the Object palette is not already open, choose Windows > Objects from the menu bar to open it. Now use the scroll arrow at the top of the palette to access the Forms group. Hold your mouse over each of the the six buttons on the Object palette long enough to see it's name appear. Click on the top button in the group to insert a blank form space. A blank form in Dreamweaver is represented by a rectangle outlined by a dotted red line. Selecting this rectangle reveals the Form properties in the Property inspector. Enter the name "survey" in the text box under the word "Form." This name is used by scripting languages such as JavaScript or VBScript to control the form. In the text area next to the word "Action" put the directory name and name of the script used to control the form. We'll keep it simple by using a client side "Mailto." Just enter your email address [mailto:you@hawaii.edu] Set the method to "Post." Now, click to insert your cursor within the form area on the page, and type the following questions separated by a return: What is your name? What is your email address? What is your favorite book? Which is your favorite food? Click to place your cursor after the first question and click on the button for Insert Text field, which is the second button from the top on the Object palette. [You can also use Insert > Form Object > Text Field on the menu bar.] A small bounded rectangle appears immediately after the question. In the Property inspector type "Name" into the TextField box and set Char Width [character width] to "50." The text box immediately expands. Naming the field has no obvious effect, but it will be used by the CGI script or Mailto: to identify the contents of the field when data is submitted. Enter "None of your business" in the Init Val field. The Init Val field is an initial value that will display in a text field unless a viewer chooses to delete or overwrite it. In most cases this will be left blank. Insert another text field after the second question. Name it "email" and give it a Char Width of "40." Insert another text field after the third question. Call it "book" and make Char Width "40." Place your cursor after the fourth question, but this time choose the 6th button from the top, Insert List/Menu. [Or use the menu bar to select Form Object > List/Menu. ] Type the name "Food" into the List/Menu field, set the Type radio button to Menu, and click the List Value button. The List Values dialog box appears. In both the Item label and Values columns, type "pumpkin." Click the + symbol to add a new line, and type "carrot" in both columns. Following the same process enter "artichoke," "apple," and "eggplant". Enter a paragraph break by placing your cursor just after the last text field and pressing Return. Click on the third button from the top in the Object palette, Insert Button [or choose Form Objects > Insert Button from the menu bar]. Repeat the operation so you have two identical buttons next to each other. Now let's change the first button to make it reset the form. Select the first button. In the Property inspector, check the radio button that says "Reset form." Note that the label and button name change as well. Preview and test your form by filling in your name, changing the text in the second text field, and picking a food from the pull down menu you just created. Adding Radio Buttons Radio buttons allow viewers to select from multiple choices. Only one button in a group is active at onetime. We're going to add some radio buttons to our form. After the email address field, type the question "Where are you from?" Click your cursor in the form right after the question. Click the Insert Radio Button icon on the Forms panel of the Object palette, or choose Insert > Form Object > Radio Button. Repeat this step three times so there are four buttons. To the right of the first one type "East," to the right of each of the others, "West," "North," and "South." Click to select one of the radio buttons and reveal the Radio Button properties in the Property inspector. All radio buttons in a group should have the same name. Let's just go with the default name for the text area under Radio Button. Now do the same with the other buttons. Each should have a different Checked Value name so the CGI script can distinguish them. We'll give each button's Checked Value the same name as the button itself so it will be easy to keep track: "East," "West," "North," and "South." Adding Checkboxes Checkboxes enable viewers to make multiple choices, so they are good for choices that include such instructions as "Choose all that apply." Click to insert your cursor after the new radio buttons and hit Return to insert a paragraph break. Choose the Insert Checkbox icon on the Objects palette, or Insert > Form Object > Checkbox from the menu bar. After the checkbox type "Check if you want be on our email list." Insert another checkbox and type "Check if you want us to share your name with other companies." In the Property inspector for each checkbox enter a name in the field under Checkbox. You can use the same or distinct names for checkboxes. Next to Checked Value give the two boxes the names "email" and "share." Preview your work then save it. OPTIONAL Image Maps & Rollovers   Creating An Image Map An image map is simply an image with multiple "hotspots" or links. It works on a grid principle, with coordinates telling the browser that a defined section of the image should link to a particular URL. Dreamweaver makes it easy to graphically create and edit client-side image maps by providing an Image Map Editor. Create an Image Map Open the document "coftable.html," and select the image of the books at the top of the page. In the Property inspector you will find a Map button. Click on it to open the Image Map Editor dialog box. Enter "Map1" as the map name at the top of the window so your image map changes will be saved as you work. Note the four tools at the left side of the Image Map Editor. The arrow at the top is a selection tool you can use to move hot spots around the page or to resize them. The other three options are drawing tools you can use to define "hot spots" with different shapes. Select the rectangle tool, and click and drag to create a rectangular shape covering the outline of the book "Varoom." The mapped area will then be highlighted. To create the link, click on the Folder icon next to the Link text field, and browse to find "varoom.htm" in the "catalog" folder. Double-click to select it. In the Alt text field enter the word "varoom." Select the Polygon tool -- the bottom one in the row. This tool enables you to create odd-shaped hot spots. Click on one corner of the "The Arica Conundrum" book cover, then move your cursor to the next corner and click. Continue until you have clicked all the way around the book. Double-click to complete the action. Don't worry about the shape overlapping the varoom rectangle. The one on top takes precedence. Repeat step 4 to link the new hot spot to the file called "arica.htm." Enter "arica conundrum" in the Alt text field. Repeat the same process with the book cover "Heal Your Cat, Heal Your Life." Click OK to close the dialog box. Select File > Preview in Browser and choose a browser to view the page. Test the links to see how the hot spots work. Note that there is now a border around the image. If you want to remove it return to the Property inspector and enter "0" in the Border text box. Be sure to save your changes. Simple Rollovers Rollovers can be used to create a variety of effects when a viewer passes a cursor over an image. The following step-by-step guide will walk you through the creation of a script that will allow you to replace one image with another when a cursor moves over it. It's a very popular feature for navigation bars. An even easier way of creating rollovers in Dreamweaver is to select the "Insert Rollover" icon from the Object Palette and follow the instructions for linking the first and second graphics for the "onMouseOver" and "onMouseOut" functions. Remember that to see the results of this exercise, you will need to open the page in a browser that supports JavaScript. This example will work in Netscape 3.0 or later or in Internet Explorer 4.0 or later. To create a new page with a rollover button Open the document called "coming.htm," which is located inside the "bookstore" folder at the root level. Insert your cursor in the center of the page in the space between "Here's a preview." and "Where are they hiding?" Use the Object palette or choose Insert > Image and browse to find "redlite.gif" in the "images" folder. Double-click on it. With the image selected, enter the name "redlight" in the text field in the far left of the Property inspector. Naming the image is very important, because JavaScript uses this name when it swaps two images [which is what creates the rollover effect]. In the Property inspector, set the Border to "0." Select the image and choose Window >> Behaviors to open the Behaviors inspector [or access it from the Launcher palette]. Choose 4.0 Browsers from the pop-up menu in the Eventspane. Use this pop-up menu to choose the browsers you want to target with your designs. Only the features that work in the selected browsers will be available. When you choose an option, such as Netscape 3.0, many of the features in the list are grayed out because they only work in 4.0 browsers. Choosing 4.0 Browsers will create DHTML that is supported in both Netscape and Microsoft. Hold down the + button and select "onMouseOver" from the Events list on the left [don't confuse the + button with the "+" key on the keyboard!]. Hold down the + button on the right pane, and select "Swap Image" from the Actions pop-up list. You may get a message at this point, stating there must be an <a> tag for the button to work [based on the assumption that the image is a button and linked to something, which it often will be]. If you don't want to link to anything just yet, just click OK and Dreamweaver will automatically create a link tag around the image. [The program inserts a "#" sign in place of a URL in the Property inspector so the rollover will work even though it is not linked to anything.] In the Swap Image dialog box, select image "redlight" from the list of Named Images. Click the Browse button and navigate to the "images" folder where you will pick the image to swap for "redlight.gif." Double-click on "grnlite.gif" and click "OK." Hold down the + button and select "onMouseOut" from the Events list. Select Swap Image Restore from the Actions pop-up list. Click "OK" in the resulting dialog box. Use the F-12 hotkey or choose Edit > Preview In Browser from the menu bar and preview your work in a browser. Use Netscape 4.0 or later or Internet Explorer 4.0 or later. Now let's link this file to the rest of your site. Open the file "coftable.html," highlight the words, "coming attractions," and use the Property inspector to make a link to "coming.htm." UPLOAD Your Website Using FETCH After you've completed the above tasks -- at least through the "Tables & Forms" part -- you will need to use Fetch to UPLOAD your entire website [all html files, sub-directories & all graphics -- in other words, the entire contents of your "local root directory"!] to your public_html directory in your own Uhunix account. If you have forgotten how this process works, review the proceedure from the last lab session. Be sure to email the address of your new and improved Website to the Instructor when you are "pau hana" -- That's it! You now know enough of the Dreamweaver basics to go out there and build your project website(s)! However, should you desire to learn more, or have any questions about Dreamweaver, be sure to visit Macromedia's website for helpful tips and tricks to make your Dreamweaver experience a happy and productive one. Macromedia's Dreamweaver Support Center, or Visit the Dreamweaver Gallery to discover how leading professional designers us Dreamweaver   [ Syllabus ][ Lab Assignments ][ Downloadable Resources ][ Back to Home ]   Copyright © 1999-2000   By: M. R. Ogden -- ogden@hawaii.edu   (Rev. 16 June 2000)