Authoring World Wide Web Pages - Furman University



Authoring World Wide Web Pages with Dreamweaver MX

Overview: Now that you have had an overview of “raw” HTML from the textbook, we turn our attention to the use of a WYSIWYG Web editor – Macromedia’s Dreamweaver. This application allows you to do just about everything that you can do with HTML without ever having to look at the code itself. In this activity we’ll explore the basic features of Dreamweaver, and point to some of the more advanced features.

1. Getting started with Dreamweaver

The following steps will introduce you to the basic features of Dreamweaver. After that, we’ll proceed with a quick set of steps that will result in the creation of a sample personal Web site.

Getting started

The first step is to prepare for saving your files.

a. Create a folder on the class file server (in your Student Backup folder) using a name like “Jane’s CS19 Site”. (Each web site that you create should have its own unique folder.)

b. Start up Dreamweaver using the Start button and looking under the Macromedia program group. Identify your web site for Dreamweaver by locating the Site window. (It should be displayed on start-up. If not, choose ‘Window’ in the menu bar and select the Site Files option.) Create a new Dreamweaver site by executing the following command — Site:New Site or by clicking Define a site in the Site window.

c. In the “Site Definition” window, name your site using your first name plus “Demo Web” such as Janes Demo Web. (You can actually name it anything you like.) Click: Next.

d. On the next page, choose No server technology and click next.

e. The next page indicates where the files of the site will be stored (on the file server, a diskette or hard disk). Choose “Edit local copies…” option and click the folder icon (and navigate to the “Yourname CS19 Site” folder that you made a moment ago; Choose Select. Choose Next

f. On the final page, indicate that we have no connection to a remote server: option None

The remote server information that we just ignored has to do with where your site will be stored on a Web server. As this suggests, Dreamweaver provides a facility for uploading your Web sites to the Web. However, we will instead be using a different application for uploading files in a later activity.

Also note the window that you now see on the right side of the screen — called the “Site” window. This window is a useful tool that you can use to keep track of your entire Web site. It is also useful for changing between multiple Web sites.

NOTE: When started, Dreamweaver automatically uses the last site used. This works well for personal machines but does not work for a shared lab environment where the last site used may be someone else's. Always remember to re-define your site to the proper location each time you use Dreamweaver in our lab.

Seeing the HTML

e. We’re almost ready to start editing. You should be looking at a new blank page. Take a moment to survey the controls and tabs in the various locations that you see (“Common”, “Layout”, “Properties” window etc.). Move the cursor over different buttons that you see to get their names. You’ll recognize many of the controls (particularly in the Properties window) from word processing, and several more you’ll have a good intuition about from the book’s HTML discussion.

f. Before typing anything into your Web page, click on the Show Code View button on the toolbar. This button, given at any time, will show you the HTML code that underlies your Web page. HTML code similar to the box should appear on the page when you give this command:

Looks familiar from the book’s HTML discussion, doesn’t it? Periodically throughout this activity you might want to take a "sneak peek" at the developing HTML code. Though we will primarily be using the WYSIWYG feature of Dreamweaver to create our pages for the rest of the lab, keep in mind that the editor can also be used to edit the "raw" HTML.

g. Click on the Show Design View button to return to the WYSIWYG screen.

Page titles

The title of a Web page is the information that appears in the title bar of the browser when the page is being viewed. It is also what appears in any Bookmarks lists. Note that a title doesn’t appear as content on the page itself. Currently this document should say “Untitled Document”

h. To give the page a title, click in the toolbar box where it says Title: “Untitled Document”. Type a temporary name like “Behold my new title!” in the “Title” box. Again, click on the Show Code View button to see what has happened. Notice the title tags and your text. While still in code view, change the title text to something like “Jane Doe’s Home Page”-only use your name. Click on the Show Design View button.

2. Formatting the page and adding content

a. Enter your name, school year (junior, senior, etc.) and contact information (major department and e-mail address) on separate lines.

b. Execute File>Save As to save the page. Make sure the file is saved in your site root directory. Use the filename index.html for reasons that will be explained later. Look in the Site window to see your new file.

So far so good, but still not very interesting. Let’s get on with it.

Next, we will make your name and class year into level 1 headers (Heading 1), and add a new line with the words “Contact Information” as a level 2 header (Heading 2). Here is how it’s done in Dreamweaver:

c. Position the cursor by clicking anywhere on your name. Then go to the Properties panel, Format pull-down menu (which currently is labeled either None or Paragraph). Choose the option Heading 1. Then do the same with your class year.

d. View the HTML again. Your name and class year should be surrounded with respective ... tags, like so:

Jane Doe

Senior

e. Next, type "Contact Information" on the next line. Make this into a Heading 2 header. Refer to the side note. Try experimenting with different header sizes.

Just remember – text separated by shift-return (Line Breaks) are treated as one paragraph!

3. Adding pages to your site

Virtually all Web sites consist of multiple interlinking pages. Adding new pages using Dreamweaver is straightforward. In this section we’ll add new pages for a list of your personal hobbies and interests, and another with some favorite links. In next section we’ll see how to link them all together.

a. Save and close the current page (your home page).

b. Execute the command File>New>Basic Page and click Create. This will give you a new blank page. Save the file immediately using the filename to interests.html. Note that the file should appear in your site root directory.(See the Files arrow on the right-hand side of Dreamweaver)

c. Give this page the title “Hobbies and Interests” by typing into the Title box in the editor.

d. Repeat this process to create one more page named links.html.

Now we’re ready to start putting these pages together into an interlinked site.

4. Adding links to other documents

What makes HTML particularly special is the ability to include hypertext links in the Web pages it produces. These are the highlighted words (and images) on a page that can take you somewhere else on the same computer—or halfway around the world—with a single click.

Fortunately, these links are very simply implemented in HTML. They employ tags like those we have already seen. The general format of a link is:

text or image

It's that easy! The A stands for "anchor", and HREF stands for "hypertext reference". URL stands for "Universal Resource Locator".

Now, a basic familiarity with URLs has been assumed for this worksheet. To review, however, a URL such as this one:



breaks down as follows:

http:// — identifies the resource to be accessed as a hypertext page from another web site

cs.furman.edu/ — identifies the server address on the Internet

~ktreu/cs16/ — identifies the directory path to the resource

index.html — identified the file name of the resource

There can be numerous variations of URLs. The resource identifier may be other things besides "http" for instance. (You might notice some other options in your net travels.) Sometimes the path may be omitted, as well as the file name. This is because certain paths and file names are accepted as defaults by IE and other Web browsers. (index.html is one default name, as you may have guessed.)

It is important at this point to note that URLs come in two forms: absolute and relative. The easier of the two to understand is the absolute form. In short, an absolute URL is one that is fully specified, including http:// (or another resource identifier) and the server address. The example above is an absolute URL.

Specification of URLs in HTML code can sometimes be simplified by using the relative form. This is possible whenever a link to another resource on the same computer is to be included. In short, the resource identifier and machine address can be omitted in this case. As long as a browser can figure out where a resource is—based on where you currently "are"—what you need to specify in terms of a URL is minimal. For example, if I were editing a page in my own directory (~ktreu) and want to link to the index page, the relative URL simply reduces to

index.html

This rule of thumb may be helpful: use relative URLs when you are creating links to pages of your own, and use absolute URLs when you are creating links to pages elsewhere on the Web.

Adding links

Let’s link together the pages of your site now. As the previous analysis suggests, we’ll use relative URLs to do it.

a. Open your home page (index.html). An easy way to do this is to use the “Site Files” listed by selecting the Files tab on the right.. Click on Site tab. Make sure that the current site (“Janes Demo Web”) is shown. You’ll see a convenient listing of all files and folders in the local root directory in the Site file listing window. Double-click the file index.html that you created earlier.

b. At the bottom of your home page, add links to the two other pages that you created earlier (interests.html and links.html). Start by adding some words as follows: Position the cursor appropriately and enter “Hobbies and Interests” and “Other Links” on separate lines.

c. Now, make the words "Hobbies and Interests" into a hypertext link. Drag the cursor over them with the mouse button depressed. Next, enter the URL of your interests.html page in the “Link” box of the Properties window. Since this page is stored in the same folder as the home page, all you need is the relative URL — interests.html. Alternatively, you can click on the folder icon to browse for any file on your hard disk. Wherever the file is, the relative URL will be used. (If you select a file which is not in the site's local root, you’ll be prompted to make a copy of the file in your root directory. You should make a copy.) When you have entered or selected the URL, hit the Enter key.

d. To test the link, you’ll need to view your page in a browser like Netscape or Internet Explorer. To do this, execute File>Preview in Browser. Select the browser of your choice. When the browser opens, click on the “Hobbies and Interests” link. Did it do what you expected? Return to Dreamweaver.

e. Repeat the same exercise in order to make “Other Links” into a link to the appropriate page.

f. Now, open interests.html in Dreamweaver. Add the text “Return to Home Page” and make it a link to index.html. Making sense? Repeat this exercise for the links.html page.

External Links

You have now linked together the various pages of your demo site. But this stuff doesn’t really get interesting until we’re able to link to sites other than our own...

g. Open your “links” page using the Site file listing.

h. Insert the following text (before the “return to home page” link you wrote) using the Header 2 format:

My Links

After that, type the following as regular text:

Cool Site of the Day

i. Now, make the words "Cool Site of the Day" into a hypertext link. As you did before, drag the cursor over them with the mouse button depressed. In the “Link” box of the Properties window, type



Hit the Return key. In your file the "Cool Site of the Day" text should now be blue and underlined. As you know, this identifies it as a link.

j. Test the link by previewing the page in a browser.

k. Try viewing the HTML code again. You should see the following in your file now:

Cool Site of the Day

View the HTML of the home page and compare the URLs that you see.

For additional practice in making external links, try the following exercises:

l. Find and make note of the URLs of other favorite pages of yours and add new links to your list. Be sure to separate the items with paragraph breaks.

Note that you can make a link out of any text on a page.

m. Edit your “Interests” page as follows. Use the Site file listing to open the page, then enter a paragraph describing your interests and hobbies. Find Web pages relevant to some of your interests and make appropriate phrases from your paragraph into links to these pages.

We’ll soon see that images and not just text can be made into links as well.

The e-mail link

A popular Web page feature is to have a link that allows someone to quickly and easily send e-mail to the author of a particular page. Make your e-mail address into one of these.

n. Highlight your e-mail address on your home page. In the “Link” field of the Properties window, enter the following:

mailto:first.last@furman.edu

using your own e-mail address (of course!). Confirm that there are no spaces; then hit the Enter key.

Note that you can also create a new e-mail link easily using Dreamweaver and the Insert E-mail Link button in the toolbar.

5. A bit more HTML

Before moving on to the inclusion of images in your document, lets apply a bit more polish using additional features of HTML.

Horizontal rules

You have already seen how to separate the different segments of your page using subtitles. Often a non-text separator is desirable. It is for just this purpose that HTML includes a facility for including horizontal lines as dividers. These are implemented using the (“horizontal rule”) tag.

a. Return to the home page and insert a horizontal line before the “Contact Information” header. Just position the cursor before the ‘C’ in “contact” and select the Horizontal Rule button from the toolbar.

Lists

Web page information is often best organized into lists. HTML provides tags for the implementation of three major types of lists: unordered, ordered and descriptive. We’ll implement the first two today, and leave the third to your reading and experimentation.

b. Open your “Links” page. Convert your list of links to an unordered list: First highlight the links that you created earlier. Then click the Unordered List button in the Properties window (that’s the one with the bullets).

You can also create lists simply by typing them in with the Unordered List button clicked. To end the list, hit the “Enter” key twice consecutively, or click the Unordered List button again.

c. Take a quick look at the HTML code at this point. You should recognize the HTML list tags that handle the list items.

Character formatting

Centering text and formatting characters (bold, italics, etc.) is as easy in Dreamweaver as it is in a word processor. Experiment with some of these options (in the Properties window).

6. Using images

Finally, let's add an image to your page. Images that are interspersed with your text are called in-line images. A special kind of tag, called IMG, is used to include these. This tag uses the following basic format:

Let's add a picture to the beginning of your home page, just before your name.

The first thing you will need, of course, is a digitized image of some kind. Fortunately, these are easy to come by. A scanner or a digital camera could be used. Drawing or painting software could be used to create original images. Furthermore, any image that you find displayed on the Web can be downloaded to your disk and re-used (with permission, if necessary). To see how it's done, let's get a picture of some Furman scenery.

a. First, use your browser to access . Select a Furman scene by clicking on it. To save your own copy, simply click on the larger image with the right mouse button. A menu will pop up on the screen. Select Save Image As (or Save Picture As in IE). You will then be presented with a dialog box asking you where to save the file. Save the image file into your “CS16 Site” folder that you’ve been working in. Don’t change the file name, but make a mental note of what it is.

b. Return to Dreamweaver and open your home/index page. Position the cursor before your name and hit the Enter key, then reposition the cursor above your name. Click on the toolbar’s Image button—identified by a small drawing of a tree (or execute Insert>Image). Navigate to your site folder and select the image that you just downloaded. Click OK. The image should appear on your page.

Note the little squares around the image. Use these to resize the image, as needed, by clicking and dragging. Dreamweaver makes available numerous options for image positioning and editing that we will explore later.

c. Resize the image to fit without being too large. (Hint: Hold the shift key down and resize using the lower right-hand corner so the image won’t be distorted.) Now, save your home page.

d. Return to the “Site” file listing. Now we’ll see another nice feature of Dreamweaver. Note that your Furman image is stored with all of your other files. However, it is often a good idea to store all images for your site in a common location, such as an “images” folder. Let’s do that with your image. First, use Dreamweaver’s Site file listing window to create a new folder called “images” - . File > New Folder. Then drag the file icon for the image that you downloaded into the “images” folder. (When Dreamweaver asks you to update files, answer “Yes”) Ordinarily, at this point you would not expect the image to show up on your home page anymore, because the image file has been moved. However, Dreamweaver updates all files that need to link to the image. To see this, return to your home page and click the Show Code View button. Note that the “images” folder name is now part of the relative URL for the image.

Other sources of images

There are numerous sources of "generic" images that you can use to make your pages more visually appealing. These include buttons, icons, fancy lines, backgrounds, etc. Remember that anything that you can view using your browser— anywhere in the world—can be downloaded and use in your own pages. Take advantage of this!

In addition, you can create your own original digitized images using a drawing or painting tool. You can also digitize existing images with the use of a flatbed scanner. Finally, images can be acquired using a digital camera. All of these methods will be explored later in class.

As mentioned earlier, hypertext links need not always be text. We can make the Furman image into a link to the Furman home page simply by treating the image as we have previously treated text links.

e. Click on the Show Design View button. Click once on the image to highlight it. Then enter the Furman URL in the “Link” field of the Properties window as you did before. Hit the Enter key and then preview the page to test it.

A common use of images in Web pages is as separator lines — replacements for the tag.

f. Repeat the image-copying exercise by copying an interesting separator-line image from the Web. One good source (of many) for these is



Pick one and copy it to your images folder. To use it, replace a horizontal rule in your file with the image. (This is a good test of whether or not what you've done so far makes sense.)

Animated GIFs

Images that are animated have become quite popular on Web pages. Such images can be downloaded and used on your own Web page as easily as non-animated images. The steps are exactly the same as those you have just completed. Collections of animated GIFs can be found all over the Web. Two good locations are

and

In general, in-line images (and particularly animated images) should be used with careful thought. Cluttering your pages with too many images cannot only be unattractive, but a source of considerable inefficiency for those trying to access your page.

NOTE: Animated images do not animate within Dreamweaver’s editor

Backgrounds

Suitable images can be used as backgrounds to your pages to make them more eye-catching. Repositories of these images can be found all over the Web.

g. Access either of the locations:

or

Select one of the background patterns and copy it to your image folder as you've done twice before.

h. To use this image as a background, simply select Page Properties from the Modify menu. Click the Browse button by the “Background Image” field to find the image file. Background images are “tiled” to fill in the entire background.

Note that you can also use Modify>Page Properties to change the color of your background without using any images. Feel free to try this.

7. An experiment with advanced Dreamweaver features

It turns out that Dreamweaver can do a whole lot more than basic page layout. We’ll get to a lot of these features during the rest of the term (see the list in the next section), but for now let’s call on a couple of Dreamweaver’s most useful tools to improve the way the pages in your sample site are linked together. Specifically, we’re going to use Dreamweaver’s built-in navigation bar tool, and Dreamweaver libraries.

At this point you should have at least three pages in your Web site — a home (index) page, a personal page of interests, and a page of links. The home page should have text links to both other pages, and the other pages should have links back to the home page, in addition to specialized content.

What we’re going to do is design a graphical navigation bar that will allow you to go to any page from any other page at the click of a button.

Constructing the nav bar

a. Minimize Dreamweaver and use Windows to copy the button images (home.gif, home1.gif, etc.) from the OUT folder into the images folder for your web site.

b. Return to Dreamweaver. Make sure your “Demo Web” site is selected. (By now you should know what this means. If not, ask me.) Open your home page (index.html).

c. Position the cursor at the top of the page. Insert a horizontal rule and position the cursor before it.

d. Click the Navigation Bar button on the toolbar (or go to the Insert menu and select Interactive Items, then Navigation Bar). When the next window comes up, click in the box labeled “Element Name” and type Home. Note that Home now appears above in the “Nav Bar Elements” box.

e. Click in the box labeled “Up Image”. This defines the ‘normal image that will be used in your navigation bar for the Home button. Click Browse and choose home.gif from the images folder.

f. Next click in the “Over Image” box. This defines the image that will be shown whenever the mouse is over the Home button. Choose home1.gif for this.

g. Select home1.gif for the “Down Image” and “Over While Down Image” too. In “When Clicked Go To URL”, click the Browse button and choose index.html (or simple type it). This specifies the page to be loaded when the Home button is clicked.

h. Do not click the OK button at this point! You’re not done with the Navigation Bar yet... Click the + button at the top of the window to add another navbar element. Name this one Personal (as in “Personal Interests”). Choose the appropriate images and use your interests.html as the link.

i. Then repeat the first two steps for an element named “Next”. Using the class roster, find the URL of the student after you on the class roster. This is usually replacing loginid with the account name of the student. Check with the student for their URL.

j. Make sure the “Preload Images” option is checked. Also make sure that “Use Tables” is checked. (I’ll explain these later.)

k. Choose “Horizontally” for the orientation of the navbar. Now click the OK button.

You will see a nice new graphical navigation bar appear on your page where the cursor was.

l. Use the Properties window to center the nav bar (Align = Center). (Then preview the page in the browser to see how it works. Notice the “mouse-over” effects. Pretty nice, huh?

If you have any problems with the Nav Bar operation, you can edit it by using the Modify menu, Nav Bar option

That’s all well and good. But we can probably agree that you don’t want to have to go through all of those steps for every page in your Web site, especially if it’s a large site. Not to worry... Dreamweaver can handle this situation just fine using libraries.

Replicating the nav bar using a library

Each Web site that you define in Dreamweaver has its own library. This is a collection of Web page objects that you have identified and given specific names. The beauty of a library is that you can always get a copy of anything in it simply by dragging it from the library to your Web page! Moreover, you can make changes to items in the library and every copy of that item that you have used will change automatically in your site. It’s quite a powerful tool!

m. In the Files panel on the right, click once on Assets tab. This opens up the Assets window for your demo Web site. Then click once on the Library icon (the open book).

n. Click on the border of the nav bar to highlight it. Make sure that the whole thing is highlighted. (There should be a dark border around it with small black squares on the corners. If you have trouble, right-click anywhere on the nav bar and choose Table>Select Table).

o. In the top right-hand corner of the Files panel should be a small icon with a triangular arrow. This icon brings up access the library menu. While your entire nav bar is highlighted, click on the icon and select New Library Item. Your nav bar should appear in the Library window, and below it a green Dreamweaver icon appears with the word “Untitled” beside it. Type in the name “Nav bar” in place of “Untitled”.

You’ve made your navigation bar into a library item! Notice that you can no longer edit it on your home page. The only way to edit it now is through the library. All that remains is to copy the navigation bar to your other pages.

p. Save and close your home page and open your personal interests page. Delete the link to the home page that you made earlier in the lab. Position the cursor at the top of the page and insert a horizontal rule. Then, use the mouse to “grab” the library item “Nav bar” from the Library window and drag it over to your interests page. Let go. The navigation bar has been replicated, and even centered on the page!

q. Save the page and preview it in the browser. Notice that the links work, and the mouse rollovers work as well.

r. Repeat this process for your links page.

s. Go back to your index page and remove the text link to the Interests page. The link to the links page should remain.

8. Miscellany

Here are a few additional notes regarding Web authoring with Dreamweaver:

When you go back to work on your site

When you come back to edit your site again, you must begin by defining your site. Do this just like we did at the beginning of this lab (using the New Site). When Dreamweaver knows that you are working in the context of a site rather than an isolated page, there are more features available to you.

Note: When you are defining or editing your site, you may see a list of other defined sites. These remain from other students using this computer in other classes. To be safe in the lab, always create a new site. Always make sure your site is defined to your folder and not someone else’s.

Importing information

If you have previously created HTML pages using other tools (e.g., raw HTML, Microsoft Office, another Web editor, etc.) it is no problem to import them into Dreamweaver. Simply copy the HTML files into your local root directory and open them as you would one of the files from your site created by Dreamweaver. Since HTML is machine-independent (works the same on all computers), Dreamweaver should interpret the HTML correctly, no matter how complicated. You may then edit these other files just as you would files created with Dreamweaver.

Advanced editing features

Now that we’ve covered the basics, we’ll move on in the next few weeks to some more fancy things. Dreamweaver makes the following kinds of things extremely easy:

■ defining tables and frames

■ creating imagemaps

■ defining and using Cascading Style Sheets

■ turning HTML constructs (like a navigation bar, for instance) into symbols which can be replicated easily on any page

■ defining layers which can be hidden, shown and even moved in response to user events

■ defining fairly complex behaviors in response to user events, including image rollovers, show/hide layers, etc.

Ask me if you’d like to learn about any of these additional features.

SUMMARY

Basic concepts you should know:

■ Using Dreamweaver "Sites"

■ HTML tags

■ Formatting Text

■ Formatting a page (content and title)

■ Changing an existing web site

■ Making Hypertext links (absolute and relative)

■ Inserting images

■ Making new pages

■ Creating and using Library objects

■ etc.

What you should have completed:

■ Three web pages (index.html, interests.html, and links.html) as described in the text.

■ Working horizontal navigation bar (using a library object) on each page.

■ Text link to your “links.html” page from the “personal” page

■ Working link to furman.edu from the resized furman image

■ Non-white background using either an image or another color

■ Text formatted as described in the lab.

■ Personalized information, images, and links.

What you will do next:

■ Put web page onto the CS web server for the whole world to see.

■ I will demonstrate how to do this using WS_FTP.

■ You should check your web page using a browser to view the URL



-----------------------

Note the wide spacing between the lines of the contact information (address and email) that you entered. That is because the “Return” key places paragraph tags () into your document. A paragraph tag takes you to a new line and inserts a blank line. Preferable in some cases is a line break tag (). Delete the contact information that you entered and retype it. This time, at the end of each line choose Line Break from the Insert menu. (Alternatively, you can press the Shift and Return.)

Untitled Document

Dreamweaver Sites

You are being encouraged to think in terms of an entire site, rather than just a single page at a time. This is a convenient feature of Dreamweaver.

It is critical that you always set up YOUR site properly when using Dreamweaver in the labs.

CS LAB NOTE: The email link may not actually allow you to send mail in this shared lab environment, but it should fail gracefully – it should work fine from a personal machine with mail properly set up

Links

When creating links to existing Web pages, Copy and Paste can be valuable aids. When you find a page that you want to link to, highlight the URL in the browser window and select Copy from the Edit menu. Then return to the Properties window of Dreamweaver and Paste the URL.

[pic]

The Properties Window

Note: If you choose an image that is not in your local site root, you will be given the opportunity to make a copy of the image somewhere in the root folder. You should do this. If you don’t, everything will work fine for now, but the image will be “broken” when you upload your site to a Web server, because the server won’t know where it is.

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download