网页设计与开发实验课件《网页设计与开发实验教学大纲》_第1页
网页设计与开发实验课件《网页设计与开发实验教学大纲》_第2页
网页设计与开发实验课件《网页设计与开发实验教学大纲》_第3页
网页设计与开发实验课件《网页设计与开发实验教学大纲》_第4页
网页设计与开发实验课件《网页设计与开发实验教学大纲》_第5页
已阅读5页，还剩31页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

《网页设计与开发》实验教学大纲一、课程简介《网页设计与开发》是高等院校计算机及其相关专业的一门重要的基础课程，也是是一门实践性和技能性要求都很强的学科。其实验课程主要围绕网页基本元素、css和Javascript、页面布局和整站建设等理论内容的实践实训进行开展。其主要内容包括练习网页设计的基本概念和文档结构，完成相关工具的安装，练习网页元素在实际应用中的使用，包含文字与段落涉及的图文混排方式、列表涉及的导航制作、表格布局局部页面等，练习div+css的页面布局，javascript在交互式网页开发中的基本应用，以及目前流行的HTML5技术的应用，练习从需求分析到栏目设计最终进行布局和细节处理以及发布的整站建设过程。二、实验教学的总体目标和要求实验教学应充分考虑学生对理论知识的巩固和实践技能的提升要求，从培养学生面向商业化网页开发的角度出发，通过典型页面案例，讲述和示范逐步分解其中的技术实现，使学生能够对技术在具体设计中的灵活使用有深刻的感受。通过本实验课程的学习，使学生掌握各种网页元素的使用。例如，表格、文本、图像、超级链接、层和表单等。熟悉一些网页布局方法。掌握网站的开发流程，如建站规划、页面制作、优化及发布等相关知识。课程完成后学生应能够理解网页设计的基本原则，掌握网页基本制作方法和技巧，并自主设计开发各种网页、完成一定规模的网站开发。在此技术之上，了解并尝试使用HTML5技术来实现之前的基础网页效果。三、实验项目与学时分配（39个实验项目，共计36学时）实验项目与学时分配序号实验项目学时必开/选开实验类型备注1优秀网站赏析 1必开基础2体会超链接在网页中的广泛应用1必开基础3多种url资源的访问方法。 必开基础4使用记事本编写网页 必开基础5了解EditPlus编辑器 必开基础6了解浏览工具的安装 选开基础7HTML文件的编写规则 1必开基础8标记元素的属性 必开基础9利用style标记定义样式 1必开基础10唐诗页面设计 1必开设计11文章排版 1必开设计12新闻列表的实现 1必开设计13利用无序列表制作页面垂直导航和水平导航 2选开综合14电子相册的实现 3必开设计15新闻列表的超链接制作 必开设计16电子相册的超链接制作选开综合17利用书签链接制作帮助文档 1选开设计18在网页中实现图文混排 1必开基础19成绩登记表的制作 1必开基础20产品介绍页面的制作1选开综合21会员登陆 1必开设计22调查问卷 1必开设计23在线预订客房表单 1选开综合24常用页面布局设计 1必开基础25css文件的四种引用方式 1必开基础26利用CSS定位页面元素1必开设计27用DIV+CSS布局网页结构 2选开综合28认识JavaScript 1必开基础29创建自定义函数 1必开基础30建立外部js文件 必开基础31对象创建与复制 1必开基础32表单验证 1必开设计33动态改变样式 1选开综合34Canvas的使用并绘图1必开基础35HTML5中新增表单开技术1必开基础36HTML5中多媒体开发技术1必开基础37Cookie操作 1必开基础38网站设计规划 1选开综合39IIS服务器安装及站点本地发布1必开基础四、教学方法本课程教学由简入深，主要采用以下教学方法：（1）模仿精彩优秀的网站，了解其效果实现方法，并将其应用到实验中。（2）指定配套实验教材中的精典实例，让学生操作实现。（3）综合运用基本知识点，实现复杂综合功能。四、实验教学内容实验一、优秀网站赏析1.实验目的要求通过对不同类型、不同风格、不同特色的优秀网站的欣赏，使学生对网站制作课程有一个初步了解，诱发学生的学习兴趣。同时指导学生分析各类网站的总体布局、色彩搭配、内容规划等，为后面的学习打基础。2.实验主要内容各种不同类型和风格的网站地址如下：综合门户网站：新浪网政府网站：中华人民共和国中央人民政府/教育网站：清华大学/商业网站：淘宝网：3.实验类别专业基础4.实验要求必修实验二、体会超链接在网页中的广泛应用1.实验目的要求通过在浏览器地址栏中输入，打开新浪网主页面。点击图片，栏目等进入下一个页面，体会超链接的应用。理解网页可以通过字体，图片等不同的形式进行链接的方法。2.实验主要内容打开美的官网/，使用超级链接功能找到微波炉产品的具体信息，体会使用文字和图片等不同的超链接方式。3.实验类别专业基础4.实验要求必修实验三、多种URL资源的访问方法1.实验目的要求通过对各种资源网站的访问，理解统一资源定位符的定位方法及服务类型。掌握不同url资源的访问方法2.实验主要内容访问如下url资源地址如下：百度搜索：FTP://.hk/香港中文大学FTP站点3.实验类别专业基础4.实验要求必修实验四、使用记事本编写网页1.实验目的要求使用Windows操作系统中自带的记事本进行编辑，创建第一个网页，体会网页设计的基本方法。2.实验主要内容步骤1：打开记事本程序依次点击“开始菜单程序附件记事本”找到该程序。步骤2：输入代码在记事本的输入区，将如下代码粘贴到程序的工作区中。<html><head><title>我的个人主页</title></head><body><h2align=“center”>欢迎来到我的个人主页</h2><hr><p>这是我开发的第一个网页</p></body></html>3.实验类别专业基础4.实验要求必修实验五、了解EditPlus编辑器1.实验目的要求安装专业的文本编辑器EditPlus，体会其自动添加标记、高亮显示一些代码和英文拼字检查等功能。2.实验主要内容创建新文件。点击工具栏中的“文件新建”创建一个新文件，将实验四代码写入空白工作区。EditPlus自动将不同属性的内容使用不同颜色区别显示，并能够有效显示错误标签。3.实验类别专业基础4.实验要求选开实验六、了解浏览工具的安装1.实验目的要求熟悉市场上常用的浏览工具。了解其安装过程。2.实验主要内容微软（Microsoft）公司的InternetExplorer（俗称“IE”），Opera、MozillaFirefox（俗称“火狐狸”或“火狐”）、腾讯TT等浏览器的安装。3.实验类别专业基础4.实验要求必修实验七、HTML文件的编写规则1.实验目的要求掌握编写简单HTML文件的方法。设计一个具有HTML基本结构的页面，并显示出来。2.实验主要内容在一个页面上显示下面一首诗。早发白帝城李白朝辞白帝彩云间，千里江陵一日还。两岸猿声啼不住，轻舟已过万重山。创建页面2-1.html，完成内容的基本布局，在<body>内添加需要显示的元素。显示如下结果。3.实验类别专业基础4.实验要求必修实验八、标记元素的属性1.实验目的要求通过对文本的修饰，熟悉标记元素的属性设置方法。2.实验主要内容针对实验七中的页面进行修饰，要求将内容居中排列该诗标题的颜色改为#B22222的色值，适当修饰该诗内容的字间距和行间距。修饰诗的标题样式；修饰内容的字间距和行间距。运行效果如下。3.实验类别专业基础4.实验要求必修实验九、利用style标记定义样式1.实验目的要求掌握利用<head>标记内嵌入<style>标记的方法，并定义通用的样式体会这种方法与直接使用标记属性的不同及其优缺点。2.实验内容利用实验八的程序进行修改，在<head>内嵌入<style>标记；在<style>标记内添加样式，并在正文中引用。显示如下结果。3.实验类别专业基础4.实验要求必修实验十、唐诗页面设计1.实验目的要求学习如何通过对文字与段落属性的设置，来提高文字的艺术表现力。2.实验主要内容利用一首唐诗的素材，要求综合运用字体、字号、字间距、行间距、颜色和对齐方式等属性的设计，用一个独立的页面设计一个有良好视觉效果和阅读效果的网页。达到如下显示效果3.实验类别专业基础4.实验要求必修实验十一、文章排版1.实验目的要求通过对一篇文章的标题、来源、内容简介和正文四个不同的部分的设置，掌握字体、颜色、行间距、页面布局等标记和属性的综合运用。2.实验主要内容利用海伦凯勒的《假如给我三天光明》中的一节文章的部分内容（全文参见实验指导书），利用掌握的有关文本型页面设计的基本规则，用一个独立的网页把它表现出来。显示如下结果。3.实验类别专业基础4.实验要求必修实验十二、新闻列表的实现1.实验目的要求掌握列表标记及其常用样式属性。理解有序列表与无序列表的使用场景。掌握常见新闻列表的实现方法。2.实验主要内容用列表实现一个新闻显示版块，要求利用列表方法，适当运用字体、字号间距等的修饰完成新闻列表的定义。显示结果如下3.实验类别专业基础4.实验要求必修实验十三、利用无序列表制作页面垂直导航和水平导航1.实验目的要求熟悉常见导航形式，并能够利用无序列表完成简单的导航设计。2.实验主要内容采用无序列表实现一个班级网站的导航，并添加样式进行修饰，实现班级网站的水平和垂直导航。显示如下结果。页面垂直导航页面水平导航3.实验类别专业基础4.实验要求选开实验十四、电子相册的实现1.实验目的要求利用列表实现网页中常见的图片浏览模式。体会列表的不同用途。2.实验主要内容定义页面结构，完成内容的基本布局；利用无序列表标记添加所需显示的图片；对无序列表定义样式。显示如下结果。3.实验类别专业基础4.实验要求必修实验十五、新闻列表的超链接制作1.实验目的要求掌握常见新闻列表的链接方法，修改不同链接形式的样式。2.实验主要内容对新闻列表添加链接，链接的形式是文字链接，链接打开后的目标是一篇新闻页面。并设定链接的四种状态发生时的显示样式。显示如下结果。3.实验类别专业基础4.实验要求必修实验十六、电子相册链接的制作实验目的要求掌握常见图片的链接方法，修改不同链接形式的样式。2.实验主要内容为电子相册中的图片加上超链接，按照提供的素材，单击第一幅图片时，在新窗口显示内容。显示如下结果。3.实验类别专业基础4.实验要求选开实验十七、利用书签链接制作帮助文档1.实验目的要求掌握锚点链接的创建方法和相关设置，利用书签链接制作帮助文档。2.实验主要内容根据提供的素材faq.doc，利用书签链接制作一个常见问题回答页面。显示如下结果。3.实验类别专业基础4.实验要求选开实验十八、在网页中实现图文混排1.实验目的要求插入图片及进行图片排版，掌握图文混排的基本方法。理解常见的图片在左文字在右或者图片在右文字在左、文字环绕在图片的周围、或者上边、右边、下边，单个图片与单行文字的排版、单个图片与多行文字的排版、多个图片之间实现的排版方法。2.实验主要内容实现一个在线销售图书网站中一本教材的图文混排。显示如下结果。3.实验类别专业基础4.实验要求必修实验十九、成绩登记表的制作1.实验目的要求掌握表格的创建、结构调整与美化方法；熟悉表格与单元格的主要属性及其设置方法。设计一个成绩登记表结构的页面，并显示出来。2.实验主要内容设计一个基本的成绩登记表，数据包括：ID序号、学号、姓名、平时成绩、期末成绩、总评成绩。显示如下结果。3.实验类别专业基础4.实验要求必修实验二十、产品介绍页面的制作1.实验目的要求掌握通过表格来进行网页页面的布局方法；理解利用表格展示信息的方法及其优势。2.实验主要内容利用表格布局的方式完成一个产品介绍页面的设计。显示如下结果。3.实验类别专业基础4.实验要求选开实验二十一、会员登陆1.实验目的要求掌握表单的创建、编辑、处理方法。熟悉文本输入框和密码输入框的使用。2.实验主要内容设计一个简单的用户登陆页面，会员需要填写用户名，密码，并能够通过下拉列表选择自己的身份。显示如下结果。3.实验类别专业基础4.实验要求必修实验二十二、调查问卷1.实验目的要求掌握表单对象的功能、特点和用途。熟悉单选框和复选框的使用。熟悉提交按钮、重置按钮、图像按钮的使用。熟悉文件选择输入框的使用。熟悉多行文本输入框和下拉列表框的使用。2.实验主要内容完成一个网站的在线问卷调查，表单元素要用到下拉菜单、复选框、单选框、多行文本输入框获取调查的目的。在表单的结构设计中，使用标签左对齐布局，使用户的视觉的重心放在调查的问题上。在用户输入表单时，按键盘TAB键进入下一步表单元素的输入。显示如下结果。3.实验类别专业基础4.实验要求必修实验二十三、在线预订客房表单1.实验目的要求熟练掌握商业网站的表单使用方法；综合运用表单元素进行。2.实验主要内容综合运用各种表单元素，制作酒店的客房在线预定系统，显示如下结果。3.实验类别专业基础4.实验要求选开实验二十四、常用页面布局设计1.实验目的要求掌握CSS定义文字、背景图片、超链接控制、列表、DIV等常用属性。完成简单CSS+DIV页面设计。2.实验主要内容利用div+css设计网站的主体布局一个标准的网站页面应该有logo区，导航区，内容区和版权区几个部分。其中，内容区又可以分为多种灵活的布局划分模式，比如常见的左右栏，左中右栏等形式。实现如下四种的页面布局，具体如下。3.实验类别专业基础4.实验要求必修实验二十五、css文件的四种引用方式1.实验目的要求掌握在网页中添加CSS样式表的四种方式:标签内的CSS、网页内的CSS、link引用的CSS和import引用的CSS。2.实验主要内容利用配套源代码，使用四种方法引用CSS的方法。体会效果。3.实验类别专业基础4.实验要求必修实验二十六、利用CSS定位页面元素1.实验目的要求掌握CSS各种属性的使用。熟悉利用CSS定位页面元素的方法。2.实验主要内容在使用css进行页面元素的定位中，通过调整content（内容）、border（边框）、padding（间隙）和margin（间隔）这4个属性，完成油画欣赏的页面设计。显示效果如下。3.实验类别专业基础4.实验要求必修实验二十七、用DIV+CSS布局网页结构1.实验目的要求掌握商业网站的页面布局方式。体会使用DIV+CSS布局网页的方法。2.实验主要内容使用div+css布局方法布局的一家企业网站的主页面。创建页面结构，完成内容的基本布局；定义全局的css样式；定义各div层的css样式。添加正文，在细化新闻显示的css样式。显示如下结果。3.实验类别专业基础4.实验要求选开实验二十八、认识JavaScript1.实验目的要求掌握Javascript程序编写的基本语法知识，以及如何在页面中嵌入JavaScript代码。能够编写出符合要求的程序。2.实验主要内容利用一个用表格实现的登陆表格，在加载页面时，将页面内容定位在浏览器窗口中央。初始的静态页面显示如下。3.实验类别专业基础4.实验要求必修实验二十九、创建自定义函数1.实验目的要求掌握创建自定义函数的方法，理解其在页面运行中的优势。并熟悉常用对象的属性和方法，能应用到程序当中解决问题。2.实验主要内容第一步，利用实验二十八，使表格居中的代码全部放入了一个名为init的函数中，而且位置移到了<head>标记内。在<body>标记中定义了onload事件句柄，表示当页面加载完成后执行init函数。这样的改动，使得页面的结构更加清晰。第二步，将init()函数分成了多个函数。其中getViewWidth()函数和getViewHieght()函数用于获得当前浏览器可用窗口的尺寸，通过把它们独立成为函数，虽然代码简单，但是函数的职责更加清晰，而另一个centerObject(id)函数则集中于使一个对象居中显示，这样不同的函数各司其职，共同完成了使一个页面元素居中的要求。3.实验类别专业基础4.实验要求必修实验三十、建立外部js文件1.实验目的要求掌握建立外部js文件并进行引用的方法。理解其在实际设计中的优势。2.实验主要内容建立一个后缀为js的文本文件，把实验二十九中<script>标签中的代码复制过来，保存到和页面一个目录下面。然后在<script>上通过src属性引入这个文件就可以了。3.实验类别专业基础4.实验要求必修实验三十一、对象创建与复制1.实验目的要求认识核心语言对象，掌握核心语言对象的方法和属性的使用；理解事件响应机制，掌握页面事件编程；2.实验主要内容通过一个简单的事件处理实验，练习JavaScript在事件处理中的基本应用方法。事件为完成当点击“>>”按钮时，将左边列表框中选中的元素复制到右边列表框中，同时从左边列表框中删除；程序运行结果如下。3.实验类别专业基础4.实验要求必修实验三十二、表单验证1.实验目的要求能够利用JavaScript语言完成对文档内容的交互。2.实验主要内容下面的实验针对一个简单的用户注册要求进行验证，界面如下图。必填项验证：用户名、密码、重复密码、邮箱是必填项。有效性验证：用户名不能以数字字符开始，只能以字母开始，且长度大于等于6个字符，小于等于20个字符；密码和重复密码不能和用户名相同，且长度大于等于6个字符，小于等于20个字符；邮箱地址符合电子邮件地址的基本语法。语义验证：密码和重复密码必须相同。3.实验类别专业基础4.实验要求必修实验三十三、动态改变样式1.实验目的要求掌握动态改变页面元素显示样式的基本方法。2.实验主要内容要求对指定的表格对象能够实现斑马表格。实现斑马表格的关键是要知道表格的某一行是奇数或偶数。表格对象有一个集合属性rows包含了所有的TR对象，访问它是从索引号0开始的，因此可以通过对这个rows集合的元素逐个访问来判断每个元素在集合内的索引值的奇偶性，进而完成目标。3.实验类别专业基础4.实验要求选开

实验三十四、Canvas的使用并绘图1.实验目的要求理解操作Canvas的原理和方法。2.实验主要内容Canvas是HTML5中新增的一个重要元素，该元素可以被脚本语言（通常为JavaScript）控制用来绘制各种图形显示效果。Canvas元素本身并不具备绘图功能，其仅仅作为图形依赖的容器而已。本实验通过使用js来操作页面，实现画布的绘制字符串功能。部分代码参考如下：<canvasid="mycanvas"width="600"height="100"style="border:1pxsolid#c3c3c3;">对不起，当前浏览器不支持画布元素！请更换浏览器或升级该浏览器版本！</canvas><scripttype="text/javascript">window.onload=function(){varcanvas=document.getElementById("mycanvas");varcontext2D=canvas.getContext("2d");context2D.font="30pxTimesNewRoman"; context2D.fillStyle="#ff0000";context2D.fillText("HelloCanvas,mynameisHTML5!",60,60);}</script>效果可参照下图所示：3.实验类别专业基础4.实验要求必修实验三十五、HTML5中新增表单开发技术1.实验目的要求理解操作HTML5中新增的表单使用方法。2.实验主要内容对于企业级Web应用来说，表单控件是最重要的页面元素之一。在HTML5之前，各种类型的表单只能由开发人员通过复杂的属性设置和限制条件（通过脚本计算）来完成。HTML5标准引入了一系列分类清晰、功能完善的表单控件标记，包括email、url、number、range、search、color、tel等输入类型，还有表单属性autocomplete、autofocus等，以及一些新增的表单元素。该实验尝试实现新增表单元素的部分功能，通过新增表单尝试感受方便之处，并理解和运用该技术。通过采用不同类型的表单元素，来提高开发效率和显示效果。实现表单运行如下：该效果显示在Firefox上，支持大多数新增属性。已经可以看出date和color以及range比较明显的效果，不用再使用js控制表单的验证等。3.实验类别专业基础4.实验要求必修实验三十六、HTML5中多媒体开发技术1.实验目的要求理解操作HTML5中多媒体技术开发的原理和方法，区分原有的多媒体开发技术。2.实验主要内容在HTML中播放音频和视频的方法有很多种。然而，在HTML中播放音频视频并不容易！为了可以播放多种格式的音频、视频，需要谙熟大量技巧，以确保您的音频、视频文件在所有浏览器中（InternetExplorer,Chrome,Firefox,Safari,Opera）和所有硬件上（PC,Mac,iPad,iPhone）都能够播放。本实验通过<audio>和<video>标签来实现音频和视频的引用，实现网页中播放多媒体的统一。其根据不同编码的多媒体文件设置不同的类型方式。在网页中body主体部分进行多媒体的嵌入，通过设置对应类型和路径，来判断是否可以支持当前类型编码的文件播放。其中视频采用video，参考如下代码：<videowidth="320"height="240"preload="auto"controls="controls" style="margin:10px50px;border:1pxsolid#ff0000;"><sourcesrc="test.ogg"type="video/ogg"><sourcesrc="test.mp4"type="video/mp4">对不起，当前浏览器不支持视频标签元素！请更换浏览器或升级该浏览器版本！</video>如果是音频文件可以修改对应的标签元素audio即可，并设置type属性。3.实验类别专业基础4.实验要求必修实验三十七、Cookie操作1.实验目的要求理解操作Cookie的原理和方法。2.实验主要内容Cookie就是浏览器用来保存短信息的一种机制，服务器和浏览器两端均可创建。实验主要包括练习如何保存一个Cookie，如何读取Cookie，如何更新C

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论