Wiley Master VISUALLY Dreamweaver CS4 and Flash CS4 Professional
Contents
1. Dreamweaver s various workspace layouts Search Box Collapse Panels Panels Property Inspector to Icons Search Dreamweaver s Collapsible panels Allows you to change help files directly by Collapses the provide most of the properties of objects on typing a term here panels to icons functionality in the your Web page program Open a Blank Web Page ou can get started creating Web pages in Dreamweaver very quickly by creating a new blank page You can then add content and design to your page as you like For example in Windows Vista Dreamweaver can be launched by clicking the Start button and then clicking All Programs Depending on whether you purchased Dreamweaver as a stand alone product or part of one of the Creative Suite packages you will find an appropriately labeled Adobe folder from which you can click Dreamweaver CS4 Open a Blank Web Page b Open Adobe Dreamweaver CS4 Click HTML Anew blank document opens Explore the Dreamweaver Workspac A chapter The Start Page which displays when Dreamweaver first opens or when you have no other documents open provides quick links to create a blank page in a variety of formats HTML creates a basic blank document ColdFusion PHP and ASP VBScript create pages that allow you to start building dynamic sites a topic that is covered in detail in Part IV of this book XSLT is a special format that works with XML documents The fina2. are using the vertical split you can choose on which side the Design screen and Code screens appear by clicking Edit and then clicking Design View on Left Explore the Panels ou can access most of the features of Dreamweaver through panels along the sides of the window Each panel provides a specific set of functions and related panels are grouped together You can expand or collapse a panel by double clicking the tab that contains the panel s name When in a panel group individual panels can be accessed by clicking the tabs You can move panels to other locations on the screen or into other groups by dragging their tabs This set of panels that runs along the right edge of the screen can be collapsed to icons with labels so that it takes up very little room a feature that is particularly handy for designers working on small screens The set can be further resized to show only icons as well Once the panels have been collapsed to icons you can access a panel temporarily by clicking its icon The panel collapses again as soon as you click elsewhere on the screen The Window menu provides a list of every panel available in Dreamweaver and allows you to open panels that are not currently visible Explore the Panels D Click Window Dreamweaver displays a check mark next to each panel that is currently open 2 Double click a panel s tab to expand or collapse it In this example the panel expands t
3. in Design view and vice versa and so it is possible to freely switch between the two views as needed while editing pages The Code view toolbar gives you additional functionality when working in this environment Running down the left edge of the screen the toolbar lets you open pages expand and collapse blocks of code turn line numbering on and off insert and remove comments and more lE ru xi We rmm Hedy comm corria ia Wris w W A DGH E Wha dew met x mmr TYFE him PUBL M3 CHDTO HTML 1 0 TrandhonaiEH T mt himi aminas i se as cet A ekrid haad mets hiip aqir Gorter l Type carat terbhiml chars ulf i dher uriled Gaumate 4p e Eral Te eve at chore TR oe lt Trade mia a Dd ea inet ree 3 6 Be Taine ered Hd hady sihid 4p Cede ri muhe wi dran hoak 4 De mcr mhir mpk ia dic er paani Explore Split View reamweaver Offers a third view that provides the best features of both Design and Code view Split view divides the screen in half showing Code view on the top of the screen and Design view on the bottom although you can switch these if you prefer A divider bar that separates the two allows you to give more screen space to either view as needed Clicking in the Design half of the screen allows you to work in the same way you would in Design view but you are now able to see the underlying code as Explore Split View cp Click Split in the Document toolbar T
4. then appears with the other workspaces so that you can switch to it whenever you want Explore the Dreamweaver Workspace P Ik iia n OL ti o M te e Taea Um HTL 1 0 Tharah enal ENT haud amete hip sgu Corient ka EN S best charseteug a Ae noted Douman thasd lt body hi ialcomes bo Brady Stodigns th sHhadat Sou bg akal ler ar Welcome to Brady Studios o Brady Studios Can I delete workspaces Ww You cannot delete any of the workspaces that are preinstalled with Dreamweaver but you can rename or delete workspaces that you create by clicking the workspace menu and selecting Manage Workspaces This displays a dialog box that lists all of the workspaces you have created When you select one you can rename or delete it 13
5. 4 Introduction to the Dreamweaver Interface The Dreamweaver interface is made up of three basic elements the menu bar the panels and the main workspace When you first launch Dreamweaver the main workspace displays the Start Screen ith Dreamweaver CS4 Adobe has radically reengineered the Dreamweaver interface to provide a more unified experience across all of the Creative Suite applications If you are familiar with Photoshop or Illustrator many of the interface elements will be familiar to you Start Screen Menu Bar Layout Menu Provides a central location to select Provides access to menus Allows you to switch recently opened files create new and commands layouts documents in various file types or create documents from samples WB Fi Edt View ied Modify Foret Comments Site Window Hor M gt A coon a 7 Extend Dreamweaver Menu H Accesses online tools to add additional features to Open a Recent hem Create New Top Features videos Sj m Drea mweaver D opn Ta we eae Pislvted Fies i TI cowrustor jei AS j FAP sr vIe Em Cade Havigeto tal ar creas Ei Dalcact Wiz rd Ej s Tj Jmasmp i af Wab Wied pert J ees Site Menu Provides commands for setting up and modifying site definitions TJ ML j i JavaSoripi Suppor oa Uraatansver iia 5 ira SS vom Getting Hated Ss Dw Da cme Workspace Menu BH Oreotrweever Exchange eee Allows you to switch between
6. ar The document displays in Design view Type some text in the page The text displays as it would in a Web browser E Te xi Vee inn Hai comm Orri SH Wris Wi E f A CER E a Whit x bdin X HT Heo Ee mi ihn T eles sive fire im melo te oaar Wakana bo Drak Sader JiR PRHE i Go Pi E E pleeg Ree Flu Teen 2 ad fq Enter Code in Code View ou can accomplish most of your work in Dreamweaver in Design view but there may be times when you need to edit the underlying code of a page directly For these situations Dreamweaver provides a powerful code editing environment Code view allows you to enter X HTML CSS JavaScript or other code It provides code hints for all of the languages it supports as well as line numbers and customizable color coding to make reading and editing code easier Enter Code in Code View Click Code in the Document toolbar The document switches to Code view Type lt to begin a new HTML tag From the code hints select an element you want to use and then press Enter Dreamweaver inserts the tag name Type gt to finish the tag Type the text to be marked up by the tag O Type lt Dreamweaver inserts the closing tag Explore the Dreamweaver Workspace chapter All of the panels that you use in Design view to work with your pages are available in Code view Any changes made in Code view are reflected
7. e in a particularly long page where it can be difficult to find the specific block of text Using the Split view you could scroll the Design section to the section you need to edit and immediately the Code view scrolls to that same section of the page and places your cursor in the code that matches the Design selection Explore the Dreamweaver Workspace Can I select the same portion of the page in both the Code and Design sections of chapter Ps Ge es ee ae aa Ge me sh m A ockun ie Gaiman GTE en ga G FE ae Welcome to Brady Studios Bakare bo lirat Selo aan sane Fer a a pei phocan wade eo eo ee ap er pe elcome fo Brady Budos your source for al cf sour professional phobography j raada ap bodys 1 PEEHI i Ga Ea ea Ge eee a Se ee aaa Gis hte A m A ockun eee 7 Ihde Z Welcome to Brady Studios Selene akan bo lirat Selo aan sane For al ar pedi phony wade rer Pah Be ed Shl om se iw STE ee sy Can I split the screen vertically as well as horizontally w Yes In Dreamweaver CS4 you can orient the split to show the pages side by side rather than having one on top of the other When you are in Split view click View and then click Split Vertically Dreamweaver will remember this setting until you deselect it and so if you switch back to Design or Code view your screen will still split vertically next time you switch to Split view When you
8. els using the F4 keyboard shortcut you see a gray bar where the panels were If you simply move the mouse over that bar the panels in that area reappear and then disappear again when you move your mouse away from them Can I put panels on the other side of the screen wW Yes You can drag panels to any edge of the screen When you see a thin blue line appear release your mouse and the panel docks along that edge You can also have two columns of panels along either the right or left edge or two rows along the top or bottom 11 View Workspaces reamweaver provides a set of panel layouts called workspaces You can use the workspace menu in the upper right corner of the screen to switch between workspaces whenever you want Eight workspaces are available by default in the program Designer the default workspace shows those panels most likely to be used by Web designers creating static pages App Developer and App Developer Plus display the panels used by those creating dynamic Web sites a topic covered in Part IV of this book View Workspaces a Click Designer to access the Workspace menu 2 Select Classic Dreamweaver rearranges the panels From the Workspace menu click Designer Compact The panels are rearranged 12 Classic provides the panels that were available by default in older versions of Dreamweaver and places the Insert panel along the top of the screen Coder displays a set o
9. f panels along the left edge of the screen while Coder Plus adds several more along the right edge Designer Compact shows the same panels as Designer but collapses them to icons by default Dual Screen undocks all of the panels so that they are floating and can be easily moved to another monitor If you select a workspace change its panel layout and then want to revert to the saved version you can do so by reselecting the workspace from the menu Bf nu v eet ee heal ee Lin Ee d s aiok ETE amr lel efor we A ASE in Welcome to Brady Stu dinal CETTE H IDG TTFE mmi PUB Has ae engi Rehu TOs het tara shini emine hhi wong Deihi Po zhe mea biceeques Coman Typs oema inabhind charms ue i ia aider Umided Oout em snide ihamie shad shla Wgdome w Body Studiossh l vihady umne Click and drag the Insert panel into the middle of the screen The panel floats on the screen O From the Workspace menu click Designer Compact The panel layout is restored Can I create my own workspaces wW Yes You should begin by selecting the pre installed workspace that has the panel arrangement closest to the one you want Then you can move panels to other locations on the screen close those panels you will not be using or open and position additional panels Once you have the panel arrangement you want you can click the workspace menu choose New Workspace and then give it a logical name It
10. he document displays in Split view 2 Click and drag the gray bar that separates the two sections to resize them Dreamweaver resizes the sections Click View 4 Click Design View on Top Dreamweaver writes it The reverse is also true if you click in the Code half and type code you see the results appear in real time in Design view The disadvantage of Split view is that except for very large monitors you do not have much room in either of the two sections to work effectively and so many designers use it sparingly However it is a good way to have Dreamweaver help teach you the code as you can focus on your work in the Design section but then immediately see the associated code aod Vw ben Mey om Gerrei fu Wris Wa Mr r A DEKHIR 0E lS T r Tee oo zhi 2 ed mae ome we CTY E himi PUBL IS 0e07TO SHTML 1 0 TronstonalEn zj aa Ww OT Rhim OTO nn Arara denal ct sim minas Hip nea R ngi ehl saag i bhip sue Gorter Type rorat terbhiml chamasi ulj i iernile Gaumate t 2 a o u G aa PL 10 Trasen tEn mpeg Peller cit thick harsels iih is Dreamweaver swaps the position of the Code and Design views 5 Click in the Design view and type some text The text also appears in the Code view the Split view w Yes Any page element you select in the Design pane automatically has its code selected in the Code pane and vice versa There may be times when you need to edit a piece of cod
11. l three page options create a Cascading Style Sheet JavaScript or an XML document The final option in the column lets you set up a Dreamweaver site which is covered in Chapter 2 Pe ru xi e rm Hedy erm Gerri Sa Wris w m A Dohn E Add Text in Design View ou can use Dreamweaver s Design view to see a representation of what your page may look like in a Web browser You can create entire pages and even entire sites in Design view without ever touching the underlying code As you insert objects into your page in Design view Dreamweaver writes the code for you using proper X HTML Cascading Style Sheets CSS JavaScript or other languages based on the document type and your preferences Conversely any items you delete from Design view have their corresponding code deleted as well Add Text in Design View The Property Inspector the panel that runs along the bottom of the screen allows you to modify the properties or settings of objects after you have inserted them These changes are immediately reflected in the Design view interface as are any other changes that you make through other panels While Design view gives you a representation of what your page will look like in a Web browser it also displays additional page elements that may assist you in designing and working with your documents but that would not normally appear in a Web browser Click Design from the Document toolb
12. o show its features Click the Collapse to Icons button The main panel set collapses to show icons and labels 4 Drag the left edge of the icons to the right The icons collapse further hiding the labels 10 oho PAAR HF Carat vow Com Ha DO FS fist ill i DA k mi ve kmi Mb iere Mmmm em H E Se A eare E 3 Urwtkii ig en n 3 ns eo oe os ee Welcome to Brady Studios gt mr bre T dil TE STF meraka 5 Click the Expand Panels button The panel set expands O Click and drag the Insert panel to the top of the screen just below the menu bar The panel repositions itself Drag the tab of a panel The panel floats on the screen Cora Kea Explore the Dreamweaver Workspace chapter i bk Weis ce ie r A vernik Po Se de mE a S a E g d D Dl A elcome to Brady Studios PSS iat 6 Rr eB aes A mien Corer D 1 a a Ta Te aig Tap 7 P Tt Ltg ee Se i DF oe a Ta i Sala Tapi 5 Can I quickly show or hide all of the panels at once w Yes Simply press the F4 key on your keyboard which hides all of the panels Pressing F4 a second time brings them all back in the positions in which they were when you hid them Is it possible to hide all of the panels and then have them simply appear when I need them w Yes If you hide all of the pan
Download Pdf Manuals
Related Search