dreamweaver实验指导书

1、列表第一章网站规划-3-第二章Dreamweaver静态web设计实验-6-实验1在Dreamweaver中构建站点-6-在实验2网页上使用文本-10-实验3超链接设置-15-实验4 web图像应用-21-实验5使用web表-26-使用表格进行实验6网页布局-28-实验7使用层进行网页布局-33-实验8动作和层应用-36-制作实验9帧网页-45-实验11交互式表单应用程序-56-实验12 HTML语言基本应用-60-实验13网页动态效果系列-64-创建和使用实验14 CSS样式表-69-第一章网站规划一、网站建设的基本过程网站建设的基本过程是网站规划、网站设计、在线结算和网站维护和管理，如图1

2、-1所示。网站维护和管理你不在网上吗网页设计站点计划图1-1标准化网站建设通常需要：1、站点规划收集网站词典信息和必要的文档确定要创建的网站后，应该收集和整理与网站内容相关的文本资料、图像、动画资料等。制作电影网站需要收集很多关于中外电影的信息和演员资料。要想制作公司网站，需要收集公司简介、产品信息、企业文化等。收集资料后要有效地管理资料，网站就是管理资料和素材的地方。在创建站点之前必须计划站点，站点的形式必须根据实际情况(并行、分层、网格等)由用户选择。规划网站时，要按材料种类分为多个网站，将收集的材料分类放在该网站上，然后在多个网站上细分各种材料。站点计划完成后，可以创建站点。附注：网站的

3、主题和名称要容易记住，上传到互联网的网站名称必须是英语。2、网页设计(1)将企划案打印给一名队员，开始设计公司工作。主要设计者根据计划文档和网站设计规范进行初始页面设计。站点链接到多个页面。为了使访问者能够轻松地在web站点中导航，在创建web页时，请考虑以下事项：a)建立页面框架页面框架表示web页面的整体布局，对于web页面的内容，需要系统地将web页面分为多个部分。b)导航条导航条应出现在网站的每个页面上，为每个网站提供相关项目，并引导访问者系统地浏览网站。导航条通常放置在页面的顶部或左侧。c)返回主页链接如果将“返回主页”链接放在子页上，则访问该子页后，可以通过再次选择其他页进行导航。

4、d)添加网页元素，网页添加其内容，将网页信息传递给浏览器。(2)根据站点的模式和特性以及站点制作规格，自定义最合适的标准样式。(3)设计者执行第二页设计任务。(4)制作组开始了制作工作。(5)方案开发阶段。(6)完成。(7)测试和改进网站站点测试可以根据浏览器类型、客户端要求、网站大小等要求进行测试。通常，将站点移动到一个模拟调试服务器，然后测试或编辑。测试站点时，请注意以下事项：a)监控页面的文件大小和下载速度。b)运行链接检查报告以测试链接。在网页制作中，重新设计、重新调整每个站点可能已经移动或删除了某些链接指向的页面，因此，如果站点中存在断开的链接，则必须自动重新更正断开的链接。c)页面

5、不支持的样式、层、插件等可以进行浏览器兼容性检查，以确保浏览器兼容并正常工作。使用“检查浏览器”行为可以自动将访问者定向到不同的页面，从而解决了无法在早期版本的浏览器中运行页面的问题。d)网页布局、字体大小、颜色和默认浏览器窗口大小等方面的差异在目标浏览器检查中是无法预测的，需要在不同的浏览器和平台上预览页面。3、在线结算网上安家即将把网站发布到网上。发布网站之前，要指定网站或主页在internet上的位置，必须在internet上申请主页空间。web发布通常使用远程文件传输(FTP)软件将web页上载到服务器申请的web地址目录，因此您可以更快地上载web页，也可以使用Dreamweaver

6、或FrontPage中的发布站点命令进行上载。4、网站维护和管理(1)网站内容更新和通信站点上载到服务器后，必须更新和维护站点，以保持站点内容中的最新和页面元素正常。(2)合理使用新技术。(3)宣传网址。二、网站设计技术1、网页风格必须统一。2、浏览网站要明确。3、网页内容很容易浏览。4、网站标识必须具有代表性。5、设计网站的标准颜色。6、页面容量越小，不要超过75KB。7、能适应不同的浏览器和分辨率。网页内容必须优秀。三、网页的基本组成网页由网页标题、页眉、工作站标记、导航栏和内容包的页脚组成。标题(描述站点的格式和类型)站点徽标(徽标) (表示站点的图像)页眉(放置网站上报告者最想查看的信

7、息)导航栏(网站索引)内容(网站的精神)页脚(站点设计器的基本信息)四、web元素网页主要包含许多元素，如文字、图像、表格、表单、动画、视频等。五、网页分类1、按位置分类您可以根据网页在网站上的位置将网页分为主页和子页。打开站点时初始查看的页面是主页，也称为主页。链接到主页的其他页面称为子页。2，根据表达分类您可以将网页分为静态和动态网页。静态网页：是指以HTML语言编写的网页，制作方法简单、容易学习，但缺乏灵活性。静态网站由驻留在运行web服务器的计算机上的一组相关HTML页面和文件组成。web服务器是响应来自web浏览器的请求而提供web页的软件。当访问者单击web页上的链接、在浏览器中选

8、择书签或在浏览器的地址文本框中输入URL时，将生成页面请求。静态web页的最终内容由web设计人员确定，收到请求时内容不会更改。动态web页：使用ASP、PHP和CGI等程序创建，具有动态效果，大多数基于数据库，使用HTML+ASP或HTML+PHP或HTML+JSP等语言。当web服务器收到对静态web页的请求时，服务器将该页直接发送到请求浏览器。但是，当web服务器收到对动态页的请求时，它会有不同的反应。也就是说，将页面传递给完成页面的特殊软件。此特殊软件称为应用程序服务器(例如ASP页)，并安装IIS服务器。应用程序服务器读取页面上的代码，按照代码中的说明完成页面，然后从页面中删除代码。

9、结果是应用程序服务器将页面传递回web服务器，web服务器将页面发送到请求浏览器的静态页面。页面到达后，浏览器获取的所有内容都是纯HTML。第二章Dreamweaver静态web设计实验实验1在Dreamweaver中构建站点一、实验目的1、了解和熟悉Dreamweaver的操作界面。2、可以自定义工作环境。3、进行简单的网页设计。二、实验内容创建包含3个文件夹、image、CSS、MDB、4个网页、index.html、jianjie.html、zuopin.html、xuexi.html和设置主页index.html的站点。其中index.html页面映射等于2-1-1。图2-1-1三、知

10、识点分解本实验主要涉及以下知识点：1、在Dreamweaver中创建站点。2、在Dreamweaver站点文件列表下创建新文件和文件夹。3、在网页上插入背景图片。四、实验阶段1、创建本地站点的步骤：(1)打开DREAMWEAVER，然后选择菜单下的“站点”/“管理站点”|/“新建”/|“站点”命令。出现对话框，如图2-1-2所示。(2)在“站点定义”对话框的“高级”选项卡中，输入以下信息：图2-1-2(3)输入站点名称，例如“站点名称”“myweb”。(4)选择本地文件夹，例如“本地根文件夹”“D my web”(5)选择是否在每次将“自动刷新本地文件列表”文件复制到本地站点时自动更新本地文件

11、夹列表。(6)选择要放置“默认图像文件夹”图像的文件夹(例如“d myweb image”)注意：图像文件夹必须位于站点文件夹下，通常命名为image或images。(7)“http地址”输入实用程序整个网站的URL，以便Dreamweaver可以解析使用绝对URL的站点链接。(8)选择是否创建缓存以加快“缓存”链接和网站维护任务。选择此选项。(9)设置完成后，单击“确定”按钮。(10)刚刚创建的站点myweb显示在Dreamweaver作业界面右侧“浮动面板组”的“文件”面板中的“文件”选项卡下，如图2-1-3所示。图2-1-3如果要修改已设置的站点，则可以选择菜单下的“站点”|“管理站点”

12、|“编辑”命令。2、在站点文件列表下新建文件和文件夹步骤：(1)右键单击“站点文件”列表中的“站点-my web”(d 3360 myweb)，然后从弹出菜单中选择“新建文件夹”，新文件夹将出现在文件列表中，文件夹命名为image，并创建CSS文件夹和MDB文件夹。(2)在站点文件列表下创建新文件的方法有两种：a)选择“文件”|“新建”，在弹出的“新建文档”对话框中选择“HTML”以创建新的HTML web页，然后选择“文件”|“保存”或按“Ctrl S”键将该web页命名为index.htmlb)右键单击站点文件列表中的站点-myweb(d 3360 myweb)，然后从弹出菜单中选择新建文

13、件，文件列表中将显示一个名为新建文件的web页文件，该文件命名为index.html。同样，设置jianjie.html、zuopin.html和xuexi.html。3、在“文件列表”中选择index.html文件，右键单击，然后从弹出菜单中选择“设置为主页”以返回到页面，然后在“文档”工具栏中将“标题”更改为“站点主页”。附注：要使新创建的文件和文件夹自动出现在站点文件列表下，必须在设置站点时选择“自动刷新本地文件列表”(auto refresh local file list)，如图2-1-4所示。否则，必须单击刷新按钮刷新新创建的文件和文件夹。图2-1-44、index.html网页阶

14、段设计：(1)在站点文件列表中双击index.html以打开其web页。(2)将“文档”工具栏标题中的内容更改为“站点主页”，如图2-1-5所示。图2-1-5(3)单击“属性”面板中的“页面属性”按钮弹出“页面属性”对话框(如图2-1-6所示)，然后单击“背景图像”后面的“浏览”按钮添加背景图像。(4)在工作区的编辑窗口中，输入“欢迎来到我的小车站”图2-1-6(5)浏览测试。浏览测试的方法有三种：第一种方法是直接按F12键。这是最快的方法，建议以后尽量使用此方法。第二种方法是单击“文档”工具栏上的按钮(如上图所示)，然后从弹出菜单中选择“在IExplore中预览”命令，在ie浏览器中浏览当前

15、网页。第三种方法是选择“文件”/“在浏览器中预览”/“I explore”菜单命令，在ie浏览器中浏览当前网页以进行测试。思考题：设置web背景图像的时候，图像太小，不适合整个网页，怎么办？在实验2网页中使用文本一、实验目的熟悉“插入”面板中“文本面板”、“常规面板”、“文本菜单”和“文本属性面板”的使用和格式设置。二、实验内容1、在页面上插入特殊字符：和空格字符。2、将日期插入日期格式为“年、日、周：(小时) (分钟)”的页面。3、在页面上插入水平线。4、在新页面上编辑项目列表，如图2-2-1所示。要求：字体为“正楷”，大小为“16pt”，颜色为“黄色”，web背景颜色为绿色。图2-2-1三、实验阶段内容1的实验步骤如下：1、将光标放置在要插入特殊字符的位置。2、如图2-2-2所示，单击“插入”面板上的“文本”选项卡。图2-2-23，单击按钮展开“文字”下拉列表，如图2-2-3所示。图2-2-34、单击相应的选项将相应的特殊字符添加到网页中，如图2-2-3所示。图2-2-35、插入不换行空格，您可以执行以下操作之一：(1)在“插入”面板的“文本”选项卡上，单击“字符”按钮，然