make webpage

32
Using Dreamweaver How to Make a Web Page

Upload: laura-mandell

Post on 23-Jun-2015

262 views

Category:

Documents


3 download

TRANSCRIPT

Page 1: Make webpage

Using Dreamweaver

How to Make a Web Page

Page 2: Make webpage

Open dreamweaver:

Page 3: Make webpage

Select “Create New HTML”

Page 4: Make webpage

This screen opens with blank page

Page 5: Make webpage

At the bottom, you see a “properties” screen

Page 6: Make webpage

Click on the dropdown arrow next to the “Format Box”

Page 7: Make webpage

Click on “H1,” then type something – your name, or something

Page 8: Make webpage

On the properties screen, you can see the buttons you need when typing normal-sized text.

Page 9: Make webpage

I used italics, bold, and a list, clicking on them before typing, after hitting return from the previous format.

Page 10: Make webpage

When formatting options are “on,” they are slightly gray.

Page 11: Make webpage

I have used all the formatting options here:

Page 12: Make webpage

At the top left, “Design” is automatically selected at the beginning, but click on “Code” to see how your web page is being coded.

Page 13: Make webpage

Notice also along the top, in the center, the title and the file name:

Page 14: Make webpage

Type in the Title of your page: it will appear in the bar on the browser when people are viewing your page.

Page 15: Make webpage

To make the file name, you need to save your web page.

Page 16: Make webpage

Click on File, top left, then scroll down to “save.”

Page 17: Make webpage

Make up a name, leaving the extension “.html” at the end.

Page 18: Make webpage

This is the file name as it will appear on your computer and on the server that “serves” your web page to the public– it will become the end part of the url:http://www.tamu.edu/users/myWebPage.htmlso it is best to NOT use spaces!

Page 19: Make webpage

Now let’s add a picture.

Page 20: Make webpage

You’ll be asked where the picture is on your local computer, so upload from your camera or download from the web a picture you want to put on your page before you get started.

Page 21: Make webpage

I’m going to choose Photo 149.jpg

Page 22: Make webpage

-- a picture I took and photoshopped of a maple leaf.

Page 23: Make webpage

It’s easiest if the picture is in the same folder as the web page, especially when transferring the page and all the images to the web server when you “publish” it online– so say “yes.”

Page 24: Make webpage

Ignore the “Long Description”– that’s in case you want to create another web page describing your image—but do fill in the “Alternate text” in case someone who cannot see uses your web site.

Page 25: Make webpage

Now the picture is too big, but the black outline with the little square notches in it means that I can adjust the size of the picture using my mouse.

Page 26: Make webpage

What I see in Dreamweaver:

Page 27: Make webpage

You can “preview” in Dreamweaver:

Page 28: Make webpage

What it will look like on the web:

Page 29: Make webpage

Explore Dreamweaver to learn about changing the look – you can always hit “Control-Z” or “Undo” if you don’t like something you have done.

Page 30: Make webpage

For instance, “Page Properties” allows you to adjust the background.

Page 31: Make webpage

Select a background image on your computer.

Page 32: Make webpage

Have fun with this.