Editing Web Page Text Using Dreamweaver 8 - California State University Northridge, Accessible Technology Initiative

Editing Text - Links and Lists

Please note: Be aware that CSUN has migrated to a new web environment. For the purposes of this documentation, whenever we refer to the U: drive, \\udrive\username, please substitute it with the W: drive, \\webdrive\username, which is now used to host websites. Your Udrive will remain a location for you to keep your files but not the web content you are using for your website.

For information about mapping the new W:,“webdrive” please refer to the Information Technology documentation at http://www.csun.edu/it/training/guides/webdrive.html

Getting Started

Dreamweaver allows the addition of text to a web page by typing directly into a page, copying and pasting text from another document, or dragging text from another application.

Adding Text

There are a couple of ways to add text to the document. The easiest way is typing directly into the Document window. The second way is to copy text from another application, then paste that text into the Document window of Dreamweaver. To perform the second step, do the following:

Highlight and copy text that is outside the Dreamweaver Application.
Select the Dreamweaver application, position the insertion point in the Design view of the Document window, and from the Menu bar, select <Edit>, then <Paste Special>. There will be a dialog box to offer different paste formatting options. Choose the option to paste "Text Only".

To find out more information about adding text to a web page using Dreamweaver 8, please refer to the Online Documentation for Dreamweaver 8, hosted by Adobe. In the side menu pane, navigate to <Adding Content to Pages>, <Inserting text>, then <Adding text to a document>. In that section in the online documentation, there is information on how to do more advanced features, such as importing tabular data documents, and importing Microsoft Office documents (Windows Only).

Formatting Paragraphs and Document Structure

Dreamweaver offers the option of allowing formatting of paragraphs. To apply a paragraph or heading tag, do the following:

Place the insertion point in the paragraph, or select some of the text in the paragraph.
Using the Format pop-up menu in the Property inspector or from the Menu bar select <Text> then <Paragraph Format>, select one of the following options:
- Select a paragraph format (i.e. Heading 1, Heading 2, etc.). The HTML tag associated with the selected style will be applied to the entire paragraph.
- Select None to remove a paragraph format.

Adding Paragraph Spacing

Dreamweaver operates similar to many word processing applications when it comes to creating paragraph spacing. If a Windows operating system is being used, press Enter. There is also the ability to add a single line space between paragraphs by inserting a line break.

To add a paragraph return:

Press Enter.

To add a line break, do ONE of the following options:

Press Shift+Enter.
In the Insert bar, select the Text Category. Then select Character and click the Line Break icon.
Select <Insert>, <HTML>, <Special Characters>, then <Line Break>.

Creating Links

There are a few ways to create links in Dreamweaver, given the different views that can be used in the Document window. For ease of use, this documentation will focus on using the Hyperlink command, found on the Menu bar, through selecting <Insert>, then <Hyperlink>. To create a hyperlink, do the following:

Place the insertion point in the document where you want the hyperlink to appear.
In the Menu bar, select <Insert> then <Hyperlink>.
Complete the Hyperlink dialog box as follows:
- In the textbox entitled "Text", type in the text that will be the hyperlink in the web document.
- In the textbox entitled "Link", enter the name of the file to link to, or click the folder icon to browse to and select the file.
- In the dropdown menu entitled "Target", select the option "_blank". This makes sure that there is consistent navigation in the web site, and makes sure that the "Back" button for web browsers do not "break" when a user is navigating the web site. For more information concerning this best practice, please reference the documentation entitled Best Practices for Web Accessibility - California State University Northridge.
- Do not worry about inserting any information in the textbox entitled "Tab Index". This is only for advanced web developers. This feature allows strict control of tabbing order on the page.
- In the textbox entitled "Title", enter a title for the hyperlink. It should be relatively consistent with the title of the page that the hyperlink will take the end-user to when the link is selected.
- In the textbox entitled "Access Key", a letter can be assigned to select a hyperlink when someone navigates to the web page. This is optional, but it does add additional accessibility to the web site making it easier to navigate around the web site to the hyperlinks on the page.
When all desired information is entered, select <OK>.

To find out more information about creating links on a web page using Dreamweaver 8, please refer to the Online Documentation for Dreamweaver 8, hosted by Adobe. In the side menu pane, navigate to <Adding Content to Pages>, <Linking and Navigation>, <Creating links>, then <Linking files and documents>.

Managing Links

To keep from having broken links on a web site, activate the link management feature in Dreamweaver so that links will be updated automatically when changes are made. This feature works best when the entire site is contained is developed on a local disk before uploading to the UDrive. To enable link management, do the following:

Select <Edit>, then <Preferences>. This brings up the Preferences dialog window.
Select General from the menu list on the left.
In the Document Options section, select "Prompt" from the Update Links when Moving Files dropdown menu. This option will always prompt you before updating links. Once that option has been selected, select <OK>.

To find out more information about managing links using Dreamweaver 8, please refer to the Online Documentation for Dreamweaver 8, hosted by Adobe. In the side menu pane, navigate to <Adding Content to Pages>, <Linking and Navigation>, then <Managing links>.

Checking for Broken, External, and Orphaned Links

Checking for broken links within a document is a key step in making sure that users do not become lost in navigation by unreferenced links. To check for broken links within a document, do the following:

Save the file to a location within a local Dreamweaver site.
Select "File", "Check Page", then "Check Links". The Broken Links report will appear in the Link Checker panel.
In the Link Checker panel, select External Links from the Show pop-up menu to view another report.

To find out more information about checking for broken, external and orphaned links using Dreamweaver 8, please refer to the Online Documentation for Dreamweaver 8, hosted by Adobe. In the side menu pane, navigate to <Adding Content to Pages>, <Linking and Navigation>, then <Checking for broken, external, and orphaned links>.

Fixing Broken Links

Once the Link Check Report has been ran, fixing the broken links is the next step. To fix any broken links found in the web page, do the following:

Select <File>, <Check Page>, then <Check Links>.
In the Broken Links column of the Link Checker panel, select the broken link. Note: A folder icon appears next to the broken link.
Click the folder icon to the browse to the correct file to link to, or type the correct path and filename.
Press Tab or Enter. Note: If there are other broken references to this same file, a dialog box appears prompting you to fix the references in the other files as well. Click Yes to have Dreamweaver update all the documents on the list that reference this file. Click No to have Dreamweaver update the current reference only.

The next section to be covered is entitled Integrating Images and Tables.

Page Description

Web Editing For Faculty - Dreamweaver