| English
165LT Hypertext Fiction and Digital Poetry: Introduction to DreamWeaver |
| Dreamweaver
II : Moving Forward With Design
January 24, 2003 |
| Your RAs This Quarter: Melissa Stevenson Current Office Hours: Jennifer: Michael: |
Welcome
to the Transcriptions Lab!
|
Useful Links & Resources DreamWeaver Tutorial UWeb Home Page Instructional Computing Workshops Further Transcriptions Guides |
|
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. 7. Take advantage of Office Hours!!!
|
|
1. Dreamweaver: How to Connect to the UWeb - FTP. FTP, or file transfer protocol,
is how we can connect to the uweb web site. When setting up a site the above is the most crucial information. Other, less vital, questions will be asked. Here, in brief, are some of the answers. You can name the local site
(what you have on your computer) anything you want. If you name your home page index.html, your address will be as follows: www.uweb.ucsb.edu/~yourlogin |
|
2. Dreamweaver: How to Make a Simple Page Once you have set up your
site you may create a page. 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 -- I recommend code and design as it allows you to see what the code is doing while you are working). 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? |
|
3. Dreamweaver: How to Change Your Background, Font, etc. In your most basic page you can begin by changing the background color, determining your default font style and color, link style, page name, etc. To do this right click within the design view and select "Page Properties" from the resulting menu. The page properties window should open. 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). To change the colors of your fonts etc. click on the little grey boxes to the right of the font description. Now select a new color. This window also gives you the option of using a picture as your background. Now once you click ok these changes should be made to your page. Remember that these are only defaults. You can always have a default font color or black (like on this page), 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, 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. |
|
4. Dreamweaver: 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 highlight the text you would like to be the link in the design view of your page. Type the requested link in the link box in the properties menu. This links to Google. A link is written like this:
http://www.google.com |
|
5. Dreamweaver: 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, highlight the text or image you would like to link to the address. 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 |
|
6. Dreamweaver: 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. |
|
7. Dreamweaver: 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. 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. 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. To use the template when you open a new page, rather than selecting basic html click the template option and select the correct template. |
|
8. Dreamweaver: Working with Tables Tables and layers (see below) allow you to have more control over the look and design of your web site To use a table select "Table" from the "Insert" menu. 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.. You can add cells or merge cells to change the look of your table. |
|
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. To use a layers select "Layer" from the "Insert" menu. Resize and reposition the layer in any manner you choose. Continue to insert and position layers as you like. Take care not to insert layers within layers. Overlapping layers will not function properly on most web sites. Once you have set your layers as you like select "Convert" -- "Convert Layers to Table" from the "Modify" menu. Continue to develop your page. |
|
10. Dreamweaver:Inserting Images and MultiMedia Pages without any images are less compelling than those that incorporate graphics into the general concept of the page. If you already have an image you would like to use, you should place it into your local folder. At the desired location on your page please select "Image" from the "Insert" menu and choose your image in the resulting pop-up window. Now resize your image and orient it as you like. |
|
11. Fireworks / Photoshop: Using Graphics Programs A great deal can be done with images using graphics programs like fireworks or 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. At this point I will pause for specific questions. |
|
12. Recording Sound FilesSound 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. To Record a Sound File Through Windows Sound Recorder:Make sure that the microphone is properly connected. Turn off all other programs that record or play sound. Open Sound Recorder. On most Windows systems this software can be found under Programs/Accessories/Entertainment/Sound Recorder. Press the red button and speak clearly into the microphone. Press the rectangular stop button to end your recording. 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. 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. Make sure that the microphone is properly connected. Turn off all other programs that record or play sound. 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). Click the small round button on the menu bar OR select Transport from the Special Menu and Click Record. The Recording Interface Window will appear. For a simple recording you may leave the default settings as they are. To begin recording click the round grey button. While you are recording a read box reading "recording" will blink beneath the monitor. To stop recording click the square button. Close the Recording Interface Window. You have now made a simple recording that you can save, add to, or edit. Congratulations! |
|
13. Google: Successful Searching Using search engines wisely can help you find appropriate sources of information for research projects, graphics for web development, and new areas of study. Given the size of the internet the problem students most usually encounter is too many sources, rather than too few. But not all sources are equal or equally useful. For the most successful search try using the advanced option for your search. Here you can specify the language your results will be in, their date of creation, etc. You can specify words that must be in your results and words you would like to be there. You can also exclude common red herrings. For example, if I am looking for sources on the mythical bird the Phoenix, I might search for Phoenix and exclude River, Joaquin, Rain, Arizona, etc. You can also search only .edu sites or ask the system to find sites similar to one you have already found useful. To find images use the image search. Here begin your search broadly and then add words as you get your results. Once you find a source it is important to consider the origin of your information. Trace the source to its root. Who publishes this site? Do they have any political interests you can determine? What are the credentials of the source? |
|
| page
created by Melissa Colleen Stevenson 01/24/03 |
|