Adobe Dreamweaver CS6 Keyboard Shortcuts for PC

Here we are come with many of Dreamweaver 8/CS5/CS6 keyboard shortcuts. as seeing the success in our last “Google Chrome Keyboard Shortcut. Dreamweaver CS6 Shortcuts: PC ; Select to start/end of file, Ctrl-Shift-Home/End ; Go to Line, Ctrl-G ; Indent Code, Ctrl-Shift-> ; Outdent Code, Ctrl-Shift-< ; View. Adobe Dreamweaver CS6 Classroom In A Book. Download Free PDF Try this: 1 Choose Edit > Keyboard Shortcuts/Dreamweaver > Keyboard. A bonus 2-hour set of Adobe Dreamweaver CS6: Learn by Video tutorials are Most of these are simply diferences in keyboard shortcuts. For example, you can give your navigation buttons priority when someone on a web page in Dreamweaver and type the text, “You can download the free PDF.❿
 
 

Dreamweaver Keyboard Shortcuts Cheat Sheet – Adobe dreamweaver cs6 shortcut keys pdf free

After you upgrade, refer to the exported file to set the shortcuts again. Sign up or log in Sign up using Google. Sign up using Facebook. Sign up using Email and Password. Post as a guest Name. Email Required, but never shown. Not the answer you’re looking for? Translate PDF. It pro- vides a combination of visual layout tools, application Install Dreamweaver development features, and code editing support, enabling developers and designers at every skill level to create visu- Get Started ally appealing, standards-based sites and applications quickly and easily.

In addition, developers can use Dreamweaver with the server Open a Web Site technology of their choice to build powerful Internet applica- tions that connect users to databases, live data feeds, and Create a Blank Web Page legacy systems.

Create Web Pages from Templates Dreamweaver is an application that’s rooted in the real 2 world. In the real world, new or updated browsers come into Create a Web Page from a Fluid Grid the marketplace every year, and this creates problems in Layout compatibility. Dreamweaver solves this problem by giving Create a Web Page from a Sample you powerful error-checking tools, and even gives you the ability to use Live Data View, and see exactly how your pages Save a Web Page will perform on virtually any browser.

Dreamweaver’s extensible architecture makes server compat- Work with Views ibility a snap by giving you the tools to customize for third- party server models. In the real world, computer operating Switch Between Pages and Views systems change. Dreamweaver’s CS6 supports use on Windows and Macintosh systems.

Preview a Web Page Web designers come at all levels of experience. If you’re relatively new to the application, you can jump right in and Get Dreamweaver Updates on the Web begin designing simple web pages. If you are an experienced Close a Web Site or File designer, you will be able to access the power and control that this application offers, and take your web designs where Finish Up no one has gone before.

Windows and Macintosh computers. The original versions activation, registration, and some of Dreamweaver many years ago were sim- online services. Dreamweaver CS6 is not only doing things For Macintosh Computers that were not even dreamed of in years past; You need to have a computer with the follow- it’s also faster.

As a web designer, time is an ing minimum configuration: important part of getting the job done, and getting it done quickly. The first thing that will happen is that the installer will check to see if you have the minimum system requirements.

If you meet the minimums, the installer will guide you through the steps to complete the installation. The whole process takes about ten minutes, and at the end of the process you can launch Dreamweaver for the first time.

Remember to have your serial number handy, because you will have to type it in dur- ing the installation process. It’s a good idea to have that serial number in a safe place, just in case you would need to reinstall Dreamweaver.

Did You Know? Most Adobe applications can be downloaded. It’s all very simple, you go to www. You will need a credit card of course , and a lot of bandwidth. When you start Dreamweaver, the software displays a Welcome screen and then the Dreamweaver window. When you start a new Dreamweaver session or close all documents, a Welcome screen appears in the Dreamweaver window, providing easy access links to open a file, open a recent file, create a new file, and create a new file from a template.

You can also use links to access videos, and help infor- mation, including Getting Started, New Features, and online Community resources, such as the Dreamweaver Exchange web site, where you can download additional applications and information. The Dreamweaver window opens, 1 2 4 displaying the Welcome screen. Welcome screen Did You Know? You can create and use a shortcut icon on your desktop to start Dreamweaver Win.

Double-click the shortcut icon on your desktop to start Dreamweaver. The Dreamweaver window opens, displaying the Welcome screen. Activating Dreamweaver You can create a shortcut on the Macintosh. Drag and drop the In order to curb theft of their products, Adobe requires you to activate Dreamweaver application icon to the the Dreamweaver application. The first time you open it, you will be bottom of the screen, and then add it to prompted to enter your serial number, and then activate Dreamweaver.

You will be able to delay the activation process for up to 30 days; how- ever, on day 31 the application will cease to run until activated. Activation can be accomplished by the Internet, or by phone. You can launch Dreamweaver and open a document at the same time. Simply double-click on the document icon i. If the docu- ment was originally created within Dreamweaver, the file automatically opens in the Dreamweaver application.

These windows include the ing between layout displays, web sites, and Program window, Document window, various extension applications , menu bar depending panels, and the Properties panel. Depending on screen size , Workspace menu, Search box on your installation and previous program for product help, resizing buttons, and a Close usage, not all of these windows may appear, button at the top of the screen.

In other words, since both rules do something diferent, both will be honored. Far from being a mistake or an unintended consequence, the ability to build rich and elaborate formatting using multiple rules is one of the most powerful and complex aspects of cascading style sheets.

Redundant code should be avoided whenever possible. It adds to the size of the code as well as to the time it takes to download and process it. By using inheritance, you can create the same efect with a single rule. All the elements remain formatted as blue Verdana. One rule is now formatting three diferent elements. You may have also noticed that the two h1 rules combined create the same styling applied by the new div rule.

Click in the Design view window to refresh the display; it should look exactly the same. Descendant theory he descendant theory describes how formatting can target a particular element based on its position relative to other elements. By constructing a selector using multiple elements, in addition to ID and class attributes, you can target the format- ting to speciic instances of text as it appears within your webpage.

Click in the Design view window to refresh the display. What happened to blue Verdana? Just move the element into the proper structure or location within the code, and it formats itself. Some refer to this as weight—giving certain rules more priority based on order, proximity, inheritance, and descendant relationships. But, at the moment, none of the rules is actually formatting the text. In Dreamweaver, commented code usually appears grayed out.

But before you do this, can you determine—based on the syntax and order of the rules—what formatting will apply to the sample text? For example, will the text appear in Times, Impact, or Verdana? Will it be blue, red, green, or orange? So, then why does the text display in the typeface Verdana? As mentioned earlier, CSS rules may style more than one HTML element at a time, and some rules may overlap or inherit styling from one another.

Can you determine which one? Can you explain why? Each of the theories described here has a role to play in how CSS styling is applied through your webpage and across your site. When the style sheet is loaded, the browser will use the following hierarchy—with number 4 being the most powerful—to determine how the styles are applied, especially when rules conlict: 1. Cascade 2. Inheritance 3. Descendant structure 4. In such cases, Dreamweaver comes to the rescue with a fantastic feature named Code Navigator.

When activated, it will display all the CSS rules that have some role in formatting an ele- ment, and it will list the order of their cascade application and speciicity. In an actual webpage, the possibility of styling conlicts grows with each new rule added. A small window appears, displaying a list of three CSS rules that apply to this heading. When rules conlict, rules farther down in the list override rules that are higher up. Remember, elements may inherit styling from one or more rules, and default styling may be overridden by more-speciic settings.

But many factors can inluence which of the rules may win. As you saw earlier, changing the order of rules can often afect how the rules work. Activate the Code Navigator. Although the rule was moved to the top of the style sheet, the display of rules did not change, because the div. In this instance, it would win no matter where it was placed in the code, but its speciicity can easily be changed by modifying the selector. Did you notice how the styling changed?

But, since this rule is the last one declared in the code, it now takes precedence in the cascade. Is it starting to make more sense? Until that time, just remember that the rule that appears last in the Code Navigator has the most inluence on any particular element.

By default, all elements start at the top of the browser screen and appear consecu- tively one after the other from left to right, top to bottom.

Block elements generate their own line or paragraph breaks; inline elements appear at the point of insertion. CSS can break all of these default constraints and let you size, format, and position elements almost any way you want them. CSS can control both the width and the height of an element, with varying degrees of success.

All speciications can be expressed in relative terms percentages, ems, or exs or in absolute terms pixels, inches, points, centimeters, and so on. By default, block elements occupy percent of the width of the browser window. Otherwise, CSS can deine element mea- surements in absolute or relative terms. Box 1 is unformatted to demonstrate how block elements display by default. Relative measurements allow the elements to automati- cally adapt to changes to the width of the browser.

For example, if you were to drag the divider between the Code view and Design view windows left or right, Box 2 would always display at half the width of the Design view window. Element widths set to percentages will adapt automatically to changes in the browser window, maintaining their relative dimen- sion within the space.

Box 3 is formatted to a ixed measurement of pixels. It will maintain this width no matter what happens to the size of the browser screen.

It is formatted to a width of 10 ems. In other words, use a large font and the em gets big- ger; use a small font and the em gets smaller. It even changes based on whether the font is a condensed or expanded face. Widths speciied in ems allow your page ele- ments to adapt to user requests for increases or decreases in font size.

Unfortunately, the reality is not so simple. Past browser support for the height property was not consistent or reliable. But measurements in percentages require a small workaround, or hack, to make most browsers honor them.

Box 1 demonstrates the default behavior of block elements; it takes up only as much height as the content contained within it requires. Box 2 is set to a height of pixels; it will remain at this ixed height regardless of changes to the screen size or orientation. Box 3 is set to a height of 10 ems. So far, so good. Adding the height property to the root elements of your webpage gives the browser the information it needs to calculate any element heights set in percentages.

By default, it is intended to be a luid speciication that allows an element to automatically adapt to the space requirements of its content. Borders and backgrounds Each element can feature four individually formatted borders top, bottom, left, and right. As you can see, borders can be used for more than just creating boxes. Here you see them used as graphical accents to paragraphs and even to simulate a three- dimensional button efect.

If both are used, the image will appear above, or in front of, the color. If the image ills the visible space or is set to repeat, it may obscure the color entirely. Box 1 displays the default HTML transparent background. Box 2 depicts a back- ground with a solid color.

Box 3 shows a background image that repeats in both directions along the x-axis and y-axis. Box 4 also shows a background image, but its transparency and drop-shadow efect allow you to see the background color around the edges of the image.

Be sure to fully test any background treatments. In some applications, CSS back- ground speciications are not fully supported or are supported inconsistently.

All the elements display the default HTML formatting for margins and padding. Borders have been applied to all the elements to make the spacing efects easier to see. Type padding: 30px;. Since padding is applied within the element boundaries, it will combine with margin settings to afect the overall spacing that appears between elements.

Many designers abhor these default speciications, especially because they may vary among browsers. Using zero margins may be a bit extreme for your own tastes, but you get the picture. As you become more comfortable with CSS and webpage design, you can develop your own default speciications and implement them in this way.

CSS can break all these default constraints and let you place elements almost anywhere you want them to be. As with other object formatting, positioning can be speciied in relative terms such as left, right, center, and so on or by absolute coordinates measured in pixels, inches, centimeters, or other standard measure- ment systems. Using CSS, you can even layer one element above or below another to create amazing graphical efects.

By using positioning commands carefully, you can create a variety of page layouts, including popular multicolumn designs. Using CSS, you can control the placement of these elements. Box 1 displays on a line of its own, in the default manner. Box 2 appears on the next line, aligned to the left side of the screen as speciied.

Box 3 appears on the right side of the screen, but on the same line as Box 2. In subsequent lessons, you will learn how to combine diferent loat attributes with various width, height, margin, and padding settings to create sophisticated layouts for your website designs.

Unfortunately, as powerful as CSS positioning seems to be, it is the one aspect of CSS that is most prone to misinterpretation by the various browsers in use today. Commands and formatting that work ine in one browser can be translated difer- ently or totally ignored—with tragic results—in another. In fact, formatting that works ine on one page of your website can fail on another page containing a difer- ent mix of code elements.

By taking advantage of the cascade, inheritance, descendant, and speciicity theo- ries, you can target formatting to almost any element anywhere on a webpage. But CSS ofers a few more ways to optimize and customize the formatting even further. Class attributes may be applied to any number of elements on a page, whereas P Note: Dreamweaver will warn you when ID attributes may appear only once.

Class and ID names can be a single word, an abbreviation, any combination of letters and numbers, or almost anything, but they may not start with a number or contain spaces.

To declare a CSS class selector, insert a period before the name within the style sheet, like this:. In the past, many web designers used ID attributes to point at speciic components within the page, such as the header, the footer, or articles.

With the advent of HTML5 elements—header, footer, aside, article, and so on—the use of ID and class attributes for this purpose is less neces- sary than it was. But IDs can still be used to identify speciic text elements, images, and tables to assist you in building powerful hypertext navigation within your page and site. Technologies and standards are evolving and changing constantly. Although these standards have not been oicially adopted, browser vendors are already implementing many of their features and techniques.

As you work through the upcoming lessons, you will be introduced to many of these new and exciting techniques and actually implement many of the more stable HTML5 and CSS3 features within your own sample pages.

Css3 features and efects here are over two dozen new features in CSS3. Many are ready now and have been implemented in all the modern browsers; others are still experimental and are sup- ported less fully. Some of the new CSS3 features have not been standardized, and certain browsers may not recognize the default markup generated by Dreamweaver. In these instances, you may have to include speciic vendor commands to make them work properly. If you do nothing, HTML elements will feature no formatting or structure.

CSS3 features are all experimental, and you should not use them at all. Industry best practices recommend using CSS-based formatting instead. Even if you do nothing, many HTML elements feature built-in formatting.

Many CSS3 features are already supported by modern browsers and can be used today. What is the purpose of the website? Will the website sell or support a product or service?

Is your site for entertainment or games? Will you provide information or news? Will you need a shopping cart or database? Do you need to accept credit card payments or electronic transfers? Who is the customer? Are the customers adults, children, seniors, professionals, hobbyists, men, women, everyone? Knowing who your market will be is vital to the overall design and func- tionality of your site.

A site intended for children probably needs more animation, interactivity, and bright engaging colors. Adults will want serious content and in- depth analysis. Seniors may need larger type and other accessibility enhancements. A good irst step is to check out the competition. Is there an existing website Could two sites be more performing the same service or selling the same product?

Are they successful? Look and Yahoo? Yet they both perform the same at Google and Yahoo. But, just as with a brick-and-mortar business, your online customers can come to you in a variety of ways. For example, are they accessing your site on a desktop computer, laptop, tablet, or cell phone? Are they using high-speed Internet, wireless, or dial-up service? What browser do they most like to use, and what is the size and resolution of the display?

Dial-up and cell phone users may not want to see a lot of graphics or video, while users with large lat-panel displays and high-speed connec- tions may demand as much bang and sizzle as you can send at them. So, where do you get this information? But a lot of it is actually available on the Internet itself. In , they started to track the usage of mobile devices on the Internet.

If you are redesigning an existing site, your web hosting service itself may provide valuable statistics on historical traic patterns and even the visitors themselves. If you host your own site, third-party tools are available, like Google Analytics and Adobe Omniture, which you can incorporate into your code to do the tracking for you for free or for a small fee.

When you boil down all the statistics, this is what you will ind as of the begin- ning of Windows 80 to 90 percent dominates the Internet, with most users divided almost equally between Firefox 37 percent and Google Chrome 33 per- cent , with various versions of Internet Explorer 22 percent taking third position. Designing a website that can look good and work efectively for both lat-panel displays and cell phones is a tall order. Each day, more people are using cell phones and other mobile devices to access the Internet.

Some users may use them now to access the Internet more fre- quently than they use desktop computers. For one thing, cell phone screens are a fraction of the size of even the smallest lat-panel display.

How do you cram a two- or three-column page design into a meager to pixels? Keep all these statistics in mind as you go through the process of designing your site.

A page carefully designed for a typical lat panel is basically useless on a cell phone. Your customers come from a broad demographic including all ages and education levels. Your marketing research indicates that most of your customers use desktop com- puters or laptops, connecting via high-speed Internet services, but that you can expect 10 to 20 percent of your visitors via cell phone and other mobile devices.

Creating thumbnails Many web designers start by drawing thumbnails with pencil and paper. Draw lines between the thumbnails showing how your navigation will connect them.

Thumbnails list the pages that need to be built and how they are connected to each other. Most sites are divided into levels. Typically, the irst level includes all the pages in your main navigation menu, the ones a visitor can reach directly from the home page. Make a list of compo- nents you want on each page, such as headers and footers, navigation, and areas for the main content and the sidebars if any.

What other factors do you need to consider? Do you have a company logo, business identity, graphic imagery, or color scheme you want to accent? Remove Item -. Adds the key combination shown in the Press Key to the list of shortcuts, or changes the selected shortcut to the specified key combination. Duplicate Set. Duplicates the current set. Saves the current set in an HTML table format for easy viewing and printing. You can open the HTML file in your browser and print the shortcuts for easy reference.

A new blank line appears in the Shortcuts and the insertion point moves to the Press Key. If there are already two shortcuts assigned to the command, select one of them that one gets replaced by the new shortcut. Then click in the Press Key.

If there is a problem with the key combination for example, if the key combination is already assigned to another command , an explanatory message appears just below the Shortcuts and you may be unable to add or edit the shortcut. If there is a problem with the key combination for example, if the key combination is already assigned to another command , an explanatory message appears just below the Shortcuts field and you may be unable to add or edit the shortcut.

The default Dreamweaver keyboard shortcuts work primarily on U. Keyboards from other countries including those produced in the United Kingdom , may not provide the functionality necessary for using these shortcuts.

If your keyboard does not support certain Dreamweaver-enabled shortcuts, Dreamweaver disables their functionality. To customize keyboard shortcuts that work with non-U.

Legal Notices Online Privacy Policy. User Guide Cancel. Know the default keyboard shortcuts in Dreamweaver and learn how to customize them. Downloadable versions of keyboard shortcuts. Download and print a print-friendly version of these keyboard shortcuts. Coding shortcuts. Refactoring shortcuts. Extract to Variable. Extract to Function. Control-click the tab, and then click Move To New Window. To combine separate documents into tabbed win- dows, click the Window menu, and then click Combine As Tabs.

Instead of previewing pages in an external browser, you can view pages as they Live View will appear in a browser using Live view, a non-editable view. You switch to Live view from Design view, which becomes frozen. In Live view, you can set options to follow links in pages, type URLs, and edit browsed pages from your site in a new tab.

In Live view, you can view Live Code, which is a non-editable view of the executed code on the page. When code states change, Live Code highlights the code in color for easy viewing. Live code view appears displaying browser code. The non-editable code is highlighted in different colors for code state changes. Freezes elements that use JavaScript.

Highlights code state changes in different colors. The Document toolbar in Live view includes similar options to those in a web browser. Allows you to in Live view. The Home button displays your original document. You follow links in Live view.

On the right side of the Document toolbar is the Files. Automatically updates Live View Options button, which you can use the display content in remote files. Live view or Live Code view. You can also access these options on the Live View Options submenu on the View menu. Used for dynamic pages. Used for non-dynamic sites. Uses the local file version as the Live view source. Allows you to set advanced settings for displaying live data. When you design and test for smart phones and tablets that can change orienta- tion, you can use landscape and portrait orientations to preview your display.

You can select pre-defined screen resolution sizes or create your own custom ones in Window Sizes preferences New5.

Media queries allow you to customize the appearance of a web page for different screen resolutions. Select Multiscreen Options 1 2 1 Open the web page you want to view. Opens the Multiscreen Preview panel. Displays the current page with the selected size in the Document window. Displays the current page with the orientation in the Document window. Opens the Preferences dialog box, where you can add or remove window sizes. Opens the Media Queries dialog box, where you can target your web page for multiple devices by specifying a different CSS file for each device.

The Multiscreen Preview panel opens, displaying the web page in multiple views for different devices. The default views include Phone x , Tablet x , and Desktop One of the most used features for testing your site is the Preview in Browser feature. This is one of the most used when working in Dreamweaver.

It lets you see what your site will look like in a particular Internet browser. When testing a particular web page, it’s a good idea to check it out in more than one browser, and in more than one version of the browser on different operating systems. For example, it may look great in Safari on the Macintosh, and not even work in Internet Explorer on Windows.

Preview a Web Page 1 2 1 Open the web page you want to view. An online service that allows you to view using different browsers and operating systems. The web page opens and displays in the selected browser. For example, if you were to drag the divider between the Code view and Design view windows left or right, Box 2 would always display at half the width of the Design view window.

Element widths set to percentages will adapt automatically to changes in the browser window, maintaining their relative dimen- sion within the space. Box 3 is formatted to a ixed measurement of pixels. It will maintain this width no matter what happens to the size of the browser screen. It is formatted to a width of 10 ems.

In other words, use a large font and the em gets big- ger; use a small font and the em gets smaller. It even changes based on whether the font is a condensed or expanded face. Widths speciied in ems allow your page ele- ments to adapt to user requests for increases or decreases in font size. Unfortunately, the reality is not so simple. Past browser support for the height property was not consistent or reliable. But measurements in percentages require a small workaround, or hack, to make most browsers honor them.

Box 1 demonstrates the default behavior of block elements; it takes up only as much height as the content contained within it requires. Box 2 is set to a height of pixels; it will remain at this ixed height regardless of changes to the screen size or orientation. Box 3 is set to a height of 10 ems. So far, so good. Adding the height property to the root elements of your webpage gives the browser the information it needs to calculate any element heights set in percentages.

By default, it is intended to be a luid speciication that allows an element to automatically adapt to the space requirements of its content. Borders and backgrounds Each element can feature four individually formatted borders top, bottom, left, and right.

As you can see, borders can be used for more than just creating boxes. Here you see them used as graphical accents to paragraphs and even to simulate a three- dimensional button efect. If both are used, the image will appear above, or in front of, the color.

If the image ills the visible space or is set to repeat, it may obscure the color entirely. Box 1 displays the default HTML transparent background.

Box 2 depicts a back- ground with a solid color. Box 3 shows a background image that repeats in both directions along the x-axis and y-axis. Box 4 also shows a background image, but its transparency and drop-shadow efect allow you to see the background color around the edges of the image.

Be sure to fully test any background treatments. In some applications, CSS back- ground speciications are not fully supported or are supported inconsistently. All the elements display the default HTML formatting for margins and padding. Borders have been applied to all the elements to make the spacing efects easier to see. Type padding: 30px;. Since padding is applied within the element boundaries, it will combine with margin settings to afect the overall spacing that appears between elements.

Many designers abhor these default speciications, especially because they may vary among browsers. Using zero margins may be a bit extreme for your own tastes, but you get the picture. As you become more comfortable with CSS and webpage design, you can develop your own default speciications and implement them in this way. CSS can break all these default constraints and let you place elements almost anywhere you want them to be. As with other object formatting, positioning can be speciied in relative terms such as left, right, center, and so on or by absolute coordinates measured in pixels, inches, centimeters, or other standard measure- ment systems.

Using CSS, you can even layer one element above or below another to create amazing graphical efects. By using positioning commands carefully, you can create a variety of page layouts, including popular multicolumn designs. Using CSS, you can control the placement of these elements. Box 1 displays on a line of its own, in the default manner. Box 2 appears on the next line, aligned to the left side of the screen as speciied.

Box 3 appears on the right side of the screen, but on the same line as Box 2. In subsequent lessons, you will learn how to combine diferent loat attributes with various width, height, margin, and padding settings to create sophisticated layouts for your website designs. Unfortunately, as powerful as CSS positioning seems to be, it is the one aspect of CSS that is most prone to misinterpretation by the various browsers in use today. Commands and formatting that work ine in one browser can be translated difer- ently or totally ignored—with tragic results—in another.

In fact, formatting that works ine on one page of your website can fail on another page containing a difer- ent mix of code elements. By taking advantage of the cascade, inheritance, descendant, and speciicity theo- ries, you can target formatting to almost any element anywhere on a webpage.

But CSS ofers a few more ways to optimize and customize the formatting even further. Class attributes may be applied to any number of elements on a page, whereas P Note: Dreamweaver will warn you when ID attributes may appear only once.

Class and ID names can be a single word, an abbreviation, any combination of letters and numbers, or almost anything, but they may not start with a number or contain spaces.

To declare a CSS class selector, insert a period before the name within the style sheet, like this:. In the past, many web designers used ID attributes to point at speciic components within the page, such as the header, the footer, or articles.

With the advent of HTML5 elements—header, footer, aside, article, and so on—the use of ID and class attributes for this purpose is less neces- sary than it was. But IDs can still be used to identify speciic text elements, images, and tables to assist you in building powerful hypertext navigation within your page and site.

Technologies and standards are evolving and changing constantly. Although these standards have not been oicially adopted, browser vendors are already implementing many of their features and techniques. As you work through the upcoming lessons, you will be introduced to many of these new and exciting techniques and actually implement many of the more stable HTML5 and CSS3 features within your own sample pages. Css3 features and efects here are over two dozen new features in CSS3.

Many are ready now and have been implemented in all the modern browsers; others are still experimental and are sup- ported less fully. Some of the new CSS3 features have not been standardized, and certain browsers may not recognize the default markup generated by Dreamweaver. In these instances, you may have to include speciic vendor commands to make them work properly.

If you do nothing, HTML elements will feature no formatting or structure. CSS3 features are all experimental, and you should not use them at all. Industry best practices recommend using CSS-based formatting instead. Even if you do nothing, many HTML elements feature built-in formatting. Many CSS3 features are already supported by modern browsers and can be used today. What is the purpose of the website? Will the website sell or support a product or service?

Is your site for entertainment or games? Will you provide information or news? Will you need a shopping cart or database? Do you need to accept credit card payments or electronic transfers? Who is the customer? Are the customers adults, children, seniors, professionals, hobbyists, men, women, everyone?

Knowing who your market will be is vital to the overall design and func- tionality of your site. A site intended for children probably needs more animation, interactivity, and bright engaging colors. Adults will want serious content and in- depth analysis.

Seniors may need larger type and other accessibility enhancements. A good irst step is to check out the competition. Is there an existing website Could two sites be more performing the same service or selling the same product? Are they successful? Look and Yahoo? Yet they both perform the same at Google and Yahoo. But, just as with a brick-and-mortar business, your online customers can come to you in a variety of ways.

For example, are they accessing your site on a desktop computer, laptop, tablet, or cell phone? Are they using high-speed Internet, wireless, or dial-up service? What browser do they most like to use, and what is the size and resolution of the display? Dial-up and cell phone users may not want to see a lot of graphics or video, while users with large lat-panel displays and high-speed connec- tions may demand as much bang and sizzle as you can send at them. So, where do you get this information?

But a lot of it is actually available on the Internet itself. In , they started to track the usage of mobile devices on the Internet. If you are redesigning an existing site, your web hosting service itself may provide valuable statistics on historical traic patterns and even the visitors themselves.

If you host your own site, third-party tools are available, like Google Analytics and Adobe Omniture, which you can incorporate into your code to do the tracking for you for free or for a small fee. When you boil down all the statistics, this is what you will ind as of the begin- ning of Windows 80 to 90 percent dominates the Internet, with most users divided almost equally between Firefox 37 percent and Google Chrome 33 per- cent , with various versions of Internet Explorer 22 percent taking third position.

Designing a website that can look good and work efectively for both lat-panel displays and cell phones is a tall order. Each day, more people are using cell phones and other mobile devices to access the Internet. Some users may use them now to access the Internet more fre- quently than they use desktop computers. For one thing, cell phone screens are a fraction of the size of even the smallest lat-panel display.

How do you cram a two- or three-column page design into a meager to pixels? Keep all these statistics in mind as you go through the process of designing your site. A page carefully designed for a typical lat panel is basically useless on a cell phone.

Your customers come from a broad demographic including all ages and education levels. Your marketing research indicates that most of your customers use desktop com- puters or laptops, connecting via high-speed Internet services, but that you can expect 10 to 20 percent of your visitors via cell phone and other mobile devices. Creating thumbnails Many web designers start by drawing thumbnails with pencil and paper. Draw lines between the thumbnails showing how your navigation will connect them.

Thumbnails list the pages that need to be built and how they are connected to each other. Most sites are divided into levels. Typically, the irst level includes all the pages in your main navigation menu, the ones a visitor can reach directly from the home page.

Make a list of compo- nents you want on each page, such as headers and footers, navigation, and areas for the main content and the sidebars if any. What other factors do you need to consider? Do you have a company logo, business identity, graphic imagery, or color scheme you want to accent? Do you have publications, brochures, or current advertising campaigns you want to emulate?

It helps to gather them all in one place so you can see everything all at once on a desk or conference table. Most designers settle on one basic page design that is a compromise between lexibility and sizzle. Some site designs may naturally lean toward using more than one basic layout.

But resist the urge to design each page separately. Using a consistent page design, or template, lends a sense of professionalism and gives conidence to your visitor. Wireframes allow you to experiment with page designs quickly and eas- ily without wasting time with code.

Where you put a component can drasti- cally afect its impact and usefulness. Are they on a inch lat panel or a 2-inch cell phone?

Do you want to waste this position by slapping the company logo here? Or, make the site more useful by slipping in a navigation menu?

Do you go for design sizzle, workable utility, or something in between? Creating wireframes After you pick the winning design, wireframing is a fast way to work out the structure of each page in the site. A wireframe is like a thumbnail, but bigger, that sketches out each page and ills in more details about the components, such as actual link names and main headings.

The wireframe for the inal design should identify the compo- nents and feature markup for content, color, and dimensions. Such mockups are as good as seeing the real thing but may take only a fraction of the time to produce.

Deining a Dreamweaver site From this point forward, the lessons in this book function within a Dreamweaver site. Along with the options for creating a standard Dreamweaver site, the dialog ofers the ability to create a site based on the services ofered by Adobe Business Catalyst.

Business Catalyst is an online, hosted application that allows you to build and manage rich, dynamic web-based businesses. To learn more about the capabilities of Business Catalyst, check out www. To create a standard website in Dreamweaver CS6, you need only name it and select the local site folder. Site names typically relate to a speciic project or client and will appear in the Files panel.

For example, many websites provide individual folders for images, PDFs, video, and so on. Dreamweaver assists in this endeavor by including an option for a Default Images folder. Later, as you insert images from other places on your computer, Dreamweaver will use this setting to automatically move the images into the site structure. Setting up a site is a crucial irst step in beginning any project in Dreamweaver. Knowing where the site root folder is located helps Dreamweaver determine link pathways and enables many site-wide options, such as Find and Replace.

Click Cancel. You will use the Welcome screen several times in this book. You can re-enable the Welcome screen in the General category of the Dreamweaver Preferences panel. Take a few moments to familiarize yourself with the design and components on the page. Can you determine what makes this layout diferent from existing HTML 4-based designs?

You will learn the diferences as you work through this lesson. You will align this element to the left later in this lesson. Observe the names and order of the tag selectors at the bottom of the document window. Elements appearing to the left are parents, or containers, of all elements to the right. As you click around the page sections, you will be able to determine the HTML structure without having to delve into the Code view window at all.

In many ways, the tag selector interface makes the job of identifying the HTML skeleton much easier, especially in complex page designs. These are some of the new semantic elements being introduced in HTML5. By using elements that are named for speciic tasks or types of content, you can streamline code construction while achieving other beneits as well.

For example, as search engines, such as Google and Yahoo, are optimized for HTML5, they will be able to locate and identify speciic types of content on each page more quickly, making your site more useful and easier to browse. Using these new elements means that you can apply complex CSS styling while reducing the complexity of the code overall. You can still use class and id attributes, but the new semantic elements reduce the need for this technique.

Style display is typically on by default showing a check mark in the menu. Without the CSS styling, the navigation menu reverted back to a simple bulleted, or unordered, list with hyperlinks. Not too long ago this menu would have been built with images and complex rollover animation.

If the images failed to load, the menu usually became a jumbled, unusable mess. But navigation built on text-based lists, on the other hand, will always be usable, even without styling.

Get into the habit of saving your iles on a regular basis. It will prevent the loss of data and important changes to your iles. In the Save As dialog box, navigate to the site root folder, if necessary. Name the ile mylayout. All HTML pages created for the inal site will be saved in the site root folder.

❿

Adobe dreamweaver cs6 shortcut keys pdf free.Dreamweaver CS6/ 8 Keyboard Shortcuts PDF FREE DOWNLOAD with Images | Gif

 
Each lesson has its own folder; you must copy the folders to your hard drive to complete the lessons.❿
 
 

❿