User manual MACROMEDIA CONTRIBUTE

Contribute Manual · · Using Templates with Contribute Navigating to web pages Creating a new page from a Template o Editable Regions o Optional Regions Editing existing web pages Editing page elements not in editable areas Using Cascading Style Sheets in Contribute Adding Word and Excel documents to a website Working with tables in Contribute Making hyperlinks with Contribute Adding an image to a page Adding keywords and a description for a page Saving Drafts Canceling a draft or new page Publishing Your Page · · · · · · · · · · · Using Templates with Contribute How templates work A developer makes a template in Dreamweaver by creating a page and adding content that he/she wants to be present on all pages that use the template. A simple template might only contain a table with the logo and a background color for the page. A more complex template may have a full navigation system in place, additional content across the top of the page, and a footer containing copyright information along the bottom. The power of templates, though, lies in the various methods of editing or modifying certain sections of the page. The template creator picks certain areas of the template that should remain editable or optional, and users who make pages from this template will only be able to edit (and add) the content in those specific areas. For Contribute administrators who want more information about how to create a template in Dreamweaver MX, please see the Additional information section at Macromedia's website. For a more detailed user manual, download Macromedia's Using Contribute Manual (PDF), and visit Contribute Support Center. Navigating to web pages The easiest way to find a web page you want to edit is to browse to the page in Contribute, just as you would browse to a page in any web browser. You can use the address bar in the Contribute window just as you would an Internet Explorer or Netscape browser window address bar. Viewing drafts and new pages Drafts you are currently editing, and new pages you've created but haven't published yet, appear in the Pages panel. You can also access these pages using the File menu. To view a draft or new page, do one of the following: · · Click the draft or new page title in the Pages panel in the sidebar. Select File > Drafts, then select a page from the popup menu. Adding a page to your bookmarks You can add any web page ­ not just pages in websites you've connected to ­ to your bookmarks list. To add a page to your list of bookmarks: 1. Browse to the page you want to add to your bookmarks list. 2. Select Bookmarks > Add Bookmark from the menu. The Add Bookmark dialog box appears. 3. If you want to change the name of the bookmark, enter a new name in the Name text box. This is the name that appears in your bookmarks list. 4. If you want to add the page to a folder, click an existing folder name or click New Folder to add a folder. 5. Click OK. Creating a new page from a template 1. In Contribute, choose File > New Page. 2. In the New Page window, there will be a list of templates available to you for creating a new page. Create a new page by clicking on a template from the templates folder. Note: If the needed template does not show up in the templates folder, click the Refresh Templates button. 3. After you have selected the name of the template you would like to use, you will see what the blank template looks like in the preview pane to the right. 4. Specify a title for the page in the page title field. Page Tile should be in the format: Page Title: Department Name: Indiana University click OK to make the page. Editable Regions An editable region is a space on the templatebased page in which you can put in content. This is the most common template feature that you will be using. In Contribute, a basic editable area looks like the image below. The light blue/green outline defines the editable region. In this example, both the Department Name area and Content area are outlined in blue/green and therefore are editable. In Contribute, you will only be able to add content within these areas. Optional Regions You can enable optional regions by clicking on Template Properties link. Select optional region, check Show, and then click ok. Your page will now display the optional right navigation. To hide optional region click on template properties, select optional region, and uncheck Show Region. To edit the right navigation please refer to the Editing page elements not in editable areas section. Editing existing web pages You can edit any pages on your website, as long as you have permission and as long as someone else is not currently editing the page. When you browse to a page, the message area under the toolbar indicates whether you can edit that page. Opening a page for editing To open a page for editing, simply browse to the page or use the Contribute workspace to quickly access special pages. To edit a page: 1. Browse to a page you want to edit 2. Do one of the following: · · Click the Edit Page button in the toolbar. Select File > Edit Page. Editing page elements not in editable areas Contribute enables you to access pages and files associated with your website that you can't browse to. Use the Choose button in the toolbar (after the address bar) to access pages and files that are saved in a website folder, but aren't linked from any page on your website. The most common instance of this will occur when you need to update the footer, left navigation or right navigation. To edit the left navigation: 1. In the Contribute browser or editor, select View > Choose File on Website or click the Choose button in the browser toolbar. The Choose File on Website dialog box appears. 2. To edit the left navigation, doubleclick on the _leftnav.shtml file in the root directory. Include files are identified with an underscore. When you select the file, a preview will appear so that you can be sure you're selecting the correct file. 3. Click OK Using Cascading Style Sheets in Contribute Cascading Style Sheets (CSS) is a language used in conjunction with HTML to define how a page looks. CSS consists of a set of rules defined by the web developer or designer that tell the browser how to display the page elements. With CSS, you can specify the page layout, font size, type and color, borders and other design parameters. Not only does CSS provide more options for design than HTML, but it also allows developers to manage the look of the entire web site from a central file. Simply change a rule of style and it's automatically applied across the site! Overview of CSS style types There are 3 main types of styles. They are: 1. Custom classes: These are styles that can be applied to specific page elements, such as paragraphs and tables. These can be made available to Contribute users. 2. Redefined HTML tags: These are rules that are defined for specific tags. They are automatically applied to every instance of that tag. For instance, developers can specify that every table on the site will have a 2pixel, red border. Every new table that is made will automatically have that rule applied. 3. CSS Selectors: Selectors are used to specify styles for special combinations of tags. For instance, selectors are used for removing the underlines from links. Like redefined HTML tags, these are applied automatically to every instance of the selector rule. As noted above, custom classes are the only CSS styles available to Contribute users. This is because the other types are already applied globally to the tags. With custom classes Contribute users can select from the list of defined classes and apply them to whatever element they wish. Contribute users cannot create CSS files, but they can use the custom classes that have been linked to the page by the Dreamweaver MX administrator. Once linked to the page in Dreamweaver, the custom classes will be available in the Style dropdown menu. Applying the custom classes To apply a custom class: 1. Highlight the page element to which you would like to apply the style. 2. Click on the Style dropdown menu (shown above) and select the desired style. It will automatically be applied to the selection. Note: The style options are also available in the Format > Style menu. 3. To remove the class, highlight the selection and select None from the Style dropdown menu. Adding Word and Excel documents to a website With Contribute you can easily add Microsoft Word and Microsoft Excel documents or content to your website. There are two ways to add Word or Excel content to a web page: · · Add the contents of a Word or Excel document to a new or existing web page (recommended for smaller documents, under 300K when converted to HTML) Insert a link to Word or Excel document on an existing web page (recommended for larger documents, over 300K when converted to HTML) Adding Word or Excel content to a page You can add the contents of a Word or Excel document to a new or existing web page. When you add content to a page, Contribute converts the content to HTML and copies it to your web page. You can edit the content in Contribute changes you make to the original file on your computer will not appear on your website. To add the contents of a Word or Excel document to a new or existing web page: 1. Do one of the following to select the page where you want the content to appear: · Browse to an existing web page, click the Edit Page button, then place the insertion point in the draft where you want to add the content. · Create a new page 2. Do one of the following to select the file: · Drag the file from its current location to your Contribute draft where you want the content to appear. If the Insert Microsoft Word or Excel Document dialog box appears, click Insert the contents of the document into this page, then click OK. · Select Insert > Microsoft Word Document or Insert > Microsoft Excel Document. In the Open dialog box, browse to the file you want to add, then click Open. The content of the Word or Excel document appears in your draft. Inserting a link to a Word or Excel document You can insert a link to a Microsoft Word or Excel document in an existing page. When you publish the page with the link, Contribute copies the Word or Excel document into your website, and then links to that copy (not to the original file on your computer). To create a link to a Word or Excel document: 1. Browse to an existing page where you want the link to appear, then click the Edit Page button in the toolbar. 2. Do one of the following to select the file: · Drag the file from its current location to your Contribute draft where you want the link to appear. If the Insert Microsoft Word or Excel Document dialog box appears, click Create a link to the document, then click OK. · Place the insertion point in your draft where you want the link to appear, or select text or an image of the draft, then click the Link button in the toolbar and select File on My Computer. Enter link text, browse to the file you want to link to, then click OK. A link to the Word or Excel document appears in your draft. Working with tables in Contribute Table Basics Macromedia Contribute makes using tables easy and intuitive, but it's good to have an understanding of table terminology so that you can build tables quickly and use all available tools. Tables consist of rows and columns. The number of rows and columns define the number of cells in the table. Cells are the individual units or boxes in the table. All content is inserted into the cells. You can define a table with any number of rows and columns, and have the flexibility to add, subtract and merge cells together. Contribute has a variety of ways of creating and editing your tables. Tables also have properties that define the look and layout. · · · · Border The line that surrounds the outside of the table. This can be set to any size or none at all, but 13 pixels is standard. Border colors can also be set. Cell Padding This is the amount of space between the actual content of the cell and the cell border. This property can affect the layout of content within a cell. Cell Spacing This is the amount of space between the borders of the cells. Table Header A header is a row that is used to distinguish columns or rows. If you have a table of addresses, the header is the row that specifies the Name, Address, Phone, etc... Headers are usually made bold. Background color Background colors can be set for the whole table or for individual cells. · Creating a Table Creating a table in Contribute is easy. 1. Put the cursor at the point in the document where you want to insert the table. 2. Click the Table button in the toolbar (Ctrl + Alt + T). This following dialog box will appear. 3. Set the number of rows and columns. More can be added later if needed. 4. Set the Width of the table. Automatic Width is the default setting. Specific width allows you to specify a certain value. In web pages only width is defined, height is not defined. You can specify the table width to be a certain number of pixels wide or as a percentage of the page. If you set the width to 50%, the table will extend half the width of the users screen, no matter what size. 5. Specify any border width, cell padding and cell spacing you wish. Again, these can be modified later. 6. Click on a header style if you want one. Click OK to create the table. Note: Once you have created the table, you can select it and click and drag on the lower right corner to resize it. A word about table widths Table widths can be set as a pixel value or a percentage value. Pixel values are good when you want to have a very consistent look on the page and not have things move around. Percent values are good when you want to fill the page to a consistent degree. When using a value like 50%, the table should always fill up half the screen. However, there are some limitations to this. Text can stretch and wrap as needed when resizing a browser window or on different screen resolutions, but images cannot stretch and compress. If you have a series of images across your table, the table will not be able to compress smaller than the total width of all the images. The cells can stretch to make the table bigger, but this will only affect the spacing of the images not their size. Adding and deleting rows and columns At times you may need to add a row or a column to your table. To add or delete rows and columns: · · · · Click on the Add Row or Add Column button. This will add a row above the selected row and a column to the left of the selected column. Choose Table > Insert > Multiple Rows or Columns. This will allow you to specify how many to add and determine whether they go before or after the cursor. Right click on the table to get specific placement options (Add Row above selection, Add row below selection...). To delete a row or column, click within the correct row or column, right click and select the appropriate Delete option or choose Table > Delete> Row or Column. Merging and splitting cells At times you may want to merge two cells together or possibly entire rows or columns. Sometimes it is necessary to split cells to reformat your table, which is quite simple in Contribute. To merge cells: 1. Select the cells to be merged. To select an entire row or column, put your cursor in the first cell of the row or column, hold down the Shift key and click in the last cell. To select certain cells only (you can only merge touching cells), hold down the Ctrl key and click in all the cells you want to merge. You can also click and drag over the cells you wish to select. 2. Right click and choose Merge Cells. To split a cell: 1. Select the cell to be split. 2. Right click (or choose Table > Split Cell) and choose Split Cell. 3. In the dialog box that opens, choose Rows or Columns and specify how many to make. Click OK. Setting table properties Once a table is created you can go back and adjust the properties of the table and also the cells. There are separate property settings for the whole table and for each of the cells. To modify table and cell properties: 1. Make sure the table is selected or have the cursor within the table. 2. Choose Table > Table Properties. The Table Properties tab will give you the properties available when you create a table: cell padding and spacing, borders, etc. The Cell Properties tab gives you access to cell specific properties. Here you can set the alignment for a cell, the background color and whether or not the text will wrap automatically. You can also set properties at the row or column level. It depends on what is selected when you open the Table Properties box. To set properties for a column or row: 1. Select the entire row. You can do this by selecting all the cells in the row or column or if you place your cursor at the very right or top edge along the table, it will turn into an arrow that will select the row or column when clicked. The selection area is narrow! 2. Right click and go to Table Properties. The dialog will now say Table Column Properties. Set the values and Click OK to close the dialog box. Formatting a table Contribute has built in table formatting. These are predefined ways of setting color and formatting schemes. To Format a table: 1. Put the cursor within the table. 2. Click on the Format Table button in the toolbar or choose Table > Format Table. 3. A dialog box will open with a list of formatting options. The Basic tab will show previews of the color schemes available to you. You can choose the default setting or go to the Advanced tab. The Advanced tab will allow you to change the row color, text style and text alignment for each of the row types. 4. Click Apply to preview your table or click OK to finish the table. Sorting a table Contribute also has sorting options for the data in your table. You can sort tables alphabetically or numerically, ascending or descending and then sub sort within another column. To sort a table: 1. Put the cursor in the table. (Tables that have merged cells cannot be sorted.) 2. Click on the Sort Table button or choose Table > Sort Table. 3. In the dialog box that opens, choose the column number that you want to sort, choose alphabetically or numerically and ascending or descending. If you wish to sub sort by another column, enter the settings in the 'Then by' fields. There are check boxes that allow you to include headers and hooters and other options. 4. Click Apply to test the options and click OK when you are satisfied with the table. Making hyperlinks with Contribute One reason the World Wide Web is easy to use is because it allows you to easily link from your page to any other web page with a single click. A link, technically called a hyperlink, is a small instruction added to the page that tells the browser to go to the specified page when someone clicks on the link. Making links is easy, and this document explains the different kinds of links and how to make them in Macromedia Contribute. Basic Link Types There are 3 basic types of links on the web: · · · Links to other pages on your web site. These are called relative links since they are within the same site. Links to other web sites. These are called absolute links because you need to specify the full address to the site. Email links. These links will open up a new email window with the person's address already filled in. Making links in Contribute Making a link in Contribute is easy. It is a matter of selecting the text or image that you want to make the link and then telling Contribute where you want to go with that link. To make a link: 1. Select the text or image that you want to make the link. Text and images are the most popular items to make into links. Other objects can be links, but you want to make it obvious that your object is a link. This is why text is blue and underlined and the cursor changes into a hand. 2. Click on the Link button and select Drafts and Recent Pages. Linking to Drafts and Recent Pages Drafts are Contribute pages that you are working on but have yet to publish. They will show up in the Places Window in the top left corner of Contribute. Recent pages are just that: pages that you have visited recently, like a history list. 1. Click on Link > Drafts and Recent Pages. 2. You will see a list of drafts and recent pages in the Insert Link Dialog. Select the page in which you want to link. The Preview Window will show the page that you have selected. 3. Click OK to make the link. If you have linked to a page that has not been published yet, Contribute will prompt you to upload the other page after you publish the current page. This action will prevent a broken link. Create a New Page This option is used when you want to link to a new page now and enter the contents of that new page later. This is useful when trying to create the basic structure of your site. 1. Click Link > Create New Page. You will be presented with a dialog box that lists your new page options. You can choose between: · Copy of Current page. This will simply copy your current page as the new page. · Templates. You will be able to create an instance from one of the template. 2. Select the type of new page you want to create. 3. Give the page a title. This is the title that will appear at the top left of the browser window when the page is viewed on the web. The title should follow the following format: Page Title: Unit Name: Indiana University Kokomo 4. Click OK. The new page will be created and the link will be made in the original file. Linking to a Web Page This option will allow you to make a link to a page anywhere on the web. 1. Select your link text and click Link > Browse to web page. 2. In the dialog box type the URL of the page in the field given. The preview pane will show the page you have selected. Click the Refresh button to update if needed. Often times, URLs are long and unintuitive making it easy to mistype a complicated URL. To prevent typos, it's best to browse to the page and let Contribute write the link. 3. Click the Browse button. A small browser window will open in which you can browse to the specific page that should be linked. You can also enter the base web site address and browse to the specific page. For instance, to link to a specific page on the Macromedia web site, put http://www.macromedia.com in the link field and then click Browse. The mini browser will open directly to the Macromedia home page. You can then browse to the specific page to which you are linking and click OK. The full URL will then be added. 4. Click OK to complete the link. Linking to an email address Sometimes you want people to click on a link and send an email. 1. Click Link > Email Address. 2. In the dialog box type in the person's email address. 3. Click OK to finish. Note: It is advisable to encode an email address, to prevent it from being harvested. Contribute does not have email obfuscation capabilities, so you need to encode the email address before pasting it to the email dialog box. You can use this: http://www.wbwip.com/wbw/emailencoder.html or any other online tool to perform this step. Linking to a file on your computer When linking to a file on your computer, Contribute assumes that you want to put file this on the web site. Therefore, it will make a copy of the file, upload it to the server and make a link to it. 1. 2. 3. 4. Click on Link > File on My Computer. Click on the Browse button and browse to the file on your computer. Click the Select button to choose the file. The path will show in the file field. Click OK to finish the link. When you publish the page the linked file will be uploaded along with your Contribute page. Creating a section anchor in Contribute A section anchor is an invisible marker placed in your page to mark a specific topic or place. You can then create links to the anchor that allow website visitors to jump to the specified position in the page. This is commonly used on pages like glossaries that allow visitors to quickly jump to the "M" section. You can also make links to other pages by pointing directly to the anchor on the new page. 1. In Edit mode place the cursor at the point on the page to which you wish to create a link. 2. Click Insert > Section Anchor. A dialog will open. 3. Enter the name of the anchor, making it clear and meaningful so that others will understand what it's marking. For instance, if you are jumping to the 'products' section, name the anchor products. 4. Click OK to close the dialog. A small globe icon will be added at the cursor point. This will only be visible in Edit mode. It will not be visible when browsing the web page. 5. Repeat this for each anchor needed. Note: Keep in mind when previewing the page that anchors at the bottom of the page may not be seen if the page is scrollable, and they will jump to the top of the page only if it is a long page with room to scroll. Now that the section anchors have been created, you need to link to them: 1. In edit mode highlight the text or element that will be the link. 2. Click the Link button and choose Drafts and Recent Pages. 3. In the dialog that opens choose the page on which you are working. It will be marked as Current Page. 4. To access the anchors click on the Advanced button to open the advanced link options. 5. In the advanced options click the section anchor popup menu to see the list of anchors on the selected page. When linking to other drafts or recent pages, check the section anchor popup menu for anchors that have been established within these pages. 6. Select the anchor to which you want to link. 7. Click OK to create the link. 8. To test the anchor link, publish the page and click the link. You can also use the Preview in Browser option (F12). Note: If you are trying to link to an anchor on an external web page, the anchors should show up in the advanced dialog. If they are not listed, find the right link by going to the page in question and clicking on the link that leads to the anchor. The full path will be displayed in the address bar, and anchor name will be listed at the end of the path. It should something like: #anchorname. Add the anchor name in the section anchor dialog without the pound sign (#), or paste the full path in to the URL field. Adding an image to a page 1. Place the insertion point in your draft where you want the image to appear. 2. Do one of the following: · Click the Image button in the toolbar. · Select Insert > Image. 3. Select From My Computer or From Website from the popup menu. The Select Image or Choose Image from Website dialog box appears. 4. Browse to and select the image, then click the Select or OK button. 5. If the Image Description dialog box appears, enter text to describe the image for people with disabilities or for people with their browsers set to display text only, then click OK. The image appears on your draft. If the image is from your computer, Contribute copies the image to an images folder on your website when you publish the draft. You cannot edit the image in Contribute until you publish the draft. If the image is from your website, you can edit the image in Contribute before you publish. Note: You can also drag or copy and paste an image into a draft. Adding keywords and a description for a page You can associate keywords and a description with your web page. Adding keywords can enable visitors to type those words in a search engine and find the page. To add or change keywords and a description for a page: 1. Browse to the page you want to add keywords and a description for, then click the Edit Page button in the toolbar. 2. Select Format > Keywords and Description The Page Keywords and Description dialog box appears. 3. Enter or change keywords in the Keywords pane. Separate each keyword with a single space and comma (for example, "meeting, minutes, planning, committee, holiday, party"). 4. Enter or change the page description in the Description pane. 5. Click OK. Saving Drafts When you edit a page, Contribute automatically saves the page as a draft, and the draft title appears in the Pages panel in the sidebar. Contribute continues to save your draft as you work on it, but you can also periodically save your work if you want. To save a draft and continue working: · Select File > Save. Canceling a draft or new page To cancel changes to a draft of a published page: · In your draft, click the Cancel button in the toolbar. The published version of the page appears in the Contribute browser, without any edits. To cancel a new page: · In the new page you're editing, click the Cancel button in the toolbar. Contribute discards the new page. Publishing Your Page Publishing a draft makes it live on your website, so that your website visitors can view the page. Before you publish your draft, you can preview it in your browser. You can also make the draft available to others for review, to get approval or feedback, before you publish the draft. If you decide not to publish your draft, you can cancel it, leaving the published version of the page as is. If the draft you're publishing was already on your website, Macromedia Contribute replaces the existing page with your updated version. You can also make updates to an existing page, then publish it as a new page without altering the original page. If the draft you're publishing is a new page that was not on your website, Contribute adds it to your website. For new pages, Contribute asks you to name the file for the page before you publish. File name should be all lower case with no spaces. After you publish a draft, if you realize that you need to unpublish the draft, don't worry ­ you can revert to a previous version of the page, if your website administrator has enabled the Page Rollback feature. Previewing a page in your default browser To preview a page in your browser, do one of the following: · · Select File > Preview in Browser. Press the F12 key. Making your draft available for review 1. In your draft, select File > Email Review Contribute creates a new email message in your default email application. 2. In the message's To text box, enter the reviewer's email address. 3. In the body of the message, add a message if you want. Contribute includes a message with the web address for the temporary copy of the draft. 4. Send the email message. 5. In Contribute, work on another draft or switch to the Contribute browser until you receive feedback from the reviewer. 6. When you receive feedback from the reviewer, click the draft title in the Pages panel to return to the draft and update it. Note: Images and global elements may not display properly when using Email Review function Publishing a page to your website To publish updates to an existing page: 1. In your draft, click the Publish button in the toolbar. If the draft does not contain links to any new, unpublished pages, then Contribute publishes the draft. If the draft contains links to any new pages, then the Publish New Linked Pages dialog box appears. 2. For each unpublished linked page (click the page name to select it), change the filename and folder location if you want, then click Publish All. The filename appears at the end of the web address for each page. The web address is the location where Contribute saves the pages on your website. Contribute publishes the draft (and any new pages it links to) to your website, then displays it in the Contribute browser. To publish a new page: 1. In the new page you're editing, click the Publish button in the toolbar. The Publish New Page dialog box appears. 2. Change the filename. Filename should be lowercase and not contain any special characters or spaces. Be sure to add .shtml to the end of whatever filename you choose. This is extremely important. Not adding .shtml will make many areas of the page disappear or become broken. The filename appears at the end of the web address for the page. 3. Click the Choose Folder button beside the filename if you want to save this page in another location on your website. Click Publish or Next. If your page does not link to any new pages, Contribute publishes the new page to your website, then displays it in the Contribute browser. If your page links to any new pages, the Published Linked New Files dialog box appears. 4. For each unpublished linked page (click the page name to select it), change the filename and folder location if you want, then click Publish All. The filename appears at the end of the web address for the web page. The web address is the location where Contribute saves the page on your website. Publishing an existing page as a new page