comm 326 ch2 notes
Lots of luck trying to get through this with just the book. But there's a lot to learn here. First, open Ch. 2 of Mastering CSS with Dreamweaver CS3 by Sullivan. (You can check it out of the library electronically). Its a good idea to download the sample files (index and css) so that when you create your own index and css files, you can check to see how the technique was done. Theoretically, you could have created your own slices from a full-scale Fireworks or Photoshop mockup of a non-web page. But for the exercise just download the files.
There are several things in the chapter that are just sidelights. Dont get bogged down in setting Dreamweaver preferences or learning about CSS shorthand (p. 55 - 60), although its helpful to read this for the long run. Take aways include setting up floating transparent gifs (like the flower above); the initial cap (like the letter L above this column); and the .pod technique.
This is an example of the .pod technique, which is very cool.
You can type a lot in here, or you can clear it earlier. I like the float over effect when it only clears and you dont deal with the space (p 80) but its incomplete and will not work on most browsers.
To get started go to p. 50 and follow the directions. Not everything will work, or at least not right away, but that's why we work on one file but have another to fall back on.
Step by Step
Let's get started. In Dreamweaver, open a new two column fixed right header with footer and save BOTH css and html files to a conventient folder. This is probably the folder with the Ch.2 files from Sullivan in it, and there will be naming issues (which one is the index ?) That's up to you.
2. Replace the .twoColFixRtHdr info as indicated on p.50, again, both css and html files.
3. If you want a color for the sidebar, the provided background image (column.gif) will block it. You will need to create something similar with a transparency. Place it, and edit all other CSS, using the CSS Styles pallet. Right clicking on the appropriate Tag / Selector will open the editor. The faux right column technique (p. 60) seems to be faulty. See if you can get it to work. No big deal if not -- the workaround is just to drop in more returns to equalize the columns.
4. The #container tag needs to have a background image - body_back.jpg Also the box needs padding, as per instructions, 9 px same all around. This makes the container 682 not 700 pixels wide.
5. P 64-66 This is tricky. Open the code and insert the large flower image between the end of the footer </div> and the end of the container </div> Placement is important here. Then follow the instructions p. 66 - Click ON THE IMAGE and then click new at the bottom of the CSS pallet. You'll name the new rule for the image #container .overhang (no matter what original name says). Then the Positioning properties for this are absolute, left -65 and top 0. OK, still not in place? Here's the trick the CONTAINER (not #contanier .overhang but the overall #container) has to have the position property at relative. Think about it -- the overhang is absolute, but it is hitched to the edge of the container, and that will change as the browser window side changes.
6. P. 67 Add the logo.jpg. In shorthand, the margins are 40px 0 20px 150px (clockwise, top, right, bottom, left). (Dont worry about the h1 tag, focus on the cool technique for taking off the blue image link border -- beats setting the properties pallet border to zero.) a img { border: none; } in the css stylesheet. )
7. Sidebar1 gets the corner_t1.gif image. This didnt work for me. On p. 71 they advise changing size of Sidebar1 to 224.
8. Starting on page 74, we get into placement of the bottom graphic. The technique here is to create an extra wrapper that we can use to hang the image from, just as we did with the content wrapper above.
This is very detailed, and stuff can go wrong. Try to follow the book carefully here. Dont worry about the Internet Explorer issues on p. 80 for now. If you get the image in the right place, with the right padding around it, that's fine.
9. Pod - Intersting problems. Starting on p. 81, select the p element, arrow right (this positions the cursor) insert a Div element (common Insert bar, 5th over) and then give it a class (pod)
10. Dont forget to deal with the Space issues p. 84.
