网页制作实验指导书xin资料.docx

《网页制作实验指导书xin资料.docx》由会员分享，可在线阅读，更多相关《网页制作实验指导书xin资料.docx（90页珍藏版）》请在冰点文库上搜索。

网页制作实验指导书xin资料

《网页设计与制作》实验指导书

李步升编著

《网页设计与制作》实验大纲

实验

（一）简单网页制作

实验

（二）XHTML语言

实验（三）CSS选择器

实验（四）CSS盒模型

实验（五）格式化文本

实验（六）应用背景图像

实验（七）CSS两列浮动布局

实验（八）CSS三列布局

实验（九）CSS两列定位布局

实验（十）CSS多列定位布局

实验（十一）创建导航条

实验（十二）格式化表格和表单

《网页设计与制作》实验教学大纲

课程名称：

网页设计与制作

英文名称：

DesignandMakingofWebpages

设置形式：

非独立设课

课程模块：

专业核心课

实验课性质：

专业实验

课程编号：

501868

课程负责人：

李步升

大纲主撰人：

李步升

大纲审核人：

一、学时、学分

课程总学时：

实验学时：

课程学分：

3

二、适用专业及年级

教育技术学专业本科二年级

三、课程目标与基本要求

课程的目标：

课程全面介绍网页设计与制作的相关知识，包括网页制作工具Dreamweaver的使用方法、XHTML语言、CSS语言及网站的发布与维护等，目标是使学生具备网页制作的基本知识和基本技能，并能够独立完成中、小型网站的前端设计与制作，为开发网络教学软件和专题学习网站打下基础。

基本要求：

1．熟练使用网页制作工具Dreamweaver，能够在网页中插入标题、段落、列表、特殊字符、图像、表格、表单、超链接等基本元素；

2．掌握XHTML的语法结构及各种标记、属性；

3．掌握CSS网页样式控制方法，能灵活利用CSS选择器及其属性设置文本、标题、列表、图像、表格、表单、超链接等元素的样式；

4．掌握CSS网页布局方法，能灵活利用浮动、定位等多种方法实现网页两列、三列、多列及混合布局。

5．掌握网站管理及发布方法。

四、主要仪器设备

多媒体计算机，安装Dreamweaver、Fireworks、Firefox等应用软件。

五、实验项目及教学安排

序号

实验项目名称

实验基本方法和内容

项目学时

项目

类型

每组

人数

教学要求

1

简单网页制作

建立站点；新建并保存网页；在网页中插入段落、标题、列表、特殊字符、图像、超链接、表格、表单等基本元素。

2

基础

1

必修

2

XHTML语言

设置网页的XHTML标记及属性，并进行语法校验。

2

基础

1

必修

3

CSS选择器

利用CSS选择器及其属性设置网页元素样式。

2

基础

1

必修

4

CSS盒模型

设置网页元素的宽度、高度、边框、填充、边界、背景等属性。

2

基础

1

必修

5

格式化文本

对文字应用样式；对段落应用样式；对列表应用样式；对链接应用样式。

2

基础　

1

必修

6

应用背景图像

用背景图像制作圆角框；用背景图像制作阴影；用背景图像替换文本。

2

基础

1

必修

7

CSS两列浮动布局

利用浮动的方法制作两列布局网页。

2

综合

1

必修

8

CSS三列浮动布局

利用浮动的方法制作三列布局网页。

2

基础

1

必修

9

CSS两列定位布局

利用定位的方法制作两列定位网页。

2

基础

1

必修

10

CSS多列定位布局

利用定位的方法制作多列布局网页。

2

基础

1

必修

11

创建导航条

制作垂直导航条；制作水平导航条。

2

基础

1

必修

12

格式化表格和表单

对表格应用样式；对表单应用样式。

2

综合

1

必修

13

网站制作综合训练

自命主题网站制作。

8

设计

综合

1

选修

六、考核方式及成绩评定

考核方式：

1．实验：

根据实验考勤和实验报告评定成绩，满分为100分。

2．作业：

根据作品评定成绩，满分为100分。

3．实验考试：

上机考试，满分为100分。

成绩评定：

实验成绩占本课程成绩的30%。

实验成绩＝实验平时成绩×20%＋作业成绩×30%＋实验考试成绩×50%。

七、实验教科书、参考书

1．实验教科书

《网页设计与制作实验指导书》，李步升，2006

2．实验参考书

《精通CSS--高级Web标准解决方案》，[英]AndyBudd等，人民邮电出版社，2006年11月

实验一简单网页制作

一、实验目的

1．熟悉Dreamweaver软件的操作界面。

2．掌握建立本地站点的方法。

3．掌握简单网页制作方法。

4．掌握超链接的建立方法。

二、实验内容

1．创建“潜水俱乐部”站点。

2．制作“俱乐部首页”、“俱乐部简介”、“近期活动”、“精彩图片”、“在线预约”5个网页，并完成网页之间的超链接。

三、操作步骤

1．创建“潜水俱乐部”站点

（1）在D盘新建文件夹，命名为myweb；

（2）将images文件夹和gallery文件夹复制到中myweb中；

（3）启动Dreamweaver，使用“站点｜新建站点”命令创建站点。

2．制作“俱乐部首页”。

（1）新建网页。

（2）使用“文件｜保存”命令保存网页，命名为index.html。

（3）在文档工具栏上设置网页标题“泡泡潜水俱乐部欢迎你”。

（4）从“文本.txt”中将首页的相关文字粘贴到网页中。

（5）设置一级标题、二级标题、三级标题、项目列表、编号列表。

（6）插入图像。

（7）在Copyright后插入版权符号©。

（8）在电话号码之间插入半角空格。

（9）在电子邮箱地址上建立超链接，mailto:

vip@BubbleU。

（10）选中网页内容，然后单击“插入Div标签”按钮，分别插入header、navigation、mainContent、footer共4个Div。

（11）保存网页，按F12，预览网页。

3．制作“俱乐部简介”网页。

（1）在文件面板上复制index.html网页，重新命名为about.html。

（2）在文件面板上双击打开about.html。

（3）删除mainContent区域中的原有内容，然后粘贴俱乐部简介文字。

（4）设置二级标题。

（5）选中“国际潜水运动协会”，设置为“强调”。

（6）选中“泡泡俱乐的宗旨是……开创新的篇章”，设置为“块引用”。

（7）保存网页，按F12，预览网页。

4．制作“近期活动”网页。

（1）在文件面板上复制index.html网页，重新命名为events.html。

（2）在文件面板上双击打开events.html。

（3）删除mainContent区域中的原有内容，然后粘贴俱乐部近期活动文字。

（4）设置二级标题。

（5）插入表格。

（6）保存网页，按F12，预览网页。

5．制作“精彩图片”网页。

（1）在文件面板上复制index.html网页，重新命名为gallery.html。

（2）在文件面板上双击打开gallery.html。

（3）删除mainContent区域中的原有内容，然后粘贴精彩图片文字。

（4）设置二级标题。

（5）插入5张图片，为每张图片设置替换文本。

（6）选中图片及其下面的段落，然后单击“插入Div标签”按钮，将图片及其说明文字分别装入5个Div中。

（7）保存网页，按F12，预览网页。

6．制作“在线预约”网页。

（1）在文件面板上复制index.html网页，重新命名为reserve.html。

（2）在文件面板上双击打开reserve.html。

（3）删除mainContent区域中的原有内容，然后粘贴在线预约文字。

（4）设置二级标题。

（5）插入“表单”。

（6）光标置于表单内，插入“菜单”表单元素。

（7）选中“菜单”，在属性面板上单击“列表值”按钮，设置选项。

（8）在表单内插入其它表单元素。

（9）保存网页，按F12，预览网页。

7．建立网站内各页面之间的超链接。

实验二XHTML语言

一、实验目的

1．掌握XHTML语法。

2．掌握XHTML标记及属性。

3．掌握XHTML标记校验的方法。

二、实验内容

制作“唯存教育－－探究学习”栏目中的“article01.html”网页。

三、操作步骤

1．创建站点

（1）在D盘新建文件夹，命名为myweb；

（2）将“文本.txt”和images文件夹复制到中myweb中；

2．用记事本打开“文本.txt”。

3．选择“文件|另存为”命令，将文件另存为article01.html。

4．在网页中添加XHTML标记和属性。

5．使用

旖旎信箱：

moon@lili.cc

版权所有©旖旎1999