Creating and Posting a WebPage on the Classics site

Our site, which is http://www.classics.umd.edu is on Calliope, the College of Arts and Humanities server. You can create web pages for this site using a variety of methods and programs, including using HTML (Hypertext Markup Language) coding, saving a Microsoft Word document as HTML, or using a web editor such as Netscape Composer and Dreamweaver. Below is a introduction to creating and posting web pages, along with links to available resources.

Many of the web pages on the side are also saved on the computer. Some of the pages can be found on the desktop in folders marked "Liz's Folder" or "Dept. website." There are also many old files from the desktop saved on a zip disk marked "Desktop files - cleaned 10/19/00."

It is usually a good idea to save a copy of any webpage you create on your home/office computer and on a zip disk.

Please contact Liz Tobey at etobey@wam.umd.edu if you have questions about the content of this page.

These help pages are designed for creating web pages using a McIntosh computer. Creating web pages on a PC is very similar, but not exactly the same.

Posting a Page on the Web

Posting Images on the Web

A Note about How the Web Works

To understand how to create and post a web page or site, it's useful to have some idea of how the Internet and World Wide Web function.

The Internet basically consists of millions of personal and business computers that are all linked to a network using modems, high-speed internet access lines, or other networks.

The World Wide Web is a collection of web documents (which are mostly written in HTML, or Hypertext Markup Language).  These documents must be posted onto a server so that they can be viewed by Internet users.

You can think of a server as a giant electronic bulletin board, where web pages can be posted in different sections, or directories. These directories in turn can have subdirectories or folders.  Posting a document involves sending a document electronically from your own computer to the server, using either an FTP program (file transfer program), that will send the page to the appropriate directory on the server, or by using a Web interface (a form that allows you to view folders on the server) such as WebSpinner or WebCT.

Computers linked to the Internet must use a browser to view the web pages.   Internet Explorer and Netscape Navigator are the most popular browsers, but some others include AOL or Opera.  There are different versions of browsers which have different capabilities, and are given a version number, with the higher numbers being the most recent version.  For example, Netscape 6 has more features and can view more complex pages than it's earlier counterpart, Netscape 4.7.

Each page on the web has a URL (which stands for Uniform Resource Locator, a fancy name for "address"). By typing a URL in the browser window, you can access a particular web page or site.  "http://" always precedes the address of the page.

If you are designing an entire website, it's a good idea to sketch out how you arrange your site on the server.  Usually the main page of the site is called the index page, and it should be named "index.html."  Browsers will automatically go to a site's index page if you type in the URL with a forward slash "/" at the end.  For example, if you type in "http://www.mith.umd.edu/ " the browser will automatically go to this site's index page.

You can create subdirectories within your site, each with its own index page. For example, if you were designing a departmental site for a Classics program, you might want to have subdirectories for Faculty, Courses, Grad Students, Undergrads, and Programs.  You can also refer to these subdirectories as levels.  For example, the Courses directory would be one level down from the main directory.  An example of the URL for the main directory might be:

http://www.classics.umd.edu/

A subdirectory's URL would look like this:

http://www.classics.umd.edu/Courses/
 
 
 

Creating a Web Page

  • HTML (Hypertext Markup Language)

    •  

     
     
     
     
     
     
     
     
     
     
     
     
     
     

    HTML is a special type of coding language consisting of various tags within brackets <>, which tell the Web browser how to display text. HTML code is based on the ASCII character set, a limited number of characters.    Writing a document in HTML allows it to be interpreted by a number of different computers using different browsers.  A HTML document is a type of  text file.You can create an html document in a text application such as Word Pad or Simple Text, and save it with an html extension (ex: test.html).

    Web editing software, such as Netscape Composer and Dreamweaver, function very much like word processing software. These editors automatically put in the HTML code for you. However, it is useful to have some knowledge of basic HTML code. Many word processing programs that allow you to save a document as a web page, such as MSWord, put in a lot of "junk codes" that may mess up the appearance of a document. If you understand HTML, this allows you to go into the HTML code of a web editor if necessary and make changes.

    Good basic introductions to HTML coding is offered on the Electronic Media Center's website - check out their guides to Introductory and Intermediate HTML.

    Also useful is a list of Entity References for Special Characters in HTML. This is a list of special HTML coding which allows you to display special characters, such as the '&' sign or accented characters from foreign languages.

  • Saving a Word Processing Document as HTML

    •  

     
     
     
     
     
     
     
     
     
     
     
     
     

    You can save a document that you've created in a word processing program like Microsoft Word as an HTML document. Just go to File and Save As, and in the Save dialog box, where you see "Save the file as type:", select "HTML document" from the pulldown menu, and add the extension ".html" to the file name.

    However, since web documents lack the capacity of word processing documents to do such things as set exact margins or tabs, you may lose some of your document's formatting when you save it in HTML.  Programs such as MS Word will often put in a lot of extra coding to replicate in HTML the appearance of a document in Word, and some Word characters may display incorrectly in certain web browsers.  As a rule, always view the document in a web browser to see what it will look like. You can do this by opening up Netscape Communicator and go to File, then Open, and Open Page in Navigator. Open the file in Navigator that you have saved as an HTML document, and see what it looks like.

    If your document has a lot of formatting, it is better to create a new document directly in a web editor.

Netscape Composer
 
Netscape Composer is one of the most commonly used web editors, and is easily available (if you have Netscape Communicator on your computer, you automatically have Netscape Composer). In my opinion it is the easiest web editor to use, and functions very much like a word processing program.

A good introduction to Netscape Composer can be found on the EMC's website.

I have also put together a guide to putting together a simple web page using Netscape Composer. The guide appears below.

 
 
Introduction to Netscape Composer

Opening the Page

  1. Go to the Launcher. Click on the Internet button. Then double-click on the Netscape Communicator icon to open up Netscape Navigator.
  2. In Navigator, go to File, and then New, and select Blank Page. This will open up a blank page in Netscape Composer.
Formatting the Page
  1. Go to Format, and then Page Properties. This will bring up a dialog box which will allow you to format your page.
  2. On the Page Properties box, click on the General tab. Put in a title for your page in the Title box. Then put your name in the Author box, and a short description of the page in the description box (this allows web browsers who are visually disabled to be able to hear a written description of a page or image). You may want to enter some words in the Keywords and Classifications boxes, which helps search engines such as Yahoo and Netscape find your page. For example, for a web page on Mythology, you might want to enter "mythology, Classics, gods" as keywords. Click on Apply to apply what you've entered
  3. Click on the Colors and Background tab in the Page Properties box. Composer has already set specific colors for Normal text (the text in your document), Link text (text that's hyperlinked to other pages or other places in the document), Active Link text (text that is currently selected by the cursor), Followed Link text (text that changes color once the link has been clicked on and visited), and Background color. To change the selected color for any one of these items, check "Use Custom Colors" and then click your cursor on the color that you want to change.

    4. Keep in mind when choosing colors that it's best to use a dark text against a light background, or vice versa.
  4. This will open up a dialog box that will allow you to select a color. On the left hand side is a scroll bar listing several types of color choosers. Since you want to choose a web-safe color, it is best to use either the Crayon Picker or the HTML Picker. Click on the icon of the picker you want, and then select your color, and click OK.

    5. Colors can also be specified in the HTML coding. Web-safe colors are determined by a # sign followed by a six-digit color code composed of lower case letters and/or Arabic numerals.
  5. In the Page Properties box, you can also select to have a photograph as your background. Click on the Image box and you will be prompted to select a file to download as the background. You can also type in a link to an existing image on the web, but make sure to check the box leaving the image in its original location.
  6. If you are going to use the same background and text settings for all pages, check the box that applies these settings to all pages.
  7. Click on the Apply button and the Close button to close the Page Properties box.
Pasting Text from a Word Processing Program

You can easily cut and paste text from a word processing document into a Composer page.  First, there's a couple steps you should follow to minimize any problems with displaying the pasted text.

  1. Open up your word processing document in your word processing software.
  2. Go to File and Save As.  You should save a version of your file as a text file.  If it gives you the option to save it with line breaks, choose this option.  By saving it as a text file, you will save a version of this document that will contain only those characters that the HTML editor will recognize.
  3. Select the text that you wish to copy.  Using your word processor's Edit menu, Copy the text, and use the Paste command from the Edit menu in Composer to paste the text into your document. You may need to reformat some of text (for example, italicizing titles, or inserting entity references to represent special characters (such as "é").
Formatting and Aligning Text
  1. To put in a centered title for your page, go to Format, then Align, then Center. This will center the cursor. Remember that it is impossible to set exact tabs or margins on webpages, so you must make use of alignment commands and indenting and outdenting text.
  2. Select the Style of your text, by going to Format, Style, and selecting Bold, Italic, Underline, or some other choice. You can also use the buttons on the toolbar. To unselect this style, simply click on the style buttons or unselect the style selection under Format.
  3. Select the Size of your text, by going to Format and Size. You can select the point size of the text. 18 is a good point size for titles and headings, and 14 is good for regular text.
  4. Times New Roman is automatically set as the default font. However, you can change the font by selecting your text by highlighting it with your cursor, and then going to Format and Font. There is a whole list of fonts to choose from.
  5. Press Return on your keyboard to move to the next paragraph. You will notice that this is essentially a "double-space." If you want to make a single space, or move on to the next line, go to Insert, and New Line Break.
  6. To move back to the left margin, go to Format, then Align, then select Left. The cursor will be aligned with the left margin.
  7. You may use Format and Increase Indent/Decrease Indent as a Tab/Backspace key. Using these commands will indent and outdent the text at set increments.
  8. You may edit text by highlighting it with the cursor and making changes under Format or using the style buttons on the toolbar. To determine the text's current settings, highlight it, go to Format, and select Character Properties.
  9. You may copy text from other HTML, word processing, and text documents and paste it into the Composer document. You may lose some formatting when pasting text from a word processing program into a Composer document, so highlight the text and use the Format commands and style buttons to re-format the text.
Lists and Special Characters
  1. To create a bulleted list, go to Format, List, and Bulleted. Then enter the text after the bullet. Press Return on the keyboard to enter a new bulleted item. If you want to end the bulleted list, go to Format, List, and None. If you want to create bulleted sub-headings, use go to Format and Increase Indent. If you want to move a list item closer to the left margin, use Format, and Decrease Indent.
  2. To create a numbered list, go to Format, List, and Numbered. Then enter the text after the bullet. Press Return on the keyboard to enter a new numbered item. If you want to end the numbered list, go to Format, List, and None. If you insert another list item in the middle of the list, Composer will automatically renumber the list for you. If you want to create numbered sub-headings, use go to Format and Increase Indent. If you want to move a list item closer to the left margin, use Format, and Decrease Indent.
  3. To insert a foreign or special character, go to Tools, Character Tools, and Insert Special Character. This will open up a box that will display various foreign characters and symbols.
Editing HTML Code
You can edit the HTML coding that Composer automatically creates for you. Go to Tools, HTML Tools, and Edit HTML Source. It will open up a window showing the HTML coding of the document. If you know HTML, you can enter HTML coding in this window to change the appearance of the document. Click on Apply to close the window.
Creating Hyperlinks
    You can create a hyperlink between selected text in your document to another document on the Web or another part of your document. First, highlight the text that you want to be part of the link. Then, go to Insert, and then Link. This will open up a link dialog box.

    Relative vs. Absolute Links

    There are two types of hyperlinks.  One type is called relative linking, is useful to use if you are linking to another page
    within a website that you are creating.  The advantage of using a relative link is that the "path" or the URL remains the same, whether your page is on your own computer or is posted on a web server.  To create a relative link, highlight the text you want linked, and then go to Insert and Link, which will open up a dialog box.  Click on Choose File, and select
    the file on your own computer to which you wish to link.  That file name will appear in the URL box window.  Then click on OK.

    A note about relative linking: It's important that the relative positons of the linked files on your computer are the same as they are on the server.  For example, if you are creating a link from document1.html to document2.html, and you enter
    document2.html in the URL box, you will want to make sure that both documents are posted in the same folder on the internet.  Let's say that document1.html on your computer is in one folder called FolderA, and document2.html is in a subfolder several levels down on your computer.  But you want both files to be in the same folder or level on the server.  When you click on Choose File to create the link, Composer will display the path to document2.html on your home computer in the box.  However, if you post document1.html online with the link entered in such a way, it will not find document2.html, since it is using a path to find the document on your home computer; therefore, you will have a broken link.  So you want to delete the path address in the window except for the name of the file (document2.html).  As long as both documents are posted to the same folder, the link will work.

    A forward slash or / in a link always indicates you are linking down one level.  A forward slash preceded by two periods "../" always indicates you are linking up one level.  You may link upwards by several levels by repeating the ../ .

    You can link to webpages that are in other folders on your site. For example, if you are posting a page in the Classics directory, but want to link to a page in Professor A's directory within the Faculty directory (two levels down from Classics), the path in the URL window would look like this:

    Faculty/ProfessorA/document.html

    If you are posting a page in Professor A's directory and want it to link to a page in the Faculty directory, the relative link would look like this:

    ../facultypage.html

    If you are posting a page in Professor A's directory and want to link to a page in the Classics directory (two levels up), you would indicate that you are linking upwards by two levels, and would type the following in the URL window:

    ../../page.html

    Let's say you wanted to link from a page in Professor A's directory to a page in Professor B's directory. The link would look like this:

    ../ProfessorB/page.html

    Absolute links are links that will only go to a fixed URL on the web.  Absolute links are useful if you are linking to outside sites on other servers.  As above, you want to select the text in your page which you want to link, and then go to Insert and Link, and in the URL box, type the full address of your link.  You can cut and paste an address from a browser's URL window by selecting it, using Edit and Copy to copy it, and then using the Control + V keys to paste the address into the link box.

    An example of an absolute link is:
    http://www.mith.umd.edu/

    It is not a good idea to use absolute links to link to other pages in your own website.  The problem with this is the following: if you move your site to another server, the links will no longer work, so you will have to go into your pages and change the links.  As a rule use relative links to link within your own website, and absolute links to link to other sites.
     

  1. Sometimes you will want the link to open up in a separate window from your web page. In order to do that, you can include what is called a target tag. To do this, click on the button marked "Extra HTML" and enter in the dialog box the words target="_blank" This will open up the link in a separate window.
  2. You can edit the link by highlighting it and going to Format and Link Info. You can change or modify the address of the link. By clicking on the Remove Link button in the dialog box, you can remove the link.
  3. You can link to a specific part or heading of your document. This is especially useful for long documents: you can create a table of contents at the beginning and have these table of contents hyperlinked to headings within your documents. Using your cursor, highlight the text or heading you want to designate as a target to be linked to. Then go to Insert and select Target. In the dialog box, type in the title of your target. To create a link to that target, highlight the text at the beginning of the document which you want to serve as the link. Go to Insert and Link. There will be a box in the link dialog box with a list of targets within that document. Click on the target in the list that you wish to link to, and click on OK to apply.
  4. To link to targets within other documents, go to Insert and Link, type in the URL of the link followed by # immediately followed by the name of the target within the document. For example, you might type in http://www.classics.umd.edu/Resources/Slides.html#Caprina.
  5. Note: Hyperlinks will not work while you are in Composer. You must preview your document in a browser such as Navigator in order to test links.
Creating Tables
  1. You can enter a table into your document. Go to Insert and select Table. This will open up a dialog box which will allow you to format the table. In the top two boxes, enter the number of rows (horizontal components) and columns (vertical components). In the Layout section, you can select whether you want the table to have borders and can select the pixel width of the borders. On the right hand side, you can select whether you want the table to be aligned to the left, center, or right. You can choose whether to insert a caption above the table. You can also determine how much of a percentage of the screen you want the table to occupy (80% is a good choice) and you can specify a minimum height. You can also check off a box to make the column widths equal; otherwise, these will expand depending on how much text you enter in them. In the Table Background box, you can either select a color for the background or choose to download an image from a file as a background.

    2. Click on Apply and Insert to insert the table.
  2. To enter information into the table, place the cursor in the first cell and type the text. To move onto the next cell, use the tab key.
  3. To edit the table or the information within its cells, go to Edit and Select Table. Then go to Format and Table Info. You can select the tabs for the table, row, or cell. Under the table tab, you can change the number of rows and columns, the width of these, the background, etc. Under the row tab, you can adjust the text alignment and/or color of the rows. Under the cell tab, you can adjust the width, text alignment, and color.

    4. To insert another row, column, or cell in an existing table, place the cursor in the row, column, or cell nearest to where you want to insert the new element, and go to Insert, and select Row, Column, or Cell.
    You may insert images, links, and/or linked images into tables.
Inserting Images
  1. To insert an image, go to Insert, and Image. Click on the Image tab. At the top is a dialog box labelled Image File Name and Location. In the box you should type in the URL of the image on the Web. Check the box that says to leave the image in its original location. In the case of the Caprina images, which are already posted on the web, you can create a link to their URL in order to place them on your page. If an image is not up on the web, you will have to first post it in a directory on the Classics site. For example, if you were creating a page to go in Lillian's directory on the website, you would upload the image 'test.jpg' as a jpeg file into Lillian's directory on WebSpinner. In order to use this image on your webpage, you would enter the link to that image in the dialog box "test.jpg"
  2. Some people prefer to post there images on the web in a separate directory from their HTML pages.  If you decide to do this, make sure you type the correct path into the image dialog box. For example, if you are posting image_a.jpg in a directory called "images" one level down from your html page, the image path would look like this in the dialog box:

    3. images/image_a.jpg.
    You can also create a path to an image that is in a directory one or more levels up from the one in which you are posting your page. For example, if you are linking to an image stored in a directory one level up, the path would look like this:
    ../image_b.jpg
  3. You can use the image dialog box to manipulate the position and/or size of the image. Under Alternative Representations for Image and Text, you can enter descriptions of the image which would aid visually disabled browsers in understanding the page. In the dimensions box, you can choose to keep the image its original size or change the dimensions of the image. Be sure to keep the Constrain Proportions box checked when enlarging or shrinking the image, so that the dimensions remain proportional to each other and do not create distortions. If you plan to enlarge or shrink the image considerably, you should probably rescan the image or resize it in Photoshop to minimize distortion. In the right hand of the image dialog box, you can specify the width of the pixel border around the image.

    4. When you've gotten the image to where you want it, click on Apply and OK.
  4. To edit an image, click on the image to select it, and go to Format and Image Info. to open up the dialog box.
  5. You can have an image serve as a link. Select the image by clicking on it, and go to Insert and Link. Type in a link in the dialog box.
  6. As a rule, always try to post your image in the same folder as the HTML document in which it appears.  If you are inserting an image that is actually in another folder or location, make sure that you check the box "leave image at original location." Otherwise, the next time that you try to edit the page, Composer will remove the path from the Image File Name and Location box, leaving only the image file name, and your links will be broken when you repost the page to the server.
Previewing Your Page in the Web Browser
Once you are through entering the information on your page, you can preview it in a web browser to see what it will look like on the Web. The same page may look slightly different in different Web browsers, so you may want to preview your page in more than one browser if possible. Microsoft Internet Explorer seems to be the most versatile browser, with Netscape Navigator being the second most versatile.
To preview your Netscape Composer page in Netscape Navigator, go to file and Browse Page. It will open up your page in Netscape Navigator. Check the links to see if they work by double-clicking on them. Remember that your images will not appear unless they are posted somewhere on the Web.
Click the box in the upper left hand corner to close the window.
Saving Your Document and Publishing It
  1. Remember to save your document. It is usually best to give the document the same name as the name you will use to post it onto the server. Go to File and Save, and enter a name for the document followed by the extension .html.
  2. Once your document is finished, you are ready to post it using FTP See instructions below.
  3. You can download an exisiting page off the web, edit it in Composer, and repost it on your site (but check copyright before you do this). Find the page in Netscape Navigator, and go to File and Edit Page. This opens up the page in Composer. Go to File and Save As, and create a name for the page with the extension .html. You can make changes to this page and post it on WebSpinner. However, bear in mind that if the web page has been created with special tools (such as JavaScript), you may not be able to make certain changes.
Dreamweaver
 
Although at least one Classics faculty member has referred to Dreamweaver as "Nightmare-weaver," this web editor can be a useful, though often 
idiosyncratic tool for composing web pages and web sites. It also can be used for preparing electronic presentations as an alternative to 
Microsoft PowerPoint.

 

Many of the web pages on our Classics site have been composed in Dreamweaver (these documents are easily identifiable by an icon that looks like a thumbprint against a green background), so I have included a guide to some basic features of Dreamweaver, for those who wish to edit existing web pages or who want to use Dreamweaver as an alternative to Composer. I personally prefer Composer, but some may prefer what Dreamweaver has to offer. Dreamweaver has many features and capabilities that I have not explored in full; if you are interested in learning more than the basics, consult the Dreamweaver "Bible" in Eva's office or consider taking a course.

Opening the Page

  1. Go to the Launcher. Click on the Applications button. Then double-click on the Dreamweaver icon to open the program.
  2. Go to File, and then New, and select Blank Page. This will open up a blank page in Dreamweaver.
Formatting the Page
  1. To setup the page, go to Modify and select Page Properties. This will open up a dialog box.
  2. Type in a title for your page in the top of the box. This is the page title which will appear in the Internet browser
  3. You can select an image as a background by typing in a link in the space labelled "Background Image," or use the Choose button to select an image from a file. If you select an image from a file, make sure you post a copy of this image in the folder where you plan to post your page.
  4. Select the colors of your text and links: these include normal text (the text in your document), Link text (text that's hyperlinked to other pages or other places in the document), Active Link text (text that is currently selected by the cursor), Visited Link text (text that changes color once the link has been clicked on and visited), and Background color. By clicking on the small box to the left of each link/background choice, you can bring up a web-safe color palette. Select the color that you want using the eyedropper. An HTML color code can be entered in the box on the right as an alternative to selecting a color from the palette. Web-safe colors consist of a # sign followed by a six-digit combination of lower-case letters and/or Arabic numerals.
  5. Document encoding should be set to Western (Latin1) except under special circumstances where you are composing pages in languages that involve other scripts or alphabets (such as Cyrillic).
  6. You can choose a Tracing Image from a file. A Tracing Image allows you to superimpose an existing image/file upon your new file as a design aid. This Tracing Image will not appear in your browsed document. Sliders at the bottom of the dialog box allow you to choose the transparency/opacity of the tracing image. For most purposes, you will not need to use this function.
Formatting and Aligning Text
  1. To put in a centered title for your page, go to Text, then Alignment, then Center. This will center the cursor. Remember that it is impossible to set exact tabs or margins on webpages, so you must make use of alignment commands and indenting and outdenting text.
  2. Select the Style of your text, by going to Text, Style, and selecting Bold, Italic, Underline, or some other choice.To unselect this style, simply highlight the text with your mouse that you wish to change and unselect the style selection under Text.
  3. Select the Size of your text, by going to Text and Size, and check the size from the pulldown list. 4 is a good size for regular text and 5 is a good size for headings.
  4. Times New Roman is automatically set as the default font. However, you can change the font by selecting your text by highlighting it with your cursor, and then going to Text and Font. There is a list of fonts to choose from.
  5. Press Return on your keyboard to move to the next paragraph. You will notice that this is essentially a "double-space." If you want to make a single space, or move on to the next line, go to Insert, and Line Break. Dreamweaver can be finicky about line breaks, so you will probably have to insert the line break twice in order for it to recognize the command.
  6. To move back to the left margin, go to Text, then Alignment, then select Left. The cursor will be aligned with the left margin.
  7. You may use Text and Indent/Outdent as a Tab/Backspace key. Place the cursor to the left of the text or element (such as a bulleted or numbered list) that you want to indent or outdent. Then go to Text and Indent or Outdent to indent and outdent the text at set increments.
  8. You may edit text by highlighting it with the cursor and making changes under the Text menu. To determine the text's current settings, highlight it, and go to Modify and Selection Properties.
  9. You may copy text from other HTML, word processing, and text documents and paste it into the Dreamweaver document. You may lose some formatting when pasting text from a word processing program into a Dreamweaver document, so highlight the text and use the Text commands and style buttons to re-format the text.
Lists and Special Characters
  1. To create a bulleted list, go to Test, List, and Unordered. Then enter the text after the bullet. Press Return on the keyboard to enter a new bulleted item. If you want to end the bulleted list, go to Text, List, and None. If you want to create bulleted sub-headings, use go to Text and Indent. If you want to move a list item closer to the left margin, use Text, and Outdent.

    2. Occasionally when you begin a bulleted list, the bullet will be aligned in the center of the screen. To get it back to the left margin, just press the backspace (delete) button on your keyboard.
  2. To create a numbered list, go to Text, List, and Ordered. Then enter the text after the bullet. Press Return on the keyboard to enter a new numbered item. If you want to end the numbered list, go to Text, List, and None. If you insert another list item in the middle of the list, Dreamweaver will automatically renumber the list for you. If you want to create numbered sub-headings, use go to Text and Indent. If you want to move a list item closer to the left margin, use Text, and Outdent.
  3. To insert a foreign or special character, you will need to enter the HTML coding, or entity reference, for that character in the document's HTML coding. Click on the following link to find the entity references for the character you want. Then click on the icon in the far right hand corner of your Dreamweaver screen (it is a rectangle with two brackets within). Find the place within the HTML coding for the document where you want to insert the special character, and type in its entity reference in the HTML coding. Close the HTML box by clicking in the box in the upper left hand corner of the HTML coding dialog box.
Editing HTML Code

Click on the icon in the far right hand corner of your Dreamweaver screen (it is a rectangle with two brackets within). Enter the HTML coding that you want to add to the document. Close the HTML box by clicking in the box in the upper left hand corner of the HTML coding dialog box.

Creating Hyperlinks

  1. Highlight the text with your cursor which you would like to serve as the link. Go to Modify, and Selection Properties. In the properties box, type in the link in the link box. The link should begin with http:// followed by the complete URL or web address
  2. You can specify that the link open up in a separate window by clicking in the target window in the properties box and selecting "blank" from the pulldown menu.
  3. An image can serve as a link. Click on the inserted image to select it and go to Modify and Selection Properties to open the properties box. Enter the link in the box below the "src" (image source) link box.
  4. You can edit a link by highlighting it, going to Modify, selecting Hyperlink, and choosing Change Link to open up its properties box. To remove the link, go to Modify, Hyperlink, and Remove Link.
  5. You can link to a part or heading of your document. This is especially useful for long documents. You can create a table of contents at the beginning of the document with links to headers within the document. First you must designate the anchors within your document (these are referred to as targets in Netscape Composer). Place your cursor in front of the text which you want to serve as an anchor. Go to Insert and Named Anchor. Type a name for the Anchor in the box and click OK. To create a link to this anchor, highlight the text which you want to serve as the link and go to Modify and Hyperlink and select Create link. In the box for the URL, enter # directly followed by the name of the anchor. For example, you would enter #Training. When you click on the hyperlink in the browser, the browser will go directly to this anchor tag in the document.
  6. To link to targets or anchors within other documents, highlight the text you want to serve as a link, go to Modify and Selection Properties, and type in the URL of the link followed by # immediately followed by the name of the target within the document. For example, you might type in http://www.classics.umd.edu/Resources/Slides.html#Caprina.
  7. Note: Hyperlinks will not work while you are in the composing mode of Dreamweaver. You must preview your document in a browser in order to test links.
Creating Tables
  1. Go to Insert and select Table. This will open a dialog box that will ask you to enter the number of rows (horizontal elements), number of columns (vertical elements), and will ask you to specify the width of the table in percentage of the the screen width. It will also ask you to specify the table border in pixel size (0 indicates no visible border) and the cell padding and spacing.
  2. Position your cursor in each cell of the table to enter text. You can use the tab key to move from cell to cell. You can format the text in each cell by selecting attributes under the text menu.
  3. You can add/delete rows/columns by positioning your cursor in the part of the table where you want to add/delete, and go to Modify, Table, and Add/Delete Rows or Columns. You can also place your cursor on the outer border of the table and go to Modify, Selection Properties to open up the Table properties box. You can modify row, column, or cell, by positioning the cursor on the border of that element and going to Modify and Selection Properties.
Inserting Images
  1. Inserting images in Dreamweaver documents is slightly more complicated than inserting images into Netscape Composer in that you must know the exact pixel dimensions of the image you are inserting, if this image is one to which you are linking. You can find the pixel dimensions of an image by opening it in Adobe Photoshop and going to Image and Image Size. If you are downloading or linking to an image on the web, you can find the pixel dimensions by going to View and Page Info. in Netscape Navigator.
  2. Go to Insert and Image. This will bring up a dialog box. You can select an image from your desktop or zip/floppy disk or type in the URL or Web address of an image that is already on the web. Click on Select to select this file or link. Dreamweaver will insert the Image itself (if from a file) or will insert an Image icon (if it is a link).

    3. If the image you are inserting is actually a link to an image posted somewhere on the web (ex., if you are creating a link to a Caprina image), you will need to enter the dimensions of the image. Click on the image icon to select and go to Modify and Selection Properties. You will get a dialog box where you can enter the dimensions of the image. You will notice that the image's URL is already listed in the source "src" box.
    The linked image can serve as a link to another image on the web. For example, if you are putting several images on one page, you don't want to run into problems with the page taking too long to load. A solution is to put a series of thumbnail images on your page, with each thumbnail serving as a link to a larger image.
  3. For images that you have inserted from a file, you can make these images larger or smaller by using your cursor to drag or push the box on the corner of the image to make it larger or smaller. By using the box on the corner, the dimensions of the image will remain in proportion. Dragging or pushing the boxes on the side of the image will stretch/compress/distort the image.
  4. To delete an image, click on it to select it and press the delete button, or place the cursor in front of it and press the backspace (delete) button.
Previewing Your Page in the Web Browser

Once you are through entering the information on your page, you can preview it in a web browser to see what it will look like on the Web. The same page may look slightly different in different Web browsers, so you may want to preview your page in more than one browser if possible. Microsoft Internet Explorer seems to be the most versatile browser, with Netscape Navigator being the second most versatile.
To preview your Dreamweaver page in Netscape Navigator, go to File and Preview in Browser, and select Netscape Communicator. It will open up your page in Netscape Navigator. Check the links to see if they work by double-clicking on them. Remember that your images will not appear unless they are posted somewhere on the Web.
Click the box in the upper left hand corner to close the window.

Saving Your Document and Publishing It

  1. Remember to save your document. It is usually best to give the document the same name as the name you will use to post it onto the server. Go to File and Save, and enter a name for the document followed by the extension .html.
  2. Once your document is finished, you are ready to post it using FTP. See instructions below.
Posting a Page on the Web

FTP

Once you have designed your web page using HTML or using a web editor such as Netscape Composer or Dreamweaver, you must post your page on the Internet in order to make it available for viewing. The way that a web page gets put up on the Internet is by posting it on a certain server. A server is a machine maintained by an organization, company, or institution, that electronically stores all the files that are posted on it. The Internet works through a complex network of servers communicating with other servers and with the modems of individual terminals or personal computers.

The  method we  use to post to our server is FTP (File Transfer Protocol). Through using an FTP program, one can upload a file from a personal computer to a server. You can use FTP to upload files to the Calliope server, the server upon which our website is placed. FTP can be especially useful when you are uploading several files at once. Once the files are uploaded to Calliope, you can use the Upload button in WebSpinner to retrieve the files from the server and place them in your directory.

Getting a GLUE Account

In order to log onto the server, you must get a GLUE account.  From any Telnet program, open "glue.umd.edu", and when the login sign appears, type in "register." Follow instructions for creating your account.

Then, once you know your login and password, email Catherine Hays (chays@deans.umd.edu) and tell her that you need access to the Classics directory on Calliope.

Most PC's use an FTP program called WSFTP.   McIntosh uses a program called Fetch.  Here is a simple way to use FTP from a McIntosh:

  1. Go to the Launcher, select Internet, and double-click on the icon that says Fetch 3.0.
  2. You will see a dialog box into which you should enter the following information:
  • Host: type in : calliope.arhu.umd.edu
  • User ID: type in your login name
  • Password: type in your password
  • Directory: type in /export/software/arhu/clas/www/
  • Click on the OK button
  1. You will be then admitted to the main Classics web folder.
  2. Double-click on the folder where you want to place your file to open it.
  3. At the bottom of the screen change the selected radio button from Automatic to Binary.
  4. Click on the button that says Put File. This will open up a box that will ask you to select a file from your home computer. Select the file you wish to upload, and click Open.
  5. In the Put File dialog box, make sure you select "Raw Data" from the Format box. Then click OK.
  6. This will upload the file to Calliope. To upload more files, repeat steps 4-7.
  7. To delete a file in Calliope, highlight the file in the list, go to Remote, and select Delete file or directory