Tag Archives: Dreamweaver

Intro to Dreamweaver – part III

ADDING IMAGES
Pretty easy to do, just click so the cursor appears on the page and go to Insert>Image. From there you just have to find the photo you want to link to and there you go.

A word of warning, keep your web files organized! If you choose to link to an image that isn’t in your website folder then you will have issues when you upload. When an image is added to a page it actually links it from where it is, it doesn’t insert an actual copy of the image into the document, so what you have is this little string of folders that point the way to where the photo actually resides. If you don’t upload the image to the site in the folders the code points to, then you will get a broken image link when your page is viewed. Because of this, the cleanest way to set things up is to add an “images” folder to your website folder. All the image links will then have the images/whateveryourimageis.jpg extension and they will link properly. Keep it clean and you will be rewarded for the extra effort when you upload your site.

Something else I should probably mention is it is always best to resize your image in Photoshop rather than allowing your HTML to do it for you. For one thing, if the image is larger than you need then it will be a larger file size, which can be the kiss of death when it comes to load time. To keep your load time below five seconds it is a good idea to keep all image file sizes as small as you possibly can.

This doesn’t mean you need to keep only thumbnails on your site. You can use larger images but be certain that you save them from Photoshop using the “Save for Web and Devices” feature and try to get your file size as low as possible without degrading your image.

Another reason to keep your resize your images in Photoshop is sometimes the HTML will distort the image if part of the code is missing. For instance, if you set the height that is smaller than the actual image height but leave the width alone, sometimes it will default to the width of the actual image, thereby displaying a graphic that looks squished vertically. You don’t want your friends photo to show someone that is twice as wide as they are tall do you?

ADDING OTHER GRAPHICS

Under Insert you will find a few other options that relate to images, primarily Image Objects and Media. Image Objects contains Image Placeholder and Rollover Images as well as Fireworks HTML (which we won’t cover here).

An image placeholder is basically just a box the same shape and size as what your image will be. This is good for mockups and getting your sizing right, as well as for taking the place of an image you haven’t acquired yet. It will represent itself as a box who’s color you can change, not too exciting but suits its purpose just fine.

Rollover Images are simply variations on the same image that are used together by the page to show the state of the action being performed. In simple terms, there are different images for different rollover states that all fit in the same spot. Menu buttons are often done this way. You’ll see an “off” version of the button, which is its ordinary state, but when you mouse over it you will see the “on” version.

Media covers the types of video you can add directly to your site.

The most common is a .swf file which stands for ShockWave File. It’s actually a compressed format used by flash. This can contain video, different animations and even special buttons and links.

The uncompressed version would fit into the category of Flash, right below SWF in the list. There are a few different Flash formats that this encompasses but most are going to be larger in size than a .swf file. The fact that these aren’t usually compressed means that a viewer might be able to copy your file and alter it for their own work. This usually isn’t a good idea since it gives them the option to infringe on the copyright. It’s never a good idea to hand over your files on a silver platter this way.

It seems a little redundant to have both an SWF and a Shockwave option but there are different file extensions that Shockwave can use. Chances are you won’t have to get into this very much since Shockwave isn’t commonly used anymore.

The next three are Applet, ActiveX and Plug-in – all of which refer to actual small programs that run within your document. We won’t go into those much seeing as how this is a little more advanced than what you need to get into now. You can click the links to learn more about them if you would like.

Next time we will cover using images as links and how to upload your site to the server.

Intro to Dreamweaver – part II

There are three basic parts to your HTML document. The first is your DOCTYPE, which is basically just information about what version of HTML your document complies with. Though this fits outside of the actual code and can be left out, it’s often helpful to browsers since it specifies not only the version but where the “rules” for this particular document are located (i.e. where on the W3 website the extra information about this doctype is located – “http://www.w3.org/1999/xhtml” or similar).

Parts of an HTML document

The most important information is contained within the tags. All of the information herein has something to do with how your page looks or what it says.

The Head of the document generally contains most of the instructions for your document. This is where, in this simple layout we are starting with, the Styles we just set are contained, as well additional browser information on how it should display your document. You will also find tags here which we will cover later.

Below the Head you find the Body of your document. This contains all of the actual information that will be displayed (images, type, charts, etc.) Depending on what your document Head contains, the Body section will display its contents in different ways. For example, if the style in the Head specifies that your general type will be Verdana, 12pt, and a maroon color, then all of the unaltered type within the Body section will be Verdana 12pt in maroon.

Style section of HEAD
This is how the type is displayed

Within the Body section there are “tags” that we can use to help control how our text and graphics are displayed. Some of the old school tags were simple abbreviations of the actions. For example to make your type BOLD you would use “B” and “/B” or to create italics “i” and “/i” was used. These have been changed since there are other tags which are similar to these. Consecutively, Bold would use “strong” “/strong” and italics “em” “/em”. These sit within a set of brackets, to distinguish that they are tags.

What tags do
The "p" "/p" tags tell you this is a paragraph. I hit return after the first line to start the second line.

At this point we have a fully functional, if rather bland, webpage. We will add images and start covering the basics of tables in the next Dreamweaver post.

Intro to Dreamweaver

It’s important to remember that Dreamweaver doesn’t behave like Illustrator, Photoshop or InDesign. Dreamweaver isn’t native to Adobe like the others so it’s actions and such respond differently. Aside from a few basic Command keys, there aren’t many things Dreamweaver has in common with the Big 3.

It’s also important to recognize that web design is very different than print design. While with print design what you see is what you get, in web design there are a ton of backend features to take into consideration.

When you first open Dreamweaver you are given several options of the type of document to work with. If you have no previous experience then we need to go over the purposes of a few of these file types.

HTML stands for Hyper Text Markup Language. This is your basic layout file type, the base for your web pages will begin here.

CSS are Cascading Style Sheets. These control everything from the colors used within your page to the fonts and in more extreme cases, the positions, sizes and content of many elements. CSS can be used in the HTML document itself or it can be it’s own page that the HTML page links to.

Javascript controls motion, animation and actions in the HTML page. Just as with CSS, Javascript can fit within the HTML document or can be linked to as an external document.

We’ll begin by focusing strictly on the HTML document, learn how to add images and text, how to format them, and some basic code…

Welcome Screen
The Welcome Screen is where you make your initial choices based on what you are going to do.

Dreamweaver Welcome Screen

Go ahead and open a new HTML document. The first three buttons in the upper left control your view. We’re going to be working with the Split screen so we can see how the code makes everything work.

Code, Split and Design options for screen view

If you look at the Properties panel when you first open your document, you’ll notice there is a Page Properties button. Click it and you will see the basis of CSS editing within the document. There are two Appearance panels you can choose from, one controls things using CSS, the other uses in-page HTML. Both do slightly different things and you should familiarize yourself with what you see within them.
Properties setup

For starters lets look at the Appearance (CSS) panel. Select a font from the dropdown menu, set your regular type size, color, etc. to what you would like. This is how mine looks.
basic settings
When you hit ok, you can see the changes made in the section of your code. All of these pagewide properties will be set by default within the head of your HTML page.

I’ll cover the three basic sections of an HTML document, what your CSS says and how to start laying out your webpage in the next post.