There are a number of CMS packages available “off-the-shelf”, and completely open-sourced, as in, there are no mandatory sign-up fees, or monthly payments to worry about. Any decent hosting service these days will have easy-install packages available to quickly launch a blank (or standard) version of these packages. Now, that sounds easy, but there is a lot of work usually involved from that point on to get your new site to look like you want, and do what you want. But once configured properly, appropriate and functional for your business or organization, a website should be very manageable in terms of deploying updates of timely and relevant content.

Of the many content management systems, the most popular are Drupal, Joomla, and WordPress, not necessarily in that order. Drupal and Joomla have been regarded as full-fledged CMS packages for quite some time. WordPress is now widely recognized as such, but is later to the game that the other two. WordPress began as a much simpler blogging software. But with the addition of static pages, navigation menu systems, and categorical post system, began taking on many of the characteristics of the more recognized CMS packages.

WordPress is generally recognized to be easy-to-use. Conceptualized as blogging software, it was designed to easy to use by the general consumer, not web professionals. It needed to be used effectively by writers, who may know there way around a word processor, but have not the faintest clue of web design and development. But as WordPress has gained so much in functionality from its early days, its ease-of-use has remained.

In contrast, the other CMS packages, Drupal and Joomla, were designed to be content management systems from their origin. Designed by web developers for other web developers, these systems interfaces tend to be on the “geeky” side, often confusing, not nearly as intuitive as WordPress.

But regardless of my personal preferences toward CMS packages, there is no denying that every package mentioned above is well-represented in the world of website design and development, as these systems are used by large corporations and small mom and pops alike. For instance, many of the online magazines are built using these systems, since they were all originally designed to categorize content, exactly what a magazine does. But that is not all, with plug-ins and possibly additional features custom-written by programmers, CMS packages can be modified and molded into almost anything you can imagine.

Another advantage of using these systems is that they are open-sourced, that is, basically free. You will always encounter developers trying to sell different plug-ins or specially designed themes for these packages, but the underlying structure is always free for anyone to use. And there are many free plug-ins and themes as well, so you don’t have to spend any money on these things if you don’t really want to. But if you do end up spending money, it is usually not very much, and it most likely is a one-time fee. I will very often shell out a few bucks for a desperately needed feature, but never do I sign up program where I will be charged regular fees.

In comparison to these open-sourced CMS packages, there are many advertised content management systems that are proprietary, developed and controlled by a large corporation, that require some sort of regular, ongoing payment. Though small, this fee will continue until the large corporation has made quite a tidy sum from you, and from everyone else enlisted in their program. These systems are limited to the software developed by the corporation, whereas the software developed by Drupal, Joomla, and WordPress are literally worldwide communities, all working in the common language of the internet to provide unlimited possibilities. You may even work with your own developer to create a brand-new plug-in feature, if you can’t find the one you need, or does exactly what you want. But even this expense will be a one-time deal.

And that is where Outward Image can be of assistance in getting your website project off the ground, and helping your business grow. We can discuss what type of content you need to manage, and work out easy-to-use solutions to allow you to manage it efficiently. We can discuss useful features, and you will be aware of all the costs right up front. And once its done, you should be able to manage it yourself for its life, for free, except for hosting and domain name fees, of course.

Though the cost of the initial development of your site may seem expensive, it is truly a minimal cost in the life of your business, and considering the benefits of a well done site can bring to it, the real expense becomes even smaller. So the right question may not be, “can I afford an effective website for my business,” but rather, “can I really afford not to have an effective website for my business.”

There is a huge discrepancy between the skill level, and the overall quality of web designers and developers. Web designers of different skill levels may be capable of providing high quality service, as long as they only promise what they know they can deliver competently. Because lets face, all websites are not created equal, and for their particular purpose, a designer may possess the ability to deploy specific software packages that enable a website the functionality requested by the client. And as long as that proves to be an effective solution for the client, it ends up being a good deal.

To protect themselves, clients looking to have a website designed and developed for them, must make sure that the designer/developer has the skills to achieve their desired objectives. Have the developer demonstrate desired functions on sites that he/she has worked on in the past. This will what they see as a practical solution, and also will show their experience, bad or good.

Of course, to adequately judge whether a developer has the skills to build your website, you must first know what features would help your site accomplish its goals, and/or serve specific functions that make your business more efficient. So before you ever decide to look for a developer, you must first identify the site you are trying to build. Is it an e-commerce site, is it some sort of social network type site, does site perform a service to paid subscribers, or is it a business or organizational site, meant to share general information about your business with your clients for members. These sites are often equipped with ways to update specific information, specials, etc., on a very regular basis. And they may have some online product sales as well.

Many small businesses can have attractively designed, and with features that are quite useful in communicating your message to your customers through your website. Open-source technologies that experienced developers can use and integrate into your site that will provide many useful and easy-to-use solutions to communicate your message. These site will rely on open-source structures that can be molded and adapted into the configuration your specific sites need.

Where the real programming heavy-weights are needed, is in the other types of sites mentioned. A corporation with thousands of product on an ecommerce site, let’s say, is going to need a very sophisticated, and most likely, a custom programming structure that is going to account for very complex mathematical calculations, customer interactions and tendencies, buying behavior, etc.

Social networking site are also very complicated as they have to manage relationships, and any site like this is going to be very innovative to make any dent the current list heavyweights. Likewise, any site designed to perform a service, whether it be an education site, and legal advice site, are going to have very specific programs designed to handle what that business model requires, and it better be something that no one has already done, or it has no chance.

Conversely, many small businesses or organizations have the need for many of the same functions on their websites, mainly in regards to communication. These clients need marketing platforms that can maintain constant communication with clients to maintain their retention. If your clients find your site, or more specifically, the information you choose to display on your site useful, it will benefit your business immensely.

For sites like these, Content Management systems can often adequately do the job, and are adaptable enough to make similar functions service different requirements from specific clients. Packages designed to integrate an event calendar, or a scheduling solution, may have a plethora of display options in terms of data fields, and aesthetics. There simply would be no need to design a custom event calendar when such capable solutions are available at the ready.

For the person looking to have a website developed, it is important to some research, but don’t looking for developers. Start researching other sites similar to yours, and try to dissect them a bit, find out what useful features these sites have that you might useful on yours, and that fits nicely with your specific business or organization. If you have a good idea of what you want in a website, it will be easier to make an assessment of prospective developers, based on their work and how it matches what you are looking for.

The disadvantage with open-source solutions are not ready out of the box, and require some experience to really get the most out of what they have to offer. There are many features available within the community, but some are certainly better than others, and not all of them will everything you desire. So there is a fair amount of experimentation and testing that goes into finding stable plug-ins that do what you expect.

There are open-source designers and developers, however, that can do the necessary work to establish a site with useful and stable features. They have done this experimentation to a high degree and can offer packages that allow the website owner to take control of their site once it is designed and configured by the developer. These sites will cost more up front for the website/business owner, but will cost less in the long-run vs. a packaged website product from a large, national company.

Once a site is built, there may be other features that can be added later on. Website owners may learn how to add additional plug-ins to their site, or may ask their original developer to install the new feature. There would be a charge for installing the feature, but again, no other fees endure upon the life of the site. All costs for development can be one-time expenses as the site increase in size, features, or both, as long as the day-to-day updates can be taken care of by the owners of the site.

At Outward Image, we strive to ensure that all the sites we build are easy for the owners to edit, especially those areas they designate as crucial for the better functioning of their core business. A website should be an aid to business, and any site that is useful, is usually one in which the content is updated regularly.

So don’t get trapped in paying “low” monthly fees to a large website company. Get the versatility of an open-source designed and built specifically for you. The extra expense at the beginning will be offset in no time by a lack of those monthly fees. And you will end up with a more custom, fitting solution to your specific business.

Here is an example of some HTML code set inside a div:

Click the following link to see how this code would display in a browser window.

You can see by the popup example that the image of the boat (<img src=”http://outwardimage.net/blog_examples/boat-homepage.jpg” />)ended up on the right side, as it was designated to “float” to the right (float: right;) inside the div called “imagefloatright”(<div id=”imagefloatright”>).

The div is set inside the HTML using this format:

The div has an opening and closing tag like all other HTML. The div needs the id to designate it from other divs. You can name a div anything you want, but you should name it something relevant to what is going to be in the div or where the div may be placed on a page. Any text or other content is placed between the opening and closing div tags, and is carried along with the div wherever it goes.

In the example, the content is an image, placed between the div tags.

The div is referenced in the CSS code by using a # symbol for a div. So in the head section of the HTML code, between the CSS style tags, the div is designated in our example by:

The elements that you place within the {} symbols are the style properties that the div will be assigned, thus affecting how that div displays.

Again, in our example, the CSS code looks like this:

Each one of these lines is called a CSS declaration. A declaration consists of a property and a value. In the case of the first line, the property is “float” and the value is “right”. All CSS declarations are written in the same syntax. Following the same example, each declaration begins with the property to be defined (float), followed by a colon (:), a space, then the value (right), and then finally a semi-colon;

The other declarations are pretty obvious as to what properties they control. The div is exactly 200 pixels wide by 200 pixels high, a perfect square.

With CSS, sections of a web page can be sectioned off and given certain characteristics, like width, height, background color, etc. Some of these sections can be directed to “float” to the left, or to the right. CSS greatly simplifies the code, and makes edits later on much easier to implement. CSS is much more readable than complicated table structures.

With CSS, you can put sections within sections, similar to way you can put tables within tables to create a layout. Yet, when this is done with CSS, the sheer volume of code is greatly reduced, and the remaining code is simpler and easier to read.

Besides losing all the table code (<tr>, <td>, etc.), you lose all of the descriptive code that is required when not using CSS. All that code is located in its own area, either within the head of the html document, are in an additional .css file, that is referenced inside the html page head.

Another advantage of using Outward Image is price. Our prices often rival the prices at most D-I-Y online print outfits, yet the work you get from Outward Image will not be from cookie-cutter templates. Your designs will match your identity with high-quality custom work.

We work with our customers to ensure they are happy with the final product. You see the designs before you commit to the final job. You don’t pay anything until you are happy with the digital files that will represent your final, finished job. You simply can’t go wrong, so give us a try today.

Before I get into CSS, it may be helpful to see how tables work. Tables use a series of tags in combination, somewhat like the lists used tags in combination. The first set of tags tag is simply <table></table>. As one might expect, the <table> tags are wrapped around the entire table. Inside these tags there will be two other sets, <tr></tr> and <td></td>. The <tr> tags represents rows, and the <td> tags represent cells within those rows.

Here is an example of the structure:

This table example is extremely simple. There are also ways to combine cells within rows or columns.

In the example above, by adding …colspan=”2″… to the first openingtag in the row, html combined the the cells across the two columns of the table to make one cell. The second set of

tags are removed as all the columns of the table are accounted for, and is not needed.

With the last two example, one can start to imagine how tables can be manipulated for the purpose of the layout of pages. We can imagine regions set aside for headers, or columns running down one side of the page. Now imagine putting tables within cells. That’s right. If I were to take one of the above examples, and then place an entire table and place it within one cell of another table, the code would look like this:

At this point it should be apparent that this method could indeed created many possibilities for the layout of a page. But it is also true that this type of structure can get very complex very quickly. The code soon gets to be very confusing and hard to read. When nothing else existed to aid in the layout of web pages, tables were the answer. Today, however, there is a much better way—table-less CSS, cascading style sheets, which I will cover in my next post.

Tables do have a purpose, however, and that is to display tabular data. If you have a data set that is best displayed in rows and columns, tables allow you to do this in a neat and orderly way, just like table functions in other page layout or word processing programs. There is no tab function in html, so tables are the only to get information, through cells (<td>), to line up in a way that makes sense to the website visitor.

So tables are a great way to display data as a separate element within a page, but should never be used as the layout structure.

In order to specify the list items, they are wrapped in <li> </li>, for “list item”. The finished code for an ordinary list with a heading might look like this:

Displayed as:

Shopping List

• bananas
• tomatoes
• cereal
• rice
• dog treats

Now an ordered list:

Displayed as:

Shopping List

1. bananas
2. tomatoes
3. cereal
4. rice
5. dog treats

But first what does an HTML tag look like. An HTML tag is an identifier surround by the symbols <tag> and <tag/>. Every element has an opening tag, <tag> and the closing tags < />. You can recognize the closing tag by the additional / before the last >.

A basic web page is constructed somewhat like this:

Everything between the <html> and </html> tags is the entire page. Everything between the <head> and </head> tags contains vital information for the site to display and perform properly. Everything between the <body> and </body> tags is the visible part of the web page. You should also note here that <head> and <body> sections of the web page are contained within another tag, <html>. You will see this pattern repeatedly as you build web pages.

Here is another example of a simple HTML page. You will notice that now within the <body> tags, there now appears two more sets of tags that contain specific content. The first set of tags are the <h1></h1> tags that contain the headline, and a set of paragraph tags (<p></p>) containing the first paragraph. All web browsers have automatic settings for these tags, so simply by using these tags alone with no other information, any web browser will render these tags properly. Other standard tags are the subheadings (<h2></h2>,<h3></h3> thru <h6></h6>.

When this page renders in a browser, the only thing visible to the reader is the content between the <h1> tags and the <p> tags, as shown below:

This is a Headline.

This is the first paragraph.

Another tag is the <blockquote></blockquote>. This tag offsets its content from the rest of the text. People will recognize this as a callout, quote, highlight, etc. of something you want your audience to pay special attention to, usually something from the text itself.

All of the tags so far have been in some from of a paragraph, that the tags used separated the content inside it from the content inside the other tags. There are other tags, however, that can be used specifically on the content within the tags, such as for bolding and italicizing text. You can use the <strong></strong> tag for bolding text, or the <em></em> tag for italicizing.

Again, the following is how the code above would looked rendered inside a typical browser:

This is Headline.

This is the first paragraph.

This is the blockquote.

This is the second paragraph.

This is a second-level headline.

This is the first paragraph after the second-level heading

You can try this out yourself if you have a text editor that can save files in the html format. Simply paste the code above into the text editor, save it appropriately as an html document, and then open it with a web browser. You should see very similar formatting as the formatted text you see here.

What makes Weaver special is that it allows the user a multitude of intelligent choices to alter the design of the site. A beginner can simply make the choices it gives, in terms of color, size, special effects, etc. Plus it has many functional aspects, such as what ancillary info about each post you want to display, hiding titles and tags you may not want to display, and so forth. In essence, it allows you to make a WordPress site look more like a website, and not a blog. And, of course, you can still have a separate blog attached to the site.

More advanced users can use its many options in regard to adding, or altering the CSS of the site. Many of the nodules for affecting the appearance of the site, also have optional dialog boxes that allow for additional CSS code. This is a huge plus in the ability to position and size things the way you want. And it doesn’t stop there. There are additional codings areas for the head area of the site for additional CSS styling, Google Analytics code, and other features you may need to add.

Through my next series of blog entries, I am going to concentrate on showing the beginner how to successfully operate a WordPress site. I will start with some basics, though, about how HTML and CSS work, and how they work together. I will demonstrate later in the series how you can use html and css in your WordPress theme, but more specifically, a site with the Weaver theme installed.

Anyone with an active WordPress site should be able to install the Weaver theme any time they want and just start adjusting the settings. If you know HTML and CSS, you should immediately recognize the nature of this theme. In making its choices of settings to choose, the developer did it with design at the forefront. If you don’t know HTML and CSS, there will still be plenty of variables and design choices, right at your fingertips. Come back to learn about HTML and CSS though, as it will only enhance your experience greatly.