实验5-Dreamweaver网页制作与设计(一)创建网站-第13周共27页文档

网页设计实验指导书（一）DreamWeaver静态网页制作第一章网站规划 ................................................................................................... - 3 - 第二章Dreamweaver静态网页设计实验 ...................................................... - 8 - 实验一在Dreamweaver中建立一个站点.................................................. - 8 - 实验二在网页中使用文本........................................................................... - 15 - 实验三超级链接的建立............................................................................... - 21 - 实验四网页图像的应用............................................................................... - 29 - 实验五网页表格操作 ..................................................................................... - 36 - 实验六利用表格进行网页布局..................................................................... - 39 - 实验七利用层进行网页布局....................................................................... - 48 - 实验八行为和图层的应用............................................................................. - 53 -实验九框架型网页的制作........................................................................... - 66 - 实验十一交互式表单的应用..................................................................... - 84 - 实验十二HTML语言基础应用 .................................................................... - 90 - 实验十三网页动态效果辑............................................................................. - 97 - 实验十四CSS样式表的创建及运用....................................................... - 106 -第一章网站规划一、网站建设的基本流程网站建设的基本流程是：网站规划，网页设计，网上安家以及网站维护与管理，如图1-1所示。

广播电视大学实训报告书一姓名学号专业/班级14秋计算机信息管理课程名称Dreamweaver网页设计教材网页设计与制作――Macromedia Dreamweaver 8任务编号01 任务名称使用Dreamweaver建立网站，建立一个名为“wywed”的网站思考题1、通过站点设置向导建立了站点之后，怎样进一步了解站点的设置可以进一步在高级模式下了解站点的设置2、对多个网站进行管理，要通过什么面板进行对多个网站进行管理是通过"文件"面板进行的3、思考建立一个个人网站应包括的内容、建立的栏目、需要的素材内容：文本、图形、链接、表格表单、Flash内容、计数器、时间戳栏目：主页日志相册留言关于素材：文本、图片、动画、midi、视频和音乐等考核内容及标准分值作品评语及成绩评定学生互评成绩20 非常熟练的完成操作，成绩：20设计与制作得分40心得及思考题得分40综合评语总分考核标准（分4个等级）1．优：在较好的完成实训任务书中的各项任务的基础上，有自己的创新，并能够应用所学的知识实现学生自己的设计想法。

2．良：能够按照要求完成实训任务书中的各项任务。

3．可：能够完成实训任务书中的各项任务，但有1－2个任务没有按照要求完成设计。

4．差：不能够完成实训任务书中的各项任务。

说明：1．浅灰色部分由学生填写2．白色部分为教师判分用3．本报告与学生实际作品相关联姓名学号专业/班级14秋计算机信息管理课程名称Dreamweaver网页设计教材网页设计与制作――Macromed ia Dreamweaver 8任务编号02 任务名称网页中插入导航条本次实训你掌握了哪些新的技术在网页中插入导航条正确设置导航条的各属性思考题1、怎样在页面中插入“鼠标经过图像”？在“文档”窗口中，将插入点放置在要显示鼠标经过图像的位置。

使用以下方法之一插入鼠标经过图像：1）、在“插入”栏的“常用”类别中，单击“图像”按钮，然后选择“鼠标经过图像”图标。

怎么使⽤dreamweaver制作⽹页教程dw建站设计⽹页这⼀款专业的⽹页制作软件，相信相关专业的⼈员都不会陌⽣。

可以说，它是第⼀套针对专业⽹页设计师特别发展的视觉化⽹页开发⼯具，利⽤它可以轻⽽易举地制作出跨越平台限制和跨越浏览器限制的充满动感的⽹页。

这⾥西西给⼤家带来⼀个dreamweaver制作⽹页的教程，初学DW的朋友可以参考⼀下。

⼀、定义站点1、在任意⼀个根⽬录下创建好⼀个⽂件夹（我们这⾥假设为E盘），如取名为MyWeb。

***备注：⽹站中所⽤的⽂件都要⽤英⽂名。

2、打开Dreamweaver，选择“站点—新建站点”，打开对话框。

在站点名称中输⼊⽹站的名称（可⽤中⽂），在本地根⽂件夹中选择刚才创建的⽂件夹（E:web）。

然后确定即可。

***备注：再次打开Dreamweaver，会⾃动找到刚才设⽴的站点。

如果有多个站点，可以在菜单“站点—打开站点”中去选择。

⼆、创建页⾯1、在本地⽂件夹E:\MyWeb下⾯的空⽩处，按右键选“新建⽂件”，这样就建好了⼀个页⾯，默认的⽂件名为untitled.htm。

htm 就表⽰这个⽹页⽂件是⼀个静态的HTML⽂件。

给它改名为index.htm。

***⽹站第⼀页的名字通常是index.htm或index.html。

其它页⾯的名字可以⾃⼰取。

2、双击index.htm进⼊该页⾯的编辑状态。

在标题空格⾥输⼊⽹页名称，按右键选页⾯属性，打开“页⾯属性”窗⼝。

在这⾥可以设置⽹站的标题、背景颜⾊或背影图像，超级链接的颜⾊（⼀般默认即可），其他都保持默认即可。

3．此时光标位于左上⾓，可输⼊⼀句话，如“欢迎来到我的主页”。

选取⽂字，⽤菜单“窗⼝/属性”打开属性⾯板，选取⽂字⼤⼩为6，再使⽂字居中，然后在⽂字前⽤⼏个回车使其位于页⾯中间。

4．如要选取字体，则选择字体中的最后⼀项：编辑字体列表。

然后在对话框中选+号，接着在“可⽤字体”栏中选择需要加⼊到字体列表中的⼀种字体，点击中间的按钮就可以加⼊了。

网页设计Dreamweaver实验实验1 网页元素的基本操作一．实验目的和要求1．掌握Dreamweaver中本地站点的创建2．掌握网页的新建、保存与浏览3．掌握文本的添加与格式化4．掌握图像元素的设置5．掌握表格的设置6．掌握对象的超链接二．实验内容和步骤在设计网页之前，我们必须首先建立网站，此后Dreamweaver会自动将所有网站资源（如网页文档、图片、动画、音频文件、视频文件、程序等）都保存到该网站文件夹之中，从而保证网站发布后网页上的所有元素都可以正常浏览。

网站分为本地站点与远程站点。

本地站点存放在本地硬盘上，远程站点存放在发布网站的服务器端。

这里我们介绍本地站点的创建。

1.创建本地站点①在E盘创建文件夹myweb，用来存放网站资源。

②启动Dreamweaver 8，依次单击菜单栏“站点/新建站点”命令，打开站点定义对话框，如图5-1所示。

图5-1 站点定义对话框③在“基本”选项卡中的第一个文本框中输入新建站点的站点名myweb，单击“下一步”按钮。

④在接下来的第二个对话框中，对于“是否打算使用服务器技术”选择“否，我不想使用服务器技术”，单击“下一步”按钮，如图5-2所示。

图5-2 是否使用服务器技术⑤在第三个对话框中，选择单选框“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”，在下侧的文本框中输入“E:\myweb\”，如图5-3所示。

图5-3 如何使用编辑文件⑥如果路径比较复杂，也可以单击文本框右侧的文件夹按钮，在弹出的“选择站点myweb的本地根文件夹”窗口中确定文件夹的位置，如图5-4所示。

图5-4 选择本地根文件夹⑦在第四个对话框中，对于“如何连接到远程服务器”，选择“无”。

单击“下一步”，如图5-5所示。

图5-5 连接远程服务器⑧在最后一个对话框中显示了刚建立的本地站点的信息，如图5-6所示。

图5-6 本地站点信息⑨单击“完成”按钮，结束站点定义。

此时可以在“文件”面板中看到我们定义的站点myweb，如图5-7所示。

目录目录 0摘要 (2)正文 (3)网页制作过程大纲 (3)具体操作步骤 (3)制作过程简介 (4)制作网页前的准备： (4)开始制作网页： (4)网页制作的要点： (5)实践心得 (6)学到的知识： (7)网页制作心得： (8)一．页面的设计方面 (8)二．网页视觉效果 (8)三．网页的整体布局和导航 (8)四．网页中文字、图像 (9)五．网页制作过程中的其他注意事项 (9)Web考试网页制作摘要在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。

因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。

对于现在的社会，科技的飞速发展已经成为社会发展的标志。

其中计算机的发展可谓快中之快，而在计算机的发展中计算机网络的发展又是首当其冲的。

计算机网络从为我们所知，到现在才经历的短短的几年时间，在这几年中随着计算机网络的广泛应用，特别是Internet 的普及和发展，网络已经成为了不可或缺的通信手段。

不论是最新的新闻信息、新产品的出台、新游戏的发布、最新的各种IT动态，包括等候就业人才的个人简历，我们都是可以通过网络来获得。

但是什么为这所有的一切提供平台的呢。

我们又是通过什么来获取这些消息的呢——对就是网页。

现如今，数以万计的网站以网页的方式提供了丰富、精彩的信息。

在人类社会进入信息时代的时候，在网络成为通信的主要手段的时候，在计算机网络普及的今天，网页也在它自己的岗位上做出了突出的贡献。

网页是我们在网络上的“代言人”。

我们将什么样的信息传达给浏览者，要讲述什么样的事情，网页在这里起着重要的作用。

企业网站在企业的网络营销当中占有及其重要的地位，只要是涉及网络宣传的企业，都应该建立属于自己的个性企业网站。

他不仅能够让企业在网络上展示自己的产品，促进实际销售的增长，更能够通过一根网线，向目标客户展示企业自身的形象。

如何使用Dreamweaver进行网页设计和编写第一章：Dreamweaver的介绍和安装1.Dreamweaver是什么Dreamweaver是一款功能强大的网页设计和编写软件，由Adobe公司开发。

它提供了直观的用户界面和丰富的功能，可以方便地创建和编辑网页。

2.Dreamweaver的安装在Adobe官网上下载Dreamweaver安装程序，运行安装程序并按照向导进行操作。

安装完成后，可以启动Dreamweaver开始网页设计和编写的工作。

第二章：创建新网页1.新建网页打开Dreamweaver，在菜单栏中选择“文件”->“新建”->“空白网页”，可以创建一个新的空白网页。

2.选择网页布局在新建网页的过程中，可以选择不同的网页布局。

可以根据需要选择固定布局或自适应布局，以及其他特定的布局选项。

第三章：编辑网页内容1.插入文本在网页中插入文本时，可以使用Dreamweaver提供的文本工具或直接复制粘贴文本。

还可以选择文本样式、大小、字体等。

2.插入图片和多媒体Dreamweaver支持插入图片和多媒体元素，可以使用菜单栏中的“插入”选项来插入图片、音频和视频等元素。

还可以设置它们的大小、位置和其他属性。

第四章：设计网页样式1.样式管理器Dreamweaver提供了样式管理器，可以轻松管理和编辑网页的样式。

通过样式管理器可以添加、删除和修改样式，还可以为不同元素设置不同的样式。

2.CSS样式可以使用CSS（层叠样式表）来设计网页的样式。

Dreamweaver提供了CSS编辑器，可以直观地编辑CSS代码，并且可以在代码视图和设计视图之间切换。

第五章：网页布局和导航1.布局工具Dreamweaver提供了丰富的布局工具，可以帮助设计和调整网页的布局。

可以使用表格、CSS布局、网格系统等来创建网页布局。

2.导航栏设计导航栏是网页中非常重要的一部分，可以使用Dreamweaver提供的导航栏工具来设计和创建导航栏。

如何使用Dreamweaver进行网页设计与编写Dreamweaver是一款强大的网页设计与编写工具，它提供了丰富的功能和工具，使用户能够轻松创建精美的网页。

本文将介绍如何使用Dreamweaver进行网页设计与编写，并按照以下几个方面进行分类讲解。

第一章: 界面与设置在开始使用Dreamweaver之前，用户需要了解界面和设置。

Dreamweaver的界面分为几个主要部分，包括工具栏、菜单栏、文件面板、代码面板等。

用户可以根据自己的需要进行自定义设置，例如设置代码显示颜色、字体大小等。

第二章: 网页结构与布局网页的结构和布局是网页设计的重要组成部分。

Dreamweaver 提供了各种布局工具，例如DIV和表格布局。

用户可以使用这些工具来创建网页的基本结构，然后使用CSS样式来定义和控制页面的布局。

第三章: 网页元素与样式网页设计中的元素和样式是网页的装饰和内容展示手段。

Dreamweaver提供了丰富的元素和样式库，用户可以轻松地添加图像、视频、音频等元素，并为它们应用各种样式和效果。

第四章: 交互与导航交互和导航是网页设计中的重要功能。

Dreamweaver提供了交互和导航工具，例如超链接和导航菜单。

用户可以使用这些工具来创建连贯的页面导航和用户交互，提高网站的可用性和用户体验。

第五章: 响应式设计与移动端适配随着移动设备的普及，响应式设计和移动端适配变得越来越重要。

Dreamweaver提供了响应式设计和移动端适配的工具和功能。

用户可以使用这些工具来创建适应不同屏幕大小和设备的网页，并进行实时预览和调整。

第六章: 网页优化与测试在完成网页设计和编写后，用户需要对网页进行优化和测试，以确保网页的性能和可访问性。

Dreamweaver提供了优化和测试工具，例如压缩代码、优化图像和进行浏览器兼容性测试。

用户可以使用这些工具来提高网页的加载速度和用户体验。

第七章: 网页发布与管理完成网页设计和编写后，用户需要将网页发布到服务器，并进行管理和维护。

实验名称：网页设计与制作实验目的：1. 学习和掌握网页设计的基本原理和制作方法。

2. 了解网页布局和美化的技巧。

3. 提高对网页性能和用户体验的认识。

实验时间：2023年X月X日实验地点：实验室实验器材：计算机、网页设计软件（如Dreamweaver、Photoshop等）实验内容：一、实验背景随着互联网的普及，网页设计已成为当今社会的一项重要技能。

一个美观、实用的网页不仅能够吸引更多用户，还能提升企业形象。

本实验旨在通过实际操作，掌握网页设计的基本技能。

二、实验步骤1. 创建新网页（1）打开Dreamweaver软件，创建一个新的空白网页。

（2）设置网页的基本属性，如标题、编码、背景色等。

2. 网页布局（1）使用Dreamweaver中的布局视图，创建一个两列布局。

（2）在左侧列中插入一个图片，并设置图片的宽度和高度。

（3）在右侧列中插入一段文字，并设置文字的字体、颜色和大小。

3. 网页美化（1）使用Photoshop对图片进行处理，如裁剪、调整亮度、对比度等。

（2）将处理后的图片保存，并导入到Dreamweaver中。

（3）对网页中的文字进行美化，如添加阴影、加粗等。

4. 网页性能优化（1）对网页中的图片进行压缩，减小文件大小。

（2）对网页中的CSS和JavaScript代码进行优化，提高网页加载速度。

5. 用户体验测试（1）邀请几位同学或朋友对网页进行测试。

（2）收集他们对网页的反馈意见，如页面布局、文字内容、图片质量等。

三、实验结果与分析1. 网页布局合理，图片和文字内容清晰。

2. 网页美化效果良好，符合审美要求。

3. 网页性能优化效果明显，加载速度较快。

4. 用户反馈意见主要集中在页面布局和文字内容方面，建议对布局进行调整，丰富文字内容。

四、实验总结通过本次实验，我们掌握了网页设计的基本原理和制作方法。

在实验过程中，我们学会了如何创建网页、布局、美化以及优化网页性能。

同时，我们还通过用户体验测试，了解了用户对网页的需求和期望。