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

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

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

5
Laying Out Pages with CSS
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.

7
Laying Out Pages with CSS
8
Laying Out Pages with CSS
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.

10
Using Absolutely Positioned Div Tags
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).

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).

13
Selecting, Resizing, and Moving an AP Div
14
Selecting, Resizing, and Moving an AP Div
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

16
Adding Content to an AP Div
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

18
Adjusting AP Div Attributes
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.

20
Examining the Code for AP Div Tags
21
Examining the Code for AP Div Tags
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.

23
Modifying AP Divs
24
Modifying AP Divs
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.

26
Aligning AP Divs
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 grids size or appearance in
  the Grid Settings dialog box.

28
Positioning Elements Using the Grid
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.

30
Creating Nested AP Divs
31
Creating Nested AP Divs
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.

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.

34
Understanding Behaviors
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.

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.

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.

38
Understanding Behaviors
39
Understanding Behaviors
40
Understanding Behaviors
41
Understanding Behaviors
42
Understanding Behaviors
43
Understanding Behaviors
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.

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.

46
Adding a Custom Script to a Page
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.

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

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