This book consists of 12 chapters with a total of 100 sections, each focusing on a specific technique. I am making these notes as a way of reinforcing my understanding of the various features of Dreamweaver CS3.

Now lets have a look at the techniques in Chapter Four: Creating a Web Site. Designing Pages with Absolute Placement Objects.

For me, this is the most important chapter in the book. There are two fundamentally different ways of designing a web page. One method, which emerged early in the days of web production, was when someone realized that a table with invisible borders could be used to divide a display into regions, each of which could contain different information. The second, which is consistent with the latest W3C standards for XHTML, involves the absolute placement of objects within rectangular regions. The formatting of the material within each region is then defined by means of a cascading style sheet (CSS). This separation of the content from the formatting commands is, at least initially, counter-intuitive, but it turns out that it leads to a much cleaner and more standardized approach to the underlying code that drives the display. Perhaps more importantly, it makes it much easier to modify a page once it has been created and it makes it much easier to display the same information on many different devices (e.g. computer screens, cell phones, iPods, PDAs, ...).

• Technique #30 Designing Pages with Absolute Placement Objects
  • Using Dreamweaver pulldown menus: choose Insert -> Layout Object -> AP Div and you will see a predefined rectangle that you can move and resize.
  • Using the Insert toolbar, click on the Drae AP Div icon and you will see a rectangle that you can move and resize.
  • A common layout would consist of 3 regions: a left margin, a header and a body.
  • It is not a good idea to have regions placed within regions as different browsers may display this in unpredicatable ways.
• Technique #31 Formatting AP Divs in the Property Inspector
  • Select the region and then modify the parameters in the Property Inspector.
  • This is a good way to precisely specify the coordinates (Left and Top) of the region.
• Technique #32 Managing AP Divs in the AP Elements Panel
  • This is useful for seeing a list of those elements that are defined by Dreamweaver to be AP Divs.
  • This is primarily used to determine the visibility properties of overlapping elements.
  • Overall, this is an advanced feature.
• Technique #33 Defining Div Tags
  • Dreamweaver has two types of Div tags (AP Divs and Divs).
  • The code generated in both cases is a div tag, but the properties that are coded are different.
  • AP Divs are defined and formatted using the Property Inspector, whereas Divs are managed within the CSS panel which contains many more features and options.
• Technique #34 Using Rulers, Guides, and Grids
  • View -> Rulers and View -> Grid provide background lines for visualizing the layout while it is being created.

Let me try to summarize the situation.

Step 1: Create a new blank page.

Step 2: Use the Draw AP Div icon to create a few nonoverlapping regions. Temporarily color the backgrounds of each area a different color so you can keep track of each area.

Step 3: Select each area by clicking on the border and open the CSS Styles tab on the CSS panel (use Window -> CSS Styles if this is not visible). The first time you do this you will create a new CSS file. This file will contain the code for describing the formatting of whatever appears in this region.

Step 4: Click on the Edit Style ... icon (the pencil) at the bottom of the panel. Change the parameters to suit your needs.

Tags: web authoring, Dreamweaver CS3, XHTML, CSS