It’s been quite a while since I’ve posted anything about Dreamweaver so I figured we should have a look at one of the program’s most useful palettes, the Insert Palette. Continue reading Dreamweaver: Insert Palette
Cascading Style Sheets (CSS), are basically controls telling the browser how things should look. Anytime you see text with a specific typeface, color or size, it is usually controlled by a style sheet.
In it’s most basic form CSS is embedded into the HTML document itself. By default Dreamweaver will create it’s style sheets in the HEAD of your document. If you have your document opened in Split screen or Code view, there will be a line that looks like this, “style type=”text/css”” in angle brackets. This tells the browser that the information between this line and the next /style line should be used to set the appearance of text, objects or layout within the browser window.
As soon as you created your document and clicked on the Page Properties in the Properties panel, Dreamweaver set to writing these instructions for the browser to follow.
As you can see in the image above, there have to be opening and closing tags to contain the particular styles used. This keeps the style sheet individual and prevents it from running directly into any other style sheets or lines of code.
Having embedded style sheets for a single simple document is ok, however it can be difficult to manage when you are working with an entire site. In such a case I would use external style sheets.
The advantage to external style sheets is in making changes to the look of your site. If you decide to change the text color, with an external style sheet you only need to change it in one document. In contrast, if you want to change the color of your text and each page uses it’s own embedded style sheet, then you have to open every HTML document and change it in the HEAD.
To create an external style sheet in Dreamweaver, simply go to File>New, select Blank Page and under the Page Type window, select CSS and hit the Create button. Now even though we have a new external style sheet, it isn’t populated by anything.
If you already set your Page Properties for your HTML document, you can select and Command X the information between the style tags.
Paste the copied code into your .css document, then name and save the .css file (I generally name my initial style sheet “main” just so it’s easy to identify what purpose it serves).
Now we need to link your HTML document to the style sheet. Delete the style tags from your code… you don’t want things getting messy. Right click a blank area in your HTML document, NOT in the code itself though. One of the options you will get is CSS Styles. Highlight this and a dropdown will appear, select Attach Style Sheet. In the window that appears, click the browse button, then find and open your style sheet, making certain the Link radio button is selected.
If your HTML document hasn’t been saved, it will ask you to save it. Be sure you save it in the same folder as your style sheet. This will be your project folder and it’s a good idea not to let it get cluttered.
If you have successfully linked your style sheet then you are done.
Structure of a Style Sheet
The structure of style sheets is a little different than HTML. For one thing, every separate element is enclosed in curly brackets rather than angle brackets. For another, colons and semicolons are used frequently.
In style sheets, colons are used to separate an identifier and it’s specific style. For example, if you have an identifier for the font-family you want to use, you would separate that from the specific acceptable fonts with a colon. (font-family: Verdana, Geneva, sans-serif;)
A semicolon is used to identify the end of a particular style characteristic. Without the semicolon at the end of the line, your browser won’t know that it’s separate from the following line.
In the example above you will notice that there is a tag that specifies what we are working with. A general body tag will encapsulate all the specifics of the page itself, whereas one labeled “body,td,th will include specifics dealing with body text. There are many additional types of style sheet tags that will be helpful, but these are two of the most basic and most common.
Using an existing Dreamweaver Style Sheet
Go to File>New and the menu that appears will have Page from Sample fourth down in the left column. Open the CSS Style Sheet Sample Folder and inside you will find a variety of stylesheets you can start with. Some are basic, only giving the font family, whereas others will create a full set of styles for you. You might open a few of these to check out the differences and to get a feel for what tags link to different style options.
W3 Schools has some very good step-by-step articles over creating style sheets, as well as almost everything else that has to do with the technical side of web design. Check them out here for more information.
A final note that covers everything related to code… There are specific rules for each type of file. These rules have to be adhered to, otherwise you won’t get the result you would like to. Every colon, period, bracket, etc. serves a purpose so don’t leave anything out.
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.
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).
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.
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.
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.
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.
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…
The Welcome Screen is where you make your initial choices based on what you are going to do.
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.
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.
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.
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.