1 / 34

Lecture 6

Lecture 6. 8/11/11. Using Div Elements to create CSS layout. Need to identify your documents sections Header Content Footer. #header. #content. #container. #footer. Basic div structure used to make a single column layout. Div.

nassor
Download Presentation

Lecture 6

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Lecture 6 8/11/11

  2. Using Div Elements to create CSS layout • Need to identify your documents sections • Header • Content • Footer #header #content #container #footer Basic div structure used to make a single column layout

  3. Div • The <div> tag defines a division or a section in an xHTML document. • The <div> tag is often used to group block-elements to format them with styles. <div id="header"> • Specifies a unique id for an element • Note: ids are used for the main elements of the page, such as header, main content, sidebar, footer, etc. • Classes are used for elements that will appear several times on your page, but can not be covered by standard html elements. For example menus. The easy way to remember which one of the two should be used only once to think of how many people are out there with your id card number.

  4. Div Example- One column layout #container { width: 550px; background-color: #ffffff; } #header { padding: 10 20px; background-color: #999999; } #content { padding: 10 20px; background-color: #cccccc; } #footer { padding: 10 20px; background-color: #999999; } <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="cssnew.css"/> <title>Divide Your Page</title> </head> <body> <div id="container"> <div id="header"> Hello World <!--This is where the header information is situated--> </div><!--close #header div--> <div id="content"> Hello World <!--This is where the main content information is situated--> </div><!--close #content div--> <div id="footer"> Hello World <!--This is where the footer information is situated --> </div><!--close #footer div --> </div><!--close #container div--> </body> </html>

  5. Font Absolute and Relative • Absolute sizes regardless of what the user does short of turning off style sheets - element's font size is locked • If users try to resize text through their browsers, elements with an absolute font size won't change, but non-absolute elements will • This prevents users from making your page's text larger if they need to see it more clearly, or smaller if they think it's too big.

  6. Continued… W3C Relative units are: • em: the 'font-size' of the relevant font • ex: the 'x-height' of the relevant font • px: pixels, relative to the viewing device The absolute units are: • in: inches -- 1 inch is equal to 2.54 centimeters. • cm: centimeters • mm: millimeters • pt: points -- the points used by CSS2 are equal to 1/72th of an inch. • pc: picas -- 1 pica is equal to 12 points.

  7. Positioning • HTML elements are positioned static by default. • A static positioned element is always positioned according to the normal flow of the page. • Static positioned elements are not affected by the top, bottom, left, and right properties. • An element with fixed position is positioned relative to the browser window. • It will not move even if the window is scrolled e.g. watermark

  8. CSS Positioning http://webdesign.about.com/od/advancedcss/a/aa061307.htmhttp://www.w3schools.com/cssref/playit.asp?filename=playcss_position&preval=relative • The Positioning properties allow you to specify the left, right, top, and bottom position of an element • It also allows you to set the shape of an element, place an element behind another, and to specify what should happen when an element's content is too big to fit in a specified area • An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html> • Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist. • Absolutely positioned elements can overlap other elements.

  9. Z-index Attribute • Allows you to properly layer overlapping elements • Elements that have a higher z-index value are displayed in front of elements with a lower value • If you do not specify this value, elements that occur later in the document are displayed in front of those that occur earlier • <html> • <head><title>Absolute positioning</title> • </head> • <body> • <imgsrc="gates.gif" style="position: absolute; top: 0px; left: 0px; z-index:1"> • <h1 style="position : absolute; top: 50px; left:50px; z-index: 3"> Position My Text</h1> • <imgsrc="beatles.gif" style="position: absolute; top:25px; left:600px; z-index:2"> • </body> • </html>

  10. Relative Positioning • A relative positioned element is positioned relative to its normal position. • The content of relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow. <html> <head> <style type="text/css"> h2.pos_left { position:relative; left:-20px; } h2.pos_right { position:relative; left:20px; } </style> </head> <body> <h2>This is a heading with no position</h2> <h2 class="pos_left">This heading is moved left according to its normal position</h2> <h2 class="pos_right">This heading is moved right according to its normal position</h2> <p>Relative positioning moves an element RELATIVE to its original position.</p> <p>The style "left:-20px" subtracts 20 pixels from the element's original left position.</p> <p>The style "left:20px" adds 20 pixels to the element's original left position.</p> </body> </html>

  11. What is JavaScript? • JavaScript is a scripting language • A JavaScript is lines of executable computer code • A JavaScript can be inserted into an HTML page • JavaScript is an open scripting language that anyone can use without purchasing a license

  12. Javascript • Developed by Netscape Communications (Microsoft’s version is called ‘Jscript’) • Enables executable content within web pages on the client side • Provides an alternative to VBScript for ASP programming on the server side (IIS)

  13. Javascript • JavaScript Text is just plain text, as is HTML • JavaScript is not Java • Can be used as a standalone or embedded in other languages or applications • Major browsers contain a JavaScript interpreter

  14. JavaScript • When a JavaScript is inserted into an HTML document, the Internet browser will read the XHTML and interpret the JavaScript • The JavaScript can be executed immediately or at a later event

  15. Case Sensitivity • JavaScript is a case-sensitive language • Language keywords, variables, function names, and other identifiers must be typed with consistent capitalisation of letters • Variable names script, Script, SCRIPT represent three different variables • Note that xHTML is not case-sensitive

  16. Whitespace and line breaks • JavaScript ignores white spaces and line breaks with three exceptions • If white space is in a value designated by quotes – “” or ‘’ • If white space breaks up a token, i.e. a keyword, variable name, function name etc • If a line breaks a statement • e.g. if return true was put on two separate lines, this would be treated as two separate statements

  17. Ending Statements with a Semicolon • With the traditional programming languages C++ and Java, each code statement has to end with a semicolon • Many programmers continue this habit when writing JavaScript, but in general, semicolons are optional and are required only if you want to put more than one statement on a single line

  18. Whitespace and line breaks • Simple statements in JavaScript are generally followed by a semi-colon barrier A=3; B=7; • Or as below. A = 3; B = 7; • Use of semi-colons is good programming practice.

  19. Comments • Browsers that don’t support JavaScript • What happens when they hit the JavaScript code? We need to program around this. Older browsers that do not support scripts will display the script as page content. To prevent them from doing this, you can use the HTML comment tag. • Comments are used to document code to increase programmer productivity and help maintenance efforts. // this is comment to the end of the line /* this would be used for a block of comment */

  20. Example <html> <title>this is the title</title> <script language = “JavaScript”> <!--hide the script from non-JavaScript Browsers using an HTML comment SCRIPT GOES HERE // End the hiding comment --> </script> </html>

  21. <html> <head> <title>First JavaScript Program</title> <script language="javascript"> document.writeln("<h1>Welcome to JavaScript Programming!</h1>"); </script> </head> <body> </body> </html>

  22. Example • JavaScript code goes into the HTML <head> tags. • The language type is declared by <script language="javascript"> </script> • document.writeln Instructs the browser’s JavaScript interpreter to perform an action, namely to display in the web page the string of characters between the double quotes (“ ”) • The document object represents the HTML document currently being displayed in the browser • It allows the programmer to specify HTML text to be displayed in the HTML document • writeln is a method of the document object • It contains the arguments that the method requires to perform it task or action

  23. Data Types • Probably the most fundamental aspect of a programming language • JavaScript supports three primitive data types: • Numbers • strings of text • Boolean values

  24. Data Types • Numbers: • Integers (23 +-) • Floating point (3.18 +-) • Boolean Values • Any binary value – true/false

  25. Data Types • Strings • Any sequence of characters in quotes • Can be compare, concatenated and manipulated using operators • “testing string 1” • Other Data types • Objects • Arrays • Exponential numbers • Hexadecimal numbers • The null value

  26. Data Types First character must be a letter or an underscore _ • Examples of Variables t My first variable IS6116 _harvest

  27. Reserved Words • These words have special meanings in themselves • These should NOT be used as Identifiers. • For example: • Break, do, function, case, else, if, for, new…

  28. JavaScript Objects • The browser contains a complete set of objects that allow script programmers to access and manipulate every element of a HTML document • These objects reside in the computers memory and contains information used by the script • Each object has attributes and behaviours associated with it

  29. Variables • A variable is a name associated with a data value • A variable contains or stores the value • Variables are names that have values assigned to them • They provide a way to manipulate values by name

  30. Assign a Value to a Variable • You assign a value to a variable like this with the var statement: var strname = “Mary“ Or like this without the var statement: strname = “Mary“

  31. Variables • It is good programming practice to declare variables before using them var t; var sum; Or: var t; var sum; or var t = 2;

  32. Untyped Variables • Unlike other languages JavaScript is untyped • Variables can hold data of any variable type T = 10; T = “ten”; • In Java you would have to use: int T = 10; String T = “ten”; • DataTypes can change accordingly

  33. Example <html> <head> <script type="text/javascript"> function message() { alert("This alert box was called with the onload event"); } </script> </head> <body onload="message()"> </body> </html>

More Related