Edline Manual Design Guide Version: September 2011

(1)

Edline Manual

Design Guide

Version: September 2011

Copyright Statements:

This manual was written for Edline version 2011.

(2)

Edline Manual © Edline 2011 Page 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... 10

Setting Design Properties ... 11

Setting Design Property Inheritance at the School Level ... 13

Setting the Layout and Number of Columns ... 15

Centering Your Page ... 16

Setting the Icons ... 16

Setting the Minimum Height for the Page ... 17

Setting Colors for Your Website ... 17

To Create Custom Color Names for Your Website ... 18

To Set the Page Overflow Color ... 19

To Set Text and Background Colors... 19

To Set Colors for the Page Header ... 21

Selecting a Header Image ... 21

Setting Margins and Padding (Spacing) for Your Website ... 22

Setting Borders and Corners ... 22

Setting Fonts ... 23

Setting Menu Properties ... 24

Setting Additional Properties for Specific Body Sections ... 25

(3)

Adding a Flash Image to Your Site ... 29

Adding Images to Your Web Page ... 30

Adding a Clickable Image... 31

Adding a Menu to Your Site ... 32

Adding a Footer to Your Site ... 36

Setting Background Images ... 39

Setting Placeholder Properties ... 41

Maintaining Your Website Design ... 43

Rearranging or Removing Boxes on Your Website ... 43

To Drag and Drop the Boxes on the Web Page ... 43

To Remove the Boxes from the Web Page ... 45

Changing the Name of Any Section Heading ... 46

Managing the Designs and Templates ... 47

Creating a New Design or Template ... 48

Setting the Default Design for Classes, Groups, Folders, and Documents ... 49

Setting Designs as Active or Current Default ... 49

Setting a School Home Page as a Splash Page ... 50

Previewing a Design or Template ... 53

Renaming an Existing Design or Template ... 54

Deleting an Existing Design or Template ... 54

Copying or Moving a Design or Template ... 54

To Copy an Edline Design or Template ... 54

To Copy an Old or Existing Class Design ... 55

To Move an Edline Design or Template ... 57

Deploying District Templates to Create School Designs ... 58

Selecting District Templates for Your School ... 59

Customizing the Design for Your School ... 63

(4)

To Restore Last Saved Design ... 69 To Restore Edline Design Defaults ... 69

(5)

Designing Your Website

Tip: Edline offers FREE training courses on how to design your website. Sign-up for the Manage

Design course at http://www.edline.com/training/online_training.html#elec_online_training. 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.

(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

(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 sub-group 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.

(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.

(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

(www.edline.com/services/design/design-portfolio/), 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).

(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

(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 Type a name for the design in the Name for new design field.

o 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 Copy the design to the Design area in the To field. o 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.

(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 pre-loaded 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.

(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

(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

(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 2 -1-3-1 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 2-3-1 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.

(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 Icon District School Group Folder

(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:

(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.

(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 ( ) on the Color tab to access the list of custom color names.

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 ( ) to access the color pallet where you can select the color.

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.

(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:

(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:

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.

(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.

(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 sub-section.

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.

(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.

(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:

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 ( ) to access the color pallet where you can select the color.

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.

(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 1-99.

 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.

(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 tree-view 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.

(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 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. o 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 email them. The email address itself will not appear.

o 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.

(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.

(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.

(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.

(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 ( ) icon. When a user clicks on the image, the web page listed in this field will open.

 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.

(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.

(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.

(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.

(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.