Tutorial 6 Creating Dynamic Pages

1. Tutorial 6Creating 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 e-mail 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 e-mail link to start his or her default e-mail program, and open a blank message window with the e-mail address specified in the e-mail link already entered in the To field. • To create an e-mail link, type “mailto:” and your e-mail 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 • Click the View list arrow, and then click Local View 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