Document Title

• Author
• Contact Info 1
• Contact Info 2

Help

• Use Ctrl+f to Search Document

• Printer Friendly Version
• Further Help 1

Related Documents

• This Google Docs Template

• Related Document 2
• Related Document 3

imsamad

imsamad

1. Introduction
a. Why use Web Doc?
b. Highlights
c. How to use Web Doc
d. Examples, etc.
2. More Information
 a. Updating/Creating the Page Contents
b. Creating A Printer-Friendly Version
c. Known Quirks
d. Contact Me

Introduction

Why use Web Doc?

KOLEKSI GAMBAR-GAMBAR SAYA:Semua gambar sekitar peristiwa di SK Seri Beroleh.

Frequently in your business and personal life it's better to write up some information and quickly
post it to the web for others to view or edit without worrying about technical issues (hosting, htp,
etc). That's what makes Google Docs such a great tool. Just write something up, use the share
functionality and you've got your document up on the web all courtesy of Google.

Web Doc was tailored for just this sort of task. It adds a floating page contents bar and a static
page header so your document will have a genuine web feel and navigation. In addition, the text
background color is set to be easier on the eyes for online reading. Now you can quickly publish
information to the web for free, while taking advantage of easy to use Google Docs!

When you use Web Doc and post to the web, please leave the link entitled "This Google Docs
Template" in your document to help spread the word.

Highlights

• Works with all major, modern browsers (Tested back to Internet Explorer 6).
o Internet Explorer 6 does not support the floating and static bars. The presentation
of your Web Doc will be automatically altered for this older browser that is
commonly used in corporate environments.
• Easily create and maintain the 'Page Contents' bar by using the Google Docs Table of
Contents function. See instructions.
o Using the Table of Contents function automatically creates bookmarked links to
each section of your document, making for easy and useful navigation when
published to the web.
• Insert tables and pictures, change colors and use Google docs as you normally would!
• Once published, any changes you make to your document will be updated automatically to
the web page.
• Easily create a printer friendly version so people can print the document straight from the
web. See instructions.

How to use Web Doc

To use this document, just highlight and delete the content I've created here and enter your own.
See the page contents section to learn how to easily update the 'Page Contents' bar to match
your content. Here are a few things to keep in mind:
 1. It is possible to accidentally delete some of the invisible page layout when you first delete
my content to add your own. I've made this more difficult to do but it's still possible. To
ensure that this doesn't happen, make sure to only highlight the actual text and not the
areas above and below the text when you delete my original content.
2. Using 'heading 2' will put the divider line just above your header text. If you don't like the
horizontal lines, just use other headings (heading 1, heading 3, etc).
3. To publish your document to the web, do the following:
a. Go to File -> Save.
b. At the top right corner of the screen, click the blue 'Share' button.
c. Click on 'Publish as Web Page'.
d. Click on the the 'Publish Document' button.
e. Make sure to check the box to automatically re-publish when saved in the future.
f. A message will pop up saying that your document is published to the web with a
link to your web doc.
g. Copy this link and save it so you can direct your friends and/or co-workers to your
document!
4. See the 'Page Contents' section to the right for further detailed information and
instructions.

Examples, etc.

I've been using a version of this template for a while, see a few examples of how I've used this
type of document. Please note that some of these examples may not work with Internet Explorer
6 and 7, as they were created using an older template.

• Here is a technical guide that I just wrote (this template) : EasyAjax_Form Documentation
• A document that I'm slowly updating (older template) : Principles of Design
• I took notes on a computer language I was learning, I though it might be useful to others
so I published it (older template): MySQL Notes

More Information

Updating/Creating the Page Contents

The Table of Contents feature is a great time-saving tool.

Make sure that you are using headers as you write your document ('heading 1', 'heading 2', etc.)
Headers are accessed using the 'Styles' drop-down menu, right next to font type.

Google Docs uses the headers to determines how to chop up your document into sections.
'Heading 1' would denote a main section, 'heading 2' a sub-section and so on.

Once you have created some content of your own, do the following to update the 'Page Contents'
bar:

1. Put your mouse over any link in the 'Page Contents' bar , click (left click on PC).
2. An 'update now' link will appear. Click it to create a new table of contents with internal
links to your headers.

If for some reason the above doesn't work properly, do the following:

1. Put your mouse over any link in the 'Page Contents' bar, click (left click on PC).
2. A 'remove' link will appear. Click it to remove the old page contents.
3. Click once just under where it says "Page Contents".
4. Go to Insert -> Table of Contents.
5. Choose from the options, hit 'Insert Table of Contents'.

Creating A Printer-Friendly Version

Sometimes you may want create another version of your document that is easily printed from the
web. To do this, you will need to make a new copy of your document and change the
presentation. Use the 'Edit CSS' function (in the Edit menu) to change the presentation of your
document. CSS stands for Cascading Style Sheets and it is the coding language used for web
presentation.

This may sound complicated but it will be very easy.

1. Copy the following code (highlight then Ctrl+c):

body {

font-size: 85%;

}
h2 {

border-top: solid 1px black;

#Content {

padding-left: 10px;

.navhead {

font-weight: bold;

font-size: 10pt;

.titlespan {

font-size: 16pt;

font-weight: bold;

#MidNav, #RightNav {

display: none;

.TOChead {

display: block;

text-align: left;

width: 100%;
 font-size: 14pt;

font-weight: bold;

border: none;

margin-top: 35px;

margin-bottom: 15px;

#WritelyTableOfContents {

background-color: white;

border: none;

#WritelyTableOfContents li {

margin-top: 5px;

2. Go to File -> Save as new copy.

3. A new duplicate copy of your document will be opened.
4. On the new document go to File -> Rename. Click and rename the new copy "Print your
doc name here".
5. On the new document hit the blue Share button (top right corner) -> Publish as web page.
Then hit the publish button. Make sure to click the 'update automatically' check box.
6. Still on the new Document go to Edit -> Edit CSS
7. Delete all the code that is in the box that appears.
8. Hit Ctrl+v to paste the new CSS rules in.
9. Hit Ok. You have created a printer friendly version that is published! Now you just need
to link it to your original.
10. Go back to the original and highlight the 'Printer Friendly Version' Link in the mid-header.
11. Hit the link button on the Google Docs tool bar (should be just above where you are).
12. Click 'Link to Document'
 13. Choose the new document you just created (Print your doc name here).
14. Hit the 'Change' button.
15. You're all done!

Please note that the printer friendly version is a separate document so when you update the
original, the printer friendly version will not be updated. You are best advised to make the printer
friendly version as your last step.

To update your Printer Friendly Version in the future, do the following:

1. On your main document highlight all the content (everything except the Table of Contents
and Header).
2. Hit Ctrl+c to copy.
3. Open your Print version of the document.
4. Highlight all the content and hit Ctrl+v to update it.
5. While on the Print version, click once on the links in the 'Page Contents' section.
6. Click on the 'Update Now' link.
7. Any changes to the top header will have to be done by hand on the print version.
8. Save the Print version and you are good to go. The two documents are already linked
together and published to the web.

Known Quirks

There is a ton of stuff going on behind the scenes at Google Docs. It's very complex stuff to make
a web program like this seem simple. I've been able to correct the known quirks with this
template, please contact me if you run across something unusual that needs fixing.

• The top Navigation bar has been fixed, delete and add items at will!

Contact Me

My name is John Stevens and I'm a web developer living in Sacramento, CA. Please contact
me with suggestions, issues or questions regarding Web Doc.

Need a custom Web Doc for unlimited use in your organization or personal life? Contact me.

I'm available for freelance work, no job is too big or too small. I can help you get your web site
or application noticed, fine tuned or built from the ground up. I'm experienced with HTML, CSS,
PHP, javaScript / jQuery and web marketing.
I love this stuff!