6HTML网页制作

1课程简介本门课程有三部分内容组成：HTML语言部分：介绍制作网页的最基本的知识CSS样式部分：进一步美化所制作的网页，设计各种格式JavaScript部分：在页面中增加各种动态控制内容2补充说明：当今Web编程技术纵览CJ2EE—JavaEEJ2SEJava网络基础J2EEWeb开发JSP、ServletJavaBean、EJBJ2EE框架技术Struts、HibernateSpring、AjaxJSFhtml、CSS、JavaScript数据库AccessSQLServerOracle、MySQLJDBC-ODBC数据库SQLServerOracle、MySQLJDBCC/S编程B/S—Web编程ASPASP.NETC#PHP静态网页动态网页3HTML页面应用4HTML页面应用5第1章HTML、CSS、JavaScript综述1.1HTML、CSS、JavaScript代码示例1.2HTML、CSS、JavaScript的基本概念1.3如何学习HTML、CSS、JavaScript1.4HTML、CSS、JavaScript综合应用61.1HTML/CSS/JavaScript代码示例htmlheadtitle第一个HTML文件/title/headbodyh2align=center这是HTML代码/h2hr/p我们在学习HTML。/p/body/html【例h1-0.html】html页面设计第一个html页面：传统html属性文本居中对齐7【例h1-00.html】html+CSS页面htmlheadtitle第一个HTML文件/titlestyletype=text/cssh2{color:blue;font-family:黑体;text-align:center;}p{color:red;}/style/headbodyh2这是HTML代码/h2hr/p我们在学习HTML。/p/body/html注意：样式的修改会影响到每个应用该样式的页面效果8【例h1-000.html】html+CSS+JavaScript页面设计页面如图：弹出对话框问候。9【h1-000.html】htmlheadtitle第一个HTML文件/titlestyletype=text/cssh2{color:blue;font-family:黑体;text-align:center;}p{color:red;}/stylescriptlanguage=JavaScripttype=text/javascript!--//JavaScript代码与html注释标记必须换行alert(欢迎您光临我们的网站);//--/script/headbodyh2这是HTML代码/h2hr/p我们在学习HTML。/p/body/html101.4小实例讲解htmlheadtitle第一个实例/titlestyletype=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的背景样式、h2标题样式及一个段落样式。11bodycenterh2第一个HTML、CSS、JavaScript实例/h2/centerhrpclass=p11.HTML是网页架构基础。/ppclass=p12.用CSS定义背景图片的位置、标题2和段落的格式。/ppclass=p13.用JavaScript编写文字随鼠标旋转的特效。/p在段落中应用前面所定义的样式p1；此时若修改p1中颜色定义为蓝色，结果会如何？12SCRIPTLANGUAGE=JavaScriptif(document.all){yourLogo=第一个HTML、CSS、JavaScript实例;logoFont=黑体;logoFont=Arial;logoColor=ff0000;yourLogo=yourLogo.split('');L=yourLogo.length;TrigSplit=360/L;Sz=newArray()logoWidth=100;logoHeight=-30;ypos=0;xpos=0;step=0.03;currStep=0;设置旋转的文字内容、字体及颜色将旋转的内容分割为单个字符设置每个字符占据的角度设置旋转椭圆的宽度和高度设置旋转椭圆的初始圆心位置设置旋转的速度13document.write('divid=outerstyle=position:absolute;top:0px;left:0pxdivstyle=position:relative');for(i=0;iL;i++){document.write('divid=iestyle=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');functionMouse(){ypos=event.y;xpos=event.x-5;}document.onmousemove=Mouse;将所有内容以图层方式显示设置转动文字的圆心坐标设置鼠标移动时调用函数Mouse14functionanimateLogo(){outer.style.pixelTop=document.body.scrollTop;for(i=0;iL;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].style.fontSize=Sz[i]/0.9;}currStep-=step;setTimeout('animateLogo()',20);}window.onload=animateLogo;设置每个层的左上角顶点坐标设置转动文字的大小设置每隔20毫秒调用函数设置页面加载时调用函数15第2章HTML基础HTML语言全称：超文本标记语言——HypertextMarkupLanguage为什么要学习HTML语言？可视化网页开发工具FrontPage、DreamWeaver等使得用户在不懂任何HTML代码的情况下能够开发网页，但是它们都会产生大量的垃圾代码，并且不易修改，学习HTML语言后，能够轻松地清除垃圾代码，并任意在原页面内容进行修改。16目标了解HTML的基本概念描述HTML文档的结构命名HTML文件17关于HTMLHTML能独立于各种操作系统平台，在HTML语言中可以加入图片、声音、动画和影视等内容HTML语言编辑器：可使用任意文本编辑器编辑和查看HTML文件内容（此处指文件代码），常用的有记事本、FrontPage和DreamWeaver等HTML文件运行方式：双击即可运行HTML文件结果显示：在浏览器中显示查看任意网页的“源文件”：在浏览器中浏览页面——点击“查看”菜单下的“源文件”命令即可18一个HTML文件观察如下代码（保存为1-1.htm，并在浏览器中运行）HTMLHEADTITLE第一个HTML文件/TITLE/HEADBODYtext=redH2align=center第一个HTML文件/h2HRP这是第一个使用HTML标签编写的网页文件。/p/BODY/HTML192.1HTML文件的结构HTMLHEADTITLE学习HTML/TITLE/HEADBODYH1欢迎来到HTML世界/H1/BODY/HTMLHTML网页头部部分主体部分HTML…/HTML标签标记HTML文档的开始和结束这部分包括标题和其他说明信息。包括在HEAD…/HEAD标签内，一般来说，位于头部的内容都不会在网页内直接显示这部分包含文本、图像和链接。它包括在BODY…/BODY标签内20HTMLHEADTITLE学习HTML/TITLE/HEADBODYBGCOLOR=“green”H1欢迎来到HTML世界/H1/BODY/HTML2.2.2属性语法BODYBGCOLOR=“green”标签标识BODY元素属性提供有关元素的附加信息值分配给属性的内容在HTML标签中可以放置各种属性，使用属性后需要设置属性值，如21水平线属性设置修改h1-0.htm文件，设置水平线属性如下：粗细1，对齐方式为左对齐，宽度为整个屏幕的75%需要设置的属性及属性值为：size=1align=leftwidth=75%222.4编写文件的注意事项所有标签都是…结构，即tag格式大多数标签需要成对出现，起始标签tag和结束标签/tag在一组标签中可以嵌套另一组标签，如htmlhead…/head/html所有HTML代码不区分大小写标签要正确输入，例如若是将/title标签写，页面中将不显示内容HTML文件的扩展名可设置为.htm或.html23应用dreamWeaver环境在dreamWeaver环境中创建h1-0.html文件内容，保存为h1-0-1.html24第2章小结什么是HTML，如何编辑和运行HTML文件如何查看任意网页的HTML代码？对更新后的HTML代码只需要在浏览器中刷新原有结果即可变化HTML文件的结构：头部和主体HTML文件的扩展名25第3章HTML文件的整体构架学习目标掌握HTML头部包含的内容，掌握部分META标签的应用掌握主体内容中正文颜色设置、背景设置及页面边距设置263.1HTML头部内容HTML头部主要包括一些基本描述的语句、页面标题设置、JavaScript代码设置和CSS样式设置常用的头部标签如下：base基底网址标签（略）basefont基准文字标签title标题标签（略）meta元信息标签style样式标签link外部链接标签script脚本标签273.1.3基准文字标签basefont该标签可以设置基准的文字字体、字号和颜色，若文档中相关标签没有定义文字或段落样式时，将套用基准文字样式。语法格式如下：basefontface=“font-name,font-name,…”size=“value”color=“value”定义字体，可以包含多种字体，显示时将取用存在的、最靠前的字体设置字号，取值范围为：1～7，＋1～＋7，－1～－7设置颜色，取值可以是颜色的英文单词，也可是红、绿、蓝三元色的16进制组合，如FF0000