第10章网站设计与建设综合实例

《第10章网站设计与建设综合实例》由会员分享，可在线阅读，更多相关《第10章网站设计与建设综合实例（29页珍藏版）》请在金锄头文库上搜索。

1、 该实例是一个小型的娱乐资讯网站的首页，页面的色调是蓝色，该实例是一个小型的娱乐资讯网站的首页，页面的色调是蓝色，给人的感觉是凉爽、清新，将蓝色与白色混合，能体现柔顺、淡雅、浪给人的感觉是凉爽、清新，将蓝色与白色混合，能体现柔顺、淡雅、浪漫的气氛，精美的表格线条使整个页面显得华丽而整洁。漫的气氛，精美的表格线条使整个页面显得华丽而整洁。 在页面的顶部是广告条和常用的页面链接。接着下面是导航部分，整在页面的顶部是广告条和常用的页面链接。接着下面是导航部分，整个页面总共有个页面总共有9 9个导航链接，是这个小型站点的个导航链接，是这个小型站点的9 9个版块。本页是网站的个版块。本页是网站的首页，因

2、此首页，因此“ “本站首页本站首页” ”的导航是展开的。在页面的左侧主要包括的导航是展开的。在页面的左侧主要包括“ “聊天室聊天室” ”、“ “虚拟社区虚拟社区” ”的登录区域和友情链接区域；页面的中间主要是新闻区域的登录区域和友情链接区域；页面的中间主要是新闻区域和明星写真区域；页面的右侧是公告区域和音乐搜索区域；在页面的最和明星写真区域；页面的右侧是公告区域和音乐搜索区域；在页面的最底部是版权信息区域。底部是版权信息区域。 10.1 10.1 实例创意和效果展示实例创意和效果展示 第一页，共29页。 整个页面采用表格布局和组织内容，做到内容丰富而又有条整个页面采用表格布局和组织内容，做到内

3、容丰富而又有条不紊，如图不紊，如图9-19-1所示。所示。 10.1 10.1 实例创意和效果展示实例创意和效果展示 图9-1 实例效果 第二页，共29页。 本页面的制作过程中用到的主要技术包括：本页面的制作过程中用到的主要技术包括： 1. 1. 站点的规划站点的规划 建立一个本地站点设计网页和测试网页的效果。建立一个本地站点设计网页和测试网页的效果。 2. 2. 页面属性的设置页面属性的设置 通过页面属性的设置，定义页面的标题、文字颜色和超级通过页面属性的设置，定义页面的标题、文字颜色和超级联接的颜色。联接的颜色。 3. CSS 3. CSS样式的使用样式的使用 通过通过CSSCSS样式的使

4、用，改变文字的显示风格和表格的框线风格，样式的使用，改变文字的显示风格和表格的框线风格，使界面更加美观。使界面更加美观。 4. 4. 表格的布局表格的布局 通过表格的布局，使页面的内容既丰富而又整齐、清晰。通过表格的布局，使页面的内容既丰富而又整齐、清晰。 10.2 10.2 实例说明实例说明 10.2.1 10.2.1 技术要点技术要点 第三页，共29页。 5. JavaScript脚本的应用 通过通过JavaScriptJavaScript脚本的应用，实现脚本的应用，实现“加入我的收藏夹加入我的收藏夹”、“设置本设置本站为首页站为首页”的功能和公告中的滚动字幕特效。的功能和公告中的滚动字幕

5、特效。 6. Flash按钮的制作 将友情链接中的链接做成将友情链接中的链接做成FlashFlash按钮的风格，增加页面的图像按钮的风格，增加页面的图像动态效果。动态效果。 7. 表单的制作 通过表单的制作，为用户提供登录通过表单的制作，为用户提供登录“聊天室聊天室”、“虚拟社区虚拟社区”的窗口和搜索音乐的捷径。的窗口和搜索音乐的捷径。 8. 图像的使用 在广告条和明星写真的区域插入图像，在导航条的背景上在广告条和明星写真的区域插入图像，在导航条的背景上添加背景图像使得整个页面充满动感。添加背景图像使得整个页面充满动感。 10.2 10.2 实例说明实例说明 10.2.1 10.2.1 技术要

6、点技术要点 第四页，共29页。 在设计本页面时，需要使用的素材包括：在设计本页面时，需要使用的素材包括： 网站广告条使用的网站广告条使用的GifGif动画。动画。 导航条的背景图片。导航条的背景图片。 新闻前边的指示箭头。新闻前边的指示箭头。 公告栏中字幕前边的公告栏中字幕前边的GifGif动画。动画。 明星写真中的明星图片。明星写真中的明星图片。10.2 10.2 实例说明实例说明 10.2.2 10.2.2 素材准备素材准备 第五页，共29页。10.3 10.3 设计过程设计过程 10.3.1 10.3.1 规划站点规划站点 打开打开Dreamweaver MX 2004Dreamweav

7、er MX 2004，执行执行“站点站点”“”“管理站点管理站点”命命令，新建一个令，新建一个“娱乐无极限娱乐无极限”的的站点，使用的本地文件夹为站点，使用的本地文件夹为“D:fun”“D:fun”，不设置远程信息，不设置远程信息，如图如图9-29-2所示。所示。 选择已经建立好的站点，单击鼠选择已经建立好的站点，单击鼠标右键，选择标右键，选择“新建文件新建文件”命令，定命令，定义主页文件名为义主页文件名为index.htmindex.htm；接着在站；接着在站点上单击鼠标右键，选择点上单击鼠标右键，选择“新建文件新建文件夹夹”命令，定义图像文件使用的文件命令，定义图像文件使用的文件夹为夹为i

8、mageimage，如图，如图9-39-3所示。所示。 图9-2 建立“娱乐无极限”的本地站点 图9-3 定义主页文件和文件夹 第六页，共29页。 1. 页面属性的设置 双击双击index.htmindex.htm进入进入页面的编辑状态，在标题页面的编辑状态，在标题栏中输入栏中输入“娱乐无极限娱乐无极限”。执行。执行“修改修改”“”“页面页面属性属性”命令，打开命令，打开“页面页面属性属性”对话框。对话框。 选择选择“外观外观”分类选分类选项，将文本颜色设为黑色项，将文本颜色设为黑色、背景颜色设为白色，左、背景颜色设为白色，左边距、右边距、上边距和边距、右边距、上边距和下边距的值均设为下边距的

9、值均设为0 0，如图，如图9-49-4所示。所示。 10.3 10.3 设计过程设计过程 10.3.2 10.3.2 制作网页制作网页 图9-4 设置页面外观 第七页，共29页。 选择选择“链接链接”分类选项分类选项，将链接颜色设为天蓝色，将链接颜色设为天蓝色“#c0dfff”“#c0dfff”，已访问链接的，已访问链接的颜色设为天蓝色颜色设为天蓝色“#c0dfff”“#c0dfff”，变换图像链接颜色设为，变换图像链接颜色设为“#3366ff”“#3366ff”，活动链接设为，活动链接设为“#000000”“#000000”，链接下划线样，链接下划线样式设为式设为“仅在变换图像时显仅在变换图

10、像时显示下划线示下划线”，如图，如图9-59-5所示。所示。 10.3 10.3 设计过程设计过程 10.3.2 10.3.2 制作网页制作网页 图9-5 设置页面链接 第八页，共29页。 2. CSS2. CSS样式的设计样式的设计 (1) (1) 页面中的文字页面中的文字 目前流行的大多数网页文字的风格是目前流行的大多数网页文字的风格是9pt9pt大小的宋体，本页面大小的宋体，本页面采用这种风格，分别重新定义采用这种风格，分别重新定义、和和标签的标签的CSSCSS样式样式为字体为字体“宋体宋体”、大小、大小“9pt”“9pt”，如图，如图9-69-6所示。所示。 10.3 10.3 设计过

11、程设计过程 10.3.2 10.3.2 制作网页制作网页 图9-6 定义、和标签的CSS样式 第九页，共29页。 2. CSS2. CSS样式的设计样式的设计 (2) (2) 表格边框细线的制作表格边框细线的制作 表格有两种用途，一种是纯粹为了布局使用的表格，其边框粗细为表格有两种用途，一种是纯粹为了布局使用的表格，其边框粗细为0 0；另一种是在布局的基础上显示细线风格的表格，可以使用；另一种是在布局的基础上显示细线风格的表格，可以使用CSSCSS样式中的样式中的类定义细线边框，如图类定义细线边框，如图9-79-7所示。所示。 10.3 10.3 设计过程设计过程 10.3.2 10.3.2

12、制作网页制作网页 图9-7 使用CSS样式中的类定义细线边框 第十页，共29页。 3. 3. 制作页面顶部的广告条表格制作页面顶部的广告条表格 (1) (1) 插入广告条图片插入广告条图片 执行执行“插入插入”“”“表格表格”命令，弹出命令，弹出“表格表格”对话框，将表格的行对话框，将表格的行数设为数设为1 1，列数设为，列数设为3 3，宽度设为，宽度设为760760像素，边框粗细、单元格边距和单元像素，边框粗细、单元格边距和单元格间距均设为格间距均设为0 0，如图，如图9-89-8所示。所示。 选中整个表格，将起背景颜色设为浅蓝色选中整个表格，将起背景颜色设为浅蓝色“#3399ff”“#33

13、99ff”，如图，如图9-99-9所所示。示。 10.3 10.3 设计过程设计过程 10.3.2 10.3.2 制作网页制作网页 图9-8 插入顶部表格 图9-9 设置顶部表格的浅蓝色背景 第十一页，共29页。 3. 3. 制作页面顶部的广告条表格制作页面顶部的广告条表格 (1) (1) 插入广告条图片插入广告条图片 选中中间的单元格，将其宽度定义为选中中间的单元格，将其宽度定义为468468像素，两边的单元格的宽像素，两边的单元格的宽度均定义为度均定义为146146像素，如图像素，如图9-109-10所示。所示。 将鼠标定位在中间的单元格，执行将鼠标定位在中间的单元格，执行“插入插入”“”

14、“图像图像”命令，插入命令，插入广告条图片广告条图片“title.gif”“title.gif”，效果如图，效果如图9-119-11所示。所示。 10.3 10.3 设计过程设计过程 10.3.2 10.3.2 制作网页制作网页 图9-10 设置广告图片的单元格宽度 图9-11 插入广告条图片 第十二页，共29页。 (2) 制作网站链接文字 本页面的顶部表格左侧包括“加入我的收藏夹”、“设置本站为首页”两个链接，这是大多数网站具备的基本功能，使用JavaScript脚本可以实现这些功能。 首先制作“加入我的收藏夹”链接，切换到代码窗口，编写JavaScript脚本修改原来的链接，代码如下：加入

15、我的收藏夹 10.3 10.3 设计过程设计过程 10.3.2 10.3.2 制作网页制作网页 图9-12 制作“加入我的收藏夹”的超级链接 图9-13 “添加到收藏夹”对话框 第十三页，共29页。 (2) 制作网站链接文字 接着制作接着制作“设置本站为首页设置本站为首页”的链接，开始一个新的行，不开始新的链接，开始一个新的行，不开始新的段落，输入的段落，输入“设置本站为首页设置本站为首页”，将其链接地址设为，将其链接地址设为“#”“#”。切换到代。切换到代码窗口，编写码窗口，编写JavaScriptJavaScript脚本实现这个功能。脚本实现这个功能。 首先在首先在和和之间加入设置当前页面

16、为首页的函数，代码如之间加入设置当前页面为首页的函数，代码如下：下： 10.3 10.3 设计过程设计过程 10.3.2 10.3.2 制作网页制作网页 第十四页，共29页。 (2) 制作网站链接文字 接着修改和之间的“设置本站为首页”链接的代码，修改如下：设置本站为首页 然后，按F12键预览页面，单击“设置本站为首页”，如图9-14所示，出现如图9-15所示的设置主页的对话框。 10.3 10.3 设计过程设计过程 10.3.2 10.3.2 制作网页制作网页 图9-14 单击“设置本站为首页”超级链接 图9-15 设置主页的对话框 第十五页，共29页。 4. 4. 制作导航表格制作导航表格 10.3 10.3 设计过程设计过程 10.3.2 10.3.2 制作网页制作网页 图9-17 将表格宽度转换为像素平均分配单元格 图9-18 设置导航链接 第十六页，共29页。 5. 5. 制作主体内容的框架制作主体内容的框架 页面的主体部分是本实例制作的核心部分。主体部分，从左到页面的主体部分是本实例制作的核心部分。主体部分，从左到右可以分为两个部分，左边部分是两个登录表单和几个综合网站右可