You are on page 1of 42

Professional Development Credit Information for Adobe Contribute 4

Adobe Contribute 4 Tutorial Create Your Own Webpage

Participants will: 1. 2. 3. 4. Learn a fundamental understanding of the main interface Demonstrate how to edit using the interface Demonstrate the ability to connect to the web server Create a new web page, including adding content to that page through inserting text and an image 5. Publish their page to the web 6. Create a link to their page Participants will, upon successful completion of the tutorial and creation of a webpage, earn a certificate for 10 professional development points in the content area of Instructional Technology – Web design from Wareham Public Schools. Click here to begin the tutorial

file:///Z|/proto/district/tutorial/tutorial_00.html3/6/2007 5:16:45 AM

Introduction

Adobe Contribute 4 Tutorial 1. Introduction

Q: What is Adobe Contribute and why are we using it? A: Adobe Contribute 4 is a program designed with one purpose in mind: to allow multiple people to easily create and edit web pages. Simply put, Adobe Contribute is a web browser (a version of Internet Explorer) with a built-in "What You See Is What You Get" editor (much like Microsoft Word). Most people are familiar with creating and editing Word documents, changing fonts, adding images, that sort of thing. Adobe Contribute makes editing web pages that easy. Now that you have the "what", here's the "why". For the last couple of years, most of our district and school web pages have gone stale. They were created a long time ago and haven't been updated with new information since. This is a waste of an extremely useful resource and with the combined effort of key people from around the district, it is our goal is to have everyone pitch in and keep our brand new website alive and full of current information. Our school district deserves to be represented with a professional-looking website and we need your help to see that through (and to sustain it!) Now that you know the plan, let's get acquainted with the program's interface Click here to download a .pdf version of this tutorial Click here to view the Professional Development credit information

© 2007 Wareham Public Schools

file:///Z|/proto/district/tutorial/tutorial_01.html3/6/2007 5:16:45 AM

Main Program Interface

Adobe Contribute 4 Tutorial 2. Main Page Interface

© 2007 Wareham Public Schools

file:///Z|/proto/district/tutorial/tutorial_02.html3/1/2007 6:50:19 AM

Page Editor Interface

Adobe Contribute 4 Tutorial 3. Page Editor Interface

Now that you're familiar with the interface, let's get started by connecting to the web server

© 2007 Wareham Public Schools

file:///Z|/proto/district/tutorial/tutorial_03.html3/1/2007 6:50:20 AM

Connecting to the web server

Adobe Contribute 4 Tutorial 4. Connecting to the web server

1. Make sure Adobe Contribute 4 is already installed on your computer (If not, please contact your building web tech for assistance) 2. Click here to download your Tutorial Connection Key 3. When the dialogue box appears, select OPEN or OPEN WITH CONTRIBUTE (Please do not save the key locally) 4. When Contribute launches, you will see a screen called "Import Connection Key". Enter your name, e-mail address and connection key password (the password is 1234567). Click here to see a screenshot of this dialog box 5. Once this information is correctly entered, click OK and the main district page will load up within Contribute

Now you're ready to create your first web page

© 2007 Wareham Public Schools

file:///Z|/proto/district/tutorial/tutorial_04.html3/1/2007 6:50:20 AM

Creating a new web page

Adobe Contribute 4 Tutorial 5. Creating a new web page

1. Click the "New..." button in the upper left corner

2. Highlight "template_tutorial" beneath the Templates folder

3. In the Page title box in the lower righthand corner, enter a title for your web page (Make it your first and last name) 4. Click OK

file:///Z|/proto/district/tutorial/tutorial_05.html (1 of 2)3/1/2007 6:50:21 AM

Adding content to your web page

Adobe Contribute 4 Tutorial 6. Adding content to your web page

1. Highlight the header text (Enter Your Page Title Here) and type your first and last name

2. Click within the first row of the table below the header and type some text

file:///Z|/proto/district/tutorial/tutorial_06.html (1 of 5)3/1/2007 6:50:23 AM

Adding content to your web page

3. Highlight the text and click the Text Color button in the toolbar

4. Hover over the color you'd like to use and click on it

file:///Z|/proto/district/tutorial/tutorial_06.html (2 of 5)3/1/2007 6:50:23 AM

Adding content to your web page

5. Click the Bold button in the toolbar

file:///Z|/proto/district/tutorial/tutorial_06.html (3 of 5)3/1/2007 6:50:23 AM

Adding content to your web page

6. Click anywhere in the middle of your sentence and click the Center text button

file:///Z|/proto/district/tutorial/tutorial_06.html (4 of 5)3/1/2007 6:50:23 AM

Adding content to your web page

Sweet! Now let's try inserting an image...

© 2007 Wareham Public Schools

file:///Z|/proto/district/tutorial/tutorial_06.html (5 of 5)3/1/2007 6:50:23 AM

Inserting an image

Adobe Contribute 4 Tutorial 7. Inserting an image

1. Click within the second row of the table 2. Click the Insert Image button in the toolbar

3. Select "From Website..."

4. Highlight the folder "http://www.warehamps.org/proto/district/tutorial" and click OPEN

5. Highlight the folder "images" and click OPEN

file:///Z|/proto/district/tutorial/tutorial_07.html (1 of 3)3/1/2007 6:50:24 AM

Inserting an image

6. Highlight "tux.jpg" and click OK

7. Click the Center Text button to center the picture

8. Your page should now look something like this:

file:///Z|/proto/district/tutorial/tutorial_07.html (2 of 3)3/1/2007 6:50:24 AM

Inserting an image

Alright, let's get this page published!

© 2007 Wareham Public Schools

file:///Z|/proto/district/tutorial/tutorial_07.html (3 of 3)3/1/2007 6:50:24 AM

Publishing to the web

Adobe Contribute 4 Tutorial 8. Publishing to the web

1. Click the Publish button in the toolbar

2. You will see a window indicating that progress of your upload:

3. Next, you will see a dialog box explaining that you will not be able to find your new page until you add a link to it on an existing page. Click YES

4. Make sure your filename is "FirstnameLastname.html" (i.e. NikOutchcunis.html) and click PUBLISH

file:///Z|/proto/district/tutorial/tutorial_08.html (1 of 2)3/1/2007 6:50:24 AM

Publishing to the web

5. Once the page has been successfully uploaded, you will see a Congratulations! dialog box. Click OK

Your web page will now load up in Contribute's main browser window. What you're looking at is now live on the web! Congratulations, you've created and published your first page using Adobe Contribute 4. But we're not done yet! Although your web page currently exists on the internet, no one will be able to find it yet. We need to create a link to your new page off an existing page. Let's do that next.

© 2007 Wareham Public Schools

file:///Z|/proto/district/tutorial/tutorial_08.html (2 of 2)3/1/2007 6:50:24 AM

Creating a link to your web page

Adobe Contribute 4 Tutorial 9. Creating a link to your web page

1. Copy and paste this URL into Contribute's Address bar and hit ENTER: http://www.warehamps.org/proto/district/tutorial/linkspage.html

2. Click the Edit Page button in the toolbar

3. Click within the first available row of the existing table 4. Type your first and last name 5. Highlight your entire name and click the Link button in the toolbar

file:///Z|/proto/district/tutorial/tutorial_09.html (1 of 6)3/1/2007 6:50:27 AM

Creating a link to your web page

6. Click "Browse to a Web Page..."

7. Click the "Choose..." button

file:///Z|/proto/district/tutorial/tutorial_09.html (2 of 6)3/1/2007 6:50:27 AM

Creating a link to your web page

8. Select the folder "http://www.warehamps.org/proto/district/" and click OPEN

9. Select the folder named "tutorial" and click OPEN

file:///Z|/proto/district/tutorial/tutorial_09.html (3 of 6)3/1/2007 6:50:27 AM

Creating a link to your web page

10. Select your "FirstnameLastname.html" page and click OK

11. You should now see a preview of the web page you are linking to in Preview box. If this is indeed your web page, click OK

file:///Z|/proto/district/tutorial/tutorial_09.html (4 of 6)3/1/2007 6:50:27 AM

Creating a link to your web page

12. You have successfully created a link! Good job.

file:///Z|/proto/district/tutorial/tutorial_09.html (5 of 6)3/1/2007 6:50:27 AM

Creating a link to your web page

13. To publish your changes to the web, click the Publish button in the toolbar

And those are the basics! You've learned how to create a new web page, add content, insert images, add links and publish to the web. For more detailed information, please refer to the built-in HowTo Section at the bottom left-hand window of Contribute. To begin working on the official new site, a connection key will be required for your specific school or department. This key can obtained directly from the webmaster upon approval of your department or school administrator. All keys have specific passwords, and will be provided by the District Webmaster, Nik Outchcunis (nik@wareham.k12.ma.us). Guidelines and Usage Policy for using Contribute are outlined at the following location: http://www.warehamps.org/proto/district/contribute/policy.html This should be read and understood before using Contribute. Thanks and have fun!

© 2007 Wareham Public Schools

file:///Z|/proto/district/tutorial/tutorial_09.html (6 of 6)3/1/2007 6:50:27 AM

Main Program Interface

Adobe Contribute 4 Tutorial 2. Main Page Interface

© 2007 Wareham Public Schools

file:///Z|/proto/district/tutorial/tutorial_02.html3/6/2007 5:16:52 AM

Page Editor Interface

Adobe Contribute 4 Tutorial 3. Page Editor Interface

Now that you're familiar with the interface, let's get started by connecting to the web server

© 2007 Wareham Public Schools

file:///Z|/proto/district/tutorial/tutorial_03.html3/6/2007 5:16:53 AM

Connecting to the web server

Adobe Contribute 4 Tutorial 4. Connecting to the web server

1. Make sure Adobe Contribute 4 is already installed on your computer (If not, please contact your building web tech for assistance) 2. Click here to download your Tutorial Connection Key 3. When the dialogue box appears, select OPEN or OPEN WITH CONTRIBUTE (Please do not save the key locally) 4. When Contribute launches, you will see a screen called "Import Connection Key". Enter your name, e-mail address and connection key password (the password is 1234567). Click here to see a screenshot of this dialog box 5. Once this information is correctly entered, click OK and the main district page will load up within Contribute

Now you're ready to create your first web page

© 2007 Wareham Public Schools

file:///Z|/proto/district/tutorial/tutorial_04.html3/6/2007 5:16:53 AM

Creating a new web page

Adobe Contribute 4 Tutorial 5. Creating a new web page

1. Click the "New..." button in the upper left corner

2. Highlight "template_tutorial" beneath the Templates folder

3. In the Page title box in the lower righthand corner, enter a title for your web page (Make it your first and last name) 4. Click OK

file:///Z|/proto/district/tutorial/tutorial_05.html (1 of 2)3/6/2007 5:16:54 AM

Adding content to your web page

Adobe Contribute 4 Tutorial 6. Adding content to your web page

1. Highlight the header text (Enter Your Page Title Here) and type your first and last name

2. Click within the first row of the table below the header and type some text

file:///Z|/proto/district/tutorial/tutorial_06.html (1 of 5)3/6/2007 5:16:56 AM

Adding content to your web page

3. Highlight the text and click the Text Color button in the toolbar

4. Hover over the color you'd like to use and click on it

file:///Z|/proto/district/tutorial/tutorial_06.html (2 of 5)3/6/2007 5:16:56 AM

Adding content to your web page

5. Click the Bold button in the toolbar

file:///Z|/proto/district/tutorial/tutorial_06.html (3 of 5)3/6/2007 5:16:56 AM

Adding content to your web page

6. Click anywhere in the middle of your sentence and click the Center text button

file:///Z|/proto/district/tutorial/tutorial_06.html (4 of 5)3/6/2007 5:16:56 AM

Adding content to your web page

Sweet! Now let's try inserting an image...

© 2007 Wareham Public Schools

file:///Z|/proto/district/tutorial/tutorial_06.html (5 of 5)3/6/2007 5:16:56 AM

Inserting an image

Adobe Contribute 4 Tutorial 7. Inserting an image

1. Click within the second row of the table 2. Click the Insert Image button in the toolbar

3. Select "From Website..."

4. Highlight the folder "http://www.warehamps.org/proto/district/tutorial" and click OPEN

5. Highlight the folder "images" and click OPEN

file:///Z|/proto/district/tutorial/tutorial_07.html (1 of 3)3/6/2007 5:16:57 AM

Inserting an image

6. Highlight "tux.jpg" and click OK

7. Click the Center Text button to center the picture

8. Your page should now look something like this:

file:///Z|/proto/district/tutorial/tutorial_07.html (2 of 3)3/6/2007 5:16:57 AM

Inserting an image

Alright, let's get this page published!

© 2007 Wareham Public Schools

file:///Z|/proto/district/tutorial/tutorial_07.html (3 of 3)3/6/2007 5:16:57 AM

Publishing to the web

Adobe Contribute 4 Tutorial 8. Publishing to the web

1. Click the Publish button in the toolbar

2. You will see a window indicating that progress of your upload:

3. Next, you will see a dialog box explaining that you will not be able to find your new page until you add a link to it on an existing page. Click YES

4. Make sure your filename is "FirstnameLastname.html" (i.e. NikOutchcunis.html) and click PUBLISH

file:///Z|/proto/district/tutorial/tutorial_08.html (1 of 2)3/6/2007 5:16:57 AM

Publishing to the web

5. Once the page has been successfully uploaded, you will see a Congratulations! dialog box. Click OK

Your web page will now load up in Contribute's main browser window. What you're looking at is now live on the web! Congratulations, you've created and published your first page using Adobe Contribute 4. But we're not done yet! Although your web page currently exists on the internet, no one will be able to find it yet. We need to create a link to your new page off an existing page. Let's do that next.

© 2007 Wareham Public Schools

file:///Z|/proto/district/tutorial/tutorial_08.html (2 of 2)3/6/2007 5:16:57 AM

Creating a link to your web page

Adobe Contribute 4 Tutorial 9. Creating a link to your web page

1. Copy and paste this URL into Contribute's Address bar and hit ENTER: http://www.warehamps.org/proto/district/tutorial/linkspage.html

2. Click the Edit Page button in the toolbar

3. Click within the first available row of the existing table 4. Type your first and last name 5. Highlight your entire name and click the Link button in the toolbar

file:///Z|/proto/district/tutorial/tutorial_09.html (1 of 6)3/6/2007 5:17:00 AM

Creating a link to your web page

6. Click "Browse to a Web Page..."

7. Click the "Choose..." button

file:///Z|/proto/district/tutorial/tutorial_09.html (2 of 6)3/6/2007 5:17:00 AM

Creating a link to your web page

8. Select the folder "http://www.warehamps.org/proto/district/" and click OPEN

9. Select the folder named "tutorial" and click OPEN

file:///Z|/proto/district/tutorial/tutorial_09.html (3 of 6)3/6/2007 5:17:00 AM

Creating a link to your web page

10. Select your "FirstnameLastname.html" page and click OK

11. You should now see a preview of the web page you are linking to in Preview box. If this is indeed your web page, click OK

file:///Z|/proto/district/tutorial/tutorial_09.html (4 of 6)3/6/2007 5:17:00 AM

Creating a link to your web page

12. You have successfully created a link! Good job.

file:///Z|/proto/district/tutorial/tutorial_09.html (5 of 6)3/6/2007 5:17:00 AM

Creating a link to your web page

13. To publish your changes to the web, click the Publish button in the toolbar

And those are the basics! You've learned how to create a new web page, add content, insert images, add links and publish to the web. For more detailed information, please refer to the built-in HowTo Section at the bottom left-hand window of Contribute. To begin working on the official new site, a connection key will be required for your specific school or department. This key can obtained directly from the webmaster upon approval of your department or school administrator. All keys have specific passwords, and will be provided by the District Webmaster, Nik Outchcunis (nik@wareham.k12.ma.us). Guidelines and Usage Policy for using Contribute are outlined at the following location: http://www.warehamps.org/proto/district/contribute/policy.html This should be read and understood before using Contribute. Thanks and have fun!

© 2007 Wareham Public Schools

file:///Z|/proto/district/tutorial/tutorial_09.html (6 of 6)3/6/2007 5:17:00 AM