Advanced Dreamweaver More functions to help create better

Advanced Dreamweaver More functions to help create better web pages Page Layout, Cascading Style Sheets, behaviours, Forms University of Sunderland CDM 105 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. University of Sunderland CDM 105 Session 7

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

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

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

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 University of Sunderland CDM 105 Session 7

Inserting a Table Insert bar: LAYOUT Insert a table The insert table dialog box permits you to set the table attributes within the <table> tag University of Sunderland CDM 105 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 University of Sunderland CDM 105 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 University of Sunderland CDM 105 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 <table> tag University of Sunderland CDM 105 Session 7

Importing and exporting data Insert tabular 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 University of Sunderland CDM 105 Session 7

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

Layout View Standard View Dotted outline indicates an invisible border i. e. border=0 in the <table> tag University of Sunderland CDM 105 Session 7

Dynamic HTML or DHTML • DHTML provides greater interactivity • DHTML = HTML 4 + Cascading Style Sheets + Scripting language (Java. Script) • 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 University of Sunderland CDM 105 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 W 3 C – Layer and i. Layer 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 Java. Script 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. University of Sunderland CDM 105 Session 7

Layers • 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 University of Sunderland CDM 105 Session 7

Adding a Layer Draw a layer by dragging the crosshair cursor over the document window 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 University of Sunderland CDM 105 Session 7

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

Nested layers A layer inside another layer The green layer will inherit its parent’s (i. e. the Redlayer) visibility attribute 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!) University of Sunderland CDM 105 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. ) University of Sunderland CDM 105 Session 7

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

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

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

External CSS Styles Web Site External CSS files e. g. HTML page CSS Style Sheet A CSS Style Sheet B 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. University single change to the style sheet updates all of the pages it is associated CDM 105 with. Sunderland Session 7

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

Drag and Drop The layer which is activated The Target University of Sunderland CDM 105 Session 7

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

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

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 Text field (creates ‘Textareas’ if multiple line is selected in the property inspector) Add list Insert File Field (e. g. allows a file from the local PC to be selected and sent with the form) Add button Add radio button (e. g Submit) Add image object (e. g. can be used to create submit buttons) Add check box Add hidden object University of Sunderland CDM 105 Session 7

Example : Forms are always shown in Dreamweaver within RED DASHED LINEs University of Sunderland CDM 105 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 University of Sunderland CDM 105 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 University of Sunderland CDM 105 Session 7