Web technology unit II


Published on

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web technology unit II

  1. 1. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353 UNIT II Style Sheets: CSS2.1 Introduction to Cascading Style SheetsCascading Style Sheets (CSS) is a slightly misleading term, since a website might haveonly oneCSS file (style sheet), or the CSS might be embedded within an HTML file. It is better tothinkof CSS as a technology (in the singular). CSS is comprised of statements that control the / nrstyling o. e.cof HTML documents. Simply put, an HTML document should convey content. A CSS ubdocument etshould control the styling of that content. cs<div align="center"></div> <img src="this.gif" border="0" alt="" /> <table :// tpheight="200">... <td width="30"></td> htAll these examples can easily be replaced with CSS. Dont worry if you dont understandthesedeclarations yet.div {text-align: center;} img {border: 0 none;} table {height: 200px;} td{width: 30px;}An HTML file points to one or more external style sheets (or in some cases a list ofdeclarationsembedded within the head of the HTML file) which then controls the style of the HTMLdocument. These style declarations are called CSS rules.2.2 FeaturesThe latest version of Cascade Style Sheets, CSS 3, was developed to make Web designeasier but it http://csetube.co.nr/
  2. 2. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353became a hot topic for a while because not all browsers supported it. However, trendschange quickly intechnology and all browser makers currently are implementing complete CSS 3 support.Making thatprocess easier for the browser manufacturers is CSS 3s modularized specification, whichallows them toprovide support for modules incrementally without having to perform major refactoringof the browsers / nrcodebases. The modularization concept not only makes the process of approvingindividual CSS 3 o. e.cmodules easier and faster, but it also makes documenting the spec easier. ubEventually, CSS 3 -- along with HTML5 -- are going to be the future of the web. You et csshould begin ://making your Web pages compatible with these latest specifications. In this article, I tp htexplore 10 of theexciting new features in CSS 3, which is going to change the way developers who usedCSS2 buildwebsites.Some of the features are:o CSS Text Shadowo CSS Selectorso CSS Rounded Cornerso CSS Border Image3 Core Syntax2.3.1 At-RulesAs we learned when we studied CSS statements, there are two types of statements. Themostcommon is the rule-sets statement, and the other is the at-rules statement. As opposed torule http://csetube.co.nr/
  3. 3. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353sets, at-rules statements consist of three things: the at-keyword, @, an identifier, and adeclaration. This declaration is defined as all content contained within a set of curlybraces, or byall content up until the next semicolon.@importPerhaps the most commonly used of the at-rules, @import, is used to import an externalstylesheet into a document. It can be used to replace the LINK element, and serves the same / nrfunction, o.except that imported style sheets have a lower weight (due to having less proximity) than e.clinked ubstyle sheets. et cs<style type="text/css" media="screen"> @import url(imported.css); </style> ://@import url(addonstyles.css); @import "addonstyles.css"; tp htRelative and absolute URLs are allowed, but only one is allowed per instance of@import. Oneor more comma-separated target media may be used here.@charset@charset is used to specify the character encoding of a document, and must appear nomore thanonce. It must be the very first declaration in the external style sheet, and cannot appear inembedded style sheets. @charset is used by XML documents to define a character set.@charset "utf-8";@namespaceThe @namespace rule allows the declaration of a namespace prefix to be used byselectors in astyle sheet. If the optional namespace prefix is omitted, then the URL provided becomesthe http://csetube.co.nr/
  4. 4. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353default namespace. Any @namespace rules in a style sheet must come after all @importand@charset at-rules, and come before all CSS rule-sets.@namespace foo url("http://www.example.com/");@namespace can be used together with the new CSS3 selectors (see below). It defineswhichXML namespace to use in the CSS. If the XML document doesnt have matching XMLnamespace information, the CSS is ignored. / nr@font-face o.This was removed from the CSS2.1 specification, but is still used to describe a font face e.cfor a ubdocument.. et cs@font-face { font-family: "Scarborough Light"; src: ://url("http://www.font.com/scarborough-lt"); } @font-face { font-family: tp htSantiago; src: local ("Santiago"), url("http://www.font.com/santiago.tt"),format("truetype"); unicode-range: U+??,U+100-220; font-size: all; fontfamily:sans-serif; }@mediaThis at-rule is used within a style sheet to target specific media. For example, afterdefining howan element is to be displayed (in this example for the screen), the declaration can beoverwrittenfor print, in which case we often want to hide navigation.p {font-size: 0.8em;} /* for the screen */ @media print { p {font-size:10pt;} #nav, #footer {display: none;} } @media screen, handheld { p {fontsize:14px; text-align: justify;} }The media types are as follows.all http://csetube.co.nr/
  5. 5. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353aural (for speech synthesizers)handheldprintprojectionscreenbrailleembossedtty / nrtv@page o. e.cThis at-rules declaration is used to define rules for page sizing and orientation rules for ubprinting. et cs@page {size: 15cm 20cm; margin: 3cm; marks: cross;} ://You may specify how pages will format if they are first, on the left-hand side, or on the tp htright.@page :first {margin-top: 12cm;} @page :left {margin-left: 4.5cm;} @page:right {margin-right: 7cm;}@fontdefThis is an old Netscape-specific at-rule which we should ignore.CSS1 SelectorsSelectors refer to elements in an HTML document tree. Using CSS, they are pattern-matched in http://csetube.co.nr/
  6. 6. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353order to apply styles to those elements. A selector consists of one or more elements,classes, orIDs, and may also contain pseudo-elements and/or pseudo-classes.Type SelectorThe type selector is the simplest selector of all, and matches all occurrences of anelement. Inthis example, all <p> tags throughout the document will have the following style applied,unless / nroverridden.p {color: #666;} o. e.cUniversal Selector ubThe universal selector, used alone, matches all elements in the document tree, and thus et cswill apply ://styles to all elements. It is in effect a wildcard. tp ht* {margin: 0; padding: 0;}In this example, all tags are reset to have no padding or margin. This, by the way, is apractice togain control over all the default padding and margin inherent in the way User Agents(UAs)display HTML.Class SelectorThe class selector matches a classname..largeFont {font-size: 1.5em;} h3.cartHeader {text-align: center;}The "largeFont" class will apply to all elements into which it is called. The "cartHeader"classwill only function as styled if called into an H3 element. This is useful if you haveanother http://csetube.co.nr/
  7. 7. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353"cartHeader" declaration that you wish to override in the context of an H3 element, or ifyouwish to enforce the placement of this class.ID SelectorThe ID selector matches an ID. IDs are identifiers unique to a page. They bear aresemblance toclasses, but are used a bit differently. IDs will be treated more fully below. The first twoID / nrexamples below refer to sections of a web page, while the last refers to a specificoccurrence of o. e.can item, say, an image in a DHTML menu. IDs have a higher specificity than classes. ub#header {height: 100px;} #footer {color: #F00;} #xyz123 {font-size: 9px;} et csDescendant Selector ://A selector can itself be a chain of one or more selectors, and is thus sometimes called a tp htcompound selector. The descendant selector is the only compound selector in CSS1, andconsistsof two or more selectors and one or more white space combinators. In the examplebelow, thewhite space between the H1 and EM elements is the descendant combinator. In otherwords,white space conveys a hierarchy. (If a comma were to have intervened instead, it wouldmeanthat we were styling H1 and EM elements alike.) Selectors using combinators are usedfor moreprecise drill-down to specific points within the document tree. In this example <em> tagswillhave the color red applied to them if they are within an <h1> tag.h1 em {color: #F00;} http://csetube.co.nr/
  8. 8. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353Note that EM elements do not have to be immediately inside an H1 heading, that is, theydo nothave to be children, but merely descendants of their ancestor. The previous style wouldapply toan EM element in either of the following statements.<h1>This is a <em>main</em> heading</h1> <h1>This is <strong>another<em>main</em> heading</strong></h1>In the next example, the color black will be applied to all <span> tags that are / nrdescendants o.(whether directly or not) of <div> tags which are in turn descendants (whether directly or e.cnot) of ub<p> tags, no matter how deep the <p> tags are in the document tree. et csdiv p span {color: #000;} ://That is to say, this style would apply to SPAN elements inside a P element, even if they tp htaremany levels below (that is, within) the DIV element, as long as there is an intervening Pelement.The universal selector can be part of a compound selector in tandem with a combinator.p * span {font-size: 0.6em;}This would style any SPAN element that is at least a grandchild of a P element. TheSPANelement could in fact be much deeper, but it will not be styled by this declaration if it isthe child(direct descendant) of a P element.Other SelectorsOther combinators convey greater precision. They include the direct adjacent siblingcombinator http://csetube.co.nr/
  9. 9. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353(+), the indirect adjacent sibling (or general) combinator (~), and the child combinator(>). Thesecombinators will be treated below because they are part of the CSS2.1 specification, andare notsupported in IE6.EXAMPLE:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" / nr"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html> o. e.c<head> ub<style type="text/css"> et csdiv.ex ://{ tp htwidth:220px;padding:10px;border:5px solid gray;margin:0px;}</style></head>2.4 STYLE SHEETS AND HTML STYLE RULETo apply a style, CSS uses the HTML document tree to match an element, attribute, orvalue inan HTML file. For an HTML page to properly use CSS, it should be well-formed andvalid, andpossess a valid doctype. If these conditions are not met the CSS match may not yield thedesired http://csetube.co.nr/
  10. 10. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353results.There are two types of CSS statements: rule-sets and at-rules. A rule set, alsoknownsimply as a rule, is the more common statement, and consists of a selector and adeclarationblock, sometimes simply called a block. The selector can be an element, class, or ID, andmayinclude combinators, pseudo-elements, or pseudo-classes.Statement Type 1: Rules Sets (Rules) / nrstatement + statement blockX {declaration; declaration;} o. e.cX {property; value; property: value;} ubdiv > p {font-size: 1em; color #333;} et csStatement Type 2: At-Rules ://at-keyword + identifier + declaration tp ht@import "subs.css";The declaration block consists of the braces and everything in between. Within thedeclarationblock are declarations, which consist of properties and values. Properties are separatedfrom theirvalues (also known as styles) by colons, and declarations are delimited by semi-colons.(Properties are also known as attributes, but that terminology is not used in this documentlest weconfuse CSS properties with HTML attributes.) White space inside a declaration block isignored, which facilitates formatting the code in developer-friendly ways. For example,both ofthe following statements are valid and equivalent, though the latter slightly increasesdocumentweight. http://csetube.co.nr/
  11. 11. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353h1 {color: blue; margin-top: 1em;} h1 { color: blue; margin-top: 1em; }Ensure, however, that there is no white space between a value and its unit ofmeasurement (e.g.1.2em, not 1.2 em).As opposed to rule sets, at-rules statements consist of the at-keyword"@", anidentifier, and a declaration. This declaration is defined as all the content containedwithin a setof curly braces, or by all content up until the next semicolon. Note the following two / nrexamples. o.@media print { p {font-size: 10pt;} tt {font-family: monospace;} } @import e.curl(addonstyles.css); ubOther examples of at-keywords are media, font-face, and page. At-rules will be treated et csseparately ://below. tp htPropertiesI have decided not to include a description of all CSS1 and CSS2.1 Properties (such asfont-size,text-transform, border, margin, and many others) because they are numerous and can beexamined in the Property References section of this site. Moreover, they are usedthroughout thistutorial and can be easily deduced. So we move directly to CSS1 selectors.1.5 STYLE RULE CASCADING AND INHERITANCECSS are probably wondering what exactly cascades about cascading style sheets. In thissectionwe look at the idea of cascading, and a related idea, that of inheritance. Both areimportantunderlying concepts that you will need to grasp, and understand the difference between,in order http://csetube.co.nr/
  12. 12. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353to work properly with style sheets.Rule CascadeA single style sheet associated with one or more web pages is valuable, but in quite alimitedway. For small sites, the single style sheet is sufficient, but for larger sites, especiallysitesmanaged by more than one person (perhaps several teams who may never communicate)single / nrstyle sheets dont provide the ability to share common styles, and extend these styleswhere o. e.cnecessary. This can be a significant limitation. ubCascading style sheets are unlike the style sheets you might have worked with using word et csprocessors, because they can be linked together to create a hierarchy of related style ://sheets. tp htManaging style at large sites using @importImagine how the web site for a large organization, say a corporation, might be structured.Assites grow in complexity, individual divisions, departments, and workgroups becomemoreresponsible for their own section of a site. We can already see a potential problem - howdo weensure a consistent look and feel across the whole site?A dedicated web developmentteam canensure that a style guide is adhered to.SpecificityGet browser support information for specificity in the downloadable version of this guideor our http://csetube.co.nr/
  13. 13. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353browser support tables.At this point it might be timely to have a quick discussion ofspecificity.Both inside a single style sheet, and in a cascade of style sheets, it should be clear thatmore thanone rule can apply to the same element. What happens when two properties in separateruleswhich both apply to an element contradict one another? Obviously they cant both apply(the text / nrof an element cant be both red and blue, for example). CSS provides a mechanism forresolving o. e.cthese conflicts, called specificity. ubSome selectors are more specific than others. For example, the class and ID selectors are et csmore ://specific than simple HTML element selectors. When two rules select the same element tp htand theproperties contradict one another, the rule with the more specific selector takesprecedence.Specificity for selectors is a little involved. Without going into the full detail, mostsituations canbe resolved with the following rules.1. ID selectors are more specific than other selectors2. Class selectors are more specific than HTML element selectors, and other selectorssuchas contextual, pseudo class and pseudo element selectors.3. Contextual selectors, and other selectors involving more than one HTML elementselector are more specific than a single element selector (and for two multiple elementselectors, the one with more elements is more specific than the one with fewer.) http://csetube.co.nr/
  14. 14. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353There are times though when the two rules will have the same specificity. In this case, therulethat comes later in the cascade prevails.For example, where one rule is in an importedstylesheet, and the other in the style sheet itself, the rule in the style sheet which is importingtakesprecedence. When the two rules are in the same style sheet, it is the one furthest from thetop of / nrthe style sheet that takes precedence.While these rules seem complicated at first, they arepretty o. e.cmuch common sense, and it is uncommon that much confusion or difficulty arises for a ubdeveloper. et csStyle Inheritance ://Any HTML page comprises a number of (perhaps a large number of) elements - tp htheadings,paragraphs, lists, and so on. Often, developers use the term "tag" to refer to an element,makingreference for example to "the p tag". But the tag is simply the <p></p> part of theelement. Thewhole construction of <p>This is the content of the paragraph</p> is in fact the <p>element (as we refer to it in this guide). What many web developers dont realize (largelybecause it wasnt particularly important until style sheets came along) is that everyelement iscontained by another element, and may itself contain other elements. The technical termfor thisis the containment hierarchy of a web page.At the top of the containment hierarchy is the <html> element of the page. Every otherelement http://csetube.co.nr/
  15. 15. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353on a web page is contained within the <html> element, or one of the elements containedwithinit, and so on. Similarly, many elements will be contained in paragraphs, while paragraphsarecontained in the <body>.Graphically, we can understand it like this.figure 4: the HTML containment hierarchyI said above that style sheets made it important to understand this. Why? Well, with / nrcascading o.style sheets, elements often (and with CSS2 can always be forced to) inherit properties e.cfrom the ubelements which contain them (otherwise known as their parent elements). This means et csthat if you ://give the body of the page certain properties (for example font and color) then every tp htelementwithin the page will inherit these properties- there is no need to set the font and coloragain foreach element, such as list items or paragraphs.You can always override the inheritance however. By assigning a property to an element,youoverride the inherited property.2.6 Text t properties2.6.1 CSS Font FamiliesCSS font properties define the font family, boldness, size, and the style of a text.Difference Between Serif and Sans-serif FontsOn computer screens, sans-serif fonts are considered easier to read than serif fonts.In CSS, there are two types of font family names: http://csetube.co.nr/
  16. 16. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353generic family - a group of font families with a similar look (like "Serif" or"Monospace")font family - a specific font family (like "Times New Roman" or "Arial")Generic family Font family DescriptionSerifTimes New RomanGeorgiaSerif fonts have small lines at the ends on some / nrcharactersSans-serif o. e.cArial ubVerdana et cs"Sans" means without - these fonts do not have the ://lines at the ends of characters tp htMonospaceCourier NewLucida ConsoleAll monospace characters have the same widthFont FamilyThe font family of a text is set with the font-family property.The font-family propertyshouldhold several font names as a "fallback" system. If the browser does not support the firstfont, ittries the next font.Start with the font you want, and end with a generic family, to let thebrowserpick a similar font in the generic family, if no other fonts are available.Note: If the name of a font family is more than one word, it must be in quotation marks,like http://csetube.co.nr/
  17. 17. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353font-family: "Times New Roman".More than one font family is specified in a comma-separatedlist:Examplep{font-family:"Times New Roman", Times, serif;}Font StyleThe font-style property is mostly used to specify italic text.This property has three values: / nrnormal - The text is shown normallyitalic - The text is shown in italics o. e.coblique - The text is "leaning" (oblique is very similar to italic, but less supported) ubExample et csp.normal {font-style:normal;} ://p.italic {font-style:italic;} tp htp.oblique {font-style:oblique;}Font SizeThe font-size property sets the size of the text.Being able to manage the text size isimportant inweb design. However, you should not use font size adjustments to make paragraphs looklikeheadings, or headings look like paragraphs.Always use the proper HTML tags, like <h1>- <h6>for headings and <p> for paragraphs.The font-size value can be an absolute, or relative size.Absolute size:Sets the text to a specified sizeDoes not allow a user to change the text size in all browsers (bad for accessibilityreasons) http://csetube.co.nr/
  18. 18. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353Absolute size is useful when the physical size of the output is knownRelative size:Sets the size relative to surrounding elementsAllows a user to change the text size in browsersIf you do not specify a font size, the default size for normal text, like paragraphs, is 16px(16px=1em).Set Font Size With PixelsSetting the text size with pixels, gives you full control over the text size: / nrExampleh1 {font-size:40px;} o. e.ch2 {font-size:30px;} ubp {font-size:14px;} et csSet Font Size With Em ://To avoid the resizing problem with Internet Explorer, many developers use em instead of tp htpixels.The em size unit is recommended by the W3C.1em is equal to the current font size.Thedefault text size in browsers is 16px. So, the default size of 1em is 16px.The size can be calculated from pixels to em using this formula: pixels/16=emExampleh1 {font-size:2.5em;} /* 40px/16=2.5em */h2 {font-size:1.875em;} /* 30px/16=1.875em */p {font-size:0.875em;} /* 14px/16=0.875em */All CSS Font PropertiesThe number in the "CSS" column indicates in which CSS version the property is defined(CSS1or CSS2).Property Description Values CSSfont http://csetube.co.nr/
  19. 19. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353Sets all the fontproperties in onedeclarationfont-stylefont-variantfont-weightfont-size/line-heightfont-family / nrcaptionicon o. e.cmenu ubmessage-box et cssmall-caption ://status-bar tp ht1inheritfont-familySpecifies the font familyfor textfamily-namegeneric-familyinherit1font-sizeSpecifies the font size oftextxx-smallx-small http://csetube.co.nr/
  20. 20. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353smallmediumlargex-largexx-largesmallerlargerlength / nr%inherit o. e.c1 ubfont-style et csSpecifies the font style ://for text tp htnormalitalicobliqueinherit1font-variantSpecifies whether or nota text should bedisplayed in a small-capsfontnormalsmall-capsinherit1 http://csetube.co.nr/
  21. 21. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353font-weightSpecifies the weight of afontnormalboldbolderlighter100 / nr200300 o. e.c400 ub500 et cs600 ://700 tp ht8009001inheritText Formatting and colorAll CSS Text PropertiesThe number in the "CSS" column indicates in which CSS version the property is defined(CSS1or CSS2).Property Description Values CSScolor Sets the color of a text color 1direction Sets the text directionltrrtl http://csetube.co.nr/
  22. 22. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT23532line-height Sets the distance between linesnormalnumberlength%1letter-spacing Increase or decrease the space between characters / nrnormallength o. e.c1 ubtext-align Aligns the text in an element et csleft ://right tp htcenterjustify1text-decoration Adds decoration to textnoneunderlineoverlineline-throughblink1text-indent Indents the first line of text in an elementlength%1 http://csetube.co.nr/
  23. 23. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353text-shadownonecolorlengthtext-transform Controls the letters in an elementnonecapitalizeuppercase / nrlowercase1 o. e.cunicode-bidi ubnormal et csembed ://bidi-override tp ht2vertical-align Sets the vertical alignment of an elementbaselinesubsupertoptext-topmiddlebottomtext-bottomlength%1white-space Sets how white space inside an element is handled http://csetube.co.nr/
  24. 24. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353normalprenowrap1word-spacing Increase or decrease the space between wordsnormallength1 / nr2.7 The CSS Box ModelBLOCK DIAGRAM o. e.cAll HTML elements can be considered as boxes. In CSS, the term "box model" is used ubwhen et cstalking about design and layout. ://The CSS box model is essentially a box that wraps around HTML elements, and it tp htconsists of:margins, borders, padding, and the actual content.The box model allows us to place a border around elements and space elements inrelation toother elements.The image below illustrates the box model:Explanation of the different parts:Margin - Clears an area around the border. The margin does not have a background color,it iscompletely transparentBorder - A border that goes around the padding and content. The border is affected by thebackground color of the boxPadding - Clears an area around the content. The padding is affected by the backgroundcolor of http://csetube.co.nr/
  25. 25. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353the boxContent - The content of the box, where text and images appearIn order to set the width and height of an element correctly in all browsers, you need toknowhow the box model works.Width and Height of an ElementImportant: When you specify the width and height properties of an element with CSS,you are / nrjust setting the width and height of the content area. To know the full size of the element,you o. e.cmust also add the padding, border and margin. ubThe total width of the element in the example below is 300px: et cswidth:250px; ://padding:10px; tp htborder:5px solid gray;margin:10px;Lets do the math:250px (width)+ 20px (left and right padding)+ 10px (left and right border)+ 20px (left and right margin)= 300pxImagine that you only had 250px of space. Lets make an element with a total width of250px:Examplewidth:220px;padding:10px;border:5px solid gray; http://csetube.co.nr/
  26. 26. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353margin:0px;The total width of an element should always be calculated like this:Total element width = width + left padding + right padding + left border + right border +leftmargin + right marginThe total height of an element should always be calculated like this:Total element height = height + top padding + bottom padding + top border + bottomborder + / nrtop margin + bottom marginExample o. e.c<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ub"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> et cs<html> ://<head> tp ht<style type="text/css">div.ex{width:220px;padding:10px;border:5px solid gray;margin:0px;}</style></head>CSS BackgroundCSS background properties are used to define the background effects ofan element.CSS properties used for background effects: http://csetube.co.nr/
  27. 27. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353background-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionBackground ColorThe background-color property specifies the background color of an element.Thebackground / nrcolor of a page is defined in the body selector:Example o. e.cbody {background-color:#b0c4de;} ubThe background color can be specified by: et csname - a color name, like "red" ://RGB - an RGB value, like "rgb(255,0,0)" tp htHex - a hex value, like "#ff0000"Background ImageThe background-image property specifies an image to use as the background of anelement.By default, the image is repeated so it covers the entire element.The background image for a page can be set like this:Examplebody {background-image:url(paper.gif);}Below is an example of a bad combination of text and background image. The text isalmost notreadable:Background Image - Repeat Horizontally or VerticallyBy default, the background-image property repeats an image both horizontally andvertically. http://csetube.co.nr/
  28. 28. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353Some images should be repeated only horizontally or vertically, or they will look strange,likethis:Examplebody{background-image:url(gradient2.png);} / nrIf the image is repeated only horizontally (repeat-x), the background will look better:Example o. e.cbody ub{ et csbackground-image:url(gradient2.png); ://background-repeat:repeat-x; tp ht}Background Image - Set position and no-repeatWhen using a background image, use an image that does not disturb the text.Showing the image only once is specified by the background-repeat property:Examplebody{background-image:url(img_tree.png);background-repeat:no-repeat;}In the example above, the background image is shown in the same place as the text. Wewant tochange the position of the image, so that it does not disturb the text too much.Theposition of the http://csetube.co.nr/
  29. 29. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353image is specified by the background-position property:Examplebody{background-image:url(img_tree.png);background-repeat:no-repeat;background-position:right top;} / nrBackground - Shorthand property o.As you can see from the examples above, there are many properties to consider when e.cdealing ubwith backgrounds. et csTo shorten the code, it is also possible to specify all the properties in one single property. ://This is tp htcalled a shorthand property.The shorthand property for background is simply "background":body {background:#ffffff url(img_tree.png) no-repeat right top;}When using the shorthand property the order of the property values are:background-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionIt does not matter if one of the property values are missing, as long as the ones that arepresentare in this order.This example uses more advanced CSS. Take a look: Advanced exampleAll CSS Background Properties http://csetube.co.nr/
  30. 30. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353The number in the "CSS" column indicates in which CSS version the property is defined(CSS1or CSS2).Property Description Values CSSbackgroundSets all the background propertiesin one declarationbackground-color / nrbackground-imagebackground-repeat o. e.cbackground-attachment ubbackground-position et csinherit ://1 tp htbackground-attachmentSets whether a background image isfixed or scrolls with the rest of thepagescrollfixedinherit1background-colorSets the background color of anelementcolor-rgbcolor-hexcolor-name http://csetube.co.nr/
  31. 31. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353transparentinherit1background-imageSets the background image for anelementurl(URL)none / nrinherit1 o. e.cbackground-position ubSets the starting position of a et csbackground image ://left top tp htleft centerleft bottomright topright centerright bottomcenter topcenter centercenter bottomx% y%xpos yposinherit1background-repeatSets if/how a background image will http://csetube.co.nr/
  32. 32. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353be repeatedrepeatrepeat-xrepeat-yno-repeatinherit12.8 NORMAL FLOW BOX LAYOUT / nrUnderstanding the box model is critical to developing web pages that dont rely on tablesfor o. e.clayout. In the early days of writing HTML, before the advent of CSS, using tables was ubthe only et csway to have discreet content in separate boxes on a page. But tables were originally ://conceived to tp htdisplay tabular information. With the advent of CSS floating and positioning, there is nolonger aneed to use tables for layout, though many years later many, if not most, sites are stillusingtables in this manner.The box model, as defined by the W3C "describes the rectangularboxesthat are generated for elements in the document tree and laid out according to the visualformatting model". Dont be confused by the term "boxes". They need not appear assquare boxeson the page. The term simply refers to discreet containers for content. In fact, everyelement in adocument is considered to be a rectangular box.Padding, Borders, Margins http://csetube.co.nr/
  33. 33. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353Padding immediately surrounds the content, between content and borders. A margin isthe spaceoutside of the borders. If there are no borders both paddng and margin behave in roughlythesame way, except that you can have negative margins, while you cannot have negativepadding.Also padding does not collapse like margins. See below for the section on collapsingmargins. / nrThe picture on the right illustrates padding, borders, and margins. The content area doesnot o. e.creally have a border. The line around the content merely indicates the limits of the actual ubcontent. et csTraditional vs. W3C Box Models ://So how do you declare these properties in your CSS, and how do you set the width of a tp htbox?That depends on the box model. There are actually two box models. The traditional boxmodel issupported by IE5.5 and previous versions of IE, and any version of IE in quirks mode. Itstatesthat the width of a box is the combined width of the content, its padding and its borders.Imaginea literal box that you can hold. The carboard exterior is the border. We dont care aboutthecontent inside of the box. It may fill up the box entirely or have space around it. If it hasspacearound it, that is its padding, which sits between the content and the exterior (border) ofthe box. http://csetube.co.nr/
  34. 34. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353But according to this model, it does not matter what the actual content width is. Thewidth of thebox is what matters. Using the traditional model lets consider the following declaration..box {width: 200px; border: 1px solid black; padding: 10px;}In the traditional model the width of the box is 200 pixels.CSS: .wrap {width: 760px;} .menu {float: left; width 187px; padding: 6px;border-right: 1px solid #999;} .main {float: left; width 548px; padding:6px;} HTML: <div id="wrap"> <div id="menu"></div> <div id="main"></div> / nr</div> o.The math from left to right would be:menu left padding + menu content + menu right e.cpadding + ubmenu border + main left padding + main content + main right padding (or in pixels) 6 + et cs187 + 6 ://+ 1 + 6 + 548 + 6 = 760. tp htMargin CollapseVertical margins collapse when they meet. Though it may seem like a strange thing, ifyou haveassigned top and bottom margins to the P element of, say, 10px each, you will not have20px ofmargin between paragraphs, but rather 10px. This is considered to be desirable andexpectedbehavior, and not a bug. Now consider the following declaration.p {margin: 10px 0 16px;}In this case the space between paragraphs would be 16px, that is, the greater of the twovalues.Margin collapse does not occur when either box is floated, when one element uses theoverflow http://csetube.co.nr/
  35. 35. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353property set to any value other than "visible", with absolutely positioned elements, withelementswhose display property is set to "inline-block", or if the child element is cleared.You canoverride margin collapse also by adding a border, of the same color as the background ifyouwant it unnoticed, or by using padding instead of margins. Eric Meyer has a nicedescription ofcollapsing margins. In sum, margin collapse is meant to prevent certain design problems, / nrand yetis not difficult to override. o. e.cDisplay Property ubThis is one of the most useful properties. The complete list of values is in the appendix of et csthis ://document, but the most useful ones follow. tp htblockBlock display provides behavior similar to a default DIV element. A line break occurs attheclose of the tag. Elements that are block by default are DIV, P, BLOCKQUOTE, H1through H6,UL, OL, LI, ADDRESS, etc. Block elements accept width, height, top and bottommargins, andtop and bottom padding. A block element constitutes a separate block box.inlineInline display creates no such line break. Elements that are inline by default are SPAN,IMG,INPUT, SELECT, EM, STRONG, etc. Inline elements do not accept width, height, topand http://csetube.co.nr/
  36. 36. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353bottom padding, and top and bottom margins, which makes good sense, since they areused forpart of a line of text (i.e. of a block box).They do, however, accept left and right padding, left and right margins, and line-height.Lineheightcan then be used to approximate height. If you need to apply width, height or other blockproperties to an inline element, consider assigning the element block display and/orfloating it. / nrBlock display, of course, will force the element on to a separate line (unless the elementis o. e.cfloated). Alternatively you can assign the inline-block value to make an inline element ubtake block et csproperties (see below). ://none tp htDisplay set to none sets the element to invisible similar to the hidden value of thevisibilityproperty (see below). However, unlike the visibility property, this value takes up no spaceon thepage. This is very useful for DHTML hidden tools and for other instances when you needitemsto expand and collapse based on whether they contain content to be viewed on demand.Moreover, when you generate content, items whose display is set to none will not beincluded inthe loop. (For more on generated content, see below.) Display set to none will also behiddenfrom most screen readers. If you are trying to make something readable only for thosewith sightdisabilities, use an off-screen class like this: http://csetube.co.nr/
  37. 37. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353.offScreen {position: absolute; left: -10000px; top: auto; width: 1px;height: 1px; overflow: hidden;}inline-blockThis value causes the element to generate a block element box that will be flowed withsurrounding content as if it were a single inline box. It lets you place a block inline withthecontent of its parent element. It also allows you to assign properties associated with blockdisplay, such as width and height to an element that naturally takes inline display. This / nrproperty o.is also used to trigger hasLayout in IE6, which is a difficult concept, but briefly means e.cmaking ubIE6 assume CSS certain properties. et csrun-in ://This display mode causes the element to appear as an inline element at the start of the tp htblockimmediately following it. If there is no block following a run-in element, it is displayedas anormal block instead. Currently, there seems to be no browser support for this valueexcept forIE8, but here is an example of how it is coded, and how it should look.<div style="display: run-in">Here is some run-in text on this line.</div><div style="display: block">But here is a block that follows it, so they areconjoined.</div>Lets seer if it works. Here is some run-in text on this line.But here is a block that followsit, soare they conjoined? Well, apparently not in Firefox. Oh well.list-item http://csetube.co.nr/
  38. 38. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353Unordered lists are traditionally used to list bulleted items vertically. But you can assignbulletsto other elements using the list-item value.div {display: list-item;}It may not make a lot of semantic sense to apply bullets to an element that is not a listitem, butat the very least its helpful that CSS is so flexible. However you use these values, ensurethat / nryour HTML is meaningful irrespective of your CSS. Because there is a wide variety ofdisplay o. e.cvalues, HTML tags can be made to display in a variety of ways, some counter to the ubnature of the et cselement. Care should be taken to maintain the implicit content of elements. Should you, ://for tp htexample, give a P element inline display? You can, but use caution. It is more likely thatyou willset the inline value for the DIV element. This seems to be more acceptable in that theDIVelement simply provides separate treatment for content, while a paragraph is visuallydemarcatedfrom other elements.2.9 Beyond the Normal FlowPositioningThe CSS positioning properties allow you to position an element. It can also place anelementbehind another, and specify what should happen when an elements content is toobig.Elements http://csetube.co.nr/
  39. 39. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353can be positioned using the top, bottom, left, and right properties. However, theseproperties willnot work unless the position property is set first. They also work differently depending onthepositioning method.There are four different positioning methods.Static PositioningHTML elements are positioned static by default. A static positioned element is alwayspositioned / nraccording to the normal flow of the page.Static positioned elements are not affected bythe top, o. e.cbottom, left, and right properties. ubFixed Positioning et csAn element with fixed position is positioned relative to the browser window.It will not ://move tp hteven if the window is scrolled:Examplep.pos_fixed{position:fixed;top:30px;right:5px;}Note: Internet Explorer supports the fixed value only if a !DOCTYPE is specified.Fixedpositioned elements are removed from the normal flow. The document and otherelementsbehave like the fixed positioned element does not exist.Fixed positioned elements canoverlapother elements. http://csetube.co.nr/
  40. 40. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353Relative PositioningA relative positioned element is positioned relative to its normal position.Exampleh2.pos_left{position:relative;left:-20px;} / nrh2.pos_right{ o. e.cposition:relative; ubleft:20px; et cs} ://The content of a relatively positioned elements can be moved and overlap other elements, tp htbut thereserved space for the element is still preserved in the normal flow.Exampleh2.pos_top{position:relative;top:-50px;}Relatively positioned element are often used as container blocks for absolutely positionedelements.Absolute PositioningAn absolute position element is positioned relative to the first parent element that has apositionother than static. If no such element is found, the containing block is <html>: http://csetube.co.nr/
  41. 41. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353Exampleh2{position:absolute;left:100px;top:150px;}27 / nrAbsolutely positioned elements are removed from the normal flow. The document andother o. e.celements behave like the absolutely positioned element does not exist.Absolutely ubpositioned et cselements can overlap other elements. ://Overlapping Elements tp htWhen elements are positioned outside the normal flow, they can overlap otherelements.The zindexproperty specifies the stack order of an element (which element should be placed in frontof, or behind, the others).An element can have a positive or negative stack order:Exampleimg{position:absolute;left:0px;top:0px;z-index:-1}An element with greater stack order is always in front of an element with a lower stackorder. http://csetube.co.nr/
  42. 42. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353All CSS Positioning PropertiesThe number in the "CSS" column indicates in which CSS version the property is defined(CSS1or CSS2).Property Description Values CSSbottomSets the bottom margin edge for apositioned box / nrautolength o. e.c% ubinherit et cs2 ://clip Clips an absolutely positioned element tp htshapeautoinherit2cursor Specifies the type of cursor to be displayedurlautocrosshairdefaultpointermove228e-resize http://csetube.co.nr/
  43. 43. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353ne-resizenw-resizen-resizese-resizesw-resizes-resizew-resizetext / nrwaithelp o. e.cleft ubSets the left margin edge for a positioned et csbox ://auto tp htlength%inherit2overflowSpecifies what happens if content overflowsan elements boxautohiddenscrollvisibleinherit2position http://csetube.co.nr/
  44. 44. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353Specifies the type of positioning for anelementabsolutefixedrelativestaticinherit2 / nrrightSets the right margin edge for a positioned o. e.cbox ubauto et cslength ://% tp htinherit2topSets the top margin edge for a positionedboxautolength%inherit2z-index Sets the stack order of an elementnumberautoinherit http://csetube.co.nr/
  45. 45. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353229What is CSS Float?With CSS float, an element can be pushed to the left or right, allowing other elements towrap around it.Float is very often used for images, but it is also useful when working with layouts.How Elements FloatElements are floated horizontally, this means that an element can only be floated left or / nrright, not o.up or down.A floated element will move as far to the left or right as it can. Usually this e.cmeans all ubthe way to the left or right of the containing element.The elements after the floating et cselement will ://flow around it.The elements before the floating element will not be affected. tp htIf an image is floated to the right, a following text flows around it, to the left:Exampleimg{float:right;}Floating Elements Next to Each OtherIf you place several floating elements after each other, they will float next to each other ifthereis room.Here we have made an image gallery using the float property:Example.thumbnail{float:left; http://csetube.co.nr/
  46. 46. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353width:110px;height:90px;margin:5px; }2.10 SOME OTHER USEFUL STYLE PROPERTIESCSS ListsThe CSS list properties allow you to:o Set different list item markers for ordered lists30 / nro Set different list item markers for unordered listso Set an image as the list item marker o. e.cList ubIn HTML, there are two types of lists: et csunordered lists - the list items are marked with bullets ://ordered lists - the list items are marked with numbers or letters tp htWith CSS, lists can be styled further, and images can be used as the list item marker.Different List Item MarkersThe type of list item marker is specified with the list-style-type property:Exampleul.a {list-style-type: circle;}ul.b {list-style-type: square;}ol.c {list-style-type: upper-roman;}ol.d {list-style-type: lower-alpha;}Some of the property values are for unordered lists, and some for ordered lists.Values for Unordered ListsValue Descriptionnone No markerdisc Default. The marker is a filled circlecircle The marker is a circle http://csetube.co.nr/
  47. 47. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353square The marker is a squareValues for Ordered ListsValue Descriptionarmenian The marker is traditional Armenian numberingdecimal The marker is a number31decimal-leading-zero The marker is a number padded by initial zeros (01, 02, 03, etc.)georgian The marker is traditional Georgian numbering (an, ban, gan, etc.) / nrlower-alpha The marker is lower-alpha (a, b, c, d, e, etc.) o.lower-greek The marker is lower-greek (alpha, beta, gamma, etc.) e.clower-latin The marker is lower-latin (a, b, c, d, e, etc.) ublower-roman The marker is lower-roman (i, ii, iii, iv, v, etc.) et csupper-alpha The marker is upper-alpha (A, B, C, D, E, etc.) ://upper-latin The marker is upper-latin (A, B, C, D, E, etc.) tp htupper-roman The marker is upper-roman (I, II, III, IV, V, etc.)Note: No versions of Internet Explorer (including IE8) support the property values"decimalleading-zero", "lower-greek", "lower-latin", "upper-latin", "armenian", or "georgian" UNLESS aDOCTYPE is specified!An Image as The List Item MarkerTo specify an image as the list item marker, use the list-style-image property:Exampleul{list-style-image: url(sqpurple.gif);}The example above does not display equally in all browsers. IE and Opera will displaythe http://csetube.co.nr/
  48. 48. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353image-marker a little bit higher than Firefox, Chrome, and Safari.If you want the image-markerto be placed equally in all browsers, a crossbrowser solution is explained below.Crossbrowser SolutionThe following example displays the image-marker equally in all browsers:Exampleul{ / nrlist-style-type: none;32 o. e.cpadding: 0px; ubmargin: 0px; et cs} ://li tp ht{background-image: url(sqpurple.gif);background-repeat: no-repeat;background-position: 0px 5px;padding-left: 14px;}Example explained:For ul:o Set the list-style-type to none to remove the list item markero Set both padding and margin to 0px (for cross-browser compatibility)For li:o Set the URL of the image, and show it only once (no-repeat)o Position the image where you want it (left 0px and down 5px)o Position the text in the list with padding-left http://csetube.co.nr/
  49. 49. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353List - Shorthand propertyIt is also possible to specify all the list properties in one, single property. This is called ashorthand property.The shorthand property used for lists, is the list-style property:ul{list-style: square url("sqpurple.gif");}When using the shorthand property, the order of the values are: / nrlist-style-type o.list-style-position (for a description, see the CSS properties table below) e.clist-style-image ubIt does not matter if one of the values above are missing, as long as the rest are in the et csspecified ://order. tp ht33All CSS List PropertiesThe number in the "CSS" column indicates in which CSS version the property is defined(CSS1or CSS2).Property Description Values CSSlist-style Sets all the properties for a list in one declarationlist-style-typelist-style-positionlist-style-imageinherit1list-style-image Specifies an image as the list-item markerURL http://csetube.co.nr/
  50. 50. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353noneinherit1list-style-positionSpecifies if the list-item markers should appearinside or outside the content flowinsideoutside / nrinherit1 o. e.clist-style-type Specifies the type of list-item marker ubnone et csdisc ://circle tp htsquaredecimaldecimal-leading-zeroarmeniangeorgianlower-alphaupper-alphalower-greeklower-latinupper-latinlower-romanupper-romaninherit1 http://csetube.co.nr/
  51. 51. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT235334CSS TablesThe look of an HTML table can be greatly improved with CSS:Company Contact CountryAlfreds Futterkiste Maria Anders GermanyBerglunds snabbköp Christina Berglund SwedenCentro comercial Moctezuma Francisco Chang MexicoErnst Handel Roland Mendel Austria / nrIsland Trading Helen Bennett UKKöniglich Essen Philip Cramer Germany o. e.cLaughing Bacchus Winecellars Yoshi Tannamuri Canada ubMagazzini Alimentari Riuniti Giovanni Rovelli Italy et csNorth/South Simon Crowther UK ://Paris spécialités Marie Bertrand France tp htThe Big Cheese Liz Nixon USAVaffeljernet Palle Ibsen DenmarkTable BordersTo specify table borders in CSS, use the border property.The example below specifies ablackborder for table, th, and td elements:Notice that the table in the example above has doubleborders. This is because both the table, th, and td elements have separate borders.Exampletable, th, td{border: 1px solid black;}35To display a single border for the table, use the border-collapse property. http://csetube.co.nr/
  52. 52. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353Collapse BordersThe border-collapse property sets whether the table borders are collapsed into a singleborder orseparated:table{border-collapse:collapse;} / nrtable,th, td{ o. e.cborder: 1px solid black; ub} et csTable Width and Height ://Width and height of a table is defined by the width and height properties.The example tp htbelow setsthe width of the table to 100%, and the height of the th elements to 50px:table{width:100%;}th{height:50px;}CSS CURSORSAlthough the cursors will not have the customized look in other browsers it usuallydoesnt ruin http://csetube.co.nr/
  53. 53. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353anything. These browsers will simply show the normal arrow-cursor which would besame caseas if you refrained from cus tomizing cursors at all.So unless the page really doesnt workwithout the customized cursor there shouldnt be technical reasons for choosing notto.Howeverthere might be other reasons for thinking twice before adding custom cursor to yourpages. Manyusers are easily confused or irritated when a site breaks the standard user interface. / nrAdding A Customized CursorThe syntax for a customized cursor is this: o. e.c(Position the mouse over each link to see the effect) ubSelector {cursor:value} et cs36 ://For example: tp ht<html><head><style type="text/css">.xlink {cursor:crosshair}.hlink{cursor:help}</style></head><body><b><a href="mypage.htm" class="xlink">CROSS LINK</a><br><a href="mypage.htm" class="hlink">HELP LINK</a></b></body> http://csetube.co.nr/
  54. 54. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353</html>2.11 CASE STUDYCase Study: Revamping an Existing SiteApril 27, 2010 32 Comments .Jacques Soudan, a client and friend I met through DivitoDesign, sent me an email with aguest post abouta case study on revamping his outdated site. Enjoy reading about his revamping project.Below is a case-study on how I used the Blueprint CSS Framework and jQuery / nrJavaScript library to o.rebuild an outdated site – somehow you helped me with it, so in return I share my work, e.choping it can be ubof future use. Thank you! et csThe website we are talking about was build back in 2001. As you would understand we ://are talking about tp hta heavily-aged website that had the following ‘problems’ or difficulties:using some CSS, but mainly tablesthe menu is a separate JS file: easy to maintain, but it doesn’t look too gooda few years ago I added the rounded corners (using JavaScript) and the redbackdrop/border, butthat doesn’t look too flashy eitherthe source is not W3C compliant (outdated code like <br> – instead of the current<br/&nsbp;>)37the footer is embedded in each page (hard to update for about 100 pages)in general, look & feel is not ‘up to date’the enquiry form uses a JavaScript file that is no longer supportedin Firefox, the banner is not centered (in IE it is…..) and looks like this (also in a table –probably http://csetube.co.nr/
  55. 55. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353easy to fix, but never got to it):For a website in the modern internet world, that is not acceptable. For this reason, Icompiled a list offeatures I would like to have on the modern, good looking website.Site Features we NeedW3C compliant codeCSS and HTML in separated filesbrowser compatibility / nrrounded corners & drop shadow1 central menu file o. e.cJavaScript support (instead of using several separate scripts that (might) interfere) ubstructured design (layout without tables) et csWhere to Start? ://Last year I read this very useful article about building HTML/CSS sites using a template. tp htThis templatehas a grid CSS layout and the jQuery framework build in. I had seen those before, butwas not yet usingthem in combination with WordPress.I also found this site for dropshadow & rounded corners. As I wanted to avoid too manyjQuery plugins, Ididn’t use jQuery for the round corners. So far my experience is that jQuery roundedcorners can interferewith other plugins, needing too much work to fix (and warrant) it.For this reason, the no-Java-script solution seemed preferable. Provided, it had worked –it did not – as ituses several <divs>, it messed up the Blueprint classes, it didn’t display properly‘underneath’ the header http://csetube.co.nr/
  56. 56. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353images etc. The typical pain when it comes to CSS and different techniques in differentbrowsers.So…. dropping Blueprint? Or dropping the very sleek (and easy!) rounded corners?Dilemma there…..Until playing around with Blueprint a bit more…. as it comes with grid.png, to displaythe columns fordesign purposes, which you can switch off when you go live. But then, if you can removethat backdrop, / nrwhy not adding your own???? Using my own image I had created for the initialtechnique, but thought o. e.cuseless now, it worked flawlessly! ub38 et csHere is what I did – in the Blueprint folder, there is a screen.css – just add one line and ://comment the gridline tp ht– that’s all!In your container-DIV, just add the ‘showgrid’-class: (you need that anyway, if you wantto display theBlueprint-columns):The grid.png is repeated both horizontally & vertically, but my one large image is not, soit fits perfectly –I stretched it to 1600px, as the backdrop is hardly ‘repeatable’: it is a scanned letterhead-paper with aunique texture – using only a small slice/strip and repeating that would make it lookunnatural. And I usea footer-image – including it in php, it neatly fits underneath the length of the actualcontent – not the fullbackground image of 1600px – it ‘stretches’ to the maximum height, but resizes to theneeded height. http://csetube.co.nr/
  57. 57. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353I wanted to use this menu for this website. One problem though: it has no single menufile (eg. menu.php)you can add to your website. After building that menu.php file myself, the jQuery menuworked perfectly.When I created the header.php and footer.php files and included in the website usingPHP, they are easilyupdated in those 100 different pages. Depending on the page of the website, I can nowinclude different / nrimages via one page. Pretty efficient.The Template o. e.cWith all this now in place, this is how the code looks like (this is what I will use as the ub‘page-template’ et cs(there is some test copy in, to show in Blueprint columns – all the ‘body-text’ for an ://individual page is tp htplaced within the <content-div> (both <span>-classes, in blue) – everything remains inplace, nofluid/stretched text (in different browsers).<<script src="supportfiles/js/jquery.js" type="text/javascript"></script><script src="supportfiles/menu/menu.js" type="text/javascript"></script><div id="container" class="container showgrid">39<div id="header" class="span-24 prepend-top"><div class="prepend-1 span-22 append-1"></div></div><!-- end header --><div id="CONTENT" class="prepend-1 span-22 append-1 prepend-top"><div class="span-17"> http://csetube.co.nr/
  58. 58. GKMCET Lecture PlanSubject Name: Web TechnologySubject Code: IT2353<h1>Main content</h1>Put your main text here (17 columns wide).</div><div class="span-5 last"><h3>Sidebar</h3>Some sidebar on the right (5 columns wide).</div></div> / nr<!-- END CONTENT --><div id="footer" class="span-24"></div> o. e.c<!-- end footer --> ub</div> et cs<!-- end container --> ://Blueprint-grid enabled: tp ht40And this is how it looks like (pictures not optimized yet):2.12 . CLIENT SIDE PROGRAMMING:JAVA SCRIPTIntroductionJavaScript is most commonly used as a client side scripting language. This means thatJavaScriptcode is written into an HTML page. When a user requests an HTML page with JavaScriptin it,the script is sent to the browser and its up to the browser to do something withit.JavaScript canbe used in other contexts than a Web browser. Netscape created server-side JavaScript asa CGIlanguagethat can do roughly the same as Perl or ASP. There is no reason why JavaScript http://csetube.co.nr/