Contribute CS3 :: Basic Tutorial

Transcription

1 Contribute CS3 :: Basic Tutorial This tutorial will cover basic orientation, editing content, adding links, images, tables, and other content components, and publishing. This tutorial is for Contribute CS3. Previous versions of Contribute may work for some features, but using CS3 is recommended. For Lehigh employees, Contribute CS3 is available via Active Directory.

2 General Information

3 1. Edit Page button Clicking on this button will create a draft of the page you are currently viewing and you will be able to edit that page and make the changes you need to make. It is very important to know which page you want to edit before pressing this button. If the page you are currently viewing is NOT the page you wish to edit, then do not press this button. You must first navigate to the page you wish to edit, then click this button. For instructions on how to navigate to a page in order to edit it, see. 2. New button Clicking on this button will enable you to create a new file from the template your site uses. For instructions on creating a new page, see. 3. Back button The Back button acts the same as the Back button in your web browser. Click it in order to go back to the last page you viewed. For example, if you are looking at your home page and just came from the Contribute Start page, you can click the Back button and that will take you back to the Contribute Start page. 4. Forward button The Forward button again acts the same as the Forward button in your web browser. Continuing with the previous example, if you click the Back button and are now back at the Contribute Start page, you will notice that the Forward button is now available for use. If you click on the Forward button, it will take you back to the last page you viewed before you clicked the Back button in this case it would take you to your home page. 5. Stop button

4 The Stop button also works the same as the Stop button in your web browser. It is best not to use this button unless absolutely necessary. After 2 minutes you notice your page still hasn t loaded, then you should press this button to stop contribute from trying to load what it is trying to load and try to refresh the page. 6. Refresh button If for any reason you want to refresh the page you are viewing, click this button. Sometimes you need to press the refresh button in order for your computer to reload the page to show the changes that you just made. 7. Home Pages button This button is a pull down menu. When you click on this button, the pull down menu will appear and on it will be links to the home pages of the sites you manage including a link to the Contribute Start page. 8. Adobe Bridge button Clicking this button will take you into Adobe Bridge. This is not a feature of Contribute you will need to use for Lehigh s purposes. 9. Address bar The address bar in Contribute works much the same as the address bar in a web browser. When you first open contribute and go to your site, your homepage should appear and the web URL of your site will appear in the address bar. When you need to edit a page, you can type in the address of the page here if you know the exact URL. This is not recommended however. See. 10. Go button Clicking this button will take you to the URL you type in the address bar. Hitting Enter on your keyboard after typing in a URL will accomplish the same thing. 11. Contribute Start button Clicking on this button will return you to the Contribute Start page. 12. Choose button Clicking the Choose button will open up a window showing you the other pages you have on your site currently. As stated earlier, instead of typing in a URL to get to the page you want to edit, clicking this button is the best way to navigate to the page you wish to edit. For instructions on navigating to another page to edit see. 13. Content window This is the window where the page will be displayed. It acts much like a web browser content window. When you click Edit Page, you will do all your editing in this content area. 14. Quick Help Reference Quick help topics are listed in this toolbar. If you are stuck on anything, this is a great place to start trying to find an answer. To return to the page you are editing, just click the Back button. 15. Draft Console Clicking here will take you to the draft console of Contribute. If you have any drafts that you have saved and not yet published, you can view access those here. If you have any saved drafts that you want to discard altogether, you can do that as well.

5 16. Standard Operation Toolbar This toolbar needs little explanation, it serves much the same function as the standard operation toolbar in any other application such as word, excel, etc. Connect Toolbar Connect button The Connect button is the only new button on this toolbar. The other buttons have already been explained above. You will see the Connect button appear in place of the Edit Page button and New button when you are not connected to the site you are currently viewing. Clicking Connect will connect you to your site and that button will be replaced by the Edit Page and New buttons. Editing Toolbar 1. Style menu The style menu is a pull down menu. When you click this menu you will see the many different styles you can apply to your text. These are pre made styles that can be used in many different ways. Select the text you want to apply a premade style to, and select the style from the pull down menu. You can always undo a style you do not like, so take the opportunity to experiment. Styles in many cases can help organize your content and make it more visually appealing. 2. Font Face menu

6 This pull down menu will display the fonts you are able to use on the internet. This font list is always smaller than your computer s font list. The reason for this is that different computers may not have the same set of fonts as your computer does. The font that is used to display the text on your webpage is based on the fonts available on the user s computer. So unless you choose a font that is guaranteed to be on your user s computer, your text may not display correctly. Contribute has already listed the fonts that will definitely work on all user computers. Though your choices will be limited, Contribute has made this part of the process much easier for you. 3. Font Size menu This pull down menu will show you the available sizes you can make your font. Currently the menu is showing a font size of 12pt. 12pt is the most widely used font size. On the web however, 10pt font is becoming more and more popular because it is just as easily readable if not more readable in some cases and it allows you to type more content without making the user scroll down forever and ever Standard Word Processing Format Controls You have seen these same controls in any word processing software you have ever used. These functions are bold, italic, and notice there is no underline. Underlining should never be used on a webpage unless absolutely necessary. Many links are identified by underlined text whether the underline is always there or shows up when the mouse rolls over a specific link. The other controls are alignment controls which include, left align, center align, right align, and stretch line to page width. Look at these examples. Left Align Center Align Right Align Stretch line to page width Stretch line to page width is not a recommended alignment choice simply due to the amount of space that will appear in lines with very few words, for example, the above line. 10. Numbered List button This function will enable you to create a numbered list similar to how you create a numbered list in any word processing application. The formatting will be done for you. 11. Bulleted List button This function will enable you to create a bulleted list and again, all formatting will be done for you. 12. Outdent button If you have a line or section of text that has been indented, you can place the cursor at the start of the line of text and by clicking the Outdent button, you can remove an indent. The same result can be achieved by placing the cursor at the same place and using the backspace button. 13. Indent button If you place your cursor in front of a line or select a section of text, clicking this button will indent that line or selected section. The same can be achieved by pressing the Tab key on your keyboard. 14. Font Color menu

7 Select the text you wish to apply this effect to by clicking and dragging. Click this button to open a menu showing color options for text. Click on your desired color to apply the change. Always remember to keep your end user in mind when choosing text formatting options. 15. Highlight button This button will open up a very similar menu to the Font Color menu. The only major difference is that you are selecting a highlight color. Again, keep in mind some highlight colors may conflict with your text color. Creating/Editing Links At this point you may want to add a link to your page. While you cannot edit the main navigation of your page, you can place any link you wish inside your content. The next section will walk you through how to add and edit links inside your content.

8 In order to create a link, simply work through the following steps. 1. Type the text into your content like you would any other text. 2. Select the text you wish to make into a link as shown above. 3. After you have your text selected, click the Link button on the main toolbar. 4. Select the option you want from the menu. (see below for option explanations) Drafts and Recent Pages Use this option if you want to link to any drafts or recent pages you ve worked on. This option is almost never used and is not recommended for use on University sites. Create New Page

9 Use this option if you want to create a new page which will be linked to your selected text. Notice the field labeled Link text: is read only. You can see the text you have selected as your link text in the box but you cannot edit it. This will be explained later. You will see that you have the option to create a new page from a variety of places. Blank Web Page will almost always be selected by default. However, unless you know exactly what you are doing and it requires you creating a page entirely from a completely blank page, you should not create a new page from a blank page. You should see the Templates folder. Click the + next to the folder to expand it. Inside you will find the template or templates your web site uses. Make sure that you know which template you need to use if your web site uses multiple templates. (The use of multiple templates is NOT the case for most web sites). If you are unsure about which template you should be using or even if you want to double check that your one and only template is correct, simply single click on the template you think is correct. You will notice that a preview appears in the Preview window on the right side of the Insert Link pop up window. Once you have selected the correct template, click OK and your new page will have been created. NOTE: If you want your new page linked from the main navigation which you cannot edit in Contribute, IMRC to have that taken care of for you.

10 Address Use this option if you want to link to someone s address. The best way to accomplish this is to type the address in your content first, and then select that text the same way as shown with the MAKE A LINK text. In order to link to someone s , simply click on the E mail Address tab, type that person s into the E mail address field and click OK and your link to someone s will be complete. File on My Computer For many people, links most often need to be used to access a document such as a Microsoft Word document, Adobe PDF document, Microsoft PowerPoint presentation, etc. For many users, the first place they look for the file is on their

11 computer. In most cases, the file you need is on your computer. However, it is important to know that each time a duplicate file is uploaded, even if the filename is exactly the same, Contribute will NOT overwrite the file and instead will upload a duplicate of the file to the web space. This can cause confusion when trying to figure out which of the duplicates is the correct file. Uploading duplicate files can also cause you to run out of web space faster. Be careful of how you save your documents as well. When you are saving a document that is to be used online as well, use _ instead of a regular space, keep your name in lowercase lettering, and give it a name that you will recognize but isn t longer than 3 or 4 words. If you update a file on your computer and need to upload it, then do so. A great approach would be to save the new file with a date on the end of the filename indicating it is the most recent update. For example: filename_lehigh.pdf might be the original file, filename_lehigh_jan1108.pdf might be the updated file s name. Keep track of the old file that you are no longer using and the page name to IMRC staff and we will delete the old file from the webs space for you. To upload a new or updated document, click the File on My Computer tab and then click the Browse button. This will open up a Select File box as shown below.

12 The Select File box should be a very familiar box. Navigate to the file on your computer you wish you upload, and click the Select button when ready. The Select File box will disappear and you can click OK in the Insert Link window.

13 Browse to Web Page From this tab you can place a link to another web page or existing page or document already in your web space. If you know the URL (URL example: you can type it directly into the Web address (URL) field. If you are not sure of the exact URL and need to browse the web to find the page you are looking for and preview it just to double check, click the Browse button. This will bring up the following window.

14 This window simulates your standard web browser. Type the web address in the Address field, click Go, and the browser will take you the page. Once you have found the page you wish to link to, click OK. Sometimes the link you are adding may link to a document or PDF that is already in your web space. You may also want to double check to see if the document you want to link to is already in your web space instead of uploading a duplicate and wasting space. To do this, click the Choose button in the main Insert Link window. The following window will appear.

15 The root folder (or www data folder) will be displayed automatically. Since all your documents and PDF files should be saved in the documents folder, double click on that folder to view its content. As shown above, all the documents and other files that are currently uploaded to your web space will be displayed. Find the file you wish to link to, click on it once, then click OK. If your file is not there, then at least you will know you can upload a new file without saving a duplicate to your web space and cluttering things up.

16 Now, remember that above the Link text field was pointed out? This field is where the link text you have selected will appear. You cannot edit the text since you have already selected the text you wanted to make a link out of. If you did not select any text, the box will be empty and available for you to type in the text you want. The other way to make a link is to simply position the cursor at the place in your content where you want to place a link and click the Link button. You were shown how to create a link by typing text into your content and selecting that text because it is the recommended way to create a link. The chance for error is much less when you already have the text typed in the content in the correct place and with the correct formatting. In any case, no matter which option you have chosen to use, once you have the link properties set up, click OK and your text selection will now appear as a link.

17 Adding/Editing Images This next section will explain how to add images and edit them on a very basic level in order to help them fit with your content and maintain its professional look. When ever you pick an image, try to be aware of the colors of your images versus the color scheme of your website. In most cases, any image will do just fine, however there are exceptions to every rule. To add an image, place your cursor in your content where you want the picture to go can click the Image button immediately to the right of the Link button. This will open a pull down menu (shown below). While you can get an image from a Website or the Internet, you should always click From My Computer. If you find an image online and you are sure you have permission to use it, save it to your computer. This way, when you click on From My Computer you can find the image you want to use more easily and you can be sure it is not a copyrighted image. Therefore, for our purposes, you should only add an image using the From My Computer option. After clicking From My Computer, the following Select Image window will appear. Navigate your way to the folder that has the picture you want to use. Click once on the picture you want to use, then click Select.

18 Once you click Select, the picture will be added to your content. Take a look at the content. Notice that the picture size is way too large for the content area. So now we will discuss how to perform basic editing on the image to make it fit the content appropriately.

19 When you have the image selected in your content, the Format Bar will be replaced by the Image Bar (shown above). You will use the Image Bar the same as you use the Format Bar. 1. Resize button Clicking this button will allow you to resize your image freehand. This means that 3 blue boxes will appear in the bottom left corner. You can click and hold these boxes and drag to the size you desire. If you hold the Shift key on your keyboard and then click and hold the box in the bottom left corner. When you drag you will notice that both dimensions of the image are affected. This is especially helpful because instead of distorting the image, the image will only become smaller, but its dimensions will stay the same rationally. 2. Rotate Counter Clockwise button Clicking this button will rotate the image 90 degrees counter clockwise. 3. Rotate Clockwise button Clicking this button will rotate the image 90 degrees clockwise. 4. Crop button Clicking this button will enable the crop function. Cropping enables you to select the part of the image you want. For example if you have a picture of flowers and only want to show one of those flowers, using the crop function you can select just that one flower. 5. Sharpen Image button Clicking this button will sharpen the image. It is not recommended to use this feature often if at all due to the pixilation that occurs after too much sharpening. A pop up will appear which will prompt you to sharpen the image to a degree of your choice. The picture will automatically reflect the amount of sharpening you select, so you can play around with the degree of sharpening before you actually click OK. 6. Brightness/Contrast button Clicking this button will bring up a menu box. You can either increase both the brightness and/or contrast. Play around with the levels to get a better feel for what they do and how they affect your image. When you are finished, click OK. 7. Image Style menu This pull down menu is almost identical to the font style menu. There is not a great use for this function with images for our purposes, so don t worry too much about this feature.

20 8 9. Width and Height attributes The attribute boxes (both width and height boxes) are connected in that in order to preserve the image integrity, if you change one attribute, the other attribute will automatically change. You will see this in the examples below Image Alignment controls These controls function the exact same way as the font alignment controls. Align your image within your content the same as you would a selection of text. 14. Image Properties button Clicking this button will bring up the Image Properties window. You can edit all of the properties on the image toolbar as well as a few more advanced features. For out purposes, it is a very rare case when you would ever have to use this window to edit an image. Now that you are acquainted with the image toolbar, let s go back to the image we added. We are going to perform some basic editing on our image in order to get it to fit properly in our content area. If you wish, open up one of your pages in Contribute and insert an image at the bottom of your content. Don t worry after you are finished all you have to do is click Discard Draft and no changes will be saved. When the image is first added, you will notice that it is way too large for the page and stretches your content area or stretches beyond your content area. Notice the width and height attributes of the image.

21 If you know exactly what you want one dimension to be, then the easiest way to resize the image is to type in the dimension you are sure of. I want to see the picture at a 400 pixel width because I know 400 pixels will fit into our content area. After you enter the dimension you are sure of in my case that would be the 400 pixel width press Enter on your keyboard and you will notice the picture will be resized. Take notice that Contribute also changed the height attribute respectively in order to preserve the integrity of the picture dimensionally.

22 If you do not know an exact number for one of the dimensions you can resize the image freehand. Click the Resize button and you will notice 3 blue boxes appear near the lower right hand corner of the image. See below. Each box represents an anchor. If you run your mouse over one you will notice that your pointer changes. By clicking and holding on any of the boxes will enable you to change the size of the image. By using the box at the bottom center, you can edit the height of the image. By using the right middle box, you can edit the width of the image. It is recommended however to use the box in the lower right corner. By using this box you can change both dimensions of the image at the same time. Now, resizing an image freehand has one major downfall. Since you can select any size you want, you may end up distorting the image rationally. For example, click and drag the bottom center box almost to the top of the image and look what happens to the picture. There is a very easy way to avoid this. By holding the Shift key on your keyboard, then clicking and dragging from the lower right corner box, the image will only change rationally. This means that when you are dragging to the left in order to fit the image in your content, you will notice that the height is also changing rationally to preserve the integrity of the image. The Shift key trick is a good one to keep in your hat.

23 Next, click the Rotate Counter Clockwise button once. You should notice your image has rotated 90 degrees counter clockwise as shown below. Simply click the Rotate Clockwise button once to bring your image back to its original orientation.

24 Now what if you want to only use a part of the entire image? For example, out of our example picture, what if we only want to use on or two flowers? This is where the Crop function comes in very handy. Click on the Crop button and you will notice a blue, shaded area appear around the edge of the image. You can resize the selected area by clicking and dragging on any of the anchor boxes similar to when you resize an image. See below which section of the image was chosen for our example. Notice what the blue shaded area looks like. When you are finished selecting the area of the image you want to use. Press Enter on your keyboard. You should then see your selection is the only image in your content. See below what the example looks like. Now we have selected the area of our image we want to use in the content.

25 At this point, most people will never have to go this far. But just in case, the final section will show how to perform simple touch up operations. As stated before, you have to be careful when sharpening an image as it does not take much sharpening before the image becomes very pixilated. Notice in the example that sharpening was only used to its first degree. Notice the difference in the image. Play around with the degree of sharpening and see what happens to your image. After sharpening, you can adjust the colors by editing the brightness and contrast. Generally, higher brightness means a brighter image while lower brightness means a darker image. Contrast is different in that it affects the colors of the image. If contrast is high, the image will be turned into absolute colors and fewer colors. Try setting the contrast to the highest setting and notice how your image is all absolute colors and no shades. No try setting the contrast to the lowest setting. You notice that your image is almost entirely gray. Play around with these two attributes to find a setting that fits for you. Take a look at the final settings for our example image.

26 Finally, click on the Image Properties button on the image toolbar. The Image Properties window contains many options that have already been set or edited. You can change the image by clicking on Choose and selecting a different image, however, you will lose all the formatting you just did to your original image. You can manually type in new display dimensions or reset the image size. You always want to leave Constrain proportions CHECKED. If you uncheck this box, your image will not resize proportionally. The padding and border attributes you will almost never have to use for our purposes. The Alignment menu controls the image alignment which you already selected on the Image Toolbar. It is good idea to type a few word description for the Description field. As stated in the window, the description is used by tools that read web pages to people with visual disabilities. Once you are happy with your image properties, click Apply, and then click OK.

27 Adding/Editing Tables In this last section, we will walk through adding and editing tables in your content. Immediately to the right of the Image button on the main toolbar you will see the Table button. Click the Table button to open the following window. To insert a table you need to specify some table attributes first. Starting at the top with Table size type the number of rows and number of columns you wish to have. Our example will use 3 rows and 3 columns. In the Options section there are 4 attributes you can specify. For Table width, Default width will be selected by default. If you are unsure about what you want your width to be, leave default selected because you can edit the width later. If you know exactly how wide you want your table to be, then select Specific width and specify the width in the given field. Keep in mind that this width is the entire table and not an individual cell. Also remember that your table can not be wider than your content area. In most cases, you will want to leave a border of 1 on your table. You can take the border off if you wish later, but leaving the border on while you are constructing your table is often very helpful. Cell padding refers to the amount of pixels, or space, between the cell border and the cell s content on all sides. Cell spacing refers to the amount of pixels, or space, between individual cells on all sides. Generally you do not need to specify these attributes until later, if at all. For the Header section, you can choose where you want your header row to be if you want one at all. Click on the option you wish. For our example, a top header row has been selected. Once you have specified all the attributes, click OK.

28 The very first things you will notice are 3 anchor boxes. These function exactly like the anchor boxes in images. By clicking and dragging from the anchor boxes, the example table was resized. The newly resized table appears below. Notice that the blue lines indicate the border of the content. Any component within the content area cannot appear outside these borders. In order to insert content into the table, simply click on the cell you want to add content to and you will see the cursor appear there. You can edit the content of a cell the same as normal content on your page by using the Editing toolbar. In the example below, you will see that the header row is all bold and center aligned. Standard text appears in each of the other cells. You can also add and edit an image to your table the same as you did in the content. You can see an image was added to the bottom left corner cell.

29 Now let s say that you realize you need to add a column and a row to your table. This is a very easy edit. Look at the main toolbar below. Notice that whenever the table you are working on is selected, the Table Row button and the Table Column button become active. In order to add a row, click the Table Row button once. Below you will see that a row has been added to the example table. If you want to add a new column, click on the Table Column button once. Below you will see that a new column has been added to the example table. Once you have the rows/columns you need, you can finish typing content into those cells.

30 Publishing Your Page And finally, we are ready to upload the page. Look at the main toolbar below. After you clicked Edit Page back at the very beginning, the publish buttons appeared. You really will not encounter many instances where you need to use the Send for Review button. If you have to stop working on a page and come back to it later, then click Save for Later and you will save the draft and you can come back to it later. If you want to throw out all of your changes, not publish, and not save a draft, then click Discard Draft. This will completely delete all of your changes, not publish, and not save changes. But if you are ready to upload your page, simply click Publish once, and then Contribute will publish your page. If your page does not upload correctly, try to fix the error yourself. Simple errors can be caused by, bad characters within the page name, connection time out, etc. Try to publish again. If your page still does not publish successfully, contact an administrator or IMRC for assistance. Once your page uploads successfully, you should see the following information window appear telling you that your page has been published to your website. We hope you have found this tutorial helpful both as a learning tool and a reference tool. Please contact IMRC with any feedback you feel we should know about. Also feel free to contact IMRC with any questions or concerns. Good luck using Contribute!