dreamweaver网页设计实验指导书

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

规范的网站建设大致需要做如下工作：1、网站规划收集网站前期资料以及所需文档在确定了制作哪方面的网站后，需收集和整理与网站内容相关的文字资料、图像、动画素材等。

如想要制作影视网站就需收集大量中外电影的信息以及演员资料；要制作公司网站就需收集公司的介绍、产品信息和企业文化等。

收集好资料后还需对资料进行有效地管理，站点就是管理资料、素材的场所。

在创建站点之前需对站点进行规划，站点的形式有并列、层次和网状等，用户需根据实际情况选择。

规划站点时应按素材的不同种类分为几个站点，再将收集好的素材分类放置在相应站点中，然后在不同站点中将不同的素材进行细分。

站点规划好后即可对其进行创建了。

注意：站点的主题与名称应易于记忆，要上传到网上的站点名称必须是英文。

2、网页设计(1)将策划方案打印给小组成员人手一份，开始设计人员进行设计工作。

根据策划文档及网站设计规范，主要设计人员进行前期的首页设计。

网站是由多个页面链接而成的。

在制作网页时需注意以下几面的问题，以便浏览者轻松浏览网站。

a)页面框架的构建页面框架的构建是指对网页的整体布局，针对网页中的内容应将网页有条理地划分为几部分。

b)导航条导航条应出现在网站的各个页面中，提供各个站点的相关主题，引领浏览者有条理地浏览网站。

导航条通常放置在页面的上部或左侧。

c)返回首页链接在分页面中放置返回首页链接，以便浏览者在访问分页面后快速回到首页，以重新选择其他页面进行浏览。

d)添加网页元素,网页添加相应的内容，以传递网页信息给浏览者。

(2)根据网站的模式和特点以及网站制作规范定制出最适当的标准样式。

(3)设计人员进行二级页面设计工作。

(4)制作人员开始制作工作。

(5)程序开发阶段。

(6)完成。

(7)网站测试和改进站点测试可根据浏览器种类、客户端要求以及网站大小等要求进行测试，通常是将站点移到一个模拟调试服务器上对其进行测试或编辑。

测试站点的过程中应注意以下几方面：a)监测页面的文件大小以及下载速度。

b)运行链接检查报告对链接进行测试。

由于在网页制作中，各站点的重新设计、重新调整会使某些链接所指向的页面可能已被移动或删除，所以应检查站点是否有断开的链接，若有则自动重新修复断开的链接。

c)为了使页面不支持的样式、层、插件等在浏览器中能兼容且功能正常，可进行浏览器兼容性的检查。

使用“检查浏览器”行为，可自动将访问者定向到另外的页面，这样就可解决在较早版本的浏览器中无法运行页面的问题。

d)网页布局、字体大小、颜色和默认浏览器窗口大小等区别是在目标浏览器检查中无法预见的，需在不同的浏览器和平台上预览页面进行查看。

3、网上安家网上安家即将站点发布到互联网上。

发布站点之前需在Internet上申请一个主页空间，以指定网站或主页在Internet上的位置。

网页发布通常使用FTP（远程文件传输）软件上传网页到服务器中申请的网址目录下，这样速度较快，也可使用Dreamweaver或FrontPage中的发布站点命令进行上传。

4、网站维护与管理(1)网站内容更新与沟通站点上传到服务器后，还需对站点进行更新和维护，以保持站点内容的最新和页面元素的正常。

(2)合理运用新技术。

(3)推广你的Web地址。

二、网站设计技巧1、网页风格要统一。

2、网站导航要清晰。

3、网页内容便于浏览。

4、网站Logo要有代表性。

5、设计网站的标准色彩。

6、页面容量越小越好，别超过75KB。

7、能适应不同浏览器及分辨率。

8、网页内容要精彩。

三、网页的基本组成网页由网页标题、页眉、站标、导航栏、内容版块的页脚组成。

➢标题（说明网站的形式和类型）➢站标即网站标识（logo）（代表了网站的形象）➢页眉（放置网站最希望浏览者看的信息）➢导航栏（网站的索引）➢内容（是网站的精神所在）➢页脚（网站设计者的基本信息）➢四、网页元素网页中包含的元素很多，主要包括文字、图像、表格、表单、动画和视频等。

五、网页的分类1、按所处位置分类按网页在网站中所处的位置可将网页分为主页和子页两类。

打开一个网站时看到的第一个页面就是主页，也称为首页；与主页相链接的其他各个页面就称之为子页。

2、按表现形式分类按网页的表现形式可将网页分为静态网页和动态网页。

静态网页：指用HTML语言编写的网页，其制作方法简单易学，但缺乏灵活性。

静态Web 站点由一组相关的HTML 页和文件组成，这些页和文件驻留在运行Web 服务器的计算机上。

Web 服务器是响应来自Web 浏览器的请求以提供Web 页的软件。

当访问者单击Web 页上的某个链接、在浏览器中选择一个书签、或在浏览器的地址文本框中输入一个URL 时，便生成一个页请求。

静态Web 页的最终内容由网页设计人员确定，当接到请求时，内容不发生更改。

动态网页：这类网页使用ASP、PHP和CGI等程序生成，具有动态效果，且大多数以数据库为基础，使用语言为HTML＋ASP 或HTML＋PHP 或HTML＋JSP 等。

当Web 服务器接收到对静态Web 页的请求时，服务器将该页直接发送到请求浏览器。

但是，当Web 服务器接收到对动态页的请求时，它将作出不同的反应：它会将该页传递给一个负责完成页面的特殊软件。

这个特殊软件叫做应用程序服务器，如ASP 页面就要安装IIS服务器。

应用程序服务器读取页上的代码，根据代码中的指令完成页，然后将代码从页上删除。

所得的结果将是一个静态页，应用程序服务器将该页传递回Web 服务器，然后Web 服务器将该页发送到请求浏览器。

当该页到达时，浏览器得到的全部内容都是纯HTML。

第二章Dreamweaver静态网页设计实验实验一在Dreamweaver中建立一个站点一、实验目的1、掌握认识并熟悉Dreamweaver的工作界面。

2、能够自定义工作环境。

3、进行一个简单的网页设计。

二、实验内容建立一个以自己名字命名的站点，该站点包含三个文件夹，image，css，mdb，四个网页，分别为index.html，jianjie.html，zuopin.html，xuexi.html，设置主页index.html 的标题为“本站主页”。

其中index.html页面效果图如2-1-1所示。

图2-1-1三、知识点分解本实验主要涉及到如下知识点：1、在Dreamweaver中建立站点。

2、在Dreamweaver站点文件列表下新建文件和文件夹。

3、在网页中插入背景图片。

四、实验步骤1、创建本地站点步骤：(1)打开DREAMWEAVER,选择菜单下[站点]/[管理站点]|/[新建]/|[站点]命令.弹出如图2-1-2所示对话框。

(2)在弹出“站点定义”对话框的“高级”标签中输入如下信息。

图2-1-2(3)“站点名称”——输入站点名称如“myweb”。

(4)“本地根文件夹”——选择本地文件夹如“D\myweb”(5)“自动刷新本地文件列表”——选中是否每次拷贝文件到本地站点时都自动更新本地文件夹列表，选中该选项。

(6)“默认图像文件夹”——选择图像所放置的文件夹如“‘D\myweb\ image”注意：图像文件夹一定要在站点文件夹下，且一般命名为image或images。

(7)“HTTP地址”——输入实用的完整网站的URL，以便Dreamweaver能检验使用绝对URL网站链接。