Make webpage

Post on 23-Jun-2015

252 Views

Category:

Documents

3 Downloads

Preview:

Click to see full reader

Transcript

Using Dreamweaver

How to Make a Web Page

Open dreamweaver:

Select “Create New HTML”

This screen opens with blank page

At the bottom, you see a “properties” screen

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

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

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

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

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

I have used all the formatting options here:

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

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

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

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

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

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

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!

Now let’s add a picture.

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.

I’m going to choose Photo 149.jpg

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

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.”

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.

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.

What I see in Dreamweaver:

You can “preview” in Dreamweaver:

What it will look like on the web:

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.

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

Select a background image on your computer.

Have fun with this.

top related