课程要求

考核方式：考查

上课周数：2-14周   12周课

学时：36学时    学分：1.5学分

成绩计算方法：

每次成绩(出勤+课堂表现)：2分；出勤：1分，分A，B，C三等，A等1分，B等0.5分，C等0分(学生按学号入坐，根据机器号给成绩)；课堂表现：1分，分A,B,C三等，A等1分，B等0.5分，C等0分；共计24分。

每次作业：3分，分A、B、C、D四个等级。A给3分，B给2分，C给1分，D给0分。(第二周的作业要求第四周实验课结束前提交，依次类推，不按时提交作业，每次作业成绩按0分计算)共计36分。

期末大作业：50分(评分标准待定) (在规定的时间内上交符合要求的作业)

注意事项：学生应严格按照学号入住，否则成绩记录失误学生自己负责。

 

 

 

 

 

 

 

实验一 站点的建立及管理、制作简单网页

实验目的：

主要步骤：

一、        网页制作的基础

(1)    C/S结构和B/S结构

目前，网络上应用程序主要有C/S结构和B/S结构两种。C/S(Client/Server)结构，即客户机和服务器结构，它将任务合理分配到Client端和Server端来实现，目前大多数软件都是Client/Server形式的两层结构。

B/S(Browser/Server)结构，即浏览器和服务器结构，它是随着Internet技术的兴起，对C/S结构的一种变化或改进的结构。在这种结构下，用户工作界面通过WWW浏览器来实现，极少部分事务逻辑在前端(Browser)来实现，主要事务逻辑在服务器端(Server)实现。

(2)    万维网

万维网(WorldWideWeb，又称www、3W或Web)是Intemet(因特网)最为重要的应用之一。

(3)    超文本标记语言

HTML(Hypertext Markup Language，超文本标记语言)被用做WWW上的信息表述语言，用来描述网页的格式以及与其它网页的链接信息。

(4)    超链接

(5)    URL

URL(Uniform Resource Locator，统一资源定位符)

(6)    IIS

用户安装IIS(Internet信息服务)，即可以用它来发布网站、建立站点等。

(I)检查系统是否安装有IIS

桌面上点击我的电脑，右键点击管理，双击服务和应用程序，若出现Internet信息服务，则此电脑上已正确安装IIS。如图

(II)IIS的安装方法

[1]双击“控制面板”中的“添加或删除程序”图标，在打开的“添加或删除程序”对话框中单击左侧的“添加/删除WINDOWS组件”按钮，打开如图的“WINDOWS组件向导对话框”。如图：

[2]双击列表中的“Internet信息服务”，选中该选项下的所有选项。

[3]单击下一步操作，即完成IIS的安装。

(III)打开IIS

桌面我的电脑右键管理，双击“服务与应用程序”，双击“Internet与信息服务”。

 

二、        Dreamweaver 8的使用

(1)    启动网页设计工具

单击WINDOWS的“开始”按钮，选择“所有程序|Macromeida|Macromedia Dreamweaver 8”。

(2)    窗口布局

菜单栏：
(a)“文件”菜单该菜单除了包含“新建”、“打开”、“保存”和“保存全部”等

常用命令外，还包含用于查看当前文档或对当前文档执行操作的各种命令，例如

“在测览器中预览”和“打印代码”等。

(b)“编辑”菜单该菜单除了包括“剪切”、“拷贝”、“粘贴”、“撤消”和“重

做”等常见编辑命令外，还包含“代码提示”与“代码折叠”等命令。

(c)“查看”菜单使用户可以看到文档的各种视图，例如“设计”视图和“代码”视

图等，并且可以显示和隐藏不同类型的页面元素以及工具栏。

(d)“插入”菜单提供“插入”工具栏的替代项，用于将各种对象插入文档中。

(e)“修改”菜单使用户可以更改选定页面元素的属性。使用此菜单，用户可以编辑

标签属性、更改表格和表格元素，并且可以对“库”和“模板”执行不同的操作。

(f)“文本”菜单使用户可以设置文本的格式。

(g)“命令”菜单提供对各种命令的访问，其中包括“应用源格式”、“创建网站相

册”等命令，还可以利用“扩展管理”命令安装下载的插件。

(h)“站点”菜单提供用于管理站点，以及上传和下载文件的菜单项。

(i)“窗口”菜单提供对01．ealflweaver中的所有面板、检查器和窗口的访问。

(j)“帮助”菜单提供对DrealllWeaver文档的访问，包括关于使用Dreamweaver以及创建Dreamweaver扩展功能的帮助系统，还包括各种编程语言的参考材料。

三、        定义站点

操作步骤：在D盘上创建文件夹mywebsite，注意：文件夹必须为英文，右键“WEB共享”，共享该文件夹。然后选择“站点|新建站点“命令，配置站点信息。

四、        修改站点信息

选择“站点|管理站点“命令，打开”管理站点“对话框。

五、        多站点管理

选择“站点|管理站点“命令，在打开的”管理站点“对话框中，包含”新建“、”编辑“、”复制“、”删除”等按钮。

六、        创建站点的目录结构

创建站点后，还必须在其中添加文件和文件夹，也就是确定网站的文件目录结构。

一般情况下，用户应根据项目策划确定的内容，确定一级目录和二级目录的名称，主要文件的文件夹名。

建立方法：（1）本地建立；

         （2）右击站点根目录，从弹出的快捷菜单中选择“新建文件夹“命令；

七、        文件目录命名规范

(1)    不能使用中文

(2)    最好使用小写

(3)    不能使用特殊字符：文件与文件夹名不能使用特殊字符、空格、以及“~”、“!”，“@”，“#”，“$”，“%”，“^”，“&”，“*”等符号，但下划线“_”可以用来命名。

(4)    合理使用下划线

八、        制作简单网页

(1)   新建网页

选择站点管理器中的根目录，然后选择“文件|新建文件“命令。

(2)   保存网页

由于网页内容更改还没有保存，选择“文件|保存“命令。

(3)   设置文档的标题

(4)   定义关键字

关键字用来协助网络上的搜索引擎寻找网页，可通脱HTML插入栏中的“关键字“命令完成。单击”插入“栏上的下拉三角形按钮，从中选择”HTML“,单击其中的”头文件标签“，选择”关键字命令“。

(5)   设置网页的刷新

网页刷新通常有两种情况：第1种情况是在打开某个网页后的若干秒内，让浏览器自动跳转到一个新网页；第2种情况是用于需要经常刷新的网页(如聊天室内显示留言的页面)。

单击”插入“栏上的下拉三角形按钮，从中选择”HTML“,单击其中的”头文件标签“，选择”刷新“。

(6)   文本的处理

最早的WEB是为传输文本服务的，虽然网络技术经历了飞速的发展，但文本始终保持着核心的基础与地位。(ⅰ)输入文本；（ⅱ）设置文本格式；（ⅲ）设置样式；

(7)   插入水平线

选择“插入|HTML|水平线“

(8)   使用图像

网页上使用最多的图像格式是GIF和JPEG格式。（ⅰ）插入图像；注意：图像文件必须保存在站点内（ⅱ）修改图像属性；

(9)   设置页面的属性

通过“页面属性“对话框修改页面的标题、背景、边距和语言等。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

实验一练习题

从网络上搜索若干张大连海洋大学合适的照片和文字介绍，制作一个简单的网页介绍大连海洋大学，要求有图文并茂，排版美观。使用实验一讲授到的相关知识。

实验二 网页超链接

实验目的：

      超链接是网站的灵魂，掌握超链接的基本概念与创建方法，是学习网页制作非常重要的一步。

主要步骤：

一、超链接的概念

超链接由两个端点及一个方向构成。通常开始的位置称为源端点，目标位置称为目标端点。链接就是由源端点指向目标端点的一种跳转。目标端点可以是一个页面、一副图像、一段声音，甚至是页面中的某个位置。利用超链接可以实现文档间或文档中的跳转。

 

二、链接路径

在创建链接之前，必须搞清楚链接路径，否则极易出错。

1、绝对路径

如果要创建一个外部链接，就不可避免的使用一个绝对的URL地址(也称绝对地址)。绝对URL是指某文件在网络上的完整路径，包括协议、WEB服务器、路径和文件名等。简单的说，如果在浏览器地址栏中直接输入就能访问的文件地址，就可以看作是绝对地址。

当然，用户可以在内部链接上使用绝对地址，但这样作有可能出现的问题是，一旦网站所采用的域名发生改变，这些绝对地址必须逐个进行修改。

2、相对路径

(1)文件相对地址

文件相对地址是描述某一个文件(或文件夹)相对于另一个文件(或文件夹)的相对位置。即使站点根目录位置发生了变化，这种形式的地址也不会受到任何影响。也就是说，当站点的域名或站点的根目录发生改变时，站点内所有使用文件的相对地址的链接都不会出现问题。

(2)根目录相对地址

如果要创建的是内部链接，用户还可以选择根目录的相对地址，这种地址在动态网页编程中用得比较多。

根目录的相对地址书写形式比较简单，首先以一个向右的斜杠开头，用它来代表根目录，然后书写文件夹名，最后书写文件名。例如“/news/pages/new001.html”。

 

三、添加链接

  1、添加外部链接

其中，“目标”下拉列表框中共有4项可供选择，这4项的作用分别如下：
    (1)如果选择“_blank”选项，表示单击连接后，将在新的浏览器窗口中打开链接的网页。

(2)如果选择“_self”选项，将在当前网页所在的窗口或框架中打开链接的网页。该项是浏览器的默认值。

(3)如果选择“_top”选项，将在浏览器窗口中打开网页。

(4)如果链接文本所在的网页是嵌套框架的一部分，选择“”后，链接的网页将会在父框架中打开；如果不是在嵌套框架中，就会在整个浏览器窗口中显示链接的网页。

 

  2、添加内部链接

  3、添加邮件链接

邮件链接指向一个电子邮件(E-mail)信箱，当单击邮件链接时，将打开计算机上与浏览器相关的邮件软件，给链接目标发送邮件。

添加邮件链接最直接的办法是在选中文本或图像后，在“属性”面板上输入以下形式的链接地址mailto:wybcj@126.com，其中“wybcj@126.com”是邮件的接受地址。用户还可以预先设置邮件的主题，将代码“mailto:wybcj@126.com?subject=信息反馈”输入“属性”面板的“链接”框中，其中“信息反馈”是要发送邮件的主题。

  4、锚记链接

     如果某个网页中的内容过多，页面就会变得很长，这样在浏览时就需要不停的拖动滚动条，使浏览者看起来很不方便。利用锚记链接就可以实现直接链接至页面上任意一个指定点。

   (1)添加命名锚记

   (2)创建到命名锚记的链接

5、下载文件链接

6、空链接

7、脚本链接

  8、热点链接

 

四、设置链接的属性

     点击页面属性，设置链接的属性。

     “链接字体”：用来指定链接文本使用的默认字体；

     “大小”：用来指定链接文本使用的默认字体大小；

     “链接颜色”：用来指定应用于链接文本的颜色；

     “已访问的链接”：用来指定应用于访问过的链接的颜色；

     “变换图像链接”：用来指定当鼠标指针位于链接上时应用的颜色；

     “活动链接”：用来指定单击链接时显示的颜色；

     “下划线样式”：用来指定是否在链接上增加下划线。 

 

 

 

实验二练习

     第12届全运会2013年9月12日下午在辽宁沈阳成功闭幕。以全会会相关内容为主题，制作一个站点，介绍辽宁全运情况，要求有热点链接，并建立相应的邮件链接，锚链接，下载链接等，要求图文并茂，排版美观。要求知识3个页面。

 

 

实验三  表格的使用

实验目的：

主要步骤：

一、          表格的概念

表格是一种能够有效地描述信息的组织方式。在网页中表格也被用来控制页面版式，即控制文字、图形以及其它所有页面元素之间的属性。一个优秀的网站，除了用精美的图片、丰富的内容来装饰页面，还要利用表格的绚丽效果来锦上添花。

二、          表格的应用

1、创建表格

将插入点置于网页中要插入表格的位置。选择“插入”|“表格”命令，出现插入表格对话框。

在“表格宽度”文本框中指定表格的宽度，为了让使用不同分辨率显示方式的用户都能正确显示表格及其内部内容，可以用百分比定义表格的宽度。

在“单元格边距”文本框中指定表格的各单元格的内容与其边距之间的距离。

在“单元格间距”文本框中指定表格各单元格之间的距离。

2、选择表格对象

①选中整个表格

直接用鼠标单击表格的某一个角，这时，在表格的外框会显示3个黑色小方块。

②选择一列

将鼠标移到某一列的上方，鼠标指针变成黑色的向下箭头形状时，单击鼠标左键即可选择该列。

③选择一行

将鼠标移到某一行的左侧，鼠标指针变成黑色的向右箭头形状时，单击鼠标左键即可选择该行。

④选中单元格

 如果仅选择一个单元格，则用鼠标直接在单元格内双击即可。

 如果要选择多个单元格，则用鼠标在表格内拖动即可。

 选择某个单元格后，按下Shift键再单击其它单元格，可以选择连续的多个单元格。

 选择某个单元格后，按下Ctrl键再单击其它单元格，可以选择不连续的多个单元格。

3、调整表格的结构

①插入行或列

②删除行或列

4、合并单元格

选择要合并的单元格，右击鼠标，从弹出的快捷菜单中选择“表格|合并单元格”命令。此时，表格中选定的行或列就被合并为一个单元格。

5、拆分单元格

将插入点放在表格的一个单元格中。右击鼠标，从弹出的快捷菜单中选择“表格|拆分单元格”命令。

6、调整表格的大小

7、修改表格的属性

①表格名称

②行和列

③宽和高

④边框

⑤填充和间距

单元格填充指单元格中的对象与表格边框间的距离；单元格间距指单元格之间的距离。

⑥对齐

⑦背景颜色与背景图像

⑧边框颜色

8、设置单元格属性

①设置单元格的宽度和高度

②对齐方式：水平对齐可以将单元格中所有的内容居中到单元格的水平中央去；垂直对齐可以让单元格内的对象对齐到单元格的顶部。

9、创造嵌套表格

大表格的宽度一般用像素值，嵌套表格一般使用百分比。

10、套用已有的表格

选中表格，选择“命令|格式化表格”命令，选择其中一种，则表格会显示表格的士例外观。

11、使用表格布局网页

    http://jpk.dlou.edu.cn/jpkc/shengji/kuaiji/index.html

 

 

练习三

根据本实验所讲授知识，利用网络搜索一些优秀站点，利用表格对页面进行布局，设计一个主页站点。要求：颜色搭配合理，布局合理，内容健康，设计美观。

实验四  CSS样式表

实验目的

在当今的网页制作过程中，几乎所有漂亮的网页都用了CSS(Cascading Sytle Sheets,层叠样式表)。CSS是一种设计网页样式的工具。借助CSS的强大功能，网页将在制作人员丰富的想象力下千变万化。一个整洁漂亮的页面，很大程度上要归功于样式表。

 

主要步骤

一、样式表的概念

CSS(Cascading Sytle Sheet,层叠样式表)样式表将对网页的布局、自体、颜色、背景和其它图文效果实现更加精确的控制。从总体上来说，CSS样式表能够弥补HTML对网页格式化功能的不足，比如段落间距、行距、自体变化和大小、页面格式的动态更新及其排版定位等。

 

二、样式表的应用

1、CSS样式表的创建

CSS样式表实际上是对现有HTML标记的一种重新定义，当用户创建或改变一个CSS样式时，所有使用该标记的文本格式也将被自动更新。

【窗口】【CSS样式】命令，打开CSS样式面板。单击面板底部的“新建CSS规则”按钮，弹出“新建CSS规则”对话框。该对话框中包含“名称”、“选择器类型”、“定义在”三项，其具体含义及作用如下：

【名称】注意名称前必须以英文句点“。”开头，如“.title”、“.head”等。

【选择器类型】“类”对应自定义样式；“标签”对应重定义HTML样式；“高级”对应的是CSS选择器样式。

【定义在】定义的是存放CSS样式的位置。

 

 

2、 CSS样式表的应用

文本样式的设置

【字体】在下拉列表框中选择相应的字体，或使用编辑字体列表进行添加。

【大小】设置字体大小。

【粗细】设置文字的粗细。

【样式】设置文字的外形。如正常、粗体、偏斜体等。

【变体】设置为正常或小型大写字母。设置为小型大写字母时，将大写字母缩小。

【行高】设置文本的行高。默认状态由系统自行调整行高，行高可以设置为%。

【大小写】该项设置仅适合于Netscape浏览器。

【修饰】可以为文本设置添加下划线、上划线、删除线、无等，常用于设置链接的样式。

【颜色】设置文本的颜色，使用颜色拾取器或在文本框中直接输入颜色值。

 

背景样式设置

【背景颜色】选择颜色作为背景

【背景图片】设置背景图片

【重复】设置背景图片时此项有用。

【附件】设置背景图片时此项有用。用以设置背景图像，当网页长度超过一屏时是否随网页滚动，可以设置为固定、滚动。

【水平位置】设置文本的水平方向位置。

【垂直位置】设置同水平位置，设置为顶部、底部、居中等。

 

区块样式设置

区块在网页的文本段落排版中经常要用到，例如首行缩进、文字间距等。

【单词间距】指英文单词间的距离，一般选择默认。如需设置时，使用数字和后面的单位相结合，正值为增加间距，负值为缩小间距。

【字母间距】指英文单词间的距离，一般选择默认。如需设置时，使用数字和后面的单位相结合，正值为增加间距，负值为缩小间距。

【垂直对齐】设置对象的垂直对齐方式。

【文本对齐】设置对象的水平对齐方式。

【文字缩进】设置段落排版时最重要的设置，如段落首行缩进。(这是区块定义中最常用的一项)

【空格】此处设置网页源代码中的空格，有正常、保留和不换行3个选项。

【显示】设置对象如何显示或是否显示，在实际制作中一般不常使用。

 

 

方框样式设置：方框用来设置图片、表格的排列

在设置图像的距离、所在单元格四周的距离或图文混排时，常会用到这一设置。

【宽】设置对象的宽度。

【高】设置对象的高度。

【浮动】设置对象的环绕效果。

【清除】设置对象的一侧不可有层。如果清除层的一侧还有层，则对象将自动移动到层的下面，选择“两者”指两侧都不可有层；选择“无”则表示不限制左右是否有层。

【填充】如果对象有边框，且图像设为边框为1，那么填充指的是边框与图像之间的空白区域。

【边界】如果对象有边框，且图像设为边框为1，那么边界指的是边框外面的空白区域。

 

 

边框样式设置

通过边框样式设置，可以设置对象的边框颜色、粗细等各参数。

【样式】此项可以设置边框的样式，可以选择的样式为无、点划线、实线、双线、槽状、凹陷、凸出等。

【宽度】设置边框四个方向的宽度

【颜色】设置边框的颜色

 

 

列表样式设置

【类型】设置列表的符号类型

【项目符号图像】可以自定义项目列表的图像。

【位置】有“内”和“外”两个选择。选择“内”时列表缩进，浏览时效果不明显；选择“外”时列表贴近左边框，有明显的缩进。

 

拓展样式设置

用CSS样式还可以实现一些拓展功能，通过拓展样式设置实现。拓展样式面板主要包括3种效果，即分页、光标、过滤器。

 

   常用效果：
     【设置图像模糊效果】Blur(strength=20)

     【设置图像添加底片效果】Invert

     【设置图像透明度】Alpha(opacity=50,style=2)(opacity代表透明度，默认的取值范围是0-100，0代表完全透明，100代表完全不透明；style指定了透明区域的形状特征。0代表统一形状，1代表线性，2代表放射形，3代表长方形)

      【设置图像为灰度图像】Grayscale

      【设置头像为X光效果】Xray

      【设置图像波纹样式】Wave(add=add,freq=2,lightstrength=50,phase=3=45,strength=10)

 

三、管理CSS样式

使用”CSS样式”面板，可以对创建的CSS样式表进行查看、编辑、禁用或启用、删除等操作，也可以链接或导入CSS样式表。

(1)链接或者导入外部CSS样式

(2)查看CSS样式

(3)编辑与删除CSS样式

 

实验四练习

根据本实验所讲授内容，要求完成相关站点设计。要求使用CSS样式表设置表格、字体等相关属性、使用CSS样式表图片的滤镜效果，要求页面美观大方。要求有图文混排效果，有CSS样式表控制字体行间距的效果。

实验五  HTML结构与网页特效的简单应用

实验目的：

主要步骤：

一、HTML网页基本结构

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

</head>

<body>

</body>

</html>

从中可见，网页代码的结构由四部分组成：

1.<html>与</html>

<html>标记用于定义网页文件的开始，对应的标记结束符</html>则定义网页的结束。

2.<head>与</head>

该组标记用于定义网页的头。在头部还可用<title>和</title>标记符来定义网页的标题或放置JavaScript块或其它定义部分。

3.<title>与</title>

<title>和</title>用于定义网页的标题。

4.<body>和</body>

<body>用于定义网页正文的开始，</body>用于定义网页正文内容的结束。网页的正文内容必须放在这两个标记之间。

注意：Html标记均是用<>括起来的，所有的标记符是成对出现和使用的，有开始标记符和对应的结束标记符，结束标记多一根斜线，其用法的格式为：

<标记名>文本</标记名>

 

二、 网页特效的制作

脚本介绍：

脚本是一种能够完成某些特殊功能的小程序段。JavaScript是一种嵌入HTML文档的、基于对象的脚本描述语言。利用JavaScript可进一步增强网页的交互性，并可通过访问和操作浏览器对象，实现控制浏览器外观、状态和运行方式等目的。

1、网页中嵌入简单的JavaScript

在网页中嵌入和使用JavaScript时，必须将脚本代码放在<Script></Script>标记符之间，以便将脚本代码与HTML标记符区分开来。例如：在网页中利用JavaScript弹出一个消息框：

<script language=” JavaScript”>

window.alert(“大连海洋大学欢迎您”);

</script>

 

2、网页中时间JavaScript的运用

   <script language=JavaScript>                    

              today=new Date();                     

              function initArray(){                     

              this.length=initArray.arguments.length                     

              for(var i=0;i<this.length;i++)                     

              this[i+1]=initArray.arguments[i]  }                     

              var d=new initArray(                     

             "星期日",                     

             "星期一",                     

             "星期二",                     

             "星期三",                     

             "星期四",

             "星期五",

             "星期六");

             document.write(                    

            "<font  color=#ffffff style='font-size:10pt;font-family: 宋体'> ",                     

             today.getYear(),"年",                     

             today.getMonth()+1,"月",                     

             today.getDate(),"日",                     

             d[today.getDay()+1],                     

             "</font>");                 

              </script>

 

3、网页中滚动字幕JavaScript的制作

    <marquee direction="left" scrollamount="2"  onMouseOut="start()" onMouseOver="stop()">     //开始滚动

    </marquee>                                //结束滚动

函数：behavior="alternate"

      Width:

      Height:

 

4、网页中图片切换JavaScript的制作

将文档切换到代码视图，将光标定位到<body>标记下一行代码出，在光标处粘贴如下代码：可以对相应的代码就行简单的修改。

<SCRIPT>

var widths=400;             

var heights=300;             

var counts=6;  

img1=new Image ();img1.src='file://e:/lyw/images/a.jpg';

img2=new Image ();img2.src='file://e:/lyw/images/b.jpg';

img3=new Image ();img3.src='file://e:/lyw/images/c.jpg';

img4=new Image ();img4.src='file://e:/lyw/images/d.jpg'; 

img5=new Image ();img5.src='file://e:/lyw/images/e.jpg';

img6=new Image ();img6.src='file://e:/lyw/images/f.jpg';

url1=new Image ();url1.src='images/a.jpg';

url2=new Image ();url2.src='images/b.jpg';

url3=new Image ();url3.src='images/c.jpg';

url4=new Image ();url4.src='images/d.jpg';

url5=new Image ();url5.src='images/e.jpg';

url6=new Image ();url6.src='images/f.jpg';

 

var nn=1;

var key=0;

function change_img()

{if(key==0){key=1;}

else if(document.all)

{document.getElementById("pic").filters[0].Apply();document.getElementById("pic").filters[0].Play(duration=2);}

eval('document.getElementById("pic").src=img'+nn+'.src');

eval('document.getElementById("url").href=url'+nn+'.src');

for (var i=1;i<=counts;i++){document.getElementById("xxjdjj"+i).className='axx';}

document.getElementById("xxjdjj"+nn).className='bxx';

nn++;if(nn>counts){nn=1;}

tt=setTimeout('change_img()',4000);}

function changeimg(n){nn=n;window.clearInterval(tt);change_img();}

document.write('<style>');

document.write('.axx{padding:1px 7px;border-left:#cccccc 1px solid;}');

document.write('a.axx:link,a.axx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#666;}');

document.write('a.axx:active,a.axx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#999;}');

document.write('.bxx{padding:1px 7px;border-left:#cccccc 1px solid;}');

document.write('a.bxx:link,a.bxx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}');

document.write('a.bxx:active,a.bxx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}');

document.write('</style>');

document.write('<div style="width:'+widths+'px;height:'+heights+'px;overflow:hidden;text-overflow:clip;">');

document.write('<div><a id="url"><img id="pic" style="border:0px;filter:progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward)" width='+widths+' height='+heights+' /></a></div>');

document.write('<div style="filter:alpha(style=1,opacity=10,finishOpacity=80);background: #888888;width:100%-2px;text-align:right;top:-12px;position:relative;margin:1px;height:12px;padding:0px;margin:0px;border:0px;">');

for(var i=1;i<counts+1;i++){document.write('<a href="javascript:changeimg('+i+');" id="xxjdjj'+i+'" class="axx" target="_self">'+i+'</a>');}

document.write('</div></div>');

change_img();

</SCRIPT>

 

实验五练习

根据本实验所讲授内容，设计一个站点：1）实现时间的自动生成；2）实现文字的滚动：3）实现图片的滚动、图片的切换效果。4）进入页面时，弹出一个消息框：欢迎您光临大连海洋大学经济管理学院网站。

实验六 网页特效的综合应用

实验目的：

主要步骤：

一、网页中颜色的搭配。

   颜色的使用在网页制作中起着非常关键的作用，有很多网站以其成功的色彩搭配令人过目不忘。但对于刚学者来说，往往不容易驾驭好网页的颜色搭配。除了学习各种色彩理论和方法之外，多学习一些著名网站的用色方法，对于我们制作美丽的网页可以起到事半功倍的作用。【参考资料：http://baike.baidu.com/view/1663138.htm】

 

二、主页特效的综合应用，要求掌握在网页中使用不同的特效增加网页的动态效果。

 

三、在网页中插入视频

很多网站都有可以让浏览者直接观看的视频，如视频直播、播放影音文件等。视频文件的格式可以为DAT格式、AVI格式、MPEG格式、RM格式、WMV格式等。视频文件可以直接插入到网页页面中，但只有在浏览者的浏览器安装了相应的插件后才可可以播放，因而一般在网页中插入视频时，大多采用多数浏览器支持的Windows Media Player播放器。

在网页中插入视频的步骤：
【插入】【媒体】【插件】，弹出【选择文件对话框】，选择要插入视频文件。

插入后，选中插件图标，改变插件的大小，在属性中进行相关的设置。

     此时采用的都市默认的播放样式，单击【属性】面板中的【参数】按钮，在打开的【参数】对话框中进行更详细的参数设置。比如，设置loop的值为true让视频循环播放，设置autostart的值为false，让浏览页面时视频不自动播放，以便加快页面下载速度。

 

四、在网页中插入背景音乐

在网页中，最常用的就是添加背景音乐。添加背景音乐的格式一般以WMV、MP3、MID格式为主。

在网页中插入背景音乐的方法：

将文档切换到代码视图，将光标定位到<body>标记下一行代码出，在光标处写上如下代码：

<bgsound scr=yesterday.mp3>

如果想让背景音乐循环播放，在代码中加入”loop=true”

 

五、在网页中插入Flash动画

1、简单FLASH动画的制作

2、在网页中插入FLASH动画

选择菜单命令【插入】【媒体】【Flash】，在对话框中选择要插入的Flash动画文件。单击Flash文件，在【属性】面板上设置相关的属性。

选中【循环】复选框，则该动画将在页面浏览时连续播放。

选中【自动播放】复选框，可以设置在浏览网页时动画是否同时播放。

【宽】

【高】

【垂直边距】用来设置Flash动画距离页面中其上下其它网页元素的距离。

【水平边距】用来设置Flash动画距离页面中其左右其它网页元素的距离。

通过【品质】可以设置Flash动画的品质。

【低品质】动画显示速度快、但动画的画面质量相对较低。

【自动低品质】快速显示动画。

【自动高品质】显示高清晰度动画的画质。

【高品质】动画的画质最好，但下载速度较慢。此项为默认项。

在【比例】下拉列表框中有3中比例选择：

【默认（全部显示）】按动画的实际比例大小显示动画。

【无边框】设置动画无边框，如设为此项，会忽略显示动画左右两边的细微动画内容。

【严格匹配】按动画设置的宽度和高度显示动画。

 

 

练习六练习

根据本实验内容，设计一个个人站点的首页，要求根据自己的性格特点选取合适的颜色搭配，使用合适的背景音乐、图片切换效果，并可使用适当的文字介绍自己。【要求网页中增加一个浏览者计数的功能，可以统计一共有多少人浏览了你的主页】

 

实验七   制作表单页面

实验目的：

主要步骤：

九、        表单的概念

表单是一个由文本和表单域组成的集合，像平时使用的调查表一样，用于在Internet上收集指定类型的信息，如登录注册、图书订购等。站点访问者通过输入信息或从列表 中选择一些选项，从而实现与站点管理员的交互访问。

     表单的工作原理很简单，站点访问者可以在被称为“表单域”的特定网页元素中，根据自己的意愿输入或选择相关的信息，然后将指定的信息提交给服务器。服务器会根据指定的表单结果处理程序，将这些信息保存到特定的文件中，以便站点管理员查看。

十、       表单的应用

可以利用“表单”插入栏上的按钮插入。在“插入”栏上切换到“表单”子工具栏，“表单”插入栏中各按钮的功能如下：

【表单】在网页中插入表单域

【文本字段】在网页中加入一个文本字段，供输入数据。

【隐藏域】存储用户输入的信息，如姓名、电子邮件地址或偏爱的查看方式，并在该用户下次访问此站点时使用这些数据。

【文本区域】可以输入多行文本。

【复选框】有选中和未选中两种状态，有多个并列复选框时容许多选。

【单选按钮】在一组选项中选择了某项后，就会取消其它选项的选择。

【单选按钮组】创建一组在HTML表单中使用的单选按钮。

【列表/菜单】把一组选项罗列在一个列表中供选择。

【跳转菜单】采用下拉列表框的方式实现链接跳转，外观上与列表/菜单相同。

【图像域】可以在表单中插入图像。

【文件域】用于让用户浏览自己的硬盘，选择所需的文件，并将该文件上传到服务器。

【按钮】用于提交、重置表单或者调用函数。

【标签】提供了一种在结构上将域的文本标签和该域关联起来的方法。

【字段集】是表单元素逻辑组的容器标签。

十一、           表单的操作

单击“表单”插入栏上的“表单”按钮，此时在页面中就会出现一个红色的虚线框，如果看不到虚线框，可以选择“查看”“可视化助理”“不可见元素”命令。

单击虚线框的内部，此时属性显示的是表单域的属性。

【表单名称】用来填入表单的名称，该名称在需要引用表单对象时才会用到。

【动作】是这些属性中最重要的一项，它用来定义处理数据的应用程序的路径。

【方法】用来选择表单的提交方法。期中POST方式表示表单信息将以数据包的形式提交；而GET方式会将浏览者提供的信息附加在URL地址的后面提交到服务器。

【目标】用来设置提交表单后，打开的目标网页将以哪种形式进行显示。

【MIME类型】用来指定对提交给服务器进行处理的数据使用的MIME编码类型。默认设置的“application/x-www-form-urlencoded”选项与POST方法协同使用。如果在表单域中添加文件域，最好选择“multipart/form-data”类型。

【类】选择要应用到表单的样式。

【1】添加文本域

【文本域】在“文本域”文本框中给文本框命名。

【字符宽度】用来设置文本框的宽度。

【最多字符数】为单行文本框内所能填写的最多的字符数。

【初始值】用来设置默认状态下在单行文本框中显示的文字。

 注意：修改文本框表现样式：style->border-style

【2】添加密码文本框

【3】添加文本区域

【字符宽度】用来设置文本区域的宽度。

【行数】用来设置文本区域的高度。

【换行】当在文本区域中输入的内容超过了右侧边界时，就会涉及换行问题。

【初始值】可以填写文本区域的初始文本内容。

【4】添加单选按钮与单选按钮组

【单选按钮】用来填写单选按钮的名称。

【选定值】用来设置单选按钮提交的值。

【初始状态】可以将当前的单选按钮设为“已勾选”或“未选中”。

【5】添加复选框

    【复选框名称】用来在处理提交数据时识别的复选框。

    【选定值】用来为复选框赋值。

    【初始状态】是浏览者还没有做出选择时的状态，初始状态既可以是“已勾选”，也可以是“未选中”。

【6】添加菜单与列表

   菜单与列表最大的区别是，菜单默认只显示一行，而列表可以显示多行。

（1）添加菜单

    （2）添加列表

【7】添加其它表单域

（1）添加文件域

（2）添加应藏域

【8】插入按钮

     【按钮名称】用来给按钮命名。

     【值】用来设置按钮上的文字。

     【动作】用来选择单击按钮时将会触发的动作，其中：

提交表单：用来将按钮设为提交按钮。当访问者单击按钮时，就会将表单中的内容提交给表单目标程序。

重设表单：用来将按钮设为重置按钮。当访问者单击按钮时，就会清除浏览者所填写的所有表单内容。

无：用来将按钮设为普通按钮。

【9】添加图像域

【10】制作跳转菜单

（1）插入跳转菜单

【菜单项】显示该跳转菜单中将会出现的各个选项。

【文本】用来设置下拉列表中某选项的文字说明。

【选择时，跳转URL】用来设置链接网页的地址，也可以单击“浏览”按钮找到要链接的网页。

【打开RUL于】用来设置打开链接的窗口。

【菜单名称】用来设置跳转菜单的名字。

【选项】当选中“菜单之后插入前往按钮”复选框后，将在菜单的旁边添加一个“前往”按钮，此时只有当访问者单击该按钮时，浏览器才会访问该地址。当选中“更改URL后选择第一个项目”复选框后，可以在找不到链接的URL地址时，自动打开菜单中第一个项目对应的RUL地址。

      （2）修改跳转菜单

Onchange=javascript:window.open(this.options[this.selectedIndex].value)

【11】添加搜索引擎

<td width="387" align="center" valign="bottom"><br>

<SCRIPT language=javascript>
function g(formname)    {
var url = "http://www.baidu.com/baidu";
if (formname.s[1].checked) {
       formname.ct.value = "2097152";
}
else {
       formname.ct.value = "0";
}
formname.action = url;
return true;
}
</SCRIPT>
<form name="f1" onsubmit="return g(this)">
  <iframe id="baiduframe" border="0" vspace="0" hspace="0" marginwidth="0" marginheight="0"
  framespacing="0" frameborder="0" scrolling="no" width="380" height="60" src="http://unstat.baidu.com/bdun.bsc?tn=zhigaolawyer_pg&cv=0&cid=1032217&csid=1&rkcs=27&bgcr=FFFFFF&ftcr=0000CC&rk=0&bd=0&tbsz=40&tbst=1&sropls=1,4,6,2&wd=380&ht=60&kwnm=0&kwgp=1&sropst=1&bdas=0">
</iframe>
</form>   

 

 

 

练习七练习

通过网络搜索相关表单设计站点，设计一个你所感兴趣的调查问卷。要求用到本实验所讲授的所有控件，并添加相应搜索引擎功能，页面设计美观大方。

 

实验八  框架的使用、层的使用

实验目的：

主要步骤：

十二、        框架的概念

框架是指浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余框架页中所显示内容无关的页面，只是针对自身文档。

框架是较早在网页中使用的对象，使用框架可以把浏览器的窗口划分成若干个区域，每个区域可以显示不同的网页，还可以通过链接让各个区域之间的网页建立联系。

 使用框架创建的网页不仅能够同时显示多个网页的内容，而且容许其中的一个框架随着访问者的需要自动的更换内容，达到通过一个框架网页就可以浏览整个站点内容的目的。

十三、       框架的应用

1、  创建框架的步骤

（1）       创建框架结构。首先需要创建一个新网页，该网页将作为控制框架结构的页面。

（2）       设置框架。给每个框架指定或新建一个显示具体内容的页面。

（3）       创建链接。给每个框架命名，通过“属性”面板对文本或图像指定链接。

（4）       保存框架网页。将所有的框架网页保存起来。

注意：如果某个页面被划分为两个框架，那么它实际上包含的是3个独立的文件：一个框架集文件和两个框架内容文件。框架内容文件包含页面框架中的内容。框架集文件是使用框架定义页面的文件，包括框架集内存储页面框架大小和位置的信息，还存储每个框架载入内容的文件名。

2、  框架的创建

在Dreamweaver 8中创建框架有2中方法：

(1)    选择菜单命令【文件】【新建】，弹出【新建文档】对话框，在对话框中选择【常规】【框架集】，选择所需的框架类型，单击【创建】按钮，可创建框架。

(2)    选择菜单命令【插入】【HTML】【框架】，选择所需的框架的类型，可创建框架。

3、  选定框架或框架集

(1)选定框架

如果要在文档窗口中选定框架，请按下ALT键，然后单击框架内的任意位置。

(2)选定框架集

把光标移到框架与框架之间的分隔线上，等光标变化箭头形状后单击。

4、  设置框架集与框架的属性

(1)    设置框架集的属性

单击框架之间的分隔线选定框架集，在“属性”面板下修改相应的属性。

【边框】定义是否需要边框

【边框宽度】定义边框的宽度，直接输入数字，单位是像素。

【边框颜色】定义边框的颜色。

【值】指定所选定的行或列的大小。

(2)    设置框架的属性

【框架名称】决定用来作为超链接目标和脚本引用的当前框架名。可以根据框架在整个框架网页中的位置命名。

【源文件】所选框架装载的文件名。

【边框】定义框架是否需要边框

【滚动】决定了在没有足够空间显示当前框架中内容时是否出现滚动条。

【不能调整大小】限制了当前框架的大小，防止浏览者拖动框架

【边框颜色】设置框架边框的颜色

【边界宽度】设置左边距和右边距的宽度(单位为像素)，即在框架边框和内容之间的距离。

【边界高度】设置顶部边距和底部边距的高度(单位为像素)，即在框架边框和内容之间的距离。

   5、在框架中使用链接

 

十四、       层的使用

1、  层的概念

层是网页的一个区域，在一个网页中可以有多个层存在。层最大的魅力在于各个层可以重叠，并且可以设置各层的属性和关系。

2、  层的应用

在网页中创建层的操作步骤如下：

(1)将插入点置于要创建新层的位置。

(2)选择【插入】【布局对象】【层】命令，在插入点处创建了新层。

    3、层的应用举例：利用层制作网页页面中漂浮广告的效果。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

    练习八：根据本实验所讲授内容，参考浙江亿达电子工程有限公司的网站主页，建立相应的框架网页，单击菜单，在框架中显示相关的网页，并运用层的只是创建一个浮动广告。要求建立：公司概况、亿达文化、公司历程三个菜单的相应链接页面。

实验九   动态页面的制作(上)

实验目的：

     Internet的飞速发展以及计算机信息技术的不断创新，让人们充分感受到了网络带来的冲击，生活中也越来越多地受到了网络的影响，网页的制作技术更是日新月异，静态网页的制作已经远远不能满足人们的要求，Internet的进步让越来越多的人，认识到网络编程的重要性。ASP是一种以互联网为商业、个人和顾客提供应用服务的新型服务中介。使用ASP制作网页之前首先要配置ASP的开发环境。

     ASP(Active Server Pages)是微软公司开发的一种超文本标示语言，是服务器端的脚本编写环境。ASP没有提供自己的编程语言，而是允许用户使用VBScript、Javascript等已有的脚本语言来编写应用程序，并且可以调用ActiveX组件来执行任务，例如建立数据库链接以及站点内信息的检索等。ASP以其使用简单、效率高、功能强等特点受到广大程序爱好者的青睐。

主要步骤：

十五、        配置ASP的运行环境

1、  在本地硬盘上新建一个文件夹，在该文件夹上右击，在弹出的快捷菜单中选择“属性”命令，选择“WEB共享”选项卡。

2、  在“WEB共享”选项卡中选中“共享这个文件夹”单选按钮，在对话框中设置别名，注意别名必须为站点名。

3、  新建站点。

4、  切换到高级：配置本地信息、远程信息、测试服务器、设置HTTP地址，设置URL前缀地址等。

5、  新建页面，浏览。

十六、       站点登录页面的制作

1、  利用ACCESS建立表。

2、  建立ASP到ACCESS的连接。

【窗口】【数据库】打开数据库面板，点击数据库面板上的“+”选择“自定义连接字符串”，输入连接名称conn(此名可以任意取)，输入连接字符串为：

"Provider=Microsoft.Jet.Oledb.4.0;Data Source="&Server.Mappath("/DDMis/data/DDMis.mdb")

3、  利用表单和表格制作登录页面

4、  切换到服务器行为面板上，点“+”用户身份验证，进行相应的登录用户设置。

三、新闻发布系统页面的制作

新闻标题(s_title)		作者(s_author)
发布时间(s_time)		内容(s_note)

1、在ACCESS里建立相应的表。

2、切换到服务器行为面板上，点“+”插入记录，进行相应的插入设置。

四、显示数据库里表的信息

    动态网页最主要的就是结合后台数据库自动更新WEB页面，离开了数据库也就谈不上动态页面了。数据是通过创建记录集来实现它在网页上的绑定的，而不是直接使用数据库。

将数据库用作动态网页的数据源时，必须首先创建一个记录集。记录集在数据库和动态应用程序页面之间起一种桥梁作用。记录集由数据库查询返回的数据组成，并且临时存储在应用程序服务器的内存中，以便进行快速数据检索。当服务器不再需要记录集时，就会将其丢弃。

记录集本身是从指定数据库中检索到的数据的集合。它可以包括完整的数据表，也可以包括表的行和列的子集。这些行和列通过在记录集中定义的数据库查询进行检索。

【窗口】【绑定】点“+”选择“记录集(查询)”，创建相应的记录集。

 插入重复区域

 插入显示区域

    记录集分页

 

 

实验十   动态页面的制作(下)

实验目的：

主要步骤：

一、显示数据库里表的信息

    动态网页最主要的就是结合后台数据库自动更新WEB页面，离开了数据库也就谈不上动态页面了。数据是通过创建记录集来实现它在网页上的绑定的，而不是直接使用数据库。

将数据库用作动态网页的数据源时，必须首先创建一个记录集。记录集在数据库和动态应用程序页面之间起一种桥梁作用。记录集由数据库查询返回的数据组成，并且临时存储在应用程序服务器的内存中，以便进行快速数据检索。当服务器不再需要记录集时，就会将其丢弃。

记录集本身是从指定数据库中检索到的数据的集合。它可以包括完整的数据表，也可以包括表的行和列的子集。这些行和列通过在记录集中定义的数据库查询进行检索。

【窗口】【绑定】点“+”选择“记录集(查询)”，创建相应的记录集。创建记录集后进行绑定。

 插入重复区域：服务器行为，点“+”选择“重复区域”

 插入显示区域：服务器行为，点“+”选择“显示区域”，“如果记录集不为空则显示区域”。

    记录集分页：服务器行为，点“+”选择“记录集分页”。

二、数据的更新操作

添加编辑按钮，点“服务器行为”下的“+”，选择“跳转到详细页面”，选择某个值(学号)作为传递的参数。

制作详细信息页面，点“绑定”下的“+”，选择“记录集（查询）”，刷选指定相应的参数。为简化操作，复选框有文本框替代。

点“服务器行为”下的“+”，选择“更新记录”，即可完成记录的更新。

三、数据的删除操作

 

 

 

 

练习九、十：根据实验九、实验十讲授内容，利用ASP技术实现一个动态新闻发布系统前、后台管理页面。要求能实现新闻的增加、修改、删除等功能。

实验十一   测试、发布、管理和维护站点

实验目的：

主要步骤：

一、测试浏览器的兼容性

(1)在Dreamweaver中新建网站”studio”，设置其文件夹为”demo”。

(2)在菜单栏中，选择“文件-》检查页-》浏览器兼容性”菜单命令，展开“结果”面板的“浏览器兼容性”面板。

(3)单击“浏览器”兼容性面板左侧的[检查浏览器兼容性]按扭，单击“设置”命令。

(4)在“目标浏览器”对话框中，保持“浏览器最低版本”为默认状态，单击确定按钮

(5)单击“浏览器兼容性”面板左侧的[检查浏览器兼容性]按钮，在弹出的菜单中选择[检查浏览器兼容性]按钮，进行浏览器兼容性测试。

(6)选择检测出的兼容性问题，在右侧的“浏览器支持问题”中可以查看该问题所影响的浏览器类型和版本。根据问题及提示对网页进行修改。

二、测试连接

三、使用报告测试站点

四、注册域名

五、申请空间

六、发布站点

七、注册免费空间提交搜索引擎

 

 

 

 

 

实验十一：制作一个个人主页页面，完成站点的测试报告，并在网络上进行免费空间申请并提交相关搜索引擎

 

电子商务实验作业

1．自选题材，主题内容要合法、健康、实用。网站主题突出、内容丰富。网页可以是静态HTML的，也可以有动态ASP页面。

2．站点应当设计合理，结构分明，管理有序，无多余文件和文件夹，大小合适。文件和文件夹存放位置要正确，首页文件名应该使用index.htm、index.asp、default.htm或default.asp。其他文件或文件名命名也要规范。

3．网站风格统一，设计适合于主题的LOGO（徽标），或者标题图片及动画。各页面设计合理、美观，有创意。不要太花哨或太孩子气，不要只是各种元素的随意拼凑。图片和动画选用要适合主题，不要在网页中插入不相干的图片，图片保存格式和图片大小要合适。要适用于各种显示器的分辨率，不要太宽，否则在显示器分辨率较小时会出现水平滚动条。

4．各个页面之间的链接要合理有效，路径要正确（使用相对路径）。要合理使用css样式，不要在各个页面中重复定义相同的css样式；应该将css样式存放到css文件中，然后附加即链接到各页中。

5．站点页面数5页以上。

6．尽量使用本课程所讲授的相关知识。

7.实验作业满分50分。

注意事项：

1、严禁雷同，否则按0分处理。

2、上交最后时间：2013年1月9日。

3、上交方式：2013年1月7日-9日，每天9点至下午4点，在机房首先需要进行演示和简单的讲解，老师记完成绩后，上交到指定的文件夹方可给成绩。不参加演示的，自行交到指定文件夹的，需告诉老师，最高成绩为良好。

部分评分标准：

内容	分值
站点设计合理	2分
要求至少有5个页面	2分
要求页面颜色搭配合理	5分
要求各页面布局合理	5分
要求各页面具有动态效果	5分
要求页面间便于切换、浏览	2分
要求页面中运用CSS样式表	5分
要求页面中设计相应表单	2分
要求某页面中合适的位置添加搜索引擎功能	2分
网页创意	10分
网页内容充实	5分
演示讲解表现与效果	5分