BHM Website Teacher User Guide How to Login 1. Go to HUhttp://bhmschools.org/userUH 2. Enter your username and password and click Log in How to Change Your Password 1. Go to My Account in your Nav bar (if you didn t just login). 2. Click the Edit tab in the upper right hand corner on your screen. 3. Enter your new information (make sure the passwords match) and click Save to complete change. How to Log Out 1. Click the logout link at the bottom of the Nav Bar menu. Note: Unless you click the logout link you will remain logged into the system (i.e.: your session will not be timed-out). It is recommended that you logout when you have finished using the system to prevent unauthorized access. 1
EEditing Your Teacher Page Search your last name and find the page linking you as a teacher/staff member. Click on the Edit tab. You do not need to edit your position/grade, your name, image, phone or email. Where you can start editing is your links to your Google Site, Wiki/Blog or Courseweb site 1. In another window or tab, navigate to your external teacher page in Google Docs, Wordpress, or courseweb. 2. Select the web address and copy it (Ctrl & C Mac use Command) 3. Click in the appropriate box and paste (Ctrl & V Mac use Command) Note: Google Site = Google Site; Wiki/Blog = WordPress, Courseweb = Courseweb (aka Moodle) If you have more than one course in Courseweb, enter the title of the course in the Title box and paste the website into the URL. If you have another Courseweb site, click on Add another item. 4. Body Enter information in the Body. This can be a personal intro about yourself or information about your class. It can be edited daily, weekly or as often as you need to. Entering information in the body is just like typing in Word with all the familiar toolbars. You can also cut and paste from Word but you must copy using the icon. Word clipboard 2
5. Links Enter in any links that you want to share on your page. Describe the link in the Title field and enter the entire URL starting with the http:// You can add as many links as you need to by clicking on Add another item. 6. Downloads Typically downloads are files like PDF, Word documents, etc. First Browse for the file. Once selected, click on Upload. Then enter a Description for the file. You can add as many downloads as you need to by clicking on Add another item. How to Save Your Changes 1. Once you are done making changes, simply click the Save button at the bottom of the edit screen to commit those changes. Changes will go live immediately. 2. If you choose to click on Preview to see your changes before they are committed and go live, please realize that the preview is not an accurate visual representation of what the live page will look like, but can be useful for proofreading and double checking your work. Clicking preview will not save your changes, so be sure to click Save to keep your changes before leaving the edit screen. 3
Adding a Slideshow to a Page On the page where the slideshow should appear, is a quick link to create a new child Slideshow. Click on Slideshow. Enter a title for the slideshow. Do not use the Header Image. It shows up on the slideshow page. Enter Teaser Text to tempt the viewer to look at the slideshow. The Teaser Text only appears if the slideshow is posted on the school homepage, for example. The Images section is where the photos are uploaded for the slideshow. They are uploaded individually. Click on Browse to find your file. Click on Upload. Enter information in Description. The text is displayed on the slideshow. Click on Add another item to upload the next photo until done. The order of the photos can be rearranged by dragging the 4-arrow icon to the preferred order. The first image is what will be seen with the teaser text. 4
The Body text should contain most of the information about the slideshow such as the event, location, date, etc. Leave all other fields alone and Save the slideshow. The slideshow rotates through pictures every 5 seconds. If you put your mouse over the picture, it pauses the rotation. There are arrows to scroll through pictures. The slideshows will show up on your teacher page in grid format: 5
If you want to change the order that the slideshows show up on your page, select the Children tab at the top of your teacher page. The items will show up in reverse order that they will show up in the grid format so that the latest slideshows go to the front of the grid. You can move them around by dragging them using the cross icon. Make sure and save the new child order by clicking on Save child order. You can also add a slideshow from this page as well. 6
How to Edit HTML with the WYSIWYG Editor The WYSIWYG (what-you-see-is-what-you-get) editor is a tool to help write the html code required to control the display of content on the web. The editor works best in the Firefox. The WYSIWYG functions much like a word processor and should look familiar to anybody who has used Microsoft Word or a similar application. Much like a word processor, you can alter the style of text by selecting from one of the style buttons in the tool bar or insert structural or multimedia content by clicking one of the items insert buttons. The following table provides a description of each of the text formatting options: Icon Name Description Paste from Word/Text When pasting anything from an external source, use these Icons to paste. Embed Code If you want to embed code, use this icon to insert the code. Most Google maps will be embedded for you. Bold, Italic, Underline Align Text Bulleted List (see tips below) Numbered List (see tips below) Indent, Outdent Insert/edit Link Remove Link The width should be changed to no more than 550 pixels wide. Use these button to bold, italicize or underline the selected text (keystroke alternates: PC Ctrl+B, Ctrl+I, Ctrl+U / Mac Command key instead of Ctrl) Use these buttons to left, right or center align the selected text. Use this button to covert the selected paragraphs to an unordered (e.g., bulleted) list. A bulleted list uses a bullet character at the beginning of each new list item. Here is an example of a bulleted list: item one item two item three Use this button to convert the selected paragraphs to an ordered (e.g., numbered) list. A numbered list numbers each list item automatically. Here is an example of a numbered list: 1. item one 2. item two 3. item three Use this button to add or remove indenting from a selection. Use this button to add a hyperlink to selected text, or to edit an existing hyperlink. This button will only be active when text is selected (highlighted). Use this button to remove a link from selected text. This 7
Styles button will only be active when linked text is selected. Use this to float pictures, tables or text either to the left or right Format This drop-down list provides a set of pre-defined styles, similar to those found in Word, or other text editors. You can use the formats to create a visual hierarchy in the text you are entering. Numbers in header styles represent the header s size and importance with 1 being the largest and most important. Headings 3 & 4 have been used on your site for the Content sections. Not all formats are available on all pages. Insert Image Remove Format Disable/Enable rich-text formatting Horizontal Line Undo, Redo Table Functions Use this button to insert an image. Use this button to remove the formatting on the selected text. Click this link to toggle between the rich-text formatting options and plain-text. Underneath text body box. Inserts horizontal line Use these buttons to undo or redo the most recent changes you have made within the WYSIWYG These buttons let you create and edit html tables. You can edit table properties; insert columns and rows and merge and existing cells. Most of these buttons are only active when an existing table or table cell is selected. If you want to embed a video, use the embed icon. The embed code may not show up cut will be visible when the rich text is disabled. 8
Headers An important element of keeping code clean throughout the site is utilizing headers instead of local styling (like font sizes and bolding). This will enable us to make global changes to headers and ensure that styles are consistent throughout the site. When do you use headers? Whenever you have a title by itself (with a hard break or return after it) that you want stylize, headers are the way to go. To create them: Highlight (click and drag across the text) the text or paragraph you want to apply the style to. Choose the heading level you would like to apply A note about which heading to use. The lower the heading number, the larger the text. Heading 3 is used for most large titles within content. Heading 4 is for subheads. Paragraph is just the basic text. Do not use Heading 1 and Heading 2 as these are for design areas of the site. Inserting an Image Using the WYSIWIG Remember: **Photos need to be resized to a smaller size before uploading** Naming scheme: school or department acronym & - & imagename so it would look like this: bcms-hayden.jpg While using the WYSIWYG editor to edit content, place the cursor where you want the image (top of page, between paragraphs, etc.) and click on the image button The Insert/edit Image window will pop up. From here you can find the picture and edit the attributes of the image. You may type in the URL for an existing image, or more likely, use the image browser by clicking the image browser button (circled). The image browser button will pop up a new window containing a list of all of the available images in the images folder on the server. 9
Click on the upload button (by the red Help!) on the top left corner of the popup window. You can then browse and locate the image. With the image selected in the browse window, click on Open. Once the image is selected, the filename will be listed so click on the Upload button. The image will appear in the File Browser window. Click on Send to tinymce which will place the URL or web address of the image in the Insert/edit Image Window. Enter the rest of the desired attributes. Make sure you include Image description for visually impaired web browsers. After the picture is inserted, use the WYSIWIG editor, click on the picture. Use the Styles to Float Left or Float Right and text will wrap around the image. 10
Inserting a Link Select the text you wish to link to either a website or email address. Click on the link button. The link dialog will popup. Enter the URL (web address) of the link. If it is an email link, type in mailto: and then the email address. In Target, select it so the link will appear in a new window. Under Title, fill in the information such as the website like Google or whatever is relative. If you are to linking to an interior link (within our website of www.bhmschools.org), you do not need to enter the full path but can exclude the domain. Start with a / and then the first child. For example, type in: /schools/buffalo-high instead of http://www.bhmschools.gortonhosting.com/schools/buffalo-high If you are linking to a spot lower in the page itself, create an anchor link. To create an anchor link use the full path to the page followed by the # symbol followed by the name of the anchor, for example: about/resources#top) When placing an email address into the content area; do not link the email as invisimail will not reduce spam if a link is used. Invisimail will automatically convert emails into links. Remove a Link To remove an existing link, select the link or place the cursor within the link text and use the remove link button which is the broken chain. 11