 As you complete the assignment, go in order as the earlier bulleted parts provide an easier opportunity for points than the later.  This project is.

Slides:



Advertisements
Similar presentations
Chapter 3 – Web Design Tables & Page Layout
Advertisements

WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?
KompoZer. This is what KompoZer will look like with a blank document open. As you can see, there are a lot of icons for beginning users. But don't be.
M2 – Explain the tools and techniques used in the creation of an interactive website. By Arturas Vitkovskij.
Cascading Style Sheets
UNIT 12 LO4 BE ABLE TO CREATE WEBSITES Cambridge Technicals.
Events Part III The event object. Learning Objectives By the end of this lecture, you should be able to: – Learn to use the hover() function – Work with.
Checkers: Setting the Board Checkers and chess use an 8 by 8 board. Each box on the board alternates colors with the box next to it. The designer may choose.
The Web Warrior Guide to Web Design Technologies
Basic Calendar Something that would make your web page look very nice is a basic calendar. A basic calendar shows the currents days of the month. This.
S2 – COMMUNICATIONS UNIT
1 Javascrbipt Intro Javascript (or js) is a programming language. Interpreted, not compiled. Not the same as java, but, similar. Use tags to use. Object-oriented.
JavaScript Lesson 2 TBE 540 F. Fisher. Prerequisites  Before beginning this lesson, the learner must be able to… Create and edit a web page using a text.
Information Technology Center Hany Abdelwahab Computer Specialist.
Computer Science 103 Chapter 4 Advanced JavaScript.
Macromedia Dreamweaver 4 Advanced Level Course. Add Rollovers Rollovers or mouseovers are possibly the most popular effects used in designing Web pages.
There is a certain way that an HTML file should be set up. The HTML section declares a beginning and an ending. Within the HTML, there should be a HEAD.
Basic HTML All About Me - Your Name Information for display.
Introduction to Shape Programming When we make geometric shapes with computers, we have to give specific numbers to tell the computer exactly what to do.
Purpose Tags are the key to marking up content on your HTML page. It’s the tags that mark up sections of the page and are defined (aesthetically) on the.
 JavaScript is a programming language that web browsers understand. You can use it to make your web pages interactive by: Responding to user actions and.
Designing Web Pages Getting to know HTML... What is HTML? Hyper Text Markup Language HTML is the major language of the Internet’s World Wide Web. Web.
Basic HTML The Magic Of Web Pages. Create an HTML folder  Make a folder in your H drive and name it “HTML”. We will save EVERYTHING for this unit here.
1 Events Lect 8. 2 Event-driven Pages one popular feature of the Web is its interactive nature e.g., you click on buttons to make windows appear e.g.,
JQuery Page Slider. Our goal is to get to the functionality of the Panic Coda web site.Panic Coda web site.
© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 1 Macromedia Dreamweaver 4 Advanced Level Course.
Website Research By Sophie Hiscock. Fan Marvel Website You know this website is Marvel because of the characters from the comics are in the body, which.
Web Technologies Website Development Trade & Industrial Education
Pre-Coding Web Design – Sec 3-1 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials.
Event Handlers CS101 Introduction to Computing. Learning Goals Learn about event handlers Determine how events are useful in JavaScript Discover where.
Chapter 2 Developing a Web Page. A web page is composed of two distinct sections: –The head content –The body Creating Head Content and Setting Page Properties.
Locally Edited Animations We will need 3 files to help get us started at
10 Adding Interactivity to a Web Site Section 10.1 Define scripting Summarize interactivity design guidelines Identify scripting languages Compare common.
1 Essential HTML coding By Fadi Safieddine (Week 2)
Tori’s CSE 3 Poster Computational Thinking: Throughout the beginning of our course, we learned as a class so much about computers, along with learning.
Just A Few More Fun Objectives 1 Having Some Fun With Java Script 2 Using Style Sheets.
Essentials of HTML Class 4 Instructor: Jeanne Hart
Extending HTML CPSC 120 Principles of Computer Science April 9, 2012.
 Remember that HTML is just text  Need to point to pictures  Use the img tag  alt: › screen reader › REQUIRED for this class and to validate.
Homework #4 HTML Web Assignment II ©2001 E. Kinnear.
HTML: Hyptertext Markup Language Doman’s Sections.
 HTML is hypertext markup language. It is a way for people to display their information with more complex pictures and text displays. Before HTML, messages.
LEARNING HTML PowerPoint #1 Cyrus Saadat, Webmaster.
Sahar Mosleh California State University San MarcosPage 1 JavaScript Basic.
AJAX 10 Most Common Mistakes. 1. Not giving immediate visual cues for clicking widgets. If something I'm clicking on is triggering Ajax actions, you have.
Introduction to JavaScript Objects, Properties, Methods.
INTRODUCTORY Tutorial 5 Using CSS for Layout and Printing.
Website design and structure. A Website is a collection of webpages that are linked together. Webpages contain text, graphics, sound and video clips.
JavaScript Challenges Answers for challenges
HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.
So – You want to learn how to put an article onto the state website. (Note: If you have not done so, you will need to review the web training provided.
Chapter 11 Adding Media and Interactivity. Chapter 11 Lessons Introduction 1.Add and modify Flash objects 2.Add rollover images 3.Add behaviors 4.Add.
Creating and Editing a Web Page
Review of HTML and CSS A (very) brief review of some key fundamentals to be aware of in IT-238.
Positioning Objects with CSS and Tables
HTML HTML stands for Hyper Text Markup Language. HTML is used in making the base of a Website You can just use an online website maker like weebly.com.
Creating Web Pages with Links, Images, and Embedded Style Sheets
Web Programming Java Script-Introduction. What is Javascript? JavaScript is a scripting language using for the Web. JavaScript is a programming language.
JavaScript Part 1 Introduction to scripting The ‘alert’ function.
MIS 3200 – C# (C Sharp)
Introduction to.
Online PD Basic HTML The Magic Of Web Pages
Using DHTML to Enhance Web Pages
Uppingham Community College
Microsoft® Office FrontPage® 2003 Training
Key concepts of Computing
Javascript Game Assessment
Teaching slides Chapter 6.
Web Programming and Design
Presentation transcript:

 As you complete the assignment, go in order as the earlier bulleted parts provide an easier opportunity for points than the later.  This project is your final. You may not assist peers or gain assistance from peers.  Each part of the project must be both functional AND aesthetically pleasing.  Students should complete the rubric and use any remaining time to add to the overall function and/or aesthetics of the page. Some students will score over 100 this way and have the bonus go towards other projects. However, DO THE RUBRIC FIRST  Describe each unit for the second half of this course (5 units not including this one) with a paragraph describing what you have learned with at least 6 sentences in appropriate format. (30 points)  Decorate each of the 5 paragraphs with one or more pictures to improve the writing by showing something that relates. (15 points)

Rubric Part 2 Incorporate some part of the work into the scrolling paragraph (15 points) Add links to each of the 12 projects complete for this course (note, you may have already created earlier projects and may use that code here). (10 points) Write a paragraph on the bottom of the page describing what part of the class you liked most and why. (5 points) Create some buttons that change the background color with the mouseover command. (5 points) Incorporate the moving picture script so that it moves a picture that helps define one of your projects and is able to move to the right (10 points) Expand the moving picture program to be able to move in 4 directions, up, down, left and right at an aesthetically pleasing rate. (10 points)

Do What You Want To Do With Java If you want to do something with Javascript, chances are something similar has been done already. Go to a search engine and see what is available. If you want to make a paragraph that scrolls through a box, look it up as “javascript scrolling paragraph”. That way the language is identified and you don’t have to start from the beginning.

var pos=100; function Scroll() { if (!document.getElementById) return; obj=document.getElementById("thetext"); pos -=1; if (pos < 0-obj.offsetHeight+130) return; obj.style.top=pos; window.setTimeout("Scroll();",30);} <div id="thewindow" style="position:relative;width:180;height:150; overflow:hidden; border-width:2px; border-style:solid; border-color:red"> This is the first paragraph of the scrolling message. The message is created with ordinary HTML. Entries within the scrolling area can use any HTML tags. [ Start Over ]

Review Rubric Part 1 Rubric Part 2 Do What You Want To Do With Java Scrolling Paragraph

User Navigated Animation A lot of great games and web pages enable a user to press buttons to move things around. Most games are a set of complex interactions between pictures. If a programmer is able to create pictures that the end user can move in a pleasing way, the game will be popular. Although the final product will be complex, new programmers can learn by breaking each step down into smaller parts.

 In today’s program there are two functions starting with the init() function. This stands for initialization. It enables the program to start by setting up variables. First, it establishes a name for the picture that can be referred to. Then, it establishes a position that can be changed. It starts with a position of 0 using an X and Y coordinate system.  If using them both, be sure to call the start of both programs:   Be sure to delete window.onload =init;

function moveRight() After the program sets up initial variables, the moveRight() function will take over to move the image to the right. To make the picture move right, it increases the X value by 10 pixels. To make the picture move “faster” a student could make the number 10 into a larger value. To make an image move left, add a negative number. To move the image up and down, change the text that says ‘px’ to ‘py’ and the Y position will move.

var imgObj = null; function init(){ imgObj = document.getElementById('myImage'); imgObj.style.position= 'relative'; imgObj.style.left = '0px'; } function moveRight(){ imgObj.style.left = parseInt(imgObj.style.left) 'px';} window.onload =init; Click button below to move the image to right

Review User Navigated Animation Function init() Function moveright() Code Example

Coding Style There are some things that work when writing JavaScript that are not a good idea. For example, we can place all JavaScript functions in the head section of the code. If we started and stopped the script in several locations, it would be much harder to modify and understand later on. When we create an HTML document, we make one head and one body. The browser could read multiple body’s and heads, but the programmer would get confused when making changes.

onMouseOver In the past we have used buttons that utilized the onClick function. The programmer can also do work when a user has the mouse just pass over an area. Use the onMouseOver in place of the onClick code. If set up correctly, a web page can shuffle through changes at a much faster rate because a user can move the mouse past several objects in the time it takes to click.

Buttons In the last unit we used buttons. The code on the next slide shows how to use the onMouseOver command for a link. Use the following example and the example code on the next page to create as many buttons as you can that will change the background color onMouseOver.

C HANGE B ACKGROUND WITH M OUSEOVER function changeBGC(color){ document.bgColor = color; } Mouseov er Blue

 Coding Style  onMouseOver  Buttons  Change Background With Mouse Over

 In our web pages we have made use of functions in the section of the HTML document. The functions we have created are in a language called JavaScript. JavaScript is based on a very popular called C. As we learn and grow with JavaScript, we can keep our collection of functions to add to any other web pages that we create in the future. By using functions, anyone can make a web page into a masterpiece!

Making Functions Work for Us Functions don’t do anything when they sit there. At their basic definition, a function is a set of directions. We have to tell the computer when to follow the directions. For example, our moveRight() function was set up to only work when a person pressed a button on the web page that was initially marked “click me!” Learning to navigate the script with the precise function definition and the HTML to decide when and where to call the function enable a programmer to create excellent web pages.

Picture Moving Left In an earlier direction (slide 9) we received code that helped make a picture that would move right. Below you will find a function and a button code that, if correctly placed, will enable the picture to move left as well. function moveLeft(){ imgObj.style.left = parseInt(imgObj.style.left) 'px';}

Picture Moving Up and Down The move left and right functions referred to the left property of the picture. To change how far up and down a picture is on the screen we will focus on the top property. To help get started, place the following declaration in your init() function where the declarations for the left are. imgObj.style.top = '0px'; Extrapolate the examples of the left and right functions to make your up and down functions. Extrapolate the examples of the buttons to create up and down buttons. Be sure to set up the buttons in the correct order so the end user won’t get confused.

 What is a function  Making Functions Work For Us  Picture Moving Left  Picture Moving Up and Down

Computer Programmer A programmer, computer programmer, developer, coder, or software engineer is a person who writes computer software. The term computer programmer can refer to a specialist in one area of computer programming or to a generalist who writes code for many kinds of software. One who practices or professes a formal approach to programming may also be known as a programmer analyst. A programmer's primary computer language (C, C++, C#, Java, Lisp, Python etc.)

Web Developer A web developer is sometimes referred to as a “web programmer. It is an important and up-in-coming segment of the job market. As technology progresses, integration of computers across multiple platforms and great distances will enable a specialist to create amazing new technology. Let us make certain to never use our new found powers for eevil.

 The main college majors for this kind of work is computer science. However, any career will benefit from a background of advanced communication systems so nearly all majors have available electives with programming in HTML and/or Java. Even if you are not a programmer, chances are there will be one with your company and you will want to know what is going on.

Careers The department of labor predicts massive needs for computer savvy students in the future. No one knows exactly what demands will bring. Having a competitive edge will set students in a desirable position for the job marketplace. It isn’t easy and it will take a lot of work. Those who work hard will discover success.

Review Computer Programmer Web Design Continuing Education Careers