Dreamweaver

February 20th 2010 // Dreamweaver // Permalink

Dreamweaver: Import CSV data into HTML

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.

Make sure to save the file as a CSV file.

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

1. Click browse to navigate to the .csv file
2. Specify table width, cellpadding, cellspacing etc. and press OK

And here it is HTML table generated from the CSV file.

 

Do you like this or find it useful? Drop me a note or treat me to a double-espresso from my favorite coffee shop.

November 21st 2009 // Dreamweaver // Permalink

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.

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

Adding title, keywords and a description

By default, each new Dreamweaver page is called "Untitled Document". Unless you want to be one of millions of pages with an exact same title, (try googling "Untitled Document") you need to give your page a unique title that introduces the content of your page.

1. Replace "Untitled Document" with your title in the "Title" field of the document window.
2.  Click the "Head" icon inside the "Insert Panel" and select meta tags you want to add to the Head section of the page.

Editing the head section (meta)

Because the head section is not visible in the Design view we need to open the "Head Content" toolbar. And of course there are couple of ways to that:

• Press Ctrl + Shift + H
• Go to View->Head Content

Or click on the View Option button (1)  of the document window toolbar and select "Head Content".  Head Content icons (2) will display. When you click on one of these icons the Properties panel displays (3) options that you can edit.

Attaching a CSS file

To create a CSS file use same steps as with creating HTML page. Go to File->New, select Basic page and CSS, then click Create.

To attach it to your HTML document click the Attach Style Sheet button from the CSS panel.

Attach External Style Sheet dialog box appears.

The browse button allows you to navigate to the CSS file you want to attach. You have two ways to attach a CSS file: Link and Import.

• Link method is understood by all browsers, even the once that can't render CSS.
• Import method is only understood by more modern browser, which basically "hides" the CSS from the browsers that don't render it well.

Media field enables you to target a style sheet at specific media i.e. screen, print, projection, all etc.

Click OK after you are done with this dialog and your style sheet is attached.

And you are done!

November 11th 2009 // Dreamweaver // Permalink

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.

 

Assign an ID to the table

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

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

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");

Next is a FOR loop that iterates through all rows (rows.lenght). By using modules (%)  operator we are assuring that all rows with even (i) numbers get assigned color_one class and all odd (i) numbers get assigned color_two class.

for(i = 0; i < rows.length; i++){           
     if(i % 2 == 0){ 
          rows[i].className = "row-one";
     }else{ 
          rows[i].className = "row-two";
     }      

 

Applying JavaScript function to the table

Add "onload" attribute to the tag .

< body onload="alternatecolor('alternate');" >

 

November 11th 2009 // Dreamweaver // Permalink

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:

1. From the menu: Site-> New Site .
2. Dreamweaver Site link on the Welcome Page
3. via Files Panel, by selecting "Manage Sites" from the Sites drop-down

Site Definition Dialog

This brings up the Site Definition dialog box. The default is Basic (1) site setup which provides a walk-through wizard to lead you through the basic steps of setting up your site. Click Advanced (2) tab.

1. Select Local Info in the Category panel
2. Type in the Site Name and click the Folder icon next to Local root folder to specify where the site files will be saved.
3. Click the folder icon next to Default images folder to specify where the site images will be stored. (Note: Specifying default images folder will make it easy to import images from other locations on your hard-drive).
4. Select Remote Info in the Category panel
5. Type in your server info and press Test button to test the connection.

If connection was successful, press OK and you are done. If not, Dreamweaver is pretty good at letting you know what was wrong....so always read the error messages!

Other options for remote connection are:

• None: If you are not using any type of remote server.
• Local/Network: If you have access to your web space over a network choose
• RDS: (Remote Development Service) if you work on Web files in conjunction with a Cold Fusion application server.
•  WebDAV:An open-source program, basically provides a solution that prevents more then one person working on the same file at the same time.

File Management

By right-clicking on any of the files or folders in the File Manages, you'll get access to many file management options.

And there you have it, a Dreamweaver site defined in just couple of steps.