|
Cape May County ETTC Technology Proficiency Courses
TPC16-2 - Web based Projects (Web Design II)
AUP's what they are and why you should have one
http://chico.rice.edu/armadillo/Rice/Resources/acceptable.html - creating an acceptable use policy
Create your index (main) page
Open FrontPage and enter in the basic text for the main page. Use the format commands discussed in the last class to format the text.
Change the background color (remember to right click, point to Page Properties on the menu that appears and left click, then click on the background tab to change the background color).
The title of a page is very important. It is what appears in the upper left corner of the title bar (it is not the file name or the text you typed at the top of the screen). Many search engines list a page by its title. The title is also what automatically appears when a person makes a bookmark/favorite.
Right click in the middle of the page. Left click on Page Properties found on the menu that appears. Look at the General tab and find the line labeled title. Highlight the text in the box and type in new title.
Save the file. Name it index. Make sure you save on your floppy disk (the 3 1/2 floppy A: drive).
Make sure you insert at least one graphic on your page (if you didn't bring any graphics with you, find a couple on the Internet).
Alignment
- To center text you use center button found on the Formatting toolbar.
- Stick to one type of alignment throughout your web site. If you choose center, keep everything centered.
- It is a good idea to sometimes indent your text so it does not run to the edge of the screen. The indent button is found on the Formatting toolbar. This creates a margin or "white space" (just like in a book).
Other Page Formatting
Make sure your index file is saved. Leave it open and start a new, blank web page.
Save it as test.htm on your floppy disk.
Instead of a color as a background, you can use a file. We have saved a couple of files on the desktop for you to use as an example.
Right click in the middle of the page. Left click on Page Properties found on the menu that appears.
Click on the background tab. Click the Background Picture button.
Click on the Browse button and navigate to the desktop. There is a folder called backgrounds. Double click on one of the files.
Click on ok and preview the page. Try a few of the files.
Here are a few sites with background files.
http://www.two4u.com/bg-faq - good article on backgrounds
http://www.wiu.edu/users/mifdo/bg/bg.html - an article on how to use any background from any page
http://marketwizz.com/backgrounds - 1001 free backgrounds
http://www.absolutedesigns.com/backs/backs.htm -
http://aequarion.com/webgraphics/index_bkg.html
http://www.chaosdesigns.net
Bulleted Lists
- Bulleted lists are one way to organize information.
- Go to the end of the document (we should still be in the test document). The bullet command is found in the Format Menu. Click on the plain bullet for a basic bullet. Type your favorite food and press the enter key. Type another favorite food and press the enter key.
- Turn
off the bullets by clicking on the Bullet button found on the Formatting toolbar.
You can use any graphic as a bullet.
- Go to the end of the document and press the enter key a few times. The bullet command is found in the Format Menu.
- Click on the Picture Bullets tab and click on the Specify Picture choice. Click on the Browse button to navigate to the desktop. There is a folder called bullets.
- Double click on one of the files. Click on Ok and a list should be started. Type in your favorite color and press enter. Type in another color and press enter.
- Turn off the bullets by clicking on the Bullet button found on the Formatting toolbar.
Some sites for bullets/icons
http://www.iconbazaar.com/others/ - lots of lists
http://www.4yeo.com/index.html
Hyperlinks
You can create a link to another page within your site (internal) or a link to a page outside of your site (external). A link consists of two parts, the text for the link and the actually web page address that links.
- We will make an external link to a favorite web site. Make sure you still have the test.htm page open. Place the cursor at the bottom of the page.
- Type in the words "Classroom Connect". This will be the text that appears underlined on a web page.
- Now highlight the words you just typed.
- Click on the hyperlink button found on the Standard Toolbar.
- There are many ways to insert a link.
- You can type the address in the URL box (www.classroom.com).
- OR - You can click on the Web button
and navigate to the web site. Once you find the web site, go back to Front Page (this can be done by clicking on the FrontPage button on the taskbar). Click on the OK button.
- You can make an internal link (a link to another page on your site). Make a link to your index page. Go to the bottom of the page and type in the text - "Home page".
- Highlight the text and click on the Hyperlink button found on the Standard Toolbar.
- Click on the browse button. Navigate to the Floppy 3 1/2 A: drive. Find the index page file and double left click on the file. Click on the OK button.
- Now try this, go to your index page and create a link to the test page.
- You can also create an email link. Go to the index page. Highlight your name at the bottom of the page.
- Click
on the Hyperlink button found on the Standard Toolbar.
- Click
on the email button.
- Type
in the email address and click OK. Click on the OK button to close the hyperlink window.
Graphics (just the basics)
- Make sure the test page is saved. Go to the bottom of the document and type in the following paragraph.
We have a number of new regulations here at Krazy Ball: your creme pie quota must be 10 per quarter; all ties worn or used at the office must have at least 3 different colors and/or strips and polka dots; any error in sales figures will result in a trip to the water dunking tank; baggy pants, hairdos, hats and shoes must be sized to fit within your cubicle; and the list of acceptable casual Friday wear will now include barrels and blue noses.
- Place
the text cursor at the beginning of the paragraph you just typed and insert a graphic (use one of the graphics you saved earlier).
- Notice how the graphic and image are aligned. You can change how the text and graphic are aligned.
- Point
to the middle of the graphic and right click. Choose Picture Properties. Click on the Appearance Tab.
- Try some of the different alignment options. Click on the OK button when finished.
Some Graphic Sites
- http://www.hoxie.org/clipart.htm
- a list of sites put together by a school
- http://builder.cnet.com/Graphics/Graphics101
- http://lts.ncsu.edu:8170/guides/using_graphics/
- http://www.pspro.aphid.net/wg/
- http://webdesign.about.com/compute/webdesign/cs/graphics/index.htm
Some Graphic Design Tips
DO – use any art that is labeled as free use.
DO – put a reference on your page where the graphics came from. Many web sites even provide a little reference graphic for you to use.
DO - get written permission to use any graphic such as a school logo or photograph of a person.
DO NOT -- steal bandwidth. This occurs when you link directly to a graphic instead of saving it to your folder and linking to it there (http://www.widowsweb.com/widows/plea.html)
DO NOT – use graphics from public sites or graphics of copyrighted characters (like using a Mickey graphic you found on the Disney site).
DO NOT – put graphics all over your site, graphic should be used, but should not cover every inch of the page. Also, more graphics mean longer download time for your page.
DO NOT –alter a graphic and then use it (example you use a person’s cartoon figure but you make his shirt black and put a mustache on the figure).
DO NOT – use too many animated graphics – they can be eyesores
Some basic design tips (bad pages vs. good pages)
Alternate Text
If you choose to use graphics as buttons or an image map, you might want to include text explanations as well. Some people turn off the graphics when they browse. Alternate text appears when a person places the mouse pointer on a graphic or when the graphics are turned off.
In FrontPage the Alternate text is added by right clicking on the picture, choosing Picture Properties. Then choose the General Tab and type the text in the box labeled text in the Alternative Representations area.
Thumbnails
Some people display a small picture (or thumbnail) of a large graphic. This is a small file and loads fast. If the person wants, they can click on this and it will take them to a larger picture. Some graphic software will automatically create a thumbnail. Or you can make a copy of the image and change the dimensions. Once the file is saved, put the thumbnail on the main page. Link the graphic to another page with the larger graphic.
Navigation -
It is a good idea to create a navigation bar or navigation buttons and use the same style on every page. Keep it simple, somewhat small (not too small) and useful. This should actually be fairly soon when creating a web site (perhaps even when the Index page is being created). This is why a flowchart or outline is so important.
How you create a navigation bar depends on the type and size of the site. We will compare some different types. First and foremost - TRY TO STAY AWAY FROM FRAMES (at least for now). While frames do provide a way to create a constant navigation bar, they break up the page, require more coding and can be bad for some browsers/monitors.
If your site has a large number of pages, you want to consider making an index or site map.
Last modified 5/15/01
thanks to www.grsites.com for the
background
|