Best Practices: Page Editing
You might have already noticed how easy it is to login to your web site and begin adding and editing pages. This quick primer is geared towards the Campusuite Publisher and will spell out the best way to achieve superior results when adding content to your web pages via the page editor.
Adding a new page
To easily add a new page:
- Click the "Edit navigation" button in the top grey bar
- Notice the left-hand navigation is loaded into view
- Clicking the green "Add Parent" button not only creates a new page, but adds a new link to the left navigation of your site.
- Clicking the grey "Add Child" button next to each parent effectively adds a new link and page under that navigation item. It's a good practice to consolidate left navigation links as much as possible. Keeping these links under a total of seven allows visitors to quickly scan your links, facilitating a more positive experience.
- Find more detailed information by clicking here.
Editing pages
The Campusuite Publisher spends most of their time in the page editor. They add the class syllabus, events, and all kinds of frequently changing information. The page editor makes it quick and easy.
- Click the green "Edit this Page" button in the top, grey dash bar and the page is loaded into a friendly "Word-style" content editor
- You can add pictures (from the image library, or by uploading from your local machine) Be sure that your images are in RGB mode. If you uploaded a .jog image that was in CMYK mode, some browsers may show it, but others will not. This is a common issue when people see what appears to be a broken image in a web page.
- You can add links to other web pages, documents and even upload documents from your machine. While you can upload about any type of document to your web site, the most common, and preferred document is the PDF file. These files render as you would expect and they prevent people from making changes to them. They print nicely and they are small to download. If you do not yet have Adobe Acrobat (to create PDF files), we highly recommend it.
- You can manage much of the hidden information on each of your pages by clicking the "Properties" button at top-right. This allows you to adjust page META data, tell bots not to index the page, as well as more advanced techniques such as page syndication.
- You can add Components to your pages. Components are pre-programmed controls that add special functionality to your pages. Many of the default personal web site pages are programmed with components so that they pull the latest news and events from your news and calendar pages and place them on your front home page.
- Click the green "Save this Page" button at the bottom
- See the Quick Reference for even more detailed Page Editing documentation.
Detailed page editing
Pasting From Word
The most common way publishers add content to their web pages is to copy it from an existing document, for example a Word or Excel document. As you probably know, Word provides a way for anyone to create a document and style it using fonts, colors, type sizes, and spacing of their choice. However, your web site was designed with pre-determined styles and standards established by your organization. The Campusuite CMS wants to help govern these standards, by providing a set of tools that allow you to make your pages look great, but still preserve the branding and character set forth by your organization.
For example, making all the main page headlines, H1's, a set color and size makes it so there is consistency across the board. Perhaps the color of these headlines are one of the schools colors. When people arrive on your page, they recognize this headline immediately.
When you copy content from a Word file, it wants to bring over the styles that were set in the Word document. Word uses proprietary or non-standard mark-up that can have an adverse affect on the appearance of your web pages. In short, we don't want to bring in the Word styles to your web page. We want to bring over ONLY the text... and then re-style it using the tools in the page editor.
Copy the content from a Word or Excel document, but be sure to click the "paste as text" icon in the page editor to strip out unwanted mark-up.
Click the icon, first and paste it into the box that appears. The box is shown at right.
Once you've pasted the text into this window, you can strip out spaces or anything else that is obvious, then click "OK"
Your content is dropped into the page editor and now you can re-style it using the available styles from the top editor bar. Example, Headline1 or Headline2 for headlines.
Apply hard breaks (carriage returns) after headlines that you plan to apply h1, h2 styles. This will make it so when you apply your style, it will not bleed to the following paragraph.
Be consistent with your use of Headlines. For example, if you use the Headline1 style as the main headline at the top of each page, be sure to do that on every page of your site. Do the same with the other sub head-lines. Your pages will have a stronger relationship to each other.
Adding Tables
Usually, copying tables from Word or Excel does not achieve the desired results. It's because again, we do not want the styles established in Word to "contaminate" the styles that we've laid out in the page editor. We recommend a different approach when using tables.
For the best looking tables, click the "table" icon in the top bar. It looks like the icon to the right. Detailed information about the table styles your organization is using can be found in your developers resource area when logged into Campusuite.
Not all of the options are required to build a table. You only have to specify the number of Rows and Columns. The rest of the fields are optional and you may use them depending on your needs. For this system,
--
You can add images to your web pages by clicking the image icon in the top bar of the text editor. You can upload images from your computer, link to already existing images on the server, or link to images within your organizations image library (Imagespace).
- Uploading to the server
- Selecting an image from the image library
- Aligning images and borders
- Resizing images
Your web site templates have been designed with strict CSS and HTML compliance and when you to use the tools in the page editor, you are applying styles that are sure to look good to all the visitors using you web site and they will look like your organizations colors and styling. You will also find that they provide all the flexibility you need to create stunning pages that excite and engage your audience.
We hope this brief overview of the page editor was helpful. You will find much more detailed help, FAQ's and answer to your common questions on the support site. We encourage you to bookmark the Campusuite support site so that you can find help just a click away.
Click here to go to the main Campusuite support page | Click here to login
Quick Tips
For a positive administration experience using the Campusuite system, we recommend the following tools and extensions:
FirefoxThe preferred browser for web site administration. Campusuite was designed to work well with IE and Firefox on the PC and IE and Safari on the Mac, however the latest version of Firefox is the preferred browser because of its speed and ability to add-on developer tools that help in the management of web pages.
http://www.mozilla.com/
LinkChecker add-on
An in-line plug-in for Firefox that allows you to scan your new and modified pages for broken links. It highlights broken links in red and good links in green for easy visual identification.
https://addons.mozilla.org/en-US/firefox/addon/532
Screen grab
Allows you to take quick snapshots of a page (for example, if you experience an error) to report information on the screen back to Innersync. This in-line plug-in for Firefox is the way to take a quick snapshot and email it to someone.
https://addons.mozilla.org/en-US/firefox/addon/1146
Web Developer Tools
Absolutely essential to designers and developers creating new templates and styles for their system. Allows you to change styles and see the results via the browser.
https://addons.mozilla.org/en-US/firefox/addon/60
