Dreamweaver 101. Here s the desktop icon for Dreamweaver CS5: Click it open. From the top menu options, choose Site and New Site

Transcription

1 Dreamweaver 101 First step: For your first time out, create a folder on your desktop to contain all of your DW pages and assets (images, audio files, etc.). Name it. For demonstration, I ll name mine dw_magic. Here s the desktop icon for Dreamweaver CS5: Click it open. From the top menu options, choose Site and New Site I ll fill in the site s name (what might appear in the title bar, perhaps) and browse to locate the desktop file that will store all the material. This is similar to setting your scratch disks in Final Cut Pro. Click SAVE.

2 On the WELCOME screen (IF ONE SHOWS UP ON YOUR COMPUTER), choose HTML under Create New. If you did NOT get a WELCOME screen, you need to go to FILE > NEW Then you will see

3 Choose the defaults, which should be BLANK PAGE, HTML, <none>. CREATE. Both ways will open up to your workspace, which should look like this (or very similar the computer labs might open up a space that s design only at first):

4 You have menu and tool options at the top, panels on the right that address other options (such as creating CSS). At the bottom, there are different property/tool panels that will appear according to what you re doing at the time. At the left, there are various services. The main workspace is divided into two areas (and the juxtaposition can change according to what you need to see): code on the left Look familiar? and your design space on the right. These three buttons control what you see. What I ve just shown you, above, is the split option. You need to SAVE your page at this point. If this is your HOME page, save it as index.html. (The.html will be entered automatically.) SAVE.

5 Click in the design space and write something. You will see what you ve written appear in the code as well as in the design. If you highlight something!!! you will see that you can format it using the bottom panel. Here I ve used the B button to bold it. You ll see that the <strong> tag shows up both under the coding area (so that I will be able to see it even if the coding panel is closed) and in the code itself. Format will get you the paragraph and heading options (again; look familiar?): I can do more by clicking the Page Properties button, however:

6 For now, because I don t want to set up a CSS style for this particular exercise, I have it clicked (left side) on Appearance (HTML). Here I can change text color, background color, link colors, margin sizes, and background image. Go ahead and try things. Note that you can see what you ve done before saving if you click APPLY. When you re pleased, choose OK. You can always go back and change things.

7 TESTING/PREVIEWING YOUR PAGE IN A BROWSER: Find the little globe in the top tool bar. Bring down the menu. Choose a browser (Firefox is good). Back to the work space Background image: If you bring one in (use the Browse button), it will repeat itself (called tiling ). I will show you how to make it NOT repeat shortly, but you cannot do it in the HTML function. This is what it would look like: There are effects that would work, depending on the image. This isn t one of them.

8 Back to the work space On the far right, you should see a panel with INSERT at the top. Open the little pull- down menu and choose COMMON. Drag the INSERT label to your top toolbar. (This is just how I like to use it. Try it for now. You can also get these options by using the INSERT pull-down menu at the top of the workspace.) You should see this: You will use some of these icons to perform basic things. We re concerned with the image tool just now. That s the one with the little tree in a square box and a small triangle next to it. When you mouse over it, it will colorize. (I can t believe I just used the word colorize. Sigh. But that s what it does.) Pull down the menu from the triangle and you ll see options. Choose IMAGE for now. Browse for your image:

9 CHOOSE. Because I hadn t already saved my document (bad me), DW offers to map the path to get my picture. Click OK if you get this. Because the image was not in my dw- magic folder (the site or root folder), DW offers to put a copy there. Say YES.

10 YES. SAVE. When it asks for alternate text, type some in. Don t worry about the long description. Click OK

11 Your image is inserted. Notice the code. If you click on the image, you get some options for how text will be displayed. V space = vertical padding H space = horizontal padding (10 pixels is a good standard, but vary as needed) Border: 1 will get you something crisp but not overpowering. Align: Here is where you will determine how the image is displayed in relation to the text. Experiment with the options. will be to the left of the text. Left, for example, means that the image THE ROLLOVER IMAGE

12 For each rollover, you need TWO image files that are EXACTLY the SAME SIZE. They will distort if they do not match. Here are the two I ll use: and (In this case, let s pretend that the map shows where the lily was growing or some other related purpose.) In your DW work space, put your cursor where you want the image to appear (this can be changed later). Go to the IMAGE icon or menu. Choose ROLLOVER IMAGE. You ll get a form that looks like this (although in the one below I ve put in my information):

13 Original image: This is the image you ll see when you first come to the page. Rollover image: This is the image you ll see when you mouse over the original image. It can be another picture, a map, some text, etc. Anything, so long as it is an image file. Same for the original image. Alternate text: This is what will pop up on the Web page, or what will be read by a mechanical reader that some visually challenged people have on their computers. When clicked This is where you would put something you want linked to the image. In this case, a click on the image will take you to the Wikipedia page on water lilies. On a news site, it might take you to the news story. In your work space, it will look as if the image has a screen over it. If you click outside the image, that will disappear. Preview your rollover in a browser. IT WILL NOT WORK IN THE WORK SPACE. Any interactivity must be in a browser to be seen.

14 BACKGROUND IMAGE, PART 2: This is how you insert an image that will NOT repeat. Notice that you need APPEARANCE (CSS). Browse for the Background Image as before. In the REPEAT menu, choose no- repeat. OK. If you wanted the image to fill the entire space, you would need (for optimum quality) an image that was already sized to do that. However, there are effects you can use. In this case, you could match the background color:

15 And you would get Because it is a Background Image, you can apply text over it

16 Thus ends today s demonstration. Your assignments are online.