网页开发和设计实验指导书.docVIP

网页开发与设计实验指导书曹玉琳信息管理与信息系统系2016 年3 月实验要求 （1）预习教材有关部分，认真做好实验内容的准备，就实验可能出现的情况提前作出思考和分析。（2）仔细观察上机操作时出现的各种现象，记录主要情况，作出必要说明和分析。（3）每次将所完成的网页提交给教师检查。（4）遵守机房纪律，爱护实验设备。（5）对于提交的作品，应该能讲出各部分功能和自己的设计思路；可以参考他人作品或网络资源，但严禁抄袭或下载提交应付了事。（6）实验指导书只作为实验时的参考，大家可以不拘泥于指导书，根据自己的情况进行练习。（7）严禁打游戏。目 录 TOC \h \z \t a,1 HYPERLINK \l _Toc388103664 实验一 HTML5基础 PAGEREF _Toc388103664 \h 1 HYPERLINK \l _Toc388103665 实验二 CSS3编程 PAGEREF _Toc388103665 \h 2 HYPERLINK \l _Toc388103666 实验三 HTML5高级编程 PAGEREF _Toc388103666 \h 5 HYPERLINK \l _Toc388103667 实验四 综合运用 PAGEREF _Toc388103667 \h 6实验一 HTML5基础【实验目的】熟悉网站建设的步骤熟悉Dreamweaver软件的操作界面和操作方法。掌握HTML语法规范，常用标记的语法，各种标记的使用。【实验条件】每名同学使用一台计算机。小组同学相邻，方便讨论。【实验内容】新建并保存网页：用记事本、Ultraedit开发网页，建立一个具有基本结构标记的HTML文件，然后另存为.htm文件，并在浏览器中运行。制作简单的图文网页。要求使用标题、分行、段落、有序列表、无序列表、特殊字符、图像、均有体现。参看书和PPT。制作带有超链接的网页，要求有文字链接、图片超链接、锚链接。参看书和PPT。在网页上增加表单，效果类似于用户注册页面。参考实验1-1.png、实验1-2.png、实验1-3.png制作网页。 实验二 CSS3编程【实验目的】1.熟练掌握使用CSS修饰网页的方法。2.熟悉表格CSS类选择器、ID选择器、标签选择器，能够使用DIV和盒子模型对网页进行布局。【实验条件】每名同学使用一台计算机。小组同学相邻，方便讨论。【实验内容】有如下表格：用CSS对其进行修饰，修饰后效果为：提示：可以使用传统CSS修饰，也可以使用CSS3修饰。使用li标签制作图片展示网页，如下图：3.使用li制作竖版和横版菜单，如下图：4.使用div进行如下页面布局：实验三 HTML5高级编程【实验目的】1.掌握HTML5高级标签和CSS3各种选择器、布局的使用方法。2.能够利用他们制作HTML，完成网页的修饰和交互功能。【实验条件】每名同学使用一台计算机。小组同学相邻，方便讨论。【实验内容】1.制作下面的网页2.制作手机版网站，比如 HYPERLINK http://3/touch/news/ http://3/touch/news/，如下图：实验四 综合运用【实验目的】1.综合运用所学知识设计和开发简单的网站。【实验条件】每名同学使用一台计算机。小组同学相邻，方便讨论。【实验内容】根据系统随机分配的作业题目制作一个中小型的网站，要求综合应用所学的知识，程序中有必要的注释，具有良好的容错机制；程序完全可调试通、并且能够独立的搭建和部署运行环境、要求独立完成;更多的功能可自己添加、设计。