Introduction To Microsoft Word
Creating a Web Page
A Workshop for San Diego State University Students
© 2007. San Diego State University. All Rights Reserved
Sponsored by Academic Affairs
Table of Contents
Where to Find Help When You Need It ............................................................................ii
Student Computer Help Web Site ....................................................................................ii
Help from the BATS Web Page........................................................................................ii
Help in the Love Library Student Computing Lab .............................................................ii
What is the Internet? ....................................................................................................... 1
What’s the difference between the Internet and the World Wide Web? .......................... 1
What can I do on the Internet? ........................................................................................ 1
What is a URL? ............................................................................................................... 1
What is a home page? .................................................................................................... 1
Considerations before Creating Your First Web Page..................................................... 1
Principles of Good Web Page Design ............................................................................. 2
Well Designed Web Pages .......................................................................................... 2
Poorly Designed Web Pages ....................................................................................... 2
Who will see your Web Page? ........................................................................................ 2
Creating Your Web Page ................................................................................................ 3
Kompozer........................................................................................................................ 3
i
Where to Find Help When You Need It
Student Computer Help Web Site
The computer help web site for students provides information about the type of help you
can get and locations where help is available. To find this information, look to:
http://rohan.sdsu.edu/~students
Help from the BATS Web Page
BATS (Baseline Access, Training and Support) is a California State University initiative
to provide all students, faculty, and staff with "baseline" access to information resources
via networks, training in the uses of baseline hardware and software systems, and
ongoing professional and technical support for utilization of computer resources at San
Diego State University. You can access the BATS Web Page by pointing your browser
to: http://rohan.sdsu.edu/~bats/
Help in the Love Library Student Computing Lab
The Student Computing Lab's purpose is to facilitate students in completing assigned
class work, as well as provide assistance to students having computer problems relating
to the Internet, Dreamweaver
, SPSS, File Transfers, PC Operating Systems, Microsoft Office Software and Business
Databases.
Location:
2nd floor of the Love Library building in LL-220
Hours:
Monday - Thursday
7:00am – midnight
Friday
7:00am – 6:00pm
Saturday
10:00 am – 6:00pm
Sunday
10:00am – midnight
ii
What is the Internet?
The Internet is a worldwide network of computers- actually, a network of networks- that
allows the exchange of information to and from virtually anywhere on the globe.
What’s the difference between the Internet and the World
Wide Web?
The Internet has been around since 1969, when a basic text version of it was created as
a project of the Department of Defense. The World Wide Web -a system of
interconnected information that is a part of the internet- began in 1989 and introduced a
multimedia (text, graphics, and sound) format.
What can I do on the Internet?
People use the Internet for commerce, for research, or for fun. You can buy or sell
almost anything, retrieve information, send and receive email anywhere, join a
newsgroup, “chat” with others electronically or just play games.
What is a URL?
A URL (uniform resource locator) is another type of electronic address-for Web pages.
It’s the code that identifies where a particular site can be found. Most begin with
http://www (in fact, http: is often treated as a given and left out of published addresses)
and end with an extension indicating whether it’s a business (.com), school (.edu),
government (.gov), or non profit (.org) site.
What is a home page?
A home page is the first or main page of a Web site. All the other pages of a site are
generally accessible through links from the home page.
• FTP: File Transfer Protocol. An alternative (to the World Wide Web) way
of transferring files over the Internet.
• Secure Shell (SSH): A software program for Windows used to transfer
files over the Internet.
• HTML: HyperText Markup Language. A collection of style information
(font, font size, layout, etc.) used to define components of a web
documents.
• HTTP: HyperText Transfer (or Transport) Protocol. The standard
computer protocol for identifying accessible Web Pages.
Considerations before Creating Your First Web Page
One of the most exciting opportunities created by the explosion of the Internet is the
possibility for anyone to become a publisher by making a Web Page. The following are
tips for good design.
1
Principles of Good Web Page Design
Below are several tips for novice designers which allow for creativity, but still take into
account good design principles.
Well Designed Web Pages
• are well organized and easy to use
• serve the needs of some audience and are designed with that audience in
mind
• contain valuable content and are attractive
• use white space to enhance the readability and appearance of the page
• are up-to-date: information is current and all the links work
• use graphics to compliment the text
• make sparing use of flashy items (such as blinking text, animated icons,
movies, sound files, etc.)
• have text that is readable (size & color factor in here)
• are consistent in their design (if multiple pages are used)
Poorly Designed Web Pages
• lack a logical organization
• leave the user wondering what the purpose was
• try to put ALL of the information on a single page or bury all the information
under numerous menus
• have misleading or inadequate titles/headings/links
• contain
old
information
• are
unattractive
• use colors which render them illegible
• contain links that have expired
• overuse all the available bells and whistles
• have
typos
• break copyright or plagiarize the materials of others
Who will see your Web Page?
Remember that your Web Page will be viewable by anyone who has access to a web
browser (Internet Explorer, Firefox, Safari, etc.). This means that it is important to be
aware of the content of your page, both words and graphics. The following website
provides information on what is appropriate as a faculty, staff or student of SDSU:
http://www-rohan.sdsu.edu/hpguide.html
2
Creating Your Web Page
HTML Editors
Web Pages are built in Hypertext Markup Language (HTML). HTML is the programming
code that creates the you actually see. While learning HTML should be a goal of
everyone who works extensively with Web Pages, the invention of HTML editors has
made creating HTML without knowing HTML, very easy. A HTML editor that is easy to
use is Kompozer.
Kompozer
Before we start in Kompozer:
On the desktop, click on the Local Temp Icon.
Create a new folder with your name on it.
Open your named folder and create a new folder and name it public_html
Here are the steps you are going to follow in class to create your web page.
We are going copy some files from another folder: Q:\BATS-Temp\Charles\Web
Design\Creating a WebPage . The files are going to be a background for your webpage,
a small cartoon character, and a SDSU Logo.
Copy all of these files into your public_html folder.
Open Kompozer. The top menu should look like this:
1. Go to the Table menu, select Insert>Table.
2. Click on the Precisely Tab and create a table with the following parameters:
8 rows, 2 columns, specific width 750 in pixels, border size 0.
Clicked on the Advanced Edit button and ensure that cell padding and cell
spacing are 0.
3. You should now have two equal columns of 8 rows each outlined in dotted lines.
a. Highlight the left column, and right click you mouse. Click on Join Selected
Cells. On the Slider above the window that shows your page, click on the
divider between the columns and set the width of the left side column to
65 pixels.
b. Now highlight the right column, and right click you mouse. Select Table
Cell properties, check the Text Wrap box and ensure that Wrap is listed on
the pull down menu. Then click ok.
4. Go to the Format menu and select Page Colors and Background.
a. Click on the open file icon
next to the Background Image window,
navigate to your public_html folder and select the background file you
copied from the server.
3
5. Click in the top row of the right column, type your name. Go to the Format menu
and select Font, select a font for you name. Then again go to the Format menu
and select Font Color, select a color for your name.
6. Go to the second cell in the right column. Go to the Table menu, select
Insert>Table. Click on the Precisely Tab and create a table with the following
parameters: 1 rows, 2 columns, specific width 100%, and border size 0.
Clicked on the Advanced Edit button and ensure that cell padding and cell
spacing are 0.
7. Right click your mouse in the new left hand cell and select Table Cell Properties,
in the width box enter 250 pixels.
8. Place your insertion point in the new left hand cell. Go to the Insert menu, select
Image. Click on the open folder icon
next to the Image Location window,
navigate to your public_html folder and select the cartoon character you copied
into your folder.
9. Place your insertion point on the right side of the cartoon and hit the enter key.
Type the word email and a colon then type an email address, highlight just the
address and click on the Link Icon on the top toolbar
. Type the email address
in the Link Location window and check the “The above is an email address” box
as shown below:
.
10. Open the Web Page.doc file in Microsoft Word from the Creating a Webpage
folder Q:\BATS-Temp\Charles\Web Design\Creating a WebPage
11. Place your insertion point in the new right hand cell. Copy the first section of text
from the MS Word file, I am a student at San Diego State University, . . . , go
to the Edit menu in Kompozer and select Paste without Formatting. Select the
three statements and create a bulleted list.
12. Copy the second section of text from the MS Word file, Background | Interests,
Activities and Plans | Links . Go to the third cell in the right column, go to the
Edit menu in Kompozer and select Paste without Formatting. Then increase the
text and make the text bold.
13. Select that text and center it within the cell.
14. Go to the fourth cell in the right column, copy the third section of text from the MS
Word file that starts with the word Background, and go to the Edit menu in
Kompozer and select Paste without Formatting in to the fourth cell.
4
15. Go to the fifth cell in the right column, copy the fourth section of text from the MS
Word file that starts with the word Interests, and go to the Edit menu in
Kompozer and select Paste without Formatting in to the fifth cell.
16. Go to the sixth cell in the right column, copy the fifth section of text from the MS
Word file that starts with the word Links, and go to the Edit menu in Kompozer
and select Paste without Formatting in to the sixth cell.
17. In the seventh cell of the right column, change the justification to center. Place
your insertion point in the cell. Go to the Insert menu, select Image. Click on the
open folder icon
next to the Image Location window, navigate to your
public_html folder and select the SDSU logo you copied into your folder.
a. Once you have inserted the button, click on the button and click on the
Link Icon on the top toolbar
. Type the URL of SDSU
(http://www.sdsu.edu) in the Link Location window. In the Alternate text
window, type San Diego State University.
18. In the bottom row of the right column, change the justification to the center and
type these words - This is a personal home page and does not represent the
opinions of San Diego State University – this is a disclaimer and must be on
your webpage.
19. Now highlight the word Background in the fourth cell, go to the Insert menu and
select insert Named Anchor, Background will in the Anchor Name box, click ok.
An anchor icon will appear next to the word Background.
20. Repeat this procedure for Interest, Activities & Plans and Links
21. Create Links to two web sites of your choosing in the links section.
22. Click next to your name in the top cell, go to the Insert menu and select Insert
Named Anchor, the Anchor Name box will be empty, type the word Top and click
ok. An anchor icon will appear next to your name.
23. Now link the words in the menu to the bookmarks and the word Top in each
section to the top bookmark.
5
24. Your window should look something like this:
a. Go to the File menu and select Save.
The Page Title Box will appear:
This is where you Title your page, this is not the file name but the Title that
appears at the top of a browser window. After you title your page, click ok and
6
the Save As menu should appear as below:
b. Make sure you are in your public_html folder inside of your folder
25. You have now saved your Home Page which is called index.htm. When you are
done, you will be using a program called Secure Shell (SSH) to transfer your files
to the rohan server. If you want to download SSH at home, go to the SDSU
Student Computing Center web site (http://scc.sdsu.edu/) and click on the
making web pages tab at the top.
26. Once you open SSH, click on the quick connect icon at the top of the window, a
box like the one shown below will appear:
the host name is rohan.sdsu.edu, the user name is the bisc# from the slip of
paper you got in class, if you are using your own rohan account, it is your user
name. Click Connect, it will then ask for your password, rohan uses the Unix
operating system which is case sensitive, type your password exactly the way it
appears on the slip of paper.
27. Once you are in SSH, you create a public_html folder in the rohan account by
clicking on the new folder icon:
, call this new folder public_html.
28. Open both the public_html folder on right and the left side of window. Drag all the
files on the left public_html folder to the right side public_html folder.
29. Go to internet and check out your website. http://rohan.sdsu.edu/~bisc####
7
30. Now you are going to add horizontal line to your page to separate the sections.
Place your insertion point before the menu in the third cell, go to the Insert menu
and select Horizontal Line. The line will be gray, but in FrontPage you can
change it to a color you like by right clicking on the line and selecting the new
color, once you have done this all new lines will be in the new color.
31. Insert lines after the menu and after the word top in each section.
32. Now save your page again and send the new copy of the page to the server.
In the browser you have open, click on refresh to see the changes you have
made.
33. Your finished page should look something like this:
8
Document Outline
