BAE Graphics

Web page basics

1. About creating basic web pages...
2. CHEAT 1----- Creating a web page FAST with MS Word...
3. CHEAT 2----- Using or revising an acquired template...
4. Using Excel to make web pages
5. More about handling Web graphics...

• HTML Code tutorial
• HTML goodies

1. The basic web page

Many people do not realize that many popular browsers have a built-in web page editing and composing feature. Explorer and Mozilla application suite (now Seamonkey) both have this feature. FoxFire however is only a browser. With browsers that have edit and composing features you can create pages from scratch, save them in a file on your machine, and view your creations using your browser window. All this can be done without being on a live web server and without anyone else viewing it on the web. Creating and viewing local web files using the browser window allows you to make sure everything looks just right before pages are upload to a live web server.

UPLOADING NOTE: You are not uploading a composer created web page when you view your creations in a browser window. You are getting a file from your local machine and viewing it only in your machines browser window. It's not on the live web for everyone to access because the file you created lives on your local drive. Only a file that lives on a live web server is viewable to everyone. The file can only get on a live web server if:

• You give the file to your web master to upload.
• You have a link set from your machine to the BAE web server, enabling you to upload files yourself to a folder which the webmaster has given you permission into.
• You actually set up a full web server site on your machine.

You may first be confused when working with a newly created web page because you are dealing with two windows. The first is the browser window, this is the window you are very familiar with, it is the window you view web pages in. The second is the composer window this is the window you create new web pages in. The composer can be thought of as a word editing program embedded in the browser window, and it is there just for your editing convenience. In explorer the very familiar MS word program is used as the web composer and many people feel comfortable with this. To access the composer feature of Mozilla on the top menu go to window and choose composer and a new window opens up. It is totally blank and note the new menu at the top of this page it looks just like most word editing programs. In Explorer the edit and open are found under file on explorers top menu.

In both programs you can learn everything about using the composer/editing features from the help menu of the browsers main menu.

FAST web page with MS Word...

If you have information in a Word that you would like to see on the web, then you will find half of the work in creating a web page has already been done. Yes done!
All you need to do is: Use the main menu of the word program, file/save as HTML. This saves the file and all it's pictures automatically. Everything is converted to web ready (basic) documents and graphics. Your word file becomes a HTML web page and all the pictures of the original file are converted to .gif web graphics. You don't need a photo editor to make web ready graphics.

Stay organized keep related files together, it's important when creating a web page. To organize files create a folder you will use to save only one converted document and all of its associated picture files into. This is especially important if the original file has a lot of pictures.

Now convert all the rest of the files you think you will want linked to your page, keeping each in it's own folder. Put all of these folders into a folder together (staying organized is key) name the folder something like "my web collection".

Start your web browser. Go to file/new/open page browse to find your web folder and choose one of your HTML documents.

Don't worry you are not opening your pages on the world wide web server. HTML web pages you create and keep on your local hard drive are just that LOCAL. You are the only one viewing them.

Notice the request to "open location file in" choose to open it in the browser window.

Notice how the background is gray this is the default color of the browser. You may notice other things about your page that are not what you would like. Often additional web related changes are needed, such as reformatting some text, possible reduction in graphic file sizes, addition of backgrounds or special graphics as well as the addition of targets and links to your web pages. These changes may be necessary, so the pages will perform properly on the web.

Tweaking pages to perform and look right on the web is an important step. This is where knowing how to work with the composer features of the web browser becomes important.

To edit the web page, so you can make changes you need to be in the composer window. The composer window can be thought of as a word editing program which is built into the netscape browser window. To edit the page go to menu/file/edit page a new window will open. This is the composer window. It looks almost identical to the browser window but note the menu has changed at the top. This menu has icons and tools which are similar to Word or Word Perfect menu icons. Both windows should now be open on your screen and should stay open. When you edit pages for the web, two windows are used one to edit in and one to see the changes in. The two window concept of editing is a little cumbersome but it is how it's done.

To see how the page will exactly look and work on the web to see exact colors, picture positioning, formatting and links to your web. First changes are made in the composer window, then saved and viewed in the browser window. This is because links and other things will not work in the composer window even though both windows look a lot alike, they are not. The more complicated a page gets with items and links the more the composer is needed to tweak things.

The first thing you will want to change is the background. Go to menu/format/page colors and properties. In the dialogue box note the tabs at top, be sure you are in the colors and background tab for this step. The dialogue box displays colors of everything on the page. To change the background color (it's the last one on the list) press on the old color and a new selection pops up. When you change the color to green, check, how the colors of type etc. will appear using the page frame to the right. You may need to change other text colors, so all the colors will work together for readability. At the bottom of the dialogue you can also browse to a picture and use it as a background.

1. First Tip: Readability is the most important thing, a busy background although they may be pretty are not always practical.
2. Second Tip: The background is added in the composer window but will not show in the browser window until you SAVE the change and look at it in the browser window. (Remember the browser window was left open), to see the change hit the reload button on the browser menu. Only then will the new colors take effect. Remember if you did not save in the composer window and reload in the browser window you will not see changes.

If your page has problems with text formatting you will need to learn how to use the text tools on the composer main menu. A basic understanding of how the composer works is given in detail in the practice secession above. or just play with the type tools on the composer menu testing to see how they work. If you run into a problem check the composers help option on the menu. Remember to see changes SAVE in the composer window and reload in the browser window.

Common problems with pictures are either they did not show up or they are in the wrong place in the text. Here again see the practice secession above to learn how to work with pictures. or press the IMAGE icon on the composer menu and test the options. Remember to see changes SAVE in the composer window and reload in the browser window.

The Linking feature of web pages is the thing that makes the web unique and so interesting to use. To learn how to add links to your page see: the above practice secession learning about links or explore the TARGET and LINK icons on the composer window. Remember to see changes SAVE in the composer window and reload in the browser window.

Once you have tweaked all your pages in your collection of web pages it's time to upload to the live web. You can either have BAE graphics upload files for you or you can do it yourself.

To upload files yourself get an AFS connection made to your machine and then have a have your live web folder established on the server. You then take the files you have stored and tweaked on your hard drive and COPY them to the new live web folder. Things may not be working perfectly so you will need to tweak them using your editing feature of your browser.

Revising an acquired template...

If you surf the web you will find may free web templates can use. It is best to use templates from safe and well known sites. Shop well it is worth it. Today you will want to look for accessible XML templates to be ADA compliant. In theory, you can open any web site on the internet and and save the page to your local hard drive with a new name then edit the page with your information in place of theirs. This may at first sound simple and surely the easiest way to create a site. However, if you do not get a simple site template you may find you are removing and unlinking a lot of information in order to use their template. After you have removed items and find not much about the initial page is still usable you may be discouraged. You may need to know more about creating a web page in order to undo it than you thought. Recommendation-- If you choose to use this method then pick a simple site to copy and revise. To get the template of another page open a web site you like go to file/save as and rename the file, then edit the file in composer window substituting your text for theirs. If they have links on their page you need to remove the links and set new ones for yourself. Once you have the page revised you need to upload it to the web.

Excel web pages

For those of you who feel more comfortable using Excel than learning how to use a web composing tool such as, Dreamweaver, Front page or Browser Composers. You should consider creating web pages with Excel. To publish an Excel file on the web you must go through several steps to convert it. The first thing is to make sure you have saved a duplicate file on your machine, so you can experiment safely with your first Excel web page. 1. Open the Excel file. 2. Highlight with your cursor the cells you wish to appear on the web. 4. Go to "file/save as web page"--a dialogue box comes up. 5. Navigate to the folder on the web you wish the file to appear in. This would be your personal AFS homepage space or your research locker (places you have permission to publish into). Faculty and Staff see Sherry if you do not have AFS drive access on your machine yet. 6. In the same dialogue box you will note the Save: conditions. You have a choice of two radial buttons one for the entire workbook or one for cell range. Generally you want cell range. Switch and choose cell range. 7. Change the file name: Name it index if it is the first page in a newly created folder or give it a name which has no spaces in it (web server can only read file names with no spaces in them. You may use a dash to separate words this is okay (example: first-excel web). 8. Press the "Change title" button ---This is a chance to name the title of the page. This title shows up in the web browser title bar. Title bars are at the top of web page identify the page to your audience. You do not have to worry about rules for naming web pages with this feature its okay to have spaces in this name it makes it easier for the reader. 9. No you don't need to hit the save button because you have got a duplicate file on your main machine, so go back up a button and.... 9. Hit the "Publish" button. This will take you to a second dialogue box where you can choose to browse to the correct directory on the web. You should be there already---Check and if not browse to it. 10. Press the final "Publish" button. Your page should automatically pop up in a browser window. 11. Check to see if it looks okay. If its okay you can then link this page to another page on your site or if its an index page then it should be okay. It is always a good thing to double check the page again in the browser. 12. Close out of the automatically popped up browser window and navigate to the page as you always open the web. Look to see if all really is okay. Then you are done. Note: Excel sheets don't have to be drab!. You can add color to both fonts and cells and change font sizes. Pictures can be inserted into cells. I have a simple excel file published to a web page at: http://www5.bae.ncsu.edu/events/seminars/ Extra: Some of you may have noticed the "Add interactivity" button in the first dialogue box when publishing. Many excel features work on the web like making a cell add or subtract. I have one on the web at http://www.bae.ncsu.edu/support/envlab/page.htm These interactive features only work in internet Explorer or if you have added a Netscape plug-in. Even more advanced things like having charts and calculation change with new input can be created. I am still playing with these advanced features any help from Excel experts to speed my efforts is welcome.

More about Web graphics...

Including graphic elements is the fun part of creating a web page. Many web creation software packages and clip art image software collections have web ready graphics to use. You can also find free graphic elements on the web by browsing graphic and computer sites. If you want to use elements form other peoples pages consider copyright concerns.
To save most simple graphics from a site all you need to do is highlight the image, then right click your mouse button and choose "Save Image as". In the pop-up dialogue box just save as you always do, into a folder on your hard drive. There are a number of different kinds of graphics on the web:

• Animated gifs
• Three-D graphic images
• Background images
• Movie files
• PowerPoint files are converted to appear within an html file

Note: Page links are provided as a starting point for information on the subject but are in no way an endorsement of the sites or accuracy of information they present.

---