第9章网页 网站设计与制作综合实例.ppt

《第9章网页 网站设计与制作综合实例.ppt》由会员分享，可在线阅读，更多相关《第9章网页 网站设计与制作综合实例.ppt（31页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、网页设计与制作教程机械工业出版社同名教材机械工业出版社同名教材机械工业出版社同名教材机械工业出版社同名教材配套电子教案配套电子教案配套电子教案配套电子教案2005.82005.89.1 9.1 实例创意和效果展示实例创意和效果展示实例创意和效果展示实例创意和效果展示9.2 9.2 实例说明实例说明实例说明实例说明9.3 9.3 设计过程设计过程设计过程设计过程第第9章章 网页、网站设计与制作综合实例网页、网站设计与制作综合实例 该实例是一个小型的娱乐资讯网站的首页，页面的色该实例是一个小型的娱乐资讯网站的首页，页面的色该实例是一个小型的娱乐资讯网站的首页，页面的色该实例是一个小型的娱乐资讯网站

2、的首页，页面的色调是蓝色，给人的感觉是凉爽、清新，将蓝色与白色混合，调是蓝色，给人的感觉是凉爽、清新，将蓝色与白色混合，调是蓝色，给人的感觉是凉爽、清新，将蓝色与白色混合，调是蓝色，给人的感觉是凉爽、清新，将蓝色与白色混合，能体现柔顺、淡雅、浪漫的气氛，精美的表格线条使整个页能体现柔顺、淡雅、浪漫的气氛，精美的表格线条使整个页能体现柔顺、淡雅、浪漫的气氛，精美的表格线条使整个页能体现柔顺、淡雅、浪漫的气氛，精美的表格线条使整个页面显得华丽而整洁。面显得华丽而整洁。面显得华丽而整洁。面显得华丽而整洁。在页面的顶部是广告条和常用的页面链接。接着下面是导在页面的顶部是广告条和常用的页面链接。接着下面

3、是导在页面的顶部是广告条和常用的页面链接。接着下面是导在页面的顶部是广告条和常用的页面链接。接着下面是导航部分，整个页面总共有航部分，整个页面总共有航部分，整个页面总共有航部分，整个页面总共有9 9个导航链接，是这个小型站点的个导航链接，是这个小型站点的个导航链接，是这个小型站点的个导航链接，是这个小型站点的9 9个版块。本页是网站的首页，因此个版块。本页是网站的首页，因此个版块。本页是网站的首页，因此个版块。本页是网站的首页，因此“本站首页本站首页本站首页本站首页”的导航是展的导航是展的导航是展的导航是展开的。在页面的左侧主要包括开的。在页面的左侧主要包括开的。在页面的左侧主要包括开的。在页

4、面的左侧主要包括“聊天室聊天室聊天室聊天室”、“虚拟社区虚拟社区虚拟社区虚拟社区”的的的的登录区域和友情链接区域；页面的中间主要是新闻区域和明登录区域和友情链接区域；页面的中间主要是新闻区域和明登录区域和友情链接区域；页面的中间主要是新闻区域和明登录区域和友情链接区域；页面的中间主要是新闻区域和明星写真区域；页面的右侧是公告区域和音乐搜索区域；在页星写真区域；页面的右侧是公告区域和音乐搜索区域；在页星写真区域；页面的右侧是公告区域和音乐搜索区域；在页星写真区域；页面的右侧是公告区域和音乐搜索区域；在页面的最底部是版权信息区域。面的最底部是版权信息区域。面的最底部是版权信息区域。面的最底部是版权

5、信息区域。9.1 9.1 实例创意和效果展示实例创意和效果展示实例创意和效果展示实例创意和效果展示 整个页面采用表格布局和组织内容，做到内容丰富而又有整个页面采用表格布局和组织内容，做到内容丰富而又有整个页面采用表格布局和组织内容，做到内容丰富而又有整个页面采用表格布局和组织内容，做到内容丰富而又有条不紊，如图条不紊，如图条不紊，如图条不紊，如图9-19-19-19-1所示。所示。所示。所示。9.1 9.1 实例创意和效果展示实例创意和效果展示实例创意和效果展示实例创意和效果展示 图9-1 实例效果 本页面的制作过程中用到的主要技术包括：本页面的制作过程中用到的主要技术包括：本页面的制作过程中

6、用到的主要技术包括：本页面的制作过程中用到的主要技术包括：1.1.站点的规划站点的规划 建立一个本地站点设计网页和测试网页的效果。建立一个本地站点设计网页和测试网页的效果。建立一个本地站点设计网页和测试网页的效果。建立一个本地站点设计网页和测试网页的效果。2.2.页面属性的设置页面属性的设置 通过页面属性的设置，定义页面的标题、文字颜色和超通过页面属性的设置，定义页面的标题、文字颜色和超通过页面属性的设置，定义页面的标题、文字颜色和超通过页面属性的设置，定义页面的标题、文字颜色和超级联接的颜色。级联接的颜色。级联接的颜色。级联接的颜色。3.3.CSSCSS样式的使用样式的使用 通过通过通过通过

7、CSSCSSCSSCSS样式的使用，改变文字的显示风格和表格的框样式的使用，改变文字的显示风格和表格的框样式的使用，改变文字的显示风格和表格的框样式的使用，改变文字的显示风格和表格的框线风格，使界面更加美观。线风格，使界面更加美观。线风格，使界面更加美观。线风格，使界面更加美观。4.4.表格的布局表格的布局 通过表格的布局，使页面的内容既丰富而又整齐、清晰。通过表格的布局，使页面的内容既丰富而又整齐、清晰。通过表格的布局，使页面的内容既丰富而又整齐、清晰。通过表格的布局，使页面的内容既丰富而又整齐、清晰。9.2 9.2 实例说明实例说明实例说明实例说明 9.2.1 9.2.1 9.2.1 9.

8、2.1 技术要点技术要点技术要点技术要点 5.JavaScript脚本的应用 通过通过通过通过JavaScriptJavaScriptJavaScriptJavaScript脚本的应用，实现脚本的应用，实现脚本的应用，实现脚本的应用，实现“加入我的收藏夹加入我的收藏夹加入我的收藏夹加入我的收藏夹”、“设置本站为首页设置本站为首页设置本站为首页设置本站为首页”的功能和公告中的滚动字幕特效。的功能和公告中的滚动字幕特效。的功能和公告中的滚动字幕特效。的功能和公告中的滚动字幕特效。6.Flash按钮的制作 将友情链接中的链接做成将友情链接中的链接做成将友情链接中的链接做成将友情链接中的链接做成Fla

9、shFlashFlashFlash按钮的风格，增加页面按钮的风格，增加页面按钮的风格，增加页面按钮的风格，增加页面的图像动态效果。的图像动态效果。的图像动态效果。的图像动态效果。7.表单的制作 通过表单的制作，为用户提供登录通过表单的制作，为用户提供登录通过表单的制作，为用户提供登录通过表单的制作，为用户提供登录“聊天室聊天室聊天室聊天室”、“虚拟虚拟虚拟虚拟社区社区社区社区”的窗口和搜索音乐的捷径。的窗口和搜索音乐的捷径。的窗口和搜索音乐的捷径。的窗口和搜索音乐的捷径。8.图像的使用 在广告条和明星写真的区域插入图像，在导航条的背景在广告条和明星写真的区域插入图像，在导航条的背景在广告条和明

10、星写真的区域插入图像，在导航条的背景在广告条和明星写真的区域插入图像，在导航条的背景上添加背景图像使得整个页面充满动感。上添加背景图像使得整个页面充满动感。上添加背景图像使得整个页面充满动感。上添加背景图像使得整个页面充满动感。9.2 9.2 实例说明实例说明实例说明实例说明 9.2.1 9.2.1 9.2.1 9.2.1 技术要点技术要点技术要点技术要点 在设计本页面时，需要使用的素材包括：在设计本页面时，需要使用的素材包括：在设计本页面时，需要使用的素材包括：在设计本页面时，需要使用的素材包括：网站广告条使用的网站广告条使用的网站广告条使用的网站广告条使用的GifGifGifGif动画。动

11、画。动画。动画。导航条的背景图片。导航条的背景图片。导航条的背景图片。导航条的背景图片。新闻前边的指示箭头。新闻前边的指示箭头。新闻前边的指示箭头。新闻前边的指示箭头。公告栏中字幕前边的公告栏中字幕前边的公告栏中字幕前边的公告栏中字幕前边的GifGifGifGif动画。动画。动画。动画。明星写真中的明星图片。明星写真中的明星图片。明星写真中的明星图片。明星写真中的明星图片。9.2 9.2 实例说明实例说明实例说明实例说明 9.2.2 9.2.2 9.2.2 9.2.2 素材准备素材准备素材准备素材准备 9.3 9.3 设计过程设计过程设计过程设计过程 9.3.1 9.3.1 9.3.1 9.3

12、.1 规划站点规划站点规划站点规划站点 打开打开打开打开DreamweaverDreamweaverDreamweaverDreamweaver MX 2004 MX 2004 MX 2004 MX 2004，执行执行执行执行“站点站点站点站点”“管理站点管理站点管理站点管理站点”命令，新建一个命令，新建一个命令，新建一个命令，新建一个“娱乐无极限娱乐无极限娱乐无极限娱乐无极限”的站点，使用的本地文件夹为的站点，使用的本地文件夹为的站点，使用的本地文件夹为的站点，使用的本地文件夹为“D:funD:funD:funD:fun”，不设置远程信息，不设置远程信息，不设置远程信息，不设置远程信息，如图

13、如图如图如图9-29-29-29-2所示。所示。所示。所示。选择已经建立好的站点，单选择已经建立好的站点，单选择已经建立好的站点，单选择已经建立好的站点，单击鼠标右键，选择击鼠标右键，选择击鼠标右键，选择击鼠标右键，选择“新建文件新建文件新建文件新建文件”命令，定义主页文件名为命令，定义主页文件名为命令，定义主页文件名为命令，定义主页文件名为index.index.index.index.htmhtmhtmhtm；接着在站点上单击接着在站点上单击接着在站点上单击接着在站点上单击鼠标右键，选择鼠标右键，选择鼠标右键，选择鼠标右键，选择“新建文件夹新建文件夹新建文件夹新建文件夹”命令，定义图像文件

14、使用的文件命令，定义图像文件使用的文件命令，定义图像文件使用的文件命令，定义图像文件使用的文件夹为夹为夹为夹为imageimageimageimage，如图如图如图如图9-39-39-39-3所示。所示。所示。所示。图9-2 建立“娱乐无极限”的本地站点 图9-3 定义主页文件和文件夹 1.页面属性的设置 双击双击双击双击index.index.index.index.htmhtmhtmhtm进入进入进入进入页面的编辑状态，在标页面的编辑状态，在标页面的编辑状态，在标页面的编辑状态，在标题栏中输入题栏中输入题栏中输入题栏中输入“娱乐无极娱乐无极娱乐无极娱乐无极限限限限”。执行。执行。执行。执行

15、“修改修改修改修改”“页面属性页面属性页面属性页面属性”命令，命令，命令，命令，打开打开打开打开“页面属性页面属性页面属性页面属性”对话对话对话对话框。框。框。框。选择选择选择选择“外观外观外观外观”分类分类分类分类选项，将文本颜色设为选项，将文本颜色设为选项，将文本颜色设为选项，将文本颜色设为黑色、背景颜色设为白黑色、背景颜色设为白黑色、背景颜色设为白黑色、背景颜色设为白色，左边距、右边距、色，左边距、右边距、色，左边距、右边距、色，左边距、右边距、上边距和下边距的值均上边距和下边距的值均上边距和下边距的值均上边距和下边距的值均设为设为设为设为0 0 0 0，如图，如图，如图，如图9-49-

16、49-49-4所示。所示。所示。所示。9.3 9.3 设计过程设计过程设计过程设计过程 9.3.2 9.3.2 9.3.2 9.3.2 制作网页制作网页制作网页制作网页 图9-4 设置页面外观 选择选择选择选择“链接链接链接链接”分类分类分类分类选项，将链接颜色设为选项，将链接颜色设为选项，将链接颜色设为选项，将链接颜色设为天蓝色天蓝色天蓝色天蓝色“#c0dfffc0dfffc0dfffc0dfff”，已已已已访问链接的颜色设为天访问链接的颜色设为天访问链接的颜色设为天访问链接的颜色设为天蓝色蓝色蓝色蓝色“#c0dfffc0dfffc0dfffc0dfff”，变换变换变换变换图像链接颜色设为图

17、像链接颜色设为图像链接颜色设为图像链接颜色设为“#3366#3366#3366#3366ffffffff”，活动链接活动链接活动链接活动链接设为设为设为设为“#000000#000000#000000#000000”，链接，链接，链接，链接下划线样式设为下划线样式设为下划线样式设为下划线样式设为“仅在仅在仅在仅在变换图像时显示下划线变换图像时显示下划线变换图像时显示下划线变换图像时显示下划线”，如图，如图，如图，如图9-59-59-59-5所示。所示。所示。所示。9.3 9.3 设计过程设计过程设计过程设计过程 9.3.2 9.3.2 9.3.2 9.3.2 制作网页制作网页制作网页制作网页

18、图9-5 设置页面链接 2.2.CSSCSS样式的设计样式的设计样式的设计样式的设计 (1)(1)(1)(1)页面中的文字页面中的文字页面中的文字页面中的文字 目前流行的大多数网页文字的风格是目前流行的大多数网页文字的风格是目前流行的大多数网页文字的风格是目前流行的大多数网页文字的风格是9 9 9 9ptptptpt大小的宋体，本大小的宋体，本大小的宋体，本大小的宋体，本页面采用这种风格，分别重新定义页面采用这种风格，分别重新定义页面采用这种风格，分别重新定义页面采用这种风格，分别重新定义 bodybodybody、和和和和 tdtdtd标签的标签的标签的标签的CSSCSSCSSCSS样式为字

19、体样式为字体样式为字体样式为字体“宋体宋体宋体宋体”、大小、大小、大小、大小“9 9 9 9ptptptpt”，如图如图如图如图9-69-69-69-6所示。所示。所示。所示。9.3 9.3 设计过程设计过程设计过程设计过程 9.3.2 9.3.2 9.3.2 9.3.2 制作网页制作网页制作网页制作网页 图9-6 定义、和标签的CSS样式 2.2.CSSCSS样式的设计样式的设计样式的设计样式的设计 (2)(2)(2)(2)表格边框细线的制作表格边框细线的制作表格边框细线的制作表格边框细线的制作 表格有两种用途，一种是纯粹为了布局使用的表格，其边表格有两种用途，一种是纯粹为了布局使用的表格，

20、其边表格有两种用途，一种是纯粹为了布局使用的表格，其边表格有两种用途，一种是纯粹为了布局使用的表格，其边框粗细为框粗细为框粗细为框粗细为0 0 0 0；另一种是在布局的基础上显示细线风格的表格，；另一种是在布局的基础上显示细线风格的表格，；另一种是在布局的基础上显示细线风格的表格，；另一种是在布局的基础上显示细线风格的表格，可以使用可以使用可以使用可以使用CSSCSSCSSCSS样式中的类定义细线边框，如图样式中的类定义细线边框，如图样式中的类定义细线边框，如图样式中的类定义细线边框，如图9-79-79-79-7所示。所示。所示。所示。9.3 9.3 设计过程设计过程设计过程设计过程 9.3.

21、2 9.3.2 9.3.2 9.3.2 制作网页制作网页制作网页制作网页 图9-7 使用CSS样式中的类定义细线边框 3.3.制作页面顶部的广告条表格制作页面顶部的广告条表格 (1)(1)(1)(1)插入广告条图片插入广告条图片插入广告条图片插入广告条图片 执行执行执行执行“插入插入插入插入”“表格表格表格表格”命令，弹出命令，弹出命令，弹出命令，弹出“表格表格表格表格”对话框，将表对话框，将表对话框，将表对话框，将表格的行数设为格的行数设为格的行数设为格的行数设为1 1 1 1，列数设为，列数设为，列数设为，列数设为3 3 3 3，宽度设为，宽度设为，宽度设为，宽度设为76076076076

22、0像素，边框粗细、单像素，边框粗细、单像素，边框粗细、单像素，边框粗细、单元格边距和单元格间距均设为元格边距和单元格间距均设为元格边距和单元格间距均设为元格边距和单元格间距均设为0 0 0 0，如图，如图，如图，如图9-89-89-89-8所示。所示。所示。所示。选中整个表格，将起背景颜色设为浅蓝色选中整个表格，将起背景颜色设为浅蓝色选中整个表格，将起背景颜色设为浅蓝色选中整个表格，将起背景颜色设为浅蓝色“#3399#3399#3399#3399ffffffff”，如如如如图图图图9-99-99-99-9所示。所示。所示。所示。9.3 9.3 设计过程设计过程设计过程设计过程 9.3.2 9.

23、3.2 9.3.2 9.3.2 制作网页制作网页制作网页制作网页 图9-8 插入顶部表格 图9-9 设置顶部表格的浅蓝色背景 3.3.制作页面顶部的广告条表格制作页面顶部的广告条表格 (1)(1)(1)(1)插入广告条图片插入广告条图片插入广告条图片插入广告条图片 选中中间的单元格，将其宽度定义为选中中间的单元格，将其宽度定义为选中中间的单元格，将其宽度定义为选中中间的单元格，将其宽度定义为468468468468像素，两边的单元像素，两边的单元像素，两边的单元像素，两边的单元格的宽度均定义为格的宽度均定义为格的宽度均定义为格的宽度均定义为146146146146像素，如图像素，如图像素，如图

24、像素，如图9-109-109-109-10所示。所示。所示。所示。将鼠标定位在中间的单元格，执行将鼠标定位在中间的单元格，执行将鼠标定位在中间的单元格，执行将鼠标定位在中间的单元格，执行“插入插入插入插入”“图像图像图像图像”命令，命令，命令，命令，插入广告条图片插入广告条图片插入广告条图片插入广告条图片“title.giftitle.giftitle.giftitle.gif”，效果如图效果如图效果如图效果如图9-119-119-119-11所示。所示。所示。所示。9.3 9.3 设计过程设计过程设计过程设计过程 9.3.2 9.3.2 9.3.2 9.3.2 制作网页制作网页制作网页制作网

25、页 图9-10 设置广告图片的单元格宽度 图9-11 插入广告条图片 (2)(2)制作网站链接文字制作网站链接文字 本页面的顶部表格左侧包括本页面的顶部表格左侧包括“加入我的收藏夹加入我的收藏夹”、“设置本设置本站为首页站为首页”两个链接，这是大多数网站具备的基本功能，使用两个链接，这是大多数网站具备的基本功能，使用JavaScriptJavaScript脚本可以实现这些功能。脚本可以实现这些功能。首先制作首先制作“加入我的收藏夹加入我的收藏夹”链接，切换到代码窗口，编写链接，切换到代码窗口，编写JavaScriptJavaScript脚本修改原来的链接，代码如下：脚本修改原来的链接，代码如下

26、：)加入我的收藏夹加入我的收藏夹/a 9.3 9.3 设计过程设计过程设计过程设计过程 9.3.2 9.3.2 9.3.2 9.3.2 制作网页制作网页制作网页制作网页 图9-12 制作“加入我的收藏夹”的超级链接 图9-13 “添加到收藏夹”对话框 (2)(2)制作网站链接文字制作网站链接文字 接着制作接着制作接着制作接着制作“设置本站为首页设置本站为首页设置本站为首页设置本站为首页”的链接，开始一个新的行，的链接，开始一个新的行，的链接，开始一个新的行，的链接，开始一个新的行，不开始新的段落，输入不开始新的段落，输入不开始新的段落，输入不开始新的段落，输入“设置本站为首页设置本站为首页设置

27、本站为首页设置本站为首页”，将其链接地址设为，将其链接地址设为，将其链接地址设为，将其链接地址设为“#”。切换到代码窗口，编写。切换到代码窗口，编写。切换到代码窗口，编写。切换到代码窗口，编写JavaScriptJavaScriptJavaScriptJavaScript脚本实现这个功能。脚本实现这个功能。脚本实现这个功能。脚本实现这个功能。首先在首先在首先在首先在 headheadhead和和和和/headheadhead之间加入设置当前页面为首页的函之间加入设置当前页面为首页的函之间加入设置当前页面为首页的函之间加入设置当前页面为首页的函数，代码如下：数，代码如下：数，代码如下：数，代码如

28、下：9.3 9.3 设计过程设计过程设计过程设计过程 9.3.2 9.3.2 9.3.2 9.3.2 制作网页制作网页制作网页制作网页 (2)(2)制作网站链接文字制作网站链接文字 接着修改接着修改 body和和/body之间的之间的“设置本站为首页设置本站为首页”链接链接的代码，修改如下：的代码，修改如下：.com)设置本站为首页设置本站为首页/a 然后，按然后，按F12F12键预览页面，单击键预览页面，单击“设置本站为首页设置本站为首页”，如图如图9-149-14所示，出现如图所示，出现如图9-159-15所示的设置主页的对话框。所示的设置主页的对话框。9.3 9.3 设计过程设计过程设计

29、过程设计过程 9.3.2 9.3.2 9.3.2 9.3.2 制作网页制作网页制作网页制作网页 图9-14 单击“设置本站为首页”超级链接 图9-15 设置主页的对话框 4.4.制作导航表格制作导航表格 9.3 9.3 设计过程设计过程设计过程设计过程 9.3.2 9.3.2 9.3.2 9.3.2 制作网页制作网页制作网页制作网页 图9-17 将表格宽度转换为像素平均分配单元格 图9-18 设置导航链接 5.5.制作主体内容的框架制作主体内容的框架 页面的主体部分是本实例制作的核心部分。主体部分，从页面的主体部分是本实例制作的核心部分。主体部分，从页面的主体部分是本实例制作的核心部分。主体部

30、分，从页面的主体部分是本实例制作的核心部分。主体部分，从左到右可以分为两个部分，左边部分是两个登录表单和几个左到右可以分为两个部分，左边部分是两个登录表单和几个左到右可以分为两个部分，左边部分是两个登录表单和几个左到右可以分为两个部分，左边部分是两个登录表单和几个综合网站的链接；右边是娱乐新闻、明星写真、本站公告和综合网站的链接；右边是娱乐新闻、明星写真、本站公告和综合网站的链接；右边是娱乐新闻、明星写真、本站公告和综合网站的链接；右边是娱乐新闻、明星写真、本站公告和音乐搜索等几个栏目。音乐搜索等几个栏目。音乐搜索等几个栏目。音乐搜索等几个栏目。9.3 9.3 设计过程设计过程设计过程设计过程

31、 9.3.2 9.3.2 9.3.2 9.3.2 制作网页制作网页制作网页制作网页 图9-22 设置主体表格背景颜色和单元格的宽度 6.6.制作主体表格左侧的内容制作主体表格左侧的内容 (1)(1)(1)(1)制作制作制作制作“聊天室聊天室聊天室聊天室”登录表单登录表单登录表单登录表单 效果如图效果如图效果如图效果如图9-259-259-259-25所示。所示。所示。所示。(2)(2)(2)(2)制作制作制作制作“虚拟社区虚拟社区虚拟社区虚拟社区”登录表单登录表单登录表单登录表单 效果如图效果如图效果如图效果如图9-269-269-269-26所示。所示。所示。所示。9.3 9.3 设计过程设

32、计过程设计过程设计过程 9.3.2 9.3.2 9.3.2 9.3.2 制作网页制作网页制作网页制作网页 图9-25 制作“聊天室”登录表单 图9-26 制作“虚拟社区”登录表单 6.6.制作主体表格左侧的内容制作主体表格左侧的内容 (3)(3)(3)(3)制作友情链接制作友情链接制作友情链接制作友情链接 效果如图效果如图效果如图效果如图9-289-289-289-28所示。所示。所示。所示。9.3 9.3 设计过程设计过程设计过程设计过程 9.3.2 9.3.2 9.3.2 9.3.2 制作网页制作网页制作网页制作网页 图9-28 制作友情链接使用的Flash按钮 7.7.制作主体部分右侧单

33、元格的内容制作主体部分右侧单元格的内容制作主体部分右侧单元格的内容制作主体部分右侧单元格的内容 (1)(1)(1)(1)制作娱乐新闻栏目制作娱乐新闻栏目制作娱乐新闻栏目制作娱乐新闻栏目 效果如图效果如图效果如图效果如图9-339-339-339-33所示。所示。所示。所示。9.3 9.3 设计过程设计过程设计过程设计过程 9.3.2 9.3.2 9.3.2 9.3.2 制作网页制作网页制作网页制作网页 图9-33 制作娱乐新闻 7.7.制作主体部分右侧单元格的内容制作主体部分右侧单元格的内容制作主体部分右侧单元格的内容制作主体部分右侧单元格的内容 (2)(2)(2)(2)制作本站公告栏目制作本

34、站公告栏目制作本站公告栏目制作本站公告栏目 效果如图效果如图效果如图效果如图9-34 9-34 9-34 9-34、9-359-359-359-35所示。所示。所示。所示。9.3 9.3 设计过程设计过程设计过程设计过程 9.3.2 9.3.2 9.3.2 9.3.2 制作网页制作网页制作网页制作网页 图9-34 制作公告内容 图9-35 滚动字幕效果 7.7.制作主体部分右侧单元格的内容制作主体部分右侧单元格的内容制作主体部分右侧单元格的内容制作主体部分右侧单元格的内容 (3)(3)(3)(3)制作明星写真档案栏目制作明星写真档案栏目制作明星写真档案栏目制作明星写真档案栏目 效果如图效果如图

35、效果如图效果如图9-36 9-36 9-36 9-36 所示。所示。所示。所示。(4)(4)(4)(4)制作音乐搜索表单制作音乐搜索表单制作音乐搜索表单制作音乐搜索表单 效果如图效果如图效果如图效果如图9-399-399-399-39所示所示所示所示。9.3 9.3 设计过程设计过程设计过程设计过程 9.3.2 9.3.2 9.3.2 9.3.2 制作网页制作网页制作网页制作网页 图9-36 制作明星写真档案 图9-39 制作音乐搜索表单 7.7.制作主体部分右侧单元格的内容制作主体部分右侧单元格的内容制作主体部分右侧单元格的内容制作主体部分右侧单元格的内容 (5)(5)(5)(5)制作最新音

36、乐专辑栏目制作最新音乐专辑栏目制作最新音乐专辑栏目制作最新音乐专辑栏目 效果如图效果如图效果如图效果如图9-40 9-40 9-40 9-40 所示。所示。所示。所示。(6)(6)(6)(6)制作网站拓展栏目制作网站拓展栏目制作网站拓展栏目制作网站拓展栏目 效果如图效果如图效果如图效果如图9-409-409-409-40所示所示所示所示。9.3 9.3 设计过程设计过程设计过程设计过程 9.3.2 9.3.2 9.3.2 9.3.2 制作网页制作网页制作网页制作网页 图9-40 制作最新音乐专辑栏目 8.8.制作底部的版权信息区域制作底部的版权信息区域制作底部的版权信息区域制作底部的版权信息区

37、域 将鼠标定位在主体表格的最右端，插入一个将鼠标定位在主体表格的最右端，插入一个将鼠标定位在主体表格的最右端，插入一个将鼠标定位在主体表格的最右端，插入一个1 1 1 1行行行行1 1 1 1列宽度列宽度列宽度列宽度为为为为760760760760像素的表格，边框粗细、单元格边距和单元格间距均设像素的表格，边框粗细、单元格边距和单元格间距均设像素的表格，边框粗细、单元格边距和单元格间距均设像素的表格，边框粗细、单元格边距和单元格间距均设为为为为0 0 0 0，在，在，在，在“属性属性属性属性”面板中将表格高度设置为面板中将表格高度设置为面板中将表格高度设置为面板中将表格高度设置为4040404

38、0像素，输入使用像素，输入使用像素，输入使用像素，输入使用浏览器的建议和版权信息，如图浏览器的建议和版权信息，如图浏览器的建议和版权信息，如图浏览器的建议和版权信息，如图9-419-419-419-41所示。所示。所示。所示。9.3 9.3 设计过程设计过程设计过程设计过程 9.3.2 9.3.2 9.3.2 9.3.2 制作网页制作网页制作网页制作网页 图9-41 制作底部的版权信息区域 1.1.测试网站测试网站 制作好站点中所有的页面后，首先要对整个网站进行测试。制作好站点中所有的页面后，首先要对整个网站进行测试。制作好站点中所有的页面后，首先要对整个网站进行测试。制作好站点中所有的页面后

39、，首先要对整个网站进行测试。测试最基本的方法就是在测试最基本的方法就是在测试最基本的方法就是在测试最基本的方法就是在DreamweaverDreamweaverDreamweaverDreamweaver中打开站点首页，然后按中打开站点首页，然后按中打开站点首页，然后按中打开站点首页，然后按F12F12F12F12键预览页面，在浏览器中测试每一个页面，看内容是否键预览页面，在浏览器中测试每一个页面，看内容是否键预览页面，在浏览器中测试每一个页面，看内容是否键预览页面，在浏览器中测试每一个页面，看内容是否能正确显示，尤其要测试超链接是否能正确工作。能正确显示，尤其要测试超链接是否能正确工作。能正

40、确显示，尤其要测试超链接是否能正确工作。能正确显示，尤其要测试超链接是否能正确工作。为了确保不同的浏览者能够看到一致的页面效果，制作好为了确保不同的浏览者能够看到一致的页面效果，制作好为了确保不同的浏览者能够看到一致的页面效果，制作好为了确保不同的浏览者能够看到一致的页面效果，制作好的网站还应在不同的显示分辨率下进行测试，至少要在的网站还应在不同的显示分辨率下进行测试，至少要在的网站还应在不同的显示分辨率下进行测试，至少要在的网站还应在不同的显示分辨率下进行测试，至少要在800800800800600600600600像素和像素和像素和像素和10241024102410247687687687

41、68像素两种分辨率下进行测试。另外，像素两种分辨率下进行测试。另外，像素两种分辨率下进行测试。另外，像素两种分辨率下进行测试。另外，还需要在不同字体显示大小情况下进行测试（即在还需要在不同字体显示大小情况下进行测试（即在还需要在不同字体显示大小情况下进行测试（即在还需要在不同字体显示大小情况下进行测试（即在“大字体大字体大字体大字体”和和和和“小字体小字体小字体小字体”两种方式下测试），以确保不同字体设置的浏览两种方式下测试），以确保不同字体设置的浏览两种方式下测试），以确保不同字体设置的浏览两种方式下测试），以确保不同字体设置的浏览者能够看到一致的字体效果。者能够看到一致的字体效果。者能够看

42、到一致的字体效果。者能够看到一致的字体效果。测试完成之后，就可以将网站上传发布到远程站点上。测试完成之后，就可以将网站上传发布到远程站点上。测试完成之后，就可以将网站上传发布到远程站点上。测试完成之后，就可以将网站上传发布到远程站点上。9.3 9.3 设计过程设计过程设计过程设计过程 9.3.3 9.3.3 9.3.3 9.3.3 测试和上传网站测试和上传网站测试和上传网站测试和上传网站 2.2.上传网站上传网站 (1)(1)(1)(1)设置远程站点设置远程站点设置远程站点设置远程站点 首先设置站点的服务器访问类型首先设置站点的服务器访问类型首先设置站点的服务器访问类型首先设置站点的服务器访问

43、类型为为为为FTPFTPFTPFTP访问，这样本地站点建立的文访问，这样本地站点建立的文访问，这样本地站点建立的文访问，这样本地站点建立的文件就可以通过件就可以通过件就可以通过件就可以通过FTPFTPFTPFTP协议上传到远程的协议上传到远程的协议上传到远程的协议上传到远程的WebWebWebWeb服务器上。服务器上。服务器上。服务器上。选择选择选择选择“站点站点站点站点”“管理站点管理站点管理站点管理站点”命命命命令，打开令，打开令，打开令，打开“管理站点管理站点管理站点管理站点”对话框。单击对话框。单击对话框。单击对话框。单击对话框中的对话框中的对话框中的对话框中的“编辑编辑编辑编辑”按钮

44、，弹出按钮，弹出按钮，弹出按钮，弹出“站站站站点定义为点定义为点定义为点定义为”的对话框，将的对话框，将的对话框，将的对话框，将“分类分类分类分类”列列列列表框切换到表框切换到表框切换到表框切换到“远程信息远程信息远程信息远程信息”。在右边的。在右边的。在右边的。在右边的参数设置中分别设置参数设置中分别设置参数设置中分别设置参数设置中分别设置FTPFTPFTPFTP主机、登录主机、登录主机、登录主机、登录用户名和登录密码，设置的参数如图用户名和登录密码，设置的参数如图用户名和登录密码，设置的参数如图用户名和登录密码，设置的参数如图9-429-429-429-42所示。所示。所示。所示。9.3

45、9.3 设计过程设计过程设计过程设计过程 9.3.3 9.3.3 9.3.3 9.3.3 测试和上传网站测试和上传网站测试和上传网站测试和上传网站 图9-42 FTP访问的参数设置 (2)(2)(2)(2)测试远程站点测试远程站点测试远程站点测试远程站点 设置好各个参数后，用户可以单击设置好各个参数后，用户可以单击设置好各个参数后，用户可以单击设置好各个参数后，用户可以单击“测试测试测试测试”按钮测试按钮测试按钮测试按钮测试FTPFTPFTPFTP远远远远程站点是否连通。单击程站点是否连通。单击程站点是否连通。单击程站点是否连通。单击“测试测试测试测试”按钮，经过一段时间等待，按钮，经过一段时

46、间等待，按钮，经过一段时间等待，按钮，经过一段时间等待，出现测试成功的对话框，如图出现测试成功的对话框，如图出现测试成功的对话框，如图出现测试成功的对话框，如图9-439-439-439-43所示。所示。所示。所示。9.3 9.3 设计过程设计过程设计过程设计过程 9.3.3 9.3.3 9.3.3 9.3.3 测试和上传网站测试和上传网站测试和上传网站测试和上传网站 图9-43 测试远程站点 (3)(3)(3)(3)连接远程服务器连接远程服务器连接远程服务器连接远程服务器 远程站点测试成功后，接下来建立本地站点和远程站点测试成功后，接下来建立本地站点和远程站点测试成功后，接下来建立本地站点和

47、远程站点测试成功后，接下来建立本地站点和InternetInternetInternetInternet服服服服务器的真正连接，才能真正构建远程站点。过程如下：务器的真正连接，才能真正构建远程站点。过程如下：务器的真正连接，才能真正构建远程站点。过程如下：务器的真正连接，才能真正构建远程站点。过程如下：在站点面板中单击在站点面板中单击在站点面板中单击在站点面板中单击“连接连接连接连接”按钮，如图按钮，如图按钮，如图按钮，如图9-449-449-449-44所示。所示。所示。所示。连接成功后，会在站点窗口的远程站点窗格中显示主连接成功后，会在站点窗口的远程站点窗格中显示主连接成功后，会在站点窗口

48、的远程站点窗格中显示主连接成功后，会在站点窗口的远程站点窗格中显示主机目录，它将作为远程站点根目录。同时原先的机目录，它将作为远程站点根目录。同时原先的机目录，它将作为远程站点根目录。同时原先的机目录，它将作为远程站点根目录。同时原先的“连接连接连接连接”按按按按钮转变为钮转变为钮转变为钮转变为“断开连接断开连接断开连接断开连接”按钮，如图按钮，如图按钮，如图按钮，如图9-459-459-459-45所示。所示。所示。所示。9.3 9.3 设计过程设计过程设计过程设计过程 9.3.3 9.3.3 9.3.3 9.3.3 测试和上传网站测试和上传网站测试和上传网站测试和上传网站 图9-44 单击

49、“连接”按钮 图9-45 远程站点根目录 (4)(4)(4)(4)上传网站上传网站上传网站上传网站 切换到本地站点，单击站点面板中的切换到本地站点，单击站点面板中的切换到本地站点，单击站点面板中的切换到本地站点，单击站点面板中的“上传上传上传上传”按钮，如图按钮，如图按钮，如图按钮，如图9-469-469-469-46所示，接着弹出确认上传网站的对话框，如图所示，接着弹出确认上传网站的对话框，如图所示，接着弹出确认上传网站的对话框，如图所示，接着弹出确认上传网站的对话框，如图9-479-479-479-47所示。所示。所示。所示。单击单击单击单击“确定确定确定确定”按钮，本地站点就可以上传到远程站点。按钮，本地站点就可以上传到远程站点。按钮，本地站点就可以上传到远程站点。按钮，本地站点就可以上传到远程站点。9.3 9.3 设计过程设计过程设计过程设计过程 9.3.3 9.3.3 9.3.3 9.3.3 测试和上传网站测试和上传网站测试和上传网站测试和上传网站 图9-46 单击“上传”按钮 图9-47 确认网站上传的对话框