DWMX Text and Links

Part 1: Add Contact Information to your index.htm page

1. Open your index.htm page by double clicking on the file in Local View in the Site tab.
2. You will add your contact information and office hours, using the following text formatting elements:
   1. Heading 1, 2, 3, or 4
   2. Bold and/or Italics
   3. At least 2 different font colors
   4. At least 2 different font faces
   5. Line breaks (In the Objects palette under Characters, or keyboard shortcut: shift + enter)
3. To do these things, you will use the Properties panel extensively. The properties panel is located (by default) at the bottom of the Dreamweaver workspace. It is "context sensitive," meaning that it will display the properties and options of the element that is selected in the document. For instance, it will display text properites and options when text in your document is selected, and image properties and options when an image is selected. If the Properties panel is not visible, check Window > Properties.
   In addition to the Properties panel, you may have noticed the tabs in the Insert panel, one of which says "Text". Many of the text formatting options available in the Properties panel are also available here. Feel free to use whichever is easier for you. For the purposes of this tutorial, however, we will reference the Properties panel.
   
4. Click in your document where you want to enter your contact information.
   
5. In the Properties panel, select Heading 2 from the Format dropdown list. This will insert the <h2> tags around the text you type. Type "Contact Information" or another appropriate label. Press Enter.
6. In the Format dropdown list, select Paragraph. This will insert <p> tags around the text you type.
7. Click the "B" icon to start typing Bold text. Type "Instructor:"
8. Click the "B" icon again to end bold text. Type your name.
9. Insert a Line Break by pressing Shift + Enter, or clicking the BR icon from the Characters tab of the Insert panel.
10. Repeat this process for your Phone Number and Email Address.
11. After Email Address, press enter to insert a paragraph break.
12. Use Heading 2 and type "Office Hours". Press Enter.
13. Again, select "Paragraph" from the Format dropdown menu. Type your office hours. (Okay, so you may not really have office hours, but play along.)
14. Save your file and upload it to the remote site by selecting the file in the local view of the Site panel and clicking the Up arrow.

Part 2: Create a syllabus for a course.

1. Create a new document and save it as "syllabus.htm". Make sure that it is saved in the same location as the index.htm file (i.e. in the "dreamweaver" folder). Remember that the server is case-sensitive, so we recommend naming all of your files with lower-case letters for ease of use. Be sure to save your document often, as Dreamweaver does not have an autosave or document recovery feature.
2. You will include each of the following text formatting options in describing the contents of the course, displaying course objectives, course expectations, basic schedule, and other information you would like to provide.
   1. 2 different "heading" tags
   2. An Ordered List with a nested list of a different type, like this one.
   3. An Unordered List
   4. Paragraph tags, at least one of which must have either right or justified alignment
   5. 2 different font faces
   6. 2 different font colors
   7. 2 different font sizes
   8. Bold or Italic text
   9. Indented text (Blockquote)
3. Using Heading 1 (from the Properties panel, Format dropdown list), type "Course Syllabus".
4. Type a paragraph summarizing the course. Select the entire paragraph by clicking and dragging over the whole paragraph.
5. In the Properties panel, change the font to Arial or Verdana (using the dropdown list next to the "A" icon.) Fonts in the list are displayed as a series of fonts, such as "Arial, Helvetica, sans-serif." The first font in the list will always be displayed if the person viewing your page has that font installed on their computer. If not, it will move to the next font in the series, and so on until it finds a font that is available on the user's machine. If none of the fonts match, it will revert to the user's machine's default font.
6. With the paragraph still selected, change the font size to 2 in the Size dropdown list.
7. On a new line, type "Course Objectives" set to Heading 2. Press Enter.
8. You will now create an Ordered (numbered) List to enumerate your course objectives. Simply click the Ordered List icon on the properties menu. You will notice that a "1" has been added to your document. Type your first course objective and press Enter. Dreamweaver automatically increments the list numbers. When you are finished with your list, simply press enter twice to leave the list. You can set list properties, such as numbering styles, by clicking inside a list and going to Text > List > Properties...
9. Create a subordinate list in your numbered list. With your cursor on one of the numbered list items, click the "indent" button in the floating "Properties" panel to create a subordinate list. Click the "outdent" button on subsequent items to move back to the original list. Dreamweaver will start over with a "1" in the subordinate list. Go to Text > List > Properties... and change the list style to "a, b, c,..." Add two or three items in your subordinate list.
10. Add an Unordered (bulleted) List somewhere in your document. You can modify the properties of an unordered list in the same way that you modify an ordered list.
11. Use the Properties panel to add all other text formatting listed in item 2 of this list of instructions. If you know how to use a word processor, then much of what you need to do will be familiar to you (such as right-aligning a paragraph).
12. To indent text in HTML, you use the BLOCKQUOTE tag. When you click the "Text Indent" button on the Properties panel, Dreamweaver adds the BLOCKQUOTE tags. Clicking the "Text Outdent" button will simply remove the BLOCKQUOTE tags. Note that BLOCKQUOTE will indent the entire paragraph, and not just the first line. In order to accomplish a first line indent, you must use Cascading Style Sheets (CSS).
13. Save your file.
14. Preview your document in your browser to ensure that your formatting is displaying correctly (File > Preview in Browser, or press F12).
15. Upload (Put) your syllabus to the remote server and view it in your browser. (inst.usu.edu/~yourusername/dreamweaver/syllabus.htm)

Add Images to your home page (index.htm) and your syllabus page.

1. Locate 4 or more images you would like to use (i.e. create them, or find some images on the web or clipart CD - they can be photographs, icons, etc.), and copy them or save them to the "images" folder of your local site.
2. Open your index.htm file.
3. Add 2 images to the page. The button to add an image to the page is located in the Insert panel on the "Common" tab.
   
4. Align at least 1 image to the left of the page, and at least 1 image to the right. Click on an image you want to align. Notice that the Properties panel changes to display the options for images.
   
   Using the "Align" dropdown list in the lower right corner of the panel, select the desired alignment. Typically you will use "Left","Right", or "Default", but there are other options there that we suggest you explore as well. Choose the most attractive alternative for your page. Experiment with the different options until you find an alignment that looks right to you. Be aware of how some alignment options make the text flow around an image, while others align just a single line of text by an image, and the rest of the text is above or below the image.
5. Give each of your images descriptive ALT text. In the Properties panel with an image selected, type a brief but accurate description of the image in the ALT text box in the upper right corner of the panel. As you are probably aware, setting ALT tags for all images is one of the major Accessibility guidelines that helps your page become more "readable" to those using alternate methods of browsing.
6. By default, Dreamweaver sets image borders to "0" (no border). If you want, you can add a border using the "Border" text box. Simply type in the border width in number of pixels. If an image is linked, then it's border will be the same color as the default color specified for links on your page.
7. You can resize an image on your page simply by selecting the image and dragging on one of the black "handles" on the edge of the image. Or you can enter the width and height of the image in the Properties panel. Keep in mind that resizing the display size of the image does not resize the image itself. If you change the diminsions too much (especially when making it larger) you may end up with a distorted, poor quality image on your page. If, after experimenting with changing the size fo the image, you want to reset it to its original dimensions, simply click the "Reset Size" button on the right side of the Properies panel.
8. Another way to control how an image looks in relation to the other elements on your page is to use Hspace and VSpace. This is the amount of horizontal and vertical space around an image. In the Properties panel, you can set the size of the space in number of pixels.
9. There are several other options for images, including linking them and making image maps, that we will duscuss in a later tutorial.
10. Repeat this process on your syllabus.htm page.
11. Upload (Put) both index.htm and syllabus.htm to the remote site. When asked whether to include dependent files, choose YES. This will upload the images that are in your pages. Otherwise, upload the images separately.

1. Open your index.htm file.
2. Add a text link pointing to the syllabus page. Select the text that you will use for your link.
   1. Option 1: In the Properties panel, type "syllabus.htm" (or the name of your syllabus page) in the Link text box. Dreamweaver will add the link when you click away from the text box or press Enter.
   2. Option 2: Click on the Folder icon next to the Link text box. This will open a dialog box where you can browse to and select the appropriate file to link to. Click OK when finished.
   3. Option 3: Click and drag from the Point to File icon (the target icon) to the file you wish to link to in the Local View of the Site tab in the Files panel
      
3. Link one of the images to the syllabus page. Using the same methods described above, select an image and link it to the syllabus page.
4. Add another link pointing to another page on the web outside of your site, e.g.http:// www.usu.edu or another appropriate site. Set this link to open in a new browser window. Use the "Target" dropdown list to select how the link will open. The default, of course, is to open a link in the same window as the page you are linking from. Selecting "_blank" will open the link in a new window. If you are working with Frames, then "_self", " _parent", or "_top" will need to be specified to make sure your link opens where you want it to. "_self" opens the link in the frame you are linking from, "_parent" opens the link in the frame that contains the frame you are linking from, and "_top" opens the link in the full browser window, replacing all frames.
5. Save index.htm and upload it to the server. View it in a browser to ensure that it works correctly.
6. Open syllabus.htm and link back to the index page using both text and an image.
7. On the syllabus page, add a list of links at the top of the page that point to named anchors in other sections of the syllabus page. To do this, you must first create the named anchors throughout the page. Click next to an item on the syllabus that you would like to link to. In the Insert panel, Common tab, click the Anchor icon and enter a name for the anchor. If View > Visual Aids > Invisible Elements is checked, you should see the anchor icon show up in the page where you placed the named anchor. Now you can link to it from the top of your page. Create a text link that points to the named anchor by using the Point to File icon, or by typing a "#" plus the name of the anchor in the Link text box, e.g. "#myAnchor" without the quotes.
8. Save syllabus.htm and upload it to the server. View it in a browser to ensure that is is working correctly.

Is everything relative? Absolutely.

A note about absolute vs. relative URLS: As you may recall from the HTML tutorials, absolute URLs are those that begin with "http://" and tell the web browser exactly where to find the file, regardless of where you are on the web. Relative URLs, however, depend on where you are when you click the link to find the right file. For instance, if you are on the syllabus page of your site and wish to link to index.htm, all you need to do is type "index.htm" in the the link. This is because the browser knows to look in the same folder unless there is a more specific path given in the link.

If you are looking for a file in a folder within the folder you are currently in, you would type "folder/filename.htm". If you are linking to a file in a folder above the folder you are currently in, you would type ../filename.htm. The "../" tells the web browser to look up one level from where it currently is. You can combine them to tell the browser to move up several levels, and or down several levels, i.e. "../../someOtherFolder/someOtherFile.htm". This link looks 2 folders up from where you are, then looks in the "someOtherFolder" folder for the the file "someOTherFile.htm". Make sense? You'll get used to it after a while. Fortunately, in most cases Dreamweaver is smart enought to write correct link when you are using the Point to File or the Folder icon methods of creating links. You have to be a little more careful when you are writing the links yourself.

To confuse you even more, there is another type of relative URL: Root relative. When using the Folder icon to browse to a file to link to, you can select either document relative (what we have already been discussing) or root relative. As you can guess from the names, document relative links point to files in relation to the document you are currently viewing in your browser. Root relative links, on the other hand, point to files in relation to the site's root level, or highest level. This means that a root relative link will start looking for a file from the top down. For instance, "/images/myimage.jpg" (notice the leading slash) will look for "myimage.jpg" inside of the "images" folder, which is located at the root level of the site.

Confused? Good. Nothing like a little confusion to make your day. Actually, if you don't already understand absolute vs. document relative vs. root relative links, you will soon, so don't worry about it. Just stick with Dreamwweaver's default linking style (document relative) and you should be fine (except, of course, when you are linking to another site, or a page within another site, in which case you must use an absolute link).

<< named anchor (invisible) at bottom of page

back to top

Create an image map that links to different parts of a page .

1. Right-click on the image of the United States and choose "Save Picture As" and save it to the images folder of your dreamweaver folder in your local site. The image is much larger than it appears here.
2. Open one of your web pages, or create a new web page.
3. Insert this picture into the page using the Image button of the Common tab on the Insert Menu.
4. On the page below the image, create a heading and some descriptive text for each region, i.e. "Southern California" and "Here you will find warm weather, surfing, and Disneyland."
5. Place a Named Anchor next to each heading and give it an appropriate name. (Insert panel > Common tab > Anchor Icon. See the Links tutorial for a refresher course on Named Anchors)
6. Select the image by clicking on it
7. In the Properties panel, select either the rectangular, oval, or polygon hotspot tools and "draw" a hotspot matching each region on the image. You don't need to be 100% accurate for this activity; a hotspot generally covering the regions will suffice.
   
8. Link each individual hotspot to the corresponding named anchor. Click on each hotspot, and use the Properties panel's Link field to add a link to the appropriate named anchor.
9. Save your file and view it in the browser to see how it works.