The Innova Editor Many of the databases we create utilize an online editor from Innova Studios. We have purchased a license to bring you this powerful editor that will allow you to not only update your information, but to add style and format in an easy to use format. DOs and DON’Ts These are some simple suggestions to follow to make your site look professional and enjoyable. Disregard at your own risk. • DO enter your content first and save the record. Then format. • DO use the Apply button frequently as you make changes that you like. • DO NOT use large text, caps and bold ALL of the time. Judicious use of these elements enhance the page, overuse clutters the page • DO NOT center everything! Centered text is great for poetry. Otherwise, leave things left aligned. • DO use the same formatting page to page. If you make a page header on one page, make page headers on your other pages (that match). Starting Point In the top left corner, of the editor, you will find the following icons: Full Screen: Clicking this icon will make the editor take over the full screen. This gives you much more room to edit the page. To return to the record screen to complete the Add/Update, simply click the icon again. Preview simply shows the page without the editor. It will not show you your page on your web site. In order to see the page live, we recommend that you open a new browser window (click File-> New -> Window) and open your web site in that new window. Following your domain name in the location bar, enter the saved page name that you are working on to display it. Find not only allows you to locate a word or phrase in your file, it will allow you to replace that word or phrase with another. Undo/Redo The undo/redo buttons are fairly self explanatory. The undo button will step through your last steps until it hits the beginning step. Conversely, the redo will walk you back through the steps to the last step. HINT: For optimum safety while editing records, use the APPLY button frequently. If you get to a point where you are in a bind, use the CANCEL button to revert back to the last saved version. The Asset Manager There are certain menu options that contain an add-in program called the Asset Manager; the Insert Link menu and the Insert Image menu. The Asset Manager allows you to UPLOAD files like images or files and use them in your pages or on your web site. When you see a folder icon at the end of a source line, click it to open the Asset Manager dialog box. In the top left corner of the window, you’ll find a drop- down box that lists folders. You can create your own folder with the New Folder link, or remove a folder with Del Folder. It is recommended you keep several folders to better organize your files and images. In the top right corner is another drop-down that can limit the types of files displayed in the file list. i.e. All Files, Media, Images, and Flash. The large white box will display a selected image file. The file list to the right lists the files in the selected folder. The power of the Asset Manager is the line located at the bottom of the page. The Upload File allows you to Browse your computer for a file and, once selected, uploads that file to the selected folder. This will be explained more below. Basic Formatting The editor works like many word processors. It has basic formatting capabilities like bold, underline, italicize and more. In addition, alignment formatting is easily accomplished. The above tags apply the chosen formatting to any highlighted text. To apply formatting, select a word, line or paragraph and press the button to apply that formatting. Lists To apply a list style, either numbered or bulleted, click the appropriate list style while on a blank line and begin typing. Each time you hit enter, a new list item will be created. • Bulleted list 1. Numbered list example example 2. Numbered list example • Bulleted list 3. Numbered list example example • Bulleted list example Indented Text To indent text, click in the line or paragraph and click on the Increase Indent icon. The text block will move to the right about ½”. To remove indenting, click in the line or paragraph and click the Decrease Indent icon. Copying Content Copying content within the page a simple process: simply highlight the desired text, click the Copy icon; place the cursor in the new desired location and click Paste. To MOVE text within the document, use the Cut icon instead of the Copy icon. IMPORTANT!! You may find that you need to copy text from another source, whether a Word document or a web page or some other location. If you ever copy text from any other source, you will want to use the Paste From Word icon. This will clear out any attached formatting before entering it into the editor. For example, the default text in Microsoft Word is Times New Roman. Most web sites use Arial or some other sans-serif font. If you were to copy the text from a word doc to your web site without using the Paste From Word dialog box, this new text would look different from all the rest of your text on the site. To use, simply copy the text from the source. Click the icon and a dialog box will open. Follow the instructions at the top of the box; hit the Control key + the letter V (CTRL+V) to paste the text into the box. Click OK to place this cleaned text into the editor. NOTE: When you paste text from Word, you may have to go through the lines created and clean out the line spacing, as you may get extra lines that you did not intend. To clean out the lines, place your cursor at the end of a line, hit delete until the line below is on the same line that you are on, then hit return. The Insert Menu The Insert menu allows you to insert certain components to your page; bookmarks, links and images. Bookmarks are links within the same page that you in: you most often see these as links to return you to the top of the page from a lower section. You never leave the page, this link moves you around. The bookmark menu inserts a bookmark that you can then link to using the link insert menu. Links connect your visitor to another page. The page can be on your site (about.htm) or anywhere on the internet that you can visit (http://www.google.com). Images are pictures that you can place within your text. Much like this document has images to refer to with text wrapping around them, you can produce the same output on your web pages. We will go through each item separately. Inserting Bookmarks Once you have completed entering content in a page, you may want to insert bookmarks for your visitor to navigate within the page itself. Place your cursor in the first location that you would like to anchor (or link) to. For example, if you’d like to create a bookmark to allow your visitor to return to the top of the page, you must first define where TOP is. This is the function of the Insert Bookmark action. The Insert Bookmarks dialog box will insert a bookmark at the location of your cursor. Simply enter a name (like “top”) in the name field. The box will remain open after you click insert, which allows you to click elsewhere in your document to place another bookmark. Once you create your bookmark, you must create a link to it. Inserting Links The Insert Links Dialog box has several sections. • The Source line allows you to create a link to a page on your website or anywhere on the internet. • The Bookmark line allows you to create a link to a previously created bookmark • Target will allow you to open a link in a new window • Title is the optional text displayed when a user places their mouse over the link Link to another website: If you are creating a link to a site on the internet, you will use the drop-down box on the left to choose what type of link you are creating. The most common is http://. Example of use: In your page text, you have text that says “Visit the world’s greatest search engine!”. To create a link to google, first highlight the words you’d like to link, then click the Insert Link icon. Select http:// from the drop- down box, then type www.google.com in the box on the right. Click OK to close the dialog box and apply the link, or apply to apply the link and allow you to highlight additional words to create links from. NOTE: To have your link open in another window (and therefore leaving your site open) select the drop-down box in the Target line and choose “blank”. Link to a page on your website: To create a link to a page on your website, the method is similar, except you do not need the http://, www and .com parts. All you need is the name of the page. Example of use: In your page text, you have text that says “To find out more about us, click here”, and you’d like to link the words “click here” to the page on your site called about.htm. Highlight the words “click here”, click the Insert Link icon, and type about.htm in the right-hand box of the source line. Click OK to apply. Link to a bookmark within your page: After you have created the anchor for your bookmark (above), you can link to it. Simply choose the Bookmark radio button and choose the bookmark that you have created from the dropdown box. Example of use: In your page text, you have created a TOP bookmark at the very top of your page. Your page contains 15 paragraphs of text and you want to allow your visitor to get back to the top every 3 paragraphs. In the appropriate areas on your page, type the text “Back to Top”. Highlight each instance with the Insert Dialog box open and choose TOP from the bookmark drop-down. Using the Asset Manager to create a link The Asset Manager allows you to upload a file (a PDF, an audio/video file, a zip file) and create a link to it. As previously explained, access to the Asset Manager is gained by clicking the folder icon to the right of the Source line of the Insert Link dialog box. Simply use the Upload File area to browse to the file that you would like to link to. The Asset Manager uploads the file to the specified folder. Clicking OK returns you to the Insert Link dialog box with the name and location of the selected file already placed in the Source box. Click on OK to create the link on your page. Inserting Tables The components that make up a table: • The container holds the cells within the table. • A cell is one section within the container. • Rows run horizontally, and columns run vertically. Figure 1.1 To create a table within a page, first place your cursor where you would like the table to appear. Select the Insert Table icon. From the dropdown, you can choose the number of rows and columns you would like within the table. Selecting Advanced Table Insert from the dropdown opens up a window that allows more options. You can: • Choose a border with a pixel width varying from 0-5. • Provide spacing between the cells themselves. • Add padding to create space between the wall of the cell and the text. • If you would like to have an entire column span part of or the full length of the table, use the “Span >” button after selecting which row you would like to apply this to. Use the “Span v” button to span a row. Ex. Of column span: The cell that contains the word December in Figure 1.1 on previous page. NOTE: Tables in this particular Editor are NOT like tables in Microsoft Word. You must manually create a new row or column; the tab button will not work in this case. If you would like to edit a table after it’s created, select the Edit Table/Cell button and choose Table Size, Edit Table, or Edit Cell from the dropdown: • Table Size ONLY allows you to adjust the number of columns and rows and add/remove row span or column span. NOTE: You must have your cursor located in the cell of the row or column you wish to alter. 1) Insert/Delete Row: add or remove a row above or below the cell you have selected. 2) Insert/Delete Column: add or remove a column to the left or right of the cell you have selected. 3) Increase/Decrease Rowspan: increase or reduce row span by selecting cell above rows you wish to affect. 4) Increase/Decrease Colspan: increase or reduce column span by selecting cell to the left of the columns you wish to affect. • Edit Table - Tables are automatically set at 100% width. If you would like to adjust this, select Edit Table from the dropdown. Here you can adjust the container in various ways: - the size of the container - background color/image - borders - cell padding, spacing, etc • Edit Cell - If you would like to adjust ONE cell (NOT the entire container), place cursor in cell you would like to change. Select Edit Cell from the dropdown. In this window, you can adjust: - background color/image - text alignment (stick to using top, middle or bottom) - border style, text, etc • You can also affect an entire row or column. Place cursor in the row or column to be changed and again select Edit Cell. Along the bottom of the window, changes can be applied via the drop down: Apply to the current cell, row, or column. NOTES: 1) The Edit Table/Edit Cell windows are virtually identical. While editing be sure that you are using the correct window i.e. Edit Table for editing the entire container, or Edit Cell to edit one particular cell, row or column. 2) You may notice that as you enter text in a cell, the cells in that column will all shift drastically in one direction. The table will automatically adjust as you fill in the rest of the columns. Images NOTE: For best results, it is recommended that you resize your photographs BEFORE you upload and insert them on the page. DO NOT attempt to use the size handle bars after image is inserted. This causes distortion and pixilation of your image. If you do not have the software to resize, there are various websites that can do this for you: i.e. www.picresize.com. It is up to you to use these sites at your own discretion. If you choose to have text wrap around an image, place your cursor either to the LEFT or to the RIGHT at the beginning of a paragraph. If not, place your cursor anywhere on the page. Click on Image icon on toolbar to open up this window: • Source: First open up the Asset Manager by selecting the folder icon along the “Source” line. Upload your chosen image and click OK. • Title: You can assign a name that will show up on your public website when the mouse scrolls over the image. • Alignment: From the dropdown select either LEFT or RIGHT. It is recommended you stick to these two alignments for best results. You can see where your image will appear in relation to your text in the example box along the Web Page Dialog window. NOTE: Unlike programs like Word, it is not possible to have text wrap around both sides of an image. • Border: If you would like a border to wrap around your image, select “Border Style” button. You have various choices within this window: i.e. border style, border width, where border wraps, and color. Once you have chosen, click OK. • Width and Height: This is another place where the image can be resized but can cause great distortion and pixilation. It is recommended that you do not use this option. • Spacing: This is to create space around your image so text, tables, etc will not bump up right against image. Spacing is automatically set at 0 px, which allows NO space between image and text. Again, all changes can be seen in the example box along the bottom of the Web Page Dialog window before changes are actually applied. To finish, click “Insert”. You can always go back and edit these choices by selecting the chosen image, clicking on the Image button, and reworking the image to the prefered effect.