Introduction to Dreamweaver

From UCSB English Department Knowledge Base

Welcome to the English Department Knowledge Base at the University of California, Santa Barbara.
The EDKB Wiki is a database that makes available the various interests, talents, and resources of the English Department community. See the Main Page to learn more about the EDKB. The wiki does not offer information on current course offerings, nor is it a comprehensive archive of materials related to all past courses. Visit the English Department home page for this type of information.

Contents 1 Hints 2 Basic Skills 2.1 Getting Started by Defining Your Site 2.2 How to Connect to UWeb - FTP 2.3 How to Make a Simple Page 2.4 How to Change Your Background, Font, etc. 2.5 How to Make a Link 2.6 Adding Images 2.7 Saving and Uploading Your Pages 2.8 How to Make Folders and More Pages 3 Intermediate Skills 3.1 Using Templates 3.2 Working with Tables 3.3 Using Layers 3.4 Using Graphics Programs like Fireworks and Photoshop 3.5 Recording Sound Files 3.5.1 To Record a Sound File Through Windows Sound Recorder 3.5.2 To Record a Sound File Through Sound Forge 4 Transforming Word Documents into Web Pages 5 Useful Links & Resources

[edit] Hints

1. Use Dreamweaver's Help Menu to take tutorials and expand your knowledge.
2. Remember to name your homepage index.html or home.html. Your address will then be http://www.uweb.ucsb.edu/~username/
3. Work with subdirectories to organize your pages and your thought.
4. Use Design and Code view to learn a little HTML as you design your pages.
5. Try other software programs. Experiment with color, images, sound, etc.
6. Take advantage of Instructional Computing's workshops to broaden your skills.

[edit] Basic Skills

[edit] Getting Started by Defining Your Site

Dreamweaver is installed on every computer in the Transcriptions Lab as well as on several computers around campus. To find other laboratories with Dreamweaver installed go here.

Everyone who has a umail address has space on the uweb server for a web page. You can browse other students' web pages here.

If you do not already have a umail address you will need to get one by going here. You may also have web space through another Internet Service Provider. If this is the case, you will need to get the pertinent FTP information from them.

We will begin by setting up a site in Dreamweaver. For Dreamweaver, a site is distinct from a web site. A Dreamweaver site is like the box in which you put all of your web sites as well as all of the materials that you use to make them (images, sounds, etc.). Your site also saves the information required to connect to the internet and post your web sites online.

1. To begin setting up your site open Dreamweaver. There are several different versions in the Transcriptions lab, so the interfaces will be slightly different for each. The crucial elements to setting up your site remain the same, however. Some of the Dreamweaver Versions will ask you to click through a series of options, others will require you to select these options from a list on the left side of your dialog box (you will only need to fill out Local Info and Remote Info). In either case, if you make sure that the information below is complete you should be able to set up your site without difficulty.
2. Select either "New Site" or "Define Sites" from the "Site" Menu.
3. You will now have to answer a series of questions in order to enable your site. The most crucial are the FTP settings below, but here, in brief, are some of the other answers you will need.

Name Your Site: You can name the local site (what you have on your computer) anything you want.

Server Technologies: When working on static pages you do not need to enable a server technology.

Editing: You generally want to edit pages locally (on your computer) before uploading them to the remote (the internet).

Local Folder: You can name the local folder (where you save copies of pages) anything you want.

Check In/ Check Out': If several students might be working on the same page at the same time you should enable check-in and check-out to prevent work from being lost. If you know that you will be the only person working on that page you do not need to do so.

A completed Local Info will look like this:

WARNING: The computers in the Transcriptions Lab are unable to serve as storage sites for your incomplete web sites. You are never guaranteed a specific computer, and student folders will be routinely erased from the computers. To prevent losing your work bring either a zip or floppy disk with you or upload pages in progress to the internet (you can download them later and continue your work).

[edit] How to Connect to UWeb - FTP

FTP, or file transfer protocol, is how we can connect to the uweb web site. The following information is crucial:

FTP Hosts: ftp.uweb.ucsb.edu
Folder: uweb
FTP Login: your login (your e-mail name without the @umail.ucsb.edu)
Password: your u-mail password (Note: If you tell Dreamweaver to save your password then anyone logged into the Transcriptions computers will have access to your web site. Be forewarned).

1. Dreamweaver will ask you to select your access type from a drop-down menu. Select FTP and then fill in the fields as below:
2. It is often a good idea to fill in your password and perform a Test before completing your set-up. If you have filled in your information correctly you will receive a pop-up window telling you that Macromedia connected to your server successfully. Then you can erase the password (you will be prompted for it every time you connect) and complete your set up. If you are working at home, feel free to save your password.

Note: Uweb now requires that you use secure FTP, so be sure to check that box.

You are now ready to move on to creating a simple web page.

[edit] How to Make a Simple Page

Once you have set up your site you may create a page.

1. To create the simplest of pages, just go to the file menu and select new. If you are in design view you should see a blank page (under the View Menu you have 3 choices, design, code, and code and design -- We recommend code and design as it allows you to see what the code is doing while you are working).
2. Click on the page and type.

This is a simple page. Everything else, adding colors, images, fancy text, applets, comes after.

Hypothetically, you could upload this page (given the appropriate privileges) and it would be on the web. But, why would you want to upload a dull page?

[edit] How to Change Your Background, Font, etc.

You can begin personalizing your basic page by changing the background color, determining your default font style and color, link style, page name, etc.

1. Right click within the design view and select "Page Properties" from the resulting menu. You can also find "Page Properties" in the "Modify" menu.
2. The page properties window should open.
3. Type a title in the box that says "Title." This will be the title that shows up in the browser frame (Not on the actual page).
4. To change the colors of your background, fonts etc. click on the little grey boxes to the right of the font description. The grey boxes indicate that your page is currently set to the standard default colors (page color white, text color black, links blue, visited links purple). By clicking on the boxes you get a chance to alter these default colors for your page. This window also gives you the option of using a picture as your background.
5. Now once you click Ok these changes should be made to your page. You can choose Apply to preview your changes.

Here is the Page Properties screen for the page you are seeing now:

Remember that these are only the default settings for your page. You can always have a default font color like black, but occasionally spice it up by tossing in a little lime green. You can do that by simply highlighting the text you want to alter (color, font, style, alignment, etc) and clicking on the little grey box in the Properties Window(Generally right below the design window -- if it isn't there open it by selecting "Properties" from the "Window" menu.

The Properties Window allows you to make a variety of changes to individual elements on your page. It also allows you to make links and mailtos, which we will get to in a moment.

As you make changes to your web site you can preview what the actual page will look like by selecting "Preview in Browser" from the "File Menu."

[edit] How to Make a Link

Links are a crucial characteristic of the internet, and enable you to move from one page to others.

To create a link:

1. Highlight the text you would like to be the link in the design view of your page.
2. Type the requested link in the link box in the properties menu.

• A link is written like this: http://www.google.com. Note that there are no spaces and you need to include http://

To link to pages within your own web site there is a shortcut. You highlight the link text as usual, but instead of typing the URL, use the compass tool to "point" to the desired page in your local view, and drag it into the link space. OR, you can simply type the name of the page into the link box.

How to Make a Mailto:

Mailtos are very similar to links, but instead of opening a new page, a mailto opens the local e-mail program and inserts an e-mail address. For example a person clicking on my name Melissa Stevenson would be able to send me an e-mail message.

To create a mailto, just as in creating a link,

1. highlight the text or image you would like to link to the address.
2. Then, as with a link, you will type the requested mailto in the link box in the properties menu.

• A mailto is written like this: mailto:emailname@address. Note that there are no spaces. A mailto for me would read: mailto:melissas@umail.ucsb.edu

[edit] Adding Images

Pages without any images are less compelling than those that incorporate graphics into the general concept of the page.

1. If you already have an image you would like to use, you should place it into your local folder. Remember, you cannot simply use an image that is saved on your desktop or disk; if the image isn't saved in your "root" or local web site folder, it won't be visible on the Internet.
2. At the desired location on your page please select "Image" from the "Insert" menu and choose your image in the resulting pop-up window.
3. Now resize your image and orient it as you like.

You can also make your image into a link by using the page properties menu as above.

[edit] Saving and Uploading Your Pages

Now that you have made a simple web page you are ready to upload it to the internet.

1. First you should save your page. I would suggest naming your home page index.html. It is important that your page have html in the title or it will not function as a web page.
2. Now you have saved the page you need to upload it.
   1. First connect to uweb. You can do this by selecting "Connect" from the "Site" menu or by clicking the connection tool (unconnected it looks like two disconnected plugs, connected, well you get the picture). If you did not save your password when you set up your site, you will be prompted for it now.
      
   2. Once you have successfully connected I suggest you click the simultaneous view tool so you can see what is on your local site (the computer) and remote site (the internet) at the same time.
   3. Now you need to upload your completed web page. to the internet. Right click on the site folder in your local site and select "Synchronize." Synchronizing works by comparing the files on your computer and on the internet. It is safer than "Getting" or "Putting" your files.
   4. Make sure to select the proper direction for synchronization. When you are uploading files you want to "Put Newer Files to Remote."
      
   5. Preview your changes and uncheck those files you do not want uploaded. Click Ok and your files will then be posted to the internet.

Now you can go visit your new web page.!!!

If you named your home page index.html, your address will be as follows: www.uweb.ucsb.edu/~yourlogin

HINT: Synchronize is also how you can download files to your computer in order to continue working with them. Simply change the Direction to "Get Newer Files From Remote."

[edit] How to Make Folders and More Pages

To organize your web site you may want to create several pages in a suite of folders. For example, your homepage might contain links to folders titled courses, personal, or friends.

Generally you want to use folders when you have several pages that fit under a certain theme. You may also use sub-folders. Under courses you might have different folders for each course. If a page is a single page you may decide to keep it under your main folder.

• To create a new folder or page right click on your site folder in the site window and select new folder or new file. Name and position the folders/files as you like.

Each folder introduces a new level to the web address. For instance if you had a page titled home.htlm in your english10 sub-folder within your courses folder its address would be www.uweb.ucsb.edu/~yourlogin/courses/english10/html.com.

[edit] Intermediate Skills

[edit] Using Templates

Templates allow a group of pages to maintain a unified look and feel. They also allow you to implement a change across several pages simply by alter ting the template they share.

1. To create a new template design a web page as above using the template options to designate which areas are to be editable or non-editable. When you are finished with the page you can save it as a template by selecting Save as Template from the Save menu.
2. Templates include both editable and non-editable spaces. In the editable spaces you can add content and relate to the page as you would to any other. Non-editable spaces cannot be changed as they contain information and images that standardize the look and feel of the pages.
3. To use the template when you open a new page, rather than selecting basic html click the Template option and select the correct template.

[edit] Working with Tables

Tables and layers (see below) allow you to have more control over the look and design of your web site

1. To use a table select "Table" from the "Insert" menu.
2. When using tables you have several options you can set: the number of columns and rows, border size and colors (if you want a border at all), background color, overall alignment, alignment within individual cells, etc..
3. You can add cells or merge cells to change the look of your table.

[edit] Using Layers

You can use layers much like tables. They are slightly easier to work with on the design level, but you should generally convert layers to tables before mounting the page to the web.

1. To use a layers select "Layer" from the "Insert" menu.
2. Resize and reposition the layer in any manner you choose.
3. Continue to insert and position layers as you like.
4. Take care not to insert layers within layers. Overlapping layers will not function properly on most web sites.
5. Once you have set your layers as you like select "Convert" -- "Convert Layers to Table" from the "Modify" menu.

Continue to develop your page.

[edit] Using Graphics Programs like Fireworks and Photoshop

A great deal can be done with images using graphics programs like Macromedia's Fireworks or Adobe's Photoshop (consider the Weekly World News -- without Photoshop they would be out of business). You can change the colors in an image, fade an image out, merge two or more images, crop images, animate your graphics or create attractive headings for your pages.

A few of the computers in the lab are equipped with these programs. Fireworks, in particular, includes several helpful tutorials under "Lessons" in their "help" menu that should assist you in learning some basic functions.

[edit] Recording Sound Files

Sound files can be recorded through several different software devices. The most simple to use is the Windows Sound Recorder. Sound Forge from Macromedia allows for more complex recording and editing of sounds.

[edit] To Record a Sound File Through Windows Sound Recorder

1. Make sure that the microphone is properly connected.
2. Turn off all other programs that record or play sound.
3. Open Sound Recorder. On most Windows systems this software can be found under Programs/Accessories/Entertainment/Sound Recorder.
4. Press the red button and speak clearly into the microphone.
5. Press the rectangular stop button to end your recording.
6. To save your recording select Save from the File menu. Generally you will want to save your sound files as .wav files.

You now have a sound file. Select New to create another, or press record again to extend your file.

[edit] To Record a Sound File Through Sound Forge

Sound Forge is a more complex and sophisticated audio software program with the capability to both create and edit sounds. This software is available on several of the computers in the Transcriptions laboratory.

To create a simple recording through Sound Forge take the following steps.

1. Make sure that the microphone is properly connected.
2. Turn off all other programs that record or play sound.
3. Select New from the File Menu. And click Ok in the following dialogue box (for more complicated procedures you may want to alter the default settings, but for a simple recording you may leave them as they are).
4. Click the small round button on the menu bar OR select Transport from the Special Menu and Click Record.
5. The Recording Interface Window will appear. For a simple recording you may leave the default settings as they are.
6. To begin recording click the round grey button. While you are recording a read box reading "recording" will blink beneath the monitor.
7. To stop recording click the square button.
8. Close the Recording Interface Window.

You have now made a simple recording that you can save, add to, or edit. Congratulations!

[edit] Transforming Word Documents into Web Pages

When transforming word documents into web pages, most people attempt to use the cut and paste commands directly from their document into a Dreamweaver web page and are frustrated to find that they have lost all of their formatting (bolds, italics, paragraph breaks, etc.).

Save yourself hours of reformatting by following these simple steps.

1. Save your document as a web page using the Save As option in Word and most other word processing programs.
2. Close the newly saved web page and quit Word.
3. Open Dreamweaver.
4. Now select "Open" from the "File" menu and open your newly saved web document in Dreamweaver.
5. Save your document as a Dreamweaver Web Page.

Most if not all of your formatting should survive this transition. You may decide to use the "Clean up Word HTML" option under the "Modify" menu, but this will occasionally strip your formatting. Remember you can always "Undo."

Once your formatted document has been saved as a Dreamweaver Web Page you can use the old cut and paste commands.

[edit] Useful Links & Resources

• DreamWeaver Tutorial: http://transcriptions.english.ucsb.edu/resources/guides/tech/dreamweaver.asp
• UWeb Home Page: http://www.uweb.ucsb.edu
• Instructional Computing Workshops: http://www.ic.ucsb.edu/students/workshops/
• Further Transcriptions Guides: http://transcriptions.english.ucsb.edu/resources/index.asp#guidesII

--MarthineSatris 15:17, 19 August 2007 (PDT)