Everyone's Dreamweaver CS4 Level Two
Interactive Online Course
Chapter One – Cascading Style Sheets
Cascading Style Sheets (CSS) is the current method of styling HTML pages. CSS offers more formatting choices. It takes less space. It is more efficient than using text formatting through the Properties Inspector. And if that has not sold you, it has been said that the old methods of styling will no longer be supported in future browser versions. In this chapter you will set up the Level Two files and do some review of basic HTML styling. Next you will dive in and begin with the creation of Tag Selectors which redefine HTML elements. You will export styles to an external style sheet, and then attach the external style sheet to other HTML files. This way, you can make use of the styles you create site wide and of course any changes you make to the styles will be applied to all pages in the site that are linked to the external style sheet. You will move on to compound selectors, which include descendant selectors, allowing you to apply CSS rules to specific elements on the page. You will take a look at setting page properties, and pseudo styles. Then you will move on to class selectors, applying classes to text and to images. You will work with floated elements allowing you to float an image beside a paragraph or two blocks of text side by side. This will lead you to the layout of the page using divs. You will use ID selectors to style them with height and width attributes, with background colors, with images and borders. You will use a ‘faux column’ to overcome a limitation of styling using divs. In this chapter you will also learn about sizing using ems and you’ll take a look at the liquid and elastic layouts that are supplied with Dreamweaver CS4. And finally, you will use CSS to style tables, using HTML table elements, class selectors, grouped and descendant selectors. If this all sounds Greek to you, you can relax. Follow our lead and you will be amazed at how the pieces fall into place as you are guided through the hands-on exercises one step at a time.
Chapter Two – Templates
The purpose of a template is, not only to give the site a consistent ‘look and feel’, but also to prevent those people who have access to edit the site from making changes to certain aspects of the page. When a file is saved as a template, Dreamweaver CS4 locks (makes uneditable), the entire document except for those regions that have been specified as editable. In this chapter you will create a template from an existing file and then create a new document based on the template. You will open existing documents and apply your template, thus decreasing the effort it takes to create and style pages throughout the site.
Chapter Three – AP Divs AP
Divs are used to position items on the page. AP Divs offer the ability to hide objects if desired. AP Divs have a stacking ability. This is referred to as the Z index. And if you are worried about older browsers not displaying your AP Divs, Dreamweaver CS4 allows you to work with AP Divs and then turn them into a table later! In this chapter you will use AP divs to position text and image elements on the page. You’ll layout the page with AP divs and convert the page to a table and back again. A tracing image is introduced and you will use the tracing image as your guide for the placement of AP divs.
Chapter Four – Frames
Frames are used to display more than one HTML page in a browser at once. To keep a page containing your navigation bar on screen, and display the pages that your navigation bar links to in another area of the screen, a frameset is required. In this chapter you will experience various methods of creating frames and framesets. You will style them using the Properties Inspector and using CSS.
Chapter Five – Image Maps
An image map is an image with hot spots. A hot spot is an area that, when clicked, links to another location. In this chapter you will use Dreamweaver’s four hotspot tools, the Rectangular Hotspot Tool, the Oval Hotspot Tool, the Polygon Hotspot Tool and the Pointer Hotspot Tool. Once a hotspot is created, you will use the Link Hotspot property to specify the destination link for a hotspot.
Chapter Six – Forms
Forms are a great tool for providing interaction and getting information from your visitors. In this chapter you will create forms and add text inputs, check boxes, list menus, labels and buttons. You will also create a form with Spry validation, allowing the user input to be validated every time a field on the form is populated. You will create a form with and without the use of tables. And you will gain experience styling a form using CSS.
Chapter Seven – Behaviours
Behaviours are javascript programs that Dreamweaver CS4 creates for you such as creating a pick-list that links to an HTML document, creating rollover effects for navigation bars, checking for a browser version so you can redirect your visitors if needed and validating form objects. In this chapter you will create behaviours to validate form inputs, and to create an animated rollover, a pointer rollover and a swap image effect.
Chapter Eight – Spry Widgets
Dreamweaver CS4 provides several Spry Widget tools that make use of Asynchronous JavaScript and XML (AJAX). Spry widgets allow you to easily create impressive interactive menus, collapsible, accordion and tabbed panels that will enhance the usability of your web pages. In this chapter you will create a Spry menu bar with a drop down and style it with CSS. You will see how accordion and tabbed panels can be used to make more efficient use of the space on the page.