Join David Powers for an in-depth discussion in this video Overview of links, part of Dreamweaver CC Essential Training.
- [Instructor] Let's face it, without links there wouldn't be an internet. In this chapter, we'll take an in depth look at creating links in Dreamweaver. But first, let's take a look at the basics of links and the different types. A link points the browser to a file at a different location on the web. HTML uses the A tag to create a link. Why A and not L or Link? Well there is another tag called Link, but it's used for different purposes, such as linking the style sheet to a web page.
The type of link that you click to go to another page is technically called a hypertext anchor, and the address of the other page is the hypertext reference. So the tag is A for anchor, and the address is stored in the HREF attribute. The content between the opening and closing A tags becomes the clickable link. In this example, click the text guestrooms would take you to rooms.html in the same website. As well as text, you can put an image between the A tags and use that as a link.
When linking to another site, the value of the HREF attribute must begin with HTTP, HTTPS, or whatever protocol the external file uses. So this links to linda.com over a secure connection. This type of link is also known as an absolute link. If you were to leave out the HTTPS:// at the beginning of this URL, browsers would think you're creating an internal link. And they would try to find www.linda.com in the same site.
So the link would fail. Leaving out the protocol of the beginning of the URL in an external link is a very common mistake, that often has beginners scratching their heads as to why it won't work. The most common type of internal link is what's known as a document-relative link. The browser needs to know where to look for the file in relation to the current document. When the file you're linking to is at the same level as the current document, the value of the HREF element is just a file name.
So this links to rooms.html from a file that's in the same level in the HTML hierarchy. In other words, it's in the same folder or directory. To go up one level, the file name is preceded by two dots and a forward slash. To go even further up the site hierarchy, you can chain two dots and the slash for each level. To go down a level, the HREF begins with the name of the folder, followed by a forward slash.
The good news is that you don't need to hand code these values. Dreamweaver takes care of all of it for you. But you do need to understand the meaning of document-relative links. If you accidentally move a file outside Dreamweaver, the link won't be updated. When you have a broken link, the first thing you should do is to check the code. Internal links can also be relative to the site root. Site root relative links always begin with a forward slash, which represents the site root.
In other words, the top level of the site. So in this example, the link tells the browser to find rooms.html in the root folder, regardless of where the current page is in the site hierarchy. This type of link tends to be used mainly in sites that use a server site technology, such as PHP or cold fusion, because the code might be injected dynamically into files at different levels of the site. So document relative roots wouldn't work. That's a quick overview of the basic types of links we'll be working with in the rest of this chapter.
Author
Released
6/13/2017- The Dreamweaver interface
- Toolbars
- Managing workspaces
- Changing preferences
- Managing projects
- Defining a new site
- Creating new documents
- Editing in Live view
- Reusing code snippets
- Structuring documents
- Creating links
- Managing CSS
- Working with images, videos, and tables
- Site management
Skill Level Beginner
Duration
Views
Related Courses
-
Creating a Responsive Web Design
with Chris Converse3h 47m Beginner
-
Introduction
-
Welcome58s
-
Using the exercise files2m 7s
-
-
1. The Dreamweaver Interface
-
Document view options7m 59s
-
Toolbars8m 57s
-
Customize the insert panel4m 43s
-
The DOM panel7m 2s
-
Manage workspaces7m 2s
-
Change Preferences10m 59s
-
2. Managing Projects
-
Basic site structure3m 19s
-
Define a new site4m 42s
-
Edit sites3m 51s
-
Manage files and folders8m 14s
-
Test files in browsers9m 4s
-
-
3. Creating New Documents
-
Create new files8m 8s
-
Explore starter templates4m 35s
-
Adapt a starter template12m 37s
-
-
4. Authoring Options
-
Edit in Live view8m 53s
-
Edit in Code view9m 40s
-
Reuse code snippets5m 19s
-
Detect errors in code10m 27s
-
Use Design view7m 5s
-
-
5. Structuring Documents
-
Create basic page structure11m 24s
-
Get text into Dreamweaver12m 3s
-
Import Word documents4m 54s
-
Add structure to text8m 20s
-
Create lists9m 6s
-
Create definition lists4m 22s
-
-
6. Creating Links
-
Overview of links3m 51s
-
Set site link preferences2m 52s
-
Create internal links9m 54s
-
Build external links4m 28s
-
Create an email link2m 51s
-
-
7. Managing CSS
-
Set CSS preferences6m 6s
-
CSS Designer overview7m 41s
-
Attach an external style sheet11m 15s
-
Styling text8m 18s
-
Use an Adobe Edge web font7m 20s
-
Create a custom font stack3m 43s
-
Style links6m 32s
-
Style borders3m 37s
-
Style background properties8m 50s
-
Style additional properties3m 53s
-
Add a media query8m 22s
-
Use CSS Inspect3m 47s
-
8. Working with Images and Videos
-
Place images on the page7m 13s
-
Control image properties8m 43s
-
Style images8m 43s
-
Use background images8m 56s
-
Insert a video7m 48s
-
-
9. Working with Tables
-
Basic table structure11m 2s
-
Import tabular data5m 28s
-
Create accessible tables10m 8s
-
Enhance tables through styles11m 34s
-
-
10. Site Management
-
Update files site-wide8m 2s
-
Check for broken links4m 31s
-
Connect to a remote server1m 37s
-
Upload files7m 20s
-
Manage multiple sites4m 33s
-
-
Conclusion
-
What next?2m 3s
-
- 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.
CancelTake 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.
Share this video
Embed this video
Video: Overview of links