Web-Sites-Design-and-Programming-7计算机科学与技术---网站设计与编程--双语教学课件.pptVIP

Web Sites Design and Programming Lecturer: Lijie Guo Room: XNA508 Phone: Email: guo_lijie163@163.com Dynamic Documents with JavaScript Overview Dynamic XHTML Element positioning and moving Changing Colours and Fonts Dynamic Content Reacting to a Mouse Click Dynamic XHTML A dynamic XHTML document is one whose tag attributes, tag contents, or element style properties can be changed after the document has been displayed and is still being displayed by a browser Such changes are made with an embedded script (JavaScript) that accesses the elements of the document as objects in the associated DOM structure Not a new language or standard; uses existing standards (CSS and JavaScript) to permit interaction with Web pages. Element Positioning CSS-P: Cascading Style Sheets with Positioning was released by W3C in 1997,Completely supported by IE6 and NS7 The position of any element is dictated by the three style properties: position, left, and top The three possible values of position are absolute, relative, and static Absolute Positioning p style = position: absolute; left: 50px; top: 100px; E.G. WDP-7/absPos.html If an element is nested inside another element and is absolutely positioned, the top and left properties are relative to the enclosing element Negative values of “top” displace upward. Negative values of “left” displace left. E.G. WDP-7/absPos2.html Relative Positioning If no top and left properties are specified, the element is placed exactly where it would have been placed if no position property were given But it can be moved later If top and left properties are given, they are offsets from where it would have placed without the position property being specified E.G. WDP-7/relPos.html Static Positioning The default value if position is not specified is as for relative. The difference is that it cannot be dynamically changed later Moving Elements (self-study) If position is set to either abs