网页编辑实验报告

Web

动

态

网

页

设

计

编程环境的熟悉 实验日志

实验题目：编程环境的熟悉

实验目的：

1、学会使用Macromedia Dreamweaver 软件，了解并掌握该软件的各种功能，为以后的网页设计打下基础。

2、重点学习使用“页面创建”和“设置服务器信息”功能。

实验要求：按照Macromedia Dreamweaver MX软件使用说明，练习使用Macromedia

Dreamweaver MX软件。

实验主要步骤：

1、起始页的打开和关闭：

操作：（1）运行Dreamweaver，将显示起始页，单击“不再显示”。

（2）打开菜单栏“编辑”选项>“首选参数”>“常规”选项。

2、工作区布局常用两种：编码器和设计器。

操作：

(1)运行Dreamweaver，可以进行编码器或设计器的选择。

(2)打开菜单栏“窗口”选项>“工作区布局”进行选择。

3、在本地站点中浏览网页的快捷键是F12。

4、创建本地站点：

（1）可以使用“站点定义向导”设置 Dreamweaver 站点，该向导会引领您完成设置过程。

（2）也可以使用“站点定义”的“高级”设置，根据需要分别设置本地文件夹、远程文件夹和测试文件夹。

5、安装IIS服务器

（1）选择“开始”>“设置”>“控制面板”>“添加或删除程序”，或者选择“开始”>“控制面板”>“添加或删除程序”。

（2）选择“添加/删除 Windows 组件”。

（3）选择“Internet 信息服务 (IIS)”，然后单击“下一步”。

（4）按照安装说明进行操作。

6、配置IIS服务器

（1）启动ASP的父路径。

（2）配置IIS的站点。

（3）设置网站端口。

（4）设置网站默认文档。

7、发布站点：

1）设置远程文件夹：远程文件夹通常具有与本地文件夹相同的名称，因为远程站点通常完全就是本地站点的副本。

（1）在您的远程服务器上，在服务器的 Web 根文件夹中创建一个空文件夹。将新的空文件夹命名为 cafe_townsend（与本地根文件夹的名称相同）。

网页设计与制作实验指导一览表

实验名称 实验内容 备注

实验一 HTML语言 详细内容

实验二 初识Dreamweaver 详细内容

实验三 文本操作 详细内容

实验四 图像操作 详细内容

实验五 超级链接 详细内容

实验六 表格布局 详细内容

实验七 多媒体应用 详细内容

实验八 CSS样式 详细内容

实验九 层的布局 详细内容

实验十 框架网页 详细内容

实验十一 模板和库 详细内容

实验十二 表单网页 详细内容

实验十三 网站开发综合实例 详细内容

实验1 HTML语言

实训目的:

为了让学生能熟悉学习网页不可避免要接触的HTML语言，达到用该语言可以建立一个简单的网页的目的，同时了解建立站点是做网站必不可少的，要掌握建立站点的方法。

素材准备：

准备制作网页所需的文字素材、图像素材。

实验课时：

2学时

实验内容：

1. 创建站点；

2. 新建网页以及保存，重命名；

3. 输入HTML语言。

实验步骤： 1. 在E盘中新建本地根文件夹，命名为root，并在该文件夹中新建image文件夹以存放网站中所要用到的图片。

2. 定义站点：设置 "站点名称"，命名为 "mysite";设置本地根文件夹,指定为E盘下的root文件夹;设置 "HTTP地址"为localhost。

3. 创建与设置文档的页面属性： 新建一个页面，保存名为“HTML基础”的文档。

4. 切换代码模式下，输入代码。

5. 保存文件，预览文件效果。

实验过程注意事项:

1. 在创建站点的过程中注意建立本地文件夹，文件夹命名最好为英文；网站中所有的文件最好取名为英文；注意文件的路径；

2. 所有的图片文件单独放在image文件夹内。

实验思考:

除了用HTML语言来做这个网页，还有没有其它的方法？

书写实验报告要求:

根据最终所作的网页，写出实验报告。

页面效果图：

百度文库 - 让每个人平等地提升自我

1 网页制作实验报告格式

实验一：站点设置

一、实验目的及要求

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

二、仪器用具

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

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

3、安装网页三剑客(dreamweaver mx;flash

mx;fireworks mx)等网页设计软件;

三、实验原理

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

四、实验方法与步骤

1)执行“站点管理站点”命令，在弹出的“管理站点”百度文库 - 让每个人平等地提升自我

2 对话框中单击“新建”按钮，在弹出的快捷菜单中选择“站点”命令。

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

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

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

五、实验结果

六、讨论与结论

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

实验二：页面图像设置 百度文库 - 让每个人平等地提升自我

3 一、实验目的及要求：

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

二、仪器用具

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

html网页设计实验报告

实验目的：

通过本次实验，掌握HTML基本标签的使用方法，并能够运用所学知识设计一个简单的网页。

实验步骤：

1. 下载安装HTML编辑器

2. 设计网页结构，包括标题、导航栏、内容区域等

3. 插入文字、图片、链接等元素

4. 优化网页排版和样式

实验成果：

经过不断的实验设计和排版调整，我完成了一个简单而实用的网页设计。整个网页结构明确、内容丰富，符合大众化的视觉风格，同时也充分体现了网页设计的个性和创新。

实验体会：

通过本次实验，我深刻认识到了HTML网页设计的重要性和实用性。在今天的知识经济时代，网络已经成为我们的生活和工作中不可或缺的一部分，而在网络世界中，如何利用网页设计和实现信息传递和交流显得尤为重要。所以，掌握HTML网页设计技能不仅可以丰富我们的知识储备和实践能力，还可以为我们今后的职业生涯打下坚实的基础。

总结：

通过本次实验，我对HTML网页设计技术的应用有了初步认识，也进一步了解到了HTML网页设计的一些基本知识和实用技巧。我相信，在今后的学习和实践中，我会不断地扩展和深化我的HTML网页设计技术，为我今后的职业生涯发展打下坚实的基础。