lecture 6 8/11/11. using div elements to create css layout need to identify your documents sections...
Post on 19-Dec-2015
230 Views
Preview:
TRANSCRIPT
Lecture 68/11/11
Using Div Elements to create CSS layout• Need to identify your
documents sections• Header• Content• Footer
#content#container
#header
#footerBasic div structure used to make a single column layout
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.
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>
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.
5
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.
6
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
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.
8
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>
• <img src="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>
• <img src="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>
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
commentSCRIPT 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.writelnInstructs 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 TypesFirst character must be a letter or an underscore _
• Examples of VariablestMy first variableIS6116_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 themvar t;var sum;Or:var t; var sum;orvar 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>
34
top related