Unit 2 Web Mastering TEKS

Watch for ICONS

Introductory Level of the following:

Through the study of technology applications foundations, including technology-related terms, concepts, and data input strategies, students learn to make informed decisions about technologies and their applications. The efficient acquisition of information includes the identification of task requirements; the plan for using search strategies; and the use of technology to access, analyze, and evaluate the acquired information. By using technology as a tool that supports the work of individuals and groups in solving problems, students will select the technology appropriate for the task, synthesize knowledge, create a solution, and evaluate the results. Students communicate information in different formats and to diverse audiences. A variety of technologies will be used. Students will analyze and evaluate the results.

(c)  Knowledge and skills.

(1)  Foundations. The student demonstrates knowledge and appropriate use of hardware components, software programs, and their connections. The student is expected to:

(A)  demonstrate knowledge and appropriate use of operating systems, software applications, and communication and networking components;

(B)  compare, contrast, and use appropriately the various input, processing, output, and primary/secondary storage devices;

(C)  make decisions regarding the selection, acquisition, and use of software taking under consideration its quality, appropriateness, effectiveness, and efficiency;

(D)  delineate and make necessary adjustments regarding compatibility issues including, but not limited to, digital file formats and cross platform connectivity;

(E)  use vocabulary related to web mastering and delineate between the Internet and an intranet;

(G)  summarize the development of Internet protocols including, but not limited to, hypertext transfer protocol (http), gopher, file transfer protocol (ftp), telnet, and wide area information system (wais).

(3)  Foundations. The student complies with the laws and examines the issues regarding the use of technology in society. The student is expected to:

(A)  discuss copyright laws/issues and model ethical acquisition and use of digital information, citing sources using established methods;

(B)  demonstrate proper etiquette and knowledge of acceptable use policies when using networks, especially resources on the Internet and intranet; and

(C)  analyze the impact of the WWW on society through research, interviews, and personal observation.

(4)  Information acquisition. The student uses a variety of strategies to acquire information from electronic resources, with appropriate supervision. The student is expected to:

(B)  construct appropriate search strategies in the acquisition of information from the Internet including keyword and Boolean search strategies; and

(C)  obtain Uniform Resource Locators (URLs) and distinguish among the protocols including hypertext transfer protocol (http), gopher, file transfer protocol (ftp), telnet, and wide area information system (wais).

(5)  Information acquisition. The student acquires electronic information in a variety of formats, with appropriate supervision. The student is expected to:

(A)  acquire information in electronic formats including text, audio, video, and graphics, citing the source; and

(B)  identify, create, and use available file formats including text, image, video (analog and digital), and audio files.

(7)  Solving problems. The student uses appropriate computer-based productivity tools to create and modify solutions to problems. The student is expected to:

(A)  use technology tools to create a knowledge base with a broad perspective;

(B)  select and integrate appropriate productivity tools including, but not limited to, word processor, database, spreadsheet, telecommunication, draw, paint, and utility programs into the creation of WWW documents;

(C)  use foundation and enrichment curricular content in the creation of WWW pages;

(D)  create WWW pages using specific authoring tools such as text-based editing programs or graphical-based editing programs;

(E)  read, use, and develop technical documentation;

(F)  create and edit WWW documents using established design principles including consistency, repetition, alignment, proximity, ratio of text to white space, image file size, color use, font size, type, and style;

(8)  Solving problems. The student uses research skills and electronic communication, with appropriate supervision, to create new knowledge. The student is expected to:

(A)  demonstrate proficiency in, appropriate use of, and navigation of LANs, WANs, the Internet, and intranet for research and for sharing of resources;

(B)  extend teaching and learning in the local environment to the worldwide community through the creation and sharing of WWW documents;

(C)  synthesize and generate new information from data gathered from electronic and telecommunications resources;

(D)  create and format WWW documents containing bookmarks of on-line resources and share them electronically;

(E)  demonstrate the use of WWW pages, collaborative software, and productivity tools to create products;

(F)  participate with electronic communities as a learner, initiator, contributor, and teacher/mentor; and

(G)  participate in relevant, meaningful activities in the larger community and society to create electronic projects.

(9)  Solving problems. The student uses technology applications to facilitate evaluation of work, both process and product. The student is expected to:

(A)  design and implement procedures to track trends, set timelines, and review/evaluate progress for continual improvement in process and product;

(B)  seek and respond to advice from peers and professionals in delineating technological tasks;

(C)  create technology specifications for tasks and evaluation rubrics; and

(D)  resolve information conflicts and validate information through accessing, researching, and comparing data.

(10)  Communication. The student formats digital information for appropriate and effective communication. The student is expected to:

(A)  use hypertext linking appropriately when creating WWW pages;

(B)  develop interactivity for the web server via scripting additions such as Common Gateway Interface (CGI), Java Script, or JAVA; and

(C)  demonstrate the ability to conduct secure transactions from the web server to the client.

(11)  Communication. The student delivers the product electronically in a variety of media, with appropriate supervision. The student is expected to:

(A)  synthesize and publish information in a variety of ways including, but not limited to, printed copy, monitor display, Internet documents, and video; and

(B)  identify and use LANs, WANs, and remote resources to exchange and publish information.

(12)  Communication. The student uses technology applications to facilitate evaluation of communication, both process and product. The student is expected to:

(A)  create technology specifications for tasks and evaluation rubrics; and

(B)  seek and respond to input from peers and professionals in evaluating the product.

DAY 1

WORKING WITH IMAGES

Review: Making an Image a button

<a href="file.htm"> <img src="picture.png"> </a>

Introduction to Background images (watermarks)

Utilizing Fireworks to create a watermark image. See example: the Tiger on this page is a watermark. We will learn how to make an image more opaque so that it does not interfere with text on the page.

Save an image that you would like to use as a water mark in your project folder. Your graphic will need to become more opaque to be used as a watermark. Open the image in Fireworks.

PowerPoint

 

Assignment: Rubric Design

Day 2

Introduction to Working with Lists

Lists (bulleted or unordered) allow the Web Master to better organize information on a page. An example of a bulleted (unordered) list is the following:

A person's character includes:

An example of an ordered list is the following:

There are six pillars of character they are:

1. fairness
2. caring
3. trustworthiness
4. citizenship
5. responsibility
6. respect

Today's Goal is to learn the <DL> </DL> tags and <LH>, <DT> tags to format information on a page.

Day 3

Review of Lists

Incorporate Lists in your current project

Day 4

Introduction to TABLES

Even though page 54 states that tables are not widely used by browsers...it is NOT true. This is old information. Browsers do use tables and in fact prefer tables to any other form of organization...so pay close attention to this table lesson! For the remainder of this semester EVERY page you create will be created using TABLES.

Day 5

Introduction to GUI Interface:

The Graphical User Interface (GUI) in Dreamweaver is the Design Mode which you have already become somewhat familiar with at this point. You recognize that the Design Mode has limitations. For instance, you need to make sure you view your page in the browser before you actually see how your page will look. Design Mode was created to allow non-technical users to create Web pages. You will begin to use the Design Mode so that you can create pages faster and with more detail. You will need to remember your coding skills however, because the Design Mode is not perfect.

To Learn Tables in Dreamweaver Click on PowerPoint.

Day 6 - Day 7

More on tables:

These tables are visible for your convenience, however, on a Web page they might be invisible.

Merging cells on the left and right creates a margin. Inside the left margin (left column) you might want to place a graphic as the background of that merged cell. As the information in the table expands the graphic will automatically be repeated.

Create a simple graphic in paint and save it as a .jpg....place it in the background of the left margin and add content to your table.

Hint: make the graphic exit at the top and bottom of the canvas at the same point. Remember that these tables should be invisible when previewed in the browser.

AND you are quite right...my graphic is not as good as you can do!

Using Tables for Navigation Bars:

Regardless of where you place your navigation (at the top or bottom or both) of your page, a table helps you to create a nice looking navigation bar. Navigation Bars are additional tables used to organize your navigation menu.

Look at two kinds of navigation bars (vertical and horizontal) on these pages:

Read About Nav Bars here: http://www.shire.net/learnwebdesign/navigation.htm

Here is an example of a vertical navigation bar. Add a navigation bar to all your pages. Navigation bars are best when the table is somewhat visible.

Later we will learn how to make dynamic navigation bars in Dreamweaver.

Day 8,  Day 9, Day 10

Evaluate other High School Web sites:

Assignment

Day 11, Day 12

Planning a Web site for a Client: Global Projects versus Vanity Pages

Global Projects draw interest from across the globe and allow others to become engaged in the pages so that they feel compelled to revisit the Web site. Global Projects allow global users to add content and contribute to the global database of knowledge.

Vanity Pages draw interest only from those who are featured on the page. They may visit the page once and then not revisit.

Discussion on Web site Design, Plan, and Contract

DAY 13-Day 20

Create 4 buttons in Fireworks, 2 buttons in light blue and 2 buttons in dark blue. Label each pair as

INDEX

PICS

Step 1: Open Fireworks set image to 150 px X 50 click OK

Step 2: Click on Paint color select fill options

Step 3: Select Radial and click Edit and select Cobalt blue

Step 4: Select the rectangle tool

Step 5: Draw a rectangle the size of your image

Step 6: Add text by clicking on the Text Tool

Step 7: Place your cursor over your rectangle and click for placement and then Type the word INDEX

Step 8: Change the color of the Font to White using your Properties Window

You may change your font size and make your text bold here as well.

Step 9: Save this button to your desktop. Name it Index_up.png.

Step 10: Activate the "subselection tool" (white arrow) Then Click on the button's background. With the background selected click on the paint fill tool again change the color to silver

Step 11: Save this button as Index_down.png

Repeat these steps to creat Pics_up.png and Pics_down.png 

 Save these to your desktop you will use them in the exercise below.

Nav Bar in DreamWeaver that is Dynamic (Chapter 8)

Skim pages 91-99

On page 97 you will begin to create a NavBar.

Click on Insert, Common, and this icon to begin the NavBar Wizard.

Open two windows at the same time DreamWeaver and this tutorial:

Watch the first 5 minutes of this video and create a new navigation bar on a NEW page Save the page as Nav_bar.htm     http://www.adobe.com/devnet/dreamweaver/articles/navigation_macrochat.html 

DAY 14:

Introduction to relative and absolute links, named anchor links (bookmarks or labels), and email links

Using your Text: Web Mastering with Macromedia(R) Dreamweaver MX by James Reidel, read through pages 39-40.

STUDY FOR  6 Weeks TEST

MEANING OF ICONS