"How to" Guideline series is coordinated by Helen
Mongan-Rallis of the Education Department at the University of Minnesota
Duluth. If you have any questions, comments,
or suggestions to improve these guidelines please e-mail firstname.lastname@example.org.
Working With Contribute
Guidelines developed during a workshop by Casey Wagner, June 17, 2005.
- Go to Macromedia.com
- Click on link to Contribute 3
- You can download the free trial from this page, or purchase a copy
- Once you have registered for the free download, you will be sent an e-mail that tells you your code to be able to download it
- Open the e-mail to get the code and then return to the Contribute site.
- Download the file from the contribute site to your desktop
- As soon as it finished downloading, it will put a zipped file on your desktop.
- Double click on the zipped file to unzip it
- Once the file has been unzipped, follow the steps to install it on your computer
Setting up a Connection to Your Website
- On the start up page, click to "create connection to a website" --> this opens wizard. Click next/continue.
- You are then asked the web address of your website. To get to your UMD website, the address will be http://www.d.umn.edu/~yourusername (if you don't know your web address, you can click on the browser button and navigate to where it is) --> click next/continue
- How do you connect to server? Select "secure FTP" and "server address" = www.d.umn.edu --> click next
- What is your full name? Type in your full name. Also type in your e-mail address --> click next
- The next page in the wizard gives you a summary of your settings. Click "done."
- You should be connected to your website. If you have anything there, your index page will show up. If you have nothing in your website yet, all you will see is your directory.
To create a new connection to a website:
The directions below on creating a new connection come directly from the UMD ITSS website on Contribute created by Barb Johnson:
- 1. Start the Contribute program.
- From the Contribute start page, choose "Create a connection"
- On the welcome page of the connection wizard, click the "Next" button
- On the user information page of the connection wizard, enter your name and full email address (with the "@d.umn.edu" part). This would allow any collaborators to know when you have a page checked out and contact you to request permission to edit it. When working on your "tilde" site, this will most likely be a reminder to yourself that you checked out a page when on a different computer and did not check it back in!
- Click the "Next" button
- On the website home page of the connection wizard, enter the address of the main page of your site (including "http://" ) OR click the "Browse" button and navigate to the main page of your website
- Once you have the correct address for your main page, click the "Next" button
- On the connection information page of the connection wizard, from the drop down box, pick "FTP"
- In the fields that appear, enter these settings:
* FTP server name: www.d.umn.edu
* FTP login: <your userID>
* FTP password: <your systems password>
- Click the "Next" button
- On the group information page of the connection wizard, click the group "Administrator" and click the "Next" button
- Click the "Done" button to finish
Creating a new page
- Click on the "new page" button at the top of the screen.
- A box opens, with a space at the bottom to give your page a title --> The title is what appears in the browser bar when your page is online, and is what viewers will see when they bookmark/add your page to their favorites, so choose phrase that clearly captures what is on your page (often the same as your first heading on the page). Click "OK."
- This opens a blank page and connects you to the server. You can now add content to your page using the various tools within Contribute.
- When you are ready to publish the button, click on the "publish" button (if it is your own site; if it is someone else's and you don't have full permissions to edit the site, then you need to click on "send to review." You can also save it for later.
- The functions in Contribute are very similar to those in other WYSIWYG programs (web authoring programs), such as Mozilla Composer or Macromedia Dreamweaver
Practicing with Contribute functions
- Whenever you create a web page, consider
(a) the purpose of the web page:
- (b) the audience: consider the way in which users are connecting (e.g. if they are connecting via dial-up connection, then you should be sure to have the file size be small -- resize images so they are small and load quickly)
- Create a heading. Type the heading of the page. Select heading level 1.
- Create a table: click on "insert table" button. This opens a box that enables you to select how many rows, columns, the thickness of the border, cell padding, cell spacing --> Click "OK"
- The table is inserted. You can then change various options on the table here:
- resize width of table (click "handle" and drag)
- Click above the table and drag across the whole thing to select it, then choose the center button.
- If you select the whole table and right click (Windows) or control click (Mac) this shows you the table properties palette. Here you can change: horizontal alignment, vertical alignment, background color, column width (in pixels or percent)
- Enter information in the table:
- Type text in the boxes
- Create a link:
- type the text, then select and drag across the text that you want to become a link.
- Click on the link button or choose "insert link" from menu or right click (Windows) or control click (Mac)
- Browse to the web site to which you want to link. Once the page that you want loads, click on "OK" and the link.
- When you create links, there are various options other than connecting to an existing web page (e.g. link to an e-mail address, to a M.S. Word file).
- Merging or splitting table cells (to enable you to customize your table): Drag over the cells that you want to merge (or the cell that you want to split). From the table menu, select "merge cells" from the drop-down menu.
- Publishing your web site: if you gave the file name name earlier, it will show up here. Otherwise you can change the name here. The file name should be one word, lower case, no spaces, and then end with the file extension .html Example: myfirstpage.html (or my_first_page.html). This closes the page as it has now published it.
- To continue working on your web page again, click "edit page."
- Insert image:
- click on image button --> navigate to where you have the image saved on your computer and select it
- When the picture is inserted, if you click on it, notice that the menu choices at the top of the page are now different than when you click off the image and select text. These choices allow you various options of things to do with the picture.
- Right click on the picture, and in the box for "Description/alt tag" and type in a description of what is in the picture. It is important that you give as complete a description as is necessary so that anyone who has a screen reader (and cannot actually see the picture), has a clear idea of what is in the picture. e.g."Picture of Stacey's parents' cabin).
See example of page with basic components
To publish your page to the web:
- When you are ready to upload your page to the web, click on the "publish" button --> a box will open warning you that visitors will not be able to find your web page until you link to it from another page. It will ask you if you want to publish the page without linking to it. Click "yes."
- A new box opens asking you to give your page a file name. This is the address that browsers need to be able to locate your page. It should be one word with no spaces, lower case, and ends in ".html" (if this is the first web page that you are creating, and your currently do not have a page on your website, you can make this the main page of your site and call it index.html (be sure to have a lower case "i" and not and capital "I" for index.html). Enter this name and then click the "publish" button.
Concepts to understand
- File name always has .html in it
- Title is what is displayed at the top of your web page when it is displayed in a browser
to the Index of How To Guidelines