Authoring World Wide Web Pages - Furman University



Authoring World Wide Web Pages

with Dreamweaver CS3

Summary page:

This lab will create a small personal site for CS16 students. Two pages are created – index and interests. The index page will serve as the main page for all future web projects/assignments; the interests page serves as personal information and free expression area;

NEXT link – this link is used to link each student’s page to the next student on the roster – hopefully, this will make grading web projects easier.

Needed for this lab

Web Account from IS – have them know their Account ID

A current class roster

method for backup (optional) or personal folder in the Student Backup network folder

Other Resources

Check Web links for functionality

Authoring World Wide Web Pages with Dreamweaver

Overview: Now that you have read about “raw” HTML, we turn our attention to practicing and the use of a WYSIWYG Web editor – Macromedia’s Dreamweaver. This versatile 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.

1. Getting started with Dreamweaver

‘Defining’ you site for Dreamweaver

The first step is to prepare for working with your web sites' files. Organizing your files is critical to properly maintaining a web site. You need to create a folder that will contain ALL web pages and images needed by your site. This folder is called the “local root folder” – otherwise known as your site folder. This folder is the top of the hierarchy of files that make up your site. If you develop other web sites, create a different local root folder for each.

a. Create your site folder (local root folder) inside your personal folder on the class file server (StudentBackup) using your name such as: “BobsSite”. (Each web site that you create should have its own unique site folder) This folder is your site's local root folder

b. Copy the folder “images” into your site folder. The hierarchy should be as shown:

c. Start up Dreamweaver. Dreamweaver requires you to organize your site inside this local root folder – if you don’t do it, Dreamweaver will be unable to help you with your organization – instead it will destroy your very soul. So please, let Dreamweaver know where your site is located.

To do this, find the Site window on the right (If this is not visible, choose ‘Window’ in the menu bar and select the Site Files option) Define your new Web site by executing the following commands — Site: New Site or by clicking Define a site in the Site window.

d. In the “Site Definition” window you will associate a name with a folder (a local root folder). When prompted, enter any identifying name for your site. For example, use your first name plus “Demo Web” such as Bob’s Demo Web. Click: Next.

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

f. The next page sets the location of the files of the site (on the file server, hard disk, or other location). Choose “Edit local copies…” option and click the folder icon (and navigate to the “BobsSite” folder that you made a moment ago; Choose Select. Choose Next

g. 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 method for uploading files.

Also note the window that you now see — 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 – if you are maintaining more than one.

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.

Quick look at the HTML

h. We’re almost ready to start editing. Minimize the Site window for now. You should be looking at a new blank page (if not, use the File>New>Basic Page menu options). 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 our HTML discussion.

i. Before typing anything into your Web page, find and click on the “Show Code View” button on the left side of the toolbar. This button will show you the HTML code that underlies your Web page. Currently, HTML code similar to the box should appear on the page.

Looks familiar from our previous 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 workshop, keep in mind that the editor can also be used to edit the "raw" HTML.

j. Using Notepad application, select and copy the paragraph of text from the file “typeSaver.txt” file. Return to Dreamweaver and paste this text into the HMTL code – between the and the tags.

Click on the Show Design View button to return to the WYSIWYG view. You should see this text.

Page Title

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). A title does NOT appear as content on the page itself. Currently your document title should be “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.

i. Execute File>Save to save the page. Make sure the file is saved directly in your local root folder. Use the filename index.html for reasons that will be explained later. Look at the Site window to see your new file.

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.

Next, we will add formatting to your personal information. Here is how it’s done in Dreamweaver:

b. 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.

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

Jane Doe

Senior

d. Next, type "Contact Information" on a new line (above the Department) and make it into a Heading 2 header. Try experimenting with different header sizes.

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 interests, and another with some favorite links.

a. Save and close the current page (this is 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 interests.html. Note that the file should appear in your site root folder.(See the Files pane on the right-hand side of Dreamweaver)

c. Give this page the title “Personal Interests” as done before.

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. Hypertext is the special words (or images) on a page that can take you somewhere else on the same computer—or halfway around the world—with a single click.

Implementing hypertext links is very simple 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".

A basic familiarity with URLs is assumed, but as review, 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

students/acmw/ — identifies the directory path to the resource

about.htm — 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. 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 Web browsers. (index.html is a 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:// 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 is to another resource on the same computer . In short, the resource identifier and machine address can be omitted in this case. As long as a browser can determine where a resource is—based on where you currently "are"— a URL can be relative.

Rule of thumb: 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 pane on the right.. Click on Site tab. Your current site (“Bobs Demo Web”) should be 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, we will add links to the two other pages that you created earlier (interests.html and links.html). Start by positioning the cursor appropriately and entering these phrases “Personal Hobbies and Interests” and “Other Links” on separate lines.

c. Now, to make the words "Personal Hobbies and Interests" into a hypertext link: Select the text with the mouse and then, 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. Instead of typing the filename, however, click on the folder icon to browse for the file. When you have entered or selected the filename, hit the Enter key.

d. To test the link, you’ll need to view your page in a browser like Firefox or Internet Explorer. Choose File>Preview in Browser and select the browser of your choice. When the browser opens, click on the “Personal Hobbies and Interests” link. Did it do what you expected? Close your browser.

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

f. Finally, open interests.html. Add the text “Return to Home Page” and make it a link to index.html. Repeat this exercise for the links.html page.

External Links

You have now linked together the various pages of your demo site. But this is most interesting when we are able to link to sites other than our own...

g. Open your “links” page and insert the following text (before the “Return to Home Page” link you wrote)

using the Header 2 format: My Links

as regular text: Sports Site

h. Now, make the words "Sports Site" into a hypertext link. As you did before, select the text and then use the “Link” box of the Properties window to type



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

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

j. View the HTML code. You should see the following code:

Sports Site

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

Make additional external links:

k. Find and make note of 3 or 4 URLs of other favorite pages and add new links to your links page. Be sure to separate the items with paragraph breaks.

m. Edit your “Interests” page as follows: open the page, then enter a short 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.

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, let’s apply a bit more polish using additional features of HTML.

Horizontal rule tag

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. As a learning experience, we will add this tag by typing directly in the HTML. Return to the index page and click Show Code View. Move your cursor to before the “Contact Information” header tag. Type the tag. View in WYSIWYG; if a horizontal line did not appear, recheck your tag.

Lists

Web page information is often 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 own exploration.

b. Open your links page and convert your list of links to an unordered list: First highlight all 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 while the Unordered List button is clicked. To end the list, hit the “Enter” key twice consecutively, or re-click the Unordered List button.

c. Take a look at the HTML code - you should recognize the HTML 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 a picture to the beginning of your home page, just before your name. 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:

The first thing you will need, of course, is a digitized image of some kind. A scanner, digital camera or drawing or painting software could be used to create original images. Also, 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 a web browser to access Select a Furman scene from left of the screen 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 ). You will then be presented with a dialog box asking you where to save the file. Save the image file into your “Demo” web site 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 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 use the menu: 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. Now, save your home page.

d. Return to the “Site” file listing. Now we’ll illustrate another nice feature of Dreamweaver. Note that your Furman image is stored with all of your other files. It is often a good idea to organize 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 has updated 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 personal pages. Beware: Copyright “fair use” does not apply to business sites – seek permission!

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. Make sure that you are in the WYSIWYG view -- 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 any separator line and copy it to your images folder. Replace the horizontal rule in your index.html file with the image.

Animated GIFs

Images that are animated are 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

Replace your index.html 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.

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. Also note that Link colors and other page properties can be modified here.

7. An experiment with advanced Dreamweaver features

It turns out that Dreamweaver can do a whole lot more than basic page layout, for now let’s try two 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 built-in navigation bar tool and 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.

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, home1, etc.) into the images folder for your web site.

b. Return to Dreamweaver; (If you quit Dreamweaver, make sure your “Demo Web” site is open. By now you should know what this means) 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 use the menu Insert > Interactive Items> Navigation Bar). When the next window comes up, check the options at the bottom to make sure the “Preload Images” option (bottom) is checked, Insert is Horizontal, and that “Use Tables” is checked.

e. We now will enter information about the first button of the Nav Bar. Click in the box labeled “Element Name” and type Home. Home should appear in the “Nav Bar Elements” box.

e. Find the box labeled “Up Image” (the normal image that will be used in your navigation bar for the Home button). Click Browse and choose home 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. Select home1 for the “Down Image” too.

g. In the box labeled “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.hmtl as the link.

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

k. Now click the OK button. You will see a nice new graphical navigation bar appear on your page.

m. Use the Properties window to center the nav bar. 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, edit it by using the Modify menu, Nav Bar option

If your navigation bar seems hopelessly screwed up, it might be faster to re-create it rather than fix it.

This is great, but we 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 handles this situation 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!

n. In the Files pane on the right, click once on Assets tab. This opens up the Assets pane for your web site. Click once on the Library icon (the open book).

o. Now, back in your home page window, 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.

p. In the top right-hand corner of the Files pane 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 named library item! Notice that you can no longer edit the Nav Bar directly 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.

q. 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, drag and drop the library item Nav bar from the Library window to your interests page. The navigation bar has been replicated, and should even be centered on the page!

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

s. Repeat this process for your links page.

t. 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- 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). There are more features available to you when Dreamweaver knows that you are working in the context of a site rather than an isolated page.

Note: When you are defining or editing your site, you may see a list of other defined sites. These might 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 will interpret the HTML correctly, no matter how complicated.

Advanced editing features

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

■ defining tables

■ creating imagemaps

■ defining and using Cascading Style Sheets

■ defining layers which can be hidden/shown or even moved in response to user events

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

We’ll take a look at all of these advanced features in an upcoming lab.

▪ SAVE ALL RELEVANT FILES ONTO YOUR PERSONAL DISK

▪ CONFIRM THAT ALL FILES ARE PROPERLY SAVED

Saving Your Data on the G-Drive (fushare)

If you have a fushare account (G drive on your personal campus computer), please use it for all your work for security, privacy, and convenience. If you need an account call the help desk @3277

You can access this from the CS labs by doing the following:

1. Click on the Start Menu and select Run

2. In the dialog window, type \\fushare\username

where username is your account name. Press Enter.

3. When the Login box comes up, in the Connect As box, type FU\username

and type your password in the Password box. Press Enter.

4. A window should appear that has your fushare files.

P.S. This has worked in the past, C&IS may change the set up at times.

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

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

■ index.html page background uses an image

■ Text formatted as described in the text

■ Personalized information, images, and links.

What you will do next:

■ Put web page onto the Furman student web server for the whole world to see

■ Use the First Class Client (not from a web browser) to access your FC account. Open the Home Page folder and drag and drop your files:

■ You should copy the entire contents of the Demo site folder but NOT the folder itself. That is, the 3 HTML files and the images folder must be located directly in the Home Page folder (not within another folder).

■ Folders created and used only by Dreamweaver (such as: Library, _notes, Templates, etc.) are and are not required on the web server. It will not hurt anything if you copy them too.

■ You should confirm that your web page works using a browser to view the URL

fcweb.furman.edu/~youraccount

Note: Your Next link should either show the student's page or a valid empty FC folder – if it indicates "Not Found" then you have a bad URL and need to fix it (refer to step 7m)

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

Note the wide spacing between the lines of your information. This spacing 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 your department and email information lines and retype them using a Line Break at the end of each line (from the Insert menu or press the Shift and Return at the end of a line) Just remember – text separated by shift-return (Line Breaks) are treated as one paragraph!

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

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

Google Online Preview   Download