University of Sunderland CDM105 Session 7 Advanced Dreamweaver More functions to help create better...

University of Sunderland CDM105 Session 7

Advanced DreamweaverAdvanced Dreamweaver

More functions to help create better web pages

Page Layout, Cascading Style Sheets, behaviours, Forms


FramesFramesDreamweaver provides a visible approach to developingweb pages made up of a number of HTML pages contained within a Frame structure.

You can create aFrameset when youfirst create the new PageFile > New

Note: You should alreadyunderstand Frames fullyfrom the HTML part of the module.


Splitting a page into Frames: Option A

Insert bar:LAYOUT

Frames:Pre-defined options tosplit up the page or current frame

Using the Insert bar

Frames – Layout BarFrames – Layout Bar


Splitting a page into Frames: Option B

Frames:Splits the page or current frame

Modify > Frameset

Splitting a pageSplitting a page


Use the Properties Inspector and theFrames panel

Step 1Select the FrameYou want to edit

Step 2 : Modify the Frame properties

Naming and ChangingFrame Properties


TablesTables

• 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


Inserting a TableInserting a Table

Insert a table

Insert bar:LAYOUT

The insert table dialog box permits youto set the table attributes within the<table> tag


Modifying the tableModifying the tableUse the property inspector to modify the table

Properties and use the options underModify > Table to add and delete columns/rows

Remember toselect 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


Sorting the data in the dataSorting the data in the data

Select the Sort Table option from the Commands menu andthe dialog box below appears.

Then make your choice and select OK


Standard Table FormatStandard Table FormatSelect the Format Table option from theCommands menu and make your choice.

Dotted outline indicates an invisible borderi.e. border=0 in the <table> tag


Importing andImporting and exporting data 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


Layout ViewLayout ViewUsing tables to control the layout of the page

Standard View Layout View

Draw Layout CellDraw Layout table

Makes it easy to merge and split cellsand nest tables (i.e. a table inside a cell)


Standard View

Dotted outline indicates an invisible borderi.e. border=0 in the <table> tag

Layout ViewLayout View


Dynamic HTML or Dynamic HTML or DHTMLDHTML

• 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


LayersLayers

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


• 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 selectModify Menu > Convert > Layers to Tables

LayersLayers


Adding a LayerAdding 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 cursorover the document window


Multiple LayersMultiple Layers

Select prevent overlapsif you intend to eventuallyconvert the layers to tables

x

y

z

The Z-index determinesthe stacking order of the layers.i.e. the highest number is on top


Nested layersNested layersA layer inside another layer

Create the layer and then hold down the CTRL key and dragthe name of the layer over the name of the layer you want toplace the layer inside (within the layer panel!)

The green layer willinherit its parent’s (i.e. the Redlayer)visibility attribute


Cascading Style Cascading Style SheetsSheets

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


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


Internal CSS Styles CSS definitionsHEAD

BODY

HTML Page

Select View > Head Contentand Dreamweaver displaysicons representing the objectsstored in the HEAD part of theHTML 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


External CSS Styles

Attach CSS

When external CSSis used its file nameis displayed in theCSS panel

Edit style sheet button

ExternalCSS Styles


CSS Style Sheet A

CSS Style Sheet B

Web Site

e.g. HTMLpage

External CSS files

More than one Style sheet can be appliedto an HTML page.Also, a Style sheet can be applied to many pages.i.e. a single change to the style sheet updates allthe pages it is associated with.

ExternalCSS Styles


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 thedialog 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 Redefining HTML stylesstyles


Drag and DropDrag 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.



The Target

The layer which is activated


Activating the Duck !

Step 1 select the <Body> tagto create an Onload event

Step 2 Select the Drag layer behaviour

Step 3 Pick the layer to dragand define the Target areai.e. the position of the nest !Hint: move the layer to the target and press

Get Current Position to define the target position



The advanced features allowthe user to call JavaScript functions(e.g. written by the developer) oradd a single line of JavaScript(e.g. an alert message)

The JavaScript function isonly 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 dragevent


FormsForms• 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’ ifmultiple line is selected in the property inspector)

Add check box

Add list Add image object(e.g. can be used to createsubmit buttons)


Example : FormExample : Form

Forms are always shownin Dreamweaver within RED DASHED LINEs


The rest of The rest of the bookthe 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


Machine Based TutorialMachine 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 2nd key text book before the next lecture– Ulrich, K - Visual Quickstart Guide FLASH MX 2004

for Windows and Macintosh

University of Sunderland CDM105 Session 7 Advanced Dreamweaver More functions to help create better...

Documents

Transcript of University of Sunderland CDM105 Session 7 Advanced Dreamweaver More functions to help create better...