HTML网页制作.ppt

课程简介 本门课程有三部分内容组成： HTML语言部分：介绍制作网页的最基本的知识 CSS样式部分：进一步美化所制作的网页，设计各种格式 JavaScript部分：在页面中增加各种动态控制内容 补充说明：当今Web编程技术纵览 HTML页面应用 HTML页面应用 第1章 HTML、CSS、JavaScript综述 1.1 HTML/CSS/JavaScript代码示例 【例h1-0.html】html页面 【例h1-00.html】html+CSS页面 【例h1-000.html】html+CSS+JavaScript页面 【h1-000.html】 1.4小实例讲解 html head title第一个实例/title style type=text/css !-- body{background-image:url(1-4-1.jpg);background-attachment:scroll;background-position:100% 100%; background-repeat:no-repeat} h2{font-family:黑体;font-size:22pt;color:red} .p1{font-size:20px;color:#000000;text-align:left} -- /style /head body center h2第一个HTML、CSS、JavaScript实例/h2 /center hr p class=p11.HTML是网页架构基础。/p p class=p12.用CSS定义背景图片的位置、标题2和段落的格式。/p p class=p13.用JavaScript编写文字随鼠标旋转的特效。/p SCRIPT LANGUAGE=JavaScript if (document.all) { yourLogo = 第一个HTML、CSS、JavaScript实例; logoFont = 黑体; logoFont = Arial; logoColor = ff0000; yourLogo = yourLogo.split(); L = yourLogo.length; TrigSplit = 360 / L; Sz = new Array() logoWidth = 100; logoHeight = -30; ypos = 0; xpos = 0; step = 0.03; currStep = 0; document.write(div id=outer style=position:absolute;top:0px;left:0pxdiv style=position:relative); for (i = 0; i L; i++) { document.write(div id=ie style=position:absolute;top:0px;left:0px;width:20px;height:20px;font-family:+logoFont+;font-size:100px; +color:+logoColor+;text-align:center+yourLogo[i]+/div); } document.write(/div/div); function Mouse() { ypos = event.y; xpos = event.x - 5; } document.onmousemove=Mouse; function animateLogo() { outer.style.pixelTop = document.body.scrollTop; for (i = 0; i L; i++) { ie[i].style.top = ypos + logoHeight * Math.sin(currStep + i * TrigSplit * Math.PI / 180); ie[i].style.left = xpos + logoWidth * Math.cos(currStep + i * TrigSplit * Math.PI / 180); Sz[i] = ie[i].style.pixelTop - ypos; if (Sz[i] 5) Sz[i] = 5; ie[i].styl