Presentation on theme: "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."— Presentation transcript:
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 lets say that youve 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, lets say I wanted to link Augusta States web site to my home page: I would title it Augusta State Universitys 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 States 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 and then hit OK. We have now put a link to ASUs 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: 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. 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! 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 theyve 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: Philosophy It should have before Philosophy. It should look like this: Philosophy
[[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 youd like! Good luck!