Add/edit content on your Web page
You can add content to your Web page in two ways:
- Type directly in Dreamweaver in the "Primary Content or "Sidebar Content" areas of the page.
- Copy and paste content from Microsoft Word, e-mail, a pdf, the Web or any other place on your computer. Note that if you copy and paste text from another program, you may import faulty formatting that will need to be fixed in Dreamweaver.
Format your text
Whether you are typing new content, copying and pasting your content from elsewhere or editing existing content, use the following styles to format your content.
- Paragraph (CTRL + shift + p): black and evenly spaced – used for normal body content. Bold and italics can be applied to this style.
- Heading 1 (CTRL + 1): large, bold and black with a line underneath – use only once on a page, at the very top in the “Heading Content” area.
- Heading 2 (CTRL + 2): large and red – use once at the top of the “Primary Content” area, or at the top of both columns in a two column layout.
- Heading 3 (CTRL + 3): medium and red – use for headings in a sidebar and for sub-headings in the primary content area.
- Heading 4 (CTRL + 4): medium and black – use for sub-headings in the primary content area.
- Heading 5 (CTRL +5): small and red – use for sub-headings in the primary content area.
- Heading 6 (CTRL + 6): smallest, and red – use for sub-headings in the primary content area.
See examples of these text formatting options »
Add these formats to your text by placing your cursor in a line of text and choosing an option from the "Format" box in Properties. Or place your cursor in a line of text and use the keyboard shortcuts indicated in parentheses below.
Do not use the style "none" for your text.
Note: If you apply a format tag to your text and create a line break after your text, all text that follows will take on the same format. Example.
Text and line spacing issues
Text on your Web pages should be formatted so that there are whole line spaces between headings and body text, and between each paragraph of body text. This increases the readability (and scannability) of your text on the Web, and creates consistency in text formatting across Calvin College's Web site.
To ensure that there whole line spaces between headings and body text and between paragraphs on your page, press ENTER after you finish each paragraph.
Do not press SHIFT+ENTER to create a line break between headings and body text, or between paragraphs of body text.
It can be helpful when formatting text, to turn on "invisible elements" in Dreamweaver. This will allow you to see where there are line breaks on your page so that you can delete them.
Learn how to turn on invisible elements in Dreamweaver.
Other formatting options
Bullets and lists
For lists of information on your page, consider using the bulleted list or numbered list option in your Properties palette.
Tables
Tables can be used sparingly to separate and organize tabular data (such as schedules).
Tables should not be used, as they were in the past, to modify your page layout. Use our layout options to modify your page structure.
In Dreamweaver, go to Insert>>Table. Consider styling your table. Example.
Small text
The “bodycopysmall” style can be chosen from the list under “Styles” in your Properties palette to create special small text. This is typically reserved for photo captions or dates under headings. Example.
Special characters
Insert special characters, like m dashes, n dashes, bullets, and right double angle quotes by going to Insert>>HTML>>Special Characters>>Other and making a selection from the options available.
Links
Adding links to your content can be a way to connect your Web visitors with resources related to your content.
Add a link to your page by highlighting the words you’d like to appear as blue and underlined. Go to the “Link:” box in your Properties palette and either enter the URL you’d like to link to, or use the target to point to a page in your site you want to link to. You may also browse to the page you want to link to by clicking on the folder icon next to the link box.
Anchor tags
To link to a specific portion of a lengthy page, add an anchor tag by going to Insert>>Named Anchor and giving the anchor an easy-to-remember name.
Link to your anchor by adding a link to the page the anchor is on; directly after the end of the link, type #anchorname, where "anchorname" is the name you gave the anchor earlier.
Apply formatting standards
For style consistency across your site and Calvin’s Web site, you should stick to the pre-formatted styles for your content.
Font size
The font sizes and colors have been chosen specifically for the Web to enhance readability as your visitors navigate your site. For the sake of consistency and readability, the font size and color of text should not be changed. Example of wrong color use.
Font type
The font family "Arial, Helvetica, sans serif” has been chosen as the default font because of its wide use and acceptance on the Web. Example of wrong font use.
Text placement
Text should, as a rule, be justified to the left of the page. Exceptions might be for things like poetry or Bible verses. Example of incorrect text alignment.
Turn on invisible elements
Before you add text to your Web page, turn on your ability to see line breaks in Dreamweaver.
Whenever you copy and paste your content from a program like Microsoft Word, you will likely import formatting that does not render well on your Dreamweaver page. Most often, this faulty formatting is in the form of line breaks (<br/> tags in your HTML code, or what is known as a “soft return”—shift+enter—in many word processing programs).
To see line breaks and remove them from your text, follow these steps:
- Go to Edit>>Preferences
- Highlight “Invisible Elements” in the list on the left side of the dialogue box that opens.
- Check “Line Breaks” on the list in the center of the box and click “OK”. You will now see an icon wherever a line break occurs.
- Remove all unecessary line breaks that appear in your text.
