The quirks.

We often get questions about a few of the idiosyncrasies of the text editor. Today i'll try to clear some of those up. The biggest issue that comes up is spacing between lines of text.

When you hit enter while typing in the text editor you will notice that you get a new paragraph, complete with an empty line seperating the text.  Sometimes you just want the text to wrap to the next line instead.  Fortunately that is pretty simple with the text editor, simply hold down the shift button, and then hit enter.  This will create a line break instead of a new paragraph.

Now,  When you apply a style to an element in your content, it applies it to the entire element.  A line break is considered to be a part of whatever it is breaking apart.  For example, have you ever tried to set an style on a sentance and have the entire paragraph change? 

A common issue that crops up is when you try to create a paragraph with a header section such as this.

Now, If you enter the text and put a line break between the "I'm a Header" and the paragraph below, when you apply the style the entire  paragraph will end up receiving the style, like so.

So what happened?  Well, when the style is applied it applies it to the entire element.  We can see where our elements are by hitting the "Show Blocks" tool in the editor.  The following image shows the text editor contents when the "Show Blocks" option is selected.

If we place each portion in a seperate paragraph, we can then make it so the style is only applied to the header portion of our text. Each box represents a seperate paragraph.

Confused?  It may take a bit to get used to but load up a text editor on a hideen page on your site and play with it a bit; it'll begin to make sense.

As always, I recommend going through the HTML tutorial at www.w3schools.com.  It takes about 30-45 minutes and it will greatly improve your understanding and usage of the Text Editor.

Jagged Images, Images take FOREVER to load when viewing content

So, you've got down putting images into a page, moving them around, etc.  But sometimes your images look jagged, and they take a long time to display.  This happens when you take a large image and scale it down in the browser.   The browser isn't smart enough to resample the image to fit the size you have selected.  It merely stretches or squishes the image to fit into that size.  This causes the image quality to decrease and in turn, makes your content look less than polished.

It also does not change the actual file size of the image.  That means the picture you took with your super hi-res, hi-def camera is still at its full file size, which can be into the megabytes (Really honking big in laymans terms.)  When you view a page your computer has to download all the images on the page.  The bigger the images, the longer it takes for them to display.  And since you scaled them down to fit on the page, they now look bad as well. 

Luckily, I have an easy solution for you.  Actually I have an easy solution, and a couple of advanced solutions.  The easiest and quickest is www.picresize.com.  It is a free service that will allow you upload your image and resize it to the size you wish it to display in the browser.  This ensures that your images will look good, have a small file size, and download quickly.  You can even upload batches of images at a time.

The not so easy solutions

Gimp is a free, opensource image editing program.  It has a learning curve but knowledge of some sort of image editing software can make all the difference in the world when it comes to creating interesting and compelling content.  The nice thing is Gimp is 100% free and there is a ton of documentation and tutorials on the internet to walk you through the software.

Photoshop is the not so free, actually really freaking expensive option.  However it is the Gold Standard of image editing software packages.  If cost is no object,  Photoshop is a good fit for all around image editing needs.

Fireworks is also not so free, but not so expensive as Photoshop (made by the same guys.) Fireworks is my personal favorite of the three choices.  It is specifically designed for doing web images and is the easiest of the three packages to use.  Make no mistake though, it also packs alot of power under the hood.

Advanced Tools

One of the little known tools in the text editor is the Google Maps tool.  Need to place a map to your location on your webpage?  It's as simple as selecting the Google Maps tool in the text editor tool bar and following the instructions.

Step 1.  Select the Google Maps Tool

Step 2.  In the window that appears set the width and height of the map

Step 3.  Enter in your address and your done!

Now you have a fully interactive Google Map on your page.

Image Maps

Image maps are an image with an invisible overlay that contains hyperlinks.  Click on an area of the Image and the link takes you somewhere else. Simply place an Image into your content, select the image, and then select the image map tool.

The interface is pretty simple, fill out your link information and then draw the area on the image you wish to be the link and your done! 
 

Thats it for part 2.  Stay tuned for part three where we discuss some best practices for your content, what style decisions you should follow and links to sites with more information!