Import Spreadsheets and add Style Sheets

Please post your tutorials for this software in here.
1 post Page 1 of 1
Contributors
User avatar
hungryhounduk
VIP - Site Partner
VIP - Site Partner
Posts: 2870
Joined: Mon Jul 27, 2009 11:58 am

Dreamweaver> Importing Spreadsheets into Dreamweaver

Hi All

Here is another Tutorial on Importing Spreadsheets into Dreamweaver, We will be Importing our Spreadsheet ( Which you will create in EXCEL ) and then Import into Dreamweaver and then we will add a CSS (Cascading Style Sheet) to it too make it look nice and stylish, rather than the usual plain (Boring) Spreadsheet.

Ok then, Lets get Crackin cooll;

1. Creating the Spreadsheet
* You need to create your Spreadsheet in EXCEL and when you have finished you need to SAVE the Spreadsheet as "Comma Delimited File" like the Pics below

Image

Image


*In this Example I have created a Ficticious Spreadsheet for a Site called "AfterCoder" which shows all the details of its Members, and have column Headings as:

Name
Donated
Posts
VIP
Age
Country
Male
Femail
Comments


*But you can have what you like and tailor the Spreadsheet to your own specification.
Most people use Microsoft EXCEL to create Spreadsheets. but that doesn't matter as Dreamweaver MX isn't compatable with proprietary Database Formats. You need to save the Database File as a delimited text file which the app can parse.

3. Open up Dreamweaver and start a new Blank Page to house your NEW Spreadsheet Information

4. IMPORTING THE DATABASE.....With the New HTML Page open, Click on INSERT>TABLE OBJECTS>IMPORT TABULAR DATA, The menu will open and you can click on the BROWSE Button and Navigate to your Spreadsheet that has been saved as a Tab-delimited text file.



**CHANGING THE DELIMITER.....If you save your Spreadsheet to a Text file, its usually saved as a Tab delimited file, However some other Spreadsheets use other Characters to delimit the Tables. The Drop-Down Delimiter Menu allows you to select some of the other common delimiter Characters that are sometimes used.
If you just Import your Spreadsheet into the HTML Page with the Table Width: Fit to Table button checked, it will automatically be formatted and a Table created to accommodate the data. However, there are Options on the Import Tabular Data Menu that let you Customise the procedure.

Image

5. Check the Table Width: Set button and then you can adjust the Percentage/Pixel Width of the Table to Screen Ratio using the Drop-Down Menu. You can also Input the amount of Cell Spacing and Padding you require and the Size of the Border, the Top line can also be set to BOLD or ITALIC.

Image

With all settings altered you can now go ahead and use the File Browser to select your Spreadsheet that's been saved as a delimited Text file into your Dreamweaver HTML Page. The Table will be created to the specification detailed on the Tabular Data Import Screen.

6. The Table has now been Imported into the HTML file, If you want to update the Info into the file, you will need to make the changes to the Original Spreadsheet File then RESAVE it as a NEW Delimited Text File and then Import it into the HTML Document again. However, we are going to add a CSS (Cascading Style Sheet ) to Link to it to make the Formatting Automatic.

7. With your Spreadsheet Imported into your HTML Page, it's time to Jazz up the design with a Style Sheet, Luckily enough there are some pre-designed default Style Sheets within Dreamweaver. To use one of these, Click on FILE>NEW and select STYLE SHEET from the list.

8. As you can see, there are already a number of pre-designed Style Sheets that you can use, or use as a Template for your own design. There are a limited number on the list and you can always DOWNLOAD NEW TEMPLATES from the Internet. Make your selection and then click CREATE.

Image

9. The Style Sheet will now be opened in the Main Editing Window of Dreamweaver. Here you can EDIT the Style Sheet and alter the colors and Font Properties to how you want it too look. Once you have done that, You can SAVE it as a HTML or CSS File.

Image

Image

10. With the New Style Sheet saved as a seperate document, Click on Text>CSS STYLES>MANAGE STYLES. The Style Menu allows you to attach a Style Sheet to your Current Document, Click on the attach button to direct the File Browser to your Style Sheet.

11. Once you have directed the Style Menu to your Style Sheet, you can preview the Style or directly attach it to your HTML File. The great thing about Style Sheets is that you can quickly experiment with different Style Configurations with a Few Clicks of the Mouse.

***While Importing the Spreadsheet into Dreamweaver is easy, sometime the results can be less than pleasing. As it's an Automatic process, there's no accounting for extraneous Cells or Columns added to your Table. Using tables in Dreamweaver is simplicity itself, and once you've imported your spreadsheet you can easily remove unwanted Cells by marking them with your MOUSE and pressing Ctrl+X to cut them out.

***Sometimes certain bits of Data might look better removed from the Main Table, and you can easily do this by marking the Area you want to seperate and pressing the SPLIT CELLS Button in the Properties Panel. You'll then be asked whether you want to SPLIT the Area into ROWS or COLUMNS.

***If you aren't using Style Sheets, you can change the Background Color of your Table by selecting the Table Area and clicking on the Bg Color Button. An EYE DROPER will appear and you can now select the Color you want to change to. You can also set the BORDER Color this way, If you want to give your Table a Lift, You can set a Background Image by clicking the Browser button next to the Bg Image section in the Properties Tab.

When using a Background Image in a Table, make sure the Transparency turned down so the Picture doesn't obscure the Table Data. You can set the Cell size, Alignment and Border size using the Properties Tab.

Use these techniques to make your Data more Interesting cooll; wahooo;

Once again i hope you all learn something new cooll;

Enjoy

Chris
Image
1 post Page 1 of 1
Return to “Dreamweaver”