UNIT 3 DYNAMIC WEBSITES WITH CSS AND JAVASCRIPT
OBJECTIVES CO4 Apply style to a website using CSS. CO5 Describe the use of scripting when creating a website. CO6 Create a dynamic website using JavaScript. 2
LEARNING OUTCOMES LO12 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 LAYOUTS The body of the page has a specific width. Width is controlled by a master wrapper. 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 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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " Sample Layout HEADER CONTENT LEFT SIDE RIGHT SIDE FOOTER 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 LAYOUT Problem 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 In a block in the HTML Typically in the block Is not executed unless called Can be placed in the block Is executed when the page loads Associated with an event 25
INLINE JAVASCRIPT EXAMPLE JavaScript Example JavaScript Example This text is HTML. <!-- Hide the script from old browsers document.write(' This text comes from JavaScript. '); // Stop hiding the script --> 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 comment So you can comment out a block of code */ 28
VARIABLES AND FUNCTIONS var text; text = prompt(“Enter some text.”); 29 Parameter Variable to store return value Variable declaration
OBJECTS Store multiple pieces of data, known as properties object.property Bob.address Bob.phone Can include methods Bob.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 MarkDavidSarah 012
PARALLEL ARRAYS 33 MarkDavidSarah 012 ApplePearOrange 012
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 NUMBER i = 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 38
WHICH SCRIPT RUNS FIRST? tags within the section Cannot create output in the Web page tags within the section Executed in order Event handlers are executed when events happen. 39
DOCUMENT OBJECT MODEL 40 documentwrapperstyle background- color content_areastylecolorproduct_imgsrc
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" />
IMAGE DISPLAYED ON ROLLOVER Result: 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