Lesson 3: Creating a Personal Web Page at SPU BUS 3620
advertisement
Creating a Personal Web Page at SPU What is the World Wide Web and how is it different from the Internet? BUS 3620 “The Internet is a worldwide, publicly accessible series of interconnected computer networks that transmit data by packet switching using the standard Internet Protocol (IP). It is a "network of networks" that consists of millions of smaller domestic, academic, business, and government networks…” (Wikipedia) The infancy of the Internet was roughly 1969-1978. The World Wide Web was invented in 1989. It is a system of interlinked hypertext documents accessed via the Internet. With the introduction of Mosaic, the first graphical web browser, in 1993, and Netscape Navigator in 1994, the WWW began to become ubiquitous. It came to SPU in 1995. In 1996 Netscape Navigator had 86% of the browser market and Microsoft’s Internet Explorer had 10%. By 1998 those percentages had reversed. Our goal: Create a personal web site (2 pages min.). Your assignment: http://myhome.spu.edu/sl8/3620/3620.htm “Getting Started on the Web at SPU” by Dr. Sleight http://myhome.spu.edu/sl8/3620/ STEP 1: Reserve “myhome” on the web. http://www.spu.edu/banweb/interim.asp ► Computer Resources Menu (MARS) ► Request a Resource ► Web Space Look for yourself at http://myhome.spu.edu/ Your URL will be myhome.spu.edu/username STEP 2: Create a design. 1. List all of the elements you will need to find or create for your personal web pages. 2. Surf other personal sites to collect ideas for your site. See: http://myhome.spu.edu/sl8/3620/sample2008/ 3. Choose a color scheme (optional but helpful at this initial stage.) 4. Draw two 8” wide by 6” high rectangles. Label the first index.htm and the second page2.htm (or some other name like toms_links.htm, my_photos.htm, etc.) 5. Divide the large rectangle into a grid and use the grid to place the elements of your design. STEP 3: Collect the elements of your design. 1. A background image ( a .jpg or .gif image.) 2. A picture (perhaps of yourself). You should use a program like Microsoft Office Picture Manager to crop and resize your image(s) as needed. Don’t make folks download huge images. 3. Consider using an image as your mailto: link. (This lessens the spam you will receive.) 4. A selection of URLs to other web sites. (Don’t design a dead end on the web.) 5. Optional: Consider some additional features borrowed from free sites on the web. For some examples see: http://myhome.spu.edu/sl8/links2008.htm Put ALL of your files ( .htm, .jpg, .gif, .mp3, etc.) in a single folder. (This is not required but is a safety precaution until your web skills are polished.) STEP 4: Use a web design program to combine your elements on your web pages. See the sample web page on the back of this sheet. Web pages consist of text and tags (computer code) in HTML (HyperText Markup Language). Understand some of the basic tags. <HEAD> </HEAD> <BODY . . . > <A HREF=”URL”> . . . </A> You can design (as we did in 1995) by typing HTML code, or you can use a web design program like Microsoft Expression Web (or even Microsoft Word, Excel, PowerPoint, etc.) Learn to use these basic features in Expression Web. Insert HTML Break, etc. Insert Hyperlink… Insert Picture Format Font Format Background Table Insert Table…, Table Properties, Cell Properties, etc. Also remember to “right click” for context-sensitive help, especially for Picture Properties. Save your “home page” as index.htm (and remember to add a title.) STEP 5: Launch your site. — Map to \\myhome.spu.edu\users-web\username (in a campus lab) — or use ftp://myhome.spu.edu/users-web/username (when off campus) and remember “To view this FTP site in Windows Explorer, click Page, and then click Open FTP Site in Windows Explorer.” Finally… Check your site online (on another PC) at http://myhome.spu.edu/username. Guest Instructor: Dr. Dick Sleight, 206 McKenna Hall, SL8@spu.edu, http://myhome.spu.edu/sl8 _______________________________________________________________________________________________________________________________________________________________________________________________________________________________ __________________________________________
