Adobe Dreamweaver CS6 Digital Classroom - Brossura

Osborn, Jeremy; AGI Creative Team

Brossura

ISBN 10: 111812409X ISBN 13: 9781118124093

Casa editrice: John Wiley & Sons Inc, 2012

Riassunto

Learn Dreamweaver CS6 at your own speed with this complete training package

Dreamweaver is the industry standard software for professional website design, with more than 90 percent of the market. In this book-and-DVD package, expert instructors provide a complete course in basic Dreamweaver that you can access at your own speed. Step-by-step instructions in the book are supported by lesson files and video tutorials on the DVD, presenting the newest version of Dreamweaver in 16 self-paced lessons. You'll learn to use style sheets, dynamic HTML, multimedia, databases, and much more to design, develop, and maintain your website.

• Newcomers to website development will learn to design and maintain fully functioning sites using the newest version of Dreamweaver with this book-and-DVD package
• The self-paced lessons cover applying style sheets, using dynamic HTML, adding style with images and multimedia, publishing and maintaining a website, and using databases to create dynamic websites
• Shows how to use hyperlinks to navigate throughout a website or link to other sites on the Internet and how to format web pages and forms
• Created by a team of Adobe experts who have developed training programs for Adobe Systems

Dreamweaver CS6 Digital Classroom is the next best thing to having a personal tutor teach you this award-winning software.

Note: DVD and other supplementary materials are not included as part of the e-book file, but are available for download after purchase.

Su questo libro

Informazioni sull?autore

Jeremy Osborn is Training Director at American Graphics Institute and an expert on web and interactive technology. He is a member of the AGI Creative Team, which develops and delivers training programs for creative, marketing, and communications professionals through the American Graphics Institute.

Dalla quarta di copertina

A Complete Training Package!

• Full-color, step-by-step instructional book

• Video training from Adobe Certified Experts

Tutorials and lesson files on companion DVD

You have a personal tutor in the Digital Classroom

If you want expert instruction that fits into your schedule, the Digital Classroom series delivers. Expert instructors guide you through 17 lessons, helping you learn essential Dreamweaver CS6 skills at your own speed. Full-color, step-by-step instructions in the book are enhanced with video tutorials on the DVD. With this Digital Classroom training package, you have your own private instructor showing you the easiest way to learn Dreamweaver CS6.

• Set up Dreamweaver CS6 and use its design and layout tools

• Create, publish, and maintain websites

• Add text, images, and multimedia to your pages

• Build CSS-based websites to create consistent, standards-based page designs

• Use modern web design techniques including CSS3 transitions and fluid grids

• Design HTML5 web pages optimized for mobile devices

• Add web fonts for more visually exciting text

Estratto. © Ristampato con autorizzazione. Tutti i diritti riservati.

Adobe Dreamweaver CS6 Digital Classroom

By Jeremy Osborn

John Wiley & Sons

Copyright © 2012 John Wiley & Sons, Ltd
All right reserved.
ISBN: 978-1-1181-2409-3

Chapter One

What you'll learn in this lesson:

• An overview of Dreamweaver CS6 features

• How the Web works

• An introduction to HTML

Dreamweaver CS6 Jumpstart

Whether you are a novice web designer or an experienced developer, Dreamweaver is a comprehensive tool you can use for site design, layout, and management. In this lesson, you'll take a tour of Dreamweaver's key features and get a better understanding of how web pages work.

Starting up

Before starting, make sure that your tools and panels are consistent by resetting your workspace. See "Resetting the Dreamweaver workspace" in the Starting Up section of this book.

Before you start, be sure to register your book at www.digitalclassroombooks.com/CS6/Dreamweaver to learn about updates to any of the lesson files and gain access to the accompanying video tutorials on any Internet connected computer, tablet, or smartphone.

You will work with several files from the dw01lessons folder in this lesson. Make sure that you have loaded the dwlessons folder onto your hard drive from the supplied DVD. See "Loading lesson files" in the Starting up section of this book.

What is Dreamweaver?

Dreamweaver is an excellent web design and development tool for new and experienced users alike. Over the years it has become the preferred website creation and management program, providing a creative environment for both designers and developers. Whether you design websites, develop mobile phone content, or script complex server-side applications, Dreamweaver has something to offer.

Design and layout tools

Dreamweaver's many icon-driven menus and detailed panels make it easy to insert and format text, images, and media (such as video files and Flash movies). This means that you can create attractive and functional web pages without knowing a single line of code—Dreamweaver takes care of building the code behind-the-scenes for you. Dreamweaver does not create graphics from scratch; instead, it is integrated with Adobe Photoshop CS6, so you can import and adjust graphics from within the application.

Site management and File Transfer Protocol

Dreamweaver has everything you need for complete site management, including built-in File Transfer Protocol (FTP) capabilities between a server and your local machine; reusable objects (such as page templates and library items); and site optimization tools (such as link checkers and site reports), so that you can ensure that your site functions properly and looks good. If you're designing your pages with Cascading Style Sheets (CSS), then the W3C Validation, the Browser Compatibility Check, and the CSS Advisor features will help you locate and troubleshoot any potential display issues that may occur across different web browsers.

Coding environment and text editor

Dreamweaver lets you work in a code-only view of your document that acts as a powerful text editor. Features such as color-coding, indentation, and visual aids make Dreamweaver an excellent text editing or coding environment for web designers of any level.

For more experienced developers, Dreamweaver supports popular coding and scripting languages, such as JavaScript, in addition to several server-side languages, including ColdFusion, PHP, and ASP.NET. Specialized insert menus and code panels help you build pages and applications in the language of your choice.

Mobile design and development features

The tools in Dreamweaver have evolved as the Web has evolved. The most recent versions of the application have numerous features designed to help make your website look and function well in the rapidly growing arena of mobile phones and devices. The Multiscreen Preview feature allows you to preview your pages in common screen sizes for smartphones and tablets and can be accessed by choosing Window > Multiscreen Preview.

Additionally, there is support for creating Media Queries, which are a CSS3 feature aimed at creating unique page layouts for different-sized screens. For more advanced users there is support for jQuery Mobile, which creates unique user interfaces for touchscreen devices. There is also support for creating native applications for iOS and Android operating systems with the new addition of the PhoneGap integration added in Dreamweaver CS6.

Who uses Dreamweaver?

Dreamweaver's popularity is a result of its flexibility. Its ability to build a site from conception to launch—and provide continued maintenance afterward—makes it a preferred tool among industry professionals, businesses, and educational institutions. However, it remains easy and accessible enough for novice designers to get up-and-running quickly. It's not unusual to see Dreamweaver utilized for personal projects or by small businesses and media professionals, such as photographers and painters, to maintain a web presence.

Dreamweaver's workspace features

This book is dedicated to exploring, learning, and putting to use all that Dreamweaver has to offer. This section looks at some of the application's key features.

Four different points of view: When you work with a document, Dreamweaver lets you see your work in one of four views: Code, Split, Design, or Live view. Dreamweaver's default Design view lets you add elements to your page in a visual fashion, either by dragging objects onto the page from the Insert panel, or by directly adding text, image or multimedia content. More experienced web designers and coders can use the Code view to edit a document's HTML code and scripts directly, enhanced with easy-to-read color-coding and visual aids.

For those who like something in between, the Split view provides a split-pane Design and Code view all at once. You can easily change views at any time with a single click in the Document toolbar. The Live view is a type of "reality check" that allows you to view your page in a native web browser, eliminating the need to leave the program in order to preview your designs.

Built-in FTP: You can easily upload and download files to and from your web server using the Files panel's drag-and-drop interface. You can also use the Get/Put button at any time to post pages you're currently working on. In either case, there's no need for separate software. Dreamweaver also provides Check In/Check Out functionality and synchronization features; these allow multiple people to work more safely and efficiently on the same site.

Page and code object Insert panels: You can find intuitive icons for most common web page elements in a categorized Insert panel, from which you can add elements to your page with a single click. You can use additional panels to fine-tune any page element to ensure that you see exactly what you want. Included in the default Insert panel are tools for formatting text, building forms, and creating layouts. You can also customize a Favorites tab with your most-used icons.

Customizable workspace layouts: You can save combinations and positions of panels and toolbars for easy recall at any time. Save multiple workspace layouts for different users, or create different workspaces for specific tasks, such as coding or designing page layouts.

Powerful visual aids: Take advantage of the precision you're accustomed to in other design programs through Dreamweaver's guides, rulers, measuring tools, and customizable positioning grid; many of these features are found and can be activated within the View menu. Dreamweaver's Design-Time style sheets let you customize the look of your page exclusively for the editing process, making layout quicker and easier without permanently altering the page's appearance.

CSS Styles panel: Take advantage of the vast design and formatting options that CSS provides through Dreamweaver's full-featured CSS Styles panel, which lets you create, edit, and manage styles on-the-fly from a single panel.

Live View and Live Code

Experience tells you that visual web editors often display differently than the browsers they're emulating. As script-driven interactivity gains popularity, the need to accurately design the different states of your page (including menus, panels, and interface elements), has become increasingly important. The static nature of the Design view in Dreamweaver often times does not meet users' advanced needs.

Dreamweaver's Live View mode uses the WebKit rendering engine (which is also the basis for the Safari and Google Chrome web browsers), to give you a more accurate preview of your page in the same way that a browser would render it.

When you are in the Live View mode, the Live Code feature is enabled. Live Code allows you to see, in real time, how visually changing your page affects the code behind the scenes. If you have added interactive elements such as drop-down menus or accordion panels, then you can visually select an item on the page and see how the HTML code might be affected.

Also useful is the Freeze JavaScript button (or the F6 key). This feature freezes your page in a particular state (for example, with a menu locked open and a hover effect in place). You can then edit those interactive elements directly in Dreamweaver.

CSS Inspection and the Enable/Disable Feature

Another feature that is enabled when in Live View is the Inspect Mode. This mode allows users to peek at the visual model and structure of a page by hovering over elements on the page. When hovering in Inspect Mode you can see the relationships between the HTML elements on your page and the styles assigned to them. This is useful because it dramatically shortens the time it takes to locate any given style for any given object on the page. However, when paired with the Enable/Disable feature, the Inspect Mode becomes even more powerful.

The Enable/Disable feature allows you to temporarily "turn off" an applied style on your page. This can be very useful when dealing with unfamiliar or complex designs where half the battle is simply understanding what styles are being used. Disabling a style will remove its properties so that you can visually observe the results. Keep in mind that disabling is always temporary, and that it is just as easy to restore the style by clicking Enable.

Related files

Web-based projects are becoming more complex than ever before, and you often find that even a single page is composed of a variety of assets. These assets can include Cascading Style Sheets (CSS), external JavaScript files, and more. Dreamweaver CS6 has a feature that will help you become much more effective at designing and managing sites and applications with multiple assets.

The Related Files bar runs across the top of your document window, just below the document tabs. The bar shows you all the various files that, when combined, create your finished page. You can switch between these files using the Related Files bar without losing the visual preview of their parent page. Design view (or Live View) always shows the parent file, but you can now edit any of the related files without losing their important visual context.

Code Navigator

The Code Navigator (*) is a feature enabled in the Design view that appears when you hover over an element on the page. Clicking on the Navigator will let you see a quick summary of any CSS styles that have been applied, and if you choose to, you can click on the style in order to view the code directly. The benefit is that it is no longer necessary to manually hunt through your style sheets to find a specific rule; it's just a click away in Dreamweaver.

Photoshop smart objects

Dreamweaver offers support for Photoshop smart objects, meaning you can drag a PSD file into a web page within Dreamweaver, optimize the image for the Web, and even resize it.

Also, if you decide to update the original PSD file at a later time, then a red arrow appears on the image in Dreamweaver to indicate that the source file has changed. You can then click the Update from Original button in the Property Inspector and a new version of the image will be created.

Support for Content Management Systems

Enjoy authoring and testing support for content management systems like WordPress, Joomla! and Drupal. A CMS/blog software like WordPress provides users with an easy way to publish content online and has features such as automatic archiving and database integration. In the past, designers have been frustrated with creating the page designs for a CMS using Dreamweaver because these systems generally rely on a relatively complex combination of dynamic pages (often PHP) that could not be previewed in Dreamweaver. For designers or users who are not code-savvy, the complexity of these files can be daunting. Dreamweaver can now help you discover the related files needed to put together the pages in your CMS framework.

Dreamweaver does this by previewing the files of a CMS framework in the Design view (as long as you have a testing server defined), using the built-in Live View option. With this feature, Dreamweaver CS6 also lets you interact directly with a database, which means you can now test online forms, insert and modify database records, and more.

HTML5, CSS3, and PHP code hinting

For advanced users, there is now built in code-hinting support for HTML5 and CSS3 syntax. This means the "library" of HTML and CSS syntax that is now available within Dreamweaver is larger than ever, which is a good sign for those designers and developers who need to build modern web pages.

Additionally, advanced users who use the scripting language PHP will be happy to learn that Dreamweaver CS6 now has improved support for PHP syntax. This includes code completion and syntax checking, as well as full support for all core functions, constants, and classes. PHP code hints have also been improved substantially.

HTML and CSS Starter Pages

HTML and CSS Starter Pages have been around in Dreamweaver for a few versions now. These pages allow you to get a jumpstart on building page layouts by choosing from a variety of pre-built page layouts that you can subsequently modify. In Dreamweaver CS6, the code for these starter pages is new and improved for modern web browsers and comes with plenty of code commenting behind the scenes to help you start modifying your pages quickly. You can view starter pages by choosing File > New. The Layout column features a number of page layouts. CSS starter pages can also be found by clicking on the Page From Sample button.

Subversion

Dreamweaver has improved support for Subversion, a version control system similar to CVS and Visual SourceSafe (VSS). Subversion is typically used by companies to maintain a team environment on larger projects that require changes to be logged and versions to be controlled. Without Subversion, if you wanted to maintain versions, you would have to do the work yourself by maintaining folders and copies of previous versions. With Subversion, all files are kept on the Subversion server. Changes are tracked so that you can restore your project to any previous state. Subversion is enabled by choosing Site > New Site ( or Site > Manage Sites), choosing Version Control and then clicking the Access menu and choosing Subversion.

Business Catalyst integration

Adobe's Business Catalyst is an online service that provides a variety of features such as online store/shopping cart capabilities, email marketing, web form functionality, analytics extension, and more. With the Business Catalyst extension in Dreamweaver you can login to Business Catalyst and synchronize multiple sites at once. Dreamweaver can be used to access and edit the style module used on your Business Catalyst connected sites.

How websites work

Before embarking on the task of building web pages (and in turn, a website), it's a good idea to know the basics of how websites work, how your users view them, and what you need to know to make sure your website functions and looks its best.

A simple flow chart

What happens when you type in a website address? Most people don't even think about it—they just type in a URL (Uniform Resource Locator) and the website appears. They most likely don't realize how many things are going on behind the scenes to make sure that pages gets delivered to their computer so that they can do their shopping, check their e-mail, or research a project.

When you type a URL or IP address in the address bar of a web browser, you are connecting to a remote computer (called a server), and downloading the documents, images, and resources necessary to render the pages you will view while on the site. Web pages aren't delivered as a finished product; your web browser is responsible for reconstructing and formatting the pages based on the HTML code included within the pages. HTML (Hypertext Markup Language) is a simple, tag-based language that instructs your browser how and where to insert and format pictures, text, and media files. Web pages are written in HTML, and Dreamweaver builds the HTML as you construct your page in the Design view.

(Continues...)

Excerpted from Adobe Dreamweaver CS6 Digital Classroomby Jeremy Osborn Copyright © 2012 by John Wiley & Sons, Ltd. Excerpted by permission of John Wiley & Sons. All rights reserved. No part of this excerpt may be reproduced or reprinted without permission in writing from the publisher.
Excerpts are provided by Dial-A-Book Inc. solely for the personal use of visitors to this web site.

Dettagli dell'edizione

• Editore: John Wiley & Sons Inc
• Data di pubblicazione: 2012
• Lingua: Inglese
• ISBN 10: 111812409X
• ISBN 13: 9781118124093
• Rilegatura: Copertina flessibile
• Numero di pagine: 470
• Contatto del produttore: non disponibile
• Persona responsabile: non disponibile