Tutorials in ‘WEB Design’ Category

How to force the browser to reload CSS and JavaScript files

When editing the CSS and JavaScript of a site, there is a slight chance that the user may get the old versions, which at best will cause a lot of complains and at worst will cost you a lot of lost customers. The reason for this is that browsers cache static content like CSS and JavaScript. However, telling a browser to reload them is not that hard to do. All it takes is a little trick that will force our friendly browsers into thinking that the CSS and JavaScript are dynamic content.

Before we go on, let us take a look at how we specify the CSS and JavaScript to be used within HTML. Normally we have something in the line of:

<link rel="StyleSheet" type="text/css" href="/static/style.css">
<script src="/static/js/script.js" type="text/javascript"></script>

Where style.css and script.js are our files. Naturally CSS files are specified with the href attribute of the link tag, while JavaScript files are included using the script tag. Now, let’s take a look how we can make our browser reload CSS and JavaScript every time:

<link rel="StyleSheet" type="text/css" href="/static/style.css?version=15">
<script src="/static/js/script.js?version=15" type="text/javascript"></script>

“Now what is that “version”?”, you are probably thinking. Well it’s nothing. No really, it does absolutely nothing. You can use ?favouritesite=onlinehowto.net15 if you want. It would have the absolutely same effect.

“But what does it do?”, you are probably thinking. “This looks just like passing GET variables.” Exactly!

The browser cache uses a pretty complicated mechanism, but there is one thing that you should know for sure index.html?version=14 and index.html?version=15 are two different pages for the browsers, therefore it can’t rely on its cache, therefore it must get them again. But what happens on the server side? Well those arguments are ignored by our server and it simply supplies style.css and script.js.

Whatever language, technology, etc. you are using, you always keep a header file which is included pretty much everywhere so changing the version=<number> part after each revision is pretty easy. You can even make it a part of your site’s logic.

In conclusion, this trick may save you a lot of headaches related to cached CSS and JavaScript, and if you believe you may have some issues, we greatly encourage you to use it!

VN:F [1.9.18_1163]
Rating: 10.0/10 (2 votes cast)

CSS3 Cascading Principals #3 External Styles

Rounding out our cascading series is the external style sheet; a method that gets its descriptor because it’s not something that will actually be contained within your HTML document, but rather a separate file with the .CSS extension.
There are a couple of reasons you might want to break out your CSS file from your HTML document. For one, it allows you to select multiple style sheets, from which you can pick and choose styles from within your markup; and allows you to create multiple styles that are even further segmented. But perhaps the biggest windfall is that you can apply those style sheets across multiple pages, saving you the effort of having to re-create them in each of your HTML documents. Not only is this a tremendous time saver, but it also cuts down on potential mistakes that might be made across a large project.
Externals style documents also have the least clout in our CSS order-of-importance hierarchy, so if an in-line style or head style addresses an element, they will take precedence.

CSS
Link syntax.
<link rel=”stylesheet” type=”text/css” href=”style.css” />

Before your HTML document can begin pulling styles, however, you’re going to need to tell it where those styles are located. By linking your style sheets, the document knows to treat it as an extension of itself, and when then apply those styles just as if they appeared in the head of the document. Which is why, when we insert a <link> element, we place it in the head of our document. It works as kind of a placeholder for “styles yet to be determined”.
If you have multiple style sheets, you just repeat the process for each .CSS file that you’d like to call. You only need to include .CSS files that you are using for that particular document, and it’s important to make sure that there are no conflicts. If you have different style definitions that are attempting to alter the same element, the last style sheet you link to will be applied.
If you’re ever in the market for some great Windows web hosting, try Server Intellect. We have been very pleased with their services and most importantly, technical support… Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 0.0/10 (10 votes cast)

Learn the Basics of Floating in CSS

The float declaration is used to put elements beside one another such as several div’s. A common technique is for, say a blog, you have your content, and you have your sidebar on the right. Each one of those is their own container or div. To make them line up against each other rather than having the content on the top and the sidebar below it we need to float these div’s. Let’s start out by setting up the divs, with some dummy content we may see in a traditional blog.

So what this html is saying is that we have a container (the div “wrapper”) which has two divs inside of that. A left content div and a right content div. The left content has some dummy content and the right has an unordered list with some links. Lastly we have a div with a clear class, this will stop any elements from popping up next to floated elements Let’s modify this with some CSS.

We give our wrapper a width and center it. Next we set the width of our .leftcontent div and give it a little padding. Next we float that div to the left. This means that it will tell all other divs to ignore any undefined space around it. So since the width of .leftcontent is only 770px (compensate for padding) the .rightcontent div will pop up and line up horizontally with .leftcontent because it’s width is 210px which is less than the wrappers width which they are both contained in. Lastly we must clear the float so that no other elements try to pop up next to the divs that we want to float. The clear class is fairly straightforward, it is clearing the float so that nothing else “floats” up on the page. For this example I cleared left, you could also use the both value which would make your clear class more universal but is not needed for this example. Once you have done this your page should look similar to this.

Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 0.0/10 (10 votes cast)

CSS3 Fundamentals #2 Background Images

Inserting a background image into your HTML document using CSS.

Background images have a rather storied history when it comes to the World Wide Web. Just like furry wallpaper and wood paneling, there’s no accounting for taste; and almost immediately after the release of Mosaic in 1995 those cursed with just a smidgen of creativity starting cladding their works with a cursed combination of teddy bears and tiled stars. After a while, the web started looking your great aunt’s Thanksgiving sweater, for better or… No. Just worse.\r\n \r\nDespite the historic stigma, background images can (and are) quite often used as an effective component in great web design, and is an essential part of CSS. You can use background images on a page level, or within individual page elements that you have created. The image will assume the total size of your element; or if smaller than the element itself, be tiled starting at the top-left corner.\r\n \r\n#background-image Syntax Formatting

background-image:url(‘sample.gif’);

All that’s required to insert a background image is specifying the location of the image. Most common image formats are supported, and as always, it’s a good idea to keep your image locations relational to your HTML document.

We chose Server Intellect for its cloud servers, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.

#background-image Example

Now we’ll create a simple page utilizing a tiled background image with a sample image included in the project source. Create a new HTML5 document, and enter the following CSS definition within the header:

Background image style.

body { background-image:url(”background.gif”);}

Because our image is substantially smaller than our page, it will render in-browser tiled. Keep in mind, not all images will tile in an aesthetically pleasing manner, so make sure your image is so suited. Our example as provided here is applying the style to the entire body of the document, so all other page elements and divisions will inherit this background unless otherwise specified.

Now let’s add a <div> so that we may employ another background image, and see what our page looks like with some content: Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 0.0/10 (10 votes cast)

Using The Slider Bar in HTML5

HTML5 is making a solid attempt at providing an easier life for people who build web applications. The “Slider Bar” is a very common user interface control in desktop applications, and has made its way onto the web in a big way in the last few years. It used to be that we’d have to whip up a few lines of JavaScript before we could use one of these sliders in our application, but HTML5 has given us an even more simple solution. We now have the range input type, which provides the end user with a bar to select a value within a specific range. Here’s what a Slider Bar typically looks like when rendered in a browser:

Slider.html

<input type="range" id="sliderBar" min="0" max="100" step="1" value="0"> Let’s take a quick look at the attributes for our input:

1. type – The type of input we’ll be using. In our example, it will be a range input.
2. id – The id of our input, which will help us to target it via JavaScript
3. min – The smallest possible value of our slider bar.
4. max – The maximum value of our slider bar.
5. step – The interval of the values as a percentage. For instance, if we set it to 5 it would go 5,10,15,20, etc. In this case, since it’s set at one, it will count one by one up to 100.
6. value – The default value that we’d like our slider set to.

Writing Some Code

Today, we’ll be using JavaScript and an empty <div> element to display the value of the Slider Bar. You can really do some amazing things with this control, but to demonstrate the basics, we’re just going to have it display some numbers. In part 2, we’ll be using the slider bar to manipulate an element.

So, let’s get started. If you’ve haven’t already added the element to your HTML page, go ahead and do so now. Also, add a <div> element below it with an id of result. You’re HTML5 page should now look like this:

Slider.html

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> HTML5 Slider </title>
<script type="text/javascript"> function showValue(num){ var result = document.getElementById(”result”); result.innerHTML = num; } </script>
</head>
<body>
<input type="range" id="sliderBar" min="0" max="100" step="1" value="0" onChange="showValue(this.value);"/>
<div id="result" style="height:40px;width:40px;border:1px solid #999"></div>
</body>
</html>

Our JavaScript here is fairly simple, and only requires a single function that will take the value of our slider bar, and pass it into the inner HTML of the “result” <div>. Add this bit of JavaScript into the head section of your HTML document:

<script type=”text/javascript”>
function showValue(num){
var result = document.getElementById(‘result’);
result.innerHTML = num;
}
</script>
As you can see, our showValue function takes a number for an argument, and then passes that number into our “result” <div> as HTML. Our last step is to make it so that every time our slider changes in value, it passes the value to the showValue function. To do this, we’ll add an onChange event handler. Change the range input in the HTML code so that it looks like this:

Yes, it is possible to find a good web host. Sometimes it takes a while to find one you are comfortable with. After trying several, we went with Server Intellect and have been very happy thus far. They are by far the most professional, customer service friendly and technically knowledgeable host we’ve found so far.

<input type=”range” id=”sliderBar” min=”0″ max=”100″ step=”1″ value=”0″
onChange="showValue(this.value);"/> Final Thoughts

If you open the HTML file in your browser and use the slider, you’ll see the value of the slider appear in the <div> we created below. This value that you see appearing is being called by JavaScript, and we can later turn that value into whatever we’d like to help us manipulate an element on the page.

For instance, we could say that the value is the width of an element on a page, and make something wider by using the slider, or taller, by using the value as a height attribute. We’ll make heavy use of this element in our next tutorial, so be sure you grasp what’s going on here before moving on. Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 0.3/10 (11 votes cast)

Using HTML lists

Every webpage – from the simplest to the most complex one has lists in it. Using HTML you can create both ordered and unordered lists: Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 0.0/10 (0 votes cast)

Creating a slideshow in Dreamweaver without coding (video)

In this tutorial we will make a product/portfolio presentation slideshow using Dreamweaver and Creative DW Image Show Pro. This type of slideshow can be used to display web design portolios, real estate, furniture pieces or anything else! Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 0.0/10 (10 votes cast)

How to newsletter – tips for Web Designers

I have presented in previous posts how to create a cool websites and how to convert more visitors into clients. Newsletters are also part of the designing/branding of a company online, they usually come together with the site, so it’s still a designer’s job. You might thing that newsletters are old school and social networks have replaced them but they still convert very well and are more suitable for non technology companies where customers don’t necessarily get that much in touch with social networking. Newsletters are great because they target a specific audience that is clearly interested to hear more about the company’s product and services. Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 0.0/10 (10 votes cast)

How to manage your web design business – first part

I\”m going a bit further today and will be discussing about Web Designers that don\”t want to be working for The Man and start their own small business. Having your own \"internet\" business gives you a large number of opportunities and options, some sort of a \"freedom\" that you can\”t get as a simple employee. Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 0.0/10 (0 votes cast)

Should designers learn coding?

So ok, nowadays being a Web Designer it\”s more than creating PSD, but should a Web Designer learn coding? But first, let\”s recap the previous articles and say that I do agree with WebDesigner Depot that every Web Designer should know. Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 0.0/10 (0 votes cast)