Rapid Web Designer. Professional Development. For Technical Support Contact: Customer Service and Support Dept. (813) 744-6673

Rapid Web Designer For Technical Support Contact: Customer Service and Support Dept. (813) 744-6673

Rapid Web Designer Manual Vision The School District of Hillsborough County will provide the best education in the nation. Mission We will provide all students the knowledge and skills necessary to reach their highest potential. Board Members April Griffin, Chair Carol W. Kurdell, Vice Chair Doretha W. Edgecomb Candy Olson Cindy Stuart Susan L. Valdes Stacy R. White, Pharm.D. MaryEllen Elia, Superintendent Daniel J. Valdez, Deputy Superintendent George Gaffney, Assistant Superintendent for Instructional Support Jamalya N. Jackson, Director, John C. Ellison, Supervisor, Technology Training Version: 7.11.13web&pd Internet Explorer, the Internet Explorer logo, I.E., and the Microsoft logo are trademarks of Microsoft Corporation. Microsoft Corporation has not authorized, sponsored, endorsed, or approved this publication and is not responsible for its content. Adobe Acrobat Reader is a registered trademark of Adobe Systems Incorporated.

Table of Contents Web Design Considerations... 1 Introduction... 1 Overall Design / Content Requirements... 1 Other Web Site Considerations... 2 Get Ready!... 3 Rapid Web Designer Glossary of Terms... 4 Setting Up Rapid Web Designer... 5 RWD Site Container... 6 Rapid Web Designer Page... 7 RWD Web Page Style Examples... 8 Traditional RWD Style (without optional Special Content )... 8 RWD utilizing Special Content (Portal Mashup)... 9 Customizing a Rapid Web Designer Page... 10 Header Tab... 11 Adding a Title and Subtitle:... 11 Scrolling Messages... 12 Adding a Scrolling Message... 12 Viewing Web Pages... 13 Utilizing Open Page in Browser... 15 Navigation Sidebar... 17 Navigation Sidebar Content Sub-Tab Components... 17 The Information Sidebar... 18 Entering a Row on the Information Sidebar:... 19 Adding a Mailto Link on the Navigation or Information Sidebars... 21 Web Page or Page Body Content... 23 Entering Content on the Web Page... 24 Rapid Web Calendar... 25 Adding Information to the Calendar... 25 Linking the RWD Calendar to the Web Page... 29 Creating a New RWD Page Using the Item Picker... 31 Adding New Web Pages... 31 Deleting Pages... 34 Creating Tables... 35 Formatting Tables... 36 Inserting Horizontal Lines... 37 Adding Graphics to the Content Area... 38 Saving Images from the Internet... 39 Adding Pictures to the content area of the web page:... 39 Locking Images on a Web page:... 42 Adding Information for a Picture... 43 Adding Rows to the Navigation Sidebar... 44 Inserting Rows into the Navigation Sidebar... 45

Uploading Files... 46 Creating Hyperlinks... 48 Adding a Hyperlink on the Navigation Sidebar... 48 Linking to documents from the Navigation Sidebar... 49 Adding a Hyperlink on the Information Sidebar... 50 Linking to documents from the Information Sidebar... 50 Adding a Hyperlink to a Scrolling Message... 52 Adding a Hyperlink to an Image within a web page... 53 Adding a Hyperlink to Text within the Web Page... 54 Linking to documents from the Content Area... 55 Linking a Document to a Calendar Event... 56 Inserting Markers... 59 How to Create Markers/Anchors... 59 Linking to a Marker/Anchor... 60 Moving From the Top to a Marker Down the Page... 60 Creating Backup Copies of RWD Pages... 62 To create a backup copy of RWD pages... 62 Restoring a backup copy of RWD page... 63 Deleting Older Versions of Rapid Web Pages... 64 Recovering (Deleted) RWD Pages... 65 Using Rapid Web Designer s Message Blog Functionality... 67 Safety First... 67 Creating Entries in Homework or News Blog... 68 Creating New Blog Posts... 69 Other Message/Blog Post Features & Considerations... 70 Linking the Message/Blog to the RWD Teacher Website... 71 Ongoing Assignment Postings... 72 RSS Feed Setups... 72 Advanced RWD Topics... 74 Enhancing Your Website... 74 Don t forget Edsby!... 74 Portal Mashup for RWD Advanced Users... 75 Creating a Web Page Utilizing Portal Mashup... 77 Creating FC Documents... 80 Creating a Static or Scrolling Container... 84 Linking the Static/Scrolling Container to Home Page... 85 More Portal Mashup Design Considerations... 86 Graphics Gallery Slideshow... 88 Design Considerations... 88 Using the Collapse Non-Headlines... 95 Utilizing Literal HTML in RWD Web Pages... 96 Appendix A: Troubleshooting Frequently Asked Questions... 99 FAQ 1: Home Page is Not Found... 99 FAQ 2: My RWD page tabs have disappeared... 100

FAQ 3: I made changes to RWD, but cannot see changes on the Internet (using selected browser)... 101 FAQ 4: I have a little empty box on the right side of one of my web pages.... 101 FAQ 5: My edit bar is missing... 102 FAQ 6: My home page has disappeared. What happened?... 102 FAQ 7: My pictures seem to take up too much space... 103 FAQ 8: My home page s Navigation Sidebar stretches all the way across the page... 105 Acceptable Use Policy/Telecommunication Guidelines... 108

Web Design Considerations Introduction The District hosts teacher (class) websites that are public facing and allow access to all. These websites utilize Rapid Web Designer (RWD). Schools utilize the same tool for their websites and all teachers websites should be linked to these sites. Having a website is a useful marketing tool for our district s magnet, IB, CTE, Adult Centers, and similar programs. Further, teachers in a wide variety of curriculum areas benefit from having public facing websites (e.g. AP and CTE). Beginning school year 2013-2014, the district will be using Edsby for its gradebook and social learning program. Edsby is a closed program that will be available to schools, teachers, (enrolled) students and parents. Students can be advised of class assignments, projects, assessments within Edsby. Parents will be provided access to this program to monitor their students progress. In many cases, teachers will not feel the need to have both a public (RWD) website AND an Edsby class page(s). The district encourages teachers to utilize Edsby and for schools to continue utilizing RWD for their school s website. It is important to recognize that as we transition to Edsby in 2013-2014, schools may want to adopt a faculty page, listing teacher contact information (email/voicemail) and offer teachers the opportunity to post class newsletters, if applicable. Overall Design / Content Requirements Think like the user! Whatever the goal of the web site; information should be the main theme. Ask this question of the web site: Can the target audience easily do what they want to do and find what they need to find (e.g. fill out an application, send e-mail, and locate information)? If your target audience has difficulty using the web site, go back to the drawing board. 1. Keep the user-interface simple and uncluttered. Use graphics and animations sparingly. 2. Make sure that all graphics are meaningful and relevant to the content on the web site 3. Control over page layout can be obtained using tables 4. When acronyms are used, the meaning must be spelled out the first time it is used. Do not assume the reader knows any acronyms. 5. Do not use "under construction" words or graphics. If the page is not completed, do not make it public. 1

6. Be mindful of copyright. Never use text or graphics from another author's Internet pages unless the author explicitly states it may be freely copied or if appropriate arrangements are made with the author. When copying or paraphrasing information from an Internet page, always make an attribution to the page and author. If it is critical that a reader sees precise information available on a specific Internet or Intranet page, consider making a link to the page. 7. Avoid Specific Dates. Try to place any date sensitive information on the website s calendar. If there is a weekly spelling test in your reading class, for example, describe it accordingly, but use weekly instead of September 5. Then place the weekly event into your calendar that is linked to your website. 8. Test all pages thoroughly. Since the district is required to use an older version of Internet Explorer in support of our business and HR/PR systems, make sure to test your web pages in other browsers (Google Chrome or Mozilla Firefox, for example). Other Web Site Considerations All approved teacher web pages are to be hosted by Hillsborough County Public Schools All web pages must be reviewed and approved by the administrator/principal before being linked to the department s/school s web site Schools that post student pictures on the web must have parent/guardian permission on file (See Appendix for permission form) specific to that web page. Students shown in groups should never be individually identified and student names should not be displayed on the web site. Hyperlinks from a teacher web page to a site outside the district should be created for educational purposes only. The link must be tested at a district/school site to make sure it can be opened through the district s web content filtering system. Every effort must be made to ensure the accuracy of the content, the spelling and grammar and decorum appropriate to Provisions of copyright must be strictly followed Make sure to update information on a regular basis If progress grades are to be posted to a teacher s or school s web page, parent permission must be on file and grade postings must be posted to the district s secure server in accordance to written procedures If there are any questions regarding a web page, contact Gregory Hart, Manager, Web Communications at 840-7047. 2

Get Ready! For this course, it is suggested that participants create a folder on the assigned computer s Desktop. Use this folder for saved items (photos, image files, documents, etc.) during the class. 1. On the Windows Desktop, right-click and select New 2. Click Folder 3. Name the New Folder <yourname> Files 4. Press Enter 3

Rapid Web Designer Glossary of Terms The following terms are used in the entire body of RWD documentation and are defined here so that they do not need to be explained within the text, although they may be explained. Container - A folder or a conference that contains documents, files, or other containers Home Page - The page opens automatically when users access the website using a web browser. The home page is the key to the website. Never delete or rename this page. Lightbox a lightbox is a window that overlays onto the current web page Markers Markers are links inserted by the web page designer to allow web site visitors easy navigation in and around web pages. Page Body - The area of a web page that is in the center of the page and that is NOT part of the RWD Header Section, Header, Navigation Sidebar or Information Sidebar. On the RWD form, the Page Body is the part of the form that is visible regardless of which tab in the form is selected. Information in the page body area can be formatted to desired specifications. Portal Mashup RWD supports a tabbed-style of web page design called portal mashup. Users can elect to utilize this web design style (see Portal Mashup section). RWD Container - A container that specifically contains web pages, folders, documents, images, and calendars that are specific to a teacher web site RWD Message Blog an RWD site object entitled Blog/Message that allows teachers to provide one way communications to students (and parents). Class information in an email form can be easily added by the teacher to detail homework assignments and other classroom expectations. RWD Page Builder Form - A First Class form used to create a webpage to be viewed on the Internet URL - (Uniform Resource Locator) an address for a web page or a First Class object Web Site A collection of web pages that relate to one another and that are usually stored together in a container 4

Setting Up Rapid Web Designer Before getting started with Rapid Web Designer, the latest version of First Class should be installed on each computer. To obtain the latest version of First Class go to http://www1.sdhc.k12.fl.us/clientdownloads/ Once First Class is installed, the settings file must be updated on each computer that the user will be using to work on the Rapid Web Designer web site. With the newest version of Rapid Web Designer, teacher web site accounts begin with two new containers: RWD Builders RWD Container - This folder should have the school s site number plus the teacher s last name 1. Log into First Class 2. Locate and double click the RWD Builders icon on the First Class desktop or inside the RWD site container NOTE: SC denotes Special Content (Portal Mashup) is available, however NOT required. 3. Double click the RWD_Builder_SC.rez file to upload the files needed for web page development 4. Click Update 5. Close the RWD Builders window 6. Locate and double click the RWD site container folder located on the First Class desktop to continue 5

RWD Site Container When the RWD container is created by Web Communications, it will be located on your First Class (IDEAS) Desktop. Open the RWD container (also known as the RWD conference) NOTE: Your RWD Site Container will be name ****YourLastname (where **** is your school s site The RWD site container allow users to: 1. Add (a) Site Object. A Site Object might be a Podcast, a News Blog, or a File/Resource container among others. 2. Add (a) Web Page. When accessing this functionality, the user will be able to add new web pages utilizing web page templates. 3. Copy Page. Users can copy a page(s) to allow them to experiment with new features/functionality or additional information before making the page live. 4. Backup Page 5. Protect and Unprotect items. When users create RWD web pages, they are automatically protected. This means that a user can not delete the (protected) web page without understanding how to unprotect the page. Great safety feature! 6. The left side of the container has folders, default message/blog objects and a class calendar 7. Open in Browser. This feature allows users to view their web pages without having to open a browser window. 8. The right side of the container will have the user s Home Page and any other pages that have been created 6

Rapid Web Designer Page All Rapid Web Designer pages begin with the Rapid Web Designer Web Page Builder Form. This form is comprised of two parts, the Builder Form itself and the Page Body area at the bottom of the Builder Form. This section is the Rapid Web Designer Page Builder form. NOTE: If your RWD Web Page Builder Form does not look like this, update your settings (see RWD Builders). Web page content is entered into the Page Body Area. 7

RWD Web Page Style Examples Traditional RWD Style (without optional Special Content ) 1. RWD Page/Subject Title 2. Page Header Title 3. Page Header Sub-Title 4. Navigation Sidebar 5. Information Sidebar 6. Page body content 8

RWD utilizing Special Content (Portal Mashup) 1. Scrolling message 2. Tabs > Columns in RWD In this example, Portal Mashup is ON. Teachers can elect to utilize RWD s Portal Mashup (tabs are added to the web page). 9

Customizing a Rapid Web Designer Page The home page is automatically added when RWD site container is created. When the page builder form opens, it is already named, home page. The Page Name becomes part of the URL. Information that is entered in the Subject field will show in the browser title bar. Abstract or Keywords are used by search engines. It is not necessary to add information in the Abstract or Keywords fields. 10

Header Tab The header tab is used to add a title to the web page. This information will be displayed above the Header Links Bar on a teacher s web page. Completing a Header Tab with a Title/Subtitle is not required. Adding a Title and Subtitle: 1. Click the Header tab 2. In the Header Section Content section, click the Title and Subtitle tab 3. Click the Title field and enter the name of the page, e.g. Welcome to Our Class Web Page Web Design Considerations: The Title & Subtitle fields are optional. If the Title and/or Subtitle fields are utilized, space it taken on the page. This information can be included in the web page s content area. 4. Click the Subtitle field and enter a subtitle, if desired Page Header: Title & Subtitle 11

Scrolling Messages Scrolling messages, hyperlinks and tips can be added to a web page. Scrolling messages can be used to display important messages because they are easily seen on a mainly static page. The message scrolls from right to left above the Header Links Bar. Two messages can be added, if desired. Tool Tips can also be added to provide more details to the scrolling message. The scrolling message is an optional feature and can be added or deleted at any time. Adding a Scrolling Message 1. Click the Scrolling Message tab on the Header portion of the Rapid Web Designer page 2. Click the checkbox Include Scrolling Message(s) 3. Click in the Message A field and enter the desired scrolling message Example: Welcome Back to School 4. Click in the ToolTips field and enter a message that will display when the mouse hovers over the scrolling message ( Make sure to memorize our school s motto! ) 5. Click Save and Close 12

Viewing Web Pages As web pages are created, they are automatically available to be viewed on the Internet. Launch an Internet web browser session, enter the following website address (URL): Teacher websites at Shore (school site #3961) are all contained in the Teacher folder in Shore s RWD site container (managed by Shore s webmaster). In this example, the teacher at Shore Elementary s site container is entitled 3961teacher, so this teacher s website address (URL) will be 13

Your Turn: What s your website address (URL)? Your School s name Your School s site # Your (personal) RWD Site Container s name Write your website address (URL) here: Open a browser session and enter your website address (as above). 14

Utilizing Open Page in Browser Instead of clicking out of the RWD site container and then opening a separate browser window, newly created RWD site containers have an object labeled Open Page in Browser. This object will provide the website owner (usually the teacher) a way to open their website, after setting it up, without having to open a separate window to do so. This is very helpful during the design process. 1. Open your web page (see Viewing Web Pages exercise) 2. Open the RWD site container and locate the Open Page in Browser site object (left side of the container). NOTE: If Open Page in Browser is not available in the site container, click Add Web Page (the shortcut to Open in Browser is available there). 3. When your (teacher) website (home page) is open, copy the website address (URL) by right-clicking in the address bar of the browser. 15

4. Right-click on the Open in Browser object in the RWD site container and select Properties 5. In the Properties window, right-click in the URL field and select Paste 6. Click OK After creating this link, open the RWD Site Container and double-click on the Open in Browser object and the teacher s home page will open. Check the appearance of the web page. Select the Open in browser object to see the design changes. 16

Navigation Sidebar This area is used to display text or image links throughout the website. The Navigation Sidebar is displayed on the left side of the web page. It can contain text or graphics. While a Navigation Sidebar s length is not limited, best practices dictate that it be fairly short providing links relating to topics on the current page or sections of the existing page. Use the Navigation Sidebar to provide the web page structure. By using Headlines, pages can be grouped by subject or importance. Navigation Sidebar Content Sub-Tab Components Add New Row Adds a new blank row at the bottom of the rows of the Navigation Sidebar Remove Selected Row Deletes the selected headline or link from the Navigation Sidebar Insert New Row A new row is inserted above the selected row Headline When checked, the row will become a headline on the Navigation Sidebar Display Text This field contains the text that will be displayed to represent the link on the web page. The text entered here will determine the width of the Navigation Sidebar Use Image This checkbox indicates that RWD will use an image in place of text for the link on the Navigation Sidebar. If it is checked, a valid path and filename for the image must be entered Image Path/Filename This field will only appear if the Use Image box has been checked. Enter the path and filename of the graphic that will be used instead of text. The path usually consists of the name of the folder, in which the picture is stored, followed by the specific file name, including the extension (e.g. image/computer.gif) Link To Enter the actual URL of the link. A URL can be a place on the same page, provide a link to another RWD page or document, or another web site on the Internet. If using a web site, make sure to enter the entire URL including http:// Open in New Window If chosen, this option will open the selected web page in a new browser window Special Format This feature allows the web designer to designate one of several formats: Calendars, Folders or Conferences Collapse Non-Headlines - If this checkbox is checked, the non-checked links under the headline will not be visible until the Headline is clicked 17

The Information Sidebar The information sidebar is a great way to quickly draw attention to specific information that can be relayed in more detail than is possible with a simple link. The Information Sidebar functions almost identically to the Navigation Sidebar, but in addition to links, it can also contain a description of the item that explains the subject in significant depth so that a user can have more information before they decide to follow a link. Add New Row creates a new row on the Information Sidebar. Remove Selected Row removes a selected row from the Information Sidebar Insert New Row inserts a blank row above the selected row Display Title used to enter information or title on the headline Content field contains the main content of the selected section. The content will be displayed under the Display Title Link Display field is displayed on the web page under the content section. Uses click the Link Display to open the URL Link To the URL of the destination webpage, or file to be opened The information sidebar is used to display important information that requires attention (e.g. contact the teacher details (as shown on the right), reminders for tests, field trip forms, etc). It can then link to more detailed information. The information sidebar appears on the right side of the web page. 18

Entering a Row on the Information Sidebar: 1. Check the Include Information Sidebar checkbox 2. Click in the Display Title field and enter the desired text 3. Click in the Content field and enter the text of the message or announcement 4. Click in the Link Display field and enter the details, (e.g. Visit Lowry Park Zoo) 5. Click in the Link To field and enter the URL (e.g. http://www.lowryparkzoo.com) If additional rows in the Information Sidebar are desired, click Add New Row to place it at the bottom of the Information Sidebar list or Insert New Row to place the new row above the selected row. 19

Check the appearance of the web page. Select the Open in browser object to see the design changes. Leave this browser session open. All additions and changes to the web page will be visible after selecting the Refresh button on Internet Explorer. It may be necessary to hold the control key down when refreshing the page. This results in a forced reload of your web page and is often successful when the standard refresh does not produce the desired results. 20

Adding a Mailto Link on the Navigation or Information Sidebars Creating a Mailto link is a good way for parents and web viewers to contact the teacher via email. When the link is clicked, an email form is created with the teacher s email address automatically entered. The Mailto link can be added to the Navigation Sidebar or the Information Sidebar. Create a Mailto Link from the Navigation Sidebar 1. Open the RWD home page 2. Click the Navigation Sidebar Tab 3. Add or Insert a New Row 4. Enter text in the Display Text field Example: Contact Me 5. Click in the Link to field 6. Enter the Mailto link as mailto:firstname.lastname@sdhc.k12.fl.us Example: mailto:wilma.rudolph@sdhc.k12.fl.us 7. Click Save and Close 21

Create a Mailto link on the Information Sidebar 1. Open the RWD home page 2. Click the Information Sidebar tab 3. If necessary, click the checkbox next to Include Information Sidebar 4. If necessary, click Add New Row 5. Enter text in the Display Title field Example: Contact Me 6. Enter text in the Content window 7. Type information in the Link Display field such as a name Example: Mrs. W. Rudolph 8. Enter the URL in the Link to field Example: mailto:wilma.rudolph@sdhc.k12.fl.us 9. Click Save and Close 22

Web Page or Page Body Content The Page Body Content is in the center of the web page and is NOT part of the RWD Header Section, Navigation Sidebar or Information Sidebar. Information in the page body area can be formatted to desired specifications. Use this symbol to collapse the header to make more web design space. 23

Entering Content on the Web Page 1. Click the content triangle to collapse the web page header as shown above 2. In the content area enter the desired information to appear on the main page of the website Font, size, and color preferences from First Class are the default settings in RWD. If desired, formatting changes can be made by highlighting the text and applying the changes. Check the appearance of the web page. Select the Open in browser object to see the design changes. The main content of the web page is entered here. 24

Rapid Web Calendar Every RWD user has a First Class Calendar in the RWD Site Container. The calendar is located on the left side of the split screen. The calendar can be used to add important dates, announcements, or assignments for the school or class calendar. NOTE: The RWD calendar is one calendar that most First Class (IDEAS) users have and/or have access to. Others are their school s Internal calendar and their person (First Class) calendar. Adding Information to the Calendar 1. Open the RWD site container 2. On the left side of the split screen, locate and open the calendar 25

3. By default, the calendar opens in the full month view NOTE: The new calendar event window can be opened by double-clicking on a specific date in the calendar window. 4. Select the date to add the information 5. On the New button, click the dropdown arrow and select New Event or double-click on the selected date 26

6. Once the New Event Screen opens, type the name of the event or assignment in the Event field Check No time event to remove times from the event. Use this color dropdown to color code the calendar event. Consider using different colors for subjects or class period differentiation. 7. Click in the Starts at field and select the event/assignment start time 8. Click in the Ends at field and selected the event/assignment end time Note: If appropriate/necessary, check the No Time Event box. This will remove the time option for the event 27

9. If this is an event that occurs regularly, e.g. a Vocabulary Quiz, select the Repeat tab to add the repeat interval and the event s duration 10. If desired, enter a message in the content window. This message will display when the visitor clicks on the event name. 11. Click Save and Close to add the event to the calendar Note: Repeating events 12. Click Save again to close the calendar 28

Linking the RWD Calendar to the Web Page Once the events have been added to the calendar, the calendar is now ready to be linked to the web page. 1. Open the home page 2. Click the Navigation sidebar tab 3. Click Add New Row 4. On the new row, enter the desired Display Text Example: Class Calendar 5. In the Link to field, enter the name of the calendar Example: calendar 6. In the Special Format field, select Calendar (Month) 7. Select Save and Close 29

Check the appearance of the web page. Select the browser window and press the Refresh button to show the changes Click Close to return to the previously displayed page. 30

Creating a New RWD Page Using the Item Picker Teachers have the option of creating RWD pages or choosing from the Item Picker, which contains pre-designed web pages. Newly created web pages are created as protected pages. Protected pages can not be easily deleted. Adding New Web Pages 1. Open the RWD Conference (Site # and Last Name) 2. Click the Add Web Page button 31

3. The Item Picker window opens containing icons for a New RWD page and various other web page templates These web page templates include the navigation to return Home. 4. Select the desired web page template to open a new Web Page Builder form 32

5. Each new page created will have a default name 6. Replace the existing page name with a one word name 7. If desired, enter text in the Subject field. Text entered here will appear in the title bar of the web browser window. 8. Repeat steps 2 7, as necessary, to create additional pages 9. Record page names to assist in creating navigation links 33

Deleting Pages Before a page can be deleted, it must be unprotected. 1. Highlight the page to be deleted 2. Click the Unprotected Item(s) button 3. The Delete button is now active 4. Click the Delete button Check the appearance of the web page. Select the Open in browser object to see the design changes. 34

Creating Tables It is often difficult to manage content on an RWD page. Creating tables within a Rapid Web Designer page is an efficient way to organize content. 1. Open an RWD page 2. Click to collapse the RWD page header and expand the content area 3. Click the drop down arrow on the Insert field on the Edit Bar 4. Select Table from the list 5. The New Table window opens 6. Enter the number of desired rows and columns 7. If desired, select the alignment 8. Enter not more than 95 in the width column. This will provide a padding space between the Navigation Sidebar and the left side of the table. 9. Click OK once changes have been made 35

10. Enter the table s content Formatting Tables After the table has been created, it can be formatted to adjust the table layout, cell layout, and to make changes to the table s borders. To format a table: 1. Right-click on the table 2. Select Format > Table from the fly out menu 3. Uncheck all Borders checkboxes 4. Click OK Check the appearance of the web page. Select the Open in browser object to see the design changes. 36

Inserting Horizontal Lines It may be appropriate to separate content on a web page to make it easier to read for the website visitor. Web designers can add horizontal lines to chunk content to provide this separation. To add a horizontal line on an RWD page: 1. Position the cursor at the spot on the web page for the horizontal line to be inserted 2. Click Edit > Insert > Insert Horizontal Line 3. Click Save and Close Check the appearance of the web page. Select the Open in browser object to see the design changes. 37

Adding Graphics to the Content Area Copyright must be observed at all times, especially when uploading graphics to web pages. Teachers have many options when acquiring graphics for their web sites: Use personal photos (make sure to observe all district/school policies about utilizing student pictures) Create an AutoCollage (using Microsoft s (free) AutoCollage program) Use Wordle (http://www.wordle.net/) to create custom word clouds ) Use Tagxedo (http://www.tagxedo.com/) to create custom word clouds in custom shapes Utilize US Federal Government websites (most photos are in the Public Domain) All of the options above are free to teachers. Rapid Web Designer allows the user to add graphics and clipart to the content area of the web page. Graphics can best be viewed if the extension is.gif;.jpg or.png. Graphic files with a.bmp extension are not recommended due to the large file size. The web sites listed below are also copyright friendly or reference sites that are in the public domain: Classroom Clipart Pics4Learning The Teacher s Files Phillip Martin Clip Art Microsoft Office* HCPS Professional Development Technology Training http://www.classroomclipart.com http://www.pics4learning.com http://www.teacherfiles.com/clip_art.htm http://www.phillipmartin.info/clipart/homepage.htm http://office.microsoft.com/en-us/images/ http://tts.mysdhc.org/free_images Because the district is a Microsoft licensee, the clip art within Office can be used on a teacher s web site. 38

Saving Images from the Internet 1. Launch an Internet web browser 2. Locate the picture to be saved 3. Right-click on the selected picture 4. Select Save Image As (if using Internet Explorer) or Save image as (if using Chrome) 5. The Save As window opens 6. Select the location for the picture to be saved (Desktop > participant folder created at the beginning of class) 7. If necessary, change the name of the image to a recognizable name 8. Do not change the file type ( Save as type ) 9. Click Save This image can now be inserted into an RWD web page. Adding Pictures to the content area of the web page: 1. Open the RWD page where the image will be inserted, place cursor in the area where the image is to be placed 2. Select Insert > Image/File 39

3. Locate the previously saved image in the Open window, 4. Click Open to insert the image into the RWD content area 40

Using Microsoft Office Clipart Open a Microsoft Office application (assumes Office 2010): 1. Insert > Clip Art 2. Search for desired Clip Art 3. Right-click on desired Clip Art and select Copy 4. Open the desired web page to insert the picture 5. Click the content area on the web page 6. Select Edit > Paste from the menu or Ctrl + V to paste Note: Images on a Rapid Web Designer page can be aligned similar to text left, right or center, or placed in a table. Check the appearance of the web page. Select the Open in browser object to see the design changes. 41

Locking Images on a Web page: 1. Open an RWD web page that contain a picture 2. Right click the picture 3. Select Make Link from the fly out menu 4. In the Target URL field, enter a pound symbol (#) 5. Choose Use Same Window from the window drop down menu 6. Click OK 42

Adding Information for a Picture In compliance with the Americans with Disabilities Act, images should have a description placed in the comments field of the Format Image window. This allows a computer equipped with voice activation to read the picture. 1. Open an RWD web page that contains an image 2. Right click the image and select format image on the fly out menu 3. Enter a description of the image in the Comment field 4. Click OK 43

Adding Rows to the Navigation Sidebar 1. Verify that the home page is opened 2. Click the Navigation Sidebar tab 3. Click the Add New Row button 4. Enter the desired text in the Display Text field Example: Classroom Supplies 5. Click in the Link to window on the same row 6. Enter the desired page name or URL in the Link To field Example: supplies 7. Click the Add New Row button to add additional rows 8. Repeat steps 2-5 as needed Check the appearance of the web page. Select the Open in browser object to see the design changes. Note: Keep the RWD page names simple! Consider using one word names. 44

Inserting Rows into the Navigation Sidebar 1. Click on the first row of the Navigation Sidebar 2. Select the Insert New Row button. The new row will be inserted above the selected row. 3. Enter desired title in the Display Text window Example: Class Rules 4. Click in the Link To field and enter the page name or the URL that the Display Text will be linked to NOTE: Be sure to click out of the newly inserted row in order for the new row to appear. Check the appearance of the web page. Select the Open in browser object to see the design changes. 45

Uploading Files Rapid Web Designer allows the user to link to resources created outside of First Class such as MS Word, Excel, and PowerPoint files. Note: Some computers may not have the required application to open some file types. Since most district staff have access to tools that will convert documents to PDFs, it is recommended that files be converted to allow all website visitors to open almost any file. When linking to other documents, it is recommended to upload the documents into a folder within the RWD container. If no Documents folder exists, a new folder can be created. 1. Double-click to open the documents folder 2. Click File > Upload 3. Select the file to be uploaded from the Upload File window 4. Click Open to begin the uploading process 46

Note: Since Rapid Web will require the user to enter the EXACT PATH to the document, it is suggested that all document names be kept simple and/or one word, if feasible. 5. The file has been uploaded into the documents folder within the RWD container 6. Close the documents folder 47

Creating Hyperlinks Hyperlinks can be added to a web page in a variety of locations: On the Navigation Sidebar On the Information Sidebar On the Scrolling Message As a link to an image within a web page As a link to a word within a web page Hyperlinks can be a link to another page within the teacher s web site, to an uploaded document (PDF), a file, or to another web site. Adding a Hyperlink on the Navigation Sidebar 1. Open an RWD page 2. Click the Navigation Sidebar tab 3. Click Add new row 4. Enter the desired information in the Display Text field 5. Click in the Link to field and enter the URL 6. Check the box in the Open in New Window column 7. Click Save and Close 48

Linking to documents from the Navigation Sidebar 1. Open the desired RWD page 2. Select the Navigation Sidebar tab 3. Click Add New Row, if necessary 4. Complete the Display Text field Example: Great Websites 5. Click the Link to field 6. Enter the link path to the document ([foldername]/nameofdocument). Be sure to include the file extension (e.g..pdf,.doc, or.ppt) Example: documents/websites.pdf 7. Click Save and Close In the example below, the link path to the websites.pdf document is: documents/websites.pdf NOTE: The filename can be renamed in this window. Rightclick and select Rename Check the appearance of the web page. Select the Open in browser object to see the design changes. 49

Adding a Hyperlink on the Information Sidebar 1. Open an RWD page 2. Click the Information Sidebar tab 3. If necessary, click the checkbox next to Include Information Sidebar 4. If necessary, click the Add new row button 5. Enter the desired text in the Display Title field Example: Prepare for FCAT! 6. Click in the Content field to add a brief description about the URL 7. Click in the Link Display field and enter the Display Link Example: FCAT Explorer 8. Click in the Link to field and enter the URL to be linked Example: http://www.fcatexplorer.com Linking to documents from the Information Sidebar 1. Open the desired RWD page 2. Select the Information Sidebar tab 3. Verify that the Include Information Sidebar box is checked 4. Click Add New Row, if necessary 5. Complete the Display Title field Example: Great Websites 6. In the Content field, enter Use the websites to integrate into your curriculum or at home with a student. 50

7. Click the Link Display field and enter Great Websites 8. In the Link to field enter documents/websites.pdf 9. Click Save and Close This new Information Sidebar link will look like this: Check the appearance of the web page. Select the Open in browser object to see the design changes. 51

Adding a Hyperlink to a Scrolling Message 1. Click the Scrolling Message tab on the Header portion of the Rapid Web Designer page 2. Click the checkbox Include Scrolling Message(s) 3. Click in the Message A field and enter the desired scrolling message Example: Prepare for FCAT 4. Click in the Message A Link field and enter a URL Example: http://www.fcatexplorer.com 5. Click in the ToolTips field and enter a message that will display when the mouse hovers over the scrolling message 6. Click the Open Links in drop down arrow and select New Window 7. Click Save and Close 52

Adding a Hyperlink to an Image within a web page 1. Open an RWD page 2. Insert an image onto the webpage 3. Right click on the image 4. Select Make Link from fly-out menu 5. Enter URL in the Target URL field 6. Verify that Use New Window is selected in the window field 7. Click OK 53

Adding a Hyperlink to Text within the Web Page 1. Open an RWD web page 2. Click in the page body content area 3. Type the desired text to be linked Example: 5 th Grade Expectations! 4. Highlight the desired text to be linked 5. Right click and select Make Link from the fly out menu 6. In the Target URL, enter the desired web site 54

7. In Link Options, enter a Link title (e.g. the name of the Target URL site) 8. Click Test Link to make sure the URL has been entered correctly and opens to the desired web site 9. Verify that Use New Window is selected 10. Click OK Linking to documents from the Content Area 1. Open the desired RWD page 2. Enter text, highlight text or insert a picture to become a link 3. Right-click the text or picture and select Make Link 4. In the Target URL field, enter the link path to the document 5. Click OK Check the appearance of the web page. Select the Open in browser object to see the design changes. 55

Linking a Document to a Calendar Event RWD Calendar events can be attached or a link can be added to files to provide additional information such as homework assignment, field trip forms or event flyers. To add an attachment to a calendar event: 1. Create a new calendar event (open the RWD calendar and double-click on the appropriate date) 2. Describe the event, enter times and color code (if appropriate) 3. Click Attach 4. Locate and select the file to attach NOTE: Attached file appears in this section of the event 5. Click Save and Close Check the appearance of the web page. Select the Open in browser object to see the design changes. The attached file should appear on the event when it is opened from the calendar. 56

To link a file to the content area of an RWD calendar event: 1. Upload the file into RWD documents folder 2. Open the RWD calendar 3. Click New > Calendar Event 4. Select a date for event or assignment 5. Enter a message in the content area of the calendar event Example: Click here to view the homework worksheet 6. Highlight the word here, right-click and select Make Link 57

7. Enter the following path into the Target URL field:../documents/report_insect.pdf Note the syntax here. The path to the document must have../ at the beginning of the path name. 58

Inserting Markers If the content on a page forces website visitors to scroll, the web designer should consider adding markers. Markers can be added to move quickly to a section of a page or move from a section of a page back to the top of the page. How to Create Markers/Anchors 1. Click in front (or near) of the text to become the marker/anchor. (For exampleplace a marker at the top of the page to return to the top from somewhere else on the page) 2. Select Marker from the Insert drop down 3. In the Format Marker window give the marker a name - ex. Top 4. Click OK 59

Linking to a Marker/Anchor 1. Highlight the text that is to link to a marker. (For example-back to Top) 2. Right click, choose Make Link or click the Make Link button on the toolbar 3. In the Format Link window, find the Link to Marker Drop down 4. Within the Marker dropdown, select the Marker to link to 5. This will put a #markername (in the example above, the assignments marker was previously selected) in the Format Link window 6. Click OK Avoid Confusion! Moving From the Top to a Marker Down the Page Markers can assist a website visitor in moving from the top of a page to a specified section of a page quickly by using markers. In the example above, the marker is at the Homework Area of the page and the link to the marker is on the word here. 60

The second set of markers can move a website visitor quickly back to the top of the opened page. In the example above, the Back to Top link will take the visitor back to the marker labeled Top. 61

Creating Backup Copies of RWD Pages Creating backup copies of Rapid Web pages is a safeguard to protect RWD pages. In addition, making a copy of a web page is useful when updating a page (e.g. trying new functionality, etc.). Each user has a backups folder in the RWD container. To create a backup copy of RWD pages 1. Select an RWD page from the right pane of the RWD container 2. Click the Backup Current Page on the Navigation Row 3. The RWD page has been copied to the backups folder 4. Open the backups folder to verify that the web page has been copied 1. Repeat these steps for each Rapid Web page to be backed up 62

Restoring a backup copy of RWD page Remember, as a (safety) precaution, RWD pages are protected when they are created. This means they cannot inadvertently be deleted. However, when an RWD page is backed up, while the copy of the RWD page is protected, it cannot be easily restored (moved) back into the RWD site container. In order to restore the backed up copy, it must be temporarily unprotected so it can be moved. 1. Open the Backups folder 2. Right-click on the page to be restored 3. Select Properties 4. Locate the Protected checkbox and uncheck it 5. Click OK 6. Make sure the RWD site container window is open and near the Backups folder window 7. Click and drag the RWD page from the Backups folder into the RWD site container 8. Close the Backups folder (the RWD site container should still be open) 9. Select (but do not open) the restored RWD page, click the Protect Items button The restored RWD page is now ready to be used once again. 63

Deleting Older Versions of Rapid Web Pages When a backup of a web page is made, RWD (First Class/IDEAS) will not prompt the user to replace the file and overwrite it. Each file placed in the backup folder is time stamped. Older versions of backed up Rapid Web Pages may be deleted. 1. Open the backups folder 2. Click the oldest version of a duplicated Rapid Web page (e.g. Schedule ) 3. Right-click on the page and select Properties 4. In the Document Properties window, deselect Protected 5. Click OK 64

6. Make sure the page that is to be deleted is selected 7. Press Delete Recovering (Deleted) RWD Pages If an RWD page has been deleted in error, it can be recovered. If this occurs, make sure to work through these recovery steps as soon as possible: 1. Open the RWD Site Container 2. Select View > Show Deleted Items 65

3. Locate the deleted page 4. Right-click on the delete page, select Undelete. The RWD page is again available in the site container. 5. Change the View back to Hide Deleted Items 66

Using Rapid Web Designer s Message Blog Functionality RWD s teacher site container includes new site objects entitled: News and Homework. These site objects allow for class information to be easily added in an email-like format which is then posted to a teacher s website. These class details can include: Daily class homework and assignment due dates Announcements about upcoming events Lesson Notes (either uploaded by the teacher from their lesson plans and/or assimilated by students and then posted to the blog by the teacher) Attachments like class expectations, course syllabus, podcasts or other file types to showcase student work. These RWD Blog objects offer teachers a one-way communication opportunity, that is, an easy way to ensure that students/parents have access to their homework assignments and other important student-related information. These two new site objects are not limited to being attached to the teacher s home page. These site objects can be used for any class project or unit (with additional site objects creatable for each class taught, if appropriate). NOTE: Starting with the 2013-2014 school year, teachers will be utilizing Edsby, the district s gradebook and social learning program. Teachers are urged to utilize Edsby to communicate with students and parents. Safety First Teachers should follow district guidelines when using this RWD site object. Students will NOT have access to a teacher s IDEAS (First Class) account. If a teacher chooses to have students record class notes, those notes should be compiled in a word processing program like Microsoft Word or Notepad and then attached to a message within the blog. 67

Creating Entries in Homework or News Blog With the RWD Site Container open, double-click to open the newly created Homework site object. In this example (above), the teacher has sent an email to the Homework blog to record the Math homework for her students. 68

Creating New Blog Posts Creating new blog posts in the Homework blog site is as easy as sending an email in First Class (IDEAS). To create a new entry: 1. Make sure the RWD site container is open 2. Double-click the Homework site object 3. Click New. The New Message Blog window opens NOTE: When the message blog window opens, remove any First Class (IDEAS) signature information. 4. Enter the subject details (e.g. Math + Date) 5. In the content area, enter the homework details as appropriate. Optionally, paste an image into the Thumbnail Image placeholder. 6. Click Send and Close 69

If notes have been compiled by the teacher, they can be pasted into the message area. If notes have been compiled and approved by the class, the notes file can be included as an attachment or the data/file can be copied and pasted by the teacher into the message area. Click the Attach button (on the Message header) and select the appropriate file from the file window. Other Message/Blog Post Features & Considerations Teachers can Publish or Un-Publish entries into this message/blog. This will allow teachers the flexibility of working ahead and publishing posts at the appropriate time. The circled item above (grayed out entry) is set to be Un- Published. The teacher simply returns to this message/blog window, selects the entry and clicks Publish for the entry to appear NOTE: This is what website visitors will see in the Homework (Message/Blog) page of the teacher s website. If teachers select an expiration for a message/blog post, the only way to see what has been selected is to open the Properties window of the message/blog entry (right-click on the message/blog entry to see the expiry setting) 70

Linking the Message/Blog to the RWD Teacher Website When the RWD site container is created, the template used includes the links from the Home Page to the Message Blog. 1. Open the RWD site container. 2. Open the Home Page and click the Navigation Sidebar 3. Note the Homework (blog) is linked to the Homework Message Blog object NOTE: If additional Message Blog objects have been added, make sure to update the path to these newly added objects (including changing the Special Format to Message Blog ). Click Save and Close if updating the path to the new object(s). Check the appearance of the web page. Select the Open in browser object to see the design changes. 71

Ongoing Assignment Postings No further site maintenance is required once the initial path has been set to access the class blog. To add future assignment, news, or project information postings, follow these steps: 1. Open the RWD site container 2. Open the Message/Blog site object 3. Click New to create the assignment message 4. When the message is complete, click the Send button RSS Feed Setups With the Message/Blog object, website visitors can easily sign-up to follow the postings to this blog. 1. Have site visitors click the RSS button 72

NOTE: This is an example only. 2. The RSS lightbox opens with the instructions for website visitors (parents, students, etc.) to subscribe to the feed 3. Have website visitors follow the instructions for their particular device (mobile phone, etc.) 73

Advanced RWD Topics Enhancing Your Website Consider your recent website experiences, were you shopping online? doing some research? locating some resources for an upcoming class? (and so on ) What did you like about this experience? What didn t you like about it? Was information easy or hard to find? Did the page have links to take you to the place(s) you wanted to go? Were you forced do a lot of scrolling? Were the graphics unclear and/or inappropriate for the site you were using? Did all of the links work? Was information up-to-date? What YOU like about a website is what your users/website visitors will probably want/like as well. Look at your site with a critical eye and ask yourself, if the information you are providing is useful to your students, parents, and other website visitors. Don t forget Edsby! If you are a classroom teacher, remember, most classroom activities should be captured in Edsby (the district s new gradebook and social learning program). However, for those programs and teachers who need a public web presence (including schools) having a more sophisticated web presence would bring more students and parents utilizing your site. How can you enhance your site? RWD provides web designers with a few additional features that teachers can easily take advantage of: Portal Mashup (utilizing FC Documents, RWD Web Pages and/or PDFs) Scrolling Containers or Static Containers (containing FC Documents and/or PDFs) New RSS (Really Simple Syndication) functionality (making following your site much easier for parents and students) (see Message/Blog section of this manual for instructions) Graphics Gallery Slideshow (without having to utilize Literal HTML coding) 74

Portal Mashup for RWD Advanced Users Portal mashup provides the web designer a different way to present content. In the example above, Portal Mashup has allowed the content area of the TTS Home Page to be broken up and placed onto several tabs. The website visitor then can easily move between the tabs to locate desired information. Portal Mashup can reduce scrolling for the site visitor. In this example, a Navigation Sidebar is utilized. The Mashup page is also broken up into two columns, the first one The 1 st Column is made up of several FC (First Class) Documents. 75

The 2 nd Column is made up of several Containers (Scrolling and Static). To make Portal Mashup available, RWD Settings must be updated. 1. Login to IDEAS 2. In the First Class Desktop, locate the RWD Builders conference. Double-click to open 3. Double-click on the RWD_Builder_SC6.00.380.rez (settings) file 4. Click Update 76

Creating a Web Page Utilizing Portal Mashup For this example, a new web page will be created. 1. Open the RWD site container and click Add Web Page 2. On the Page tab, name it (remember, keep the name simple, one word as much as possible) 77

3. Based on the planned information presentation, enter information. One of the differences that comes up in Portal Mashup is the use of FC Documents and other special document formats (e.g. scrolling and static containers). 78

4. The page plan continues with a second column that will contain a scrolling container (a scrolling container does not scroll until six (6) items have been added to it) and the Media Center calendar. NOTE: In this example, the 2 nd column of the teacher s (Portal Mashup) web page will stack the Click to see resources on top of the Media Center Calendar because the Group checkbox has been checked here. 79

Creating FC Documents Example: FC Document with a blue background. 1. In the RWD site container, click File > New > New Document 80

2. In the New Document window, select the preferred design, click OK 3. Enter the planned content, click Save and Close 81

NOTE: If the Subject field is left blank, the Name of the document will appear in the scrolling/static container on the RWD page. 4. In the RWD site container, right-click on the newly created FC document (it will be named the FC document style chosen), select Properties 5. In the Properties window, name the document (make sure to enter the planned name from the web page created earlier in this exercise) 6. Add a subject 7. Select the Protected checkbox to make sure this page will not be inadvertently deleted 8. Click OK Check the appearance of the web page. Select the Open in browser object to see the design changes. 82

Utilizing Static and/or Scrolling Containers Here are two examples of static and scrolling containers: Technology News is a scrolling container (it will not scroll until at least six items (FC Documents) are placed into the container Click to see resources is a static container In order to see the contents of each item within these containers, the site visitor clicks on the item which opens a lightbox with that item s details. The visitor can print the contents of the lightbox, if desired. 83

Creating a Static or Scrolling Container With the RWD Site Container open: 1. Click File > New > New Folder 2. When prompted, select Standard Folder 3. Name the folder (if necessary, right-click on the New Folder to rename it (Make sure it is a unique named item) 4. Double-click to open the newly created folder 5. Follow the directions previously used to create an FC Document (see pages 70-74). Do not forget to update the document s properties (if the Subject field is left blank, the scrolling/static container will use the FC document s name only). 84

Linking the Static/Scrolling Container to Home Page 1. Open the Home Page (assuming Portal Mashup is being utilized) 2. Click on the Special Content tab 3. Click on the column where the static/scrolling container is to be placed 4. Enter the planned Tab Display Text 5. Enter the name of the folder just created (Newzzz, in this example) 6. Select Static Container List or Scrolling Container List, as desired 7. Click Save and Close 85

More Portal Mashup Design Considerations If a calendar object is to be included in one of the Portal Mashup columns (see above), consider setting column width to make sure when the page opens, the web page will open with a controlled width. When a PDF is saved, be mindful of what RWD will adopt as its properties (see below). When the document is linked, its Subject will be posted on the web page. In order to avoid this (possible) issue, consider updating the Subject property. Right-click on the uploaded document in its RWD folder and change the subject to make it meaningful to potential website visitors. Another issue could be if the document s properties are not updated, the sheer length of the document s Subject could force the width of the Mashup column to become much wider. 86

Check the appearance of the web page. Select the Open in browser object to see the design changes. NOTE: Our Calendar appears first with the Static Container with Important News under it. These objects are stacked because the Group checkbox is alternately check (by row). The web designer simply adds new FC documents to the Newzzz folder to add information, etc. to the container. 87

Graphics Gallery Slideshow RWD s Graphics Gallery enables the teacher to quickly create slideshows without having to utilize independent web design functionality (e.g. PictureTrail.com). Many of these independent web design programs drop advertising or other branding information into the created slideshow. Design Considerations When making the image selections for the Graphics Gallery Slideshow, consider editing the selected photos to make them approximately the same size (typically, between 300-400 pixels wide). Also, move the selected photos to a folder on the (working) computer. Also remember website maintenance. The RWD site container and all of its components (files, images, documents, etc.) take storage space. Typically, the district provides ample storage for all teachers, but it is incumbent on all teachers to manage their First Class (IDEAS) storage. If the teacher creates slide shows documenting student activities for families to view on his/her web site, these slide shows should not accumulate; instead the teacher should delete these images from the site container after a reasonable period of time. 88

Building the Graphics Gallery To utilize the Graphics Gallery, teachers add a new site object. Graphics Gallery object by default. All selected images will be imported into this container. 1. Open the RWD site container 2. Click Add Site Object 3. In the Confirmation window, enter GraphicsGallery 4. Click OK 89

5. In the Item Picker window, double-click Graphics Gallery Container 6. Click OK to acknowledge the message 90

Open the page to link the Graphics Gallery. In this example, the link to the Graphics Gallery will be on the Navigation Sidebar of the Home Page. 7. Add a row onto the Navigation Sidebar. Make sure the Link to information matches the name of the Grahics Gallery object just created. 91

Importing Photos 8. With the GraphicsGallery container open, click Import Documents 2. In the Upload File window, select the folder where the designated photos have been saved, select all (Ctrl + A) or select the desired photos 3. Click Select The GraphicsGallery now contains the images as well as the navigation link to return the website visitor to the teacher s home page. 92

Linking the Graphics Gallery to the teacher s web page (home page) In this example, the Graphics Gallery will be placed on the teacher s home page and the link will be placed on the Navigation Sidebar. 4. Open the Home Page and select the Navigation Sidebar tab 5. Add a row or Insert a row onto the Navigation Sidebar, label it Gallery (or similar text) 6. In the Link to field, enter the (must be exact) name of the Design Gallery object in the RWD site container. 7. Click Save and Close Check the appearance of the web page. Select the Open in browser object to see the design changes. 93

When the website visitor clicks Start Slideshow the show will open in a lightbox. The visitor can click the X to close the lightbox. NOTE: When the lightbox is closed the website visitor can easily return to the teacher s home page (remember, this link was placed onto this page when the Design Gallery object was created. 94

Using the Collapse Non-Headlines Headlines that are created on the Navigation Sidebar can be collapsed. This allows the user to add many links to the Navigation Sidebar, only to be viewed when the link is opened by the viewer. 1. Open an RWD page 2. Click the Navigation Sidebar tab 3. Click the Add New Row button 4. Place a check in the Headline box for that row 5. Enter a headline in the Display Text field 6. Check the Collapse Non-headlines button 7. Click the Add New Row button for additional rows 8. Enter text in the Display Text field 9. Click in the Link to field 10. Enter the URL for the website 11. Repeat steps 6-9 as needed 12. Click the Save and Close button 95

Utilizing Literal HTML in RWD Web Pages Rapid Web Design has been created to make building web pages quick and easy. After the RWD site container is created, teachers can add content in a variety of ways by adding new web pages and/or simply adding content onto the pages that were created with the site container. However, sometimes a teacher might like to add some special details to their website, such as: a site counter (school site s are able to utilize Google Analytics) a photo show (http://www.picturetrail.com/) create your own avatar utilizing Voki (http://www.voki.com/) Because some of the free websites offering free website counters may be linked to inappropriate (or unsafe) resources, any website counter, for example, selected should be thoroughly tested before it is added to a teacher s website. Here is a preview of the show that was created. The website compiles the programming code to render the slide show. 1. After the picture show is completed, select Get the Code 96

2. Follow the instructions and copy the code that has been rendered 3. Open the RWD page that will show the slide show and paste the copied code 4. Select all of the pasted code and right-click, selecting Format Text 5. In the Format Text window, select Literal HTML (see the pasted text change) 6. Click OK 97

Check the appearance of the web page. Select the Open in browser object to see the design changes. This rendered HTML code cannot be modified to remove the reference to Picturetrail. 98

Appendix A: Troubleshooting Frequently Asked Questions FAQ 1: Home Page is Not Found I am getting Not Found when I try to open my home page (also known as I am unable to open my home page). Possible causes/solutions: 1. Double check to make sure the internet address (URL) has been entered correctly. The URL format for a teacher is: http://<schoolname>.mysdhc.org/teacher/<schoolsite#><teacherlastname> Example: http://lewis.mysdhc.org/teacher/2451glover 2. Make sure the RWD page is named home page. It must have a space in between home and page 3. Leaving the home page RWD page builder form open causes the error message. The solution is to save and close the home page. Click the Refresh button to reload the page 4. Make sure home page or any other page that is to be opened has no extra spaces in the page name. 99

FAQ 2: My RWD page tabs have disappeared I opened my RWD page to make changes and the tabs at the top of the RWD page are missing (Page, Header, Navigation Sidebar, Information Sidebar). Possible causes/solutions: Are you working on a different computer? If so, run the settings file in RWD Builders. Locate and open the RWD Builders conference in either the RWD conference or on the First Class Desktop 1. Locate the RWD_Builders.rez file and double-click to open it Click the Update button Close the RWD Builders window Re-open the RWD page and resume work 100

FAQ 3: I made changes to RWD, but cannot see changes on the Internet (using selected browser) I made changes to my home page (or any other RWD page), but I am unable to see the changes in Internet Explorer. Possible causes/solutions: Refresh the page. If the page still does not load with the most recent changes made, click Ctrl + F5 or Ctrl and click the Refresh button on your browser to reload the page. FAQ 4: I have a little empty box on the right side of one of my web pages. Possible causes/solutions: If you had an Information Sidebar on your page and attempted to remove it, it is necessary to clear the content as well as to uncheck the box. 101

FAQ 5: My edit bar is missing My edit bar is missing in the middle of the RWD design page (in between the RWD page heading (with Page, Header, Navigation Sidebar, and Information Sidebar) and the content area Possible causes/solutions: To restore the edit bar: 1. Place the cursor in the content (white space) area of the RWD page and rightclick 2. Select Show Edit Bar on the fly out menu FAQ 6: My home page has disappeared. What happened? Possible causes/solutions: 1. The home page name may have been changed inadvertently. To resolve this, change the page name back to home page, save and close the page. 2. The home page has been deleted. A deleted page can be retrieved as long as it has not been deleted from the I.D.E.A.S. server. Retrieve a Deleted Message 1. Open the RWD site container 2. Click in the right pane of the window 3. Select View > Show Deleted Items 4. Everything that has been deleted during the day will appear in the mailbox listing. The icon for each message will be a trashcan. 1. Click once to select the message to be retrieved 2. Select File > Undelete 3. Select View > Hide Deleted Items to make all the other unwanted messages disappear 102

FAQ 7: My pictures seem to take up too much space I placed a picture of my classroom on my home page. I used First Class to reduce the size of the picture, but the picture still seems to take up all of the space. Possible causes/solutions: After the Navigation Sidebar and Information Sidebars, remaining content space will be approximately 300dpi. Digital pictures (.jpg) are usually much larger than 300dpi. Having RWD present the image in a smaller size will not change the actual size of the image. Modifying the picture size can be done using Microsoft Picture Manager (included in Microsoft Office). Other image editing software may also be used. Using Microsoft Picture Manager: 1. Open the picture to be resized 2. Click Picture > Resize In the example below, the Percentage of original width x height was selected and 25% was selected. The result is shown. 103

1. Select the Predefined width x height button and choose Web Large (640x480px) 2. Click OK to accept changes 3. Save the image as resized 104

FAQ 8: My home page s Navigation Sidebar stretches all the way across the page The Navigation Sidebar on this Home Page takes up all of the page s content area. Possible causes/solutions: The web designer responsible for this page needs to open the Home Page and examine the structure of the Navigation Sidebar. Most likely a row was inserted, but was left completely blank. When this row is removed, the web page should return to normal. 105

106

107

Acceptable Use Policy/Telecommunication Guidelines General Telecommunications Guidelines: 1. Telecommunications services and networks shall be consistent with the mission, goals, policies, and priorities of the School District of Hillsborough County (SDHC). 2. The district provides telecommunications services that are financially feasible and educationally appropriate. These services are for administrative and instructional purposes. 3. The school district maintains an Internet content filter. All Internet access by all personnel and students must utilize this filter. Requests for exclusion of this procedure must be submitted to the Chief Information and Technology Officer and will only be granted to those with legitimate job related duties requiring such access. 4. SDHC accounts shall be used only by the authorized users for the purposes specified in these guidelines; misuse may result in the limitations of participant access rights and authorization; authorized users shall be responsible for the security of their account and password. Guidelines for Use of Telecommunications: 1. Telecommunications services or networks for illegal, inappropriate, or obscene purposes or in support of such activities shall be prohibited. 2. Telecommunications services or networks shall be in accordance with existing District policy. 3. Telecommunications services or networks shall not be intentionally used to disrupt the use of the network by other users. All communications and information accessible via the telecommunications services or network shall be assumed to be public property. No guarantee shall be made for the privacy of any communication on the network. 4. All network users shall adhere to the rules of copyright regarding software, information, and attribution of authorship. 5. Harassment or unsafe, unwanted, or unsolicited contact via district sponsored telecommunications services and networks is prohibited in accordance with board policy. Users cannot be completely prevented from accessing services or information 108

that may be offensive or inappropriate; therefore, individual users must be responsible for their own conduct in using telecommunications services and networks. 6. Participation in a network requires that its users regard it as a shared resource and that members conduct themselves in a responsible, ethical, and legal manner. Guidelines for the Internet: 1. The Internet is coordinated through a complex association of government agencies and regional, state, and local networks. The operation of the Internet relies heavily on the proper conduct of the users. 2. The School District of Hillsborough County makes no warranties of any kind, whether expressed or implied, for the service it is providing. The district will not be responsible for any damages suffered including loss of data. The district is not responsible for the accuracy or quality of information obtained through this Internet connection. 3. The use of the Internet is not a right, but a privilege, and inappropriate or irresponsible use may result in cancellation of that privilege. 4. Users are expected to abide by the generally accepted rules of network etiquette. Be polite. Do not use vulgar or obscene language. Exercise caution in revealing personal information over the network. Do not disrupt the network or the flow of data. 5. Users shall avoid security risks. A user is to notify an administrator immediately if he or she suspects a security problem. Do not show or identify the problem to others. Do not use another individual's account; attempts to log on as another user will result in cancellation of privileges. Any user identified as a security risk or having a history of problems with other computer systems may be denied access. 6. Vandalism is defined as the malicious attempt to harm or destroy the data of another user, the Internet, FIRN, or other networks. This includes the creation of, or the uploading of, computer viruses on the Internet or the host site or disruption of data flow. Vandalism may result in cancellation of privileges. 7. All terms and conditions as stated in this document are applicable to all users of the Internet. These terms and conditions reflect an agreement of the parties and shall be governed and interpreted in accordance with the laws of the state of Florida and the United States of America. 109

Guidelines for Email: The School District of Hillsborough County (SDHC) provides electronic mail (email) services to district employees in support of public education. 1. District employees are automatically provided a district electronic mail account. 2. Non-district employees may request a temporary user account. Requests must be made through the school principal or site administrator via the Temporary User Access Form, located in the District Forms folder on IDEAS. Examples of non-district employees who may be granted email access include interns, contracted service providers, and partnership organizations. 3. Communication made by means of district email is subject to the Florida Public Records Law State Statute 119.07 and Family Educational Rights and Privacy Act (FERPA). Authorized users are responsible for: maintaining the confidentiality of their password and user-id; monitoring the activity within their account; and maintaining the privacy of confidential information. Email is a convenient way to correspond with parents about general information, assignments and class expectations. However, the confidentiality of email sent outside the school district cannot be ensured. Information that is private concerning an individual student should be communicated in another manner in order to protect the privacy rights of the student. 4. Group mailing lists are provided as a service and are reserved for official school district business. The use of the "All-Email-Sites" mailing list is restricted to directors, managers or their designee and above. 5. Conferences provide a service to facilitate collaboration, problem solving, and sharing of information consistent with the district's mission. Editorial comments and personal opinions are not appropriate and will be removed at the sole discretion of the district. Terms Regarding Individual Accounts: 1. The district has the right to establish user limits for district email services. Due to storage limitations, the district will automatically delete messages after a specified length of time as set by the district. The storage space available in an individual account is set by the district. The district may change restrictions at any time without notice to users. Each user is responsible for checking the guidelines periodically for changes. 110

2. The district has no responsibility or liability for the deletion, corruption or failure to store any message or other content maintained or transmitted by the email service. 3. The district reserves the right to delete accounts that are inactive for an extended period of time. 4. Use of an email account constitutes the user's agreement with the terms regarding email procedures and that the user will not: violate the conditions of the Education Code dealing with student rights to privacy; use profanity, obscenity, or other language that may be offensive to another user; use district email for personal, political or editorial uses; use district email for financial gain or for any commercial activity or unsanctioned activities, legal or illegal; or copy commercial software or other copyright protected material in violation of copyright laws. 5. The district reserves the right to terminate any account that it believes is transmitting SPAM or abusing email procedures. Infractions will be reported to Professional Standards. 6. The district defines email "privacy" as the following: Email should never be considered "private." The district reserves the right to review materials posted to a district service and to remove any materials. The district will disclose any information it deems necessary to satisfy any applicable law, regulation, legal process or governmental request; or to edit, refuse to post, or remove any information or materials. 7. The district does not control or endorse the content, messages or information found in any email message; therefore, the district disclaims any liability regarding the electronic mail services. 8. The district reserves the right to change the terms, conditions, and notices under which services are offered. The user is responsible for regularly reviewing the terms and conditions and additional terms posted on district website. The continued use of the electronic mail service constitutes an agreement to all such terms, conditions, and notices. Guidelines for Student Safety and the Use of Telecommunications Services: 1. The school district maintains an Internet content filter. All Internet access by all students must utilize this filter in order to restrict student access to material harmful to minors as defined in the Children's Internet Protection Act (CIPA). 111

2. Public school student use of telecommunications services, through district equipment or authorization, will be supervised. District procedures that comply with CIPA guidelines include technology protection measures that block or filter visual depictions that are obscene, include child pornography, or are harmful to minors. 3. A parent or guardian wishing to deny access to the Internet must notify the school in writing through the Internet Exclusion Request Form. Unauthorized users of the Internet will be subject to disciplinary action. 4. Email use by students is not allowed without specific instructional purposes and must be monitored at all times for appropriate content. This use requires prior approval by the Superintendent or designee to assure compliance with the Children's Internet Protection Act (CIPA) and the Neighborhood Children's Internet Protection Act (NCIPA). 5. Unauthorized access, including so-called hacking or other unlawful activities, will result in disciplinary action including, but not limited to, cancellation of privileges. 6. Written parental permission is required prior to a student's participation in online programs that transmit personally identifiable information. The district will make all reasonable efforts in selecting online programs that ensure the privacy and confidentiality of the student and comply with Family Educational Rights and Privacy Act (FERPA). FERPA requirements will be communicated annually to parents, students, faculty and staff. 112