CSS Automatic Creators: Top 3 FREE Sources for Automatically created CSS Code

Using CSS to create your website is the standard and proper way of constructing a web page. When you start any website design using css, the first step is to create the structure of the layout and the basic lists that will make up your navigation. If you are a CSS guru, then creating these CSS layouts and lists can be a fairly simple task. But, if you are a new or intermediate CSS developer, or, you create website templates and unique websites consistently, wouldn't it be nice to have your initial layout and lists automatically created using proper CSS design? That way, you can move on to more fun aspects of constructing your website.

There are many resources available online to assist you in creating semantically correct CSS code, CSS layout and CSS lists. I have found these three sites, that offer automatically generated CSS code for these structures within your website. As a web design professional, and an expert in CSS (oh, yea, I'm super neat) I still find these websites PRICELESS, and use them often when beginning any web design. The first is called,

The List-O-Matic

The List-O-Matic automatically generates CSS code for any type of list or navigation element you're trying to create. Just fill in the blanks within the list-o-matic CSS generators form, and the application will give you the HTML and CSS code for a list in the style that you propose. It offers CSS rollovers, CSS horizontal navigation, CSS vertical navigation and some highly creative color and graphic formats. Of course, you can alter the code to your liking once you've plugged it into your site...But, isn't it nice to have the semantically correct CSS code automatically generated for you so you can begin to focus on the colors and graphical aspects?



The second automatic CSS creator is:

Firdamatic

This website offers a complete CSS layout generator, focused on blogs and weblogs. It will take your current site, and construct it, using sematically correct CSS code, into a 2 column CSS layout or a 3 column CSS layout. The options are minimal, but the feature itself is amazing. I highly recommend this option for those who own a simple blog or weblog, and aren't necessarily starting a highly unique and intricate website...For you, there's the:

Layout-o-matic

This option leaves the CSS layout privy the availability to use the application to create small box models within box models, so that your site is constructed within your vision. It also offers CSS 2 column layouts, CSS 3 column layouts, CSS simple 3 columns, full page layouts, and the option to align the CSS layouts to the left or right.
ARTICLE CONTINUES BELOW AD


Check out all three of these resources...And, before you write them off as a waste because you are fully capable of creating the CSS code within your web site. I can say, as a web design professional and a CSS expert (ahem...there I go, tooting my horn again!) that they are useful, even if simply utilized as a time-saving technique. For the CSS newbies out there, this is absolutely the best way to watch your CSS design materialize into an actual example and to experiment with the way that different CSS lists and layouts are used.

Seattle Condos at Condo Company

Are you planning on moving and looking for a new condo? Have you ever thought about buying a place, instead of throwing away money every month on rent? I'm moving to Washington at the end of this year, and have done extensive research on condos, prices, and relevant locations. Of course, as a technology enthusiast, I figure the best way to search is online. I stumbled across a website on Seattle Condos, the number one searched condominium dedicated site on the internet, and I can definitely see why!

Thousands of unique visitors frequent the site daily either looking to sell or buy condos in the Seattle area. It's a niche location, but it makes the site so much more informative. The resource offers people such as Realtors, Owners, and Developers to list condos for sale in Seattle, without any middle-man involvement. The buyer (or potential buyer) can contact the owners, developers or realtors directly when looking to buy. Also, to even further verify the validity and superb quality of the search, the site offers lists of "Building Specialists" who have been chosen as an agent who specializes in a particular condo building. Check out the Seattle Condos on this great website.

How to Create a Flash Text Fade Animation in Photoshop and ImageReady

Photoshop Tutorial: Using ImageReady to create Flash Animations...EASY!

Graphic Designers are beginning to focus on every aspect of the digital medium, including web design and Flash animation. If you’ve ever been asked to create a banner ad or short animation for a client whom you have previously only offered print designs, this tutorial is very beneficial. For the experienced Flash animation designer, this is definitely too basic for your skills. Creating SWF format animations in Photoshop and Image Ready is actually very simple, and whether you want to turn a static ad into an animated ad, or would like to watch a cartoon hand wave back and forth on your web page, these tools are capable of accomplishing this.

In this Tutorial, I’m going to explain how to create a simple text fade in animation, saved as a SWF file (Flash file) using just Photoshop and Image Ready. I will also show you how easy it is to export your SWF animation and put it in your website. Although I’m using a very simple example (text fade) you can use these steps to accomplish any type of animation.

1. Open your Photoshop program, and click on “window” in the top menu. Make sure you click on the “animation” window, so that you can see the frames of your animation. You will see a long thing “animation” frame window appear at the bottom of your working space.

2. Create a new file, the size of the animation that you wish to produce.

3. Create a new layer, and do not type any text that you wish to fade. If you have some design elements that you want in the background of the text, or say, a background color that needs to be present before the animation initializes, go ahead and create those styles in this layer.

4. After you’ve created your blank (or somewhat styled) layer, go to your animation window, and click on the little arrow on the top right of the animation window. A menu box will fly out to the right, and select “new frame.”

4. Create a New Layer, and type in the text that you wish to fade in. You can then style the text however you wish: bevel, emboss, drop shadow, change the color, gradients, etc. This layer should have the text, style and look that you want present after the fade is finished.

5. Now you will see the text in both the first and second frame. But, you only want the text in the second frame. So, to achieve this, click on the thumbnail in your animation window of the first frame. Now, hide the layer with your text on it, only within this frame.

6. By now, you should have two frames. The first frame is an empty canvas (or, styled however you chose in step #3) and the second frame with your text in it and any additional elements that you want present when the fade is finished.

7. With these two frames open, and with the second frame selected, click on the icon that looks like many circles overlapping, located at the bottom of your animation window. If you roll your mouse over this icon you will see the label, “Tween.”

8. A dialogue box will appear with options for your tween. The drop-down menu for the label “tween with” should say “previous frame.” “Frames to add” will default to 5 frames, this will be fine for a simple fade animation. But, if you want to fade to be longer, add more, if you want it to be shorter and choppier add less. These other options should also be selected:

a. All Layers
b. Position
c. opacity
d. effects

9. Click “ok.”

10. You will notice that Photoshop has added 5 frames, fading from your original empty frame, to the final text frame. To preview your animation, click the play icon at the bottom of the animation window and you will view your entire fade animation in action!

11. Some options that you can adjust to get different fade effects are available. One, is the second’s option. Under each frame in the animation window, it should be at a default of “0 seconds.” Adjust this to .5 seconds or 1 second, and preview it using the play icon. This is up to your discretion, however you want the animation to look.

12. Now, to save it as a SWF file, which is the standard Flash format for animations, you need to bring it into Image Ready. Go to “File” and then scroll down to “Edit in Image Ready.”

13. You already created the animation in Photoshop, so now you only have to export it as an animation. Go to “File” scroll down to “Export” and choose “Macromedia Flash SWF.”

14. In this dialogue box, you can choose “Generate HTML.” The other options can be left at their defaults, but they are self explanatory if you need to change any of them.

15. Export! You’re done! You now have an HTML document with the Flash animation inside it, and a separate SWF file that you can embed into any other HTML document quite easily.

These instructions are for beginners, and illustrate the steps in creating a very, very simple animation. The “Tween” effect can be applied to any two images, or a blank canvas to an image, or any other use your imagination can come up with. Basically, it creates its own frames based on a beginning point, and an ending point. Have fun, and use these simple guidelines to create more dynamic animations of your own!

Open Source CMS Resource for php/mysql Based Opensource Software Systems

Opensource CMS Programs are used for many different web design purposes including (but not limited to): Forums, Blogs, Communities, Galleries, e-commerce sites, shopping carts etc. The opensource software is so attractive because it is FREE, and because it doesn't take a programming expert to configure it.

Anyone interested in using a CMS Opensource software program will most likely go through at least 4-10 different versions/programs until they have found the one that suits their needs. The reason why it is so difficult to intially decide the best opensource software program is because they are usually lacking in a complete, comprehensive set of documents that explain exactly what they do, and who should use them. But, for free software that normally would cost someone thousands of dollars, who's complaining?

Anyway, if you're looking into creating or revamping a website to use forums, blogs, community utilities, galleries, instant messaging, e-commerce sites, shopping carts, bookmarks (like digg.com or technorati), Opensource CMS programs is usually where you'll begin. This forum/website offers complete descriptions, user feedback, ratings and lists of all the CMS software available, where to download it and users who currently utilize the software.

The site is: http://www.opensourcecms.com/

To view a short review of MY favorite CMS program, and the one that I am currently working with visit my article: My Favorite CMS Program

A Website Dedicated to Helping you Make Money Online

Article about the best new program online. Blogitive.com

Blogitive pays the blogger, website owner, content writer, etc. for every post that they write. It doesn't have to be an article or even very long...Just contain the link specified in the instructions and you receive payment! This is by far one of the best opportunities for bloggers to make money off their blog instead of waiting patiently to monetize, affiliatize and advertise on their blog. The program makes it easy for any blogger to sign up and start making money of writing blog entries. You do have to be approved first, which isn't too difficult. And, after being approved, you're ready to go! Check out this article on the benefits of blogitive.com

Make Money

CSS Lists: CSS Tutorial

CSS List Items –The many elements and styles

List items are multi-functional and provide a lot of options for customizing and designing your HTML document. They are also very important to your mark up because they designate meaning within your code and provide emphasis to specific list elements by embedding them into proper list HTML code. In this article, I will discuss the essential methods of HTML and CSS list item design, how to format your HTML and CSS list items and multiple ways of designing your HTML and CSS lists.

Lists are used for many reasons within a web page. They can provide structure for web page link navigation, product lists and descriptions, song lists, article lists and basically any other type of list you might use for your web page design. It is very important to use the proper HTML format when constructing lists because of many reasons. First of all, search engines recognize list items as part of the hierarchy of significance. By placing important elements of your page within list item tags, you are easing search engines through your site more fluidly and more efficiently. Also, it is standard to structure HTML and CSS so that your content is functional. By this I mean that it is more comprehensive to have list items defined by list HTML markup, it creates structure within your page and the source is more readable. It also provides you with a more broad availability of CSS style options when you are attempting to change, edit or enhance the look and feel of your site.

A simple unordered list will look like this:

<ul>
<li>List item 1 </li>
<li>List item 2 </li>
<li>List item 3 </li>
<li>List item 4 </li>
</ul>

The <ul> tag encloses the entire list, and marks the beginning of an unordered list.

The <li> tag encloses each individual list item.

Both of these tags can have a CSS style attached to it. They can also be defined by a specific div in case you want the first, last, or individual <li> items to have different styles.

The list items, enclosed by the <li> tag, automatically create bullets to the left of each item. While the bullets are present in any browser that views your list, the way in which these bullets are created differ between browsers.

Internet Explorer and Opera create this bullet using a left margin, while Safari and Firefox create the bullet using left padding. This is important to note, because if you plan on adding extra padding, margins, customized bullets, or background images within your list items, the browsers will handle the elements differently. A simple fix for your list bullet inconsistently is to take the margin and padding down to 0, take out the default bullets and make your own bullets using background images.

ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}

li {
background: url(custombullet.gif) no-repeat 0 50%;
padding-left: 20px;
}

This CSS mark up works because it makes the image you choose as a background image within your <li> element and positions it in the middle of the <li> text and to the left of it. When creating your custom bullet, you should try and make it smaller than the text you are using, and also have it coincide with the rest of your site as far as color and design.

One of the most common purposes of a list is to provide structure for the navigation bars within your web page. A simple navigation bar using lists will look like this:

<ul>
<li><a href=”home.html”>Home</a> </li>
<li><a href=”about_us.html”>About Us</a> </li>
<li><a href=”products.html”>Products</a> </li>
<li><a href=”contact.html”>Contact Us</a> </li>
</ul>

This list within your HTML document, provides you with three separate elements to work with within your CSS design.

<ul>
<li>
<a>

All three of these elements can be style differently and creatively so that your list is unique to your site, simple and clean. Here is an example of list style design:

ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}

li {
background: url(custombullet.gif) no-repeat 0 50%;
padding-left: 20px;
font-family: verdana;
font-size: 11px;
font-weight: bold;
color: red;
}

li a {
text-decoration: none;
color: red;
}

NOTE: By default all <a></a> tags automatically make the text a bright blue color and underline it. This is because most links look this way within browsers, and it lets the user know that, “hey, here’s a link.” But, you will probably have your own idea of what you want links to look like, so it is essential that you set your “text-decoration” attribute to “none” so that you can decide how to custom design your links.

This is a very simple example of how to design an HTML list with your web page. Lists can perform all kind of functions in and of themselves by using simple CSS. I will be providing tutorials on CSS rollovers and creative use of background images in your list items.

Joomla: My Favorite CMS Program

I recently tested out some CMS programs out there, trying to decide which one was for me...

First I tried PHPAPP...Nice fellows who developed the program, I mean, it is open source! But, not really what I was looking for. It was difficult to manage, not aesthetically pleasing (also not easy to change look of site) and the plug-ins and add-ons were very difficult to configure. So, uninstall, on to the next one.

I tried Drupal. Whoa! What a great program Drupal is, so many features, so many plug-ins, so many links links links! I was looking for a program that I could easily manipulate. Drupal has a separate link for absolutely everything, the navigation is horrible, and if I can't even work with the navigation from the front-end of the CMS program, I'm up and out. Uninstall, on to the next one.



Joomla. Oh, Joomla, How do I count the ways? So friendly, so pretty, so talented...Yep, I'm sticking with Joomla. One of the greatest things about Joomla as a CMS Program is that for plug-ins and add-ons that normally require some back-end adjustments, Joomla allows completely front-end upload for all of their add ons! You download the zip from the featured list of add ons, then simply upload the zip file into the module or component area of the site. AMAZING! It looks great, comes with great features, easy to manage, inuitive navigation. Joomla, you had me at hello...

Capella Online Distance Learning

Want to go back to school, but don't want to leave your house? Capella University offers accredited degrees through coursework taken ONLINE! This is absolutely amazing, and after working from home for so long, I'm not sure I would want to go back to school any other way. Technology has come a long way in developing the way we look at work, advertising, and an accredited college education. Through Capella University you can receive a Graduate degree in programs in business, information technology, education, human services, and psychology. You can receive a bachelor's degree in business and information technology. Capella University also has over 76 different specializations within these graduate and bachelor programs.


The program is popular--16,000 students from all 50 states and 63 countries are signed up with Capella University to receive accredited degrees while taking a full or part-time course load ONLINE! Capella University stays committed to excellence within their educational programs, and they're also devoted to the student's growth as professionals in a business environment. Visit the Capella University website and start working towards a degree through Distance Learning. If you've ever wanted to go back to school, or want a more convenient and well established program that allows you to take classes online visit Capella University and learn about this amazing Distance Learning program.

Top 10 Ways to Clean Up, Organize & Save Space On Your Hard Drive

Technology Tutorial: Hard Drive Clean Up and Organization

If your computer is running slower these days, or freezes up when you have too many programs running, you might need to reorganize your hard drive. Even if your computer runs smoothly right now, it is still beneficial to know all of the space saving techniques that you can use to make sure your computer is clean, easy to navigate and in it’s best possible condition. Before you begin, take a look at the current disk space you are utilizing and how much free disk space you have available.

Go to “My Computer”

(PC Users) Right click on “C Drive”

Go to “Properties”

In the General tab, it should give you pie chart and information regarding the amount of free space currently available on your hard drive. If your free space is less than your used space, it is important that you make sure you are maximizing your computer’s performance by cleaning up your disk. Here is a list of ten ways to clean up, organize and save space on your computer’s hard drive.

1. Save space on your hard drive: Disk Clean Up

In the “Properties” dialogue box that you checked out by right clicking your “C Drive” folder, again, go to the “General Tab.” Click on “Disk Cleanup.” After this function has scanned your computer for available space, it will present you with another dialogue box. Here, you can view the files that are currently available to be deleted without causing problems on your system. These types of files include: Temporary Internet Files, Recycle Bin and can even compress your older files. You can click on each item, and view a brief description of what their purpose and reason is for being on your system. If it says, “You can safely delete these files” definitely check mark these items. The other items you will have to use severe discretion, as once they are deleted they will not be available again. After check marking the files you want to delete, click on “Clean up.”

2. Save space and organize your hard drive: Defrag your Computer

In the “Properties” dialogue box that you checked out by right clicking your “C Drive” folder, go to the “Tools” tab. Click on the “Defrag Now” button and your computer will analyze the space and information on your hard drive. After this, it will let you know if you need to defrag. If it recommends that you defrag, go ahead and do this. Nothing will be deleted, but your computer will maximize all the information it has on it by reorganizing the files.

3. Save space on your hard drive: Delete old or unused Program Files

Go to your control panel; Open up the folder entitled, “Add or Remove Programs.” Your computer might take a couple minutes to list your currently installed program files. Once it compiles the list, look through it and observe carefully the amount of space each program is taking up, how often you use each program, what company the program was downloaded from, and the name of the program. Do not delete any program that you aren’t aware of its use. It could possibly be a very important windows program that you aren’t aware is running to ensure proper computer functionality. But, if there are old, unused programs that you do not plan to use any longer, or do not need, go ahead and remove these programs.

4. Save space on your hard drive: Invest in an external hard drive

External hard drives are a great resource for anyone and everyone. They provide a great way of saving space on your computer by allowing you to transfer old, rarely used files that you may want to access later, onto another hard drive that will store them safely. Another great use for a hard drive is for back up purposes. An external hard drive will not get a virus, so by transferring important files onto it; you are guaranteeing a safe back up of all your documents.



5. Save Space on your hard drive: Zip it up!

Zipping up your files is basically a way of compressing your files into very, very small files, while keeping them easily accessible if you ever need them. There are many ways to do this, but the most common and easy way is to use a program like “WinZip.” You can get a free version of this program at:

Winzip Archive Utility

It advertises as a free trial, but, between you and me, you never really have to purchase the full version. The evaluation version will work fine.

Good files to zip up are documents and files that are important, but you do not need to access very often. If you need these files at least once a month, don’t archive them, because it will become a hassle trying to open them back up all the time. Take the files you don’t need to use all the time, zip them up into pertinent folders, and delete the originals. Anytime you need to use the files, simply unzip the contents of the folders and enjoy!

6. Save Space on your hard drive: Save onto Data Disks

Saving files onto data disks is not the ideal scenario, as you can’t really fit all that much onto them, and they cost money. But, if you first zip the files up that you’re going to transfer onto the data disks, then you will be able to fit more information onto them. After that, you can go back and delete all the files from your computer. Personally, if you’re going to purchase data disks, and go through the trouble of transferring files onto them, it would be better to invest into an external hard drive. They will hold more information and be easier to work with.

7. Save Space on your hard drive: Music Files

Music files take up a ridiculous amount of space on your computer. By transferring these files onto an external drive, zipping them up, or burning them all onto data disks you will free up an exorbitant amount of space.

8. Organize your Hard Drive: Delete Files from your Desk Top

Having too many files on the desk top of your computer can feel cluttered and obtrusive. If you work on the computer, or use it for any time at all, you will feel all warm and fuzzy inside by deleting or moving the files from your desktop and putting them into files within your “My Documents” “Pictures” or other directories within your computer. It will also help you to access the files more intuitively and stay organized.

9. Organize your Hard Drive: Book Marks

This isn’t necessarily related to your hard drive, but it is refreshing to have a nice set of organized, well titled and descriptive bookmarks in the browser that you prefer. Open up your book marks, and properly title, organize in folders, delete unused links and view all your book marks. This will also take some time, but will probably save you time in the long run, by finding the sites you need right away and with ease.

10. Organize your Hard Drive: Delete, Rename and Organize your Folders

On your computer, the top tier of folder should be: My Documents, My Pictures, My Music, Program Files, Temp, and Windows (or whatever operating system name or designation is here.) There may be some others depending upon what you have downloaded onto your system, like PHP, APACHE or others. Under these folders, you should do your best to organize, delete, rename and prioritize your files so that you can access them as easily as possible, and as intuitively as possible. It may take some time, but it end up saving you time in the long run; instead of searching through your whole computer for a file or folder, you’ll know exactly where it’s at. Also, by doing this, you might find folders and/or files that you can safely delete. DO NOT delete any files or folders within your windows or other operating system directory. In fact, don’t even go in that folder unless you are an experienced operating system professional.



More Resources:

Winzip Archive Utility Free Download



Recommended Magazine Subscriptions:

• Computerworld Magazine


• Computer Graphics World Magazine


• Computer Shopper Magazine


• CPU Computer Power User Magazine

Web Design Tutorial: Creating Simple CSS Rollovers

One of the greatest things about CSS (Cascading Style Sheets) within HTML, is that you can create some interesting effects using simple style sheets and a static HTML web page. When CSS first came out, it’s purpose was only to separate the style of a web page from it’s actual content, making the content more accessible, cleaner and simplified. But, because of the advancement in HTML standards, and the creative individuals who found new ways of utilizing CSS, it is now possible to create drop-down menus, link rollovers, image rollovers and text generating rollovers.

In this tutorial I will describe the process of implementing text and image rollovers within list items using only HTML and CSS. No Javascript will be harmed in this tutorial! If you have no background in CSS, it would be beneficial for you to read my Beginners Guide to CSS

You can also learn more about the CSS list items used within this tutorial in my Guide to CSS and HTML Unordered Lists

First of all I would like to cover some basic background information regarding the accessibility of CSS rollovers. You don’t need to fully understand the following information to use this tutorial, this is just a heads up to help you understand the other ways you may be able to utilize CSS, and assist you in grasping the concepts more fully.

To date, cross-browser rollovers can only be assigned to the link element within your CSS. This is the text/image held within or by the tag.

The examples I am going to use as CSS selectors are called Pseudo-Classes. These selectors are used to add some different and more advanced effects to your HTML web page. You can learn more about all of the Pseudo-Classes and their compatibility at the W3Schools CSS Link

This tutorial is only going to use the Anchor Pseudo class element. Anchor Pseudo class elements can only be used on the ‘a’ element of your CSS, but in CSS2 (which is not currently cross-browser capable), you can use many more selectors as Anchor Pseudo Class elements. Now, on to the tutorial.



1. Create a new HTML document, with all of the necessary DOD, head and body tags.

In this tutorial, we are going to place the CSS code inside the head portion of the document, as opposed to attaching it separately.

2. Start by creating the basic HTML of the list elements that we are going to create rollovers for.

• Home


• About Us


• Products


• Contact Us

This is a simple navigation list example, because the majority of rollovers are used for navigation or links. The entire navigation is held within a div container titled “mynavigation.” The ul element is defined by the ID element “navmenu.” The next example has the CSS and it should clarify any confusion that you might have. You can use your imagination through this tutorial if you want to apply rollovers to other ‘a’ elements.

3. Creating the CSS

The styles will go in between the portion of your document.

#mynavigation {

width: 200px;
}

#mynavigation ul {

margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: verdana;
}

#navmenu a {

display: block;
padding: 3px;
width: 160px;
background-color: #000000;
border-bottom: 1px solid #ffffff;
}

#navmenu a:link, #navmenu a:visited {

color: #ffffff;
text-decoration: none;
}

#navmenu a:hover {

background-color: #D5D0CD;
color: #6D7A73;
}

This is going to create a box, 200px in width around the entire navigation. Each link (between the elements) is displayed as a block, with a background color of black, and text color of white. The rollover state will produce different colors for the background of the block and the text color, shades of grey are used in this example. The Anchor Pseudo-Class elements are


* a:link - Applies the style to a link that has not been visited

*

a:visited - Applies the style to a link that has already been visited


* a:hover - This is where your rollover comes in. This style is only applied when the user rolls their mouse over the link.

- This is where your rollover comes in. This style is only applied when the user rolls their mouse over the link.

In this case, when the user rolls over the link with their mouse, the background color of each link and the link text will change color. You can see an example of the two states of the links in the picture supplied. Experiment with different colors, try it for yourself in a simple .txt document or in your favorite web page design software.

This is a basic example of using rollovers to enhance your web page. You can apply these rollovers to any element, and you should experiment with different colors, styles and sizes on your own.
More resources


* W3 School's CSS Pseudo Classes

* CSS2 Reference