网页制作实验报告【精彩3篇】

网页制作实验报告 篇一

在这次网页制作实验中，我采用了HTML和CSS来创建一个简单的个人博客网页。下面是我在制作过程中遇到的问题和解决方案。

首先，我遇到的第一个问题是如何创建网页的基本结构。经过学习和研究，我决定使用HTML来定义网页的结构。我使用了DOCTYPE声明来指定HTML的版本，并创建了一个标签来包含整个网页的内容。在标签中，我添加了网页的标题和引入CSS文件的链接。在标签中，我添加了网页的内容，包括标题、导航栏、文章列表等。

接下来，我遇到的问题是如何使用CSS来美化网页。我学习了CSS的基本语法和常用属性，并使用选择器来选择网页中的元素。我为网页的不同部分设置了不同的样式，包括背景颜色、字体样式、边框等。我还使用了盒模型来控制元素的尺寸和布局。

在制作过程中，我还遇到了一个问题，即如何实现响应式布局。我希望我的网页在不同设备上都能有良好的显示效果。为了解决这个问题，我使用了CSS的媒体查询功能。我根据设备的宽度设置了不同的样式，以适应不同的屏幕大小。

总的来说，通过这次网页制作实验，我学会了使用HTML和CSS来创建网页，并解决了一些常见的问题。我对网页制作有了更深入的了解，并对前端开发产生了浓厚的兴趣。我相信这次实验对我的学习和职业发展都具有重要的意义。

网页制作实验报告 篇二

在这次网页制作实验中，我选择了一个在线商城的主题来创建网页。下面是我在制作过程中遇到的问题和解决方案。

首先，我遇到的第一个问题是如何创建网页的导航栏。导航栏是网页中的一个重要组成部分，用于方便用户导航网页的不同页面。为了解决这个问题，我使用了HTML的无序列表和CSS的浮动属性。我创建了一个

标签，并为每个导航链接创建了一个
• 标签。然后，我使用CSS的浮动属性来将导航链接水平排列。

  接下来，我遇到的问题是如何添加商品列表。为了解决这个问题，我使用了HTML的表格和CSS的边框属性。我创建了一个表格，并在每个单元格中添加了商品的图片、名称和价格。我还为表格添加了边框，以增加网页的美观度。

  在制作过程中，我还遇到了一个问题，即如何添加购物车功能。为了解决这个问题，我使用了JavaScript来实现购物车的功能。我使用了数组来保存用户选择的商品，并使用函数来实现添加商品、删除商品和计算总价等功能。通过这个实验，我不仅学会了如何使用JavaScript来操作网页元素，还加深了对JavaScript的理解。

  总的来说，通过这次网页制作实验，我学会了使用HTML、CSS和JavaScript来创建一个在线商城网页，并解决了一些常见的问题。这次实验不仅提高了我的网页制作能力，还增强了我的动手实践和解决问题的能力。我相信这次实验对我的学习和职业发展都具有重要的意义。

  网页制作实验报告 篇三

  网页制作实验报告

  实验一：站点设置

  一、实验目的及要求

  本实例是通过“站点定义为”对话框中的“高级”选项卡创建一个新站点。

  二、仪器用具

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

  2、安装windows xp操作系统；建立iis服务器环境，支持asp。

  3、安装网页三剑客（dreamweaver mx；flash mx；fireworks mx）等网页设计软件；

  三、实验原理

  通

  

  过“站点定义为”对话框中的“高级”选项卡创建一个新站点。

  四、实验方法与步骤

  1）执行“站点＼管理站点”命令，在弹出的“管理站点”对话框中单击“新建”按钮，在弹出的快捷菜单中选择“站点”命令。

  2）在弹出的“站点定义为”对话框中单击“高级”选项卡。

  3）在“站点名称”文本框中输入站点名称，在“默认文件夹”文本框中选择所创建的站点文件夹。在“默认图象文件夹”文本框中选择存放图象的文件夹，完成后单击“确定”按钮，返回“管理站点”对话框。

  4）在“管理站点”对话框中单击“完成”按钮，站点创建完毕。

  五、实验结果

  六、讨论与结论

  实验开始之前要先建立一个根文件夹，在实验的过程中把站点存在自己建的文件夹里，这样才能使实验条理化，不至于在实验后找不到自己的站点。在实验过程中会出现一些选项，计算机一般会有默认的选择，最后不要去更改，如果要更改要先充分了解清楚该选项的含义，以及它会造成的效果，否则会使实验的结果失真。实验前先熟悉好操作软件是做好该实验的关键。

  实验二：页面图像设置

  一、实验目的及要求：

  本实例的目的是设置页面的背景图像,并创建鼠标经过图像。

  二、仪器用具

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

  2、安装windows xp操作系统；建立iis服务器环境，支持asp。

  3、安装网页三剑客（dreamweaver mx；flash mx；fireworks mx）等网页设计软件；

  4、安装acdsee、photoshop等图形处理与制作软件；

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

  三、实验原理

  设置页面的背景图像,并创建鼠标经过图像。

  四、实验方法与步骤

  1) 在“页面属性”对话框中设置页面的背景图像。

  2) 在页面文档中单击“”插入鼠标经过图像。

  五、实验结果

  六、讨论与结论

  实验结束后我们可以看到页面的背景变成了我们插入的图像，并且要鼠标经过的时候会变成另一个图像，这就是鼠标经过图像的效果。当然这种实验效果很难在实验结果的截图里表现出来。这个实验的关键在于背景图像的选择，如果背景图像太大不仅会影响网页的打开速度，甚至图像在插入会也会有失真的感觉，因此在插入前对图像进行必要的处理能使实验的效果更好。

  实验三：表格制作

  一、实验目的及要求：

  本实例是要创建边框为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”键预览。

  五、实验结果

  六、讨论与结论

  本实验主要通过整个表格和单元格颜色的差异来衬托出实验效果，间距的作用主要在于表现这种颜色差异。表格的背景颜色和单元格的背景颜色容易混淆，在实验中要认真判断，一旦操作错误则得不到实验的效果。“表格宽度”文本框右侧的表格的宽度单位，包括“像素”和“百分比”两种，容易混淆，要充分地理解这两种单位表示的意义才能正确地进行选择，否则就不能达到自己想要的效果，设置错误就会严重影响实验效果。

  实验四：创建锚点链接

  一、实验目的及要求：

  本实例的目的是创建锚点链接。

  二、仪器用具

  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”键预览。

  五、实验结果

  六、讨论与结论

  添加瞄记的作用是可以帮读者快速找到自己想要的文章，同时也可以使页面更加精简。本实验的关键难点在于链接文本框输入的名称和瞄记的名称要相一致才能达到实验的效果，同时要记得是在上一篇文章的结尾处输入文字并设置瞄记名称，并记得输入对应的文章，否则瞄记可能不能用。熟练程度低在实验中不能很好地使用各种工具，无法一次准确地寻找到适当的位置。实验中忘记选择“不可见元素”，几次实验都失败，最后才得出正确的结论。因此在实验前要先做好预习，否则实验过程会比较吃力。

  实验五：设置css样式

  一、实验目的及要求：

  本实例的目的是通过设置css样式创建表格的虚线边框。

  二、仪器用具

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

  2、安装windows xp操作系统；建立iis服务器环境，支持asp。

  3、安装网页三剑客（dreamweaver mx；flash mx；fireworks mx）等网页设计软件；

  4、安装acdsee、photoshop等图形处理与制作软件；

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

  三、实验原理

  通过设置css样式创建表格的虚线边框。

  四、实验方法与步骤

  1) 在网页中创建一个表格。

  2) 在“css样式”面板中单击“”按钮，在弹出的对话框中进行设置，完成后单击“确定”按钮。

  3) 在弹出的对话框中进行设置，完成后单击“确定”按钮。

  五、实验结果

  六、讨论与结论

  对话框中各项指标和属性的设置存在一定的难度，如果没熟练掌握就容易出错使实验失败。对“ccs”样式所要使用的各种按扭不够熟悉在使用的时候觉得很生硬。这个实验成功的关键在于对软件的掌握程度以及对各种属性的认识程度，只要充分地掌握了软件的各种操作，对各属性所代表的含义有充分的认识就能很好地完成这个实验。

  实验六：创建表单

  一、实验目的及要求：

  本实例的目的是创建一个募捐表单。