By far the most important component of a web site is its information. Most often, that information is presented as text. There are several design and technical issues to consider when using text on a web page. Dreamweaver has many options for formatting and displaying text in readable, accessible ways. Much of the formatting you will learn in this tutorial is HTML formatting. Another way to format text is to use Cascading Style Sheets (CSS), which will be covered later, as it is more advanced.
Here are a few web resources that will help you learn the many text formatting options in Dreamweaver. In this tutorial, you will learn about the following:
If you need more information than these tutorials cover, refer to the Dreamweaver manual (the book or in the Help menu within Dreamweaver) or search the internet for "Dreamweaver Tutorial."
Activity |
Part 1: Add Contact Information to your index.htm page
Part 2: Create a syllabus for a course.
|
In addition to text, images provide much of the web experience. There are several issues to consider when using images in a web page, such as dimensions, image quality, file size and more. Dreamweaver does not deal with these issues, as it is not an image editing program. It does, however, provide all of the alignment options associated with HTML.
The activity below assumes you have access to some images that you will use on your web page.
The following tutorial will walk you through working with images in Dreamweaver. You will learn about:
Activity: |
Add Images to your home page (index.htm) and your syllabus page.
|
The very innovation that spawned the Web, hyperlinks are integral to a succesful site. Dreamweaver offers several ways to link web pages, and provides useful tools to make linking as easy as possible.
The following tutorial will walk you through linking documents in Dreamweaver. By the end of the activity, make sure you understand:
Activity: Using the information from the above tutorials complete the following activity: |
Is everything relative? Absolutely. A note about absolute vs. relative URLS: As you may recall from the HTML tutorials, absolute URLs are those that begin with "http://" and tell the web browser exactly where to find the file, regardless of where you are on the web. Relative URLs, however, depend on where you are when you click the link to find the right file. For instance, if you are on the syllabus page of your site and wish to link to index.htm, all you need to do is type "index.htm" in the the link. This is because the browser knows to look in the same folder unless there is a more specific path given in the link. If you are looking for a file in a folder within the folder you are currently in, you would type "folder/filename.htm". If you are linking to a file in a folder above the folder you are currently in, you would type ../filename.htm. The "../" tells the web browser to look up one level from where it currently is. You can combine them to tell the browser to move up several levels, and or down several levels, i.e. "../../someOtherFolder/someOtherFile.htm". This link looks 2 folders up from where you are, then looks in the "someOtherFolder" folder for the the file "someOTherFile.htm". Make sense? You'll get used to it after a while. Fortunately, in most cases Dreamweaver is smart enought to write correct link when you are using the Point to File or the Folder icon methods of creating links. You have to be a little more careful when you are writing the links yourself. To confuse you even more, there is another type of relative URL: Root relative. When using the Folder icon to browse to a file to link to, you can select either document relative (what we have already been discussing) or root relative. As you can guess from the names, document relative links point to files in relation to the document you are currently viewing in your browser. Root relative links, on the other hand, point to files in relation to the site's root level, or highest level. This means that a root relative link will start looking for a file from the top down. For instance, "/images/myimage.jpg" (notice the leading slash) will look for "myimage.jpg" inside of the "images" folder, which is located at the root level of the site. Confused? Good. Nothing like a little confusion to make your day. Actually, if you don't already understand absolute vs. document relative vs. root relative links, you will soon, so don't worry about it. Just stick with Dreamwweaver's default linking style (document relative) and you should be fine (except, of course, when you are linking to another site, or a page within another site, in which case you must use an absolute link). |
Image Maps are a feature of HTML that enable you to link specific parts of images. For instance, if you had a header graphic that contained your logo on the left, and a quote on the right, you could use an image map to link the logo portion of the graphic to your home page, and the quote to a different page.
If you need more information than these tutorials cover, refer to the Dreamweaver manual (the book or in the Help menu within Dreamweaver) or search the Internet for "Dreamweaver Tutorial."
Activity: |
|