CSS
CSS3: Introducing HSL Colors
Reader Level:
CSS3 adds name colors from SVG as well as colors defined by Hue, Saturation and Lighness. In this article we explain the new HSL values, and list the HSL values of all the named colors.
Reader Level:
CSS3 adds name colors from SVG as well as colors defined by Hue, Saturation and Lighness. In this article we explain the new HSL values, and list the HSL values of all the named colors.
Design Your Own Custom CMX CSS Course - Part 4
Reader Level:
It's been a while since I published Design Your Own Custom CMX CSS Course - Part 3, which is part of a series that keeps a running catalog of all CSS and HTML related content on Community MX. We've released quite a few pieces since that December 2009 article, so it's time to continue the catalog where we left off. There have been articles about emerging technologies such as CSS3 and HTML5, some new JumpStarts, a new CSS Starter Page series, and even a Fireworks prototyping series. Let's get started looking at all the goodies.
Reader Level:
It's been a while since I published Design Your Own Custom CMX CSS Course - Part 3, which is part of a series that keeps a running catalog of all CSS and HTML related content on Community MX. We've released quite a few pieces since that December 2009 article, so it's time to continue the catalog where we left off. There have been articles about emerging technologies such as CSS3 and HTML5, some new JumpStarts, a new CSS Starter Page series, and even a Fireworks prototyping series. Let's get started looking at all the goodies.
Introducing CMX JumpStart Merry Christmas
Reader Level:
It's that most wonderful time of the year - not only is it the holiday season, but we're also gearing up for Community MX's annual open house. The entire web community is invited to browse our offerings for free, as well as accept our gift of a free CMX Dreamweaver template, CMX JumpStart Merry Christmas.
In this article I will discuss the features of the new JumpStart, and show you a modification that should get you started in thinking about ways you can use it in your own projects.
Reader Level:
It's that most wonderful time of the year - not only is it the holiday season, but we're also gearing up for Community MX's annual open house. The entire web community is invited to browse our offerings for free, as well as accept our gift of a free CMX Dreamweaver template, CMX JumpStart Merry Christmas.
In this article I will discuss the features of the new JumpStart, and show you a modification that should get you started in thinking about ways you can use it in your own projects.
CMX JumpStart: Merry Christmas
Reader Level:
Merry Christmas from Community MX!
To celebrate Christmas we are releasing our annual Christmas JumpStart. We would also like take the opportunity to wish you a great holiday and hope that everything you wish for is granted in the New Year. The Christmas JumpStart consists of four columns, one being occupied by the Spry Accordion widget, and the other three are floated columns. The layout presents the opportunity to display a great deal of information and lends itself nicely to a home page for a portal web site.
Reader Level:
Merry Christmas from Community MX!
To celebrate Christmas we are releasing our annual Christmas JumpStart. We would also like take the opportunity to wish you a great holiday and hope that everything you wish for is granted in the New Year. The Christmas JumpStart consists of four columns, one being occupied by the Spry Accordion widget, and the other three are floated columns. The layout presents the opportunity to display a great deal of information and lends itself nicely to a home page for a portal web site.
The CS5 CSS Starter Page Series Part 15: Lesson Plan for Teachers
Reader Level:
Now that we've completed the CS5 CSS Starter Page series, I would like to share my own lesson plans for incorporating the tutorials into a fifteen semester course. Join me as I give a class by class description of what I teach to my students at Montgomery College.
Reader Level:
Now that we've completed the CS5 CSS Starter Page series, I would like to share my own lesson plans for incorporating the tutorials into a fifteen semester course. Join me as I give a class by class description of what I teach to my students at Montgomery College.
Introducing CMX JumpStart Lucknow
Reader Level:
With President Obama in India this week, it is a good time to offer a JumpStart based on an Indian city. Lucknow is the capital city of Uttar Pradesh in India, and is also now the latest CMX JumpStart, CMX JumpStart Lucknow.
The main construction of CMX JumpStart Lucknow consists of liquid outer DIVs, but fixed inner content widths. This ensures that the design fills out the user's browser width while still maintaining a good line reading length. There are styles for two or three column options that can be controlled from a single CSS file. The first tier tabbed navigation uses the popular Sliding Door technique, and the second tier navigation uses an unordered list for greater accessibility. Both navigation schemes provide for a current page marker. The optional third column includes a styled Spry Accordion widget. A version of the Lucknow logo is included as a multi-layered PNG that is fully editable.
(And if this is all still not enough for you, later in this article I will give you a bonus CSS3 style sheet. You'll be able to add gradients, rounded corners, box shadows, and RGBA color to enhance the design without the weight of extra images.)
Reader Level:
With President Obama in India this week, it is a good time to offer a JumpStart based on an Indian city. Lucknow is the capital city of Uttar Pradesh in India, and is also now the latest CMX JumpStart, CMX JumpStart Lucknow.
The main construction of CMX JumpStart Lucknow consists of liquid outer DIVs, but fixed inner content widths. This ensures that the design fills out the user's browser width while still maintaining a good line reading length. There are styles for two or three column options that can be controlled from a single CSS file. The first tier tabbed navigation uses the popular Sliding Door technique, and the second tier navigation uses an unordered list for greater accessibility. Both navigation schemes provide for a current page marker. The optional third column includes a styled Spry Accordion widget. A version of the Lucknow logo is included as a multi-layered PNG that is fully editable.
(And if this is all still not enough for you, later in this article I will give you a bonus CSS3 style sheet. You'll be able to add gradients, rounded corners, box shadows, and RGBA color to enhance the design without the weight of extra images.)
CMX Jumpstart: Lucknow
Reader Level:
Lucknow is, of course, renowned for its blue lights, and the colour theme is based around this.
Lucknow provides a powerful and flexible interface on which you could base just about any design you could imagine. From the inverted sliding door navigation and the accompanying sub navigation system, to the built-in accordion and flexible column choice, Lucknow has it all.
Reader Level:
Lucknow is, of course, renowned for its blue lights, and the colour theme is based around this.
Lucknow provides a powerful and flexible interface on which you could base just about any design you could imagine. From the inverted sliding door navigation and the accompanying sub navigation system, to the built-in accordion and flexible column choice, Lucknow has it all.
The CS5 CSS Starter Page Series Part 5: Adding Navigation Systems
Reader Level:
In the last installment of this series, we completed all parts of the layout except for the navigation. In this tutorial, we'll style the unordered list of links into a set of vertical buttons. This is the default navigation styling for the Dreamweaver CS5 CSS Starter Pages. In the next tutorial, we'll change the navigation scheme into a horizontal navigation bar under the header, but for now it is important for you to understand how navigation in the CSS Starter Pages works.
The CS5 CSS Starter Page Series:
The CS5 CSS Starter Page Series - Part 1: The Yukon
The CS5 CSS Starter Page Series - Part 2: Marking up the Page
The CS5 CSS Starter Page Series - Part 3: Structuring with CSS
The CS5 CSS Starter Page Series - Part 4: Refining Details with CSS
The CS5 CSS Starter Page Series - Part 5: Adding Navigation Systems
The CS5 CSS Starter Page Series - Part 6: Converting to Horizontal Navigation
The CS5 CSS Starter Page Series - Part 7: Adding CSS3 Pods
The CS5 CSS Starter Page Series - Part 8: Adding a Custom Font
The CS5 CSS Starter Page Series - Part 9: Quality Assurance
The CS5 CSS Starter Page Series - Part 10: Making it Your Own
The CS5 CSS Starter Page Series - Part 11: Creating the Template
The CS5 CSS Starter Page Series - Part 12: Adding a Data Table
The CS5 CSS Starter Page Series - Part 13: Adding a Gallery
The CS5 CSS Starter Page Series - Part 14: Adding a Contact Form
Reader Level:
In the last installment of this series, we completed all parts of the layout except for the navigation. In this tutorial, we'll style the unordered list of links into a set of vertical buttons. This is the default navigation styling for the Dreamweaver CS5 CSS Starter Pages. In the next tutorial, we'll change the navigation scheme into a horizontal navigation bar under the header, but for now it is important for you to understand how navigation in the CSS Starter Pages works.
The CS5 CSS Starter Page Series:
The CS5 CSS Starter Page Series - Part 1: The Yukon
The CS5 CSS Starter Page Series - Part 2: Marking up the Page
The CS5 CSS Starter Page Series - Part 3: Structuring with CSS
The CS5 CSS Starter Page Series - Part 4: Refining Details with CSS
The CS5 CSS Starter Page Series - Part 5: Adding Navigation Systems
The CS5 CSS Starter Page Series - Part 6: Converting to Horizontal Navigation
The CS5 CSS Starter Page Series - Part 7: Adding CSS3 Pods
The CS5 CSS Starter Page Series - Part 8: Adding a Custom Font
The CS5 CSS Starter Page Series - Part 9: Quality Assurance
The CS5 CSS Starter Page Series - Part 10: Making it Your Own
The CS5 CSS Starter Page Series - Part 11: Creating the Template
The CS5 CSS Starter Page Series - Part 12: Adding a Data Table
The CS5 CSS Starter Page Series - Part 13: Adding a Gallery
The CS5 CSS Starter Page Series - Part 14: Adding a Contact Form
@font-face Hurdles and Tips
Reader Level:
Web site design has been hampered by the limited number of fonts available to most clients. Designers have been using image replacement and methods such as sIFR and Cufón to make up for limited choices in typography. Not anymore. With basically universal support of embedded fonts, we now have more options. This article discusses hurdles and tips to embedding fonts with @font-face.
Reader Level:
Web site design has been hampered by the limited number of fonts available to most clients. Designers have been using image replacement and methods such as sIFR and Cufón to make up for limited choices in typography. Not anymore. With basically universal support of embedded fonts, we now have more options. This article discusses hurdles and tips to embedding fonts with @font-face.
CMX JumpStart: Brasilia
Reader Level:
The Brasilia JumpStart looks at how we can use the flexibility of a CSS layout to control the number of columns on any given page directly from your CSS file. You simply need to add a class to the body tag and the CSS takes care of everything else for you! Brasilia also has a slight variation on the popular sliding doors CSS navigation system. While the concept is exactly the same as we have used in the past, on this occasion the navigation hangs from the top of the page rather than sitting at the bottom of its containing element.
The main construction of Brasilia consists of liquid horizontal outer divs while maintaining a fixed inner content width to ensure that the design fills out the user's browser width, while still maintaining a good line reading length. The layout will collapse gracefully on smaller viewports while the images in the strap are self centering to ensure the layout always displays at it's best. The content, as always, is created with valid code and accessibility in mind.
Reader Level:
The Brasilia JumpStart looks at how we can use the flexibility of a CSS layout to control the number of columns on any given page directly from your CSS file. You simply need to add a class to the body tag and the CSS takes care of everything else for you! Brasilia also has a slight variation on the popular sliding doors CSS navigation system. While the concept is exactly the same as we have used in the past, on this occasion the navigation hangs from the top of the page rather than sitting at the bottom of its containing element.
The main construction of Brasilia consists of liquid horizontal outer divs while maintaining a fixed inner content width to ensure that the design fills out the user's browser width, while still maintaining a good line reading length. The layout will collapse gracefully on smaller viewports while the images in the strap are self centering to ensure the layout always displays at it's best. The content, as always, is created with valid code and accessibility in mind.
Introducing CMX JumpStart Brasilia
Reader Level:
CMX JumpStart Brasilia is fluid, both in its outer and inner DIVs. The outer DIVs are completely fluid and conform to the width of the viewport. The inner DIVs are fluid, but with max width to keep reading lines comfortable, and min width to keep the layout from collapsing in narrow windows. There are styles for two or three column options that can be controlled from a single CSS file. The first tier tabbed navigation uses the popular Sliding Door technique, and the second tier navigation uses an unordered list for greater accessibility. Both navigation schemes provide for a current page marker. There is a "fat" header that allows your company to showcase important content and/or branding. The PNG allows for the editing of the images in the monitor screens if you wish to stick to the computer theme. In lieu of images, you could also put text in either the right or left floated areas of the header for a real "above the fold" showcasing of your message. The JumpStart includes a main style sheet, a version six and below Internet Explorer style sheet, a version seven and above Internet Explorer style sheet, and a Design Time Style Sheet (in case your version of Dreamweaver makes the layout difficult to edit in Design View). Of course Brasilia meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.
Reader Level:
CMX JumpStart Brasilia is fluid, both in its outer and inner DIVs. The outer DIVs are completely fluid and conform to the width of the viewport. The inner DIVs are fluid, but with max width to keep reading lines comfortable, and min width to keep the layout from collapsing in narrow windows. There are styles for two or three column options that can be controlled from a single CSS file. The first tier tabbed navigation uses the popular Sliding Door technique, and the second tier navigation uses an unordered list for greater accessibility. Both navigation schemes provide for a current page marker. There is a "fat" header that allows your company to showcase important content and/or branding. The PNG allows for the editing of the images in the monitor screens if you wish to stick to the computer theme. In lieu of images, you could also put text in either the right or left floated areas of the header for a real "above the fold" showcasing of your message. The JumpStart includes a main style sheet, a version six and below Internet Explorer style sheet, a version seven and above Internet Explorer style sheet, and a Design Time Style Sheet (in case your version of Dreamweaver makes the layout difficult to edit in Design View). Of course Brasilia meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.
The CS5 CSS Starter Page Series Part 1: The Yukon
Reader Level:
There is no other way to say it: the new CSS Starter Pages in Dreamweaver CS5 are wicked awesome. They are everything I would have hoped for in a version two upgrade. There are such significant changes from the first set that it is time to begin a new CS5 CSS Starter Page Series. The center of the series will be an ongoing project, CSS Starter Page Yukon. Not only will we take advantage of all the great new features in the new, improved CSS Starter Pages, but we'll get trendy with some CSS3 properties, as well as some custom typography.
The CS5 CSS Starter Page Series:
The CS5 CSS Starter Page Series - Part 1: The Yukon
The CS5 CSS Starter Page Series - Part 2: Marking up the Page
The CS5 CSS Starter Page Series - Part 3: Structuring with CSS
The CS5 CSS Starter Page Series - Part 4: Refining Details with CSS
The CS5 CSS Starter Page Series - Part 5: Adding Navigation Systems
The CS5 CSS Starter Page Series - Part 6: Converting to Horizontal Navigation
The CS5 CSS Starter Page Series - Part 7: Adding CSS3 Pods
The CS5 CSS Starter Page Series - Part 8: Adding a Custom Font
The CS5 CSS Starter Page Series - Part 9: Quality Assurance
The CS5 CSS Starter Page Series - Part 10: Making it Your Own
The CS5 CSS Starter Page Series - Part 11: Creating the Template
The CS5 CSS Starter Page Series - Part 12: Adding a Data Table
The CS5 CSS Starter Page Series - Part 13: Adding a Gallery
The CS5 CSS Starter Page Series - Part 14: Adding a Contact Form
Reader Level:
There is no other way to say it: the new CSS Starter Pages in Dreamweaver CS5 are wicked awesome. They are everything I would have hoped for in a version two upgrade. There are such significant changes from the first set that it is time to begin a new CS5 CSS Starter Page Series. The center of the series will be an ongoing project, CSS Starter Page Yukon. Not only will we take advantage of all the great new features in the new, improved CSS Starter Pages, but we'll get trendy with some CSS3 properties, as well as some custom typography.
The CS5 CSS Starter Page Series:
The CS5 CSS Starter Page Series - Part 1: The Yukon
The CS5 CSS Starter Page Series - Part 2: Marking up the Page
The CS5 CSS Starter Page Series - Part 3: Structuring with CSS
The CS5 CSS Starter Page Series - Part 4: Refining Details with CSS
The CS5 CSS Starter Page Series - Part 5: Adding Navigation Systems
The CS5 CSS Starter Page Series - Part 6: Converting to Horizontal Navigation
The CS5 CSS Starter Page Series - Part 7: Adding CSS3 Pods
The CS5 CSS Starter Page Series - Part 8: Adding a Custom Font
The CS5 CSS Starter Page Series - Part 9: Quality Assurance
The CS5 CSS Starter Page Series - Part 10: Making it Your Own
The CS5 CSS Starter Page Series - Part 11: Creating the Template
The CS5 CSS Starter Page Series - Part 12: Adding a Data Table
The CS5 CSS Starter Page Series - Part 13: Adding a Gallery
The CS5 CSS Starter Page Series - Part 14: Adding a Contact Form
Dreamweaver CS5 New Features Part 2: CSS Troubleshooting
Reader Level:
In this second article about the new features in Dreamweaver CS5, we'll look at some of the new ways Dreamweaver will help you troubleshoot your layouts. You'll wonder how you ever lived without CSS Inspect, or without the ability to enable and disable properties with the click of a button in the CSS Styles panel. You'll marvel at the new capabilities in the Style Rendering Toolbar, and become addicted to the new online service, BrowserLab.
Join me in a guided tour.
The Dreamweaver CS5 New Features Series:
Dreamweaver CS5 New Features Part 1: The All New CSS Starter Pages
Dreamweaver CS5 New Features Part 2: CSS Troubleshooting
Reader Level:
In this second article about the new features in Dreamweaver CS5, we'll look at some of the new ways Dreamweaver will help you troubleshoot your layouts. You'll wonder how you ever lived without CSS Inspect, or without the ability to enable and disable properties with the click of a button in the CSS Styles panel. You'll marvel at the new capabilities in the Style Rendering Toolbar, and become addicted to the new online service, BrowserLab.
Join me in a guided tour.
The Dreamweaver CS5 New Features Series:
Dreamweaver CS5 New Features Part 1: The All New CSS Starter Pages
Dreamweaver CS5 New Features Part 2: CSS Troubleshooting
Discovering CSS 3: Attribute Selectors
Reader Level:
In this tutorial we will learn how we can set multiple background images in an unordered list without the need to set class specific markup within your (X)HTML code. We will achieve this by making good use of available attributes. In this instance we will be using the type and lang attributes to provide links to language specific documents. By using this technique you will be able to affect all content within your documents that carry any given attribute from directly within your style sheet. You can of course apply this technique to any given element that accepts an attribute; it isn't limited to the type and lang attributes that I will use to show the technique in this tutorial.
Reader Level:
In this tutorial we will learn how we can set multiple background images in an unordered list without the need to set class specific markup within your (X)HTML code. We will achieve this by making good use of available attributes. In this instance we will be using the type and lang attributes to provide links to language specific documents. By using this technique you will be able to affect all content within your documents that carry any given attribute from directly within your style sheet. You can of course apply this technique to any given element that accepts an attribute; it isn't limited to the type and lang attributes that I will use to show the technique in this tutorial.
CMX JumpStart: Beijing
Reader Level:
Welcome to the Beijing JumpStart!
The Beijing JumpStart provides the easiest of solutions for changing the amount of columns on a page. You simply add a class to the body tag and the CSS takes care of everything else for you! Beijing also has a slight variation on the popular sliding doors CSS navigation system. While the concept is exactly the same as we have used in the past, on this occasion it hangs from the top of the page rather than sitting at the bottom of it's containing element.
The main construction of Beijing consists of liquid horizontal outer divs while maintaining a fixed inner content width to ensure that the design fills out the user's browser width while maintaining a good line reading length. The content as always is created with valid code and accessibility in mind.
Reader Level:
Welcome to the Beijing JumpStart!
The Beijing JumpStart provides the easiest of solutions for changing the amount of columns on a page. You simply add a class to the body tag and the CSS takes care of everything else for you! Beijing also has a slight variation on the popular sliding doors CSS navigation system. While the concept is exactly the same as we have used in the past, on this occasion it hangs from the top of the page rather than sitting at the bottom of it's containing element.
The main construction of Beijing consists of liquid horizontal outer divs while maintaining a fixed inner content width to ensure that the design fills out the user's browser width while maintaining a good line reading length. The content as always is created with valid code and accessibility in mind.
Introducing CMX JumpStart Beijing
Reader Level:
The Vancouver Olympics are over, and we are left with only nostalgia. Let's add the 2008 Beijing Olympics to our memories as we contemplate the latest CMX JumpStart, CMX JumpStart Beijing.
Reader Level:
The Vancouver Olympics are over, and we are left with only nostalgia. Let's add the 2008 Beijing Olympics to our memories as we contemplate the latest CMX JumpStart, CMX JumpStart Beijing.
Rotate That Image with CSS!
Reader Level:
A little unknown and not often used style of CSS is the ability to rotate images through a central axis.
Rotation is a very easy thing to achieve and it is not limited to just images, you can apply the same styling to text. The rotate value does require some proprietary code but the affect can be achieved across all the main stream browsers with the exception of Opera; as we shall see.
Reader Level:
A little unknown and not often used style of CSS is the ability to rotate images through a central axis.
Rotation is a very easy thing to achieve and it is not limited to just images, you can apply the same styling to text. The rotate value does require some proprietary code but the affect can be achieved across all the main stream browsers with the exception of Opera; as we shall see.
Creating a Bar Graph with HTML and CSS using ColdFusion - Part 2
Reader Level:
Graphs in web pages and reporting applications can be put together with built-in ColdFusion functionality using the tag, or with JavaScript libraries that are widely available. However, sometimes you have a need for a simple bar graph that does not depend on this more advanced technology; working with ColdFusion servers that do not have functioning on the server, or targeting browsers that are not JavaScript enabled.
Bar graphs can be created quite easily using ancient HTML technology without the aid of more advanced techniques for simple bar graphs that display quickly and across all browsers. For this tutorial, I'll assume you know basic ColdFusion and SQL -- writing queries, views, and getting the results you want.
A bar graph can be built vertically or horizontally. The first part showed the horizontal graph. This part will show the vertical graphing process. The basic process is to create the SQL query that you want to view the result as a graph, use a slim image that can be stretched as a basis of the bar graph, and set the height of the image based on the value of your data. For example, a value of $50 might translate to 50 pixels high, and $500 might translate to 500 pixels high. Using simple formulas, we'll create the graphs.
The Creating a Bar Graph with HTML and CSS Series:
Creating a Bar Graph with HTML and CSS using PHP - Part 1
Creating a Bar Graph with HTML and CSS using ColdFusion - Part 1
Creating a Bar Graph with HTML and CSS using PHP - Part 2
Creating a Bar Graph with HTML and CSS using ColdFusion - Part 2
Reader Level:
Graphs in web pages and reporting applications can be put together with built-in ColdFusion functionality using the
Bar graphs can be created quite easily using ancient HTML technology without the aid of more advanced techniques for simple bar graphs that display quickly and across all browsers. For this tutorial, I'll assume you know basic ColdFusion and SQL -- writing queries, views, and getting the results you want.
A bar graph can be built vertically or horizontally. The first part showed the horizontal graph. This part will show the vertical graphing process. The basic process is to create the SQL query that you want to view the result as a graph, use a slim image that can be stretched as a basis of the bar graph, and set the height of the image based on the value of your data. For example, a value of $50 might translate to 50 pixels high, and $500 might translate to 500 pixels high. Using simple formulas, we'll create the graphs.
The Creating a Bar Graph with HTML and CSS Series:
Creating a Bar Graph with HTML and CSS using PHP - Part 1
Creating a Bar Graph with HTML and CSS using ColdFusion - Part 1
Creating a Bar Graph with HTML and CSS using PHP - Part 2
Creating a Bar Graph with HTML and CSS using ColdFusion - Part 2
Introducing CMX JumpStart Agra
Reader Level:
Maybe you haven't heard of Agra, India, but you most definitely have heard of its most famous building, the Taj Mahal. Agra is a popular tourist destination, and now it will be a particularly popular CMX JumpStart, CMX JumpStart Agra. Why? Because one page includes multiple layout possibilities.
CMX JumpStart Agra is a 900 pixel wide, fixed-width layout providing multiple column options that can be controlled from a single CSS file. While the top half of Agra remains constant, the lower three-column section can easily be modified from its default three columns to either a one or two column layout. The tabbed navigation uses the popular Sliding Door technique.
The JumpStart includes a main style sheet, a version six and below Internet Explorer style sheet, a version seven and above Internet Explorer style sheet, and a Design Time Style Sheet (in case your version of Dreamweaver makes the layout difficult to edit in Design View).
Of course Agra meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.
Reader Level:
Maybe you haven't heard of Agra, India, but you most definitely have heard of its most famous building, the Taj Mahal. Agra is a popular tourist destination, and now it will be a particularly popular CMX JumpStart, CMX JumpStart Agra. Why? Because one page includes multiple layout possibilities.
CMX JumpStart Agra is a 900 pixel wide, fixed-width layout providing multiple column options that can be controlled from a single CSS file. While the top half of Agra remains constant, the lower three-column section can easily be modified from its default three columns to either a one or two column layout. The tabbed navigation uses the popular Sliding Door technique.
The JumpStart includes a main style sheet, a version six and below Internet Explorer style sheet, a version seven and above Internet Explorer style sheet, and a Design Time Style Sheet (in case your version of Dreamweaver makes the layout difficult to edit in Design View).
Of course Agra meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.
CMX JumpStart: Agra
Reader Level:
Welcome to The Agra JumpStart!
The Agra JumpStart is based around an Indian theme and follows the diversity of that country by providing multiple layout structures that can be controlled from a single CSS file. While the top half of Agra remains constant the lower three column section can be easily modified from its default three column layout to either a one or two column layout. Like India, Agra provides a solution for just about every requirement you may have!
Approximate download size: 4MB
Reader Level:
Welcome to The Agra JumpStart!
The Agra JumpStart is based around an Indian theme and follows the diversity of that country by providing multiple layout structures that can be controlled from a single CSS file. While the top half of Agra remains constant the lower three column section can be easily modified from its default three column layout to either a one or two column layout. Like India, Agra provides a solution for just about every requirement you may have!
Approximate download size: 4MB
Creating a Bar Graph with HTML and CSS using PHP - Part 2
Reader Level:
Graphs in web pages and reporting applications can be put together with various PHP libraries, such as using the JpGraph library shown in JpGraph: PHP Graphs & Charts On-The-Fly by Steven Seiller, or with JavaScript libraries that are widely available. However, sometimes you have a need for a simple bar graph that does not depend on this more advanced technology; working with PHP servers that do not have libraries installed, or targeting browsers that are not JavaScript enabled.
Bar graphs can be created quite easily using ancient HTML technology without the aid of more advanced techniques for simple bar graphs that display quickly and across all browsers. For this tutorial, I'll assume you know basic PHP and SQL -- writing queries, views, and getting the results you want.
A bar graph can be built vertically or horizontally. The first part showed the horizontal graph. This part will show the vertical graphing process. The basic process is to create the SQL query that you want to view the result as a graph, use a slim image that can be stretched as a basis of the bar graph, and set the height of the image based on the value of your data. For example, a value of $50 might translate to 50 pixels high, and $500 might translate to 500 pixels high. Using simple formulas, we'll create the graphs.
The Creating a Bar Graph with HTML and CSS Series:
Creating a Bar Graph with HTML and CSS using PHP - Part 1
Creating a Bar Graph with HTML and CSS using ColdFusion - Part 1
Creating a Bar Graph with HTML and CSS using PHP - Part 2
Creating a Bar Graph with HTML and CSS using ColdFusion - Part 2
Reader Level:
Graphs in web pages and reporting applications can be put together with various PHP libraries, such as using the JpGraph library shown in JpGraph: PHP Graphs & Charts On-The-Fly by Steven Seiller, or with JavaScript libraries that are widely available. However, sometimes you have a need for a simple bar graph that does not depend on this more advanced technology; working with PHP servers that do not have libraries installed, or targeting browsers that are not JavaScript enabled.
Bar graphs can be created quite easily using ancient HTML technology without the aid of more advanced techniques for simple bar graphs that display quickly and across all browsers. For this tutorial, I'll assume you know basic PHP and SQL -- writing queries, views, and getting the results you want.
A bar graph can be built vertically or horizontally. The first part showed the horizontal graph. This part will show the vertical graphing process. The basic process is to create the SQL query that you want to view the result as a graph, use a slim image that can be stretched as a basis of the bar graph, and set the height of the image based on the value of your data. For example, a value of $50 might translate to 50 pixels high, and $500 might translate to 500 pixels high. Using simple formulas, we'll create the graphs.
The Creating a Bar Graph with HTML and CSS Series:
Creating a Bar Graph with HTML and CSS using PHP - Part 1
Creating a Bar Graph with HTML and CSS using ColdFusion - Part 1
Creating a Bar Graph with HTML and CSS using PHP - Part 2
Creating a Bar Graph with HTML and CSS using ColdFusion - Part 2
Creating a Bar Graph with HTML and CSS using ColdFusion Part 1
Reader Level:
Graphs in web pages and reporting applications can be put together with built-in ColdFusion functionality using the tag, or with JavaScript libraries that are widely available. However, sometimes you have a need for a simple bar graph that does not depend on this more advanced technology; working with ColdFusion servers that do not have functioning on the server, or targeting browsers that are not JavaScript enabled. Bar graphs can be created quite easily using ancient HTML technology without the aid of more advanced techniques for simple bar graphs that display quickly and across all browsers. For this tutorial, I'll assume you know basic ColdFusion -- writing queries and getting the results you want.
A bar graph can be built vertically or horizontally. I'll show a simple horizontal graph. The basic process is to create the SQL query that you want to view the result as a graph, use a slim image that can be stretched as a basis of the bar graph, and set the width of the image based on the value of your data. For example, a value of $50 might translate to 50 pixels wide, and $500 might translate to 500 pixels wide. Using simple formulas, we'll create the graphs.
The Creating a Bar Graph with HTML and CSS Series:
Creating a Bar Graph with HTML and CSS using PHP - Part 1
Creating a Bar Graph with HTML and CSS using ColdFusion - Part 1
Creating a Bar Graph with HTML and CSS using PHP - Part 2
Creating a Bar Graph with HTML and CSS using ColdFusion - Part 2
Reader Level:
Graphs in web pages and reporting applications can be put together with built-in ColdFusion functionality using the
A bar graph can be built vertically or horizontally. I'll show a simple horizontal graph. The basic process is to create the SQL query that you want to view the result as a graph, use a slim image that can be stretched as a basis of the bar graph, and set the width of the image based on the value of your data. For example, a value of $50 might translate to 50 pixels wide, and $500 might translate to 500 pixels wide. Using simple formulas, we'll create the graphs.
The Creating a Bar Graph with HTML and CSS Series:
Creating a Bar Graph with HTML and CSS using PHP - Part 1
Creating a Bar Graph with HTML and CSS using ColdFusion - Part 1
Creating a Bar Graph with HTML and CSS using PHP - Part 2
Creating a Bar Graph with HTML and CSS using ColdFusion - Part 2
Creating a Bar Graph with HTML and CSS using PHP Part 1
Reader Level:
Graphs in web pages and reporting applications can be put together with various PHP libraries, such as using the JpGraph library shown in JpGraph: PHP Graphs & Charts On-The-Fly by Steven Seiller, or with JavaScript libraries that are widely available. However, sometimes you have a need for a simple bar graph that does not depend on this more advanced technology; working with PHP servers that do not have libraries installed, or targeting browsers that are not JavaScript enabled. Bar graphs can be created quite easily using ancient HTML technology without the aid of more advanced techniques for simple bar graphs that display quickly and across all browsers. For this tutorial, I'll assume you know basic PHP and SQL -- writing queries, views, and getting the results you want.
A bar graph can be built vertically or horizontally. I'll show a simple horizontal graph in this part. The basic process is to create the SQL query that you want to view the result as a graph, use a slim image that can be stretched as a basis of the bar graph, and set the width of the image based on the value of your data. For example, a value of $50 might translate to 50 pixels wide, and $500 might translate to 500 pixels wide. Using simple formulas, we'll create the graphs.
The Creating a Bar Graph with HTML and CSS Series:
Creating a Bar Graph with HTML and CSS using PHP - Part 1
Creating a Bar Graph with HTML and CSS using ColdFusion - Part 1
Creating a Bar Graph with HTML and CSS using PHP - Part 2
Creating a Bar Graph with HTML and CSS using ColdFusion - Part 2
Reader Level:
Graphs in web pages and reporting applications can be put together with various PHP libraries, such as using the JpGraph library shown in JpGraph: PHP Graphs & Charts On-The-Fly by Steven Seiller, or with JavaScript libraries that are widely available. However, sometimes you have a need for a simple bar graph that does not depend on this more advanced technology; working with PHP servers that do not have libraries installed, or targeting browsers that are not JavaScript enabled. Bar graphs can be created quite easily using ancient HTML technology without the aid of more advanced techniques for simple bar graphs that display quickly and across all browsers. For this tutorial, I'll assume you know basic PHP and SQL -- writing queries, views, and getting the results you want.
A bar graph can be built vertically or horizontally. I'll show a simple horizontal graph in this part. The basic process is to create the SQL query that you want to view the result as a graph, use a slim image that can be stretched as a basis of the bar graph, and set the width of the image based on the value of your data. For example, a value of $50 might translate to 50 pixels wide, and $500 might translate to 500 pixels wide. Using simple formulas, we'll create the graphs.
The Creating a Bar Graph with HTML and CSS Series:
Creating a Bar Graph with HTML and CSS using PHP - Part 1
Creating a Bar Graph with HTML and CSS using ColdFusion - Part 1
Creating a Bar Graph with HTML and CSS using PHP - Part 2
Creating a Bar Graph with HTML and CSS using ColdFusion - Part 2
CMX JumpStart: Lapland
Reader Level:
Welcome to the Lapland JumpStart!
The Lapland JumpStart is a free offering to you from Community MX. We hope you enjoy and are able to make good use of the layout!
The main construction of Lapland consists of liquid horizontal outer divs while maintaining a fixed inner content width to ensure that the design fills out the user's browser width, while still maintaining a good line reading length. The content, as always, is created with valid code and accessibility in mind.
Reader Level:
Welcome to the Lapland JumpStart!
The Lapland JumpStart is a free offering to you from Community MX. We hope you enjoy and are able to make good use of the layout!
The main construction of Lapland consists of liquid horizontal outer divs while maintaining a fixed inner content width to ensure that the design fills out the user's browser width, while still maintaining a good line reading length. The content, as always, is created with valid code and accessibility in mind.
Decorating Lapland for the Holidays
Reader Level:
Can it be mid December already? The holiday season is in full force, and many of us are decorating, putting up trees, shopping online and in stores, and planning the holiday meal. We're decorating here at Community MX as well. In fact, this busy little CMX elf is decorating the latest JumpStart, CMX JumpStart Lapland. We are extremely pleased to offer this JumpStart as a free holiday gift to the entire online community. Put on the holiday music, and join me in this tutorial that guides you through modifying Lapland and decorating it for the holidays with a custom font from Font Squirrel.
Reader Level:
Can it be mid December already? The holiday season is in full force, and many of us are decorating, putting up trees, shopping online and in stores, and planning the holiday meal. We're decorating here at Community MX as well. In fact, this busy little CMX elf is decorating the latest JumpStart, CMX JumpStart Lapland. We are extremely pleased to offer this JumpStart as a free holiday gift to the entire online community. Put on the holiday music, and join me in this tutorial that guides you through modifying Lapland and decorating it for the holidays with a custom font from Font Squirrel.
Design Your Own Custom CMX CSS Course - Part 3
Reader Level:
On Jan. 4, 2007 and January 9, 2008, we offered directories of our CSS articles and tutorials in Design Your Own Custom CMX CSS Course and Design Your Own Custom CMX Course Part Two.
It's been almost two years since the last CSS course publication, and CMX authors have written scores of new CSS and accessibility related articles, tutorials, and technique updates. Clearly it is time for part three of the CSS course.
We hope this inventory of the latest additions to our CSS offerings makes it easier to find what you're looking for.
The Design Your Own Custom CMX CSS Course Series:
Design Your Own Custom CMX CSS Course - Part 1
Design Your Own Custom CMX CSS Course - Part 2
Design Your Own Custom CMX CSS Course - Part 3
Reader Level:
On Jan. 4, 2007 and January 9, 2008, we offered directories of our CSS articles and tutorials in Design Your Own Custom CMX CSS Course and Design Your Own Custom CMX Course Part Two.
It's been almost two years since the last CSS course publication, and CMX authors have written scores of new CSS and accessibility related articles, tutorials, and technique updates. Clearly it is time for part three of the CSS course.
We hope this inventory of the latest additions to our CSS offerings makes it easier to find what you're looking for.
The Design Your Own Custom CMX CSS Course Series:
Design Your Own Custom CMX CSS Course - Part 1
Design Your Own Custom CMX CSS Course - Part 2
Design Your Own Custom CMX CSS Course - Part 3
The CMX JumpStart Catalog Update 2009
Reader Level:
Our last JumpStart Catalog was published in 2008, and of course we've released quite a few new JumpStarts since then. It's almost 2010(!), so it's definitely time to update and put all our JumpStarts more conveniently at your fingertips.
Hard as it is to believe, it is five years - almost to the day - since we published our first JumpStart, CMX JumpStart Paris, on Oct. 28, 2004. Long live the CMX JumpStart!
This catalog will start out by breaking down the JumpStarts into categories such as fixed-width, fluid, horizontal band, and number of columns. It will then list the special features that can be found in various JumpStarts, such as galleries, widgets, typography enhancements such as sIFR, Flash MP3 players, forms, and many more. Finally, we'll get to the actual catalog of every JumpStart we've published over the last five years. There will be a picture, a list of features, and links to the JumpStart itself, as well as the free article that describes it.
Reader Level:
Our last JumpStart Catalog was published in 2008, and of course we've released quite a few new JumpStarts since then. It's almost 2010(!), so it's definitely time to update and put all our JumpStarts more conveniently at your fingertips.
Hard as it is to believe, it is five years - almost to the day - since we published our first JumpStart, CMX JumpStart Paris, on Oct. 28, 2004. Long live the CMX JumpStart!
This catalog will start out by breaking down the JumpStarts into categories such as fixed-width, fluid, horizontal band, and number of columns. It will then list the special features that can be found in various JumpStarts, such as galleries, widgets, typography enhancements such as sIFR, Flash MP3 players, forms, and many more. Finally, we'll get to the actual catalog of every JumpStart we've published over the last five years. There will be a picture, a list of features, and links to the JumpStart itself, as well as the free article that describes it.
Introducing CMX JumpStart Black Forest
Reader Level:
Known for its highlands, scenery, and forests, the Black Forest in Germany is a popular center of tourism. When someone mentions Black Forest to me, however, I always think of the wonderful cake or waltzing by the beautiful Blue Danube. Now I am going to us all something else to think about, too, and that's the latest CMX JumpStart Black Forest.
CMX JumpStart Black Forest is a centered, two-column, fixed layout in the new wider width that many designers are now using. The tabbed navigation uses the popular Sliding Door technique. The header features a logo with the text placed on a circular path, and will make it easy to design an attractive logo for your site. The main content resides in the left column, and a Digg content sharing menu occupies the right column.
The JumpStart includes a main style sheet, an Internet Explorer style sheet, and a Design Time Style Sheet (in case your version of Dreamweaver makes the layout difficult to edit in Design View).
Of course Black Forest meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.
Reader Level:
Known for its highlands, scenery, and forests, the Black Forest in Germany is a popular center of tourism. When someone mentions Black Forest to me, however, I always think of the wonderful cake or waltzing by the beautiful Blue Danube. Now I am going to us all something else to think about, too, and that's the latest CMX JumpStart Black Forest.
CMX JumpStart Black Forest is a centered, two-column, fixed layout in the new wider width that many designers are now using. The tabbed navigation uses the popular Sliding Door technique. The header features a logo with the text placed on a circular path, and will make it easy to design an attractive logo for your site. The main content resides in the left column, and a Digg content sharing menu occupies the right column.
The JumpStart includes a main style sheet, an Internet Explorer style sheet, and a Design Time Style Sheet (in case your version of Dreamweaver makes the layout difficult to edit in Design View).
Of course Black Forest meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.
CMX JumpStart: The Black Forest
Reader Level:
Welcome to The Black Forest JumpStart!
The Black Forest is a wooded mountain range in Baden-Württemberg, in southwestern Germany. It is a region that has vineyards, river valleys, sunny peaks, wide panoramic views, calm forests, revitalising spas, exciting family destinations and a cuisine that is the most elaborate in Germany.
The Black Forest JumpStart uses the Digg This! widget to provide current and up to date information for your users, ensuring your website is always current and informative.
Reader Level:
Welcome to The Black Forest JumpStart!
The Black Forest is a wooded mountain range in Baden-Württemberg, in southwestern Germany. It is a region that has vineyards, river valleys, sunny peaks, wide panoramic views, calm forests, revitalising spas, exciting family destinations and a cuisine that is the most elaborate in Germany.
The Black Forest JumpStart uses the Digg This! widget to provide current and up to date information for your users, ensuring your website is always current and informative.
Introducing CMX JumpStart Berlin
Reader Level:
CMX JumpStart Berlin is a centered, two-column or three-column, liquid/fixed layout. The two tier navigation uses the popular Sliding Door technique for its main navigation. The left column navigation is constructed from an unordered list, and it is easy to add as many links as you need. The header features a third menu, a PhatFusion Image Menu, that lets you add your own categories and images. This feature is especially handy for photographers who would like to feature their work.
The JumpStart filters styles for various versions of Internet Explorer, and includes separate style sheets to address issues found in IE 6 and below versus IE 7. There is also a Design Time Style Sheet in case your version of Dreamweaver makes the layout difficult to edit in Design View. Of course Berlin meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.
Reader Level:
CMX JumpStart Berlin is a centered, two-column or three-column, liquid/fixed layout. The two tier navigation uses the popular Sliding Door technique for its main navigation. The left column navigation is constructed from an unordered list, and it is easy to add as many links as you need. The header features a third menu, a PhatFusion Image Menu, that lets you add your own categories and images. This feature is especially handy for photographers who would like to feature their work.
The JumpStart filters styles for various versions of Internet Explorer, and includes separate style sheets to address issues found in IE 6 and below versus IE 7. There is also a Design Time Style Sheet in case your version of Dreamweaver makes the layout difficult to edit in Design View. Of course Berlin meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.
CMX JumpStart: Berlin
Reader Level:
Berlin is, of course, renowned as a city of great culture and diversity, and the Berlin JumpStart mirrors those traits. Berlin provides a powerful and flexible interface on which you could base just about any design you could imagine. From the inverted sliding door navigation and the accompanying sub navigation system, and the srolling image menu Berlin is equipped to cope with the largest of websites while remaining attractive and interesting to your users and functional to your clients.
The main construction of Berlin consists of liquid outer divs, while maintaining a fixed inner content width to ensure that the design fills out the user's browser width, while still maintaining a good line reading length. The content, as always, is created with accessibility in mind. Berlin comes complete with an extension to install the design into Dreamweaver, making the creation of new pages a breeze. It also comes complete with a series of tutorials that explain in-depth how the design elements have been put together.
Reader Level:
Berlin is, of course, renowned as a city of great culture and diversity, and the Berlin JumpStart mirrors those traits. Berlin provides a powerful and flexible interface on which you could base just about any design you could imagine. From the inverted sliding door navigation and the accompanying sub navigation system, and the srolling image menu Berlin is equipped to cope with the largest of websites while remaining attractive and interesting to your users and functional to your clients.
The main construction of Berlin consists of liquid outer divs, while maintaining a fixed inner content width to ensure that the design fills out the user's browser width, while still maintaining a good line reading length. The content, as always, is created with accessibility in mind. Berlin comes complete with an extension to install the design into Dreamweaver, making the creation of new pages a breeze. It also comes complete with a series of tutorials that explain in-depth how the design elements have been put together.
CMX JumpStart: Stelvio Pass - Gallery
Reader Level:
The Stelvio Pass - Gallery JumpStart presents a nicely integrated image gallery and flexibility of layout width and advanced CSS column control.
The Stelvio Pass - Gallery also includes inverted sliding door navigation and an accessible sub navigation in the left hand column, both of which can be expanded with ease to suit any given situation.
Reader Level:
The Stelvio Pass - Gallery JumpStart presents a nicely integrated image gallery and flexibility of layout width and advanced CSS column control.
The Stelvio Pass - Gallery also includes inverted sliding door navigation and an accessible sub navigation in the left hand column, both of which can be expanded with ease to suit any given situation.
Introducing CMX JumpStart: Stelvio Pass - Gallery
Reader Level:
Let's take a car ride along the highest paved mountain pass in the Eastern Alps, the Stelvio Pass of Italy. Then let's take some great shots along the route and when we get home, place them on a web page in a stunning gallery format, courtesy of the free Adobe Lightbox, to share with our friends and family. Guess what? That's exactly what Adrian Senior did for the the latest JumpStart, CMX JumpStart Stelvio Pass - Gallery.
Reader Level:
Let's take a car ride along the highest paved mountain pass in the Eastern Alps, the Stelvio Pass of Italy. Then let's take some great shots along the route and when we get home, place them on a web page in a stunning gallery format, courtesy of the free Adobe Lightbox, to share with our friends and family. Guess what? That's exactly what Adrian Senior did for the the latest JumpStart, CMX JumpStart Stelvio Pass - Gallery.
Displaying Horizontal List Navigation in Dreamweaver's Design View
Reader Level:
How to stop your horizontal list navigation from moving out of line in Dreamweaver's design view. In this article we will look at what causes this annoying problem and two different ways it can be corrected.
Reader Level:
How to stop your horizontal list navigation from moving out of line in Dreamweaver's design view. In this article we will look at what causes this annoying problem and two different ways it can be corrected.
Introducing CMX JumpStart Siberia
Reader Level:
It's almost summer, so don't make me think. You may have read the book by Steve Krug, a book about web usability, that uses this phrase as its title. If "don't make me think" is your philosophy, then you're going to love the latest JumpStart, CMX JumpStart Siberia. From its completely neutral color scheme that will easily adapt to any color choices you make, to its ready-made inclusion of the Spry Accordion Widget, to its brain dead method for switching from two to three column layouts, Siberia won't make you think, or certainly not much.
Reader Level:
It's almost summer, so don't make me think. You may have read the book by Steve Krug, a book about web usability, that uses this phrase as its title. If "don't make me think" is your philosophy, then you're going to love the latest JumpStart, CMX JumpStart Siberia. From its completely neutral color scheme that will easily adapt to any color choices you make, to its ready-made inclusion of the Spry Accordion Widget, to its brain dead method for switching from two to three column layouts, Siberia won't make you think, or certainly not much.
CMX JumpStart: Siberia
Reader Level:
Siberia is, of course, renowned for its freezing temperatures, and the colour theme is based around the coldness of the region. Siberia is a design that sits easy with me - it is understated in appearance yet provides a powerful and flexible interface on which you could base just about any design you could imagine. From the inverted sliding door navigation and the accompanying sub navigation system to the built in accordion and flexible column choice, Siberia has it all.
The main construction of Siberia consists of liquid outer divs, while maintaining a fixed inner content width to ensure that the design fills out the users browser width, while still maintaining a good line reading length. The content, as always, is created with accessibility in mind. Siberia comes complete with an extension to install the design into Dreamweaver, making the creation of new pages a breeze. It also comes complete with a series of tutorials that explain in-depth how the design elements have been put together.
Reader Level:
Siberia is, of course, renowned for its freezing temperatures, and the colour theme is based around the coldness of the region. Siberia is a design that sits easy with me - it is understated in appearance yet provides a powerful and flexible interface on which you could base just about any design you could imagine. From the inverted sliding door navigation and the accompanying sub navigation system to the built in accordion and flexible column choice, Siberia has it all.
The main construction of Siberia consists of liquid outer divs, while maintaining a fixed inner content width to ensure that the design fills out the users browser width, while still maintaining a good line reading length. The content, as always, is created with accessibility in mind. Siberia comes complete with an extension to install the design into Dreamweaver, making the creation of new pages a breeze. It also comes complete with a series of tutorials that explain in-depth how the design elements have been put together.
Introducing CMX JumpStart: Nairobi Flexible
Reader Level:
It wasn't that long ago - November 26, 2008 to be exact - that we released CMX JumpStart Nairobi. At the time, I introduced the JumpStart based on the capital of Kenya with this sentence:
Reader Level:
It wasn't that long ago - November 26, 2008 to be exact - that we released CMX JumpStart Nairobi. At the time, I introduced the JumpStart based on the capital of Kenya with this sentence:
We think that the latest CMX JumpStart, CMX JumpStart Nairobi, will become one of your most important JumpStarts. Why? Because Nairobi is all about features and flexibility.
Read that last word again, because that is exactly what we're offering in this reworking of Nairobi - CMX JumpStart Nairobi Flexible. My original meaning in the word "flexibility" was meant to underline all the ways you could use the JumpStart. In response to subscriber interest in using Nairobi as a flexible layout, however, Adrian Senior has not only provided a modification of his own Nairobi design, but has provided a comprehensive tutorial on how he accomplished thet transformation.
CMX JumpStart: Isle of Skye
Reader Level:
A short while ago, the beginning of March to be more precise, I wrote an article on selling your business. It looked at how easy it was to lose visitors when they printed a page from your web site and what we could do to remedy that problem. You can read the article on CMX; it is called Selling Your Business.
This JumpStart, Isle of Skye, takes the principles of that article and puts them to use in a way that means minimal work for yourself. You just need to add the relevant details into the web site and the CSS files will do the rest for you. Further to this automated functionality, Dreamweaver allows you to easily make any edits you need by making good use of the Style Rendering toolbar. The Style Rendering toolbar allows you to move quickly from one media type to another making it easy to stay on top of the different views available within your web site. All this control is provided with just a simple click of an icon.
Reader Level:
A short while ago, the beginning of March to be more precise, I wrote an article on selling your business. It looked at how easy it was to lose visitors when they printed a page from your web site and what we could do to remedy that problem. You can read the article on CMX; it is called Selling Your Business.
This JumpStart, Isle of Skye, takes the principles of that article and puts them to use in a way that means minimal work for yourself. You just need to add the relevant details into the web site and the CSS files will do the rest for you. Further to this automated functionality, Dreamweaver allows you to easily make any edits you need by making good use of the Style Rendering toolbar. The Style Rendering toolbar allows you to move quickly from one media type to another making it easy to stay on top of the different views available within your web site. All this control is provided with just a simple click of an icon.
Introducing CMX JumpStart Isle of Skye
Reader Level:
National Geographic rated it the fourth best island in the world. It is the second largest island in Scotland, with a coastline strewn with peninsulas and bays. And now, it's a first class design for the latest CMX JumpStart, CMX JumpStart Isle of Skye.
CMX JumpStart Isle of Skye is a centered, fixed-width layout with features that work well for a business site. There is a highlighted style for a promotional paragraph above the two-column main content region. There is an extended area for displaying images that express your business model. A print style sheet includes your business contact information so that it is not lost when a visitor prints out any page of the site. Your logo appears next to the popular accessible Sliding Door tabbed navigation. And best of all, this is one of the easiest JumpStarts to modify! Once you edit the PNG file and export the slices to the defined Dreamweaver site, the changes you'll need to make to the CSS file are minimal.
Reader Level:
National Geographic rated it the fourth best island in the world. It is the second largest island in Scotland, with a coastline strewn with peninsulas and bays. And now, it's a first class design for the latest CMX JumpStart, CMX JumpStart Isle of Skye.
CMX JumpStart Isle of Skye is a centered, fixed-width layout with features that work well for a business site. There is a highlighted style for a promotional paragraph above the two-column main content region. There is an extended area for displaying images that express your business model. A print style sheet includes your business contact information so that it is not lost when a visitor prints out any page of the site. Your logo appears next to the popular accessible Sliding Door tabbed navigation. And best of all, this is one of the easiest JumpStarts to modify! Once you edit the PNG file and export the slices to the defined Dreamweaver site, the changes you'll need to make to the CSS file are minimal.
Firebug - Part 5: Inspecting the Box Model
Reader Level:
Firebug is the premier (and free) web development tool for Firefox. In previous sections we've looked at editing and debugging CSS using Firebug. One thing you'll need to debug is the box model. Firebug provides a "Layout" tab that enables you to evaluate the box model of any element on your page: measuring an element's height, width, padding, border and margins.
We also go over the quirks of the IE quirksmode box model, and how that box model differs from the W3C specifications.
The Firebug Series:
Firebug - Part 1: The What and Why
Firebug - Part 2: Overview of Firebug Functionality
Firebug - Part 3: Editing with Firebug
Firebug - Part 4A: Inspecting and Troubleshooting CSS
Firebug - Part 4B: Inspecting and Troubleshooting CSS
Firebug - Part 5: Inspecting the Box Model
Firebug - Part 6: HTTP Requests and Download Speeds
Firebug - Part 7a: The Script Tab (Basics)
Firebug - Part 7b: Debuggger, Breakpoint & Expression Watching
Firebug - Part 7c: Debugging JavaScript with the Firebug Console
Reader Level:
Firebug is the premier (and free) web development tool for Firefox. In previous sections we've looked at editing and debugging CSS using Firebug. One thing you'll need to debug is the box model. Firebug provides a "Layout" tab that enables you to evaluate the box model of any element on your page: measuring an element's height, width, padding, border and margins.
We also go over the quirks of the IE quirksmode box model, and how that box model differs from the W3C specifications.
The Firebug Series:
Firebug - Part 1: The What and Why
Firebug - Part 2: Overview of Firebug Functionality
Firebug - Part 3: Editing with Firebug
Firebug - Part 4A: Inspecting and Troubleshooting CSS
Firebug - Part 4B: Inspecting and Troubleshooting CSS
Firebug - Part 5: Inspecting the Box Model
Firebug - Part 6: HTTP Requests and Download Speeds
Firebug - Part 7a: The Script Tab (Basics)
Firebug - Part 7b: Debuggger, Breakpoint & Expression Watching
Firebug - Part 7c: Debugging JavaScript with the Firebug Console
Firebug - Part 4B: Inspecting and Troubleshooting CSS
Reader Level:
In this section of multi-part series about Firebug, the premier (and free) web development tool for Firefox we learn how to edit CSS within the Firebug window, so we can get immediate feedback on how our edits will change the site in production. Topics in include inspecting, editing and troubleshooting CSS using Firebug.
The Firebug Series:
Firebug - Part 1: The What and Why
Firebug - Part 2: Overview of Firebug Functionality
Firebug - Part 3: Editing with Firebug
Firebug - Part 4A: Inspecting and Troubleshooting CSS
Firebug - Part 4B: Inspecting and Troubleshooting CSS
Firebug - Part 5: Inspecting the Box Model
Firebug - Part 6: HTTP Requests and Download Speeds
Firebug - Part 7a: The Script Tab (Basics)
Firebug - Part 7b: Debuggger, Breakpoint & Expression Watching
Firebug - Part 7c: Debugging JavaScript with the Firebug Console
Reader Level:
In this section of multi-part series about Firebug, the premier (and free) web development tool for Firefox we learn how to edit CSS within the Firebug window, so we can get immediate feedback on how our edits will change the site in production. Topics in include inspecting, editing and troubleshooting CSS using Firebug.
The Firebug Series:
Firebug - Part 1: The What and Why
Firebug - Part 2: Overview of Firebug Functionality
Firebug - Part 3: Editing with Firebug
Firebug - Part 4A: Inspecting and Troubleshooting CSS
Firebug - Part 4B: Inspecting and Troubleshooting CSS
Firebug - Part 5: Inspecting the Box Model
Firebug - Part 6: HTTP Requests and Download Speeds
Firebug - Part 7a: The Script Tab (Basics)
Firebug - Part 7b: Debuggger, Breakpoint & Expression Watching
Firebug - Part 7c: Debugging JavaScript with the Firebug Console
Introducing CMX JumpStart Landeck
Reader Level:
CMX JumpStart Landeck is a centered, two-column or three-column, 770 pixel liquid and fixed-width layout. The content is constrained for optimal line lengths of text, but the outer divs are flexible and expand to the user's window size. The two tier navigation uses Sliding Door technique for its main navigation. The left column navigation is constructed from an unordered list, which has a generous amount of bottom padding to accommodate a decorative background image. The right column of the three-column version provides space for more content, or, as in our JumpStart, some eye catching images. The header div uses the Fireworks Fade Image (Auto Vector Mask in CS4) command to blend its image into the background color.
Reader Level:
CMX JumpStart Landeck is a centered, two-column or three-column, 770 pixel liquid and fixed-width layout. The content is constrained for optimal line lengths of text, but the outer divs are flexible and expand to the user's window size. The two tier navigation uses Sliding Door technique for its main navigation. The left column navigation is constructed from an unordered list, which has a generous amount of bottom padding to accommodate a decorative background image. The right column of the three-column version provides space for more content, or, as in our JumpStart, some eye catching images. The header div uses the Fireworks Fade Image (Auto Vector Mask in CS4) command to blend its image into the background color.
CMX JumpStart: Landeck
Reader Level:
Welcome to the Landeck JumpStart!
The Landeck JumpStart looks at how we can use the flexibility of a CSS layout to control the number of columns on any given page from a single CSS file. To switch the design from a three-column to a two-column layout you simply need to add a class to the body tag and the CSS takes care of everything else for you!
The main construction of Landeck consists of liquid horizontal outer divs with a fixed inner content width to ensure that the design fills out the user's browser width, while still maintaining a good line reading length. The content, as always, is created with valid code and accessibility in mind.
Reader Level:
Welcome to the Landeck JumpStart!
The Landeck JumpStart looks at how we can use the flexibility of a CSS layout to control the number of columns on any given page from a single CSS file. To switch the design from a three-column to a two-column layout you simply need to add a class to the body tag and the CSS takes care of everything else for you!
The main construction of Landeck consists of liquid horizontal outer divs with a fixed inner content width to ensure that the design fills out the user's browser width, while still maintaining a good line reading length. The content, as always, is created with valid code and accessibility in mind.
Introducing CMX JumpStart Lima
Reader Level:
Peru's archaeological heritage and great natural beauty make it a popular travel destination for thousands of visitors each year. Most of them visit Lima, Peru's cultural and business center. The latest CMX JumpStart, CMX JumpStart Lima, will also become an artistic center - for designers. With its neutral color scheme, modern design, and elegant simplicity, it will be a JumpStart you can use again and again to almost instantly create a new site.
CMX JumpStart Lima is a centered, two-column, fixed-width layout that makes extensive use of background images to produce its space age design. The left column navigation is constructed from an unordered list. The header div uses the Fireworks Fade Image (Auto Vector Mask in CS4) command to create a subtle blend whose visual appeal makes a great substitute for the navigation buttons in Gordon's original Mercury Design Element.
That's right - if this design looks familiar, it should. Adrian Senior coded it from Gordon Mackay's Design Element Mercury.
Of course Lima meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.
Reader Level:
Peru's archaeological heritage and great natural beauty make it a popular travel destination for thousands of visitors each year. Most of them visit Lima, Peru's cultural and business center. The latest CMX JumpStart, CMX JumpStart Lima, will also become an artistic center - for designers. With its neutral color scheme, modern design, and elegant simplicity, it will be a JumpStart you can use again and again to almost instantly create a new site.
CMX JumpStart Lima is a centered, two-column, fixed-width layout that makes extensive use of background images to produce its space age design. The left column navigation is constructed from an unordered list. The header div uses the Fireworks Fade Image (Auto Vector Mask in CS4) command to create a subtle blend whose visual appeal makes a great substitute for the navigation buttons in Gordon's original Mercury Design Element.
That's right - if this design looks familiar, it should. Adrian Senior coded it from Gordon Mackay's Design Element Mercury.
Of course Lima meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.
CMX JumpStart: Lima
Reader Level:
Welcome to the Lima JumpStart.
Lima is, of course, the capital of Peru and is our second JumpStart from that country, the first being Machu Picchu. Lima uses the Mercury design element that was designed by Gordon Mackay. The Mercury design element is a simple, yet effective, design to which I have made some subtle changes. Lima is an exercise in taking a design element and modifying it suit your needs. I have kept the main design structure intact and have introduced a change to the main header that originally held the navigation and moved the navigation into the side bar. Design elements are easy and quick to work with, I highly recommend them.
Reader Level:
Welcome to the Lima JumpStart.
Lima is, of course, the capital of Peru and is our second JumpStart from that country, the first being Machu Picchu. Lima uses the Mercury design element that was designed by Gordon Mackay. The Mercury design element is a simple, yet effective, design to which I have made some subtle changes. Lima is an exercise in taking a design element and modifying it suit your needs. I have kept the main design structure intact and have introduced a change to the main header that originally held the navigation and moved the navigation into the side bar. Design elements are easy and quick to work with, I highly recommend them.
The CSS Starter Page Series Part 3: Three Column Fluid Background Images
Reader Level:
In The CSS Starter Page Series Part 1: Faux Column Images, we used background images to create the illusion of equal height columns in fixed-width layouts and two-column fluid layouts. The technique involved placing a background image on one div, the container div.
In this part of the series we will tackle the more complex task of creating the illusion of equal columns in three-column, fluid layouts. We will need to use two background images, and because some current browsers do not support the CSS3 specifications for allowing multiple images on one element, we are going to have to add an additional div to the markup to serve as the hook for the extra image.
The CSS Starter Page Series:
The CSS Starter Page Series - Part 1: Faux-Column Images
The CSS Starter Page Series - Part 2: More Background Images
The CSS Starter Page Series - Part 3: Three-Column Fluid Background Images
The CSS Starter Page Series - Part 4: Rounded Corner Background Images
The CSS Starter Page Series - Part 5: Shadows and Rounded Corner Background Images
The CSS Starter Page Series - Part 6A: Adding Navigation Schemes
The CSS Starter Page Series - Part 6B: Adding Navigation Schemes Part Two
The CSS Starter Page Series - Part 6C: Adding Navigation Schemes Part Three
The CSS Starter Page Series - Part 7: Adding a Spry Menu Bar
The CSS Starter Page Series - Part 8: Managing Content with Spry
The CSS Starter Page Series - Part 9: Working with the Conditional Comment
The CSS Starter Page Series - Part 10: Adding a Print Style Sheet
The CSS Starter Page Series - Part 11: Adding a Handheld Style Sheet
The CSS Starter Page Series - Part 12: Adding a jQuery Slideshow
The CSS Starter Page Series - Part 13: Designing with a Grid
The CSS Starter Page Series - Part 14: Designing with a CSS Table Grid
The CSS Starter Page Series - Part 15: Adding a Drop Cap with :first-letter
Reader Level:
In The CSS Starter Page Series Part 1: Faux Column Images, we used background images to create the illusion of equal height columns in fixed-width layouts and two-column fluid layouts. The technique involved placing a background image on one div, the container div.
In this part of the series we will tackle the more complex task of creating the illusion of equal columns in three-column, fluid layouts. We will need to use two background images, and because some current browsers do not support the CSS3 specifications for allowing multiple images on one element, we are going to have to add an additional div to the markup to serve as the hook for the extra image.
The CSS Starter Page Series:
The CSS Starter Page Series - Part 1: Faux-Column Images
The CSS Starter Page Series - Part 2: More Background Images
The CSS Starter Page Series - Part 3: Three-Column Fluid Background Images
The CSS Starter Page Series - Part 4: Rounded Corner Background Images
The CSS Starter Page Series - Part 5: Shadows and Rounded Corner Background Images
The CSS Starter Page Series - Part 6A: Adding Navigation Schemes
The CSS Starter Page Series - Part 6B: Adding Navigation Schemes Part Two
The CSS Starter Page Series - Part 6C: Adding Navigation Schemes Part Three
The CSS Starter Page Series - Part 7: Adding a Spry Menu Bar
The CSS Starter Page Series - Part 8: Managing Content with Spry
The CSS Starter Page Series - Part 9: Working with the Conditional Comment
The CSS Starter Page Series - Part 10: Adding a Print Style Sheet
The CSS Starter Page Series - Part 11: Adding a Handheld Style Sheet
The CSS Starter Page Series - Part 12: Adding a jQuery Slideshow
The CSS Starter Page Series - Part 13: Designing with a Grid
The CSS Starter Page Series - Part 14: Designing with a CSS Table Grid
The CSS Starter Page Series - Part 15: Adding a Drop Cap with :first-letter
From Screen to Print: Creating a Print CSS in Dreamweaver
Reader Level:
Questions often arise about how to print web pages. Should you create a separate, simple page for printing? Should you just leave users to their own devices knowing they control whether backgrounds or images print anyway? Cascading style sheets (CSS) make it simple to maintain a single page while presenting the content in two different manners using media types.
In this article, you'll learn about media types and how to take advantage of them to create compact pages for print. At the end of the fixed width chapter of the book Greg Rewis and I wrote called, Mastering CSS with Dreamweaver CS4 (there's also a Dreamweaver CS3 version of the book if you have not yet upgraded), we discuss the rules of creating a print style sheet. In this article, you will see those principles in action as you build an example CSS page. Let's get started!
Reader Level:
Questions often arise about how to print web pages. Should you create a separate, simple page for printing? Should you just leave users to their own devices knowing they control whether backgrounds or images print anyway? Cascading style sheets (CSS) make it simple to maintain a single page while presenting the content in two different manners using media types.
In this article, you'll learn about media types and how to take advantage of them to create compact pages for print. At the end of the fixed width chapter of the book Greg Rewis and I wrote called, Mastering CSS with Dreamweaver CS4 (there's also a Dreamweaver CS3 version of the book if you have not yet upgraded), we discuss the rules of creating a print style sheet. In this article, you will see those principles in action as you build an example CSS page. Let's get started!
Introducing CMX JumpStart: The New Forest
Reader Level:
Where can you stay in a five-star hotel or bed-and-breakfast, experience all kinds of wildlife, visit gardens and museums, go biking, and even get married? How about England's newest National Park The New Forest, where there is, it seems, something for everyone? There is also something for everyone in the latest CMX JumpStart, CMX JumpStart: The New Forest.
CMX JumpStart The New Forest is a centered, two-column or three-column, 770 pixel liquid and fixed-width layout. The content is constrained for optimal line lengths of text, but the outer divs are flexible and expand to the user's window size. The two tier navigation uses the infamous Sliding Door technique for its main navigation. The left column navigation is constructed from an unordered list, which has a generous amount of bottom padding to accommodate a decorative background image. The right column of the three-column version provides space for more content, or, as in our JumpStart, an eye catching image. The header div uses the Fireworks Fade Image (Auto Vector Mask in CS4) command to create a blend of images that has great visual appeal.
Of course The New Forest meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.
Reader Level:
Where can you stay in a five-star hotel or bed-and-breakfast, experience all kinds of wildlife, visit gardens and museums, go biking, and even get married? How about England's newest National Park The New Forest, where there is, it seems, something for everyone? There is also something for everyone in the latest CMX JumpStart, CMX JumpStart: The New Forest.
CMX JumpStart The New Forest is a centered, two-column or three-column, 770 pixel liquid and fixed-width layout. The content is constrained for optimal line lengths of text, but the outer divs are flexible and expand to the user's window size. The two tier navigation uses the infamous Sliding Door technique for its main navigation. The left column navigation is constructed from an unordered list, which has a generous amount of bottom padding to accommodate a decorative background image. The right column of the three-column version provides space for more content, or, as in our JumpStart, an eye catching image. The header div uses the Fireworks Fade Image (Auto Vector Mask in CS4) command to create a blend of images that has great visual appeal.
Of course The New Forest meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.
CMX JumpStart: The New Forest
Reader Level:
Welcome to The New Forest JumpStart!
The New Forest JumpStart looks at how we can use the flexibility of a CSS layout to control the number of columns on any given page from a single CSS file. To switch the design from a three column to a two column layout you simply need to add a class to the body tag and the CSS takes care of everything else for you!
The main construction of The New Forest JumpStart consists of liquid horizontal outer divs while maintaining a fixed inner content width to ensure that the design fills out the user's browser width, while still maintaining a good line reading length. The content, as always, is created with valid code and accessibility in mind.
Approximate download size: 4.4MB
Reader Level:
Welcome to The New Forest JumpStart!
The New Forest JumpStart looks at how we can use the flexibility of a CSS layout to control the number of columns on any given page from a single CSS file. To switch the design from a three column to a two column layout you simply need to add a class to the body tag and the CSS takes care of everything else for you!
The main construction of The New Forest JumpStart consists of liquid horizontal outer divs while maintaining a fixed inner content width to ensure that the design fills out the user's browser width, while still maintaining a good line reading length. The content, as always, is created with valid code and accessibility in mind.
Approximate download size: 4.4MB
The CSS Starter Page Series - Part 2: More Background Images
Reader Level:
In the first installment of the CSS Starter Page Series, we looked at how we can use background images to create the look of equal height columns in Dreamweaver's CSS Starter Pages. We worked with fixed-width, hybrid, and liquid two-column layouts.
In this part of the series we will look at how we can use body background images on both fixed and liquid layouts while exploring the various repeat options that are available to us: repeat (the default), no-repeat, repeat_x (horizontally), repeat-y (vertically). We'll also try out some techniques for using complex pattern background images.
The CSS Starter Page Series:
The CSS Starter Page Series - Part 1: Faux-Column Images
The CSS Starter Page Series - Part 2: More Background Images
The CSS Starter Page Series - Part 3: Three-Column Fluid Background Images
The CSS Starter Page Series - Part 4: Rounded Corner Background Images
The CSS Starter Page Series - Part 5: Shadows and Rounded Corner Background Images
The CSS Starter Page Series - Part 6A: Adding Navigation Schemes
The CSS Starter Page Series - Part 6B: Adding Navigation Schemes Part Two
The CSS Starter Page Series - Part 6C: Adding Navigation Schemes Part Three
The CSS Starter Page Series - Part 7: Adding a Spry Menu Bar
The CSS Starter Page Series - Part 8: Managing Content with Spry
The CSS Starter Page Series - Part 9: Working with the Conditional Comment
The CSS Starter Page Series - Part 10: Adding a Print Style Sheet
The CSS Starter Page Series - Part 11: Adding a Handheld Style Sheet
The CSS Starter Page Series - Part 12: Adding a jQuery Slideshow
The CSS Starter Page Series - Part 13: Designing with a Grid
The CSS Starter Page Series - Part 14: Designing with a CSS Table Grid
The CSS Starter Page Series - Part 15: Adding a Drop Cap with :first-letter
Reader Level:
In the first installment of the CSS Starter Page Series, we looked at how we can use background images to create the look of equal height columns in Dreamweaver's CSS Starter Pages. We worked with fixed-width, hybrid, and liquid two-column layouts.
In this part of the series we will look at how we can use body background images on both fixed and liquid layouts while exploring the various repeat options that are available to us: repeat (the default), no-repeat, repeat_x (horizontally), repeat-y (vertically). We'll also try out some techniques for using complex pattern background images.
The CSS Starter Page Series:
The CSS Starter Page Series - Part 1: Faux-Column Images
The CSS Starter Page Series - Part 2: More Background Images
The CSS Starter Page Series - Part 3: Three-Column Fluid Background Images
The CSS Starter Page Series - Part 4: Rounded Corner Background Images
The CSS Starter Page Series - Part 5: Shadows and Rounded Corner Background Images
The CSS Starter Page Series - Part 6A: Adding Navigation Schemes
The CSS Starter Page Series - Part 6B: Adding Navigation Schemes Part Two
The CSS Starter Page Series - Part 6C: Adding Navigation Schemes Part Three
The CSS Starter Page Series - Part 7: Adding a Spry Menu Bar
The CSS Starter Page Series - Part 8: Managing Content with Spry
The CSS Starter Page Series - Part 9: Working with the Conditional Comment
The CSS Starter Page Series - Part 10: Adding a Print Style Sheet
The CSS Starter Page Series - Part 11: Adding a Handheld Style Sheet
The CSS Starter Page Series - Part 12: Adding a jQuery Slideshow
The CSS Starter Page Series - Part 13: Designing with a Grid
The CSS Starter Page Series - Part 14: Designing with a CSS Table Grid
The CSS Starter Page Series - Part 15: Adding a Drop Cap with :first-letter
HTML/CSS Crash Primer
Reader Level:
This article is intended as a re-introduction to HTML and CSS, and something I have used in the past to give to any new employees who may have had HTML experience, but exhibited some bad habits in actual coding. You may think HTML is simple and you may think you know all you need to know, but HTML is misused daily. Following are some basics to help correct some of the common problems.
Reader Level:
This article is intended as a re-introduction to HTML and CSS, and something I have used in the past to give to any new employees who may have had HTML experience, but exhibited some bad habits in actual coding. You may think HTML is simple and you may think you know all you need to know, but HTML is misused daily. Following are some basics to help correct some of the common problems.
CMX JumpStart: Nairobi
Reader Level:
Welcome to the Nairobi JumpStart!
Nairobi allows you to quickly change the layout of the page from a three-column to a two-column layout by using descendant selectors to change the pages appearance. It also features an "upside down" version of the popular sliding doors navigation method, which is complemented by an accessible sub navigation set.
The main construction of Nairobi consists of liquid outer divs while maintaining a fixed inner content width to ensure that the design fills out the users browser width, while still maintaining a good line reading length. The content, as always, is created with accessibility in mind.
Nairobi comes complete with an extension to install the design into Dreamweaver, making the creation of new pages a breeze. It also comes complete with a series of tutorials that explain in-depth how the design elements have been put together.
Nairobi is a JumpStart not to be missed!
Reader Level:
Welcome to the Nairobi JumpStart!
Nairobi allows you to quickly change the layout of the page from a three-column to a two-column layout by using descendant selectors to change the pages appearance. It also features an "upside down" version of the popular sliding doors navigation method, which is complemented by an accessible sub navigation set.
The main construction of Nairobi consists of liquid outer divs while maintaining a fixed inner content width to ensure that the design fills out the users browser width, while still maintaining a good line reading length. The content, as always, is created with accessibility in mind.
Nairobi comes complete with an extension to install the design into Dreamweaver, making the creation of new pages a breeze. It also comes complete with a series of tutorials that explain in-depth how the design elements have been put together.
Nairobi is a JumpStart not to be missed!
Introducing CMX JumpStart Nairobi
Reader Level:
Nairobi is the capital and largest city in Kenya. The latest U.S. election put focus on Kenya as the President-Elect, Barack Obama, had a Kenyan father. Nairobi is now one of the most important cities in Africa, and we think that the latest CMX JumpStart, CMX JumpStart Nairobi, will become one of your most important JumpStarts as well. Why? Because Nairobi is all about features and flexibility.
Reader Level:
Nairobi is the capital and largest city in Kenya. The latest U.S. election put focus on Kenya as the President-Elect, Barack Obama, had a Kenyan father. Nairobi is now one of the most important cities in Africa, and we think that the latest CMX JumpStart, CMX JumpStart Nairobi, will become one of your most important JumpStarts as well. Why? Because Nairobi is all about features and flexibility.
Introducing CMX JumpStart Tokyo
Reader Level:
Want a JumpStart where you need to modify only two graphics AND you can choose a two or three column version that you turn on with the flick of one class? Then welcome to CMX JumpStart Tokyo!
Tokyo is a centered, two-column or three-column, 770 pixel fixed-width layout that has many appealing design features. The left column navigation is constructed from an unordered list, and it is easy to add as many links as you need. The right column of the three-column version has a series of pods that can be used for "teaser text" with thumbnail images.
Reader Level:
Want a JumpStart where you need to modify only two graphics AND you can choose a two or three column version that you turn on with the flick of one class? Then welcome to CMX JumpStart Tokyo!
Tokyo is a centered, two-column or three-column, 770 pixel fixed-width layout that has many appealing design features. The left column navigation is constructed from an unordered list, and it is easy to add as many links as you need. The right column of the three-column version has a series of pods that can be used for "teaser text" with thumbnail images.
CMX JumpStart: Tokyo
Reader Level:
The Tokyo JumpStart looks at how we can use the flexibility of a CSS layout to control the number of columns on any given page from a single CSS file.
The Tokyo JumpStart provides the easiest of solutions for changing the amount of columns on a page - you simply need to add a class to the body tag and the CSS takes care of everything else for you!
The Tokyo JumpStart includes the following tutorials:
Reader Level:
The Tokyo JumpStart looks at how we can use the flexibility of a CSS layout to control the number of columns on any given page from a single CSS file.
The Tokyo JumpStart provides the easiest of solutions for changing the amount of columns on a page - you simply need to add a class to the body tag and the CSS takes care of everything else for you!
The Tokyo JumpStart includes the following tutorials:
- Centering a Wrapper - by John Gallant & Holly Bergevin
- Create Columns with Floats by Zoe Gillenwater
- Do You Want To Do That With CSS? - Floating Clear- by John Gallant & Holly Bergevin
- CMX Internet Explorer Conditional Comment Extension by Paul Davis
- Making CC & DT style sheets work for you by Adrian Senior
- CSS Tricks: Using Descendant Selectors to Control the Number of Columns by Stephanie Sullivan
There are some great tutorials for you to work through in that list, as well as a great extension for creating the conditions for using conditionally commented style sheets that feed styles to the various versions of Internet Explorer.
The Complete JumpStart Catalog 2008 Update
Reader Level:
You asked for it, and it's finally here: a massive update to the CMX JumpStart Complete Catalog. This catalog starts off with a rundown of all the types and features of our inventory of JumpStarts. It then lists each JumpStart in the order we released it, including a summary of its main features, along with an image to help you better visualize it. Each itemized JumpStart also includes links to both its subscriber article, as well as the free introductory article.
Reader Level:
You asked for it, and it's finally here: a massive update to the CMX JumpStart Complete Catalog. This catalog starts off with a rundown of all the types and features of our inventory of JumpStarts. It then lists each JumpStart in the order we released it, including a summary of its main features, along with an image to help you better visualize it. Each itemized JumpStart also includes links to both its subscriber article, as well as the free introductory article.
Introducing CMX JumpStart Phoenix
Reader Level:
It's another JumpStart, and this one is named after a city I visited and loved, Phoenix, Arizona.
CMX JumpStart Phoenix is a centered, two-column, 760 pixel fixed-width layout that has many appealing design features. There is a strikingly contrasted color scheme, vertical navigation in the right column, and "swap image" rollovers that use a caching technique that corrects flaws in Internet Explorer.
The JumpStart filters styles for various versions of Internet Explorer, and includes separate style sheets to address issues found in IE 6 and below versus IE 7.
Of course Phoenix meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.
Reader Level:
It's another JumpStart, and this one is named after a city I visited and loved, Phoenix, Arizona.
CMX JumpStart Phoenix is a centered, two-column, 760 pixel fixed-width layout that has many appealing design features. There is a strikingly contrasted color scheme, vertical navigation in the right column, and "swap image" rollovers that use a caching technique that corrects flaws in Internet Explorer.
The JumpStart filters styles for various versions of Internet Explorer, and includes separate style sheets to address issues found in IE 6 and below versus IE 7.
Of course Phoenix meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.
CMX JumpStart: Phoenix
Reader Level:
Welcome to the Phoenix JumpStart!
Phoenix, as with all CMX JumpStarts, comes complete with all source files - from the XHTML document to the PNG files to, of course, the heart of the JumpStart, the CSS files.
It is a two-column centred design and can easily be modified to suit your own requirements. Phoenix makes good use of Conditionally Commented style sheets and comes complete with a design time style sheet to ensure everything looks just as you would expect in Dreamweaver's design view.
Reader Level:
Welcome to the Phoenix JumpStart!
Phoenix, as with all CMX JumpStarts, comes complete with all source files - from the XHTML document to the PNG files to, of course, the heart of the JumpStart, the CSS files.
It is a two-column centred design and can easily be modified to suit your own requirements. Phoenix makes good use of Conditionally Commented style sheets and comes complete with a design time style sheet to ensure everything looks just as you would expect in Dreamweaver's design view.
CMX JumpStart: Prague
Reader Level:
The Prague JumpStart looks at how we can lay out over-lapping elements within our designs and investigates the use of multiple wrappers to ensure that our layout maintains its structure on resize.
In previous JumpStarts we have looked at how we can filter our CSS rules to one browser or another; with Prague we will be filtering our CSS in a slightly different way by providing a style sheet to take care of specific navigation problems that can be found in IE 5.01.
Reader Level:
The Prague JumpStart looks at how we can lay out over-lapping elements within our designs and investigates the use of multiple wrappers to ensure that our layout maintains its structure on resize.
In previous JumpStarts we have looked at how we can filter our CSS rules to one browser or another; with Prague we will be filtering our CSS in a slightly different way by providing a style sheet to take care of specific navigation problems that can be found in IE 5.01.
Introducing CMX JumpStart Prague
Reader Level:
It's that time again! CMX is proud to introduce our latest JumpStart design, CMX JumpStart Prague. CMX JumpStart: Prague is a two-column, centered, 770 pixel fixed-width layout that features rounded corners. Multiple wrappers, used in conjunction with faux column technique, maintain the integrity of the structure even upon text resize. Additionally, the JumpStart provides an attractive example of overlapping areas within a design. This JumpStart filters styles for various versions of Internet Explorer, and includes a separate style sheet to address navigation issues found in IE 5.01. Of course Prague meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.
Reader Level:
It's that time again! CMX is proud to introduce our latest JumpStart design, CMX JumpStart Prague. CMX JumpStart: Prague is a two-column, centered, 770 pixel fixed-width layout that features rounded corners. Multiple wrappers, used in conjunction with faux column technique, maintain the integrity of the structure even upon text resize. Additionally, the JumpStart provides an attractive example of overlapping areas within a design. This JumpStart filters styles for various versions of Internet Explorer, and includes a separate style sheet to address navigation issues found in IE 5.01. Of course Prague meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.
Introducing CMX JumpStart: The Lake District
Reader Level:
The Lake District in rural North West England is famous for its gorgeous scenery — and, of course, lakes. It is also associated with the poetry of William Wordsworth and the Lake Poets. It is to that region that we travel for our latest JumpStart design, CMX JumpStart The Lake District.
CMX JumpStart: The Lake District features an accessible split level navigation system. The main navigation is a series of tabs that uses the Sliding Door method as described by Douglas Bowman. The sub navigation is an unordered list based system, and has rounded corners, as well as a decorative background image on the bottom that is reminiscent of CMX JumpStart North Pole. Both navigation systems provide clear "you are here" page markers. The design is a two column layout fixed at 750px wide and utilizes subtle gradients on various page areas.
The color scheme of this layout was selected to make sure that the eye goes to the subject matter rather than the design. Thus, The Lake District is composed of black, gray, and white to help the images pop.
Reader Level:
The Lake District in rural North West England is famous for its gorgeous scenery — and, of course, lakes. It is also associated with the poetry of William Wordsworth and the Lake Poets. It is to that region that we travel for our latest JumpStart design, CMX JumpStart The Lake District.
CMX JumpStart: The Lake District features an accessible split level navigation system. The main navigation is a series of tabs that uses the Sliding Door method as described by Douglas Bowman. The sub navigation is an unordered list based system, and has rounded corners, as well as a decorative background image on the bottom that is reminiscent of CMX JumpStart North Pole. Both navigation systems provide clear "you are here" page markers. The design is a two column layout fixed at 750px wide and utilizes subtle gradients on various page areas.
The color scheme of this layout was selected to make sure that the eye goes to the subject matter rather than the design. Thus, The Lake District is composed of black, gray, and white to help the images pop.
CMX JumpStart: The Lake District
Reader Level:
The Lake District JumpStart wanders away slightly from our usual city theme. The Lake District is an area in the North West of England that has a beautiful collection of (guess this if you can...) lakes and some absolutely stunning scenery. You should really visit The Lake District if you ever get the slightest opportunity to do so.
The nature of the images in this type of website demands that the eye be drawn to the subject matter rather than the design. With this in mind The Lake District allows the content images to take centre stage by utilising a design that consists of black, greys and white to ensure the design does not subtract from the content.
Reader Level:
The Lake District JumpStart wanders away slightly from our usual city theme. The Lake District is an area in the North West of England that has a beautiful collection of (guess this if you can...) lakes and some absolutely stunning scenery. You should really visit The Lake District if you ever get the slightest opportunity to do so.
The nature of the images in this type of website demands that the eye be drawn to the subject matter rather than the design. With this in mind The Lake District allows the content images to take centre stage by utilising a design that consists of black, greys and white to ensure the design does not subtract from the content.
Introducing CMX JumpStart Bordeaux
Reader Level:
It's May, and for many of us that means lots of end-of-year events. School concerts, graduations, award ceremonies, last meetings till the fall...we celebrate these endings and look forward to the easy lifestyle of summer. Many of our celebrations are accompanied by parties - delicious food, and sometimes a special wine. What more preeminent center of great wine is there than Bordeaux, France? And to that region we dedicate our latest JumpStart design, CMX JumpStart Bordeaux.
CMX JumpStart Bordeaux features an accessible split level navigation system. The main navigation is a series of tabs that use the Sliding Door method as described by Douglas Bowman. The sub navigation is an unordered list based system, and both navigation systems provide clear "you are here" page markers. The design is a two column layout fixed at 740px wide and utilizes gradients on various page areas. Of course Bordeaux meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.
Reader Level:
It's May, and for many of us that means lots of end-of-year events. School concerts, graduations, award ceremonies, last meetings till the fall...we celebrate these endings and look forward to the easy lifestyle of summer. Many of our celebrations are accompanied by parties - delicious food, and sometimes a special wine. What more preeminent center of great wine is there than Bordeaux, France? And to that region we dedicate our latest JumpStart design, CMX JumpStart Bordeaux.
CMX JumpStart Bordeaux features an accessible split level navigation system. The main navigation is a series of tabs that use the Sliding Door method as described by Douglas Bowman. The sub navigation is an unordered list based system, and both navigation systems provide clear "you are here" page markers. The design is a two column layout fixed at 740px wide and utilizes gradients on various page areas. Of course Bordeaux meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.
CMX JumpStart: Bordeaux
Reader Level:
Welcome to the Bordeaux JumpStart.
Bordeaux features a split-level navigation system, both of which are accessible. The main navigation incorporates the sliding door method as described by Douglas Bowman. The sub-navigation is an unordered list based navigation system and both navigation systems provide clear "you are here" page markers. The design is a two-column layout, fixed at 740px wide, and utilises gradients in the background while using the full width of the user's browser to provide a full and expansive appearance to the overall design. Bordeaux can be integrated into the New File dialog window of Dreamweaver by using the extension that is provided within the download
Reader Level:
Welcome to the Bordeaux JumpStart.
Bordeaux features a split-level navigation system, both of which are accessible. The main navigation incorporates the sliding door method as described by Douglas Bowman. The sub-navigation is an unordered list based navigation system and both navigation systems provide clear "you are here" page markers. The design is a two-column layout, fixed at 740px wide, and utilises gradients in the background while using the full width of the user's browser to provide a full and expansive appearance to the overall design. Bordeaux can be integrated into the New File dialog window of Dreamweaver by using the extension that is provided within the download
CMX JumpStart: Malé
Reader Level:
The Malé JumpStart is a fixed-width, two and three-column layout. It has a right column that can be shown, or hidden, on a page-by-page basis, without the need to delve into the code. The centre column is our main info area while the left column features a CSS based flyout menu. This is a menu design that owes some thanks to Peter Nederlof for his work on the csshover.htc script that allows the menu to function in versions of Internet Explorer that don't support the hover on non-anchor elements. Coupled with this JumpStart is an excellent introductory tutorial written by John Gallant and Holly Bergevin that explains the set up of the menu. Read and enjoy.
Reader Level:
The Malé JumpStart is a fixed-width, two and three-column layout. It has a right column that can be shown, or hidden, on a page-by-page basis, without the need to delve into the code. The centre column is our main info area while the left column features a CSS based flyout menu. This is a menu design that owes some thanks to Peter Nederlof for his work on the csshover.htc script that allows the menu to function in versions of Internet Explorer that don't support the hover on non-anchor elements. Coupled with this JumpStart is an excellent introductory tutorial written by John Gallant and Holly Bergevin that explains the set up of the menu. Read and enjoy.
Introducing CMX JumpStart Malé
Reader Level:
I grew up at the New Jersey shore, and spent my childhood playing in the surf and sand. I felt, and still feel, a bliss and peace there that I feel no where else in the world. So, when I first viewed Adrian Senior's latest JumpStart design, CMX JumpStart Malé, I was immediately smitten.
CMX JumpStart Malé, one of our most flexible JumpStarts to date, is a fixed-width two and three-column layout. You can show or hide the third column on a page-by-page basis, without having to delve into the code. The left column features a CSS based flyout menu that you can customize with as many levels as you need.
Of course Malé meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.
Reader Level:
I grew up at the New Jersey shore, and spent my childhood playing in the surf and sand. I felt, and still feel, a bliss and peace there that I feel no where else in the world. So, when I first viewed Adrian Senior's latest JumpStart design, CMX JumpStart Malé, I was immediately smitten.
CMX JumpStart Malé, one of our most flexible JumpStarts to date, is a fixed-width two and three-column layout. You can show or hide the third column on a page-by-page basis, without having to delve into the code. The left column features a CSS based flyout menu that you can customize with as many levels as you need.
Of course Malé meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.
Introducing CMX JumpStart Sydney
Reader Level:
It has to be one of the most beautiful opera houses in the world: the Sydney Opera House in Sydney, Australia. Opulence, elegance, and grandeur all come to mind when viewing pictures of the architecture and the city. And now those very same qualities come to you in the latest JumpStart, CMX JumpStart Sydney. Indeed, the header includes an image of the Sydney Opera House under a night sky as the centerpiece of a tasteful and elegant page layout.
CMX JumpStart Sydney is a centered, fixed-width layout that features an absolutely positioned left column with menu system that drapes over the header and content regions. With its quiet color scheme and simplicity of layout, JumpStart Sydney wreaks of class.
Read on to find out what the Sydney package includes and to view a Sydney example modification.
Reader Level:
It has to be one of the most beautiful opera houses in the world: the Sydney Opera House in Sydney, Australia. Opulence, elegance, and grandeur all come to mind when viewing pictures of the architecture and the city. And now those very same qualities come to you in the latest JumpStart, CMX JumpStart Sydney. Indeed, the header includes an image of the Sydney Opera House under a night sky as the centerpiece of a tasteful and elegant page layout.
CMX JumpStart Sydney is a centered, fixed-width layout that features an absolutely positioned left column with menu system that drapes over the header and content regions. With its quiet color scheme and simplicity of layout, JumpStart Sydney wreaks of class.
Read on to find out what the Sydney package includes and to view a Sydney example modification.
CMX JumpStart: Sydney
Reader Level:
Welcome to the Sydney JumpStart. Sydney is comprised of two columns, one of which is an absolutely positioned div that contains the nested list navigation elements.
Sydney utilises three style sheets, one that is read by all browsers and a second that is read only by versions of Internet Explorer that are greater than version 5. The final style sheet is used only at design time and provides a workaround for Dreamweaver's lack of support for the min-height value and property.
The Sydney JumpStart comes complete with a comprehensive set of tutorials and it also includes all source files, from the design png file right through to the xhtml and CSS files. Also included within the Sydney download file is the CMX design time style sheet extension which builds on and enhances the native functionality.
Reader Level:
Welcome to the Sydney JumpStart. Sydney is comprised of two columns, one of which is an absolutely positioned div that contains the nested list navigation elements.
Sydney utilises three style sheets, one that is read by all browsers and a second that is read only by versions of Internet Explorer that are greater than version 5. The final style sheet is used only at design time and provides a workaround for Dreamweaver's lack of support for the min-height value and property.
The Sydney JumpStart comes complete with a comprehensive set of tutorials and it also includes all source files, from the design png file right through to the xhtml and CSS files. Also included within the Sydney download file is the CMX design time style sheet extension which builds on and enhances the native functionality.
Chicago: Developing a CSS Starter Page - Part Four
Reader Level:
In the last article in the Chicago: Developing a CSS Starter Page series, you established "the big picture" for the layout by styling the main divs, such as the header, columns, and footer. Now it is time to start painting in some of the finer details. You'll tweak the text, add an image with a border to the content area, and use definition lists to provide the hooks for the sidebar pod styles.
For this tutorial, you can use the work you completed in the last installment of this series, or you can use the starter site that is in the download folder that is included with this article. There is also a completed site that you can use to compare your work against should you develop any problems.
The Developing a CSS Starter Page Series:
Chicago: Developing a CSS Starter Page - Part 1
Chicago: Developing a CSS Starter Page - Part 2
Chicago: Developing a CSS Starter Page - Part 3
Chicago: Developing a CSS Starter Page - Part 4
Chicago: Developing a CSS Starter Page - Part 5
Reader Level:
In the last article in the Chicago: Developing a CSS Starter Page series, you established "the big picture" for the layout by styling the main divs, such as the header, columns, and footer. Now it is time to start painting in some of the finer details. You'll tweak the text, add an image with a border to the content area, and use definition lists to provide the hooks for the sidebar pod styles.
For this tutorial, you can use the work you completed in the last installment of this series, or you can use the starter site that is in the download folder that is included with this article. There is also a completed site that you can use to compare your work against should you develop any problems.
The Developing a CSS Starter Page Series:
Chicago: Developing a CSS Starter Page - Part 1
Chicago: Developing a CSS Starter Page - Part 2
Chicago: Developing a CSS Starter Page - Part 3
Chicago: Developing a CSS Starter Page - Part 4
Chicago: Developing a CSS Starter Page - Part 5
Chicago: Developing a CSS Starter Page Part Three
Reader Level:
In the first two parts of the Chicago CSS Starter Page series, you created a comp for the design we are naming after the city of Chicago. You analyzed the graphics in relation to the fixed-width, two-column, centered layout with header and footer CSS Starter Page, and developed a slicing strategy. Finally, you exported the graphics to the defined Chicago site. You should now have the following documents in the site folder:
Reader Level:
In the first two parts of the Chicago CSS Starter Page series, you created a comp for the design we are naming after the city of Chicago. You analyzed the graphics in relation to the fixed-width, two-column, centered layout with header and footer CSS Starter Page, and developed a slicing strategy. Finally, you exported the graphics to the defined Chicago site. You should now have the following documents in the site folder:
- mockup.html, the XHML page
- main.css, the external style sheet
- an images folder with the exported graphics for the site
In this third part of the series, you will apply the exported graphics to the appropriate page areas, using the CSS Starter Page as your launching pad. The beauty of using a CSS Starter Page is that all of the basic structure is coded for you. The floated column, the clearing element, the centering of the layout, and other generic features are in place. All you have to do is tweak the design to suit your taste.
The Developing a CSS Starter Page Series:
Chicago: Developing a CSS Starter Page - Part 1
Chicago: Developing a CSS Starter Page - Part 2
Chicago: Developing a CSS Starter Page - Part 3
Chicago: Developing a CSS Starter Page - Part 4
Chicago: Developing a CSS Starter Page - Part 5
Chicago: Developing a CSS Starter Page Part Two
Reader Level:
In Part One of the Chicago CSS Starter Page series, you defined a Dreamweaver site and created a Fireworks composite of the layout from a template PNG that corresponded with the fixed-width, two-column, left sidebar with header and footer CSS Starter Page.
In this second tutorial in the series, you will analyze the composite document to determine slicing strategies, set the optimization format for each slice, and export the resulting images to your defined Chicago site.
Approximate download size: 2.3MB
The Developing a CSS Starter Page Series:
Chicago: Developing a CSS Starter Page - Part 1
Chicago: Developing a CSS Starter Page - Part 2
Chicago: Developing a CSS Starter Page - Part 3
Chicago: Developing a CSS Starter Page - Part 4
Chicago: Developing a CSS Starter Page - Part 5
Reader Level:
In Part One of the Chicago CSS Starter Page series, you defined a Dreamweaver site and created a Fireworks composite of the layout from a template PNG that corresponded with the fixed-width, two-column, left sidebar with header and footer CSS Starter Page.
In this second tutorial in the series, you will analyze the composite document to determine slicing strategies, set the optimization format for each slice, and export the resulting images to your defined Chicago site.
Approximate download size: 2.3MB
The Developing a CSS Starter Page Series:
Chicago: Developing a CSS Starter Page - Part 1
Chicago: Developing a CSS Starter Page - Part 2
Chicago: Developing a CSS Starter Page - Part 3
Chicago: Developing a CSS Starter Page - Part 4
Chicago: Developing a CSS Starter Page - Part 5
Chicago: Developing a CSS Starter Page - Part One
Reader Level:
The CSS Starter Pages are an invaluable addition to the CSS toolset in Dreamweaver CS3. With well over thirty different layout types from which to choose, you're able to rapidly develop page designs, free from the onerous task of having to build the underlying structure from scratch.
You need some knowledge to modify them, however. They do not include navigation schemes, nor do they include any bells and whistles, such as sidebar pods.
In this series you'll modify the two-column, fixed-width, left-sidebar, header and footer CSS Starter Page by adding a horizontal button navigation scheme as well as definition list-based pods. You'll use a Fireworks graphical representation of the layout to develop the graphics for a design we'll call Chicago.
In the first part of this tutorial series, you will select a CSS Starter Page, define the Chicago Dreamweaver site, and develop the graphics in Fireworks.
The Developing a CSS Starter Page Series:
Chicago: Developing a CSS Starter Page - Part 1
Chicago: Developing a CSS Starter Page - Part 2
Chicago: Developing a CSS Starter Page - Part 3
Chicago: Developing a CSS Starter Page - Part 4
Chicago: Developing a CSS Starter Page - Part 5
Reader Level:
The CSS Starter Pages are an invaluable addition to the CSS toolset in Dreamweaver CS3. With well over thirty different layout types from which to choose, you're able to rapidly develop page designs, free from the onerous task of having to build the underlying structure from scratch.
You need some knowledge to modify them, however. They do not include navigation schemes, nor do they include any bells and whistles, such as sidebar pods.
In this series you'll modify the two-column, fixed-width, left-sidebar, header and footer CSS Starter Page by adding a horizontal button navigation scheme as well as definition list-based pods. You'll use a Fireworks graphical representation of the layout to develop the graphics for a design we'll call Chicago.
In the first part of this tutorial series, you will select a CSS Starter Page, define the Chicago Dreamweaver site, and develop the graphics in Fireworks.
The Developing a CSS Starter Page Series:
Chicago: Developing a CSS Starter Page - Part 1
Chicago: Developing a CSS Starter Page - Part 2
Chicago: Developing a CSS Starter Page - Part 3
Chicago: Developing a CSS Starter Page - Part 4
Chicago: Developing a CSS Starter Page - Part 5
CMX JumpStart: Stirling
Reader Level:
The Stirling JumpStart is based around the popular Playa Blanca JumpStart, with one or two subtle enhancements that will allow you to easily flip the design from a two-column layout to a three-column layout on a page-by-page basis.
Reader Level:
The Stirling JumpStart is based around the popular Playa Blanca JumpStart, with one or two subtle enhancements that will allow you to easily flip the design from a two-column layout to a three-column layout on a page-by-page basis.
Introducing CMX JumpStart Stirling
Reader Level:
CMX JumpStart Stirling, a centered, fixed-width layout with a header, is based upon the popular Playa Blanca JumpStart. However, it has some intriguing enhancements, the most notable of which is the use of descendant selectors to flip the design from a two-column layout to a three-column layout on a page-by-page basis. Stirling also positions the main structure in a different way than Playa Blanca in that all of the columns are floated to achieve the design layout. The navigation in the left hand column, on the other hand, is switched to an AP div for older versions of IE in order to enable the bleed into the main content area from the page marker. Of course Stirling meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements.
Reader Level:
CMX JumpStart Stirling, a centered, fixed-width layout with a header, is based upon the popular Playa Blanca JumpStart. However, it has some intriguing enhancements, the most notable of which is the use of descendant selectors to flip the design from a two-column layout to a three-column layout on a page-by-page basis. Stirling also positions the main structure in a different way than Playa Blanca in that all of the columns are floated to achieve the design layout. The navigation in the left hand column, on the other hand, is switched to an AP div for older versions of IE in order to enable the bleed into the main content area from the page marker. Of course Stirling meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements.
Design Your Own Custom CMX CSS Course - Part Two
Reader Level:
On Jan. 4, 2007, we offered a compilation of our CSS articles and tutorials in the article Design Your Own Custom CMX CSS Course. Its purpose was to make it easier to find the ever-growing number of web standards related articles and tutorials on Community MX.
In the year since the CSS course publication, CMX authors have written almost a hundred more CSS and accessibility related articles, tutorials, technique updates, and extensions. Clearly it is time for the sequel to the first CSS course.
The Design Your Own Custom CMX CSS Course Series:
Design Your Own Custom CMX CSS Course - Part 1
Design Your Own Custom CMX CSS Course - Part 2
Design Your Own Custom CMX CSS Course - Part 3
Reader Level:
On Jan. 4, 2007, we offered a compilation of our CSS articles and tutorials in the article Design Your Own Custom CMX CSS Course. Its purpose was to make it easier to find the ever-growing number of web standards related articles and tutorials on Community MX.
In the year since the CSS course publication, CMX authors have written almost a hundred more CSS and accessibility related articles, tutorials, technique updates, and extensions. Clearly it is time for the sequel to the first CSS course.
The Design Your Own Custom CMX CSS Course Series:
Design Your Own Custom CMX CSS Course - Part 1
Design Your Own Custom CMX CSS Course - Part 2
Design Your Own Custom CMX CSS Course - Part 3
JumpStarts Fix: IE7 Zoom Body Background Image Bug
Reader Level:
This is a fix for all JumpStarts [and any other web page design] that use background images set against the body tag.
The zoom bug only exists in IE7 and therefore the fix is only required for IE7. The bug manifests itself when the keyboard short-cut ctrl + + is used to zoom the web page, this is very different to altering text size in IE7 via the view menu.
Reader Level:
This is a fix for all JumpStarts [and any other web page design] that use background images set against the body tag.
The zoom bug only exists in IE7 and therefore the fix is only required for IE7. The bug manifests itself when the keyboard short-cut ctrl + + is used to zoom the web page, this is very different to altering text size in IE7 via the view menu.
Quick Shot - Fixed Background Image
Reader Level:
Quick shot for the CSS on fixed background images.
Reader Level:
Quick shot for the CSS on fixed background images.
CMX JumpStart: Playa Blanca
Reader Level:
Playa Blanca is a two column fixed width design that uses valid XHTML 1.0 and CSS 2.1 markup and follows WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design you may wish to use it for.
The colours in Playa Blanca have been used to reflect the sunshine and the many wonderful volcanic shades that can be found on the island. I hope you like Playa Blanca and it serves you well for future work.
Approximate download size: 1.8MB
Reader Level:
Playa Blanca is a two column fixed width design that uses valid XHTML 1.0 and CSS 2.1 markup and follows WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design you may wish to use it for.
The colours in Playa Blanca have been used to reflect the sunshine and the many wonderful volcanic shades that can be found on the island. I hope you like Playa Blanca and it serves you well for future work.
Approximate download size: 1.8MB
Introducing CMX JumpStart: Playa Blanca
Reader Level:
Reader Level:
I admit it: this JumpStart city necessitated that I do a little geography lesson. Adrian Senior, creator of the latest CMX JumpStart Playa Blanca gave me clues to googling for Playa Blanca information in the introduction to his article:
While not exactly a city, Playa Blanca is a beautiful town that can be found on the southern tip of Lanzarote. Lanzarote is one of a group of small volcanic islands that despite sitting off the African coast come under Spanish sovereignty.
All right! A beautiful beach resort that brought me back to my summer trip in Hawaii. Now on to the latest JumpStart....Playa Blanca is a centered, two-column, fixed-width layout with header and footer, but it is a more complex variation of that common layout type. It uses a series of nested divs that create the illusion of the secondary navigation effect that bleeds the appropriate button into the related content region. Of course Playa Blanca meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements.
CMX JumpStart Madrid
Reader Level:
The latest CMX JumpStart follows the same city theme, but this time you are magically transported across the continents to Europe and the beautiful city of Madrid, Spain.
The Madrid JumpsStart is an elastic three-column layout that incorporates the use of header and footer divs. Elastic layouts are a little different than liquid layouts and are perhaps a little more awkward to work with. Not to worry: we'll be exploring the intricacies of working with an elastic layout and you'll soon be in a position to start modifying Madrid for your own ends.
The Madrid JumpStart contains all source files that were generated in its creation, from the CSS files, to the PNGs and of course the XHTML code that lies at the heart of the design. Madrid meets the W3C standards for CSS and XHTML as well as the WAI accessibilty requirements.
Approximate download size: 2MB
Reader Level:
The latest CMX JumpStart follows the same city theme, but this time you are magically transported across the continents to Europe and the beautiful city of Madrid, Spain.
The Madrid JumpsStart is an elastic three-column layout that incorporates the use of header and footer divs. Elastic layouts are a little different than liquid layouts and are perhaps a little more awkward to work with. Not to worry: we'll be exploring the intricacies of working with an elastic layout and you'll soon be in a position to start modifying Madrid for your own ends.
The Madrid JumpStart contains all source files that were generated in its creation, from the CSS files, to the PNGs and of course the XHTML code that lies at the heart of the design. Madrid meets the W3C standards for CSS and XHTML as well as the WAI accessibilty requirements.
Approximate download size: 2MB
Introducing CMX JumpStart Madrid
Reader Level:
Madrid, Spain, capital of Spain and one of Europe's major political and financial centers, is home to some of the most captivating museums and cultural events in the world. Like the atmosphere that pervades the city, we are pleased to introduce the equally warm and vibrant CMX JumpStart Madrid!
Madrid is a three-column, elastic layout that includes a background image in the content region that uses the background attachment property set to a value of fixed, an expandable header region, and a dual navigation system. The main navigation consists of an inline unordered list at the top of the design, and vertical sub navigation buttons in the left column. As with all the CMX JumpStarts, Madrid meets the W3C standards for CSS and XHTML, as well as for WAI and 508 accessibility.
Reader Level:
Madrid, Spain, capital of Spain and one of Europe's major political and financial centers, is home to some of the most captivating museums and cultural events in the world. Like the atmosphere that pervades the city, we are pleased to introduce the equally warm and vibrant CMX JumpStart Madrid!
Madrid is a three-column, elastic layout that includes a background image in the content region that uses the background attachment property set to a value of fixed, an expandable header region, and a dual navigation system. The main navigation consists of an inline unordered list at the top of the design, and vertical sub navigation buttons in the left column. As with all the CMX JumpStarts, Madrid meets the W3C standards for CSS and XHTML, as well as for WAI and 508 accessibility.
Introducing CMX JumpStart Palm Springs
Reader Level:
Reader Level:
Palm Springs, California, a desert city that is about 110 miles east of Los Angeles, is home to some of the most famous golf courses in the country. With that in mind, we have a new JumpStart that should especially appeal to all the golf fans among us. Welcome to CMX JumpStart Palm Springs!
Palm Springs is a three-column, fixed-width layout that includes a dual navigation system. The main navigation consists of horizontal tabs at the top of the design, and vertical sub navigation buttons in the left column. The design also features pre-prepared login and subscribe form layout elements. As with all the CMX JumpStarts, Palm Springs meets the W3C standards for CSS and XHTML, as well as for WAI and 508 accessibility.
CMX JumpStart: Palm Springs
Reader Level:
Palm Springs is a three-column fixed-width layout that incorporates a dual navigation system consisting of a horizontal tab section at the top of the design and a left column vertical sub navigation set. The design includes a pre-prepared log in form, layout elements and a subscribe form layout in the right hand column. As always the JumpStart contains all source files that were generated in its creation, from the CSS files, to the PNGs and of course the XHTML code that lies at the heart of the design. Palm Springs meets the W3C standards for CSS and XHTML as well as the WAI accessibilty requirements.
Approximate download size: 2.3MB
Reader Level:
Palm Springs is a three-column fixed-width layout that incorporates a dual navigation system consisting of a horizontal tab section at the top of the design and a left column vertical sub navigation set. The design includes a pre-prepared log in form, layout elements and a subscribe form layout in the right hand column. As always the JumpStart contains all source files that were generated in its creation, from the CSS files, to the PNGs and of course the XHTML code that lies at the heart of the design. Palm Springs meets the W3C standards for CSS and XHTML as well as the WAI accessibilty requirements.
Approximate download size: 2.3MB
CSS Cheat Sheet: Inheritance, Cascade, Specificity
Reader Level:
Even seasoned CSS developers need a quick refresher course in CSS concepts and techniques from time to time. This CSS Cheat Sheet is designed for just that need. Use it as a reference on topics that you've already learned about in-depth but need a few reminders on. If you're still a beginner to CSS, use it to learn the nuts and bolts of working with CSS, then use our other articles, listed at the end of this one, to extend your learning and practice your new skills.
This Cheat Sheet reviews how the fundamental CSS concepts of inheritance, cascading and specificity work. It also contains a printable PDF illustration of the rules of the cascade that you can download and keep handy for continued reference.
Reader Level:
Even seasoned CSS developers need a quick refresher course in CSS concepts and techniques from time to time. This CSS Cheat Sheet is designed for just that need. Use it as a reference on topics that you've already learned about in-depth but need a few reminders on. If you're still a beginner to CSS, use it to learn the nuts and bolts of working with CSS, then use our other articles, listed at the end of this one, to extend your learning and practice your new skills.
This Cheat Sheet reviews how the fundamental CSS concepts of inheritance, cascading and specificity work. It also contains a printable PDF illustration of the rules of the cascade that you can download and keep handy for continued reference.
Introducing CMX JumpStart Washington, D.C.
Reader Level:
Washington, D.C. is, of course, significant for being the capital of the United States, but it has also been my "hometown" since I was seventeen years old. I have lived in the city or one of its suburbs for all of my adult life. It is with the greatest pleasure, therefore, that I introduce the newest JumpStart, designed and coded by Adrian Senior, CMX JumpStart Washington, D.C.
Washington, D.C. is a two-column, fixed-width design that employs a horizontal band method for the header and footer areas. It has a main navigation level that uses the popular tabbed sliding doors technique. CSS based buttons on the left form the secondary navigation. Washington, D.C. meets the standards for CSS, XHTML and Accessibility, thus ensuring that you have a good solid layout on which to base a client site.
Reader Level:
Washington, D.C. is, of course, significant for being the capital of the United States, but it has also been my "hometown" since I was seventeen years old. I have lived in the city or one of its suburbs for all of my adult life. It is with the greatest pleasure, therefore, that I introduce the newest JumpStart, designed and coded by Adrian Senior, CMX JumpStart Washington, D.C.
Washington, D.C. is a two-column, fixed-width design that employs a horizontal band method for the header and footer areas. It has a main navigation level that uses the popular tabbed sliding doors technique. CSS based buttons on the left form the secondary navigation. Washington, D.C. meets the standards for CSS, XHTML and Accessibility, thus ensuring that you have a good solid layout on which to base a client site.
CMX JumpStart: Washington, D.C.
Reader Level:
The Washington, D.C. JumpsStart is a two-column fixed-width design. It uses the sliding doors method for presenting the navigation as a nice horizontal tabbed menu, which acts as a main navigation for the page-level vertical sub-navigation set.
Washington, D.C. makes good use of background images and, as always, meets the standards for CSS, XHTML and Accessibility, thus ensuring you have a good solid layout in which to begin your conversion to a client site.
Approximate download size: 2.6MB
Reader Level:
The Washington, D.C. JumpsStart is a two-column fixed-width design. It uses the sliding doors method for presenting the navigation as a nice horizontal tabbed menu, which acts as a main navigation for the page-level vertical sub-navigation set.
Washington, D.C. makes good use of background images and, as always, meets the standards for CSS, XHTML and Accessibility, thus ensuring you have a good solid layout in which to begin your conversion to a client site.
Approximate download size: 2.6MB
Creating a Table-less Horizontal Looper in ColdFusion
Reader Level:
Dreamweaver has a Repeat Region server behavior that loops through your data and allows you to display it in a vertical or horizontal manner. If you want to display the data in a grid pattern, however, it requires a little more effort. Typically, a Horizontal Looper extension or code is used to create a table and put your individual data sections in a table cell. In this tutorial I'll show how to do that using <div> tags and CSS without tables.
This is a version of an article I did for PHP—but for ColdFusion instead. For this tutorial I'll assume you know how to use your database tools to create and manage databases, and how to create connections for ColdFusion.
Reader Level:
Dreamweaver has a Repeat Region server behavior that loops through your data and allows you to display it in a vertical or horizontal manner. If you want to display the data in a grid pattern, however, it requires a little more effort. Typically, a Horizontal Looper extension or code is used to create a table and put your individual data sections in a table cell. In this tutorial I'll show how to do that using <div> tags and CSS without tables.
This is a version of an article I did for PHP—but for ColdFusion instead. For this tutorial I'll assume you know how to use your database tools to create and manage databases, and how to create connections for ColdFusion.
CMX JumpStart: Tahoe
Reader Level:
CMX JumpStart Vegas, created in the summer of 2005 by Stephanie Sullivan and Linda Rathgeber, has proven to be a very popular JumpStart. And with good reason: it's a clean, two column design that adapts well to a variety of subject matter, content types, and graphic identities. However, some CMX subscribers were interested in using it as a liquid or fluid design, meaning the layout's overall width would be determined by the width of the user's browser window, instead of a rigid pixel-based width assigned in the style sheet by the designer.
Out of this idea the CMX JumpStart Tahoe was born. Tahoe, the place, shares many similarities with Vegas, the place: both located in Nevada, they are centers of entertainment known for their casinos, nightlife, and incredibly cheap buffets. But Tahoe has something Vegas doesn't: a whole bunch of water in the form of the beautiful Lake Tahoe. Thus, the tagline for the Tahoe JumpStart: "Like Vegas, only fluid."
As do all our JumpStarts, Tahoe uses valid XHTML 1.0 and CSS 2.1 markup and follows WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design you may wish to use it for. Both pages from Vegas, a home page and contact page, are included in Tahoe as well. They feature a two column, centered, fluid layout that is constrained to your desired range of widths by using a minimum and maximum width. The layout is constructed of floats and utilizes a faux column technique. We provide an extensively commented style sheet so you know what each rule does and how to change it to suit your design, as well as an uncommented version for deployment on your site with smaller file size.
This JumpStart has been designed to teach you about the logistics of designing a fluid layout, as well as how to convert an existing fixed-width design into a fluid design. All of the files for Tahoe — the Fireworks PNG, XHTML pages, and style sheets — are simply modifications of those used in Vegas as an exercise to demonstrate how an entire site design can be radically transformed with very little modification to its XHTML structure. However, you need not be familiar with Vegas to use Tahoe. As with all our JumpStarts, each technique or component of Tahoe is fully explained in either this article or one of the 14 tutorials we've included in your download.
Approximate download size: 10MB
Reader Level:
CMX JumpStart Vegas, created in the summer of 2005 by Stephanie Sullivan and Linda Rathgeber, has proven to be a very popular JumpStart. And with good reason: it's a clean, two column design that adapts well to a variety of subject matter, content types, and graphic identities. However, some CMX subscribers were interested in using it as a liquid or fluid design, meaning the layout's overall width would be determined by the width of the user's browser window, instead of a rigid pixel-based width assigned in the style sheet by the designer.
Out of this idea the CMX JumpStart Tahoe was born. Tahoe, the place, shares many similarities with Vegas, the place: both located in Nevada, they are centers of entertainment known for their casinos, nightlife, and incredibly cheap buffets. But Tahoe has something Vegas doesn't: a whole bunch of water in the form of the beautiful Lake Tahoe. Thus, the tagline for the Tahoe JumpStart: "Like Vegas, only fluid."
As do all our JumpStarts, Tahoe uses valid XHTML 1.0 and CSS 2.1 markup and follows WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design you may wish to use it for. Both pages from Vegas, a home page and contact page, are included in Tahoe as well. They feature a two column, centered, fluid layout that is constrained to your desired range of widths by using a minimum and maximum width. The layout is constructed of floats and utilizes a faux column technique. We provide an extensively commented style sheet so you know what each rule does and how to change it to suit your design, as well as an uncommented version for deployment on your site with smaller file size.
This JumpStart has been designed to teach you about the logistics of designing a fluid layout, as well as how to convert an existing fixed-width design into a fluid design. All of the files for Tahoe — the Fireworks PNG, XHTML pages, and style sheets — are simply modifications of those used in Vegas as an exercise to demonstrate how an entire site design can be radically transformed with very little modification to its XHTML structure. However, you need not be familiar with Vegas to use Tahoe. As with all our JumpStarts, each technique or component of Tahoe is fully explained in either this article or one of the 14 tutorials we've included in your download.
Approximate download size: 10MB
Introducing CMX JumpStart Tahoe
Reader Level:
Reader Level:
If you've been around a while, you may remember the CMX JumpStart Vegas that was released in the summer of 2005 by Stephanie Sullivan and Linda Rathgeber. As one of our most popular JumpStarts, it inspired some CMX subscribers to request a fluid version of this fixed-width design. Zoe Gillenwater, one of our great CSS gurus, happily complied with our newest CMX JumpStart Tahoe, a JumpStart modification. Tahoe, like Vegas, is located in Nevada, and because it shares many of the same kinds of entertainment centers, seems like a fitting city for a permutation of the Vegas design. And Tahoe has one thing that Vegas doesn't - the beautiful Lake Tahoe that gives literal meaning to the tagline in the Tahoe JumpStart: "Like Vegas, only fluid."
Tahoe uses valid XHTML 1.0 and CSS 2.1 markup and follows WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design you may wish to use it for. Tahoe is a two column elastic layout, which means it expands in width based on the user's font size. This allows the overall proportions of the page to stay intact regardless of the visitor's window or font size. The design also features a subhead area, skip link, a styled list as a navigation menu, and floated images.
The Dreamweaver Web Standards Lesson Plan Series Part Six
Reader Level:
In lesson five of the Dreamweaver Web Standards series, you created a comp, or design prototype, of the Shakespeare layout. You then exported five images from the slices you drew in the comp.
In this part of the series, you'll use those exported images to set backgrounds on various regions of the layout. In the process, you will explore many of the options for setting background images. You will also learn fundamentals of div behavior that affect the display of background colors and images. Finally, you will work through exercises that guide you in modifying "CMX JumpStart Stratford-on-Avon" so that you can use it for your own projects.
Approximate download size: 960k
The Dreamweaver Web Standards Lesson Plan Series:
The Dreamweaver Web Standards Lesson Plan Series - Part 1
The Dreamweaver Web Standards Lesson Plan Series - Part 2
The Dreamweaver Web Standards Lesson Plan Series - Part 3
The Dreamweaver Web Standards Lesson Plan Series - Part 4
The Dreamweaver Web Standards Lesson Plan Series - Part 5
The Dreamweaver Web Standards Lesson Plan Series - Part 6
The Dreamweaver Web Standards Lesson Plan Series - Part 7
The Dreamweaver Web Standards Lesson Plan Series - Part 8
The Dreamweaver Web Standards Lesson Plan Series - Part 9
The Dreamweaver Web Standards Lesson Plan Series - Part 10
The Dreamweaver Web Standards Lesson Plan Series - Part 11
The Dreamweaver Web Standards Lesson Plan Series - Part 12
The Dreamweaver Web Standards Lesson Plan Series - Part 13
The Dreamweaver Web Standards Lesson Plan Series - Part 14 Coming Soon
Reader Level:
In lesson five of the Dreamweaver Web Standards series, you created a comp, or design prototype, of the Shakespeare layout. You then exported five images from the slices you drew in the comp.
In this part of the series, you'll use those exported images to set backgrounds on various regions of the layout. In the process, you will explore many of the options for setting background images. You will also learn fundamentals of div behavior that affect the display of background colors and images. Finally, you will work through exercises that guide you in modifying "CMX JumpStart Stratford-on-Avon" so that you can use it for your own projects.
Approximate download size: 960k
The Dreamweaver Web Standards Lesson Plan Series:
The Dreamweaver Web Standards Lesson Plan Series - Part 1
The Dreamweaver Web Standards Lesson Plan Series - Part 2
The Dreamweaver Web Standards Lesson Plan Series - Part 3
The Dreamweaver Web Standards Lesson Plan Series - Part 4
The Dreamweaver Web Standards Lesson Plan Series - Part 5
The Dreamweaver Web Standards Lesson Plan Series - Part 6
The Dreamweaver Web Standards Lesson Plan Series - Part 7
The Dreamweaver Web Standards Lesson Plan Series - Part 8
The Dreamweaver Web Standards Lesson Plan Series - Part 9
The Dreamweaver Web Standards Lesson Plan Series - Part 10
The Dreamweaver Web Standards Lesson Plan Series - Part 11
The Dreamweaver Web Standards Lesson Plan Series - Part 12
The Dreamweaver Web Standards Lesson Plan Series - Part 13
The Dreamweaver Web Standards Lesson Plan Series - Part 14 Coming Soon
Understanding the New Dreamweaver CS3 CSS Layouts
Reader Level:
Today, more designers and developers than ever are adopting web standards to deliver their content. One example is the migration from table-based layouts to cascading style sheets (CSS). And while the benefits of embracing web standards such as CSS include a more flexible and robust cross-browser site design, many people don’t have the time to learn brand new ways to get their work done.
Dreamweaver CS3 helps by offering CSS Layouts that not only get your page up and running quickly, they also help you learn by providing extensive inline comments in the code. Most site designs on the web can be categorized as one-, two-, or three-column layouts, each with a number of additional elements (such as headers, footers, etc.). Dreamweaver offers a comprehensive list of essential layout designs, which enable you to start using CSS with the click of the mouse.
In this article, we will discuss the CSS Layouts in Dreamweaver CS3, what they are, how to access them, and what to watch for as you utilize them in your projects.
Reader Level:
Today, more designers and developers than ever are adopting web standards to deliver their content. One example is the migration from table-based layouts to cascading style sheets (CSS). And while the benefits of embracing web standards such as CSS include a more flexible and robust cross-browser site design, many people don’t have the time to learn brand new ways to get their work done.
Dreamweaver CS3 helps by offering CSS Layouts that not only get your page up and running quickly, they also help you learn by providing extensive inline comments in the code. Most site designs on the web can be categorized as one-, two-, or three-column layouts, each with a number of additional elements (such as headers, footers, etc.). Dreamweaver offers a comprehensive list of essential layout designs, which enable you to start using CSS with the click of the mouse.
In this article, we will discuss the CSS Layouts in Dreamweaver CS3, what they are, how to access them, and what to watch for as you utilize them in your projects.
CMX Internet Explorer Conditional Comment Extension
Reader Level:
Rapidly put Internet Explorer conditional comments in your web pages without looking it up every time for the syntax. This extension will insert conditional comments for Internet Explorer in a couple of clicks!
Reader Level:
Rapidly put Internet Explorer conditional comments in your web pages without looking it up every time for the syntax. This extension will insert conditional comments for Internet Explorer in a couple of clicks!
Introducing CMX JumpStart Detroit
Reader Level:
We are pleased to introduce our latest CMX JumpStart: Detroit. Created by Adrian "JoJo" Senior, it has all the trademarks of his designs: clean with no-fuss CSS, easy to modify, and always professional looking. This two-column, centered, fixed-width layout includes a shadowed, tapering background image on the main column that gives the effect of a raised platform for the content. Like all JumpStarts, Detroit uses valid XHTML 1.0 and CSS 2.1 markup and follows WAI and Section 508 accessibility guidelines.
Reader Level:
We are pleased to introduce our latest CMX JumpStart: Detroit. Created by Adrian "JoJo" Senior, it has all the trademarks of his designs: clean with no-fuss CSS, easy to modify, and always professional looking. This two-column, centered, fixed-width layout includes a shadowed, tapering background image on the main column that gives the effect of a raised platform for the content. Like all JumpStarts, Detroit uses valid XHTML 1.0 and CSS 2.1 markup and follows WAI and Section 508 accessibility guidelines.
CMX Jumpstart: Detroit
Reader Level:
Detroit is a two column design that uses background shadows created in the Fireworks to present the content as if it was sitting on a raised and tapering canvas.
As always there are a host of bundled tutorials that discuss each of the techniques used in great depth. I hope you enjoy Detroit and that it will become a useful addition to your design armory.
Reader Level:
Detroit is a two column design that uses background shadows created in the Fireworks to present the content as if it was sitting on a raised and tapering canvas.
As always there are a host of bundled tutorials that discuss each of the techniques used in great depth. I hope you enjoy Detroit and that it will become a useful addition to your design armory.
CS3 Sneak Preview: The CSS Panel
Reader Level:
Not everyone can create the right CSS rules, in the right place, on the first try. To get things right, it’s often necessary to move, rename, or otherwise change the structure of your CSS. Additionally, many people like to introduce CSS changes incrementally to a site, first by getting the CSS working on a single page, and then working on the entire site. Others prefer to step back further and get the CSS working on a single element before trying to make it work for a whole page. The Manage CSS feature makes it easier for you to move CSS rules from document to document, from the head of a document to an external sheet, between external CSS files, and more. You can also convert inline CSS to CSS rules, and place them where you need them—just by dragging and dropping.
Reader Level:
Not everyone can create the right CSS rules, in the right place, on the first try. To get things right, it’s often necessary to move, rename, or otherwise change the structure of your CSS. Additionally, many people like to introduce CSS changes incrementally to a site, first by getting the CSS working on a single page, and then working on the entire site. Others prefer to step back further and get the CSS working on a single element before trying to make it work for a whole page. The Manage CSS feature makes it easier for you to move CSS rules from document to document, from the head of a document to an external sheet, between external CSS files, and more. You can also convert inline CSS to CSS rules, and place them where you need them—just by dragging and dropping.
Methods for Testing in Multiple Versions of IE - **Updated**
Reader Level:
Internet Explorer 7 (IE), released in October 2006, greatly improves its CSS rendering capabilities. However, it's only available for Windows XP and Vista, so we still have to support IE 6 — and possibly IE 5.5 and 5.0, depending on your site's audience — for some time to come. Unfortunately, the integration of IE into the Windows operating system, and Microsoft's refusal to allow multiple versions of it to run at the same time, have made testing web sites in various versions of the ubiquitous browser difficult. There are, however, ways it can be done, and the advent of IE 7 has brought some new methods out for our consideration.
In this article I'll provide an overview of the current methods available for testing multiple versions of Windows IE and provide the pros and cons of each method so you can decide which suits you best.
Note: This article was originally written in late November 2006. Right after it was written, Microsoft released a free virtual machine image for Virtual PC, making it easier for developers to use the software. Thus, the section on Microsoft Virtual PC has been revised from the original, with other small changes throughout. My recommendations remain virtually (no pun intended) the same. You can view the original article here.
Reader Level:
Internet Explorer 7 (IE), released in October 2006, greatly improves its CSS rendering capabilities. However, it's only available for Windows XP and Vista, so we still have to support IE 6 — and possibly IE 5.5 and 5.0, depending on your site's audience — for some time to come. Unfortunately, the integration of IE into the Windows operating system, and Microsoft's refusal to allow multiple versions of it to run at the same time, have made testing web sites in various versions of the ubiquitous browser difficult. There are, however, ways it can be done, and the advent of IE 7 has brought some new methods out for our consideration.
In this article I'll provide an overview of the current methods available for testing multiple versions of Windows IE and provide the pros and cons of each method so you can decide which suits you best.
Note: This article was originally written in late November 2006. Right after it was written, Microsoft released a free virtual machine image for Virtual PC, making it easier for developers to use the software. Thus, the section on Microsoft Virtual PC has been revised from the original, with other small changes throughout. My recommendations remain virtually (no pun intended) the same. You can view the original article here.
Putting the Sting into the CMX San Francisco JumpStart
Reader Level:
I was recently contacted by a small, family run business who wished to update their website. They wanted to make some content changes and have the overall look of the site be more contemporary. Being a small business, their budget was limited as well. I took on the project, thinking that a CMX JumpStart would be the perfect solution.
I see many questions on our forums about the CMX JumpStarts and how to make them work for one's own specific needs. As you may be aware, the JumpStarts are designed and tested to work based on specific layout concepts - that's why we have so many and continue to create more.
But I'd like to share with you my own personal experience in customizing one of our recent JumpStarts: San Francisco. San Francisco is based on Gordon Mackay's CMX Design Element: Gold PNG file. My customizations include:
Fireworks PNG
Reader Level:
I was recently contacted by a small, family run business who wished to update their website. They wanted to make some content changes and have the overall look of the site be more contemporary. Being a small business, their budget was limited as well. I took on the project, thinking that a CMX JumpStart would be the perfect solution.
I see many questions on our forums about the CMX JumpStarts and how to make them work for one's own specific needs. As you may be aware, the JumpStarts are designed and tested to work based on specific layout concepts - that's why we have so many and continue to create more.
But I'd like to share with you my own personal experience in customizing one of our recent JumpStarts: San Francisco. San Francisco is based on Gordon Mackay's CMX Design Element: Gold PNG file. My customizations include:
Fireworks PNG
- Color alterations
- Changing dimensions of the background image for the innerwrapper div
- Altering export format of slices
CSS
- Adjusting rules to change the position of the navigation
- Adding a custom bullet image
- Creating a secondary modified style sheet and web page for a pop up window requirement.
So what are you waiting for? Hop on that trolley and follow me from San Francisco to Sooke, British Columbia.
CMX JumpStart: Kansas City
Reader Level:
Welcome to the next design in the CMX JumpStarts series, Kansas City, located in the wide, open great plains of the U.S.
The Kansas City JumpStart is a two-column design based on Zoe Gillenwater’s Horizontal Band Layout. The content is centered and fixed-width. The bands of color behind the header, footer, and main navigation bar stretch across the entire browser giving the design a wide, open feeling. Much like driving through the miles and miles of wheat fields in Kansas.
As with all of our JumpStarts, Kansas City can be used in any way you wish, commercial or personal, and includes several tutorials, an extension, and source PNG.
Kansas City is structured to be as hack-free and straightforward as possible. So, if you've been looking for a smooth transition into using CSS for positioning as well as aesthetics, this may be just the JumpStart for you.
Kansas City comes with a starter page and a nicely styled form page. Of course, both use valid XHTML 1.0 Transitional and CSS 2 markup and follow WAI and Section 508 accessibility guidelines making it ready for you to customize to suit your own requirements.
Reader Level:
Welcome to the next design in the CMX JumpStarts series, Kansas City, located in the wide, open great plains of the U.S.
The Kansas City JumpStart is a two-column design based on Zoe Gillenwater’s Horizontal Band Layout. The content is centered and fixed-width. The bands of color behind the header, footer, and main navigation bar stretch across the entire browser giving the design a wide, open feeling. Much like driving through the miles and miles of wheat fields in Kansas.
As with all of our JumpStarts, Kansas City can be used in any way you wish, commercial or personal, and includes several tutorials, an extension, and source PNG.
Kansas City is structured to be as hack-free and straightforward as possible. So, if you've been looking for a smooth transition into using CSS for positioning as well as aesthetics, this may be just the JumpStart for you.
Kansas City comes with a starter page and a nicely styled form page. Of course, both use valid XHTML 1.0 Transitional and CSS 2 markup and follow WAI and Section 508 accessibility guidelines making it ready for you to customize to suit your own requirements.
Using Background Images in a Horizontal Band Design
Reader Level:
Zoe's part two of the Horizontal Band Layout series describes ways to set additional background images on various areas of the design. While Heidi Bautista's JumpStart Kansas City focuses on the layout that Zoe described in part one of her series, the design that I created as the companion site for the Graphic Design for the Web class that I am now teaching focuses on the techniques in part two. Taken together, these two free articles that we're offering on the day that Community MX reaches its second grand milestone should give you plenty of ideas about how to capitalize on the horizontal band layout technique.
Reader Level:
Zoe's part two of the Horizontal Band Layout series describes ways to set additional background images on various areas of the design. While Heidi Bautista's JumpStart Kansas City focuses on the layout that Zoe described in part one of her series, the design that I created as the companion site for the Graphic Design for the Web class that I am now teaching focuses on the techniques in part two. Taken together, these two free articles that we're offering on the day that Community MX reaches its second grand milestone should give you plenty of ideas about how to capitalize on the horizontal band layout technique.
The CMX Mobile Device Reference Resource
Reader Level:
Information in general on CSS support for mobile browsers is scarce, often such browsers do not look for handheld media types and instead use the screen CSS to display the target page. The goal of the the CMX Mobile Device Reference Resource is to build an accurate resource for information on handheld devices. You will be able to search devices by: Manufacturer, Model names/numbers, Browser types and User Agent Strings. You can also check for CSS support, linked handheld and screen media, @import handheld and screen media and CSS 3s content switching support.
Reader Level:
Information in general on CSS support for mobile browsers is scarce, often such browsers do not look for handheld media types and instead use the screen CSS to display the target page. The goal of the the CMX Mobile Device Reference Resource is to build an accurate resource for information on handheld devices. You will be able to search devices by: Manufacturer, Model names/numbers, Browser types and User Agent Strings. You can also check for CSS support, linked handheld and screen media, @import handheld and screen media and CSS 3s content switching support.
Design Your Own Custom CMX CSS Course - Part 1
Reader Level:
A common question on the forums is for the recommendation of the name of a good CSS book. There are certainly valuable CSS books on the bookshelves of Borders or Barnes and Noble and the virtual bookshelves of Amazon, but why not start right here with the scores of CSS articles on CMX? Perhaps it has been hard to keep track of them all, and even harder to know where to start from among so much bounty. That is where this learning guide comes in. It will group articles into categories, guide you in determining their levels, and help you design your own custom CSS course.
The Design Your Own Custom CMX CSS Course Series:
Design Your Own Custom CMX CSS Course - Part 1
Design Your Own Custom CMX CSS Course - Part 2
Design Your Own Custom CMX CSS Course - Part 3
Reader Level:
A common question on the forums is for the recommendation of the name of a good CSS book. There are certainly valuable CSS books on the bookshelves of Borders or Barnes and Noble and the virtual bookshelves of Amazon, but why not start right here with the scores of CSS articles on CMX? Perhaps it has been hard to keep track of them all, and even harder to know where to start from among so much bounty. That is where this learning guide comes in. It will group articles into categories, guide you in determining their levels, and help you design your own custom CSS course.
The Design Your Own Custom CMX CSS Course Series:
Design Your Own Custom CMX CSS Course - Part 1
Design Your Own Custom CMX CSS Course - Part 2
Design Your Own Custom CMX CSS Course - Part 3
Using a CF Custom Tag for Multiple Tabs
Reader Level:
Tabs in a web page are an intuitive way for a user to navigate elements on a page. Using tabs, you can create pages of an article, multi-tab forms, multi-tab pages of links, or other types of pages where there is too much content to fit on one page. Using two ColdFusion custom tags -- one for the tab functionality and one for each individual tab -- you can create a simple way to add tabs to a ColdFusion page. The tab code shown in the article is simple, but can be used to expand on, or you can simply use the techniques shown with your own tab code.
Reader Level:
Tabs in a web page are an intuitive way for a user to navigate elements on a page. Using tabs, you can create pages of an article, multi-tab forms, multi-tab pages of links, or other types of pages where there is too much content to fit on one page. Using two ColdFusion custom tags -- one for the tab functionality and one for each individual tab -- you can create a simple way to add tabs to a ColdFusion page. The tab code shown in the article is simple, but can be used to expand on, or you can simply use the techniques shown with your own tab code.
The Complete JumpStart Catalog Update
Reader Level:
We now have 20 JumpStarts and are still counting. For anyone who has ever agonized over which to use for a current project, this article is for you. Updated from an article we released a year ago, the newly expanded and refreshed catalog should help you make the tough decisions about which layout and features will work for your latest client's site.
Reader Level:
We now have 20 JumpStarts and are still counting. For anyone who has ever agonized over which to use for a current project, this article is for you. Updated from an article we released a year ago, the newly expanded and refreshed catalog should help you make the tough decisions about which layout and features will work for your latest client's site.
Methods for Testing in Multiple Versions of IE
Reader Level:
Internet Explorer 7 (IE), released in October 2006, greatly improves its CSS rendering capabilities. However, it's only available for Windows XP and Vista, so we still have to support IE 6 — and possibly IE 5.5 and 5.0, depending on your site's audience — for some time to come. Unfortunately, the integration of IE into the Windows operating system, and Microsoft's refusal to allow multiple versions of it to run at the same time, have made testing web sites in various versions of the ubiquitous browser difficult. There are, however, ways it can be done, and the advent of IE 7 has brought some new methods out for our consideration.
In this article I'll provide an overview of the current methods available for testing multiple versions of Windows IE and provide the pros and cons of each method so you can decide which suits you best.
Reader Level:
Internet Explorer 7 (IE), released in October 2006, greatly improves its CSS rendering capabilities. However, it's only available for Windows XP and Vista, so we still have to support IE 6 — and possibly IE 5.5 and 5.0, depending on your site's audience — for some time to come. Unfortunately, the integration of IE into the Windows operating system, and Microsoft's refusal to allow multiple versions of it to run at the same time, have made testing web sites in various versions of the ubiquitous browser difficult. There are, however, ways it can be done, and the advent of IE 7 has brought some new methods out for our consideration.
In this article I'll provide an overview of the current methods available for testing multiple versions of Windows IE and provide the pros and cons of each method so you can decide which suits you best.
Introducing CMX JumpStart Metropolis
Reader Level:
Metropolis. Home of the Man of Steel. Where looking up in the sky means you could see something other than a bird or a a plane. This symbol of a thriving cosmopolitan American city complete with villains and heroes, is now the feature of our latest JumpStart. Metropolis is based on the Gordon Mackay's CMX Design Element, Krypton (Hmmm, I sense a theme . . .). Sheri German has sliced up the Krypton PNG file and created all the necessary components to make Metropolis a solid, standards-based design that holds up well in even the latest browser, I.E. 7. In fact, it's just super!
Read on to find out what Metropolis includes and get some tips about how you can adapt it in unique ways. We'll even include our own Metropolis adaptation to give you inspiration to build your own design, faster than a speeding bullet. At the end of this article we'll provide the link for you to download Metropolis so you can get started today!
Reader Level:
Metropolis. Home of the Man of Steel. Where looking up in the sky means you could see something other than a bird or a a plane. This symbol of a thriving cosmopolitan American city complete with villains and heroes, is now the feature of our latest JumpStart. Metropolis is based on the Gordon Mackay's CMX Design Element, Krypton (Hmmm, I sense a theme . . .). Sheri German has sliced up the Krypton PNG file and created all the necessary components to make Metropolis a solid, standards-based design that holds up well in even the latest browser, I.E. 7. In fact, it's just super!
Read on to find out what Metropolis includes and get some tips about how you can adapt it in unique ways. We'll even include our own Metropolis adaptation to give you inspiration to build your own design, faster than a speeding bullet. At the end of this article we'll provide the link for you to download Metropolis so you can get started today!
Modify Dreamweaver to Create a Default Style Sheet
Reader Level:
When you work with CSS as much as I do, you find that there are certain rules that you use over and over again across your sites. Instead of writing them out in each sheet every time, you can save them as Dreamweaver snippets that you can insert into each new sheet you create. However, an even faster way to get all your standard CSS rules into your style sheet is to have them already in there as soon as you create a new style sheet in Dreamweaver. You can make this happen by editing the default style sheet file that Dreamweaver loads.
In this tutorial you'll learn how to locate and edit Dreamweaver's default style sheet. You'll also get recommendations on rules to put in your customized default style sheet, helping you learn how to optimize your workflow and manage your CSS effectively.
Reader Level:
When you work with CSS as much as I do, you find that there are certain rules that you use over and over again across your sites. Instead of writing them out in each sheet every time, you can save them as Dreamweaver snippets that you can insert into each new sheet you create. However, an even faster way to get all your standard CSS rules into your style sheet is to have them already in there as soon as you create a new style sheet in Dreamweaver. You can make this happen by editing the default style sheet file that Dreamweaver loads.
In this tutorial you'll learn how to locate and edit Dreamweaver's default style sheet. You'll also get recommendations on rules to put in your customized default style sheet, helping you learn how to optimize your workflow and manage your CSS effectively.
Newly Supported CSS Selectors in IE7
Reader Level:
If you know a little about CSS selectors, you have probably discovered how limiting they can be in some ways. Well get ready to expand your CSS horizons, because IE7 has extended its selector support quite a bit, and we want you to become aware of the things these newly supported CSS combinator tools will do for you. All too soon we coders will be expected to know and use this stuff, so put on that thinking-cap and set the selector to "Combinators." Here we go...
Reader Level:
If you know a little about CSS selectors, you have probably discovered how limiting they can be in some ways. Well get ready to expand your CSS horizons, because IE7 has extended its selector support quite a bit, and we want you to become aware of the things these newly supported CSS combinator tools will do for you. All too soon we coders will be expected to know and use this stuff, so put on that thinking-cap and set the selector to "Combinators." Here we go...
Converting the Santorini JumpStart to Use Two Columns Instead of Three
Reader Level:
The Santorini JumpStart - 18th in our ongoing series - provides you with a simple 3-column fluid layout. But what if you wanted just two columns? No problem. This article shows you exactly what you need to change. And it's only three things! Isn't it nice when things are simple for a change? That's the whole idea behind our JumpStarts. If Santorini doesn't meet your needs, be sure to check out our other designs.
Reader Level:
The Santorini JumpStart - 18th in our ongoing series - provides you with a simple 3-column fluid layout. But what if you wanted just two columns? No problem. This article shows you exactly what you need to change. And it's only three things! Isn't it nice when things are simple for a change? That's the whole idea behind our JumpStarts. If Santorini doesn't meet your needs, be sure to check out our other designs.
CMX JumpStarts: Santorini
Reader Level:
Welcome to the next design in the CMX JumpStarts series, Santorini, a sun-kissed island in legendary Greece.
The Santorini JumpStart is a three-column design that leverages the entire width of the browser. The center (main content) column widens and shrinks as the user resizes his window. But the two outer columns are fixed width so your links and extra info is always visible to the user.
As always, the Santorini CMX JumpStart can be used in any way you wish. commercial or personal, and includes several tutorials and an extension.
Santorini is structured to be as hack-free and straightforward as possible. So, if you've been looking for a relatively painfree way of getting started with CSS layouts this may be just the JumpStart for you.
The source PNG included with Santorini is pretty simple too in that it doesn't have any complicated images that you need to slice up and shoehorn into the design. What you get with Santorini is a starter page that uses valid XHTML 1.0 Strict and CSS 3 markup and follows WAI and Section 508 accessibility guidelines making it ready for you to customize to suit your own requirements.
Approximate download size: 2.9MB
Reader Level:
Welcome to the next design in the CMX JumpStarts series, Santorini, a sun-kissed island in legendary Greece.
The Santorini JumpStart is a three-column design that leverages the entire width of the browser. The center (main content) column widens and shrinks as the user resizes his window. But the two outer columns are fixed width so your links and extra info is always visible to the user.
As always, the Santorini CMX JumpStart can be used in any way you wish. commercial or personal, and includes several tutorials and an extension.
Santorini is structured to be as hack-free and straightforward as possible. So, if you've been looking for a relatively painfree way of getting started with CSS layouts this may be just the JumpStart for you.
The source PNG included with Santorini is pretty simple too in that it doesn't have any complicated images that you need to slice up and shoehorn into the design. What you get with Santorini is a starter page that uses valid XHTML 1.0 Strict and CSS 3 markup and follows WAI and Section 508 accessibility guidelines making it ready for you to customize to suit your own requirements.
Approximate download size: 2.9MB
CMX Announces a JumpStart Contest and FREE JumpStart
Reader Level:
The Greek island of Santorini is considered by some to be the location of the legendary Atlantis. Atlantis still fascinates and inspires everything from literature and art to movies and music. Now, as the latest Community MX JumpStart, we hope that Santorini will inspire your Web designs, too.
Santorini is our 18th JumpStart, and we think that this is a nice "coming of age" number. To celebrate, we're going to give Santorini away for free AND hold a JumpStart contest. Read on to learn more about our latest JumpStart and to get all the contest rules.
Reader Level:
The Greek island of Santorini is considered by some to be the location of the legendary Atlantis. Atlantis still fascinates and inspires everything from literature and art to movies and music. Now, as the latest Community MX JumpStart, we hope that Santorini will inspire your Web designs, too.
Santorini is our 18th JumpStart, and we think that this is a nice "coming of age" number. To celebrate, we're going to give Santorini away for free AND hold a JumpStart contest. Read on to learn more about our latest JumpStart and to get all the contest rules.
Introduction to Design-Time Style Sheets
Reader Level:
Design-time Style Sheets (DTSS) is a feature that was introduced back in Dreamweaver MX (version 6) and continues to exist in Dreamweaver 8 today, as well as Contribute. A Design-time Style Sheet allows you to apply or hide certain styles within Dreamweaver, without applying these styles to your live page in the browser. That means that if Dreamweaver is displaying certain styles incorrectly, you can write a separate style sheet with styles to correct the problem and have this style sheet only affect the Design View in Dreamweaver.
DTSS can also be used for a whole lot more than correcting style rendering problems in Design View, such as:
Reader Level:
Design-time Style Sheets (DTSS) is a feature that was introduced back in Dreamweaver MX (version 6) and continues to exist in Dreamweaver 8 today, as well as Contribute. A Design-time Style Sheet allows you to apply or hide certain styles within Dreamweaver, without applying these styles to your live page in the browser. That means that if Dreamweaver is displaying certain styles incorrectly, you can write a separate style sheet with styles to correct the problem and have this style sheet only affect the Design View in Dreamweaver.
DTSS can also be used for a whole lot more than correcting style rendering problems in Design View, such as:
- Showing styles on includes
- Showing content that is hidden with CSS
- Highlighting content you need to take action on
- Showing styles from dynamic style sheets
- Displaying styles from external style sheets
This tutorial will explain these uses in more detail, then show you how to create a DTSS and apply it to a page.
Introducing CMX Jumpstart Greenville
Reader Level:
The name Greenville evokes the radiant ambiance of gardens, nurseries, and landscapes. And that is just how Heidi Bautista paints it in our latest Community MX JumpStart: Greenville, NC. Let's take a closer look at this bloomingly lovely design to see what new treasure we've added to our JumpStart collection.
Reader Level:
The name Greenville evokes the radiant ambiance of gardens, nurseries, and landscapes. And that is just how Heidi Bautista paints it in our latest Community MX JumpStart: Greenville, NC. Let's take a closer look at this bloomingly lovely design to see what new treasure we've added to our JumpStart collection.
Transparent Backgrounds in Win IE
Reader Level:
Transparent PNGs in Win IE? Sure, just use the AlphaImageLoader filter. This article explains how to use the filter, offers some examples, and shows how the results are the same or different as compared to transparent PNGs in FireFox.
Reader Level:
Transparent PNGs in Win IE? Sure, just use the AlphaImageLoader filter. This article explains how to use the filter, offers some examples, and shows how the results are the same or different as compared to transparent PNGs in FireFox.
Introducing CMX Jumpstart Orlando
Reader Level:
Reader Level:
Orlando, Florida. It's every kid's dream vacation spot. It's warm and sunny, and makes the world of school seem galaxies away. It's got theme parks galore that take them to galaxies far away. When most people think of Orlando, they probably think of Disney, Epcot, MGM Studios, and Sea World. Now there is also CommunityMX JumpStart Orlando to add to the list of Orlando attractions.
Orlando was designed by Chris Flick and coded by Zoe Gillenwater. Orlando uses valid XHTML 1.0 and CSS 2.1 markup and follows WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design for which you may wish to use it. Orlando is a two-column elastic layout that also features a subhead area, a styled list as a navigation menu, and floated images.
CMX JumpStarts: Orlando
Reader Level:
Mention Orlando, and most people immediately think of theme parks, laughing kids, warm sunshine and palm trees. Our Orlando JumpStart captures this spirit of Orlando perfectly, from its imagery to fun masthead font to bright colors.
As do all our JumpStarts, Orlando uses valid XHTML 1.0 and CSS 2.1 markup and follows WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design you may wish to use it for. Orlando is a two column elastic layout, which means it expands in width based on the user's font size. This allows the overall proportions of the page to stay intact no matter what window or font size the page's visitors are using, as well as making the design very accessible. The design also features a subhead area, a styled list as a navigation menus, and floated images.
The graphic and code techniques used to create Orlando are explained fully in the 11 tutorials that we've included in your download, as well as this article. We also include the four style sheets needed for this design (including an extensively commented one you can use for reference), the XHTML files for the layout, the two source Fireworks PNGs, and a Dreamweaver extension that allows you to create new pages based on Orlando easily.
If you'd like a more detailed look at the Orlando Jumpstart, as well as seeing a modified Orlando design, check out Sheri German's CMX JumpStart Orlando: An Introduction. Otherwise, click the link below to dive right into this JumpStart!
Reader Level:
Mention Orlando, and most people immediately think of theme parks, laughing kids, warm sunshine and palm trees. Our Orlando JumpStart captures this spirit of Orlando perfectly, from its imagery to fun masthead font to bright colors.
As do all our JumpStarts, Orlando uses valid XHTML 1.0 and CSS 2.1 markup and follows WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design you may wish to use it for. Orlando is a two column elastic layout, which means it expands in width based on the user's font size. This allows the overall proportions of the page to stay intact no matter what window or font size the page's visitors are using, as well as making the design very accessible. The design also features a subhead area, a styled list as a navigation menus, and floated images.
The graphic and code techniques used to create Orlando are explained fully in the 11 tutorials that we've included in your download, as well as this article. We also include the four style sheets needed for this design (including an extensively commented one you can use for reference), the XHTML files for the layout, the two source Fireworks PNGs, and a Dreamweaver extension that allows you to create new pages based on Orlando easily.
If you'd like a more detailed look at the Orlando Jumpstart, as well as seeing a modified Orlando design, check out Sheri German's CMX JumpStart Orlando: An Introduction. Otherwise, click the link below to dive right into this JumpStart!
Introducing CMX Jumpstart San Francisco
Reader Level:
We are pleased to introduce CMX JumpStart San Francisco, a great first CSS layout for students and experienced developers alike. Structured to be as hack free and straightforward as possible, this may be just the JumpStart for you if you have been holding back on CSS layouts so far. Like all JumpStarts, it uses valid XHTML and CSS as its foundation and is 508 and WAI compliant. This two-column, fixed-width layout, described rule by rule in the documentation article, makes a great learning tool.
Reader Level:
We are pleased to introduce CMX JumpStart San Francisco, a great first CSS layout for students and experienced developers alike. Structured to be as hack free and straightforward as possible, this may be just the JumpStart for you if you have been holding back on CSS layouts so far. Like all JumpStarts, it uses valid XHTML and CSS as its foundation and is 508 and WAI compliant. This two-column, fixed-width layout, described rule by rule in the documentation article, makes a great learning tool.
Introducing CMX Design Element Mercury
Reader Level:
Our CMX design sorcerer, Gordon Mackay, is back with another CMX Design Element in our series of fully developed Fireworks design comps that you can slice and code in any way that fits your page specs. We leave elements Carbon, Krypton, and Gold, and this time offer you element Mercury in our CMX Design Element Mercury.
Reader Level:
Our CMX design sorcerer, Gordon Mackay, is back with another CMX Design Element in our series of fully developed Fireworks design comps that you can slice and code in any way that fits your page specs. We leave elements Carbon, Krypton, and Gold, and this time offer you element Mercury in our CMX Design Element Mercury.
Persistent Page Indicator
Reader Level:
When developing Web sites using good principles of usability, it is good practice to use an indicator showing what page the person is on as they surf through your site. Some people use bread crumbs as well as a persistent page indicator (many times like the down state of the button) indicating that "you are here." This page indication can be acheived by simply placing a class on the proper navigation item (and changing the item it's placed on from page to page). However, when using server-side includes, templates or library items in Dreamweaver, since the same menu is used on each instance of the page, it can be a more challenging process. Don't worry though -- CSS and the descendant selector handle the challenge quite nicely. Come along as we walk through the steps needed to create this effect.
Reader Level:
When developing Web sites using good principles of usability, it is good practice to use an indicator showing what page the person is on as they surf through your site. Some people use bread crumbs as well as a persistent page indicator (many times like the down state of the button) indicating that "you are here." This page indication can be acheived by simply placing a class on the proper navigation item (and changing the item it's placed on from page to page). However, when using server-side includes, templates or library items in Dreamweaver, since the same menu is used on each instance of the page, it can be a more challenging process. Don't worry though -- CSS and the descendant selector handle the challenge quite nicely. Come along as we walk through the steps needed to create this effect.
Introducing CMX Design Element Gold
Reader Level:
I am sure you remember that the symbol for Gold, Au, comes from the Latin word "Aurum". No? You don't remember that? Well, then maybe you remember this: gold is one of the most valuable commodities in the world of commerce. And a good design is also one of the most valuable commodities on the Web. It catches your visitors' eyes and encourages them to stay and explore - and perhaps even to buy. There is almost no price tag for a great design, and fortunately you don't have to come up with one all by yourself. Gordon has done the creative work for you in our latest CMX Design Element Gold. Read all about it in this article.
Reader Level:
I am sure you remember that the symbol for Gold, Au, comes from the Latin word "Aurum". No? You don't remember that? Well, then maybe you remember this: gold is one of the most valuable commodities in the world of commerce. And a good design is also one of the most valuable commodities on the Web. It catches your visitors' eyes and encourages them to stay and explore - and perhaps even to buy. There is almost no price tag for a great design, and fortunately you don't have to come up with one all by yourself. Gordon has done the creative work for you in our latest CMX Design Element Gold. Read all about it in this article.
Another CSS Picker in ASP.NET
Reader Level:
This article will show you an easy way to dynamically link to different CSS stylesheets based on practically any criteria you wish, for example, you can specify one stylesheet for IE users, another for FireFox users, and still another for all other browsers. This technique is particularly useful if your page renders differently in the various browsers and you need to make them consistent.
Reader Level:
This article will show you an easy way to dynamically link to different CSS stylesheets based on practically any criteria you wish, for example, you can specify one stylesheet for IE users, another for FireFox users, and still another for all other browsers. This technique is particularly useful if your page renders differently in the various browsers and you need to make them consistent.
Introducing CMX Design Element Krypton
Reader Level:
It's a bird! It's a plane! No, it's super design CMX Design Element Krypton!
Join me as I unveil the latest Gordon MacKay Fireworks design element. We'll look at what the package includes, what articles come bundled with it, and at some possible ways you might implement it as a Dreamweaver CSS-based layout.
Reader Level:
It's a bird! It's a plane! No, it's super design CMX Design Element Krypton!
Join me as I unveil the latest Gordon MacKay Fireworks design element. We'll look at what the package includes, what articles come bundled with it, and at some possible ways you might implement it as a Dreamweaver CSS-based layout.
Precisely Positioning div Tags in Your Page From Design View
Reader Level:
Not everybody likes working in code view, indeed I would guess that many folks purchase Dreamweaver just so they don't have to work in code view.
In this article we will look at how you can insert div tags into your code, precisely. We will do this from Dreamweaver's design view by making good use of the insert div tag function that can be found on the insert bar.
Reader Level:
Not everybody likes working in code view, indeed I would guess that many folks purchase Dreamweaver just so they don't have to work in code view.
In this article we will look at how you can insert div tags into your code, precisely. We will do this from Dreamweaver's design view by making good use of the insert div tag function that can be found on the insert bar.
Build a Dashboard Widget
Reader Level:
Widgets and the new Dashboard feature introduced some serious eye candy with the debut of Mac OS X 10.4 "Tiger" last year. But widgets can be seriously useful, too — not to mention great fun. This tutorial walks you through a fully functional CMX RSS feed reader widget created for Tiger. You'll see how it works...and how you can modify it to create your own Dashboard widget.
Approximate download size: 552k
Reader Level:
Widgets and the new Dashboard feature introduced some serious eye candy with the debut of Mac OS X 10.4 "Tiger" last year. But widgets can be seriously useful, too — not to mention great fun. This tutorial walks you through a fully functional CMX RSS feed reader widget created for Tiger. You'll see how it works...and how you can modify it to create your own Dashboard widget.
Approximate download size: 552k
Introducing CMX JumpStart Modifications
Reader Level:
With our growing repertoire of JumpStarts, there are now layouts to fit a wide range of design requirements. Still, sometimes a particular JumpStart is just what you are looking for - if only you could fix one or two little details. If only the navigation had been on the right instead of left. Or what if that left DIV had been floated rather than set to position absolute? And what if instead of a fixed-width, centered layout, the JumpStart had been fluid?
We often see such sentiments on the forums, and thought it might be helpful to respond with articles that show how to modify some of our existing JumpStarts to give you a wider variety of options without having to go in and code the tweaks yourself. Towards that end, we give you CMX JumpStart Playacar, Mexico.
Reader Level:
With our growing repertoire of JumpStarts, there are now layouts to fit a wide range of design requirements. Still, sometimes a particular JumpStart is just what you are looking for - if only you could fix one or two little details. If only the navigation had been on the right instead of left. Or what if that left DIV had been floated rather than set to position absolute? And what if instead of a fixed-width, centered layout, the JumpStart had been fluid?
We often see such sentiments on the forums, and thought it might be helpful to respond with articles that show how to modify some of our existing JumpStarts to give you a wider variety of options without having to go in and code the tweaks yourself. Towards that end, we give you CMX JumpStart Playacar, Mexico.
Using JumpStarts with Cartweaver, Featuring Minneapolis
Reader Level:
JumpStarts are great starting points for dynamic sites, and the Minneapolis JumpStart is a great starting point for a dynamic e-commerce site. Shopping carts like Cartweaver integrate well with Dreamweaver, but how do you integrate a third-party cart with a JumpStart? This tutorial, written by a member of the Cartweaver team and Community MX, shows one way of integrating the two.
Reader Level:
JumpStarts are great starting points for dynamic sites, and the Minneapolis JumpStart is a great starting point for a dynamic e-commerce site. Shopping carts like Cartweaver integrate well with Dreamweaver, but how do you integrate a third-party cart with a JumpStart? This tutorial, written by a member of the Cartweaver team and Community MX, shows one way of integrating the two.
Introducing CMX Jumpstart Minneapolis
Reader Level:
What city has the biggest shopping mall in America? What city has a full-sized theme park inside its mall? What city is one of the most popular destinations for shopping-based vacations in the United States? Why, Minneapolis, Minnesota, of course! Home to the Mall of America, tourists flock there to shop till they drop. But there is one bigger mall in America, and indeed the world, and that is the Mall of the World Wide Web. More and more people do their shopping there, and eCommerce is hotter than ever. When we were planning our next JumpStart, we decided to do something a little different, a little out of the ordinary. We decided to do an eCommerce template and call it CommunityMX JumpStart Minneapolis.
Designed and coded by Gordon Mackay, Minneapolis is a fluid, three-column design with hidden layers. The pages are constructed using valid XHTML 1.0 markup and formatted using valid CSS 2.1 styling. Minneapolis also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design.
Reader Level:
What city has the biggest shopping mall in America? What city has a full-sized theme park inside its mall? What city is one of the most popular destinations for shopping-based vacations in the United States? Why, Minneapolis, Minnesota, of course! Home to the Mall of America, tourists flock there to shop till they drop. But there is one bigger mall in America, and indeed the world, and that is the Mall of the World Wide Web. More and more people do their shopping there, and eCommerce is hotter than ever. When we were planning our next JumpStart, we decided to do something a little different, a little out of the ordinary. We decided to do an eCommerce template and call it CommunityMX JumpStart Minneapolis.
Designed and coded by Gordon Mackay, Minneapolis is a fluid, three-column design with hidden layers. The pages are constructed using valid XHTML 1.0 markup and formatted using valid CSS 2.1 styling. Minneapolis also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design.
CMX JumpStarts: Minneapolis
Reader Level:
When it comes to shopping, Minneapolis is tough to beat. Travel + Leisure magazine called Minneapolis the 4th best shopping destination in the country, behind only New York, San Francisco and Chicago. And when it comes to jumpstarting your web designs, Community MX is the best. Our newest JumpStart boasts a pretty neat eCommerce design. So naturally we named it Minneapolis, after the city with the largest shopping mall in the United States.
The future of shopping is online, right? The Minneapolis JumpStart, with its valid XHTML 1.0 and CSS 2.1 markup, adherence to WAI and Section 508 accessibility guidelines, provides you with a solid foundation for any kind of eCommerce site.
Note: The download for this JumpStart is very large, 73MB, due in large part to the Drawing on Nature tutorial listed above. This tutorial contains four video lessons, hence the large file size. If you would like to download this JumpStart with all the bundled tutorials except this one, there is a link at the end of the article that will allow you to do so.
If you are not a member of CMX and are buying this JumpStart and can not download a 73MB zipfile, please send an email to info@communitymx.com after your purchase and we will make arrangements for you to download it in 2 parts.
Reader Level:
When it comes to shopping, Minneapolis is tough to beat. Travel + Leisure magazine called Minneapolis the 4th best shopping destination in the country, behind only New York, San Francisco and Chicago. And when it comes to jumpstarting your web designs, Community MX is the best. Our newest JumpStart boasts a pretty neat eCommerce design. So naturally we named it Minneapolis, after the city with the largest shopping mall in the United States.
The future of shopping is online, right? The Minneapolis JumpStart, with its valid XHTML 1.0 and CSS 2.1 markup, adherence to WAI and Section 508 accessibility guidelines, provides you with a solid foundation for any kind of eCommerce site.
Note: The download for this JumpStart is very large, 73MB, due in large part to the Drawing on Nature tutorial listed above. This tutorial contains four video lessons, hence the large file size. If you would like to download this JumpStart with all the bundled tutorials except this one, there is a link at the end of the article that will allow you to do so.
If you are not a member of CMX and are buying this JumpStart and can not download a 73MB zipfile, please send an email to info@communitymx.com after your purchase and we will make arrangements for you to download it in 2 parts.
JumpStart Comparison Chart
Reader Level:
CMX JumpStarts are a quick and sure way to get your new site up and running fast. But how do you decide when there are so many great choices?
The JumpStart Comparison Chart lists all the JumpStarts available at Community MX. The QuickPick Feature table provides a thumbnail of the main JumpStart page, a short list of features and techniques demonstrated in JumpStart, the cost (always free to members), the layout, including the number of columns, and a link to full JumpStart description.
The full descriptions include everything from the QuickPick Feature table plus thumbnails of all pages, links to download the JumpStart and to related articles, the publish date and author(s), and the list of tutorials included with each JumpStart.
Since each of us absorb information different ways, please also check out The Complete JumpStart Catalog. It also describes each of the JumpStarts but in a much more conversational manner. It's especially valuable if you need more information about the features listed in the Comparison Chart.
Reader Level:
CMX JumpStarts are a quick and sure way to get your new site up and running fast. But how do you decide when there are so many great choices?
The JumpStart Comparison Chart lists all the JumpStarts available at Community MX. The QuickPick Feature table provides a thumbnail of the main JumpStart page, a short list of features and techniques demonstrated in JumpStart, the cost (always free to members), the layout, including the number of columns, and a link to full JumpStart description.
The full descriptions include everything from the QuickPick Feature table plus thumbnails of all pages, links to download the JumpStart and to related articles, the publish date and author(s), and the list of tutorials included with each JumpStart.
Since each of us absorb information different ways, please also check out The Complete JumpStart Catalog. It also describes each of the JumpStarts but in a much more conversational manner. It's especially valuable if you need more information about the features listed in the Comparison Chart.
CSS Cheat Sheet: Create CSS Rules
Reader Level:
Even seasoned CSS developers need a quick refresher course in CSS concepts and techniques from time to time. This CSS Cheat Sheet is designed for just that. Use it as a reference on topics that you've already learned about in-depth but need a few reminders on. If you're still a beginner to CSS, use it to learn the nuts and bolts of working with CSS, then use our other articles, listed at the end of this one, to extend your learning and practice your new skills.
This Cheat Sheet describes how to create CSS rules to be placed in your style sheets. It reviews the anatomy of a CSS rule and focuses on the different types of selectors available to you in styling your documents.
Reader Level:
Even seasoned CSS developers need a quick refresher course in CSS concepts and techniques from time to time. This CSS Cheat Sheet is designed for just that. Use it as a reference on topics that you've already learned about in-depth but need a few reminders on. If you're still a beginner to CSS, use it to learn the nuts and bolts of working with CSS, then use our other articles, listed at the end of this one, to extend your learning and practice your new skills.
This Cheat Sheet describes how to create CSS rules to be placed in your style sheets. It reviews the anatomy of a CSS rule and focuses on the different types of selectors available to you in styling your documents.
Creating Hyperlinks in Flash
Reader Level:
In this article, you'll learn how to create hyperlinks (in Flash Player 7 or higher) using HTML-formatted text fields and the TextArea component. You'll also learn how to format hyperlinks using styles loaded from an external CSS file. Finally, you'll learn how to use the built-in asfunction protocol to invoke a Flash function when the user clicks a hyperlink.
Reader Level:
In this article, you'll learn how to create hyperlinks (in Flash Player 7 or higher) using HTML-formatted text fields and the TextArea component. You'll also learn how to format hyperlinks using styles loaded from an external CSS file. Finally, you'll learn how to use the built-in asfunction protocol to invoke a Flash function when the user clicks a hyperlink.
Redesigning the Inverness JumpStart
Reader Level:
All JumpStarts boast flexibility and the Inverness Blog JumpStart is no exception. In this article you'll see how I reskinned the site with only minor modifications to the CSS and source PNG and NO changes to the original html file at all! A true reskinning operation. Check out how I changed the feel of the site: from cool Scottish Highlands to warm tropics at sunrise.
All my CSS changes are commented (the majority of which are simply color changes). The source PNG continues to use the original slice names (okay, I did add a couple of new slices). And the article takes you step by step through my changes.
Reader Level:
All JumpStarts boast flexibility and the Inverness Blog JumpStart is no exception. In this article you'll see how I reskinned the site with only minor modifications to the CSS and source PNG and NO changes to the original html file at all! A true reskinning operation. Check out how I changed the feel of the site: from cool Scottish Highlands to warm tropics at sunrise.
All my CSS changes are commented (the majority of which are simply color changes). The source PNG continues to use the original slice names (okay, I did add a couple of new slices). And the article takes you step by step through my changes.
Redesigning the Inverness JumpStart
Reader Level:
Our JumpStarts are designed to be easy to rebrand with your own unique look. To show you what it takes to create a unique design from a JumpStart, I've redesigned the Inverness JumpStart by modifying the PNG and changing a few lines of CSS.
Reader Level:
Our JumpStarts are designed to be easy to rebrand with your own unique look. To show you what it takes to create a unique design from a JumpStart, I've redesigned the Inverness JumpStart by modifying the PNG and changing a few lines of CSS.
Introducing CMX Jumpstart Inverness
Reader Level:
We are pleased to announce Community MX JumpStart Inverness, a design you can use to create your own Web blog. CMX JumpStart Inverness was designed and coded by new CMX partner Gordon Mackay. It is a centered, two-column, fixed-width design that makes use of background images to achieve its faux column appearance. The page is constructed using valid XHTML 1.0 Strict markup and formatted using valid CSS 2.1 styling. Inverness also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design. Read on to find out what the Inverness package includes and how you can make it your own.
Reader Level:
We are pleased to announce Community MX JumpStart Inverness, a design you can use to create your own Web blog. CMX JumpStart Inverness was designed and coded by new CMX partner Gordon Mackay. It is a centered, two-column, fixed-width design that makes use of background images to achieve its faux column appearance. The page is constructed using valid XHTML 1.0 Strict markup and formatted using valid CSS 2.1 styling. Inverness also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design. Read on to find out what the Inverness package includes and how you can make it your own.
The Complete JumpStart Catalog
Reader Level:
We now have a healthy portfolio of JumpStarts, and sometimes so much choice can be overwhelming. This article outlines the features of all the JumpStarts, offers guidance in choosing the right JumpStart for your project, and provides a complete catalog of our first thirteen JumpStarts.
Reader Level:
We now have a healthy portfolio of JumpStarts, and sometimes so much choice can be overwhelming. This article outlines the features of all the JumpStarts, offers guidance in choosing the right JumpStart for your project, and provides a complete catalog of our first thirteen JumpStarts.
Working with TopStyle - Part 5
Reader Level:
In Part 5 of this series we will look at the File List Panel in TopStyle. The File List Panel has the ability to load files of varying types into the panel view allowing us easy access and drag-and-drop functionality within our style sheet.
The Working with TopStyle Series
Working with TopStyle - Part 1
Working with TopStyle - Part 2
Working with TopStyle - Part 3
Working with TopStyle - Part 4
Working with TopStyle - Part 5
Reader Level:
In Part 5 of this series we will look at the File List Panel in TopStyle. The File List Panel has the ability to load files of varying types into the panel view allowing us easy access and drag-and-drop functionality within our style sheet.
The Working with TopStyle Series
Working with TopStyle - Part 1
Working with TopStyle - Part 2
Working with TopStyle - Part 3
Working with TopStyle - Part 4
Working with TopStyle - Part 5
A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 2
Reader Level:
In this final article in the series documenting the creation of my personal web site, you'll see how I used CSS to style the content of my XHTML page to match my design comp. This included styling a list to look like a navigation menu, formatting links and other text, and using sIFR to replace the text in my headings with beautiful Flash-generated text. You'll also see how I created a print style sheet, plus learn how I tested and debugged my page.
The CSS Web Design Case Study Series:
A CSS Web Design Case Study: Constructing a Personal Site - Planning
A CSS Web Design Case Study: Constructing a Personal Site - Visualizing the Design
CSS Web Design Case Study: Constructing a Personal Site - Design Comp Construction
A CSS Web Design Case Study: Constructing a Personal Site - Slicing the Comp
A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 1
A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 2
Reader Level:
In this final article in the series documenting the creation of my personal web site, you'll see how I used CSS to style the content of my XHTML page to match my design comp. This included styling a list to look like a navigation menu, formatting links and other text, and using sIFR to replace the text in my headings with beautiful Flash-generated text. You'll also see how I created a print style sheet, plus learn how I tested and debugged my page.
The CSS Web Design Case Study Series:
A CSS Web Design Case Study: Constructing a Personal Site - Planning
A CSS Web Design Case Study: Constructing a Personal Site - Visualizing the Design
CSS Web Design Case Study: Constructing a Personal Site - Design Comp Construction
A CSS Web Design Case Study: Constructing a Personal Site - Slicing the Comp
A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 1
A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 2
Introducing CMX JumpStart Cairo
Reader Level:
We are excited to announce CMX JumpStart Cairo, Egypt. It was designed and coded by Adrian Senior, and makes extensive use of lush gradients and glows. It is a centered, two-column, fixed-width design, and, like all CMX Jumpstarts, is constructed using valid XHTML 1.0 markup and CSS 2.1 styling. Cairo also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design. This article will introduce you to what Cairo includes in its bundle, as well as show you an example site created from its source PNG and CSS/XHTML files.
Reader Level:
We are excited to announce CMX JumpStart Cairo, Egypt. It was designed and coded by Adrian Senior, and makes extensive use of lush gradients and glows. It is a centered, two-column, fixed-width design, and, like all CMX Jumpstarts, is constructed using valid XHTML 1.0 markup and CSS 2.1 styling. Cairo also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design. This article will introduce you to what Cairo includes in its bundle, as well as show you an example site created from its source PNG and CSS/XHTML files.
CMX JumpStarts: Cairo
Reader Level:
Welcome to the CMX JumpStart — Cairo. Cairo is a fixed-width two-column layout that has been developed as a learning tool to show how you can use background images and work with gradients and glows to produce designs that are a little different from the run of the mill designs we see so many of on the Internet.
Reader Level:
Welcome to the CMX JumpStart — Cairo. Cairo is a fixed-width two-column layout that has been developed as a learning tool to show how you can use background images and work with gradients and glows to produce designs that are a little different from the run of the mill designs we see so many of on the Internet.
Working with TopStyle - Part 4
Reader Level:
Welcome to Part 4 of the working with TopStyle series; In this tutorial we will be looking at the Color Palette Editor and the Color Palette Toolbar.
We'll investigate and learn how we can manipulate the color values in our selectors, both from a global stand point and by property type.
The Working with TopStyle Series
Working with TopStyle - Part 1
Working with TopStyle - Part 2
Working with TopStyle - Part 3
Working with TopStyle - Part 4
Reader Level:
Welcome to Part 4 of the working with TopStyle series; In this tutorial we will be looking at the Color Palette Editor and the Color Palette Toolbar.
We'll investigate and learn how we can manipulate the color values in our selectors, both from a global stand point and by property type.
The Working with TopStyle Series
Working with TopStyle - Part 1
Working with TopStyle - Part 2
Working with TopStyle - Part 3
Working with TopStyle - Part 4
A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 1
Reader Level:
In the last article of this series documenting the construction of my personal site, you saw how I sliced my Fireworks design comp into individual graphics. These slices were tailored for a page built using semantic XHTML and clean CSS. In this article, you'll see how I built the structure for my site's home page using divs and semantic XHTML markup. Also, I'll show how I used CSS to lay out these divs into the visual structure I designed in my Fireworks comp.
The CSS Web Design Case Study Series:
A CSS Web Design Case Study: Constructing a Personal Site - Planning
A CSS Web Design Case Study: Constructing a Personal Site - Visualizing the Design
CSS Web Design Case Study: Constructing a Personal Site - Design Comp Construction
A CSS Web Design Case Study: Constructing a Personal Site - Slicing the Comp
A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 1
A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 2
Reader Level:
In the last article of this series documenting the construction of my personal site, you saw how I sliced my Fireworks design comp into individual graphics. These slices were tailored for a page built using semantic XHTML and clean CSS. In this article, you'll see how I built the structure for my site's home page using divs and semantic XHTML markup. Also, I'll show how I used CSS to lay out these divs into the visual structure I designed in my Fireworks comp.
The CSS Web Design Case Study Series:
A CSS Web Design Case Study: Constructing a Personal Site - Planning
A CSS Web Design Case Study: Constructing a Personal Site - Visualizing the Design
CSS Web Design Case Study: Constructing a Personal Site - Design Comp Construction
A CSS Web Design Case Study: Constructing a Personal Site - Slicing the Comp
A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 1
A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 2
CMX JumpStarts: Traverse City
Reader Level:
You can rest easy using this JumpStart inspired by the tranquil and beautiful Traverse City, Michigan. As do all our JumpStarts, Traverse City uses valid XHTML 1.0 and CSS 2.1 markup and follows WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design you may wish to use it for. Traverse City includes both a three-column home page layout and a two-column inner page layout, both fixed-width, which we've set up in a way that allows you to switch between the two in your own site with ease. Both layouts feature styled lists as navigation menus, and the inner page layout includes a styled data table.
The graphic and code techniques used to create Traverse City are explained fully in the nine tutorials that we've included in your download. We also include the four style sheets needed for this design (including an extensively commented one you can use for reference), the XHTML files for both the layouts, the source Fireworks PNG, and a Dreamweaver extension that allows you to create new pages based on Traverse City easily.
If you'd like a more detailed look at the Traverse City Jumpstart, as well as seeing a modified Traverse City design, check out Sheri German's CMX JumpStart Traverse City: An Introduction. Otherwise, click the link below to dive right into this JumpStart!
Reader Level:
You can rest easy using this JumpStart inspired by the tranquil and beautiful Traverse City, Michigan. As do all our JumpStarts, Traverse City uses valid XHTML 1.0 and CSS 2.1 markup and follows WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design you may wish to use it for. Traverse City includes both a three-column home page layout and a two-column inner page layout, both fixed-width, which we've set up in a way that allows you to switch between the two in your own site with ease. Both layouts feature styled lists as navigation menus, and the inner page layout includes a styled data table.
The graphic and code techniques used to create Traverse City are explained fully in the nine tutorials that we've included in your download. We also include the four style sheets needed for this design (including an extensively commented one you can use for reference), the XHTML files for both the layouts, the source Fireworks PNG, and a Dreamweaver extension that allows you to create new pages based on Traverse City easily.
If you'd like a more detailed look at the Traverse City Jumpstart, as well as seeing a modified Traverse City design, check out Sheri German's CMX JumpStart Traverse City: An Introduction. Otherwise, click the link below to dive right into this JumpStart!
Introducing CMX Jumpstart Traverse City
Reader Level:
Traverse City, Michigan is one of those hidden gems that tourists sometimes stumble across by lucky chance. With over 180 miles of Lake Michigan shoreline as well as a host of lakes and bays, beach lovers can enjoy lots of sailing and sunbathing.
Traverse City was designed by Linda Rathgeber-Stewart and coded by Zoe Gillenwater. It is a centered, fixed-width design with both a two-column and three-column page from which to choose. The two-column layout also includes a styled data table. The pages are constructed using valid XHTML 1.0 markup and formatted using valid CSS 2.1 styling. Traverse City also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design.
Reader Level:
Traverse City, Michigan is one of those hidden gems that tourists sometimes stumble across by lucky chance. With over 180 miles of Lake Michigan shoreline as well as a host of lakes and bays, beach lovers can enjoy lots of sailing and sunbathing.
Traverse City was designed by Linda Rathgeber-Stewart and coded by Zoe Gillenwater. It is a centered, fixed-width design with both a two-column and three-column page from which to choose. The two-column layout also includes a styled data table. The pages are constructed using valid XHTML 1.0 markup and formatted using valid CSS 2.1 styling. Traverse City also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design.
CSS Picker in ASP.NET
Reader Level:
The first time I came across a site that allowed you to select your own stylesheet, I was amazed at the stunning simplicity of the technique, and the powerful effect it could have on the user experience. Seeing as how ASP.NET is my server language of choice, I wanted to show how easy it was to implement this functionality in your very own site.
This article will show you how to create a CSS picker with ASP.NET using a Session variable and an HttpHandler. Code is presented in C# and you do not need a compiler to run the sample provided with the article.
Reader Level:
The first time I came across a site that allowed you to select your own stylesheet, I was amazed at the stunning simplicity of the technique, and the powerful effect it could have on the user experience. Seeing as how ASP.NET is my server language of choice, I wanted to show how easy it was to implement this functionality in your very own site.
This article will show you how to create a CSS picker with ASP.NET using a Session variable and an HttpHandler. Code is presented in C# and you do not need a compiler to run the sample provided with the article.
Making it Legal: Validating Your (X)HTML and CSS
Reader Level:
As a web designer, your goal is to create a page that works well and looks good across browsers and platforms. Validating your (X)HTML and CSS is one way to achieve this goal. Validation catches the silly mistakes and typos that everyone makes in their pages, so it's an important first step in creating a great web page — but remember, it's only a step. Validation is not the end goal itself. Learn why validation is important but not the holy grail of web design, then learn how to use and understand the W3C validators.
Reader Level:
As a web designer, your goal is to create a page that works well and looks good across browsers and platforms. Validating your (X)HTML and CSS is one way to achieve this goal. Validation catches the silly mistakes and typos that everyone makes in their pages, so it's an important first step in creating a great web page — but remember, it's only a step. Validation is not the end goal itself. Learn why validation is important but not the holy grail of web design, then learn how to use and understand the W3C validators.
Teaching Dreamweaver the Web Standards Way
Reader Level:
I have been teaching Dreamweaver in various training venues since version 2. Each new upgrade adds more features and makes my job more complex. How does a teacher help beginners make sense of an increasingly overwhelming interface that includes seemingly endless choices? My syllabus has changed a lot over the years, and this is what I have learned: pare the syllabus to the absolute essentials. Subtract, do not add. Aim for elegant simplicity. Focus on Web Standards. This article gives teachers a syllabus they can use to help their beginning students learn Dreamweaver within the framework of Web Standards.
Reader Level:
I have been teaching Dreamweaver in various training venues since version 2. Each new upgrade adds more features and makes my job more complex. How does a teacher help beginners make sense of an increasingly overwhelming interface that includes seemingly endless choices? My syllabus has changed a lot over the years, and this is what I have learned: pare the syllabus to the absolute essentials. Subtract, do not add. Aim for elegant simplicity. Focus on Web Standards. This article gives teachers a syllabus they can use to help their beginning students learn Dreamweaver within the framework of Web Standards.
An Introduction to MOSe
Reader Level:
The term MOSe means Mozilla, Opera and Safari enhancement. In this article we will explore some practical ways in which you can spice up your CSS designs for users equipped with up to date browsing software.
Due to the lack of modern CSS support in some browsers, many developers and designers find themselves in the rut of only using code that they know works for the masses. However, if we take advantage of modern CSS syntax and proprieatary code we can enhance aethetics beyond the norm for users with standards compliant browser software without sacrificing the experience for users equipped with older browsers.
Let's have a look at some commonly used design elements and see how we can add some more flavour to them.
Reader Level:
The term MOSe means Mozilla, Opera and Safari enhancement. In this article we will explore some practical ways in which you can spice up your CSS designs for users equipped with up to date browsing software.
Due to the lack of modern CSS support in some browsers, many developers and designers find themselves in the rut of only using code that they know works for the masses. However, if we take advantage of modern CSS syntax and proprieatary code we can enhance aethetics beyond the norm for users with standards compliant browser software without sacrificing the experience for users equipped with older browsers.
Let's have a look at some commonly used design elements and see how we can add some more flavour to them.
Introducing CMX Jumpstart Machu Picchu
Reader Level:
Reader Level:
Machu Picchu, Peru: a rediscovered ruin, a sacred ceremonial city of the Incas, a place of ethereal beauty, and now also a Community MX JumpStart. CMX JumpStart Machu Picchu, designed and coded by Adrian Senior, was built specifically to take advantage of the new Style Rendering Toolbar in Dreamweaver 8. It includes style sheets for the screen, print and handheld media types.
Read on to learn more about this centered, two-columnm, fixed-width, Web Standards compliant CSS layout.
CMX Jumpstart: Machu Picchu
Reader Level:
Welcome to our latest CMX JumpStart offering; Machu Picchu.
Machu Picchu has been developed to be accessible to screen, print and handheld devices. Handheld devices are still very much a gray area in our content delivery for web pages. PDAs and more modern phones can do a very good job of rendering web pages and with a little tweaking can provide us with access to very usable and good looking web sites.
Similarly a print style sheet, when correctly set, can give our users access to printed content that can be digested at their leisure. Web pages that don't print correctly can be very annoying and detract from the site's value. It is these two media types that we will be focusing on along with screen media in Machu Picchu. The aim is to provide content of a high quality to screen, handheld and print medias.
Reader Level:
Welcome to our latest CMX JumpStart offering; Machu Picchu.
Machu Picchu has been developed to be accessible to screen, print and handheld devices. Handheld devices are still very much a gray area in our content delivery for web pages. PDAs and more modern phones can do a very good job of rendering web pages and with a little tweaking can provide us with access to very usable and good looking web sites.
Similarly a print style sheet, when correctly set, can give our users access to printed content that can be digested at their leisure. Web pages that don't print correctly can be very annoying and detract from the site's value. It is these two media types that we will be focusing on along with screen media in Machu Picchu. The aim is to provide content of a high quality to screen, handheld and print medias.
Accessibility and the Label Tag
Reader Level:
In this tutorial we will look at how we can build and lay out accessible forms. In particular we will focus on the label element and we will see how the label can be used to not only increase the focus area of any form element but at the same time be utilised to give our form layouts a little more structure than a simple stacking of form elements in a single column.
Reader Level:
In this tutorial we will look at how we can build and lay out accessible forms. In particular we will focus on the label element and we will see how the label can be used to not only increase the focus area of any form element but at the same time be utilised to give our form layouts a little more structure than a simple stacking of form elements in a single column.
The CSS Styles Panel in Dreamweaver 8: A Sneak Peek
Reader Level:
One of the great new CSS tools in Dreamweaver 8 is the new, unified CSS Styles panel. All style information for all the elements on your pages is stored in this one central location. As with previous versions of Dreamweaver, you can use the panel to create, view, edit and remove style rules, as well as attach style sheets. Now, however, properties are laid out in a grid for easy editing, and the cascade for all your rules is displayed for you, to help you understand how each rule is affecting your page. You can select any element on your page and instantly see what rules are affecting it and what properties have been set for it. The CSS Styles panel provides the ease of use for those new to CSS, with a depth of information that advanced CSS users will appreciate.
Reader Level:
One of the great new CSS tools in Dreamweaver 8 is the new, unified CSS Styles panel. All style information for all the elements on your pages is stored in this one central location. As with previous versions of Dreamweaver, you can use the panel to create, view, edit and remove style rules, as well as attach style sheets. Now, however, properties are laid out in a grid for easy editing, and the cascade for all your rules is displayed for you, to help you understand how each rule is affecting your page. You can select any element on your page and instantly see what rules are affecting it and what properties have been set for it. The CSS Styles panel provides the ease of use for those new to CSS, with a depth of information that advanced CSS users will appreciate.
Getting Rid of the Page Shift
Reader Level:
If you've built a centered, fixed-width site, or just browsed through any sites with such layouts, you may have noticed a strange left to right shift in the content between pages that doesn't occur in Internet Explorer, but does in other browsers, such as Firefox, Opera, and Safari. Find out why it happens and what to include in your style sheet to prevent it on your own site, as well as how to customize your browser so that you never see the shift again on any site across the web!
Reader Level:
If you've built a centered, fixed-width site, or just browsed through any sites with such layouts, you may have noticed a strange left to right shift in the content between pages that doesn't occur in Internet Explorer, but does in other browsers, such as Firefox, Opera, and Safari. Find out why it happens and what to include in your style sheet to prevent it on your own site, as well as how to customize your browser so that you never see the shift again on any site across the web!
Redesigning the Vienna JumpStart
Reader Level:
Vienna isn't famous just for composers. It's well known throughout Europe for its coffee houses. This variation on the Vienna Jumpstart attempts to capture the ambiance of Viennese coffee houses. Bonus: an authentic Austrian Strusel recipe. :-)
Reader Level:
Vienna isn't famous just for composers. It's well known throughout Europe for its coffee houses. This variation on the Vienna Jumpstart attempts to capture the ambiance of Viennese coffee houses. Bonus: an authentic Austrian Strusel recipe. :-)
Reconstructing Vienna: The Markup
Reader Level:
Upon releasing a JumpStart, we occasionally hear requests for a step-by-step reconstruction of how it was done. Sure, it's nice to have a great template that allows you to quickly whip up an accessible and valid site for clients. It's also nice to have all those great bundled articles that — face it — most of us never have time to read. The extensively commented CSS is also wonderful, but some of that detail can seem daunting. Wouldn't it be nice to have someone hold your hand as you get initiated into the magic of CSS layouts so you can really understand how it's done?
If this sounds like something you'd like to participate in, get ready for a two-part series that lets you recreate Vienna from start to finish. Today's article will teach you to plan your structure and write your markup. Part two, which will appear tomorrow, will help you penetrate the mysteries of its CSS documents, both print and screen.
Note: You will need to download CMX Jumpstart Vienna in order to follow along with this tutorial.
If you're ready, let's first ascend to "Wrapper Heaven."
Reader Level:
Upon releasing a JumpStart, we occasionally hear requests for a step-by-step reconstruction of how it was done. Sure, it's nice to have a great template that allows you to quickly whip up an accessible and valid site for clients. It's also nice to have all those great bundled articles that — face it — most of us never have time to read. The extensively commented CSS is also wonderful, but some of that detail can seem daunting. Wouldn't it be nice to have someone hold your hand as you get initiated into the magic of CSS layouts so you can really understand how it's done?
If this sounds like something you'd like to participate in, get ready for a two-part series that lets you recreate Vienna from start to finish. Today's article will teach you to plan your structure and write your markup. Part two, which will appear tomorrow, will help you penetrate the mysteries of its CSS documents, both print and screen.
Note: You will need to download CMX Jumpstart Vienna in order to follow along with this tutorial.
If you're ready, let's first ascend to "Wrapper Heaven."
Introducing JumpStart Vienna
Reader Level:
It wouldn't be much of a stretch to call Vienna the cultural capital of Europe. With its long history as the home to such cultural icons as Franz Schubert and Johann Strauss, as well as the numerous museums and its world-famous opera house, Vienna has long been known as a city where culture and sophistication are the norm. It's no wonder then that for our latest JumpStart design we turned to our own cultural maven—Sheri German—for the creation of a design that is as stylish as the city it is named after.
In addition to the use of valid XHTML 1.0 and CSS 2.1, and validating for 508 and WAI, we have a number of special features in Vienna. The three-column layout has two outer columns with fixed widths, a fluid center column for content, and a very cool fluid header and footer. The two-column layout has a fixed-width left column and fluid right column. There are also unordered lists for navigation: one for the main navigation, one for the sub navigation, and one for the footer navigation. We have also added a search field, and if your server provides PHP and MySQL, you can follow Sheri's bundled article Creating a Search Engine with iSearch to make a working search engine for your site. So far, reasonably cool, right? But hold on. We have something far more exciting to reveal with this JumpStart. We will introduce a new and revolutionary technique called Jello Mold. As with all our JumpStarts, Vienna was tested extensively in all major browsers. You can view the screenshots here
Reader Level:
It wouldn't be much of a stretch to call Vienna the cultural capital of Europe. With its long history as the home to such cultural icons as Franz Schubert and Johann Strauss, as well as the numerous museums and its world-famous opera house, Vienna has long been known as a city where culture and sophistication are the norm. It's no wonder then that for our latest JumpStart design we turned to our own cultural maven—Sheri German—for the creation of a design that is as stylish as the city it is named after.
In addition to the use of valid XHTML 1.0 and CSS 2.1, and validating for 508 and WAI, we have a number of special features in Vienna. The three-column layout has two outer columns with fixed widths, a fluid center column for content, and a very cool fluid header and footer. The two-column layout has a fixed-width left column and fluid right column. There are also unordered lists for navigation: one for the main navigation, one for the sub navigation, and one for the footer navigation. We have also added a search field, and if your server provides PHP and MySQL, you can follow Sheri's bundled article Creating a Search Engine with iSearch to make a working search engine for your site. So far, reasonably cool, right? But hold on. We have something far more exciting to reveal with this JumpStart. We will introduce a new and revolutionary technique called Jello Mold. As with all our JumpStarts, Vienna was tested extensively in all major browsers. You can view the screenshots here
CMX JumpStart: Vienna
Reader Level:
Last summer we took a trip to Germany and Austria with our son's orchestra director. My favorite city was Vienna, Austria. So it is only natural that I should choose Vienna for my city as I "change hats" from JumpStarts marketer to JumpStarts creator. I am particularly pleased and excited to offer our latest CMX JumpStart: Vienna.
In addition to the use of valid XHTML 1.0 and CSS 2.1, and in addition to validating for 508 and WAI, we have a number of special features in Vienna. This three column layout has two outer columns with fixed widths, a fluid center column for content, and fluid header and footer. There are also unordered lists for navigation: one for the main navigation, one for the sub navigation, and one for the footer navigation. We have also added a search field into an area that is at the top of the page outside the main centered layout. So far, reasonably cool, right?
But hold on. We have something far more exciting to reveal with this JumpStart. We will introduce a new and revolutionary technique called Jello Mold that has an implied minimum and maximum width that works in Internet Explorer without the use of Javascript! Furthermore, this technique allows for fluid margins on the fluid centered layout that depend on the size of the user's window.
The download folder for this article includes a bundle of 11 articles (including two about Jello Mold technique), a starter page, an images folder, four style sheets (including design-time and print), a source png, the Vienna extension, an installation and usage guide, and this article as a PDF.
Reader Level:
Last summer we took a trip to Germany and Austria with our son's orchestra director. My favorite city was Vienna, Austria. So it is only natural that I should choose Vienna for my city as I "change hats" from JumpStarts marketer to JumpStarts creator. I am particularly pleased and excited to offer our latest CMX JumpStart: Vienna.
In addition to the use of valid XHTML 1.0 and CSS 2.1, and in addition to validating for 508 and WAI, we have a number of special features in Vienna. This three column layout has two outer columns with fixed widths, a fluid center column for content, and fluid header and footer. There are also unordered lists for navigation: one for the main navigation, one for the sub navigation, and one for the footer navigation. We have also added a search field into an area that is at the top of the page outside the main centered layout. So far, reasonably cool, right?
But hold on. We have something far more exciting to reveal with this JumpStart. We will introduce a new and revolutionary technique called Jello Mold that has an implied minimum and maximum width that works in Internet Explorer without the use of Javascript! Furthermore, this technique allows for fluid margins on the fluid centered layout that depend on the size of the user's window.
The download folder for this article includes a bundle of 11 articles (including two about Jello Mold technique), a starter page, an images folder, four style sheets (including design-time and print), a source png, the Vienna extension, an installation and usage guide, and this article as a PDF.
Using CSS with Flash MX 2004 UI Components
Reader Level:
Most Flash designers and developers use CSS in Flash movies to control the styling of text within Flash dynamic textfields. You can also use CSS to style just about anything else in Flash movies, including UI components. In this tutorial, you learn how to create a simple stylesheet that controls the look of a ComboBox component.
Reader Level:
Most Flash designers and developers use CSS in Flash movies to control the styling of text within Flash dynamic textfields. You can also use CSS to style just about anything else in Flash movies, including UI components. In this tutorial, you learn how to create a simple stylesheet that controls the look of a ComboBox component.
Introducing Jumpstart Vegas
Reader Level:
We proudly introduce CMX JumpStart Vegas, designed by Fireworks expert Linda Rathgeber, and coded by CSS guru Stephanie Sullivan. Vegas includes a Flash slideshow, FlashObjects JavaScript for accessibility, sIFR for using custom fonts on your pages, a form with an often requested complex layout, and a golden design that does justice to the town that never sleeps. It's all there, ready for you to adapt it for your own sites.
Reader Level:
We proudly introduce CMX JumpStart Vegas, designed by Fireworks expert Linda Rathgeber, and coded by CSS guru Stephanie Sullivan. Vegas includes a Flash slideshow, FlashObjects JavaScript for accessibility, sIFR for using custom fonts on your pages, a form with an often requested complex layout, and a golden design that does justice to the town that never sleeps. It's all there, ready for you to adapt it for your own sites.
CMX JumpStart: Vegas
Reader Level:
Las Vegas, entertainment capital of the world, inspired this exciting JumpStart design. As with all the JumpStarts, you can use and modify the design in any way you see fit, for commercial work or otherwise.
Two pages, a home page and contact page, are included in this JumpStart. Both pages feature a fixed width, centered design using a faux column technique. The home page includes a customizable Flash Slideshow component that includes a demonstration of images loaded using an XML file. This JumpStart features the cutting edge and accessible sIFR technique. sIFR allows you to use any font currently on your computer to create your headings. The contact page features a styled form using fieldset and legend. The pages are constructed using valid XHTML 1.0 markup and formatted using valid CSS 2 styling. We provide an extensively commented style sheet so you know what each piece does and how to change it to suit your design. Vegas also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for your work and give your users the best experience possible.
We've included the PNG file used to create the layout so you can adapt it with your own look and colors. It features masks that allow you to easily replace our graphics with your own, enabling you to adapt this design for any number of uses or clients. It includes the CMX Flash Slideshow component and the graphic and code techniques used to create Vegas are explained fully in the 13 tutorials that we've included in your download. Those techniques that are not covered in the bundle are explained here, providing you with not only a robust template, but a learning tool giving you insite into the web design process as well.
If you'd like a more detailed look at the Vegas Jumpstart, as well as seeing a modified Vegas design, check out Sheri German's CMX JumpStart Vegas: An Introduction.
Reader Level:
Las Vegas, entertainment capital of the world, inspired this exciting JumpStart design. As with all the JumpStarts, you can use and modify the design in any way you see fit, for commercial work or otherwise.
Two pages, a home page and contact page, are included in this JumpStart. Both pages feature a fixed width, centered design using a faux column technique. The home page includes a customizable Flash Slideshow component that includes a demonstration of images loaded using an XML file. This JumpStart features the cutting edge and accessible sIFR technique. sIFR allows you to use any font currently on your computer to create your headings. The contact page features a styled form using fieldset and legend. The pages are constructed using valid XHTML 1.0 markup and formatted using valid CSS 2 styling. We provide an extensively commented style sheet so you know what each piece does and how to change it to suit your design. Vegas also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for your work and give your users the best experience possible.
We've included the PNG file used to create the layout so you can adapt it with your own look and colors. It features masks that allow you to easily replace our graphics with your own, enabling you to adapt this design for any number of uses or clients. It includes the CMX Flash Slideshow component and the graphic and code techniques used to create Vegas are explained fully in the 13 tutorials that we've included in your download. Those techniques that are not covered in the bundle are explained here, providing you with not only a robust template, but a learning tool giving you insite into the web design process as well.
If you'd like a more detailed look at the Vegas Jumpstart, as well as seeing a modified Vegas design, check out Sheri German's CMX JumpStart Vegas: An Introduction.
Dynamic CSS - Challenging Traditions
Reader Level:
CSS has revolutionized the way that we design and build web sites. By combining CSS with other web technologies though we now have the right set of tools to begin to make user experiences on our sites truely personalized and unique. In this article we'll start to explore those possibilities and see how dynamic CSS can be used to add a whole new dimension to site designs and experiences.
The Dynamic CSS Series:
Dynamic CSS - Challenging Traditions
Dynamic CSS - Basic Real-Time Style Manipulation
Dynamic CSS - Real-Time Rule Changes
Dynamic CSS - CSS and the DOM
Reader Level:
CSS has revolutionized the way that we design and build web sites. By combining CSS with other web technologies though we now have the right set of tools to begin to make user experiences on our sites truely personalized and unique. In this article we'll start to explore those possibilities and see how dynamic CSS can be used to add a whole new dimension to site designs and experiences.
The Dynamic CSS Series:
Dynamic CSS - Challenging Traditions
Dynamic CSS - Basic Real-Time Style Manipulation
Dynamic CSS - Real-Time Rule Changes
Dynamic CSS - CSS and the DOM
CMX JumpStarts: New Orleans
Reader Level:
The New Orleans JumpStart has been designed with the Umoja String Quartet and their jazzy feel at the center. Two pages, a home page and contact page, are included in this JumpStart. Both pages feature a fixed width, centered design with a scrollable content area. The home page includes a customizable MP3 player built in Flash that includes music from from two Umoja String Quartet CDs: "Songs of Our Fathers" and "Things Ain't What They Used To Be."
The pages are constructed using valid XHTML 1.0 markup and formatted using valid CSS 2.1 styling. We provide an extensively commented style sheet so you know what each piece does and how to change it to suit your design, as well as another version of the style sheet with the comments stripped out so you don't have to cut out all those extra kilobytes by hand when you're ready to go live! New Orleans also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for your work.
Beyond just the pages, we've also included all the source files used to create both of the layouts, both PNG and Flash. All layers in the PNG file are organized and labeled so that it's easy to make any modifications you need.
The graphic and code techniques used to create New Orleans are explained fully in the 14 tutorials that we've included in your download. Those techniques that are not covered in the bundled tutorials are explained in this article.
If you'd like a more detailed look at the New Orleans Jumpstart, as well as seeing a modified New Orleans design, check out Sheri German's CMX JumpStart New Orleans: An Introduction.
Reader Level:
The New Orleans JumpStart has been designed with the Umoja String Quartet and their jazzy feel at the center. Two pages, a home page and contact page, are included in this JumpStart. Both pages feature a fixed width, centered design with a scrollable content area. The home page includes a customizable MP3 player built in Flash that includes music from from two Umoja String Quartet CDs: "Songs of Our Fathers" and "Things Ain't What They Used To Be."
The pages are constructed using valid XHTML 1.0 markup and formatted using valid CSS 2.1 styling. We provide an extensively commented style sheet so you know what each piece does and how to change it to suit your design, as well as another version of the style sheet with the comments stripped out so you don't have to cut out all those extra kilobytes by hand when you're ready to go live! New Orleans also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for your work.
Beyond just the pages, we've also included all the source files used to create both of the layouts, both PNG and Flash. All layers in the PNG file are organized and labeled so that it's easy to make any modifications you need.
The graphic and code techniques used to create New Orleans are explained fully in the 14 tutorials that we've included in your download. Those techniques that are not covered in the bundled tutorials are explained in this article.
If you'd like a more detailed look at the New Orleans Jumpstart, as well as seeing a modified New Orleans design, check out Sheri German's CMX JumpStart New Orleans: An Introduction.
Introducing CMX Jumpstart New Orleans
Reader Level:
The suspense has been building around the release of our next JumpStart, and now it's here: Jazzy JumpStart New Orleans, a hybrid CSS/Flash layout that should appeal to anyone needing to build a music site. Its inspiration is derived from two sources: the sites of Sony artists such as Vladimir Horowitz, Joshua Bell, Louis Armstrong, and The Isley Brothers where Flash and frames combine, and content scrolls in a fixed-area; and the recent acquisition of our own "CMX artist" the jazzy, bluesy Umoja String Quartet, whose site will be hosted on Community MX in the upcoming weeks.
Read on to find out more about this feature-rich JumpStart that includes an MP3 Player that uses wmode, FlashObject for accessibility, scrolling content, functional forms, and a fully editable source PNG.
Reader Level:
The suspense has been building around the release of our next JumpStart, and now it's here: Jazzy JumpStart New Orleans, a hybrid CSS/Flash layout that should appeal to anyone needing to build a music site. Its inspiration is derived from two sources: the sites of Sony artists such as Vladimir Horowitz, Joshua Bell, Louis Armstrong, and The Isley Brothers where Flash and frames combine, and content scrolls in a fixed-area; and the recent acquisition of our own "CMX artist" the jazzy, bluesy Umoja String Quartet, whose site will be hosted on Community MX in the upcoming weeks.
Read on to find out more about this feature-rich JumpStart that includes an MP3 Player that uses wmode, FlashObject for accessibility, scrolling content, functional forms, and a fully editable source PNG.
CMX JumpStarts: Venice
Reader Level:
Venice, the city of canals, inspired this romantic JumpStart design. As with all the JumpStarts, you can use and modify the design in any way you see fit, for commercial work or otherwise.
Venice includes a three-column home page design as well as a two-column form page. Both layouts feature fixed-width, equal-height columns with rounded corners. Techniques used in the layout include floats, absolute positioning, list styling, and backgroung image tiling. The pages are constructed using valid XHTML 1.0 markup and formatted using valid CSS 2.1 styling. Venice also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design you may wish to use it for. Both designs have been extensively tested on a wide range of platforms and browsers to ensure maximum cross-browser compatibility.
In addition to the extensively commented XHTML and CSS files, Venice comes with the PNG file used to create both of the layouts. It features masks that allow you to easily replace our graphics with your own, enabling you to adapt this design for any number of uses or clients. You'll learn how to organize a single Fireworks file into a comp for multiple pages.
To help you master the techniques used to design and construct the files, Venice comes bundled with the following tutorials:
Reader Level:
Venice, the city of canals, inspired this romantic JumpStart design. As with all the JumpStarts, you can use and modify the design in any way you see fit, for commercial work or otherwise.
Venice includes a three-column home page design as well as a two-column form page. Both layouts feature fixed-width, equal-height columns with rounded corners. Techniques used in the layout include floats, absolute positioning, list styling, and backgroung image tiling. The pages are constructed using valid XHTML 1.0 markup and formatted using valid CSS 2.1 styling. Venice also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design you may wish to use it for. Both designs have been extensively tested on a wide range of platforms and browsers to ensure maximum cross-browser compatibility.
In addition to the extensively commented XHTML and CSS files, Venice comes with the PNG file used to create both of the layouts. It features masks that allow you to easily replace our graphics with your own, enabling you to adapt this design for any number of uses or clients. You'll learn how to organize a single Fireworks file into a comp for multiple pages.
To help you master the techniques used to design and construct the files, Venice comes bundled with the following tutorials:
- Using Masks in Fireworks MX by Jim Babbage
- Do You Want To Do That With CSS? — Centering a Wrapper by John Gallant and Holly Bergevin
- Flowing and Positioning: Two Page Models by John Gallant and Holly Bergevin
- Float The Theory by John Gallant and Holly Bergevin
- CSS An Introduction Part Two: Background Images by Adrian Senior
- Recreating Macromedia's Layout by Zoe Gillenwater
- Styling CSS Buttons (Part 2) by Stephanie Sullivan
- Styling Forms: Fieldset and Legend by Stephanie Sullivan
- Using Classes and IDs Effectively by Zoe Gillenwater
- Do You Want To Do That With CSS? — Align Elements Left and Right by John Gallant and Holly Bergevin
Each bundled tutorial explains how to complete the tasks that were undertaken to create the layout. Those techniques that are not covered in the bundle are explained here, providing you with not only a robust template, but a learning tool into the web design process as well.
If you'd like a more detailed look at the Venice Jumpstart, as well as seeing a modified Venice design, check out Sheri German's CMX JumpStart Venice: An Introduction.
JumpStart Venice: An Introduction
Reader Level:
Reader Level:
Valentine's Day is one of my favorite holidays of the year. It's fanciful and lighthearted, and I don't feel the pressure of the big holidays like Christmas or Easter. I can daydream about a romantic rendezvous, such as a gondola journey through the canals of Venice on a moonlit night. Though I can't make that a reality, I can pretend while exploring the latest CMX JumpStart.
CMX is proud to announce its sixth JumpStart, Venice, which includes both two and three column, fixed-width, rounded corner layouts in its home and form pages. Like all CMX JumpStarts, it is based on Web standards with valid CSS2 and XHTML 1.0 Transitional markup, and it passes WAI and 508 accessibility checkpoints. We've created a video to give you an overview of the design and functionality of Venice.
CMX JumpStart: Liverpool
Reader Level:
The Liverpool JumpStart is a little different than what has gone before. It includes a dynamic ColdFusion login application built with Dreamweaver's User Authentication server behaviours. This allows you to quickly and easily edit the login if you need to do so. The login also supports dual access levels and provides default pages for each level to view, along with a logout page to kill the sessions when your users have completed whatever it was they logged in to do.
Also included are login application pages for .NET, PHP and ASP server models.
This JumpsStart contains 12 tutorials, including video lessons on creating a relational database in Access, using Dreamweaver's User Authentication server behavoiurs and setting a datasource via the ColdFusion administrator.
If you prefer not to use server side code, within the download files you will find a static version of the Liverpool JumpStart.
If you'd like a more detailed description of Liverpool, including screenshots, check out the free article Announcing a New CMX JumpStart: Liverpool.
Reader Level:
The Liverpool JumpStart is a little different than what has gone before. It includes a dynamic ColdFusion login application built with Dreamweaver's User Authentication server behaviours. This allows you to quickly and easily edit the login if you need to do so. The login also supports dual access levels and provides default pages for each level to view, along with a logout page to kill the sessions when your users have completed whatever it was they logged in to do.
Also included are login application pages for .NET, PHP and ASP server models.
This JumpsStart contains 12 tutorials, including video lessons on creating a relational database in Access, using Dreamweaver's User Authentication server behavoiurs and setting a datasource via the ColdFusion administrator.
If you prefer not to use server side code, within the download files you will find a static version of the Liverpool JumpStart.
If you'd like a more detailed description of Liverpool, including screenshots, check out the free article Announcing a New CMX JumpStart: Liverpool.
Announcing CMX JumpStart: Liverpool
Reader Level:
It was the early sixties, and all the world was in a frenzy over a new group from Liverpool, England called The Beatles. They revolutionized rock 'n' roll music, and the world has never been the same. Maybe the Web Standards movement doesn't stir quite that much excitement, but it is changing the Web world all the same. And because we "love you, yeah, yeah, yeah" we're here to help you join the revolution.
Community MX is pleased to announce the release of its fifth CMX JumpStart: Liverpool. This time we're giving you more than a CSS layout, however. We're also giving you a dynamic ColdFusion login application built with Dreamweaver's User Authentication server behaviors that will allow you to quickly and easily edit the login.
This article will tell you all about what this fantastic package includes--bundled tutorials, an authentication system, a two-column, fixed width layout (with a little bit of a twist), original PNG files, and more.
Reader Level:
It was the early sixties, and all the world was in a frenzy over a new group from Liverpool, England called The Beatles. They revolutionized rock 'n' roll music, and the world has never been the same. Maybe the Web Standards movement doesn't stir quite that much excitement, but it is changing the Web world all the same. And because we "love you, yeah, yeah, yeah" we're here to help you join the revolution.
Community MX is pleased to announce the release of its fifth CMX JumpStart: Liverpool. This time we're giving you more than a CSS layout, however. We're also giving you a dynamic ColdFusion login application built with Dreamweaver's User Authentication server behaviors that will allow you to quickly and easily edit the login.
This article will tell you all about what this fantastic package includes--bundled tutorials, an authentication system, a two-column, fixed width layout (with a little bit of a twist), original PNG files, and more.
CMX JumpStarts: Aspen
Reader Level:
Community MX is pleased to announce the release of the latest CMX JumpStarts designs, Aspen. As with all the JumpStarts, you can use and modify the design in any way you see fit, for commercial work or otherwise.
Aspen is a three column liquid-width design that includes floats, fixed and absolute positioning, background positioning, styled lists, a base page and a form page, plus all the PNG files used to create the graphics for the pages. Both pages meet the specifications of XHTML 1.0 Transitional and CSS 2. Aspen also follows the accessibility guidelines for WAI and 508 to provide you with a solid foundation for any design you may wish to use it for.
In addition to the extensively commented XHTML and CSS files, Aspen comes bundled with the following tutorials:
Reader Level:
Community MX is pleased to announce the release of the latest CMX JumpStarts designs, Aspen. As with all the JumpStarts, you can use and modify the design in any way you see fit, for commercial work or otherwise.
Aspen is a three column liquid-width design that includes floats, fixed and absolute positioning, background positioning, styled lists, a base page and a form page, plus all the PNG files used to create the graphics for the pages. Both pages meet the specifications of XHTML 1.0 Transitional and CSS 2. Aspen also follows the accessibility guidelines for WAI and 508 to provide you with a solid foundation for any design you may wish to use it for.
In addition to the extensively commented XHTML and CSS files, Aspen comes bundled with the following tutorials:
- The Theory of CSS Column Design: Source Order by John Gallant and Holly Bergevin
- Clearing Floats, the Easy Way by John Gallant and Holly Bergevin
- Creating Liquid Faux Columns by Zoe Gillenwater
- Styling CSS Buttons (Part 2) by Stephanie Sullivan
- Styling Forms: Fieldset and Legend by Stephanie Sullivan
- Custom Gradients in Fireworks MX by Kim Cavanaugh
- Understanding the Pen Tool by Kim Cavanaugh (video)
- Using Masks in Fireworks MX by Jim Babbage
- CMX Design-time Extension by Paul Boon
Each bundled tutorial explains how to complete the tasks that were undertaken to create the layout. Those techniques that are not covered in the bundle are explained here, providing you with not only a robust template, but a learning tool into the web design process as well.
If you'd like a more detailed description of Aspen, including screenshots, check out the free article Announcing a New CMX JumpStart: Aspen.
Announcing CMX JumpStart: Aspen
Reader Level:
Aspen Mountain, packed powder, light snow falling and you've just ascended by lift to the top. If you're a beginner, forget it. You shouldn't have. How will you make it down alive to sit by that fire to sip a hot toddy?
But wait. CMX, your expert guide, has negotiated all the slick turns and steep curves. We know you have been waiting for a three column liquid layout, and for our CMX holiday celebration, here it is: JumpStart Aspen.
With a three column liquid-width layout, a base page, and a form page, Aspen employs valid CSS2 and XHTML 1.0 Transitional markup and passes WAI and 508 accessibility checkpoints. Aspen has been tested in numerous browsers. Read on to find out what the bundled package includes.
Reader Level:
Aspen Mountain, packed powder, light snow falling and you've just ascended by lift to the top. If you're a beginner, forget it. You shouldn't have. How will you make it down alive to sit by that fire to sip a hot toddy?
But wait. CMX, your expert guide, has negotiated all the slick turns and steep curves. We know you have been waiting for a three column liquid layout, and for our CMX holiday celebration, here it is: JumpStart Aspen.
With a three column liquid-width layout, a base page, and a form page, Aspen employs valid CSS2 and XHTML 1.0 Transitional markup and passes WAI and 508 accessibility checkpoints. Aspen has been tested in numerous browsers. Read on to find out what the bundled package includes.
CMX JumpStarts: North Pole
Reader Level:
The North Pole JumpStart is a two column, fixed width design that uses clever deployment of background images in both the navigational elements and the content areas of the design. The graphics used in North Pole are both simple and complex. They range from the beautifully created snowman made in Freehand and converted to Fireworks to some Christmas black line art that was coloured in to make simple yet effective images that enhanced the Christmas theme with only a few minutes work. Come and have a look!
Reader Level:
The North Pole JumpStart is a two column, fixed width design that uses clever deployment of background images in both the navigational elements and the content areas of the design. The graphics used in North Pole are both simple and complex. They range from the beautifully created snowman made in Freehand and converted to Fireworks to some Christmas black line art that was coloured in to make simple yet effective images that enhanced the Christmas theme with only a few minutes work. Come and have a look!
CMX JumpStarts: Seattle
Reader Level:
Seattle is our second design in the CMX JumpStarts series. It is free to members of Community MX and available for purchase by non-members at the competitive price of $29.99. If you'd like a more detailed description of Seattle, including screenshots, check out "Announcing a New CMX JumpStart: Seattle"
Seattle provides a fixed-width two column layout with a right-hand navigation setup. Included are a home page, a pre-prepared form page and an inner page design. It has been designed to validate to XHTML 1.0 Transitional and CSS 2, and it also meets the requirements of 508 and WAI for accessibility.
All the source files that were used to create this design are available in the download. That is, the CSS files, the XHTML documents and even the PNG files. The CSS files and the XHTML pages are extensively commented to make editing Seattle a breeze. We are sure you will have a Whale of a good time adapting Seattle to meet your own requirements!
Seattle teaches you how to use nested lists to create a fully accessible navigation system. The download contains tutorials that will provide an in-depth analysis of all the techniques that have been used to create the design.
The following tutorials are bundled with the Seattle JumpStart:
Reader Level:
Seattle is our second design in the CMX JumpStarts series. It is free to members of Community MX and available for purchase by non-members at the competitive price of $29.99. If you'd like a more detailed description of Seattle, including screenshots, check out "Announcing a New CMX JumpStart: Seattle"
Seattle provides a fixed-width two column layout with a right-hand navigation setup. Included are a home page, a pre-prepared form page and an inner page design. It has been designed to validate to XHTML 1.0 Transitional and CSS 2, and it also meets the requirements of 508 and WAI for accessibility.
All the source files that were used to create this design are available in the download. That is, the CSS files, the XHTML documents and even the PNG files. The CSS files and the XHTML pages are extensively commented to make editing Seattle a breeze. We are sure you will have a Whale of a good time adapting Seattle to meet your own requirements!
Seattle teaches you how to use nested lists to create a fully accessible navigation system. The download contains tutorials that will provide an in-depth analysis of all the techniques that have been used to create the design.
The following tutorials are bundled with the Seattle JumpStart:
- Float: The Theory - by John Gallant & Holly Bergevin
- CSS An Introduction - Part Six: The Basics of Positioning - by Adrian Senior
- Do You Want To Do That With CSS? — Centering a Wrapper - by John Gallant & Holly Bergevin
- Styling Forms: Fieldset and Legend - by Stephanie Sullivan
- Semantic (X)HTML Markup: Styling Lists - by Zoe Gillenwater
- CSS An Introduction - Part Three: The Descendant Selector - by Adrian Senior
- How to Attack an Internet Explorer (Win) Display Bug - by John Gallant & Holly Bergevin
- CMX Design-time Extension - by Paul Boon
- Foto 1.0 for Fireworks MX Extension - by Steve Grosvenor
Seattle has been tested in various browsers. Click on the following link to view screenshots.
Announcing a New CMX JumpStart: Seattle
Reader Level:
Put down that coffee, and get your Grunge thing going on. That's right, we're off to the "Emerald City", once called Duwamps, but now known as Seattle!
Community MX is pleased to announce the release of the latest CMX JumpStart: Seattle. Based on Web standards, this versatile layout employs valid CSS2 and XHTML 1.0 Transitional markup and passes WAI and 508 accessibility checkpoints. This makes it easy for you to quickly create new sites that work on a variety of browsers and platforms. You are only a few simple edits away from your own look and feel.
This article covers the following:
Reader Level:
Put down that coffee, and get your Grunge thing going on. That's right, we're off to the "Emerald City", once called Duwamps, but now known as Seattle!
Community MX is pleased to announce the release of the latest CMX JumpStart: Seattle. Based on Web standards, this versatile layout employs valid CSS2 and XHTML 1.0 Transitional markup and passes WAI and 508 accessibility checkpoints. This makes it easy for you to quickly create new sites that work on a variety of browsers and platforms. You are only a few simple edits away from your own look and feel.
This article covers the following:
- A list of what is included with the CMX Seattle JumpStart package and bundled tutorials and extensions
- An explanation of the benefits of Web standards
- A demonstration of the ease with which the layout is customized
- The presentation of pages that were created from the Seattle JumpStart
- Information about how this exciting design can belong to you for use in as many projects as you please.
- Screenshots of the page in multiple browsers
Who's ready for a spin on the Space Needle?
CMX JumpStarts: Paris
Reader Level:
Community MX is pleased to announce the release of an exciting new line of products called CMX JumpStarts. Based on Web standards, these versatile layouts employ valid CSS2 and XHTML 1.0 Transitional markup and pass WAI and 508 accessibility checkpoints. This makes it easy for you to quickly create new sites that work on a variety of browsers and platforms. You are only a few simple edits away from your own look and feel.
This article covers the following:
Reader Level:
Community MX is pleased to announce the release of an exciting new line of products called CMX JumpStarts. Based on Web standards, these versatile layouts employ valid CSS2 and XHTML 1.0 Transitional markup and pass WAI and 508 accessibility checkpoints. This makes it easy for you to quickly create new sites that work on a variety of browsers and platforms. You are only a few simple edits away from your own look and feel.
This article covers the following:
- A list of what is included in the CMX JumpStarts: Paris download
- A list of the bundled tutorials that teach the theory behind the layout
- Directions for creating the effects in the Fireworks PNGs
- Demos of live pages
- A page of screen shots that show the Paris layout in a variety of browsers on multiple platforms
Announcing CMX JumpStarts
Reader Level:
Reader Level:
Community MX is pleased to announce the release of an exciting new line of products called CMX JumpStarts. Based on Web standards, these versatile layouts employ valid CSS2 and XHTML 1.0 Transitional markup and pass WAI and 508 accessibility checkpoints. This makes it easy for you to quickly create new sites that work on a variety of browsers and platforms. You are only a few simple edits away from your own look and feel.
Inspired by famous world cities, each JumpStart will have an individual ambience and offer different table-less layouts and features. We travel first to Paris, a city of romance and style, with a design that features the Iris, the national flower of France. This two-column, fixed-width layout, complete with banner and footer, will serve as an elegant underpinning for almost any design.
This article covers the following:
- A list of what is included with the CMX Paris JumpStart package and bundled tutorials
- An explanation of the benefits of Web standards
- A demonstration of the ease with which the layout is customized
- The presentation of a page that was created from the Paris JumpStart
- Information about how this exciting design can belong to you for use in as many projects as you please.
- Screen shots of the page in multiple browsers
Living in a Dream House: Or How to Bring Web Standards to Your Web Sites
Reader Level:
We hear the phrase "Web Standards" frequently these days, but what does it mean, and why should we care? There are many advantages to using XHTML, CSS, and 508 accessibility, and we'll look at some of them in this article. We'll look at how structuring and designing web pages has evolved to its current "best practice" of separating content and presentation. Finally, after looking at a few of the problems involved in using CSS for layout, we'll wander through the CSS Zen Garden to look at a few inspiring examples of what can nonetheless be achieved when designers code for standards compliant browsers.
Reader Level:
We hear the phrase "Web Standards" frequently these days, but what does it mean, and why should we care? There are many advantages to using XHTML, CSS, and 508 accessibility, and we'll look at some of them in this article. We'll look at how structuring and designing web pages has evolved to its current "best practice" of separating content and presentation. Finally, after looking at a few of the problems involved in using CSS for layout, we'll wander through the CSS Zen Garden to look at a few inspiring examples of what can nonetheless be achieved when designers code for standards compliant browsers.
WebQuests for Teachers - Part 2 - Reconstructing
Reader Level:
In the first part of this series, we introduced the WebQuest and a bit of its history. We learned that this lesson in a Web page allows students to make safe use of Internet resources. We also discussed the six sections that make up a traditional WebQuest, and how the WebQuest should be more than mere fact-finding. Finally, we looked at the completed version of the "Time Machine MTV" WebQuest that we're going to reconstruct from scratch. The moment to do that is now upon us, so let's get started.
The WebQuest Series:
Part 1: WebQuests for Teachers
Part 2: WebQuests for Teachers - Reconstructing
Part 3: WebQuests for Teachers - Creating an Original WebQuest
Reader Level:
In the first part of this series, we introduced the WebQuest and a bit of its history. We learned that this lesson in a Web page allows students to make safe use of Internet resources. We also discussed the six sections that make up a traditional WebQuest, and how the WebQuest should be more than mere fact-finding. Finally, we looked at the completed version of the "Time Machine MTV" WebQuest that we're going to reconstruct from scratch. The moment to do that is now upon us, so let's get started.
The WebQuest Series:
Part 1: WebQuests for Teachers
Part 2: WebQuests for Teachers - Reconstructing
Part 3: WebQuests for Teachers - Creating an Original WebQuest
Simple Form Styling with CSS
Reader Level:
Boring, dry, plain forms. They don't have to be that way. You can jazz your forms up by using CSS on the form elements to give them style that coordinates with your web site. We'll look at simple methods of styling inputs, textareas, selects and options, and optgroups. We'll also discuss some of the browser differences, showing what can and can not be styled. Font and text properties, line height, borders, background colors, padding, margin and form field dimensions can all be affected by CSS. Follow along with this tutorial to learn about some simple styling techniques. This tutorial contains example files so you can follow along.
Reader Level:
Boring, dry, plain forms. They don't have to be that way. You can jazz your forms up by using CSS on the form elements to give them style that coordinates with your web site. We'll look at simple methods of styling inputs, textareas, selects and options, and optgroups. We'll also discuss some of the browser differences, showing what can and can not be styled. Font and text properties, line height, borders, background colors, padding, margin and form field dimensions can all be affected by CSS. Follow along with this tutorial to learn about some simple styling techniques. This tutorial contains example files so you can follow along.
CSS Styles Dreamweaver Extension
Reader Level:
Dreamweaver MX 2004 made great advancements in CSS rendering. However, some of the tools could still use a little workflow adjustment: there is no context menu item for CSS Styles for form fields, tables, divs, or images. This extension adds that feature, saving a step for those people who use context menus to speed their workflow.
Reader Level:
Dreamweaver MX 2004 made great advancements in CSS rendering. However, some of the tools could still use a little workflow adjustment: there is no context menu item for CSS Styles for form fields, tables, divs, or images. This extension adds that feature, saving a step for those people who use context menus to speed their workflow.
Using Descendant Selectors to Create a Site Map
Reader Level:
Creating a site map is simple if you harness the power of descendant selectors. Learn to use the flow of the document to write selectors that target the specific element you need and avoid classitis -- the overuse of classes for every element on your page.
Reader Level:
Creating a site map is simple if you harness the power of descendant selectors. Learn to use the flow of the document to write selectors that target the specific element you need and avoid classitis -- the overuse of classes for every element on your page.
WebQuests for Teachers - Part 1
Reader Level:
The World Wide Web has been an important part of our lives for a decade or more. Many things about the Internet have changed dramatically during this time, but one thing hasn't. Parents and teachers want children to participate in all the Web has to offer, but they don't want to expose them to danger in the process. Back in 1995, Bernie Dodge and Tom March of San Diego State University thought of a way to accomplish the seemingly contradictory goals of safety and access. They created the WebQuest.
The WebQuest Series:
Part 1: WebQuests for Teachers
Part 2: WebQuests for Teachers - Reconstructing
Part 3: WebQuests for Teachers - Creating an Original WebQuest
Reader Level:
The World Wide Web has been an important part of our lives for a decade or more. Many things about the Internet have changed dramatically during this time, but one thing hasn't. Parents and teachers want children to participate in all the Web has to offer, but they don't want to expose them to danger in the process. Back in 1995, Bernie Dodge and Tom March of San Diego State University thought of a way to accomplish the seemingly contradictory goals of safety and access. They created the WebQuest.
The WebQuest Series:
Part 1: WebQuests for Teachers
Part 2: WebQuests for Teachers - Reconstructing
Part 3: WebQuests for Teachers - Creating an Original WebQuest
CMX Design-time Extension
Reader Level:
When Dreamweaver MX shipped, it included a new feature called Design Time Style Sheets. This command allowed the user to turn on and off different style sheets during the development of a document. However, it was limited to one document at a time. The CMX Design-time Extension changes all that, allowing you to apply your Design-time styles to a document, a selected folder, or an entire defined Dreamweaver site.
Reader Level:
When Dreamweaver MX shipped, it included a new feature called Design Time Style Sheets. This command allowed the user to turn on and off different style sheets during the development of a document. However, it was limited to one document at a time. The CMX Design-time Extension changes all that, allowing you to apply your Design-time styles to a document, a selected folder, or an entire defined Dreamweaver site.
Flash, DHTML Menus and Accessibility
Reader Level:
It's not uncommon to hear developers complaining that their DHTML menus, when triggered, have dropped behind the Flash movie below them. It's also not uncommon to hear, "that's just how they work." Before Flash Player 6, that was true in many browsers. But nowadays, it's become urban legend. With Flash Player 6, Macromedia introduced windowless mode for Netscape and Mac OS X (previously it was supported only for Windows). In the process, this also gave developers a way to completely hide Flash from older screen readers and the focus issues they can have with it. In fact, when Flash is purely used as eye candy, it's wise to remove it from the flow of the screen reader's page so that they don't have to listen to Flash without a purpose.
Reader Level:
It's not uncommon to hear developers complaining that their DHTML menus, when triggered, have dropped behind the Flash movie below them. It's also not uncommon to hear, "that's just how they work." Before Flash Player 6, that was true in many browsers. But nowadays, it's become urban legend. With Flash Player 6, Macromedia introduced windowless mode for Netscape and Mac OS X (previously it was supported only for Windows). In the process, this also gave developers a way to completely hide Flash from older screen readers and the focus issues they can have with it. In fact, when Flash is purely used as eye candy, it's wise to remove it from the flow of the screen reader's page so that they don't have to listen to Flash without a purpose.
Web Terminology: Part Three
Reader Level:
In Part Three of our Web Terminology series, we discuss terms you may read in a forum or on an email list. Words that are slung about loosely, often without further description or even a context within which to infer their meanings. Words that are part of the "jargon" of CSS, such as "Positioned," "Container," "CSS Hack," and "Workaround." Armed with this knowledge, you'll be able to ask intelligent questions, converse with the gurus, and actually understand what they're talking about! Let's go!
Reader Level:
In Part Three of our Web Terminology series, we discuss terms you may read in a forum or on an email list. Words that are slung about loosely, often without further description or even a context within which to infer their meanings. Words that are part of the "jargon" of CSS, such as "Positioned," "Container," "CSS Hack," and "Workaround." Armed with this knowledge, you'll be able to ask intelligent questions, converse with the gurus, and actually understand what they're talking about! Let's go!
Web Terminology: Part Two
Reader Level:
Continuing with our terminology series, in Part Two we delve into the differences between "attributes" and "properties," what "external," "embedded," and "inline" mean, and expose the vulnerable underbelly of XHTML.
Reader Level:
Continuing with our terminology series, in Part Two we delve into the differences between "attributes" and "properties," what "external," "embedded," and "inline" mean, and expose the vulnerable underbelly of XHTML.
Web Terminology: Part One
Reader Level:
This article begins a new series concerning the definition of terms, specifically the terms most used (and mis-used) in HTML and CSS concepts. We hope to enlighten those who haven't had time to catch up on the lingo so common amongst web designers, begining with a discussion of tags vs. elements, divs vs. layers, and Class vs. ID.
Reader Level:
This article begins a new series concerning the definition of terms, specifically the terms most used (and mis-used) in HTML and CSS concepts. We hope to enlighten those who haven't had time to catch up on the lingo so common amongst web designers, begining with a discussion of tags vs. elements, divs vs. layers, and Class vs. ID.
Media Types and Their Uses
Reader Level:
Using Media types, can open up a whole host of opportunities for restyling your content to cater to a variety of different devices. These days, not all users will be viewing your web site on a computer screen.
Reader Level:
Using Media types, can open up a whole host of opportunities for restyling your content to cater to a variety of different devices. These days, not all users will be viewing your web site on a computer screen.
Styling Headings for Fun and Profit with CSS
Reader Level:
CSS has given web developers the ability to create lightweight, accessible web pages using fewer graphics while still retaining an attractive graphical look. In this tutorial we'll look at six specific examples of headings, along with other styling suggestions you can adapt to dress up your pages. This will make them quick to render, attractive to search engines, and, ultimately, more profitable for your business...
Reader Level:
CSS has given web developers the ability to create lightweight, accessible web pages using fewer graphics while still retaining an attractive graphical look. In this tutorial we'll look at six specific examples of headings, along with other styling suggestions you can adapt to dress up your pages. This will make them quick to render, attractive to search engines, and, ultimately, more profitable for your business...
New CSS features in DWMX 2004
Reader Level:
I'm going to go over all the basic CSS functionality changes here just to give you an overview of what's been changed. Some of our overview articles have already mentioned and shown some of the fabulous new CSS-P rendering capabilities. For me, this alone is worth the upgrade. No, nothing beats previewing pages in every browser imaginable, but it sure beats the jumbled mess I've seen in design view previously. Come in and see a more detailed view of the new tools.
Reader Level:
I'm going to go over all the basic CSS functionality changes here just to give you an overview of what's been changed. Some of our overview articles have already mentioned and shown some of the fabulous new CSS-P rendering capabilities. For me, this alone is worth the upgrade. No, nothing beats previewing pages in every browser imaginable, but it sure beats the jumbled mess I've seen in design view previously. Come in and see a more detailed view of the new tools.
Creating a Drop Cap with CSS
Reader Level:
The print world has used drop caps to their advantage for years. And previously, on the web, it was difficult to pull it off unless you used images (which for a large variety of reasons is undesirable). Enter CSS -- the wunderkid! CSS makes this effect simple.
Reader Level:
The print world has used drop caps to their advantage for years. And previously, on the web, it was difficult to pull it off unless you used images (which for a large variety of reasons is undesirable). Enter CSS -- the wunderkid! CSS makes this effect simple.
Debugging CSS, the Easy Way
Reader Level:
CSS bugs can be obscenely difficult to isolate, especially when they are located amidst a large, complex page with many external style sheets. Compounding this is the fact that few coders have enough experience to be sure that what they're seeing really IS a bug, and not just incorrect coding. What's needed is a way to isolate or understand the problem so the coder may find a workaround or avoid the bug altogether.
Reader Level:
CSS bugs can be obscenely difficult to isolate, especially when they are located amidst a large, complex page with many external style sheets. Compounding this is the fact that few coders have enough experience to be sure that what they're seeing really IS a bug, and not just incorrect coding. What's needed is a way to isolate or understand the problem so the coder may find a workaround or avoid the bug altogether.
Styling Data Tables with CSS
Reader Level:
Data tables. Dry. Rows and rows of boring data. Does it have to be that way? I think not. CSS can style your boring data tables to look snazzy and organized. Separate your style from your structure and you can change it anytime you like. Anytime you have that boring-data-styling urge.
Reader Level:
Data tables. Dry. Rows and rows of boring data. Does it have to be that way? I think not. CSS can style your boring data tables to look snazzy and organized. Separate your style from your structure and you can change it anytime you like. Anytime you have that boring-data-styling urge.
Preparing DMX to work with CSS
Reader Level:
Integrating TopStyle to work with Dreamweaver MX, get the full power of CSS at your finger tips quickly and easily.
Reader Level:
Integrating TopStyle to work with Dreamweaver MX, get the full power of CSS at your finger tips quickly and easily.
Searching CMX
Get familiar with the CMX search facility & learn how to find the tutorials you need easily & quickly.
Latest Free Content
-
Create a Stone Effect for Text -
Smart Objects for Photographers: Part 1 - Neon Text Effects
- Inked Stone
-
The TwentyEleven WordPress Series: Introduction
View All Free Content
Advertise with CommunityMX
Copyright © 2010 - CommunityMX - All rights reserved. Conforms to W3C Standard XHTML & CSS