Uploading and Inserting Images

Introduction

With your Chaptercore account, you get full FTP access to your webspace. FTP stands for File Transfer Protocol, and it’s basically just a way to copy files from your computer to our servers. Once the files are on our servers, you can easily insert them into your site’s pages.

Requirements

You’ll need an FTP client to connect and transfer files. Windows and Mac both ship with FTP clients, but they aren’t very user friendly. For Windows, I would suggest either FireFTP, an FTP client plugin for Firefox or SmartFTP if you can spare a couple of bucks. For Mac, I would highly recommend YummyFTP.

What’s Next?

Open your FTP client and connect to the server. The information for server, port, username and password were sent to you in your welcome email.

If you’re using a typical FTP client, you’ll usually see a pane that contains all of your computer’s files, and then you’ll see another pane that contains the files on your webspace. It’s usually as easy as dragging and dropping files from one side to the other to upload or download files.

If you’re uploading images, you’ll probably want to upload them to the /images directory. If you’re uploading documents, maybe you’ll want to create a /documents directory and upload them there.

General Guidelines

Because you have to know the exact name and location of an image or document when you are linking to it, you’ll want to make things easy on yourself. Be consistent and save yourself some trouble. Web addresses (including embedded images and links to documents) are case-sensitive. For sanity’s sake, it’s best to keep things undercase. You’ll want to avoid using spaces and special characters as well – use underscores or dashes if you have to.

Putting Images in your Pages

You can use the page editor to easily add images to your pages. Just click the image button and type in the URL of your image. If you uploaded your images to the /images directory, just make the URL of the image /images/path_to_your_image.gif. It’s is simple as that. You do not have to include your domain.

You can also specify the size of the image if you want to resize it, whether it has a border, what should display if the image can’t load, etc.

HTML for an Image

Here’s what your HTML code should look like if you’ve done things correctly:

   1  <img src="/images/image.gif" alt="my image" width="100" height="100" border="0" />

Related Links
Comparison of FTP Clients
IMG Element

Floating Images

Introduction

Placing floating images within paragraphs is a great technique for making your page more interesting. It helps break up the monotony of a content-heavy page.

The term “float” stems from how elements with this property displace the surrounding elements (e.g. paragraph of text flows around a floated image). In this short article, you will quickly learn how to float images and other block elements.

The CSS

CSS stands for "Cascading Style Sheets:http://www.w3.org/Style/CSS/. They are basically a set of definitions which help you define the look and positioning of your website. Your Chaptercore site will typically have one or several stylesheets in the /stylesheets directory.

The CSS float property has 3 possible values: left, right or none. A couple of generic CSS classes that may be useful are:

   1  .float-left {
   2    float: left;
   3  }
   4  .float-right {
   5    float: right;
   6  }

Applying the Class

Now that you have two classes defined for floating, you can apply that class to an element on your page.

If you want to float an image, you may have something like this:

   1  <img src="/images/image.gif" alt="my image" width="100" height="100" class="float-left" />
   2  <p>paragraph to flow to the right of this image</p>

Notice the last property listed in the image tag. This will apply the float-left class to this image. By applying this class, elements following this image tag will flow around the right side of the image.

Other Uses

You can apply the float property to other elements as well. Be careful, though. Unexpected results can happen if there is no width assigned to the element.

Examples

You can see this in action on the Valparaiso Sigma Phi Epsilon website.

Related Links

For more information check out these sites:
CSS Float Theory: Things You Should Know
Floatutorial: Step by step CSS float tutorial