Creating Web Pages with Macromedia DreamWeaver MX 6.0 for the Mac (Without Knowing HTML!)
Edition 2: Tables - Images, and Text
Last time we learned all about the basic functionalities of Dreamweaver. We learned about the toolbar, the appropriate commands to create hyperlinks, make pages dynamic, and how to spruce up text with font, size, and color variables. This edition we will learn specifically how to create a table using Dreamweaver. If you power up Macromedia Dreamweaver and open a new document, or an old document, for that matter, you’ll notice the familiar toolbar, which is uniquely organized into useful tabs. The "Common" tab was discussed mainly in the first lesson. The tab you really want is the "Tables" tab. This tab is what really allows you to get into the juice of table creation. Okay, now that you’ve got a new html document set up and the tables tab primed up you are set to go. This is what your workstation to look like with the "Table" Tab active:
Creat a new Table
Okay, now its time to access the table menubar. Click on insert table. You will be presented with a box that ask you to specify the number of table rows and the number of columns to be in your table. You’ll see this dialog box:
For our example we want to begin to work with an extremely simple table – just so you can begin to grasp the process of working with tables in Dreamweaver. I will give you the details of these various dialog boxes so that future table creation can be done on your own. Its important to note that all of these table "attributes" do not necessarily need to have values. Let’s start with the most basic and essential attribute. First we’ve got "Rows". This obviously is the amount of rows your insert into your table. For our example, let’s insert 3 rows – the default. Next insert the number of columns – 3, the default, is what we will use for this tutorial. Okay, so after you fill in the essentials. Start with the width. The width can be defined by two different methods – percent or pixels:
or
Width attribute
Percent selected allows you to enter a value (a percentage) that tells the web browser how much of the window you want the screen to cover. The benefit of using percents, of course, allows your tables to automatically adjust the the length of the window, and adapt to the window size. This, like most webpage construction attributes, has its pros and cons. If you want to have a specific length of a table so that, for example, the full size of an image will be displayed in the browser window, using the percent attribute will produce a dynamic table. In other words, the table size will change everytime the browser window size changes. Now for experimenting with the pixel and percent attributes.
First try entering 50 (50%). Great, now flip to pixels, to do a pixel experiement. A pixel is a computer unit of measurement. Think of it as a computer "inch". So specifying a pixel length will result in a table with constant, unaltering size. Enter the amount of pixels that you would look to generate being the width of your table – say, 500. Now your table has a specified length! The other attributes – Border, Cell Padding, and Cell Spacing are the non-essential attributes, but allow your table to be much more detailed. Border specifies how thick you want the lines encircling your table to appear. If you would like your table just organize data in cells, use a border of 0. For this tutorial make sure your border is greater than 0 so you can see the affects of the different attributes. The next thing you want to do is fool around with Cell Padding. Cell Padding is exactly what you want if you want to give more "space area" to each cell. Try typing in 7 for Cell Padding, and then looking at the affects of the table. It should create extra buffering space around each cell. Once you’ve done that, you can examine the "Cell Spacing" information tablet. This allows you to separate your cells. To see cell spacing in action, take a quick look at the table at the top of the page which has a "Cell Spacing" value of 10. Having a greater "Cell Spacing" value will, obviously, make your table much larger – covering more area on the page.
Now examine your newly created, spectacularly intricate table in the graphics view! You’re a genius, you’ve just created your first html table! Congratulatins! Okay, the biggest challenge is now over. First off, you want to make sure that the table is in the right place. You can alter the place of your table by selecting it and then looking up on the command toolbar. There is neatly defined panel under "Text" specifiers for you to create the alignment of your table. Click Text ¬ Align (after highlighting your table) and select whichever alignment you want for your table. Because this entire lesson is about tables, click on the "Center" alignment option to make sure your table is emphasized in the center of your page. After you’ve configured the alignment, you are pretty much finished with your table project. Of course, there are all types of table attributes such as color, column span ( a more advanced topic), and even background images that can be modified to enhance the appearance of your page’s outlook. You can try to insert an image into the table by going to Insert ¬ Image. Then when your image pops up in your html window (the image must be a valid HTML image – a jpeg or a gif), you can drag it into your newly created table and you’ve got yourself an image that can be neatly aligned with text as with this table displaying one of our famous president:
Well, that’s pretty much it for basic table creation and using the specific attributes to construct and configure a table that you meets the organizational needs of your site. For further usage of tables consider that they are utilized in almost any page that requires organization of information -- forms, image galleries, or pretty much any time you create a decent web page. For example, try an experiement and go to any page and look at the page source. Notice all of the <tr>, <td>, <table> attributes? Those are all HTML mark-up syntax which specify tables. Great! Now you can talk to all of your HTML gurus and throw around the table, row, and cell padding attributes as though you know HTML like the back of your hand and dream of table columns in your sleep! Shhh! Don’t tell them that you use Dreamweaver and learned from these tutorials! Good luck with all of your webpage creation! Check back next lesson for tutorials on how to create:
For Questions, Commetns, and Conerns Contact the Webmaster
SpyderByte Corp.
Colorado Springs, CO 80903
|
