|
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
-
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.
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.
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
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
Quality
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.
|