Web Courses Academy Blog

Dream Weaver Tutorial – Part 1 HTML

Author: Carl Heaton
He is our senior instructor and originally from Manchester UK. Carl teaches our Web Design and Online Marketing Courses.
header-dream-weaver-tutorial
Quick jump to topics
Sharing is caring

Known officially as Adobe Dreamweaver* (with no space), this great program has been a favourite of mine for a while now (10 years). Let me share how I use it, as a web designer, and hopefully convince the nay sayers through this Dream weaver tutorial that it is a wonderful tool for creating clean standard code.


dream weaver tutorial

Known officially as Adobe Dreamweaver* (with no space), this great program has been a favourite of mine for a while now (10 years). Let me share how I use it, as a web designer, and hopefully convince the nay sayers that it is a wonderful tool for creating clean standard code.

In this tutorial we will be creating a one page website, it will look pretty simple but the aim is to show you how easy and efficient it is to create HTML / CSS in Dream weaver.

*not, we will refer to Dreamweaver as Dream Weaver, reason is we are doing a little test on miss spellings which will be covered in a futue article.

Here is What We Are Creating

We are using HTML 5 nowadays so you`ll notice some new tags such as <header>, <article> and <footer>. If you are not using the latest Dream weaver then these tags will now show up with the code hints, so just write them in yourself.

Click here for the full version in HTML & CSS.

Dream weaver tutorial

Source Files

The zip file contains that final post and also all the files you need to complete this tutorial.

Download PSD (2 Meg) – Download Source Files (Zip) (2 Meg) – Completed Page

Dream weaver tutorial – Getting Started with Dream weaver

For this tutorials we will assume you have Dream Weaver CS5+ (at the time of writing CS5.5 is the current version).

As soon as you open Dream Weaver you will see the welcome screen, this is split into three sections. Recent items where you can quickly open what you was previously working on, Create New (choose from a number of different files to create) and Top Features. I advise taking a look at the top features as Adobe has done a great job at showing off as to what Dream Weaver is capable of.

Click HTML from the Create New column and then look at the top right and click Split.

Dream Weaver Interface

Dream weaver interface

One of the great features of Dream weaver is the split view, I know many other programs have it, but I have found this to work the best.

For this tutorial we will use the Classic workspace layout.

Select Windows > Workspace Layout > Classic

Keep an Eye on Your Code with Split View

Split view in dream weaver

If you want to get the most out of Dream weaver then use both the code and design view. The design view is designed to quickly allow you to create content. For example as I write this article, I am doing so in design view but I always keep an eye on the code that it creates. Never do all your work just in design view.

Save Time With The Properties Bar

Properties bar

Unordered lists take time to write in HTML so what I do is write each list item, hit enter, highlight the list and click the bullet list button.

Writing <strong></strong> around some text takes time, so what I do is highlight the text and click the bold button.

Creating links takes time in HTML, so what I do is highlight the text and put the destination URL into the Link section of the properties bar.

In short, using the properties bar can really save time

Dream weaver tutorial – Start a New Project

Websites are made up for a number of files and Dream weaver does a great job of helping you organise these. Say for example you have a 50 page website and you decide that contact-our-company.html is a little long and contact.html is much better. Should you change the filename, then the other 50 pages linking to it will break, here is where Dream Weaver saves the day by asking “Update Links?”, well yes please Mr D.

New Site

To do this you must first create a new site.

  1. Create a new folder on your desktop called Dream Weaver Tutorial.
  2. Copy the images folder from the source files into this new folder
  3. Go to the top menu > click Site > New Site. Give the project a name.
  4. Click the folder icon and go to the Dream Weaver Tutorial folder on your desktop, click Choose (Mac) or Select (PC)

You will now see all the files within that folder on the right in the Files panel.

Dream weaver tutorial – How To Write HTML with Dream Weaver

Go to File > New > HTML > look bottom right for DocType > HTML 5

New HTML 5

We will start by creating the sections and then fill out the content.

Note, when you open a HTML tag as soon as you do “</”, Dream Weaver will close the tag for you. This takes some getting used to but helps speed up your coding slightly.

You will notice that a lot of what you need to start a HTML document is now ready for you.

Start by adding “Post Title – Category – Site Name” between the <title></title> tags.

<body>

Next write your structural elements.

 

 

 

<header>

We simply need the WCB logo and the name. With this site we want it to be center aligned so we will put a nice container div around it.

 

Web Courses Bangkok

 

 

<section>

First lets look at the top section, we`ll do the main content below. Also I`d like to point out that todays dummy text is kindly supplied by Vegan Ipsum

Whenever you are writing HTML for images let Dreamweaver help you. As soon as you hit the space bar after the tag “<img” it will start to help you, quickly hit ‘w’ and enter twice, boom! You have your width, ‘h’ height and lastly alt

Guar mooli water chestnut, yacón ensete swede salsify zucchini earthnut pea new zealand spinach. Cauliflower carrot dandelion fat hen.

 

Brussels sprout onion taro broadleaf arrowhead avocado mustard! Carrot chickweed prussian asparagus, ginger cauliflower kuka golden samphire. Kuka garden rocket spring onion; onion tomato jerusalem artichoke watercress polk avocado.

 

Makes Coding Fun

 

Brussels sprout onion taro broadleaf arrowhead avocado mustard! Carrot chickweed prussian asparagus, ginger cauliflower kuka golden samphire. Kuka garden rocket spring onion; onion tomato jerusalem artichoke watercress polk avocado.

 

Click here to find out more about our Dreamweaver Courses

 

<footer>

Almost there, just need to add the three images and links and we are done for the HTML.

In the design we want the footer to extend right across the bottom, so the <footer> is outside of the main <div id=”container”>

 

css tutorial dream weaver

HTML Complete CSS Next

Great, well done on completing Part 1 of the Dream weaver tutorial. Now we have all the elements in place we can reference the Photoshop file and create the CSS. With CSS Dreamweaver really shows its special powers to help you code better and faster.

Click here for Part 2 CSS

 

More great articles
There is more where this came from
Join our monthly newsletter packed with course dates, latest articles, free resources and job opportunities
Promise to only send you useful interesting newsletters once a month.