Creating great looking web pages is fun and easy!  That's what you'd expect me to say, isn't it?  After watching plenty of students struggle with creating and launching their first web efforts, I decided to jot down a suggested process in these five "simple" steps.  Carefully following these steps will ensure a successful launch of your personal web site at SPU. Getting it right the first time should encourage you to continue to enhance and expand your first efforts.

                                                Dr. Dick Sleight, Manager of Information Systems / Instructor
                                                School of Business and Economics / Seattle Pacific University
 

STEP 1: Reserve "myhome" on the web.

Before we talk web pages, let's talk about the big picture.  Whatever you create needs to be stored somewhere so that your friends and family (and everyone else in the world) can see it.  Here at SPU that storage place is called the "myhome" server.  This is the computer where all students, staff, and faculty may "host" their personal web sites.  So your first step is to reserve space for yourself on the myhome server.  This is done through the Banner system.  Log into Banner as you normally do, but this time choose the link to Personal Menu ► Computer Accounts Menu ► Request additional Accounts (or)  Manage Your Accounts   ►  Web Space     

Now, by the time you have some content ready to send to the myhome server, the space you have just reserved will be waiting for you.

Your URL (Uniform Resource Locator) will be:

http://myhome.spu.edu/username

STEP 2: Get out a piece of paper...

If there is a "first mistake," it is in this step.  The great 20th century inventor Charles Kettering said, "a problem well defined is a problem half solved."  So before you open a web browser or a web page editor like Microsoft's Expression Web, make a plan on paper.

• Draw a larger rectangle about 8" wide and 5" high.  This represents the computer screen. 

• Think of the types of things you want to include on your web page.  Your name, mail stop, a link to your email, your picture, some favorite links, a link to SPU and your major department, pictures or animated .gif images you can find on the web (discussed below), etc.

• Divide the space into a rectangular grid.  3x2, 4x5, 2x2 (this is very flexible and may be changed later.)  This grid or "table" will provide the format in which to place the items you have decided to include on your page.

• Now write in the names of the items you want to place in each "cell" of your table.  Here is a sample, based on a completed web page.

STEP 3: Collect all the pieces of the puzzle.

We still haven't started using the page editor software.  In step 3 it is time to collect all the pieces which will become the content of your web page.  In the sample above, Noelle needed the following elements:

• a background image   Here are a few web sites from which you may choose a background image.  When you find the image you like, click on it with the right mouse button and choose Save Picture As... and save it to a folder on your computer.  See: backgrounds1, backgrounds2, backgrounds3. Keep it simple so that text will show up easily on the background you choose.  Or you may decide to place a table over your background as I have done on this page.

• the graphic image Noelle's   For this you will need to use graphic editing software. Having a friend who enjoys making pictures would be a big help here.

• a digital picture   Like the graphic image, a photo can be enhanced to look good on the background you have chosen. An existing photo may be scanned, or a digital picture can be taken.  If you would like your picture taken here in SBE, bring a USB drive with you to 206 McKenna an I will be happy to take your picture, which can be stored on your USB drive (or I can email it to you.) .

• an email link   This can be done with text like this ( Email: SL8@spu.edu ) or with an email button or icon like one of these:
          

• Animated GIF images   These can easily be overdone.  But one or two can add interest to your page.  It's best if you can use these images as buttons to pages they depict.  (Like the email sample above.)  Try one of these sites for free animated GIFs.  ANIMATION LIBRARY , WEBDEVELOPER.COM, FG-A.COM or surf the web for millions more.

• links to sites of interest    Where you like to surf says much about you.  Links in a bulleted list make a useful element for your page.  Keep the web "alive" by always having links from your page to elsewhere.

  • NEWS

  • SPORTS

  • WEATHER

  • TRAFFIC

• There are many other special items which can be added to your page once your basic page is complete.  Here are a few ideas.

  • A Google search box (see the one here.)

  • I recommend website-hit-counters.com as a good site for adding hit counters to your pages.

    (But I don't find hit counters useful.  They were common ten years ago, but no longer.)  

  • Many sites include a "favicon.ico" image which appears with their URLs.  Mine here at SPU looks like this.     Here's the site I use to create these special icon images.

  • Scroll down on that links page and find a few more unique items added from free sites across the web.

  • Drop down boxes, pup-up windows, etc. can be added using JavaScript. See: javascript.internet.com

• And don't forget to include some text that tells visitors just where they've landed.

STEP 4: Putting it together with Expression Web

The School of Business and Economics uses the Microsoft Expression Web program as our standard web page design tool.  It is available in the McKenna Computer Lab.  SBE is also a member of the MSDNAA program which allows us to provide this software as a greatly reduced cost to our students.  See Dr. Sleight for details.

Now it's time to put the puzzle together.  Open the Microsoft Expression Web program and let's get started. To keep things simple, I will only refer to the central design area with its three tabs in the lower left hand corner (Design, Split, and Code).and the menu bar at the top of the window.

Most of the features beginning web designers need are found under the File, Insert, Format and Table pull-down menu options.  Here is a list of the primary features you should become familiar with for each of these categories.

File  This should look familiar to users of other Microsoft products.  The most important features include Save As..., Preview in Browser, and Properties.... 

Your "home page" is the one you want your site visitors to see first when they come to your site.  At SPU this page must be named index,htm or index.html.  With Save As... you can also change the title that appears at the top of the window that displays your page.

Use the Preview in Browser feature to see how your design will actually look on the web.

Insert    Inserting a picture from a file ( like this bullet) or a hyperlink like this, HOME, is done with the Insert menu.

Format    Format ► Font is similar to what you are used to in other Microsoft products.  Format ►Paragraph is like the same command in MS Word.  

Format ► Background is especially important.  Review the General, Formatting, and Advanced tabs found there.  On the General tab you should add a brief descriptive title to your page.  You can add a sound file here too, but most folks would prefer you don't!

On the Formatting tab you set the background image and/or color.
I recommend you set both since the background color will appear before the background image does.  You will also set your text and link colors here.

On the Advanced tab you can set the margins on your page, measured in pixels.

Table     For horizontal spacing on the web we will use tables, and especially tables within other tables.  (Other methods are common across the web but may not be supported on the myhome.spu.edu server here at SPU.)   

For example, here are two ways to place images beside text. One 2x2 table within the cell of another table:

 Two 1x2 tables within a cell of another table:

Images can also be spaced within text by using the Picture Properties... option.  Explore it by right-clicking on an image you have inserted into your page.

The characteristics of individual cells can be modified using the
Cell Properties dialog box.

This Insert Table dialog box will add a table with two rows and
two columns.  You may adjust the column width after the table has
been created.


Tables may be modified after they have been created using the
Table Properties dialog box.  (It is identical to the Insert Table dialog box.)  Right-clicking on a table, cell, or image will allow you to select these features.

Cell and Table background colors:  Above, I used a light gray cell background to contrast with a white table background.  Colors are expressed in some programs with hexadecimal numbers while other programs use base 10 values. For example, dark teal is Hex:(00,66,66) or (0,102, 102) and light gray is Hex:(CC,CC,CC) or (204, 204, 204). These numbers express how much of each color (red, green, blue) is to be displayed.  (0,0,0) is black; (255,255,255) or Hex (FF,FF,FF) is white, etc.  Viewing your page in "Split" view or "Code" view, you may see colors expressed like this #FF0000.  This is "all red" (FF), and no green (00) and no blue (00).

When your page is finished, save it with the name index.htm or index.html.  You can name sub-pages with descriptive filenames like my_favorite_links.htm or picture_page.htm but the page you want  visitors to your web site to see first must be the index page.

STEP 5: Sharing your creations with the world.

If you've followed the four steps above, you are now ready to send your web page (or pages) and the images that they contain to the "myhome" server.  Although MS Expression Web has features to allow you to connect to myhome, there are easier ways to connect at SPU.

1. If you are logged into a computer on campus, you can connect to your web space directly by clicking on the start button, then "run", then entering the network path to your web space.     \\myhome.spu.edu\users-web\username

2. Right-clicking on the "My Computer" icon on your desktop would allow you to select Map Network Drive.... At this point you could again type in your network path.  If you always use the same computer while on campus, you can check the "reconnect at logon" box.

3. From off campus you can use FTP. Type this URL into your Internet Explorer browser,                              ftp:\\myhome.spu.edu\users-web\username and remember to view this FTP site in Windows Explorer, click Page (or View), and then click Open FTP Site in Windows Explorer.  You will be asked to supply your SPU username and password.

4. If you want to use the FTP features within MS Expression Web, find the instructions by typing FTP in the Help search and then follow the Connect to a server by using FTP link.

5. Lastly, I will illustrate the simple WS_FTP program, which is still my favorite way to connect to my web content.  I keep a copy of my web site on my own computer.  This program allows me to move files back and forth between my computer and the myhome server.  (If you are taking BUS 3620 and would like a copy of this software, visit my office and bring a USB thumb drive on which to copy it.)

This is how I would connect to my personal account.   The General tab looks like this.  My SPU user name is sl8, but any title can be typed in for the Profile Name.  Don't click the Save Pwd box if this is not being done on your own computer.

On the Startup tab, substitute your username for sl8 and type in the path to your web site on your system in the Initial Local Folder field.

More "how to" web design information, images, and fun stuff: