1. Click on the first row of your table.
2. Type in the text for the Main Heading on your home page. For example: o Elephants and More Elephants
o In the Wild and In Captivity
o Remember to press the Enter key between each line
3. Select the first line of your title by clicking and holding down the mouse button; drag across the text to highlight it. Remember: anytime you want to do anything to text or objects on your web page, they must first be selected.
4. Change the text to a "Heading 1" using the Format Selector in the Property inspector
5. Select the second line of text and change it to a "Heading 2." 6. Save your web page.B. Text Alignment, Font Face, Color and Style
1. Center the two headings by selecting both lines of text, and clicking on the Alignment buttons on the Property inspector.
2. Change the Font Face of your headings by selecting both lines of text and clicking on the "Font" drop-down menu, then clicking on the font face you want. For example: Arial, Helvetica, sans-serif.
3. Change the color of the text by selecting both lines of text and clicking on the Color Selector box on the Property inspector. The Color Selector pops up and you can select the color you want by clicking on that color.
4. Change the text style you want by selecting both lines of text and clicking on the Bold and/or Italics buttons on the Property inspector.
5. Save your web page.
Navigation around your site is very important. You want people to be able to click on a link to take them to another page, to allow them to see other information, or even to be able to download another type of document. Carefully consider the words you use when creating navigation links. Use text that is brief, but descriptive of where that link is going to take the user. For example, if you have a page that describes where you might find elephants, your link to that page might say: Geographic Locations, Where The Elephants Are, or something similar. Navigation on your web site also needs to be consistent and clear. You are now ready to add some links to other pages on your site.
1. Click in the second row, first column of your table.2. Type the following text, pressing the Enter key after each entry:
Elephant Press Home Elephants in the Wild Elephants in Captivity Portland Oregon Zoo Copyright/Disclaimer
3. Save your web page.D. Making Hyperlinks
Hypertext links are text or images that take you to other pages or web sites when clicked on. In general, links are made by selecting the text you want to be a link and indicating the web page or web site to link to.
1. Internal Links: links to other pages YOU have created.
o Select the text: Elephant Press Home
o Type in the name of your home page file (home.html) in the Link box of the
• Select the text: Elephants in the Wild
• Type the file name "wild.html " in the Link box of the Property inspector. We have not created this page yet, but we will.
• Select the text: Elephants in Captivity.
• Type the file name "captive.html" in the Link box. We will not create this page; we will pretend it exists. Or you can follow the steps below for External Links and link to an existing web site rather than "captive.html".
• Save your web page.
2. External Links: links to other pages or web sites you have NOT created. o Select the text: Portland Oregon Zoo.
o Type in the web address or URL of the Zoo's Web site
NOTE**: To easily copy a web address from someone else's Web site: 1. Open the Web browser and navigate to the page you want a link to.
2. Double click in the URL or Location box that shows the entire web address.
3. Click on the Edit menu and select copy.
4. Switch back to Dreamweaver.
5. Click in the link box in the Property Inspector.
6. Hold down the control key and press the V key (Keyboard Paste command is necessary -- Using the Edit menu paste option will NOT work.)
1. Select the text: Copyright/Disclaimer Statement.
2. Type the file name disclaimer.doc in the Link box in the Property Inspector. We will create this document next.
3. Open a web browser and type this url
http://www.vancouver.wsu.edu/vis/online/html/stdiscl.htm into the address bar. This web page contains the disclaimer text that we will need for our "disclaimer.doc".
4. Highlight all of the text and copy it (Edit > Copy).
5. Next, Open Microsoft Word and create a new document to paste the copied text into. Enter your name and userid where directed with in the text.
6. Save this file as disclaimer.doc in your main website folder.
Remember you can format these text links however you want just like you did with the headings at the top of the page. NOTE: If you want to change the color of the links on your web pages you do that by clicking on the Modify menu and choosing Page Properties. Link colors are set by browser defaults. Changing the text color of a link using the Property Inspector will not change this default for the links on your page. So if you want your links to be a different color from the normal browser default of blue, you will need to change them in the Page Properties. There are several other choices you can make in the Page Properties, some of which we will discuss later:
E. Resizing the Table to set up Large Content area We want to make our table cells the correct size to contain the necessary information whether that is a title, navigation, or content. To resize the columns of our table:
1. Move the mouse pointer to the border between the two columns until you see the double arrow mouse.
2. Click and hold down the mouse button and drag the mouse toward the left side of your table. You will need to decide how big or small to have your navigation area, but a good size content area is important.
Now we are ready to add content to the home page. Keep in mind some basic principles of web design. This home page content will need to say what the whole web site is about, who will be interested, what will they be able to see or do or find at this site.
1. Entering Text:• Click in the third (empty) table cell.
• Type in a Welcome Heading such as "Welcome to Elephant Press" and press the enter key.
• Select the text and change the font size, color, alignment and font face by changing them in the Property inspector as before:
• Save your Web page.
2. Inserting Objects on your page:
Objects on a web page include items like tables, images, horizontal rules, links, and line breaks. We have inserted a table and links using the Insert menu and using the Property inspector. Now we will learn how to use the Objects toolbar to insert other objects.
• The Objects toolbar is located at the top of your screen, under the main menu options.
• There are three menus of the Objects toolbar that you will be using most often: Common, HTML and Forms. To switch between object menus in this toolbar, click on the toolbar name and choose the menu you want to use.
• Each of the objects we use in these menus will be explained when and if we use them.
• Change the Objects toolbar to HTML.
• Click to place the cursor below your welcome heading.
• Click on the Horizontal Rule Object in the toolbar to insert a horizontal rule where the cursor is.
• The rule is inserted and the Property inspector changes to allow you to adjust the properties of the horizontal rule, if you wish.
•
Objects have names that do two things: they make your object accessible to text browsers that don't show images or other types of objects and they allow speech browsers to speak a name instead of just "image". Horizontal rules, images, and tables all have names.
• Save your Web page.
This is a good time to go back and add a name to our table and, at the same time, learn how to edit existing objects on our pages.
• Click somewhere on the inside borders of your table to select the whole table. When the Property Inspector shows the properties of your table you will know you have selected the table. Make sure you are selecting the whole table and not just a single cell, row, or column. The best place to click seems to be on the borders showing between the cells in the upper left or lower left corner.
• In the tables properties, you can also choose a background color for the whole table, choose a border color, or even put a background image over the table. Experiment with these if you like. You may like a border color and then background color in one or two of the cells only.
• To add background color to individual cells, click in the cell and then add the color in the Property Inspector for that cell.
• NOTE: if you put background colors in cells or for the whole table, your background image for the whole page (later in this document) will not show through the table.
• Save your Web page.
5. Inserting Images
• Change the Objects toolbar back to Common.
• Click back in the content area cell, below the horizontal rule.
• Click on the image object in the object toolbar.
• Navigate to where your image is in the Select Image Source dialog box. (See NOTE below**.)
• Click on the image to select it.
• Click on the OK button to insert the image.
• The Image Tag Accessibility Attributes box may appear next if the dialog box has been activated in preferences.
Within this dialogue box we can enter alternative text and provide a link to a longer description of the image (please see Explanations of Image Properties below for more information about alternative text a.k.a. Alt attribute).
• For this example you could enter elephant_background for the alternative text. Click
OK to insert the image with the alternative text.
• NOTE: Choosing cancel will still insert the image in your document but Dreamweaver
will not associate accessibility tags with the image.
• You may also get a message about saving the image to a different location. Click on the "No" button.
**NOTE: Saving image files from the Web:
1. Find an image you would like to use on the Web.
2. Right click on the image
3. Click on Save Image As
4. Save the image to your images folder located within you main web site folder.
IMPORTANT : Do not use images unless you know they are either copyright free or they are your own images you have scanned. Most images on the web have copyright protection even if it is not clearly evident. Always get permission or only go to sites that have free images. Do a web search on free images to find sites.
• Click once on an image to select it. You will then be able to change the properties in the Property Inspector.
• Save your Web page.
Explanations Of Image PropertiesW and H reserve space for an image on a page as it loads in a browser. Dreamweaver automatically fills these fields with the image's original size. Default and unlabeled values are pixels. You can also specify the following units: pc (picas), pt (points), in (inches), mm (millimeters), and cm (centimeters), and combinations there of, such as 2in+5mm; Dreamweaver converts the values to pixels in the HTML source code.
If you set W and H values that do not correspond to the actual width and height of the image, your image may not display properly in a browser. (To restore the original values, click the field labels.) You can change these values to scale the display size of this instance of the image, but this does not reduce download time because the browser downloads all image data before scaling the image. To reduce download time and to ensure that all instances of an image appear at the same size, use an image editing application (such as Photoshop) to scale images.
Src specifies the source file for the image. Click the folder icon to browse to the source file, or type the path. For information on entering paths, see Absolute paths.
Absolute paths provide the complete URL of the linked document, including the protocol to use (usually http:// for Web pages). For example,
http://www.macromedia.com/support/dreamweaver/conte nts.html is an absolute path. You must use an absolute path to link to a document on another server. You can also use absolute-path links for local links (to documents in the same site) but that approach is discouraged; if you move the site to another domain, all of your local absolute-path links will break. Also, using relative paths for local links provides greater flexibility if you need to move files within your site. Note: When inserting images (not links): if you use an absolute path to an image that resides on a remote server and is not available on the local hard drive, you will not be able to view the image in your document window. Instead, you must preview the document in a browser to see it. If possible, use document or root-relative paths for images.
Link specifies a hyperlink for the image. Drag the Point-to-File icon to a file in the Site window, click the folder icon to browse to a document on your site, or type manually the URL path.
Align aligns an image and text on the same line. Use the Property toolbox to set the alignment of an image in relation to the other elements in the same paragraph or line. HTML does not provide a way to wrap text around the contours of an image, as you can with some word processing applications. You can align an image to text, another image, a plug-in, or other elements in the same line. You can also use the alignment buttons (left, right, and center) to set the horizontal alignment of an image.
Browser Default generally specifies a baseline alignment. (The default may differ depending on the site visitor's browser.)
Baseline and Bottom aligns the baseline of the text (or other element) to the bottom of the selected object.Top aligns an image to the top of the tallest item (image or text) in the current line.
Middle aligns the text baseline with the middle of the selected object.
TestTop aligns the selected object with the top of the tallest character in the text line.
Absolute Middle aligns to the absolute of the current line.
Absolute Bottom aligns to the absolute bottom (which includes descenders, as in the letter g) with the bottom of the selected object.
Left places the selected object on the left margin, wrapping text around it to the right. If left-aligned text precedes the object on the line, it generally forces leftaligned objects to wrap to a new line.
Right places the object on the right margin, wrapping text around the object to the left. If right-aligned text precedes the object on the line, it generally forces right-aligned objects to wrap to a new line.
Alt specifies alternate text that appears in place of the image for textonly browsers or for browsers that have been set to download images manually. For visually impaired users who use speech synthesizers with text-only browsers, the text is spoken out loud. In some browsers, this text also appears when the pointer is over the image.
V Space and H Space add space, in pixels, along the sides of the image. V Space adds space along the top and bottom of an image. H Space adds space along the left and right of an image.
Border sets the width, in pixels, of a border around the image. Enter 0 for no border. You can apply a border to both linked and unlinked images. You set link color in the Page Properties dialog box. If you set a border for an image which has no links, the border will be the same color as text in the paragraph in which the image is inserted.
6. Inserting a Background ImageSometimes it is fun to have an overall background image on your web page. You need to be very careful that the image does not overwhelm the text or other images. Remember that the main purpose of your web site is not usually the background image. To insert a background image on your page:
• Click on the Modify menu.
• Click on Page Properties
• Click on the Browse button next to the Background Image box. This is one way to find the images if you cannot remember the file name.
• Navigate to your image in the Select Image source dialog box.
• Click on the image to select it.
• Make sure the Relative To: box has "Document" in it. This will keep the image in the same folder as your web page.
• Click on the Select button.
• Click on the Apply button in the Page Properties dialog box.
• Click on the OK button in the Page Properties dialog box. The background image will be tiled across your web page.
• NOTE: If you chose a table background color earlier, you will notice that the Page background image will not show on your table. To have your table included in the background image, remove the background color on the table by doing the following:
1. Select the whole table. (Be careful to select the whole table and not just one cell.)
2. Click on the Bgcolor arrow in the Property Inspector to get the color picker.
3. Click on the Default color button to remove the color.
• Save your Web page.
7. Add text content to Web page• Add content that explains the purpose of this Web site. Remember this home page should explain what the site is about, whom it is for, and what can be found there.
• Add Courtesy section.
1. At the end of your main content, type in your contact message. For example: You can contact me by emailing: yourname@youraddress
2. Select the address part of the text.
3. Click in the link box in the Property Inspector.
4. Type in mailto:yourname@youraddress (inserting your email address. Note that there are no spaces between those letters.)
Another way is to highlight your email address, then click on the email object in the Objects toolbar
In the Text box, type in the text that you want to be the visual cue. A visual cue is the actual text the user can click on. As a courtesy it is good to type in your actual email address, then a person can write it down if their browser is not set to send mail.
Type your actual email address in the E-Mail box
5. Save your Web page.