跨专业课外选修实验网页编程基础教学大纲(32学时).doc

目 录网页编程基础教学大纲1实验一 HTML基础、网页框架建立.2实验二 HTML的剩余于综合使用10实验三 CSS的基本语法、属性和值.13实验四 CSS的深入.17实验五 JavaScript的基本语法、事件23实验六 JavaScript内置对象、自定义对象28实验七 站点导航、网页时钟设计33实验八 浮动图片、购物程序的设计.38跨专业课外选修实验网页编程基础教学大纲（32学时） 郝晓青一、培养目标HTML这门基础的标识语言是一门实践性要求很高的课程，它要求学生能熟练掌握其操作，灵活的应用，将理论学习的知识不断的应用于实践中，创造出富有特色的网页，发挥学生的创造里。网页编程主要分为客户端和服务器编程，客户端的编程主要是JavaScript编程，服务器端的编程目前主要是3P技术，即：ASP、PHP和JSP。HTML技术可以使程序员轻松地编写出静态网页。但静态网页越来越适应不了新的挑战，于是SUN公司创建了一种脚本语言JavaScript，它可以和简单的HTML结合而方便地产生动态效果。在加上CSS（Cascading Style Sheets）中文意思为层叠样式表单的编程，主要是HTML技术、CSS技术和JavaScript技术。本实验主要是从这三方面出发，要求学生掌握其基本编程的能力。二、适用专业非计算机专业本、专科学生。三、实验内容和学时安排章节标题课时实验一HTML基础、网页的建立4实验二HTML的深入与综合使用4实验三CSS的基本语法属性和值4实验四CSS的深入4实验五JavaScript的基本语法、事件4实验六JavaScript内置对象、自定义对象4实验七站点导航、网页时钟的设计4实验八浮动图片、购物程序的设计4合 计32 软、硬件环境（软件：Windows 9x/2000、XP，硬件：多媒体电脑）四、实验内容实验一 HTML基础、网页框架的建立（4学时）实验目的和要求1、 熟悉HTML的基本框架：掌握HTML的几种简单而重要的常用标记处理。2、 熟悉Web网页的编辑方法和基本操作。3、 理解HTML的常用技术。实验必读用HTML编写的文档又叫超文本文件，由于HTML文件是普通的ASCII文件，所以只要有一个字符编辑器就可以编写网页文件。你可以充分利用手头已有的编辑工具（记事本、写字版等）来完成这项工作。在最初学习编写HTML文件时，并不需要网络服务器，只要有一个可以编辑HTML文件的编辑器和一个可浏览HTML文件的浏览器就可以了。当你写好一段HTML文件后，应该先把它保存起来，并要为这个文件起个名字，起文件名要特别注意：1、 若在DOS系统中，扩展名要用“htm”；若在UNIX系统中，扩展名要用“html”.因为绝大多数的网络软件要求文件具备这样的扩展名。2、 在文件名中不要使用空格和特殊字符。3、 在UNIX系统中，文件名中的字母大小写是敏感的。可以通过双击html文件或启动IE浏览器来打开文件。下面是一些重要标记：HTML文件结构（Document Structures）文件的全部内容头元素，元素属性和内容网页名称或标题HTML的标记定义CSS样式体元素，元素属性和内容（网页描述信息），(网页标题)HEML文件的正文写在这里语言字符集（Charsets）的信息#=us-ascii, iso-8859-1, x-mac-roman, iso-8859-2, x-mac-ce, iso-2022-jp, x-sjis,x-euc-jp, euc-kr, iso-2022-kr, gb2312, gb_2312-80, x-euc-tw, x-cns11643-1,x-cns11643-2, big5可在HTML文件中设置MIME字符集信息。在浏览主页时，最好自己在浏览器的选项菜单内选择相应的语言（language encoding）。但是如果HTML文件里写明了设置，浏览器就会自动设置语言选项。尤其是主页里用到了字符实体（entities），则该主页就应该写明字符集信息。否则，在浏览该主页时，若未正确设置语言选项，显示将可能混乱。背景色彩和文字色彩bgcolor 背景色彩text 非可链接文字的色彩link 可链接文字的色彩alink 正被点击的可链接文字的色彩vlink 已经点击（访问）过的可链接文字的色彩 #=rrggbb色彩是用16进制的 红绿蓝（redgreenblue, RGB）值来表示。16进制的数码有：0，1，2，3，4，5，6，7，8，9，a，b，c，d，e，f。背景图象页面空白（Margin）页面左边的空白页面上方的空白（天头） #=margin amount链接（Link）基本语法a href=”URL”这是一个链接的例子。点一下带下划线的文字！这是一个链接的例子。点一下带下划线的文字！跳转到页面的另外一个地方跳转到下一个”链接点”下一个链接点跳转到下一个”链接点”下一个链接点跳转到另一个页面的某个地方跳转到另一个页面的某个地方。跳转到另一个页面的某个地方。 开一个新的（浏览器）窗口（Target Window）开一个新窗口！开一个新窗口！ 标尺线 - #=left, right- (无渐变)#=rrggbb 16 进制 RGB 数码，或者是下列预定义色彩：Black, Olive(橄榄色)，Teal(茶色)，Red，Blue，Maroon(栗色)，Navy(海蓝)，Gray（灰色），Lime(石灰色)，Fuchsia(紫红色)，White，Green，Purple(紫色)，Silver，Yellow，Aqua(浅绿)实验内容和步骤（1）录入以下程序web1-1.html：学校概况学校概况学校简介被誉为“中国民族电子工业摇篮”的电子科技大学坐落在历史悠久。风光绮丽的文化古都-都。1956年，根据周恩来总理亲自部署有上海交通大学。华南工学院和南京工学院的电子类学科搬迁合并，建立了新中国第一所新兴电子信息高等学府，电子科技大学前身-成都电讯工程学院。学校1960年被列为全国重点大学；1997年首批成为“211工程”重点学校；2001年9月，步入部省重点共建大学行列。校内景点有:电子科大主楼，通信大楼，沙河边，新图书馆，计算机学院大楼，电子信息产业大厦，体育馆等 =（2）调试以下程序web1-2.html：New Page 1让你的网页更加漂亮！-缺省让你的网页更加漂亮！-B让你的网页更加漂亮！-I让你的网页更加漂亮！-TT让你的网页更加漂亮！-U让你的网页更加漂亮！-BIG让你的网页更加漂亮！-SMALL让你的网页更加漂亮！-S春眠不觉晓，处处闻啼鸟-EM春眠不觉晓，处处闻啼鸟-STRONG-春眠不觉晓，处处闻啼鸟-CITE春眠不觉晓，处处闻啼鸟-CODE春眠不觉晓，处处闻啼鸟-SAMP/SAMP?春眠不觉晓，处处闻啼鸟-KBD春眠不觉晓，处处闻啼鸟-VAR春眠不觉晓，处处闻啼鸟-DFN春眠不觉晓，处处闻啼鸟夜来风雨声，花落知多少(SIZE=1)夜来风雨声，花落知多少(SIZE=2)夜来风雨声，花落知多少(SIZE=3)夜来风雨声，花落知多少(SIZE=4)夜来风雨声，花落知多少(SIZE=5)夜来风雨声，花落知多少(SIZE=6)夜来风雨声，花落知多少(SIZE=7)SIZE=2 SIZE=6SIZE=10WIDTH=100%WIDTH=100%WIDTH=100%对下面两行的内容使用了注释标记被注释的文字不显示以下是著作权标志：©：电子科大出版社以下是商标符号：®:使用电子科大徽标显示结果： （3）调试以下程序web1-3.html:位于成都的电子科技大学,是一所以工为主，理工渗透，理，工，管，文协调发展的教育部直属高校A.被誉为“中国民族电子工业摇篮”的电子科技大学坐落在历史悠久，风光绮丽的文化古都成都。B.1956年，根据周恩来总理亲自部署有上海交通大学。华南工学院和南京工学院的电子类学科搬迁合并，建立了新中国第一所新兴电子信息高等学府，电子科技大学前身-成都电讯工程学院。C. 学校1960年被列为全国重点大学；1997年首批成为“211工程”重点学校；2001年9月，步入部省重点共建大学行列。（4）调试并运行以下程序web1-4.html跨专业课外选修实验跨专业课外选修实验!体会有序列表-实验一：HTML 基础，网页框架的建立实验二：HTML的深入与综合使用实验三：CSS的基本语法，属性和值.!体会无序列表-实验一：HTML基础，网页框架的建立实验二：HTML的深入与综合使用实验三：CSS的基本语法，属性和值.!体会在列表中加入连接-实验一：HTML基础，网页框架的建立实验二：HTML的深入与综合使用实验三：CSS的