In this Issue...
 INTRO
| Sneak Peek...
We're excited to give you a sneak peak at another in a
series of new product releases PixelMill is launching during
the first half of this year. All of these new products and
services are a natural progression at PixelMill to keep pace
with the changes we're all seeing. We see that you want more
from your web sites and presentations and that you want to
continue to be a step ahead. We're here to help you do that
with new exciting products, better packaged
solutions, custom services and training, and by building a
network of designers and site builders to help facilitate your
needs.
We start this month with a sneak peek at our new catalog
of over
4,500 Royalty Free Music tracks. Use these tracks to
add background music to an audio broadcast on your site, a
podcast, a Flash video commercial, or a PowerPoint
presentation. Take this next step into moving your web sites
from flat brochures to dynamic interactive experiences.
Read
more >>
Our feature this month is an excellent article on
the basics of CSS by Corrie. We are
seeing more and more
customers are finding it easier than expected to make the
move to CSS. One way this transition is proving easier is
with our low cost
one-on-one training. You will be amazed
how quick you can move to the next level with just one hour
of training! We're also bringing the second installment
of Heather's RSS article; this time, she shows you how easy
it is to bring your blog headlines onto a separate site
using FeedBurner.
Finally, we ask for your help. We're seeing rapid growth
with our custom services. Here is your chance to work with
us to meet the needs of our community. Tell us more about
your skills, talents, and interests. We will review your
work and add you to our talent pool. As we receive work
requests that meet your specific talents, we will work with
you to deliver a solid solution for the customer.
Thank you again for your continued interest in our
newsletter and for being a valued customer. Expect more from PixelMill
and yourself!
by Jason Reckers, President & CEO -
PixelMill Inc.
 PRODUCTS
| Royalty-free Music from Jupiterimages
As a newsletter subscriber, you're receiving a
sneak peek at our newest product at PixelMill. In
cooperation with our friends at Jupiterimages,
PixelMill launches a new catalog of over
4,500
royalty free music tracks. This new catalog features
a substantial collection of royalty free music from
a variety of genres and styles of music. From
traditional classical music to Hip Hop, rock and New
Age music, we have you covered.
As we see the web move closer and closer to a fully
interactive media, PixelMill also sees the growing need to deliver
products and services that help you accomplish this goal for
you and your customer. The royalty free music collection
allows you to take the first step towards more audio and
video with your web and presentation productions. Add a
variety of quality background music to your site or
presentation with an appealing style and watch the interest
and stickiness grow. In the coming months, watch
as we help deliver a full package that will catapult you
into web and presentation production business.
So, why are we calling it a sneak peek? We have not 'officially' launched the
section with a landing page, press release, or blog post.
You can review the music now
in our catalog and watch for our Royalty Free Music
landing page, where we will provide more
information and tutorials to help you do more with music. To
get a quick start with music in your site, we recommend
taking a look at the tools from
Wimpy
(one of the leading online player tools).
Browse through
our catalog of tracks and let us know your
thoughts. How can we help you deliver more with music? What
more would you like to see from the Royalty Free Music
collection? Don't hold back! We want to know what you think.
by Jason Reckers, President
& CEO - PixelMill Inc.
 FEATURE
| CSS Basics for Everyone
Whether you're seriously considering committing to
CSS-only, standards-based web sites or just want to get your
feet wet, this article will cover CSS basics to get you
started. In addition to looking at how CSS is structured,
I'll show you how to format fonts, colors, and backgrounds
-- and a popular favorite, removing link underlines from
your text navigation links!
You'll want to start with a web site that is free
of <font> tags and any other tags or attributes that set
colors, fonts, or backgrounds.
There are a few ways that you can get CSS into
your pages -- by adding CSS directly inside your HTML tags
("inline"), adding CSS to each page ("internal"), or
creating a stylesheet that applies to all your pages
("external stylesheet"). For the purposes of this article,
I'll show you how to create an external stylesheet and link
it to your pages.
It's pretty easy -- create a new, blank file in your HTML
or text editor and save it with the .css extension into your
web folder. You can call it whatever you want -- styles.css
or stylesheet.css are common filenames to use.
Now, open all your web pages and insert this code into
the <head></head> of your document:
<link rel="stylesheet" type="text/css" href="stylesheet.css"
/>
Obviously you'll want to make sure that the filename (stylesheet.css
in my example) matches up with yours, and that any pages in
subfolders of your site can still fine the stylesheet by
adding appropriate path directions. For example, a page in a
subfolder would have this href instead:
../stylesheet.css.
Now it's time to actually add your CSS code by learning
some basic rules. CSS code always has this format:
selector { property: value; }
This code can be split up in different lines and indented
in different ways, but the basic premise is the same. You
can also have multiple properties and values inside of the
curly braces. Meanwhile, the "selector" can be an HTML
element (like p, h1, or a), or a class (a special name
defined by you, starting with a period, such as .special or
.alignleft), or an ID (another special name defined by you,
starting with a #, such as #pagetitle or #mainimage).
The difference between classes and IDs is that you can
apply a class multiple times within a web page while IDs can
only be used once.
Let's see how this works in real life. Assuming you've
taken out the <font> tags and other attributes that define
colors, fonts, and backgrounds, your text is probably
looking pretty plain. Let's change the default font for your
entire web site by defining the font property for the body
tag in the stylesheet. Open your .css file and add this
code:
body {
font-size: .8em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
Save your .css file and now look at your pages. If the
stylesheet has been linked to the pages properly, you'll now
see that the font of your site is no longer Times New Roman
(or whatever default font you have set in your browser)!
Think back to the old days when this would have taken
several <font> tags on each page, and rejoice!
Now, let's add some pizzazz to your top level headings:
h1 {
font-size: 150%;
font-weight: bold;
letter-spacing: .2em;
text-transform: uppercase;
color: #3352aa;
border-bottom: solid 1px #3352aa;
}
You'll end up with headings that are big, bold, and have
a pretty blue color with a pretty blue underline going
across the page, and the letters are uppercase and slightly
spaced apart. That definitely sets them off.
Also, the headings are still Verdana, because they pick
up the "cascading" style from the body element's rule.
Already, you've been introduced casually to some
CSS properties -- font-size, family-family,
font-weight, letter-spacing, text-transform, color, and
border-bottom (which is really a shortcut way for defining
three properties in one -- border-bottom-style,
border-bottom-width, and border-bottom-color). After just
reading a few paragraphs, you
have so many more options with CSS than you do just HTML,
including letter spacing, changing all the letters to be
uppercase (or lowercase), and defining a horizontal
separator under the text without needing images or a table
cell.
Let's extend your wow-capabilities by adding in
background colors and background images. With CSS, they are
no longer confined to just table cells or page backgrounds.
First, locate a small bullet or icon-type image that you'd like to
use to set off all your <h2> headings. Now, try this code on
for size:
h2 {
font-size: 150%;
font-weight: bold;
padding-left: 20px;
background-image: url('images/bulletimage.gif');
background-repeat: no-repeat;
}
You'll want to change the location and filename of the
image to match yours, and you may want to adjust the
padding-left amount as well, which is what pushes the text
away from the left so that there is room for the image to
show up. But as you can see, your level 2 headings now have
a cool bullet/icon setting them off -- with some simple CSS
that you can adjust at any time!
If you're still used to using table-based layouts, you
can clean up your HTML code by applying the same background
concepts to table cells. Obviously you don't want to simply
write a rule for "td" because that would apply to every
table cell. Instead, you can target specific table cells by
using classes, and even minimize some extra
table-cells-used-for-graphics action
while you're at it.
Here's a typical nested table trick -- the outermost <td>
tag represents a cell used for the left column of a layout
table (red outline), and it has a nested table inside
(purple outline) that holds the
content in one cell and a graphic element for a curved
column bottom in another:
<td>
<table .... >
<tr>
<td bgcolor="#dbe2f1">
Text content here...
</td>
<td>
<img src="images/curve.gif" ... />
</td>
</tr>
</table>
</td>
Let's take a look at this table with the bottom cell and
graphic removed completely, the bgcolor attribute replaced
with an ID (to be used only once on a page), and some
background magic applied with CSS...
<td>
<table .... >
<tr>
<td bgcolor="#dbe2f1" id="leftcolumn">
Text content here...
</td>
<td>
<img src="curve.gif" ... />
</td>
</tr>
</table>
</td>
CSS code:
#leftcolumn {
background: #dbe2f1 url('images/curve.gif') no-repeat bottom left;
padding-bottom: 70px;
}
The web page looks exactly the same but is a few lines of
code lighter. In the CSS, I used the shortcut background
property, which defines the background-color,
background-image, background-repeat, etc. properties in one
quick line of code. The CSS defines a light blue background
color for the entire cell, then sticks the curve graphic at
the bottom of the cell, The bottom padding amount keeps text
content from overlapping the curve graphic too much.
Finally -- how do you remove underlines
from linked text? While underlined linked text in content
areas is visually helpful for readers, they can be
distracting in text navigation bars. You can target your
navigation and subnavigation links using a class, and then
add some extra-special code to your stylesheet. Let's first
look at the HTML:
<p class="navlinks"> [[ your links here ]] </p>
First -- the class can be applied to any element that
contains your links. In the code above, the class is applied
to a paragraph tag. But if your links are inside of a table
cell, you can apply the class to the <td> element like this:
<td class="navlinks">
Now let's look at the CSS:
.navlinks a { text-decoration: none; }
It's really that easy! But let me explain the code a
little more. First, let's look at this code:
a { text-decoration: none; }
If you ONLY have "a" as the CSS selector, then you'll
take away underlines from EVERY link in your web site. But
this may make links hard to pinpoint in the content areas of
your site. So, by adding the ".navlinks" in front of the
"a," you're limiting the definition to "only link tags that
are inside something with the navlinks class." This means
that your navigation links won't have underlines, but the
other links in your site will.
I hope this article has helped you to begin to see the
possibilities of how CSS can really start to transform your
site, even if you're still more comfortable using tables.
There are so many more wonderful properties out there that
you can define -- I'd encourage you to visit w3schools.com
and look at the possible CSS properties and the values that
they can have.
You've already caught a glimpse of how CSS can streamline
your code; in next month's newsletter, we'll put a
tables-based site vs. a CSS-only site on the scale and see
how they weigh!
by Corrie Haffly, PixelMill Staff Writer
 SOLUTIONS
| A Little Extra Help Goes a Long Way..
One-on-One Training
Need a little extra help making the transition to
CSS-based Web sites and changes in web standards? We
have designed our new one-on-one training service to
connect you with an experienced professional to help
guide you through your questions.
Register for one of our No Risk training options to
schedule a personalized online training. You will be amazed
how much you can learn in an hour and how quickly you can
grasp CSS and Web standards.
Click the option below to buy your
training today!
A PixelMill team member will contact you after placing the
order to discuss your specific needs and coordinate with the
appropriate expert.
Service requires a PC and a broadband connection. For questions,
please call 866-749-3564 (Option 2) or
contact us using one of our many contact options.
 FEATURE
| A Recipe for Using FeedBurner
Last month I wrote about RSS and all of the fun stuff
that went along with it. This month I am going to cover
how to use FeedBurner to bring blog headlines onto your
own site.
First - why would you want to do this? Well, let's say that
you have a web site for your company, and now you want to
branch out and start blogging. It's much more complicated to
put a blog INTO your current site, but there are lots of
other blogging services that you can use instead. These blog
services all allow you to have a "feed" for your posts; now,
you want to bring those feeds into your original web site.
Enter FeedBurner, which takes your existing blog feed,
optimizes it for your readers and creates a new feed, then
allows you to display your headlines on your site! If you're
excited to feed your visitors using FeedBurner's incredibly
easy tools, read on.
Ingredients:
- An RSS Feed for your blog or similar content-driven
site (most blogging services come with this
already)
- A free FeedBurner
account
- A web site editor to display your feeds on your non-blog
web site
Directions:
Let’s get started setting up
your first feed to burn. If you haven't already, log into
FeedBurner and type your blog or feed address in
the input area, then click NEXT.
Now you are prompted to name
your feed. To my knowledge you can give this any name you
desire. I decided to call my feed PixelMill Blog and have also
given my Feed Address an appropriate name. When these
settings are done, hit Activate Feed.
After your feed is activated, you should
see your Feed Address link. FeedBurner will also inform you
that along with your FREE account they have given you some
nifty services like free stats and making sure your feed is
browser friendly. FeedBurner allows you to select
Clickthroughs to show how often people click items back to
your site or use Item enclosure downloads for podcasts. If
you want some big-time stats, then select the pro package
and enjoy that extra helping of stats.
Go to the Optimize tab, where you can see
different services that you can activate for your feed. You
should definitely select the BrowserFriendly and
SmartFeed options in the left column and activate them
so that people using any kind of feed reader can access your
feed.
Now you're ready to sprinkle some feeds into your own web
site. Click on the Publicize tab, then select
BuzzBoost from the left column. The BuzzBoost settings are
pretty self-explanatory. For example, I selected three items to display
(three latest posts). There
are more items to choose from, just customize your feed the
way you want.
After you have activated your BuzzBoost you are quickly
served some HTML to paste into your website.
Copy the feed code
from the BuzzBoost textbox, and then open your site for
editing; you will need to view the html code to make sure
you are placing the script in the proper place. Next paste
your code into your site (in the HTML code), save and
publish. Take a look -- my PixelMill Blog feeds are
integrated into my separate web site!
FeedBurner offers you one of the fastest
ways to add fresh content to your site that will update
every time the blog or web address you selected is updated.
What better way to improve your search engine optimization
than by serving up fresh content? Your subscribers will
thank you as well!
by Heather Waterman, PixelMill Staff Writer.
 SOLUTIONS
| Save Valuable Time...Have PixelMill do the Work for You!
Custom Services
Need to focus on more than just the project at
hand? Let PixelMill help you save valuable time by
providing you professional and timely customization
services. We will
bring our best experts to your project ensuring that
you deliver an exceptional solution for your
customer.
Our Custom Services package offers:
- Reasonable prices for custom work.
- Quick turnaround...within 1 to 2 business
days
- PixelMill-approved designers and coders.
- Great communication...work with one
project manager through the entire process.
Visit our
Custom Services page for more information,
and get started today!
|
