课程学习汇报网站 - 图文

课程学习汇报网站的开发与设计

【实验目的】

1.了解构建课程学习汇报网站的意义 2.掌握网站开发的一般过程 3.了解Dreamweaver软件特色 4.熟悉Dreamweaver cs4界面布局 5.领会新建编辑网页的一般过程

6.熟练掌握Dreamweaver cs4中表格的使用

7.熟练掌握Dreamweaver cs4中文字、图像、音视频、动画、PPT等内容的插入过程 8.熟练掌握超级链接的几种使用方式 【实验类型】

综合型实验

【实验环境】

1.每生一台多媒体计算机，并且能够接入Internet互联网 2.Dreamweaver网站制作工具软件 【实验指导】

课程学习汇报网站，是将学习者学习某门课程的成果、心得和建议等资源通过网页形式表现出来，供教师评阅或学习者之间交流学习而用。可以基于个人，也可以基于小组来设计。

一、课程学习汇报网站开发前期准备

由于网站主题和对象已定，且网站呈现的资源是本学期课程学习成果，则网站栏目大致分为“自我介绍”（小组介绍）、“成果展示”、“实践体会”、“我的建议”（我们的建议）等；但网站风格定位、结构布局和技术应用等没有固定，可以多姿多彩，大胆创新，特色鲜明。

新建一个新的总目录，如D:\\Learning WebSite，之后再在此目录下建立几个子目录，如：Homework 、Resources、images等，将课程学习相关成果、网站开发所需的各种素材等放入对应的子文件夹中，建议所有的目录和文件名都用英文小写。

二、选择网站开发工具

Dreamweaver作为全球最流行，最优秀的所见即所得的网页编辑器，不仅可以制作网页，而且为设计和开发站点提供了友好的操作平台，集网页制作与网站管理于一身。本网站正是

1

使用Dreamweaver cs4来开发设计的。

Dreamweaver CS4提供了多种工作界面，以适合不同的工作人员。第一次安装该软件并启动后，出现如图1所示的欢迎界面，选择“新建”-“HTML”，呈现在用户面前的是如图2所示的工作窗口。

图1 Dreamweaver CS4启动界面

2

图2 工作窗口

由上图可以看出，Dreamweaver CS4的工作界面主要由菜单栏、“插入”工具栏、“文档”工具栏、编辑窗口、状态栏、属性面板和各种面板组构成，下面简要介绍各主要组成部分。

1、“插入”工具栏

Dreamweaver CS4的“插入”工具栏中包含了8个标签，分别为：常用、布局、表单、数据、Spry、InContext Editing、文本、收藏夹，如图3所示。

单击“插入”工具栏中的不同标签可以进行切换，每一个标签中包括了若干的插入对象按钮。单击“插入”工具栏中的对象按钮或者将按钮拖曳到编辑窗口内，即可将相应的对象添加到网页文件中，并可在网页中编辑添加的对象。

3

图3 “插入”工具栏

2、“文档”工具栏

“文档”工具栏中包含了代码视图、拆分视图、设计视图、实时视图、实时代码、文档标题、文件管理、浏览器预览、可视化选项等按钮，如图4所示。

图4 “文档”工具栏

“文档”工具栏中的前三个按钮用于切换视图模式。单击 按钮可以进入代码视图，这是一个用于编写和编辑HTML、JavaScript、服务器语言代码(如ASP或ColdFusion标记语言)以及其他类型代码的手工编码环境。单击 按钮可以进入代码视图与设计视图，在该视图中，窗口被分成上、下两部分，顶部窗口用于编写HTML代码，底部窗口用于可视化编辑网页。单击 按钮可以进入设计视图，这是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中，Dreamweaver中显示的文档处于可视化编辑状态，页面效果类似于在浏览器中查看页面时看到的内容。

3、状态栏

在Dreamweaver CS4状态栏中可以显示当前光标所在位置的HTML标记，通过此标记可以确定所编辑的网页内容。状态栏上还可以显示当前网页的编辑窗口大小、当前网页文件的大小与网页的传输速度，如图5所示。

另外，Dreamweaver CS4的状态栏上新增了视图控制工具，其中选取工具用于选择页面中的操作对象；手形工具 用于平移视图；缩放工具 用于放大或缩小视图显示；而设置缩放比率选项框 可以通过确切的数值控制视图的缩放。

4