Read my latest blog entry: Does your web site help, or hurt your business?.
Subscribe to my RSS Feed or by Email.
  • Home
  • About
  • Services
  • Blog
  • Contact
Christopher Ross Building better web sites, one pixel at a time.

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:
  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.
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.
  1. Preparing a web site in Adobe Dreamweaver
  2. Building your first Dreamweaver Template file
  3. Structuring your web site with Adobe Dreamweaver
  4. Improving the common elements in Dreamweaver
  5. Placing page content in Adobe Dreamweaver
  6. Hyper linking and image management in Dreamweaver
  7. Optimizing web sites in Adobe Dreamweaver
  8. Adding Cascading Style Sheets with Dreamweaver
  9. Putting your web site on a remote web server with Adobe Dreamweaver
  10. Adding Google Analytics to your Dreamweaver Template

Other Posts of Interest

  • Structuring your web site with Adobe Dreamweaver
  • Using CSS to highlight a link
  • Using CSS to disguise a link.
  • How to make a web site look good in multiple browsers.
  • Improving the common elements in Dreamweaver
  • Turning your menu list into menu buttons
  • Adding Rollovers to your HTML without JavaScript
  • Using CSS to build a horizontal menu
  • Cool links for Adobe Dreamweaver
  • How to center content with CSS and HTML
Posted on: Monday, November 10th, 2008
Tags: dreamweaver, html, xhtml
Posted in Learning | | Read more

Did you find this article useful? You're welcome to post a link to this website along with the title but please don't copy the whole article. You can also link back using the following code:

<a http://www.thisismyurl.com/tutorials/placing-page-content-in-adobe-dreamweaver/" rel="bookmark" title="Placing Page Content in Adobe Dreamweaver">Placing Page Content in Adobe Dreamweaver</a>

About the Author

Christopher Ross 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”

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

Leave a Reply

HBO
HBO
Amazon
HBO
Amazon
iTunes
Nimrod Nation
LEGO
iTunes
TrackVia
LEGO - City
HBO
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...
Top Commentators
    © Copyright 2009 Christopher Ross. All rights reserved.
    • Follow my posts:
    • RSS
    • Comments
    • Email
    • Other:
    • Privacy