《Dreamweaver实验指导书》由会员分享，可在线阅读，更多相关《Dreamweaver实验指导书（67页珍藏版）》请在金锄头文库上搜索。
1、 . 目 录第一章规划- 3 -第二章Dreamweaver静态网页设计实验- 6 -实验一在Dreamweaver中建立一个站点- 6 -实验二在网页中使用文本- 10 -实验三超级的建立- 15 -实验四网页图像的应用- 21 -实验五网页表格操作- 26 -实验六利用表格进行网页布局- 28 -实验七利用层进行网页布局- 33 -实验八行为和图层的应用- 36 -实验九框架型网页的制作- 45 -实验十一交互式表单的应用- 56 -实验十二 HTML语言基础应用- 60 -实验十三网页动态效果辑- 64 -实验十四 CSS样式表的创建与运用- 69 -第一章 规划一、建设的基本流程建设的
2、基本流程是：规划，网页设计，网上安家以与维护与管理，如图1-1所示。网站维护与管理网上安家网页设计网站规划图1-1规的建设大致需要做如下工作：1、规划收集前期资料以与所需文档在确定了制作哪方面的后，需收集和整理与容相关的文字资料、图像、动画素材等。如想要制作影视就需收集大量中外电影的信息以与演员资料；要制作公司就需收集公司的介绍、产品信息和企业文化等。收集好资料后还需对资料进行有效地管理，站点就是管理资料、素材的场所。在创建站点之前需对站点进行规划，站点的形式有并列、层次和网状等，用户需根据实际情况选择。 规划站点时应按素材的不同种类分为几个站点，再将收集好的素材分类放置在相应站点中，然后在不
3、同站点中将不同的素材进行细分。站点规划好后即可对其进行创建了。注意：站点的主题与名称应易于记忆，要上传到网上的站点名称必须是英文。2、网页设计(1) 将策划方案打印给小组成员人手一份，开始设计人员进行设计工作。根据策划文档与设计规，主要设计人员进行前期的首页设计。是由多个页面而成的。在制作网页时需注意以下几面的问题，以便浏览者轻松浏览。 a)页面框架的构建 页面框架的构建是指对网页的整体布局，针对网页中的容应将网页有条理地划分为几部分。b)导航条导航条应出现在的各个页面中，提供各个站点的相关主题，引领浏览者有条理地浏览。导航条通常放置在页面的上部或左侧。c)返回首页 在分页面中放置返回首页，以
4、便浏览者在访问分页面后快速回到首页，以重新选择其他页面进行浏览。d)添加网页元素,网页添加相应的容，以传递网页信息给浏览者。(2) 根据的模式和特点以与制作规定制出最适当的标准样式。(3) 设计人员进行二级页面设计工作。(4) 制作人员开始制作工作。(5) 程序开发阶段。(6) 完成。(7) 测试和改进站点测试可根据浏览器种类、客户端要求以与大小等要求进行测试，通常是将站点移到一个模拟调试服务器上对其进行测试或编辑。测试站点的过程中应注意以下几方面：a)监测页面的文件大小以与下载速度。b)运行检查报告对进行测试。由于在网页制作中，各站点的重新设计、重新调整会使某些所指向的页面可能已被移动或删除
5、，所以应检查站点是否有断开的，若有则自动重新修复断开的。c)为了使页面不支持的样式、层、插件等在浏览器中能兼容且功能正常，可进行浏览器兼容性的检查。使用“检查浏览器”行为，可自动将访问者定向到另外的页面，这样就可解决在较早版本的浏览器中无法运行页面的问题。d)网页布局、字体大小、颜色和默认浏览器窗口大小等区别是在目标浏览器检查中无法预见的，需在不同的浏览器和平台上预览页面进行查看。 3、网上安家网上安家即将站点发布到互联网上。发布站点之前需在Internet上申请一个主页空间，以指定或主页在Internet上的位置。网页发布通常使用FTP（远程文件传输）软件上传网页到服务器中申请的网址目录下，
6、这样速度较快，也可使用Dreamweaver或FrontPage中的发布站点命令进行上传。4、维护与管理(1)容更新与沟通站点上传到服务器后，还需对站点进行更新和维护，以保持站点容的最新和页面元素的正常。(2)合理运用新技术。(3)推广你的Web地址。二、设计技巧1、网页风格要统一。2、导航要清晰。3、网页容便于浏览。4、Logo要有代表性。5、设计的标准色彩。6、页面容量越小越好，别超过75KB。7、能适应不同浏览器与分辨率。8、网页容要精彩。三、网页的基本组成网页由网页标题、页眉、站标、导航栏、容版块的页脚组成。 标题（说明的形式和类型） 站标即标识（logo）（代表了的形象） 页眉（放置
7、最希望浏览者看的信息） 导航栏（的索引） 容（是的精神所在） 页脚（设计者的基本信息）四、网页元素网页中包含的元素很多，主要包括文字、图像、表格、表单、动画和视频等。五、网页的分类1、按所处位置分类按网页在中所处的位置可将网页分为主页和子页两类。打开一个时看到的第一个页面就是主页，也称为首页；与主页相的其他各个页面就称之为子页。2、按表现形式分类按网页的表现形式可将网页分为静态网页和动态网页。静态网页：指用HTML语言编写的网页，其制作方法简单易学，但缺乏灵活性。静态 Web 站点由一组相关的 HTML 页和文件组成，这些页和文件驻留在运行 Web 服务器的计算机上。Web 服务器是响应来自
8、Web 浏览器的请求以提供 Web 页的软件。当访问者单击 Web 页上的某个、在浏览器中选择一个书签、或在浏览器的地址文本框中输入一个 URL 时，便生成一个页请求。静态 Web 页的最终容由网页设计人员确定，当接到请求时，容不发生更改。动态网页：这类网页使用ASP、PHP和CGI等程序生成，具有动态效果，且大多数以数据库为基础，使用语言为HTMLASP 或 HTMLPHP 或 HTMLJSP 等。当 Web 服务器接收到对静态 Web 页的请求时，服务器将该页直接发送到请求浏览器。但是，当 Web 服务器接收到对动态页的请求时，它将作出不同的反应：它会将该页传递给一个负责完成页面的特殊软件
9、。这个特殊软件叫做应用程序服务器，如ASP 页面就要安装IIS服务器。应用程序服务器读取页上的代码，根据代码中的指令完成页，然后将代码从页上删除。所得的结果将是一个静态页，应用程序服务器将该页传递回 Web 服务器，然后 Web 服务器将该页发送到请求浏览器。当该页到达时，浏览器得到的全部容都是纯 HTML。第二章 Dreamweaver静态网页设计实验实验一 在Dreamweaver中建立一个站点一、实验目的1、掌握认识并熟悉Dreamweaver的工作界面。2、能够自定义工作环境。3、进行一个简单的网页设计。二、实验容建立一个以自己名字命名的站点，该站点包含三个文件夹，image，css，
10、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) 在弹出“站点定义”对话框的“高级”标签中
11、输入如下信息。图2-1-2(3) “站点名称”输入站点名称如“myweb”。(4) “本地根文件夹”选择本地文件夹如“Dmyweb”(5) “自动刷新本地文件列表”选中是否每次拷贝文件到本地站点时都自动更新本地文件夹列表，选中该选项。(6) “默认图像文件夹”选择图像所放置的文件夹如“Dmyweb image”注意：图像文件夹一定要在站点文件夹下，且一般命名为image或images。(7) “ 地址”输入实用的完整的URL，以便Dreamweaver能检验使用绝对URL。(8) “缓存”选择是否创建一个缓存以提高和维护任务的速度。选中该选项。(9) 设置完毕，点击“确认”按钮。(10) 在D
12、reamweaver的工作界面右侧“浮动面板组”中的“文件”面板中的“文件”标签下就能看到刚才新建的站点myweb，如图2-1-3所示。图2-1-3如果要对所建立的站点进行修改的话，可以选择菜单下站点|管理站点| 编辑命令。2、在站点文件列表下新建文件和文件夹步骤：(1)在站点文件列表中右键单击“站点myweb(D:myweb)”，在弹出的菜单中选择“新建文件夹”，文件列表中就会出现名为“新建文件夹”的文件夹，将该文件夹命名为image，同样操作建立css文件夹和mdb文件夹。(2) 在站点文件列表下新建文件有2种方法：a) 选择文件|新建，在弹出的“新建文档”对话框中，选择“HTML”，就新
13、建了一个HTML网页，然后再选择文件|保存或者是按Ctrl+S键，将网页名称改为index.html，同样操作建立jianjie.html, zuopin.html，xuexi.html。b)在站点文件列表中右键单击“站点myweb(D:myweb)”，在弹出的菜单中选择“新建文件”，文件列表中就会出现名为“新建文件”的网页文件，将该文件命名为index.html，同样操作建立jianjie.html, zuopin.html，xuexi.html。3、在“文件列表”中选中index.html文件，单击右键，在弹出的菜单中选择“设为首页”，回到页面上，在“文档工具栏”中将“标题”更改为“本站主
14、页”。注意：要想在站点文件列表下自动出现新建的文件和文件夹，前提条件必需在建立站点时选中“自动刷新本地文件列表”，否则的话必需单击“刷新”按钮才能出现新建的文件和文件夹，效果图如图2-1-4所示。图2-1-44、设计index.html网页步骤：(1)在站点文件列表中双击index.html，打开该网页。(2)将光标定位到“文档工具栏”中的“标题”，将标题中的容改为“本站主页”，如图2-1-5所示。图2-1-5(3)单击“属性面板”中的“页面属性”按钮，弹出如图2-1-6所示的“页面属性”对话框，单击“背景图像”后面的“浏览”按钮，添加背景图像即可。(4)在工作区的“编辑窗口”中输入“欢迎光临我的小站”图2-1-6(5)浏览测试。浏览测试的方法有3种，第1种方法是直接按F12键，这是最快捷的方法，建议大家以后尽量采用这种方法。第2种方法是单击如上图所示的“文档工具栏”中的 按钮，在弹出的菜单中选择“预览在iexplore”命令后即可在IE浏览器中浏览当前网页。第3种方法是选择文件/在浏览器中预览/iexplore菜单命令即可在IE浏览器中浏览测试当前网页。 思考题：在设置网页背景图像时，如果图像太小，铺不满整个网页，怎么办？实验二在网页中使用文本一、 实验目
