Join James Williamson for an in-depth discussion in this video Link basics, part of Dreamweaver CS5 Essential Training.
Without links the World Wide Web would be a pretty boring place. Instead of being able to click to jump from page to page, you would have to type in each unique address every time you wanted to view another page. It's no exaggeration to say that without the ability to create links, there would be no Internet. So knowing how to create links in Dreamweaver is pretty important. It's also, you'll be glad to know, pretty easy. Before we get into how to create a link in Dreamweaver, let's take a moment to learn the basics of links and a few of the different types you can create.
Links are nothing more than an address that points the browser to another location. The "A" or Anchor tag is used to create Links, and the "href" attribute is used by the browser to resolve the link's destination. Different types of links use different means to resolve link paths. Understanding the differences between these types will assist you in deciding which type of link to use in certain situations. There are three main types of links: Absolute, Document Relative, and Site Root Relative.
Absolute Links contain the entire Path to the desired Page, including the http protocol. They are primarily used to resolve links outside of the current site, although in complex sites or sites where pages are generated automatically, it's not uncommon to see them use to navigate internally in the site. This practice is discouraged as a general rule since it takes Absolute Links longer to resolve. For links outside of your site, however, Absolute Links are required.
Document Relative and Site Root Relative links are very similar. They offer you a way to resolve links within your own internal site. Document Relative Links are by far the most popular. Put simply, they are resolved by specifying the path from the current page to the desired page, using the site file and folder structure. Forward Slashes are used to denote going into a folder, while dot, dot forward slash is used to signify going up and out of a directory.
For example, if you are in a subdirectory and needed to access the Index Page in the Root Folder, the Document Relative Link would be, ../index.htm. If you are on the Index Page and needed to navigate to the photos.htm page in the Lifestyles Directory, the link would be resolved as lifestyles/photos.htm. When two files are in the same folder, you can merely resolve the link by using the name and the extension of the file.
Site Root Relative Links are very similar to Document Relative Links with just one major difference. Instead of resolving the link using a relative path from the file's current location, you resolve the link by going back to the root directory and working your way down. The Root Directory is identified by using a Forward Slash at the beginning of the link, and then working down the directory structure. Therefore, linking to the index.htm file would be resolved as /index.htm, no matter where the link was created in your site.
Site Root Relative Links aren't as widely used, but they are great for creating links on pages that move around within your site a lot, or on pages that you aren't quite sure where their final destination is going to be. As we continue on in this chapter, we will explore creating external and internal links in our pages, as well as alternate link types like e-mail and named anchor links.
- Defining and structuring a new site
- Creating new web documents from scratch or from templates
- Adding and formatting text
- Understanding style sheet basics
- Placing and styling images
- Creating links to internal pages and external web sites
- Controlling page layout with CSS
- Building and styling forms
- Reusing web content with templates
- Adding interactivity
- Working with Flash and video
Skill Level Beginner
Q: After creating a website following the instructions in the course, the header background graphic appears correctly in all browsers except Internet Explorer 6 and Internet Explorer 7. The graphic works properly in IE 8. What can be done to make the graphics appear in IE 6 and IE 7?
A: To make the header background graphic appear, wrap the header div tag in another div tag and give it an ID like “mainHeader.” The problem stems from a bug in Internet Explorer that prevents the browser from dealing with absolutely positioned elements that are right next to relatively positioned elements. Following the steps above should solve the problem.
Q: In the tutorial, the author links the Tool Tip to the word "More" at the bottom of the thumbnail photo field. I can't figure out how to place the <a> "More" on the thumbnail photo field.
If you were manually typing the text in, you could select the image, hit the right arrow button, and begin typing. The text should then appear on screen.
Q: In this movie, you are making changes to the HTML in order to customize the text layout on your page (i.e. h1, h2, and h3 tags as well as strong and em tags). I'm wondering why you are not using CSS to do this (i.e. font-size, font-weight). Do you typically use one method, or is it customary to do use both in a layout, and if so, what guidelines would you suggest to determine which to use when?
A: We modify the page's structure through the use of h1, h2, and other heading tags. So when we are choosing heading levels, we're not concerning ourselves with typography; we're establishing page structure. A heading is chosen to denote the level of importance for the heading, not typography.
CSS should always be used for presentation, not HTML.
Q: In the “Understanding ID selectors” movie, the author states that only one ID tag can be used per page, but then he adds two ID tags. Can you please clarify this for me?
A: You can use as many IDs per page as you wish. They just must all use a unique name. Therefore if you assign an element the ID of "header" no other element on THAT page may use the same ID.
Q: I noticed that in this course, the instructor uses this code on his CSS external sheet: @charset "UTF-8"; I was under the impression that this code wasn't necessary. The W3.org site is unclear on the matter. Is it necessary? Is it a best practice? Is it an older form of CSS?
A: The characterset attribute is added automatically by Dreamweaver, and there’s no practical reason to remove it. While it's not needed (the HTML page should indicate which encoding to use for the page) it is helpful if the CSS file is ever imported or used on a page where the characterset isn't specified. Think of it as a safety net for characterset encoding. Not necessary, but not harmful either.
Q: I need to add captions below images that I insert in pages of text. I played all the lessons in Chapter 5 (Adding Text and Structure) but none dealt with captions. I hope the author has an answer or can refer me to a source.
A: In HTML 4 and XHTML 1 (which is what Dreamweaver CS5 uses by default), there wasn't really a way to add captions below your photos. Most web authors would "fake" captions by having paragraphs of text below their images and using CSS to position and style the captions in the desired manner. Many would use a class such as .imgCaption to control the styling. To do this you would essentially position the text underneath the image through CSS (often by grouping the image and the paragraph in a div tag) and italicizing the text.
However in HTML5, there are new elements that allow us to associate images and their captions, the figure and figcaption element. Our author James Williamson just finished a course on HTML5: Syntax, Structure, and Semantics which details how to use it.
HTML5 Doctor also has a nice article on the figure and figcaption elements at http://html5doctor.com/the-figure-figcaption-elements/.
1. Getting Started
2. The Dreamweaver Interface
3. Site Control
4. Creating New Documents
5. Adding Text and Structure
6. CSS Foundations
7. Controlling Typography
8. Working with Images
9. Creating Links
10. Controlling Layout with CSS
11. Working with Tables
12. Working with Forms
Reviewing form design3m 2s
Creating accessible forms7m 33s
Setting form properties4m 6s
The fieldset and legend tags4m 32s
Inserting text fields5m 58s
Inserting list menu items5m 26s
Inserting checkboxes7m 50s
Inserting text areas4m 12s
Inserting submit buttons3m 37s
Form element styling8m 52s
Styling form layout11m 49s
Adding form interactivity2m 47s
Using Spry validation widgets12m 49s
13. Building Templates
14. Adding User Interactivity
15. Working with Flash and Video
16. Managing Sites
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.