网页设计与制作实验报告.docx

《网页设计与制作实验报告.docx》由会员分享，可在线阅读，更多相关《网页设计与制作实验报告.docx（8页珍藏版）》请在冰豆网上搜索。

网页设计与制作实验报告

网页设计与制作实验报告

2010215210420学号:

网页设计与制作题目

计算机科学与技术学院学院

计算机应用专业

1004班级

李俊清姓名

丁一指导教师

2012年6月10日

实验一:

网页设计html一、实验目的

1（掌握常用的HTML语言标记。

2（利用文本编辑器建立HTML文档，制作简单网页。

3（掌握网页制作功能的使用。

二、实验内容

1（熟悉制作网页的基本方法。

2（掌握网页文件的基本操作;页面属性的设置;文本的插入和格式设置3（建立一个网站。

三、实验步骤

1（在E:

盘上建立一个文件夹如myweb作为自己的web站点根目录，在文本编辑器EditPlus

中输入如下的HTML代码程序，保存为以.htm或.html为后缀的文件如index.htm作为自己

的第一个页面，并在浏览器中运行。

欢迎访问我的网站。

欢迎访问我的网站。

欢迎访问我的网站。

2.在标记中分别加入以下属性，看看index.htm有什么变化。

bgcolor=#背景颜色#=rrggbb（16进制的RGB值）或颜色名称

background=#背景图像#=image-URL（图片所在路径）

text=#非可链接文字的色彩

bgproperties=FIXED背景图像不动

欢迎访问我的网站。

欢迎访问我的网站。

欢迎访问我的网站。

四、常见问题

1.新建的网页不能用IE浏览器浏览:

保存格式不正确（扩展名不正确）。

在记事本编辑网页

保存时扩展名一定要是.htm或.html;修改方法:

关闭记事本和IE浏览器后在资源管理器中将文件扩展名改为.htm或.html;

2.页中显示HTML代码:

标记缺“>”或“<>”是全角。

实验二、Dreamweaver站点/文档

一、实验目的

1（掌握站点的创建

3（学习将其它格式的文档转换成HTML格式的文档。

5（掌握站点创建、管理和维护模块的基本功能。

7（学会实际运用插入外部对象并进行效果设置的方法。

3（学习使用站点操作方法。

二、实验内容

1（建立本地站点

（1）在D盘新建一个以自己学号和姓名命名的文件夹，将下载回来的素材解压后复制到此文件夹中并重命名为images

（2）建立一个名为“河南开封”的站点，站点的路径设置为第

（1）题中创建的学号和姓名的文件夹位置

（提示:

站点|新建站点）

2.创建和设置网站主页（index.html），要求如下（注意效果图中标注的地方）:

1）设置标题为“河南开封欢迎您!

”（title里面的内容）;

2）设置页面背景为“bj.gif”;（提示:

修改-页面属性-外观-背景图像）

3）设置文本“河南开封”属性:

字体大小26像素、颜色为“#006600”、字体为“华文行楷”，加粗。

3.新建一个页面，命名为kff.html，编辑要求如下:

1）设置标题为“开封府简介”;

2）设置文本“开封府厚重历史”属性:

字体大小26像素、颜色为红色、默认字体并加粗;3）插入图片“kff.jpg”。

（6）为主页文件index.html中的文本“开封府”设置超级链接，要求单击能够实现子页文件kff.html的访问，并且去掉链接的下划线，设置已访问链接颜色为“#000000”，活动链接颜色“#FF0000”;（（提示:

修改-页面属性-链接）

（7）为子页文件kff.html设置超级链接文本“返回主页”，要求单击能够实现主页index.html的访问，链接属性设置与第（6）题一样;

（8）预览调试站点mysite2中的网页文件，并进行完善。

实验三、布局table/框架

一、实验目的

1.本实例是要创建边框为1像素的表格。

二、仪器用具

1、生均一台多媒体电脑，组建内部局域网，并且接入国际互联网。

2、安装WindowsXP操作系统;建立IIS服务器环境，支持ASP。

3、安装网页三剑客（DreamweaverMX;FlashMX;FireworksMX）等网页设计软件;4、安装Acdsee、Photoshop等图形处理与制作软件;

5、其他一些动画与图形处理或制作软件。

三、实验原理

1.创建边框为1像素的表格。

四、实验方法与步骤

1）在文档中，单击表格“”按钮，在对话框中将“单元格间距”设置为“1”。

2）选中插入的表格，将“背景颜色”设置为“黑色”（#0000000）。

3）在表格中选中所有的单元格，在“属性”面版中将“背景颜色”设置为“白色”（#FFFFFF）。

4）设置完毕，保存页面，按下“F12”键预览。

四、实验内容

1（表格制作，在文本编辑器中输入如下的HTML代码程序，用table.htm文件名保存在自

己目录中，并在浏览器中运行。

课程名称

语文

数学

物理

化学

考试成绩

80

95

90

85

表格标签

2（设计表单，在文本编辑器中输入如下的HTML代码程序，用form.htm文件名保存在自

己目录中，并在浏览器中运行。

姓名

电话

商品名称

手表

照相机

电视机

DVD机

单价

100100025001200

数量

金额

3（用表格进行精确定位;插入图片、动画等多媒体元素。

超文本支持的图片格式一般有XBitmap（XBM）、GIF、JPEG三种。

插入图片的标签是，其格式为:

。

SRC属性指明了所要链接的图片文件地址，这个图形文件可以是本地机器上的图形，也可以是位于远端主机上的图片。

地址的表示方法可以沿用上一篇内容“文件的链接”中URL地址表示方法。

例:

IMG属性有HEIGHT、WIDTH、BORDER、ALT等，分别表示图片的高、宽、边框、替代文字等。

我下载的图片

注意:

图片ball.gif和HTML应该保存在相同的文件目录里。

五、讨论与结论

本实验主要通过整个表格和单元格颜色的差异来衬托出实验效果，间距的作用主要在于表现这种颜色差异。

表格的背景颜色和单元格的背景颜色容易混淆，在实验中要认真判断，一旦操作错误则得不到实验的效果。

“表格宽度”文本框右侧的表格的宽度单位，包括“像素”和“百分比”两种，容易混淆，要充分地理解这两种单位表示的意义才能正确地进行选择，否则就不能达到自己想要的效果，设置错误就会严重影响实验效果。

实验四、CSS

一、实验目的

1.掌握css样式的概念及其建立，能够区分三种css样式，并根据要求建立相应的样式。

二、实验内容

1.设置CSS样式。

左侧框架内内容设置样式，存储在css1.css样式文件中，

增加h3标签，行高36px，大小18px;笑傲江湖设置为标题3;

增加a标签，字体颜色为#000066，无修饰;

增加body标签，字体大小12px,背景色#99CC66，扩展Glow,颜色为红色，Strength为5

增加ol标签，设置行高40px,列表项图像为“3.1list.gif”;设置框架中四个标题为ol格式，效果如下图所示。

右侧框架中设置“第一章灭门”字体颜色#000099，字体大小为18px，加粗，并对另外三个标题均应用此设置

三、实验步骤

1.鼠标点到左框架，文本-css样式-新建，点选标签，键入标签名h3，保存在css1，对h3作如下设置。

2.同样增加设置其它标签

3.鼠标点到笑傲江湖，属性面板格式改为标题3.

4（右侧框架中设置“第一章灭门”为标题，字体颜色#000099，字体大小为18px，加粗，自动保存为style2,并对另外三个均设为标题，标题样式均设为style2。

5.保存全部并预览。

四、实验总结

1.CSS样式应用广泛，应在实践操作中积累经验，熟练掌握。

实验五、综合作业

进入大学里的条第一门公选课，我选择了《网站设计与制作》这门课程，进入这门课程的学习。

虽然这门课程的总学时比较短，但是经过老师的认真授课以及我的认真听讲，我学到了很多有关网站设计与制作的知识，在一定程度上为我认识了解网站设计与制作提供了良好的基础，并为我下一步深入学习相关方面的知识做了良好的铺垫。

一、网站设计与制作中所用的工具

1.dreamweaver用与编辑HTML、ASP、JSP、PHP时的辅助工具。

2.flash网页需要画面流动时的首选择

3.photoshop图象处理软件，一般网页都需要有图片相搭配，photoshop是款很强大的工具。

4.fireworks跟Photoshop一样都是图象处理软件，但fireworks偏向与对网页的处理。

二、网站的概念与域名

网站是指在因特网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。

人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网络服务。

人们可以通过浏览器来访问网站，获取自己需要的资讯或者享受网络服务。

文字与图片是构成一个网页的两个最基本的元素。

除此之外，网页的元素还包括动画、音乐、程序等等。

域名是网站在互联网上的名字。

一个非产品推销的纯信息服务网站，其所有建设的价值，都凝结在其网站域名之上。

失去这个域名，所有前期工作就将全部落空要把域名起得形象、简单、易记。

。

三、网页的制作与网站版式

根据这几节课的学习，我基本了解了要想做好一个网站，就必须把网页做好。

首先，要明确所做网站是什么类型的。

其次是布局，还有网站的信息、网站打开的速度等。

（1）、网站的整体布局:

网站主页就好象是宣传栏或者店面——对访问者产生第一印象，都希望尽量给人留下好的印象。

网页应该力求抓住而不是淹没浏览者的注意力，过多的闪烁、色彩、下拉菜单框、图片等会让访问者无所适从，一般来说，好的网站应该给人有这样的感觉:

干净整洁;条理清楚;专业水准;引人入胜。

（2）、信息:

无论商业站点还是个人主页，你必须给人们提供有一定价值的内容才能留住访问者，所以你必须提供某些有价值的东西。

（3）、打开速度:

我们都知道，页面下载速度是网站留住访问者的关键因素，如果20—30秒还不能打开一个网页，一般人就会没有耐心。

至少应该确保主页速度尽可能快，最好不要用大的图片。

（4）、颜色搭配:

颜色也是影响网页的重要因素，不同的颜色对人的感觉有不同的影响，所以在做网页的时候应该注意颜色的搭配。

包括网页的整体的颜色、网页中文字的颜色等。

不要将所有颜色都用到，尽量控制在三至五种色彩以内。

（5）、网站的版式设计:

网页设计作为一种视觉语言，特别讲究编排和布局，虽然主页的设计不等同于平面设计，但它们有许多相近之处。

版式设计通过文字图形的空间组合，表达出和谐与美。

多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要处理好页面之间和页面内的秩序与内容的关系。

为了达到最佳的视觉表现效果，我们将反复推敲整体布局的合理性，使浏览者有一个流畅的视觉体验。

（6）、网页标题的可读性:

必须尽量使你的网页易于阅读。

为所有标题和副标题设置同一字体，并将标题字体加大一号，所有标题和副标题都采用粗体，这样便于识别标题，使浏览者一眼就可以看到要点，以便找出并继续阅读有兴趣的内容。

所以，要认真写好每个标题～

四、HTML语言

虽然课程比较短暂，但老师还是在讲课中穿插了一点HIML语言，它在网页制作中也发挥了比较重要的作用，可以大大提高网页制作的效率。

虽然，我不是计算机专业的，但作为一个电脑爱好者我会在课后抽时间认真去学习掌握这门语言，让自己具备更专业的知识。

总而言之，经过对《网站设计与制作》这门课程的学习，我收获了很多。

我所学的专业并不是计算机方面的，更别说是网页设计了，但是由于我对网页设计及制作的强烈兴趣，我选择这门课程是我最大的乐趣，因为我学到了知识。

并且我今后会继续在这方面提高自己，全面提高，综合发展。

在这里我很感谢老师的认真授课，让我对这门课有了初步的了解，学到了很多关于这方面的知识。

最后我想说句谢谢老师～