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!