Dreamweaver Archives - Page 9 of 19

Review: CSS: The Missing Manual

by Web Teacher

CSS: The Missing Manual (Amazon.com affiliate link)

★★★★ CSS: The Missing Manual by David Sawyer McFarland is from O’Reilly (2009). The books in the missing manual series are always dependable resources, and this book is no exception. The book isn’t a big wow. It isn’t bad. It’s somewhere in the middle where solid resources and reliable information can be found. If you need a book that answers your CSS questions quickly and clearly, this book is a good choice.

The book is in three sections. In Part One, you get the basics including a summary of why Plain Old Semantic HTML (POSH) is desirable, a look at the construction of a style rule, and an explanation of internal and external style sheets. Other basics in Part One include selectors, inheritance, and the Cascade. Part Two deals with applied CSS. The applied CSS includes styling text, margins, padding, borders, graphics, links and navigation, tables, and forms. Part Three is devoted to page layout. There an introductory chapter dealing with divs and how to mock up a design based on content. Then a chapter for float-based layouts and another for positioned elements. Neither of the chapters in the page layout part of the book deal with layout techniques using the display property, probably because Internet Explorer is so problematic in that area. (The book does include lots of tips for dealing with the difficulties of IE, however.) Part Four is Advanced CSS. Section Four includes media targeted style sheets such as print styles, tips on commenting CSS, some descendent selector information and information about how to use conditional comments for IE. The advanced information includes a brief chapter on CSS 3. There are three appendixes: CSS properties, CSS in Dreamweaver CS 4, and an extensive list of resources.

The appendix about using CSS in Dreamweaver CS4 is an interesting addition to the book. You don’t often see this sort of thing in a book that is strictly about CSS. Normally, you must get a Dreamweaver CS4-specific book for information about CSS in Dreamweaver. I actually find this to be a plus in CSS: The Missing Manual‘s favor. While I think everyone working in front end web development should know CSS front to back, I also realize that tools like Dreamweaver get used in the real world because they save so much time.

Summary: A solid resource

Technorati Tags: CSS: The Missing Manual, book reviews

Summary of eHow articles for September

Lots of hummingbirds in my life this past month. Their whirring was like traffic noise around my house. They even made their way into my eHow articles.

New Tutorial from Project VII

In Easy Multi-Column Designs Using CSS 2.1 Display Properties, Project VII provides us with a free tutorial on using CSS display properties (specifically display: table properties) to create multi-column layouts.

CSS table display allows us to create a perfectly stable multi-column design, with a flexible middle column and fixed-width sidebars, while avoiding the pitfalls and hacks you would encounter using CSS floats. You won’t have to worry about issues such as negative margins, box-model calculations, extra structural elements, equal height columns, float drop, or float clearing.

The tutorial is excellent and I recommend it for your edification. Like all PVII material, it is designed for use in Dreamweaver. However, anyone can follow along with the exercise and do it in a text editor just as easily. Dreamweaver is not required. The IE workarounds are explained extensively.

Related Web Teacher post: Adapting Dreamweaver CSS layouts to display:table rules where PVII’s Al Sparber commented on my post a couple of weeks ago. I’m happy he started thinking along the lines of a better way to use the display property, because now we have his excellent tutorial.

Make a Dreamweaver Spry Widget Work as a Library Item

Library items are reusable snippets of code that can be added to pages in Adobe Dreamweaver. A single copy of the Library item is used on numerous pages. When the Library item is updated, all the instances of that code on all the pages in the site are also updated. It’s a time saving tool for Dreamweaver users.

Using the Dreamweaver Spry widgets as Library items presents some challenges. It can be done, but you must pay attention to all the elements involved in making the Spry widget work.

For this example, assume you want to insert a Spry menu bar into your page. Insert it into the appropriate spot in your Dreamweaver document.

Then save the page. You are informed that dependent files must be saved as well. These files are the JavaScript and CSS files that make the menubar work. They also include the small arrow graphics that indicate that a submenu is present.

When saved, the dependent files are stored in your site in a folder called Spry Assets.

If you look at your document in Code view, you will see two other items that are added to your page. In the document head, you see a script and a link element that connect your page to the dependent files in the SpryAssets folder.

If you scroll down to the very bottom of the document in Code View, you find a JavaScript function call.

To make the menubar into a Library item, you must ensure that any page into which you insert the Library item also has both the script and stylesheet link that you see in the document head, and the JavaScript function call that you see at the bottom of the page.

If you are creating your site using a Dreamweaver template, you can add these two items to your template, and they will appear on every page you make. The menubar could also be added to your pages as part of a template instead of as a Library item. In that scenario, the template page would already include the dependent files links and the function call script.

If you are not using a Dreamweaver template you must link to the files in the Spry Assets folder manually. You can add a link to the CSS using the CSS panel. The script link can be made using Insert > HTML > Script Objects > Script. The easiest way to include the JavaScript function call from the bottom of the page is to copy those lines of code into the code that goes into the snippet you save as a Library item.

ADDENDUM: Related video

Summary of eHow articles for June

Summer is here. A mini-vacation for my family was a fast trip to Sea World San Antonio. My kids and grandkids and myself took in the heat, the shows, and the water. We wore ourselves out having fun.

I also got a few things written for eHow in June:

Useful links: students and teachers networking, .gov sites, Dreamweaver tip

when teachers and students connect outside school at apophenia asks What do you think is the best advice for other teachers when it comes to interacting with students on social network sites? She said,

Digital technologies collapse social contexts all the time. The key to figuring out boundaries in a digital era is not to try to revert to space. The key is to focus on people, roles, relationships, and expectations. A teacher’s role in relation to a student should not end at the classroom door. When a teacher runs into a student at a local cafe, they are still that student’s teacher. When a teacher runs into a student online, they are still that student’s teacher. Because of the meaning of a teacher-student relationship, that should never be relaxed; the role of teacher should always be salient (except when the teacher also happens to be the parent which is when things get very murky very fast).

Leave your comments at apophenia.

Jim Thatcher continues his series examining the accessibility of Obama administration web sites with a look at Accessibiliity of MakingHomeAffordable.gov and Accessibility of Data.gov.

A Forgotten Productivity Tip: Dreamweaver CS4 from Greg Rewls is a good tip.

Standards and Accessibility with Dreamweaver

Yesterday Emily Lewis and I gave a talk for Webuquerque. Here’s the presentation: Standards and Accessibility with Dreamweaver.

The slides are posted on Emily’s blog, A Blog Not Limited. Emily explained the principles and goals of developing with web standards and best practices, then I gave some demos in Dreamweaver to show how to implement the standards in that software environment.

Emily shares the leadership of Webuquerque this year with Jason Nakai, who made a video of the presentation. The video will provide some extra context for the slides and show the live demos in Dreamweaver, as opposted to the screen grabs you see in the slides. I’ll let you know when the video is ready.