1. University of Sunderland CDM105 Session 7 Advanced Dreamweaver More functions to help create better web pages Page Layout, Cascading Style Sheets, behaviours, Forms

2. University of Sunderland CDM105 Session 7 Frames Dreamweaver provides a visible approach to developing web pages made up of a number of HTML pages contained within a Frame structure. You can create a Frameset when you first create the new Page File > New Note: You should already understand Frames fully from the HTML part of the module.

3. University of Sunderland CDM105 Session 7 Splitting a page into Frames: Option A Insert bar: LAYOUT Frames: Pre-defined options to split up the page or current frame Using the Insert bar Frames – Layout Bar

4. University of Sunderland CDM105 Session 7 Splitting a page into Frames: Option B Frames: Splits the page or current frame Modify > Frameset Splitting a page

5. University of Sunderland CDM105 Session 7 Use the Properties Inspector and the Frames panel Step 1 Select the Frame You want to edit Step 2 : Modify the Frame properties Naming and Changing Frame Properties

6. University of Sunderland CDM105 Session 7 Tables Tables Dreamweaver provides a word processing approach to adding Tables –reduces development time –permits you to sort the data –facilitates easy formatting e.g. colour and size However, understanding the table tags used is vital when you begin to link databases to your web pages (i.e. ASP, PHP, Coldfusion) as you may do in the future

7. University of Sunderland CDM105 Session 7 Inserting a Table Insert a table Insert bar: LAYOUT The insert table dialog box permits you to set the table attributes within the tag

8. University of Sunderland CDM105 Session 7 Modifying the table Use the property inspector to modify the table Properties and use the options under Modify > Table to add and delete columns/rows Remember to select the table first ! Modifying Cells/Rows/Columns : Select the cells rather than the table and then use the property inspector to change the attributes of only the selected cells

9. University of Sunderland CDM105 Session 7 Sorting the data in the data Select the Sort Table option from the Commands menu and the dialog box below appears. Then make your choice and select OK

10. University of Sunderland CDM105 Session 7 Standard Table Format Select the Format Table option from the Commands menu and make your choice. Dotted outline indicates an invisible border i.e. border=0 in the tag

11. University of Sunderland CDM105 Session 7 Importing and exporting data Dreamweaver will import tabular data from other packages and create a table to display the data –The data to be imported must be formatted as a comma-delimited text file –Note: You can save data from Excel and Access in this format. To export data from a table in a page select Export from the File menu Insert tabular data

12. University of Sunderland CDM105 Session 7 Layout View Using tables to control the layout of the page Standard View Layout View Draw Layout Cell Draw Layout table Makes it easy to merge and split cells and nest tables (i.e. a table inside a cell)

13. University of Sunderland CDM105 Session 7 Standard View Dotted outline indicates an invisible border i.e. border=0 in the tag Layout View

14. University of Sunderland CDM105 Session 7 Dynamic HTML or DHTML DHTML provides greater interactivity DHTML = HTML 4 + Cascading Style Sheets + Scripting language (JavaScript) Only supported in newer Browsers –i.e. Netscape 4+ and Internet Explorer 5+ Note: Netscape and Internet Explorer use different DHTML standards (DOM - Document Object Model). Luckily Dreamweaver 4 creates code that works in both Browsers

15. University of Sunderland CDM105 Session 7 Layers One part of the CSS standard defines a box element which you can position wherever you want on the page. In Dreamweaver these are termed layers There are four tags which create layers ! –DIV and SPAN are CSS tags defined by the W3C –Layer and iLayer tags are Netscape specific but don’t work in Netscape 6 ! –By default Dreamweaver creates Layers using the DIV tag which creates layers that work in IE and Netscape –Note: In Netscape problems may occur if the user resizes the page. Dreamweaver provides the means to insert a JavaScript function to overcome the problem (Command Menu > Add/Remove Netscape Resize fix..). The fix makes the page reload in Netscape if the user resizes the Browser window.

16. University of Sunderland CDM105 Session 7 You can animate layers and make them visible/invisible in order to create an interactive experience within your web page Layers can also be used to aid web page development and then converted to tables to enable most Browsers to show the page correctly –However, layers and tables do reduce the accessibility of the web page to visually impaired users –To convert a page containing layers to control layout to one which uses tables select Modify Menu > Convert > Layers to Tables Layers

17. University of Sunderland CDM105 Session 7 Adding a Layer Modify the properties of the layer via the property inspector e.g. to specify an exact size and location of a layer or to specify a background colour or graphic for a layer Draw a layer by dragging the crosshair cursor over the document window

18. University of Sunderland CDM105 Session 7 Multiple Layers Select prevent overlaps if you intend to eventually convert the layers to tables x y z The Z-index determines the stacking order of the layers. i.e. the highest number is on top

19. University of Sunderland CDM105 Session 7 Nested layers A layer inside another layer Create the layer and then hold down the CTRL key and drag the name of the layer over the name of the layer you want to place the layer inside (within the layer panel!) The green layer will inherit its parent’s (i.e. the Redlayer) visibility attribute

20. University of Sunderland CDM105 Session 7 Cascading Style Sheets Permits user-defined formatting of HTML objects Styles can be applied to many HTML objects –Type, Background, Block, Box,Border, List, Positioning, plus miscellaneous Browser specific styles. CSS Style sheet can either be internal (stored in the Head part of the HTML document) or External (stored as a text file with a.CSS extension.)

21. University of Sunderland CDM105 Session 7 Step 1: Click add new style Step 2: Name Style Step 3: Select This Document Only Step 4: Define Style and click OK Creating a Custom internal Style

22. University of Sunderland CDM105 Session 7 Internal CSS Styles CSS definitions HEAD BODY HTML Page Select View > Head Content and Dreamweaver displays icons representing the objects stored in the HEAD part of the HTML page CSS Style icon Text formatted in ‘Titlestyle’ (to pick a style:select the text first and click on the style you want in the CSS panel) Creating a Custom internal Style

23. University of Sunderland CDM105 Session 7 External CSS Styles Attach CSS When external CSS is used its file name is displayed in the CSS panel Edit style sheet button External CSS Styles

24. University of Sunderland CDM105 Session 7 CSS Style Sheet A CSS Style Sheet B Web Site e.g. HTML page External CSS files More than one Style sheet can be applied to an HTML page. Also, a Style sheet can be applied to many pages. i.e. a single change to the style sheet updates all the pages it is associated with. External CSS Styles

25. University of Sunderland CDM105 Session 7 Step 1:Click add style first Step 2: Pick Redefine HTML tag Step 3: Pick the tag to redefine Step 4: Define the style in the dialog box that appears and click ok Note: If a Browser does not support CSS then the standard HTML style will be used to display the object (e.g. text) Redefining HTML styles

26. University of Sunderland CDM105 Session 7 Drag and Drop Dreamweaver provides built-in DHTML to implement the dragging and dropping of layers You should remember that these behaviours are pre-defined JavaScript routines developed by Macromedia so they are only found in Dreamweaver. i.e. they are not found in other HTML authoring tools. However the output generated from Dreamweaver 4 will work in Netscape 4.0 + and I.E. 4.0 + without the need for a plugin.

27. University of Sunderland CDM105 Session 7 Drag and Drop The Target The layer which is activated

28. University of Sunderland CDM105 Session 7 Activating the Duck ! Step 1 select the tag to create an Onload event Step 2 Select the Drag layer behaviour Step 3 Pick the layer to drag and define the Target area i.e. the position of the nest ! Hint: move the layer to the target and press Get Current Position to define the target position

29. University of Sunderland CDM105 Session 7 Drag and Drop The advanced features allow the user to call JavaScript functions (e.g. written by the developer) or add a single line of JavaScript (e.g. an alert message) The JavaScript function is only called when the layer is dropped onto the target Or define only part of the layer as the handle Called at the start of the drag event

30. University of Sunderland CDM105 Session 7 Forms Dreamweaver provides an easy to use point and click approach to creating forms (much easier than typing in the HTML) The object panel provides Forms section Add Form Add button (e.g Submit) Add radio button Insert File Field (e.g. allows a file from the local PC to be selected and sent with the form) Add hidden object Add Text field (creates ‘Textareas’ if multiple line is selected in the property inspector) Add check box Add list Add image object (e.g. can be used to create submit buttons)

31. University of Sunderland CDM105 Session 7 Example : Form Forms are always shown in Dreamweaver within RED DASHED LINEs

32. University of Sunderland CDM105 Session 7 The rest of the book The remaining chapters should be read as part of the self study aspect of the module but are of less overall importance and relate to Dreamweaver ‘features’ rather than Web functionality –Chapter 23 Templates is a useful feature when developing large corporate Web sites

33. University of Sunderland CDM105 Session 7 Machine Based Tutorial In the tutorial session you will learn how to build complex web pages using Dreamweaver. You should complete the online exercises. Read Chapter 1 of the 2 nd key text book before the next lecture –Ulrich, K - Visual Quickstart Guide FLASH MX 2004 for Windows and Macintosh