网页设计与制作实训指导书新

1、网页设计与制作实训指导书钟雅瑾 编信息工程系 目录实验1: 建立站点 1实验2：在网页中建立文本和段落6实验3：掌握html的常用的文字标记及其属性.12实验4：超链接标记的使用.16实验5：网页中插入表格19实验6：掌握html框架.23实验7：表单.25实验8：列表.27实验9：网页中插入多媒体.29实验十：css的应用.32实验十一：css+html.34实验十二：创建xml文档 .37 实验十三：创建xml文档.41实验十四：xml+dtd.47实验十五、十六：个人网站综合制作53实验1: 建立站点一、实验目的1掌握在dreamweaver中建立站点和网页的方法 二、实验环境1、一台裸

2、机 2、dreamweave网页设计软件 三、实验内容在dreamweaver中建立站点和网页四、实验步骤、过程1、在菜单栏【站点】菜单中选择【管理站点】，在弹出的【管理站点】对话框中点击【新建】按钮，出现【站点】和【ftp】两个选项。选择如图2.6所示。 2、选择【站点】弹出【未命名站点1的站点定义为】对话框，在【未命名站点1的站点定义为】中选择【基本】选项卡。 3、文本框中填写您站点的名字，它仅仅做为管理和识别用，单击【下一步】按钮，进入下一步。如图2.7所示。 4、我们要建立的是静态网页，因此我们选择【不，我不想使用服务器技术】如图2.8 所示，单击【下一步】按钮，进入下一步。 5、选择

3、第一项：编辑我计算机的本地副本，完成后再上传，也建议网络初学者也采用此项，选择要保存网站的物理路径名。手工填写或者点击文件夹图标选择路径都可以，单击【下一步】按钮，进入下一步。如图2.9所示。 6、【您如何连接到远程服务器】现在，已经为您的站点定义了一个本地根文件夹。暂时我们还不登陆远程服务器，因此选项中选择【无】。单击【下一步】按钮，进入下一步。 7、编辑站点站点的编辑其实很简单，选择【站点】菜单下的【管理站点】命令。选中站点的名称，然后单击【编辑】按钮。将会出现类似创建站点的内容，根据需要可以在相应的内容上进行修改。 五、实验作业以自己的班级为名建立网站，并且建立主页为index.html

4、,建立文件夹images用于存放图片。实验2: 段落设置一、实验目的1掌握利用记事本或者dreamweaver来创建段落 二、实验环境1、dreamweave网页设计软件 或者记事本三、实验内容在网页中建立文本与段落四、实验步骤、过程1、打开01文件夹下的01.htm网页，如图3.7所示 2、选择布局工具栏的【绘制层】，放在如图3.8所示的位置，有关绘制层的更多内容参见后面的章节。 3、在层中输入类似图3.9所示的文字，注意在图中指示位置输入空格。 接下来我们使用键盘的【回车】可以换行，同时也就结束了一个段落。 4、在层中输入类似图3.9所示的文字，注意在图中指示位置输入空格。 接下来我们使用

5、键盘的【回车】可以换行，同时也就结束了一个段落。 5、我们可以对其中段落进行对齐，对齐方式主要有：左对齐、居中对齐、右对齐和两端对齐4种对齐方式，即对应着【属性】检查器里的这四个按钮。 其设置方法与设置文本相同。我们这里选择居中对齐。结果如图3.10所示。 6、项目列表：设置相同类别文本的列表形式。打开02文件夹下的01.htm网页，选中属性面板的列表按钮 ，然后在文档窗口输入列表需要的文字，要输入下一项直接回车即可。默认的就会在其前面加上项目符号。如图3.11所示网页。 7、接下来我们再制作另外一种编号列表：选中属性面板的列表按钮 ，与步骤1类似，看一下结果如图3.12所示。 8、接下来我们

6、在网页当中插入日期，选择【插入】菜单的【日期】命令。或者在【插入】栏的【常用】类别中，单击【日期】按钮。出现图3.13所示的对话框。选择你所喜欢的日期格式，您如果要在每次保存文件时都自动更新该日期。则将【储存时自动更新】选中。 9、接下来我们插入另外一个文本元素水平线：用户可以使用一条或者更多的水平分割线，将文本或者对象分割开来。选择【插入】菜单下的【html】【水平线】如图3.14所示10、接下来我们设置一下水平线的属性，选中水平线，看一下【属性检查器】我们设置水平线的【宽】为500，当然高度，对齐都可以根据需要进行设置，效果如图3.15所示。 11、在此背景下我们好象看不到水平线，主要是因

7、为水平线的颜色默认为灰色，我们可以设置其颜色，选中水平线，选择【拆分】视图，我们发现在【代码】视图里有选中的代码，结果如图3.16所示。 五、实验作业在班级网站中的班级主页中输入段落文本并且进行排版。实验三 掌握html的常用的文字标记及其属性一、实验目的掌握html的常用的文字标记及其属性二、实验任务最终结果为下图：三、实验相关知识1html的文字布局标记：,2常用文字布局标记四、实验步骤1在d盘建立新文件夹，最好以你的名字命名；2从“开始程序附件记事本”处打开记事本；或在你新建的文件夹中点击鼠标右键，选“新建文本文档”；或者用dreamweaver建立html文档3添加网页标题“第二次实验

8、”；第二次实验4 添加任意文字，一号标题字，用标记居中，用换行，然后在下一行用插入横线，横线可设置自己喜欢的颜色和宽度。第二次实验悲陈陶5添加任意文字，分别使用段标记居中，居左，居右。第二次实验悲陈陶杜 甫孟冬十郡良家子，血作陈陶泽中水。野旷天清无战声，6 添加任意文字，用标记使文字上下移动，并设置height属性为50，width属性为100，其余属性可按自己喜欢的设置第二次实验悲陈陶杜 甫孟冬十郡良家子，血作陈陶泽中水。野旷天清无战声，四万义军同日死。7用转义字符显示出空格,&，“这五种符号<&> "8在你建立的目录中保存主页：在弹出的对话框中输入文

9、件名，其扩展名为“.htm”；9在你的目录中双击你建立的首页，以运行你的个人网页，根据运行结果，调试源代码，在浏览器ie中，点击“查看/源文件”可查看源文件。具体代码如下：第二次实验悲陈陶杜 甫孟冬十郡良家子，血作陈陶泽中水。野旷天清无战声，四万义军同日死。<&> "五、实验报告内容1记录实验过程。2记录所遇到的问题及解决办法。3记录实验结果：书写源代码。实验四 超链接标记一、实验目的掌握链接标记的使用二、实验任务最终结果为下图：三、实验相关知识1超链接标记：链接提示文字四、实验步骤1在d盘建立新文件夹，最好以你的名字命名；2从“开始程序附件记事本”处打

10、开记事本；或在你新建的文件夹中点击鼠标右键，选“新建文本文档”； 3.自己建立“个人资料.htm”，“学习情况.htm”，“工作经历.htm”，“兴趣爱好.htm”，“个人网页.htm”，并在“个人网页.htm”里分别建立到“个人资料.htm”，“学习情况.htm”，“工作经历.htm”，“兴趣爱好.htm”的超链接。各个网页里的内容自己设计。4.在“个人网页.htm”建立一个到邮件的超链接5、源代码为何洁的个人网页何洁的个人网页 个人资料 学习情况 工作经历 兴趣爱好 版权所有，制作者： 给何洁写信 五、实验报告内容记录实验结果：书写源代码。实验五 网页中插入表格一、实验目的1掌握html表

11、格的结构2掌握html表格的常用标记3.掌握html框架的常用标记二、实验任务1用html语言实现下列表格。2.用html语言实现下列框架三、实验相关知识1表格及其标记的使用：表格标记： 标题标记： 表格头标记： 行标记： 单元格标记：2标记的属性：bgcolor，background，border，bordercolor，bordercolorlight，bordercolordark，cellspacing，cellpadding，width，align，3标记的属性：align,valign4标记的属性：colspan，rowspan5.框架集标记frameset及框架标记frame四、

12、实验步骤1创建表格；2用标记定义表格标题文字： 曾老师课程表3考虑好整个表格的列数及行数，用定义一行，用或定义表头单元格，注意用属性colspan=” ”或rowspan=” ”设置跨列或跨行；4用设置下一行，用定义其中的每一个单元格，注意单元格的合并；依此类推。5表格的对齐方式的设定：整个表格的对齐：居中；单元格文字的对齐：居中；6如图设置表格的背景：7.用frameset和frame设置如图所示的框架五、实验报告内容记录实验结果：书写源代码。无标题文档 个人课表   星期一 星期二 星期三 星期四 星期五 12节 网页设计与制作 网络1101 网页设计与制作 网络1101 网页设

13、计与制作 网络1101网页设计与制作 网络1101 网页设计与制作 网络1101 34节           56节 网页设计与制作 网络1101 网页设计与制作 网络1101 网页设计与制作 网络1101 网页设计与制作 网络1101 网页设计与制作 网络1101 78节           910节           实验六 掌握html框架一、实验目的1 掌握html框架的概念2 掌握html框架标记的使用二、实验任务用html书写个人介

14、绍并在浏览器中显示（个人资料、学习情况、工作经历、兴趣爱好），用框架实现，即把上机实验（一）改成如下图框架的形式：三、实验相关知识1框架的定义2框架的常用常用标记 ， 3的属性：cols，rows，frameborder，framespacing4的属性：src name ，scrolling，noresize，marginhight，marginwidth，bordercolor，frameborder，framespacing5利用标记的target属性实现框架间的链接 四、实验步骤1在d盘建立新文件夹，最好以你的名字命名，建立的文件或引用的文件都放在该文件夹中；2建立框架的划分文件，把窗

15、口划分为四个框架； 3建立每个框架的对应文件；分别是up.htm left.htmmiddle.htmright.htm,并且进行保存。4 建立框架间的链接； left.htm的源代码是：个人资料学习情况right.htm的源代码是兴趣爱好工作情况5建立四个超链接文件；6 设置边框、边距和滚动条；7修改框架各标记的属性值，在浏览器中观察其效果。五、实验报告内容记录实验结果：书写源代码。实验七 表单一、实验目的1 掌握表单的的基本概念2 掌握表单的几种输入区域二、实验任务用html建立一个与用户交流的表单（用户名、密码、兴趣爱好、想去的地方、留言等），效果如下图：三、实验相关知识1表单标记：2i

16、nput 元素 单行文本输入框： type=“text”密码输入框： type=“password”多选框： 单选按钮： 提交按钮（type=“submit”)：将表单内容提交给服务器重置按钮(type=“reset”)：将表单内容全部清除，重新填写。普通按钮(type=“button”)3列表框的两个标记：，4文本区域标记： 四、实验步骤1建立单行文本输入框，输入用户名： 2建立密码输入框架，输入密码；3为选择兴趣爱好，建立多选框；4为性别选择建立单选按钮；5为选择想去的地方，建立列表框；6为方便留言，建立文本区域；7建立“提交”、“重写”按钮。五、实验报告内容记录实验结果：书写源代码。实验

17、八 列表一、实验目的1 掌握列表的的基本概念2 掌握img标记的使用二、实验任务.用html建立无序列表及有序列表的嵌套以及定义列表.做一个实现图片移动的网页，左右两张图片左右来回碰撞，中间图片上下来回碰撞三、实验相关知识.无序列表：2.有序列表:3.定义列表标记:4img标记四、实验步骤列表：.先建立无序列表.再在无序列表里嵌套进有序列表.最后用制作定义列表移动图片：. 先使用插入图片. 再使用使图片产生移动效果五、实验报告内容记录实验结果：书写源代码。实验九 网页中插入多媒体一、实验目的1 掌握img标记的使用2. 掌握embed标记的使用3. 掌握bgsound标记的使用4. 掌握样式表

18、的写法二、实验任务.建立一个网页，在网页里用img标记插入视频，用embed标记分别插入文件夹中给定的多媒体素材，给网页插入背景音乐.对于整个网页的内容自己排版2.用样式表做出如下图所示的网页三、实验相关知识使用插入视频2.使用插入多媒体文本3.使用插入背景音乐4.建立embed排版样式或link排版样式的样式表四、实验步骤使用插入视频，设置视频是否循环播放，及何时开始播放 2.全用标记分别插入多媒体文本，设置是否循环，播放面板是否隐藏，是否自动播放。3.使用标记给网页插入背景音乐，并设置是否循环4.用样式表建立如上图所示的网页 在样式表里设置网页背景为黄色，第一行this is header

19、 1用h1标记作为选择器，设置背景色为绿色，第二行this is header 2用h2作为选择器，字号大小设为20pt，第三行this is a pragrapht用p作为选择器，设置背景颜色为自己喜欢的颜色，文本居右五、实验报告内容记录实验结果：书写源代码。实验十 css的应用一、实验目的1 掌握样式表、级联样式表（css）的概念2 掌握css在html中的应用二、实验任务原始网页如下图一所示，通过样式表的设置把网页改成如图二所示图一图二三、实验相关知识1样式表（style sheet）的概念：样式表可以看作是一个显示样本，用来配合标记语言在浏览器中显示文件的效果。一个层叠样式单css（c

20、ascading style sheets）就是一组规则，每个规则给出此规则的所适用的元素的名称，以及此规则要应用于哪些元素的样式。2css在html中的应用把样式表的内容直接放在html文件内部或直接把样式表的内容放在标记里面，使用的是style属性。3元素属性设置的几种方式4 css中的常用属性：字体属性、颜色属性、背景属性、文本属性、框属性、分类属性。四、实验步骤1.通过样式表设置网页背景的颜色2.通过样式表设置标题字的background-color，color，font-size，font-style，font-family的属性值3.通过样式表设置单元格的text-align，ba

21、ckground-color，color的属性值五、实验报告内容记录实验结果：书写源代码。实验十一 css+html一、实验目的1 掌握样式表、级联样式表（css）的概念2 掌握css在html中的应用二、实验任务用html和css实现个人简历（姓名、性别、电话、email、学历、专业、学习成绩、特长等）三、实验相关知识1样式表（style sheet）的概念：样式表可以看作是一个显示样本，用来配合标记语言在浏览器中显示文件的效果。一个层叠样式单css（cascading style sheets）就是一组规则，每个规则给出此规则的所适用的元素的名称，以及此规则要应用于哪些元素的样式。2css

22、在html中的应用另外建立一个css文件，然后在html中链接这个css文件。3元素属性设置的几种方式4 在css样式表中添加注释： /* */5 css中的常用属性：字体属性、颜色属性、背景属性、文本属性、框属性、分类属性。四、实验步骤1 模仿下例，用html书写个人简历文件“myresume.htm”：个人简历姓名：何洁（昵 称：欢欢 英文名：heiji）生 日： 3 25 星 座：白羊民族：彝族 语 言：中文、英文身 高：157cm 体 重：47kg特 长：唱歌、跳舞 嗜 好：看书、看电影、上网个人信息：第一次登台：9岁 第一次登台的感受：紧张、好奇、激动最重要的人：家里人最喜欢的艺人：

23、christina最喜欢的运动：游泳最喜欢的城市：韩国、纽约最喜欢的季节： 夏最喜欢的食物： 火锅、零食 最喜欢的饮料(茶)：水最喜欢的服饰品牌：只要好看就ok最喜欢的饰物： 同上最喜欢的颜色：黑、白最喜欢的电影：红磨坊 最喜欢的歌曲：dinty最喜欢的曲风：狂野、放肆、动感最喜欢的宠物：狗最想尝试的职业：歌手 最欣赏自己哪一点：开心、爱笑 最大的愿望：让家人过的更好最难忘的事情：超女的姐妹们，fans们到长沙给我们加油对自己的评价：健康、不做作 2在浏览器中显示“myresume.htm”，结果如下：2 建立css：用记事本建立“myresume.css”文件，内容自己设计，但是设计出的效果

24、要与4中的图相似：提示：通过div把图片定位到文字的右边设置body的样式使背景为黄色，上有蓝色边框，右为红色边框设置h1的样式使之为斜体，改变文本颜色为自己喜欢的颜色其余的自己发挥3 在html文件“myresume.htm”中链接css：在html文件“myresume.htm”文件中的头部即在标记与之间加入如下一行代码：4再次运行“myresume.htm”，结果如下：五、实验报告内容1记录实验过程。2记录所遇到的问题及解决办法。3记录实验结果：书写源代码。实验十二 创建xml文档一、实验目的1掌握xml的基本概念2掌握创建xml文档和css文档的方法3掌握把css文档附加到xml文档上

25、的方法二、实验任务建立一个简单的xml文档（只要在浏览器上显示出“hello world”）以及与之对应的css文档，并将该css文档链接到xml中去。三、实验相关知识1xml的概念：显示的内容和显示的方式分别用不同的文档表示2xml 声明，它向解析器提供了关于文档的基本信息。例： xml声明有version和 encoding两个属性。version：表明文档所用的xml版本。encoding：表明该xml文档所有的字符集。3xml文档的样式表样式指定如何显示元素。在xml中，样式是通过样式表来施加的。xml中常用的样式表包括css和xsl，css（级连样式表）早已应用于html文档中，xs

26、l（可扩展样式语言）则是专门为xml开发的。4将样式表附加到xml文档上：使用处理指令：两个属性：type和href。type：指定所用的样式语言。herf：指定样式表的url。例：四、实验步骤1建立一个简单的xml文档：(1)用记事本或其它文本编辑器新建一个文件，在其中输入如下代码：hello world!你好，世界！ (2)在你建立的目录中保存：在记事本菜单中点击“文件/保存”；在弹出的对话框中输入文件名“hello.xml”；在文件类型中要选择“所有文件”；选择并记住要保存文件的路径，点击“保存”；(3)双击该xml文件，其显示结果为：2 建立与之对应的css文档：(1)用记事本新建一个

27、文件，在其中输入如下代码：sayhello font-family: 宋体; font-size: 24pt; font-weight: bold;(2)在你建立的目录中保存：在记事本菜单中点击“文件/保存”；在弹出的对话框中输入文件名“hello.css”；在文件类型中要选择“所有文件”；选择并记住要保存文件的路径，点击“保存”；3 将该css文档附加到xml文档上：打开hello.xml，在这一行代码下面输入如下一行代码：4用浏览器打开hello.xml，其显示结果如下：5修改以上文档，丰富xml文档的内容，即增加xml文档的标记个数。五、实验报告内容1记录实验过程。2记录所遇到的问题及解

28、决办法。3记录实验结果：书写源代码。实验十三 创建xml文档一、实验目的1掌握xml的基本概念2掌握创建xml文档和css文档的方法3掌握把css文档附加到xml文档上的方法4 掌握实体、内部通用实体、外部通用实体的基本概念5 掌握实体引用的方法二、实验任务1.建立一个简单的xml文档（只要在浏览器上显示出“hello world”） 2. 建立与刚才的xml文档对应的css文档，并将该css文档链接到xml中去。3.建立一个简单的xml文档（只要在浏览器上显示出姓名、性别、电话、email）, email用内部实体进行定义和引用，然后修改为：email用外部实体进行定义和引用。三、实验相关知

29、识1xml的概念：显示的内容和显示的方式分别用不同的文档表示2xml 声明，它向解析器提供了关于文档的基本信息。例： xml声明有version和 encoding两个属性。version：表明文档所用的xml版本。encoding：表明该xml文档所有的字符集。3xml文档的样式表样式指定如何显示元素。在xml中，样式是通过样式表来施加的。xml中常用的样式表包括css和xsl，css（级连样式表）早已应用于html文档中，xsl（可扩展样式语言）则是专门为xml开发的。4将样式表附加到xml文档上：使用处理指令：两个属性：type和href。type：指定所用的样式语言。herf：指定样式

30、表的url。例：5什么是实体：实体是指分析文档时，会被字符数据取代的元素。xml的实体引用 与html不同，以一个分号结束。两种实体：内部实体、外部实体6定义实体（1）定义内部通用实体dtd中的标记定义内部通用实体。格式： （2） 在dtd中，可按下述语法结构声明外部实体： 7实体引用：把实体载入到xml主文档。语法：& name；四、实验步骤1建立一个简单的xml文档：(1)用记事本或其它文本编辑器新建一个文件，在其中输入代码： (2)在你建立的目录中保存：在记事本菜单中点击“文件/保存”；在弹出的对话框中输入文件名“hello.xml”；在文件类型中要选择“所有文件”；选择并记住要保存文件

31、的路径，点击“保存”；(3)双击该xml文件，其显示结果为：2 建立与之对应的css文档：(1)用记事本新建一个文件，在其中输入如下代码：sayhello font-family: 宋体; font-size: 24pt; font-weight: bold;(2)在你建立的目录中保存：在记事本菜单中点击“文件/保存”；在弹出的对话框中输入文件名“hello.css”；在文件类型中要选择“所有文件”；选择并记住要保存文件的路径，点击“保存”；3 将该css文档附加到xml文档上：4用浏览器打开hello.xml，其显示结果如下：5修改以上文档，丰富xml文档的内容，即增加xml文档的标记个数。

32、6建立一个包含email的内部实体定义的xml文档：(1)用记事本或其它文本编辑器新建一个文件，在其中输入如下代码：!doctype addressbook 周宏滔myemail; (2)在你建立的目录中保存：在记事本菜单中点击“文件/保存”；在弹出的对话框中输入文件名“addressbook.xml”；在文件类型中要选择“所有文件”；选择并记住要保存文件的路径，点击“保存”；(3) 用浏览器打开该xml文件，其显示结果如下：7 建立email的外部实体定义：(1)用记事本或其它文本编辑器新建一个文件，在其中输入如下代码： (2