ee training manual - fitchburg state university · pdf fileexpression engine training manual...

Expression Engine

Training Manual

Updated 7/30/14

Expression Engine Training Manual

2

Table of Contents What is Expression Engine? ............................................................................................................................................................................... 3 Logging into Expression Engine ......................................................................................................................................................................... 3 Creating a New Page ......................................................................................................................................................................................... 4 Page Components ............................................................................................................................................................................................. 5 Right Column Options ....................................................................................................................................................................................... 7 Structure Tab .................................................................................................................................................................................................... 8 Meta Tab .......................................................................................................................................................................................................... 9 Options Tab ..................................................................................................................................................................................................... 10 Other Tabs ....................................................................................................................................................................................................... 10 Saving and Publishing Your Page ...................................................................................................................................................................... 11 Editing a Page .................................................................................................................................................................................................. 12 Making Changes to a Page ............................................................................................................................................................................... 13 Closing and Deleting a Page ............................................................................................................................................................................. 13 Page Editing Tools ............................................................................................................................................................................................ 14 Adding Content ................................................................................................................................................................................................ 16 Page Design Elements ...................................................................................................................................................................................... 17 Adding Images ................................................................................................................................................................................................. 21 Inserting a File ................................................................................................................................................................................................. 24 Creating a Marketing Block .............................................................................................................................................................................. 24 Creating an Image Gallery ................................................................................................................................................................................ 24 Creating an Emergency Notification ................................................................................................................................................................. 25 Questions? ....................................................................................................................................................................................................... 25


3

What is Expression Engine? Expression Engine (EE) is a Content Management System (CMS) that Fitchburg State uses to add content to the Fitchburg State website (fitchburgstate.edu). It uses a WYSIWYG (What you see is what you get) interface that allows content contributors to add content without needing to know any computer code. This manual was created to help content contributors become familiar with the system and should be used in conjunction with hands on training by EE trained instructors. Logging into Expression Engine To log into Expression Engine go to: http://www.fitchburgstate.edu/sysadmin

Here you’ll enter the same login credentials you use when using the Fitchburg State network. If these credentials don’t work, you may not have the proper permissions to be able to access the site and will need to contact the IT Department by visiting helpdesk.fitchburgstate.edu and entering your network credentials and submitting a ticket, or by calling 978-665-4500.


4

Creating a New Page If you want to create a new page, after logging in you need to choose ENTRY under CREATE and then choose the section you want to add the page under.


5

Page Components You’ll need to give your page a TITLE, fill in the PAGE BODY, and create a RIGHT COLUMN if necessary (See example on next page). If you want this page to have a link in the left column navigation bar, click YES under SHOW LEFT COLUMN NAVIGATION. Keep in mind that not every page needs to show up in the left hand navigation. In fact, your pages will look less “cluttered” if you minimize what appears there. This area should be reserved for your most important pages that people access often.


6

Page Title

Right Column

Page Body


7

Right Column Options In the previous page, you can see a RIGHT COLUMN was used to advertise, “What’s New?” This is the PRIMARY right column and can be used for anything you deem appropriate. If you choose the CUSTOM radio button under RIGHT COLUMN the area to add text will open and you can start adding content. If you have information that you would like on several pages, the IT Department can create what’s called a RIGHT COLUMN Call-Out. Once created, this will be available to anyone creating pages via a drop down menu.

Right Column Call-‐Out


8

Structure Tab Before you can publish the page you just created, you need to tell EE where you want the page to “live.” In other words, you need to determine the page that will be directly above the page you’re creating when viewing the website. This page is called the PARENT ENTRY. In the example on page 6, “Apply to a Graduate Program” is the PARENT ENTRY for the “Graduate Admissions Requirements” page.

PAGE URL – This will self populate with the PAGE TITLE. TEMPLATE – This should stay as structure/page.


9

Meta Tab The information you put under the META TAB is the information people will see when they search for your page via Google or other search engines.


10

TITLE - The title of the page is what appears at the top of the browser in the gray bar when looking at your page. In this case, the title is Graduate Admissions Requirements. You don’t need to include Fitchburg State University as part of the title. As you can see, it’s automatically added in the title on every page.

DESCRIPTION – This is the supporting information people will see in the search engine description when searching for Fitchburg State Graduate Admissions Requirements. It should be brief and, if possible, under 150 characters. KEYWORDS – These are words you think people are most likely to search for when looking for your page. You don’t need to include Fitchburg State University as keywords—they are hard coded for every page. Choose words that best describe the page you’re creating so people can easily find it. Check the APPEND DEFAULT KEYWORDS box if you want to include all of the other keywords that were created when the site was first developed. Options Tab When you’re first creating a page the STATUS under the Options Tab defaults to DRAFT until you PUBLISH the page. Other status options are CLOSED (people will not be able to see the page on our website) and OPEN (people will be able to see the page). When you’re finished creating your page and are ready to show the world your hard work, make sure to PUBLISH the page and the status will change to OPEN. Other Tabs You shouldn’t need to worry about the other tabs too much, but here’s an idea of what they are there for.


11

Revisions – After you create and save your page, the next time you go in to make an edit you will be “revising” the page. Each revision you make will show up in this section. Date – Date page was originally created. Permissions – This just tells you the status of the page. Saving and Publishing Your Page There are a few different ways to save your page, but only one way to make sure it’s PUBLISHED!


12

SAVE AND PREVIEW – As mentioned above, if you want to save what you’re working on without publishing it to the website you want to choose this option. This allows you to save your page as a DRAFT without kicking you out to the main EE screen. Choose this if you think you’re going to continue working on the page. SAVE AND CLOSE – This also saves your page as a DRAFT, but kicks you out to the main EE screen. You can choose this if you’re pretty sure you’re done editing the page, but aren’t ready to PUBLISH it yet. PUBLISH – You’re page has been officially saved and published to the website so when you go to a web browser you will see it “live” and the page status will now appear as OPEN. Editing a Page If you just want to tweak a page that has already been created, you want to choose ENTRY under the MODIFY section and then choose the page you want to edit.


13

You will only see the pages you’re responsible for. If you want to narrow down your search for a certain page, we recommend using the filters at the top of the screen. Making Changes to a Page Chances are, the changes you make to already existing pages are going to be minor. Just remember that after making the changes to PUBLISH the page so that it gets uploaded to the site. Closing and Deleting a Page To close a page, click on the page from the main screen so you can edit the content and then choose the ARCHIVE button at the top of the screen. This will automatically close the page and if you were to go under the OPTIONS tab or back to the main EE screen, you will see that the STATUS now shows as CLOSED.

To delete a page, login to helpdesk.fitchburgstate.edu and include the URL of the page you would like deleted.


14

Page Editing Tools The editing tools in EE are very similar to what you might find in other word processing programs. Here’s an explanation of each tool from left to right.

Cut – You can highlight text you want to delete and hit the cut tool (or the delete button). Some browsers might not support this tool, so you need to know the keystroke for deleting text and use that instead. Copy & Paste – This tool is self-explanatory. Again, some browsers might not support this tool, so you need to know the keystroke for copying and pasting text. Undo – If you edit something and realize it was a mistake, you can “undo” the change by clicking this button. Format – When creating Titles and Body Copy for pages, you want to make sure you follow the formatting used on the rest of the site. The different size “Headings” are generally for titles and subtitles and the “Paragraph” format is for body copy. Styles – Allows you to choose paragraph spacing and image alignment. Bold – Bold text.


15

Italic – Italicize text. Bulleted list – Create bulleted list. Numbered list – Create numbered list. Link – If you want to link text, you need to highlight it and then choose the link button. A menu will come up that allows you to assign the URL where the word or phrase will link. If staying within the Fitchburg State site, choose Open in this Window. If link goes to another website, choose Open in New Window. Unlink – If you want to unlink a word/phrase, just highlight it and hit this button. Anchor Link – If you want to type a word at the top of your page that links to a section at the bottom of your page, you want to create an anchor link. This button will allow you to add that functionality so the viewer just clicks the link and automatically jumps to the appropriate content. Insert Image – Use to insert an image that already exists on the website or upload a new one from your computer. Insert/Edit Image – Use to insert an image or edit one that is already on the page. Insert File – If you want to add a document to your web page, you can use this button. Toggle Full screen Mode – If you get tired of typing in a small box, you can toggle to a full screen so you can get a better look at what you’re typing. Remove Formatting – When pasting text into the EE template, you might inadvertently bring along some formatting that doesn’t play nice with EE. To get rid of this, just highlight the text and click this button.


16

< > – This button reveals what your page looks like in HTML code. If you’re familiar with HTML, it’s great to try and get to the bottom of troubling spacing or weird formatting issues, but if you don’t understand the code, we recommend not fussing with it. Select Text Color – The color palette for the site was pre-determined by the design team that created the site so this palette is limited. Best rule of thumb is to be consistent with the other pages. Continuity is key in website design. Select Background Color – Once again, this color palette was pre-determined by the design team. You probably won’t be using this button since the pages have default background colors throughout. Insert Pre-defined Template Content – If you want to include a quote on your page or have certain content or content formatting you use on a regular basis, IT can create a template of this content so you can just drop it in as needed. Toggle Spellchecker – Choose this if you want to have your text spell checked as you type. We recommend that you use this function to avoid spelling errors. Insert Special Character – If you need to insert a special character like an em dash or an accent mark, you’ll be able to find these characters under this button. Tables – The bottom row of icons are for creating and editing tables. Tables take a certain amount of trial and error to get just right. Suggestion: If you have a table on another page that is similar to what you want to create, try copying and pasting the table into the page you’re creating/editing and then change the text as needed. If you want to add color to your table, there is a predefined color palette for you to choose from. Adding Content You may have a document you have created in another program, like Microsoft Word, that you want to use to create a web page. The good news is…you can. The bad news is…you have to do a few things first.


17

Because different software uses different formatting, you need to copy the text from your Word document and paste it into a simple text editor application like Notepad on a PC or TextEdit on the Mac. When you do this, it removes all of the formatting so things won’t look “strange” when uploaded to the website. Once you take this step, you can copy the text from the text editor and paste it into EE, but you’ll have to reformat it to get it to look how you want it to when it is published to the website. If you’re creating content from scratch, just enter it into the page template like you would in a word processing program. Note on images: You CANNOT copy and paste images from a Word document to EE. You must upload them from your desktop to the website server by using the image editing tools. However, before you upload an image, read the following information about formatting and sizing images for the web in the next section. Page Design Elements With the redesign of the website in September 2013, there are some new design elements to take note of. To view the highlights of these changes, please visit: http://www.fitchburgstate.edu/css-test-page/ Headings There are four different heading options for the main body of your web page and two heading options for the right hand column. Body Copy Heading 1 – This is the heading style that is applied to the title of your page. It is configured by default. Heading 2 – This heading style is for subtitles. There are two options. If you look at the page referenced above you will realize that there is an option with a ribbon (default) and an option without the ribbon. The ribbon option was created to


18

break up lengthy pages and make them easier to scan, however, there are a couple instances that you may not want to use the ribbon.

1. When the subtitle falls directly below your main (H1) title. It may make the page look “top heavy.” 2. If you have a lot of H2’s on the page, you may want to consider making some of them H3’s or reducing the number

of H2 ribbon headings by getting rid of the ribbon effect.

How to choose the “No Ribbon” option for Heading 2:

1. Create your text as you normally would, highlight it, and choose Heading 2 under the formatting box.

2. The text will be created with the ribbon. While highlighted, go under the Styles menu and choose No Ribbon. That’s it! If you decide you want to put the ribbon back on, highlight the text and choose No Ribbon again.

Heading 3 – This heading is slightly smaller than H2 and has no ribbon effect. Heading 4 – This heading is slightly smaller than H3 and also has no ribbon effect. Right hand column Heading 2 – In the right column, the H2 does not have the ribbon option and can be used as either a title or a subtitle depending on the structure of your column. Heading 3 – This heading is slightly smaller than the H2 and acts as a subtitle in the right hand column.


19

Buttons You will now have the ability to add buttons to your pages without having to ask print services to create them for you. However, we ask that you create these sparingly. In most cases, a simple link will do, but if you have an event and you want people to “REGISTER NOW,” it makes sense to create a button. Fortunately, it’s easy to do.

1. Simply type the text you would like to include in your button on your page

2. Highlight the text 3. Click on the “link” icon in the tool bar 4. Add the URL you would like the button to link to 5. Choose BUTTON – GREEN under Class. 6. You should now see the button on your page. 7. SAVE & PREVIEW to make sure it is working properly. 8. PUBLISH!

Quotes Testimonials are a great thing to feature on a university website. It gives the site a “personal touch” and is even better if you can include a photo of the person giving the quote. Regardless, EE makes it easy to create testimonials that stand out from the other text on the page. Here’s how:

1. Place your cursor on the page where you want the quote to appear. 2. Click on the INSERT PREDEFINED TEMPLATE CONTENT icon 3. A second box will open. Under “Template” choose QUOTE


20

4. Another screen showing quote text will open. Click INSERT at the

bottom of that screen to insert it onto your page.

5. Once inserted, just highlight the quote and type the text you would like to include as well as who it’s from in the bottom of the box.

6. SAVE & PREVIEW to make sure everything looks OK & PUBLISH!

Bulleted Lists Adding a bulleted list in EE is very similar to adding a bulleted list in a word processing program. Just click on the Insert/Remove Bulleted List icon in the toolbar and start typing. Non-Bulleted List In certain instances, you may want to create a list, but having bullets just makes the list look too “heavy.” In these instances you can create a bulleted list, highlight it, and choose No Bullets under “Styles.” Numbered List Creating a numbered list is the same as creating a bulleted list except you choose the Insert/Remove Numbered List icon in the toolbar instead.


21

Adding Images The Basics Images are easy to add in EE using the image editing tools mentioned above. You just need to know a few things. Format – Images should be saved as a .jpg, .png, or .gif file. All files should be saved at 72 dpi for quick loading. Image Size – If you want the image to go in the body copy and you have a right column, the image can be no wider than 500 pixels. If you want the image to go in the body copy and you DON’T have a right column, the image can be no wider than 700 pixels. If you want to add an image to the right column, the image can be no wider than 160 pixels. How to Add an Image When you’re ready to add an image to your page, you need to put your cursor on your screen where you want the image to appear.

1. Choose the INSERT IMAGE icon on the toolbar. The image editor will open and you’ll see a screen that looks something like this.


22

2. Choose the appropriate folder on the left to place your image. If you don’t see a folder for your department or section of the website, you can create a new folder by choosing CREATE FOLDER at the top right of that screen. Please note the naming convention of the folders. If more than one word we ask that you use initial caps on each word and no spaces between the words (example: AlumniAssociationGolf).

3. When you can see the images in your folder, you can

choose one of those or click UPLOAD at the top of the screen to upload a new photo. A new window will open.

4. Click CHOOSE FILES to select the photo you want to

insert from your computer. A new screen will open showing the file you selected. Click UPLOAD TO SERVER.

5. Once your photo is uploaded, you need to resize it as described under the “Image Basics” section. Click the arrow underneath the photo and choose EDIT from the menu.

6. When the next window opens, choose the RESIZE button and you’ll be able to enter the dimensions. Make sure the CONSTRAIN PROPORTIONS box is checked to avoid your photo from looking “squished” or “stretched.” In this example, we changed the width to 500 pixels because our page has a right hand column. By doing that, the height changed to 332 pixels. If you’re happy with your photo, you can click APPLY. If you would like to crop the image any further, use the CROP button, make your changes, and then APPLY.


23

PLEASE DO NOT: Please DO NOT resize your photos using

the INSERT/EDIT IMAGE icon and changing the DIMENSIONS. Your photo will appear smaller on screen, but it will still be a large file that will take up a lot of space and will download slowly.

7. Save your image. Another window will open and give you the option to save your photo with the same name or give it a different name. We recommend leaving it as is and then clicking SAVE.

8. When you’re done, you’ll be brought back to the original image-editing

screen. Click on the image and it will be inserted into your page.

9. If you want to change the alignment of the image, click on the image and then choose the INSERT/EDIT IMAGE icon in the toolbar. There you’ll be able to change the alignment of the image as well as


24

some other image editing properties. Choose UPDATE when you’re done with your changes.

10. Make sure to SAVE & PREVIEW your page before clicking PUBLISH to make sure it looks the way you want it to. CONGRATULATIONS! YOU’RE DONE!!!

Inserting a File Inserting a file is very similar to inserting a photo. To insert a file, you just need to click on the INSERT FILE icon on the tool bar. Then follow steps 2 – 4 in the How to Add an Image description above followed by steps 7 – 8 and then hit PUBLISH. Creating a Marketing Block If you have a special event or program you want to promote on your web pages, you might want to use a marketing block. This can be created in the right hand column of your page, but you will need to contact the IT department at helpdesk.fitchburgstate.edu for assistance. They will ask you to provide them with three things.

1. Photo sized 175 pixels (w) x 152 pixels (h) 2. Text you would like to appear in marketing box 3. Link URL you would like picture/text to link to

Creating an Image Gallery If you have a series of pictures from an event that you would like to showcase, you can create an image gallery on your web page that will look like this. (Click the photo to see image gallery: http://www.fitchburgstate.edu/campus-life/). There’s


25

one caveat. Not all browsers can accommodate this functionality, so there’s a chance the visitor will only see the first photo in the grouping. To create an image gallery, you will need to contact helpdesk.fitchburgstate.edu and they will give you the permissions and information necessary to do so.

Creating an Emergency Notification If you are having an event and the details of the event change last minute or the event is cancelled due to weather, you can create an emergency notification. Just type the text you want to appear in the box, choose Emergency Message under “Styles” and that’s it. Questions? If you have any questions when creating or editing web pages, please contact the Digital Marketing Manager or the IT Department at helpdesk.fitchburgstate.edu or by calling 978-665-4500.

ee training manual - fitchburg state university · pdf fileexpression engine training manual...

Documents