《网页设计与制作》实验指导书Word格式.docx
- 文档编号:17240497
- 上传时间:2022-11-29
- 格式:DOCX
- 页数:13
- 大小:211.89KB
《网页设计与制作》实验指导书Word格式.docx
《《网页设计与制作》实验指导书Word格式.docx》由会员分享,可在线阅读,更多相关《《网页设计与制作》实验指导书Word格式.docx(13页珍藏版)》请在冰豆网上搜索。
让学生通过上机实践,掌握网页的设计和制作的基本技能,了解网站建设的一般过程。
针对电子商务专业的学生,《网页设计与制作》课程的实验教学目标是:
1、使学生掌握HTML语言的语法和应用。
2、使学生掌握网页编辑工具MacromediaDreamweaverCS4的操作使用,并使用该工具建立静态和动态网页。
3、通过综合实例,介绍从网站的规划、设计、制作、上传到维护的全过程。
使学生掌握基本技能和一些高级技巧。
4、使学生了解网站管理常识和日常维护。
5、简单介绍其它网页编辑工具(如FrantPage2000、Flash动画制作)。
三、实验硬件、软件条件:
1、硬件配置:
PC机(1G以上硬盘、配光驱)
局域网(最好能连接Internet)
2、软件配置:
Windows2000操作系统
MacromediaDreamweaverCS4
FrantPage2000
MacromediaFlash。
四、实验项目及其学时分配表
序次
实验项目
实验课时
1
实验一:
简单网页制作
6
2
实验二:
高级网页制作
3
实验三:
动态网页制作
4
合计
五、实验教学内容及指导
实验项目一简单网页制作
(一)实验目的与要求
实验目的:
认识DreamweaverCS4,掌握Dreamweaver的基本操作,创建站点和简单网页文档,规划网页布局,插入网页基本元素,为下一步制作高级与动态网页打基础。
实验要求:
应用DreamweaverCS4制作5个简单网页,含有简单表格、图片及文本内容。
(二)、实验内容
(1)熟悉MacromediaDreamweaverCS4的界面和设计环境
(2)使用框架
(3)网页文本操作
(4)插入图片
(5)建立超链接
(6)表格的使用
(三)实验步骤
(1)熟悉MacromediaDreamweaverCS4的界面和设计环境
在Windows中,DreamweaverCS4提供了两种可供选择的工作区布局:
集成布局和浮动布局。
在Windows中首次启动DreamweaverCS4时,会出现一个对话框让用户选择一种工作区布局。
以后可以使用“参数选择”对话框切换到一种不同的工作区布局。
集成DreamweaverCS4工作区中,全部窗口和面板都被集成到一个更大的应用程序窗口中。
通过下面的步骤进一步熟悉其菜单、工具栏、面版。
框架提供将一个浏览器窗口划分为多个区域、每个区域都可以显示不同HTML文档的方法。
使用框架的最常见的情况就是,一个框架显示包含导航控件的文档,而另一个框架显示含有内容的文档。
在Dreamweaver中有两种创建框架集的方法:
既可以自己设计框架集,也可以从若干预定义的框架集中选择。
创建预定义的框架集并在某一框架中显示现有文档,执行以下操作:
∙将插入点放置在文档中。
∙执行下列操作之一:
o在插入条的“框架”类别中,单击预定义框架集的图标。
o从“插入”>
“框架”子菜单中选择预定义的框架集。
要创建新的空预定义框架集,执行以下操作:
∙选择“文件”>
“新建”。
∙在“新建文档”对话框中,选择“框架集”类别。
∙从“框架集”列表选择框架集。
∙单击“创建”。
每一个框架和框架集都分别保存在不同的文件中。
Dreamweaver提供了多种向文档中添加文本和设置文本格式的方法。
文本格式设置与使用标准字处理程序类似。
∙使用“文本”>
“段落格式”子菜单或属性检查器中的“格式”弹出菜单可设置文本块的默认格式样式(“段落”、“已编排格式”、“标题1”、“标题2”等等)。
∙更改所选文本的字体、大小、颜色和对齐方式,请使用“文本”菜单或属性检查器。
若要应用文本格式(如粗体、斜体、代码、下划线等),请使用“文本”>
“样式”子菜单。
∙可以组合几个标准的HTML标签,构成单个样式(称为HTML样式)。
例如,可以使用标签和属性组合来手动应用HTML格式,并将该格式保存为HTML样式;
该样式存储在“HTML样式”面板中。
当下次想使用该HTML标签组合设置文本格式时,只需从“HTML样式”面板中选择已保存的样式。
∙在“文档”窗口中,将插入点放置在您要显示图像的地方,然后执行以下操作之一:
o在“插入”栏的“常用”类别中,单击“图像”图标。
o在“插入”栏的“常用”类别中,将“图像”图标拖入“文档”窗口中(或者,如果您正处理代码,则拖入“代码”视图窗口中)。
o选择“插入”>
“图像”。
o将图像从“资源”面板(“窗口”>
“资源”)拖到“文档”窗口中的所需位置;
然后跳到第3步。
o将图像从“站点”面板拖到“文档”窗口中的所需位置;
o将图像从桌面拖到“文档”窗口中的所需位置;
∙在出现的对话框中执行下列操作之一:
o选择“文件系统”以选择一个图形文件。
o选择“数据源”以选择一个动态图像源文件。
o浏览以选择您要插入的图像或内容源文件。
∙创建本地链接(指同一站点中文档之间的链接),可以使用以下方式之一:
o使用站点地图查看、创建、更改或删除链接。
o在“文档”窗口中,选择文本或页面元素,然后使用“修改”>
“建立链接”选择要链接到的文件。
o使用属性检查器,方法是选择文档中的文本或页面元素,然后使用属性检查器文件夹图标,或者使用“点到文件”图标,来选择要链接到的文件,或者键入该文件的路径。
o在“文档”窗口中,选择文本或页面元素,从上下文菜单中选择“建立链接”,然后选择要链接到的文件。
∙创建外部链接(到其他站点上文档的链接):
在属性检查器中键入绝对路径(包括适当的协议)。
创建外部链接时,一定要输入完整的路径(包括http:
//)。
∙链接到文档中的特定位置:
首先,创建命名锚记,然后创建到命名锚记的链接。
(注:
锚记名称区分大小写)
在“文档”窗口,将插入点放到文档中,然后执行下列操作之一:
“表格”。
o在插入栏的“常用”类别中,单击“表格”图标。
在出现的“插入表格”对话框中,设置下列选项:
o在“行数”文本框中,键入行数。
o在“列数”文本框中,键入列数。
o在“宽度”文本框中键入宽度并在“宽度”文本框右边的弹出式菜单中选择单位。
实验项目二高级网页制作
(一)实验目的要求
(1)用Dreamweaver构建静态HTML页面,掌握表单及表格的使用、掌握制作CSS,并能在网页中导入CSS,使用CSS样式美化网页,了解最基本的JAVASCRIPT代码及函数在网页代码中的引用。
(2)了解基本的fireworkmx及flashmx的制作。
(3)重点关注对表单的非空检测,掌握代码及使用。
(4)插入动画与多媒体,使用超链接、层、行为、交互式表单、模板和库项目。
应用DreamweaverCS4制作5个高级网页,应包含CSS样式、动画、超链接、层、行为、交互式表单、模板等内容。
(1)插入表单及表单结构,对单选框、复选框、文本域,密码域、下拉菜单、命令按钮进行熟悉。
(2)了解表单中的name及value的属性,使用提供的代码进行表单的非空检测。
(3)了解css,在dreamweaver中设计css,并且导入进网页进行格式编辑。
(4)打开firework及flash这两个软件,尝试做基本的gif及flash动画。
(5)插入媒体(声音和flash文档),使用<
bgsoundid=bg1src="
1.mid"
>
标签加入miid声音和mp3声音,插入Flash文档
(6)使用行为和动画,熟练使用交换图像的行为,熟练使用检查表单的行为,熟练使用弹出菜单的行为,制作层动画,包括显示-隐藏层的动画和时间轴动画。
(三)、实验步骤
(1)继续熟悉表格的使用。
了解页面规划前,使用表格进行区域分隔的方法,表格的基本属性。
(2)插入表单及表单结构,对单选框、复选框、文本域,密码域、下拉菜单、命令按钮进行熟悉。
(3)了解表单中的name及value的属性,使用提供的代码进行表单的非空检测。
写出对nickname文本框进行非空检测的基本javascript代码。
(4)dreamweaver中设计css,并且导入进网页,主要查看字体,颜色,宽度,对齐方式。
(5)打开firework及flash这两个软件,熟悉软件界面,尝试做基本的gif及flash动画。
(6)插入媒体
Dreamweaver可以并入和编辑多媒体文件和对象,包括flash对象及声音对象。
插入和媒体对象:
在文档窗口中,将插入点放置在您要插入对象的地方,然后执行以下操作之一:
在插入栏中,选择“媒体”,然后单击您要插入的对象类型的按钮,或将其拖入文档窗口中。
从“插入”>
“媒体”或“插入”>
“交互式图像”子菜单中选择适当的对象。
多数情况下,将显示一个对话框,从中选择源文件并为媒体对象指定某些参数。
插入声音对象:
使用<
mid/1.mid"
标签加入mid和mp3对象。
也可使用dw中自带的行为来加载和播放声音。
(7)使用行为和动画
使用JavaScript行为
行为代码是客户端JavaScript代码;
即它运行于浏览器中,而不是服务器上。
事件是浏览器生成的消息,指示页的访问者执行了某种操作。
例如,当访问者将鼠标指针移动到某个链接上时,浏览器为该链接生成一个onMouseOver事件;
动作是由预先编写的JavaScript代码组成的,这些代码执行特定的任务,例如打开浏览器窗口、显示或隐藏层、播放声音或停止Shockwave影片。
将行为附加到页元素之后,只要对该元素发生了指定的事件,浏览器就会调用与该事件关联的动作(JavaScript代码)。
(可以用来触发给定动作的事件随浏览器的不同而有所不同。
)例如,如果将弹出消息动作附加到某个链接并指定它将由onMouseOver事件触发,那么只要在浏览器中用鼠标指针指向该链接,就将在对话框中弹出消息。
单个事件可以触发多个不同的动作,可以指定这些动作发生的顺序。
使用“行为”面板将行为附加到页元素(更具体地说是附加到标签)并修改以前所附加行为的参数。
使用“窗口”>
“行为”,打开“行为”面板。
“行为”面板具有以下选项:
动作(+)是一个弹出式菜单,其中包含可以附加到当前所选元素的多个动作。
删除(-)从行为列表中删除所选的事件和动作。
上下箭头按钮将特定事件的所选动作在行为列表中向上或向下移动。
给定事件的动作是以特定的顺序执行的。
可以为特定的事件更改动作的顺序-例如,可以更改“onLoad事件的多个动作的发生顺序,但是所有onLoad动作在行为列表中都靠在一起。
事件是一个弹出式菜单,其中包含可以触发该动作的所有事件。
只有在选择了行为列表中的某个事件时才显示此菜单。
根据所选对象的不同,显示的事件也有所不同。
如果未显示预期的事件,则检查是否选择了正确的页元素或标签。
显示事件(“事件”菜单中的子菜单)指定当前行为应该在其中起作用的浏览器。
此菜单中的选择确定哪些事件显示在“事件”弹出式菜单中。
附加行为步骤如下:
∙在页上选择一个元素,例如一个图像或一个链接。
∙选择“窗口”>
“行为”打开“行为”面板。
∙单击加号(+)按钮并从“动作”弹出式菜单中选择一个动作。
∙为该动作输入参数,然后单击“确定”。
∙触发该动作的默认事件显示在“事件”栏中。
如果这不是所需的触发事件,则从“事件”弹出式菜单中选择另一个事件。
按照要求依次制作,图片的交换、表单检测、使用弹出式菜单这三中行为操作,具体步骤。
∙制作层动画
选择表格中的对应位置,制作显示-隐藏层的操作。
使用时间轴制作层动画步骤如下:
∙将层移至它在动画开始时应处于的位置。
“其他”>
“时间轴”。
∙选择您要制作动画的层。
∙选择“修改”>
“时间轴”>
“在时间轴上添加对象”,或者简单地将选定层拖至“时间轴”面板中,时间轴的第一个通道中出现一个条。
该条中出现层的名称。
∙单击位于条末端的关键帧标记。
∙在页面上将层移至它在动画结束时应处于的位置。
∙如果要让层沿曲线移动,请选择其动画条,然后按住Ctrl键并单击(Windows)动画条中部的一个帧,添加一个关键帧,或者单击动画条中部的一个帧并从上下文菜单中选择“添加关键帧”。
重复此步骤,定义其他关键帧。
∙按住“播放”按钮,预览页面上的动画。
重复此过程,在时间轴上添加其他层和图像并创建更为复杂的动画。
实验项目三动态网页制作
学习搭建服务器平台,掌握在MacromediaDreamweaverCS4中使用数据库、ASP对象、服务器行为制作动态网页,测试和发布站点。
制作5个动态网页(包含数据库),并搭建服务器平台,测试和发布站点。
(1)创建站点,创建页并保存新页,发布站点:
预览和设置远程站点,然后发布。
(2)设置Web应用程序
(3)了解ASP数据库连接
(4)创建DSN连接和ADO连接
(5)编辑或删除数据库连接
1.站点的创建与发布
在Dreamweaver中,站点是下列任意一项的简称:
∙Web站点:
一组位于服务器上的页,使用Web浏览器访问该站点的访问者可以对其进行浏览。
∙远程站点:
服务器上组成Web站点的文件,这是从创作者的角度而不是访问者的角度来看的。
∙本地站点:
与远程站点上的文件对应的本地磁盘上的文件。
您在本地磁盘上编辑文件,然后将它们上传到远程站点。
∙Dreamweaver站点定义:
本地站点的一组定义特性,以及有关本地站点和远程站点对应方式的信息。
创建Web站点要先进行规划:
决定要创建多少页、每页上显示什么内容以及页是如何互相连接起来的。
(1)创建站点。
选择“站点”>
“新建站点”,即会出现“站点定义”对话框。
选择“基本”选项卡,根据“站点定义向导”的提示逐项定义,或者选择“高级”选项卡,分另定义“本地信息”、“远程信息”、“测试服务器”等项。
(2)创建页并保存新页
∙即会出现“新建文档”对话框,选择“页面设计”类别。
选择该对话框右下角的“文档”单选按钮。
(3)发布站点:
在浏览器中预览和设置远程站点,然后发布,使用IP地址对其他同学的站点进行访问。
2.设置Web应用程序
(1)设置Web服务器:
运行Web应用程序,需要Web服务器。
Web服务器是根据Web浏览器的请求提供文件服务的软件。
Web服务器有时也叫做HTTP服务器。
常见Web服务器包括IIS、NetscapeEnterpriseServer、iPlanetWebServer和ApacheHTTPServer。
(2)设置应IIS服务器:
IIS服务器是一种软件,用来帮助Web服务器处理特别标记的Web页。
当请求这样一页时,Web服务器先将该页发送到应用程序服务器进行处理,然后再将该页发送到浏览器。
常见的应用程序服务器包括MacromediaColdFusionMX、MacromediaJRun、Microsoft.NET框架、PHP、IBMWebSphere和JakartaTomcat。
MicrosoftIIS和PWSWeb服务器还兼有ASP应用程序服务器的功能。
应用程序服务器通常安装在运行Web服务器的同一系统上。
(3)安装ASP应用程序服务器:
开发ASP页,需要支持MicrosoftActiveServerPages2.0的应用程序服务器。
常见的选择有:
∙MicrosoftIIS,它是WindowsNTServer、Windows2000和WindowsXPProfessional所附带的
∙MicrosoftPWS,在Windows98和NTWorkstation中运行的IIS的精简版本
∙SunChili!
SoftASP,在Windows、Linux、Solaris和其他平台上运行的版本。
Windows用户可以在其本地计算机上安装并运行IIS或PWS。
3.了解ASP数据库连接
ASP应用程序必须通过开放式数据库连接(ODBC)驱动程序(或对象链接)和嵌入式数据库(OLEDB)提供程序连接到数据库。
该驱动程序或提供程序用作解释器,能够使Web应用程序与数据库进行通信。
下表显示了一些可以与MicrosoftAccess、MicrosoftSQLServer和Oracle数据库一起使用的驱动程序:
数据库
数据库驱动程序
MicrosoftAccess
MicrosoftAccess驱动程序(ODBC)
MicrosoftSQLServer
MicrosoftSQLServer驱动程序(ODBC)
MicrosoftSQLServer提供程序(OLEDB)
Oracle
MicrosoftOracle驱动程序(ODBC)
OracleProviderforOLEDB
可以使用数据源名称(DSN)或连接字符串连接到数据库。
DSN是单个词的标识符(如Acme),它指向数据库并包含连接到该数据库所需的全部信息。
您可以在Windows中定义DSN。
通过安装在Windows系统上的ODBC驱动程序进行连接,则可以使用DSN。
连接字符串是手动编码的表达式,它标识数据库并列出连接到该数据库所需的信息。
例如:
Driver={SQLServer};
Server=Socrates;
Database=AcmeMktg;
UID=wiley;
PWD=roadrunner
4.创建DSN连接和ADO连接
(1)使用本地DSN创建连接:
1.在运行Dreamweaver的Windows计算机上定义一个DSN。
2.在Dreamweaver中打开一个ASP页,然后打开“数据库”面板(“窗口”>
“数据库”)。
Dreamweaver显示为该站点定义的所有连接。
3.单击该面板上的加号(+)按钮,然后从弹出式菜单中选择“数据源名称(DSN)”。
出现“数据源名称(DSN)”对话框。
输入新连接的名称。
不要在该名称中使用任何空格或特殊字符。
4.选择该对话框底部的“使用本地DSN”选项。
5.从“数据源名称(DSN)”弹出式菜单中选择要使用的DSN。
6.如果需要,填写“用户名”和“密码”框。
7.单击“测试”。
Dreamweaver尝试连接到数据库。
如果连接失败,请复查该DSN。
如果连接仍然失败,请检查Dreamweaver用来处理动态页的文件夹的设置.
8.单击“确定”。
新连接出现在“数据库”面板上。
(2)使用代码进行ADO连接。
5.编辑或删除数据库连接
创建数据库连接时,Dreamweaver会将连接信息存储到站点本地根文件夹下“连接”子文件夹中的一个文件。
首先在应用程序中为页定义了记录集,Dreamweaver才能为ASP应用程序创建数据库连接。
此时,Dreamweaver会在文件中写入用来建立连接的代码,并且在页面中插入include指令。
在运行时,服务器会在文档中插入连接代码。
(1)更新连接:
1.在Dreamweaver中打开一个ASP页,然后打开“数据库”面板(“窗口”>
连接列表出现在该面板上。
2.右击(Windows)或按住Ctrl并单击(Macintosh)该连接,然后从弹出式菜单中选择“编辑连接”,出现曾用来创建连接的对话框。
3.做出更改,然后单击“确定”。
Dreamweaver自动更新该include(包含)文件,这将更新站点中使用此连接的所有页。
(3)删除连接:
2.右击(Windows)或按住Ctrl并单击(Macintosh)该连接,然后从弹出式菜单中选择“删除连接”。
出现曾用来创建连接的对话框。
3.确认您要删除该连接。
备注:
若要避免在删除连接后出错,请在“绑定”面板中双击记录集的名称并选择新的连接,以更新每个使用旧连接的记录集。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页设计与制作 网页 设计 制作 实验 指导书
![提示](https://static.bdocx.com/images/bang_tan.gif)