1. Tutorial 4 Using CSS for Page Layout

2. Objectives Session 4.1 – Explore CSS layout – Compare types of floating layouts – Examine code for CSS layouts – View prebuilt CSS layout pages – Insert floating divs and nest divs – Duplicate pages 2New Perspectives onAdobe Dreamweaver CS5

3. Objectives Session 4.2 – Draw AP divs – Select, resize, and move AP divs – Add content to AP divs – Adjust AP div attributes – Examine code for AP div tags – Modify AP div stacking order New Perspectives on Adobe Dreamweaver CS53

4. Objectives – Align and position AP divs – Nest AP divs – Inspect code with CSS inspect New Perspectives on Adobe Dreamweaver CS54

5. Session 4.1 Understanding Layout Techniques Traditional HTML Layout Techniques – Text and images were aligned to the left side of the page – Tables were used to provide horizontal and vertical structure for page content – Frames were also used for structure Divided a Web page into multiple HTML documents Each frame contained a single HTML document A Web page with frames was held together by a frameset This method is outdated and rarely used today New Perspectives on Adobe Dreamweaver CS55

6. Understanding Layout Techniques Current CSS Layout Techniques – CSS Layout is the current standard – Uses div tags and Cascading Style Sheets Div tags create a transparent, block-level container in a Web page to hold content Almost any other tag can be placed in a div tag Adjust page layouts by creating styles that position divs in the page New Perspectives on Adobe Dreamweaver CS56

7. Positioning Div Tags in Web Pages Two General Methods – Absolute positioning (AP) You can specify the exact pixel in the browser in which the upper-left corner of the div tag will be placed – Floating positioning You can create flexible designs that vary in size and position in response to the user’s monitor settings Most common method New Perspectives on Adobe Dreamweaver CS57

8. Positioning Div Tags in Web Pages Three Types of Floating Layouts – Fixed-width Can set a specific size for the pages Pages display at the specified width in the browser regardless of user’s screen resolution New Perspectives on Adobe Dreamweaver CS58

9. Positioning Div Tags in Web Pages Display size depends on the target audience – Most users have a screen resolution of at least 800 x 600 – Pages created for this resolution should have a width of 760 pixels to accommodate browser chrome » Browser chrome refers to the borders of the Web browser including frames, menus, toolbars, and scroll bar New Perspectives on Adobe Dreamweaver CS59

10. Positioning Div Tags in Web Pages Display size depends on the target audience – Also commonly used is 1024 x 768 (and higher) – Pages created for this resolution should have a width of 955 pixels to accommodate browser chrome New Perspectives on Adobe Dreamweaver CS510

11. Positioning Div Tags in Web Pages – Liquid layouts Adjust to fit the user’s browser width Maximize use of space, but designers have less control over the look of the pages – Elastic layouts Fixed width designs Use an em instead of pixels – An em is a unit of measurement relative to the size of the font – Enables text and layout to change size when user changes browser size New Perspectives on Adobe Dreamweaver CS511

12. Exploring CSS Layout Code Prebuilt pages are a good place to start understanding CSS layout code (File – New) – Dreamweaver adds comments to assist designers Notes added to the HTML code that are not read or displayed by browsers Help designers understand what the code is used for and how it works New Perspectives on Adobe Dreamweaver CS512

13. Exploring CSS Layout Code /* comment */ New Perspectives on Adobe Dreamweaver CS513 Code for a multiline comment Code for a single line comment

14. Exploring CSS Layout Code Dreamweaver adds a comment before each closing div tag All closing div tags look the same in the code: The order of the closing tags makes a difference in the way code works When CSS layouts are created with multiple divs in the page, Dreamweaver does not add comments to the code New Perspectives on Adobe Dreamweaver CS514

15. Exploring CSS Layout Code Prebuilt pages use good coding practice to make the code easier to understand – Parent-child relationship A tag contained in another tag Outside container tag is the parent Inside container tag is the child Child tags usually indented New Perspectives on Adobe Dreamweaver CS515

16. Exploring CSS Layout Code New Perspectives on Adobe Dreamweaver CS516

17. Planning the CSS Layout First determine which CSS elements the pages require Most pages need three areas in each page: – Heading area – Content area – Footer area New Perspectives on Adobe Dreamweaver CS517

18. Planning the CSS Layout New Perspectives on Adobe Dreamweaver CS518

19. Planning the CSS Layout Determining Div Tags Display Order – Div tags appear in the order in which they appear in the page’s code – As each new div is added to page, create a comment to help identify it more easily New Perspectives on Adobe Dreamweaver CS519

20. Planning the CSS Layout Using Container Div Tags – Regular div tags that are placed around the other divs and elements in the page – Often used to create fixed-width pages New Perspectives on Adobe Dreamweaver CS520

21. Planning the CSS Layout Creating Common CSS Style Attributes for Layout – Style attributes most helpful for layout are found in the Box category Width Height Float Clear Padding Margin New Perspectives on Adobe Dreamweaver CS521

22. Inserting Div Tags Insertion Options for New Div Tags – At insertion point – Before or after tag – After start of tag – Before end of tag Watch the status bar to see which tag is selected New Perspectives on Adobe Dreamweaver CS522

23. Inserting Div Tags New Perspectives on Adobe Dreamweaver CS523 Select the TAG in the status bar, then Go to the Insert Panel, choose the Layout category, then Insert Div Tag

24. Inserting Div Tags Adding Comments to the Code in HTML Pages – When creating complex code, it is good practice to include comments to the code Helpful to others who might view the code – This use of comments is similar to the comments inserted by Dreamweaver in the prebuilt pages New Perspectives on Adobe Dreamweaver CS524

25. Inserting Div Tags New Perspectives on Adobe Dreamweaver CS525

26. Duplicating Pages Duplicating pages saves time and ensures that the basic structure is the same for all pages in the site – The duplicate option is found on the Edit menu of the Files panel New Perspectives on Adobe Dreamweaver CS526

27. Editing the Style Sheet from the CSS Styles Panel An external style sheet is connected to all pages of a Web site Any change made in one place will affect all the pages in a site Use the CSS Styles panel to make desired edits New Perspectives on Adobe Dreamweaver CS527

28. Session 4.2 – Using Absolutely Positioned Div Tags Drawing AP Divs – Div tags can be positioned anywhere on screen – They will remain in place relative to the top and left margins of the page – AP divs can be stacked so that their content overlaps – They can be animated, made visible, or made invisible – Draw an AP div in Design view New Perspectives on Adobe Dreamweaver CS528

29. Selecting, Resizing, and Moving an AP Div Must select the div before moving or resizing – Use resize handles to change dimensions – Divs may be reordered Each is positioned in a page using x, y, and z coordinates X and y coordinates correspond to AP div’s Left and Top positions Z coordinate (also called z-index number) determines the stacking order New Perspectives on Adobe Dreamweaver CS529

30. Selecting, Resizing, and Moving an AP Div – Rulers and guides help place divs in specific positions Rulers provide markings in pixels, inches, or centimeters Guides are lines that can be dragged from the horizontal and vertical rulers into the Document window to help place and align objects New Perspectives on Adobe Dreamweaver CS530

31. Adding Content to an AP Div AP divs can contain many different types of content – Text– Forms – Multimedia– Other divs – Graphics Add content in the same ways content is added to Web pages Existing content can be dragged into an AP div – AP div must be active to accept content – AP div position is absolute New Perspectives on Adobe Dreamweaver CS531

32. Adding Content to an AP Div New Perspectives on Adobe Dreamweaver CS532

33. Adjusting AP Div Attributes Two Methods for Adjusting AP Div Attributes – Property inspector – Create a CSS style with the desired attribute values and attach the style to AP divs as desired Attributes of the Property inspector (when AP div is selected) – CSS-P Element Unique name for the div New Perspectives on Adobe Dreamweaver CS533

34. Adjusting AP Div Attributes – L and T Horizontal (L) and vertical (T) positions – W and H Horizontal (W) and vertical (H) dimensions – Z-Index Number indicating stacking order – Vis Visibility options New Perspectives on Adobe Dreamweaver CS534

35. Adjusting AP Div Attributes – Bg image Path to the background image file for the AP div – Bg color Hexadecimal color code for the background color of the AP div – Class List of created styles New Perspectives on Adobe Dreamweaver CS535

36. Adjusting AP Div Attributes – Overflow Option for how the AP div appears in browser window if its content exceeds its specified size – Clip Portion of the AP div visible in a browser New Perspectives on Adobe Dreamweaver CS536

37. Examining the Code for AP Div Tags When an AP div is created, Dreamweaver places an ID style in the head of the page – Positioned in head of the page rather than in the style sheet because absolute positioning is so specific that it is generally applied to only one element in a site New Perspectives on Adobe Dreamweaver CS537

38. Examining Code for AP Div Tags #TICKETS { position:absolute; left:20px; top:20px; width:130px height:75px z-index:1; overflow: visible; } New Perspectives on Adobe Dreamweaver CS538 SAMPLE CODE

39. Modifying AP Divs Adjusting Stacking Order – AP divs can be stacked or overlapped – Stacking enables the creation of more interesting and sophisticated layouts – Each new AP div is assigned a consecutive z-index number, beginning with 1 On screen, AP divs with higher z-index numbers appear in front of those with lower z-index numbers New Perspectives on Adobe Dreamweaver CS539

40. Modifying AP Divs New Perspectives on Adobe Dreamweaver CS540

41. Modifying AP Divs Aligning AP Divs – AP divs can be aligned in several ways Left Right Top Bottom of another AP div – Use the Shift key to select multiple divs and then select desired alignment New Perspectives on Adobe Dreamweaver CS541

42. Modifying AP Divs Positioning Elements Using the Grid – Grid A series of parallel horizontal and vertical lines that overlap to create equal-sized squares in the background of the Document window Can help position or resize an AP div or other objects New Perspectives on Adobe Dreamweaver CS542

43. Modifying AP Divs New Perspectives on Adobe Dreamweaver CS543

44. Modifying AP Divs Creating Nested AP Divs – Nested AP div AP div contained within an outer (parent) AP div Nesting refers to the underlying code for the AP divs, not to their physical positions – Nested AP div does not have to touch its on-screen parent to be considered nested New Perspectives on Adobe Dreamweaver CS544

45. Modifying AP Divs Nesting is used to group AP divs – If parent AP div is moved, the nested AP div will move with it – Position of nested AP div is relative to the left and top borders of the parent rather than to the left and top borders of the page – Nested AP div shares other attributes with its parent New Perspectives on Adobe Dreamweaver CS545

46. Inspecting CSS Code with CSS Inspect CSS Inspect – Another tool to help with complex CSS code – Works with Live View Helps identify HTML elements and their associated CSS styles Live View integration enables debugging from within the Dreamweaver environment New Perspectives on Adobe Dreamweaver CS546

47. Inspecting CSS Code with CSS Inspect New Perspectives on Adobe Dreamweaver CS547

48. Updating the Web Site on the Remote Server Upload every page of the site – Include dependent files so that graphics and new CSS styles are uploaded to the remote server as well Preview the Web site New Perspectives on Adobe Dreamweaver CS548