1. Tutorial 6 Creating Dynamic Pages

2. Objectives Understanding CSS page layout techniques
Insert divs into a Web page
Select, resize, and move a div
Add content to a div
Adjust div stacking order
Adjust div attributes
Dreamweaver CS3 Tutorial 6

3. Objectives Float the divs in a page Nest AP divs
Add behaviors to a page
Create an link
Edit and delete behaviors
Dreamweaver CS3 Tutorial 6

4. Laying Out Pages with CSS
CSS page layout is the current standard for laying out professional Web pages.
div tag creates a transparent container you place in a Web page to hold content.
Dreamweaver provides prebuilt CSS layout pages
Dreamweaver CS3 Tutorial 6

5. Laying Out Pages with CSS
Dreamweaver CS3 Tutorial 6

6. Laying Out Pages with CSS
You can create a CSS page layout on your own.
Insert divs into a page
Create CSS styles to format the divs
Place the content into the div
Spend time planning the pages of your site before you begin creating a CSS layout.
Dreamweaver CS3 Tutorial 6

7. Laying Out Pages with CSS
Dreamweaver CS3 Tutorial 6

8. Laying Out Pages with CSS
Dreamweaver CS3 Tutorial 6

9. Using Absolutely Positioned Div Tags
With absolute positioning (AP), div tags can be positioned anywhere on the screen with great accuracy and reliability.
AP divs can be stacked on top of one another so that their content overlaps.
You draw an AP div in a page in Design view.
Dreamweaver CS3 Tutorial 6

10. Using Absolutely Positioned Div Tags
Dreamweaver CS3 Tutorial 6

11. Selecting, Resizing, and Moving an AP Div
An AP div can be active or selected.
To make an AP div active, click in the AP div.
To select an AP div, click the edge of the AP div in the Document window when its border is visible (or click the selection handle when the AP div is active, or in the AP Elements panel, located in the CSS panel group, click the name of the AP div).
Dreamweaver CS3 Tutorial 6

12. Selecting, Resizing, and Moving an AP Div
To resize an AP div, drag any resize handle until the AP div is the desired size (or enter exact height and width values in the Property inspector).
To move an AP div, drag the AP div by its selection handle to the desired location (or press the arrow keys to shift the selected AP div one pixel at a time to the desired location, or enter Left, Top, and z-index numbers in the Property inspector).
Dreamweaver CS3 Tutorial 6

13. Selecting, Resizing, and Moving an AP Div
Dreamweaver CS3 Tutorial 6

14. Selecting, Resizing, and Moving an AP Div
Dreamweaver CS3 Tutorial 6

15. Adding Content to an AP Div
An AP div can contain almost any type of content, including text, graphics, forms, multimedia content, tables, and other divs.
Cannot contain frames, but can be placed within a frame
Dreamweaver CS3 Tutorial 6

16. Adding Content to an AP Div
Dreamweaver CS3 Tutorial 6

17. Adjusting AP Div Attributes
You can change the attributes of an AP div tag
CSS-P Element ID
L (Left) and T (Top)
W (Width) and H (Height)
Z-Index
Vis (Visibility)
Bg Image (Background Image)
Bg Color (Background Color)
Class
Overflow
Clip
Dreamweaver CS3 Tutorial 6

18. Adjusting AP Div Attributes
Dreamweaver CS3 Tutorial 6

19. Examining the Code for AP Div Tags
An ID selector is a custom style class that is used only one time.
The ID selector style is used because AP div positioning is usually unique to that particular AP div.
It is sometimes useful to create external styles to define the AP div positioning.
Dreamweaver CS3 Tutorial 6

20. Examining the Code for AP Div Tags
Dreamweaver CS3 Tutorial 6

21. Examining the Code for AP Div Tags
Dreamweaver CS3 Tutorial 6

22. Modifying AP Divs AP divs in a Web page can be stacked or overlapped.
Each new AP div you create is assigned the next consecutive z-index number.
On the screen, AP divs with higher z-index numbers appear in front of those with lower z-index numbers.
Dreamweaver CS3 Tutorial 6

23. Modifying AP Divs
Dreamweaver CS3 Tutorial 6

24. Modifying AP Divs
Dreamweaver CS3 Tutorial 6

25. Aligning AP Divs You can drag AP divs on the page to reposition them.
You may also wish to align elements for a neater look.
To align layers:
Hold the Shift key down and select the layers.
Click Modify on the menu bar, point to Arrange, and then click an Align command.
Dreamweaver CS3 Tutorial 6

26. Aligning AP Divs
Dreamweaver CS3 Tutorial 6

27. Positioning Elements Using the Grid
You can also realign layers using the grid.
The grid is a series of parallel horizontal and vertical lines that overlap to create equal-sized squares in the background of the Document window.
The grid is hidden by default, but can be displayed.
You can adjust the grid’s size or appearance in the Grid Settings dialog box.
Dreamweaver CS3 Tutorial 6

28. Positioning Elements Using the Grid
Dreamweaver CS3 Tutorial 6

29. Creating Nested AP Divs
Nested AP divs work like nested tables and frames, except that nested AP divs do not have to be physically positioned within each other.
Nesting AP divs refers to the underlying code.
To nest AP divs, you use the AP Elements panel
Press and hold the Ctrl key and then drag the AP div to be nested over the parent AP div.
The nested AP div will be indented under the parent AP div in the AP Elements panel.
The reverse action will un-nest the AP divs.
Dreamweaver CS3 Tutorial 6

30. Creating Nested AP Divs
Dreamweaver CS3 Tutorial 6

31. Creating Nested AP Divs
Dreamweaver CS3 Tutorial 6

32. Understanding Behaviors
A behavior is code added to a Web page that allows users to interact with various elements in the Web page.
A behavior is like an equation:
object + event = action
Object is the element on the Web page that the behavior is attached to.
Dreamweaver CS3 Tutorial 6

33. Understanding Behaviors
Event is what takes place and has two parts:
User event (trigger action)
Event handler (code used to refer to the event)
Action is what happens when the event is performed on the object.
Dreamweaver CS3 Tutorial 6

34. Understanding Behaviors
Dreamweaver CS3 Tutorial 6

35. Understanding Behaviors
The easiest way to insert behaviors into your pages is to use a preset behavior tool.
You have already used several of these tools, i.e. Rollover buttons and the Navigation Bar button.
You can see the behaviors that Dreamweaver has created for you by selecting an object and opening the Behaviors panel.
You can also use the Behaviors panel to create customized behaviors.
Dreamweaver CS3 Tutorial 6

36. Understanding Behaviors
When using the Behaviors panel to create behaviors, you select an object, and then a prelisted action/event handler.
Dreamweaver will combine them and create the code to create the behavior.
You can also create your own custom behaviors by writing your own code.
Dreamweaver CS3 Tutorial 6

37. Understanding Behaviors
To add a behavior from the Behaviors panel, you make several choices:
Object – first you choose the object on the page.
Target browser – then you choose the browser brand and version to be compatible with.
Action – you will then choose from within actions that are compatible with the chosen browser.
Event – Dreamweaver then displays a list of possible events for you to chose from.
Dreamweaver CS3 Tutorial 6

38. Understanding Behaviors
Dreamweaver CS3 Tutorial 6

39. Understanding Behaviors
Dreamweaver CS3 Tutorial 6

40. Understanding Behaviors
Dreamweaver CS3 Tutorial 6

41. Understanding Behaviors
Dreamweaver CS3 Tutorial 6

42. Understanding Behaviors
Dreamweaver CS3 Tutorial 6

43. Understanding Behaviors
Dreamweaver CS3 Tutorial 6

44. Adding an E-Mail Link to a Page
A user can click an link to start his or her default program, and open a blank message window with the address specified in the link already entered in the To field.
To create an link, type “mailto:” and your address in the Link text box in the Property inspector.
Dreamweaver CS3 Tutorial 6

45. Adding a Custom Script to a Page
You can add a custom script written by another programmer to a Web page.
If you know JavaScript, you can write your own scripts.
Dreamweaver CS3 Tutorial 6

46. Adding a Custom Script to a Page
Dreamweaver CS3 Tutorial 6

47. Editing and Deleting Behaviors
Once a behavior has been created, you can change the event handler associated with the behavior.
You can also delete a behavior.
To change the action, you need to delete the old behavior, select the object, and then attach the new behavior.
Dreamweaver CS3 Tutorial 6

48. Updating the Web Site on the Remote Server
To update:
Connect to the remote server using the Connects to Remote Host button on the Files panel toolbar
Click the View list arrow, and then click Local View
Select the updated files, and click the Put File(s) button
Click the Yes button when asked if you want to include dependent files
Disconnect using the Disconnects from Remote Host button
Dreamweaver CS3 Tutorial 6

49. Tutorial Summary Insert divs that use relative positioning
Draw AP divs in a Web page
Select, move, resize, and add content to AP divs
Adjust the AP divs’ attributes
Adjust stacking order
Align AP divs and create nested AP divs
Review HTML code involved with AP divs
Add, edit, and delete behaviors
Dreamweaver CS3 Tutorial 6