A Very Short Intro to Dreamweaver

Sample Web Search Activities

1. Creating and Saving a Web Page: Launch Dreamweaver; choose File > New; make sure "General" and not "Templates" is selected at the top, and click "Create"

• [In the "Category" column, "Basic Page" will have been selected for you by default; in the "Basic Page" column, "HTML" will have been selected for you by default].
• [In the LRC, you may simply see a window prompting you to open a new document, in which case you can simply say "OK" to that ]

• Type a title into the document, as you would in Word.
• Also type a title in the "Title" box at the top of the page. This will appear as the title of the window [For this page, I typed "Dreamweaver Intro" into the "Title" box. If you forget this step, your window will be called "Untitled Document."
• Choose File > Save [or just type ⌘S]
  • In the dialog box that appears, name the file "index" [the "i" needs to be lowercase!] [the .html suffix is added by default]
  • For the location to save the file, navigate to the "Desktop" and create a folder named "html."

2. Open your IFS space and drag the image you saved there to prepare for today into this "html" folder.

• If you have multiple images, it's best to create a folder named "Images"

3. Open the biographical paragraph you wrote and copy and paste it into your Dreamweaver document.

4. Creating links; making links open in new windows: Type "Click here to see my favorite link" and select the words "Click here"

• In the "Link" box in the "Properties" window (shown below), paste the URL for your favorite link
• In the "Target" box, type "link." Doing this will make the link open in a new window, whose name is "link."
  • Note: typing nothing in the "Target" box means your link will open in the same window, i.e. will replace your current page - which is often perfectly fine ==> you should decide in general whether you want links to open in new windows [==> type a name in the "Target" box] or in the same window [==> leave the "Target" box blank]
• No one will see the name you give your "target" window, but if you create more links and also type "link" into the target box, they will open in this same window; if you type a different name, they will open in yet another new window.
  • You might want this [i.e. two separate new windows for your links], for example, in a web search activity, so students could have one window open with your instructions and links, one window open with whatever website they're currently being directed to, and another window open with access to an online dictionary.
  • Let's try that: type "Click here to open BEOLINGUS," select "click here," paste the URL http://dict.tu-chemnitz.de/ into the "Link" box, and type "beolingus" into the "Target" box.
• This image of the "Properties" window may help:

5. Formating: Now play with the formating of your text a little bit: select some text, and use the options in the "Properties" window shown above to create some bullets, make some text bold etc.

• Note there's no option for underlining text. You can do this [Text > Style > Underline], but you shouldn't, as web users will think underlined text is a link, and will be irritated when it isn't.
• Note also that there is no option for inserting tabs. To achieve a similar effect, what you would need to do is insert a table [beyond the scope of this very short intro, but if you click Insert > Table, you'll find that this is quite straightforward] with the columns located where you would want tabs. If you want this table to be invisible, just set the "Border thickness" to 0.
• By default, when you hit ENTER the new paragraph starts after a blank line. If you don't want to skip a line between paragraphs, just hit SHIFT + ENTER.

6. Inserting an image: Go to Insert > Image and select the image you'd like to insert.

• You may be prompted to enter an "Alt" tag. This is intended for accessibility for the visually impaired; a person who is "hearing" your webpage will hear the name you give the image here in lieu of seeing the image.
• You'll notice that the "Properties" window looks different when you click on the image:

• Play with options in the "Align" pulldown menu to line up the image relative to your text, and use the icons just above the "Align" pull-down menu to center the image, or left- or right-align it.
• Resize the image by clicking on the lower right hand corner and holding down the SHIFT key while you drag the corner handle to resize the image. Holding down the SHIFT key ensures that the proportions of the image stay unchanged while you resize it.
• Note that while you can resize images in Dreamweaver to see how they'll look on your page, such resized images may load slowly or even incorrectly ==> it's recommended that once you see the size you want the image to have, you resize it outside of Dreamweaver, using e.g. Photoshop or Fireworks, before (re-)inserting it into your page.
• If you find an image you like on the web, an alternative to downloading it yourself and then uploading it to your site is simply to link to it, and provide a source attribution. To do this, right-click on the image and copy its location. Insert a "placeholder" image via "Insert > Image" where you want this image to appear. Click on this image and switch from the "Design" view to the "Code" view at the top of your Dreamweaver window. You will see a highlighted line of code that looks something like <img src="blabla/blabla.jpg" width="834" height="102"/>. Replace the location in quotes after "img src =" by the location you've copied of the image you want, delete any width and height specifications (but not the final ">"), and switch back to the "Design" view. You should now see the image, and can resize it as needed.
  • If the image is copyrighted, this will still be problematic, but if the owner has made it publicly available via a "Creative Commons" license, then this can be a good option.
  • Time permitting, let's practice this by going to Flickr, which is a great place to look for images that people are willing to share under creative commons licence. Search for "Germany," pick an image you like (stay away from the pushpin map, which is problematic), and try inserting it into your page by linking to its location in the above way. Remember to first insert a "placeholder" image on your page where you want this new image to appear, so you have some code you can highlight.

7. Creating a "relative link": Now create another new page and type some text (see (1) above!). Save this page as "page2.html"; make sure you save it to the same folder ["html"] on your desktop where all the other items you've created are. Close this page.

• Go back to the previous page ("index.html") and type: "Click here to see a useless page." Select "Click here" and this time select the folder-icon that appears to the right of the "Link" box. Select the file you just created ("page2.html"), and type "link" in the "Target" box.
• Making your image into a clickable link: Click on the image you inserted to make the "Image" version of the "Properties" window appear. Choose the rectangle selection tool in the lower left corner of the "Properties" window, click on a corner of your image and drag the mouse to select the entire image. You'll now see yet another version of the "Properties" window:

• Click on the folder-icon that appears to the right of the "Link" box [which has an anchor-link symbol [#] in it by default]. As before, select the second file you created ("page2.html") and type "link" in the "Target" box.
• Instead of using the rectangle selection tool to select the entire image, you could also use it or one of the other tools to select parts of the image; each part could go to a different link (or anchor link).

8. Creating an "anchor link": Anchor links take you to a specific part of the same page. For example if you go to the German 101 webpage and click on the homework link, the table at the top of the page uses anchor links to take you to the various months. We'll now create an anchor link for our sample webpage:

At the top of the page, type "Go to my favorite link." Highlight this text and type "#myfav" in the Link box.

• Go to where you typed "Click here to see my favorite link."
• Go to Insert > Named Anchor and type "myfav" in the "Anchor name" box.
• Once the page is online, clicking on "Go to my favorite link" at the top will take you to the "Click here to see my favorite link" part of your page.
• If you have time, practice this some more: insert an anchor before the title, name it "oben," type "Zurück nach oben" at the bottom of the page and type "#oben" in the Anchor name box.

9. Make your page(s) appear on the web:

• First, be sure to click "Save"! The version of your page that you upload will be the latest saved version, so you want to make sure everything you've done actually shows up!
• Open the IFS icon, open the folder "Public" and drag the entire "html" folder from your desktop to this folder. If there's a problem with the IFS icon, follow the instructions below for using MFile [mfile.umich.edu].
  • Note: if you were doing this at home using MFile, you would first use the "Create folder" option in MFile to create a folder in your "Public" directory named "html" [this name is important: this is where browsers will look for webpages]. Then, you would upload the individual files from the "html" folder on your desktop to the "html" folder you created in your "Public" directory.
    • If you had created folders inside the "html" folder on your desktop, then you would, in the same way, "create" these folders inside the "html" folder in your "Public" directory, and then upload their contents individually.
    • It's crucial for the relative locations of all the folders and images to be the same inside the "html" folder in your "Public" directory as they were in the "html" folder you created on your desktop; otherwise, the browser won't be able to find the files/images you're linking to.
    • Note: things will go wrong if you have spaces in the names of your files, folders or anchor links. Use an underscore ["_"] when you're tempted to insert a space. Though it's not essential, it's often recommended to stick to lowercase letters for your web files and folders.
• Open a web browser and type in the following URL:
  • http:///www-personal.umich.edu/~youruniqname [where "youruniqname" is your uniqname ]
• You'll see the "index.html" page you created. Try out the links and see what happens.
• Note that the URL of the "page2.html" file is simply http:///www-personal.umich.edu/~youruniqname/page2.html. This will be the case for all other files you create: only the "index.html" file appears without you having to type its name.
• Note that you can actually just enter the URL http:///www.umich.edu/~youruniqname into your browser, and it will automatically change to http:///www-personal.umich.edu/~youruniqname

10. Changing the encoding When you click "Save," the program may prompt you to change the encoding of your page. This happens if you've inserted certain special characters, for example. To do this, click on "Page Properties" in the "Properties" window (shown above) [or go to Modify > Page Properties]; select "Title/Encoding" from the "Category" options, and then choose the character set the program prompted you to choose when you tried to save [usually UTF-8] from the "Encoding" pull-down menu.

11. Word: Save As Web Page (& more info about File and Folder Structure!)

To create simple webpages without a lot of images or formating, and without any interactivity (other than links), you can use the "Save As Web Page" option in Word. Simply type the text you want into a Word document, and when you're ready, choose the "Save As Web Page" command from the "File" menu to convert your Word document into an html document.

• Use the same rules for "file and folder structure" as for any other html documents: save the folder in the html folder in the Public folder in your IFS space; if you give it the name "index.html," its web address will be http://www.umich-personal.edu/~youruniqname; if you name it e.g. "sample.html," its web address will be http://www.umich-personal.edu/~youruniqname/sample.html, and if you name it sample.html and place it inside a folder named samplefolder, then its web address will be http://www.umich-personal.edu/~youruniqname/samplefolder/sample.html
• To create links in Word documents, you can often simply paste in the link (which Word may convert into a hyperlink by default); if you want the text for the link in your Word document to be something other than the URL it is linking to (e.g. "click here"), then highlight the text you want to link ("click here," for example), go to "Insert Hyperlink" in the "Insert" menu [or simply click ⌘K on a Mac] and then paste the URL in the "Link to" box, or the name of the Anchor in the "Anchor" box.
  • You could still create "relative" links by inserting the relative link in the "Link to" box: e.g. if you're creating the file "sample.html" and you eventually want to link it to another file you're going to create called "file.html," you could simply type "file.html" in the "Link to" box, provided "file.html" will be at the same "level" as "sample.html," i.e. not in a different folder.
    • For the above example, let's say "file.html" is in the folder "A2" and "sample.html" is in the folder "A1." To create a link from "sample.html" to "file.html," you would need to type "../A2/file.html" into the "Link to" box. This means "move up one folder level ["../"], go to the folder "A2" at that level, and then to the file "file.html" in that folder.
• You could try inserting an image in your Word document. In this case the "Save As Web Page" command will generate, in addition to the webpage, a folder with the image(s) that you need to upload to your IFS space along with the webpage.