Adobe dreamweaver

Adobe Dreamweaver v CS6

Download Links:

• Click here to download
• Click here to download

This is a torrent file

Defining a Dreamweaver site

From this point forward, the lessons in this book function within a Dreamweaver site. You will create webpages from scratch and use existing files and resources that are stored on your hard drive, which combined make up what’s called your local site. When you are ready to upload your site to the Internet (see Lesson 16, “Publishing to the Web”), you publish your completed files to a web host server, which then becomes your remote site. The folder structures and files of the local and remote sites are usually mirrors of each other.

First, let’s set up your local site:

1. Launch Adobe Dreamweaver CS6, if necessary.
2. Choose Site > New Site. The Site Setup dialog box appears.
If you’ve used any previous version of Dreamweaver, you will notice that the Site Setup dialog box has been slightly redesigned. Along with the options for creating a standard Dreamweaver site, the dialog offers the ability to create a site based on the services offered 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,
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 specific project or client and will appear in the Files panel. This name is intended for your own purposes, so there are no limitations to the name you can choose. It’s a good idea to use a name that clearly describes the purpose of the website.

3. In the Site Name field, type DW-CS6.
4. Next to the Local Site Folder field, click the folder () icon. When the Choose Root Folder dialog box opens, navigate to the DW-CIB folder containing the lesson files you copied from the Adobe Dreamweaver CS6 Classroom in a Book CD and click Select/Choose.
You could click Save at this time and begin working on your new website, but we’ll add one more piece of handy information.

5. Click the arrow () next to the Advanced Settings category to reveal the tabs listed there. Select the Local Info category.
Although it’s not required, a good policy for site management is to store different file types in separate folders. 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.

6. Next to the Default Images Folder field, click the folder () icon. When the dialog box opens, navigate to the DW-CS6/images folder containing the files you copied from theAdobe Dreamweaver CS6 Classroom in a Book CD and click Select/Choose.
You’ve entered all the information required to begin your new site. In subsequent lessons, you’ll add more information to enable you to upload files to your remote site and test dynamic webpages.

7. In the Site Setup dialog box, click Save.
The site name DW-CS6 now appears in the site list pop-up menu in the Files panel.

Setting up a site is a crucial first 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.

Using the Welcome screen

The Dreamweaver Welcome screen provides quick access to recent pages, easy creation of a range of page types, and a direct connection to several key Help topics. The Welcome screen appears when you first start the program or when no other documents are open. Let’s use the Welcome screen to explore ways to create and open documents.

1. In the Create New column of the Welcome screen, click HTML to create a new, blank HTML page instantly.
2. Choose File > Close.
The Welcome screen reappears.

3. In the Open A Recent Item section of the Welcome screen, click the Open button. This allows you to browse for files to open in Dreamweaver. Click Cancel.

The Welcome screen shows you a list of up to nine of your recently opened files; however, your installation may not display any used files at this point. Choosing a file from this list is a quick alternative to choosing File > Open when you want to edit an existing page you have recently opened or created.

You will use the Welcome screen several times in this book. When you’ve completed the lessons in this book, you may prefer not to use the Welcome screen or even see it. If so, you can disable it by selecting the Don’t Show Again option in the lower left of the window. You can re-enable the Welcome screen in the General category of the Dreamweaver Preferences panel.

To understand the layout you will work on in this lesson, preview the completed page in Dreamweaver.

1. In Dreamweaver CS6, press Shift-Ctrl-F/Shift-Cmd-F to open the Files panel, and select DW-CS6 from the site list.
2. In the Files panel, expand the Lesson04 folder.
3. Double-click layout_finished.html to open it.



This page represents the completed layout you will create in this lesson. It is based on the wireframe drawings made earlier in this lesson and uses one of the new HTML5 CSS layouts available in Dreamweaver. Take a few moments to familiarize yourself with the design and components on the page. Can you determine what makes this layout different from existing HTML 4-based designs? You will learn the differences as you work through this lesson.

4. Choose File > Close.

Modifying an existing CSS layout

NOTE

If for some reason you can’t or don’t want to use an HTML5-based layout, see the sidebar “Alternate HTML 4 workflow” later in this lesson.

The predefined CSS layouts provided by Dreamweaver are always a good starting point. They are easy to modify and adaptable to most projects. Using a Dreamweaver CSS layout, you will create a proof-of-concept page to match the final wireframe design. This page will then be used to create the main project template in subsequent lessons. Let’s find the layout that best matches the wireframe.

1. Choose File > New.
2. Choose Blank Page > HTML in the New Page dialog box.
Dreamweaver CS6 offers 16 standard HTML 4 layouts and two HTML5 CSS layouts. Although the HTML5 layouts use some of the new semantic content elements, they are nearly identical to the HTML 4 designs. Unless you need to support an installed base of older browsers, there’s little to worry about using the newer layouts. Let’s choose one of the HTML5 layouts that best fits the needs of the new site.




The layout “HTML5: 2 column fixed, right sidebar, header and footer” has the most in common with the target design. The only difference is that the sidebar element is aligned to the right of the layout instead of to the left. You will align this element to the left later in this lesson.

3. Select HTML5: 2 column fixed, right sidebar, header and footer from the layout list. Click Open/Create.
4. Switch to Design view, if necessary.
5. Insert the cursor anywhere in the page content. Observe the names and order of the tag selectors at the bottom of the document window.



The display order of elements in the tag selector directly correlates to the page’s code structure. Elements appearing to the left are parents, or containers, of all elements to the right. The element farthest to the left is the highest in the page structure. As you can see, the <body> element is highest and <div.container> is second.
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.

Semantics is all in the name
You will see several elements that you may not be familiar with yet, such as<section>, <article>, <aside>, and <nav>. These are some of the new semanticelements being introduced in HTML5. In the past, you would have seen <div>elements identified and differentiated with class or id attributes, such as <div class=”header”> or <div id=”nav”>, to make it possible to apply CSS styling. HTML5 has simplified this construction down to <header> and <nav>. By using elements that are named for specific tasks or types of content, you can streamline code construction while achieving other benefits as well. For example, as search engines such as Google and Yahoo are optimized for HTML5, they will be able to locate and identify specific types of content on each page more quickly, making your site more useful and easier to browse.
The page consists of four main content elements, three subsections, and a single element that wraps around all the others. All but one of these are new HTML5 elements, including <header>, <footer>, <nav>, <aside>, <article>, and <section>. The only <div>elements are being used to hold the sidebar content and to hold everything together. 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.
To understand exactly how much this design depends on CSS, it’s sometimes a good idea to shut off CSS styling.

6. Choose View > Style Rendering > Display Styles to disable CSS styling in Design view.
Style display is typically on by default (showing a check mark in the menu). By clicking this option in the menu, you’ll toggle CSS styling off temporarily.




7. Note the identity and order of each page component.
Without CSS, the HTML skeleton is exposed for all to see. It’s instructive to know what the page will look like if somehow the cascading style sheet is disabled or not supported by a particular browser. Now it’s easier to identify the page components and their structure. Although it is not strictly required, items that display higher on the page, like<header>, usually are inserted before other elements that appear lower, like <footer>.
Another important aspect you should notice is the navigation 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. The hyperlinks continued to work, but without the images there were no words to tell the user what they were clicking. But navigation built on text-based lists, on the other hand, will always be usable, even without styling.

8. Choose View > Style Rendering > Display Styles to turn on CSS styling again.
It’s a good idea to get into the habit of saving files before you modify any settings or add content. Dreamweaver doesn’t offer a backup or recovered-file feature; if it crashes before you save, all your work in any open, unsaved file will be lost. Get into the habit of saving your files on a regular basis. It will prevent the loss of data and important changes to your files.

9. Choose File > Save. In the Save As dialog box, navigate to the site root folder, if necessary. Name the file mylayout.html and click Save.

Dreamweaver normally saves HTML files to the default folder specified in the site definition, but it’s a good idea to double-check the destination to make sure your files end up in the right place. All HTML pages created for the final site will be saved in the site root folder.

Alternate HTML 4 workflow

HTML5 is coming on strong all over the Internet, and for most applications the suggested workflow will work perfectly well. But HTML5 is not the current web standard, and some pages or components may not display properly on certain older browsers and devices. If you’d rather work with code and structures that are more tried and true, feel free to substitute one of the HTML 4-based layouts still offered by Dreamweaver. We suggest the layout “2-Column fixed, left sidebar, header and footer.”

However, if you use this layout you’ll have to adapt the steps within all the following lessons and exercises to this layout. For example, HTML 4 doesn’t use the new semantic elements, such as the following:

<header>...</header> 
<footer>...</footer>
<section>...</section> 
<article>...<article>
<nav>...</nav>

Instead, substitute a generic <div> element and use a class attribute that identifies the component:

<div class=”header”>...</div>
<div class=”footer”>...</div>
<div class=”section”>...</div>
<div class=”article”>...</div> 
<div class=”nav”>...</div>

You’ll also have to adapt the CSS styling for the HTML 4 elements. In most cases, Dreamweaver will supply many of the rules you’ll need with the layout or will build the appropriate selector name for you automatically by using the class name in place of the HTML5 component (header, footer, nav, and so on).

That way, the CSS rule header {color:#090} becomes instead .header { color: #090 }.

With all the caveats out of the way, the ugly truth is that even when you use standard HTML 4 code and components, older browsers and certain devices will still fail to render them properly. Some web designers believe that the longer we persist in using the older code, the longer the older software and devices will hang around making our lives difficult and delaying the inevitable adoption of HTML5. These designers say we should abandon the older standards and force users to upgrade as soon as possible.

The final decision is yours or your company’s to make. In most cases, the problems you experience with HTML5 will be minor flaws—a font that’s too big or too small—not a complete meltdown.

Adding a background image to the header

CSS styles are the current standard for all web styling and layout. In the following exercises, you’ll apply background colors and a background image to a page section, adjust element alignment and the page width, and modify several text properties. All these changes are accomplished using Dreamweaver’s CSS Styles panel.

If you start at the top of the page and work down, the first step would be to insert the graphical banner that appears in the final design. You could insert the banner directly into the header, but adding it as a background image has the advantage of leaving that element open for other content. It will also allow the design to be more adaptable to other applications, like cell phones and mobile devices.

1. Choose Window > CSS Styles to display the CSS Styles panel, if necessary.
2. Select the image placeholder Insert_logo (180x90) in the header. Press Delete.
When you delete the image placeholder, the empty header will collapse to a fraction of its former size because it has no CSS height specification.

3. Double-click the header rule to edit it.
4. In the Background category of the “CSS Rule Definition for header” dialog box, click the Browse button next to the Background-image field.
5. Select banner.jpg and note the dimensions of the image in the preview.



The image is 950 by 130 pixels.

6. Click OK/Choose.
Background images repeat both vertically and horizontally by default. This isn’t a problem at the moment, but to ensure that this setting doesn’t cause any undesirable effects in the future, you’ll need to change the repeat behavior.

7. Choose no-repeat from the Background-repeat menu.



8. Click Apply to view the results.
The header is wide enough but not tall enough to display the entire background image. Since background images aren’t truly inserted into an element, they have no effect (positive or negative) on the size of a container. To ensure that the <div> is large enough to display the entire image, you need to add a height specification to the header rule.

9. In the Box category, type 130 in the Height field and choose px from the pop-up menu to the right of the Height field. Click Apply.



The background appears fully in the <header> element. Note that the image is slightly narrower than the container. We’ll adjust the width of the layout later. We don’t want to set the width on the <header> element itself. You learned in Lesson 3 that the width of block elements, like <header>, defaults to the entire width of their parent element. Before clicking OK, we need to add some finishing touches to the element.
The <header> element contains a background color that doesn’t match your site color scheme. Let’s apply one that does.

10. In the Background category, type #090 in the Background-color field. Click OK.
You won’t see the background color unless the background image fails to load.

11. Choose File > Save.

Inserting new components

The wireframe design shows two new elements that don’t exist in the current layout. The first contains the butterfly image, the second the horizontal navigation bar. Did you notice that the butterfly actually overlaps both the header and the horizontal navigation bar? There are several ways to achieve this effect. In this case, an absolutely positioned (AP) <div> will work nicely.

NOTE

To better understand how this technique works, try this step in Split view.

1. Insert the cursor into the header, if necessary. Select the <header> tag selector. Press the Left Arrow key.
This procedure should insert the cursor before the opening <div> tag for the header. If you had pressed the Right Arrow key, the cursor would move outside the closing </div> tag for the header instead. Remember this technique—you’ll use it frequently in Dreamweaver when you want to insert the cursor in a specific location before or after a code element without resorting to Code view.

NOTE
AP divs were used extensively in the past to create highly structured, fixed-layout web designs. This technique has declined dramatically in recent years as the need to support cell phones and other mobile devices has increased. For certain applications, AP divs are still handy.
2. Choose Insert > Layout Objects > AP div.



An AP div will appear at the top left of the header. Note the ID (#apdiv1) assigned to the new div in the tag selector. A corresponding rule has been added to the CSS Styles panel.
In previous versions of HTML, an AP div would have been assigned its size and position using inline HTML attributes. In a concession to new CSS-based web standards, these specifications are now applied by CSS via a unique ID created by Dreamweaver at the moment you insert the element.

3. Click the <div#apdiv1> tag selector.



The Property inspector displays the specifications for <div#apdiv1>. Note the element’s width and height. Another property to be aware of is the z-index. This setting determines whether the element displays above or below another object. By default, all elements have a z-index of zero (0). On the other hand, the AP div has a z-index of 1, which means it will appear above all the other elements on the page. All the values displayed in the Property inspector are actually stored in the #apdiv1 rule that was generated automatically by Dreamweaver.

4. Insert the cursor into <div#apdiv1>.
5. Choose Insert > Image. Select butterfly-ovr.png from the images folder. Observe the dimensions of the image: 170 pixels by 158 pixels.
6. Click OK/Choose.
The Image Tag Accessibility Attributes dialog box appears.

7. Type GreenStart Logo in the Alternate text field in the Image Tag Accessibility Attributes dialog box. Click OK.
The butterfly appears in the AP div.
You’ll notice that the AP div is slightly wider than the butterfly image. Although the extra space shouldn’t cause any trouble, it’s a good idea to match the dimensions of the container to the image.

Testing special image effects
You may have noticed that the butterfly displays a partially translucent drop shadow. The PNG file type supports alpha transparency, making this 3D effect possible. Unfortunately, older browsers may not support alpha transparency and other PNG features. If you use PNG files with such effects, always test them in your target browsers to make sure the desired effects are supported. If not, remove the effect or replace the file with a similar image saved as a different file type (GIF or JPEG).
8. Double-click the #apdiv1 rule in the CSS Styles panel.
The “CSS Rule definition for #apdiv1” dialog box appears.

9. In the Box category, change the width to 170 px. Change the height to 158 px.
The <div> dimensions now match the height and width of the image.

10. Deselect the Same For All check boxes for Margins.
11. Type 10 px in the Top margin field. Type 30 px in the Left margin field. Click OK.
When the rule definition dialog box vanishes, <div#apdiv1> appears floating over the header, 10 pixels from the top and 30 pixels to the left of its original position.
An AP div acts like a free agent. It ignores the other page components and can even be positioned above or below other <div> elements and content.
The <div#apdiv1> is complete. Now, let’s add another new component that will hold the horizontal navigation shown in the site design specs. The vertical navigation menu will hold links to the organization’s products and services. The horizontal navigation will be used to link back to the organization’s home page, mission statement, and contact information.
In HTML 4, you probably would have inserted the links into another <div> element and used a class or id attribute to differentiate it from the other <div> elements in the file. Instead, HTML5 provides a new element geared specifically toward such components:<nav>.

12. Insert the cursor back into the header. Click the <header> tag selector. Press the Right Arrow key.
The cursor should now appear after the ending </header> tag.

13. Press Ctrl-T/Cmd-T to activate the Tag Editor.



The Tag Editor appears, allowing you to add HTML components or edit existing tags without having to switch to Code view.

NOTE
The <nav> element is new in HTML5. If you need to use HTML 4 code and structures, see the sidebar “Alternate HTML 4 workflow” earlier in this lesson.
14. Type nav. Press Return/Enter as necessary to complete the tag.
An empty <nav> element has been inserted into the code, and the cursor has been inserted within this element ready for you to enter any content.

15. In the Property inspector, select Paragraph from the Format pop-up menu. Type Home | About Us | Contact Us in the new <p> element as placeholders for navigation links.



You will convert these to actual hyperlinks in Lesson 9, “Working with Navigation.” Let’s create a new CSS rule to format this element.

16. Select the <p> tag selector at the bottom of the document window.
17. In the CSS Styles panel, click the New CSS Rule button.



18. If necessary, select Compound from the Selector Type menu.
The Selector Name window should display .container nav p.

19. Click the Less Specific button to remove the notation .container from the selector name.
The Selector Name window should display nav p.

20. Click OK to create the rule.
The “CSS Rule Definition for nav p” dialog box should appear.

21. In the Type category, type 90 in the Font-size field and select the percentage sign (%) from the pop-up list. Type #FFC in the Color field. Select Bold from the Font-weight field.
22. In the Background category, type #090 in the Background-color field.
23. In the Block category, select Right from the Text-align field.
24. In the Box category, deselect the Same For All check box for Padding. Enter 5 px in the Top padding field. Enter 20 px in the Right padding field. Enter 5 px in the Bottom padding field.
NOTE
To enter separate values in the Bottom field, remember to deselect the Same For All check boxes in each section first.
25. In the Border category, deselect the Same For All check boxes for Style, Width, and Color. Enter the following values only in the corresponding Bottom border fields: solid, 2 px, #060.
26. Click OK in the CSS Rule Definition dialog box. Press Ctrl-S/Cmd-S to save the file.

The new <nav> element appears below the header fully formatted and filled with your placeholder text aligned to the right.

Changing element alignment

The proposed design calls for the sidebar to appear on the left side of the layout, but this layout puts it on the right. Dreamweaver does offer HTML 4 layouts that match the design criteria much more closely, but it was hard to resist working with an HTML5 layout and all the new semantic elements. Besides, adjusting the layout is a lot easier than you may think.

1. In Design view, insert the cursor anywhere in the right sidebar.
2. Click the Code Navigator () icon, or right-click in the sidebar and select the Code Navigator option from the context menu.
The Code Navigator window opens, displaying all CSS rule names that may affect the selected element.

3. Identify the rule that aligns the sidebar to the right.



The obvious culprit is the.sidebar1 rule, which contains the declaration float: right.

4. In the CSS Styles panel, double-click the.sidebar1 rule to edit it.
5. In the Box category, change the float property from right to left.
6. Click Apply to preview the change.



The sidebar moves to the left side of the layout.

7. Save the file.

Modifying the page width and background color

Before you convert this file into the project template, let’s tighten up the formatting and the placeholder content. For example, the overall width has to be modified to match the banner image. Before you can adjust the width, you’ll first have to identify the CSS rule that controls the page width.

1. Select View > Rulers > Show or press Alt-Ctrl-R/Opt-Cmd-R to display the rulers in the Design window.
You can use the rulers to measure the width and height of HTML elements or images. The orientation of the rulers defaults to the upper-left corner of the Design window. To make it easier to use, you can set this zero point anywhere in the Design window.

2. Position the cursor over the axis point of the horizontal and vertical rulers. Drag the crosshairs to the upper-left corner of the header element in the current layout. Note the width of the layout.



Using the ruler, you can see that the layout is between 960 and 970 pixels wide.

3. Insert the cursor into any content area of the layout.
Observe the tag selector display to locate any elements that may control the width of the entire page; it would have to be an element that contains all the other elements. The only elements that fit this criterion are <body> and <div.container>.

4. Click the Code Navigator () icon, or right-click in the sidebar and select Code Navigator from the context menu.
The Code Navigator window opens, displaying all CSS rule names that may affect the selected element.

5. Move the cursor over the body and .container rules to locate the specification that may control the page width.



Can you identify the rule that controls the width of the entire page? The .container rule contains the declaration width: 960px. By now you should be getting good at CSS forensics using the tag selector interface and the Code Navigator.

6. Double-click the .container rule in the CSS Styles panel.
7. In the Box category, change the width to 950 px. Click OK.



The <div.container> element now matches the width of the banner image, but you may have experienced an unintended consequence when you changed the overall width. In our example, the main content area shifted down below the sidebar. To understand what happened, you’ll have to do a quick investigation.

8. In the CSS Styles panel, click the .content rule and check its properties. Note its width: 780 pixels.
9. Click the .sidebar1 rule and check its width: 180 pixels.
Combined, the two <div> elements total 960 pixels, the same as the original layout width. The elements are too wide to sit side by side in the main container and thereby prompted the unexpected shift. This type of error is common in web design and is easily fixed by adjusting the width of either of the two child elements.

10. Click the .content rule in the CSS Styles panel. In the Properties section of the panel, change the width to 770 px.



The <div.content> element returns to its intended position. This was a good reminder that the size, placement, and specifications of page elements have important interactions that can affect the final design and display of your elements and of the entire page.
The current background color of the page detracts from the overall design. Let’s remove it.

11. Double-click the body rule. In the Background category, change the Background-color to#FFF. Click OK.
Note that the absence of the background color gives the impression that the page’s content area drifts off into the wide expanse. You could give <div.content> its own background color, or you could simply add a border to give the page a definitive edge. For this application, a thin border makes the most sense.

12. Double-click the .container rule. In the Border category, select the Same For All check box and enter the following values for all border fields: solid, 2px, and #060. Click OK.



A dark green border appears around the page edge.

13. Save the file.