第03章 设计上下固定区域.docx

（3）在此行前，写下图3.11中第38行代码（或从配套光盘内“开发所需文件”文件夹内，找到代码，粘贴到此处）。

图3.11在行后插入音乐播放代码

（4）单击屏幕左下角的“设计”标签，切换到设计界面。

单击屏幕上方的运行按钮“

”，听听音乐是否能够自动循环播放。

实际上，由于设置的插入音乐的高度和宽度均为0，因此，插入的音乐不占用任何位置。

单击图3.12左侧“embed”方框的下方，即divLeft区域的空白处，此方框即会消失。

图3.12插入背景音乐后的设计界面

如果在源界面，设高度为20，宽度为80，再回到设计界面，用鼠标缩窄顶部图片，就会出现图3.13所示的效果。

如果将图片再拉宽至700，音乐播放按钮就会被“挤出”divTop区域而无法显示。

图3.13设置背景音乐占位大小和缩窄图片后效果

4.3添加常用功能

4.3.1添加div

（1）打开工具箱窗口，拖出一个div到屏幕底联系电话数字后（见图3.14）。

（2）打开属性窗口，设置此div的id为divOfen。

（3）单击Style属性右侧的按钮，打开样式设置界面。

（4）各项设置如表3.1所示。

表3.1divOfen的设置项表

类别

项

值

意义

定位

position

Absolute

绝对位置

width

100

height

60

块

line-height

20

每行高度

text-align

center

水平居中

字体

color

白色

白色文字

说明：

表内的字体设置也可以通过工具栏，象Word一样设置。

图3.14设置divOfen的样式

（5）按住此div的标签，将此div拖到divBottom后部。

结果如图3.15所示。

由此可知，绝对定位的层可通过属标拖动，任意摆放其位置。

图3.15添加并移动层divOfen

4.3.2前进/后退

为了方便浏览者，可以在网页上添加“前进/后退”功能。

具体实现步骤为：

（1）在dirOfen内，添加图3.16所示的三行文字。

图3.16添加文字

（2）选定“前进”二字，然后单击屏幕上方工具栏内的超链接图标“

”。

在弹出图3.17所示的界面中输入：

javascript:

history.go

（1）。

结果，文字变成超链接，超链接文字默认蓝色。

图3.17设置超链接过程图

说明：

URL，即超链接到的网址。

在此处，超链接不是一个网址，而是一个语句，于是，当单击此超链接时，就不会跳转到某个网页，而是执行其中的语句。

注意：

一定要在英文输入法状态下输入，全部标点一定要为英文，一个字母都不能错。

以下同样如此。

（3）单击文字颜色按钮“

”，将文字颜色设为白色。

经过上述三步设置，网页即有了“前进”功能。

但现在即使运行网页，也不能实现“前进”功能，因为只有在网页“后退”后，才可以“前进”。

因此，这一功能需以后章节完成后，才能体会到。

用同样上述三步设置，即可完成“后退”功能。

“后退”超链接为：

javascript:

history.go（-1）。

4.3.3收藏

“收藏本页”功能的设计步骤和“前进”功能的设置方法相同，其超链接为：

javascript:

window.external.addFavorite（'http:

//www.NewL','牛郎丝网机械'）

4.3.4设为首页

“设为首页”功能的设计过程稍复杂一些，具体步骤如下：

（1）选定“设为首页”这四个字。

（2）然后单击屏幕上方工具栏内的超链接图标“

”。

（3）在弹出的图3.17所示的界面中输入：

#（#为本页的意思）。

（4）单击屏幕下方的“源”标签，找到“设为首页”。

将其改为：

//www.NewL'）;"href="#">设为首页

说明：

本小节写法在任何网站中都是固定的，无须理解为什么这样写。

4.3.5去掉超链接的下划线

网站链接一般都没有下划线，去除方法如下：

（1）打开“源”界面

（2）找到一行。

（3）在其下方，输入一行文字：

设置完毕，运行网页，查看效果。

因为只有一个网页，因此，前进后退功能暂时无法体验到。

4.4添加动态地图

为了使买家方便地找到本公司，最好使用地图将自己公司所在位置方便的显示出来。

本书图源来自“51地图网”。

设计的最终效果如图3.18所示。

图3.18点击小图出大图

实现这一目的只需以下简单的四步。

4.4.1获取城市英文简称

通过访问网页“

由图中可知，公司所在城市“衡水”的英文简称为“hengshui”。

图3.19得到本市英文简称

4.4.2获取公司位置坐标

获取步骤如下：

（1）打开网页“（见图3.20）。

（2）单击屏幕左侧的“标注位置”，显示屏幕右侧地图。

（3）放大地图并找到本公司位置。

（4）单击屏幕右下侧的“在地图上标注位置”，鼠标光标变为钉子状。

（5）点击图上公司在图中的位置“确定”，屏幕左侧即会显示公司在地图上的位置及比例尺级别。

图3.20得到本公司的位置信息

4.4.3添加小地图

添加步骤如下：

（1）打开Main.master的设计界面。

（2）拖出一个div到divBottom层的文字最后。

（3）设其id属性为“divSmallMap”、style定位positon:

absolute、width:

100、height:

60

（4）拖动此层到网页的左下角。

（5）从“解决方案资源管理器”中，拖出“map.jpg”到“divSmallMap”层内。

（6）在弹出的图3.21所示的界面中，输入“点击看大图”，将来鼠标指向此图时，即会显示这些文字。

图3.21输入图片指向时的提示文字

如果没有弹出图3.21，也可以通过属性窗口，将其Title属性设为：

点击看大图。

两种设置方法结果相同。

（7）按一下向左光标键，按住Shift键，再按一下向右光标键，即能将地图选定并被VS2008视为选定了一些文字，而不是图片。

（8）单击超链接按钮

，输入网址“动态大地图.aspx”

4.4.4设计动态大地图页

设计步骤如下：

（1）单击“解决方案资源管理器”中的网站名“NewLong”。

（2）单击屏幕上方的添加新项按钮“

”，屏幕弹出图3.22所示的界面。

图3.22添加新网页

（3）在图3.22中，选择“Web窗体”、输入网页名“动态大地图.aspx”、选定“选择母版页”“添加”“确定”。

之后，屏幕出现此页设计界面。

（4）在属性窗口，选择“Document”，将“title”属性设为“牛郎公司位置图”。

将来用户浏览此网页时，即会在浏览器最上端的标题栏，出现此行标题文字。

（5）向ContentPlaceHoder1中，拖入一个div。

（6）设置此层属性，具体见表3.1。

表3.1层属性设置表

Id

定位

边框

position

width

height

borderstyle

borderwidth

Bordercolor

divMap

Absolute

600

350

solid

6

深黄色

（7）切换到“源”界面。

（8）将本书所附光盘的“开发所需文件”文件夹内“大地图代码.txt”中的代码复制到“