Creating Content in Dreamweaver

Assuming that your FTP connection is working, and that you've been able to successfully grant permissions and all of that good stuff, it's time to start using Dreamweaver to create web content.

You've already learned how to do most of the basics of web design by hand coding it all in a text editor. Now you're going to do the same thing using Dreamweaver. At this point I recommend that you click on the "Split" view option at the top of the document window in the document toolbar.

This allows you to see the code and the design view at the same time. Having both views open can help you see what the WYSIWYG (What You See is What You Get) interface is creating when working in the Design window.

Parts of the Dreamweaver Interface

I showed you a screen shot of the different parts of the Dreamweaver interface in the last part of the lesson, but I'm including it here again as a reminder.

I'll be referring to different parts of the interface throughout this tutorial.

Page Title

Type the page title in the "Title" box in the document toolbar. A title could be something like "Paul's web site". Hit Enter. Now look at the code in the code view. You should see <title> tags right within the <head> tags in the HTML code.

Paragraphs and Headings

To create a paragraph, just start typing in the Design window and then hit "Enter". Dreamweaver should have already wrapped the text in <p> tags. Check in the code window to make sure. If it didn't put <p> tags around your text, you can force it to do this by going down to the "Property Inspector" at the bottom of the screen and choosing "Paragraph" from the list of options. To start a new paragraph, just hit "Enter." Dreamweaver will start a new paragraph for you.

You could also designate the text as a <h1> by choosing "Heading 1" or an <h2> by choosing "Heading 2," and so on.

You can also convert a line of text into an <h1> by placing the cursor on the text and then hitting CTRL + 1 (or Cmd + 1 on Mac). To convert it into an <h2>, hit CTRL + 2 (or Cmd + 2 on a Mac) and so on through all the levels of headings.

Links

To create a link, type the text that you want linked, then select that text with the mouse (or with the keyboard). At this point there are several ways to create a link. The main techniques are explained below.

Note: You only need to use one of these methods at a time! I'm just showing all of them so that you can see what your options are.

Method 1: Go to the Property Inspector and type the link directly in the Link box:

Method 2: Click on the folder icon to the right of the Link box, then choose a file within your web site:

Method 3: Click on the icon that looks like a compass and without letting go, drag it over to the file that you want to link to, then let go of the mouse button:

Method 4: Click on the icon that looks like a chain link in the "Insert bar" (make sure that "Common" is selected in the drop-down list). This will pop up a dialogue box that allows you to create a link. It also shows a few more options, such as "Target," "Title," "Access key," and "Tab index." Ignore these for now. They'll come up in future lessons.

Dreamweaver will automatically create correct links to files, no matter where they are in the web site or in the file structure. This will be good news to those of you who had difficulties creating links to files in parent and child folders. Dreamweaver does this for you. Still, it's helpful to know to create these links by hand. It can help you troubleshoot problems that may occur.

Email links

You can create email links by selecting the text you want to link in the main document area of Dreamweaver, then typing the mailto link directly into the link box.

Remember, though, that spammers love to search the internet for email addresses.

Another way to add an email link is to click on the email icon in the "Insert bar" (in the "Common" mode). This will prompt you to enter both the link text and the email address, so you don't need to type the link text before clicking on the icon.

"Same-Page Links" and Anchors

"Same-page-links" are links that jump to another spot on the same page. You can type the link text in the link box of the Property inspector.

Note: Don't forget to include the pound sign when typing same-page links.

Remember that you have to also create an anchor (link destination) to link to. The anchor name and the link must match. To create an anchor, click on the anchor icon in the "Insert bar." This will pop up a window asking you to enter the name of your anchor.

When you do this, Dreamweaver inserts both a name attribute and an id attribute. You will also see a small anchor icon at the spot where the anchor was inserted.

Images

To insert an image, click on the image icon in the "Insert bar" (above the document toolbar). This will prompt you to find an image within your web site. If you have the accessibility features enabled, it will also prompt you for the "Alternate text" (alt attribute) and for a "Long description."

Type some alternate text, but don't worry about entering a long description. The long description is an optional attribute that we'll discuss later.

Dreamweaver will automatically enter the image height and width for you. It will also automatically create the src attribute and fill it in appropriately.

Unordered and Ordered Lists

To create an unordered (bulleted) list, click on the icon of a bulleted list in the Property Inspector.
To create a list item, type some text after the bullet. To create a new list item, hit the "Enter" key.
To end a list, hit "Enter" twice, or else click on the bulleted list icon again.
To create a sub-list, or a list within a list, use the tab key. This will indent the list and also create a new <ul> tag which is literally a new list within the first list. When you've typed all of your sublist items and you want to return back to the main level of a list to type more items on that level, use shift + tab. This will "outdent" the text back to the original list margin location. You can also use the indent and outdent buttons in the Property Inspector.
To create an ordered (numbered) list, you do the same things, except that you click on the icon of a numbered list , not on the icon of a bulleted list.

Definition Lists

Definition lists are not created in quite the same way as unordered or ordered lists. To create a definition list, type the text you want to define then go up to the "Insert bar" and choose "Text" from the drop down list. Once this option is selected, click on the definition list icon to turn the text into a definition list. Then go to the end of the line and hit "Enter." This should appear slightly indented. This is where you type the definition of the term. If you hit "Enter" again, this will create a new term. Type the new term. Hitting "Enter" at the end of this term will create a new definition. Look in the code to make sure the definition list is being created correctly. Sometimes Dreamweaver loses track of where things are supposed to go in definition lists.

Tables

To create a table in Dreamweaver, go to the "Insert bar" and make sure that the "Common" option is selected in the drop-down list. Click on the table icon . This will pop up a dialogue box like the one below:

Rows & Columns: Type in the number of rows and columns that you expect your table to have. If you aren't sure how many rows or columns you'll have, make your best guess. You can change this later.
Width: You can specify a width in terms of pixels or a percentage of the page width.
Border: Most data tables have a border of 1, but you can choose any border that works for your situation.
Cell padding: This is the "white space" around text within a table cell. The default settings of most browsers look fine, so you probably don't need to change this, but you can change it if you like. A table with cell padding set to 0 will look very crowded.
Cell Spacing: This is the width of the space in between table cells. Most of the time you can leave this blank.
Headers: Select the correct option for your table headers. You can choose no headers, left headers only, top headers only, or headers on both the left and the top. For the purposes of this class, you should never create a table with no headers. Some web designers create tables without headers for use in formatting web content, but this is not good practice. Tables should be used for data, and data tables need headers.
Caption: You can type a caption if you want. The caption will show up at the top of the table in the default configuration, or you can change the location using the drop-down list to "Align caption."
Summary: You can leave the "summary" box empty. It has some uses with regard to accessibility, but we'll cover those later.

When you select the "OK" button, Dreamweaver will create the table that you told it to create.

When typing data in the cells, you can use the tab key to go from one cell to the next.

Editing Tables

Creating an extra row: What happens when you've already created a table with three columns and three rows, but you realize that you now need an extra row? The easiest way to create an extra row is to go to the last cell in the table and hit the tab key.

Other edits: You can also edit the table in the Property Inspector, but to do this you first have to click on the borders of the table or else drag the mouse to select the whole table. This will cause the options in the Property Inspector to change, providing you with ways to do a number of tasks such as add extra rows or columns, change the width of the table, add or remove borders, and so on. The "W" stands for "width" and the "H" stands for "height."

Another way to edit table properties is to right-click in the table itself (or use option + click on a Mac), then go to "Table" in the menu and choose from the options available there.

Line Breaks

To create a line break (<br />) in Dreamweaver, type shift + Enter. This is different from just hitting the Enter key, which creates a new paragraph.

Remember that line breaks are used to divide block level elements such as paragraphs, headings, list items, table cells, etc. Don't insert a bunch of line breaks in a row. If you need to create extra blank space on the page, either start a new paragraph or use style sheets.

Horizontal Rules

To create a horizontal rule (<hr />)—which is a horizontal "separator" line—in Dreamweaver, go to the "Insert Bar" and select "HTML" from the drop down list. Then click on the horizontal rule icon .

Acronyms and Abbreviations

You can create acronyms from the "Text" mode of the "Insert bar" near the top of the screen. First type the word that you're going to designate as an acronym, for example the term "XHTML." Then click on the acronym icon . This will prompt you to enter the expansion of the acronym. It will also ask you to specify the language of the acronym, though this is optional.

To designate it as an acronym in the English language, type en. Common language codes include these:

Language	Code
English	en
French	fr
Spanish	es
German	de
Russian	ru
Italian	it
Latin	la
Japanese	ja
Chinese	zh
Thai	ti
Korean	ko

Other language codes are available at http://www.unicode.org/onlinedat/languages.html (use the ISO codes)

You can insert abbreviation tags by first typing the abbreviation and then clicking on the abbreviation icon in the "Insert menu." Dreamweaver will show you a dialogue box very similar to the one used for creating acronyms.

Special Characters/HTML Entities

When you type quotation marks (") or ampersands (&) in the Document window of Dreamweaver, something happens in the background. Go ahead and try it. Now look at the source code. You'll see that the quotation marks turned into a mess of characters that look like this: " Similarly, your ampersand turned into this: & That's strange, you may say. Why did Dreamweaver do that?

Dreamweaver did that because it's trying to make sure that the quotation marks and ampersands in the text don't get confused with the same characters in the HTML code. Keep in mind that when you type attributes, you use quotation marks, as seen in the example below (the attributes are src, alt, height, and width):

<img src="image.jpg" alt="Mountains" height="30" width="30 />

If you insert quotation marks in other places in the document, it's possible that these quotation marks could be confused with attributes in the code. Using special characters in the code helps to keep everything separate and oraganized.

Examples of special characters that require the use of "HTML entities" as they're often called include non-English characters with accent marks or other notation (such as á, è, é, í, Ó, ú, ñ, 1º, ç, ¿), and other typographic symbols (such as ‡, ‰, •, –, —, ©, ®, ™, §)

Dreamweaver lets you access some common HTML entities in the "Insert bar." To do this:

Select "Text" from the drop-down menu.
Click on the special characters icon .
Now you will see a dialogue box pop up showing you many of the characters you can add. Choose the character that you're looking for by clicking on it, then click "OK."

You should now see the regular-looking HTML entity in the main document window and the funny-looking one in the code. People who view your web page will only see the regular-looking version (unless they look at the source code).

Meta Data

We haven't talked a whole lot about meta data yet, except to mention that they exist. As a reminder, meta data are invisible bits of information that explain something about the web content. Usually meta data are used to help computers (as opposed to humans) find information. Two common meta elements are the keywords and description. You can insert meta data into your content without going into the code by going to the "Insert bar," selecting "HTML" from the drop-down list, and clicking on the meta data icon .

Note: If you click on the little triangle to the right of the icon, you can see a drop-down list of meta elements that Dreamweaver can help you create.

The world of meta data can ge quite complex and technical. We won't go into those kinds of details in this class.

Snippets

You're probably thinking, "Snippets? Ha ha. That's funny. They don't really call them snippets, do they? What's a snippet anyway?"

To answer your questions (even if those weren't really your questions): 1) Yes, they really do call them snippets, and 2) snippets are little pieces of HTML that you save so that you can re-use them later. They help you save time because you just insert the snippet of code into the document wherever you need to, without having to retype the whole thing.

Dreamweaver comes with some pre-fabricated snippets in the snippet panel. The snippet window is in the same place as your Files panel, except that you have to click on the snippet tab to open it.

As far as the pre-fabricated snippets are concerned, most of them aren't particularly useful because they don't use the best coding practices. If you're curious, the folder called "accessible" contains many of the same things as the other folders, except that the snippets in the "accessible" folder are supposedly more accessible to people with disabilities. As I said, these aren't particularly useful in their current state. However, the general concept can be very useful when you create your own customized snippets.

You can learn what snippets do by opening up the snippets folders then double-clicking on the snippets themselves. When you do this, the snippet will be inserted into your web document. Snippets can save you a lot of typing if you use them wisely.

Some developers have elaborate collections of snippets, with long selections of programmig code. Programmers are the ones most likely to find snippets useful, but they can be useful non-programmers as well. I use them for various things, but my most commonly used snippets are acronyms.

To create a new snippet: Go to the bottom of the snippet panel and click on the new snippet icon . This will cause a pop-up dialogue box to appear.

Give your snippet a name.
The description is optional.
Decide whether you want your snippet to wrap around a piece of text in your document or whether you want to just insert the whole thing as a single piece of code. With acronyms, I find it more useful to first type the text then use a snippet to wrap the text with <acronym> tags. You can do it either way though.
Decide whether you want the preview to show up in Design mode or in Code mode. Since acronyms are invisible in the Design mode, it makes sense to have the preview show up in Code mode.

Note: The snippet preview area is right below the snippet tab and right above the snippet folders. If you don't see anything there, you might have to drag the separating line down to see the preview.

A word of caution about snippets: Don't use snippets to create your site templates. For example, don't create your navigation system or the footer on your web site using snippets (even though the pre-fabricated snippets include these types of theings). It's better to do those things with some other technique. We'll talk more about those techniques later, but the main difference between the snippets and these other things is that snippets don't get updated across your entire site, whereas other methods do. For example, if you change the logo in your design, and you want to enact that change across the entire site, other methods can help you do that, and they do it very well. Snippets can't do that. One instance of a snippet is not connected to any other instance of the same snippet. If you insert an acronym through the snippet panel on one page, and insert that same acronym on a different page, these two instances of the same acronym aren't connected at all. If you ever want to update all instances of a snippet across the entire site, you'll have to do that by hand.

Snippets have their place, and all are useful, it's just that it's best not to use them for creating Templates. We'll take a close look at Templates in a future lesson.

Working in the Code View

One thing to keep in mind when using Dreamweaver is that you can edit the code either in the Design View or in the Code View. It doesn't matter which view you use. Both views edit the same content and produce the same source code. It's nice to be able to use Dreamweaver's Design View when working with visual layouts, but there are times when you have to get into the code view to tweak things. That's why I made sure that you knew that basics of HTML before allowing you to use the Dreamweaver interface. Dreamweaver is a great tool, but if you're not careful, it will do things that you don't want it to do, maybe without you even knowing it.

Dreamweaver has an excellent code editor. It has a lot of features that simple text editors don't have, such as the ability to prompt you with code suggestions as you type. As soon as you type the opening tag symbol (<) Dreamweaver provides you with a drop-down list of possible tags. As you continue typing, the list narrows. You can save some time typing by hitting "Enter" as soon as the correct term is highlighted, or by using the arrow keys to scroll through the list of tags.

Dreamweaver 8 can also save you time by closing tags for you. (Earlier versions of Dreamweaver don't do this.) As soon as you type "</", which is the beginning of a closing tag, Dreamweaver automatically finishes the tag for you with whatever tag is still left open. For example, if you had written "<h1>Here I am", then as soon as you type "</" Dreamweaver finishes the phrase with the full closing tag: </h1>. Sometimes this feature can be annoying too, when Dreamweaver closes a tag that you didn't want to close yet, but for the most part Dreamweaver does a good job of guessing the correct tag to close.

There's a lot more to learn about the text editing features in Dreamweaver's code view. If you are interested in learning more, try the Dreamweaver "Help" feature. It can provide extra insights.

Web Accessibility & Design

Login

Reset password

Creating Content in Dreamweaver

Contents