Daniel Webster College
 

DWC Web Maintainer's Kit
Page Formatting

Home

Consistency goes a very long way at being viewed as being professional. These are our formatting standards to assure that everyone is using the same layout.

DWC Font Standards

Our standard font is Verdana at size 10 (x-small).

Our primary headline is Verdana at size 14 (medium) and bold.

Our subtitles are in Verdana at size 12 (small) and bold.

Our hyperlinks are shown in a light blue, hex={63,7C,D6}. (For more information on changing hyperlink colors, visit the Hyperlink section.

  • Avoid center justification of large pages

  • Avoid too many CAPITALS

  • Avoid too much bold text

  • Avoid too much italic text

  • Leave underlining for hyperlinks (use horizontal bars or tables if you need a divider)



Hyperlinks

This section is alternatively covered in a demonstrational flash movie, which can be found HERE.

For links to documents, refer to the Documents section.

To make a link to an outside website not under DWC, the process is simple. Highlight the text you want to show as a link. In the Insert menu, select Hyperlink (or hit Ctrl+K). In the window that follows, type in the url of the page you want to link to into Address.

  • It is often easiest to open up a browser window to the page you want to link to, copy the url from the address bar and paste it into the window.

At the top of that same window, look at the box called 'Text to display'. If you highlighted a portion of text before you started, that text will appear here and you should be all set. If not, you can type in your text now. If you don't type anything in this box, it will default to displaying the url address itself on your page.

If you want the link to open a new page rather than replacing your page, click on the Target Frame button on the right, click on New Window, and click ok. Otherwise, you can skip this step. Hit OK.

Read below on how to format your links correctly.

To make a link to another page within your section of DWC's website, the process is the same as above except for a few changes. Place your curser to where you want to make your link, or highlight the text you want to show as a link. In the Insert menu, select Hyperlink (or hit Ctrl+K). In the window that opens up, in the 'Look in:' box you will see the files in the folder your current page is located in. If the page you want to link to is in another folder within your section, navigate to that folder.

When you've found your page, click on its icon and it will display that file in the Address box, but this file will be pointing towards the html file on content.dwc.edu, and you really want it to go to the shtml file that will be on www.dwc.edu. So before you hit OK, simply type an 's' in front of 'html' and that should take care of it.

At the top of that same window, look at the box called 'Text to display'. If you highlighted a portion of text before you started, that text will appear here and you should be all set. If not, you can type in your text now. If you don't type anything in this box, it will default to displaying the url address itself on your page. Hit OK.

Read below on how to format your links correctly.

To make a link to a page within another section of DWC's website, again, the process is the same as above except for a few minor changes. Follow the instructions for making as the section above, except you won't be able to locate the page using the 'Look in' box because it is in another section.

The easiest way to do this is to navigate to the page you want to link to in a browser, copy the url from the address bar, and paste it into the Address box. This will paste the entire url, including the 's' in 'shtml', so you don't have to add anything else to the Address bar. Complete the process the same as the section above.

Read below on how to format your links correctly.

Formatting your links correctly. By default, FrontPage makes links plain blue, but we use a sky blue color. To change the color of your link, after you are done making your link, highlight it, making sure you get the whole link. Then go to the Format menu (or right click) and click on Font. Click on color and click the bottom option, 'More Colors'.

Our sky blue is not one of the standard colors, so we have to tell it exactly what we want. The hex value for our sky blue is 637CD6. You don't have to understand how hex values work, all you have to do is type 637CD6 in the Value box and hit OK. Hit OK again to exit the Font window, and your link should be sky blue.

  • Once you do this once on a page, you don't have to keep typing 637CD6 for all your other links. Instead, when you open up the Font window and click on Color, our sky blue will show up under 'Document Colors', which shows all the colors you've used so far on that page. Simply click that blue instead and hit OK.


Bookmarks

Bookmarks are markers in a page that you can use to be able to link to specific parts of a page. They can greatly help in organizing pages with especially large amounts of text. All the links on the home page of this kit have links to bookmarks added to bring you to the specific part of a page, rather than have user hunt for it.

Several bookmarks are located throughout this kit. When you click the link to Bookmarks on the home page for the Web Kit it brings you to straight to this section on this page, skipping everything above.

First you need to set up the points where you want to jump to. This usually takes the form of a subtitle or a leading paragraph. For example, the title Bookmarks at the top of this section has the bookmark for this section. So when you use the bookmark to this section, the title will appear at (or as close to as possible) the top of the browser.

Highlight where you want your bookmark to go. Go to the Insert menu and click on Bookmark (ctrl+G). A window will appear showing a name for your new bookmark and all other bookmarks already on the page.

By default, FrontPage will name your bookmark the same as the text you highlighted, replacing spaces with underscores. (eg, as_shown_here) You can change this now if you like. Try to keep the name short, unique, and relevant to the section it's bookmarking to, so that it will be obvious by the name where the bookmark goes.

  • In the case of this section, the name of the bookmark is simply "Bookmarks". For the section "Copy & Paste From Another Source", the bookmark's name is "Copy_and_Paste".

Hit OK.

Now that your bookmark is set, now all you have to do is make your hyperlink. Highlight what you want to make your link just like you would a normal hyperlink. Go to the Insert menu and click on Hyperlink (ctrl+K). If you are linking to a bookmark on another page, select that page in the center window. If not, skip that step.

Then click the button on the right named 'Bookmarks', which will then give you a list of all the bookmarks on that page. Select the appropriate bookmark and click OK. Back in the hyperlink window, if you are linking to a separate page, don't forget to add the 's' to make it an shtml page, as you would do with hyperlinks. Click OK and you're done.


Tables

 


Images

 


Documents

It is recommended you convert documents into PDF's with Adobe Acrobat Professional. PDF's are designed to be able to be viewed by anyone that has the free Adobe Acrobat plug-in installed on their browser, (which is nearly everyone,) regardless of what operating system or browser they use. By leaving something as, say, a Word document, runs the risk of those users that do not have Word not being able to view your document.

If you use documents infrequently in your site and have never dealt with pdf conversion, you can forward your document to be converted to the webmaster. If you use or anticipate on using documents on a regular basis, you may want to be shown how to do it on your own by visiting the Multimedia Lab in the library.

Once you have your pdf ready, you must upload it to an appropriate location on your site. (NEVER try to link to a file that is on your computer or network drive.) You can then link to your new document as you would an image.


Online Forms

Forms are something that are a bit more tricky with our system. In order to work properly, there are some final steps that only the webmaster can do. If you make changes to a form, let the webmaster know so that he can finalize the changes.

If you require a completely new form, it is suggested you leave the construction of the form to the webmaster. Contact the webmaster with what the purpose of the form is, and a description of all the fields to include.


New Pages

If you have new content to add to your site, it's often better to make a new page for it instead of trying to add it to an unrelated page or making a page too long. First, choose the physical location of the page. Often this is the root folder of your site, but sometimes it warrants being in a subfolder.

  • If you want to create a new folder, in the 'Folder List' navigate to where you want the folder to go, (often this is the root folder, which is default,) go to File -> New and click on 'Folder'. It will create a new folder with the name 'New_Folder' and wait for you to give it a real name. Choose a name that's short but descriptive, and don't use spaces. Use hyphens (-) or underscores (_) instead, or simply leave them out. (Example, instead of the name 'Class Notes', use 'Class_Notes' or 'ClassNotes' instead.

    If you see a folder named 'New_Folder' lying around in your site, it's probably an orphen folder that was created but never used. It's good organization to delete them, but ONLY after checking to make sure that there is nothing in them first.

You create new pages the same way you do folders. Go to File -> New and click 'Page'. If it asks you what kind of page you want to create, just choose a blank HTML page. It will open up a new tab with the blank page, named 'Untitled_#.htm'. Now is a good time to save this new page and give it a name.

Hit the 'Save' button. It will open up the save window. Navigate to where you want the page to go, and give it a name. Don't uses spaces when creating a file name for a page or a folder. Either leave them out or use hyphen's (-) or underscores (_) to replace them. For example, instead of 'page formatting.html', name it 'page_formatting.html'. And make sure the extension is 'html' instead of just 'htm'.

The update script runs every few minutes to check for new pages. When it finds one, it automatically creates an appropriate SHTML page for www.dwc.edu, and will be viewable from a browser. It may not happen immediately after you create the page, but it should only be a matter of minutes.

The first thing you want to add to your new page is a container. If you notice on the website, the content page has a set width it should not go over. The way we do this is by making a single cell table, with a width of 600px, a padding of 20px and a spacing of 0. (Consult the Tables section to learn more about making tables.) Keep everything within this box and you shouldn't have to worry about it anymore.

There are things to consider before you start adding content to your page. Assuming you know who will be viewing your page and what it's purpose is, how will people get to your page? If you just created this page, then it's not linked from anywhere. Should it be linked from another page? A nav bar? More than one location? Making your links to your new page is not recommended until it is ready to be viewed, but you should know where they should go before you dive into adding the content.

Below is a list of tips for adding content to your new page.

Audience

  • Define your audience.

  • Who will be using your pages?

  • From where would someone get to your page from?

Purposes

  • Are you presenting information to an interested audience?

  • What kind of page are you publishing:

  • Personal

  • Academic writing

  • Collection of links

  • Informational

  • Collection of images

  • Are you providing a collection of links?

  • State your intent clearly.

Links

  • Choose meaningful words or phrases for links.

  • Choose an appropriate length for the link text.

  • Choose your links so they support your sentence and concept structure.

Page Length

  • Try not to make the page longer than the window.

  • If your pages present text that people will want to read at length, it's all right to use longer, scrolling pages.

Navigation

  • Don't uses spaces when creating a file name for a page or a folder. Either leave them out or use hyphen's (-) or underscores (_) to replace them. For example, instead of 'page formatting.html', name it 'page_formatting.html'.

  • Put a title header on each page.

  • Choose a page title that accurately summarizes the content of the page.

Security

  • Don't publish "registered" information!

  • Think twice about publishing "need to know" sorts of documents.

Quality

  • Test every link.

  • Keep your pages up-to-date.

  • Check your spelling and grammar.

Netiquette

  • Don't publish copyrighted material without the permission of the owner.

  • Take care in using trademarks.

  • Don't publish links to someone else's pages unless you know that they want that exposure.

Content

  • Put as much content towards the top of a hierarchy as is possible.

  • Pare down your text.

  • Provide "context" links to satisfy a range of audience needs.

  • Don't assume that all your readers will use the same browser features and defaults as you do.


Copy & Paste From Another Source

You might find yourself wanting to copy text from an outside source, like an email or a word document, onto your page. (Always respect copyright laws and site your sources as necessary when using someone else's material.) You could simply do a copy & paste from your source to your page, but it's usually not the best solution.

If you try to copy a set of text from, for example, a Word document, FrontPage will also try to copy the font and paragraph settings used as well. FrontPage is willing to jump through hoops to get it as close as possible. This usually uses fonts and settings that were fine in the source but you don't want in your website. Most often you will need to change all the fonts over to Verdana. You can try to do this after you've pasted the text into FrontPage, but you may come up against unusual issues doing so.

When FrontPage copies formatting settings from another source, it will load the content's background code with a myriad of tags that change everything about the text to get it just right. What this means for you is that you have a bunch of invisible weeds everywhere in your garden that may cause unexpected results when you try to change the settings even further to match the website. It can be like pulling your own teeth. Thankfully there's a fairly simple alternative to this.

Open the program Notepad. Notepad is usually found in the 'Accessories' folder in the Start Menu. It is a simple, bare bones word processor. Then copy the text you want from your source and paste it into Notepad. Notepad is so basic in design that it throws out any and all font and paragraph settings you paste into it, leaving you with pure text. You can then copy the text from Notepad and paste it into FrontPage. Now changing the text formatting will go a lot smoother, with no invisible weeds.