Item Editor Reference Guide

Transcription

1 Item Editor Reference Guide This reference guide is intended for all iwebfolio users. The item editor is the editing tool that appears when a user is editing an item within a portfolio or template. This guide will explain the panel of buttons and dropdowns as well as their functions within the item editor. The guide will also suggest some useful tips to remember and use while in the editing mode. Please select a specific button or general area for more help: (To select with PC Ctrl + click) (To select with Mac Apple + click) Linking Images Display Formatting Word Processing Functions Copying/Pasting from Word Tutorials Once you log into iwebfolio, there are two general tutorials that will help you get started: an overview tutorial and a tutorial for building portfolios based upon templates. These tutorials can be accessed by clicking the tutorial button in the upper right hand corner of your browser, underneath the role dropdown. Even if you are not using a template, the tutorial for building a portfolio based upon a template will provide helpful information on building a portfolio from scratch. Navigating Within iwebfolio When navigating within iwebfolio you should not use the back button on your browser. Use the navigation buttons within the application. Using the back button on your browser will give unpredictable results. The following browsers are supported by iwebfolio: Apple/Macs: Firefox and Netscape are supported. (Safari and Internet Explorer are not supported). Windows: Internet Explorer 5.x or greater, Netscape 7.x or greater and Firefox are supported.

2 Getting Started When you are editing an item, whether it is a general category (e.g. Home) or an item attached to a category, you should see a screen similar to the one below. At the top of the editing window is the Name field. This is the only field that is required to save an item, and the name is what the item will be referred to in your portfolio/template. The Comments/Notes field is for personal reference to specific items these notes will only show up in the Portfolio owner s item folder under the detail section and will not show up in the portfolio view. The Folder field shows in which folder the current item resides within the My Items section. Content created in the Item Content display area will be displayed in the Template/Portfolio. This content can be previewed by using the preview button in the button panel above. It is good to preview the item, especially if copying from Microsoft Word or another word processing program, because some of the formatting may not copy as intended. Follow this link for tips and suggestions copying and pasting from Word. Linking - Insert/Edit Link button: This button will insert or edit a hyperlink wherever you have selected content. To insert a link, you must select some text or an image and then use this button. This will bring up the Link Editor window (below) that will allow you to customize your hyperlink. Within the Link Editor, the Link Type gives you the option of directing the portfolio reviewer to a new URL (external website or a file you have uploaded into iwebfolio), another place (anchor) in the current page, or creating an for the reviewer using his/her default program.

3 Linking to a Website: 1. Select URL as your Link Type. 2. Type the name of the website into the URL field. 3. Select the Protocol type from the drop-down (i.e. ftp://, news://) Tip: If you include the protocol type in the URL field, iwebfolio will automatically select the correct protocol from the drop-down. Copying and pasting works great here. Linking to an Uploaded File: 1. Select URL as your Link Type. 2. Click on Browse Server this will take you to My Files within iwebfolio, where you will be able to see your previously uploaded files. 3. If you do not have the file uploaded already, click Add New File next to My Files, and then click Browse to find your file and select it to be uploaded. 4. Click Select next to the file to be linked. Images will display in a web browser, other files will display in the application in which they originate (e.g. Word documents open in MS Word). Linking to an Anchor: To link to an anchor in the current page, you must first place an anchor there using the HTML Source Code editor. Linking to an 1. Select as your Link Type. 2. Type the default address that you would like the reviewer to send the to in the Address field. 3. (Optional) Type a default subject that will appear on the in the Message Subject field. 4. (Optional) Type any default text to be included in the into the Message Body field. - Remove Link button: This button removes any hyperlink (website, file, anchor, or ) that had been previously added to the content that you have selected with the cursor.

4 Images - Insert/Edit Image button: This button will insert or edit an image wherever your cursor is placed. If you have content selected when you insert an image, the new image will replace your content. Below you can see the Image Properties window that will allow you to customize your image. Tip: Right-clicking on a current image will allow you to select Image Properties and edit the image. Inserting a new image: 1. Click Browse Server. 2. You should now be in My Files and will be able to see your folders and any images that you have previously uploaded 3. If you haven t uploaded the file yet, click Add New File and then select the Browse button to find the file on your computer, then Save the File in the appropriate folder. 4. Select the image that you would like to insert. 5. Once selected, you will be able to resize the height and width of the picture by adjusting the values of the corresponding fields (measured in pixels) on the left of the window. 6. Click OK to complete insertion of the image. In addition to changing the dimensions of the image, you can also add a border and space around the image by specifying the Border width, Horizontal Space width, and Vertical Space width in the corresponding fields. The Align drop-down will allow you to place the image in relation to your other content. Tip: If you resize the image and want to revert back to the original size, at any time you can open the Image Properties window and click on the circling arrow beneath the lock next to the Width and Height fields. This will revert your image back to its original uploaded size. Display - Insert/Edit Table button: Use this button to insert a table into your item. Pressing it will open the Table Properties window (below), which allows you to customize your table as a whole. A few tips for properties settings: Setting the Width to 100 and selecting percent from the drop-down will make your table extend the maximum width of the item. Right-clicking within a cell and selecting Cell Properties will allow you to further customize the cell. e.g. Allowing text to wrap, changing text alignment, adding background color, etc.

5 Tip: Highlighting a whole column or row (or the whole table) and then right-clicking and selecting Cell Properties will allow you to change the color of the whole selected area, change the width percentage of a column, height of a row, etc. This is a good way to put in background color into your portfolio or to give a template a specific structure. Tip: Right-clicking on a current table will allow you to select Table Properties and edit the table. - Source Code button: This button will reveal the HTML (Hypertext Markup Language; the code used for documents on the Wide Web) source code in a new window for the specific item you are working on. For advanced users, this feature opens up the functionality of iwebfolio to most anything that can be created in HTML. A good reference for using HTML and creating content can be found here. - Templates button: The templates button will bring up the Content Templates window (below) that allows users to select pre-established layouts that give different visual perspectives on the content. Using the templates can give your portfolio a consistent, polished look. Tip: Selecting a template should be done immediately after creating the item, and before you add any content to the item. Selecting a template will clear the content in the item and give you blank template to work in, so choose a template and then add/copy and paste content. If you happen to clear your content by adding a template after you have added content to the item, you can return to your saved work by clicking the Cancel button at the bottom of the editor. If your work has not been saved, you may have to re-create the item. - Preview button: This button allows you to view the current item in another browser window. This feature will allow you to view items at a glance that may be too large to view in the item editor all at once.

6 Tip: Depending on the size of the new preview browser window, the preview window may not give an accurate view of your content and how it will look incorporated into the portfolio. (i.e. Expanding and contracting the preview window may make your content shift.) If you would like see the portfolio view, save your work and then click on View Portfolio link on the Contents section of edit mode, in the upper right quadrant of the browser window. - Insert Horizontal Line button: This button will insert a horizontal line across your item (pictured below). If the cursor is at the end of a line, the horizontal line will appear on the line immediately beneath the cursor. If the cursor is in the middle of the line, the horizontal line will separate the line at the cursor the left side remains on top, the right side is placed below the horizontal line. Tip: Since the line stretches the entire width of the item, this is a good way to visually break up sections within an item and gives the item a clean organized appearance. Formatting - Bold button: This button will bold the selected text. - Italics button: This button will italicize the selected text. - Underline button: This button will underline the selected text. - Left Justify button: This button will left justify the selected content. This is also the default justification on all items and categories. - Center Justify button: This button will center justify the selected content. - Right Justify button: This button will right justify the selected content. - Block Justify button: This button will block justify the selected content. - Increase Indent button: This button will indent the selected content that you have selected to the left. Tip: It is easiest to use this button only after you have typed or copied all your text into the item editor, and then use the Increase Indent button to format the content (See also copying/pasting from word). - Decrease Indent button: If you have previously indented a selection, this button will reverse the indent for the selected content.

7 - Font Select dropdown: There are six fonts that are currently supported in iwebfolio (See also copying/pasting from word): Arial Comic Sans MS Courier New Tahoma Times New Roman Verdana - Font Size dropdown: There are seven different sizes of text that you can use in iwebfolio (See also copying/pasting from word): xx-small ~ 7.5 pt x-small ~ 10 pt small ~ 12pt medium ~ 13.5 pt large ~ 18 pt x-large ~ 24 pt xx-large ~ 36 pt - Text Color selector: This dropdown will allow you to change the color of the selected text (See also copying/pasting from word). - Background Color selector: This dropdown will allow you to change the background color of the selected text. Note: This will only affect the color of the text background, not the entire background of the item. To change the background color of the entire item, use a table. Word Processing Functions Copying/Pasting from Microsoft Word or another Word Processing Program In general, content copied and pasted from Word into the Item Editor will appear as it did in Word. That being said, there are some exceptions and suggestions: 1. Images must be uploaded into My Files and inserted into your item as discussed in the images section.

8 2. Text will appear in whichever font, size, and color that it was copied as, but once in iwebfolio can only be modified to the fonts and sizes in the Item Editor menus. 3. Formatting of text and objects may not always copy and paste identically you may have to do some manipulation in the Item Editor to get your desired result. 4. If you are having difficulty formatting and manipulating copied content from Word, clear your formatting and make sure you have all your content copied/entered before trying to format in the Item Editor. - Spell Check button: This button will run a spell check on the contents of the current item. However, the spell check does not check the name of the item. - Copy button: This button copies the selected content to be pasted in another place the same item, a different item, or another application. - Cut button: This button cuts the selected content from the item, i.e. deletes it from the current item and temporarily saves it to your computer s clipboard to be pasted at a later time. The clipboard only holds one item at a time and resets when you restart or shut down your computer. - Paste button: This button pastes content that has been most recently copied or cut from an item or another application. - Undo button: This button will reverse your previous actions within the current item, up until the previous save point. - Numbered List button: This button will create the beginning of a numbered list. If text is selected, using the button will start the list with the selected text. A hard return will start the next entry to this list and tab will make the next entry a subset of the previous entry. To stop the Item Editor from creating further entries to that list, after the last entry make two hard returns. If part or all of a numbered list is currently selected, this button will remove the numbering from the selected content (i.e. selecting a list and using the button will remove the numbering). Tip: You can also edit the type of numbering used on each set and subset of numbers select the set and/or subset you want to change and right click on the shaded selection. Then select Numbered List Properties. Then select the type of numbering that you would like to change the set/subset to (See also copying/pasting from word). - Bulleted List button: This button will create the beginning of a bulleted list. If text is selected, using the button will start the list with the selected text. A hard return will start the next entry to this list and tab will make the next entry a subset of the previous entry. To stop the Item Editor from creating further entries to that list, after the last entry make two hard returns. If part or all of a bulleted list is currently selected, this button will remove the bulleting from the selected content (i.e. selecting a list and using the button will remove the bullets).

9 Tip: You can also edit the type of symbol used on each set and subset of bullets select the set and/or subset you want to change and right click on the shaded selection. Then select Bulleted List Properties. Then select the type of symbol that you would like to change the set/subset to (See also copying/pasting from word). - Save & Continue button: This button will save your current item and then let you keep editing the same item. Tip: It is a good idea to use this button periodically to save while you are still working if there is content that you do not want to lose. Saving often will help you avoid losing content if there were a loss of internet connection, loss of power, or if you mistakenly hit the back button on your browser, for example. - Save & Return button: This button will save your current item and then return you to the page in iwebfolio that you were most recently on before you started editing the item. - Cancel button: This button will cancel any changes you have made to the item since your last save point while in the item editor. If you have not saved your work, this button will nullify all your work since entering the item editor. Tip: It is a good idea to use this button if you have made changes to an item that you do not want to save. This feature is especially helpful if you have accidentally deleted your item content while using the template chooser or source code function, for example.