Template: Making attributes editable:
Use this when you want to keep one template throughout but want to be able to edit certain attributes of an un-editable regions. For example, if you include the navigation links in the main template as one uniform color, but want one of the navigation links to be a different color on it’s corresponding page, the you would need to make that attribute editable.

IN THE HTML TEMPLATE:

1. In the template, have an id and class on each navigation link. For example:
<div id=”nav_about”><div class=”class_about”>about</div></div>
You would have an a href linking it to the about.html page as well but I took it out for simplicity reasons.

2. In dreamweaver, go to splitscreen view. In the code, click on the

. On the bottom of the window (below the design) there is a list of all the divs. Make sure you are on the
<div class="class_about"></div>
by clicking on it. The code will become highlighted after you click on it.

3. In the drop downs, Go to Modify>Templates>Make Attribute Editable.

4. A dialogue window will pop up.
Attribute = CLASS
Check the box
Label = class_about (the name of your class)
Type = Text
Default = Link (You can name this whatever you want. In the CSS, we created classes named “link” and “current”. The link class defines what the navigations will be like as links. On the template you will define all of them with this class. For example, if the links are black, then they will be defined as black in the link state. However, if you want the link of the page you are on to be blue, you would designate this with the “current” state on the respective page.

THE CSS

1. This is saying that whenever the state is link, it will be in the state that is in the dreamweaver template and defined in the id #nav_about:

#nav_about a:link, #nav_about a:visited{

height:29px;

width:91px;

float:left;

text-indent: -100em;

background-image:url(images/nav_about.jpg); background-repeat:no-repeat; background-position:top left;

}


#nav_about a:hover, #nav_about a:active{

height:29px;

width:91px;

float:left;

text-indent: -100em;

background-image:url(images/nav_about.jpg); background-repeat:no-repeat; background-position:bottom left;

}

2. This is defining what the link will look like in the current state (it is saying that for all pseudo selectors of link, visited, hover, and active, the link will look like this.
#nav_about .current a:link, #nav_about .current a:visited, #nav_about .current a:hover, #nav_about .current a:active{

height:29px;

width:91px;

float:left;

text-indent: -100em;

background-image:url(images/nav_about.jpg); background-repeat:no-repeat; background-position:left bottom;
cursor:default;

}
3. .link{}

THE HTML PAGES
1. Make a html page from the template. Name it about.html.
2. Go to Modify>template properties
3. Select the class name, in this case “class_about”
4. At the bottom change class_about to current.

Bullet point in html WITHOUT lists

This will give a bullet point without using lists:

& #149 ;

(no spaces though)

Blog post: expalin html without blog converting it

To explain html code in your blog without the blog converting it you can use the textarea tag. See below:

<textarea cols="47" rows="1"><b>This will make something bold </b>

Rollovers in CSS

CSS rollover: Example: rollover in your navigation

We will create a rollover using only css for our navigation.

1. We are going to start by using illustrator or photoshop to create the on and off states of your navigation. First, Create the off-state of the navigation. In this example the div is 30px by 100px and the navigation is about.



2. Double the height of this document and copy the off-state and paste it in the other half in the exact same position as it is on the upper half. Change the color in the bottom half(or whatever differentiates it as the on-state).


3. Save for web devices

4. In the html, you have something that looks like this:
<div id="nav_about"><a href="about.html"> about </a> </div>


5. The id is named nav_about. The link goes to the about.html page. The “about” text will not be shown because the css will position the text in this id 100em’s out of the document as you will see in the next step.

6.The css will look something like this:


#nav_about a:link, #nav_about a:visited{
height:30px;
width:100px;
float:left;
text-indent: -100em;
background-image:url(images/nav_about.jpg); background-repeat:no-repeat; background- position:top left;
}


#nav_about a:hover, #nav_about a:active{
height:30px;
width:100px;
float:left;
text-indent: -100em;
background-image:url(images/nav_about.jpg); background-repeat:no-repeat; background-position:bottom left;
}

7. This basically says that when the link has been visited or is just a link (the off-state) then the background image will be positioned from the top left of the image. In the hover or active state the background image will be positioned from the bottom left and hence show the on-state of the image. The text-indent will position the text in the html out of the document. The height and width is defining the parameters of the div. With a height of 30px, you know that the image that you are using for both the on and off state would be 60px (30x2) in height and 100px wide.

Keyword suggestions

Quick, easy and FREE way to find keywords:

http://freekeywords.wordtracker.com/

http://www.trafficzap.com/keysug.php

Here is a "do-it-yourself" way to find your keywords. They may not be the most in depth analysis but it is quick, easy and FREE and will get you on the right track.

A little staff personality:

Follow two members of our company as they learn to cook:

Booze Kitchen

3 Olive Studios Quick tip: Creating a multi-page PDF

How to export a multi-page document into a PDF :

To create a multi-page PDF, go to:
1. Acrobat Reader>File>Create PDF>Merge Files into a single PDF
2. "Add Files"- Choose the files you would like to merge into one PDF (in the order you would like them to appear)
3. Click "Combine Files" in the lower right-hand corner
4. And you have your multi-page PDF

3 Olive Studios Quick tip: Photoshop and batching

1. In Photoshop cs4 go to windows>actions. This will bring up the actions palette.

2. In the drop down menu of the actions palette (the little down arrow in the upper right-hand corner), select "new action".

3. Name the action and assign a function key (for example,name: resize; function key: f1). Assigning a function key will allow the action or actions to occur everytime you press that key.

4. Press record

5.Everything you do after you press record will be part of this action until you press stop. So, for example, if you want to resize photos to 100x100, then (with one photo open) press record, go to object>image resize>100x100>ok> and then PRESS STOP. If you assigned the function key 'f1' to this action, then every time you have a document open in photoshop and you press f1, the action will apply

New artwork at 3 Olive Studios

CSS: no outlines

You know those annoying dotted outlines that appear when you click on anchor links? Well if you do not want them on you site, simply enter the following into your css

a {
outline: none;
}