unit 3 dynamic websites with css and javascript. objectives co4 apply style to a website using css....
TRANSCRIPT
UNIT 3
DYNAM
IC W
EBS ITES W
ITH
CSS
AND
JAVASCRIP
T
OBJECTIVES CO4 Apply style to a website using
CSS.
CO5 Describe the use of scripting when
creating a website.
CO6 Create a dynamic website usingJavaScript.
2
LEARNING OUTCOMESLO12 Create a fixed-layout Web page using
CSS.LO13 Create a liquid-layout Web page
using CSS.LO14 Create a hybrid Web page using CSS.LO15 Describe server-side scripting.LO16 Describe client-side scripting.LO17 Create a JavaScript event
handler.LO18 Display random content using
JavaScript.LO19 Document JavaScript code using
comments.
3
FIXED LAYOUTSThe body of the page has a specific width.
Width is controlled by a master wrapper <div>. Specified in pixels
Determine the minimum screen resolution you want to accommodate:
800x600 was common. Now, many Web designers use 1024x768
as a minimum.
4
FIXED WIDTH - SMALLER SIZE SCREEN
5
Horizontal scrollbars
FIXED WIDTH - LARGER SIZE SCREEN
6
LIQUID LAYOUTS
Often use a <div> where width is specified as a percentage
Require a significant amount of
testing
7
LIQUID LAYOUT - SMALL SCREEN SIZE
8
LIQUID LAYOUT - VERY SMALL SCREEN
9
LIQUID LAYOUT - LARGE SCREEN
10
CREATING A HYBRID LAYOUT
1. Start with a basic layout structure.
2. Create a header and footer.
3. Define two fixed columns on either side.
4. Define a liquid column in the middle.
11
BASIC LAYOUT STRUCTURE<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns= "http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Sample Layout</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">HEADER</div>
<div id="wrapper"><div id="content_area">CONTENT</div>
<div id="left_side">LEFT SIDE</div>
<div id="right_side">RIGHT SIDE</div>
</div>
<div id="footer">FOOTER</div>
</body>
</html> 12
HEADER AND FOOTER
#header {float: left;width: 100%;background-color: #7152F4;
}#footer {float: left;width: 100%;background-color: #7152F4;
}
13
WRAPPER
#wrapper {
float: left;
padding-left: 200px;
padding-right: 125px;
}
14
LEFT SIDE
#left_side {position: relative;float: left;width: 200px;background-color: #52f471;right: 200px;margin-right: -100%;
}
15
RIGHT SIDE
#right_side {position: relative;float: left;width: 125px;background-color: #f452d5;margin-right: -125px;
}
16
CONTENT AREA
#content_area {position: relative;float: left;background-color: #ffffff;width: 100%;
}
17
HYBRID LAYOUT
18
HYBRID LAYOUTProblem under 400 pixels
19
SETTING MIN-WIDTH
body {margin: 0;padding: 0;min-width: 525px;}
20
MANAGING COLUMN HEIGHT
Add the following to left_side, right_side, and content_area:
margin-bottom: -2000px;padding-bottom: 2000px;
Add the following to the footer:position: relative;
Add the following to the wrapper:Overflow: hidden;
21
HYBRID LAYOUT COMPLETE
22
Server-side scripting
PHP JSP ASP Perl Python Ruby
Client-side scripting
JavaScript VBScript jQuery Ajax
23
SCRIPTING
Server-side The script is
executed by the Web server.
Browser-independent
Requires a trip across the Internet
Client-side The script is
executed by the browser.
Support can differ by browser
Can execute without a trip across the Internet
24
CLIENT-SIDE vs. SERVER-SIDE
WHERE TO PUT JAVASCRIPT In its own file with a .js extension
<script type="text/javascript" src="/path/to/script.js">
In a <script></script> block in the HTML• Typically in the <head> block
Is not executed unless called
• Can be placed in the <body> block Is executed when the page loads
• Associated with an event
25
INLINE JAVASCRIPT EXAMPLE<!DOCTYPE html>
<head>
<title>JavaScript Example</title>
</head>
<body>
<h1>JavaScript Example</h1>
<p>This text is HTML.</p>
<script type="text/javascript">
<!-- Hide the script from old browsers
document.write('<p>This text comes from JavaScript.</p>');
// Stop hiding the script -->
</script>
</body>
</html>
26
JAVASCRIPT EXAMPLE OUTPUT
27
ABOUT JAVASCRIPT Case-sensitive
White space is ignored except inside of quotes.• Use + to concatenate strings that span
multiple lines
Add a semicolon after a statement:hours = now.getHours();mins = now.getMinutes();secs = now.getSeconds();
Use comments to document:// Initialize the arrays with quotes/* This is a multiline commentSo you can comment out a block of code */
28
VARIABLES AND FUNCTIONS
var text;
text = prompt(“Enter some text.”);
29
ParameterVariable to store return value
Variable declaration
OBJECTS
Store multiple pieces of data, known as propertiesobject.propertyBob.addressBob.phone
Can include methodsBob.display()
30
TYPES OF OBJECTS
Built-in objects
DOM objects
Custom objects
31
ARRAYS An array stores a list of values. Each item in the list can be accessed
through its index.
32
Mark David Sarah
0 1 2
PARALLEL ARRAYS
33
Mark David Sarah
0 1 2
Apple Pear Orange
0 1 2
USING ARRAYS Declare array variables:
quotes = new Array(4);sources = new Array(4);
Store values in an array:quotes[0] = "When I was a boy of 14, my father was so " +
"ignorant...but when I got to be 21, I was astonished at " +
"how much he had learned in 7 years.";sources[0] = "Mark Twain";
34
RANDOM NUMBERi = Math.floor(Math.random() * quotes.length);
Math.random() returns a random number between 0 and 1.
Multiply the random number by the number of quotes.
Math.floor rounds the result down.
35
CONDITIONALS
Do something if a specific condition exists
if (count==1) alert(“The countdown has reached 1.”);
36
LOOPS
for (i=1; i<=10; i++) {
alert(“It's another alert!”);
}
37
EVENT HANDLERS
<img src=”button.gif” onMouseOver=”highlight();”>
38
WHICH SCRIPT RUNS FIRST? <script> tags within the <head> section
• Cannot create output in the Web page
<script> tags within the <body> section• Executed in order
Event handlers are executed when events happen.
39
DOCUMENT OBJECT MODEL
40
document
wrapper
style
background-color
content_area
style
color
product_img
src
IMAGE DISPLAYED ON ROLLOVER
41
<a href="#" onmouseover="javascript:document.product_img.src =
'/path/to/large4.jpg'"><img src="/path/to/small4.jpg"
width="104" height="104" style="padding: 4px; border: 0px"
alt="photo" /></a>
IMAGE DISPLAYED ON ROLLOVERResult:
42
JAVASCRIPT SYNTAX RULES
Case Sensitivity Keywords are always lowercase. Built-in objects are capitalized. DOM object names are usually
lowercase. DOM methods often contain a mix of
upper- and lowercase.
43
JAVASCRIPT SYNTAX RULES
Variable, Object, and Function Names Can include:• Uppercase letters• Lowercase letters• Numbers• Underscore (_)
Must begin with a letter or underscore
Variable names cannot be reserved words.
44
JAVASCRIPT BEST PRACTICES Use comments liberally.
Use a semicolon at the end of each statement.
Use one statement per line for easier debugging.
Use separate JavaScript files when possible.
Avoid being browser-specific.
Keep JavaScript optional.
45