Intermediate Web Publishing II Information Services and Technology

Training Team Jeff Pankin

2

Table of Contents The Box Model ............................................................................................................................... 4

More about the box model ........................................................................................................ 5 Some shortcuts for box property values ................................................................................... 5

Understanding Float ...................................................................................................................... 6 Float Exercise: ............................................................................................................................ 6

Understanding Position ................................................................................................................. 7 Creating a Page Layout with CSS Positioning ................................................................................. 8

Advantages of Absolute Positioning .......................................................................................... 9 Disadvantages of Absolute Positioning...................................................................................... 9 Advantages of Using Float Layout.............................................................................................. 9 Disadvantages of Float Layout ................................................................................................... 9 Some ways to think about web page layout ............................................................................ 10

Positioning using Float ................................................................................................................. 11 Creating a Float Layout ............................................................................................................ 11 Using a Wrapper or containing block ...................................................................................... 12

Descendant Selectors................................................................................................................... 13 To format descendant selectors .............................................................................................. 14

Pop-up Menus .............................................................................................................................. 15 Meta Tags ..................................................................................................................................... 16

Examples: ................................................................................................................................. 16 CSS Extras ..................................................................................................................................... 17

Creating a Print Style Sheet ..................................................................................................... 17 Validating your CSS .................................................................................................................. 17

Introduction to JavaScript ............................................................................................................ 18 Exercise: ................................................................................................................................... 21 Conditional Statements ........................................................................................................... 21 if condition ............................................................................................................................... 21 if-else ........................................................................................................................................ 22

Flash ............................................................................................................................................. 23 About Flash .............................................................................................................................. 23 Advantages of Flash ................................................................................................................. 23 Disadvantages of Flash ............................................................................................................. 23 The Flash Workspace ............................................................................................................... 24 Working With Shapes in Flash ................................................................................................. 25 Create a Simple Shape Object .................................................................................................. 25 Create a primitive vector shape in the Merge Drawing mode ................................................ 25 The Timeline ............................................................................................................................. 26 Reading the Timeline ............................................................................................................... 26 Working with the Timeline ...................................................................................................... 27 Create a shape in the Object Drawing mode ........................................................................... 27 Create an animation ................................................................................................................ 27

3

Try these – Use UNDO if you get into trouble. ........................................................................ 27 Create an image animation which fades in ............................................................................. 28 Create text which enters from the left .................................................................................... 28 Making Modifications .............................................................................................................. 28 Using your animation ............................................................................................................... 28

Embedding Video ......................................................................................................................... 30 Exercise .................................................................................................................................... 30 Embed from YouTube .............................................................................................................. 31

Mad Libs Solution ......................................................................................................................... 32 Completing Suckerfish and the dev.html page ............................................................................ 33 Glossary ........................................................................................................................................ 35 Resources ..................................................................................................................................... 36

Books ........................................................................................................................................ 36 At MIT ....................................................................................................................................... 36 Adobe ....................................................................................................................................... 36 Intermediate Web Publishing II Resources Page ..................................................................... 36

Copyright © 2009 by Massachusetts Institute of Technology. All Rights Reserved.

4

The Box Model

To ensure consistency across browsers, the w3c developed standards for the way browsers should interpret margins, borders and padding of an element. These standards are referred to as the Box Model. http://www.w3.org/TR/CSS2/box.html The basic idea is that every element has a margin, border and padding on the top and bottom as well as the left and right. Each of these may be styled differently using the appropriate property name.

Things to know about the Box Model:

• all elements have the option to display borders, padding and margins - they are set to 0 by default

• margins are transparent, picking up the color of their enclosing element

• top and bottom margins are merged using the higher margin value or to the size of one value if they are the same size

• there is a shorthand for designating different sides

5

More about the box model

content The content area holds the content of the element.

padding Padding creates visual space around the content.

border Border surrounds the content and padding and gives a

visual boundary.

margin Margin surrounds the border, padding and content and allows for space between the element and other elements.

• a background color or image will show under content and padding but not the margin • padding and margins may be set in pixels, percents or ems • border size may be set in pixels or by the keywords thin, medium or thick • border styles include solid, dotted, dashed, double and others

Some shortcuts for box property values

to specify sides for margin or padding

padding: 10px; [top right bottom left all 10px] padding: 10px 5px [top and bottom 10px, left and right 5 px] padding: 10px 20px 5px [top 10px, left and right 20px, bottom 5px]

zero a value of zero does not require a measurement type

border border: solid 2px green [solid, green border 2px thick on all sides] border: solid [solid black 3px border on all sides]

Note: values may be in any order.

For more info on css-shorthand see: http://www.dustindiaz.com/css-shorthand/

6

Understanding Float

Things to know about Float:

• elements on a web page are placed in the document flow from top to bottom

• block elements have a line break between them and span the width of the screen

• an element with the float property is removed from the normal flow and placed on the left or right

• floated elements sit over other block elements and won't disrupt their flow (although may re-route it)

• content which follows a floated element in the code moves up but respects the floated element's boundaries and flows around it

• the clear property ensures that a floated element will be placed under (or clear of) other block elements

• a floated element must have a width unless it's an image

Float Exercise:

1. Create the President's Message page. 2. Float the head shot to the left. 3. Create a pull quote and float it to the right.

7

Understanding Position

Things to know about Positioning:

• elements on a web page are placed in the document flow from top to bottom

• block elements have a line break between them and span the width of the screen

• inline elements flow left to right and lines expand vertically if more content is added

• there are four values for position: static, absolute, fixed, and relative

• the properties top, right, bottom, and left are used to position an element

• positioning an element means removing it from the normal flow

static places element in the normal flow; this is the default so it's used to override another positioning value

absolute places an element anywhere on the page determined by top, bottom, left and right values; placement is relative to the sides of the page or the containing element

fixed places an element anywhere on the page determined by top, bottom, left and right values; placement is relative to the browser window and does not move when the page is scrolled – other content moves underneath it

relative normal flow is set then position is offset by value for top, bottom, left or right from its location in normal flow

Use top, bottom, left and right to position an element from an edge. Use width to set the width of the content area.

8

Creating a Page Layout with CSS Positioning

There are several considerations before designing your web page layout.

1. Will you use a fixed width or liquid design layout, or something in-between?

Your audience may view your pages on different sized monitors, using different resolutions, with different sized browser windows. Some may be viewing your pages with a text-only browser or on a mobile device with a very small screen. A liquid design allows web content to expand or contract gracefully into whatever size space it is given. Part of designing liquid layouts is through the use of relative units for widths and font size (e.g., em or %).

2. Which browsers and which browser versions will you support?

At MIT we write code to work in the IS&T supported browsers. If you expect your site to be viewed by people outside of MIT or around the world you may need to consider older browsers.

Note: IS&T supported browsers include Internet Explorer v. 6 & 7, Safari v. 2 & 3, and Firefox v. 2 & 3.

3. What is the minimum screen resolution you will support?

Many people in the world may still have monitors with an 800x600 pixel screen resolution. At MIT most people probably have screen resolutions of 1024x768. This means that a page in a browser maximized to full screen WITHOUT the need for a horizontal scroll bar.

Allowing for the edges of a browser called "chrome" – we would use a maximum width of 760px for an 800x600 resolution or 950px for a 1024x768 screen resolution.

To accommodate the most variability, we will write for 800x600 minimum.

9

More about positioning for layouts:

• to layout a page with CSS developers use either positioning or floats, each has its advantages and drawbacks

• absolute positioning allows precise placement but is more difficult and inflexible • the use of floats is the most widely used layout method • CSS positioning uses divs instead of table cells • a div contains content, marks a logical grouping and is treated as a block with a line

break before and after • a div is created for each major section i.e., header, nav, content, sidebar and footer • sometimes a div may be wrapped around several divs (a wrapper or container) allowing

some formatting to be set once in the wrapper • each div is usually given a unique id which allows for individualized styling

Advantages of Absolute Positioning

• "absolute" control of where things are placed • the structural order of content does not matter (useful for placing content before

navigation which is good for accessibility and search engine optimization)

Disadvantages of Absolute Positioning

• if you are not careful positioned content can overlap other content • it's difficult to place the footer to adjust for column height

Advantages of Using Float Layout

• can be simpler than positioned layout • more widely used • avoids need to set top property for footer on each page to accommodate varying amounts

of content

Disadvantages of Float Layout

• may require moving content around in code • may be less effective for accessibility and search engine optimization

10

Some ways to think about web page layout

Fixed (Frozen)

1. page content width remains the same regardless of widow size 2. may be left aligned or more typically centered 3. allows more precise control of design but may not use browser window width effectively 4. width set at either 760px for 800x600 screen/resolution size or 950px for 1024x760

screen/resolution size Liquid (Elastic)

1. content width expands or contracts based on browser width and/or font size 2. a bit more challenging to achieve but makes better use of the browser window width 3. widths are fixed but defined in ems so a change in font size will change the width, which

allows user to adjust font size Jello* (something between Fixed and Liquid)

1. content area is fixed width set in center 2. margins are made liquid by using auto value for margin width 3. change in browser window width expands or collapses margins until it begins to cover

fixed width content 4. has similar advantages to fixed layout in terms of precise design control

* attributed to Mike Purvis, 2005 - www.positioniseverything.net/articles/jello-expo.html

We will create a Jello layout using floated elements.

11

Positioning using Float

Creating a Float Layout

1. Create divs for each of the five content areas – header, navbar, sidebar, content, footer. 2. Add the id attribute to name each div. 3. Add a <p> element to each div with the name of the div. 4. In the Design view turn on CSS Layout Backgrounds in the Visual Aids menu.

5. Copy the text for the content div from the source.txt file lines 12-39. Caution – paste this text into the Design View. If you paste it into the Code View...well you know what happens ;-)

6. Type the content for the other divs. 7. Set an appropriate width for each div. (you decide) 8. Play with the float property. Try floating the different divs until you achieve what's in the

screen shot. (e.g., #nav {float: right; width: 150px})

12

Using a Wrapper or containing block

This layout uses a containing block, a sixth div around the five content divs which forms what is often called a wrapper.

9. Create a wrapper div around the other five divs. - would you float this div? - what width would you give it? - how would you center it? (we did this in the Intermediate I class)

10. Now add padding and margins to give some space to the content. Go slowly and check

each change.

Things to ponder... - if the container is a fixed width then setting the content to a % has no effect - if the container width is variable and the nav and sidebar are fixed, and content has no width, then the content div will be liquid - why have a wrapper anyway?

11. Modify, add any other style properties you want for body, p, headings, or divs for font,

color, background-color, etc. 12. Save as dev.html. Save this document as a template.

13

Descendant Selectors

Things to know about Descendant Selectors:

• when a tag is located inside another tag it is called a nested tag • the outer tag is called the parent tag, the inner tag is called the child • multiple tags inside the parent are said to be siblings • two tags right next to each other are said to be adjacent siblings

<div id="content">

<p>This is the first paragraph.</p> <p>This is the second paragraph.</p>

</div> In this example the div "content" is the parent and the two paragraph elements are children of the parent element, the div. The paragraph elements are nested inside the parent and are also adjacent siblings. <div id="first"> <h1>This is a heading 1.</h1> <p>This is the first paragraph.</p> <p>This is the second paragraph.</p> </div> <div id="second"> <h2>This is a heading 2.</h2> <p>This is the first paragraph.</p> <p>This is the second paragraph.</p> </div> Here the h1, h2 and paragraph elements are children of the parent div element. Here is a tree diagram of this block.

body

div

div

h1 p p h2 p p

14

To format descendant selectors

<body> <div id="container">

<p>This is the first paragraph of the div <em>container</em>.</p> <p>This is the second paragraph of the div <em>container</em> div.</p> <div id="first">

<h1>This is the div <em>first</em>.</h1> <p>This is the first paragraph of the div <em>first</em>.</p> <p>This is the second paragraph.</p> <p>This is the third paragraph.</p> <p>This is the fourth paragraph.</p>

</div> <div id="second">

<h2>This is the div <em>second</em></h2> <p>This is the first paragraph of the div <em>second</em>.</p> <p>This is the second paragraph.</p>

</div> </div> </body>

CSS rule What gets styled #container p {color: red} all paragraphs in the div "container" will be

red #container > p {color: red} every paragraph which is a direct child of

the div "container" will be red #container > p + p {color: red} all paragraphs adjacent to the paragraph

which is the first direct child of the div "container" will be red

#container > p + p em {color: red} any em in any of the paragraphs adjacent to the paragraph which is the first direct child of the div "container" will be red

15

Pop-up Menus

Pop-up menus are complex to build. They may use CSS only or a combination of CSS and JavaScript. Fortunately, there is little need to build a menu system from scratch. There are several web sites which offer full or partial solutions for pop-up menus which are free to use, sometimes requiring only attribution in a comment in your code. There are two sources for pop-up menus worth investigating. They are the Suckerfish implementation by Patrick Griffiths and Dan Webb at HTML Dog - and one by Claire "Suzy" Campbell at tanfa.co.uk. http://htmldog.com/articles/suckerfish/dropdowns/ http://www.tanfa.co.uk/css/examples/menu/tutorial-v.asp All pop-up menu implementations set up menu content as a nested, unordered list and reformat the tags to appear as blocks. You can copy the code and the CSS to your page and work with the formatting. An excellent tutorial on lists and menus is located at Max Design http://css.maxdesign.com.au/listamatic/index.htm. Menus for Watercolor Club. About

• About the Club • President's Message

Membership

• How to Join • Application

Our Work

• Gallery • Spotlight Artist

Contact Us

16

Meta Tags

Meta tags provide information about a web page. They are located in the <head> of the page just below the <head> tag. Dreamweaver automatically puts in a meta tag about the character set in which the content should be displayed.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

This tells a browser to display in the character set "utf-8" which is the character set for European languages. If our page were to be displayed in Japanese or Hebrew we would specify a different character set. Two other meta tags are noteworthy. The first allow us to add a description to our pages "meta" data. The second allows for keywords. These meta tags may increase the page ranking for search purposes.

Examples:

<meta name="description" content="This web site is for members of the MIT Watercolor Club who like to paint watercolor pictures."> <meta name="keywords" content="watercolor club, watercolor, club, painting, paintings, artist, artists, student, students, watercolor artists" >

17

CSS Extras

Creating a Print Style Sheet

It is often desirable to create a style sheet which will be applied to a web page as it is printed. This would give the style your content more appropriately for printing and possibly remove some content from being printed at all. Here are some typical styling changes for print.

• change the background color to white • specify font sizes in points – more typical for print • change to serif fonts which are easier to read on the printed page • hide navigation, search bars, non-essential images so they do not print • remove positioning and specific widths if necessary to improve the flow

The process for creating a print style sheet is as follows...

1. save your current style sheet with a new name 2. make the necessary changes to styles which already exist 3. to hide elements from printing (e.g., images or divs) add the property {display: none} 4. in the head of your document add a second link tag which specifies media="print"

<link href="printstyle.css" rel="stylesheet" type="text/css" media="print" />

Validating your CSS

The w3c offers a validation service online which allows you to check for errors in your CSS syntax. The url for this service is http://jigsaw.w3.org/css-validator. You can point to a CSS file already on the web by clicking the By URI tab. Or, you can upload your CSS file or simply paste your CSS code directly into the box under the By direct input tab. If you have errors, check the line number of the CSS to troubleshoot. Question: Why is it important to validate your code?

18

Introduction to JavaScript

JavaScript is a distinct programming language which is used by an html document to make web pages interactive. JavaScripts make it possible to swap images, perform calculations and change web forms based on user input.

Things to know about JavaScript:

• it is the default scripting language for most browsers

• scripts run while a user is viewing a page without the need to load additional pages

• it runs locally on the client-side

• scripts are activated by events which may or may not be user initiated

• line breaks within a line of script are forbidden

Like CSS, JavaScript scripts may be located in a separate file, in the head of a document or in the body. To place a script in an html document add the following code to the <head> right after the <title> tag. Use // to create a comment which ends at the line break. End each JavaScript line with a semi-colon. Example JavaScript Code

<head> <title>My Web Page</title> <script language="JavaScript"> // this is a script document.writeln ("Javascript is fun and easy to learn."); </script> </head>

Syntax Notes

1. JavaScript code is placed between the html tags <script> and </script>. 2. A line of JavaScript code ends with a semi-colon. 3. The opening <script> tag includes the language="JavaScript" attribute. 4. The document.writelin() statement will print whatever is between the parentheses,

which may be characters inside quotes or variables. 5. A comment begins with // and ends at the end of that line. Multi-line comments are

placed between forward slashes and asterisks, e.g., /* comment */.

19

6. Information between quotes (single or double are acceptable) is called a string and is not interpreted as code.

7. JavaScript will run from the head or body of an html document. Example JavaScript Code: Variables

<head> <title>My Web Page</title> <script language="JavaScript"> // set variable var sentence = "JavaScript is fun and easy to learn."; // script document.write (sentence); </script> </head>

Syntax Notes

1. A variable is a place to store information and is declared in a var statement. 2. Variable names: must begin with a letter or underscore (e.g., sentence or _sentence) may contain numbers (e.g., sentence9). are case sensitive may not contain spaces are not written inside quotation marks

3. When assigning a value to a string variable quotation marks are necessary but not parentheses.

20

Example JavaScript Code: Concatenation

<head> <title>My Web Page</title> <script language="JavaScript"> // set variable var sentence_part1 = "JavaScript "; var sentence_part2 = "is fun and easy to learn."; // script document.write (sentence_part1 + sentence_part2); document.write ("JavaScript " + sentence_part2); </script> </head>

Syntax notes

1. Strings and variables may be concatenated to each other using "+". 2. Spaces are added inside the quotation marks where needed. 3. add document.write ("<br />") for a new line

Example JavaScript Code: Set a Variable from User Input

<head> <title>My Web Page</title> <script language="JavaScript"> // set variable var sentence_part1 = prompt ("What is fun and easy to learn?", "default value"); var sentence_part2 = " is fun and easy to learn."; // script document.write (sentence_part1 + sentence_part2); </script> </head>

Syntax Notes

1. prompt allows users to interactively set the value for a variable by bringing up a dialog box.

2. The prompt method uses two parameters, first, what gets printed in the dialog box as the actual prompt, and second, what is the default value.

3. Using an empty set of quotations marks for the second parameter will cause the default value to be blank.

4. Write your text variables as a single line without line breaks.

21

Exercise:

Create a script to produce a "mad libs" sentence modeled like the following "Sally bought a car and is very happy." The name, thing and emotion will be given by the user.

Conditional Statements

if condition

if (condition) { code to be executed if condition is true }

<head> <title>My Web Page</title> <script language="JavaScript"> var age=prompt("Are you over 21?", "Type yes or no."); if (age == "yes") { document.writeln("What may I serve you?"); } </script> </head>

22

if-else

if (condition) { code to be executed if condition is true } else { code to be executed if condition is not true }

<head> <title>My Web Page</title> <script language="JavaScript"> var age=prompt("Are you over 21?", "Type yes or no."); if (age == "yes") { document.writeln("What may I serve you?"); } else { document.writeln("What soft drink may I serve you?"); } </script> </head>

23

Flash

About Flash

Flash began as FutureSplash Animator in the 1990's and was purchased by Macromedia in 1997 and renamed Flash. Macromedia was acquired by Adobe in 2005 and Flash become part of the Creative Suite. We are using Flash CS3. Flash creates animations and saves them in a compact format known as "swif" or .swf. These .swf files can be accessed from html allowing for more animated content on web pages. Flash uses vector graphics to describe a shape using points, arcs and math. Vector graphics are more compact and scalable. Lines are smooth rather than the blocks we see in bitmap images.

Advantages of Flash

• consistency across browsers and platforms • the Flash plug-in is widely installed on browsers (estimated to be 95%) • creative designs • compact files

Disadvantages of Flash

• requires owning and learning Flash • Flash designed websites tend to break with usability and accessibility standards • search engine optimization (SEO) relies on reading plain text and therefore suffers

24

The Flash Workspace

Like Photoshop and Dreamweaver, Flash uses Panels to make menu items more accessible. There is a dock of panels on the right. Each panel can be undocked or closed. The right panels can be minimized into tiles by clicking the double triangles at the top right of the panel. The Properties panel is docked at the bottom of the screen like in Dreamweaver. The toolbox is docked on the left like in Photoshop. What's unique to Flash is the work area which is divided into the timeline and the stage. The stage displays the objects in the current frame of your animation. The current frame corresponds to the location on the timeline of the playhead, the red box with the vertical line.

25

Working With Shapes in Flash

1. From the File menu choose new, then Flash File (ActionScript 3.0) to create a new .fla file - the native Flash file format.

2. Use the File menu to Save, Close, Exit, Print and Publish. 3. Click the Selection tool or press V then click an object to select it. Click an empty area to

deselect. 4. Use Edit > Select All or command/control-A to select all shapes on the Stage. 5. Press Delete to remove selected shapes.

Create a Simple Shape Object

1. From the toolbar press and hold on the current drawing shape (oval or rectangle) until a menu pops open.

2. Select the rectangle tool.

3. Click the Object Drawing tool in the Toolbox or press (J). 4. Preselect stroke (border) and fill color, border size and type from the Properties panel. 5. Drag across the Stage to create a shape.

Create a primitive vector shape in the Merge Drawing mode

1. Right-click (Command-click) and hold on the oval or rectangle in the Toolbox and select Rectangle Primitive Tool and drag to form a shape. Using the primitive tool allow us to draw a vector shape.

2. Click on the solid arrow or Selection tool or press V, then click once on the shape. 3. Press and drag in from a corner to resize. 4. Note the 4 arcs with the number boxes and the lock in the Properties panel.

5. Click the lock to unlock which now allows you to set distance for each of the 4 corners individually. Click Reset to return to the basic shape.

6. Create an oval primitive. Switch to the Selection Tool (V) and click the oval. Experiment with the start and end angle. Drag from the center dot out toward the edge.

7. Right-click (command-click) on frame 1 and choose Clear Keyframe.

26

The Timeline

Things to know about the Flash Timeline:

• Flash creates animations which happen over time • the timeline allows us to view, add and mange objects over time • the timeline displays layers of objects (shapes, lines, images, sounds) in rows at the left • each layer typically contains a single object which may be edited independently of other

layers • layers are arranged top to bottom in the order you want objects to be displayed • blocks of time are called frames which are represented by columns and allow you to control

objects at any moment in time • Keyframes mark a change to your object

Reading the Timeline

1. A frame span begins with a small circle and ends with a rectangular block (Layer 1, frame 33).

2. A keyframe is marked by an outline and may have a white, empty circle meaning no change has been added yet (Layer 2, frame 20) or a black, filled circle indicating a change has been added (Layer 1, frame 35).

3. The green block with an arrow indicates a tween or an automatic animation (Layer 2, frames 1-18).

4. The playhead at frame 25 tells what frame is currently showing on the stage below the timeline.

4 3 2

1 2

27

Working with the Timeline

The default preference is set to select frames by span. Click anywhere in a span to select it. To select a single frame hold the Control key (Windows) or Command key (Mac) as you click. Continue holding to select other frames. Once selected, right-click (Windows) or command-click (Mac) for a menu with options to insert or remove frames or keyframes.

For more see Help > Flash Help (F1) Using Flash > Creating and managing documents > Working with timelines.

Create a shape in the Object Drawing mode

1. Select the normal rectangle tool (press and hold on the current tool to pop up a menu).

2. Click the Object Drawing tool in the Toolbox or press (J). 3. Draw a rectangle. Draw a second one. Use the selection tool (V) to select one or the

other. Change the fill and border colors, border width and type. Move them around the stage.

4. Delete all object except one (select an object and press the delete key).

Create an animation

1. Move your shape to the top left area of the stage. 2. Right-click (command-click) frame 30 and choose Insert Keyframe. 3. Click the timeline on frame 30 to select it. 4. Drag your shape to the right side of the screen. 5. Right-click (command-click) any frame in the gray area within the keyframe span and

choose Create Motion Tween. Adding a Tween, or tweening, instructs Flash to create all the appropriate frames "in be tween".

6. Press Enter to play your animation.

Try these – Use UNDO if you get into trouble.

1. Insert a keyframe at frame 60. With frame 60 selected drag your shape across the screen and change its color. Then create a shape tween. Play your animation.

2. Insert a keyframe at frame 90. With frame 90 selected, delete your shape and draw a different shape on the opposite side of the stage. Create a shape tween. Play your animation.

28

3. Insert a keyframe at frame 120. With frame 120 selected, change the size of your shape by typing a smaller number into the Width box in the Properties panel. Create a shape tween. Play your animation.

Create an image animation which fades in

1. Create a new Flash (.fla) file. 2. Select (V) the stage and change the dimensions to 500px x 150px. 3. Choose File > Import to Library. From the images folder choose carcassonne.jpg. Choose

Library from the Window menu if necessary. 4. Drag the jpg from the Library to the stage and align it. Use the arrow keys for single pixel

moves. 5. Select the image. From the modify menu choose Convert to Symbol. 6. For name type watercolor-graphic. For type choose graphic. 7. Insert a keyframe at frame 60. 8. Select frame 1 and click the image to select it. 9. In the Properties panel choose Alpha from the Color popup. Change the percent to 0. 10. Click on frame 60. Select the image. Change to Alpha to 100%. 11. Right-click (command-click) any frame between 1 and 60 and choose Create Motion

Tween.

Create text which enters from the left

12. Create a new layer. Choose Insert > Timeline > Layer or click the new layer icon. 13. On layer 2 insert a keyframe at frame 60. Make sure frame 30 is selected. 14. Click the Text tool (T). Preselect the font. Make the size between 25-30px. Change the

color to the color of the red/pink tower in the image by using the eye dropper. 15. Move the text block off the left side near the top of the image. 16. On layer 1 insert a keyframe on frame 120. This will keep the image showing. 17. On layer 2 insert a keyframe at frame 120 and move the text block to the center of the

image. 18. Create a motion tween on layer 2 in the span between 60 and 120. 19. Press control-enter to test your animation.

Making Modifications

• How would you change the color (size, font) of the text? • How would you make things happen faster, slower? • What would you do if you needed to use a different image?

Using your animation

1. From the file menu choose Save and Compact. Name your file header.fla. This saves your file in the native Flash format.

29

2. From the File menu choose Publish. 3. You now have a swif file named header.swf located in the same directory where you

saved the fla file. You also have a JavaScript script named AC_RunActiveContent and an html file named header.html.

4. To embed the Flash animation in our index.html open the html file generated by the Publish command. Copy the lines from the head into the head of index.html. Copy the script and paste into the location where you want your animation to take place in our case the header div.

5. You can change parameters by choosing File > Publish Settings.

Note: The script located in the generated html file will test for the presence of the Flash player, even the version. The AC_RunActiveContent script allows Flash to work with later versions of Internet Explorer. It must be located on the server with the other site files.

30

Embedding Video

The easiest way to include videos is through the MIT service TechTV at http://techtv.mit.edu/. If you open an account you can upload and store videos. Once it is uploaded it’s simple to get the code which will play the video. To embed video from TechTV:

1. Locate the video on the TechTV site.

2. Click the Embed button under the video.

3. Select the player size and click in the box under Copy HTML code. This will highlight all the

code. Copy the code with Edit>Copy or CTRL-C.

4. Click on your web page where you would like the video to appear. Switch to the Code

view and paste the code. You must Preview in Browser to test the video.

Exercise

1. Go to TechTV and search for "I am irenes". 2. View the video. 3. Get the code to embed. 4. Place it in the html code of the Media page.

31

Embed from YouTube

YouTube is another source for thousands of video. Embedding is just as easy as it is with TechTV.

1. Go to YouTube. 2. Search for "Lori Andrews". 3. Select "Watercolor Painting Demonstration by Lori Andrews". 4. Click the "Embed" text in the gray box in the right column. 5. Copy the highlighted code. 6. Place it in the code of the Media page.

32

Mad Libs Solution

<head> <title>My Web Page</title> <script language="JavaScript"> // set variable var part1 = prompt("Enter a name.", "Sally"); var part2 = prompt("Enter a thing.", "car"); var part3 = prompt("Enter an emotion.", "excited"); // script document.write (part1 + " bought a " + part2 + " and is very " + part3 + "."); </script> </head>

33

Completing Suckerfish and the dev.html page

1. #navbar font-size: 12px margin-left: 20px delete the border

2. #content padding: 0 30px delete the border

3. #sidebar margin-left: 30px padding: 0 20px

4. h1 font-size: 4em text-align: center

5. #footer text-align: center font-style: italic margin-top: 30px

6. #wrapper border: solid background-color: you choose

7. add hr after h1 in header 8. body

background-image: bg-image1.gif 9. change menu item Spotlight Artist to Media

34

35

Glossary

CSS – Cascading Style Sheets, a standards-based language for web page presentation – formatting and layout

div – a division or section of web page code marked by the tags <div> and </div>. It has no inherent value but is useful for creating blocks of code. Divs usually have an id attribute giving them a unique name.

element – an opening tag, a closing tag and the content in between

object – an element with an id

Box model – a way of defining elements. Every element is a box with content, padding, borders and margins.

positioning – using CSS and divs to lay out a web page rather than using tables

containing element – the outer element which contains or has other elements embedded within

root element – the highest level containing element - html

36

Resources

Books

CSS Pocket Reference, O'Reilly Press Spring into HTML and CSS -Molly E. Holzschlag, 2005, Addison Wesley Head First HTML with CSS & XHTML - Eric Freeman and Elisabeth Freeman, 2005, O'Reilly Media, Inc. CSS The Definitive Guide - Eric A. Meyer, 2006, O'Reilly Press Eric Meyer on CSS: Mastering the Language of Web Design - Eric A. Meyer, 2002, New Riders CSS The Missing Manual – David McFarland, Pogue Press, 2009

At MIT

MIT Web Publishing Reference Pages - http://web.mit.edu/ist/web/reference/index.html MIT Web Publishing - http://web.mit.edu/ist/topics/webpublishing/index.html MIT DCAD - Departmental Consulting and Application Development http://web.mit.edu/ist/dcad/

Adobe

The Help Menu in Dreamweaver and Flash (no kidding!) Adobe Video Workshop - http://www.adobe.com/designcenter/video_workshop/

Intermediate Web Publishing II Resources Page

- currently at http://web.mit.edu/pankin/www/resources