Handy Code Snippets

Posted on by 
Basic CSS declaration example
h1
{
font-size: 36px;
font-family: Helvetica;
font-weight:bold;
text-decoration: underline;
color: #9F0;
} 

Basic CSS call code example
<link rel="stylesheet" href="(depends on location of style.css file)" type="text/css">
CSS link styling example (see also "Styling Links")
a:link
{
color:#F93;
text-decoration:none;
background-color:#B2FF99;
}


*This style will be applied whenever you use the hyperlink function in Dreamweaver -- such as dragging/pointing
with the compass to a file, or manually entering a complete URL in the Property Inspector's 'Link' field.

Integrating two different link styles on the same page
Add one link style declaration to your CSS  as noted above (a:link + characteristics). 
Add a second CSS declaration to your CSS called "a:alternate" (+ characteristics).
a:link {text-decoration:none; color:#C39;}  
a:visited {text-decoration:none;} /* visited link */
a:hover {text-decoration:underline;}   /* mouse over link */
a:active {text-decoration:underline;}  /* selected link */  
a:visited {color:#00FF00;}  /* visited link */
a:hover {color:#FF00FF;}  /* mouse over link */
a:active {color:#0000FF;}
a.alternate:link {text-decoration:underline; color:#0CC;}
a.alternate:visited {text-decoration:none;} /* visited link */
a.alternate:hover {text-decoration:underline;}   /* mouse over link */
a.alternate:active {text-decoration:underline;}  /* selected link */    
a.alternate:visited {color:#00FF00;}  /* visited link */
a.alternate:hover {color:#FF00FF;}  /* mouse over link */
a.alternate:active {color:#0000FF;}
Apply the first link style (a:link) to all the links on your webpage in Dreamweaver (use the pointing compass tool or add an external URL to the "link" field in the Properties Inspector). 
Once you've done this,  apply the "alternate" style to any link by highlighting the text and selecting "alternate" from the "Class" dropdown menu in the Properties Inspector.
Adding a flexible background image

*Note: original image must be at least 1920x1080, less than 400k and "Saved for Web and devices in Photoshop." 
Add the following code to your CSS style sheet. Delete everything in bold, re-type the colon and select 'URL' > file.

html 
{ 
background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Adding a repeating gradient background image

*Note: original image must be created in Photoshop or Illustrator, saved for Web as a JPEG and be approximately 400-800 pixels in height and four pixels in width.
Use the gradient tool in Photoshop to add a vertical gradient (from top to bottom). Place the JPEG in your main 'img' folder.

Add this code snippet to your style.css page:
body  { background-image: url(smallPic.jpg); background-repeat: repeat; }
When finished, use this code to add a solid background color that exactly matches the color at the bottom of your gradient JPEG (you might have to go back to Photoshop
to get the hex color code. 

body { background-color:#HEX CODE HERE; }

Adding a border around the outside edge of a table

Add the following code somewhere between the <head> and </head> tags on the page containing the table you want to add the border to (repeat on individual pages as necessary). 
Note: this will also add borders to any nested tables.

<style type="text/css">
table {border: 1px solid red}
td, tr {border: 0}
</style>
Adding an image to a cell background

Add the following code to your CSS style sheet (where "abrams.jpg" is the name of the background image you want to place as the cell background. 
In this example, the file is located in the site's main "images" folder). Adjust the style of the text that will appear in the cell (above the image).
.bkimage, .bkimage TD, .bkimage TH
 {
 background-image:url(images/abrams.jpg);
 background-color:blue;
 color:white;
 font-family:sans-serif;
 font-weight:600;
 }
Go to the page containing the cell. Select the cell you want to add the background image to and select "bkimage" from the CLASS dropdown menu on the properties inspector.

Adding a Web link button in Flash

Find (jpeg), create (using the shape tool in Flash) or load (from Flash libraries) a button (to load a button from the Flash library, go to WINDOW > COMMON LIBRARIES > BUTTONS and drag an instance to your stage and resize accordingly). 
Convert the button to a symbol by selecting it and going to MODIFY > CONVERT TO SYMBOL > BUTTON (give it a name). Now, give the button and INSTANCE NAME (anything will do) in the PROPERTIES panel (top right). 
Next, hold down the CNTRL key and click on the button's LAST keyframe in the timeline. At the bottom of the popup list, click ACTIONS. When the ACTIONS panel appears, click CODE SNIPPETS (top right) > ACTIONS > CLICK TO GO TO WEB PAGE. 
You should now see actionscript code appear in the panel. Delete all the code in grey here. Add a STOP command to the code here by typing stop(); at the beginning of the code (this will prevent your movie from endlessly repeating). 
Expand the window and swap out the URL for the URL of your home page. To test it, click COMMAND + ENTER. When finishd, export the .SWF movie file to your Web folder and place it on your site's splash page (i.e. the index.html page within your public_html folder)
for a video tutorial.
Embedding Sound in a Web Page (Dreamweaver)

In 'Design' view, place the insertion point where you want to embed the file and do one of the following:
  1. In the Common category of the Insert panel, click the Media button and select the Plugin icon  .
  2. Select Insert > Media > Plugin.
  3. Browse for the audio file and click OK.
  4. Enter the width and height by entering the values in the appropriate text boxes in the Property inspector 
or by resizing the plug‑in placeholder in the Document window. 
These values determine the size at which the audio controls are displayed in the browser.