Adding Content

We’re finally ready to start adding content to our Site! This page is perhaps more tedious than it needs to be, but please stick with it! The theory laid down is important for later subjects.

The Dreamweaver Method

On the previous page, we asked you to experiment a bit with Dreamweaver by posing that you

Click thumbnail to view full image.

see if you can’t figure out how to insert an ordered list like the one [to the right] before continuing.

So how do we go about doing this? The key is to follow “the Dreamweaver method”:

1. Enter the content without regard to formatting,
2. Select the elements whose formatting you wish to change, then
3. Change the formatting using the Properties Inspector.

This is a general approach to getting “correct” results in Dreamweaver. Essentially its philosophy is that content is paramount and definition is secondary. Or, “you are more important than what you do.” The you is the content; the what you do are the properties of that content, visible and controlled via the Properties Inspector.

How to Create a List

The following screencast video demonstrates how to insert this content:

(Note that although the screencast is shot using the PC version of Dreamweaver, there is little distinction between the PC version and the Mac version.)

Entering Text: More on Paragraph Blocks

As we mentioned on the Getting Started page, Dreamweaver’s “logical unit” for content is the Paragraph Block. A Paragraph Block is considered to be a single cohesive group of content.

To create a new Paragraph Block hit the Enter key. This behavior is not what you might expect: it’s not how most word processors handle the Enter key - they are likely to simply break the line as opposed to creating a new paragraph block.

(You can break the line by holding down Shift while hitting Enter.)

To the uninitiated, this may seem like a distinction without a difference: how does a line-break differ from a separation of Paragraph Blocks? The two screen shots below illustrate the difference.

The distinction visually between these two versions is about a 12-point-high bit of whitespace between the lines in the version with Paragraph Blocks while there is no space between the lines in the version with line breaks. The important distinction, however, is the meaning of the two versions:

When writing a paper, a break in the paragraph is used to separate ideas or transition subjects while a break in the line is purely a formatting issue: the line is too long, perhaps, for the page. This is the same distinction made by Dreamweaver. Use Paragraph Blocks to group together paragraphs (logically connected units) on the page; use line breaks to break the line (as in the case of lyrics or lines of a poem).

Paragraph Blocks and the Properties Inspector

Remember from our discussion on the Dreamweaver Interface that Paragraph Blocks are considered “active” in the eyes of the Properties Inspector when the cursor is inside them. This is opposed to text inside of a particular Paragraph Block-text inside of a Paragraph Block is active when it is highlighted.

Changing Existing Properties With the Properties Inspector

The observant viewer will notice that the screenshot depicts an ordered list while the screencast video depicts an unordered list:

The finished product at the end of the screencast. Click thumbnail to view full image.

(The difference being that an unordered list uses “discs” as bullets while an ordered list uses numbers as bullets.)

While the process for creating an ordered list is the same as creating an unordered list (except for pressing the “Ordered List” button instead), converting between the two formats isn’t so obvious.

Again, we refer back to “the Dreamweaver method”:

1. Enter the content without regard to formatting,
2. Select the elements whose formatting you wish to change, then
3. Change the formatting using the Properties Inspector.

Notice, however, that the first step, Enter…, is already done. So then how to change existing content in Dreamweaver is simply a matter of following steps (2) and (3) from the above:

1. Step 1

   Select the text whose properties you wish to change, and then

   
   

2. Step 2

   Change the desired properties in the Properties Inspector.

Inserting Headings and Links Using the Properties Inspector

We can do a lot more with the Properties Inspector than simply insert and change lists: we can change the meaning of a whole manner of content. Try creating the following document in Dreamewaver using only the Design View and the Properties Inspector:

Click thumbnail to view full image.

Do not simply make the “Optimus vs. Amazon” text large and bold. The important thing about this text is that it is a Header. Rather, make it a “Heading 1” by changing its Paragraph Block’s “Format” Property. Also make the text “Amazon” link to, say, http://amazon.com/.

The Solution

Again following “the Dreamweaver Method” from the first section on this page, we

1. Step 1

   Create the content without regard to its properties, hitting the Enter key after “Optimus vs. Amazon” to create a new Paragraph Block for the text proceeding it. Then we

   
   

2. Step 2

   Select the content whose properties we wish to change. In this case, we first wish to change the “Optimus vs. Amazon” line into a heading.

   Being a heading or simply a paragraph text is a property of the entire Paragraph Block, not certain elements of it. So we simply put the cursor in the first Paragraph Block and select “Heading 1” from the “Format” dropdown in the Properties Inspector. This defaults to “Paragraph” for all Paragraph Blocks.

   Note that a Paragraph Block is always a Paragraph Block. It may, however, have a Format of a Heading or a List Item, etc. The term “Paragraph Block”, then, is somewhat of a misnomer. It might better be called a “Block.” We’ll continue to call these elements Paragraph Blocks, however.

   The Format of a Paragraph Block defines how that Paragraph Block relates to the rest of the page as a whole.

3. Select the text to turn into a link.
   Change its Link Property in the Properties Inspector.

   Now we’ve made the “Optimus vs. Amazon” Paragraph Block into a “Heading 1.” We’ve also made the “Battle of the Primes” text italicized. Now we’d like to make the text “Amazon” into a Link.

   It turns out that this is something that can be done with the Properties Inspector. That is, the “Link” is the Property of text (or other content such as images) that tells the browser to redirect the user to another page when the text is clicked by the user. Thus, we can highlight the text we want to make into a link and simply change its “Link” Property in the Properties Inspector to the address of the page to which we’d like our text to link.

   The “Target” Property only exists when there is something in the Link Property. The Target allows you specify the window in which a link will open Selecting a Target of “_blank” will make the link open in a new window. The other Targets in this dropdown have to deal with HTML frames and are beyond the scope of this curriculum.

   You can “unlink” content (make it into normal content and not sensitive to moues-clicks) at any time by simply deleting its Link property in the Properties Inspector.

   The moral of the story is that the Dreamweaver Method, as mentioned at the top of this page, allows you to create web content by first inserting your content as “non-web” content and to then “webify” it by changing its various Properties in the Properties Inspector.

   When you are inserting links within your Pages, it is important to remember how paths on the internet work. This is discussed at some length in the File Referencing section page of the Web Publishing at the UW online curriculum.

Inserting Images and Other Content

The previous sections covered how to change the properties of existing text; they didn’t cover how to insert new content.

Adding new content in Dreamweaver is quite simple: you’ve already experienced how to insert text. Inserting other kinds of content is equally simple. As you might have imagined, inserting content such as images simply involves using the Insert Window that we discussed on the Interface page.

When using the Insert Window, Dreamweaver asks you to describe the content you’re adding in one or more dialogue boxes. Mostly these are self-explanatory. We’ll go over how to add an image:

1. 

   Save the image you want to add to your Desktop (or some other easy-to-find location). We’ll be using the image at the right in our example. If you are on a Mac or a PC, you can drag the image onto your desktop directly from this site if you are using a modern web browser.

   
   

2. Enter the text around where you want the image to be in the Design View, and place your cursor where you want the image to be placed:

   Click thumbnail to view full image.

   Notice that we’re going to be putting the image in its own Paragraph Block. This is not a requirement-you could put the image directly inline with the rest of the text (perhaps surrounded by line breaks, as discussed at the beginning of this page).

3. 

   Remember that the Insert Image button actually has several “sub” buttons to insert various image-related elements into the page. Click the downward-pointing arrow next to the Insert Image button (depicted to the right) and hold the mouse down. Let go on the “Image” item on the menu that appears:

   

4. Find the image on your computer you wish to insert:

   Click thumbnail to view full image.

   There is an important point to make about the path of your image here. If you get a dialogue box like the following

   Click thumbnail to view full image.

   then you must click “Yes” to ensure the image gets copied to your Site’s folder and uploaded with your page. If you were to click “No”, then you are in effect relying on all the visitors to your site also having that same image on their desktop, which is probably not a likely event. In the next dialogue box, the “Copy File As” dialogue box, you are given the option to copy the image to your Site’s root folder as a different file name. This allows you to have a file on your desktop called “DSC009334.jpg”, for example, and to add it to your site as “dudeigotadell.jpg” or any other easier-to-read name.

5. Enter the Alternate text for your image in the next dialogue box:

   Click thumbnail to view full image.

   The Alternate text is sort of a textual backup of the image: if the image can’t be found (e.g. you delete the image) or if it can’t be displayed (the user’s screen doesn’t display images or the user is using a screen-reading program), then the alternate text will be used instead. You should describe the image briefly in the Alternate text field. Accessibility standards say that if an image contributes to the content of the page (i.e. it’s not used solely for visuals or layout), then it must have a relevant Alternate text field.

   The Long description is a URL (web address) of a page describing the image in more detail. This is useful if the image is not summarized easily in a sentence or two. Not all images are required to have a Long description.

   Once you have filed this information out, select “OK,” and the image will be inserted into the page:

   Click thumbnail to view full image.

Editing Image Properties

Now that we have an image on the page, now we want to manipulate it in some way: maybe change its size, maybe make it into a link; maybe something else. As you probably guessed, this again comes back to using our good friend, the Properties Inspector.

Remember from our discussion on the Properties Inspector in our discussion on the Dreamweaver Interface that in order to view the properties of an image in the Properties Inspector, all we have to do is click on the image whose properties we wish to edit. Upon doing so, Dreamweaver gives the image a black border with black boxes at the image’s corners and midway between them:

Click thumbnail to view full image.

Perhaps more importantly, however, is the difference in the Properties Inspector, which, as we recall, is context sensitive and thus now displays the various properties that pertain to the selected image:

Click thumbnail to view full image.

In light of our discussion on making text into a link, how might we make this image into a link? That is, how do we make this image “clickable” so that when a user clicks on it, he or she is taken to another page?

The answer, of course, is to simply change the image’s Link property in the Properties Inspector. You’ll notice that as soon as you do this and move your cursor of the image that the image will be given a thick blue border. This is the default style for how a linked image should be displayed. You can manually get rid of this border by setting the Border property to “0” in the Properties Inspector.

What’s Next

There are of course other kinds of elements to be inserted in a Web Site, and we’ll cover some more of them as they come up. Before we continue much further developing our site, however, we’d like to take a bit of a detour and talk about how to save your work and upload it onto your public server. This and more covered on our next page, Saving, Uploading, and Viewing

Try it Out

Before continuing to the next page, try to reproduce our example (without making the image into a link) without referring back to this tutorial. When you are finished save this file as “index.html” and continue to the next page.