Wiley Dreamweaver CS4 For Dummies
Contents
1. Data Insert panel Displays options for building dynamic Web pages powered by database material 1 Spry Insert panel Features a collection of widgets that combines HTML CSS and JavaScript to create interactive page elements such as drop down lists and collapsible panels 1 InContext Editing Insert panel Displays features that are handy for cre ating Repeating and Editable Regions as well as managing CSS classes when working with dynamic content 1 Text Insert panel Displays common text formatting features including paragraphs breaks and lists Favorites Insert panel Enables you to right click Windows or Control click Mac to add any of the icons from any of the other Insert bar options to create your own collection of favorite features At the end of the drop down list are the two options that control the display of the list of options in the Insert panels Color Icons restores the color to the icons Hide Labels Show Labels enables you to display the names of the Insert panel features next to each icon or to remove the names The Property inspector The Property inspector is docked at the bottom of the workspace in Dreamweaver If you prefer you can click the gray bar at the top of the inspector and drag it to detach it so that it floats in the workspace You 26 Part I Creating Great Web Sites DE Figure 1 9 The Status bar and the Property inspector in CSS mode ar can move the ins2. Figure 1 6 5 insert ov Tag When you z noe use split 8 J pinto Ftv 9 sa view you Ua Date can select E server side Induce text in design view and Dream weaver auto D mys matically fee aes highlights cei mane the cor ka 109 v 777 x199 K7 i sec Uicode UTF 6 PROPERTIES responding HTML Targsted de New C55 Rule gt Fork Defaut Fert Bie code in nctdtRue ncssPan See None E code view mome DE 21 22 Part I Creating Great Web Sites ar Changing workspace layouts Dreamweaver CS4 has eight preset workspace layouts to choose from These layouts arrange the many toolbars panels and other features in popular con figurations You can change layouts by choosing Window Workspace Layout and then choosing from any of the listed layouts such as Designer as shown in Figure 1 6 or App Developer as shown in Figure 1 7 You can also access the list of layouts by clicking the arrow next to the layout button as shown open in Figure 1 7 As the names imply the Designer layouts were created for people who have a design background whereas the App and Coder layouts were created for programmers who are likely to prefer working in the code view more than in design view In addition to the preset workspace layouts you can create your own by opening closing or moving any of the panels inspectors or other features as described in the following sections You can even save your own layou
3. such as the image map options when a graphic is selected Click the gray bar at the top of the inspector to close and open the inspector The status bar The status bar is located at the bottom of the Document window and just above the Property inspector as shown in Figure 1 9 The status bar includes access to a number of features that control the display of a page in Dreamweaver s workspace such as the magnifying glass which enlarges the view of the open page Chapter 1 The Many Ways to Design a Web Page 2 7 On the far left of the status bar as shown in the top of Figure 1 9 you find the tag selector which displays the HTML tags and CSS rules that apply to any selected element on the page In Figure 1 9 the cursor is inside a text block that s formatted with the lt h1 gt tag which is inside a lt div gt tag witha container ID which is inside the lt body gt tag Clicking any tag in the tag selector selects the tag and all its contents in the workspace Right clicking Control clicking on a Mac a tag opens a pop up menu with formatting options that make it easy to add or remove tags and CSS rules Toward the middle of the status bar you find the select tool hand tool zoom tool and magnification pop up menu which you can use to move enlarge or reduce the display of a page in the workspace On the far right side of the status bar is the download size download time tool which displays the total size of the Web pa
4. COMPANY View All Products Learn Expression Web Studio amp Office Learn View Our 24 7 Dreamweaver Online Training Subscriptions GET STARTED HERE Returning Online User Sign In Take the Free NEW Creative Suite Sale Online Test Drive Industry Professionals 24 7 Support OS X Leopard Updates windows Ipcates My Accoui Contact Us as Microsoft Expression Technical Support 19 20 Part I Creating Great Web Sites Understanding Browser Differences MBER we amp Before you start creating Web pages know that no matter how carefully you create your designs your pages will never look exactly the same to every possible visitor to your site That s because one of the greatest advantages of the Web is also one of the biggest challenges HTML was created to share information in a way that could be displayed on every computer on the planet Unfortunately not all those computers use the same browsers the same fonts or the same sized monitors On top of that a lot of older Web browsers are still in use out there and they can t display the latest Web features Even all the newer browsers don t display the latest Web design options the same way Because of these browser differences you have more design control today than ever before and the capability to create more interesting Web sites but you also have more challenges if you want your pages to look good to every one who m
5. Site Window Hep Gly Ste Av ee ee 7 F J Apa Developer Plus r Classic tens Loca view G Coder G a Ay TA x OC Se Coder Plus tional dtd gt Local Files Sael Te tt Designer gt Site Lions C jUsers Fokk 4 Designer Compact i mages Fald E ay fust page htol 1KB ref Dual Screen html iehl 248 Firef 2 Reset App Developer prey himl 2x Pref X ETAT AE S tortimi 1ra roar A New Workspace Manage Workspaces 5 2 al o amp ay x 4 Too many files Lege ebods gt k3 109 v 777 x249 IK L sec Uvcoda UTF 8 24 Dn Figure 1 8 When the panel group is collapsed you can click any panel name to expand only that panel es Part I Creating Great Web Sites The docking panels The docking panels are located to the right of the work area when you choose any of the designer layouts such as the one shown in Figure 1 6 or on the left when you choose any of the developer layouts such as the one shown in Figure 1 7 The docking panels display a variety of important features in Dreamweaver including the Insert panel described in detail in the following section the Files panel which displays all the files and folders in a site and the CSS Styles panel which displays a list of all the Cascading Style Sheets available to the document 1 To open and close panels click the gray bar at the top of any panel next to the panel s name or double click the name in the
6. Web sites as Chapter 1 The Many Ways to Design a Web Page 23 working links and dynamic content so that the page works in Dreamweaver much as it would when previewed in a Web browser The Title field dis plays the page title which is the text that appears at the top of a browser window when a page is displayed This is also the text that s saved when a visitor bookmarks a page Other features in the toolbar include the Preview in Browser button which launches the page in a Web browser the View Options button which provides access to additional display features such as the ruler and guides and the Visual Aids button which makes it easy to turn on special display features such as CSS Layout Outlines which add a thin dotted line around otherwise invisible elements such as lt div gt tags The Document window The big open section in the main area of the workspace is the Document window which is where you work on new and existing pages If you use the Designer workspace layout as shown in Figure 1 6 the Document window is displayed in split view showing the code at the top of the window and the design at the bottom If you want to hide the code which makes it easier to focus on your designs click the Design view button in the Document toolbar Click the Code view button to see only the HTML code and click Split view button to divide the window Dy Fic Edt View Insert Modify Format Commands
7. all your tables You can even combine CSS with tables to create more streamlined designs Considering frame options In Chapter 8 you find instructions for creating Web sites that use frames like the Flamingo site shown in Figure 1 4 Among Web designers frames are 18 Part I Creating Great Web Sites a little like the plastic Pink Flamingos stuck in the front yards of so many homes in South Florida some people love how kitsch they are others just think they re tacky Although frames still have a place on the Web many designers don t like them because they can make navigation confusing for visitors and make it difficult to link to pages within a site If you want to create pages like the one in Figure 1 4 that display multiple Web pages in one browser window you ll find everything you need in Chapter 8 Creating dynamic Web sites When you use Dreamweaver s most advanced features you can create Web sites like the one shown in Figure 1 5 that connect to a database and dis play content dynamically on a Web page What s happening behind the scenes of a site like the one at www TotalTraining com gets complicated fast but one of the advantages of using this kind of technology is that you can create a Web page like the one in Figure 1 5 that displays a collection of products and then display product information for each product individually drawing the product photos and other details from a database as a user requ
8. one person is working on the same site Without a clearly established site organization and some common conventions for tasks like naming files confusion reigns Managing your site s structure Managing the structure of a Web site has two sides the side that users see which depends on how you set up links and the side that s behind the scenes which depends on how you organize files and folders What the user sees The side that the user sees is all about navigation When users arrive at your home page where do you direct them How do they move from one page to another in your site A good Web site is designed so that users navigate easily and intuitively and can make a beeline to the information most relevant to them As you plan make sure that users can Y Access key information easily from more than one place in the site Move back and forth easily between pages and sections v Return to main pages and subsections in one step Setting links is easy in Dreamweaver the challenge is to make sure that those links are easy for visitors to follow One of the best ways to ensure that visitors can easily move around your site is to create a navigation or menu Chapter 1 The Many Ways to Design a Web Page 13 bar to include links to the main pages of your site on every page of your site You find instructions in Chapter 6 for creating a menu bar with CSS In Chapter 13 you find out how to use Dreamweaver s Spry features to cre
9. place ment of text and images i MBER et amp E The Chocolate Game Mozilla Firefox ere File Edit Wew History Bookmaks Tools Help Related Links Close www chocolategamensles cor vje ee See The goal is to get the chocolate from your forehead to your mouth without your hands To play open a box of flat chocolates they re easier to move down your face Tip if you get close to your mouth your tongue can help direct the chocolate to its your mouth final destination Because you can merge and split table cells you can use them to control the layout of a page positioning text and images more or less where you want them If you set the table border to 0 instead of 2 as I did here to show you the borders you can hide the table so that it doesn t interfere with the design Although I recommend that you redesign sites like the one shown in Figure 1 3 with CSS and lt div gt tags covered in Chapter 6 I do understand that some designers still find it easier to create layouts with tables and not every one has time to redesign existing Web sites Tables are still considered the best way to format tabular data like the col umns and rows that might make up a list of winners from the chocolate game with their photos and scores In Chapter 7 you find an introduction to Dreamweaver s Table features and tips for creating accessible table designs by including the table header tag in
10. you can create one that s ideally suited to a small screen like the one shown in Figure 1 1 another one that works best when the page is printed and yet another designed with a larger font size for anyone who may have trouble reading the small print that is so common on Web pages In Figure 1 1 you see one of the coolest preview features in Dreamweaver Device Central where you can preview your page designs in a variety of cell phone models to see just how different they can look when displayed on these small screens 1 Using CSS makes your site comply with the current standards Today the W3C which sets standards for the Internet recommends CSS because the best CSS designs are accessible flexible and adaptable Following standards has become increasingly important as Web design has become more complex over the years Adobe Device Central CS4 rare File Edit Project Devices View Window Help Close Deuce sets 6 MB Sampie Dece Set D Fente t 9 19 176208 CONTENT TPE FILE INFO A KEYPAD Ad Fish Lie 4 1 32176208 Ad Fesh ute 2016 aa RENDERING A Feen Lite 2032 240320 URL Ai Fhvch Lite 2 1 18 240520 a Flash Lite 21 12 2020 gt UinersVerineDocumerts0 nn sieslnesion wi D Feen Ute 3015 240x320 FiSmal Sorsan Rendering Fish Lile 3 0 32 240320 diriant This is an aporoxmsen of how the cantert appas on te selevted device wih Opera EA Local Lier p Smal Screen Rendering tama a
11. Chapter 1 The Many Ways to Design a Web Page In This Chapter Comparing Web design options Knowing about browser differences Developing a Web site Customizing your workspace n the early days Web design was relatively easy and vanilla boring You could combine images and text but that s about it no complex lay outs no fancy fonts and certainly no multimedia or animation Over the years Web design has evolved into an increasingly complex field and Dreamweaver has evolved with it adding new features that go way beyond the basics of combining a few words and images When I first started learning to create Web sites in the mid 1990s it was easy to learn and easy to teach others how to do it More than ten years and a dozen books later it s a lot more complex and I ve come to realize that one of the first things you have to understand about Web design is that there isn t just one way to create a Web site anymore Today you can learn how to design simple Web sites with HTML HyperText Markup Language in a matter of hours or you can spend years developing the advanced programming skills it takes to create complex Web sites like the ones you see at Amazon com or MSNBC For everything in between Dreamweaver is the clear choice among profes sional Web designers as well as among a growing number of people who want to build sites for their hobbies clubs families and small businesses Before I dive into the details o
12. any Ways to Design a Web Page Here s a bird s eye view of getting started in the Dreamweaver interface 1 When you launch Dreamweaver the Welcome screen appears in the main area of the program and reappears anytime you don t have a file open unless you close it by selecting the Don t Show Again option 2 From the Welcome screen you can choose to create a new page from one of the many Dreamweaver predesigned sample files or you can create a new blank page by selecting HTML from the Create New options in the middle column 3 When you select HTML and you choose None from the Layout list Dreamweaver creates a new blank HTML page in the main workspace as shown in Figure 1 6 The workspace consists of a Document window which displays the page you re working on and is where you add text images and other elements that will appear on your Web pages The Document window is surrounded by a collection of panels toolbars and menus that provide easy access to Dreamweaver s many features More detailed descrip tions of each of these follows Dy Fie Edt View Insert Modify Format Commands Site Window Helo Ev f Av DESIGNER v x fratage himi x Jead 5k z Design Tija My First Web Fage ot o aA ARS E CI DTD SETMI 7 z aii Ts lt DOCTY UBL 13C DTD XETML 1 0 le nace z t1 Emallik 3 2 amp tamed archer ee Ei Horas nue a I Tete
13. ate a drop down list using AJAX And in Chapter 9 you find instructions for using Dreamweaver s template and library features which make including menus on your pages faster and easier to update What s behind the scenes The second side to managing your Web site structure happens behind the scenes where your users can t see the information but you want some kind of organizational system to remember what s what You ll have files for all the images HTML pages animations sound files and anything else you put in your Web site Before you begin building your site with Dreamweaver think about how to keep track of all these files At minimum consider the following A file naming system For example naming image files consistently can make them easier to find if you need to edit them later Similarly giving the pages the same name for the main sections of your site that you use in the text of the links on your pages can make it easier to set the links 1 A folder structure When your Web site grows past a handful of pages organizing them in separate folders or directories can help you keep track Fortunately Dreamweaver makes this easy by providing a Files panel where you can see all the files of your site and even move and rename files and folders You find detailed instructions for organizing the files and folders in a Web site in Chapters 2 and 4 Understanding the basics of XHTML Hypertext Markup Language HTML is
14. check pages in and out so that no one overwrites anyone else s work You find information about these features in Chapter 4 EEEy Figure 1 4 Frames enable you to display multiple Web pages in one browser window i a Figure 1 5 Total Training com is a dynamic Web site that displays content froma database using PHP Chapter 1 The Many Ways to Design a Web Page Dy File Edit View Insert Modify Format Comrnands Site Window Helg PROPERTIES Image 53k D Map nov ining Of File Edit wiew History Bookmarks Tools W 130 H 202 V Space Hspare Tage ign Link betFreme topFrama my Gy Av DESIGNER COMPACT Fromes mages betwined homl Rat hem index htm fel totam stakers htwl too hem Do aero x sa AeA Help Related Links e gt E X hlig Motaraini som E e Caco Ss CY Software Training for C PRODUCTS Learn Your Software from the Training Pros Learn Microsoft A 6 We ve trained millions how to use the industry s most popular software Industry Buzz Popular Links Online Training CS3 Training Dreamweaver Training flash Tr ning Photoshos Training X TOTAL TRAINING ONLINE TRAINING Photoshop e A The Creative Suite gt E view Cart My Account Free E Newsletter Online Training Sign In Call 800 546 9620 reative Minds CS3 TRAINING SOLUTIONS
15. ests the infor mation When a site grows bigger than about 100 pages graduating to a database driven model like this is far more efficient than creating individual static pages for every product description or other content in your site Dreamweaver supports many technologies for this kind of site development including PHP JSP ASP NET and ASP In addition to drawing content from a database you can also create interac tive features that display content created by visitors to your site such as an online discussion board or any other system that collects data in one page and then uses that data to determine what s displayed on another page That s how the most advanced sites on the Web do things like remind you of the last book you searched for or keep track of your order as you select prod ucts in an online shopping cart Although I can t cover all these advanced fea tures in this book you find an introduction to creating database driven Web sites in Chapters 14 and 15 One other thing I feel compelled to mention at this point is that most of the big complicated Web sites in the world were created by a team of develop ers not just one person In the case of the Total Training site a great team of people was involved in the many elements of the site from the design to the videos to the programming If you re working with a team of developers you may appreciate Dreamweaver s site management features such as the ability to
16. f creating a Web page in Dreamweaver I think it s helpful to start by introducing the many ways you can create a Web site The more you understand about the various approaches to Web design the better you can appreciate your options 2 Part I Creating Great Web Sites Developing a New Site ar In a nutshell building a Web site involves creating individual pages and link ing them to other pages You need to have a home page the first page visi tors see when they arrive at your Web address also known as your URL and that page needs to bring them into the rest of the pages of the site usu ally with links to each of the main sections of the site Those pages in turn link to subsections that can then lead to deeper subsections A big part of planning a Web site is determining how to divide the pages of your site into sections and how those sections should link to one another Dreamweaver makes creating pages and setting links easy but how you orga nize the pages is up to you If you re new to this you may think you don t need to worry much about how your Web site will grow and develop Think again All good Web sites grow and the bigger they get the harder they are to manage Planning the path of growth for your Web site before you begin can make a tremendous difference later Neglecting to think about growth is probably one of the most common mistakes among new designers This becomes even more serious when more than
17. ge including all images and other elements on the page and the estimated time it will take the page to download based on the connection speed specified in Dreamweaver s pref erences By default the connection speed is set to estimate the download time of a page over a 56K modem but you can change it to a faster or slower speed by changing the preferences as shown in the following section Changing preference settings The more you use Dreamweaver the more you re likely to appreciate the capability to customize its features Remember that you can always change the workspace to better suit the way you like to work and you can easily alter Dreamweaver s preference settings using the Preferences dialog box To open the Preferences dialog box choose Edit Preferences on a Windows computer or Dreamweaver Preferences on a Mac Dreamweaver includes 19 different categories in the Preferences dialog box and makes it possible to change the appearance default settings and many other options throughout the program 28 Part I Creating Great Web Sites
18. he table borders although most designers turn off table borders when using Tables to create layouts like this Artesian Media Inc multimedia producers and consultants with a passion for news the web and how technology changes everything Mozil gt 2 ES Edit view History Bookmarks Tools Help Related Links Gb G hitta starve artesvanmedia corn sjej Gco a a R Ops ey d c Artesian edia A wwalbpring of createtty A We consult create present produce home Multimedia consultants with keynotes amp speeches a passion for news the web and Artesian Media partner Janine Warner will be how technology changes everything We consultwith a variety of clients in places like Colombia Mexico Russia and the U S Dave was a ques and video class for sites and teach web design using the latest in HTML CSS AJAX University of Kiev in March We createwel and multimedi 2 books amp videos We produce case studie and magazine and newspaper articles Janine s latest book is Web Sites Do It Yourself For We present informative and inspiring keynote speeches and seminars all over Dummies leam more the world Chapter 1 The Many Ways to Design a Web Page 7 D Figure 1 3 In the old days the only way you could create a 2 column Web design was by using an HTML table like the one shown here to control the
19. ight visit your site My best advice is to test test test and then ask your friends to test your pages some more If you want to play it safe the sim pler your page design the more likely it will look the same or at least similar to all your visitors If you want to create more interesting designs and you want to reach the broadest possible audience pay special attention to Dreamweaver s browser preview and compatibility features and be prepared to look for more advanced books and training programs when you finish with this book Entire books and Web sites are dedicated to creating highly complex CSS layouts that display well on a variety of computers and browsers In Chapter 4 you find more information about Web browser differences as well as Dreamweaver s testing and compatibility features which can help ensure your pages work well for a broad audience Introducing the Workspace in Dreamweaver CSG Dreamweaver can seem a bit overwhelming at first it has so many features spread among so many panels toolbars and dialog boxes that you can easily get lost If you prefer to understand by poking around have at it and feel free to skip ahead to Chapter 2 where you start building your first Web page right away If you want a tour before you get started the last few sections of this chapter introduce you to the interface and are designed to give you a quick overview of the features in this powerful program Chapter 1 The M
20. nderstand the differences in the many approaches to creating page designs to help you decide which one is best for your Web site whether you re building a new site or updating an existing one Appreciating the advantages of CSS A Web site designed with CSS separates content from design Keeping the content of a site such as the text and images separate from the instructions that tell a browser how the page should look has many benefits CSS simplifies design changes For example instead of formatting every headline in your site as 24 point Arial bold you can create a style for the lt h1 gt tag and use that tag to format all your headlines Then if you Chapter 1 The Many Ways to Design a Web Page Dn Figure 1 1 Designing Web pages with CSS can help you create designs that display bet ter on large and small screens it decide later that you want all your headlines to use the Garamond font instead of Arial change the style for the lt h1 gt tag only once in the style sheet and it s automatically applied everywhere you ve used that style 1 CSS enables you to create different style sheets for different audiences and devices In the future this is likely to become even more important as a growing number of people view Web pages on everything from giant flat screen monitors to tiny cell phone screens As you get more advanced with CSS you can create multiple style sheets for the same Web page For example
21. pector anywhere on the screen or you can drag it into the panel group and dock it there When you dock the inspector with the other panels you can expand and collapse it just as you would any other panels To restore the inspector to its original location choose Window Workspace Layout Reset I rather like that the Property inspector is handy yet out of the way at the bottom of the screen The Property inspector displays the properties or options for any selected element on a page and it changes based on what s selected For example if you click an image the Property inspector displays image properties If you click a Flash file the Property inspector displays Flash properties In Dreamweaver CS4 Adobe split the Property inspector into two sections for many elements one for HTML features and the other for CSS Use the CSS and HTML buttons on the left side of the Property inspector as shown in Figure 1 9 to switch from one to the other You find detailed instructions for how to use these two modes of the Property inspector in Chapters 5 and 6 cbody gt lt dvecontaner gt hi gt PROPERTIES IN HTL Targeted Rule body Font Default Font BIE S55 css Eck Rule e Sos medum v a At the bottom right corner of the Property inspector you see a small arrow Click this arrow to reduce the inspector Click it again to expand the inspector to reveal additional attributes that let you control more advanced features
22. r gt tag which adds a line break XHTML tags must have a closing tag even if there s only one tag and closing tags always contain a forward slash As a result the line break tag in XHTML looks like this lt br gt lt h1 gt Format headlines with heading tags like this lt h1 gt lt p gt Paragraph tags add a line break and a line space between elements lt b gt This tag makes text bold lt b gt This text will not be bold lt p gt One of the great advantages of using Dreamweaver is that you can specify formatting by clicking buttons or using menu commands and Dreamweaver takes care of writing the underlying XHTML code for you In the old days many Web designers created sites entirely in HMTL using tags such as HTML tables to create page layouts These days the best Web designs are created by combining HTML tags such as the Heading tags which include lt h1 gt through lt h6 gt the lt div gt tag which divides sections of a page and many other tags with CSS rules covered in the next section Comparing Web Designs Throughout this book you find chapters covering a variety of aspects of Web design from the basics of creating a page and adding images and links to more complex concepts such as Cascading Style Sheets CSS and one of the newest options in Web design AJAX Asynchronous JavaScript and XML You can even use these different technologies in combination The next few sections are designed to help you u
23. splay size PleshLite ONLINE LIERAR 2p N A splay 15 16 Part I Creating Great Web Sites PC Figure 1 2 This site was designed with one of Dream weaver s CSS layouts 1 Web sites designed in CSS are accessible to more visitors When Web designers talk about accessibility they mean creating a site that can be accessed by anyone who might ever visit your pages that includes people with limited vision who use special browsers often called screen readers that read Web pages aloud as well as many others who use spe cialized browsers for a variety of other reasons If you work for a university a nonprofit a government agency or a simi lar organization you may be required to create accessible designs Even if you re not required to use CSS or to design for accessibility it s still good practice That s why Dreamweaver includes so many CSS features and a collection of predesigned CSS layouts like the one I used to create the site design shown in Figure 1 2 You find instructions for creating CSS layouts like this one in Chapter 6 Reviewing old school designs Although CSS is by far the best option for creating Web designs today many sites on the Web were created with tables to control the layout like the one shown in Figure 1 3 Old school sites like this one were created with the HTML table tag To help you appreciate how this page was created I altered the original design to display t
24. tab at the top of the panel To move panels anywhere on the screen click the dark gray bar at the top of the panel and drag it to the desired location To display more panels select the panel name from the Window menu To expand or collapse all the visible panels at once click the double arrow at the top right corner of the top most panel 1 To expand or collapse a single panel when the panel collection is col lapsed click the name of the panel as shown in Figure 1 8 mecis pe Oocun websites Lionstindex html FEL SB Ff check Page 2 INSERT 7G a ar nements 3 aha mes asses Properties for a link color H 003 text decoration none Add Property ty a Chapter 1 The Many Ways to Design a Web Page 25 The Insert panel The Insert panel located at the top of the panel section includes seven sub categories each with a different set of icons representing common features Click the small arrow to the right of the name to access the drop down list and switch from the buttons of one subcategory to the buttons for another The options are Common Insert panel Displays icons for many of the most common fea tures including links tables and images Y Layout Insert panel Displays div table and frame options essential for creating page layouts Forms Insert panel Features the most common form elements such as radio buttons and boxes 1
25. the formatting language used to create Web pages When you open a Web page in a Web browser the HTML code tells the Web browser how to display the text images and other content on the page By default Dreamweaver CS4 writes XHTML instead of HTML because XHTML is a stricter version of HTML that s designed to comply with contemporary Web standards Among the requirements XHTML must be written in lowercase letters The basic unit of XHTML is a tag You can recognize XHTML tags by their angle brackets You can format text and other elements on your page by placing them inside the XHTML tags When you use the formatting tools in Dreamweaver the program automatically inserts tags in the code You can view the code behind any Web page by choosing View Source in most Web browsers or by choosing the Split or Code view options in Dreamweaver When you use split view you can see the code and design views simultane ously and when you select text or an image in one view it s automatically highlighted in the other view 14 Part l Creating Great Web Sites Although at first glance the code can look like hieroglyphics basic HTML is not that complex Most XHTML tags work in pairs and include an open tag as well as a close tag that surround content For example the lt b gt tag tells a browser to begin making text bold and the closing lt b gt tag tells the browser to end the bold formatting Other tags can stand alone such as the lt b
26. ts by choosing Window Workspace Layout New Workspace and giving each new workspace layout its own name which is then added to the menu so you can easily reset it If you move a panel or inspector and then want to return it to its original location choose Reset Workspace to restore any of the preset layouts Create a collection of workspace layouts optimized for common tasks such as creating and applying CSS or working with database content and save them so that you can easily arrange the program to best suit your preferences The menu bar Like most programs you ve used the menu at the top of the screen provides easy access to most program features including the options you find in the Insert bar Property inspector and panels as well as a few others that are available only from the menu The Document toolbar Across the top of the workspace just under the menu bar and above the workspace is the Document toolbar as shown in Figure 1 6 Here you find the Code Split and Design view buttons which make it easy to change from displaying only the code or design in the workspace or both the code and the design using split view which is shown in Figure 1 6 You also find the Live View button which provides a preview of the page complete with EE Figure 1 7 Dream weaver CS4 includes eight workspace layouts optimized for different work styles such as App Developer which is optimized for working on dynamic
Download Pdf Manuals
Related Search