Dreamweaver: Create HTML tables from CSV files

Using Dreamweaver you can easily create HTML tables from existing—tab or comma delimited—CSV files.

Here is an example CSV file I created using Google Docs.

[flickr id=”5802811216″ thumbnail=”medium_640″ overlay=”false” size=”medium” group=”” align=”none”]

Make sure to save the file as a CSV file.

Create a new HTML file in Dreamweaver and go to File->Import->Tabular Data…

[flickr id=”5802254775″ thumbnail=”medium” overlay=”false” size=”medium” group=”” align=”none”]

read more

Related Posts:

  • No Related Posts

Creating a new page and attaching a CSS file in Dreamweaver

Dreamweaver intro tutorial on how to create a new XHTML page, attach a CSS file, add title, description, keywords to it.

To create a new file:

  1. Press Ctrl+N on your keyboard
  2. Select File->New
  3. Click the HTML link on the start up page.
  4. Or you could start with a default blank XHTML file by right-clicking on your site in the Files Management panel.

[flickr id=”5802254599″ thumbnail=”medium_640″ overlay=”false” size=”medium” group=”” align=”none”]

Select “Basic Page”  tab->HTML from the Page Type and “none” for Layout column.

[flickr id=”5802254715″ thumbnail=”medium_640″ overlay=”false” size=”medium” group=”” align=”none”]

read more

Related Posts:

Dreamweaver: Alternating table row color with simple JavaScript and CSS

In this tutorial I will show you how to alternate table row colors using Javascript and CSS. You can create this script using any HTML editor or a notepad. But in this example I am using Dreamweaver to:

  1. create a table
  2. define CSS rules
  3. add JavaScript function that does all the work

How does the script work?

The script calculates number of rows and determines which predefined CSS class to use for which row.

Create Table

  1. From the Dreamweaver’s insert toolbar, click the table button
  2. Create a table with three columns and five rows.

[flickr id=”5802254273″ thumbnail=”medium_640″ overlay=”false” size=”medium” group=”” align=”none”]

Assign an ID to the table

  1. select the table
  2. assign an ID “alternate” to it

[flickr id=”5802254105″ thumbnail=”medium_640″ overlay=”false” size=”medium” group=”” align=”none”]

Define CSS Rules

  1. Click the New CSS Rule icon in the CSS panel
  2. Create a Class selector “row-one
  3. Select background category and specify background color

[flickr id=”5802253833″ thumbnail=”medium_640″ overlay=”false” size=”medium” group=”” align=”none”]

Repeat steps 1 – 3 for another row color. Change the name of the selector to “row-two” in step 2 and background color in step 3.

Add JavaScript

Add following JavaScript code inside of the head element, or separate JavaScript file.

function alternatecolor(id){ 
 if(document.getElementsByTagName){  
   var table = document.getElementById(id);  
   var rows = table.getElementsByTagName("tr");  
   for(i = 0; i < rows.length; i++){           
     if(i % 2 == 0){ 
       rows[i].className = "row-one";
     }else{ 
       rows[i].className = "row-two";
     }      
   }
 }
}

JavaScript Breakdown

As you can see this JavaScript code is fairly simple. It contains only one function
that takes a table ID as a parameter.

function alternatecolor(id){ 

}

This if statement ensures that javascript doesn’t break in older browsers

if(document.getElementsByTagName){  

}

In these two lines we are getting table rows based on the table ID parameter passed to this function, and assigning those table rows to a variable called rows.

var table = document.getElementById(id);
var rows = table.getElementsByTagName("tr");

read more

Related Posts:

Setting up a site in dreamweaver CS4

Dreamweaver is known as a web design/development tool, but it also provides some great file management features for the occasions when you have to rename, FTP and move files. And to take advantage of these and other site management features, you always start your projects by defining a Dreamweaver site first.

You can access Dreamweaver’s site management in three different ways:

[flickr id=”5802253771″ thumbnail=”medium” overlay=”false” size=”medium” group=”” align=”none”]

read more

Related Posts:

© Copyright Emir Plicanic - Theme by Pexeto