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! 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. On the page, type the word “Welcome.” This will be your “Welcome” or “Home” page. 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. 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: Make sure you have the image that you will want to use saved in your www folder. Click on the place on the page that you will want the image to be located. 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 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! To change the background color of the page: 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 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. 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 insert a table on your web page, follow these steps: Inserting a Table To insert a table on your web page, follow these steps: 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.” 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! 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: Choose “Insert” on the top toolbar. Go to “Interactive Images” and choose flash button. Modify it as you wish and hit “OK.”

What is wrong with this code: 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!