Edline Manual Design Guide Version: September 2011

Transcription

1 Edline Manual Design Guide Version: September 2011 Copyright Statements: Edline software is a trademark of Edline. Copyright Microsoft Windows names and logos are registered trademarks of the Microsoft Corporation. Copyright All other trademarks and copyrights are the property of their respective holders. This manual was written for Edline version September 22, 2011

2 Content Content... 2 Designing Your Website... 5 How to Use this Documentation... 6 Overview of Edline Website Design Features... 6 Planning Your Website Designs... 6 Allowing School Staff to Set Design Properties... 7 Creating a New Design... 9 The Manage Design Page Setting Design Properties Setting Design Property Inheritance at the School Level Setting the Layout and Number of Columns Centering Your Page Setting the Icons Setting the Minimum Height for the Page Setting Colors for Your Website To Create Custom Color Names for Your Website To Set the Page Overflow Color To Set Text and Background Colors To Set Colors for the Page Header Selecting a Header Image Setting Margins and Padding (Spacing) for Your Website Setting Borders and Corners Setting Fonts Setting Menu Properties Setting Additional Properties for Specific Body Sections Adding New Boxes to Your Site Edline Manual Edline 2011 Page 2

3 Adding a Flash Image to Your Site Adding Images to Your Web Page Adding a Clickable Image Adding a Menu to Your Site Adding a Footer to Your Site Setting Background Images Setting Placeholder Properties Maintaining Your Website Design Rearranging or Removing Boxes on Your Website To Drag and Drop the Boxes on the Web Page To Remove the Boxes from the Web Page Changing the Name of Any Section Heading Managing the Designs and Templates Creating a New Design or Template Setting the Default Design for Classes, Groups, Folders, and Documents Setting Designs as Active or Current Default Setting a School Home Page as a Splash Page Previewing a Design or Template Renaming an Existing Design or Template Deleting an Existing Design or Template Copying or Moving a Design or Template To Copy an Edline Design or Template To Copy an Old or Existing Class Design To Move an Edline Design or Template Deploying District Templates to Create School Designs Selecting District Templates for Your School Customizing the Design for Your School Canceling Your Design Changes Edline Manual Edline 2011 Page 3

4 To Restore Last Saved Design To Restore Edline Design Defaults Index Edline Manual Edline 2011 Page 4

5 Designing Your Website Tip: Edline offers FREE training courses on how to design your website. Sign-up for the Manage Design course at A solid website presence can help your district/school boost enrollment, build stronger ties to the community, improve fundraising capabilities, as well as better communicate with your staff, students, and parents. The design of your website speaks volumes about your district's/school's abilities to keep up with current technologies and offer the very best to students. Edline offers tools and services to allow your district/school to create a website as dynamic as your curriculum. With Edline's Design Services, the Edline Design team will help build a unique design to suit your needs. Edline Site Designer allows your district/school to create your own design, or update a design initially built by the Edline Design Services team. The Site Designer tool contains all of the same features that the Edline Design Services team uses to create distinctive websites. Montage of websites designed using Edline Site Designer Edline Manual Edline 2011 Page 5

6 How to Use this Documentation Whether your website was designed by Edline's Design Services, or you created your website on your own, use this documentation to learn how to create, update, and manage your designs using Edline's wide-ranging design capabilities. If you already have a design that requires minimal changes, you may want to skip to the Maintaining Your Website section for a description of the most common changes used in keeping websites up-to-date. Note: The Edline Design Guide was created to provide web designers with instructions for the most common Site Designer features in Edline. For full instructions on all the features available in Edline, see the online Help. A copy of this guide is available in the online help topic Edline User Guides. Overview of Edline Website Design Features The Edline design capabilities allow your district or school staff to enable individual teachers, coaches, and other super users to update the look-and-feel of their own website. You can use Edline's unique WYSIWYG (What You See Is What You Get) editing capabilities to change your design on-the-fly, and you can switch between various designs from season-to-season or for particular events. You can also store your design in a "sandbox" where you can work on it without making it live to the public. Edline has flexible options that let you create designs that can be inherited by all subsets of your district (schools, classes, or group pages), or you can create completely unique designs for various sections of your site. You can even share portions of the designs throughout your sites and change certain aspects, resulting in both consistency yet individuality at each school or sub-page. Planning Your Website Designs Before starting to design or update your website, there are a variety of decisions you should make to determine the best way to meet your design goals: Who controls the design at your district? Only district and school super users have design permissions by default. Decide whether you want to give others (such as webmasters) permission to change design, and whether teachers and other group super users can change designs they inherit from the school designs. See the section Allowing School Staff to Set Design Properties. Consistency versus individuality: Edline capabilities allow a district to create a design that is inherited by all lower level sites such as the schools in the district, the teacher pages, and group pages at the district and school websites. However, you may not want to inherit pages that look exactly like a district or school page, so you should consider the following scenarios as you develop designs for your district: You can establish complete uniformity throughout the district and lock down the designs so only district staff can control them. Website designs (fonts, colors, layout) can be set to cascade down from the district, to the school, and to the individual group (class, sport, activity) pages. If this scenario is your goal, do not give school personnel permissions to change designs at all. Edline Manual Edline 2011 Page 6

7 You can provide consistency throughout the district but allow for individual school branding as well. Districts can provide a starter template (or several templates) for their schools, but not restrict school super users or webmasters from using their default design permissions to update them. You could use the district templates to create a common "look-and-feel," but in this scenario schools could modify the designs to include their own school colors, mascots, logos, mission statements, and images to create their own unique site. Your district can let every school create a completely independent look-and-feel of its own, not starting from a shared design. District and schools can control not only the design of the school home pages, but also the look of the school s sub-pages, such as the teacher class pages and other group pages, on the website. Sub-pages can be set to inherit the "look-and-feel" of the school website, or the school super user can create a different global design specifically for all those subgroup pages. For example, you could create a uniform design for all teacher pages that is different from the school home page. The individual group (class, sport, activity) super users (teachers, coaches, other administrators) can be given permission to change their common look or not. In addition, a unique design can always be made for a specific sub-page, such as the media center or school board page, and the design can be made by the school or district webmaster, by the super user of the group, or by a particular designated individual. Note: For details on how to create templates or set default designs for sub-pages to look different from school pages, see the topic Managing Designs and Templates. Who creates graphic elements? Although Edline design capabilities give you control over the look of your website, graphical assets such as headers, flash banners, wallpaper backgrounds, and other graphics are not provided by Edline. This documentation, therefore, covers how to display and manage graphical assets that you have created, but does not cover the creation of these elements. When planning your website design, determine who you would like to create those graphics. Many schools have staff and students with graphic design skills, and there are many free online services that are used to create headers and banners. If you are interested in having Edline Design Services create your website design for you, as well as providing the artwork and graphical elements for the site, please contact your Edline representative. Allowing School Staff to Set Design Properties By default only district or school super users have design permissions. Edline does not allow teachers, coaches, and other school personnel to change the design properties of their own group web pages unless the super user assigns them permission. To globally allow all group or class super users to update the design properties of their teacher (class), sport, or activity web pages, the super user can change the appropriate policy at the school level. Edline Manual Edline 2011 Page 7

8 To Allow Teachers and Other School Staff to Update Design Properties 1. From the menu bar on the school site, select Tools and then Manage District or Manage School to access the Modify School or Modify District page. 2. Click District/School Policies to access the District/School Policies page. 3. Select Yes to Allow classes and other groups to manage design of their home page to allow school level users (such as teachers and coaches) to manage the design of their group web pages. 4. Click Update to save the changes. Note: You do not have to allow all teachers, coaches, or group super users to change the design of their web pages. If you would like to allow only a few teachers who have web design experience to change their web pages designs, or to give design permission to teachers or other staff to work on the school website as webmaster and not super user, you can set special user member permissions for those users on an individual basis. Refer to the Setting School Level Permissions section in the online help for instructions on changing user design permissions. To Prevent School Super Users from Updating Design Properties District super users can lock down the designs to prevent the school super users from updating the design of the website. The default district policy to allow schools to update design is set to Yes to allow schools to update design. District super users can change this policy. 1. From the menu bar on the school site, select Tools and then Manage District to access the Modify District page. 2. From the District Management section, click the District Policies button to access the District Policies page. 3. Select No to Allow schools to use manage design for their pages and No to Allow classes and other groups to manage design of their home page to prohibit changes from the school-level. Edline Manual Edline 2011 Page 8

9 Creating a New Design Edline provides super users and anyone who has been given design permissions with complete flexibility in designing their web pages. You can create the layout and look of the whole page as well as set the design properties of any part on the page. Before you create a new website design, we suggest reviewing other websites to get an idea of what you are trying to accomplish. Pay particular attention to menu navigation, and what types of sections you want available in your website. The following is an outline of the main steps you will take to make an Edline design. As you look around the Internet or at Edline sample designs ( make decisions about the following attributes of your new design so you can set the properties for your website: 1. What layout do you want for your page? How many columns or sections? 2. What colors will you want in your website and where do you think you will want those colors used? Which colors should be in the background, what colors do you want for the headers or body of the text? 3. What type and size of fonts do you want? 4. Do you want your page centered and do you want icons next to items in a list? 5. Do you want a header image across the top to appear on all sub-pages of the site as well as on the home page? 6. Do you want a large picture to be the focus element of the page, filling all columns, or a smaller picture located in one of the columns? 7. Where do you want your main navigation menu located? On the side, on the top, above, or below the main pictures? Once you have sketched out an idea of your main page design, you are ready to set the properties for each item as described in the topics of Setting Design Properties. You can open Site Designer to begin editing your design in two ways from the Manage Design page, or directly from the web page with the design you want to change. To create new designs, to make major design changes to the active site, or to set a design to be active, open the Manage Design page. (See the Manage Design Page topic.) To update the design of a specific section directly from the active web page, select Edit This Page from the Edline menu bar, move your mouse to the section you want to change, and then select the Edit Design Properties icon. Use this method when making minor enhancements to the active design (see the Maintaining Your Website topic for more details). Edline Manual Edline 2011 Page 9

10 The Manage Design Page From any page you want to re-design, such as the main school page, you can open the Manage Design page by selecting Manage Design from the Tools menu. Manage Design Page If you open the Manage Design page while you are at your district or school home page, you will see a list of all current designs available for your school. You can create a new design, update existing designs from this list, and set a design you want to be the active design. The active design is the "live" design that is visible by the public. The Manage Design page provides a "sandbox" environment, where you can experiment and test any future design changes for your website, and show these designs with others at your school before making them active. From the Manage Design page, you can also set a design for a particular group page that you want different from others in the website, and you can set a default design for entire page categories such Edline Manual Edline 2011 Page 10

11 as class pages, group pages, folders, and documents. You can also make templates for others in your school to use for their pages. For information regarding the creation of default designs for other pages, making templates and other options on the Manage Design Page, see the Managing Designs and Templates topic. For information regarding creation of new designs, see the Using Site Designer topic. Setting Design Properties Using Site Designer To create new designs, to make major design changes to the active site, or to set a design to be active, open Site Designer from the Manage Design page as follows: 1. Open the page you want to redesign (such as the school home page), and from the Tools menu, select Manage Design. Note: The name of the page you will be editing will appear in the large header labeled Manage Design For (Name of Page). If you are designing the main school home page, be sure the school name appears there. If you are designing a special group page, such as School Board, that group name would appear. (See the Manage Design Page picture.) 2. Create a new design to edit or edit a copy of your current design. Click the New button at the bottom of the page to create a new design from scratch. o o Type a name for the design in the Name for new design field. Leave the Base on template field blank. (If the design will be based on an existing template already in your school or district, see the topic Managing Designs and Templates for information.) Click the Copy/Move button to make a copy of the active design if you would like to use your current design as a starter. o o Copy the design to the Design area in the To field. Type a new name for the design in the New Name field. 3. From the Manage Design page, click on the design you want to edit from the Designs section. 4. Click Edit from the bottom of the Manage Design page to access Site Designer. Warning: Do not update the currently active design unless you are experienced with Site Designer and know exactly what you want to change. If you would like to use the active design as a starting point, use the Copy/Move function to make a copy of the active design, change the name of the copy, and select the copy to edit. Later, when you want to make that copy live, select the name of the new design, and click the Set As Active Design button. Edline Manual Edline 2011 Page 11

12 Each Edline website page contains two main sections no matter how many columns or which layout you select the Header section and the Body section. The page Header section only contains an image or banner that is at the top of every page in the website and the breadcrumbs for the website. The Body section contains the main content of your website. It contains several sub-sections depending on your column layout choice and the number of sections you add, and within some sections are columns. Within the Header and the Body, you can add different types of content boxes. Boxes are an area of your website that contain the actual content within the columns and sections of a page. Edline is preloaded with the default Edline boxes, News, Links, Calendar, Contents, that you can remove or add back to your page, and you can create customized boxes (see the Adding New Boxes to Your Site section). You can set design properties for the whole page or just a specific part of the page, such as the Body section or a particular column or box section. The design properties for any part such as the Body or Middle section cascade down to the sections, columns, and boxes within it. If you set a blue background color to the Middle section, that color would cascade to all columns in the Middle section, and all the boxes in those columns. You could then choose to update the design properties of one of the columns or boxes to make that particular area stand out. All design changes are set through the Site Designer dialog. Once you have set properties for the design you are editing, you have several options with buttons on the bottom of the Site Designer tree-view. Edline Manual Edline 2011 Page 12

13 Save You must click Save or Revert before you can exit the editing mode. Save will save all the property changes you made since your last save. Revert Revert will undo ALL the changes made after your last save. Save As This button allows you to save the changes with a new name so that the design you began editing remains intact and you have a new version of the design with a new name. Clear All This button will literally clear all changes made to the design at any time, not just during this session. It will revert back to the original Edline default settings before any customization was made on your design. We suggest always making a copy of the design before using Clear All in case you want to review or restore parts of what you have done. Tip: To reset a particular property change you have made to the system default, click the Clear next to the specific field you changed. When you create a new design, the first properties you should set are the Page level properties. The most important page properties are determining the property inheritance of the page (whether they flow down to other pages in the site or not), the column layout, and color themes. Setting Design Property Inheritance at the School Level What Inheritance Means: Your Edline website follows specific rules of design inheritance to minimize the number of pages that need to be designed. The default setting on Edline is for all design changes made at the school level to cascade down to all lower levels (sub-pages). For example, if the school super user removes the News section from the school home page, every News section from all teacher web pages will also be removed from the design of teacher pages unless the school super user (a) sets a default design for class pages that does include the News section; or (b) changes the page inheritance property. Basic Inheritance Rules: Regardless of how the school super user sets the school design inheritance, when a teacher, coach, or other school staff member with design permission updates the design of their web pages, their design changes will not be altered, even if additional changes made at the school level conflict with changes made at the sup-page. For example, if a teacher changes the color of one of their columns to be purple, and then the school super user at a later date changes the same column (from the school design level) to be red, the purple color that the teacher set will remain. This setting is necessary so that a design made at the lower levels is not accidentally overwritten by the school super user/web designer. The ability to set the design property inheritance is usually available to district/school super users. To Set Page Property Inheritance 1. Select Page from the Site Designer tree-view to open the Design Properties dialog. Edline Manual Edline 2011 Page 13

14 Site Designer Tree-View with Design Properties Dialog 2. Select the Special Options tab to view the options for the Page. 3. Set the property design inheritance options in the Include Properties In field by completing one of the following steps: To set the design to cascade down to lower page levels (district to school, school to group, classes, and folders), select All Subpages. Any design properties set (layout, color, sections) on the school level will cascade down to all folders, groups, classes or other pages (unless you have created a default design for classes or the super user of the class or group has changed the design for their pages). For example, if you remove a section from the school page, the section will also be removed from class pages unless you create a default design for classes with that section on the page. To set the design for the currently opened level only, district users should select No School Subpages so that the district design does not affect the design of the school pages. School super users should select No Subpages so that design properties on the school-level will not cascade down to lower levels of your school site (folders, teacher pages, other activity pages). Tip: If you want to have most of the design branding such as color, fonts, margins, and other settings included in other pages, leave the inheritance set to Include All Subpages. Then create a default design for classes, other groups, and folders that contain the items you want in those pages that are not in the school design. See the topic Setting Default Designs for Classes, Groups, Folders and Documents. Note: You must click the Save button to save the changes made before exiting the dialog by clicking Done. You can save after specific changes or wait until all your changes are made. To undo any changes since the last save, click Revert at the bottom of the Site Designer tree-view and all Edline Manual Edline 2011 Page 14

15 properties you changed after your last save will revert back to before you changed them. See button descriptions in the topic Using Site Designer. Setting the Layout and Number of Columns You can design the layout of your web page by determining how many columns will be available. The Edline default is three columns, with the middle column being the widest. Both the number of columns and their widths are customizable. All layouts contain a Header section and the Body section, and all Body sections contain a Top, Middle, and Bottom section. 1. Select Page from the Site Designer tree-view to open the Design Properties dialog. 2. Select the Special Options tab to view the options for the Page. 3. Set the number of columns in the Page Layout field by completing one of the following steps: Select 1-Column to create a one column body design for your page. In this layout the top, middle and bottom each contain one column in the center of the page. Select to split the body section of the website so the top section contains two columns, followed by one wide column, then the middle section contains three columns, and the bottom section contains one column. Select to split the body section of the website so the top section contains two columns, the middle section contains three columns, and the bottom section contains one column. Edline Manual Edline 2011 Page 15

16 Select 2-Column to create a single column for the top and bottom section and a two column middle section for your page. The default width displays the left column as a third of the page width, and the second column as two thirds of the page width. You can change the width of any column. Select 3-Column to create a single column for the top and bottom section and a three column middle section for your page, where the second column is the widest on the page. You can change the width of any column. Centering Your Page You can determine to display your web page in the center of the screen, or if the website will be justified to the left side of the screen. To Center Your Page 1. Select Page from the Site Designer tree-view to open the Design Properties dialog. 2. Select the Other tab to view the options for the page. 3. Select Yes in the Page Centered field to center the page, or select No to set the page to left justify. Setting the Icons You can select which icons will be used in your website. They will appear next to the titles of items in lists, such as the Contents section or Links section. The system defaults to the Standard Icons displayed in the following table, but you can remove the icons or substitute them with bullets or arrows. Item District School Group Folder Document, examples of types: Excel, Word, Zip, MP3, Image file, PDF, Power Icon Edline Manual Edline 2011 Page 16

17 Point, Flash image, Video Link Discussion Board RSS Feed Show/Collapse Section The ability to change icons is usually available to district/school super users, or any user with design permissions enabled on the school level. The change is all or nothing you cannot select which icons to change. To Set the Icons 1. Select Page from the Site Designer tree-view to open the Design Properties dialog. 2. Select the Other tab to view the options for the Page. 3. Select the types of icons to use from the Icon Set field. Select one of the following options: Select Standard Icons for the Edline picture icons displayed in the previous table with the hyperlink-name of the content. Select Bullets and Arrows to display the different content of the district, school, teacher (class), sport, or activity web page using bullets and arrow icons with the hyperlink-name of the content. Select Arrows to display the different content using arrow icons with the hyperlink-name of the content. Select None to display the different content as the hyperlink-name of the content only. Setting the Minimum Height for the Page You can enter the minimum height for your school or district web page, however the default is zero (0). 1. Select Page from the Site Designer tree-view to open the Design Properties dialog. 2. Select the Other tab to view the options for the Page. 3. Type the minimum requirement in the Minimum Height field. Setting Colors for Your Website Using your school colors is an easy way to brand your website. Edline allows you to set background colors, text colors, and border colors for your web pages or sections of pages. To make setting and changing colors easy, follow these recommendations: Edline Manual Edline 2011 Page 17

18 Use the Color Theme options to create custom color names such as Overflow, Primary Background, and Header Text. Once you set custom color names, select those color names whenever you choose a background or text color for sections of your website. As a result, you will get the exact shade of your school's colors without having to enter the precise color tone again, and it makes it easier to make color changes in multiple places on your website in only one step. To Create Custom Color Names for Your Website By using a custom color name (instead of the color itself), you only need to change the color in one place and it will be updated throughout the website wherever that color is used. For example, if you set Custom Color # 3 name to Accent Background and set that color to blue, when you set your footer, menu bar, and left column to use Accent Background, they would be blue. Later, you could change Accent Background to green for a springtime theme and all the sections of your website that were blue would switch to green at once. Another advantage for district super users to create color themes, is that you could make one design that could be used by all your schools, and the schools would only have to change the custom colors to fit their school colors and the new colors would flow throughout the website, quickly branding the design to their colors, while keeping the balance and look of the overall district design. 1. Select Page from the Site Designer tree-view to open the Design Properties dialog. 2. Select the Color Theme tab to view the options. Custom Color Tab in Design Properties Dialog with Suggested Custom Color Names Edline Manual Edline 2011 Page 18

19 3. Set the Custom Color #1-9 by completing the following steps: a. Type the name for the color in the Custom Color # Name field. Tip: The Custom Color # Name fields in the previous picture contains the recommended naming conventions we suggest for your custom colors. b. Assign the color to the Custom Color # by completing one of the following steps: Type the hexadecimal number of the color you want. Click the ellipsis icon ( ) to access the color pallet where you can select the color. Select the type of pallet from the drop-down list (options include the Edline Pallet, the Web Safe Pallet, and the Gray Scale Pallet), and then select the color square for the color. After you have set the color names for your color theme, assign each section of your website to one of them by clicking the drop-down arrow icon ( names. ) on the Color tab to access the list of custom color To Set the Page Overflow Color You can determine the color around the edge of your web page content. The page overflow color appears when the size of the Browser window is larger than the layout of your web page. 1. Select Page from the Site Designer tree-view to open the Design Properties dialog. 2. Select the Colors tab to view the options for the Page. Note: You can also set the Border Color in this tab for the Page. For more information about borders, see the Setting Borders and Corners topic. 3. There are several different ways to set the Overflow Color: a. The preferred method is to assign one of your color names from your Color Theme settings by clicking the drop-down arrow icon ( ). b. If you have not created color theme names as suggested, you can type the hexadecimal number color code in the box, or click the ellipsis icon ( where you can select the color. ) to access the color pallet To Set Text and Background Colors You can set the colors for the text font and background in any section the web page. The easiest way to assign color when creating a new design is to set the text and background colors at the highest level of the page using that color. Using that approach, the color will cascade down through each section of the page so you do not have to set it at each level. You can then set another color to a specific section or column to have that area standout. Edline Manual Edline 2011 Page 19

20 For example, if you want most of the Body section background to be cream, but gold in the Left Column, you just need to set the Body to cream, and the Top, Bottom, and Middle section with all the columns will be cream. You can then set the Left Column to gold. One advantage of setting the item colors at higher levels, rather than setting colors for the individual boxes (News, Calendar, etc.) is that if you later want to move a box, such as News, from the cream section of the page into the gold column, the News will automatically blend in by picking up the gold color of the Left Column when you move it. If you had individually set the News box to cream and moved it into the Left Column, it would remain set to the cream color. When you select the Colors tab for the section, column, or box you want to set, it is recommended you assign colors to the following fields in the properties: Header Highlight Color The Header text is the title of a particular box or folder on the page, such as News or Links. If you choose to include a header highlight (a background box for the text or an underlining rail as described in the topic Setting Additional Properties for Specific Body Sections), you can set the color for the header highlight in the Colors tab. Header Text Color You can set the color of the font used as the title of a particular box or folder on the page, such as Calendar or Contents. Background Color You can set the color of the background of a section, column, or box. Body Text Color You can set the color of the font for the body of the text in a section, column, or box. Note: You can also set the Border Color in this tab. For more information about borders, see the Setting Borders and Corners topic. To set color for the Body or any sub-section, complete the following steps. 1. From the tree-view of the Site Designer, select the section or sub-section where you want to set the colors. 2. Select the Colors tab to view the property fields. 3. Set the Header Highlight Color, Header Text Color, Background Color, and Body Text Color fields: a. The preferred method is to assign one of your color names from your Color Theme settings by clicking the drop-down arrow icon ( ). b. If you have not created color theme names as suggested, you can type the hexadecimal number color code in the box, or click the ellipsis icon ( where you can select the color. ) to access the color pallet Note: To set the colors of menus, see the Setting Menu Properties topic. Edline Manual Edline 2011 Page 20

21 To Set Colors for the Page Header In the Header section of the page, the background and text (font) colors are only seen on pages where the "breadcrumbs" are displayed. Breadcrumbs are hyperlink text that appears when you are not on the Home page. These hyperlinks display the path from the Home page to the page you are viewing, so you can easily backtrack to a previous page. 1. From the tree-view of the Site Designer, select the Header section. 2. Select the Colors tab to view the property fields. 3. Select the Background Color for the breadcrumbs by selecting the color: a. The preferred method is to assign one of your color names from your Color Theme settings by clicking the drop-down arrow icon ( ). b. If you have not created color theme names as suggested, you can type the hexadecimal number color code in the box, or click the ellipsis icon ( where you can select the color. ) to access the color pallet 4. Select the color for the breadcrumb Text Color by selecting the color from the pallet selection (complete steps a and b). Note: The Selection Background Color and Selection Text Color fields are not used. 5. Set the color to appear behind any header images from the Graphic Overflow Color field. (To select a header image, see the Selecting a Header Image topic.) This color will be seen only if the graphic header image you choose is not as wide as the page. (Complete steps a and b). Note: You can also set the Border Color in this tab for the header image. For more information about borders, see the Setting Borders and Corners topic. Selecting a Header Image The header image will automatically be displayed at the top of all web pages on your website except certain internal resource pages. The dimensions for the header area image must not surpass the width of your website design (which is the sum of the column widths plus any borders) x 200 pixels (height). Important: It is highly recommended that all attachments be no larger than 2 MB so that the files do not take a long time to display when your users open the page. If you are having problems uploading large files, please consider the speed of your network connection. To Select an Image for the Header Section 1. From the tree-view of the Site Designer, select Header, and expand the Other tab to view the property fields. Edline Manual Edline 2011 Page 21

22 2. Select Upload from the Header Image field to display the Upload Image File field. 3. Click Browse from the Image File field to search for the image to add to the Header. (You can select a stored image from the drop-down list if available.) 4. Click Upload to add the file. Note: To remove an image from a Header, select Delete from the Header Image field. Setting Margins and Padding (Spacing) for Your Website You can determine the amount of space in pixel size between any section of the web page and between the edge of the section and the text within it. The margin is the space between sections, and the padding is the space from the section edges to the text within it. To Set the Margin and Padding 1. From the tree-view of the Site Designer, select the section or sub-section where you want to change the margins or padding. 2. Select the Margin and Padding tab to view the property fields. 3. Type the pixel size for the top, right, bottom, and left sides of the section in the Margin field. The margin is the space between sections, column, and boxes. For the Page section it would be the space between the Page and your browser toolbar. 4. Type the pixel size for the top, right, bottom, and left sides of the section in the Padding field. The padding is the space from the box edges to the text within it. You can set the padding amount in the Body section and any of the sub-sections which would apply to the padding of the boxes in the section, but you cannot set padding for the Page as a whole. Setting Borders and Corners You can add a border of a specific color and line width between any section on the web page, or around the entire page as a whole. You can also round the corners between each section by setting the curved size, and select which corners will be curved. Important: When you add a border, the page width and height will be increased. For example, if you set the page to 900 pixels in width, and then add a 1 pixel border, the page width will equal to 902 pixels. To Add Borders and Corners 1. From the tree-view of the Site Designer, select the section or sub-section where you want to change the borders and corners. 2. Select the Borders and Corners tab to view the properties. Edline Manual Edline 2011 Page 22

23 3. Select the type of border to add from the Border Style field. Options include Solid, Dotted, Dashed, and Double. 4. Type the pixel thickness for the line in the Border Width field. You must type the size for the top, right, bottom, and left lines for the lines to be drawn. 5. Select the Border Color by completing the following steps: Click the selection icon to access the color pallet. The preferred method is to assign one of your color names from your Color Theme settings by clicking the drop-down arrow icon ( ). If you have not created color theme names as suggested, you can type the hexadecimal number color code in the box, or click the ellipsis icon ( ) to access the color pallet where you can select the color. 6. Set the corner options for the border by completing the following steps: Select the corners that will be curved from the Corners to Round field. Check Top Left Corner, Top Right Corner, Bottom Left Corner and Bottom Right Corner to round each corner. Type the pixel size of the curvature in the Corner Size field. Click Set to apply changes and preview the rounded corners. Setting Fonts You can select the font style for any part of your website. You can select one style for the header text title (such as News), and another font for the body text. You can set the font for the whole Body section so that all fonts throughout the page will be the same, or change the font for a particular subsection. To Set the Font Styles 1. From the tree-view of the Site Designer, select the section or sub-section where you want to change the fonts. 2. Select the Fonts tab to view the properties. 3. Click the ellipsis ( ) icon to access the Font dialog. For sections of the Body, you can change the fonts of the body text in the Body Font field, or the header text (for box titles such as News) in the section Header Font field. In the Page Header section, there is only one Font field to set the font style for your breadcrumbs. 4. Set the font details by completing the following steps: Edline Manual Edline 2011 Page 23

24 Select the type of font from the Font Family field. Select the type-face for the font from the Font Style field. Options include Normal, Italic, or Oblique. Select the size for the font from the Font Size field. Select the boldness for the font from the Font Weight field. Options include Normal, Bold, and weight sizes. Select the capitalization style from the Font Variant field. Options include Normal and Small-Caps. Click OK when finished with the font selections. Setting Menu Properties You can set properties for your own navigation menu bar if you have created one to help visitors access specific sections of your website. To create your own menu bar, see the Adding a Menu to Your Site topic. Although the personalized Edline Menu is always available on the top of every Edline page for users who login, you can also place it in one of the columns if it is not there, and you can set its properties as described in this topic. To include the Edline menu bar in extra places on your website, see the Adding New Boxes to Your Site topic. To Set the Menu Bar Properties 1. From the tree-view of the Site Designer, select the section of the page that contains the menu bar you are updating. 2. Select the menu bar you want to edit. 3. Select the Menu Properties tab to view the properties. 4. Set the menu specific properties by completing the following steps: Determine whether or not to add a separation between each menu name from the Menu Item Separator field. Options include Yes to display a line between each menu, and No to not show a line. Type the amount of pixel spacing to set between each menu option in the Menu Item Spacing px field. Select the alignment for the menu options from the Menu Item Alignment field. Options include Left, Centered, and Right. Determine whether or not to make the menu stand out with a gradient color using the Gradient Background field. A gradient background fades the menu from one color to another. Select Yes for the gradient background, or No to not have a gradient background. Edline Manual Edline 2011 Page 24

25 If you added a gradient background, select the first color in the Gradient Start Color field and the second color in the Gradient End Color field. The menu will fade starting with the first color to the second color. Set the direction for the gradient background from the Gradient Orientation field. Options include Vertical and Horizontal. Select the color for the Selection Background Color. This color appears as a background highlight color when a user moves their mouse over a menu option. Select the color for the Selection Text Color. This color appears on the text when a user moves their mouse over a menu name. 5. Select the Color tab to set the Background and Body Text color for your menu: a. The preferred method is to assign one of your color names from your Color Theme settings by clicking the drop-down arrow icon ( ). b. If you have not created color theme names as suggested, you can type the hexadecimal number color code in the box, or click the ellipsis icon ( the color pallet where you can select the color. ) to access Setting Additional Properties for Specific Body Sections You can set additional properties for the Body, and all the different sub-sections of the Body area using the Other tab available in Site Designer. You can determine options such as whether or not to display the title of a box, whether the boxes are expanded or collapsed, how many items to display in a list, and other variable options appropriate to the box you are setting. To Set the Additional Properties Using the Other Tab 1. From the tree-view of the Site Designer, select the section or sub-section where you want to change section specific properties. 2. Select the Other tab to view the property fields. 3. Determine whether or not to display the box title name from the Show Header field. Options include Yes to show the title, and No to not show the title. 4. Determine when the content will be displayed from the Expand/Collapse Box field by selecting one of the following options: Select Always Expanded to have the information shown at all times. Select Initially Shown to have the information shown when the user accesses the page. The user will not have to click on the item to view it the information will be displayed, but the user can collapse it to remove the contents from view. Select Expand on Click to only display the section when the user clicks to expand the information. Edline Manual Edline 2011 Page 25

26 5. Select the type of highlight to add to the box title from the Header Highlight Type field by selecting one of the following options: Select Rail to include a border underneath the header (title or name of the box). If you select Rail, you will need to type the weight of the rail in pixel size in the Header Rail Thickness field. Select Background to add a color background to the name of the box. Select None to just display the name without a header highlight. 6. When you upload an image or document to appear in the specific section, you can determine where to position a thumbnail of the file from the Thumbnail Position field. Options include Top and Left. 7. For list-type sections, such as Contents, News, and Links, set the list options: Type the maximum number of items to display in the section in the Max Items to Show field. Type an integer between Type a set height for the section in the List Height field. To have the system generate the height for the section, keep this field set to zero (0). 8. When you add a box to your website, open the Special Options properties tab to select how to display the box from the Render Folder As field. Options include Box to display the content as a boxed area similar to News and Calendar; Horizontal to display the content across the page such as a horizontal menu bar; and Vertical to display the content down the page such as a vertical menu bar. Adding New Boxes to Your Site If you have design permissions, you can add new boxes to your Edline district, school, teacher (class), sport, or activity web page. These boxes can include menu bars, footer information, a principal message or perhaps student or teacher spotlights. You can also highlight existing items or folders, such as your Sports folder, by adding it to your home page as a new box. Teachers with design privileges may want to add special boxes for Study Guides or highlighted projects. To Add a Box to Your Group (District, School, Class, Sport, Activity) Web Page You can add a new box (folder, document, etc.) to your web page with the Add Box icon available from the Edit Mode toolbar. You can add boxes using existing contents; by creating new content; or by adding special Edline boxes currently not on the page. If you are adding the box to your current live design, open the web page where you will add it. From the Edline menu bar, click Edit This Page to access the Edit Mode toolbar. If you are adding it to a design that is not yet active, select Manage Design from the Tools menu to access the Manage Design page. Select the design where you will add the box and click Edit to open Site Designer tree-view. Edline Manual Edline 2011 Page 26

27 Edit Mode Toolbar 1. From the Edit Mode toolbar, click Add Box to access the What type of box would you like to add? dialog. What type of box would you like to add? 2. Select the type of content to add by completing one of the following steps: To add a box using existing content, select the content from the Existing Content treeview and click OK. The box will be added to the page in the top of the Middle Section. The Design Properties dialog will open and you can set the box's properties as described in the Setting Design Properties section. If the default Edline boxes News, Calendars, Links, Contents are not on your website design, they also can be chosen the from Existing Content tree-view. To add new content, select the type of content to add from the New Content field. Options include Document, Link, RSS Feed, and Folder. Click OK to access the Where do you want your new Document? dialog. Select the folder where you want to store the document and click OK. The Create Document or Create Folder page appears where you can create the document, link, news feed, or folder. The box will be added to the page in the top of the Middle Section. The Design Properties dialog will open and you can set the box's properties as described in the Setting Design Properties section. Edline Manual Edline 2011 Page 27

28 Tip: You may want to store some of the content for your new boxes in a hidden folder so users do not see them other than on the page design itself. In that case, first create the folder on your website, set it to Show via Site Designer, but hide in lists, save your documents in the folder, and then choose them from the Existing Content section of the dialog. For instructions on creating and hiding folders, refer to the section on Creating Folders for Your Website in the online help. To add one of the special Edline boxes, choose the box from the Special Edline Box field and click OK. The box will be added to the page in the top of the Middle Section. The Design Properties dialog will open and you can set the box's properties as described in the Setting Design Properties section. The special boxes include: o o o Group Info is the default box that includes an image and description of your group district, school, class, or any other group, usually in the center of a group page. Questions or Comments is a box where a link with the name of the teacher or super user of the page will appear so users in the school can them. The address itself will not appear. Edline Menu is a personalized menu for users who sign-in. It contains the same options as the main Edline menu bar that are already available on the Edline Menu Bar that is visible at the top of every page when a user signs in. 3. Once the box is on your web page, you can drag and drop the box to the desired location. (See the To Drag and Drop the Boxes on the Web Page topic for more information.) 4. Click Done when finished. The Unsaved Changes dialog appears. Unsaved Changes Dialog 5. To save the changes to the current design, click Save Changes and Exit, and then click OK. Note: You can also save the changes to a new web page design with a new name, or ignore all changes you have entered. Edline Manual Edline 2011 Page 28

29 Adding a Flash Image to Your Site Before you place a Flash animation on your Edline web page, the Flash file must first be created with a third-party software program and saved to a location you can access. Reminder Flash images are not compatible with Apple products, such as the I-Pad. Important: It is highly recommended that all attachments be no larger than 20 MB. If you are having problems uploading large files, it may be related to the speed of your Internet connection. To Add a Flash Image If you are adding the Flash to your current live design, open the web page where you will add it. From the Edline menu bar, click Edit This Page to access the Edit Mode toolbar. If you are adding it to a design that is not yet active, select Manage Design from the Tools menu to access the Manage Design page. Select the design where you will add the Flash animation and click Edit to open Site Designer tree-view. 1. From the Edit Mode toolbar, click Add Box to access the What type of box would you like to add? dialog. 2. From the New Content field, select Document and click OK. The Where do you want your new document dialog appears. Where do you want your new Document Dialog Edline Manual Edline 2011 Page 29

30 3. Select the location to store the Flash, and click OK to access the Create/Modify Document page. Tip: You may want to store your images in a hidden folder so users do not see them other than on the page design itself. For instructions on creating and hiding folders, refer to the section on Creating Folders for Your Website in the online help. 4. Type a name and description for the Flash file in the Document Title and Document Summary fields. 5. Click Import an existing file in the Add Content section. 6. Search for the file by clicking Browse, and then click Import to attach the Flash (.swf) file. Note: If you update a Flash file in the third-party software and want the newest changes to be available in Edline, you must clear the file in the Add Content section, and re-import the updated version of the Flash file. 7. Click Save and Return. The box will be added to the page in the top of the Middle Section. The Design Properties dialog will open and you can set the box's properties. 8. In the Other tab, set the Show in Box property to Contents auto ht, and the Show Header field to No (unless you want the title to appear in the header). For more information see the Setting Design Properties section. 9. Once the Flash image is on your web page, you can drag and drop the box to the desired location. 10. Click Save when finished. Adding Images to Your Web Page There are several ways to add an image to a web page. Every user with the ability to add documents to their web page can add pictures to those documents as described in the Adding Images to a Document topic in the online help. Every super user (including teachers and coaches) can add a Group Info image to their page. The Group Info image is usually the main picture in the center of the group (district, school, class, sport, club, or other activity) page and is a part of the description of the group. To add a Group Info image, see theadding an Image to a Group Page topic in the online help, or the Setting Up the Teacher/Class Page topic. To add additional images to appear on your web page, you will need design privileges. Complete the following instructions. To Add an Image on a Web Page If you are adding the image to your current live design, open the web page where you will add it. From the Edline menu bar, click Edit This Page to access the Edit Mode toolbar. Edline Manual Edline 2011 Page 30

31 If you are adding it to a design that is not yet active, select Manage Design from the Tools menu to access the Manage Design page. Select the design where you will add the image and click Edit to open Site Designer tree-view. 1. Click the Add Box button from the Edit Mode toolbar to access the Add Box dialog. 2. From the New Content field, select Document and click OK. 3. Select the location to store the image, and click OK to access the Create/Modify Document page. This location is not where the picture will be displayed you will move the image in the next few steps. You may want to create a folder for your page images. 4. Type the name of the image in the Document Title field. 5. Click the Enter Text By Hand link in the Add Content section, and then click the Image icon. By adding the image through the toolbar you can easily resize the image from the screen, which you cannot do if you import the image. You can also add a web link to the image, creating a "clickable" image. 6. Click Save and Return. The image will appear at the top of your web page with the Design Properties dialog, where you can adjust the image properties. 7. Set the design properties for the image. Change the following two options In the Other tab, set the Show in Box field to Contents auto ht, and the Show Header field to No (unless you want the title of the image to appear on the page). See the Setting Design Properties topic in the online help. 8. Drag and drop the image to desired location on the website. 9. Click Done to exit the edit mode. Adding a Clickable Image You can add a clickable image to a document or to your web page that will link users to another web page. With a clickable image, when the user moves their mouse over the image, text will appear with instructions. When the user clicks on the image, it will open another web page. To Add a Clickable Image To add a "clickable" image, start by following the instructions in the Adding Images to a Document section. Once the image is in the document, complete the following instructions. 1. From the Document page, click on the image in the text box, then click your right-mouse button and select the Insert/Edit Link icon. The Insert/Edit Link dialog appears. Edline Manual Edline 2011 Page 31

32 Insert/Edit Link Box Type or paste the link for the image in the Link URL field for an external website link, or search for an internal link on your Edline website by clicking the Browse ( a user clicks on the image, the web page listed in this field will open. ) icon. When Select whether the link will open in a new window or in the same window from the Target field. Type the name of the link in the Title field. Optional this information will not be displayed to users. Tip: To add instructions to appear to the user when they move their mouse over the image, type the information in the Title field on the Insert/Edit Image dialog. See the Adding Images to a Document topic for more information. Click Insert to create the clickable image. 2. Click Save to add the clickable image. 3. Click Done to exit the edit mode. Adding a Menu to Your Site Edline enables users with appropriate permissions to add navigation or menu bars to the website. A menu bar in Edline is a folder box that is set to be rendered as menu in the Design Properties dialog. To create the menu bar, you will first need to create a folder with Edline links inside of it, and then add that folder into the design using Site Designer. See the topic Adding New Boxes to Your Site for more information. Note: If you are using a template prepared by your district, you may only need to fill the placeholder with your own school s information. See Deploying District Templates to Create School Designs for more information. Edline Manual Edline 2011 Page 32

33 Customized Menu To Add a Menu Bar 1. From the menu bar, click the View Page As icon, and select List View. The system displays the list of contents. 2. Create a hidden folder that includes links (the links will be what your users will see as the menu bar items) by completing the following steps: From the drop-down list, select Folder and click Add. If you already have a Design Resources folder where you have placed other special boxes for your site, add the new menu folder as a sub-folder there. Type Main Menu as the name for the menu in the Folder Name field. This name will not appear in the menu once it is created, but use a name that will have meaning for you, such as Menu Bar or Shortcuts. Click Change Visibility to hide the folder in the Folder Visibility page. Select Show via Site Designer, but hide in lists and click Update. Click Save and Return to save the folder information. 3. Add links to the folder by completing the following steps: Click on the name of the folder you created in step 2. Edline Manual Edline 2011 Page 33

34 Resource List Page To create the first link, select Link from the drop-down list and click Add. Type the name of the menu item in the Document Title field. Important: The names that you enter for the Document Title display as the actual menu items your users will see in the menu bar once you add the menu to the page design in Site Designer. Click Link to for an internal link to an existing Edline web page, document or folder in your school, and select the link destination for your menu. Type or paste the full URL if you are linking to an external website. For any non-edline website, check the View Link In A New Window When Clicked option. Note: The internal links in your menu bar will direct your users to the actual content (documents, folders, groups) that exists in separate locations throughout your Edline website. When the user selects the item in the menu bar, the document, folder, or web page will appear. Click Save and Return, or click Save and Add Another to add more links to the menu. Important: It is recommended that menu links point to folders that contain content whenever possible, since the menu bar will automatically display everything in the folder as a drop-down menu (a sub-menu) for your users to view. For example if you create an internal link to a folder called Departments, whenever you add department groups (Math, English, etc.) to the folder, they will automatically appear on the drop-down sub-menu listing all the departments. 4. Incorporate your new menu bar into your web page by completing the following steps: Click the Home icon if you are not already on the Home page. If you are adding the menu to your current live design, from the Edline menu bar, click Edit This Page to access the Edit Mode toolbar. If you are adding it to a design that is not yet active, select Manage Design from the Edline Manual Edline 2011 Page 34

35 Tools menu to access the Manage Design page. Select the design where you will add the menu and click Edit to open Site Designer tree-view. From the Edit Mode toolbar, click Add Box to access the What type of box would you like to add? dialog. From the Existing Content field, find the menu folder you created. Click OK. The box will be added to the page in the top of the Middle Section. The Design Properties dialog will open and you can set the box's properties. 5. Set the properties for your menu bar in the Special Options tab: Special Options Determine whether or not the menu bar will be accessible in all pages from the Include in Pages field. Options include All Subpages to list the menu throughout the website; No Subpages to only include the menu on the main Home page; and School, not Classes to include the menu on all pages except class (teacher) pages. In the Render Folder As field, you must select either the Vertical Menu option or the Horizontal Menu option to display the section as a menu bar. 6. Set additional properties for the menu bar in the following tabs. For districts creating a design to be shared by schools, select the Placeholder Properties tab to determine whether or not the menu should be a placeholder to be filled by schools in your district. See the Setting Placeholder Properties topic. Select the Menu Properties tab and update the menu bar design by completing the steps in the Setting Menu Properties topic. Select the Colors tab and update the color scheme for the menu bar by completing the steps in the Setting Colors for Your Website topic. Select the Fonts tab and update the font type for the menu bar by completing the steps in the Setting Fonts topic. Edline Manual Edline 2011 Page 35

36 Select the Margin and Padding tab and update the spacing for the menu bar by completing the steps in the Setting Margin and Padding (Spacing) topic. Select the Borders and Corners tab and update the borders and shape for the menu bar by completing the steps in the Setting Borders and Corners topic. 7. Once the menu is on your web page, you can drag and drop the box to the desired location. 8. Click Save and Done to update the website design with your menu bar. Adding a Footer to Your Site Edline enables users with appropriate permissions to add a footer to your school website. This footer can contain the name and address of your school or district, copyright information, or any other information you want displayed at the bottom of the website. To create a website footer you will first need to create a document that includes the footer contents, and then add the document to the design using Site Designer. Note: If you are using a template prepared by your district, you may only need to fill the placeholder with your own school s information. See Deploying District Templates to Create School Designs for more information. Customized Footer To Add a Footer 1. From the menu bar, click the View Page As icon, and select List View. The system displays the list of contents. 2. Create the document containing footer information by completing the following steps: Edline Manual Edline 2011 Page 36

37 From the drop-down list, select Document and click Add to access the Create Document page. Type a name for the footer document in the Document Title field, such as Footer. In later steps, we'll set a property to hide the name. Click Enter Text By Hand in the Add Content section and type and format the information to appear in the footer. Click Save and Return to save the document. Tip: Place the footer document (and all design assets) in a hidden folder so users do not see document other than in the footer contents. For instructions on hiding folders, refer to the section on Creating Folders for Your Website in the online help. 3. Add your new footer to your web page design by completing the following steps: Click the Home icon if you are not already on the Home page. If you are adding the menu to your current live design, from the Edline menu bar, click Edit This Page to access the Edit Mode toolbar. If you are adding it to a design that is not yet active, select Manage Design from the Tools menu to access the Manage Design page. Select the design where you will add the menu and click Edit to open Site Designer tree-view. From the Edit Mode toolbar, click Add Box to access the What type of box would you like to add? dialog. From the Existing Content field, find the footer document you created. Click OK. The box will be added to the page in the top of the Middle Section. The Design Properties dialog will open and you can set the box's properties. 4. Set the design properties for your footer by completing the following steps: Special Options Edline Manual Edline 2011 Page 37

38 In the Special Options tab, determine whether or not the footer will be visible in all pages of the website from the Include in Pages field. Options include All Subpages to display the footer throughout the website; No Subpages to only include the footer on the main web home page; and School, not Classes to include the footer on all pages except class (teacher) pages. For district websites there is an additional choice, District, not Schools for a footer you want only on the district pages and not on the school pages. For districts creating a design to be shared by schools, select the Placeholder Properties tab to determine whether or not the footer should be a placeholder to be filled by schools in your district. See the Setting Placeholder Properties topic. Select the Colors tab and update the color scheme for the footer by completing the steps in the Setting Colors for Your Website topic. Select the Fonts tab and update the font type for the footer completing the steps in the Setting Fonts topic. Select the Margin and Padding tab and update the spacing for the footer by completing the steps in the Setting Margin and Padding (Spacing) topic. Select the Borders and Corners tab and update the borders and shape for the footer by completing the steps in the Setting Borders and Corners topic. Select the Background Images tab and add any pictures to the footer by completing the steps in the Setting Background Images topic. 5. Select the Other tab to choose additional formatting properties to set for the footer. Other Section Edline Manual Edline 2011 Page 38

39 Adjust the Show in Box property to Contents auto ht unless you have included images in the footer. In that case, you may have to adjust the footer to a fixed height. Select No from the Show Header field so the box header title does not show. Note: For more information about the Other fields, see the Setting Additional Properties for Specific Body Sections topic. 6. Once the footer is on your web page, you can drag and drop the box to the desired location. 7. Click Save and Done to update the website design with your customized footer. Setting Background Images You can add an image to the background of a section on the web page, or around the entire page as a whole. This feature allows you to customize the background of your web pages with more visual effects than just colors. Important: It is highly recommended that all images be no larger than 2 MB so that the files do not take a long time for your users to view them. If you are having problems uploading large files, please consider the speed of your network connection. To Add a Background Image 1. From the tree-view of the Site Designer, select the section or sub-section where you want to add a background image. 2. Select the Background Images tab to view the properties. 3. Search for the image to use in the Background Image field by clicking the ellipsis ( ) icon. Edline Manual Edline 2011 Page 39

40 Site Designer Dialog for Background Image Select an image already available in Edline through the Site Designer tree-view, or click the Browse button in the File field to search for an image. Click Upload and Continue. Click Select and Continue to add the picture and access the design properties. 4. Configure the setting for the background image by completing the following steps: Determine if the image will be opaque by typing the picture strength in the Opacity field. For example, 100 will be 100% strength, but 50 will be a 50% lighter shade of the picture. To set the image transparency level from the Use Transparent Background Instead of Opacity field. Select Yes, to set the picture as sheer, or No to set the picture as not transparent. Select the location for the background image from the Background Image Position field. The default location is Top Left, but there are several image locations to choose. You could also type a measurement for the location in the Background Image Position - Advanced field. Edline Manual Edline 2011 Page 40

41 Select whether or not the image will be repeated in the background from the Background Image Repeat field. Options include None for no repeats; Horizontal for a repeat across the page or section; Vertical for a repeat down the page or section; and Both to repeat the image across and down the page or section. Setting Placeholder Properties Placeholders on a web page allow the designer to create a box with temporary generic contents that will be updated by others at a lower level. For example, for districts that create a template for their schools to modify with their own content, the placeholder box might be a spot for each school to fill with their own mission statement or a principal s message. You can also place content such as images in a placeholder box that schools can leave or replace as desired. A school could create a placeholder for their default class design so that teachers could add a student spotlight or special project. To Set the Placeholder Properties 1. From the tree-view of the Site Designer, select the box where you want to set placeholder properties. 2. Select the Special Options tab to view the property fields. In the Include in Pages field set whether or not to include the box content in sub-pages of the district or school. Options include No Subpagesto set the content to be displayed in the main home page only, and All Subpages to display the content in all pages. You can also set it so only schools and groups can see the content but not the class pages. 3. Select the Placeholder Properties tab to view the property fields. 4. Set whether or not the customized box will be a placeholder from the Is a Placeholder field. Select Yes to add the section as a placeholder if you want to allow others at a lower level (district to school, school to class) to replace content you may have placed there as a starter. Select No if the box is to contain content controlled by the district or school and not available to others at a lower level to update on their own. 5. Type the title for the box in the Placeholder Name Override field as it is to appear on the page, if you want a different name than the document itself. For example, if you created a box with an image file called School Pix but you want the box to have the title Our School, type Our School in the Placeholder Name Override field. 6. If you choose to make the box a placeholder, select where the content can be set from the Placeholder Content Can Be Set field. Options include No Subpages to only display the placeholder content in the main home pages, and All Subpages to allow super users of all groups to set their own content. You can choose specific areas where it can be set such as the district or school, or open it to super users of class or other group web pages. 7. You can determine whether or not to include the current content for the placeholder until the actual content is set from the Show Placeholder until Content Set field. Select Yes to display Edline Manual Edline 2011 Page 41

42 the current content in the placeholder until the super users fill it on their own pages. Select No to keep the box empty until new content is added there. Edline Manual Edline 2011 Page 42

43 Maintaining Your Website Design Whether Edline Design Services created your Edline website or you created your own, you will want to be familiar with design capabilities so that you can enjoy changing your website at your own convenience. You can easily remove and rearrange portions of your website, and you can quickly update the names of specific sections. You can also update all the section property settings detailed in the Setting Design Properties topic, such as fonts, colors, and layout. To update the design of a specific section directly from the live active web page, go to the page you want to change, select Edit This Page from the Edline menu bar, move your mouse to the section you want to change, and then select the Edit Design Properties icon. Rearranging or Removing Boxes on Your Website Edline provides several different features to allow you to easily rearrange the boxes on your website to other columns or areas on the web page, or you can remove the boxes from the page. The ability to rearrange the design is usually available to super users or users with design permissions enabled, but can be enabled for other school staff. To Drag and Drop the Boxes on the Web Page Edline Site Designer enables you to move any box using an easy drag-and-drop method from any home web page (district, school, class, sport, activity, club, assuming you have permissions enabled to update designs). This feature enables you to quickly rearrange the layout of boxes on your website. 1. From any home page, click Edit This Page from the menu bar. 2. Hover over the box that you want to move. Shading will appear around the box to indicate it has been selected. Edline Manual Edline 2011 Page 43

44 Drag and Drop Feature 3. Click and drag the box where you want it to appear and release the mouse button. 4. Click Done when finished. The Unsaved Changes dialog will appear. Edline Manual Edline 2011 Page 44

45 Unsaved Changes Dialog 5. Save the design changes by completing one of the following steps: To save changes to your current design, click Save changes and exit. To create a new design and save your changes in that design, type a name in the box and click Save changes into a new design and exit. To exit without saving any changes made, click Ignore changes and exit. 6. Click OK when finished. To Remove the Boxes from the Web Page Edline Site Designer enables you to move any box using an easy delete method from any home web page (district, school, class, sport, activity, club, assuming you have permissions enabled to update designs). This feature enables you to quickly delete boxes on your website. 1. From any home page, click Edit This Page from the menu bar. 2. Hover over the box that you want to delete. Shading will appear around the section to indicate it has been selected. 3. Click the Delete this box ( ) icon. A dialog appears ensuring the deletion. 4. Click OK to delete the box. 5. Click Done when finished. The Unsaved Changes dialog will appear. 6. Save the design changes by completing one of the following steps: Edline Manual Edline 2011 Page 45

46 To save changes to your current design, click Save changes and exit. To create a new design and save your changes in that design, type a name in the box and click Save changes into a new design and exit. To exit without saving any changes made, click Ignore changes and exit. 7. Click OK when finished. Changing the Name of Any Section Heading Edline enables districts and schools to change the name of any section heading of your district or school website. For example, if you would like to change the Links section to be called Useful Links, you can change the name. To Change the Name of Any Section Heading on the Website Open the web page or folder that contains the section heading you would like to change. 1. From the Edline menu bar, click Edit This Page to access the edit mode. 2. Click the name of any section, and update the name of the section heading by typing on the screen. 3. Click Save. 4. Click Done to exit the edit mode. Tip: Use this same method to quickly change any document name, folder name, or group name on Edline. Edline Manual Edline 2011 Page 46

47 Managing the Designs and Templates Your district or school can create numerous designs for specific types of web pages (class, sports, etc.), for specific seasons, or for specific events. The Manage Design page will list the copies of all the designs and templates. Manage Design Page Using the design features available in Edline, your school can design their website by adding a splash page for the home page, and creating an entirely different design for group (classes, sports, or activity) pages. Super users will also be able to create and select default designs for entire categories of pages, such as classes, groups, documents, and folder pages. Districts and schools can also create templates to help others create their web designs. A template is a set of design properties stored for your teachers, coaches, and other school personnel to use at a lower level depending on their design permission. District or school super users create the templates. These templates can be used in your designs (similar to Microsoft templates). Edline Manual Edline 2011 Page 47

48 Warning: Do not update the currently active design. If you would like to use the active design as a starting point, use the Copy/Move function to make a copy of the active design and update the copy. Creating a New Design or Template Edline Site Designer enables you to create a new design or template for your district, school, class, or other group (sport or club). Use this feature to create a new web design or template from scratch. A template is simply a set of design properties stored for others at a lower level to use from the library. You can make multiple designs for your own use. The only reason to create templates would be to share with others at a lower level so they could base designs off your templates and not have to create designs from scratch. They could use the style of your templates for their design or they could use it as a starting point and make changes for their own pages. For example, a district super user would create templates in the district library for schools in the district to use. Schools would create templates in the school for teachers or group super users to use. To create a new template, you must first create a new design. To Create a New Design for a School Home Page 1. From the Manage Design page, click New. 2. Type a name for the design in the Name for new design field. 3. If the design will be based on an existing template, select the template from the Base on template (optional) field. 4. Click OK to add the design. To update the design styles, see the Creating the Design of Your Website topic. To Create a New Template 1. After creating the design, click on the name of the design you want to save as a template from the Designs section. 2. Click Copy/Move to access the copy and move fields. 3. Select the template area to move the design to in the To field. Only persons with design rights at the district level can put a template in the district template library. Likewise, only a person with district or school level design rights can place a template in the school template library. 4. Type a name for the template in the New Name field. Optional. 5. Select Move. 6. Click OK. When creating a new design, you can select this template to use as a basis for the new design. Edline Manual Edline 2011 Page 48

49 Important: Anytime a template is updated, any design attached to the template will also be updated. Setting the Default Design for Classes, Groups, Folders, and Documents With Edline Site Designer, users with permissions to update the website design can create and update designs for the entire school, all classes, other groups (sports, clubs, activities, etc.), folders, or documents. By creating default designs for a specific category of pages, all pages of that type (for example, all Class pages) will inherit any design properties set in the default design from the main design, unless the individual pages are changed at a lower level. For example, if a teacher who is allowed to change the design of their class web pages goes in and changes the color of a single section on a web page, that section automatically keeps the teacher's changes, and not the school level design settings for the changed section. This feature will allow schools to present a uniform design across their entire district or school website if they choose, while still allowing an option for teachers (or anyone given design permissions) to change their own web pages. To Update the Edline Design or Template 1. From the Manage Design page, click on the name of the page category you want to update from the Manage Default Design for field. Click either the name of the school, Classes, Other Groups, Folders, or Documents. 2. Select the design or template to update from the Designs or Template Library section. Warning: Do not update the currently active design. If you would like to use the active design as a starting point, use the Copy/Move function to make a copy of the active design and update the copy. 3. Click Edit to access Site Designer. See the Creating the Design of Your Website topic for more information on how to use Site Designer features. Important: Anytime a template is updated, any design attached to the template will also be updated. Setting Designs as Active or Current Default With the Edline Manage Designs page, you can select the default design to use for the entire school, all classes, other groups (sports and clubs), folders, and documents. By creating default designs for a specific category of pages, all pages of that type (for example, all Class pages) will inherit any design properties set in the default design, unless users at a lower level make changes (for example, a teacher who has been given individual design permissions for their class). This feature will allow for a uniform look across your entire district or school site. As a result, your staff (teachers, coaches, etc.) can quickly create their pages without managing the design. Edline Manual Edline 2011 Page 49

50 To Select an Active Design 1. From the Manage Design page, click on the name of the page category you want to update from the Manage Default Design for field. Click either the name of the school, Classes, Other Groups, Folders, or Documents. 2. Select the design to use as the default for the category from the Designs section. 3. Click Set as Active Design for the school design, or Set as Current Default to mark the design as the default for the specified category of web pages. Setting a School Home Page as a Splash Page If your school wants to create a splash page as the home page that will change throughout the school year, you can create this page while maintaining a consistent design throughout the remainder of the school's site. By creating at least two different designs one for the school's home web page, and one for your teacher, class, and activity web pages and using specific settings available in Edline, your school's Home page can be marketed to appeal to prospective students. To Set the Home Page to a Different Design Than the Remaining Site Warning: Do not update the currently active design. If you would like to use the active design as a starting point, use the Copy/Move function to make a copy of the active design and update the copy. 1. Using Edline Site Designer, create a minimum of two designs one for the Home page, and one for all other pages in the website. (See the Creating the Design of Your Website topic for more information on creating designs.) 2. From the Manage Design page, set the active design for all the other page categories by completing the following steps: Edline Manual Edline 2011 Page 50

51 Manage Design a. Click on Classes from the Manage Default Design for field. b. Select the design to use for all class pages from the Designs section. c. Click Set as Current Default. a. Click on Other Groups from the Manage Default Design for field. b. Select the design to use for all other group (sport, activity) pages from the Designs section. c. Click Set as Current Default. a. Click on Folders from the Manage Default Design for field. b. Select the design to use for all other folder sections from the Designs section. c. Click Set as Current Default. a. Click on Documents from the Manage Default Design for field. b. Select the design to use for all documents from the Designs section. Edline Manual Edline 2011 Page 51

52 c. Click Set as Current Default. 3. Once you have set the design for the group sections, set the Home page design by completing the following steps: Click on the name of the school in the Manage Design for field. Click on the design to use for the web page from the Designs section. Click Edit to access the Site Designer dialog. Site Designer Dialog Warning: Do not update the currently active design. If you would like to use the active design as a starting point, use the Copy/Move function to make a copy of the active design and update the copy. Edline Manual Edline 2011 Page 52

53 In the Properties for Page section, select No Subpages in the Include Properties In field for Special Options. Click Save to save the changes. Click Done to access the Manage Design page. 4. Click Set as Active Design to mark the design as the default for the Home web page. 5. Click Done when finished. Previewing a Design or Template With Edline Site Designer, before setting a particular design as the default, you can quickly preview the design or template for your school, classes, other groups (sports and clubs), folders, or documents. To Preview the Edline Design or Template 1. From the Manage Design page, click on the name of the design or template you want to preview from the Designs or Template Library section. 2. Click Preview to view the design or template on the current section's web page. Site Designer Preview Mode 3. Click Done when finished. Edline Manual Edline 2011 Page 53

54 Renaming an Existing Design or Template With the Edline Site Designer feature you can rename an existing design or template. For example, you can change the name of the design or template to match a specific school year or a season. To Rename an Edline Design or Template 1. From the Manage Design page, click on the name of the design or template you want to rename from the Designs or Template Library section. 2. Click Rename to access the rename dialog. 3. Type a new name for the design or template and click OK. Deleting an Existing Design or Template With the Edline Site Designer feature you can delete an existing design or template no longer in use. You will not be able to delete a design or template currently in use by any of your schools or groups. Only use the delete feature when the design or template is no longer valid. You can store multiple designs or templates in the Manage Design area, so be certain that you do not need the design/template before deleting it. To Delete an Edline Design 1. From the Manage Design page, click on the name of the design or template you want to delete from the Designs or Template Library section. You cannot delete a design or template currently in use. 2. Click Delete to access the delete dialog. 3. Type delete and click OK to verify the deletion. Copying or Moving a Design or Template With Edline Site Designer you can copy or move an existing design or template. Use this feature to create a new design based on a copy, or to move a current design to other teacher (class), sport, or activity web pages to allow members of your staff to use an updated style. To Copy an Edline Design or Template 1. From the Manage Design page, click on the name of the design you want to copy from the Designs or Template Library section. 2. Click Copy/Move to access the copy and move fields. Edline Manual Edline 2011 Page 54

55 Manage Page with Copy/Move Fields 3. Select the area to copy the design or template to in the To field. Optional. 4. Type a name for the design or template in the New Name field. 5. Click OK. To Copy an Old or Existing Class Design A teacher with design permissions can copy their designs from one of their current classes to another, or from one of their past (such as last year's) class page to a current class. This feature allows teachers to set their design attributes for all their class pages quickly and easily after having created a design for one of their classes. 1. From the Manage Design page accessed through the teacher's class web page, click Copy/Move to access the copy and move fields. Edline Manual Edline 2011 Page 55

56 Copy/Move Design Fields 2. Select the Click here to copy designs from other classes or old classes link. 3. Select whether you want to copy the design from Another active class or from An old class. Click Next when ready. 4. Choose the class with the design to copy and click Next. Edline Manual Edline 2011 Page 56

57 5. Select (check) the designs to copy, type any changes to the name, and click Copy/Finish. 6. From the Manage Design page, click the design and click Set as Active Design. To Move an Edline Design or Template 1. From the Manage Design page, click on the name of the design you want to move from the Designs or Template Library section. 2. Click Copy/Move to access the copy and move fields. 3. Select the area to copy the design or template to in the To field. 4. Type a name for the design or template in the New Name field. Optional. 5. Select Move. 6. Click OK. Edline Manual Edline 2011 Page 57

58 Deploying District Templates to Create School Designs Your district website designer can create templates for all the schools in the district to create a similar look-and-feel for all the school websites within the district. The district can create section placeholders in the template design where the school's web designer can fill-in-the-blanks to create their own unique site. This section details how to create the school designs by deploying district templates. This section includes pictures as examples how a school can start their design using a district template. For full details on how to create templates or how to set design properties, see the Managing the Designs and Templates or Creating a New Design sections. Example of a District Template Edline Manual Edline 2011 Page 58

59 Selecting District Templates for Your School Once your district creates the templates, you can create your school design based off the templates. Creating the School Design from District Template 1. Sign into the school as the Edline school super user (or design manager). 2. From the Tools menu, select Manage Design for the Manage Design page. Manage Design Page 3. From the Template Library, expand the District-Wide Template Library by clicking the plus (+) sign. This list will include templates the district created for your school. 4. Click New to create a new design. Edline Manual Edline 2011 Page 59

60 Create New Design Fields 5. Type the Name for new design. 6. From the Base on template field, click the ellipsis icon to access the Select a Template dialog. 7. Click on the name of the district template for your school (example in pictures is School Template CentralMS), and click Choose Selected. 8. Click OK to create the design. Creating Default Class and Group Designs from District Template From the Manage Design page, set the Classes and Other Groups designs by completing the following steps. 1. From the Manage Design page, click Classes from the Manage Default Design for section. Edline Manual Edline 2011 Page 60

61 Manage Design Page for Class Default Design Complete the following steps to set a default design for classes. a. From the Template Library, expand the District-Wide Template Library by clicking the plus (+) sign. This list will include templates the district created for teacher class pages. b. Click New to create a new design. c. Type the Name for new design for your class pages. d. From the Base on template field, click the ellipsis icon to access the Select a Template dialog. e. Click on the name of the district template for your class page (example in pictures is Standard Class and Group Template), and click Choose Selected. f. Click OK to create the design. g. Click on the name of the new class design from the Manage Design page, and click Set as Current Default. 2. From the Manage Design page, click Other Groups from the Manage Default Design for section. Edline Manual Edline 2011 Page 61

62 a. From the Template Library, expand the District-Wide Template Library by clicking the plus (+) sign. This list will include templates the district created for other group pages (such as for sports, clubs, activities, or media centers). Complete the following steps to set a default design for groups. b. Click New to create a new design. c. Type the Name for new design for your group pages. d. From the Base on template field, click the ellipsis icon to access the Select a Template dialog. e. Click on the name of the district template for your group page (example in pictures is Standard Class and Group Template), and click Choose Selected. f. Click OK to create the design. g. Click on the name of the new group page design from the Manage Design page, and click Set as Current Default. Creating Default Folder and Document Designs from District Template 1. From the Manage Design page, click Folders from the Manage Default Design for section. a. From the Template Library, expand the District-Wide Template Library by clicking the plus (+) sign. This list will include templates the district created for folder pages (used as sub-pages or sub-sections of the website). b. Click New to create a new design. c. Type the Name for new design for your folder pages. d. From the Base on template field, click the ellipsis icon to access the Select a Template dialog. e. Click on the name of the district template for your folder page (example in pictures is Standard Folder Template), and click Choose Selected. f. Click OK to create the design. g. Click on the name of the new folder design from the Manage Design page, and click Set as Current Default. 2. From the Manage Design page, click Documents from the Manage Default Design for section. a. From the Template Library, expand the District-Wide Template Library by clicking the plus (+) sign. This list will include templates the district created for document pages. Complete the following steps to set a default design for documents. b. Click New to create a new design. Edline Manual Edline 2011 Page 62

63 c. Type the Name for new design for your documents pages. d. From the Base on template field, click the ellipsis icon to access the Select a Template dialog. e. Click on the name of the district template for your document page (example in pictures is Standard Document Template), and click Choose Selected. f. Click OK to create the design. g. Click on the name of the new document page design from the Manage Design page, and click Set as Current Default. 3. Click Done after you have selected all the templates for your school, and you have configured all the sub-page designs (classes, other groups, folders, and documents) set as the default. Customizing the Design for Your School After you create the new school design based off the template designed at the district level, you can update the design features and placeholders the district created so that the design fits your school's needs. 1. Sign into the school as the Edline school super user (or design manager). 2. From the Tools menu, select Manage Design for the Manage Design page. Section from Manage Design Page 3. From the Designs section, select the new school design created from the district template. 4. Click the Edit button from the bottom of the Manage Design page to access the Edit Page Mode for Site Designer. Edline Manual Edline 2011 Page 63

64 Note: For full design settings, see the Setting Design Properties section. The remaining steps in the current section provides brief instructions on how to update the most common design features many schools will need to update after creating a design from a district template. Changing the Color 1. Select Page from the Design Properties. 2. Expand the Color Theme tab. Color Theme 3. Select your school colors in each of the Custom Color fields. 4. In each section of the Design Properties window (Page, Header, Body, Top, Middle, Bottom, Left Column, Right Column, etc.), select the Color tab and set the colors to your school colors. Edline Manual Edline 2011 Page 64

65 Color Tab For more information about setting colors, see the Setting Colors for Your Website section. 5. Click Save to update the current design, or Save As to save the design as a new copy. Replacing the Header 1. Select Header from the Design Properties. 2. Expand the Other tab. Header Tab 3. In the Header Image field, select Upload and Browse for your header image file. 4. Click Save to update the current design, or Save As to save the design as a new copy. Edline Manual Edline 2011 Page 65