Placing page content in Adobe Dreamweaver

So far in the tutorial series of building a website 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 website. 

In order to understand how to build a website properly, you first have to understand some basics of Search Engine Optimization, or maybe you have to understand some basics of website 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 websites 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:
  1. Copy the text from the Lorem Ipsum Generator
  2. Create a new Dreamweaver document (Control – N)
  3. Switch to Code View
  4. Select All (Control-A) and Cut (Control-X) it
  5. Paste the text from the Lorem Ipsum Generator
  6. Select All (Control-A) and Copy (Control-C) it
  7. 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.
thisismyurl.com/wp-content/uploads/2008/11/format.jpg" rel="lightbox[roadtrip]">format Placing page content in Adobe Dreamweaver imageTake 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.
listitems Placing page content in Adobe Dreamweaver imageOnce 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.
picture 6 300x154 Placing page content in Adobe Dreamweaver imageNow 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 website 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.
  1. Preparing a website in Adobe Dreamweaver
  2. Building your first Dreamweaver Template file
  3. Structuring your website with Adobe Dreamweaver
  4. Improving the common elements in Dreamweaver
  5. Placing page content in Adobe Dreamweaver
  6. Hyper linking in Dreamweaver
  7. Working with Images in Adobe Dreamweaver
  8. Adding Cascading Style Sheets with Dreamweaver
  9. Putting your website on a remote web server with Adobe Dreamweaver
  10. Adding Google Analytics to your Dreamweaver Template

4 Responses to “Placing page content in Adobe Dreamweaver”

  1. Document Structure vs. Document Appearance, the power of CSS :: Christopher Ross says:

    [...] tags. For those of you who don’t know much about document heirarcy I wrote a whole piece on document structure in Dreamweaver a while back but I’ll explain the basics for you here. A document can have only one main [...]

  2. Mark says:

    Hi

    I am unable to follow links 6 to 10 – Are they still active, or am I not looking in the right place.

    The 1st lot have been great in getting me started
    Thanks
    Mark

  3. Ron says:

    I have a few rss feed headlines on my home page, but I would like to click on one of those links and go to one of MY pages where the rest of the rss story automatically gets populated.

    what would this process be called.

Leave a Reply