Creating a Classroom Website/Portalmelaniekinneyemintspd4ets.weebly.com/uploads/2/4/6/5/24652503/… · Creating a classroom website provides a place where teachers can publish student

Creating a Classroom Website/Portal

e M I N T S N a t i o n a l C e n t e r

2

Creating a Classroom Website/Portal

eMINTS National Center 325 Clark Hall Columbia, MO 65211 Voice: (573) 884-7202 Fax: (573) 884-7614 www.emints.org Cover Photos Joshua A. Bickel Contributors eMINTS National Center staff Written December 2001 Revised October 2013 Questions Have a question about eMINTS professional-development materials? Send inquiries to the eMINTS staff at [email protected]. ©2001 The Curators of the University of Missouri. Use or distribution of materials is restricted to authorized eMINTS instructors and staff. Do not copy, alter or redistribute without the express written permission of eMINTS National Center. To request permission, contact the eMINTS National Center at [email protected] or postal address above. Titles or names of specific software discussed or described in this document are registered trademarks, trademarked or copyrighted as property of the companies that produce the software. Please note that the World Wide Web is volatile and constantly changing. The URLs provided were accurate as of the date of publication.


3

Table of Contents

Purpose of the Module ............................................................................ 4

Expected Outcomes................................................................................ 4

Planning Classroom Websites

Purpose for Creating a Class Website ............................................... 5

Target Audience and Content (Who? What?) ..................................... 6

Design Elements ........................................................................... 7

Planning the Website ..................................................................... 9

Understanding Copyright and Internet Images ........................................... 10

Webpage Editor

Setting Up a Weebly Account .......................................................... 10

Initial Website Setup ..................................................................... 12

Website Parts ............................................................................... 13

Selecting a Theme ........................................................................ 14

Editing a Webpage Theme .............................................................. 15

Adding Elements to a Webpage ....................................................... 20

Editing and Hyperlinking Elements ................................................... 24

Adding Additional Pages ................................................................. 27

Publishing the Website ................................................................... 29

Putting into Practice ............................................................................... 31

Advanced Tips and Tricks

Adding a Blog Webpage ................................................................. 31

Creating a Class ........................................................................... 33

Resources ............................................................................................. 37

References ............................................................................................ 38


4

Purpose of the Module Teachers need a method for organizing and disseminating information, including online instructional resources (such as websites) and lesson resources (such as images, data and so forth). In addition, teachers need a method of communicating with students’ parents or guardians and other colleagues and publishing information (such as instructional materials and student work). A class website can fulfill all of these needs, enhance a teacher’s effectiveness and save time in a variety of ways. The possibilities are endless because a teacher can customize the content and organization of the site to meet class objectives. This session guides participants through the process of planning and developing a classroom website/portal.

Expected Outcomes Teachers articulate the purpose for creating their website and how the website

will be used in their classroom to enhance instruction.

Teachers plan and design websites that effectively support the purpose of their site and target audiences.

Using Web-authoring software, teachers create and maintain classroom

webspace for instruction, communication and publication with a variety of audiences.

Essential Question How does technology affect change?

Session Question How can classroom websites enhance instruction and learning?


5

Planning Classroom Websites A well-planned website has a clear purpose and is designed in such a way that visitors can easily locate the content they need. Websites developed on the fly often fail to be intuitive to visitors, leaving them frustrated because they cannot find the information they need. Eventually, most designers of poorly planned websites find it necessary to redevelop their sites to better meet the needs of their audiences. Avoid time-consuming redesign work by taking time to plan the website carefully before creating the first webpage. Website designers focus on the following four areas as they develop a website plan:

Purpose of the website Target audience Content that will meet the target audience’s needs Design elements

Purpose for Creating a Class Website Commercial websites typically are developed to provide information, sell a product or service or function as a communication tool. A class website is valuable for different reasons, which are listed below. Publish Student Work Creating a classroom website provides a place where teachers can publish student work. Before the Internet, student work was viewed primarily by the student’s teacher, classmates, parents and the local school community. Placing examples of student work on classroom websites provides a global audience for student work. Increase Motivation When student work is placed on the classroom website and students realize they are actually publishing for a global audience, they become motivated to produce higher-quality work. The process of creating a final draft for written work becomes authentic because the end product is published on the classroom website. In addition, many students become excited because relatives who live in other locations can see their projects. Student work on a classroom website becomes a celebration of accomplishments. Go Beyond Four Walls In the past, activities and projects that took place in the classroom were limited by the four walls of the classroom. Digital pictures, written journals, illustrations and other forms of communication placed on the classroom website open a window to the classroom for people outside the four walls. Besides providing parents and grandparents with a virtual visit to the classroom, a class website can let the local community see what the class is doing. Facilitate Collaboration The classroom website can serve as a tool for collaboration. As students work on projects or solve problems related to real-world situations, the teacher can place data and information related to the project or problem on the classroom website. Other classes or topic experts can view the class’ progress during collaborative efforts.


6

Enhance Communication When classroom websites include newsletters, assignments, schedules and class activities, parents have an accessible method of getting information when they need it. Using the classroom website to post information bypasses the printed version that can get lost between the classroom and home. Posting information typically placed in a note or newsletter simplifies communication between the teacher and parent. Increase Productivity Instructional time is enhanced when students and teachers have quick access to websites and other materials—such as video clips or digital images—placed on a classroom website. Posting URLs alleviates the time-consuming task of typing in a long website address and avoids the risk of students mistyping the URL. Misspelled URLs could lead to inappropriate or irrelevant websites, wasting time spent on a given task and jeopardizing the overall learning goal. Posting classroom information such as newsletters or information about upcoming activities is more efficient than creating a document, printing the document and creating multiple copies for students to take home. When parents have access to the information online, teachers receive fewer phone calls asking about pieces of paper that students lost. In turn, teachers can spend time on instructional planning or addressing other student needs with parents. Meet Diverse Learner Needs Content related to a specific topic can be represented in a variety of formats on different websites. Placing several URLs on a classroom website that present content in different formats meets the diverse learning needs of students. For example, a website titled “How Big is a …” (http://www.cellsalive.com/howbig.htm) provides an interactive tool that allows students to magnify the top of a pinhead to see cells and organisms such as dust mites, pollen, bacteria and viruses in a single animation. Some students may prefer to view such a website to understand the relative sizes of cells and organisms. Other students may prefer a combination of text and photographs that explain the relative sizes of cells, as found on “Studying Cells Tutorial: Size and Biology” (http://www.paec.org/planetdiscovery/ocean/cell1.pdf). Creating a classroom website that offers access to multiple URLs that present the same topic in different formats gives students the opportunity to select the resources they find easiest to understand. How Can a Class Website Enhance Inquiry-based Learning?

Teachers can create a place to focus their students’ research. Instead of letting students randomly search the Internet for information, teachers can pre-select sites beneficial to their particular students and post them on the class website.

Teachers can create online, inquiry-based lessons—such as WebQuests—and post them on their sites.

Websites permit collaboration with other classrooms around the world. Publishing student work on a website gives students an authentic, worldwide

audience.

Target Audience and Content (Who? What?) When planning a website, first consider the target audience and the type of content the target audience will expect to find on the website. Typically, the target audience


7

for a classroom website would be the students and their parents. Plan to create pages that provide students and their parents with information. The most important feature of a class website is CONTENT. Consider including these sections in the class website. Classroom Information Publicize the classroom to the world. What if a student from another state was moving to the school district? Could that student look at the website and get an idea of what the class is like? What information do parents want to know? The site can provide homework assignments, spelling lists and details about class plans for the week. Student Work Include student work since it is the best reflection of the school. The class website makes a good place for students to publish and gives them a greater sense of purpose about their assignments. News and Events Include information about classroom events. Consider publishing a class newsletter on the website. Resources Make the website a useful resource. Add Internet links organized into categories for students, parents and other teachers. Organize research topics for students to use. The home page should become the jumping-off point for the class. Providing links to lesson resources saves valuable time for both teachers and students. Pre-selecting appropriate links reduces the chance students will access undesirable material. Lesson Ideas to Share Publish lesson plans for the student work examples shown to serve as a resource for other teachers. Additional Considerations

Decide how often to update the website. If updates will be infrequent, do not include time-sensitive items like assignments and calendars.

If the site will include newsletters, determine how often to place them on the website and how to handle archived copies.

Design Elements After identifying the target audience and articulating a clear purpose for the website, consider layout quality and design. As in the writing of a narrative or letter, website creation involves design principles. Before planning the layout and design of a website, work toward an understanding of website-design principles to apply during the planning process. A few design principles are listed below. Additional information regarding design elements can be found through online resources listed at the end of this module and on the module resource webpage. Color Website colors set the tone for the website and should complement each other. Mary Carter—an artist and author of several articles at eFuse, a website devoted to helping individuals build better websites—believes in the power of color. According to Carter (2000), “The choice of colors on your Web site is your first form of communication


8

with your viewers. It creates a mood, and quite literally colors what you are saying.” When selecting the color combinations for the classroom website, consider how different color palettes project a certain tone or mood. According to Carter, a palette that includes a dark blue background with dark red, pale yellow and slate blue as complementary colors conveys a business feel or corporation image. Select colors that will project the underlying tone or mood desired for the classroom website. A complete description of different color palettes may be found at the following website: http://www.color-wheel-pro.com/color-schemes.html. Font Common webpage fonts include Times New Roman, Helvetica, Arial, Courier, Georgia, Verdana and Geneva. These fonts are typically used in most browsers and across computer platforms. If a non-standard font is used on the website, the viewer may have trouble seeing the text as intended. As a general rule, select standard fonts that are installed on most computers, such as Times New Roman, Helvetica, Verdana, Arial and so forth. Limit the number of font styles to a maximum of three to a webpage. Limiting the font styles produces a clean, easy-to-read page. Consistent use of font styles throughout a webpage, such as one style for headings and another for the body of the page, makes the page easier for viewers to read than switching between different styles at random. Font size is dependent on the target audience. Younger children find a larger font size more readable. Older students may prefer a smaller font. Select a size that will best meet the needs of the target audience. Varying the font size between the body of the text and headings is a common practice. The use of larger text for headings will help readers scan for the information they need. Background Select background colors that have a strong contrast to the text. Strong contrasting colors are easier to read. Colors that are in close proximity on the color wheel tend to blend together, which can slow reading. In addition, certain colors, such as royal blue and bright red, placed next to each other on a webpage are perceived at different depths and can strain the eyes. While using ornate patterned backgrounds or images as backgrounds can provide interesting decoration, they can also make it difficult to read text, especially if some of the colors of the background are similar to the text color. Consider subtle colors and designs if a patterned background will be used on a webpage. Graphics Images and text should be proportioned so they are complementary to each other. Large graphics demand the viewer’s attention and will be the first thing a visitor will see. As a reference, look at how images and text layouts are balanced when used in textbooks and posters or other forms of communication. In addition, images that are very large also have very large file sizes and can consume available disk space for the website, as well as take longer to display when viewed from the Internet.


9

Planning the Website The process for planning the website includes identifying the content that will be included, developing a storyboard for the structure and a layout guide for the website design. Website Content Previous sections of this module discussed the type of content that can be included on a classroom website. Before developing written plans, finalize a list of content that will be included within the classroom website. Website Structure The website structure organizes the content of the website into webpages. Designers often use a hierarchical tree to plan the structure of the website. The home page is placed at the top of the tree, followed by the main sections of the website with subcategory pages branched from each main section, as shown below. Consider using software like Inspiration or SMART Ideas to map out the website or use sticky notes or sheets of paper to represent the pages of the site. The papers can be arranged into the desired structure. Creating a storyboard of the website will make it more organized and easier to use.

General Tips Do not fall into the trap of making the website too busy and distracting. Strive

for a simple and classy look that visitors will enjoy. Let the website evolve over time. Do not feel pressured to make a perfect,

complete site right away. Avoid excessively long webpages. Break up the page into different sections and

provide navigational links to the sections. Keep the content focused on the defined audience. Use only images that are not copyrighted or otherwise illegal. Limit the content on the opening page so it will load quickly and will not

overwhelm the viewer. Do not bury information on the site. Organize content so it is easy for visitors to

locate.


10

Understanding Copyright and Internet Images A number of websites provide images specifically for website development. All images on the Internet have a copyright. Even though a computer user can save or copy any image (graphic or photo) on the Internet, it is a copyright violation to repost images without permission. Websites that specialize in graphics for website development often grant permission through their terms of use statements. Follow copyright laws by posting only copyright-free images or by following the terms of use statement posted on the source website.

Webpage Editor Weebly is an online Web-authoring and editing tool that enables users to efficiently develop and maintain a website. Weebly uses a graphical interface for building a website so the user does not have to write code for the website using HyperText Markup Language. As the user adds items to the webpage, Weebly automatically writes the HTML code used by Internet browsers to display webpages. In addition, Weebly has a method for publishing the website to a webserver built into the program.

Setting Up a Weebly Account Before using Weebly as a website editor, the user must set up a Weebly account. Setting up an account and working with the Weebly website editor will require access to the Internet. Set up an account by following these steps.

1. Open a Web browser and go to the following URL – http://education.weebly.com.

2. An account sign-up box is located on the Weebly homepage. Fill in the required name, e-mail and password information, and then click the Sign Up button.

3. Complete the prompt that is provided by the account setup wizard. 4. Provide the education information requested.


11

5. Successful education site registration will result in a window prompting the user to watch a demo, set up a class or create a website. Setting up a class will provide teachers with the option of having students create webpages that are password-protected and not available to the general public. A class can be set up later. Click the Create a website button to begin creating a classroom website.

6. Weebly will automatically log the user into the editor. Subsequent access to the Weebly editor will require the user to input login information on the Weebly homepage.


12

Initial Website Setup Following successful account setup and login to the Weebly editor, a website must be defined. Weebly will prompt for the definition of the website with a series of dialogue windows. Follow these steps to define the website.

1. The first dialogue window will prompt for a Website title and website site. Enter the title in the text box and select the type of site from the drop-down menu.

2. After a website type is selected, an additional category drop-down menu will appear. Select the appropriate category.

3. Click the Continue button. 4. The next dialogue window prompts for the selection of a website domain. Free

websites will require the use of a subdomain from weebly.com. Individuals who create a free website using the Weebly server to host their website will select the first option. Individuals who want to register and purchase a domain name or those who already have a registered domain name may select the second or third options.


13

5. Input a subdomain name in the provided box, avoiding spaces and punctuation. Subdomains that are available will appear with a green check. Subdomains that are not available will appear with a red X and will need to be altered.

6. When a satisfactory subdomain with a green check is obtained, write down the URL for future reference. This is the URL that will be used to access the website from the Internet once the website is published.

Website Parts A Weebly webpage consists of three distinct parts; however, layout of the primary sections of the webpage will be dependent upon the selected theme. The first section of a Weebly webpage is the Webpage title. This section contains the webpage title, pictures and logos. The second section is the Navigation bar. Layout, color and style of the navigation bar will be dependent upon the selected theme and cannot be customized. The third section contains the Webpage content. All of the elements in the content section can be edited and customized to meet personal preferences. Notice how each of the three parts are presented in the three Weebly Themes below.

Example 1

Webpage title

Navigation bar

Webpage content


14

Example 2

Example 3

Selecting a Theme The first step in developing a website in Weebly is selecting a website theme. Weebly contains a large selection of webpage themes with a variety of colors, layouts and backgrounds. Some elements in a theme can be customized to meet individual preferences.

1. Choose the Design tab located at the top of the Weebly webpage editor.

2. A thumbnail toolbar of templates will appear below the Design tab. Click the blue arrow on the right side of the thumbnails to scroll through the options.

Webpage title; image is part of the title

Navigation bar

Webpage content

Webpage content

Image is part of webpage title

Navigation bar

Webpage title


15

3. Narrow the number of options by selecting All Themes. Choose a category, such as education.

4. Scroll through the themes and click the preview button to examine the theme in more detail. If desired, theme images and text can be customized after a theme is selected.

5. Click the Use Theme button to apply the theme to the website. Click the

Cancel button to exit the preview screen and return to the All Themes view. 6. Click the Favorites button to return to the thumbnail toolbar view. A theme

may be selected and used for the webpage from this view by clicking on a thumbnail.

Editing a Webpage Theme The webpage title text and image can be customized to meet personal preferences. Customize Fonts and Hyperlink Color Once a webpage theme has been selected and appears in the Weebly editor, website fonts and hyperlink color can be customized.


16

1. Click the Design Options button.

2. Select the Site Title button to display font settings for the website title. The website title includes the text that will appear at the top of the webpage. Make adjustments to font style, color and size using the appropriate drop-down menus.

3. Select the Paragraph Title button to make font style, color and size adjustments to paragraph titles.

4. Select the Paragraph Text option to make font style, color and size adjustments for text within a paragraph.

5. Select the Links button to customize website hyperlinks. The Link color is the color hyperlink text will appear on a webpage before a visitor selects the link. Selecting a different color for Visited text will render hyperlink text on a webpage a different color after a visitor has selected the hyperlink. The hover option sets the color for text when the mouse pointer passes over a hyperlink.

Edit Webpage Title Do the following to edit the webpage title.

1. Hover the mouse pointer over the webpage title. A menu bar will appear with the following options.

Off – The webpage will display without a title.


17

Text – The webpage will display with a title. Logo – A logo can be uploaded and displayed with the webpage title.

2. By default, the webpage will prompt for a webpage title. Click the Off button to leave the title blank. Click the Text button to place text as the webpage title. Edit the title text by clicking the mouse on the title. A cursor will appear and text can be edited.

3. To add a logo to the webpage title, hover over the title text. When the menu appears, select Logo.

4. A window will appear with the My Computer option selected for uploading a logo. Click the green Click to upload a file from your computer button. Note that the file must be a JPEG, GIF or PNG.

5. A file navigation window will appear. Locate the logo file in the navigation window.

Windows Mac


18

6. Click the Open button. The selected image will appear as a logo on the

webpage. 7. To include text with the logo, hover the mouse over the logo. Select the Edit

button.

8. An editing window will open. Select the Add Text button.

9. Example text will appear next to the logo. Edit the text by clicking the example text and typing the desired text. Click OK.

10. A blue outline will appear around the text. Position the text by clicking and dragging the text box to the desired location.

11. Edit the font type, size, color and other qualities by selecting the appropriate drop-down menu or button.

12. Click Save to commit changes to the webpage.


19

Edit Webpage Title Images Weebly themes often include images that can be customized to meet personal preferences.

1. Scroll over theme images to display the Edit Image button.

2. Click the Edit Image button. A window offering editing options will appear.

3. The theme image can be replaced with a personal image. Delete the theme image by clicking the image and selecting the red X button.

4. Click the Add Image button. A window appears prompting the user to select the image source. In most cases the source is My Computer. Click the green upload button. A navigation window will appear. Locate the image and select Open.

5. The new image will appear in the center of the webpage. 6. Resize the image by clicking and dragging the handles that appear around the

image. To maintain height and width proportion, use the corner handles to resize the image.


20

7. To crop, rotate, adjust opacity, fade sections of the image or add effects select the appropriate button. Make adjustments based on the options that appear.

8. Click the OK button when editing is complete. Click the Save button in the upper-right corner of the window.

Adding Elements to a Webpage Weebly labels webpage content as elements that are subdivided into four categories— basic, multimedia, revenue and more. The most frequently used elements for a classroom website will be found in the basic and multimedia categories. Basic elements include the following:

Various forms of paragraphs Pictures Title Video Contact Form Multiple Columns Custom HTML Google AdSense

Multimedia elements include the following items:

Photo Gallery Slideshow File


21

Audio Player Video Embedded Document Flash Google Maps YouTube Video

Adding an element to a webpage consists of selecting an element from the elements toolbar and dragging the element to the desired location on the webpage.

1. Click the Elements tab at the top of the Weebly editor.

2. The Basic elements toolbar will appear above the webpage. Additional elements toolbars may be accessed by selecting the elements folders located on the left side of the toolbar.

3. Locate the desired element for the content area of the webpage. The mouse cursor will turn into a cross with four arrows when the cursor is moved over an element.

4. Click and drag the element to the content area of the webpage.

5. Release the mouse cursor when an orange line appears in the content area of the webpage. The element will appear in the content area of the webpage with a Click Here to Edit action prompt.


22

Delete an Element Elements that have been added to the content section of the webpage can be deleted.

1. Move the mouse over an element in the content area of the webpage. A box will appear around the element.

2. Click the red X in the upper-right corner of the element to delete it. A message will appear to confirm element deletion.

3. Click Yes, delete it to confirm deletion. Click Cancel to void the action. Move an Element When two or more elements are included in the content area of the webpage, the vertical arrangement of the elements can be altered.

1. Place the mouse over the element so a box will appear around the element. Position the mouse so the cursor turns into a four-directional arrow.

2. Click and drag the element to the desired position in the content area of the webpage.

Adding Columns Columns are used in webpage development to design the horizontal layout of content. For example, pictures or videos might be positioned on the right side of the screen with paragraphs on the left. Alternatively, the designer may opt to have three pictures


23

positioned horizontally across the webpage with text written below each image as shown in the example below.

1. Click and drag the Multiple Columns element to the content area of the webpage.

2. Place the mouse over the Multiple Columns element in the webpage to display additional editing actions.

3. Adjust the number of columns by selecting the appropriate column number in the Columns pop-up menu.

4. Place the cursor over the Spacing button in the Columns pop-up menu to adjust white space between columns.

5. To alter column width, place the mouse over the vertical line between columns. When the cursor becomes a left and right arrow, click and drag the vertical line between the columns to the left or right.


24

6. Click and drag elements from the elements toolbar to the desired column. Pro Elements Some elements in the Weebly editor are labeled with the word Pro in the lower-left corner of the thumbnail in the elements toolbar as shown below.

Elements marked with the word Pro designate elements that are available to users with the Weebly Pro service. Users may try the element on their webpage during editing, but the element will not be published to the Internet without a paid subscription to Weebly Pro.

Editing and Hyperlinking Elements Text and image elements can be formatted as desired. In addition, both text and images have the potential of not only functioning as an object on a webpage but also linking to another webpage, a file on your website, an external website or offering a way for users to e-mail a message. Edit and Format Text After text elements have been added to the content area of the webpage, the text can be formatted to meet personal preferences.

1. Click a text element titled “Click here to edit.” 2. A blue box will appear for text input and a formatting toolbar will appear below

the elements toolbar.

3. Use the formatting toolbar for the following purposes:

Bold text Italic text

Underline text

Format text color with a drop-down pallette

Increase font size


25

Decrease font size

Remove text formatting

Align text to the left

Center align text

Align text to the right

Justify text with both left and right alignment

Create a bulleted list

Create a numbered list

Undo or redo the last action

Editing and Formatting an Image Placing a picture element on a webpage provides the developer with a method for uploading a picture to the webserver for inclusion on the webpage. Additional formatting options are available when an image element is edited as outlined below.

1. Click a picture element to begin the editing and formatting process. 2. A dialogue window will appear prompting for the location of the image. Select

the appropriate location. In most cases the location will be My Computer.

3. Complete the action prompt for accessing or uploading the image.

4. The image will appear in the content area of the webpage. 5. Click the image to access editing and formatting options. 6. Resize the image by clicking and dragging the resize handle located in the

lower-right corner of the image.

7. An image setting toolbar will appear below the elements toolbar. The image setting toolbar provides options to replace the image, include a border around the image, select an image border color and set the position of the image in the content area of the webpabe. Use the drop-down menus to adjust the image settings. In most cases the border will be set as none.


26

8. An editing toolbar will appear on the right corner of the image.

9. Click the Edit button to open an image-editing window. Use the buttons provided in the image-editing window to crop, rotate, add opacity, fade sections of the image and apply additional special effects to the image. In addition, use the resizing handles that appear around the image to adjust image size. Click Save when editing is complete.

10. Use the buttons in the editing toolbar for the following purposes.

Add the option of viewing a larger version of the image in a pop-up window

Add a caption below the image

Delete the image

Hyperlink Text and Images Both text and images can be formatted to function as a hyperlink to an external website, a page within the website, a file stored on the webserver or an e-mail address.

1. Select the Link button on the text-formatting toolbar or the image-editing toolbar.

- Link button on text-formatting toolbar

- Link button on image-editing toolbar


27

2. A Link to: dialogue window will appear. Select the type of hyperlink that will be created (website, page within website, file, or e-mail).

3. Complete the required information as follows. Website URL – type the external URL in the provided text box. Click the

Open link in new window checkbox if the linked website should appear in a new browser window when the link is clicked.

Page on Your Website – Use the drop-down menu to select the appropriate page within the website.

File on Your Website – Click Upload a new file. A file navigation window will appear. Locate the file and click Open. The file will upload to the webserver and will open when a user selects the link.

E-mail Address – Input an e-mail address in the provided text box. When a website visitor selects the link, the visitor’s e-mail program will open an e-mail message with the e-mail address in the “to” field. The visitor will complete the e-mail message and send it.

4. Click the Save button.

Add Additional Pages The use of multiple webpages within a website provides visitors with an efficient method for locating the information they need. When additional pages are created in Weebly, a page label and link are automatically placed in the website navigation bar.

1. To add additional pages to the website, select the Pages tab in the Weebly editor.

2. The Manage Pages screen will appear. Select the Add Page button to create a new webpage.


28

3. A new page will appear in the list of pages below the home page. Provide a name for the page by typing in the Page Name text box. Note that the name provided will serve as the link to the page in the navigation bar. If the page should not appear in the navigation bar place a check in the appropriate checkbox. Keep in mind that pages hidden in the navigation bar will require the use of a text link in a paragraph element for visitors to access the page.

Adjusting Page Sequence in the Navigation Bar Webpages can be moved to alter the sequence in which they appear on the navigation bar.

1. Click a page in the vertical list of pages on the Manage Pages screen. The page name will turn blue.

2. Click and drag the page title to the desired location.

Creating Subpages A website has the potential for including a large number of webpages. Including links to every webpage within the website in the navigation bar could make website navigation difficult. An alternative is to develop subpages that are accessed through a drop-down menu from the primary page in the navigation bar. For example, a teacher might teach more than one section of a subject area at the secondary level or more than one subject at the elementary level. Webpages to class sections or subjects may be listed as subpages in a drop-down menu for the Student Resources link in the navigation bar as shown below.


29

To create subpages, do the following.

1. Create new webpages by adding a page in the Manage Pages screen of the Weebly editor.

2. Click the subpage in the vertical list of pages and drag it to the right. When a connecting tree symbol appears release the mouse.

3. Click the Save Settings button. Deleting Pages Pages that are no longer needed in a website can be removed permanently from the website.

1. Click the page that is no longer required. The selected page will appear blue in the vertical list of pages.

2. Click the Delete Page button located in the upper-right corner of the Manage Pages screen.

3. A confirmation prompt will appear. Click Delete Page.

Publish the Website A website can be published at any time during the development process. As the website is used in the classroom it will become necessary to update the website on a regular basis. Follow the same process to publish an updated website.

1. Click the Publish button located in the upper-right corner of the Weebly editor.


30

2. Select the appropriate publication location for the website. Check with the school district technology coordinator to determine whether the classroom website should be published to a school district server. In this case, the technology coordinator will provide the domain configuration instructions. To publish the website using the free Weebly server, select the first option.

3. Click Continue. A confirmation message will appear. Websites published on the Weebly server will include a blue box message stating that a personal domain name is available with a prompt to continue. Obtaining a personal domain name for the published website will require payment of related fees. Complete the publishing process for the free website published on the Weebly server by clicking the blue X in the upper-right corner of the publishing confirmation message.

Putting into Practice Continue development of the classroom website. Plan to begin using the classroom website for communication, instruction and publication at the beginning of the school year.


31

Advanced Tips and Tricks Additional features available with the Weebly editor that teachers might find valuable include adding a blog webpage and the inclusion of student websites in a password-protected area.

Adding a Blog Webpage Using a process similar to creating a new webpage in Weebly, a teacher may add a blog as an additional webpage. The creation of a blog webpage provides teachers with an additional communication tool that can be embedded in the website. A teacher will not need to use a different website or tool to create the blog. A blog can be set up with the Weebly editor.

1. Select the Pages tab at the top of the Weebly editor.

2. Click the Add Blog button.

3. A blog page will appear at the bottom of the list of webpages. Provide a page name for the blog in the Page Name text box. Typing a new page name for the blog will change the title of the blog webpage in the Manage Pages list.

4. Click the Edit page button to begin editing the blog webpage. 5. To edit the first blog post, click the Edit link under the comments heading.


32

6. A text editor will appear in the workspace. Edit the text and click the Save to Live button.

7. To adjust post settings, click the Manage Blog button. 8. When the Manage your Blog window appears, choose the Settings tab.

9. Adjust settings for the following items. Allow Comments - Select open to allow all comments generated by

visitors to publish to the blog. Choose Approve first to approve comments made by visitors before they are published to the blog. Select closed to turn off comments entirely.

Notify me of new comments – Select yes and input an e-mail address to receive a notification via e-mail that a comment has been posted to the blog.

Automatically close comments – Choose a setting between never and 90 days to automatically stop visitors from commenting to a post.

Date/Time – Use the drop-down menus to set the date and time format that will be displayed on the blog.

10. Click the Save Changes button. 11. Click the Comments tab to manage visitor comments posted to the blog. In

this window a teacher can select a comment and approve it for publication (if the approve first option was set for comment posting under the settings tab), delete the comment from the blog or mark the comment as spam. Click the X in the upper-right corner of the Manage your Blog window to close the window and return to the Weebly editor.


33

12. Click the New Post button to open a text editor that will enable writing a new blog post.

13. Use the Delete Link located in the upper-right corner of each blog post to delete a post.

Creating a Class Teachers can create up to 40 free student accounts. With a student account, students can create a webpage that is private (password-protected) or public.

1. Be sure the Weebly editor has been closed. To close the editor, click the close button in the upper-right corner of the editor.

2. The Weebly for Education My Sites window will appear. Click the My Students menu item.


34

3. Add a class by typing a name in the Class Name text box.

4. Use the drop-down menu to select a grade level for the class. 5. Click the Public radio button to make the student websites public; choose

Private to password-protect student websites with a class password.

6. Student accounts are created by inputting student names and assigning a username and password. Student accounts can be created one at a time by manually typing student names, a username and password. Alternatively, multiple student accounts may be created by selecting add multiple students at the top of the input box. When adding multiple students a teacher may type student information into the text box or upload the information from a CSV (commas-separated values) file. Note: when manually adding students one at a time, Weebly will create a username that is currently available. If the username is altered, Weebly will note the availability of the revised username.


35

7. Click the Add button when adding single students or the Add Students button when adding multiple students.

8. Student accounts will appear in the class account area.

9. Click a student account link to view student account information including username and password. Changes to a student account can be made by clicking the Change button.

10. Direct students to the following URL (http://students.weebly.com) to log in and begin developing their website. After students log in, the Weebly editor appears prompting students to name the site. Students continue using the editor to create their website using the same procedures the teacher used to create the classroom website.

11. When students are ready to publish the website direct them to click the publish button located in the upper-right corner of the Weebly editor. Students will be


36

prompted to select a subdomain name (students do not have the option of purchasing a domain name).

12. Visit the student website by inputing the student website URL into the browser address bar. If the teacher opted to password-protect student websites, visitors to the student website will be prompted for a password. Visitors must input the class password set up by the teacher during the creation of a class in Weebly.


37

Resources Design Johnson, L., & Lamb, A. (2000). Creating School Web Pages.

http://eduscapes.com/tap/topic61.htm Kipperman, D., & McKinstry, M. Write Design Online: Design Rules of Thumb.

http://www.writedesignonline.com/resources/design/rules/index.html Lamb, A., & Johnson, L. (2001, Fall). Brick by Brick: Designing and Developing Web

Pages and Projects. Activate: The Journal of Technology-Rich Learning, 1(4). http://eduscapes.com/sessions/brick/ General information on creating a class website.

Lipera, R. (2002). Basic Web Page Layout & Design. Interactive Media Center.

University of Albany Libraries. http://library.albany.edu/imc/webdesign/ Tutorials on many different aspects of website design.

Teachnology, Inc. Designing a Website for Your Class Tutorial. http://www.teach-nology.com/tutorials/design_site/

Weebly Wizard Tutorials.

http://www.youtube.com/user/WeeblyWizard/videos?flow=grid&view=0&sort=da

Blogs Early, Z. eMINTS Winter Conference Blog.

http://emintswincon.wordpress.com/ Article about blogging tips and tricks.

Tolisano, S. Langwiches Blog.

http://langwitches.org/blog/2013/03/18/beyond-pockets-of-excellence-in-blogging/ Article about classroom/student blogging.

Color Hewlett Packard. The Meaning of Color.

http://www.hp.com/sbso/productivity/color/pdf/meaning_of_color.pdf Peterson, D. Color in Web Design.

http://newark1.com/color/ An article about using color on a website.

QSX Software Group. Color Wheel Pro: Classic Color Schemes.

http://www.color-wheel-pro.com/color-schemes.html QSX Software Group. Color Wheel Pro: Color Meaning.


38

http://www.color-wheel-pro.com/color-meaning.html

SKDesigns. (1996). Color. http://websitetips.com/color/

Stanicek, P. Color Scheme Designer. http://colorschemedesigner.com/

Fonts Webcast 1. Web-Safe Fonts for Your Site.

http://www.webcast1.com/webfriendlyfonts.html

References Carter, M. (2000). Pick a Peck of Palettes. eFuse.

Documents

Creating a Classroom Website/Portalmelaniekinneyemintspd4ets.weebly.com/uploads/2/4/6/5/24652503/… · Creating a classroom website provides a place where teachers can publish student