Basic Web Design

1. Basic Web Design Brought to you from VIP and DHS by Wendy Peacock, RLHS VIP-Resource Teacher

2. What You Will Get Freedom from templates with basic concepts Free WYSIWYGs and FTP applications Design your own teacher web site How to build a web page using MS Word Introduction to MS FrontPage Uploading your site to the district/site server. What You Will Not Get HTML Java Scripts Advanced functions Basic Web Design

3. Getting Started Before examining the basics of web design and exploring all the possibilities for your site, let’s establish some basics. To create a web page, you will need three things: • Create a web page. • Get a host for your page. • Transfer your page (along with folder contents) to your host.

4. File Management • Anything (files, documents, sounds, images, etc.) put on a web page MUST be included in a folder that will be uploaded to the web host. If images are not included in a folder, they will NOT appear on your page. • Under “My Documents” create a folder called “lastname_teacherpage” • In this folder, create two more folders called “images_sounds” and “files.” • You can create more folders later as you need them.

5. Plan Your Site Before starting work: PLAN! Don’t waste your time. Before hand determine • What is your purpose? • What are your needs? • Who is your audience? • What are their needs? • How will you web page meet these needs?

6. Design Your Site Welcome/Splash Page • For now you will plan 5 pages; you can add more later. • Each page will link off your Welcome or Splash page.

7. Plan Your Pages What is it that you want your audience to find on each page? Once you have determined that, you can go TILTIN’

8. TILTIN’ Your Pages • Tilt is an mnemonic developed by Jeff Peach for remembering the important elements of a page. I’ve taken liberties and added I and N to Jeff’s work. • T = title • I = images • L= links • T= text • I= identification • N= navigation

9. Design Your Page Using the concept ofTILTIN’establish the design for your page. Hint: You have seen lots of pages and maybe even created one yourself. Think (or go to the web and look) about what and where things are located on an appealing page.

10. The Good, the Bad and the UglyWhich do you want? Rules for appealing and effective pages • Keep it clean, easy to read, and information easy to find. • Keep backgrounds are consistent and congruous. • Keeps font styles and sizes consistent and congruous. • Be sure graphics enhance rather than distract. Too much of a good thing is not good. • Know your audience’s tolerance for text. Page navigation is just as important as site navigation. • Be sure links are maintained.

11. Building Your Welcome Page A well-designed web page is visitor friendly: visitors should always know where they are and how to get where they need to go.

12. Step 1: Start Word & Save as HTML • Open a word document (start=>programs=>word) • Title your page (Keep It Simple, you can change it later. • Save your page: file =>save as • Enter the filename as web_1.htm and select Web page from the “Save as type” drop down menu.

13. Step 2: Background • From the menu bar: format =>background => fill effects then choose what you want, apply and click on OK Or 2. From the menu bar: format =>theme and choose the theme you want, apply, click OK

14. Step 3: Add a Title • Click on Word Art, choose a style, change the fill effects, apply, the click OK • Type in a new title and sub title for you page (This might be your name and content area.)

15. Add a graphic • Place your cursor where you want to insert a graphic. • Import a graphic from the clip art file: • Insert=>Picture=>clip art • Find a clip art graphic that is appropriate for your page => click on graphic => insert • Resize the graphic to fit need of your page

16. Add a graphic • Import a graphic from the clip from the Internet: • Visit a graphics web site • Icon Bazarr http://www.iconbazaar.com/ Collection of clip art, banners, graphics, pictures, etc • Bells-n-Whistles.com http://bellsnwhistles.com Collection of clip art, banners, graphics, pictures, etc. • Ditto.com http://www.ditto.com Collection of pictures and clip art from the web • Find a button graphic that is appropriate for your page • Save the graphic in your Images folder • Right click on the graphic =>save image as=>save image to your folder • Insert the graphic on your page: place cursor where you want the graphic => Insert => Picture=>from file=> select picture=>insert

17. Add a Navigation bar Add a navigation bar to your splash page • Locate your cursor below the title of your page • Add a table: Table=>Insert=>(select one row with five columns) • Label each cell of the table(for example) • Change the background color of cells: Highlight a cell Table=>table properties=>table tab=>borders and shading =>select a color=>click OK

18. Tutorials Web pages with MS Word • http://imet.csus.edu/word_web/web_1.htm • http://www.kevjudge.co.uk/wordtut.htm Web pages with MS FrontPage • http://sesd.sk.ca/teacherresource/onlinetutorials/tutorials.htm#FrontPage • http://www.microsoft.com/education/default.asp?ID=FrontPage2kturorial • http://www.microsoft.com/education/downloads/Tutorials/IOC/FrontPage2k/design.doc Other tutorials • http://www.siec.k12.in.us/~west/online/index.html • http://www.stars.com/Authoring/Design • http://www.w3.org/pub/WWW/Provider/Style