本文将为您介绍一下“网页制作实验报告”的相关信息。常言道，实践出真知，随着人们自身素质提升。报告成为了一种新兴产业，认真撰写工作报告，也能体现我们认真负责的工作态度。希望你更多关注本网站更新！
网页制作实验报告 篇1
网页制作实验报告
实验一：站点设置
一、实验目的及要求
本实例是通过“站点定义为”对话框中的“高级”选项卡创建一个新站点。
二、仪器用具
1、生均一台多媒体电脑，组建内部局域网，并且接入国际互联网。
2、安装windowsxp操作系统；建立iis服务器环境，支持asp。
3、安装网页三剑客（dreamweavermx；flashmx；fireworksmx）等网页设计软件；
三、实验原理
通过“站点定义为”对话框中的“高级”选项卡创建一个新站点。
四、实验方法与步骤
1）执行“站点＼管理站点”命令，在弹出的“管理站点”对话框中单击“新建”按钮，在弹出的快捷菜单中选择“站点”命令。
2）在弹出的“站点定义为”对话框中单击“高级”选项卡。
3）在“站点名称”文本框中输入站点名称，在“默认文件夹”文本框中选择所创建的站点文件夹。在“默认图象文件夹”文本框中选择存放图象的文件夹，完成后单击“确定”按钮，返回“管理站点”对话框。
4）在“管理站点”对话框中单击“完成”按钮，站点创建完毕。
五、实验结果
六、讨论与结论
实验开始之前要先建立一个根文件夹，在实验的过程中把站点存在自己建的文件夹里，这样才能使实验条理化，不至于在实验后找不到自己的站点。在实验过程中会出现一些选项，计算机一般会有默认的选择，最后不要去更改，如果要更改要先充分了解清楚该选项的含义，以及它会造成的效果，否则会使实验的结果失真。实验前先熟悉好操作软件是做好该实验的关键。
实验二：页面图像设置
一、实验目的及要求：
本实例的目的是设置页面的背景图像,并创建鼠标经过图像。
二、仪器用具
1、生均一台多媒体电脑，组建内部局域网，并且接入国际互联网。
2、安装windowsxp操作系统；建立iis服务器环境，支持asp。
3、安装网页三剑客（dreamweavermx；flashmx；fireworksmx）等网页设计软件；
4、安装acdsee、photoshop等图形处理与制作软件；
5、其他一些动画与图形处理或制作软件。
三、实验原理
设置页面的背景图像,并创建鼠标经过图像。
四、实验方法与步骤
1)在“页面属性”对话框中设置页面的背景图像。
2)在页面文档中单击“”插入鼠标经过图像。
五、实验结果
六、讨论与结论
实验结束后我们可以看到页面的背景变成了我们插入的图像，并且要鼠标经过的时候会变成另一个图像，这就是鼠标经过图像的效果。当然这种实验效果很难在实验结果的截图里表现出来。这个实验的关键在于背景图像的选择，如果背景图像太大不仅会影响网页的打开速度，甚至图像在插入会也会有失真的感觉，因此在插入前对图像进行必要的处理能使实验的效果更好。
实验三：表格制作
一、实验目的及要求：
本实例是要创建边框为1像素的表格。
二、仪器用具
1、生均一台多媒体电脑，组建内部局域网，并且接入国际互联网。
2、安装windowsxp操作系统；建立iis服务器环境，支持asp。
3、安装网页三剑客（dreamweavermx；flashmx；fireworksmx）等网页设计软件；
4、安装acdsee、photoshop等图形处理与制作软件；
5、其他一些动画与图形处理或制作软件。
三、实验原理
创建边框为1像素的表格。
四、实验方法与步骤
1)在文档中，单击表格“”按钮，在对话框中将“单元格间距”设置为“1”。
2)选中插入的表格，将“背景颜色”设置为“黑色”（#0000000）。
3)在表格中选中所有的单元格，在“属性”面版中将“背景颜色”设置为“白色”（#ffffff）。
4)设置完毕，保存页面，按下“f12”键预览。
五、实验结果
六、讨论与结论（WwW.928D.COM 策划书范文网）
本实验主要通过整个表格和单元格颜色的差异来衬托出实验效果，间距的作用主要在于表现这种颜色差异。表格的背景颜色和单元格的背景颜色容易混淆，在实验中要认真判断，一旦操作错误则得不到实验的效果。“表格宽度”文本框右侧的表格的宽度单位，包括“像素”和“百分比”两种，容易混淆，要充分地理解这两种单位表示的意义才能正确地进行选择，否则就不能达到自己想要的效果，设置错误就会严重影响实验效果。
实验四：创建锚点链接
一、实验目的及要求：
本实例的目的是创建锚点链接。
二、仪器用具
1、生均一台多媒体电脑，组建内部局域网，并且接入国际互联网。
2、安装windowsxp操作系统；建立iis服务器环境，支持asp。
3、安装网页三剑客（dreamweavermx；flashmx；fireworksmx）等网页设计软件；
4、安装acdsee、photoshop等图形处理与制作软件；
5、其他一些动画与图形处理或制作软件。
三、实验原理
创建锚点链接。
四、实验方法与步骤
1)在页面中插入1行4列的表格，并在各单元格中输入导航文字。
2)分别选中各单元格的文字，单击“”按钮，在弹出的“超级链接”对话框上的“链接”文本框分别输入“#01”“#02”“#03”“#04”。
3)在文档中输入文字并设置锚记名称“01”，按下“enter”键换行，输入一篇文章。
4)在文章的结尾处换行，输入文字并设置锚记名称“02”，按下“enter”键换行，输入一篇文章。
5)同样的方法在页面下文分别输入文字和命名锚记为“03”和“04”，并输入文章。
6)保存页面，按下“f12”键预览。
五、实验结果
六、讨论与结论
添加瞄记的作用是可以帮读者快速找到自己想要的文章，同时也可以使页面更加精简。本实验的关键难点在于链接文本框输入的名称和瞄记的名称要相一致才能达到实验的效果，同时要记得是在上一篇文章的结尾处输入文字并设置瞄记名称，并记得输入对应的文章，否则瞄记可能不能用。熟练程度低在实验中不能很好地使用各种工具，无法一次准确地寻找到适当的位置。实验中忘记选择“不可见元素”，几次实验都失败，最后才得出正确的结论。因此在实验前要先做好预习，否则实验过程会比较吃力。
实验五：设置css样式
一、实验目的及要求：
本实例的目的是通过设置css样式创建表格的虚线边框。
二、仪器用具
1、生均一台多媒体电脑，组建内部局域网，并且接入国际互联网。
2、安装windowsxp操作系统；建立iis服务器环境，支持asp。
3、安装网页三剑客（dreamweavermx；flashmx；fireworksmx）等网页设计软件；
4、安装acdsee、photoshop等图形处理与制作软件；
5、其他一些动画与图形处理或制作软件。
三、实验原理
通过设置css样式创建表格的虚线边框。
四、实验方法与步骤
1)在网页中创建一个表格。
2)在“css样式”面板中单击“”按钮，在弹出的对话框中进行设置，完成后单击“确定”按钮。
3)在弹出的对话框中进行设置，完成后单击“确定”按钮。
五、实验结果
六、讨论与结论
对话框中各项指标和属性的设置存在一定的难度，如果没熟练掌握就容易出错使实验失败。对“ccs”样式所要使用的各种按扭不够熟悉在使用的时候觉得很生硬。这个实验成功的关键在于对软件的掌握程度以及对各种属性的认识程度，只要充分地掌握了软件的各种操作，对各属性所代表的含义有充分的认识就能很好地完成这个实验。
实验六：创建表单
一、实验目的及要求：
本实例的目的是创建一个募捐表单。
网页制作实验报告 篇2
一、实验目的及要求：
本实例的目的是设置页面的背景图像,并创建鼠标经过图像。
二、仪器用具
1、生均一台多媒体电脑，组建内部局域网，并且接入国际互联网。
2、安装windows xp操作系统;建立iis服务器环境，支持asp。
3、安装网页三剑客(dreamweaver mx;flash mx;fireworks mx)等网页设计软件;
4、安装acdsee、photoshop等图形处理与制作软件;
5、其他一些动画与图形处理或制作软件。
三、实验原理
设置页面的背景图像,并创建鼠标经过图像。
四、实验方法与步骤
1) 在“页面属性”对话框中设置页面的背景图像。
2) 在页面文档中单击“”插入鼠标经过图像。
五、实验结果
六、讨论与结论
实验结束后我们可以看到页面的背景变成了我们插入的图像，并且要鼠标经过的时候会变成另一个图像，这就是鼠标经过图像的效果。当然这种实验效果很难在实验结果的截图里表现出来。这个实验的关键在于背景图像的选择，如果背景图像太大不仅会影响网页的打开速度，甚至图像在插入会也会有失真的感觉，因此在插入前对图像进行必要的处理能使实验的效果更好。
网页制作实验报告 篇3
一、实验目的及要求：
本实例的目的是通过设置css样式创建表格的虚线边框。
二、仪器用具
1、生均一台多媒体电脑，组建内部局域网，并且接入国际互联网。
2、安装windows xp操作系统;建立iis服务器环境，支持asp。
3、安装网页三剑客(dreamweaver mx;flash mx;fireworks mx)等网页设计软件;
4、安装acdsee、photoshop等图形处理与制作软件;
5、其他一些动画与图形处理或制作软件。
三、实验原理
通过设置css样式创建表格的虚线边框。
四、实验方法与步骤
1) 在网页中创建一个表格。
2) 在“css样式”面板中单击“”按钮，在弹出的对话框中进行设置，完成后单击“确定”按钮。
3) 在弹出的对话框中进行设置，完成后单击“确定”按钮。
五、实验结果
六、讨论与结论
对话框中各项指标和属性的设置存在一定的难度，如果没熟练掌握就容易出错使实验失败。对“ccs”样式所要使用的各种按扭不够熟悉在使用的时候觉得很生硬。这个实验成功的关键在于对软件的掌握程度以及对各种属性的认识程度，只要充分地掌握了软件的各种操作，对各属性所代表的含义有充分的认识就能很好地完成这个实验。
网页制作实验报告 篇4
一、实验目的及要求
本实例是通过“站点定义为”对话框中的“高级”选项卡创建一个新站点。
二、仪器用具
1、生均一台多媒体电脑，组建内部局域网，并且接入国际互联网。
2、安装windows xp操作系统;建立iis服务器环境，支持asp。
3、安装网页三剑客(dreamweaver mx;flash mx;fireworks mx)等网页设计软件;
三、实验原理
通过“站点定义为”对话框中的“高级”选项卡创建一个新站点。
四、实验方法与步骤
1)执行“站点管理站点”命令，在弹出的“管理站点”对话框中单击“新建”按钮，在弹出的快捷菜单中选择“站点”命令。
2)在弹出的“站点定义为”对话框中单击“高级”选项卡。
3)在“站点名称”文本框中输入站点名称，在“默认文件夹”文本框中选择所创建的站点文件夹。在“默认图象文件夹”文本框中选择存放图象的文件夹，完成后单击“确定”按钮，返回“管理站点”对话框。
4)在“管理站点”对话框中单击“完成”按钮，站点创建完毕。
五、实验结果
六、讨论与结论
实验开始之前要先建立一个根文件夹，在实验的过程中把站点存在自己建的文件夹里，这样才能使实验条理化，不至于在实验后找不到自己的站点。在实验过程中会出现一些选项，计算机一般会有默认的选择，最后不要去更改，如果要更改要先充分了解清楚该选项的含义，以及它会造成的效果，否则会使实验的结果失真。实验前先熟悉好操作软件是做好该实验的关键。
网页制作实验报告 篇5
一、实验目的及要求：
本实例的目的是创建锚点链接。
二、仪器用具
1、生均一台多媒体电脑，组建内部局域网，并且接入国际互联网。
2、安装windows xp操作系统;建立iis服务器环境，支持asp。
3、安装网页三剑客(dreamweaver mx;flash mx;fireworks mx)等网页设计软件;
4、安装acdsee、photoshop等图形处理与制作软件;
5、其他一些动画与图形处理或制作软件。
三、实验原理
创建锚点链接。
四、实验方法与步骤
1) 在页面中插入1行4列的表格，并在各单元格中输入导航文字。
2) 分别选中各单元格的文字，单击“”按钮，在弹出的“超级链接”对话框上的“链接”文本框分别输入“#01”“#02”“#03”“#04”。
3) 在文档中输入文字并设置锚记名称“01”，按下“ enter”键换行，输入一篇文章。
4) 在文章的结尾处换行，输入文字并设置锚记名称“02”，按下“ enter”键换行，输入一篇文章。
5) 同样的方法在页面下文分别输入文字和命名锚记为“03”和“04”，并输入文章。
6) 保存页面，按下“f12”键预览。
五、实验结果
六、讨论与结论
添加瞄记的作用是可以帮读者快速找到自己想要的文章，同时也可以使页面更加精简。本实验的关键难点在于链接文本框输入的名称和瞄记的名称要相一致才能达到实验的效果，同时要记得是在上一篇文章的结尾处输入文字并设置瞄记名称，并记得输入对应的文章，否则瞄记可能不能用。熟练程度低在实验中不能很好地使用各种工具，无法一次准确地寻找到适当的位置。实验中忘记选择“不可见元素”，几次实验都失败，最后才得出正确的结论。因此在实验前要先做好预习，否则实验过程会比较吃力。
网页制作实验报告 篇6
一、实验目的及要求：
本实例是要创建边框为1像素的表格。
二、仪器用具
1、生均一台多媒体电脑，组建内部局域网，并且接入国际互联网。
2、安装windows xp操作系统;建立iis服务器环境，支持asp。
3、安装网页三剑客(dreamweaver mx;flash mx;fireworks mx)等网页设计软件;
4、安装acdsee、photoshop等图形处理与制作软件;
5、其他一些动画与图形处理或制作软件。
三、实验原理
创建边框为1像素的表格。
四、实验方法与步骤
1) 在文档中，单击表格“”按钮，在对话框中将“单元格间距”设置为“1”。
2) 选中插入的表格，将“背景颜色”设置为“黑色”(#0000000)。
3) 在表格中选中所有的单元格，在“属性”面版中将“背景颜色”设置为“白色”(#ffffff)。
4) 设置完毕，保存页面，按下“f12”键预览。
五、实验结果
六、讨论与结论
本实验主要通过整个表格和单元格颜色的差异来衬托出实验效果，间距的作用主要在于表现这种颜色差异。表格的背景颜色和单元格的背景颜色容易混淆，在实验中要认真判断，一旦操作错误则得不到实验的效果。“表格宽度”文本框右侧的表格的宽度单位，包括“像素”和“百分比”两种，容易混淆，要充分地理解这两种单位表示的意义才能正确地进行选择，否则就不能达到自己想要的效果，设置错误就会严重影响实验效果。
网页制作实验报告 篇7
网页的核心是内容，用户访问网站最重要的目的就是要看网页的正文，所以，网页的文本排版非常重要。排版是为了信息分享而重新将字体进行排列的一门艺术和技巧。也就是说，排版是为传递信息而进行的简单排列组合，然而，好的排版非常注重视觉精度和细节，甚至是很小的细节都不容忽视。如今，印刷品，书籍，报纸，信件，电视，网络等都会涉及到排版，简直是无处不在。甚至连重要的网站在以前就开始关注排版了，并且在当时尝试用现成的资源尽可能提高排版水平。网页排版是近年兴起的一个普通排版的分支概念。虽然，图片也可以传递信息，但网站上的内容大部分是由文字组成。这就是网络排版如此受重视的原因。排版的重要性丝毫不亚于视觉层次，合适颜色的选取，网站功能以及其它特性。我们从来没低估过网络排版的重要性，也深知它在良好的用户体验中所发挥的重要作用。
任何追求漂亮版面的人都知道，印刷排版跟网络排版完全是两码事。尽管有些规则可能相同，但网页设计所处环境完全不同，两者都有自己一套必须遵守的规则和准则。两者的原理不同，不能同时存在，跨越这个界线可能会导致排版混乱。
尽管，你可能已经熟悉了网页设计的层次结构，你可能也明白排版中也少不了它。层级结构会给你一个阅读显示文本的起点。这点非常重要，因为这会帮助你准确传递信息，同时保证读者准确理解。很多网站在这个问题上都做得很好，但是你还是应该牢记在心，这样你的网站就不会显得太过时。为了增加可读性，给标题、介绍段落和常规文本创建标签层级是很重要的，这样你的用户可以看清你的文章结构并能很快的找到他们感兴趣的部分。
浏览器用在链接的默认样式一直是蓝色文本加下划线。虽然这个蓝色经常被改成另外的颜色，但下划线一直被当做是链接的常规样式。这就是为什么除了链接你不要给其他的东西加上下划线的原因。否则，这可能对你的用户造成很大的困惑。
很少遇到网站排版中出现层级结构的问题，但相当多的网站排版却存在间距排列的问题。网站所有元素的间距都必须按照一定的条理进行排列，因此你在处理间距必须遵循这些条理。你可能需要去了解以下的专用术语：行距大小（LeadingSize）、字偶间距（Kerning）和字间距（Tracking）。
行距大小是一种增加或减少文本行之间产生的空格的方法。字偶间距是调节字符间空格，使其达到更愉悦的视觉效果的过程。使用字间距同样能达到字偶距调整的效果，两者之间的唯一差别在于空格的产生，字间距是在每个字符间产生等量的空格，而字偶间距是调整的基于字符对所产生的空格。最常见的网页布局错误之一是定义了不正确的行高。行高是定义一行文本的高度，所以我们必须按照文本字体大小来设定行高。一般来说，在设置文本行高的时候，我经常在字体大小的基础上加上7个像素（对12-17像素的字体而言）。另外一个常见的错误是标题周围不正确的margin值。标题其实是与它下面的段落是相关联的，而不仅仅是两个段落的分割符。这就是为什么标题的margin-top比margin-bottom要宽。
排版中的颜色并不专指单一的文本颜色，通常是指网站用到的所有颜色。网站用到的图片和颜色相当于文本的“背景”，因此使用颜色时要谨慎。网站的元素要和排版颜色协调，不要让文本显得模糊不清。你也可尝试较大尺寸的排版（又称为宏观排版）来达到更好的效果。简单来说，宏观排版就是使用更大的文本来吸引用户。它的长度通常不能超过1到4个单词，因此，保持文字的简洁性和正确性就显得格外很重要。在关键信息下，但是这并不是那么重要，因为这并不是你的网站的焦点，但大尺寸文字却是。
即使你的网站有很好的排版了，另一个需要注意的是对比。如果你的页面背景是中灰色（#999999），那么不要使用深灰色（#333333）的文本，否则你的内容很难看清，尤其是对一些年纪比较大的或视力差的人。总之，除非你的网站是关于黑客、黑帽seo或哥特摇滚的，不然你应该使用浅色背景和深色字体来保证清晰的对比度增加你网站的可读性。
最重要的排版技巧之一是“大胆留白”。留白是指空白区或没有使用的空间，它会使你的设计整齐而专业。许多人喜欢苹果网站的原因是：它尽管简单但很精致，而且有很多留白。
字体配对是将两种或更多字体通过排列组合达到最佳效果的过程。这听起来有意思，但对于初学者却并非易事。选择一种或多种的漂亮字体就够了，但是，你只是想完美配对两种字体，从理论上讲，难度更大。字体配对可降低使用单一字体时可能所产生的单调感。你可以就此进行实践，为网站中所有的大标题使用一种字体，在一些简单段落里使用另一种字体，看看最终效果是否很单调。为了确保可读性和专业性，你的网页上不应该使用超过3种字体。使用过多的字体会干扰你的用户而且让你的网站看起来很乱。相反，较少的字体让你的网站显得干净易读。你可以标题使用一种字体，正文使用一种字体，最后logo或副标题使用另外的字体。
如果你把字体弄得难以辨认，这是犯了大忌。你也知道字体配对对于精美排版的重要性，而不是用一些统一的文本。即使你找到了很棒的字体搭配，还是不要忘记为字体设置合适的大小和粗细。字体粗细和大小设置不当基本上就毁掉了之前的搭配，因为这会让你已经使用的不同字体难以辨认。还应注意一点，背景图片跟字体颜色相近或不匹配，会导致字体淹没在背景图片当中。
在过去，设计师必须使用用户电脑，甚至带文本图片上有的字体，这样字体才会正确显示。随着技术不断发展，HTML5很快克服了这些问题。另外还有许多很棒的字体替换工具，这些工具搜集了很多字体，用户不用安装专门的字体，字体照样正确显示。如果你想提升你的排版水平不容忽视的一点是正确使用标点符号。例如，引号经常用双撇符号代替，就是全角符号和半角符号的区别，就像中文的引号和英文的引号不同一样