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.

Dreamweaver Assignment 10 – Creating Links

Photo credit: Bart Maguire, uploaded via Flickr, Creative Commons License

10.1 Introduction:

We start off by taking quick look at the Dreamweaver live view feature.  This feature allows one to see the page that appears in the design window to behave as though it’s being viewed in a web browser.  This means that one can check the function of mouse-over scripts, dropdown boxes and other dynamic elements without having to launch the browser each time.  Live view can be toggled on and off via the Live View button on the document bar, or via the Live View option on the View menu.

Moving on, our tutor outlines some of the different types of links we might incorporate into our pages.  For instance, our home page might have navigation links to sub-pages within our site.  We might also create links to external webpages.  Our links might be hypertext based, like this, or clickable images that link elsewhere.  We may use named anchor links, which most of us have experienced on FAQ pages, wherein clicking a link on a page simply scrolls the page to the appropriate content.  We may link to specific files within an FTP site, or files that launce on the users system with a third-party application, such as MS Excel or Word.  We may even utilize mailto: links, which launch the users mail client and populate the addresse field.

10.2 Linking to a Page on the Inter-Tubes

In this exercise, we create a link to an external website with hypertext.  This is a simple matter of selecting the text on our design page that we wish to serve as the hypertext, and then inserting the URL into the Link field in the Properties panel. 

We also note that the default behavior for the link is to launch the linked-to URL in the current browser instance or tab, leaving the current site.  Sometimes this is the desired action, but not always.  We can determine the browser’s behavior in this regard with the Target field, also in the properties panel.  By selecting “_blank” from the dropdown list, we can instruct the browser to launch the linked URL in a new window or tab. 

10.3 Linking to a Page on the Same Site:

Linking to other pages within your site can be done as with external links, by simply highlighting the link text, and inserting the target page in to the link field.  However, for internal pages one only need specify the relative filename of the page, such as foo.html, rather than the entire protocol/domain/suffix/etc…

An even cooler way to create links is to begin by highlighting the link text, as before, and then using the click-and-drag gesture in conjunction with the target icon next to the Link field in the properties panel.  One can drag this icon over to the files panel, and drop it on top of the desired link target.  The page filename will automatically populate into the link field, with no chance of misspelling the name.  Sweet!

10.4 Linking to a non-HTML File:

One can create a link to any type of file just as easily as linking to HTML file; the process is the same. 

10.5 Named Anchors:

This type of link is useful for long pages, especially text-heavy ones such as FAQ’s.  This technique allows one to create a link on a page that scrolls the page to another position.  For instance, one might create a named anchor link at the top of an FAQ page with the hypertext How much does it cost?  This link could then point to a named anchor further down the page where information on pricing is spelled-out.

To do this, one navigates to the target portion of the page, and inserts an anchor with the gold anchor icon found on the insert bar.  A dialogue box will appear asking for a unique name to assign to the anchor, such as pricing (no leading caps or spaces allowed here, just legal HTML).  Then, one can create the link by highlighting the hypertext-to-be, and specifying the target anchor’s unique name in the Link field, preceded by a “#” (pound-sign), such as “#pricing”.  Alternatively, one can use the target icon to drag a pointer to the anchor. 

10.6 E-mail Links:

E-mail links, which trigger the default mail client on the user’s system when followed, can be inserted as any other link.  The desired hypertext is highlighted, and the entry in the Link field takes the form of an e-mail address, preceded by the “mailto:” tag.

Alternatively, one can click on the e-mail icon in the insert bar, and a dialogue appears prompting one to insert the link text, along with the target e-mail address.

10.7 Images and Image Mapping:

Ordinarily, one can designate an image to serve as a hyperlink just as easily as text.  However, one can also create multiple links from within an image by creating hot spots, or an image map superimposed on a graphical image.  This is most frequently encountered when visiting a global homepage for a multinational entity, and a map of the world appears, asking the user to select her region. 

The developer achieves this effect by using the Dreamweaver image mapping tool to draw regions atop the desired graphic (although these drawings are not visible when the page is rendered in the browser).  With the image selected in the design view window, the Properties panel displays information about the selected image.  Also in the Properties panel, in the lower left corner, are a set of icons representing a cursor, rectangle, circle, and polygon.  These are the drawing tools that one can use to draw and edit shapes on top of the graphic image.  When a region is drawn with one of the drawing tools, or a previously drawn region is selected with the cursor tool, the properties panel changes to show the properties for the current hot spot.  Any of the previously discussed link types van be inserted as the link target corresponding to the current hotspot. 

Once the hotspots are defined, the instance of the image map drawn used should be given a unique name to avoid possible conflicts with other image maps on the page.  The name can be assigned in the Map field of the Properties panel.

10.8 Creating a Rollover Image:

A rollover image is simply an image that changes when a user’s cursor moves over it.  Often, this might involve an image changing color, or magnifying, of generally responding in some way to grab the user’s attention.  Inserting a rollover image does not necessarily require that a link be associated with the image in question, but this is an effective way to provide feedback to the user that an image serves as a link. 

Inserting a rollover image is really inserting a pair of images, and specifying one as the default image, and the other as the rollover image.  One can specify these images by choosing mthe Insert=>Image Objects=>Rollover Image menu command.  A dialogue appears prompting one to specify each image file location, and the optional link to which the image should point.

10.9 Inserting a Navigation Bar:

In this section our tutor discusses inserting a navigation bar that she created in Adobe Fireworks.  Unfortunately, the creation of the actual navigation bar, along with any HTML code embedded within same, was not covered (maybe that’s in the Fireworks DVD, sold separately, batteries not included, not available in Alaska and Hawaii). 

Well, the process of importing the Nav bar seems simple enough; Insert=>Image Objects=>Fireworks HTML. 

Dreamweaver Assignment 9 – Images and Rich Media

Photo credit: Yi-Lin Hsieh , uploaded via Flickr, Creative Commons License

9.1 Web Image File Formats:

In this section, our tutor discusses the pros and cons of various image file formats.  This discussion has been previously covered in Flash Assignment 5, posted 05/25/2011.

9.2 Inserting Images and “Alt” Text:

We begin this lesson by editing our “About Us” page to include a JPG image.   We inset this image by means of the Image icon on the Insert Bar (Common tab).  After browsing for the image file to attach, we are presented with an alternate text dialogue box, asking us to insert a description of the image to be read aloud by screen reader applications.

Once our image has been inserted on the page, we can select the image, and note that the Properties panel now contains fields related to the selected image.  From the panel, we can adjust properties associated with the image, but at this point we will be content to simply adjust the alignment property.   By default, our picture has been inserted “inline”, meaning that it has occupied a series of lines on the page, and pushed the existing text down below it.  We choose to change this alignment to “Left”.  This does not move the image on the page, as it was already aligned with the left margin.  What it does do, is place the image in an invisible box and truncates the pictures use of the lines at the image width.  This allows the text to move up and occupy the remaing area on each line to the right of the picture.  This is analogous to the Box layout in MS Word.

9.3 Image File Path:

Here we draw our attention to the Src field in the image properties panel.  We note that the path in the Src field points to the location from whence we retrieved out picture.  It is important that this path be HTML “legal”; that is, avoid using capital letters, spaces, or special characters in the path.  While the system one is developing on may be tolerant of such pathnames, many web servers will not be, which may result in the image not displaying as intended.

We also note here that if we move the image source file from within the Files panel in Dreamweaver, the application will acknowledge the move, and prompt us for approval to update the image path.  If, however, we executed the move at OS file system level, Dreamweaver would be left out-of-the-loop, and thus would not be able to find and display the image.

9.4 Working with the Assets Panel:

Here we refer to the Assets tab of our Files panel, and note that this tab lists for us, among other things, all of the image files in existing throughout the files and folders included in our Files panel.  Optimally, we really should keep our images together in one folder, but in some cases there may be good reason for separating them in the file structure.  Regardless, the images list on the Assets tab will parse all of included file strycture for image format files, and list them along with their associated properties (Pixel dimensions, file size, format, path).  It also includes a preview area, so a selected image can be viewed.  Furthermore, we can add images to a page directly from this panel, vis drag-and-drop, or by using the Insert button at the bottom of the panel.

9.5 Modifying Images:

We take a look here at the rudimentary image editing functions baked-in to Dreamweaver.  With an image such as a simple JPG photograph, we can make a few adjustments, such as cropping, scaling, and adjusting the brightness/contrast.  One should be mindful that when making adjustments to an image placed on a page, one is not merely adjusting the instance of the image on said page, but rather modifying the source file itself. 

It is advisable to perform anything beyond the very simplest of editing within a dedicated image editing application, such as Photoshop or Fireworks.  The Dreamweaver program preferences can actually be set so as to launch an external editor by default when opting to edit an image.

9.6 Photoshop Smart Objects:

If one is keen to work with images in Photoshop, and specifically in the native PSD format, then one can take advantage of the Smart Object image-linking feature in Dreamweaver.  This feature allows one to add select PSD files from the Files panel, and add them to ones page.  Now, browsers will not render PSD files, so what Dreamweaver does is make a copy of the PSD image and stores it in a standard format file (such as JPG).  The copy of the image is inserted into the page, but that copy maintains a link with the source PSD file.  So, if one wishes to modify the source file in Photoshop, Dreamweaver is notified that the source file has changed, and prompts the user to refresh the JPG copy on the page.  It is not necessary to manually replace the JPG file with an updated copy of the PSD source; Dreamweaver will cheerfully do that if given the nod.

9.7 Flash Files:

We see here that the process of inserting Flash SWF files is essentially the same as tha for inserting images.  We note that our Assets panel has an icon to display the Flash-format files in our file structure, and we can easily select, preview, and insert into our page Flash content just as we did with image files.

As with image files, we note that when a Flash file on our page is selected, the Properties panel displays information associated with this file type, and allows for the selection of some options governing the file’s behavior and appearance on the page.

9.8 Flash Video:

Adding Flash video (FLV or F4V) files to one’s webpage allows video playback to occur from within the browser (provided that the browser supports Flash content; sorry iPad users), rather than launching a stand-alone media player.  This may or may not be the best solution for one’s project, but Dreamweaver give one this option, regardless.

Again, referring to the Assets panel, we note there is an icon for Video files.  Here, one can find a list of the FLV or F4V files contained within the site file structure.  Adding a video is as easy as drag-and-drop, but note that the Insert FLV dialogue box will appear, asking us to specify a skin option for the video.  The skin is just a set of playback controls that gives the user some degree of control over the video playback. 

Again, note that one added to the page, a video object can be selected and the relevant properties associated with same will be accessible in the Properties panel.

We also note that Adobe provides a media encoder with CS5 that allows one to convert numerous video formats into the Flash FLV or F4V formats for use in inline video playback.  This is fine if one has an uncompressed source video file to convert from.  However, because of its large file size, most video is stored in compressed formant (often encoded on-the-fly by digital video cameras).  If one has only video in a compressed format, such as MPEG, to begin with, then it is ill-advised to re-encode that video to another compressed format.  Doing so has the effect of amplifying compression artifacts, resulting in severe degradation of the video (and audio) quality.

9.9 Favorites:

In an effort to enhance user convenience, Dreamweaver has added the Favorites feature to each of the Asset categories covered above.  That is, if one browses over to the Images list in the Assets panel, and finds that one has exactly three ka-jillion image files therein, it will of course prove tiresome searching for the images that one needs, especially those used frequently. 

Fortunately, one can add those oft-used files to the Favorites area of the assets panel.  This is as simple as a right-click on a selected item (or group of selected items), and selecting Add to Favorites from the context menu.  Now, when one navigates to the Images list on the Assets panel, one can select between the radio buttons atop the panel labeled Files and Favorites, which correspond to all images in the file structure, or just those added to the favorites.  

Of course, this feature apples to each of the asset lists, not just Images.

Flash Assignment 8 – Working with Shape Tweens

8.1 Creating a Simple Shape Tween:

Shape tweens, as the name implies, are restricted to working with shapes.  That is, vector shapes drawn in merge drawing mode, or bitmaps converted to vector shapes with the Modify => Break Apart menu option. 

The process of creating the shape tween is slightly different than when creating an object tween.  To create a shape tween, we define our keyframes first by selecting the desired frames, and choosing insert keyframe from the context menu.  Next we navigate to each of the keyframes and manipulate our shape to the desired configuration.  Finally, we select the frame span between the first and last of the keyframes, right-click to view the context menu, and select Create Shape Tween.  An arrow will now display from keyframe to keyframe within our shape tween, and the entire span will be tinted a light-green color, indicating that a shape tween exists therein.

8.2 Shape Tweening Text:

In Assignment 6, we learned how one can select a text field, then choose the Modify=>Break Apart command to separate each character in the field into its own text field.  If the Modify=>Break Apart command is then reiterated, the text fields evaporate completely, leaving behind the text characters as simple shapes (of course, this renders the text un-editable, so do use care when doing so).  At this point, one can proceed to create shape tweens with the characters as with any other shape.

8.3 Advanced Underwater Zero-G Blindfolded Shape Tweening:

Here we focus on shape tweening of the morphing variety.  That is, rather than working with a single shape, and moving and/or manipulating that shape between keyframes, we can morph one shape into a completely different shape between keyframes with a shape tween.

For instance, suppose one draws places a piece of artwork in the shape of a tofu lump on keyframe A.  Then, say 24 frames (1 second) later, one inserts another keyframe B.  On Keyframe B, one can remove the tofu, and place instead a shape in the form of a crispy slice of warm, savory bacon (mmmmm….bacon).  By joining the two keyframes with a simple shape tween, one can create that ultimate culinary alchemy, turning tofu into bacon before ones eyes. 

Furthermore, if we fine that a shape tween morphing between two different shapes does not progress in the manner we had hoped for, one can edit the morphing process by inserting Shape Hints.  Shape hints are simply reference points that are placed in pairs on the morph from and morph to shapes.  These serve as guide points to directs the morphing process.

Flash Assignment 7 – Working with Layers and the Timeline

Photo credit: Joanna Paterson, uploaded via Flickr, Creative Commons License

7.1 Understanding Layers:

7.1.1 Working with Layers – They say that time is nature’s way of keeping everything from happening all at once.  In much the same way, layers are a means to give ones Flash content some elbow room on the stage.  By separating various graphics objects, shapes and text fields onto separate layers, modifying each of them becomes much easier.  It also lessens the risk that one will change finished content accidentally.  Furthermore, in some cases multiple layers are absolutely mandatory.  For instance, animation tweens are restricted to a single tween per layer, so multiple tweens require multiple layers.

Layers are managed in the Timeline panel.  Within the panel, we can add, delete, organize into folders, show/hide or lock layers. 

• A new layer can be added by clicking the New Layer icon in the panel.

• Clicking the Trash Can icon deletes the current layer.

• The Folder icon creates a new layer folder that layers can be moved into.

• The Eyeball icon toggles layer visibility on/off. 

• The Padlock icon toggles layer locking on/off.  No changes can be made to a locked layer.

• The Rectangle icon toggles the layer view between normal and outline.  Outline view can be helpful when you need reference the position of content on another layer, but don’t want that content to obscure your view of the current layer.

The hierarchy of the layers in the Timeline panel corresponds to the layer visibility on the stage.  That is, content on the top layer will obscure content on any layer below it.  The hierarchy can be easily adjusted, as layers in the panel can be dragged up or down as needed.

Double clicking the name of any layer in the panel allows the user to rename it.

7.1.2 Organizing Artwork with Layers –  In this section, our tutor introduces the use of the guide layer property.  By double-clicking the layer icon (to the left of the layer name in the timeline panel), we open the layer properties dialogue.  Selecting the Guide option turns our layer into content that we can view while assembling or project, but will not show up in the finished SWF file.  This is especially useful for positioning items, such as when creating tweens.  Using guide layers in conjunction with outline visibility mode is particularly useful.

7.2 Understanding Frame Rate:

The frame rate is a property of the time line that dictates how many frames per second (fps) are played when our finished SWF file runs.  A higher frame rate results in smoother animation, but also increases file size.  By default this rate is set at 24 fps, which is the same as a traditional motion picture frame rate.  Under most circumstances, this rate represents a good compromise between quality and file size, will not need to be changed.  However, the frame rate can be set anywhere from .01 to 120 fps.  To do so, simply click anywhere on the stage, and refer to the Properties panel.  Along with the stage size and color options is a property labled FPS, which represents the projects frame rate.

7.3 Understanding the Timeline

7.3.1 Understanding the Timeline Icons in a Classic Tween – In this section, we concentrate on the information contained on the right side of the timeline panel, which is the timeline itself.  Here we see a liner series of frames, represented as small rectangles, located to the right of each layer.  Also in the timeline, there may appear a number of icons.  In this exercise, we will explore the meaning of these icons as they relate to the Classic Tween. 

NOTE:  The term Classic Tween refers to tweens created with versions of Flash prior to CS5.  While CS5 still supports this earlier format, it is termed Classic to differentiate it from the CS5-style Motion Tween.

The first icon we discuss is the solid circle, or dot, smack-dab in the middle of a frame.  This represents a keyframe, or a frame in which some change on the stage is defined.  This could be the appearance of a piece of artwork, or one endpoint of a tween, for example. 

An arrow extending from one keyframe to another is indicative of a classic tween spanning the intervening frames. 

A frame containing an empty rectangular icon indicates that the content in that layer has remained on the stage but unchanged since the last keyframe.

Finally, a empty circle or empty dot represents a blank keyframe.  This indicates that any content on that layer has been removed.

7.3.2 Understanding the Timeline Icons in an Object-Based Tween –  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 appearance of an object-based tween in the timeline is only slightly different.  Specifically, the horizontal arrow spanning the tween is gone, replaced instead by a blue hue overlaying the frames within the tween.  Also, keyframes subsequent to the first within a tween span are not solid circles, but rather diamond-shaped icons.  Once a tween span is defined, selecting an individual frame within the span on the timeline requires the use of the Ctrl+click command; a simple click on a frame within the span selects not the frame, but the entire span.

7.3.3 Aligning Objects with Onion Skinning and the Grid – Onion skin view is a feature that is helpful for editing frame-by-frame animations.  For instance, If one needs to decide where to place an object on frame 30 of an animation clip, it might be helpful to know where the object has been over the previous 5, 10 or 20 frames.  One could move the playhead back to prior frames to see how an object moved over time, but that information is then lost when one returns to edit frame 30.  With onion skin view, one can elect to see a semi-transparent of view of an object as it existed in a given number of frames prior (or subsequent) to the current frame.  The effect mimics that of an illustrator drawing an animation cell laid atop a number of previous cells on a light table.  The onion skin view is selected by means of the onion skin icon just below the timeline.   Once selected, the top row of the timeline (where the frame numbers are displayed) is tinted grey over the span of the onion skin view.  There are handles on either side of this tinted area, allowing one to adjust the covered span my means of dragging the handles left or right.

Also assisting with object placement is the grid overlay.  As one would expect, this feature simply displays a uniform grid atop the stage to aid with alignment.  The grid is displayed via the View=>Grid=>Show Grid command.  Selecting the View=>Grid=>Edit Grid command allows the user to change the grid pitch, color, and whether or not objects snap themselves to the gridlines when placed in proximity to same.  The snap feature can be thought of as magnetizing the grid lines.  The relative strength of this attractive force is adjustable as well.

7.3.4 Using Frame Labels – When defining actions with ActionScript code, it may be necessary to direct the process to a particular frame in the timeline during the execution of the script.  For instance, clicking a particular button may direct the application to frame 50 in the timeline.  While one can reference frame 50 by its frame number in the ActionScript code, this may be problematic.  If the Flash project needs to be modified in such a way that adds or removes frames, the target frame referenced by the button may no longer be at frame 50.  Fortunately, there is a means to assign a label to a given frame, which remains constant even if a frames position in the timeline is changed.

When selecting a particular frame in the timeline, note that the Properties panel reflects that a frame is selected and displays property options for that frame.  Name is among the listed properties, and any frame can be given a label by making an entry in this field.  Once a frame is labeled, ActionScript code can reference the frame by name, regardless of where it may be in the frame sequence.

When labeling frames, one should create a dedicated layer to hold the labels.  Also note that when labeled, a frame will display on the timeline bearing a red triangular flag to indicate that a name has been assigned to it.

7.3.5 Editing Frames on the Timeline – In this lesson we cover the basics of selecting, adding, deleting and moving frames in the timeline. 

Selecting a single frame is ordinarily accomplished with a simple click.  The exception, as noted above, lies in selecting a frame within an object tween (which requires a Ctrl+click). 

A range of frames can be selected by selecting a single frame first, then selecting another frame while holding the shift key.  This results in the span of frames connecting the two being selected.

Once selected, a number of operations can be performed on frames with a right-click context menu.  For instance, selecting a frame and selecting insert frame from the context menu adds a frame in the selected place, pushing existing frames to the right to accommodate the addition.  Similarly, selecting remove frames deletes the selection and shifts the subsequent frames (if any) back to the left, filling the void.

A click-and-hold on a selection allows one to drag the selection of frames to another location on the timeline.

When the frames within an object tween are selected (by clicking anywhere inside the tween), one can expand or compress the length of the entire tween by placing the cursor over either end of the span, which will change the cursor to double arrows, and then using a click-and-drag action to move the endpoints.  Note that this adds frames in a distributed manner across the tween span, so if the length of a tween is doubled, then the interval between any two keyframes within the tween is also doubled.  If this is not the intended result, do not fret.  One can simply select any of the keyframes within the span and drag them to the appropriate positions.

Note also that selected frames can be cut, copied and pasted by means of the right-click context menu.

Dreamweaver Assignment 8 – Formatting Text with CSS

[Image Removed]

http://farm6.static.flickr.com/5307/5638584830_9f88b5a13d_z.jpg

Photo credit: romanlily, uploaded via Flickr, Creative Commons License

8.1 Introduction to CSS: 

Cascading Style Sheets (CSS) provide a means to create rules for formatting the appearance for one’s web site.  With CSS, one can set advanced text formatting options, background appearance, page break behavior and the like by creating a set of CSS rules.  One these rules are set, they can be propagated to pages throughout the website, thus eliminating the need to individually format every bit of content added to one’s site.  Furthermore, once a set of CSS rules are defined, they can be imported and used on other web content projects.

CSS rules are created and managed via the CCS panel in Dreamweaver.

8.2 Places to Store Styles:

Here our tutor gives us glimpse of how CSS sheets propagate onto pages within a site.  We note that there is an HTML <link> tag on the a page to which a particular style sheet should apply, instructing the browser to refer to that CSS rule set, and render the content accordingly.  For comparison, we also see how these formatting rules can be stored without the use of a style sheet, by embedding the formatting code within the individual page’s HTML.  It is immediately evident that this method would involve much duplicity, and making a design change would involve editing this code on each individual page to which the design change would apply. 

8.3 Creating and Linking to a .CSS File:

In this exercise, we use the CSS panel to link a pre-defined CSS file to our example HTML page.  We utilize the link icon in the CSS panel to browse to our ready-made CSS file, and specify that it should apply to rendering the content on the screen (as opposed to applying to print layout, or a screen reader, or some other output format).  When this style sheet is linked, we note that the <link> tag appears in the code window of our example page.  We also note that a new item appears in our related file tool bar, above the code view window.  This item bears the same name as that of the CSS file that we linked to.  By clicking on that item, we can see the actual code contained in the style sheet.

8.4 Creating a Style for an HTML Tag:

Continuing to work with our pre-defined CSS sheet, we note here that our CSS sheet leaves us with some room for improvement, and we would like to add additional formatting rules to our page.  Specifically, we have defined a definition list on our page, and we would like to add some formatting to this list.  Note that our definition list consists of definition terms, denoted in the HTML code with the tag <dt>, and corresponding definition descriptions tagged with <dd>.

To format these items, we refer to our CSS panel, and select the icon for New CSS Rule.  A New CSS Rule dialogue appears, asking us for a context for which this rule will apply.  We specify the Tag option, indicating that we want to propagate a rule to items with a specific tag.  Next, we select from the list of all valid HTML tags, to indicate which tags should be the rule we are about to specify.  In this case, we select the <dt> tag.  Finally, we must define in the dialogue box where this rule will be stored.  We can choose to apply it to this document only (which presumably would embed the style code in the page HTML code, thereby bypassing the style sheet).  We can also choose to store this code in a new style sheet.  Finally, we have the option to add this rule to the existing style sheet that we have linked to.  This third option is the one selected by our tutor.  It appears that caution should be exercised here.  Apparently, we are electing to modify a stand-alone style sheet that we have only linked to.  If we were to link to this sheet from within other projects, these changes would then be evident in those projects as well.  So, look before you leap would probably be some appropriate words of wisdom here.

Having completed the first dialogue box, we see that the <dt> tag now appears as an item under the styles.css item in our CSS panel, and a new dialogue box appears asking us to define the actual rules that we wish to apply.  Here we select some font particulars, such as weight, size and color, and apply them.  We repeat this process for the <dd> tag.  By clicking on the styles.css item in the related files toolbar, we can see the changes that we made reflected in the CSS sheet.

8.5 Creating a Class Style/

8.6 Editing a Style:

In this exercise we work with our Downloads page, upon which we have previously created an unordered list.  We decide that a portion of the text belonging to each list item, specifically the text indicating the file format and size, should be formatted differently from the main text of the list items.  Since the text at issue does not exist within it’s own specific tag (it’s within the <li> tag, along with the rest of the list item text), we elect to create a new class of text to which our new rule should apply, and then specify that text as a member of that class. 

To do this, we again begin with the new CSS rule dialogue, but this time we specify the context as class rather than tag.  We must specify a name for our class as well.  Note that spaces are forbidden in class names, as are leading capital letters (although subsequent capitals appear to be valid).  After naming our new class and clicking OK in the dialogue, we see that our new class appears as an item under styles.css in our CSS Styles panel (as we ,chose to store this style information in the existing CSS file).  We also note that the name of the new class is preceded by a period, as is the convention for classes.  We did not add the period when we named the class.  Rather, Dreamweaver added this element for us. 

We are again presented with the CSS Rule Definition dialogue box, where we make the specific formatting rules as we have done previously (font type, color, etc.).  We exit the dialogue box by clicking OK when finished.

At this point, we now proceed to select the pieces of text that we wish to designate as belonging to this new class.  The easiest way to do this is by selecting the desired text, then referring to the properties panel.  We note that there is a Class dropdown box in the panel, and our newly created class type is now populated as an option in the dropdown list.  Selecting that class from the list includes our selected text as a class member.  Referring to the HTML code window, we note that this text is now bound by a <span> tag, along with a class designation.

We must repeat this process for all of the text that we wish to assign to this class.  However, once this is accomplished, we can easily change the appearance of all text belonging to that class by simply modifying the class rules.  To do so, we simply select the class name in the CSS Styles panel, and then edit the details displayed in the CSS Properties panel.

8.7 Custom Font Stack:

As we discussed in Assignment 4, if you specify content to display in a font that is not installed on the user’s system, the text will not display as you intended.  It is good practice to specify commonplace alternative fonts for the browser to use, lest the browser revert to the user’s default font, leaving you with no control over how the content will appear.  Here we see how one can specify a list of fonts, in order of preference, that the browser should look for on the user’s system when rendering text content. 

Note that in the Properties panel, there is a pair of buttons labeled HTML and CSS, respectively.  These buttons toggle the Properties panel between HTML and CSS properties.  If we select the CSS button, we see that there is a drop-down box in the properties panel labeled Font.  If we click on the drop-down arrow, we note that the list contains not individual font names, but sets of comma-delimited font names.  By default, Dreamweaver has grouped together similar fonts.  If one selects one of these font groups for ones CSS styles, the browser will be instructed to seek out the fonts specified in the order listed. 

If one wishes to specify ones own list of font preferences, known as a font stack, the Edit Font List option at the bottom of the list will allow for adding any font installed on the developer’s system, and in any order one so chooses. 

8.8 Styles Created by Page Properties: 

While most of this section has dealt with defining styles within a CSS file, we are advised here that there does remain a means for making style definition to a particular page with a site, via the Modify => Page Properties dialogue box.  Property definitions made here do not get written to the CSS file, but rather are baked right in to the HTML code for that specific page.  Note that the style definitions made in this way are still visible in the CSS styles panel, but are not listed as items under the CSS file, but under the generically named <style> header.

8.9 CSS for Printing:

In section 8.3, we discussed linking to a CSS file, and noted that when we did so, we specified a media type that our style sheet should apply to.  In that case, we opted for screen, meaning that we were to define the styles that controlled how our content appeared on a monitor.  If we now wish to define a different set of styles that govern the printed form of our page, grayscale-friendly, for instance, we can do so by linking to a different style sheet in the same manner as done before, but opting instead for the print option in the media drop-down box.  A new CSS entry will appear in our CSS panel, with the parenthetical (print) adjacent to the name, reminding us that it applies to the printed format.

After defining our print styles, we need not print our page to test its appearance.  We can make visible the Style Rendering toolbar (View => Toolbars => Style Rendering), and select the printer icon.  This will display our page on-screen in accordance with the CSS print styles that we have defined.

8.10 Using the Code Navigator

The Code Navigator feature in Dreamweaver is a handy little applet that give one quick feedback on the style rules that apply to bits of text within a page.  Because CSS styles cascade through pages in a website, it can sometimes be unclear just why a particular piece of text if formatted the way it is, especially if one did not intend it to be so.  This type of behavior should be immediately clear to anyone who has ever had to set access permissions in a network file system; “Where was that delete permission inherited from, and why the hell didn’t that modify permission propagate down to that subdirectory?!?”.

To use the code navigator, one need only select a string of text, and Alt+click on it to show the code navigator applet.  The code navigator window shows which CSS rules are governing the selected text.  Now, how one goes about correcting styles that propagate unintentionally, well, that’s a story for another time…..

The Code Navigator applet window