Flash Assignment 9 – Working with Motion Tweens

9.1 Introduction to Motion Tweens:

9.1.1 Creating an Object-Based Motion Tween – As we discussed in Assignment 7, the Object-based tween is quite similar to the classic tween, excepting that it applied to graphic objects, that is, graphic symbols, movie clips, bitmaps or artwork created in object drawing mode.

The process of creating the Object-based motion tween is not fundamentally different than that used to create the classic shape tween, however the order is reversed.  Instead of defining the keyframes first, then joining them together with a tween, here we must create the tween span first by right-clicking the object and selecting Create Motion Tween from the context menu.  Flash then creates a span of some arbitrary length (perhaps customizable in the preferences) in the timeline.  We can adjust this tween span length to suit our needs, and then set about creating keyframes within the span to define the motion of our object.  In fact, we needn’t manually insert keyframes, and then manipulate the object’s position on the stage.  Rather, we simply move the playback head to a point in the span where we desire a keyframe, and then position the object accordingly.  Flash will automatically create a keyframe for us at the selected frame.

9.1.2 Altering the Path of a Motion Tween – When we create a motion tween, Flash generates a path for the object to follow from one keyframe to the next.  This path is generally just a straight line, and is visible on the stage as line with a series of dots (each dot representing the object’s position at each frame interval).  We can use the selection tool to modify the shape of this path in the same way that we can modify the shape of any line object.

9.1.3 Altering the Curve of a Motion Path – Expanding on the previous lesson, we see here that we can use the subselection tool and the various anchor-point tools to make more detailed adjustments to the object path. 

9.1.4 Using the Motion Editor – The motion editor is another means by which to view and edit the motion of an object throughout a tween span.  The motion editor appears in its own panel (Window=>Motion Editor), and offers a very granular level of control.  In the motion editor, we get a graphical representation of the Cartesian coordinates of the object over time, with a separate graph for each coordinate axis.

The Motion Editor Panel

We also have graphical representations for other properties, such as 3-axis rotation, deformation, and chromatic properties. 

We can add/edit points along any of these graphs, and even plug-in exact numbers if we really want to precisely control the animation to the Nth degree.  Very pocket-protector stuff.

9.1.5 Setting the Ease Property of an Animation – Ease is Flash’s term for change in the rate at which an object changes position with respect to time; acceleration is everybody else’s term for the same thing. 

Since the motion editor plots the object’s position with respect to time, we can change the acceleration of an object along its path by changing the slope of these plot curves.  However, rather than having to make those changes to multiple axial components separately, we can create a single acceleration curve (Ease curve), and then apply it to any or all of the of the motion editor plots. 

One can see in the image above that each of the plots has a drop-down box for selecting an Ease to apply, as well as the Ease definition area at the bottom of the Motion Edito panel.

9.1.6 Working with Motion Presets – We can apply pre-defined motions to objects by applying tweens from the Motion Preset library.  There are a number of baked-in motion presents in the default library, and we can save our own creations to the library as well.

The Motion Preset library panel can be accessed via the Window menu (Window=>Motion Presets).  Selecting any one of the presets gives us a preview of the motion in the preview area of the panel.  To apply one of the presets to an object, we simply select an object, then select the desired preset, and finally, click the Apply button in the Preset panel.

Of course, once the preset motion tween is applied, we can then go on to tweak it with the editing methods heretofore described.

9.2 Understanding Classic Tweens:

Classic tweens have been previously discussed in sections 7.3.1 and 8.1.

9.3 Understanding Object-Based Tweens:

9.3.1 Viewing an Object-Based Tween - In this section, we look at a Flash file with existing tweens therein, and discuss how to identify what type of tweens they are (Classic or Object-Based).  The easiest way to identify the type of tween is by referring to the symbols in the timeline, which were thoroughly discussed in Assignment 7.

9.3.2 Creating an Object-Based Tween – This has been covered in section 9.1.1 above.

9.4 Using Inverse Kinematics:

9.4.1 – Using the Bone Tool – We discussed the use of the Bone Tool way back in Assignment 2, but here we get a couple of new insights. 

First, we learn that there are two options for controlling the movement of an armature in a Flash file; these being either Runtime or Authortime.  Selecting the Runtime option allows the end-user to manipulate the armature at will with the cursor when the SWF file executes. When the Authortime option is selected, the developer defines the motion of the armature on the timeline, and the SWF file plays-out the pre-defined motion as a classic animation clip.

Note that when defining movement in Authortime, the animation is defined on the Armature layer, which is created by Flash when objects are connected with armatures.  Also, note that the keyframes in an armature animation are not called keyframes, but rather Poses.  One can add a pose-frame by selecting a frame on the Armature layer timeline, right-clicking and selecting Insert Pose from the context menu.  One then manipulates the armature as desired, and a motion tween is created, spanning the distance from the last keyframe/pose-frame to the current pose-frame.

Dreamweaver Assignment 16 – Publishing and Maintenance:

Photo credit: John Trainor, uploaded via Flickr, Creative Commons License

16.1 Managing Files:

Here we get a quick demonstration on using the Files panel to do some file and folder manipulation.  We note that there is a right-click context menu available in the files panel, allowing for quick access to tasks such as New File/Folder, Cut/Copy/Paste, Rename, etc.  We also note that we can drag and drop files and folders within the panel.

Furthermore, we see how Dreamweaver keeps track of what we do with files when we manage them from the Files panel.  For instance, before allowing us to move a file, Dreamweaver alerts us if the move will sever links, or otherwise disrupt our site, and give us the opportunity to have the application update the path information for us.

As mentioned in an earlier lesson, Dreamweaver is only aware of these file manipulations when they are performed from within the application itself.  If one creates folders and shuffles files about from within the OS file-system interface, Dreamweaver will lose track of those file locations.

16.2 Entering Web Server Information:

So, suppose we have thoroughly tested our site operation, and now feel that it’s ready for prime-time.  How do we get our site files onto a web server? 

Well, we could copy all of our files onto removable media, put on some comfortable shoes, and use sneaker-net transfer protocol to shuffle those files down to the local web-hosting company’s server farm.  Then again, wouldn’t it be better if we could just move all of those files directly onto the web server right from our desktop?  Yeah….but suppose your old FTP client was archived on some old 5-1/4” floppy disc buried in your attic, and you can’t remember the command-line syntax to initiate a transfer with Y Modem-G *or* Kermit.  Whaddya’ gonna do?  Well, it just so happens that Dreamweaver has an FTP client baked-right-in for just such an occasion. 

We discussed the site management back in Assignment 5.  Choosing Site=>Manage Sites… from the menu bar brings us to the Manage Sites dialogue.  From there, we select our site from the list and choose the Edit option to bring up the Site Setup dialogue box.  We will select Servers in the left pane of the dialogue box, and then click on the Add Server icon in the right pane.  This will bring you to the dialogue box below:

Here you will give your server a name to identify it in Dreamweaver (anything you want to call it), the IP address of the server (it looks like IPV6 is also supported), and your access credentials.  There is a Test button as well, so you can verify the connection before you close the dialogue.

Assuming that the server setup was successful, we can now return to our files panel.  Here we will select the files we need to send to the web server and click the Upload icon (up arrow) at the top of the files panel.  Just like that, off goes our site onto the inter-webs.

Of course, the web server that we just uploaded our site to is likely running a different hardware/software/OS combo than the cheesy eMachines laptop that we developed and tested our site on, so it advised that we visit the live site and recheck that everything is functioning properly. 

16.3 Expanding the Files Panel

Note that in the Files panel toolbar, there is an icon to Expand to show local and remote sites.  This is useful once we have established a web server and uploaded files thereto.  The Expand… icon maximizes the files panel on our screen, and offers a split-pane file system view, showing the files stored on the remote server in one pane, and local files on the other. 

To schlep files back and forth between machines, one can select the files to be copied, and then click either the Upload or Download icon, as appropriate (sorry, no drag-and-drop in this environment).

16.4 InContext Editing:

A bit of a sales-pitch here for some ancillary Adobe services that allows basic content editing through a web portal.  It’s worthwhile knowing that the option exists, I suppose.  Google Adobe InContext Editing if interested.

16.5 Subversion Control:

Here is another pitch for some Adobe services, although our tutor claims that this one is free (the first one is *always* free, ‘til they get their hooks in you).  Anyway, the Subversion system is a level-based archive system that lets you store and retrieve prior versions of your website files.  You can set-up the system through the Site Setup dialogue by clicking on the Version Control option.

Dreamweaver Assignment 15 – Testing

Photo credit: Tracie Masek, uploaded via Flickr, Creative Commons License

15.1 – Spell-Checking:

There a few odds-and-ends covered here.

First, we look at the process of importing text that was created in MS Word.  We need not copy Word-document text to the clipboard and paste in into a Dreamweaver page.  Apparently, we can just import a Word document as a whole, and the formatting that was applied in Word will be preserved.  This is as simple as selecting File=>Import=>Word Document…, and browsing to the target file in the file browser dialogue.  In fact, I believe that we have covered this in a previous lesson.

Next our tutor demonstrates a new tag; the <blockquote>.  This tag merely indents a block of text, as one would do when including a multi-line quotation in a paragraph.  She applies this tag by selecting the desired text, and choosing Insert=>HTML=>Text Objects=>Block Quote. 

Also, our instructor demonstrates applying a new CSS rule, not from the CSS Styles panel, but by toggling the Properties panel from HTML mode to CSS mode, and selecting the desired formatting options therein.

Finally, she demonstrates the Dreamweaver spell-checker; Commands=>Check Spelling.  Of course, since we are working with an imported Word file in this exercise, we presumably would have already done the spell-checking in Word, but it’s good to know that we have this tool available in Dreamweaver as well.

15.2 Checking for Broken Links:

Before releasing one’s site out into the wild, it is essential to ensure that none of the links between pages within the site have been broken during the site building process.  To this end, we get a look at the Link Checker tab of the Results panel.  We view this panel by selecting Window=>Results=>Link Checker.  Note that this does not check the status of links to external sites, just intra-site links to other files within your site’s file structure.

15.3 Previewing Pages in the Browser:

Of course, throughout this series of lessons we have frequently used the preview in browser command to check on browser rendering of or pages.  We do this by clicking the Globe Icon on the Document bar, and selecting the desired browser from the drop-down list.  Our tutor points-out here that there is an option to Edit Browser List on that drop-down, which we may use to add additional browsers to the option list, and designate which one is the primary browser.

15.4 Checking Browser Compatibility:

Way back in Assignment 4, we discussed the issues of browser/OS compatibility.  Here we see a tool that aids in checking for compatibility issues. 

To use this tool, we choose Window=>Results=>Browser Compatibility to view the Browser Compatibility tab of the Results panel.  This tool will check the current document against a number of browsers/version, which we can edit by adjusting the report settings.  It is probably best to use this tool in conjunction with actually viewing the page in browser one’s self.

15.5 Browser Issues:

Just to reiterate issues of browser differences, our tutor performs a demonstration by inserting a horizontal rule on a page with the <hr> tag, then shows us how this element appears with sharp corners in IE 8, and then with rounded corners in Firefox 3.  Not a significant issue in this example, but just in case one was thinking that all browsers are the same….one best think twice.

Also, we learn how we can quickly display our page in the design view at different screen resolution, giving us a sense of what users will see on their initial view, vs. what they must scroll to see, depending on the resolution of their display.

15.6 Gathering User Feedback:

As we discussed back in section 4.3, when one’s site is has all the pieces assembled, it’s time to start testing it out for functionality.  Our tutor suggests that it’s best to get some fresh eyes on your design, and seek beta testers from outside the web development team.  You should ask them to complete some tasks that you want users to be able to do on your site, such as navigate to the locations page and find a local store near their star system, of find a parts diagram for galaxy-class starship impulse thruster power coupling.  Beta testers can give you important feedback on their experiences using the site, which you can use to streamline the design.

After beta testing and tweaking is complete, you will need to conduct a full-fledged usability test on your site.  This is a comprehensive test that will require significant planning, resources and documentation.  We are advised that usability tests require tester recruitment and demographic data collection regarding same.  Your site needs to be hosted on the same hardware during testing as it will be when rolled-out.  You need well-defined tasks to give to testers and a model for collecting feedback.  Less obvious concerns must also be considered, such as how to compensate testers, and whether non-disclosure agreements with testers are applicable. 

15.7 Page Load Time:

In this section our instructor emphasizes the importance of keeping page load times down to a tolerable level.  Of course, it was not so long ago that loading even the simplest of pages resulted in a frustrating lag while our dial-up connections trickled content bit-by-agonizing-bit.  However, in this era where the broadband connection has become the norm, users are no longer tolerant of slow page loads.  Therefore, it is important to keep an eye on one’s page size, as a larger page = longer load time.  This is particularly important here in the United States, where our so-called “high-speed” connections are alarmingly slow (and expensive) compared to other developed countries.

You can keep an eye on your page size as you build by referring to the bottom of the document window, where among other snippets of information, the current page size and estimated load time are displayed.  Of course, the load time calculation is based on a particular bandwidth figure, which you can choose in the general program preferences settings.  However, the estimate cannot factor-in variables such as latency and server load, so your actual mileage may vary.  Also, our tutor points out that the page size figure counts streaming content in it’s entirety, which leads to inaccurate load time calculations because of the way that streaming content appears to the user. So…once again, this only a guide.  Just remember that richer content vs. shorter load time is a balancing act.

15.8 Dreamweaver Extensions:

Our tutor introduces us here to the Adobe extensions manager, and available extensions (add-ons) for Dreamweaver, as well as other Adobe applications.  Some of these extensions are available for purchase, but others are free for the taking.  The example that she uses is a site-mapping utility that automates what could otherwise be a recalcitrant task, depending on the size of one’s site.

In summary, it seems that browsing over the available extensions might be worthwhile.

Dreamweaver Assignment 14 – Reusable Content

Image credit: Bentley Smith, uploaded via Flickr, Creative Commons License

14.1 Template & Library Overview

Dreamweaver provides a number of template webpages to help get one started in designing a site.  These templates are complete webpages with editable content.

One should be aware that the template comes with folders to store all the required files that generate the page, and that you must keep these folders at the root-level of your site file structure.  Furthermore, one should not add or remove any files to/from these folders, or things may go haywire.

Note also that these templates come with CSS files, so after making any changes to the layout, one must be sure to use the Save All option to ensure that the CSS files are saved as well as the HTML.

While the template is an entire webpage, library items are elements of a web page, such as headers and footers.  These are reusable pieces that you can draw from to place in your pages.  These items are stored in the Library folder, and given .lbi extensions. 

Note that template and library are easy to locate by navigating to the Assets panel, and selecting either the Template or Library icons as appropriate.

14.2 Creating A Library Item:

A good example of an item suitable for the library is a navigation bar, or series of navigation links, which one would likely want to add to every page within a site.  Our tutor demonstrates this process for us. 

First one should view the Assets panel, and select the Library item view.  Next, one must select the elements that are destined to be added to the library (navigation links in this example).  We are advised here to refer to the code view window to be sure that we are getting all of the code that we wish to bring along with our item.  It may be necessary to highlight additional code in the code window to get all of our associated tags.  With the desired code selected, we proceed to click the New Library Item icon at the bottom of the Assets panel.  Our item appears in the panel, but is given the default name untitled.  The item name is selected for editing, prompting us to go ahead and type a unique name for the new library element, for example, “nav_links” would be appropriate.

With our page element now stored in our library, we can open any page within our site, and simply drag the navigation links out of the library and onto our page.  One will note that only the HTML code associated with that item is stored in the library.  CSS formatting rules do not travel with library item, so one may have to apply formatting as needed.

14.3 Modifying a Library Item:

Suppose now that in our above example, the navigation links library item, we have the need to modify the text links to include links to more pages.  To do this, we can simply select the item from our library (in either the files list or library view of the assets panel), and double click it to open it for editing in the design window.

From here, we can edit the item as needed.  But what about the instances of the nav links that we have already copied to other pages?  Do we need to replace those with the updated nav links?  As it turns out, no.  Dreamweaver is happy to cascade these updates for us.  It will however ask us to confirm that we want it to do so before acting. 

Neat-o, eh?

14.4 Converting a Page into a Template:

Suppose that we slaved over a hot laptop all day to build one of our pages just the way we like it.  Must we repeat this arduous task each time we want to create a similar page?  Fortunately, no.  We can easily save a copy of our page to a templates folder, and use a copy of same to build off of in the future.

The process is as simple as selecting the File=>Save as Template command, and giving our template a unique name.  Dreamweaver automatically creates a Templates folder to store our page file in, and gives it a .dwt extension.  As mentioned earlier, we should regard this folder as a restricted area, and place no other files within, lest things get screwy.  Also, when saving our template, Dreamweaver will ask us if we want to Update Links.  Without going into the nuts-and-bolts of what this really means, our instructor advises us to affirm that we do want our links updated.

14.5 Creating a Template Page:

So, now that we’ve seen how to store a template page, we need to learn how to make use of it.  When we want to create a new page, we do by means of the File=>New… menu command, which launches the New Document dialogue box.  Note that among the options on the left-most side of the dialogue box is Page from Template.  Selecting this option shows us a list of the variors templates that we have created.  We may select any template, and a copy of that page will open in our design window.  Note that when we create a new page from a template, the New Document dialogue has the option Update page when template changes checked by default, and it’s probably in one’s best interest to leave it checked.

Note that when our new template-based page opens, the page is locked for editing.  This is the default behavior of Dreamweaver when we create pages from templates.  Going forward, we will unlock the areas of the page that we need to edit as we go.

14.6 Working with Editable Regions:

OK, gotta back up a little bit here.  It turns out that we cannot unlock any part of a page created from a template.  If fact, we must go back to the template and select areas of the template that we wish to make editable for pages created from that template.

This seems to needlessly tie one’s hands, and could be giant PITA down-the-road.  At this point, one might speculate that working with templates is not really very beneficial.  If one wants to work from a pre-defined page, perhaps it is better to save a copy of that page as regular HTML file, and then make copies of that page to build off of.

14.7 Applying a Template:

In this section, our tutor demonstrates the process of using a template not as a starting point to build a page, but as a more of a mask to lay upon a page that has already been created with content on it.

To do so, we begin by opening the page that we wish to modify.  From there, we select the Modify=>Template=>Apply Template to Page command.  This will open the Select Template dialogue, prompting us to choose a template.  Note again that the option Update page when template changes is checked by default.  From there, we see a dialogue entitled Inconsistent Region Names.  This dialogue box will ask us how we want to translate the existing page content into the editable areas defined on the template.  In our instructor’s example, this process is not too messy, but can easily see how ugly the process could become, depending on how different the existing page is from the template, and the existing editable areas of the latter.  This could result in the need to go back add editable areas to the template, but since we were advised to keep the Update page when template changes option checked, this could have untended consequences for pages that we have already applied the template to.

Given that a template can be applied over exiting pages to experiment with different looks, one can see how templates can be useful.  However, this writer is suspicious of relying too heavily on template use, as there seems to be myriad problems lurking in the shadows for one who goes down the template path.

14.8 Detaching a Template from a Page:

Suppose one applies a template to one’s page, as described in the previous section, and decides then that this was a bad move.  One can return to the menu bar, and select the Modify=>Template=>Detach from Template command.  Just like that, you’ve undone the layout change, and you’ve got your original page back, right? 

Wrong!

Detaching your page from the applied template will release your page from the iron fist of the template file, meaning that everything will now be unlocked for editing, and changes to the template will no longer cascade down to the page in question.  This can be a good thing, if you want to capture some design elements from a particular template, but want the freedom to go on and modify the page as you see fit, while being free from having your page unintentionally modified later when the template is changed.  However, be aware that detaching the template does not undo the changes made when you applied the template, therefore you do not get your original page back.  One should be cautioned to save one’s page before applying a template, examine the effects of an applied template carefully, and close the page without saving if one wants to back out of the changes made.

Dreamweaver Assignment 13 – Forms

Photo credit: Katherine Kenny, uploaded via Flickr, Creative Commons License

13.1 Creating a Form:

Forms, whether they be paper or electronic, are principally for gathering specific formatted data.  With Dreamweaver, we can inset forms on a webpage by using the tools supplied on the Forms tab of the insert bar.

To get started, we simply click the Form icon.  Dreamweaver creates an area on our screen where we will craft our form layout, and inserts a <form> tag in the HTML code.

Glancing down to our Properties panel, we see some data fields pertaining to our newly created form.

The Form Properties Panel

 

Of course, there is a Form ID field, allowing us to name this particular form.

The Action field allows us to specify an executable script to call when the user submits her form.  This is usually some code that submits the input to a database, and possible does some data validation and/or runs some queries.  We need not specify the action at this point.

The Method dropdown box specifies a protocol for data transmission.  Our tutor advises us that the POST method (selected by default) is the most secure, and therefore preferred, method.

13.2 Text Fields:

The first element we add to our form is a text field.  Clicking the Text Field icon from the insert bar brings us to the Input Tag Attributes dialogue.  

Input Tag Attributes dialogue

  

We are immediately prompted to give our field a unique identifier, such as first_name, or some such.  This ID will be used by the database that we post our data to, but not visible on our form.

What will be visible to the user id the label we associate with that field, so we must label it First Name, or something that will tell the user what data to enter.

The Style attribute has to do with data handling by the script and the database, so we will leave the default value for now.

The Position option refers to the placement of the label with respect to the input field.

The Access Key is not discussed.

The Tab Index specifies the field’s place in the order in which the cursor focus moves from field to field when the user hits the TAB key.  We need not worry too much about it while adding fields, but we must verify that this order is correct before we send our form out into the wild.  I tells ya, there ain’t nuttin’ worse than a form with a botched tab index….don’t get me started.

Once we have finished with our attributes dialogue, our text field appears on our screen as the current selection.  Once again, a glance down at the Properties panel shows us a few parameters regarding our field, such as field size, single/multi-line, and the like.

13.3 Additional Form Fields:

Here we see our tutor add some other standard form-data input devices; namely a list box (which Adobe apparently calls a Select List/Menu), and a Radio Button group.

13.4 Checkboxes and Submit Button:

Oh my…now our instructor demonstrates adding a checkbox group to our form, but unfortunately adds a pair of checkboxes labeled Yes and No to allow the user submit a response to a yes or no question.  The problem with this is that unlike a radio button group, the checkbox group may have any number of boxes checked, or none.  So, a user may submit this form without answering our question, or worse (?), by answering both Yes and No.

Hmmm…I wonder if she’ll catch her mistake before the video ends.

Nope.

13.5 Validating Form Data:

Here we get a look at some rudimentary validation tools for our form data.  Of course, the process of data validation and error handling can be quite complex (as any programmer will attest), but we can build-in some preliminary checking right here in Dreamweaver as we design our form.

To do so, we browse on over to our Tag Inspector panel.  From there, we ensure that we are on the Behaviors panel, then click the Add Behavior icon, and select Validate Form from the list of behaviors.  The Validate Form dialogue box appears, listing the fields on our form that are available for validation testing. 

Our options are not all that extensive, but we can indicate that fields be required entries, and also require that character strings be numeric (for which we can specify a valid value range), or that strings pass as plausible e-mail addresses.

13.6 Using Spry for Form Validation:

When adding elements to our form, such as text fields, list or combo boxes, radio buttons, etc, we should note that these tools are available in both plain-vanilla and Spry flavors.

Spry is Adobe’s brand of enhanced form objects.  These come pre-loaded with boatloads of JavaScript and CSS code baked-right-in.  The scope of what all of this does is apparently beyond the pretext of this introduction.  However, for our purposes it is useful to note that Spry tools have some data validation and error handling procedures behind them.  We can take advantage of these advanced features by opting to use these spry tools if we please. 

Dreamweaver Assignment 12 – Tables

Photo credit: Anna Lee, uploaded via Flickr, Creative Commons License

12.1 Creating a Table:

Creating a table is often the only logical way to display data.  Fortunately, Dreamweaver makes basic table setup easy.  Simply clicking on the Table icon in the insert bar brings us to the Table Dialogue Box, which prompts us for a few simple parameters.

The Table Dialogue Box

 

As shown above, to get started we really only need to specify whether we want column/row headers, and the number of rows and columns in our table.  Actually, all of the table parameters can be adjusted after the table is created, so we need not worry too much about it now.

12.2 Using Table Properties:

Here we take a look at the properties of our table that are definable in the Properties panel.  We note that we can adjust the number of rows and columns, the overall table width (either in terms of pixels, or percentage of page), the cell padding (analogous to the box padding described in assignment 11), and cell spacing, which is the buffer zone that exits between adjacent cells.

Also, we note that change our preferences on row/column headers, set the table border style, and choose how individual rows and columns align the data within (left, right or centered).

Finally, we note that there is field available for us to name our table, which is always a good idea.

12.3 Using CSS for Formatting Tables:

We learn here that our table is defined with a series of HTML tags.  Specifically, we’ve used the tags <table> (the whole enchilada), <tr> (table row), <th> (table header) and <td> (table data).  We can use these tags in our CSS definitions just as we have used other elements with HTML tags.

“Fine”, you say, “but I want multiple tables on my page, and I want them formatted differently”.  “If I format with the <td> tag, all of my table data will look the same!” 

Well, don’t get your britches in a bundle. Recall that when we add new CSS rules, we can choose the scope of our rules.  Assigning rules to tag types is one way, but there are others.  If we identified our table with a unique name, we can assign CSS rules with an ID qualifier, and therefore assign rules to just the table bearing a specific ID.

12.4 Importing Tabular Data:

Now that we know how to make and format a table on our website, we’re left with the problem of populating the table data.  Not to worry, we need spend an afternoon cutting and pasting cell data to publish our painstakingly colleted data on FOO vs. BAR.

Virtually any tabular data set, whether a database table, query or Excel spreadsheet, can be saved as a delimited ASCII text file.  By choosing the File=>Import=>Tabular Data command, we just browse to our data file, and specify the delimiter.  Presto, instant table!

12.5 Merging and Splitting Table Cells:

Anyone having any experience working with spreadsheets knows well the value of merging cells.  We can do this in Dreamweaver as well.  To do so, just select any two or more cells, and click on the merge cells icon in the Properties panel.  Should you decide that perhaps that was a bad move, you can select a merged cell and click on the split cells icon to break it up again.

12.6 Modifying Rows and Columns:

Adding and deleting rows or columns to a table can be done with a right-click and context menu selection, or right from the properties panel.  Also, column widths and row heights can be adjusted freehand select-and-drag with the mouse, or again, by changing entries in the Properties panel.

12.7 Aligning Tables:

Here we get a word of caution on table alignment.  Note that the Properties panel contains a field labeled Alignment, which adds HTML code to align our table.  We can also adjust table alignment using the margin property in CSS (Note: setting the margin to auto centers the table in the browser).  Our tutor warns us that these controls can fight amongst themselves when at odds with one another.  She recommends leaving the HTML Alignment property set to default whenever we are using CSS for page layout, and making our alignment adjustments with CSS rules.

Dreamweaver Assignment 11 – Page Layout with CSS

Photo credit: Jatinder Joshi, uploaded via Flickr, Creative Commons License

11.1 Why CSS for Page Layout:

To open this section, our instructor explains to us just how lucky we are to have CSS at our disposal for page layout.  Why, when she was a kid, they had to layout everything in HTML 1.0, and they had to *walk* their webpage files over to the server farm on floppies, ‘cause if you tried to upload it over the inter-tubes it’d tie up your land-line for a day-and-a-half, and we didn’t have mobile phones, so of course you’d be cut off, and you needed your modem anyway to pirate music from Napster…well, you get the picture.

11.2 How to use CSS for Page Layout:

Here we are advised that we will be using the HTML <div> tag to define areas of our page, such as a header area, and then using CSS to assign unique identifiers to these divisions, and create rules for their layout.

11.3 Understanding the Box Model:

In this lesson, we are introduced to the properties of Border, Margin and Padding.  These are properties that are associated with a rectangular piece of screen real-estate, or box, as the model is named.

Our instructor starts out by demonstrating a boxed area of screen, with a defined size of 400 pixels square.  This is both the overall size of the box, as well as the usable real area within same.

Next, she adds a 20 pixel margin to the box (which can be done with either the Properties panel, or the properties area of the CSS Styles panel).  We note that a buffer zone is created around the outer edge of the box.  The usable area within remains the same, but the box no commands more of the screen.

Then, she adds a 2 pixel border to the box.  Now the box edges are of noticeable thickness, and still more screen area has been claimed.

Finally, she adds a 10 pixel layer of padding, which is analogous to the border, except that it lies between the border and the inside of the box. 

So, we still have 400 x 400 pixels of useable space within our box, but we see that our box now speaks for an area of the screen equal to 464 x 464 pixels.  Obviously, we must make allowances for margins, borders and padding when designing our page layout.

11.4 Inserting <div> Tags:

Before we create CSS rules for laying out our divisions, we must first define our divisions with a bit of HTML code. 

This is easily accomplished by selecting the content that we wish to group together, whether it be text, graphics, or a combination of both, and then clicking the Insert Div Tag icon from the Insert bar (on the layout tab).  A dialogue box then prompts us to confirm that we want to surround the selection with a division, and also to assign a unique name to our division.

We also note here that divisions can be nested within one another. 

11.5 Creating a Style for a <div> Tag:

Having created some page divisions, we not set about creating some style rules with CSS. 

Moving over to the CSS panel, we click the New CSS Rule icon to launch the new-rule dialogue box.  We select “ID” as the rule type, since our divisions are all identified with a unique ID.  We then specify the specific ID of the division we want to set rules for, and finally, where we wish to store these rules (existing CSS file, new CSS file, or on this page only).

Having done that, our rule definition dialogue box appears.  This is the same dialogue box that we discussed back in Assignment 8, so we needn’t re-hash the rule definition box here.

11.6 Editing a Style for a <div> Tag:

Like all of our CSS style rules, we can always modify our <div> tag rules by accessing them in the properties pane of the CSS Styles panel.

11.7 Inserting a <div> Tag with an ID:

This section describes a shortcut for creating divisions with HTML tags, and also defining the CSS rules for said division, all in one continuous process. 

Previously, we created our divisions with tags first, then created CSS style rules to apply.  In this example, we create the division in the usual way, but we make use of the Create CSS Rule button in the Insert Div Tag dialogue box to do everything in one fell-swoop.

11.8 Creating More Styles:

The only element of note here is the practice of using a different insert method for a division tag. 

In this case, we wanted to insert a new division where there was as of yet no content.  Since we were not able to select the content to insert, we selected instead the content we wished our new division to precede.  When using the Insert Div Tag dialogue box in this case, we chose the insert before tag option, thus inserting the empty division before the content that we had selected.

11.9 More Practice with Styles:

What can one say, this section delivers what it promises.  A couple items of note here.  Firstly, we are introduced to the clear property as it applies to divisions.  This resolved a layout issue that arose when some divisions had alignments set to float left and float right.  In this case, the clear property had to be assigned to our footer, instructing it to provide clearance for the floated divisions, and take its rightful place below them.

Also demonstrated here was the practice of duplicating a CSS rule.  This is done with a right-click on a rule in the CSS Styles panel.  This is a time saver, in that one needn’t re-define all of the formatting rules for a new element, if there are existing rules that are identical, or nearly ,so, to the desired rules for a new element.  This process is really analogues to right-clicking on a file in the file system, and using the copy/paste commands from the context menu.

11.10 Creating a Style for Links:

Creating styles for links hold some interesting possibilities, in that we can define variable rules depending on the link state.  That is, the link (hypertext, in this example) can be set to follow different formatting rules depending on whether it is un-followed (has not been clicked-on by the user), currently under the user’s cursor, or has already been followed by the user.

To do this, we select the new CSS rule icon as always, and opt for the Compound selection in the context type dropdown box.  We then have choices in the selector name  field for a:link, a:hover, and a:visited, which correspond to the link states described above.  We can then proceed to define different styles for links existing in each of these states in the usual way.

11.11 Center Page Content:

In an earlier section, we practiced inserting <div> tags into our page.  We also noted that divisions could be nested, and in fact we made use of that property by enveloping all of our page content in a master division, which we termed a wrapper.  This will now serve us well as we endeavor to center our page in the browser window, regardless of screen resolution.

To do this, we focus on the wrapper division, and define three properties.  First, we ensure that our wrapper has been given a finite pixel width.  Next, we ensure that the margin property has been set to auto.  Finally, we set the property called position to relative.

We can than launch the page in the browser, and drag the browser window to varying widths to verify that our content does indeed remain centered.

11.12 Creating AP Layers:

Here we see another way to create divisions on a page, and that is by means of drawing Absolute Position Divisions, or AP divs. 

AP divs are inserted on the screen by means of the Draw AP Div icon on the insert bar.  As the name implies, these divisions are fixed on the page, and thus do not flow or center themselves in the browser window.

Also noteworthy is that style rules created for content in AP divs is stored in the HTML code of the page by default, not in a CSS file.  The rules are accessible on the AP Elements panel, and can be moved to a CSS file from there if desired.

11.13 CSS Inspection Tool:

The CSS Inspection tool offers an informative live view of the relevant CSS rules and HTML code that pertain to the content that you select on the screen when the inspection tool is enabled.  

It’s difficult to gather an appreciation for the power of this tool without having had the need to trace idiosyncrasies or bugs on a large project, yet one can still imagine how useful this must be.