Ultimate Gamers
Would you like to react to this message? Create an account in a few clicks or log in to continue.
Ultimate Gamers

The Gamer Paradise
 
HomeHome  PortalPortal  Latest imagesLatest images  RegisterRegister  Log in  The Basics - Setting up Your first page in DreamWeaver by Cabloo Btn_donate_SM  The Epix Series  Affiliates  

 

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

Go down 
4 posters
AuthorMessage
Cabloo

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


Number of posts : 949
Age : 29
Happiness Bar :
The Basics - Setting up Your first page in DreamWeaver by Cabloo Left_bar_bleue0 / 1000 / 100The Basics - Setting up Your first page in DreamWeaver by Cabloo Right_bar_bleue

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

Statistics
Gaming Points: 100
Cash: 600$

The Basics - Setting up Your first page in DreamWeaver by Cabloo Empty
PostSubject: The Basics - Setting up Your first page in DreamWeaver by Cabloo   The Basics - Setting up Your first page in DreamWeaver by Cabloo EmptyTue 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.
The Basics - Setting up Your first page in DreamWeaver by Cabloo DWStart
Now let's make a new web page. You can either go to File>>New..
The Basics - Setting up Your first page in DreamWeaver by Cabloo File-New
Or you can go to Create New>>HTML
The Basics - Setting up Your first page in DreamWeaver by Cabloo CreateNew-HTML
A new page will pop up.
The Basics - Setting up Your first page in DreamWeaver by Cabloo Newpage
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
The Basics - Setting up Your first page in DreamWeaver by Cabloo View-Code
but I prefer this way.
The Basics - Setting up Your first page in DreamWeaver by Cabloo Gotocode
Some HTML code should show up.
It should look like this:
The Basics - Setting up Your first page in DreamWeaver by Cabloo Code
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.
The Basics - Setting up Your first page in DreamWeaver by Cabloo 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:
The Basics - Setting up Your first page in DreamWeaver by Cabloo Colors
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
Cabloo

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


Number of posts : 949
Age : 29
Happiness Bar :
The Basics - Setting up Your first page in DreamWeaver by Cabloo Left_bar_bleue0 / 1000 / 100The Basics - Setting up Your first page in DreamWeaver by Cabloo Right_bar_bleue

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

Statistics
Gaming Points: 100
Cash: 600$

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

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

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


Number of posts : 1164
Age : 27
Happiness Bar :
The Basics - Setting up Your first page in DreamWeaver by Cabloo Left_bar_bleue100 / 100100 / 100The Basics - Setting up Your first page in DreamWeaver by Cabloo Right_bar_bleue

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

Statistics
Gaming Points: 5
Cash: 1000$

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

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

The Basics - Setting up Your first page in DreamWeaver by Cabloo Founder
Ğârk_raptör


Number of posts : 3737
Age : 29
Happiness Bar :
The Basics - Setting up Your first page in DreamWeaver by Cabloo Left_bar_bleue100 / 100100 / 100The Basics - Setting up Your first page in DreamWeaver by Cabloo Right_bar_bleue

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

Statistics
Gaming Points:
Cash:

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

rofl. I know you didn't type that and take all those screenshots cabloo
Back to top Go down
https://ultimategamers.darkbb.com/index.htm
Cabloo

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


Number of posts : 949
Age : 29
Happiness Bar :
The Basics - Setting up Your first page in DreamWeaver by Cabloo Left_bar_bleue0 / 1000 / 100The Basics - Setting up Your first page in DreamWeaver by Cabloo Right_bar_bleue

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

Statistics
Gaming Points: 100
Cash: 600$

The Basics - Setting up Your first page in DreamWeaver by Cabloo Empty
PostSubject: Re: The Basics - Setting up Your first page in DreamWeaver by Cabloo   The Basics - Setting up Your first page in DreamWeaver by Cabloo EmptyFri 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.
Back to top Go down
seshimazi

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


Number of posts : 281
Happiness Bar :
The Basics - Setting up Your first page in DreamWeaver by Cabloo Left_bar_bleue0 / 1000 / 100The Basics - Setting up Your first page in DreamWeaver by Cabloo Right_bar_bleue

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

Statistics
Gaming Points: -
Cash: 0$

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

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

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


Number of posts : 949
Age : 29
Happiness Bar :
The Basics - Setting up Your first page in DreamWeaver by Cabloo Left_bar_bleue0 / 1000 / 100The Basics - Setting up Your first page in DreamWeaver by Cabloo Right_bar_bleue

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

Statistics
Gaming Points: 100
Cash: 600$

The Basics - Setting up Your first page in DreamWeaver by Cabloo Empty
PostSubject: Re: The Basics - Setting up Your first page in DreamWeaver by Cabloo   The Basics - Setting up Your first page in DreamWeaver by Cabloo EmptyMon 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.
Back to top Go down
Ğârk_raptör

The Basics - Setting up Your first page in DreamWeaver by Cabloo Founder
Ğârk_raptör


Number of posts : 3737
Age : 29
Happiness Bar :
The Basics - Setting up Your first page in DreamWeaver by Cabloo Left_bar_bleue100 / 100100 / 100The Basics - Setting up Your first page in DreamWeaver by Cabloo Right_bar_bleue

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

Statistics
Gaming Points:
Cash:

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

notepad is free though
Back to top Go down
https://ultimategamers.darkbb.com/index.htm
Ğârk_raptör

The Basics - Setting up Your first page in DreamWeaver by Cabloo Founder
Ğârk_raptör


Number of posts : 3737
Age : 29
Happiness Bar :
The Basics - Setting up Your first page in DreamWeaver by Cabloo Left_bar_bleue100 / 100100 / 100The Basics - Setting up Your first page in DreamWeaver by Cabloo Right_bar_bleue

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

Statistics
Gaming Points:
Cash:

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

rofl I just realized I have dreamweaver today
Back to top Go down
https://ultimategamers.darkbb.com/index.htm
Cabloo

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


Number of posts : 949
Age : 29
Happiness Bar :
The Basics - Setting up Your first page in DreamWeaver by Cabloo Left_bar_bleue0 / 1000 / 100The Basics - Setting up Your first page in DreamWeaver by Cabloo Right_bar_bleue

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

Statistics
Gaming Points: 100
Cash: 600$

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

Wow. Smooth.
Back to top Go down
Spideyford

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


Number of posts : 1164
Age : 27
Happiness Bar :
The Basics - Setting up Your first page in DreamWeaver by Cabloo Left_bar_bleue100 / 100100 / 100The Basics - Setting up Your first page in DreamWeaver by Cabloo Right_bar_bleue

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

Statistics
Gaming Points: 5
Cash: 1000$

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

ya
Back to top Go down
Ğârk_raptör

The Basics - Setting up Your first page in DreamWeaver by Cabloo Founder
Ğârk_raptör


Number of posts : 3737
Age : 29
Happiness Bar :
The Basics - Setting up Your first page in DreamWeaver by Cabloo Left_bar_bleue100 / 100100 / 100The Basics - Setting up Your first page in DreamWeaver by Cabloo Right_bar_bleue

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

Statistics
Gaming Points:
Cash:

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

Very Happy
Back to top Go down
https://ultimategamers.darkbb.com/index.htm
Sponsored content





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

Back to top Go down
 
The Basics - Setting up Your first page in DreamWeaver by Cabloo
Back to top 
Page 1 of 1
 Similar topics
-
» MySQL and PHP in DreamWeaver
» Cabloo's Place
» Cabloo's shop
» Cabloo with Dream Weaver
» Warcraft 3 - Gamer Review by Cabloo

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