Finals Week Office Hours

Hi everyone,

I need to adjust my office hours slightly this week due to final exams. If you’d like to swing by here are my official office hours for finals week:

Tuesday 5/12 from 11-12:30pm in WWH 420
Wednesday 5/13 from 11-12:30pm in WWH 420

If you have any questions please let me know. Thanks!

Craig

Day 27 Wrap Up

Today we deconstructed an interactive animation sequence.  Click on the image below to see what we created:

Choose your own adventure - Mario style

Choose your own adventure – Mario style

Here’s the code package if you want to see how it was built.

We also talked about the basics of the HTML5 canvas tag which allows you to create interactive animations and simulations in the browser without the use of the Flash plugin.  Here’s some code that we wrote – also check out the Lectures tab above for the PowerPoint slides I used during our demo.

Animation_HTML5 Canvas Source Code ]

Day 26 Wrap Up

Download Animation Day 02 Examples ]

Shape Tweens

  • A shape tween is used to move simple shapes around the stage
  • Shape tweens can “morph” a shape from one form to another
  • Shape tweens must begin and end with a keyframe
  • Here’s how to construct a new shape tween:
    • Create a new Flash ActionScript 3.0 file (FLA)
    • Add a new layer to your timeline (Insert -> Timeline -> Layer)
    • Click on this layer inside the first frame
    • Draw a simple shape (rectangle, oval, etc)
    • Click somewhere further on in the timeline (i.e. frame 50)
    • Insert a keyframe (Insert -> Timeline -> Keyframe)
    • Modify the shape in some way in this frame (move it somewhere else, replace it with a new shape, recolor it, etc)
    • Click somewhere in-between these two keyframes on your timeline and click on Insert -> Shape Tween
    • Play your moving using Control -> Play
    • You can adjust either of the keyframes to change how the animation unfolds — you can also add new keyframes anywhere within the shape tween to “break up” the animation into another segment

Motion Tweens

  • A motion tween is used to move “complex” objects around the screen
  • In order to be moved using a motion tween the object in question MUST be in the Library of your FLA
  • Motion tweens must begin with a keyframe — you will be able to add in additional keyframes to your animation after you have set things up
  • Here’s how to get started with creating a motion tween:
    • Create a new Flash ActionScript 3.0 file (FLA)
    • Add a new layer to your timeline (Insert -> Timeline -> Layer)
    • Click on this layer inside the first frame
    • Next we need to import an image into the library of your movie. You can do this by clicking on File -> Import -> Import to Library
    • Open up your library panel – you will see that two symbols will show up. One will be called the name of your file (i.e. myimage.jpg) and the other will be called ‘Symbol 1′ or something simliar. Right-click on the Symbol 1 item and rename it something more meaningful.
    • Drag a copy of this new symbol onto the stage
    • Next, you need to define how long your animation should last. Click somewhere on the timeline (i.e. frame 50) and insert a frame (Insert -> Timeline -> Frame)
    • Click somewhere in the newly extended frame bar for this layer and click on Insert -> Motion Tween — the frame bar should turn blue
    • You can now move your object anywhere you’d like at any frame within this blue bar — Flash will automatically “tween” your item to that position. You can also change other properties on your item, such as its rotation, size and opacity / transparency.

Library Symbols

In the previous example (Motion Tweens) we imported graphics directly into your Library. You can also create new library symbols that incorporate both imported and hand-drawn objects. Here’s how to get started:

  • Click Insert -> New Symbol
  • Type in a name for your symbol, select ‘MovieClip’ as the symbol type and then click OK
  • You will notice that you are in “edit” mode for this symbol because the name of the symbol appears next to the ‘Scene 1′ hyperlink at the top left side of the screen.
  • You can now draw your own objects and add in shape tweens on the timeline for this symbol. This timeline is separate from the “main” timeline and allows you to create “movies inside of movies” in Flash.
  • You can also import graphics from outside Flash by clicking on File -> Import -> Import to Stage
  • When you are finished you can click on the ‘Scene 1′ hyperlink to return to your main movie. You can then drag copies of your newly created symbol onto the stage and animate it using a Motion Tween.

Final Exam Review Guide

Our final exam will cover a variety of topics, including those listed in this post. To prepare for the exam you should review assigned course readings, assignments as well as the terms and concepts outlined below.

  • Digital Color Basics
    • Pixels
    • RGB color
    • RGB hex color codes (i.e. FFCC00, 00FF00, etc)
    • CMYK color
    • Primary use for each color space
    • Resolution
    • Image families (Bitmaps vs Vectors)
    • Image formats (GIF, PNG, JPEG, PSD)
      • under what circumstances to use them
      • general properties (i.e. JPEGs are used for photographs)
      • which formats support transparency (GIF, PSD, PNG)
      • which format is often used for animation (GIF)
      • encoding system (lossy vs lossless)
    • Megapixels
  • Photoshop
    • Be able to explain what it is, how it is used, and how to get started with the core features of the package
    • Basics (layers, history, selecting content, compositing)
  • Principals
    • Processor / CPU
    • Memory / RAM
    • Long term storage devices
    • Bits vs Bytes
    • Groupings of bytes (kilobytes, megabytes, etc)
    • Operating systems & their functions
    • User interfaces
    • Working with external devices
  • Unix / Internet
    • IP addresses
    • Packet switching
    • Functions of a browser
    • Clients vs. Servers
    • Connecting to the i6 server via an FTP program
  • HTML
    • What is HTML? What does it stand for?
    • HTML Syntax (tag structure, head tag, body tag, etc.)
    • Know the basic tags we studied
      • html
      • head
      • title
      • link (for external stylesheets)
      • meta
      • body
      • p
      • strong
      • ol / ul / li
      • table / tr / td
      • div
      • span
      • audio
      • img
      • a
    • Debugging a HTML document
  • CSS
    • What is CSS? What does it stand for?
    • Syntax of a CSS “rule”
    • Placement of CSS rules in a document
    • Styling a tag
    • Working with IDs and Classes
    • Using CSS rules on multiple pages throughout a site
    • The CSS box model
      (content, margin, padding & border)
    • Internal vs. external styles
    • Be able to debug a CSS document
  • Dreamweaver
    • What is it?
    • Code view vs. WYSIWYG view – when to use each
    • Setting up a site in Dreamweaver
    • Hyperlinks (text based, image based, image map, absolute vs. relative, etc.)
    • Table basics
    • HTML basics (tag pairings, basic structure, etc.)
  • Audacity
    • What is it?
    • Working with sound files
    • Producing sounds
    • What is a podcast?
  • WordPress
    • What is it?
    • Setting up a new site – what is required?  (server space w/ access to PHP, source code for WordPress and a database)
    • Posts vs. Pages
    • What is a child theme?
  • Animated GIFs
    • What are they?
    • How do they work?
    • Limitations of animated GIFs
    • GIFs vs. SWFs vs. HTML5 Canvas-based animations
  • Flash
    • What is it?
    • What can you create with Flash?
    • Support for different types of media (bitmapped images, vector art, audio, etc)
    • Working with Flash assets (building shapes, organizing layers, etc)
    • Types of tweens (motion, shape, armature / poses)
    • The Flash library
    • Types of symbols (MovieClips, Buttons, Graphics)
    • Working with the timeline (keyframes, frames, empty keyframes, etc.)
    • naming symbol instances
    • (no ActionScript will be on the final)

Day 25 Wrap Up

Download Animation Day 01 Examples ]

Anatomy of Flash

Go ahead and open up Flash. The Flash application interface is similar to that of Photoshop. Along the left side of the screen you’ll see a series of drawing tools, and to the right you will see an a white box which is called the ’stage.’ At the bottom of the screen you will see the ‘Properties’ panel for editing specific aspects of a selected object and at the right you will see a space for docking specialized editing panels. So far, so good. The main difference between the Flash interface and that of a 2D image editing program is the ‘Timeline’ that runs along the top of the screen. The timeline allows you to define changes in your images over time and thus gives you the ability to create scenes that animate.

The Timeline

The timeline is arguably one of the most important areas of the Flash interface. All visible graphics, animations, sound and video objects must appear on the timeline in order for the end user to see and / or interact with them (with the exception of graphics generated via ActionScript, but we’ll get to that in a bit!) The small rectangular boxes that extend out from the left side of the interface are called “frame” markers. Frame markers are numbered along the top of the screen for reference purposes – you will be referring to them quite often when designing animation sequences. These numbers represent time – the larger the number, the farther away the frame marker is from the beginning of the movie.

In general Flash movies run at 24 frames per second (FPS.) You can change this value by clicking on the stage and setting a new number in the ‘Frame rate’ box in the Properties panel. Under this system you can divide the total number of frames you are using by 12 to determine how long in seconds your animation will last. For example, a 36 frame animation will last 3 seconds.

We need to create some content on the timeline before we can start animating in Flash. Content can be drawn from within Flash or can be brought in from another source, such as an image, video or sound file. Content must be put into a “keyframe” on the timeline. Keyframes denote that something “new” is happening on the timeline. For example, If you wanted a ball to appear in your animation at frame 5 you could place a keyframe on frame 5 and draw a ball. If you wanted to have the ball exist for 5 frames and then disappear you would create a blank keyframe on frame 10. That way Flash would know that there was a “change” on frame 10 and that the ball was no longer to be displayed. Keyframes become very important in animation as they allow you define the “start” and “end” point of an animation sequence. Keyframes appear as little circles within a frame. If the circle is white it means that the keyframe is blank. If it is shaded it means that there is something in that frame.

You will need to create multiple layers on the timeline if you’d like to have more than one thing happen at the same time. Flash can only support one animation per layer. You can add new layers by using the ‘Insert layer’ icon in the timeline panel. Layers can be renamed and can be organized into folders for easier access.

Animation Techniques

There are two basic animation techniques in Flash – Shape Tweening and Motion Tweening. Shape Tweening should be used in the following circumstances:

  1. To move simple shapes across the screen
  2. To “morph” simple shapes into other simple shapes

Keep in mind that all animation in Flash requires that the animation take place on its own Layer, which is similar to a PhotoShop layer. If you have Flash open you should already have a layer to work with in the Timeline area named ‘Layer 1′. If you need to make more you can always click on INSERT->TIMELINE->LAYER.

Click on the small white box on layer 1 that has a small circle in it. This is Flash’s symbol for a keyframe and it tells Flash that something new exists in this frame of animation. After you’ve clicked here go ahead and use the drawing tools to draw a blue ball on the stage. You can do this by looking for the Rectangle Tool (the 8th icon down in the drawing toolbar), positioning your mouse over tool and holding down the left mouse button. After a second or two a sub-menu will appear – select the oval tool and draw a ball similar to the one below. Selecting a color using the swatches at the bottom of the drawing toolbar will cause the ball to be drawn with the fill color of your choice.

Now we want to move the ball across the stage. To do that we need to first tell Flash how long this animation should take. We measure how long animations last in Flash in terms of how many frames they take to execute. As stated above, the default speed of a Flash movie is 12 frames per second, so let’s have this ball take 2 seconds to move across the stage. Click your mouse inside Frame 24 on Layer 1 and choose INSERT->TIMELINE->KEYFRAME. Your screen will look as follows:

Now we’ve told Flash that there’s something going on in Frame 1 (a ball at the top of the screen) – we’ve also told it that nothing is happening from frame 1 to Frame 24 (as can be seen by the standard gray frames that exist on the timeline). Frame 24 has a keyframe in it, which means that something can change in the animation here. Let’s move the ball now. Make sure that you’ve got Frame 24 selected and move your ball to the bottom right of the screen. Try playing your movie now and see how it works (CONTROL->PLAY MOVIE)

 

See how choppy this is? In order to make it smoother we have to tell Flash to animation the frames in between the two keyframes. To do that click anywhere in-between those frames on the timeline and choose SHAPE from the TWEEN menu at the bottom of the screen. Playing your movie now will result in the following:

 

Note that you can change any aspect of the animation by modifying what’s going on in the keyframes. If you wanted to move the ball to the top right instead of the bottom right just move the ball in Frame 24. Playing your movie again will show the change in your animation. If you’d like the animation to take longer you can click and then click-drag the keyframe in frame 24 to a higher frame, thus adding more time in between the two keyfames. Likewise if you’d like to make it shorter you can drag the keyframes closer together.

Shape tweens also allow you to take advantage of Flash’s ability to work with vector based objects and perform what is called a ’shape morphing’ – to see this in action let’s modify your movie a bit. Click into your first frame and select your ball using the black arrow tool. Then delete the ball and replace it with a red square. Running your animation again will result in the following:

 

Symbols & Motion Tweening

Flash also allows you to move more complex objects across the stage, though if you were to try and move a complex object (one with many shapes, colors, etc) using the Shape Tweening technique you would be presented with a weird image morph effect going on all the time. To allow objects to ’stick together’ we have to group them in some way.

To start, open up a new Flash movie. Then click on INSERT->NEW SYMBOL. We’re going to create a ‘Movie Clip’ symbol of a Snowman, so type ‘Snowman’ into the Name blank. Then click the OK button. You’ll notice that your screen changes slightly to indicate that you are editing a symbol (see below):

The “breadcrumbs” above the timeline indicate that you are currently inside Scene 1 of your movie, editing the ‘Snowman’ symbol. You can get back to Scene 1 by clicking on its name (it acts similarly to a hyperlink.) You can also use the ‘Library’ on the right side of the screen to edit symbols – just double click on symbol to go into “editing” mode.

Okay, so we’re in editing mode for our little Snowman. Go ahead and draw a snowman similar to the one below on the stage:

Click on the ‘Scene 1′ hyperlink to get back to scene 1 of your movie. Click on the keyframe on layer 1 and drag a copy of your Snowman out of the library and onto the stage. Go to frame 24 and create a frame — then right click in the range and select CREATE MOTION Tween. Move the Snowman across the screen on the last frame — this will automatically add in a keyframe to the layer. Your movie should look something like this:

 

You have some additional options at your disposal for motion tweens that can be defined using the properties panel. For example, if you want the snowman to rotate while moving you can use the ‘Rotate’ drop down to define which direction and number of rotations to apply to the tween. You can also modify the symbol at either keyframe to change how the animation takes place – for example, a popular effect is to “scale” the snowman down to a smaller (or larger) size to simulate the object getting bigger (or smaller) over time. You can also click on the symbol and use the ‘Color’ dropdown to change color aspects – the most popular effect here is to change the Alpha (opacity) of the image to simulate it fading in or out as can be seen below:

 

Using Sound and Music

Flash makes it easy to include sound and music in your projects. The first step to using audio is to obtain a music file. Flash works best with MP3 files, but you can use other files in a pinch. Keep in mind that adding lots of music to your movies will cause the final file size to increase dramatically. A good place to find audio files is at the Flash Kit Loops Library. This library of audio files are designed to be “looped” over and over to provide a seamless background track for your movie.

Once you have a file downloaded to your machine you can bring it into Flash by clicking on FILE -> IMPORT -> IMPORT TO LIBRARY. The audio file will appear in your library listing and you can use the ‘Play’ button over in the library interface to preview the sound.

Sounds need to go onto the timeline just like everything else in Flash. I like to create an entirely separate layer for sounds. Once you have a layer you can drag the file out onto the stage – it won’t show up as a visual object there, but you’ll know you did it right if the timeline indicates that there is a “waveform” present on the layer. Click on this waveform and look at the properties panel. The ‘Sync’ property allows you to define how the sound will play within your movie. Setting this to ‘Event’ will play the sound as a high quality sound but will not guarantee that the sound will always synchronize with the animation that is happening on other layers. Changing this to ‘Stream’ will force the sound to synchronize with the timeline, though the quality may be slightly less than if you set it to ‘Event.’ For purposes of the Music Video assignment you should use the ‘Stream’ property.

Testing Your Movie

The best way to test your movie is through the CONTROL -> TEST MOVIE command. This command lets you see how your movie will appear once it is “published” (see below). It also removes “housekeeping” items, such as motion guides, and crops the edge of your movie so that you only see objects that are actively on the stage. From this point forward when we will be using this technique in lieu of the CONTROL -> PLAY command.

Publishing Your Movie

When you’re all done you’ll probably want to do something with your movie other than watch it within Flash. Thankfully Flash exports itself into a number of very compatible formats. To export your movie you should first save it and then click on FILE -> PUBLISH SETTINGS. HTML and SWF should be checked – these are the default web compatible formats. You can also export Flash as a Quicktime movie if you’d like to import it into a more comprehensive video editing package, or use the Windows or Mac projector file to create a self executable file that can be played without any special software (SWF files need the free Flash plug in in order to play).

Once you’ve published your file you can link it to your web site fairly easily depending on your preferred web publishing package. In Dreamweaver you can open up an HTML page and click on Insert -> Media -> SWF and then browse to find your SWF file. The file will be copied to your site directory and will be embedded onto the current page.

If you’re not using Dreamweaver you can still easily import a Flash SWF onto your page. For example, popular web-based content management systems (such as WordPress) contain a ‘Insert Embedded Media’ button in their authoring interface. If you selected HTML in the Publish Settings menu you will also be given a “wrapper” document that contains all the HTML code necessary to to put your Flash creation on a website. You can copy and paste this code onto your own site (don’t forget to upload the SWF file as well!) – you could also just upload the HTML file and SWF files to your site and create a link to the HTML file.

Day 24 Wrap Up

Download Animated GIF source files ]

Today we discussed the concept of digital animation and explored how a computer can be instructed to render animated content.  Here’s a detailed overview of what we covered:

  1. The Animated GIF is one of the most basic forms of digital animation.  It can be thought of as an old-school “flip-book” animation — In order to simulate the illusion of motion it is necessary to construct a file that contains individual images for each “frame” of animation.  For example, if you wanted to create an animation of a ball bouncing up and down you would have to prepare version of the ball in many different positions.  To get a very smooth animation you would probably need 20 or 30 different images.  After this has been accomplished, the images need to be assembled together into a self-contained package that can easily be inserted into a web page.
  2. The most common type of basic animation is the animated GIF file. Some examples can be seen below:


    As you can see, Animated GIFs give you the ability to display motion graphics and are easily inserted into existing web sites in the form of an image file. However, animated graphics by nature are much larger than their “static” cousins. This occurs because you are effectively adding an additional graphic (or frame) for each bit of motion you wish to simulate. Animated graphics do not allow for any interactivity, nor do they allow you to incorporate any additional media capabilities, including an audio track.  Animated GIFs may or may not loop (i.e. replay at the end) but they do support image transparency like a PNG file, which means you aren’t stuck with a white background behind your images if you don’t want one.
  3. You can use Photoshop to create simple Animated GIF files.  Here’s how to get started:
    1. Simple frame based animation
      1. Create a new Document in Photoshop
      2. Add in assets on different layers (in our example we added in text layers that contained the text “three …”, “two …”, “one …” and “blast off!”
      3. Next, open up the Timeline panel (Window -> Timeline)
      4. Use the drop down menu and select “Create Frame Based Animation” – click this button to continue
      5. Now you have a single frame that is visible in the Timeline panel.  Make all of your layers invisible except for your layer that contains the text “three …”
      6. Click the Add Frame button in the Timeline panel.  With this frame selected, make the layers that contain the text “three … ” and “two …” visible.
      7. Continue the process so that you are making one new layer visible for each frame of animation.
      8. Click the play button in the Timeline panel to see your project – it should run very quickly!  You can set the timing for each frame by using the timing drop down menu below each frame in the Timeline panel.
      9. You can save your project by clicking File -> Save for Web and Devices.  Make sure that you are saving your file as a GIF file.
    2. Tweening Animation
      1. With Tweening we can have Photoshop prepare certain kinds of animated transitions for us.
      2. In our example we created a new file that contained three layers – a rocketship, a background and a planet.
      3. We then created a new animation by clicking on the Create Frame Based Animation button in the Timeline panel
      4. Next, we added a new frame and moved the rocketship to a different spot on the screen.
      5. We then clicked the “Tweens Animation Frames” button on the Timeline panel – this tells Photoshop to create a number of “intermediate” frames that will “bridge” your two “keyframes” of animation.  Photoshop can tween object locations, opacity and layer effects.
      6. The more frames you add in this way the smoother your animation, but the larger the resulting file.
    3. You can easily place an animated GIF on your website by inserting a standard <img> tag to point to your newly created image file.

Day 23 Wrap Up

Download Day 23 Source Code - Audio ]

Audacity is an audio editing program that allows you to record, mix, and add special effects to your sound files. It is completely open-source, and is available at http://audacity.sourceforge.net/. Here’s how you can get started with a new audacity project:

  1. Open up Audacity. A screen similar to the following will appear:
  2. Make sure that you have a microphone installed. You can use the built-in microphone on your laptop if need be, but a USB powered external microphone will really help to make your audio come out crisp and clear.
  3. Click on the record button (#1) and begin speaking. A waveform will begin to appear (#2) as your voice is detected by the microphone.
  4. Click on the stop button (#3) in order to stop the recording.
  5. Click the rewind button (#4) and play button (#5) to listen to your recording.
  6. To trim your recording make sure that the selection tool is clicked (#6) – then highlight the portion of the audio that you would like to cut. Click on Edit->Cut to extract the selected area.
  7. To record a second clip, click the record button (#2) – a second waveform will appear beneath the first.
  8. To reposition a clip, click on the slider tool (#7) and slide the desired clip back and forth.
  9. Using the volume adjustment tool (#8) you can increase or decrease the volume of a specific clip.
  10. Your can import other audio files (WAV, MP3) by clicking on Project -> Import Audio. The audio file will appear as a new waveform. Here is a small collection of sound effect files to get you started.
  11. You can also apply special effects to your audio clips – this can be accomplished by selecting a portion of a clip using the selection tool (#6) and then using the Effect menu.
  12. When you are finished working on your clip you should save your project by clicking on File -> Save.
  13. You can export your project as an MP3 file by clicking on File -> Export as MP3. Note that Audacity does not come pre-loaded with MP3 export capabilities – you can add this feature into the system by installing the free LAME MP3 Conversion Library (available here).

With your newly created MP3 file you can create a soundtrack to a video, remix a song or even create your own podcast.

Day 21 & 22 Wrap Up

WordPress

  • WordPress is an example of what we would call a “dynamic” website
  • When you visit a WordPress site (like this course webpage) the content that you see is constructed for you “on the fly” – a program is executed on the web server that creates a brand new website for you each time it is visited.
  • Because the “moving parts” happen on the server we often refer to this as “back end” web development (as opposed to “front end” web development which happens in the client’s browser)
  • There are a few major technological components that go into a WordPress site, including:
    • HTML & CSS (Templates for your site)
    • MySQL Database (Repository to store all of the content for your site)
    • Application Code (written in a language called PHP – used to combine the templates and the content from the database in real-time)

Working with WordPress

Before you can use WordPress you need to install it onto your i6 account.  Complete directions on how to do this can be found here:  http://i6.cims.nyu.edu/~kapp/wordpressinstall/

  1. Visit your WordPress URL – it should look something like this:
    http://i6.cims.nyu.edu/~NETID/wordpress
  2. This is the “public” view of your blog and is what people from around the world can see when they view your site.  You can make changes to your site by clicking on the “Log In” link on the right side of the screen and supplying your username and password information.  Note:  if you can’t find the “Log In” link you can go directly to your blog’s login page by visiting this URL (just replace “blogname” with the name of your blog):
    http://i6.cims.nyu.edu/~NETID/wordpress/wp-admin/
  3. Once you successfully log in you will be redirected to your “dashboard” – this is your “mission control center” that lets you control all aspects of your blog.
  4. You can switch between Dashboard mode and Public View mode by using the link at the top of the screen that contains your blog title.  Here’s a screen shot that points this out for you:

    Switch to "public" view from "dashboard" view

  5. Likewise, when you are in Public View mode you can switch back to Dashboard mode by clicking on the “Dashboard” link at the top of the screen.

    Switch to "dashboard" view from "public" view

  6. Some people find it easier to keep two “tabs” of their web browser open so that both Dashboard and Public View modes are visible at the same time.  You can do this by right-clicking on the Dashboard link from Public View mode and selecting “open in new tab”.  On a Mac you can hold down the Control key and click on link to do this as well.  Note that if you do this you will need to “refresh” your browser every time you make a change in Dashboard mode.  You can refresh your browser by clicking on the “refresh” or “reload” key at the top of your browser window, near the web address bar.

Once you can log into your site you will want to explore what the WordPress CMS can do.  The complete documentation package for this unit can be found here:  http://i6.cims.nyu.edu/~kapp/wordpressinstall/, and here are some of the highlights that we covered in class:

  • Creating new “pages” for your site
  • Maintaining a “blog” on your site (“posts”)
  • Uploading media to your site (images)
  • Changing the visual look and feel of your site (managing themes)

Day 20 Wrap Up

Download Day 20 Source Code (Pikachu Coffee Website) ]

Today we continued our discussion on how to use Dreamweaver as an HTML / CSS production tool.  Here’s what we covered – note that this overview assumes that you are using Dreamweaver CC.  If you have an older version the interface will be slightly different.

CSS in Dreamweaver

  • To get started, hide the Files panel to show the full stack of CSS panels.  Here’s a screenshot of what the interface should look like:Dreamweaver Interface with expanded CSS panels

    Dreamweaver Interface with expanded CSS panels

  • Next, create your basic HTML structure in code mode (or in design mode if you prefer).  Insert IDs and Classes as necessary.
  • We now need to create a “style source” for our document.  This is where we want to tell Dreamweaver to store our CSS rules. To do this, click the plus button next to the “Sources” panel.  If you want to add styles to the head of the document select “Define in Page”
  • Now that you’ve set up a source you can click on the style source (<style>) to begin creating styles.  To do this, select an HTML item you wish to style by clicking on it in code or design mode.
  • You can now add selectors to this source using the “Selectors” panel.  A menu will appear to the right – you can use this to apply CSS properties to your selector.

External Style Sheets

  • You can create new stylesheets by clicking the + button in the sources panel.
  • You can click on this style source to create styles inside this stylesheet.  You can also drag and drop styles between stylesheets this way as well.

Some more HTML elements

  • Tables
    • Tables are used to display tabular data.
    • In the old days we used them to position websites. This was before CSS was widely supported by all browsers.  We don’t do this anymore, but it’s useful to know where we came from.  Now we use tables to present tabular data.  Layout should be done using CSS.
    • DW has a large number of built in table manipulation tools.  For example, you can import data from an external source and have DW make a table for you.  You can do this by clicking on File -> Import -> Tabular Data.  This works best on common table-based file formats (CSV, tab formatted files, etc)
    • Tables can be styled just like any other element.  You can apply background colors, fonts, etc.
  • Meta Tags
    • A meta tag is an invisible head tag – it’s not supposed to be displayed
    • Meta tags are used to store information about your page.  This information is used by search engines and other web based programs to make sense of your site and incorporate it into their systems (i.e. Google Page rankings)
    • You can insert meta tags using the Insert -> Head menu.  There are two commonly used meta tags – description and keywords.
    • You can also add in “custom” meta tags.  These might be used by your own system (if you are working with a programmer) but there are a number of special meta tags you can set up to instruct the browser to behave in a certain way.  For example, if you wanted to create a “redirect” on your page and send uses to another site you could do the following:
      • Add a new meta tag
      • Set http-equiv
      • type “refresh” as value
      • type “3;http://www.nyu.edu” as the content

Media Queries in Dreamweaver

  • Dreamweaver can also be used to set up media queries for you.  Here’s how to get started:
    • Click on the + button in the CSS Designer panel to attach a stylesheet to your page
    • Expand the “conditional usage’ menu
    • Set your media query options here
    • This stylesheet will now only be used when the conditional usage requirements are met

Using JQuery UI Components

  • Dreamweaver has a number of built-in dynamic components that you can use to simulate common interface elements.
  • The most popular for front-end designers are the “Accordion” and “Tabs” components.  These are available under the Insert -> jQuery UI menu
  • Once you add these components to your page you can style them just like you would style any other HTML element.

CSS Transitions

  • Dreamweaver has a CSS Transition panel that lets you define CSS rules that get applied to elements when certain criteria are met.
  • We’ve already done a lot of this using the :hover pseudoselector
  • This panel also allows you to “script” animations so that they play out over time instead of happening instantaneously

Day 19 Wrap Up

Dreamweaver is a WYSIWYG (“What you see is what you get”) editor that assists you in writing HTML and CSS code. During our introductory session we covered the basics of using Dreamweaver, including:

  1. We began by taking a tour of the Dreamweaver interface, which looks a lot like Photoshop with its extended panel layout on the right side of the screen. I mentioned that you could “reset” your panel layout in case you accidentally closed a panel or two by clicking on Window -> Workspace Layout -> Designer.
  2. One of the most useful features of Dreamweaver is its ability to seamless switch between “code” view and “design” view. You can freely work in either or both views depending on the task at hand. You can switch between views using the “Code”, “Split” and “Design” buttons at the top left side of every Dreamweaver document.
  3. Dreamweaver contains an integrated FTP client that is simliar to the Fetch application that we have been using to publish our work to the i5 server. You can use Dreamweaver’s built-in site management feature to create and manage your websites by clicking on the Site -> Manage Sites menu option. From there you can set up a new site using the following information:
    1. Server name:  i6.cims.nyu.edu
    2. Connect using:  SFTP
    3. SFTP address:  i6.cims.nyu.edu
    4. Username & Password:  your CIMS info (click Test to make sure you typed it correctly)
    5. Root directory:  public_html
  4. Once you’ve set up a site you can use the “Files” panel (bottom right side of the screen) to view and edit your files. You can then use the “synchronize” button to quickly update your website using the most recent versions of your files (this works in both directions — you can synchronize and copy down your entire website to your computer, and you can also synchronize to send newer copies of your files to the server).  Note that you should probably synchronize before you start using Dreamweaver to let the program get a copy of all of your files from the server and store them on your local computer.
  5. You can create new HTML documents using File -> New. Dreamweaver has a ton of built in templates, but for the purposes of the intro lecture we focused mainly on creating new blank HTML documents. If you have a site open your documents will automatically save into your site folder and will appear in the “Files” panel at the bottom right side of the screen.
  6. Dreamweaver has a powerful “Properties” panel at the bottom of the screen. This panel is “contextual” meaning that it will change based on what is selected or clicked on. The properties panel allows you to apply basic formatting to text as wella s changing “Page Properties” (background color, default size for the H1 – H6 tags, etc)
  7. Hyperlinks are easy to set up in Dreamweaver — simply highlight the text that you want to turn into a link and fill in the “link” text box in the Properties panel. You can also use the small “target” button to “point” to a file in your Files panel to visually create hyperlinks between documents.
  8. Dreamweaver has a “Preview in Browser” feature under the File menu. This feature lets you test out your page in any of the installed browsers on your computer.
  9. You can import images to your Dreamweaver site by using the Insert -> Image menu option.  This will copy the image into your Dreamweaver site folder for you.
  10. You can construct a basic rollover image for use on your site by doing the following:
    1. Construct a rollover PSD file in Photoshop. This file should contain both versions of your image (i.e. the image as you want it to look when the mouse is over the image as well as when it isn’t over the image)
    2. Save two copies of your image, calling one “image1_noroll.png” and the other “image1_roll.png”
    3. Import both images into Dreamweaver
    4. Click on Insert -> Image Object -> Rollover Image. Select your two images from your asset library when prompted.
    5. Note that your rollover image will only work when you preview your site in a browser