Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Importing Spreadsheet Data onto a Page

  • You can import spreadsheet data onto a web page and use a cool feature in DW for to let Dreamweaver build our table for us
  • Open specials.html
  • I have 2 different files we will use to show importing spreadsheet data
  • If you are on a PC with Excel installed you can import an Excel spreadsheet directly using File-Import->Excel
  • If you are not on a PC with Excel, you can accomplish this same task by using a delimited text version of the spreadsheet
  • We will walk through File-Import->Excel first which is a very quick process
    • Choose that command and select specials-import.xlsx from the text folder
    • Dreamweaver will create the table for you
    • Ctrl/cmd-z back & remove that table
  • If you are not on a PC with Excel, it is very easy to create the same content
  • I have a tab-delimited text version of the Excel spreadsheet
  • Any delimited text file can be used for this feature
    • Choose File->Import->tab delimited text & click the browse button
    • Select specials-import.txt which is a tab delimited text file
    • Choose whatever options you want for the table
    • Click OK and you will see your table on the page
  • Those are 2 different ways to import spreadsheet data onto a web page and let Dreamweaver create the table code for you

Importing Spreadsheet Data onto a Page

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Create and Save New Page 0:49
  • Locating Saved Files 1:14
  • Importing Spreadsheet Data 3:45
    • Import Excel Document
    • Delete/Merge Cells
    • Customizing Table Content
  • Importing Delimited Data 7:59
    • Import Tabular Data
    • Choosing a Delimiter
    • Table Formatting Options
    • Table Content Styles
  • Summary 11:16

Transcription: Importing Spreadsheet Data onto a Page

We are now going to take a look at how to get spreadsheet data into a web page using Dreamweaver.0000

Dreamweaver has a couple of different methods for pulling content in from a spreadsheet; so we will look at both of them.0008

Right now, here is my Files panel, and I have the specials-table open; and this is my table of information.0017

What if this table of content was on a spreadsheet, instead of residing on my page to start, and I just moved it into a table?0027

Quite often, there is data that can be put into spreadsheet format, or some kind of delimited text format; and that is what we are going to hook into now, using Dreamweaver.0038

I'm going to create a new page using Ctrl or Command, N; I'm going to save this page, and this one is going to be specials-...let's do specials-spreadsheet, just so we can differentiate it from within our files.0050

I should have an HTML page, if all was well, inside my files.0074

It is always good to double-check that it made it inside the correct folder.0081

Now, there are a couple of different ways, once your page is open, to figure out where that page is being stored by Dreamweaver--because right now, I have a situation where I created a new page; it's open in Dreamweaver; but it's not showing up in my Files panel.0086

And if I click the Refresh button and try it again, it is still not showing up.0103

Once in a while, the Files panel takes a minute to refresh; but if you have clicked that and still can't find your file, how do you figure out where it was placed?0109

This is a very common error when you first start working on the Web.0118

What I can do is hover over the tab in Dreamweaver, and it will give me the path to where that file is located.0123

And if I hover over, you can see this is located inside the Text folder; so, if I go up to the Text folder, that must be where my HTML page ended up, and there it is.0132

How can we correct this issue?--what I want to do is get this file out of the Text folder and into my main root folder; and to do that, I can use the Files panel.0148

I'll select this page, click, and drag it up on top of the very top folder; when I let go, Dreamweaver is going to prompt me to update links.0161

Now, I don't have any links in this file, so I am going to say Don't Update--don't bother updating, because there is nothing in it anyway.0174

Now, I am going to close this version, because this version was located inside of my Text folder; and that is the important piece.0183

I see a lot of people move things here (so it ends up in the correct area, and now I have my specials-spreadsheet showing); but they forget to close this one; they do all their work on this one, and they are not actually working on the correct version.0193

Just be careful of that; if it's in the wrong spot and you move it in the Files panel, make sure you close up that page and re-open the one that is in the correct location.0213

Now, we are going to hook into pulling in spreadsheet data; and I want to explain what this is all about.0225

Right now, I have a text file, and my text file is an Excel spreadsheet, and it is located up inside this area called Specials Import.0232

And I actually have two versions of this same thing: one is an xls, which is an Excel spreadsheet (as in Microsoft Excel); the other one is a txt version.0245

I am going to use the Excel version first.0259

I'm going to put my cursor on the page exactly where I want to place this spreadsheet data, and I'm going to go up to File and go down to Import.0262

Now, provided you are on a PC and that PC has Excel attached to it, or installed on the system, I have this option available to me.0276

So, I can take a spreadsheet and directly import it into my web page from Excel.0289

I'll go ahead and do that; if you are on a Mac system, feel free to watch this--I do have another piece coming up right after this that I will show you how to deal with it if you don't have Word or you are on the Mac side.0295

Now, here is my Excel spreadsheet; this is a folder that I really don't need, so let me go ahead and delete that folder.0312

As you see little things like that in your files, try and keep them cleaned up as you go.0320

What happens is: you say, "Oh, I'll just take care of that later," and it doesn't happen.0326

So, I am going to choose this one and click Open, and Dreamweaver is going to do all of the work for me.0331

You can see, there is my table of Excel data.0338

Now, what happened here is: I got three extra cells of data, because this text was so wide, it captured the cells right above it from my Excel spreadsheet.0343

So, what I am going to do is: I can either select these and delete, or I can click in this first one, drag to the right, and click the Merge button down here.0357

I can go ahead and clean this up this way, or I could have deleted them; since there are just three, it's just as easy to use the Merge; and our table is all set.0370

Now, it's a matter of customizing this; I'll select the first two, and I'm going to go down and make those a header row.0383

The other thing I am going to do is: that header row has centered the content; and I may or may not want that.0391

I think it looks fine in the Travel Special side; but in the Discount side, it doesn't look quite so fine--that is a pretty solid alignment here, so I want my discount to be lined up on the left.0399

I'll simply put my cursor in there; I'll come down to the horizontal, click on that, and say left: I will left align that specific cell.0414

That is an Excel spreadsheet--one way to work with it.0427

And I could pull it in directly from Excel, provided I am on a PC and that PC has Office installed.0431

What if you don't have that available as an option?0439

What you can do instead is: you can ask for whoever has the spreadsheet--ask them for a text-delimited file; and basically, you save it as tab-delimited or comma-delimited.0443

Any type of spreadsheet program will allow you to do that--it doesn't have to be Excel per se.0458

Whatever your spreadsheet is, just go to Export that Data, or Save As tab-delimited or comma-delimited--any type of delimited text; and I'll show you what that looks like.0465

What I am going to do is simply Ctrl+Z back a couple of times and get rid of that spreadsheet table coming in from Excel.0479

What I am going to do instead is pull in some delimited data; and that is this Specials Import right here.0488

Now, if I open this up, you can see, it doesn't really look that different as a text file; but wrapped in as characters within this file are some extra characters, and that is what Dreamweaver is going to hook into.0496

I am going to go over to File, Import Tabular Data; you don't have to have any other program than Dreamweaver in order to use this one.0514

I'll choose tabular data; now, it says "tabular data," but you can actually use any delimiter you want.0526

The data file I want I will browse out to; and it's located in the text folder, and this is that specials-import.txt.0534

I'll add that in there; now, the delimiter here is a tab by default, and what I have is tab-delimited as a text file.0545

But in case you have some other delimiters, you can use a comma, semicolon, colon, or you can even choose Other and type in some kind of a character here.0556

I am going to go back to tab-delimited, because I know mine is; I'm going to set the table width to fit to the data--I always start there.0567

I am going to add a border to my table; and if I do that, I am going to add 0 as cell spacing, so that I don't end up with a double-border look to my table.0577

And since I am here, I will add some additional cell padding; normally tables need that; so I'll set the cell padding to 3.0591

Now, don't feel like you can't modify this once you get the data on your page; I'm just going to set it up this way and see how it looks.0600

I'll go ahead and click OK and take a look.0609

There is my table of tab-delimited data.0613

It goes very nicely into the table, and the table properties are for the most part set up for me.0617

Now, if I want this upper row to be a header, I just click and drag to the right; I'll choose the header row here.0624

You can see, it does make that discount centered, because that is what a table header code does.0632

But I can come down here in the Horizontal and say Horizontal Left, and that takes care of it.0639

These are our Travel Specials; I'll go ahead and copy this, and I should give this a proper title; and I will add an s, since there is more than one.0647

I will also add an s down in this area.0660

And there is our page; I'll go ahead and save it; and we have a nice, neat table--the table is the perfect size for our data, because I said "fit to data."0664

Whether you have an Excel spreadsheet (an actual Microsoft Office Excel spreadsheet), or you just have some delimited text of some kind, you have the capability to let Dreamweaver create all that table code for you.0676

It pulls in very nicely onto your web pages, and it makes adding that type of text very easy to get into a table.0694

That is working with an Excel spreadsheet type of data or delimited text file data and using the File, Import feature within Dreamweaver to take that data and create a table and all the table code for us from within Dreamweaver.0704