Web Page Basics. FRSD Elementary Technology Workshop. February Presented by Lisa Stewart, Tammy Gianvito, and Diane Kaufmann

Transcription

1 Web Page Basics FRSD Elementary Technology Workshop February 2014 Presented by Lisa Stewart, Tammy Gianvito, and Diane Kaufmann Please save this booklet for future reference.

2 2 P a g e Notes and Questions

3 Table of Contents Getting Started... 4 Editing Your Page... 5 Uploading and Inserting Your Own Pictures... 6 Adding Documents as Attachments... 7 Saving Documents as PDF Files... 8 Creating a Hyperlink to a Web Site... 9 Managing Pages Add a Page Delete a Page Re-Order a Page Hide or Show a Page Archive and Delete a Page Un-Archive a Page Teacher Theme Pages Resources P a g e

4 1. Navigate to your web site. Getting Started 2. Log in using the same username and password that you use to log onto your computer. 3. You should now see a grey bar with editing buttons above the dark blue login bar. 4. Below are the most often used tabs. Page Properties Tab Choose this to edit your page. Choose this to hide or change the order of your pages. Choose this to add an additional subpage. Blog Page Calendar Page Content Space Page (used most) Discussion Forum Page Document Container Page External Link Page Form Page News Section Page Photo Gallery Page Wiki Page Advanced Tab This can be used to edit sections of your page. Choose this to change the layout of your page. 4 P a g e This allows you to change the theme of your page.

5 Editing Your Page 1. Under Page Properties, choose Check-out & Edit Page. 2. Scroll down to the Page Content section. You will see many of the same buttons as you would in Microsoft Word. 3. If this is a new teacher page for you, you will see the teacher template. You can add to this or delete it and create your own look. 4. Edit your page just as you would in Microsoft Word. *Design Tip: If you want to have some text beside a picture, the best way to do this is by first inserting a table then inserting your picture and text into the table. Example: 5. Once you are done editing your site, you must click one of the options at the bottom of the screen. Do not just close your screen! Save Draft Saves the changes for later, and the changes won t appear on the web. *Important Note - To get back your saved changes, you must go to Page Properties and Version History. Click the Make Live button beside your last session. Publish Saves the changes and puts it on the web for all to see. Cancel Does NOT save the changes that you made. 5 P a g e

6 Uploading and Inserting Your Own Pictures Note: It is best to resize your pictures before inserting them onto your web page. This can be done through a software application such as PhotoShop, or you could download a free photo-resizing program by going here: (you can easily reduce the size of a large file by 75%) 1. Place your curser where you want to insert the image. 2. Choose the Image Manager. 3. Navigate to and open your personal web folder where you will store your photos. 4. Click the button and click on Select. 5. Locate and select the image you wish to upload and click Open then Upload. Note: You can upload multiple images and insert them later on. Click Add if you need more fields. 6. Click on the image you want to insert. 7. Before you click Insert, it is required that you click the Properties tab and add an Alt Text for the image. (This will appear if you hover over the image.) You may also want to add a border color or make other adjustments. 8. Click Insert. 9. Once on the page, you can resize the picture using the handles or make other adjustments by right clicking on it and going into either Properties or Image Map Editor. Note: Once pictures are uploaded, you can go back at any time and add them to your page. 6 P a g e

7 Adding Documents as Attachments 1.. Log in and navigate to your page. 2. Under Page Properties, choose Check-out & Edit Page. The WYSIWYG Editor will appear. 3. Type and highlight the text, or select a picture on your page that you d like to be clickable 4. Click on the Document Manager icon 5. Click Upload -> Select (Tip: you can upload multiple documents, click on Add if you want more fields). Locate and select the document you wish to upload and click Open then click Upload. Note: If you have the same file name you will need to check the Overwrite if file exists box. This will overwrite the old file with the same name. This feature is works perfectly for users who have the same file that they continuously update and upload. 6. Once uploaded, click on the document name and enter the Tool Tip (name for the document). To have your document open in a new window, choose New Window from the Target dropdown menu. 7. Click Insert. When finished with your page, Publish Page. 7 P a g e

8 Saving Documents as PDF files What are PDF files and why are they so useful? Portable Document Format (PDF) is a file format used to represent documents in a manner independent of application software, hardware, and operating system. [1] Each PDF file encapsulates a complete description of a fixed-layout flat document, including the text, fonts, graphics, and other information needed to display it. ( Create and save the document on your computer. Note: Sometimes a user may wish to post an MS Office file. Not all users have MS Office. You may make the file more universally viewable by converting it to PDF and uploading that PDF file to your SharpSchool site. To save an Office file as a PDF: Open your MS Office file in MS Office. Go to Save As, and select the pdf option from the dropdown menu 8 P a g e

9 Creating a Hyperlink to a Web Site 1. Log in and navigate to your page. 2. Under Page Properties, choose Check-out & Edit Page. The WYSIWYG Editor will appear. 3. Type and highlight the text, or select a picture on your page that you d like to be clickable and take you to a web site. 4. Click on the Hyperlink Manager (the first of the two globes) 5. Type in the URL for the web site. 6. Change the target, if desired. When you are taking viewers to a site outside of the district, it is good practice to make the target a New Window. 9 P a g e

10 Managing Pages To Add a Page 1. Go to Page Properties and select Add a Page 2. Select the type of page you d like to create. (Content Space Page is the most common.) Blog Page Calendar Page Content Space Page Discussion Forum Page Document Container Page External Link Page Form Page News Section Page Photo Gallery Page Wiki Page 3. Give the page a title that will appear at the top of the web page. 4. Click the blue arrow to auto-complete the Name box and click Create Page. To Delete a Page 1. On your parent page (the page which contains the sub-page within it), go to the gray toolbar at the top of the screen and click on Page Properties -> Manage Sub-Pages-- >Page Status. 2. Beside the name of the sub-page you want deleted, check the box and click Archive. The page is now archived. 3. If you want to delete it completely, go to Page Properties -> Archived Sub-Pages and delete it from there. This is also where you can un-archive a page. To Re-Order Your Pages 1. Go to the Parent Page. On the gray toolbar, click on Page Properties, Page Order. 2. Click on the Page you want to move to highlight it, while holding the mouse button down, drag the page where you want it placed. 4. Click on Update Page Order. 10 P a g e

11 How to Hide or Show a Page 1. At your Home Page: click the Page Properties button, click Manage Sub-pages, click Page Status: 2. To Show or Hide a page, refer to the column Visibility and click on the corresponding button and click Close. The hidden page still remains accessible to the page owner (you), but is hidden from the public site. Hide Section allows you to hide your sub-pages along with the top page, as well as hide the page from top menu bar and the side menu bar. Hide Selection allows you to remove a page from the top menu bar and sidebar menu, without hiding the items that are contained within. How to Archive and Delete a Page Why would you want to archive a page? 1. If you have a page that is specific to a certain event or topic, such as a field trip, and you would like to reuse the page next year, you can archive it so that you don t have to recreate it. Next year, you can Un-archive the page and edit as necessary. 2. If you want to delete a page. 11 P a g e

12 Archive & Un-Archive: At your Home Page, click the Page Properties button, click Manage Sub-pages, click Page Status. At the Page Status window, simply click in the check box and then click the Archive button. The page is no longer viewable in this window. It is now in the Archived Sub-Pages list. Click on Page Properties, Archived Sub-pages. At the Archived Sub-pages window, you can Un-Archive a page or Delete a page. To Un-Archive a page, simply click in the check box then click the Un-Archive button. To delete a page, just click on the X under Action. 12 P a g e

13 Teacher Theme Pages Adding a Theme 1. Go to the Advanced tab at the top of the page and select Page Theme. 2. Hover over the thumbnails and click Preview to see how it would look. 3. If you want to apply the theme, click Publish Theme in the top right corner. Editing the Teacher Page Header To change the header of the page to display your name, follow these steps: 1. Go to Page Properties -> Metadata -> General Metadata 2. Under the Theme, enter your text into the Header boxes. The text from Header Line 1 and Header Line 2 will appear in the header of your teacher page theme. 3. Click Submit 13 P a g e

14 Web Page Help Sheets: Click on For Faculty Click on Web Page Help Sheets Here you will find step by step directions on many topics. Simply click on a topic to open the directions. Resources CustomerNet is SharpSchool's online resource. This website will provide access to documentation and resources and will allow you to connect with a technical support person for live help. You must first create an account so that you can log in to access these features. Simply click on the Getting Help: Creating a SharpSchool CustomerNet Account. link for directions. Once you log in, click on the Resources dropdown menu. 14 P a g e