Cross-browser Absolute Positioning PNGs

With the new Web look spreading through every site new and old, there are a lot of times when you want to use absolutely positioned pngs on your site.

The 2 problems we face. The first one is that the PNG format is not fully supported on all browsers that are in use today. The way we handle that is with a simple include into the main template file of your site.

Here is where you can get the javascript file click here.

Include this file into the header of your main template file:

<!--[if lt IE 7]>
        <script type="text/javascript"
        src="/resources/unitpngfix/unitpngfix.js"></script>
<![endif]-->

This is a hack to tell the browser to include the”unitpngfix.js” file if the browser is IE 7 or below.

The next problem is that IE positions things differently. We will be using a similar hack to go around this problem. Here is how the code will look.


<!-- Floating image -->

<!--[if lt IE 7]>
  <div style="position:relative; margin-left:-800px; margin-top:0px;">
<![endif]--> 

  <div style="position:relative; margin-left:0px; ">
  <div style="position:absolute; clear:left; left: -50px; top: -59px;
  margin-left:0px;">
  <img src="yourimage.png" width="332"
  height="178" style="clear:left;" />
  </div>
    </div>

<!--[if lt IE 7]>
  </div>
<![endif]-->

All you have to do is add your image path and then change the values in the “left” and “top” to adjust the position of the image. You will have to adjust the values in the “if It IE 7” section while looking at the image in Internet Explorer 6 or 7.

I hope this helps anyone who is having trouble with absolutely placing PNG images for cross browser compatibility.

30 Part Flash CS4 Basics Tutorial

In this Flash CS4 tutorial you will learn the basics of Flash CS4 animation. You will familiarize yourself with the Flash CS4 workspace and learn how to use the various tools in order to create a Flash animation.

Flash has many applications in the web world. Flash can be used for advanced motion graphics and animation. Flash can be seen used for interactive ad banners, portfolio sites and advanced online programs. Learning the basics through these tutorials is a great start to becoming pro.

Flash CS4 Tutorials

  1. Flash CS4 Tutorial
  2. Introduction to flash CS4 authoring environment
  3. Panels and Panel workspace in flash CS4
  4. Drawing in flash CS4
  5. Use of polystar tool in flash CS4
  6. Object drawing Mode in Flash CS4
  7. How the Line tool, Pencil tool, brush tool and pen tool work in in Flash CS4
  8. How to use Ink bottle and paint bucket tool in flash CS4
  9. How to manage layers in Flash CS4
  10. How to make an image big on rollover in flash CS4
  11. Creating Mask in Flash CS4
  12. Moving Ball Animation in Flash CS4
  13. How to create a shape tween in Flash CS4
  14. How to create a motion guide in Flash CS4
  15. Learn how to create a bouncing ball in Flash CS4
  16. Learn how to put multiple classic tween on stage at the same time in Flash CS4
  17. Learn Complex Text Animation in Flash CS4
  18. Learn Create Animations involving Masks in Flash CS4
  19. Learn to create a movie clip that fades as the user moves the cursor away from it in Flash CS4
  20. Learn to create cloud animation in Flash
  21. Learn to import sound in Flash CS4.
  22. Learn 3D Art in Flash CS4.
  23. Learn to create a customizable pop-up window using Flash CS4.
  24. How to create a pop up window in flash CS4 using javascript
  25. How to get an url in a blank window in a flash CS4 action script
  26. How to get an url in a blank window in an xml file
  27. How to put your favorite icon in the browser
  28. How to create a scroll bar in Flash CS4
  29. How to create a basic layout in Flash CS4
  30. How to load pictures in flash CS4 dynamically using the loader component

18 Simple Dreamweaver CS4 Basics Tutorials

In this Dreamweaver CS4 Tutorial you will learn how to create a basic website using Dreamweaver CS4.

You will learn how to Define a site, Create a template, Design your template page, Design your css style sheet, Insert Editable Regions , Create the pages of your site using the template, Link all the pages together, Create a form, Check your site in the browser and, Upload your site and make it live.

Dreamweaver CS4 Tutorials

  1. Dreamweaver CS4 Tutorial
  2. Define a New Site in Dreamweaver CS4
  3. Create a template in Dreamweaver CS4
  4. Design your template in Dreamweaver CS4
  5. Design the CSS Style Sheet in Dreamweaver CS4
  6. Insert Images in Dreamweaver CS4
  7. Creating the Menu in Dreamweaver CS4
  8. Content in Dreamweaver CS4
  9. Insert Editable Regions in the Dreamweaver Template
  10. Dreamweaver CS4 Template Based Web Pages
  11. Formatting Headings in Dreamweaver CS4
  12. Formatting Images in Dreamweaver CS4
  13. Linking pages in Dreamweaver CS4
  14. Forms in Dreamweaver CS4
  15. Dreamweaver CS4 Form Validation Tutorial
  16. Tables in Dreamweaver CS4
  17. Testing the Website in the Browser
  18. Upload your site with Dreamweaver CS4

View all the tutorials here.

Creating a website with WordPress

Creating a good website with wordpress is very easy once you have the right direction. In this article I will give you the basic steps to starting up a website/blog with WordPress.

First things first before we begin. WordPress is not the ony content management system for blogs/websites — there are many others. I prefer wordpress over anything else due to it’s simplicity and ease of updating and adding plug in functionality.

WordPress was originally designed for the creation of blogs. A lot of websites are centered around the idea of a blog which is new articles published frequently. For most websites to do well they need to provide constant valuable information at a decent rate. If you put up a couple of pages on a website and leave it at that, most likely your website will drop from the search engines and disappear.

I love the idea of building a website around WordPress and I am working on numerous other websites using it.

WordPress Basics

A WordPress website consists of these main things:

  • Posts
  • Pages
  • Categories
  • A Template

This makes WordPress simple to understand.

Posts: posts are articles written that fit into a category. Posts have an Author, A Published Date, A Title, Content, Tags and Comments.

Pages: Pages are basic articles that are linked to directly. Examples of pages are “About Us”, “Prices”, “Contact Us”, etc. In WordPress, posts and pages are different. Pages have an author, A Published Date, A Title, Content, Tags and they can have comments. Pages are generally directly linked to and are not part of any category.

Categories: categories separate posts into understandable divisions. Examples of categories are: Blog, Photoshop, Funny, etc. Categories help people find posts that they are interested in. Categories can have any amount of sub categories. An example of this is a category of “Computers” can have a sub category of “Windows” or even “Troubleshooting”.

A Theme: every WordPress site has a theme. A theme decides how to show your posts, pages and categories. A theme can also have any number of additional content, like a sidebar or a menu, etc. These are also called templates.

Tags: tags are keywords for posts and pages. Keywords also help people find an article or page that they might be interested in. It is very important to add tags to your posts so that people can actually find them. Some blog systems don’t differentiate between tags and categories.

Comments: comments are very important to a blog. Each post can have comments on it. Comments can be a suggestion, a question regarding the post, or request for clarification. Comments constantly update the post with additional content and help create more interest in your post.

Author: and author in wordpress is the person who wrote the article. In a WordPress site, there can be numerous authors writing posts. It is good to have numerous authors for a blog so that one guy isn’t staying up all night updating the blog.

These are some of the basic things you need to know to work with WordPress and to be succesful with what you are trying to do. We will now talk about how to set up a wordpress blog with ease.

Building Steps

Step 1: Get a domain name and hosting service.

An example of a domain name is “www.techassistnow.com”. A domain name is always unique. A hosting service has many computers to hold information, you will need to set it up so that your website and all of its data has a place to live.

I will tell you how to set these up for the hosting provider that I use. The hosting provider I use is called “1&1“. Using this domain name checker, check if the domain you want is available. If it is, then purchase the hosting option you want. I recommend 1and1 beginner if this is your first website.

For any other hosting provider, read the instructions on their website. In any case, you want to make your your hosting has PHP and mysql.

Step 2: Collect the necessary info from your hosting provider

Once you have a domain name and a website host, you should now have this basic information:

FTP Host:

FTP Username:

FTP Password:

Database Host:

Database Username:

Database Password:

Having this information is neccesary to starting your wordpress site. Once you have this information, continue through these steps. If you don’t have a database, contact your hosting provider on how to create a database.

Step 3: Download & Install WordPress

To download WordPress click here.

A very simple guide to installing wordpress click here.

Step 4: Customize with themes and plugins

Plugins

Installing plugins is very simple, you just go to the “Plugins” menu and click add new. Then you can search for the name of the plugin and install it right from WordPress. You can also download the .zip file and install it that way by clicking on the “Choose File” button.

Here is a list of the fundamental plugins you should have:

  • All in one SEO Pack: This plugin sets up WordPress for Search Engine Optimization. Download it here.
  • WP-Cache: This plugin greatly increases the speed that your WordPress site loads. Download it here.
  • Askimet: This plugin detects spam comments and is very important. Download it here.
  • Contact form: Every website has a way to contact the website editors. This plugin makes it very simple to have complex contact forms for this purpose. Download it here.
  • WP-DB-Backup: Allows you easily to backup your core WordPress database tables. This is a very important plugin for protecting your website from being completely ruined. I recommend it for any WordPress installation. Download it here.

There are a lot of additional useful plugins that can be used. I will list some of them here so you get an idea of the possibilities.

  • Broken Link Checker: Checking broken links can be annoying to you and your public. This plugin makes it simple by checking images and links if they are broken. If so,  you are notfified. Download it here.
  • Google XML Sitemap: This plugin creates an updated xml sitemap for Google. Good for SEO. Download it here.
  • Sharethis: great for adding social marketing buttons to all of your posts. Download it here.
  • WP ECommerce: Turns your site into an online store. This is just an example of a plugin that adds a whole store to your wordpress site for free. Download it here.

As you can see, there are many WordPress plugins. You can pretty much get a plugin for anything you want to do with WordPress.

Themes

Installing themes is very simple with the newest version of wordpress. All you have to do is go to the “themes” menu and click “add theme” and then upload a zipped file of your theme. WordPress will automatically install the theme for you. You should also install any recommended plugins for that theme.

Here is a list of website that have  a good free themes that you might like.  There are so many options and looks available for themes — it’s hard for me to list them all — but I will point you in the right direction.

Step 5: Start adding content!!

Now you have your WordPress site set up. Start writing and adding posts with unique content. Make sure you also add the standard pages (Contact, About, Etc).

This is a simple guide to start your WordPress website. There are many advanced features and theme custumizations still possible after this point. There are hundreds of websites dedicated to these advanced features — just google what you are trying to do.