This tutorial will teach you how to set up your first page in DreamWeaver and the basic elements of the web page.
Level of Difficulty: Beginner
Time: About 10-20 minutes
Requirements: Adobe DreamWeaver
note: you do not need to know anything about HTML. I will go over that.I've noticed that people who make tutorials often went out of my league real quickly when I was trying to learn, and it took forever to find an easy to follow tutorial on DreamWeaver. I hated this, and I know how you feel, so I'll make this extremely simple.
Starting the Web pageOpen up Adobe DreamWeaver.
Something like this should pop up.
Now let's make a new web page. You can either go to File>>New..
Or you can go to Create New>>HTML
A new page will pop up.
Next lets add some coding to the page. Notice that there is no coding on the page, and that's because DreamWeaver's new page is on design view, not code view.
Layout of coding in a web pageWe want to add code right? Let's get there. To get into Code view, go to either:
View>>Code
but I prefer this way.
Some HTML code should show up.
It should look like this:
If you have some knowledge of coding HTML, you can end the tutorial here. The rest is explaining the actual coding of a webpage
Next we're going to edit the code to make it what you want, but first I'll go over the elements of the page, and what everything means.
We're going to use this image as our key.
In this Key:
Basic Document Start - This usually isn't edited, it's for including web pages, usually in PHP/ASP. That's advanced stuff, we'll keep it the same in this tutorial.
Head of the document - This will include all of the head tags, such as javascript, CSS, and the title of the page. This part is mostly used for the effects of the page. We will edit this some.
Body of the document - This includes everything that shows up on the web page, such as text, images, and links. This will be the target of the page.
Adding CodeNow let's make our page interesting! Let's add a little bit of code. First we'll go with the Head of the document.
Document HeadAs you read before, the head is used to make effects on the page, and often for colors and positioning of the page elements, or strips of code, such as images and text.
The first part is the Meta of the web page. Meta is slightly complicated, so I won't get into it, but basically what it does is processes the web page. It helps a search engine know what content is on your page, or what keywords the search engine uses to find your page. It also can redirect your visitors to a new page.
Let's change the title of the web page. Right now it says untitled document. Let's change that to My first web page.
To change the title, look where it says <title>Untitled Document</title>
The < sign means the start of a tag. A tag is what classifies an element in a web page. This element is the title, it's tag is <title>
note: not all elements are like title, some of them have abbreviations inside the tag.The > sign marks the end of the tag. This leads us to what happens inside the tag.
note: Some elements have their content INSIDE the tag. I'll explain that later, it's a lot easier than it sounds.Delete Untitled Document and type in My first web page
After that is the </title>. The </ means the content of that element is finished. Note how it is the < (beginning) one except with a / added. The rest of the end tag is the exact same as the end of the start tag. </title>
Your head code should look like this:
- Code:
-
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My first web page</title>
</head>
Your done with the heading of the page! In another tutorial I might go more in depth on the header, but this is just the basics.
You're almost done with the tutorial!
Now let's move onto the body.
Document BodyThe body of the document displays everything that shows up in your web page. It can show text, flash, images, and anything that you see on any web page on the internet.
First let's add a background color to the page. To add a background color, you must edit the body of the code.
To edit the body of the code, look at the Body of the Document in the key.
See where it says
- Code:
-
<body>
</body>
Well that is where we add all of the coding for the web page.
Remember earlier, when I said that some elements have the content inside the tag? Well here is an example.
The <Body> just means the start of the body tag.
If we want to edit background color, text color, etc, we go to the body tag.
Delete the > in the <Body> tag.
Now hit space, and a little drop down menu will pop up. This is a huge part of Dreamweaver that is incredibly helpful. Let me teach you how to use this. All of these options are parts that you can add to the body tag. Seems like a lot right? That doesn't matter, you'll get used to it. A lot of these options are repeated in different tags, so there aren't TOO many to learn about.
I won't go farther into it than that.
Next let's choose what to add to the body tag. A shortcut to do this faster is to type a few of the first letters of the word we're going to use inside the tag. We're going to use bgcolor to explain what we want to change in the body tag. Type in bg and watch the blue highlighter move. It should go to bgcolor. Just hit enter and it should pop up with bgcolor="" and a drop down box with a bunch of boxes of colors. It's wanting you to set up what your background (bg) color is inside of the body. So let's make the background color gray. I want to pick a dark gray for my website so let's choose the #333333 one. Don't know how to get there?
Look in the drop down box. If it has disappeared, don't worry, just delete the two " in bgcolor="" to make it bgcolor= then add a " to the end to make it bgcolor=" and the drop down box should pop up. The #333333 (dark gray) is this one:
See the one that is highlighted with a white box around it? Scroll over it and a white box similar to that should pop up. Just click.
After the bgcolor=" there should have popped up a #333333". Now, add a > to the end.
Your Body code should look like this:
- Code:
-
<Body bgcolor="#333333">
</body>
Now let's just add a little text to the page, and then we can open it!
Between the
- Code:
-
<body bgcolor="#333333">
and the
- Code:
-
</body>
Type in
Welcome to my first web page!
You're over all code should look like this.
- Code:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My first web page</title>
</head>
<body bgcolor="#333333">
Welcome to my first web page!
</body>
</html>
Now you're done with the web page. Let's open it and check it out!
First, save the page. File>>Save.. or Ctrl-S. I suggest you save it to your desktop.Save it as what ever you want, it doesn't matter.
Now go to your desktop and double click the saved web page.
There's you're web page, and you're done! You've finished my basic HTML tutorial. For any questions, just send me a PM or talk to me in here or the DreamWeaver chat section.