Ultimate Gamers

The Gamer Paradise
 
HomeHome  PortalPortal  FAQFAQ  UsergroupsUsergroups  RegisterRegister  Log in    The Epix Series  Affiliates  

Share | 
 

 The Basics - Setting up Your first page in DreamWeaver by Cabloo

View previous topic View next topic Go down 
AuthorMessage
Cabloo


avatar

Number of posts : 949
Age : 23
Happiness Bar :
0 / 1000 / 100

Favorite Game? : N/A
Registration date : 2008-03-20

Statistics
Gaming Points: 100
Cash: 600$

PostSubject: The Basics - Setting up Your first page in DreamWeaver by Cabloo   Tue Apr 29, 2008 4:01 pm

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 page
Open 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 page
We 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 Code

Now 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 Head
As 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 Body

The 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.
Back to top Go down
View user profile
Cabloo


avatar

Number of posts : 949
Age : 23
Happiness Bar :
0 / 1000 / 100

Favorite Game? : N/A
Registration date : 2008-03-20

Statistics
Gaming Points: 100
Cash: 600$

PostSubject: Re: The Basics - Setting up Your first page in DreamWeaver by Cabloo   Tue Apr 29, 2008 4:02 pm

I'd like to know what everyone thinks ^^
Back to top Go down
View user profile
Spideyford


avatar

Number of posts : 1164
Age : 21
Happiness Bar :
100 / 100100 / 100

Favorite Game? : Counter Strike:Source
Registration date : 2008-04-05

Statistics
Gaming Points: 5
Cash: 1000$

PostSubject: Re: The Basics - Setting up Your first page in DreamWeaver by Cabloo   Wed Apr 30, 2008 6:12 am

Wtf i dont get it Embarassed
Back to top Go down
View user profile
Ğârk_raptör


avatar

Number of posts : 3737
Age : 23
Happiness Bar :
100 / 100100 / 100

Favorite Game? : Left 4 Dead
Group : Rebels
Registration date : 2008-03-20

Statistics
Gaming Points: ∞
Cash: ∞

PostSubject: Re: The Basics - Setting up Your first page in DreamWeaver by Cabloo   Thu May 01, 2008 6:13 pm

rofl. I know you didn't type that and take all those screenshots cabloo

_________________
Battlezone Statistics
Spoiler:
 

Battlezone Stats: W: 1/D: 0/L: 2
Back to top Go down
View user profile http://ultimategamers.darkbb.com/index.htm
Cabloo


avatar

Number of posts : 949
Age : 23
Happiness Bar :
0 / 1000 / 100

Favorite Game? : N/A
Registration date : 2008-03-20

Statistics
Gaming Points: 100
Cash: 600$

PostSubject: Re: The Basics - Setting up Your first page in DreamWeaver by Cabloo   Fri May 02, 2008 2:52 pm

I swear to god I did the whole thing myself. Took me like two days tho. (Not working on it the whole time, but working on it a lot) if u don't believe me, I can make bevels like that one in Fireworks or u can look on the front DreamWeaver page. I blurred it a little, but u can see the words Ultimategamers/index.php and a few other things.

I don't steal work from other sites.
And Spidey, u don't understand it because it's inside DreamWeaver, a program that costs 200 dollars or something like that. Can't remember what we payed for it.

_________________
Signatures:
Spoiler:
 
Back to top Go down
View user profile
seshimazi


avatar

Number of posts : 281
Happiness Bar :
0 / 1000 / 100

Favorite Game? : N/A
Registration date : 2008-05-06

Statistics
Gaming Points: -
Cash: 0$

PostSubject: Re: The Basics - Setting up Your first page in DreamWeaver by Cabloo   Sun May 25, 2008 8:21 am

Lol you might as well just use Notepad since you use Html.
Back to top Go down
View user profile http://www.animefest.motion-forum.net
Cabloo


avatar

Number of posts : 949
Age : 23
Happiness Bar :
0 / 1000 / 100

Favorite Game? : N/A
Registration date : 2008-03-20

Statistics
Gaming Points: 100
Cash: 600$

PostSubject: Re: The Basics - Setting up Your first page in DreamWeaver by Cabloo   Mon May 26, 2008 11:33 am

You can, but Dreamweaver is so much better, and I made this tutorial so people who had Dreamweaver but just hadn't learned it yet could learn it easily.

_________________
Signatures:
Spoiler:
 
Back to top Go down
View user profile
Ğârk_raptör


avatar

Number of posts : 3737
Age : 23
Happiness Bar :
100 / 100100 / 100

Favorite Game? : Left 4 Dead
Group : Rebels
Registration date : 2008-03-20

Statistics
Gaming Points: ∞
Cash: ∞

PostSubject: Re: The Basics - Setting up Your first page in DreamWeaver by Cabloo   Mon May 26, 2008 12:13 pm

notepad is free though

_________________
Battlezone Statistics
Spoiler:
 

Battlezone Stats: W: 1/D: 0/L: 2
Back to top Go down
View user profile http://ultimategamers.darkbb.com/index.htm
Ğârk_raptör


avatar

Number of posts : 3737
Age : 23
Happiness Bar :
100 / 100100 / 100

Favorite Game? : Left 4 Dead
Group : Rebels
Registration date : 2008-03-20

Statistics
Gaming Points: ∞
Cash: ∞

PostSubject: Re: The Basics - Setting up Your first page in DreamWeaver by Cabloo   Mon May 26, 2008 4:00 pm

rofl I just realized I have dreamweaver today

_________________
Battlezone Statistics
Spoiler:
 

Battlezone Stats: W: 1/D: 0/L: 2
Back to top Go down
View user profile http://ultimategamers.darkbb.com/index.htm
Cabloo


avatar

Number of posts : 949
Age : 23
Happiness Bar :
0 / 1000 / 100

Favorite Game? : N/A
Registration date : 2008-03-20

Statistics
Gaming Points: 100
Cash: 600$

PostSubject: Re: The Basics - Setting up Your first page in DreamWeaver by Cabloo   Mon Jun 02, 2008 8:40 pm

Wow. Smooth.

_________________
Signatures:
Spoiler:
 
Back to top Go down
View user profile
Spideyford


avatar

Number of posts : 1164
Age : 21
Happiness Bar :
100 / 100100 / 100

Favorite Game? : Counter Strike:Source
Registration date : 2008-04-05

Statistics
Gaming Points: 5
Cash: 1000$

PostSubject: Re: The Basics - Setting up Your first page in DreamWeaver by Cabloo   Sat Aug 02, 2008 12:54 pm

ya
Back to top Go down
View user profile
Ğârk_raptör


avatar

Number of posts : 3737
Age : 23
Happiness Bar :
100 / 100100 / 100

Favorite Game? : Left 4 Dead
Group : Rebels
Registration date : 2008-03-20

Statistics
Gaming Points: ∞
Cash: ∞

PostSubject: Re: The Basics - Setting up Your first page in DreamWeaver by Cabloo   Sat Aug 02, 2008 4:58 pm

Very Happy

_________________
Battlezone Statistics
Spoiler:
 

Battlezone Stats: W: 1/D: 0/L: 2
Back to top Go down
View user profile http://ultimategamers.darkbb.com/index.htm
Sponsored content




PostSubject: Re: The Basics - Setting up Your first page in DreamWeaver by Cabloo   

Back to top Go down
 
The Basics - Setting up Your first page in DreamWeaver by Cabloo
View previous topic View next topic Back to top 
Page 1 of 1
 Similar topics
-
» DaBigfella's Collection Update Saturday 20th June 2011 page 6
» Metallica - turn the page
» Gaming basics and our responsibility
» TW - 4.1 - Problem setting my locale! HELP!
» just want to be on first page

Permissions in this forum:You cannot reply to topics in this forum
Ultimate Gamers :: Designing :: DreamWeaver :: Tutorials-
Jump to: