Dreamweaver Tutorial

Dreamweaver is an awesome tool. And people keeps using it to create awesome websites. Today’s tutorial is about Typography. We all have heard about Typography and its amazing art. In this tutorial, we will learn some basics of Typography function in Dreamweaver. How to control it and how to make it even better. Its simple, easy and amazing. Enjoy.

With working with either typography or layout, it’s crucially important that you understand the different units of measurements that CSS allows you to use and when you use one over the other, when you discuss units of measurement CSS, there are 2 general categories. Absolute and relative. Absolute which can also be referred to as fixed units dealing in a fixed size, one that does not change based on any other factors. Relative units of measurement look for either apparent element or the user age in itself for a base value begin with. With those two categories in mind, lets take a look at the options available to you when settings sizes in your styles.

Points or units of measurement that are designed for print. They are in fact one seventy second of an inch. So, what is it? Translate to on the screen? Good question. You need another resolution to monitor set two as well as the operating system to filling in to that one. So, you should avoid using points for using on screen font measurement and restrict it to print style sheet. Inches and centimeters are again just what you think they are. They are useful for other media types but shouldn’t be used for on screen media. Ems are hands down the most popular relative measurement for on screen sizing. An Em is best described as being the equivalent of the size of a capital M for that particular font. So, saying one Em is almost equivalent of saying one hundred percent of that size. An Ex is equal to the X height of the specific font. The size of the font can change dramatically as font families are substituted so it should be used with care. Percentage values, they are pretty straight forward. A percent value sizes the text to a percentage of whatever value it would normally be. And pixels are based on the current resolution of the viewing device. Because it relies on the resolution of the user agent, pixels are sometimes referred to as a relative unit.

In truth, setting in to pixels fixes them at that size. There are several reasons to avoid using pixels for font measurement. Internet Explorer, prior to version 7, did not allow the on screen resizing of pixel based fonts. User of earlier versions of Internet Explorer will not to able to change their font size based on their own viewing preferences. Also, pixel sizes that might look good on a monitor might be far too large for the mobile environment. Pixel based font sizes don’t scale too well between environments so it’s best you avoid using pixels for font sizing when possible.

Lets experiment with these different units of measurement. We’re going to compare pixels to Ems, using these two paragraphs at the bottom of the screen. So, I have opened up the measurement that htm file found in the 07 01 folder and I’m just going to go over to my CSS styles and analyze that we have a paragraph with the class resize and another paragraph with resize too, so the top one is resize then bottom one with resize too. That’s good at in experiment with using pixels and Ems.
Over on the CSS styles panel, I’m going to click on the P resize class and I’m going to add a property by clicking on the add property link and I’m just going to add font size and you can type this in or you can pull down from the pull down menu, either way and we’re just going to go and make that one 16 pixels. I’m going to go and select P resize 2 and add a property to that and I’m going to type in font size again and this time, I’m going to go ahead and make it 1 Em. So, we’ve got 16 pixels for a size of the first paragraph, we’ve 1 Em for second paragraph. And we go ahead and save my file, and all preview that in my browser.

They’re both exactly the same size. Ahh, that’s due to the fact that the default text size for most browsers is 16 pixels. However, users can change that. People with vision disorders might actually make the font size much larger using a relative unit of measurement, means that font is allowed to scale up. So, I’m going to ahead and change my default font size. We can see here in my Firefox options, I’m going to go to content and I’m just going to crank that up, lets say, lets crank it up to 20 pixels. I’m going to click ok. Now this is the one set Em is allowed to scale up which makes that a much more usable size. As a general rule, Ems are the preferred unit of measurement for online type. As always there’re exceptions to this rule. All the versions of Internet Explorers simply prompts with font size values that are defined strictly as Ems. As a work around, most designers will size the body selector using a percentage and then define all other measurements in Ems. This seems to fix most of those Internet Explorer specific issues. Since font size is by and large inherited, it makes sense to carefully plan a sizing strategy for your site, pick of unit of measurement and take care to stay consistent throughout your styles.

Tags: beginner tutorials in dreamweaver mx, dreamweaver video tutorials, dreamweaver cs3 and free tutorial, free dreamweaver cs3 tutorial, dreamweaver tutorial cs, dreamweaver drop down menu

Tags

Dreamweaver Tutorials