Web Design Unit.doc

Web Design Unit

Purpose:The Purpose of this activity is to help students know and how the World Wide Web works and how to design their own functional pages by understanding html coding and design principles.

Standards Addressed:

Standard(s):

1. Standard 10:

Benchmark(s):

Research and Development

Multidisciplinary Approach

2. Standard 12: Use and Maintain Technological Products and Systems

Benchmark(s):

Use computers to communicate

3. Standard 17: Information and Communication Technologies

Benchmark(s):

Many ways of communicating

Information and Communication Systems

State Standards Addressed:

Essential Questions for Students to be able to Answer:

Assessment:

Each student will maintain his or her own "electronic portfolio" on the school's server

Prior Knowledge:

There is not any previous knowledge needed.

Resources:

Each student will use the following peripherals

o Digital Camera o Scanner

Each student will use the following software o PaintShop Pro and/or Adobe PhotoShop o Macromedia Dreamweaver and/or Microsoft FrontPage o NotePad o Internet Explorer o Netscape o Microsoft Office 2000 (Word, PowerPoint, Excel) o FTP Pro

Time:

Four to six weeks

Course Topics: The Internet Layout and Design Available Resources Graphics HTML Web Page Editors JavaScript JAVA

Unit Plan

These lesson plans are adjusted from the Multimedia class from the Whitewater High School, Whitewater, Wisconsin. (http://www.whitewater.k12.wi.us/whs/webpagedesign/index.html)

Course Outline:

1. Develop a knowledge of how the Internet works (How the Internet Works

Qualities of a Good Web Page)o Explain the structure of the Internet and how information is sent

from place to placeo Explain the difference between common file formats found on the

web (graphics, audio, video)o Describe/define the languages used to design web pageso Explain how browsers interpret web pages

Use on-line resources

o Use File Transfer Protocolo Use common plug-ins and describe their purposeso Use email and on-line forms to communicate with the instructor

Develop quality layouts for web pages

o List qualities of a good web page layouto Understand that differences in browsers and differences in

individual user’s equipment should be considered when designing a layout

o Use tables and frames to control the placement of informationo Acknowledge that content is the most important feature of a web

pageo Evaluate work and make suggestions for improvemento Organize material in a manner appropriate for the subject matter

Create original graphics/images and modify existing images

o Use a digital camera to capture images and videoo Use a scanner o Design a graphics and map coordinates for an image map

Code web pages in HTML

o Create a new original web page starting with a blank NotePad document

o Control the face, color, size, and emphasis of fontso Display graphics and use an image as a backgroundo Create links within the same document, to another document, to

another web site, and to an email address

http://www.whitewater.k12.wi.us/whs/webpagedesign/layout.htm

http://www.whitewater.k12.wi.us/whs/webpagedesign/theinternet.htm

http://www.whitewater.k12.wi.us/whs/webpagedesign/index.html

o Set up a page using frames to organize the desktopo Implement an original image mapo Implement a form which emails the responses to an individualo Display information using tables to control the layouto Display information in numbered lists, bulleted lists, and definition

listso Include sound

Use web page editing software

o Create a web page using Macromedia Dreamweaver or Microsoft FrontPage

o Create web pages using Office 2000 products (Word, PowerPoint, Excel)

Use JavaScript and JAVA to add functionality to web pages

o Display alert boxes and additional windowso Implement mouseoverso Display scrolling texto Display dates and timeso Create interactive formso Write original functionso Generate cookieso Modify existing appletso Create original interactive applets

Use technology in a responsible manner

o Explain copyright and intellectual property rights as they relate to the web (http://groton.k12.ct.us/mts/pt2a.htm)

o Respect intellectual property rightso Abide by the school’s computer/internet use agreement at all times

Lab Assignments

1. Good Sites / Bad Sites 2. Lab #1 Fonts, Images, & Backgrounds 3. Lab #2 4. Lab #3 5. Lab #4 PhotoshopGraphics 6. Lab #5 Client Side Image Maps 7. Lab #6 Tables 8. Lab #7 Frames 9. Lab #8 Forms 10. Lab #9 Cascading Style Sheets 11. Lab #10 Alert Boxes and Windows 12. Lab #11 Pop-Up Menus 13. Lab #12 Mouseovers

14. Lab #13 Scrolling Text 15. Lab #14 Dates and Times 16. Lab #15 Interactive Forms 17. Lab #16 More Functions

LAB ASSIGNMENTS

1. HTML: Fonts, Images, and Backgrounds Create a new original web page starting with a blank Notepad document Control the face, size, color, and emphasis of fonts Control the placement of text Display special (non-alphabetic) characters Save a graphic from the web Display an image on a web page Use alternate text with images Use a graphic as a background for a web page

Lab #1HTML: Fonts, Images, and Backgrounds

1. Open a blank NotePad document and enter a basic set of HTML tags (html, head, title, body). Save the document to your webpagedesign folder on the network using an html extension.

2. Save the following two graphics to your webpagedesign folder on the network.

3.4. Add the gray paper graphic to your page as the background. 5. Enter the text and display it as it appears on the screenshot at the bottom of this

page. o Display the title using a heading of size 1 in the default font. o Make the color of the rest of the text green. o Make the font Arial size 5. o Underline every letter "P" that begins a word. o Italicize every occurance of the phrase "Pickled Peppers." o Bold the words "how many." o Display every occurance of the name "Peter Piper" in size 6 red arial text. o Display the last line using italicized black arial text size 3.

o Use the special code required to display the fraction properly. o Center the text on the screen (except for the last line). o Display a blank line between lines of text.

6. Add the other image to the page in the appropriate place using the img tag. Specify a proper height and width for the image. Use the alt attribute to specify alternate text if the image is not displayed. Align the image to the left side of the page. Allow text placement next to the image.

2. HTML: Lists Numbered lists Bulleted lists Multi-Level lists Definition lists

Lab #2HTML: Lists

1. Create a new HTML document in Notepad. Choose an appropriate background. Set appropriate text sizes and colors throughout the document.

2. Display a numbered list that shows your class schedule for today. 3. Nest bulleted lists inside of the numbered list to show what you did during each

class period today. Include at least three bullets for each class period. Set the bullet type to square.

4. Include a link to a second HTML document which uses a definition list to give a one or two sentence description of each course on your schedule.

http://www.whitewater.k12.wi.us/whs/webpagedesign/newlab4.html

3. HTML: Links Create links using text Create links using graphics Create links to a web page on another server Create links to another document on the same server Create links to another location on the same page Create links to email addresses Implement redirection

Lab #3HTML: Links

1. Save the red asterisk clipart shown below to your webpagedesign folder.

2. Create a new HTML document using NotePad and enter the basic set of starting tags. Save the document to your webpagedesign folder.

3. Add the following information to the body tag. o Set the background color to an off-white. o Set the default text color to red. o Set the color of links to purple. o Set the color of active links to blue. o Set the color of visited links to green.

4. Recreate the page as it appears in the screenshot shown below making modifications so that the page really does reflect your favorite links.

o Set the face for the font to arial. o Center the title using heading size 1. o Set the font size to 4. o List at least 10 links to other web sites. (The list needs to be more than one

screenful.) Each link must be accessible by clicking on either the red asterisk in front of the text or by clicking on the text itself. Web sites that are blocked through the school server may not be used.

o Make sure that there are no borders around the asterisks. o Make sure that the link for the asterisk and the link for the text are

separate from each other. o Leave a blank line between each item in the list.


5. Add three more links at the bottom of the list. (NOTE: These links are not displayed in the screenshot.)

o Link to a document that you have created for another lab. Label it "My Favorite Lab."

o Link to your school email address. Label it "Please Send Me Comments About This Page."

o Link to the top of the page. Label it "Back to the Top."

6. Create another new HTML document and save it to your webpagedesign folder. Display a friendly greeting on the page. Have the page automatically redirect you to the first document you created for this lab (the page titled "My Favorite Links") after 10 seconds. (NOTE: When you link to lab 3 from your electronic portfolio please be sure that it links to this document first so the redirection can be demonstrated.)

7. Email Miss Masbruch to tell her that she can grade lab 3. After this point it is assumed that you will email every time you complete a lab and have added it to your index page.

4. Photoshop: Graphics Create an original image with a transparent background Create an original animated gif Fit text to a curve Change the color of an existing graphic

Lab #4Photoshop: Graphics

1. Visit an on-line clipart site and choose a piece of clipart that represents something about you such as your favorite animal or food. The clipart should be a still image, not an animated gif. Save the clipart to your webpagedesign folder.

2. Open Photoshopand replace one of the major colors in the clipart with another appropriate color. Save the clipart image under a different name in your webpagedesign folder.

3. Create a new image in Photoshopthat measures 200 pixels by 200 pixels. 4. Create a gif that results in something very similar to the Willie the Whippet

design shown below. o Draw a circle slightly smaller

than the new image (so that your text will fit between the circle and the outer edge of the image).

o Create text that includes your name and something about the clipart you have chosen.

o Fit the text to the curve. o Rotate the image so that the

text is positioned logically around the circle.

o Place your clipart image (with its new color) in the center of the circle.

o Set the background color of the image to transparent.

o Save the image in your webpagedesign folder as a gif.

5. Start Animation Shop and open your newly created gif (it will become the first frame of the animation).

Insert an image effect of your choice (compress, explode, pinch, etc.). Design the effect to last for approximately 3 seconds at roughly 5 frames per second.

Display each frame for an equal amount of time. Set the animation to loop 3 times.

Save the new animated gif by a new name in your webpagedesign folder.

2. Create an HTML document to display the original clipart image, the new gif, and the new animated gif. Use the height, width, and alt attributes for each of the images. (HINT: Change the background color of the page to make sure that your image backgrounds are transparent.)

5. HTML: Client Side Image Maps Use graphics software to locate the coordinates for an image map Implement an image map using circles Implement an image map using rectangles Implement an image map using polygons

Lab #5HTML: Client Side Image Maps

1. Save the following graphic to your webpagedesign folder.

2. Use Photoshop to open the graphic and map the coordinates for the major shapes (1 circle, 4 polygons, 2 rectangles).

3. Create an HTML document to display the graphic. Create a client side image map which links each of the major shapes in the graphic to an appropriate document.


6. HTML: Tables Control alignments within a table Control the column width and row height in a table Control the column span and row span of cells in a table Control the cell padding and cell spacing in a table Control the borders and background colors of a table

Lab #6HTML: Tables

1. Create a new HTML document in Notepad.

2. Recreate the table shown below. Pay special attention to alignments, fonts, borders, background colors, and cells that span multiple columns or rows. Estimate the row heights, column widths, cell padding and cell spacing.


7. HTML: Frames and Targets Set up a frames page using two rows Set up a frames page using two columns Set up a frames page using a combination of rows and columns Display a linked document in a particular frame Display a linked document using the full screen Display a linked document in a new window

Lab #7HTML: Frames and Targets

1. Create five HTML documents that contain only a background color. Use red, blue, yellow, purple, and orange.

2. Create a starting HTML page that contains links to four other pages (PageA, PageB, PageC, and PageD).

3. Create PageA so that it diplays information in frames using only two rows. Display the page with the red background in the top frame and the page with the blue background in the bottom frame. Display a border between the frames.

4. Create PageB so that it displays information in frames using only two columns. Display the page with the red background on the left and the page with the blue background on the right. Do not display any borders or spacing between the frames.

5. Create PageC so that it displays information in frames using both rows and columns. Recreate the layout of the screen so it is similar to the graphic below. Do not display any borders or spacing between the frames.


6. Create PageD so that it displays information in frames using both rows and columns. Recreate the layout of the screen so it is similar to the graphic below. Display a border between the frames.

7. Modify the document with the purple background used on PageD so that it contains three links:

o Clicking on the first link places the document with the yellow background where the orange document is currently located in the bottom left hand corner.

o Clicking on the second link opens the yellow document in a new window. o Clicking on the third link opens the yellow document using the full screen.

8. HTML: Forms Organize choices using radio buttons Organize choices using check boxes Create a password field Create a text box Create a text area Implement a drop down list Submit responses to the form using email

Lab #8HTML: Forms

1. Create a new HTML document and recreate the student information survey as shown in the three screenshots below. Layout the screen exactly as shown using tables.

2. Use radio buttons for questions 1 and 3. 3. Use drop down lists for questions 2 and 9. 4. Use checkboxes for question 4. 5. Use a textarea for question 5. 6. Use password fields for questions 6 and 7. 7. Use a text field for question 8. 8. Implement the submit button so that it emails the responses to your school email

account. When you have completely finished the lab change the submit button so that it sends the information to Miss Masbruch's email and submit ONE complete copy of the survey to her. Change the submit button back to your email.


9. DHTML: Cascading Style Sheets Use styles to control the appearance of fonts Use styles to control the appearance of links Create a separate stylesheet that contains formatting information Refer to the stylesheet from several pages in the same web site

Lab #9DHTML: Cascading Style Sheets

1. Create a style template (external style sheet) that contains classes for the following items:

o Background image - fixed o At least two different fonts o At least one unique link action o A horizontal rule o A box/border o An unordered list using a graphic for the bullet

2. Modify your index page for your portfolio to incorporate the styles listed above. ALL of the style information should come from the style sheet...there should be no font/graphic/color information left embedded in the code for the index page.

3. Create an additional document that refers to the same external style sheet. This document should contain biographical information about you. You can design it like a resume or just include random facts about yourself. There should be no font/graphic/color information embedded in the code for this page...all style information should come from the external style sheet. You can use the digital camera or scanner to include a picture of yourself if you would like. Place a link to this page on your index page for lab #9.


10. JavaScript: Alert Boxes and Windows Display an alert box Display an additional window when a page opens

Lab #10JavaScript: Alert Boxes and Windows

1. Create a new HTML document that lists the top five reasons why your favorite web site is your favorite.

2. Use JavaScript to display an alert box when your page loads. The contents of the alert box should warn the user that there will be two browser windows open.

3. Use JavaScript to open a second browser window after the user clicks "ok" in the alert box. The window should display your favorite web site. Its dimensions should be 640 pixels wide by 200 pixels high. It should have a URL bar, but no toolbar or menubar.


11. JavaScript: Pop-Up Menus

Lab #11JavaScript: Pop-Up Menus

1. Create a new HTML document which will display two pop-up menus as shown in the screenshot below.

2. Use size 1 for the first pop-up menu so that only one line is displayed until the user pulls down the list. Use the onChange event handler so that the new site is visited as soon as the user chooses it. Include the following active links in the list:

o Whitewater Unified School District Home Page o Whitewater High School o Whitewater Middle School o Lakeview Elementary School o Lincoln Elementary School o Washington Elementary School o WUSD Central Office o WUSD School Board

3. Use size 9 for the second pop-up menu so that all choices are visible on the screen. Use the onChange event handler so that the new site is visited as soon as the user chooses it.


12. JavaScript: MouseOvers Change text color Replace a graphic

Lab #12JavaScript: MouseOvers

1. Save the following three graphics to your webpagedesign folder.

2.3. Recreate the HTML document shown below, using the bubble graphic as the

background and displaying one of the fish centered on the screen. Enter the text centered on the screen in arial blue size 7 font.

4. Implement a JavaScript mouseover inside the img tag that will display the fish facing the opposite way when the mouse is placed over the image. The fish should return to its starting position when the mouse pointer is no longer on top of the graphic.

5. Implement JavaScript mouseovers inside of font tags that will change the color of a word from blue to red when the mouse pointer is placed over that word. The text should return to blue when the mouse pointer is no longer positioned over the word. Each word must change color independently of the others.


13. JavaScript: Scrolling Text Display scrolling text in a text box Display scrolling text on the status bar

Lab #13JavaScript: Scrolling Text

1. Create a new HTML document that displays a weather report for today. Include appropriate text and graphics.

2. Use the onload event handler in the body tag to call a function which displays a scrolling message in the status bar. The message should read "Severe Thunderstorm Warning for Dane County until 9:00 pm."

3. Use a text box in a form to display a scrolling message in the center of the screen. (See Shelly Cashman JavaScript textbook pages 2.7 - 2.17) The message should read "Severe weather is likely for our area this evening. Please stay alert for updates."


14. JavaScript: Dates and Times Display the current date and time Display the date and time of the last page update Display a countdown to an upcoming event

Lab #14JavaScript: Dates and Times

1. Create a new HTML document which will display the information as shown in the screenshot below.

2. Manipulate the date object to show the date and time that the page was loaded in the format shown in the example.

3. Write a JavaScript routine to calculate and display the number of days left until Christmas.

4. Use JavaScript to display the date and time that the document was last modified.


15. JavaScript: Interactive Forms

Lab #15JavaScript: Interactive Forms

1. Save the following four graphics to your folder:

2.3. Recreate the web page exactly as shown in the screenshot below. 4. Write three javascript functions: ClearForm, CalcRating, and DoMath. (HINT:

Use the Mortgage Calculator problem in the JavaScript text as an example.) 5. When the user clicks on the calculate button call function CalcRating to check

each of the entries to make sure that they are integers. If an entry is not an integer display an alert box, clear the text box, and position the cursor in text box.

6. Once all entries are validated call function DoMath to calculate the quarterback rating. The formula is as follows:

(50 + 2000(Comp / Att) + 8000(TD / Att) - 10000(Int / Att) + 100(Yards / Att)) / 24

Display the result rounded to one decimal place. (HINT: Multiply the answer by 10, make it an integer, and then divide it by 10.)

7. When the user clicks the clear button call function ClearForm which empties each of the text boxes and positions the cursor in the first box.


16. JavaScript: More Functions

Lab #16JavaScript: More Functions

1. Begin by saving the code for lab #16 under a different name.

2. Add a table that includes a series of checkboxes from which the user can choose their favorite team (list at least six teams) and an additional empty text box as shown in the first screenshot below.

3. Locate a suitable graphic for each of the teams in your list. Keep the graphics comparable in size to the footballs already on the page. You will also need the address of the team's official web site, the name of the starting quarterback, and a knowledge of the team colors.

4. Write a function that will do the following when the user chooses a team and clicks submit:

o Display the confirm dialog box to ask them if they are really sure. (Once the dialog box appears, if they select "cancel" then clear the form and display nothing else.)

o Change the background color of the document to one of the team colors.


o Change all of the yardmarker graphics to the team graphic you selected. o Display the team name and quarterback in the text box. o Open the team web site in a new window. o Clear the checkmark in front of the selected team.

See the screenshot at the bottom of the page to see the effect of choosing the Packers.

5. If the user clicks the submit button with nothing selected revert to the original background color and set of graphics.

WEB PAGE DESIGN USING HTML

THE BASICS

HTML stands for HyperText Markup Language. HTML is a basic language for creating web pages. HyperText refers to words that can take you to other places via links. Markup refers to the fact that the document in which you create your web page with HTML is "marked up" with tags enclosed in angle brackets.

There are two kinds of tags used in HTML, open and close. Both open and close tags use a pair of angle brackets, but close tags have a forward slash after the first bracket. Tags most often appear in pairs, with the information between the tags being effected by them.

Web pages can be created using HTML in a simple text editor, like NotePad. After entering the information that will make up your web page, save the document with a .html extension. After entering Internet Explorer, choose to open your document and the web page will be displayed. As you make additions or changes to your document in NotePad, simply save it and then click the refresh button on the Internet Explorer toolbar to see the changes take effect.

Following is a sample of an HTML document showing a basic set of starting tags:

The open and close HTML tags tell the web browser when to start and stop processing your web page.

The open and close HEAD tags offer a place to put notes and information about your web page. Information located here is typically not displayed on your web page.

The pair of TITLE tags allow you to place a title in the title bar at the top of the web page. Title tags are located between the head tags.

The BODY tags enclose all information that will be seen on your web page. The open

body tag can include attributes for the entire page such as the background and the color of links.

It is important to note that when entering information in NotePad, pressing the enter key has no effect on the appearance of the page in the web browser, so the tags can be arranged in a way that will best help you keep track of what you are working on. Special tags are needed to start new lines on the web page.

Many tags have attributes, additional formatting information placed within the open tag, that will enhance the appearance of the web page. Most attributes are completely optional; the tag will function with or without them.

CENTERING TEXT

Text in HTML is automatically left justified unless you provide other instructions.

BREAKS

The web browser typically ignores any hard returns in your document. In order to start a new line on your web page, you must use a break tag. The break tag does not have a matching close tag.

PARAGRAPHS

The paragraph tag is a break tag. It tells the web browser to start a new line after leaving a blank line. It does not have a matching close tag. (Note: Two br tags in a row will have the same effect.)

UNORDERED LISTS

Unordered lists are marked by bullets. The unordered list tag has a close tag, with each item in the list set off by a list tag. Lists can contain as many items as you wish. (Note: If the li tags are left out, items on this list will simply be indented without the bullets.)

Following is the output from the previous example. Apples Oranges Bananas

MULTILEVEL LISTS

Unordered lists may be nested inside one another in order to create the appearance of an outline. Each "level" will be marked by a different type of bullet.

Following is the output from the previous example. Printers

o Impact Benefits Drawbacks

o InkJet o Laser

Monitors o TouchScreen o Standard

ORDERED LISTS

Ordered lists are numbered lists. The same rules apply as for unordered lists.

Following is the output from the previous example.1. Wash Dishes 2. Do Laundry 3. Take Out Garbage 4. Clean Bathroom

ANCHORS

HyperText links are words (or graphics) that you can click that will take you to another page of your own, somewhere within the same page, or to an entirely different web site. Text between the tags will appear underlined and in a different color. HREF stands for HyperText Reference. The attribute target="_top" is optional and will allow you to jump out of the frames and view the new page using the full screen. (Note: Creating a link to a place within the same document requires another anchor tag at the destination point with a matching name.)

Following is the output from the previous example.

Visit Mickey Go To The Top of This Page Visit Another Page on This Same Site

http://www.whitewater.k12.wi.us/whs/webpagedesign/pagetwo.html

http://www.whitewater.k12.wi.us/whs/webpagedesign/#beginning

http://www.disney.com/

SENDING EMAIL

A HyperText reference can include an e-mail address so that when the link is activated, an e-mail message can be created and sent.


E-Mail Me

ADDING COLOR

Attributes for color can be added to tags such as body. Colors can be referred to by name or by six digit hexadecimal number. In the following example, only the opening body tag is shown. The bgcolor attribute controls the background color of the entire page. The text attribute controls the color of text not already specified through other tags. The link attribute will affect the initial color of the anchor tags, the alink attribute will affect the anchor tags when the mouse pointer is on top of them, and the vlink attribute will affect the color of visited links. The three link attributes do not work with all web browsers.

Click Here to See Hexadecimal Values for Selected Colors

HORIZONTAL LINES

The horizontal rule tag, which does not have a close tag, displays a horizontal line on your web page. The hr tag has several attributes including width (number of pixels long or percent of the screen width), size (thickness in pixels), align (left, right, center), and color.

http://www.whitewater.k12.wi.us/whs/webpagedesign/colors1.html

mailto:[email protected]


CHANGING FONTS

The font size, face, and color can be changed throughout a web page using the font tags. The face selected should be something typically available on most computers, although a list of fonts can be specified as back-up choices. The size can range from one through seven, where seven is the largest. Pairs of open and close tags should be used.


Red Arial Text Size 7

CREATING HEADINGS

HTML uses six basic heading tags. Each uses the letter H followed by a number one through six. The larger the number, the smaller the text.

This heading is written using size one. This heading is written using size two.

This heading is written using size three.

This heading is written using size four.

This heading is written using size five.

This heading is written using size six.

PROVIDING EMPHASIS

Text in HTML can be italicized, bolded, or underlined.


Text Written Here Will Be Underlined Text Written Here Will Be Bolded Text Written Here Will Be Italicized

SPECIAL CHARACTERS

Certain characters that are not available on the standard keyboard or are a part of HTML tags may require special codes in order to display them on a web page. These codes begin with an & and have a ; at the end. For example in order to print a less than sign, you must type an &, then the letters lt, and then put a ; at the end.

CODE(remove spaces)

CHARACTER DISPLAYED

& lt ; <

& gt ; >

& nbsp ; (blank space)

& cent ; ¢

& copy ; ©

& deg ; °

& frac14 ; ¼

Consult an HTML reference book for a full list of codes including codes used for foreign languages.

ADDING GRAPHICS

Graphics or images with a .jpg or .gif extension can easily be included in your web page using the image source tag. There is no close tag associated with the image source tag. Height, width, alignment, and border for the image can be set within the tag. Only include the path for the location of the graphic if it is in a different folder than the html code. The hspace attribute (not shown in the example) allows you to specify the number of pixels of space that should be left on either side of the graphic. A graphic can be used as a link to another location by placing the image source tag where the text would normally go between the anchor tags.


CREATING A BACKGROUND

A graphic image can be used as the background for your web page by including the background attribute in the body tag. Only the opening body tag is shown in this example.

ADDING SOUND

Certain types of sound files may be played while your page is being viewed (.wav, au, midi). The sound can be programmed to play once or several times using the loop attribute. The autostart and hidden attributes allow the option for either the

page designer or the person viewing the page to have control over the sound. The width and height specified are standard for the playbar.


SCROLLING MARQUEES

Text (or graphics) can be forced to move across the screen in one of three ways: slide, scroll, or alternate. Slide forces the text to stop when it hits the edge of the marquee. Scroll forces the text to continually move in a "circle." Alternate forces the text to bounce from side to side within the marquee. The height, width, and background color of the area in which the text is moving can be controlled. The length of the time for which the text moves can be controlled (seconds), as can the speed at which it moves (milliseconds). Font tags will have an effect on the text in the marquee. Center tags will have an effect on the placement of the marquee.


TABLES

A table can be used to arrange text and graphics in rows and columns. A table can be created with or without borders around the cells and with or without a separate background from the rest of the page. Tables are made up of pairs of table row tags. Each table row is made up of pairs of table data tags. Attributes used in the table data tags can include align (left, center, right), valign (top, middle, bottom), colspan, rowspan, width, bgcolor, and background. Center tags around the table can have an effect on the position of the table. Font tags inside the table data tags can have an effect on the font for the text in each cell.


Row 1, Column 1 Row 1, Column 2 Row 1, Column 3

Centered Across Columns Font Change

FRAMES

Frames allow the screen to be divided in to several smaller areas, each of which will display a separate HTML document. One HTML document is needed to control the layout and identify the filenames for the other documents to be displayed. If you are currently using Internet Explorer, pull down the "view" menu and choose "source" to see the document that controls the frames on this page. The graphic below demonstrates a frame setup very similar to the current page.

The frameset tags can contain an attribute to describe either the size of the columns or the size of the rows. The measurements can be given in pixels or in a percentage of the screen. The asterisk is used to state that whatever part of the screen is left

over will be used for the last frame.

The frame tags located between the frameset tags specify the name of the html document to be displayed, whether the user should be able to change the widths of the frames, and whether the frames should have a border. The frame tags also establish a target name so that other documents can be loaded in to the frames. The bordercolor attribute may also be used.

The noframe tags specify what should be displayed if an older browser is being used.

Nesting one pair of frameset tags inside of another allows the creation of more than two distinct areas on the screen. The code below divides the screen in to three frames as shown in the diagram following the example.

If a page is being displayed in frames, any anchor tag on that page can include a target attribute which controls where the new page is displayed.

Target="bottom" in the case of the above example will display the new page in the area named "bottom."

Target="_top" will take the user out of the frames and display the new page on a full screen.

Target="new" will open another window to display the new page.

If you are using Internet Explorer, right click on the background of the left hand frame on this page and choose "view source" to see the target attributes in use.

D Y N A M I C H T M L

THE BASICS

Dynamic HTML (DHTML) is a generic name for all types of scripting. Scripting allows for small amounts of programming code to be run in the viewer's browser in order for style, positioning, and content to appear dynamic rather than static. Scripting improves the level of interactivity on a web page without increasing the amount of work required by the web server.

The use of styles and cascading style sheets allows for the separation of style information from formatting information. Style sheets make it extremely easy to maintain consistency of style (colors, fonts, etc...) in a web site and to change the appearance of a set of pages without having to search through the code for all of the pages to find every occurance of a certain color or font.

STYLE (CSS)

The following three methods for including style information on a web page are all valuable tools to know and use. In-line Style:

Style information is mixed with the formatting information.

EXAMPLE (text changes from blue to red and back again): <font color=blue onmouseover="javascript:this.style.color='red'" onmouseout="javascript:this.style.color='blue'"> Hello </font>

Embedded Style: Style information is included between the head tags.

EXAMPLE:<head><style type="text/css"></style></head>

A style can be created by using the name of a tag (such as font) and assigning it a class name of your choice (such as examp). Following the names will be a list of attributes and their values enclosed in braces. A colon is used to separate an attribute from its value and a semicolon is used to separate attributes. For example:tagname.classname {attribute1 : valueofattribute1 ; attribute2 : valueofattribute2}

This style can be referenced in the document by using the name of the class in the tag that it was designed for. For example:<font class=examp>

A style can also be created by using the pound sign (#) in front of the class name (such as heading1 in the example above). To access styles declared in this way use the class name as the id in a div tag. For example:<div id=heading1>Dynamic HTML</div>

External Style: Style information is included in a separate file (cascading style sheets).

EXAMPLE:<link rel=stylesheet href="mystyles.css" type="text/css">

To use an external cascading style sheet create a document that contains only the style tags and save it with a .css extension. Include a link tag between the head tags of any document in which you want to access the styles. Refer to the styles in your html code just as you would if the styles were embedded.

TEXT ATTRIBUTES

The following is a partial list of attributes that may be used with any form of text including styles for the font tag and the anchor tag. All of the fonts and links on this page are controlled with styles.

Name of Attribute Possible Values Example

font-style normal oblique

italic

{font-style : normal}

font-weight extra-light demi-light light medium bold demi-bold

extra-bold

{font-weight : bold}

font-size The following units of measurement may be used:

points (pt) pixels (px) inches (in)

centimeters (cm)

{font-size : 14pt}

font-family Names of specific fonts or font families may be listed in the order of preference.

{font-family : "comic sans", "arial", "times new roman"}

text-decoration none underline italic line-through overline

blink

{text-decoration : line-through}

color Any hexadecimal value or color word that could be used normally may be used as part of a style.

{color : CC33CC}

letter-spacing Any unit of measurement that may be used for fonts may be used to determine the spacing between letters.

{letter-spacing : 0.5cm}

vertical-align sub {vertical-align : sub}

super

text-transform capitalize uppercase lowercase

none

{text-transform : uppercase}

line-height The distance between two lines of text can be set by using a multiplication factor on the current font size.

{line-height : 1.5}

To use these properties to create a mouseover for a link refer to the three actions that can occur with a link: link, visited, and hover. Typically the properties for link and visited are set the same, but the properties for hover are changed slightly so that the appearance of the link changes as the mouse passes over it. The classnames for all three actions must be the same so that they work together properly. Note that in the following example the link is initially red 8 point arial text. When the mouse passes over it it will become blue 8 point arial text and then return to its original state when the mouse is no longer over it.

a:link.mine, a:visited.mine {color:red; font-size:8pt; font-family:arial}a:hover.mine {color:blue; font-size:8pt; font-family:arial}

LIST ATTRIBUTES

The following is a partial list of attributes that may be used with unordered lists.


list-style-type disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha

none

{list-style-type : upper-alpha}

list-style-image An image may be specified as the {list-style-image :

bullet. url(redbullet.gif)}

list-style-position inside

outside

{list-style-position : inside}

BACKGROUND ATTRIBUTES

The following is a partial list of attributes that may be used with the body tag to set background colors and images.


background-color Any standard color word or hexadecimal value may be used for the color.

{background-color : blue}

background-image The filename of any image may be used.

{background-image : url(graypaper.jpg)}

background-repeat repeat repeat-x repeat-y

no-repeat

{background-repeat : no-repeat}

background-attachment

scroll

fixed

{background-attachment : fixed}

background-position This method of positioning the background matches the percentage coordinates of the image with the same percentage coordinates of the window.

{background-position : 50% 50%}

BOX/BORDER ATTRIBUTES

The following is a partial list of attributes that may be used with any "box" on the screen. The thick purple borders around the scroll areas on this page are created using box and border attributes with the div tag.


border-style The border-style attribute must be set to solid in order to make the border visible.

solid

none

{border-style : solid}

border-width If one measurement is listed the width of the entire border may be specified. If four measurements are listed in order they determine the width of the top, right, bottom, and left. Px, pt, cm, and in may be used.

{border-width : 1px 2px 2px 1px}

border-color Any standard color word or hexadecimal value may be used. One value indicates the same color should be used on all four sides. Four colors listed will follow the same sequence as border-width.

{border-color : blue}

padding One measurement may be given to specify the amount of padding on all four sides of the box. Four measurements may be used to provide different amounts of padding on each side of the box.

{padding : 1cm 2cm 1cm 2cm}

FILTERS

The following is a partial list of filters that may be used to enhance type styles. Please note that although it appears to have no effect on the size of the text, the height attribute must be used in order to activate the filters. The heading "Dynamic HTML" at the top of this page was created using filters.

Name of Filter Example

drop shadow {height : 14pt; filter : dropshadow(color=#ff33cc)}

shadow {height : 14pt; filter : shadow(color=#cccccc)}

glow {height : 14pt; filter : glow(color=#ff0000)}

fliph {height : 14pt; filter : fliph}

flipv {height : 14pt; filter : flipv}

POSITIONING

The following is a partial list of attributes that may be used to position elements on a page. The DHTML graphic in the top right corner of this page was placed using absolute positioning so that it could sit on top of the horizontal rule. Also, note that the graphic disappears when your mouse is positioned over top of it. This was done using the visibility attribute. The mini scroll areas on the screen were created using the height, width, and overflow attributes.


position static absolute

relative

{position : absolute}

top The position from the top of the page can be specified as a distance or a percentage of the screen.

{top : 40px}

left The position from the left edge of the page can be specified as a distance or a percentage of the screen.

{left : 50%}

width The width of the element can be specified as a percentage of the screen or by using pixels, points, inches, or centimeters.

{width : 5cm}

height The height of an element can be specified using a percentage of the screen or by using pixels, points, inches, or centimeters.

{height : 30%}

z-index The z-index is an integer which specifies the number of the layer on which the element is located. The smaller the number the lower the layer is positioned (i.e. the lowest numbered layers are in the back with other elements on top of them).

{z-index : -1}

overflow visible auto hidden

scroll

{overflow : auto}

visibility hidden

visible

{visibility : hidden}

REVEAL TRANSITIONS

The following is a list of values that may be used to create transitions from one page to the next.

Name of Transition Value

Box in 0

Box out 1

Circle in 2

Circle out 3

Wipe up 4

Wipe down 5

Wipe right 6

Wipe left 7

Vertical blinds 8

Horizontal blinds 9

Checkerboard across 10

Checkerboard down 11

Random dissolve 12

Split vertical in 13

Split vertical out 14

Split horizontal in 15

Split horizontal out 16

Strips left down 17

Strips left up 18

Strips right down 19

Strips right up 20

Random bars horizontal 21

Random bars vertical 22

Random 23

Use these properties to create a transition for entering or exiting a page. Place the META tag between the head tags and specify the http-equiv parameter as "Page-Exit" or "Page-Enter." Specify the duration of the transition in seconds. Use the integer constant for the transition to specify the type of transition. The code in the example below displays a random transition which takes 3 seconds to completely reveal the page whenever the page is visited.

<META HTTP-EQUIV="Page-Enter" CONTENT="RevealTrans(Duration=3, Transition=23)">

A sample of the effect can be seen by clicking here.

http://www.whitewater.k12.wi.us/whs/webpagedesign/tryme.html

WEB PAGE DESIGN USING JAVASCRIPT

THE BASICS

JAVASCRIPT uses a subset of the programming language JAVA to provide a high level of interactivity on a web page. JavaScripts are stored within an HTML document and are interpreted by the web browser.

JavaScripts may be located within the HTML code at the point in the page where they are to appear on the screen or they may be written using functions. Functions are small subprograms that are stored between the head tags of an HTML document and are called on to be executed when a particular event occurs.

Whether the script is stored between the head tags or within the body of the HTML document, it must be enclosed in script tags. Also, a set of HTML comment tags are typically used inside the script tags so that older browsers that do not support JavaScript will ignore the script and continue to process the page without errors.

Following is an example of the script and comment tags: <script language="javascript">

</script>

Be aware that JavaScript is case sensitive...the difference between a working script and an error message can be one capital letter.

ALERT BOXES

To pop up an alert box include the following line of code inside of script tags in the body of your HTML document. Please note that the processing of the page will stop until the viewer responds to the alert box.

alert ("Place the text to be displayed in the alert box between these quotes.")

Other types of pre-made dialog boxes are available such as the prompt and confirm boxes. In order to take full advantage of the features of these dialog boxes you must write more JavaScript code which can use the values that are returned by the dialog boxes.

The following statements will pop up a dialog box that requires a yes or no answer (OK or Cancel). If the answer is OK then the variable named answer has a value of true and if the answer is Cancel then the variable named answer has a value of false. You can then use an if statement in the JavaScript code to respond appropriately.

var answer = confirm ("Are you sure you want to quit?")if (answer==true){window.close()}

The following code will pop up a dialog box that asks the user to enter some sort of information. If the user clicks OK the information they entered is stored in the variable. The second set of quotation marks inside of the prompt statement make the contents of the text box blank when the dialog box is displayed.

var response = prompt ("What is your name?" ,"")document.write ("<font size=7 color=red face=arial>Hello " + response + "!")

Notice that in the last two examples the window and document objects were used. Window refers to the browser window and document refers to the page being displayed. The use of a dot after the name of the object allows actions to be performed on that object or properties of that object to be modified. In this next example, the navigator object is referenced in order to display the browser name and version.

alert ("You are using " + navigator.appName + " version " + navigator.appVersion + ".")

POP-UP WINDOWS

An additional browser window may be opened using a simple JavaScript. The open method contains three parts as in the following example: the name of the document or url of the web site to be displayed in the new window, the name that may be used to refer to the browser window (requires more code than is shown here), and the properties of the new window. Please note that the properties are all listed in one set of quotation marks and are separated by commas.

open ("myfile.html", "mywin", "height=200, width=200, titlebar=false") The following properties may be used to control the appearance of the new window:

Feature Example Description

height height = 200 determines the height of the new window in pixels

width width=200 determines the width of the new window in pixels

titlebar titlebar=false removes the title bar from the new window

location location includes the url / address text box in the new window

menubar menubar includes a menu bar in the new window

resize resize=off makes the new window a fixed size

scrollbars scrollbars adds scrollbars to the new window

status status includes a status bar for the new window

toolbar toolbar=yes adds a toolbar for the new window

WRITING FUNCTIONS

Functions are small subprograms that are located within script tags between the head tags of an HTML document. Functions are executed when they are called by name from an event handler within the body of an HTML document.

The basic structure of a function is as follows:

function NameOfFunction( ){

Include JavaScript Code Here }

EVENT HANDLERS

The following example demonstrates the use of event handler onclick as well as the use of styles to control the appearance of buttons. Note that instead of using type=submit for the button the code simply says type=button. Copy and paste this entire set of code in to a new document and test it out.

<html><head><title>Sample</title>

at a time (and create a text box with a vertical scrollbar) include the size attribute in the select tag. For example, size=5 will display the first five items in the list and add a vertical scroll bar to the box if there are more than 5 items in the list.

MOUSEOVERS

A mouseover refers to the effect that occurs when the properties of an object are changed if the mouse is positioned over the top of the object and then again if the mouse is removed from the object. The quickest way to generate a mouseover is to use the onmouseover and onmouseout event handlers in a form of in-line style.

Visit the style section of the DHTML page of this web site to see an example of mouseovers used with text as an in-line style. Any style property that applies to a particular object can be changed as the result of a mouseover.

Performing mouseovers with a graphic is not much different than with text. When the desired event occurs (onmouseover, onmouseout) change the source of the graphic as in the example that follows:

<img src="pic1.jpg" onmouseover="src='pic2.jpg'" onmouseout="src='pic1.jpg'">

SCROLLING TEXT

Since the marquee tag is only supported by Internet Explorer it is a good idea to avoid it as much as possible and use a JavaScript to generate scrolling text instead. With this JavaScript it is also quite easy to place the scrolling text on the status bar instead of in the document itself by using window.status as the destination for the message. The following function will generate a scrolling message in a text box named mymessagebox which is part of a form named myform. The event handler onload must also be used in the body tag to call the function when the page loads.

var message = "This is a test... "var position = 0function mymessage( ){document.myform.mymessagebox.value= message.substring(position, message.length) + message.substring(0, position)position = position + 1if (position > message.length){position = 0

}window.setTimeout("mymessage( )", 300)}

DATES AND TIMES

Dates and times are often displayed on web pages to indicate when a page was last updated, when a page was loaded, or to display a countdown to a particular event. Displaying the date and time of the last update is a good practice to get in to for all of your pages because frequent updates are one sign of a quality site. The date/time stamp lets the viewer know how recent the information is and therefore provides one indication of validity. To display the date and time of the last update (the last time the document was saved) use the following one line inside of script tags:

document.write ("This page last updated " + document.lastModified) To display the current time and date on a web page you must declare a variable of type Date ( var now = new Date). The variable can then be used to access various parts of the date and time including day of the week, month, day of the month, year, hours (in military time), minutes, and seconds. Assuming that now is the variable declared of type Date the following table describes how to access the parts of the date and time. Each of the function calls may be used in a document.write statement to display the result.

Function Call Description

now.getDay( ) Returns a number between 0 and 6 for the day of the week (Sunday is 0, Monday is 1,...)

now.getMonth( ) Returns a number between 0 and 11 for the month (January is 0, February is 1,...)

now.getDate( ) Returns the number of the day in the month (1 - 31)

now.getFullYear( ) Returns the four digit year

now.getHours( ) Returns the number of hours on the clock (0 - 23)

now.getMinutes( ) Returns the number of minutes on the clock (0 - 59)

now.getSeconds( ) Returns the number of seconds on the clock (0 - 59)

One way to convert the numbers for the month and day of week in to words is to use if statements. Using a lot of if statements is not the most efficient way to display the words, but it is the method that requires the least amount of programming knowledge. Examine the following example. Notice the condition that follows the

word if is in parentheses and that a double equal sign is used for the comparison. A single equal sign will actually make the condition true no matter what so January would always be displayed.

if (now.getMonth( ) == 0) document.write ("January")

The following function would display a working clock if your page contained a form called myform which contained a text box named mybox and the function was called using the onload event handler in the body tag. More code would need to be added to assure that the minutes and seconds always used two digits.

function myclock( ){ var now = new Date document.myform.mybox.value= now.getHours( )+":"+now.getMinutes( )+":"+now.getSeconds( ) window.setTimeout ("myclock( )",1000)}

To display a countdown to a future date, you will need two variables of type new Date. One of them will need to be set to the date that you are targeting with your countdown. The declarations would look as follows if you were going to count down to New Year's Day.

var now = new Datevar then = new Date("January 1, 2002")

The variable now in the above example actually holds the number of milliseconds that have passed since the computer started counting until now. The variable then in the above example actually holds the number of milliseconds that will have passed between the time the computer started counting and January 1, 2002. By subracting the two amounts and storing the answer in a new variable you will know the number of milliseconds between now and your target date. With a little division, this number can be converted to the number of days between now and your target date. In order to display the result as an integer, you will need to use the Math.ceil function as in the following example which uses the variable numdays to hold the number of days to be displayed. Ceil is short for ceiling which implies that the number will be rounded up to the nearest whole number.

document.write("Only " + Math.ceil(numdays) + " days until New Year's!")

INTERACTIVE FORMS

Forms can be used for a lot more than just submitting information through email. Forms can be made to perform all sorts of actions when buttons are clicked. Attached is a document containing the code for a complete web page which you can view as you learn about writing functions to create interactive forms. Save a copy of

the document sample.txt to your folder as an html document and study how all three of the included functions work together to produce the desired results. Pay particular attention to the following items:

1. In function dowork the library function isNaN is used. The name of this function means "is not a number." This is used to identify whether or not the viewer has accidently entered text in the box where they were supposed to enter a number.

2. In the same if statement the line document.myform.mybox.focus( ) is used to place the cursor in the desired text box. Focus is also used to place the cursor in the first box when the page loads by using the onload event handler in the body tag.

3. The if statement has been extended to form an if...else statement. If the condition following the if is not true then the browser will execute the statements listed after the else. Notice that braces have been used to include more than one statement after both the if and the else.

4. One of the statements listed after the else uses the library function parseInt to chop off everything that comes after the decimal point in the variable ans. The multiplication and division by the number 100 allow the decimal point to be moved two places in each direction so that the number can be rounded to two decimal places.

5. When function dowork calls function squareme it passes the value of the variable num as a parameter. The function heading for the function squareme is set up to receive this value and store it in the variable thisone. The variable thisone can then be used to do the math.

6. The return statement in function squareme sends the result of the math back to the statement that originally called the function. The answer is therefore stored in the variable ans inside of function dowork.

7. The type for each of the buttons is listed as button instead of submit or reset. This implies that the buttons are performing actions other than the standard actions associated with submitting or resetting a form.

http://www.whitewater.k12.wi.us/whs/webpagedesign/sample.txt

Planning for a Variety of Browsers What’s the Problem?Every browser contains a program called a parser that interprets the markup tags in an HTML file and displays the results. The logic for interpreting the tags varies from browser to browser. What is and isn’t Supported? (a few examples)

Only newer browsers support Cascading Style Sheets. Netscape Navigator does not support the marquee tag, but Internet Explorer does. Internet Explorer does not support the blink tag which is supported by Netscape Navigator. Newer versions of Internet Explorer may not support some JAVA applets (Microsoft is promoting its own version of JAVA called J++). Lynx is a text only browser used in many academic environments. America Online (AOL) uses a completely different environment than standard web browsers. Some browsers do not recognize blank spaces in the URL. The font tag has been designated as a deprecated element in HTML 4.0 by the W3C. This means that eventually browsers will stop supporting the tag. (W3C is attempting to separate structure from style.)

How do Designers Deal With This? (3 different approaches)

Code to the lowest common denominator. Do not use any HTML that is part of the latest standard…stick to the next-to-latest standard. Code on the cutting edge. Force the visitors to your web site to keep up with you. Be prepared to lose visitors because they aren’t willing to upgrade. Code for a specific browser. Warn your visitors that they need a specific browser to best view your site. This method works best on an intranet rather than on the internet as a whole.

A Few Tips

Use browser-safe colors (see the colors page for more information). Test your page in as many browsers as possible. Although you have followed the “rules” for all of the browsers you might still get some surprises. Plan for multiple versions of a browser, not just the latest release. Many people do not upgrade their browsers just because a newer version has been

http://www.whitewater.k12.wi.us/whs/webpagedesign/colors.html

released. Sometimes older computers do not have the processing power or disk space required for a newer version of a browser. Know your audience. If your page is geared to highly technologically literate people then it is probably ok to code on the cutting edge. Test your page with the graphics turned off. Always use the alt attribute. Use a browser sniffer that detects the user’s browser type when they access your site. This requires extra coding in order to plan for all of the possibilities. Plan for multiple screen resolutions as well as multiple browsers. Allow the amount of white space to vary with the resolution or code for the lowest common denominator (640 x 480). Avoid the possibility of horizontal scroll bars appearing.

Checking Out the BrowsersThe following web sites provide information on a variety of browsers.

www.browsers.com www.browserwatch.com www.whichbrowser.com www.operasoftware.com (Opera is popular in Europe.)

Another Interesting TidbitVisit www.cast.org/bobby and download Bobby, a tool that checks your web page code for compatibility with the World Wide Web Consortium’s (W3C) guidelines for accessibility by physically challenged people. At the bottom of its report Bobby also provides information on browser compatibility and download time.

http://www.cast.org/bobby

http://www.operasoftware.com/

http://www.whichbrowser.com/

http://www.browserwatch.com/

http://www.browsers.com/

USEFUL LINKS

Layout Tips Yale Web Style Guide Web Design Guide Web Pages That Suck

HTML A Beginner's Guide to HTML Here's Wilbur HTML: An Interactive Tutorial for Beginners Advanced HTML Tutorial HTML Goodies

DHTML The Dynamic Duo Dynamic Drive

JAVAScript JavaScript Tutorials

Clip-Art AAA Clip-Art Gallery

http://www.aaaclipart.com/

http://www.pageresource.com/jscript/index.html

http://www.dynamicdrive.com/

http://www.dansteinman.com/dynduo/

http://htmlgoodies.earthweb.com/

http://www.pageresource.com/html/index6.htm

http://www.davesite.com/webstation/html/

http://www.cwru.edu/help/wilbur/

http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html

http://www.webpagesthatsuck.com/begin.htm

http://www.dreamink.com/

http://info.med.yale.edu/caim/manual/contents.html

Common Plug-ins / Helper Applications

Symbol Plug-in Description Web Site URL

Acrobat Reader

View, navigate, and print Portable Document Format (PDF) files – documents formatted to look just as they look in print

www.adobe.com

SVG Viewer The Scalable Vector Graphics (SVG) format is an open-standard vector graphics language that lets you design Web pages with high-resolution graphics that can contain sophisticated elements, such as gradients, animation, and filter effects, using plain text commands.

www.adobe.com

Cosmo Player View 3-D and other virtual reality applications written in Virtual Reality Modeling Language (VRML)

www.cosmosoftware.com

Flash Player View dazzling graphics and animation, hear outstanding sound and music; display Web pages across entire screen

www.macromedia.com

Liquid Player Listen to and purchase CD-quality music tracks and audio CDs over the Internet; access MP3 files

www.liquidaudio.com

QuickTime View animation, music, audio, video, and virtual reality panoramas and objects directly in a Web page

www.apple.com

RealJukebox Play MP3 files; create music CDs

www.real.com

RealPlayer Live and on-demand near- www.real.com

http://www.real.com/


http://www.apple.com/

http://www.liquidaudio.com/

http://www.macromedia.com/

http://www.cosmosoftware.com/

http://www.adobe.com/

http://www.adobe.com/

CD-quality audio and newscast-quality video; stream audio and video content for faster viewing

RealDownload

Pause and resume downloads; If your download gets cut off, reconnect and continue from where it left off; Schedule downloads when you're not using your computer or when the network isn't so busy; Never misplace a download thanks to the special "My Download Files" folder

www.real.com

Shockwave Experience dynamic interactive multimedia, graphics, and streaming audio

www.macromedia.com

Stamps.com Print postage from you computer onto envelopes and labels

www.stamps.com

http://www.stamps.com/

http://www.macromedia.com/


Common File Formats on the Internet

GRAPHICS FILE FORMATS

ACRONYM NAMEFILE EXTENSION DESCRIPTION

JPEG (pronounced JAY-peg)

Joint Photographic Experts Group

.jpg Saved using lossy compression techniques to reduce the file size for faster downloading; Often used for scanned photos, artwork, and other images that include smooth color variations; May be used as a progressive graphic

GIF (pronounced jiff) Graphics Interchange Format

.gif Saved using lossless compression techniques to reduce file size for downloading; Works best for images with only a few distinct colors like line drawings and simple cartoons; The compression technique known as LZW compression which is used to make gifs is patented and requires that people making products to produce gifs acquire a license; Allows for transparency, interlacing, and animation; Allows a maximum of 256 colors (8-bit)

PNG (pronounced ping) Portable Network Graphics

.png Patent-free replacement for the gif; Compresses to smaller sizes than gif, but not as small as jpg; Compression is lossless; Supports transparency and interlacing but not animation; Not all browsers support this format as of yet

MNG Multiple-image Network Graphics

.mng An improvement on the PNG format which will support animation; Still exists as a “draft standard”

TIFF Tagged Image File Format

.tif

PCX PC Paintbrush .pcx

BMP Bitmap .bmp Saved by storing information about each pixel; Requires a large amount of storage space

AUDIO FILE FORMATS


WAV (pronounced wave) Waveform .wav Straightforward recording of sound; Often must be compressed –otherwise 1 minute of audio can take up to 1 MB of storage space

MIDI (pronounced mid-dee)

Musical Instrument Digital Interface

.mid Standard that defines how sounds are represented electronically by digital musical devices; Sounds are created from digital instructions

MP3 .mp3 Near CD-quality compressed audio that requires 4 to 5 MB of storage for 3 minutes of audio

AU .au

VIDEO FILE FORMATS


MPEG Moving Picture Experts Group

.mpg Popular video compression standard which only records key frames and then predicts what the missing frames should look like

AVI Audio Video Interleave

.avi Makes a record of one complete frame and then only records the differences in the frames that follow

DOCUMENT FILE FORMATS


PDF Portable Document Format

.pdf Requires Adobe Acrobat Reader; Displays a document exactly as it will

be printedPS PostScript .ps Adhere to the PostScript

page description language; contain information about how to format and print the file

ASCII (pronounced ask-ee)

American Standard Code for Information Interchange

.txt Plain text file which can be read with almost any text editor or word processor

OTHER FILE FORMATS


ZIP PKZIP .zip Compression routine for PC software

Some of the Languages of the Web

FORMATTING LANGUAGESACRONYM FULL NAME DESCRIPTIONHTML Hypertext Markup

LanguageBasic language for creating web pages; HyperText refers to words that can take you to other places via links; Markup refers to the fact that the document in which you create your web page with HTML is "marked up" with tags enclosed in angle brackets

XML Extensible Markup Language

A text based syntax especially designed to describe, deliver, and exchange structured data; Not meant as a replacement for HTML but as a way to extend its power; Follows four basic rules: (1) All elements must have start and end tags, (2) All elements must be nested correctly, (3) All attribute values must appear with quotation marks, (4) All empty elements must be self-identifying by ending with />; Known as a meta-language because it lets you describe the characteristics of a mark-up language

XHTML Extensible Hypertext Markup Language

Draft specification from the World Wide Web Consortium to recast HTML 4.0 as XML

PROGRAMMING LANGUAGESACRONYM FULL NAME DESCRIPTIONJAVA JAVA Object-oriented programming language that runs

over the Internet on multiple platforms; Similar to C++; Developed by Sun Microsystems in the mid 1990’s who gave it away in order to gain support for it; Not guaranteed to be supported by later versions of Internet Explorer due to problems between Microsoft and Sun; Run using applets

SQL Structured Query Language

Allows the selection of information from a database

Perl Practical Extraction and Reporting Language

The most popular language for writing CGI scripts

SCRIPTING LANGUAGESACRONYM FULL NAME DESCRIPTIONJAVAScript JAVA Script Subset of the JAVA programming language;

Compatible with most web browsersVBScript Visual Basic Script Microsoft’s adaptation of the Visual Basic

programming language for the web; Not universally compatible

CGIScript Common Gateway Interface

Used to collect data that a user has entered in an HTML form and then pass it to an application for processing; CGI programs can be written in a variety of programming languages including C++ and Visual Basic

DHTML Dynamic HTML Generic name for all innovations in scripting which allow web pages to respond to and interact with the user by changing their appearances based on user actions

STYLE LANGUAGESACRONYM FULL NAME DESCRIPTIONCSS Cascading Style

SheetsAllows complete specifications of style for HTML documents; Uses over 50 properties that affect the display of web pages; Information can be contained either within the HTML document or in a separate stylesheet

XSL Extensible Style Language

Created for use with XML documents

OTHER LANGUAGESACRONYM FULL NAME DESCRIPTIONVRML (pronounced ver-mal)

Virtual Reality Modeling Language

Defines how 3-D images display on the web; Can be used to create a VR world which contains infinite space and depth; Requires a VRML browser or plug-in

CONVERSION SOFTWAREPRODUCT NAME DESCRIPTIONMicrosoft Office (Word, Excel, PowerPoint, …)

Many office applications now convert their documents to HTML; Not quite WYSIWYG; Creates less than standard HTML code that is difficult to update and debug; May produce compatibility problems with different browsers

Lotus Freelance Graphics

AUTHORING SOFTWAREPRODUCT NAME DESCRIPTIONAdobe GoLive

WYSIWYG Editors allow someone inexperienced with HTML to layout a web page; Still must tweak the page using HTML

Adobe PageMillMicrosoft FrontPageNetObjects FusionMacromedia Dreamweaver

HTML EDITORSPRODUCT NAME DESCRIPTIONAllaire HomeSite HTML Editors include features that NotePad lacks

such as syntax checkingHot Dog Pro

Web Design Unit.doc

Documents

Transcript of Web Design Unit.doc