Setting up the Site
Text and Page Properties
Links, Editing HTML, and Images

DREAMWEAVER LINKS, EDITING HTML, AND ADDING IMAGES

Editing HTML

Dreamweaver makes everything faster. Once you really get rolling with Dreamweaver youll make a page in ten minutes that used to take you hours. Sadly, though, the program is not is perfect, and sometimes youll have to get into the HTML yourself to make changes or add tags that the program doesnt support. Dreamweaver makes it very easy for you to edit HTML code. You can even watch Dreamweaver create code in real time as you design.

When you run into a problem, or if Dreamweaver is doing something screwy, ask yourself, "Could I fix this problem directly in the HTML?" If so, click into the HTML and manually edit the code. Youll save yourself hours of troubleshooting.

Viewing the HTML

Viewing HTML in Dreamweaver is very easy. There are three handy buttons in the upper left corner that will help you edit your HTML.

 

 Brings up your code, full screen. You can manually change or edit HTML, JavaScript, and Cascading Style Sheet code here.

 Splits the screen between Code View and Design View. You can watch Dreamweaver build HTML while you work!

 Brings up Design View, the normal editing view.

  1. In the main Dreamweaver window, enter some text. Use line breaks, and format your text.
  2. View the HTML

  1. Change or add a tag in the HTML.
  2. Return to the Design View  to check your results.

Locating Hard To Find Items in your HTML

Sometimes you will have a whole big bunch of HTML. When you try to directly edit the code, you wont be able to find what youre looking for. Locating lost HTML items is easy, if you know the trick.

  1. If you highlight an item in the main Dreamweaver Window, that item will be front, center, and highlighted when you view your HTML.

This trick comes in particularly handy when youre dealing with a complicated table.

The Object Palette

The Objects Palette has a bunch of buttons on it that basically duplicate what youll find in the INSERT menu.

You can open the Objects Palette by clicking WINDOW-> OBJECTS.

Notice that the top of the Objects Palette has a pull down labeled "Common"? There are other choices available that well get into later on. Personally, Im not a big fan of the objects palette. For me, its hard to tell what each picture represents. I find it easier to use the INSERT menu. For the purposes of this book we will not often use the objects palette, but feel free to explore everything that you know exists!

                                      

Adding Images in Dreamweaver

Keeping Images in Your Root Folder

Images, like everything else, need to be kept in the root folder. If you try to add an image to your site that isnt in your root folder, Dreamweaver will ask you if you want to save it there first. How kind.

Adding images in Dreamweaver

Were going to take an image off of the Internet and place it in our site.

  1. Right Click (or Ctrl Click on a mac) any image on the Internet. Save that image to the desktop and call it "image". Well add this image to our site.
  2. In Dreamweaver click INSERT-> IMAGE

  1. Navigate to the desktop and choose "image".
    Dreamweaver will recognize that the image is not in your root folder and will ask you if you want to copy it there. You do. Click YES

  1. Navigate to your root folder and save the image. You probably want to save it in an "images" folder
  2. The image inserts!

You can save time by keeping all you images in your root folder to begin with.

Setting Image Properties in Dreamweaver

  1. Make sure you Properties Palette is up (WINDOW -> PROPERTIES)
  2. Click your Image and notice that the Properties palette changes.

The Following are image properties that can be changed in the Properties Inspector:

(Top half of the Properties palette, from left to right)

*         W (width): the image width in pixels

*         H (height): the image height in pixels
REMEMBER that you will usually not change an images size here. If you need to change an image size, youll do so in an image-editing program like PhotoShop. There are some exceptions that well get to later.

*         Src (source): this is the file path to the image. You can click the yellow folder to change the image

*         Link: If the image is a button we will set the link here later

*         Align: Align changes the way text lines up next to the image. To align the image on the page, adjust the justification buttons.

*         Alt (alternative text): Text typed in this field will display while the image is loading. ALT allows people with slower modems to use buttons before they can see the whole image, and also allows web pages to be read aloud by special software for the visually impaired.

Background Images

Background images can be set in the Page Properties window.

MODIFY -> PAGE PROPERTIES

Remember that a background image will tile unless its big enough to cover the whole screen.

Links

Its easy to link pages together using Dreamweaver. You can test your links by hitting F12, and previewing your pages in the browser. Remember that when previewing in the browser Dreamweaver is displaying pages saved on your hard drive. Save often to avoid changes not displaying when previewed.

 When linking, you will first need something for the user to click on. Links can be text, or images. To select text for linking, type the text and highlight it, just like you would in a word processor. To select an image for linking, simply click the image.

After selecting the click-able area (text or image), set the link on the Properties Palette:

Setting Links With-in Your Site

To link one page to another in your site:

  1. Select the click-able text or image
  2. On the Properties palette, click the yellow folder next to the "Link" field. The yellow folder allows you to browse your site to choose the desired page.

  1. Find the appropriate page, and select it.

    For example, this link: web design course links to our homepage.

Setting Links to the World Wide Web

To set links on the World Wide Web, simply type the web address in the "Link" Field. Remember to type the entire address.

Setting Mail Links

When setting mail links, select the click-able object, and type the email address, preceded by "Mailto:" in the Link field.

Linking Within a Page

Sometimes you may wish to link to a particular part of a page. You can link to different areas in the current page, or to set areas in a different page. When linking to a specific area, you must first set an "anchor". The anchor will specify and hold the area that you will link to later. You will set the anchor at your links the destination pointwhere the user will end up. You can name the anchor whatever you want, but youll have to remember it later.

To set an anchor:

          INSERT-> NAMED ANCHOR

          To link to the anchor within a page, type "#" and the anchors name in the Link Field

          To link to an anchor in another page:

  1. Link to the other page as you normally would.
  2. Manually add "#" and the anchors name at the end of the file path in the Link window.

|