Presentation is loading. Please wait.

Presentation is loading. Please wait.

DREAMWEAVER MX COURSE. Vision  Individual learning objectives: what do you want to learn?  Mission of bridging  ‘Being at service’ attitude.

Similar presentations


Presentation on theme: "DREAMWEAVER MX COURSE. Vision  Individual learning objectives: what do you want to learn?  Mission of bridging  ‘Being at service’ attitude."— Presentation transcript:

1 DREAMWEAVER MX COURSE

2 Vision  Individual learning objectives: what do you want to learn?  Mission of bridging  ‘Being at service’ attitude

3 Macromedia Courses  Sessions  Goals  Presentation of new material  Model use  Feedback  Guided practice  Independent practice  Closing the session  Format  Concept – intro  Demo if appropriate  Walkthrough being on the same train  Practice  Recapitulation & closing the session

4 Introduction on web design  Internet / Extranet / Intranet  Html / Xml / XHtml – standards  Script languages  Browser compatibility  Protocols  Evolution of web design tools and wysiwyg editors

5 Web Site planning  Items to consider in a ad random order: Graphics Content structure Navigation Technology Browsers Language Meta Communication aspects Templates Internal communication

6 Web Site planning  Take inspiration from internet / intranet sites / colleagues / …  Plan on paper Target browsers Design Target public Aims Structure  Prepare Structure File structure Content structure Graphical structure  Configure DreamWeaver / Environment  Create first set of pages (# versions) home page sub home pages template stylesheets  Feedback & Decision  Production process fine tune tools double check on Browser / HTML / XML / platform roll out of first version of site  Upload for & feedback from test user group  Correction phase & final uploads

7  About the Course  Course Format  Course Objectives 1-4  Course Prerequisites  Course Outline : 10 units  Static Page Architecture  HTML  HTML Code Editors  Visual Editors  Viewing Spinning Wheels site Unit 1 : introduction

8 Unit 2 : getting started  Introduction to Dreamweaver MX 2004  Dreamweaver Interface Basics  startpage & preferences  workspace: panels, properties, insert bar, views, new document  walkthrough 1: DW interface  Defining a Local Site  Root folder - Basic / Advanced - Cache  File Panel  walkthrough 2: Define a site  Creating a Website  New page and New doc preferences  Title and save - Home page  Preview & browser settings  walkthrough 3: Create your first page – XHTML compliant – Spinning Wheel Biking Tours – biking.html - preview  Setting Document Properties  Background color & background  Default text  walkthrough 4: properties Verdana, text #099, bgcolor #fc6, bgimage wheel_bkgd.gif – testpage.html

9 Environment  Layout design versus standard design  Code view / design view  Panels system & panel groups Insert panel (common – layout – text – tables – frames – forms – templates – characters – head …) Design panel (css – html styles – behaviours) Code panel (tag inspector – reference) Assets panel Advanced layout (layers – frames) Site panel Creating a new panel

10  Property inspector  Launcher  Tag selector  Visual Aids  Ruler and Grids  Other status bar components Environment (2)

11 Environment (3)  Dreamweaver fine tuning with Edit Preferences Choose icons and text initially & Accessibility for Tables and Images Wrapping setup for code view External editors Manage Launcher panel Define browsers

12 Basic Site / Page setup  Site definition Wizard / advanced ftp versus local network Home page definition Testing connection  Page properties settings  Head properties  Doc Type Settings

13 html basics  Tags  Attributes  Basic & sample html page  Tag Library Editor  Quick tag editor

14 Design methodology  Working with tables  Lay-out design  Working with layers  Frames

15 Unit 3: Adding Content to the site  Adding Content  Import Text Files/Word/Excel files  Cleaning Word HTML  walkthrough 5: biking.html / *.txt – bikadv_word.html – check nr of code lines  Controlling Document Structure  Aligning  walkthrough 6: biking.html apply headings – par – copyright  - types – nest - use bikingadvword.html  walkthrough 7: biking.html format lists  - - multiple spaces  walkthrough 8: insert -  Adding Special Characters  quick tag editor  insert date and time  walkthrough 9: insert © - - insert date

16 Working with text  Input Typing in Pasting / Pasting Html Importing text from Word  Text issues & ; & ; Indentation  Lists Ordered - Not ordered List settings (recount, bullet…)

17 Working with text (2)  Input Typing in Pasting / Pasting Html Importing text from Word  Text issues & ; & ; Indentation  Lists Ordered - Not ordered List settings (recount, bullet…)

18 Working with text (3)  Fonts Font tag editor Specific fonts like Verdana, Georgia Font Properties  Simple text styles css styles html styles  Search and Replace  Specific text Comments Special characters

19 Unit 4 : Formatting Text  Formatting Text  Web / Mac / Block versus Character  - bold/italic – alignment  walkthrough 10: calendar.htm – h1,verdana,18pt,#f60 – align, emphasize  Introducing Cascading Style Sheets  settings – terms – benefits  font changes create classes  rename & apply styles  walkthrough 11: create/apply main/sub heading styles  Creating Styles  types / procedure / overview 4-18  walkthrough 12: calendarText – Arial, 10pt, 10px indent  Creating Tag Selectors  procedure + File/Replace to remove attribute class  walkthrough 13: duplicate.dateHeading/ h3-h2-h1/ remove

20 Unit 4 : Formatting Text (2)  Creating Advanced Styles  Pseudo-element / Combination / Pseudo-class / ID selectors  vb p 4-26  walkthrough 14: calendar.htm – p,li – p,strong  Exporting CSS Style Definitions  Attaching External Style Sheets  export, link, import  walkthrough 15: export to biking.css, attach to 2 pages, del  Creating a New Style Sheet  walkthrough 16: styletest.htm – test.css – #styles 4.36  Editing Style Sheets  Tag inspector / edit style / edit style sheet / manually edit  walkthrough 17: styletest.htm – edit p,li – add strong  Cascading Order and Inheritance of Styles  ex 4-42/43  walkthrough 18: styletest.htm - in this doc - #0f0 - in test.css, 12pt, see inheritance

21 White space  Images  Indentation  Paragraph versus line break  Tables – cell padding  transparent images and placeholders

22 Unit 5: Working with graphics  Graphics on Web Pages : formats  Placing Graphics on the Page  image path  accessibility  methods: insert bar / assets / file panel  walkthrough 19: itineraries.htm – stylesheet – add bannertours & map to fav – set accessibility – add graphics  Modifying Image Properties  resize / align / wrapping / spacing / border / alt /  walkthrough 20: center – wrap around map – adjust styles, p 10pt, ul indent 20, h3 clear left  Editing Images  walkthrough 21: ride2done.gif to day1 – crop - modify  Roundtrip Editing with Fireworks  walkthrough 22: optimize banner in Fireworks (compr 80)  Adding Flash Movies  walkthrough 23: delete banner – insert flash.swf

23 Working with images  gif / jpg / png  Inserting images  Inserting an image map  Background images  Roll-over images  Navigation bar

24 About colours  web safe colour palette  Set colour scheme

25 Unit 6: Navigation  Understanding Site Navigation  hypertext links / link types  Linking to Files in Your Site  paths – p. 6-5  methods: point to file / browse / modify link  update links / link colors / states / pseudo class selectors  walkthrough 24: trainingtips.htm – biking.css – Spinning wheel link – see tips – pseudo classes  Linking to Sites  absolute links and targets  walkthrough 25: link to macromedia + re-use  Linking to Named Anchors  creating anchors / conditions / invisibles  methods: point to file / use of #  walkthrough 26: tips.htm - tag selector 400px width – add anchors – internal links – add to top

26 Unit 6: Navigation (2)  Adding Links  walkthrough 27: tips.htm – add link  Linking from Images  image map creation & types of hotspot  walkthrough 28: map.htm – use # link type to illustrate – link to trips.htm/hawaii  Creating a Navigation Bar  insert functionality & accessibility  walkthrough 29: biking.htm – add navigation bar w/o table – home/destinations/Itineraries/trainingtips – copy to pages  Creating a Jump Menu  walkthrough 30: biking.htm – jump menu idem as wt 29

27 Links  Different ways to make links Pointer & Shft Pointer Via property inspector Modify, Make link Right mouse button, make link  Types Internal Relative Absolute links

28 Links (2)  Creating links Text / Images / Objects dummy links #  Link targets  Changing links

29 Unit 7: Designing page layout  Understanding Page Layout  Visitors / browsers / 400 px column rule  Containers / Layout  Structuring Page Layout with Tables  Creation / selection / expanded mode  Properties / Row editing / Merge / Split / Sorting  walkthrough 31: california.htm – transform into table – sort – table, th, td, caption tag style – cellspacing: 0  Importing Tabular Data  walkthrough 32: bikeparts.htm – import – format – remove depreciated tags  Using Table Layout View  Use / use of grid  Layout cells & tables / modifications / nesting  walkthrough 33: new doc – layout.htm – drag in content  Using Layers for Layout  Browser support  Creating layers / properties / layer panel / NS fix  walkthrough 34: Itineraries.htm – text in layer – image in layer  Hiding and Showing Layers  Behaviors / Show-hide behavior  walkthrough 35: Itineraries.htm – 3 maps – show/hide behaviors  Converting Tables to Layers  walkthrough 36: convert tables into layers in layout.htm  Converting Layers to Tables  walkthrough 37: new doc – convert into layers2table.htm

30 Basic Table layout  Inserting tables  Inserting tables in layout view  Specifics Splitting Merging Span Selecting Inserting/deleting rows and columns  Command Format table Sort table

31 Unit 8 : Using libraries and templates  Site Library Items  Creation / viewing / using library items  Updating & deferred update  Modifying / detaching / recreation when deleted  walkthrough 38: Itineraries.htm / add flash object to library / insert in tips.htm / modify by adding table & title in cell / update  Creating Site Templates  Intro & Regions  Creation & use  walkthrough 39: trips.htm – create template with nav bar & banner – save wheelwalk.dwt  Defining Editable Regions  Different methods (insert template / insert panel / right clic)  Removing make-up  walkthrough 40: create body region  Using Templates  File New / Assets / Insert panel  walkthrough 41: save calender.htm as *.old – create new calendar.htm – insert content  Modifying Templates  walkthrough 42: center heading and updates  Applying a Template to an Existing Page  walkthrough 43: trainingtips.htm - clean after apply (delete nav bar)

32 Templates  Creating a template  Editable and non-editable regions  Applying templates

33 Unit 9: Creating Forms  Understanding Forms  Creation and form properties  Form objects and properties  Tips 9-6 and 9-8  walkthrough 44: create request form 9-14  Form Processing  Action settings  form data  walkthrough 45: send by  Optional walkthrough 46: search.htm by google  Setting Focus in a Form  walkthrough 47: add to body – onload=“window.document.RequestInfo.name.focus()”

34 Forms  Basic forms features  Post and Get

35 Unit 10: Testing, maintenance & uploading  Testing Your Site  Checking accessibility  Checking links  Checking browser compatibility  Reports  Check spelling  walkthrough 48: test lab/index.htm on # criteria  Maintaining Files  rename / move / integrated file browser  walkthrough 49: rename file - folder  Connecting to a Remote Site  adding remote site  ftp / cloaking  uploading, check in  finding newer files  walkthrough 50: edit site – set cloaking – change and put newer files  Synchronizing Files  walkthrough 51: stagesol/unit10/itinlink.htm – insert date - synchronize

36 Site management  Uploading / Downloading / Synchronisation  Site map structure File names / Page titles Hidden files Dependent files Determine new home page to reduce files temporary

37 Site management (2)  File management Changing locations / names for files Selecting files File New Cloaking  Site Preferences  Site import

38 Check and change  Preview in browsers  Check target browsers  Validate Mark-up  Check links  Check spelling  Window sizes

39 Short cuts  F4: hide panels  F8: site window  F12: Preview  F10: Code inspector window  F11: Assets  F2: Layers  Ctrl-Tab switch between documents  Ctrl-´: switch between code and design view (or Shft- Arrow up/dn)  Ctrl-T: quick tag editor  Shft-Enter:  Ctrl-L: make a link  Ctrl-Shft-Space:  Shft-click to select multiple layers  Ctrl-T: Quick Tageditor in design view  Ctrl-space: Code hints  Shft-F1 : Go to code reference  Ctrl-U: Edit preferences  F5: refresh design view, site panel etc.  Alt-F8 : site map  Ctrl-F5 : Tageditor  Shft-arrow up/dn : switch design/code view window  Often used windows shortcuts (Ctrl-N,Ctrl-A,Ctrl- S…)

40 Resources  Web sites

41 Resources  Newsgroups forums.macromedia.com/macromedia.dreamweaver macromedia.dreamweaver  Books Dreamweaver MXMagic, New Riders, ISBN: : Dreamweaver MX Bible, John Wiley & Sons, ISBN: :  E-zines / List servers / other links SiteProNews - Lockergnome webdevelopers MX 2004 Feature tour at

42 Resources  Graphic resources  Html

43 Quizz 1. De default instelling voor het Valign attribuut in een tag is:  left  center  middle 2. Ik wens een stijlblad te linken aan een template document:  dit is geen enkel probleem  ik dien dit te doen vooraleer ik pagina’s begin op te maken op basis van deze template  stijlbladen kunnen niet gelinkt worden aan een template 3. Ik ben op reis en krijg een dringende opdracht een aantal webpagina’s van mijn dienst aan te passen – ik ben echter niet in het bezit van de bestanden:  ik vraag mijn dienst de bestanden per express op te sturen opdat ik de locale structuur van de site kan opmaken en vervolgens de gewijzigde bestanden kan uploaden  ik definieer de site structuur in Dreamweaver en synchroniseer eerst de locale en remote struktuur; vervolgens kan ik de gewijzigde bestanden uploaden  ik download de betreffende bestanden via Internet Explorer die hiervoor een speciale functie heeft – save as complete webpage; vervolgens upload ik de gewijzigde bestanden 4. Een html stijl is:  een html tag die het begin van een stijltoepassing aanduidt  een functie in Dreamweaver om efficiënt html tags aan tekst toe te kennen  een alternatief voor het werken met stijlbladen 5. Een mousover javascript toepassen:  kan alleen maar in code view worden uitgevoerd  kan makkelijkst via een server behavior worden uitgevoerd  kan makkelijkst via een client behavior worden uitgevoerd 6. De alt tag in een afbeelding:  biedt de mogelijkheid een alternatieve omschrijving in te brengen, die wordt weergeven door de browser als men een mousover beweging uitvoert of als de surfer ‘afbeeldingen weergeven’ heeft afgezet.  maakt het mogelijk een lage resolutie afbeelding in te laden vooraleer de zwaardere en definitieve afbeelding op het scherm verschijnt  is het html attribuut dat slechtzienden toelaat informatie te bekomen over de afbeelding 7. Bij de aanmaak van lagen/layers gebruikt Dreamweaver volgende tag: 

44 DREAMWEAVER ADVANCED COURSE

45 Deeper analysis of basic features Tag library editor Use of built-in templates & exchange of templates Making an advanced menu with DW External style sheets and style sheet functionalities Panels (assets, new panels …) Editing Code in code view Creating own table formats and color formats

46 Extra functionalities Behaviours & Dreamweaver Extensions Timeline Create web photo album Edit Command Code snippets Design notes & collaboration issues Sort & format tables Coding help

47 Validation and checking Browser compatibility issue (preview, debug, validate) Check browser scripts and referral Checking

48 Advanced layout issues Frames Nested tables & other table issues Nested layers & other table issues page layout Tracing image Layers to tables and vice versa

49 Multimedia aspects Embedding Music Embedding Video Flash objects Applets

50 Script integration Linking html pages with a MySql database through use of php scripting Linking Form results with a php script to fulfil post operation

51 Import, export, convert issues Tabular data Xml, Xhtml, Doc type settings Word Fireworks

52 Search engine aspects Meta tags Preparing web pages for search engine detection Search engine declaration


Download ppt "DREAMWEAVER MX COURSE. Vision  Individual learning objectives: what do you want to learn?  Mission of bridging  ‘Being at service’ attitude."

Similar presentations


Ads by Google