Department of Instructional Technology and Media Services...

Department of Instructional Technology and Media ServicesWebsupport1 and FTP

Getting Started

1. First the software: Nvu

To download the latest version of Nvu, go to http://www.nvu.com

FileZilla FileZilla is a program to upload the files onto the server. To download FileZilla, go to http://filezilla-project.org/ Choose Download FileZilla Client

2. Create a folder on your hard drive where you will store all the files for your website. Inside that folder create a subdirectory named Images where you will store all the images for your website.

3. Creating a new document with Nvu: Click on the New button on the toolbar.

4. Opening a web page document with Nvu:

Click on the Open button on the toolbar.

Browse for the file, select the file and click Open.

of 13

5. Saving files with Nvu Click on the Save button on the toolbar.

Enter a title for the page and click OK.

Browse to the folder on your hard drive you have created for your website. Type in the File Name of the web page you are saving, the first page or homepage of your website is usually index.html. Click Save.

Note: Nvu saves files as .html

Editing Text

1. Edit text directly on Nvu Editing text with Nvu is similar to editing text on a word processor. On the menu bar select Format. All of the text formatting tools are under this menu

Text can also be edited through the Formatting toolbar Here is a a brief description of the text editing buttons on the toolbar

of 13

Text that is entered after a format is selected should reflect the format chosen. To edit the format of text that has already been entered

A. Select the text to be formatted with the mouse B. Click on the button on the toolbar or select the style from the Format menu

2. Importing a Microsoft Word 2000/2003 document into Nvu A. In the MS Word program, open the Word document and save it as a Web page. Then open the web page in

Nvu. B. Select File => Save As Web Page.

**Note it might be necessary to click on the double arrows on the bottom for Save as Web Page to appear on the menu

Paragraph format

Upper left box changes text color

Lower right box changes background color of the Web page

Highlight text

Changes background color of text.

Decrease font size

Increase font size Bold text

Italicize text Underline text

Bulleted List Numbered List

Outdent text Decreases indent, moves text to the left

Indent text Increases indent, moves text to the right

Align Left Align Center

Align Right Align Justify

of 13

C. Use the Open button in Nvu to open the .html file.

3. Importing a Microsoft Word 2007 document into Nvu A. In the MS Word program, open the Word document and save it as a Web page. Then open the web page in

Nvu. B. Save the Word document as a Web Page

a. Click on the Office Button

b. Choose Save As => Other Formats

c. Type in the name of the file you want to save it as. On the drop down box nex to Save as type

choose Web Page (*.htm; *.html)

C. Use the Open button in Nvu to open the .html file.

4. Importing a portion of a Microsoft Word document into Nvu (copy and paste) A. Open the Word document that is to be imported in Microsoft Word B. Select the text to be imported C. On the menu bar select Edit => Copy

of 13

D. Launch Nvu if it is not opened already E. In Nvu, open the page where the text is being imported to, or create a new Web document F. On the menu bar select Edit => Paste.

G. The text format should appear the same in Nvu as displayed in Microsoft Word

Inserting Images

1. To insert an image, place the cursor where the image is to be inserted and click on the Image icon on the toolbar

2. A window should pop up.

Click Choose File and browse to the image to be inserted. Alternate text is text that will show up for browsers that cannot display images.

Usually alternate text is a brief description of the image.

3. Resizing Images

It is better to resize images with Adobe Photoshop or Microsoft Office Picture Manager which comes with Microsoft Office.

of 13

If you resize in Nvu go under Dimensions. Click Custom Size, check Constrain if you want the image to be proportional to the original size. Type the size in pixels

You can also click on an image and drag it to resize it

A. Click on the image. You should see white handles around the image. B. With your mouse, click on a white handle. The handle will turn black. Drag to resize the image. Nvu

will show an outline of what the image will look like after it is resized.

4. Aligning the image

To align the image click on the Appearance Tab To add space around the image, enter the desired width of the spacing in Left and Right, and/or Top and Bottom. To add a solid border around the image enter the desired width of the border To align text, select the desired alignment from the drop down arrow.

of 13

5. Linking the Image

On the Link tab, click Choose File. Select the file to be linked to the image. It is a good idea to check URL is relative to page location if the file to be linked is local. This way, if the web address is changed, the link will not have to be edited.

6. After choosing all the settings, click OK and the image is inserted.

Creating Links 1. To create links, click on the Links button on the toolbar

2. In the Link Properties window that pops up

A. Type in the text that is to be linked under Link Text B. Enter the URL of the link

If the file you are linking to is in the same directory or in a subdirectory as the current Web document, click Choose File under Link Location If the file you are linking to is an external file, enter the full URL (for example: http://www.yahoo.com) under Link Location

of 13

3. Click OK 4. To test the link:

A. Save the file B. Click the Browse button on the toolbar

C. Your default browser (Internet Explorer or FireFox) will open the page you have just saved D. Click on the link you created to see if it works

Uploading Files

There are two ways you can upload files, Nvu or FileZilla

1. Using Nvu (for single files only) A. Click Edit Sites under Nvu Site Manager on the left-hand side of the screen. If you don't see Nvu Site

Manager on the left hand side of the screen; go to Edit => Publishing Site Settings.

B. The Publish Settings window should open. You should have already received the info for this page.

a. Type in a Site name b. Type in the HTTP address of your homepage

http://websupport1.citytech.cuny.edu/Faculty/your_username

of 13

c. Type in the Publishing address ftp://websupport1.citytech.cuny.edu

d. Enter your username and password. e. Check the Save Password box and click OK.

C. Open the file to be uploaded D. Click Publish on the toolbar

E. Under the Settings tab type in:

Site Name (whatever you want to name the site) Publishing Address, type: ftp://websupport1.citytech.cuny.edu HTTP address of your homepage, type: http://websupport1.citytech.cuny.edu/Faculty/your_username Under Login Information type your user id for User name and your assigned password

F. The Publish tab info should automatically enter. If not, then do the following:

Site Name should be filled out. If the site is not listed click New Site and follow the instructions above The Page Title - the title the page is named The Filename should already be filled in. Verify that it is the correct file name If the page is to be saved in a subdirectory, then enter the subdirectory name under Site subdirectory for the page; otherwise, leave it blank Make sure Include images and other files is checked if you have images Select Use same location as page if the images are in the same directory as the web page;

of 13

otherwise, select Use this site subdirectory and type in the directory where the images are located

G. Click Publish. The file and any attached images will be uploaded

Alternate FTP

1. Using FileZilla (for single or multiple files) A. Launch FileZilla B. Next to Host on the toolbar type websupport1.citytech.cuny.edu

Next to Username type in your username Next to Password type in your password Next to Port type in 21 Click Quickconnect

a. Unless the Quickconnect history has been cleared, you should be able to click on the dropdown arrow the next time you launch FileZilla and see your account info.

C. On the right of the screen are the files from the local directory D. On the left of the screen are the files from the Web server

of 13

E. To upload files, select the Local site files and/or folders to be uploaded, right-click and select upload.

F. You can also drag the files and/or folders from the local site to the remote site. G. To download files, select the Remote Site files and/or folders to be downloaded, right-click and select

download

H. If the computer you are using FileZilla on is a public computer, you should clear the quickconnect history bar

by clicking on the drop down arrow => Clear history. I. Exit FileZilla

Zipping Files for Blackboard

1. First you will need WinZip. Go to http://www.WinZip.com to download the latest evaluation copy of WinZip 2. After WinZip is installed, go to the folder where your webpages are located 3. Select all the files to be uploaded onto Blackboard

A. To select multiple files hold down the ctrl key on the keyboard while clicking on the files and folders with the mouse

4. While the files are selected right-click with the mouse 5. A menu should pop up, select WinZip => Add to Zip file

of 13

6. Under Add to archive: click the New button

7. Browse to the location you want to save the file.

8. Enter the file name and click OK 9. Click Add

10. A zip file should be saved to the directory you specified 11. Log in to Blackboard 12. Go to the Control Panel of the course the zip file is to be uploaded to 13. Click on Course Documents, or wherever you want the file to be uploaded 14. Click on Add Item 15. Under Content Information - optional

Type the name you want the heading of the Webpage to be for specify your own name Type in a brief description under Text

of 13

16. Under Content Attachment Click Browse and select the zip file you just saved Enter a name you want your page to be linked as or leave blank to use the file name of the zipped file For Special Action choose Unpackage this File by using the drop down arrow

17. Under Options

Select the times you want the files to be visible 18. Click Submit 19. Under Entry Point click on the file you want the link to open to first, usually it is index.html

20. Click Submit 21. Now if you go into Course Documents or whichever folder the file was saved to and look for the link, the web page

should appear

of 13

Department of Instructional Technology and Media Services...

Documents

Transcript of Department of Instructional Technology and Media Services...