Updating MCD Webpages

UPDATING

MCD INTERNET

AND

INTRANET

WEBPAGES

Created by: Quenton Linyear (MCD-CRPSB) Barbara Wongus (MCD-CRPSB)

Disclaimer and Notes

The following documents will assist you in updating MCD’s Internet and Intranet webpages. The software applications used are Macromedia Dreamweaver MX and ReflectionX 13.01. This is not intended to be a complete and exhaustive explanation of these applications, but rather a brief explanation of many of the common tasks that you will perform. This guide assumes that you have all necessary rights, permissions, and passwords; if not contact your supervisor. Please be aware that as you start to update webpages, file names and file locations may be different from the examples that are used. It is a good idea to get familiar with the website filenames and the folder directory structure on the M drive where the webpages are stored (see Section A) (e.g. knowing the filename of the organization chart, knowing the location of the team minutes folder, etc)

TABLE OF CONTENTS

Introduction Pages

Section A:Reflection FTP Client Introduction 4 Section B:Dreamweaver MX Introduction 8

Updating MCD Internet Webpages Section C: Updating the MCD Internet Homepage 9 Section D: Uploading MCD Internet Webpages 12 Updating MCD Intranet Webpages Section E: Updating Charters on the Econ. Census Webpage 13 Section F: Updating the Roster on the MCD Organization Chart 16 Section G: Posting Minutes on the MCD Photo Webpage 19 Section H: Changing Pictures on the MCD Photo Webpage 23 Section I: Uploading MCD Intranet Webpages 30

Section A-Reflection FTP Client Introduction

Version 1-March 16, 2007

Objective: To introduce the Reflection FTP client, which is the application that is used to update webpages

1. Double-click on RefectionX13.01 from the Novell application window. 2. Double-click on FTP Client To access the Intranet pages click cww.census.gov then Connect.

3. Type your password.



4. This side is the MCD M drive where the MCD Intranet webpages are stored. This is where changes to the webpage are made. The full path is M:\MCD INTERNET\intra\.

5. This side is the web server where the webpages are accessed. Whenever someone

is accessing the intranet using Internet Explorer or Mozilla Firefox they are viewing files stored on the web server.

Explanation on how to upload the webpages will be covered in Section I



To access the Internet pages, click stage.census.gov then Connect.

1. Type your password.



2. This side is the MCD M drive where the MCD Internet webpages are stored. This is where changes to the webpage are made. The full path is M:\MCD INTERNET\MCD\.

3. This side is the web server where the MCD Internet webpages are accessed.

Whenever someone is accessing the MCD Internet pages using Internet Explorer or Mozilla Firefox they are viewing files stored on the web server.

Explanation on how to upload the webpages will be covered in Section D

Version 1- March 16, 2007

Section B-Dreamweaver MX Introduction Objective: To introduce the Dreamweaver MX workspace and become familiar with the interface and layout. This is not meant to be an exhaustive explanation.

File Bar-contains the File, Edit, View, etc menus File Panel-lists the webpage files, images, and linked pdfs. These files are stored on the MCD M drive

Property Inspector-area where text and images can be formatted, links to another page or file are also created here

Document Window-displays the current webpage, all page editing is done within the document window

Section C-Updating The MCD Internet Home Page


Objectives-1) Illustrate how to edit text on a webpage 2) Illustrate how to link a line of text to another webpage Scenario-John Howard, Branch Chief from the M3 branch has a new press release. He wants you to change the date of M3 Regular to 3/26 on the MCD Internet Home Page. Also, John wants you to link the new webpage that contains the press release. 1. Open Dreamweaver. In the Files Panel double-click the webpage on which you will change the text. In our example, it is under MCD Internet in Files Panel and it has the file name of index.html. See picture below. The index.html file should appear in the document window.



2. Single-click after the last number in the M3 Regular row. (In our example it is

the number “2”.) Back space 3 times and type in the desired date. See image below.

Single-click and backspace here.



3. Next highlight the text that we want to link. In our example it is M3 Regular. Single-click on the circle beside Link in the Properties window and drag and point to the webpage file that you want to link in the files panel. (If you do not know where the webpage is you may have to ask, in our example we are assuming that the webpage is the bench.htm file which is in the MCD Internet/M3 folder) See image below.

4. Save the index.html file. Click to the menu bar and select File-Save. Go to Section D on how to upload MCD Internet webpages.

Highlight here

Here is the circle. Click and drag to the desired file here.


Section D -Uploading Webpages : Internet Objective-Illustrate how to upload a file on the MCD Internet page

1. Open Reflection if it is not open. See Section A for more info. 2. Navigate to the M drive side (on the left) to find the file that you want to upload.

For this example let’s assume it is the index.htm file.

3. Navigate to the web server side (on the right) to the desired location. The two sides should have similar files and folders.

4. Single-click the desired webpage file on the M drive side. Drag the file to the

web server side. 5. Single-click the syncit file on the M drive side. Drag the file to the web server

side. 6. The new and updated page should be visible on the MCD Internet page.

Click and drag

Click and drag

Section E-Updating The Charters on the Economic Census Page

Version 1 – March 16, 2007

Objective-Illustrate how to link a line of text to a PDF file Scenario-John Hines, leader for the Edit Team wants to link the charter to the 2007 Economic Census team page. He emails you a PDF file of the charter.

1. From Lotus Notes, drag the pdf file unto your desktop. 2. You may have to rename the file. You can rename by right clicking on the

desired file and selecting Rename. Type in the desired file name. 3. Open the Reflection FTP client (see Section A) and access the Intranet files

4. Navigate (on the M drive side) to the desired location where the pdf file will be

saved. In our scenario it is M:\MCD INTERNET\intra\census\07\teams\charters.

5. Drag the file from the desktop into the desired location in Reflection. See image below. After you drag the file you can minimize Reflection.

Click and drag into here



6. Open Dreamweaver. Using the Files Panel, double-click on the desired webpage. In our example, it is the index.htm located in MCD Intranet\census\07\. See the image below. The page should appear in the Document Window.

7. Navigate to the folder on the Files Panel that has the desired file. It our example we are linking the charter file which is in MCD Intranet\census\07\teams\charters. See the image above.

Here is the index.htm file

Here is the charters folder



8. Highlight the text that we are trying to link. In our example, it is Charter under

Edit. Click on the circle beside Link in the Properties Inspector window and drag and point to the pdf file that you want to link in the Files Panel. See image below.

9. Save the index.htm file. Click to the menu bar and select File-Save. Go to Section I for instructions on uploading webpages.

Highlight this link

Here is the circle mentioned above.

Section F-Updating The Branch Roster on The MCD Organization Chart


Objective-Illustrate how to link a graphic object to a PDF file Scenario-Mary Smith, the secretary from the Construction Expenditures Branch has updated its roster. She has created a PDF file of her new roster and has emailed it to you. Mary wants you to update the link from the MCD organization chart.

1. From Lotus Notes, drag the pdf file unto your desktop. 2. You may have to rename the file. You can rename by right-clicking on the



saved. In our scenario it is M:\MCD INTERNET\intra\org

5. Drag the file from the desktop into the desired location in Reflection. See image below. After you drag the file you can minimize Reflections.




6. Open Dreamweaver. Using the Files Panel double-click on the desired webpage. In our example, it is the mcdorg.html file located in MCD Intranet\intra\. See image below. The page should appear in the Document Window.

7. Navigate to the folder on the Files Panel that has the desired file. It our example we are linking the Construction Expenditures Branch roster file which is in the \\MCD Intranet\org folder.



8. Single-click on the graphic that we are trying to link. In our example, it is the

Construction Expenditures Branch rectangle. Single-click on the circle beside Link in the Property Inspector and drag and point to the pdf file that you want to link in the Files Panel. See image below.

9. Save the mcdorg.html file. Click to the menu bar and select File-Save. Go to Section I on uploading webpages.

Single-click this rectangle

Here is the circle mentioned above.

Section G-Posting Minutes On The Economic Census Webpage


Objective-Illustrate how to link a drop-down box to a PDF file Scenario- Lisa Webb, the team lead for the Edit Team wants you to post the last meeting’s minutes on the MCD Team Intranet site. She emails you the minutes.

1. From Lotus Notes, drag the pdf file unto your desktop. 2. You may have to rename the file. You can rename by right-clicking on the



saved. In our scenario it is M:\MCD INTERNET\intra\census\07\teams\minutes.

5. Drag the file from the desktop into the desired location in Reflection. (For our example the file is named edit-recent.pdf.) See image below. After you drag the file you can minimize Reflections.




6. Open Dreamweaver. 7. Go to the Files Panel and double-click on the desired webpage. (see below) In our example it is the index.htm page in the MCD Intranet folder that is located in MCD Internet\intra\census\07. The page should open in the Document Window.



8. Next go to the Menu Bar and select View and then Code and Design. You may want to adjust the window of the code and design areas. You may also scroll up or down in the window of the code and design areas. See image below.

Code area

Design area Adjust the size of the windows of these 2 areas (code area, design area) by dragging up or down here



9. Scroll up or down until in the Code area until you see the desired area. In our example, we are looking in the Edit Team area. Click once after the ”. Backspace and erase edits-last.pdf. Type in edit-recent.pdf (which is the name of the file that we want to link to in our example).

10. Save the index.html file. Click to the menu bar and select File-Save. You may go to the Menu Bar and select View and then Design in order to bring the Document Window to a normal view. You can go to Section I on how to upload MCD Intranet webpages.

Edit Team area is hereClick and backspace here

Section H-Changing Pictures On The MCD Photo Webpage


Objectives-1) Explain what a table, row, and column in Dreamweaver 2) Illustrate how to add a column to a row. 3) Illustrate how to insert a picture 4) Illustrate how to resize a picture 5) Illustrate how to resize a column 6) Show how to preview a Dreamweaver page in Internet Explorer before uploading the page to the web server. Scenario-Anne Davis, Branch Chief from the Construction and Minerals Branch has a new employee. She wants you to add the picture of the new employee to their branch photo page. The picture of the employee has been taken and it is on the M drive.

All of these rows and columns are considered a table.

We need to add a column here to insert the new employee



1. Open Dreamweaver. Using the Files Panel double-click on the desired webpage. 2. Click on the row that will have the new cell. In our example we want to add a

2nd column to this row. Type 2 in “Cols” in the Property Inspector and press Enter. See image below.

Type 2 here. Press Enter.

You should see a black outline after you click on the cell



3. Resize the new column to make it a little longer than needed. (We will adjust later). See image below.

Drag to adjust the new column here.



4. Highlight some name text (located underneath a picture) and go to the Edit Menu and select Copy. Any name that you select is ok. See image below.

Highlight and select Edit then Copy



5. Find the desired picture and drag into the new column. For our example the

pictures are in MCD Intranet/Org/newfolder.

6. The picture will be very large. Click on the big picture and adjust to 160 for W and 203 for H in the Property Inspector.

Click and drag here

Type 160 here Type 203 here



7. You may have to scroll up to see the picture. The picture should be smaller. Click after once after the new picture. Press Enter.

8. Select Edit menu and select Paste. The webpage should look similar to the image below.

Click here. Press Enter.



9. Erase the name that you pasted in and type the appropriate name.

10. Click once on the row (It should still be big). Go to Modify menu, select Table, and select Clear Cell Heights. Scroll up. The cell should be a more reasonable size now.

11. Adjust the new cell to match other column widths.

12. Align center the new text using the Property Inspector.

13. Save the page.

14. You may preview the page in Internet Explorer before uploading the page by pressing the F12 key. (It may take a few seconds for the page to load in Internet Explorer)

15. Go to Section I for instructions on uploading Intranet webpages.

Click here to center align text


Section I-Uploading Webpages : Intranet Objective-Illustrate how to upload a file on the Intranet site

1. Open Reflections if it is not open. See Section A for more info. 2. Navigate to the M drive side (on the left) to find the file that you want to upload.

For this example let’s assume it is the index.htm file.

3. Navigate to the web server side (on the right) to the desired location. The two sides should have similar files and folders. 4. Single click the desired file on the M drive side. Drag the file to the web server side. 5. The new and updated page should be visible on the Intranet.

Click and drag

INDEX Dreamweaver MX introduction, 8 Editing text, 10 Inserting Pictures, 27 Column to a row, 24 Linking Drop-down box to PDF file, 19-22 Graphic to PDF files, 16-18 Text to another webpage, 11 Previewing in Internet Explorer, 29 Reflection FTP client Introduction-Internet, 6-7 Introduction-Intranet, 4-5 Resizing Pictures, 27 Columns, 25 Update MCD Internet webpage, 12 MCD Intranet webpage, 30

Updating MCD Webpages

Documents

Transcript of Updating MCD Webpages