University of Sunderland CDM105 Session 7 Advanced Dreamweaver More functions to help create better...
-
Upload
daniela-hopkins -
Category
Documents
-
view
214 -
download
0
Transcript of 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
University of Sunderland CDM105 Session 7
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.
University of Sunderland CDM105 Session 7
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
University of Sunderland CDM105 Session 7
Splitting a page into Frames: Option B
Frames:Splits the page or current frame
Modify > Frameset
Splitting a pageSplitting a page
University of Sunderland CDM105 Session 7
Use the Properties Inspector and theFrames panel
Step 1Select the FrameYou want to edit
Step 2 : Modify the Frame properties
Naming and ChangingFrame Properties
University of Sunderland CDM105 Session 7
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
University of Sunderland CDM105 Session 7
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
University of Sunderland CDM105 Session 7
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
University of Sunderland CDM105 Session 7
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
University of Sunderland CDM105 Session 7
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
University of Sunderland CDM105 Session 7
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
University of Sunderland CDM105 Session 7
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)
University of Sunderland CDM105 Session 7
Standard View
Dotted outline indicates an invisible borderi.e. border=0 in the <table> tag
Layout ViewLayout View
University of Sunderland CDM105 Session 7
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
University of Sunderland CDM105 Session 7
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.
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 selectModify Menu > Convert > Layers to Tables
LayersLayers
University of Sunderland CDM105 Session 7
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
University of Sunderland CDM105 Session 7
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
University of Sunderland CDM105 Session 7
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
University of Sunderland CDM105 Session 7
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.)
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
University of Sunderland CDM105 Session 7
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
University of Sunderland CDM105 Session 7
External CSS Styles
Attach CSS
When external CSSis used its file nameis displayed in theCSS panel
Edit style sheet button
ExternalCSS Styles
University of Sunderland CDM105 Session 7
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
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 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
University of Sunderland CDM105 Session 7
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.
University of Sunderland CDM105 Session 7
Drag and DropDrag and Drop
The Target
The layer which is activated
University of Sunderland CDM105 Session 7
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
University of Sunderland CDM105 Session 7
Drag and DropDrag and Drop
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
University of Sunderland CDM105 Session 7
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)
University of Sunderland CDM105 Session 7
Example : FormExample : Form
Forms are always shownin Dreamweaver within RED DASHED LINEs
University of Sunderland CDM105 Session 7
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
University of Sunderland CDM105 Session 7
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