TEST REVIEW INFO!

WEBSITE PRODUCTION PHASES:
DEFINE:

• Interview the client to understand goals, audience, content, design, and delivery requirements.
• Organize and outline interview information to help define the site.

STRUCTURE:

• Develop and communicate structure and organization of site based on interview and content.
• Use a flowchart to organize information across site.
• Use screen views with simple shapes for buttons and graphics to show location of information on pages.
• Show how site information will flow without providing too many details about each page.

DESIGN:

• Create visual comps to present the site brand or visual expression through colors, fonts, and images.
• Leave comps rough, with room for change—enable client to participate in the design process.
• Validate design choices against client goals and target audience.
• Present at least two visual comps and describe how they meet audience, goals, style, and delivery needs.
• Incorporate client feedback, adding more content as client approves design elements.

BUILD AND TEST:

• Create production storyboards to help define content and navigation.
• Use page templates, library items, and styles to help teams build pages efficiently and with a consistent look.
• Check files in and out to coordinate work.
• Conduct a technical test to validate content, links, and graphics against production storyboards.
• Conduct a usability test to make sure the site is easy to use.
• After testing, revise the site to fix technical errors and incorporate feedback from usability testers.

LAUNCH:

• Use effective page titles to help search engines that look for content.
• Use alternative text for images to help search engines that look for images.
• Submit to topic-specific search engines to promote the site.

STORY BOARD:

• A storyboard is a scene-by-scene drawing of the sequence of action.
• Storyboards tell the story visually with enough detail for developers to know what to build.
• The anatomy of the storyboard can change by the specific usage. 
• The notes are at the bottom and indicate the audience and purpose.
• Note that the scale is indicated. 

Static – No action elements indicated. Used for a graphical design such as a logo or page banner.
Animatic – Indicating action, movement, camera angles, or the passage of time. Typically used in making movies.
Why storyboard?

• Easier and cheaper to produce and test ideas on paper before production.
• Easier to generate alternate ideas as you think of them.
• Effective tool to check that the finished product is what it should be!

Dreamweaver:
Document window: displays the current document as you create and edit it.
Insert bar contains buttons for creating and inserting objects such as images, tables, layers, and frames you might want to add to your web pages.
Property inspector: displays properties for the selected object or text and lets you modify those properties. The right side of the window, by default, displays panels you can expand or collapse as you need them.
Files panel: displays the organization of your site and lets you open files for editing, publish files to a server, or delete files.Assets panel provides two ways to view site assets. Site assets are elements used in a site, such as images, colors, or movies.
Setting up a Local Root Folder
The first thing to do when creating a new website with Dreamweaver  is to define a site and identify a root folder where you will save all files, images, and other elements for the web pages.

• 1. Create a folder on your computer to serve as the main folder for your website. Give the folder a name that identifies the website. This folder is called the local root folder.

Aim: How to define a site with DreamWeaver?

Welcome to the third and last Marking Period.!!!!!!

Defining a site

1. Start Dreamweaver CS3. The Start page will open automatically.

Use the Dreamweaver Welcome Screen to start a new website.

2. To start a new web page, choose Dreamweaver Site under the Create New heading in the Welcomejavascript:void(0) Screen. You could choose HTML, but that would be inefficient, especially if your site will have more than just a few pages.

The Site Definition dialog box appears.

The Site Definition dialog box has options for setting up your site.

Both the Site Definition Wizard (the Basic tab) and the Advanced tab in the Site Definition dialog box let you set up your site in exactly the same way. The wizard gives you a lot more information about each field and leads you step-by-step through the process. The Advanced tab lets you choose setup options from menus. All the information required to set up your site is in the Local and Remote view areas of the dialog box.

3. Select the Advanced tab and the Local Info category . In this tutorial, you'll concern yourself only with the Local Info.

The Advanced part of the Site Definition dialog box has Local and Remote setup options.

4. For the Site Name, type Aquo Site. The Site Name is a name of your choice that's like a nickname for your site. It's an internal reference and won't appear anywhere within the site itself.

5. Next to the Local Root Folder text box, click the folder icon. The Local Root folder is the most important information in the Site Definition dialog box. Selecting the folder defines your site.

6. In Windows, choose the folder of yor site without opening any subfolders, and click the Select button.

Now you've supplied Dreamweaver with the bare minimum amount of information you need to get started working on your site.

7. Click OK to close the dialog box. Dreamweaver scans the local root folder and creates an index of its subfolders, web pages, and assets; then it displays the subfolders and files in the Files panel (see Figure 4). Choose Window > Files to open the panel if it is hidden.

The files for the defined site appear in the Files panel.

8. In the Files panel, notice the site name displayed in the top pop-up menu. As you create more sites in Dreamweaver, they will appear in this menu. Other locations on your computer also appear in this list, in case you need to access files stored elsewhere.

9. Use the Files panel to do any file management for the site that you have defined in Dreamweaver. Don't move files using operating system tools: Dreamweaver cannot track changes made to your site folders if you make them outside the Dreamweaver interface.

Aim: What Language would you use to create your Site?

Now that you have experience working with HTML and Flash What do you think?

Post a Blog entry on your blog of about a paragraph or two answering the following question.

whether is it better to design a website using Flash rather than using just HTML?

Base your response on you own expirience and the Article that was handed out yesterday during class.

This is due Today by the end of the period!

AIM:How to read dreamweaver interface

Dreamweaver Interface

Document window displays the current document as you create and edit it.

Insert bar contains buttons for creating and inserting objects such as images, tables, layers, and frames you might want to add to your web pages.

Property inspector displays properties for the selected object or text and lets you modify those properties. The right side of the window, by default, displays panels you can expand or collapse as you need them.

Files panel displays the organization of your site and lets you open files for editing, publish files to a server, or delete files.

Assets panel provides two ways to view site assets. Site assets are elements used in a site, such as images, colors, or movies.

Aim: How to work with text and to animate it using Flash ?

"Text is an important part of the websites. Flash provides you a lot of the control on the text you are using in flash documents. In this tutorial, you will learn the basics of the Text in Flash. In the Adobe Flash CS3, there are three types of the text, static, dynamic and input text.

Static text is used in the Title and the Label, dynamic text is used for displaying the text that changes dynamically at the runtime and the input text are used for the user activity like getting the user name and password in the Flash form.

All these types of the text, there are multiple options like Font size, font style, colors, character width, height, maximum characters, character spacing, justification, drop shadow, blur, glow and drop shadow etc. In fact, Flash allows you to produce multiple text effects that are not possible with the HTML and CSS."

 you use ADOBE Help to understand the language of Flash you'll find this definition there:

The Timeline organizes and controls a document’s content over time in layers and frames. Like films, Flash documents divide lengths of time into frames. Layers are like multiple film strips stacked on top of one another, each containing a different image that appears on the Stage. The major components of the Timeline are layers, frames, and the playhead.

Layers in a document are listed in a column on the left side of the Timeline. Frames contained in each layer appear in a row to the right of the layer name. The Timeline header at the top of the Timeline indicates frame numbers. The playhead indicates the current frame displayed on the Stage. As a document plays, the playhead moves from left to right through the Timeline.

The Timeline status displayed at the bottom of the Timeline indicates the selected frame number, the current frame rate, and the elapsed time to the current frame.

The playhead moves through the timeline as a document plays to indicate the current frame displayed on the Stage. The Timeline header shows the frame numbers of the animation. To display a frame on the Stage, move the playhead to the frame in the Timeline.

Web Design Study Guide!!!

How to convert an embedded .SWF Button to a hyperlink?

Here is the code needed to make Flash SWF file hyperlink and embed into your HTML code!

Use it to make all your buttons in your site link within your site!

Aim : How to Embed Flash into a HTML code?

When you visit W3Schools.com You´ll find this tutorial on how to add Flash to a HTML site.

Flash Embedded in HTML

After creating a Flash movie you choose File > Save As from the top menu to save your movie. Save the file as "Somefilename.fla".

To embed the Flash movie you just made into an HTML page, you should go back to your Flash program and do the following steps:

Step 1

Choose File > Open. Open a Flash movie you have created.

Step 2

Choose File > Export Movie.

Step 3

Name the file "somefilename.swf". Choose the location where the file is to be stored (in your Web folder). Click OK.

Step 4

Open the HTML page where you want to insert your Flash movie. Insert this code:

(<)object width="550" height="400"(>)

(<)param name="movie" value="somefilename.swf"(>)

(<)embed src="somefilename.swf" width="550" height="400"(>)

(<)/embed(>)

(<)/object(>)

Note: This is the minimum code you need to embed a Flash movie in a browser. A broken icon will appear on the Web page if the user does not have the Flash plug-in installed.

Note: In the code above there is both an  tag and an (<)object(>) tag. This is because the

AIM: What is a Symbol?

A symbol is a graphic, button, or movie clip that you create once in the Flash authoring environment or by using the Button (AS 2.0), SimpleButton (AS 3.0), and MovieClip classes. You can then reuse the symbol throughout your document or in other documents.

A symbol can include artwork that you import from another application. Any symbol that you create automatically becomes part of the library for the current document.

An instance is a copy of a symbol located on the Stage or nested inside another symbol. An instance can be different from its symbol in color, size, and function. Editing the symbol updates all of its instances, but applying effects to an instance of a symbol updates only that instance.

HOMEWORK:

List all types of Flash Symbols

aim: How to upload your files to an FTP server?

FTP stands for File TRansfer protocol. In class you are learning to use COREFTP.
This is open source software that you can download for free at http://www.coreftp.com/
Once you download it you can use the following configuration settings.

Manual Settings

FTP Username: studentsites
FTP Server: ftp.techteach.us

PassWord: 123456
FTP Server Port: 21
SFTP Server Port: 22


1) Create a New Folder . 
2)Name it Period#NameLastname
3)Place all you web-design work in this folder.
4)Upload it to my FTP server.

Project #2 Support a Good Cause by creating Website!

It is time that you create a file directory tree for your project #2

Name the main folder as PR2NameLastnamePeriod#
Create all the subfolders  you planned  inside.
Make sure the folders are name in lower case, short, simple and self explanatory filenames.

Aim: How to Embed Flash movies in HTML code?

In order to insert flash into your HTML files you must use the HTML tag object, which is used to place multimedia items like music, movies, and now Flash files onto web pages. We will assume that the name of your flash file is "example.swf" for this lesson, but you should rename it to the actual name of your flash file.

The object tag contains many attributes to modify the way the multimedia is displayed and to describe the type of media to be displayed.

Below is the cookie cutter HTML code you can use to insert a flash file into any HTML page, assuming that both this HTML file and Flash file are in the same directory.

Note: The only pieces you need to change are value and src, which specifies the name and location of your Flash file and height and width, which specify the dimensions of your Flash file.

information taken from tizag.com

Aim: How to Export Quicktime files from Flash?

Not all Browsers can display .fla or swf. Therefore it is very important to be able to export your animation to a movie file.

As demonstrated in class. You are to publish your banner animation to your blog.

1.- Export your . fla file to a .mov file (Customer's Animation)

2.- Publish a blog post with the >mov file

3.- Use this posting to complete your definition stage of the project. Write a paragraph or two base on you interview with your client

4.- Title the Post My First Client's Website Proposal.

If you have any questions write a comment to this Posting! Who know more than one of you may have the same question but is afraid to ask it.

Aim: How to use the New Flash Adobe CS3 Workspace

Home / Design Center / Tutorials

Using the workspace

Chris Georgenes

This tutorial shows you the main parts of the Flash interface, including how to set up the workspace, work with the Stage, and create and open documents. This tutorial also shows you how to work with the edit bar and the library.

Requirements

To follow along with this article, you will need the following software:

Flash CS3 Professional
Watch this tutorial in the Adobe Creative Suite 3 Video Workshop.

Understanding the Flash workspace

In Flash, choose File > New to open a new Flash document. Click OK to accept the default document type, Flash File (ActionScript 3.0).

Notice the panels in the new CS3 interface. You'll see many improvements here, especially in the way the panels are docked. Look at the Tools panel, for example, which is now one vertical row of tools (see Figure 1). You can switch to a double row of tools by clicking the double-arrow button at the top of the Tools panel.



Figure 1: The Tools panel appears as a single row.
Notice the panels on the right side of the workspace, as in previous versions, but now in a single dock. They also respond interactively. Closing one panel automatically expands another to take its place.

Click the new Collapse to Icons button at the top right of the dock. Clicking this button reduces the panel to a series of icons, with the name of the panel listed to the right (see Figure 2). When the panels are collapsed to icons, you can still open them easily by clicking the panel button.



Figure 2: Panels in the dock appear as icons in Icon view.
Click the Color panel button. This opens the Color panel, along with the other panels in the group, including the Swatches panel. Click the button again to close the panel group.
Drag the handle in the upper left corner of the dock (it turns into a double-arrow pointer when you press the mouse button) to the left or right, to widen or narrow the panel, respectively whether the dock is collapsed or expanded.
Still in Icon view, drag the handle to the right to collapse the dock so that just the icons show, not the labels. This creates a single vertical row of icons, similar to the Tools panel, and really maximizes the screen real estate.
To return to the default workspace, click the Workspace pop-up menu just above the Stage and choose Default.

You can also create custom workspace layouts, based on your particular workflow and the tasks at hand. For example, you could have one workspace for simple design projects and one for animation. To create a custom workspace, you use the Window menu to select the panels you will need for your type of project.

Choose Window > Info to open the Info panel. Then choose Window > Align to open the Align panel. These panels open in the right dock by default.
Now choose Window > Movie Explorer. This panel opens as a floating panel, separate from a dock.
Drag the Movie Explorer panel to the Property inspector below the Stage. You can also drag it to the right dock.
To save this custom workspace, choose Window > Workspace > Save Current. In the Save Current Workspace dialog box, type my workspace at the prompt to name your workspace, and click OK.
To open your custom workspace, choose my workspace from the Workspace pop-up menu above the Stage. You can create as many custom workspaces as you like.

On the Timeline, notice some small changes from previous Flash releases. The trash can icon for Delete Layer now is grouped with the other icons, moved from the right side of the toolbar (see Figure 3).



Figure 3: In the Timeline, drag the handle to widen or narrow the layers list. In CS3, the trash can icon now is on the left.
In CS3, the new location of the trash can icon makes room for the new grab handle that lets you resize the layers list horizontally.

Drag the handle (to the right of the layer tool icons, indicated by the two vertical lines) to the right or left to widen or narrow the list.
To resize the Timeline vertically, use the same method as in previous Flash releases: drag the bottom border of the Timeline down or up. In CS3, you can also grab the edit bar and move it up or down to expand or shrink the Timeline.
In the upper right corner of the Timeline, click the icon to display the Frame View pop-up menu, and choose Short to compress the height of the Timeline layers. Use this menu to change the appearance of the Timeline (see Figure 4).



Figure 4: Compress the layer height by choosing Short from the Frame View pop-up menu.
To change the size of the frames, click the icon in the upper right corner of the Timeline again, and choose Large from the Frame View pop-up menu. This widens the individual frames within the Timeline (see Figure 5).



Figure 5: Frames can be made smaller or larger using the sizing options (Tiny to Large) in the Frame View pop-up menu.
To modify the Stage, click directly on it. Notice that the Property inspector updates to include information about the Stage.
In the Property inspector, click the Document Properties button (labeled with the document dimensions) to open the Document Properties dialog box (see Figure 6). You use this dialog box to set a document's new width and height, change the background color, adjust the frame rate, and set other properties.



Figure 6: Use the Document Properties dialog box to change the dimensions, background color, and frame rate.
Type 800 for the width and 600 for the height. Click the Background color box and choose a turquoise color.
To change the default frame rate of 12 fps (frames per second), type 24 and click OK.

Another nice feature of Flash CS3 Professional is that you can have multiple documents open at the same time. They appear as tabbed panels at the top of the Document window. First, you'll need to create some content to navigate through.

Choose File > New to create a new document. Click OK to accept the default document type. Flash opens the second document.
Simply click the tab of the first document to return to it.
Choose the Rectangle tool in the Tools panel, and draw a rectangle on the Stage.
Choose the Selection tool in the Tools panel, and select the rectangle.
Choose Modify > Convert to Symbol. This opens the Convert to Symbol dialog box. Click OK to accept the default values.
Now double-click the symbol to enter symbol-editing mode. Notice that the edit bar updates to reflect where you are in relationship to the main Timeline and the Stage (see Figure 7).



Figure 7: When editing a symbol, return to the main Stage by clicking Scene 1 above the Document window.
Select this symbol and choose Modify > Convert to Symbol again. Click OK to accept the default values in the Convert To Symbol dialog box.
Double-click Symbol 1 to switch to symbol-editing mode for the new symbol. Notice the edit bar has updated again.
Now, to navigate around your Flash document, click the individual items in the edit bar, which act as a breadcrumb trail back to the Stage.
To return to the main Timeline, click Scene 1 or double-click outside the symbol on the Stage area. You can also click the Back arrow button on the left side of the edit bar to move back one level.

The edit bar offers a very convenient way to navigate around your Flash documents which, as many users know, can end up being very complex.

Where to go from here

For more information and additional tutorials, visit the Adobe Design Center.

Aim: How to learn Flash at your own pace?

Today's lesson is how to learn Flash at you own pace.
If you google Flash tutorials you'll find many site for independent learning!!

I really like this one WWW.ENTHEOSWEB.COM

Please visit and check out all of them.
Which tutorial topics have we learn already?
Which one would you like to learn specially for your own website?

As a natural progression we'll start with ActionScripts. Therefore I want you to follow the tutorial on Linking to External Files

Homework: What is an ActionScript?

Aim: How to use Adobe CS3 Flash tool bar?

It is time to put our skill into action. ActionScript 3.0 that is.....

As per the explanation in class:

1.- Open a new Flash file. ActionScript 3.0
2.- Create two layer.
3.- Rename Layer one as DOT
4.- Use the brush tool to draw a dot on the first frame.
5.- Insert KeyFrame on frame 25.
6.- Move the position of the dot from one corner to another.
7.- Place Your mouse anywhere between the two keyframes and insert Motion Tween!
8.- Rename Layer Two as Square.
9.- Draw a Black Square on frame
10.- Insert KeyFrame on frame 25.
11.- Change the color of the square to a pale shade.
12.- Place Your mouse anywhere between the two keyframes and insert Shape Tween!

Save the file as: LB5NameLastnamePeriod#.fla
Send it to the teacher as an email attachment subject: LB5NameLastnamePeriod#.fla

Aim: What is Flash?

We really had fun with fireworks! Now we need to get into the world of Flash.
Although both are Adobe products they do have some similarities but two major different purposes.

Flash is a comprehensive application use to engage customers with a variety of video, graphics and animations.

We could use Flash to create single components of our websites or take to a higher level and use ActionScript to build the whole site in flash never getting involved with DreamWeaver or HTML language.


CLASS WORK:
Draw the default work space of Flash:
Write your name and date on the to of the page and submitted to the teacher.

Aim: How to link to a higher or lower directory?

Today we´ll be troubleshooting your pages to see that they are link within each-other and to home page as well?

Remember in order to link from Home to the movie page you must insert this code into you html file:

´<´a href="/FolderName/FileName.Extension">A message to the user like: click here to go to movie1<´/a>

in order to link up to a higher directory you must use:
´<´a href="../FileName.Extension">A message to the user like: click here to go to movie1<´/a>


in order to link up to a two times higher directory you must use:
´<´a href="../../FileName.Extension">A message to the user like: click here to go to movie1<´/a>

Your home pace code should be something in the lines of this:

Aim: How to link pages in the same directory?

Basic HTML with banner

Do Now : Banner of My favorite Movie Website! 10/05/09

Post your Banner on your blog and write one or two paragraph answering the following questions. 
a._What were your initial goals for the page banner?
b._What design concepts and principles did you incorporate into the page banner? 
c._How was each design concept intended to contribute to communicating the purpose of the page banner? 
d._Do you have new goals in mind for the page banner? If so, what are they and why?

Aim: How to build a Site Banner?

The purpose of a page banner is to establish a consistent identity on all pages so viewers know they are on a page of your website and recognize what the website is about. Create a page banner:

1._Start Adobe Fireworks CS3. 2._ Create a new file with dimensions at least 400 pixels wide and 100 pixels high. (Match your banner width to the pixel width of the web page you’re designing.) 3._ Turn on Guides and turn on Rulers from the View menu so you can align banner elements easily. 4._ Use the Rectangle tool or the Ellipse tool to create a background shape (such as a rectangle or oval) for the page banner. 5._ Add effects to the background shape. 6._Add text to the banner. 7._ Add effects to the text, as you desire . 8._ Add images to your banner, as you desire.

The illustrations to the right show the effects used in the Property inspectors for the text and the background ellipse in the sample banner.

9._Save the file as "LB4NameLastnameP6". 10._Post your Banner on your blog and write one or two paragraph answering the following questions. a._What were your initial goals for the page banner? b._What design concepts and principles did you incorporate into the page banner? c._How was each design concept intended to contribute to communicating the purpose of the page banner? d._Do you have new goals in mind for the page banner? If so, what are they and why?

Aim: How to Diagram of your Website?

THE DESIGN OF THE SITE will determine its organizational framework. At this stage you will make the tactical design decisions about what your audience wants from you, what you wish to say, and how to arrange the content to best meet your audience's needs. Although people will notice the graphic design of your Web pages right away, the overall organization of the site will have the greatest impact on their experience.
Draw a diagram of your main page and a flow chart of your site.
Ex:

www.mitchrossow.com/images/web-design.jpg

746 x 350 - 126k

Image may be scaled down and subject to copyright.

www.tri-cominc.com/images/wdcorporated.jpg

450 x 312 - 22k

Image may be scaled down and subject to copyright

Aim: How to build a nameplate?

To produce quality images for the web we can use Adobe Fireworks CS3 is an image-editing program designed to create images, effects, and optimization especially for web pages.

Follow the instructions of this Lab #3 to create your own nameplate. We’ll be adding some special effects tomorrow.

Lab #3

To build a nameplate, you create a shape, add text, and then add effects to the shape and the text. You create the design by adding various effects and colors to the fill, stroke, and text.
Build a nameplate
1. Start Adobe Fireworks CS3, open a new document, and specify canvas dimensions (at least 400 pixels wide and 200 pixels high).
2. Save the file as “LB3NameLastnameP#”
3. Create a background for your nameplate by using the Rectangle tool in the Tools panel. Leave some white space on the canvas around the rectangle to add effects later.
The rectangle has small blue squares in the corner when you select it.
4. Change the color of the stroke (outline) or the fill (inside) of the rectangle by using the Stroke Color box and the Fill Color box in the Property inspector (or the Tools panel).
5. To add your name to the rectangle, select the Text tool in the Tools panel; then click and drag to draw a text box over the rectangle you just created. In the Property inspector, select the font, size, color, and style you want.
Type your name.
(The example in Figure 1 uses Chiller, 74 pt, Red, and italic.)
6. To move your name around the rectangle, select the Pointer tool in the Tools panel, select the text object, and drag it to the desired position.
7. To customize the look of the nameplate, select the rectangle or text; then click the Add Live Filters button in the Property inspector, select a filter, and select your settings.
You can also change the type of fill and stroke.
The illustrated nameplate uses a Solid fill pattern and no stroke, with a feathered edge and Olistic texture for the rectangle (Figure 2). The text on the nameplate uses the noise effect (Figure 3).
8. After you complete all the desired effects, select Modify > Canvas > Trim Canvas from the main menu. This action removes any excess white space around the image.
9. Save the nameplate.
10. Post your Name Plate on your Blog with a small narrative (1 paragraph) explaining what are you trying to tell your clients with this NamePlate.

Aim: Why do we create a Working Portfolio?

Nowadays if you want to be hire by a respectable company you must have some proof of your work.
For your Web Design Class you´ll create a Digital portfolio of every Web page, site or banner you create in class.
Technology is great  but sometimes it can fail us. therefore you will print a copy of your work and place it as well on your portfolio folders.

Let´s start with your lab#1
1) Create a new Post on your blog.
2) Now that you have been in class for 2 weeks.
     Write a paragraph or two answering the following:
.       a) What do you expect to learn from Web Design?
.       b) What do you expect from your peers in class?
.       c) What do you expect from your teacher?
.       d) What are your 3 main goals for Web Design?
.       e) And How are you planning to achieve those goals?
3) Open LB2 in a explorer window!
4) Use Print Screen to copy what you see on the monitor!
5) Save it as .jpg and add it to your post.
6) Publish it
7) Finally print a copy of your posting showing your name and date and place it on your folder!

Aim: How to complete Lab 2?

Here is the HTML code for Lab # 2

Save it as LB2NameLastNameP#.html

Remember to save the file and the picture in the same folder.....

Compress the folder with WinZip and send it via email.

Aim: How to start HTML codding for your first site?

HTML pages should always include the following. You may want to copy & paste this into a new text file...(remove the Quotation marks)

index.html v1

<"html">

<"head">

<"title">Page title<"/title">

<"/head">

<"body">

Your visible content goes here...

<"/body">

<"html">

Notice how everything is contained between <"html"> and <"/html'> tags.

This is an example of a paired tag, which need a starting tag and a matching closing tag (indicated with the forward-slash). Paired tags describe the content between them. In the case of the tag, it's telling a web browser that everything between the 2 tags is HTML.

Within the HTML, there are 2 main part of every HTML page: the head section and the body section, marked up with the paired tags <"head"><"/head"> and <"body"><"/body">.

Aim: How to make a web site?

Every other week, a student, teacher, or friend asks me: "OK, but how do I actually make web pages and publish them as a site?" Like is something that I could answer in a 1,2,3. And for THE most fanatic web designer it is, but for those who ask me, they want to hear a magic trick, a secret that would make them one more in the world of the Web. To you my dedicated and committed students I answer: "Hard work, long hours of planning, and trial and error in a wide variety of software...." This week: The Basics of Making a Web Page * How to create HTML pages using a text editor: The bare bones of HTML page structure * How to save pages * How to link pages together * How to upload your pages to a live web server Web pages are a written language called HTML. This provides the content and structure of the pages. It also says where images and other stuff should be. The good news is that HTML is fairly easy to learn. You must learn the TAGs: Homework: DUE MONDAY 09/18/09 write on you notebook:

find the function "definition" of : * !--...-- * !doctype * a * abbr * acronym * address * applet * area * b * base * basefont * bdo * big * blockquote * body * br * button * caption * center * cite * code * col * colgroup * dd * del * dfn * dir * div * dl * dt * em * fieldset * font * form * frame * frameset * h1 * h2 * h3 * h4 * h5 * h6 * head * hr * html * i * iframe * img * input * ins * isindex * kbd * label * legend * li * link * map * menu * meta * noframes * noscript * object * ol * optgroup * option * p * param * pre * q * s * samp * script * select * small * span * strike * strong * style * sub * sup * table * tbody * td * textarea * tfoot * th * thead * title * tr * tt * u * ul * var

AIm: What is Copyright?

It is the legal right granted to an author, composer, playwright, publisher, or distributor to exclusive publication, production, sale, or distribution of a literary, musical, dramatic, or artistic work.

Visit http://www.copyright.gov/
Read more about it.

Homework due on 09/18/09:

Write the answer on your notebook!

What is URL?
What are its parts?

Aim: What is W3C?

WWW stands for the World Wide Web. The World Wide Web is most often called the Web
The Web uses the computer networks to communicate following a standard called HTTP.

Web information is called Web pages, which are files stored on computers called Web servers. People, called Web clients, use a program called a Web browser to visit this web pages.
All Web pages contain instructions on how to be displayed. the most common display instructions are called HTML tags

W3C Stands for the World Wide Web Consortium
W3C was created in October 1994
W3C was created by Tim Berners-Lee
W3C was created by the Inventor of the Web
W3C is organized as a Member Organization
W3C is working to Standardize the Web
W3C creates and maintains WWW Standards
W3C Standards are called W3C Recommendations




HOMEWORK due on 9/17/2009

Read materials from http://www.w3schools.com/w3c/w3c_intro.asp

Write a paragraph in your notebook answering the following:
What is Copyright?
To be checked at the beginning of the Class!

Internet Vs. The Web

The terms Internet and World Wide Web (aka. the Web) are not the same thing.

The Internet is the huge network of networks. It connects all computers to each other around the world.

The World Wide Web, or simply Web, is a way of accessing or sharing information over the medium of the Internet. The Web uses the HTTP protocol,to transmit data. The Web uses browsers, such as Internet Explorer or Firefox, to access Web documents called Web pages that are linked to each other via hyperlinks.

In this class your are going to learn how to write those Web documents.

Let get down to business!!! Aim: How to follow mrs. Ramirez blog!

OK Ladies and Gents:
Let start with YOUR blogs...
Please check that you have the followers gadget and that I am following your blog and the other way around as well!!!!
Please be sure you are taking all the necessary precautions to protect yourself on the web...
Do not publish your email address, your age or gender!!!
Do not give your address or phone number or the address of ITHS!!
Do allow comments and show them but check the always in your comment moderation at the settings Tab!

Remember you already responsible for posting your expectations for this class.
Homework: Read about WWW to discuss it in class !!!

Aim: How to learn Flash at your own pace?

Today's lesson is how to learn Flash at you own pace.
If you google Flash tutorials you'll find many site for independent learning!!

I really like this one WWW.ENTHEOSWEB.COM

Please visit and check out all of them.
Which tutorial topics have we learn already?
Which one would you like to learn specially for your own website?

As a natural progression we'll start with ActionScripts. Therefore I want you to follow the tutorial on Linking to External Files

Homework: What is an ActionScript?