Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Learning Dreamweaver CS6 with 100 practical exercises


Published on

Learning Dreamweaver CS6 Dreamweaver is the quintessential website creation and editing program available today. It is the perfect software for web designers and developers and for graphic designers as well.

By following this handbook you will learn to use it comfortably and seamlessly. In this new Dreamweaver version, Adobe has added interesting features both in its aspect and in the tools and functions, increasing even more the editing possibilities.

In addition, the program offers several characteristics directed especially to those users that enjoy working with HTML as much as with CSS or JavaScript.

With this book you will:
Create professional looking web pages, with practically no effort whatsoever.
Learn about the new CSS fluid grid based design and work better than ever with the multiscreen options.
Make CSS based transitions to apply soft changes to the properties of page elements.
Apply multiple CSS classes to one same element.
Use internet compatible creative Web sources.

Published in: Education

Learning Dreamweaver CS6 with 100 practical exercises

  1. 1. 14 Accessing Dreamweaver CS6 THE DREAMWEAVER CS6 welcome screen appears when you first start the program without any document opened or when you initiate a work session. This is a good alternative to the traditional commands for creating and opening documents. The welcome screen is also an easy way to access a guided tour or product tuto- rial for in-depth knowledge of the program’s functions. 1. Click Start on the desktop taskbar and access Dreamweaver CS6. 2. The Default Editor window opens before the interface up- loads. Select the documents you want edited with Dream- weaver. Maintain default settings and press OK. 1 3. The application opens with the welcome screen in the center. 2 From here you can open a recent item or create a new docu- ment and search for help articles. On the bottom of the page you will find links to guide you through your first Dream- weaver steps, update on new functions, as well as access to other resources. Go to Open in Open a Recent Item. 3 Enable the option Don’t show again at the bottom of the welcome screen, or disable the option Show Welcome Screen in the General category of the Dreamweaver Preferences panel so that it does not appear every time you start the program. 1 2 After you activate the Dreamweaver program for the first time you will be able to access it directly from the Start Menu. IMPORTANT
  2. 2. 15 001 Learning Dreamweaver CS6 with 100 practical exercises 3 4. The Open dialog box to access existing documents appears on the screen. Press Cancel to exit. 5. The second group of tabs, Create New tab gives you a list of common file types that create new documents quickly. Click the top option, HTML traditional web page format. 6. A new HTML document is automatically created. 4 To exit, click the cross-shaped button denominated (by default) Un- titled-1. 7. The welcome screen reappears when you close the document. Dreamweaver CS6 has added two new features to the Create New tab: Fluid Grid Layout, 5 a system to create adaptable web designs sites, and the Business Catalyst that allows you to use the integrated Dreamweaver Business panel. And last, the Top Features (videos) section of the welcome screen offers different links to tutorials of Dreamweaver CS6 main new fea- tures. Try for example the link CS6 New Feature Overview 6 and view its content in your browser. 4 6 5 You can also learn about the new features and most common functions by clicking the links provided at the bottom of the pages Getting Started and New Features. IMPORTANT
  3. 3. 16 The New Dreamweaver CS6 Interface THE DREAMWEAVER CS6 INTERFACE DESIGN is intuitive and easy to use, allowing you to work quickly and rationally. The Dreamweaver workspace lets you view documents and object pro- perties and shows all windows and panels in one same window. 1. In the document window you will find a toolbar for most com- mon operations such as, Application bar, Workspace switcher and Search box. For firsthand knowledge of Dreamweaver’s features click HTML on the welcome screen and create a new document. 1 2. Under document tab there is the Document toolbar contai- ning buttons of different document window views and visua- lization options such as previewing or entering a document title and other common operations. Click Code to change window view 2 and click Design to return to Design view. 3. The window showing the document being created and edi- ted occupies most of the interface space. On the lower part of the window is the Status bar containing a tag selector and To collapse panels, save space and view icons, use the double pointed arrow over panels. 1 2 You can also access different options for creating and editing your document by clicking New in the menu File. IMPORTANT Observe the difference in the Window view when you activate Code view and then return to the default Design view.
  4. 4. 17 Learning Dreamweaver CS6 with 100 practical exercises 3 002 buttons to change visualization options and for document in- formation. Under the Status bar is the Property Inspector, a very useful panel that lets you view and modify the properties of the selected page, text or object. Click Page Properties in the inspector. 3 4. In Page Properties you can modify the characteristics of the page. We will go back to this point later on. For now, click Cancel to close. 5. To the right of the interface you will see panels to help you monitor and modify your work. Double-click the panel tab to expand or collapse panels or click panel to switch from one to the other. Go to AP Elements. 4 6. You can also activate the panels from the Window menu. The workspace switcher in the Application bar can be used to rea- rrange the workspace. Display the by default Designer work- space and select Coder. 5 7. You will notice the same integrated workspace as in the De- signer view but with the panels to the left, and the default Code view. 6 End the exercise by returning to Designer. 4 5 6 If you have a double-monitor setup, the Dual Screen places all the panels on your secondary monitor while maintaining the Document window and Property inspector open on your main monitor. You can access the Prage Property table from the Modify menu or click key combination Ctrl+ J. Click the panel’s tab once to expand, or double-click to minimize. IMPORTANT You can access the Prage Property table from the Modify
  5. 5. 18 Creating a New Document WITH DREAMWEAVER, IN ADDITION TO HTML DOCUMENTS, you can create documents based on other server language codes ( CFML, ASP, CSS) or code based file types (Visual Basic, .NET, C# y Java). The New Document dialog box organizes files according to categories. You can create a file from scratch or template. You can set a default document type in the New Document category in the Preferences dialog box and automatically generate a new document based on your selection. 1. With the new blank document created in the previous exerci- se opened in Dreamweaver workspace, display the File menu and select New. 1 2. The first column in the New Document dialog box is for crea- ting a new blank page, a blank template, a template page, a fluid grid layout (innovation in this program version), a test page, or other type of document. On the right-hand side of the panel you will see a display of page types, depending on the type of document selected. The second part of the panel includes types of dynamic pages. Select the Blank Template category. 2 Remember that to create new documents in Dreamweaver you can use the corresponding link in the welcome screen. 2 IMPORTANT 1
  6. 6. 19 Learning Dreamweaver CS6 with 100 practical exercises 003 3. Here you can create a template from the main listing. Once the document is saved as template it can be used to create others. Click Fluid Grid Layout. 4. We will dedicate the next exercise to explain this new feature of the CS6 version. Meanwhile, go to the Page from Sample category. 5. With CSS styles you can assign shared characteristics con- trolling parameters related to the expected image of the va- rious page elements, such as backgrounds and dialog boxes. In Sample Page panel click Colors: Red and press Create. 3 6. The new CSS document opens in code view. Next, click the key combination Ctrl+N. 7. Now, go to the Blank Page category; maintain the HTML option and click on the page design 2 column liquid, right sidebar. 4 8. It is best to set a default file type when using a certain file type for most pages of a same website. Go to Preferences and in the Default document field select file type you want. In this case, maintain the HTML selection and click OK. 9. The Get More Content link opens the Dreamweaver Exchan- ge and downloads more page design content. Click Create to create a new document. The file types listed in the category Other in the New Document dialog box are for texts based in language codes with which it is not possible to work with visually. 3 4 You can select your default document choice in the Dreamweaver Preferences dialog box. IMPORTANT
  7. 7. 20 Creating New Fluid Grid Layouts ONE OF THE EXCITING NEW FEATURES IN THE CS6 VERSION is the New Fluid Grid Layout option. Accessible directly from the File menu or the New Document dialog box, the program, with an efficient CSS3 based system, provides a template for creating web designs that are compatible with various platforms and navigators. 1. Start by going to File menu and then click the new command button, New Fluid Grid Layout. 1 2. The New Document dialog box, with which we worked in the previous exercise, pops up and displays the Fluid Grid Layout file type characteristics. The main feature of this new function is the possibility of creating responsive web or page designs that automatically adjust to the viewer’s device screen size, whether it is a smart-phone, tablet or desktop. The ad- justment is completely graphic and percentage based from the What is CSS3? It is the latest version of CSS Style sheets (Cascading Style Sheets); these style sheets define the style of pages created with a Dreamweaver program. The CSS3 contains, among others, shadow and rounded corners options, or advanced movement and transformation functions. 1 2 3 IMPORTANT If you need assistance with the new Fluid Grid Layout function, press Help in the New Document dialog box.
  8. 8. 21 Learning Dreamweaver CS6 with 100 practical exercises 004 window it is created in. To see how it works, change the de- fault column number to 6. 2 3. The percentage value immediately below the graphic indicates the portion of screen space the page or website will occupy. For the purpose of this example, reduce the value to 90%. 3 4. If you wish to return to the original default settings after de- fault modification, click Reset To Default in the dialog box. The DocType field, by default HTML 5, lets you select docu- ment type preferences. Display menu to view available op- tions and maintain default value. 4 5. The Attach CSS File field, as its name indicates, lets you as- sign a CSS Styles sheet to the new document. 5 However, not having explored these elements yet, click Create. 6. The Save Style Sheet File As dialog box asking for name and location of new document pops up at this point. But since we won’t be working with it, click Save without making any modifications. 6 4 5 6 A box with tips on how-to complete this type of page will appear at the top of the document. Once the Fluid Grid Layout document is created, check the Status bar for icons to change to and from available screen view modes. IMPORTANT