Explore the Premium Content

Which CSS and When – Understanding how styles are applied

Once you get beyond the basics of CSS, it can seem a bit intimidating. Cascade and specificity seem like obscure concepts if all you want it to do is get a design working.

But, learning how browsers apply stylesheet rules is an important tool, once you understand how the rules are applied, you can manipulate styles much more powerfully.

In this tutorial we’ll look at the various ways that web browsers choose to apply stylesheets, and look at some of the tricks you can use to take advantage of the way CSS works.

Quick Refresher

Before we start it’s worth noting that this tutorial assumes you know the basics of how styles are applied. Particularly it’s important you understand CSS Selectors, you know that:

#content h2{ font-size: 0.8em;}

Means apply a font size of 0.8em to any h2 that is inside the page element with the unique id of content. Typically content might be a div, but it could be any type of HTML element.

And you’re also aware that:

.highlight strong {color:red;}

Any strong element inside another element with the class highlight applied to it.

The Process

This tutorial is about understanding methods that browsers use when applying your styles to a web page. It takes you step by step through the process, so you’ll be better able to diagnose why a particular style isn’t sticking.

This working out of which rule applies is called cascade, and is the cascading part of CSS.

Read More

DataGrid Columns in ASP.NET 1.x

Working with the DataGrid component in ASP.NET 1.x can be an overwhelming task at times. With so many configurable options available and a myriad of different attributes and parameters to work with your head can be spinning in no time.

How to present your data and how you want that data to interact with the user is usually the most important aspect to consider when designing your DataGrid component. You want your users to be able to find what they need and work with that data in an easy fashion.

The key component of the DataGrid when it comes to presentation is the DataGrid column objects. This in combination with some descent CSS styling attributes can create an aesthetic presentation that your users should find easy to work with.

With a lot of functionality pre-built into the DataGrid it’s important to take advantage of that functionality so that you are not constantly re-building features that are already available. The purpose of this article is to provide an overview of the different column types available on the DataGrid component and how they interact with some of the built in features.

By properly understanding the column types available and some of the key built in features you will be able to easily and rapidly create DataGrid components that are user friendly and easy to develop.

Note: Visual Studio .NET 02/03 running ASP.NET version 1.x is required for this tutorial. Both VB.NET and C# code samples will be provided

Read More

Summarizing database content using record count and displaying a recordset

Richard shows you how to use the total "records count" from the bindings panel to summarize table contents in a paragraph.

Next to that he teaches you how to apply the  "Show Region" server behavior to display a recordset to a page. He also enables you to show an appropriate message if the recordset does not contain data.

This movie continues with the sample site that was used in last weeks tutorial.


Read More

Photoshop CS2: Create an Easy Web Gallery

Photoshop CS2 provides the option to create a web photo gallery along with many layout options through their Photo Gallery wizard. In this tutorial, Linda walks you through the steps to create a gallery, and she points out the benefits and disadvantages to this WYSIWYG tool along the way. You’ll need a folder filled with several images (up to ten or more) to play with this tool and to learn how to utilize Photoshop CS2’s Bridge.

Yes, it’s WYSIWYG, but it works – mostly…

Photoshop CS2 provides a means for people who don’t know the ins and outs of HTML to set up a personalized photo gallery online. But, if you do know HTML and CSS, you have the advantage. You can tweak the final project so that your site is a bit more clean, clever, personal, usable and accessible. Remember – this is WYSIWYG after all…

The first thing you’ll need is some photos – up to ten is fine for this project contained in a folder. I’m sure that you’re SO organized that you have your own photos to use for this project, right? To be honest – I’m the worst at organization, but over the weekend I used PhotoShop Bridge to help me sort out all my files (not just photographs). You’ll see how easy this will be for you as well as you go along.

The Bridge is also necessary for you to build this gallery, because it helps you to define the photos and to create the gallery’s structure. So, choose your photos, open Photoshop CS2, and away you go…

Read More

Polling the server with Ajax

If you’ve been reading the series of articles about the Ajax approach to building Web applications, here’s another! In this article, I’m going to show you how to poll the Web server at regular intervals with the XMLHttpRequest object. In other words, we’ll use an Ajax approach to request information from the server and load it into a Web interface. Then we’ll refresh the data regularly, so you can see updates.

If you haven’t been following the articles, Ajax is a Web 2.0 approach to building Web applications. It allows you to load data from the server asynchronously by using JavaScript and the XMLHttpRequest object. Asynchronous means that the loading takes place in the background so that the user can carry on working with the Web application.

In this tutorial, we’ll load a simple RSS 2.0 feed containing useful links into a Web page. We’ll update the list regularly using the setInterval command in JavaScript. We’ll also address the topic of multi-dimensional arrays in JavaScript. If you want to find out more about the RSS 2.0 specification and the XML tags that are used, check out http://www.rssboard.org/rss-specification.

In a real world application, we’d probably load data from an RSS feed locatedatan external Web site. However, for simplicity we’ll load it from a local XML file. Because of the Ajax security sandbox, you’d need to use a proxy file written in a server-side language to create a local copy of any externally located feeds. That’s a little beyond the scope of today’s article but you can find lots of articles on the Web about this topic.

If we wanted to create a Web 1.0 version of this application, we’d have to rely on a Meta refresh directive to reload the page at regular intervals. If the feed was included in a page along with other information, the user would have to wait until the entire page reloaded to see the other content. For example, if they were filling in a form, they could easily lose their place and have to start again. The Web 2.0 approach allows the user to reload only the area containing the links, without refreshing the remaining page content.

As with all Ajax examples, you’ll need to run the code contained in this article through a Web server. I’ll be using IIS (Internet Information Systems) on a PC but you could use other Web servers. In IIS, all Web sites exist as a folder in C:\Inetpub\wwwroot and I’ll be using the folder DMXZone. When I want to view a page in a Web browser, I have to use http://localhost/DMXZone. I can’t just double click it to make it work correctly.

I tested this example in IE 6, Opera 9 and Firefox 1.5 so my screen shots will show different browsers. You can download the files for the article from the blue Properties box that contains the article PDF. There's a heading titled Code Download and you can click the Details link next to it to get the zip file.

Note: If you have difficulties downloading the source files or PDF, you might have a problem with your cookies. Delete the cookies from your machine and try again. In Internet Explorer, you can do this by choosing Tools > Internet Options… and clicking the Delete Cookies… button on the General tab.

Read More

Creating a Pageable Sortable DataGrid in ASP.NET

When working with the DataGrid component it’s often important to stay on top of performance and to provide an easy to use interface. Sometimes a lot of work and effort goes into making a great DataGrid display and layout but some of the details get lost along the way.

There are 2 features that are built into the DataGrid which can help make your end users lives a little easier when working with larger amounts of data. These 2 features are paging and sorting. Paging refers to taking a large set of data and paging it across multiple pages instead of presenting all of the rows at once, and sorting of course refers to allowing the user to sort the data by certain columns. Both provide a way for your end user to find the data they are searching for a little easier.

There does come certain overhead with using these features, but this is usually the price you pay for providing a richer user interface. There are a couple different ways to provide these features as well. We will look at the fastest and easiest way to implement both.

In this tutorial we will implement a simple ASP.NET sample application which displays a listing of products from the sample Northwind SQL database. We will implement the sample application in 3 stages. The first stage we will build the connection and get our DataGrid to simply display a listing of products.

In the second stage we will add sorting to the DataGrid so that you can click on certain column headings, and in the third stage we will add paging to the DataGrid using the default paging features without customization.

Note: Visual Studio .NET running ASP.NET ver 1.x is required for this tutorial. Access to a version of SQL Server is also required as we will use the sample Northwind SQL database to connect to. Both VB.NET and C# code samples will be provided

Read More

Search Your Site with JavaScript, XML and CSS Part One

Any site that is popular with users of the 'net, while unique and individual in certain aspects, will share particular attributes with other popular sites; aside from interesting or useful content, they're likely to feature things such as an easy to use navigation model, a sensibly laid out sitemap, and the ability to search for specific information or content (there are other things as well, this isn’t everything you need to cover!).  The ability to perform searches for specific information is especially important for larger sites and dynamic sites, which often implement the search via server-side technology.  Having a decent and dependable search engine on smaller sites need not be a pipedream either however so don't think that for smaller sites it isn't necessary to include a search facility.  Making things easier for visitors should be right at the top of any web designer's list of priorities because if no concern is given in this area, there won't be any visitors!  If you don’t have access to server-side technology such as PHP or ASP.NET you needn't worry as during the course of this article I'm going to show you how easy it is to create a purely client-side search engine that will happily search any number of pages for words entered into a simple text box.

Read More

Photoshop CS2: Mix it Up – Three Images into One

Photoshop CS2: Simple Compositing

Within the past few articles about Photoshop CS2, Linda has illustrated how to use several tools in this program to brighten up old images. In this article, she begins to work with several recently-taken photos at once to create one new image. This process, called compositing, may seem simple at first glance, but several factors – including tricks with selection tools – can help to save time and can also help to create a more believable image. Linda covers these compositing tools and more in this article…

Bring Out Those Boring Photographs

In the first article about Photoshop, I talked about how to spot fake photographs, or “fauxtography.” If you’re interested in photojournalism, the practice of altering photographs or creating composites is unethical, illegal in some situations, and just plain wrong. However, if you want to create photographic or artistic images for postcards or greeting cards, as “illustrations” for fictional works, or as digital artwork for sale or just for personal enjoyment, then you can create composites for fun and/or profit.

Compositing practice is perfect for those less-than-wonderful images that you have stashed on your hard drive. Yes, I know the reason why you haven’t tossed those photos – at least one or two features within those images are valuable to you. Even the dark, blurry, and otherwise defective images can work if you know how to fix those features.

The first project is a simple one, where I chose three rather boring vacation photos to create one composite:

 

Read More

Photoshop CS2: Optimize Your Photoshop Experience

Photoshop CS2: Optimize Your Photoshop Experience

Photoshop CS2 is filled with little mysteries, and sometimes the best tools for completing a Photoshop job are hidden right under your nose. In this article, Linda passes on some of her tips and tricks that will make your experiences with Photoshop a bit more fantastic, including a short tutorial on Smart Objects and Shapes. This is a veritable potpourri of tips and tricks along with links to online resources for FREE tutorials, brushes, and photographs that you can’t afford to miss, and that weren’t covered in her previous articles!

Outsmarting the Photoshop Manual

You could spend years learning all the nuances contained within Photoshop CS2. My suggestion is to learn everything you can from the Adobe Photoshop CS2 manual, and then pick up a Photoshop magazine every once in a while to learn from the folks who play with this software all day long. After you sample one or two of the many magazines out there, you might pick a favourite and subscribe to learn more.

I wish that I could somehow sort the tips and tricks below a bit better so that they’ll be easier to access, but so many of these tools fall into more than one category – I did, however, try to file them under vague headings to make it a bit easier for you to skim through. Just sit back, read, enjoy, and note the tools that will provide you with the most satisfaction when you work in Photoshop.

Read More

Building Your First ADO.NET Application – Part 2

Welcome to the second and final part of this tutorial regarding how to build an ASP.NET application that utilizes ADO.NET as the data provider. During part 1 we explored the scenario where a single developer builds everything from the database up in a 2-tier design by utilizing the data wizards of the data controls designed for ASP.NET WebForms.

The purpose of this second part of the tutorial is to build the same features that were built during part 1, but instead to use an N-tier design to create a more reusable data tier. Although this process is much more manual it gives the developer greater flexibility and control over the data source coding and allows them to implement object oriented patterns which can be reused across the application.

Note: Visual Studio .NET running ASP.NET version 1.x is required for this tutorial. Access to SQL Server is not required but preferred, you must have access to a database however in order to properly implement the sample code. Both VB.NET and C# code samples will be provided

Read More

Applying the User Authentication Server Behaviors

Richard Mariner will show you how to add security to your site by creating a login box. This movie continues with the sample site that was used in last weeks tutorial.

 


Read More

Photoshop CS2: Artistic Effects with Canvases, Filters, and Layers

You may want to create artistic images from your photographs with Photoshop Filters, but you soon discover that your images seem too simplistic or “digital” for your taste. In this tutorial, Linda explains that the reason behind this problem often lies in the background, or in the canvas or paper that you choose to use for your artistic adventures. You’ll receive artistic canvas and paper backgrounds for your use with this article, as well as steps on how to create more realistic pastel and watercolour renderings from your photographic images with these backgrounds.

Study the Masters

If you attended an art school (not a graphic design school), you probably spent most of your first year replicating masters’ works in a museum setting. These lessons were necessary to help you learn how the “pros” created their drawings and paintings. From this point, you could then develop your own style.

While Photoshop filters provide the digital artist with a variety of tools to create a ‘painting’ from a photograph, these filters are either simplistic or they overdo the obvious. Even the addition of “just one more filtered layer” often falls short from your goal. So how do you know what looks “right” as you begin to add filtered layers to achieve an artistic effect?

Read More
Newer articles Older articles