How To Make Your
Own Web Page:
Basic Web Design
Step One:
Creating a Home Page
Through this PowerPoint, you will learn how to create a webpage
using Macromedia Dreamweaver; there are many programs
available, but these directions are based upon Dreamweaver!
1. Open Macromedia Dreamweaver. When you open the program, it
will automatically open a new blank page, and you may use this. If
you choose you may also go to “File” and “New” and open a blank
page.
2. On the page, type the word “Welcome.” This will be your “Welcome”
or “Home” page.
3. Next, go ahead and save the page as your welcome page. Go to
“File” and “Save As.” Under “Save In” you will need to choose the
option of saving the file in the jaguar [Z:] drive. Once you have
opted to save it in the jaguar [Z:] drive, then choose to save it in the
“WWW” folder.
4. Name the document “Index” (since this will be your main home
page that every other page will be linked back to!) and choose save!!
Step Two:
Creating a Home Page
Now that you have set up your “Welcome” page and saved it in your
WWW folder, you have set up the page to be accessed from the
Internet. Remember, everything you save for your Web page MUST be
saved in the [Z:] drive and WWW folder, just as you did on the home
page.
Just to make sure you set your page up correctly, let me tell you how
to view it from the Internet.
When you saved your welcome page, you chose to save it in the Jaguar
[Z:] drive. The Jaguar [Z:] drive also has the name of whatever login
name you use to access the computer at ASU. For example, my access
name is “MPrice6” and so I saved my homepage under Mprice6 on
Jaguar [Z:].
To view your page, you will open Internet Explorer. Where you type in
the URL Address, type jaguar.aug.edu/ and then your login name. For
example, to access my webpage, I simply type in the URL
jaguar.aug.edu/mprice6
Making Links
Okay, so let’s say that you’ve said all you want to say on your
homepage, and you are ready to link some other things to it– how do
you do that?!
To link other web pages to your web site, type in whatever title you
would like the website to have. For example, let’s say I wanted to link
Augusta State’s web site to my home page: I would title it “Augusta
State University’s Web Site.” Then highlight the title, and right click
on it. Choose the “Make Link” option from the list that pops up.
Once you have chosen “Make Link” you can choose to either link it to
a file, or a URL. We wanted to link it to a web site– Augusta State’s web
site, for example– so we would go to the “URL” option towards the
bottom of the box and type in the URL address. In this case, we would
type in http://www.aug.edu, and then hit “OK.” We have now put a
link to ASU’s web site on our homepage!
If you wanted to create a link to a file instead, the directions would be
similar. Create a title, highlight the title, right click on it, and choose
“Make Link.” When the box pops up, though, you will choose to look in
your [Z:] drive and “www” folder. You may link anything you have saved
in your “www” folder to your webpage: simply click on it and hit “OK.”
Adding Images
[Background Images]
Now that we have gotten the basics down, we can decorate our page!!!
If you wanted to put a background on your page, and wanted this
background to be an image, the steps are simple.
**Remember to have whatever images and files you want to use saved in
your www folder.**
To insert an image as the background, right click in an empty space on
the page. The last option on the choices that will come up is “Page
Properties”- choose this.
Under “Page Properties” one of the choices will be “Background Image.”
There will probably not be anything in the space provided, but just choose
to “Browse” through your files, and choose an image from your www
folder. Then hit “OK” and your background image should appear on your
page!
Adding Images
[Inserting an Image on a web page]
To simply add an image to the page (but not have the image as
the background image), follow these steps:
1. Make sure you have the image that you will want to use saved
in your www folder.
2. Click on the place on the page that you will want the image to
be located.
3. Then choose “Insert” on the top toolbar, and choose the
“Image” option. From here, you can browse through the
images you have saved and choose the one that you want to
use.
Making Your Page “Pretty”
To change the
background color
of the page:
To change the font
color:
Right click in an
empty space on the
page. Choose the
“Page Properties”
option. Click in the
small
box
beside
the
word “Text.”
Choose the
color that you
wish to apply and
click “OK.” All of
your text should
change to this color!
Right click in an
empty space on the
page. Choose
the “Page
Properties
option.” Beside
“Background”
will be an
empty box
with an
arrow
in
the
lower
right
hand corner.
Click in this box– a number of color
choices will
pop up. Choose the color you want to use and click “OK.”
Making Your Page “Pretty”
Continued
To change the Links or
Visited Links color:
Right click in an
empty space on
the page. Choose
the “Page Properties”
option. Click
in the small box
beside the
word “Links.”
Choose the
color
that
you
wish
to use, and hit “OK.”
All links should appear
this color.
To change the color
of the Visited Links,
click on the box
under “Page
Properties” that is
titled
Visited
Links.
Choose
a color and
hit “OK.”
When the page
is viewed under
Internet Explorer,
links will be this
color once they’ve
been visited.
Inserting a Table
To insert a table on your web page, follow these steps:
1. Place your cursor in the area of the page where you want the table to be
located. Then choose the “Insert” option on the top toolbar. Choose the
“Table” option, and modify it the way you want it. Then hit “OK.”
2. If you wish to center your table, highlight the entire table. Then go to “Text”
on the top toolbar. Under “Text,” you will move your mouse over “Align” and
choose “Center.” This should center your table!
3. If you wish to remove the border from your table, highlight then entire table.
A toolbar should appear at the bottom- find “Border.” The default border size
is 1, but it may have another number in this space. Nonetheless, change the
“Border” to zero. Though you will still see dotted lines, they will not appear
when the web page is opened from a web browser.
Extras
If you wish to insert a flash button:
1. Choose “Insert” on the top toolbar.
2. Go to “Interactive Images” and choose flash button.
Modify it as you wish and hit “OK.”
Bonus
What is wrong with this code:
<a href=“file:///Z:/My%20Documents/My%20Web%20Sites/philosophy.
htm”>Philosophy</a>
It should have <a> before Philosophy. It should look like this:
<a href=“file:///Z:/My%20Documents/My%20Web%20Sites/philosophy.htm”>
<a>Philosophy</a>
[[Conclusion]]
Now that you know the basics to creating a
webpage using Dreamweaver, you are ready to go!
You can use this knowledge to edit the page to
your liking, and expand on it as much as you’d
like!
Good luck!