Placing Page Content in Adobe Dreamweaver

Welcome to my blog, please feel free to subscribe to my RSS feed or leave a comment.

So far in the tutorial series of building a web site in Dreamweaver, I’ve focused a lot on the Template including the header and footer elements but now I want to take a bit of time and look at the content area of a web site.

In order to understand how to build a web site properly, you first have to understand some basics of Search Engine Optimization, or maybe you have to understand some basics of web site publishing to be good at SEO work but either way, publishing web content and optimizing your web pages is interconnected.

A web page needs a specific structure, just like a book needs chapters and paragraphs so does a web page. Some people forget the first real use of the web was for academic papers, today the structure of a web document is still very connected to it’s origins and there are some pretty basic tags used to format pages. Let’s take a look at the basic building blocks of a web page and how to use them properly before we begin placing text in our documents.

Headings

xHTML allows for up to six headings on a page, each should be used in a hierarchal structure starting with the most important and proceeding to the lowest value.

<h1> - There should only every be one <h1> tag on a web page, the level one heading is most often also the title of the document and is extremely important both in standardization practices and search engine optimization
<h2> … <h6> - Used as hierarchal structure tags, the lower headings are used to identify the importance of each level of the document. <h2> contains content more important than <h3> for example

Lists

Web pages can also contain lists, as we saw in our earlier lesson about menus. Lists come in two flavors, each must contain list items (<li>) to be used correcty.

<ul> - An unordered list, most commonly presented with a bullet character (•)
<ol> - An ordered list, most commonly presented with a numbered value (1,2,3,…)

Paragraphs

The basic building block of a web page, the paragraph (<p>) tag defines a paragraph.

Example of a Page Structure

Because web page content is structured in a standard manner, we can demonstrate that structure in a simple document tree such as:

<h1>
<p>
<h2>
<p>
<h3>
<p>
<h2>
<p>
<ul>
<p>
<p>

This document structure demonstrates an easy to understand, mechanical overview of the document but also acts to help new web publishers understand that web page publishing and web page design are two different things, we’ll get to design later.

Working in Dreamweaver

Now that we have a basic understanding of how to create web page content, we need to write something for our pages. To save time, I’ll let you into another publisher trick. Using Lorem Ipsum to generate gibberish text for web sites allows us to save time by filling in our content. Later, when we know what we want to place on each page we can go back and fill in the real text.

For now, pop over to the Lorem Ipsum generator and create five random paragraphs of text. Windows users will want to take an extra step here … when you copy text of the Internet, Windows tries to also copy the xHTML tags. Let’s get rid of the excess content:

Copy the text from the Lorem Ipsum Generator
Create a new Dreamweaver document (Control - N)
Switch to Code View
Select All (Control-A) and Cut (Control-X) it
Paste the text from the Lorem Ipsum Generator
Select All (Control-A) and Copy (Control-C) it
Close the new document

What this did was created all the special codes, and leaves you with just the plain text.

Next, open the about.html file in your Dreamweaver File document and ensure you’re in Design View. Remember when we created the template we created an Editable Region named Content? In that area, Dreamweaver placed the word Content, now I want you to select the word and Paste (Control-V) the Lorem Ipsum text into place. This will replace the existing text on this page with the content from the generator.

Take a bit of time and format the text using only the text format tool on your Properties toolbar. This will allow you to apply <p> and <h1> … <h6> tags to your Lorem Ipsum text.

Once you’ve got the hang of adding some <p> and <h1>, <h2> tags to your document, try adding an unordered list (<ul>) and some list items (<li>) to your page. Notice that Dreamweaver automatically creates the list items for you in an ordered or unordered list.

Now that you have an understanding of how to create paragraphs, headings and lists for your web page content take a bit of time and add real text to your web site pages for all for of the pages. Before you add anything however, as yourself where the content belongs and try to understand that every element needs to belong to a document hierarchy.

One of the best documents to see a document hierarchy demonstrated in is a traditional resume, take a few minutes to study this example of a document structure:

<h1> - Christopher Ross
<h2> - Career Objectives
<p> - A paragraph about my objectives
<h2> - Previous Employment
<ol><li> - My employers
<h2> - Education
<ol><li> - Schools

Once you appreciate the structure of a document, creating HTML pages is easy.

This tutorial is part four in a ten part series.

Preparing a web site in Adobe Dreamweaver
Building your first Dreamweaver Template file
Structuring your web site with Adobe Dreamweaver
Improving the common elements in Dreamweaver
Placing page content in Adobe Dreamweaver
Hyper linking and image management in Dreamweaver
Optimizing web sites in Adobe Dreamweaver
Adding Cascading Style Sheets with Dreamweaver
Putting your web site on a remote web server with Adobe Dreamweaver
Adding Google Analytics to your Dreamweaver Template

About the Author

About the author.
Thanks for taking the time to read my blog. If you don't already know me, my name is Christopher Ross and I'm a web evangelist living in Fredericton Canada. When I'm not writing about the Internet, I'm helping small businesses improve their search engine performance or building better WordPress web sites for clients.

Please feel free to leave a comment below, or contact me if you have any questions.

2 Comments

| comments rss [?] | trackback uri [?]

2 Responses to “Placing Page Content in Adobe Dreamweaver”

Pingback: Document Structure vs. Document Appearance, the power of CSS :: Christopher Ross
Pingback: Structuring your web site with Adobe Dreamweaver :: Christopher Ross

Recent Comments

Donace: @ Christopher I agree wholeheartedly all they need is one page; possibly some nice pictures :p I’m like...
Electric cars: Very nice post and I gain much more info from this post about, “How to useful my site for my...
Internet Marketing Strategies: That is really bad business, with the Internet making the world such a small place,...
Adam Love: wtf, that was prety blunt don’t you think?
George Matthews: well that’s effective, know of an easy way of title casing static sites, other than...
Market Secrets Blogger: At first this one click plugin install worked just fine but now I get the following error:...
Rodney@Blogging with WordPress: Nice work Christopher - not too shabby. You must have some pretty good backlinks....
david forex trading online: Thank you for letting it slide. I know it is annoying when people use keywords as their...
Ikki at SEO Blog: As Mr. forex trading online (I hate it when people don’t put their names on the Name...
David: One more strategy of search engine marketing is to create a buzz about your site in the internet. This can be...

Placing Page Content in Adobe Dreamweaver

Other Posts of Interest

About the Author

2 Comments

2 Responses to “Placing Page Content in Adobe Dreamweaver”

Leave a Reply