1、网页设计与制作教程,机械工业出版社同名教材 配套电子教案2005.8,9.1 实例创意和效果展示 9.2 实例说明 9.3 设计过程,第9章 网页、网站设计与制作综合实例,该实例是一个小型的娱乐资讯网站的首页，页面的色调是蓝色，给人的感觉是凉爽、清新，将蓝色与白色混合，能体现柔顺、淡雅、浪漫的气氛，精美的表格线条使整个页面显得华丽而整洁。在页面的顶部是广告条和常用的页面链接。接着下面是导航部分，整个页面总共有9个导航链接，是这个小型站点的9个版块。本页是网站的首页，因此“本站首页”的导航是展开的。在页面的左侧主要包括“聊天室”、“虚拟社区”的登录区域和友情链接区域；页面的中间主要是新闻区域和明
2、星写真区域；页面的右侧是公告区域和音乐搜索区域；在页面的最底部是版权信息区域。,9.1 实例创意和效果展示,整个页面采用表格布局和组织内容，做到内容丰富而又有条不紊，如图9-1所示。,9.1 实例创意和效果展示,图9-1 实例效果,本页面的制作过程中用到的主要技术包括：1. 站点的规划建立一个本地站点设计网页和测试网页的效果。2. 页面属性的设置通过页面属性的设置，定义页面的标题、文字颜色和超级联接的颜色。3. CSS样式的使用通过CSS样式的使用，改变文字的显示风格和表格的框线风格，使界面更加美观。4. 表格的布局通过表格的布局，使页面的内容既丰富而又整齐、清晰。,9.2 实例说明 9.2.
3、1 技术要点,5. JavaScript脚本的应用通过JavaScript脚本的应用，实现“加入我的收藏夹”、“设置本站为首页”的功能和公告中的滚动字幕特效。6. Flash按钮的制作将友情链接中的链接做成Flash按钮的风格，增加页面的图像动态效果。7. 表单的制作通过表单的制作，为用户提供登录“聊天室”、“虚拟社区”的窗口和搜索音乐的捷径。8. 图像的使用在广告条和明星写真的区域插入图像，在导航条的背景上添加背景图像使得整个页面充满动感。,9.2 实例说明 9.2.1 技术要点,在设计本页面时，需要使用的素材包括： 网站广告条使用的Gif动画。 导航条的背景图片。 新闻前边的指示箭头。 公
4、告栏中字幕前边的Gif动画。 明星写真中的明星图片。,9.2 实例说明 9.2.2 素材准备,9.3 设计过程 9.3.1 规划站点,打开Dreamweaver MX 2004，执行“站点”“管理站点”命令，新建一个“娱乐无极限”的站点，使用的本地文件夹为“D:fun”，不设置远程信息，如图9-2所示。选择已经建立好的站点，单击鼠标右键，选择“新建文件”命令，定义主页文件名为index.htm；接着在站点上单击鼠标右键，选择“新建文件夹”命令，定义图像文件使用的文件夹为image，如图9-3所示。,图9-2 建立“娱乐无极限”的本地站点,图9-3 定义主页文件和文件夹,1. 页面属性的设置双击
5、index.htm进入页面的编辑状态，在标题栏中输入“娱乐无极限”。执行“修改”“页面属性”命令，打开“页面属性”对话框。选择“外观”分类选项，将文本颜色设为黑色、背景颜色设为白色，左边距、右边距、上边距和下边距的值均设为0，如图9-4所示。,9.3 设计过程 9.3.2 制作网页,图9-4 设置页面外观,选择“链接”分类选项，将链接颜色设为天蓝色“#c0dfff”，已访问链接的颜色设为天蓝色“#c0dfff”，变换图像链接颜色设为“#3366ff”，活动链接设为“#000000”，链接下划线样式设为“仅在变换图像时显示下划线”，如图9-5所示。,9.3 设计过程 9.3.2 制作网页,图9-
6、5 设置页面链接,2. CSS样式的设计 (1) 页面中的文字目前流行的大多数网页文字的风格是9pt大小的宋体，本页面采用这种风格，分别重新定义、和标签的CSS样式为字体“宋体”、大小“9pt”，如图9-6所示。,9.3 设计过程 9.3.2 制作网页,图9-6 定义、和标签的CSS样式,2. CSS样式的设计 (2) 表格边框细线的制作表格有两种用途，一种是纯粹为了布局使用的表格，其边框粗细为0；另一种是在布局的基础上显示细线风格的表格，可以使用CSS样式中的类定义细线边框，如图9-7所示。,9.3 设计过程 9.3.2 制作网页,图9-7 使用CSS样式中的类定义细线边框,3. 制作页面顶
7、部的广告条表格 (1) 插入广告条图片执行“插入”“表格”命令，弹出“表格”对话框，将表格的行数设为1，列数设为3，宽度设为760像素，边框粗细、单元格边距和单元格间距均设为0，如图9-8所示。选中整个表格，将起背景颜色设为浅蓝色“#3399ff”，如图9-9所示。,9.3 设计过程 9.3.2 制作网页,图9-8 插入顶部表格,图9-9 设置顶部表格的浅蓝色背景,3. 制作页面顶部的广告条表格 (1) 插入广告条图片选中中间的单元格，将其宽度定义为468像素，两边的单元格的宽度均定义为146像素，如图9-10所示。将鼠标定位在中间的单元格，执行“插入”“图像”命令，插入广告条图片“title
8、.gif”，效果如图9-11所示。,9.3 设计过程 9.3.2 制作网页,图9-10 设置广告图片的单元格宽度,图9-11 插入广告条图片,(2) 制作网站链接文字本页面的顶部表格左侧包括“加入我的收藏夹”、“设置本站为首页”两个链接，这是大多数网站具备的基本功能，使用JavaScript脚本可以实现这些功能。 首先制作“加入我的收藏夹”链接，切换到代码窗口，编写JavaScript脚本修改原来的链接，代码如下： 加入我的收藏夹,9.3 设计过程 9.3.2 制作网页,图9-12 制作“加入我的收藏夹”的超级链接,图9-13 “添加到收藏夹”对话框,(2) 制作网站链接文字接着制作“设置本站
9、为首页”的链接，开始一个新的行，不开始新的段落，输入“设置本站为首页”，将其链接地址设为“#”。切换到代码窗口，编写JavaScript脚本实现这个功能。 首先在和之间加入设置当前页面为首页的函数，代码如下：,9.3 设计过程 9.3.2 制作网页,(2) 制作网站链接文字接着修改和之间的“设置本站为首页”链接的代码，修改如下： 设置本站为首页然后，按F12键预览页面，单击“设置本站为首页”，如图9-14所示，出现如图9-15所示的设置主页的对话框。,9.3 设计过程 9.3.2 制作网页,图9-14 单击“设置本站为首页”超级链接,图9-15 设置主页的对话框,4. 制作导航表格,9.3 设
10、计过程 9.3.2 制作网页,图9-17 将表格宽度转换为像素平均分配单元格,图9-18 设置导航链接,5. 制作主体内容的框架页面的主体部分是本实例制作的核心部分。主体部分，从左到右可以分为两个部分，左边部分是两个登录表单和几个综合网站的链接；右边是娱乐新闻、明星写真、本站公告和音乐搜索等几个栏目。,9.3 设计过程 9.3.2 制作网页,图9-22 设置主体表格背景颜色和单元格的宽度,6. 制作主体表格左侧的内容(1) 制作“聊天室”登录表单效果如图9-25所示。(2) 制作“虚拟社区”登录表单 效果如图9-26所示。,9.3 设计过程 9.3.2 制作网页,图9-25 制作“聊天室”登录
11、表单,图9-26 制作“虚拟社区”登录表单,6. 制作主体表格左侧的内容(3) 制作友情链接 效果如图9-28所示。,9.3 设计过程 9.3.2 制作网页,图9-28 制作友情链接使用的Flash按钮,7. 制作主体部分右侧单元格的内容 (1) 制作娱乐新闻栏目效果如图9-33所示。,9.3 设计过程 9.3.2 制作网页,图9-33 制作娱乐新闻,7. 制作主体部分右侧单元格的内容 (2) 制作本站公告栏目 效果如图9-34 、9-35所示。,9.3 设计过程 9.3.2 制作网页,图9-34 制作公告内容,图9-35 滚动字幕效果,7. 制作主体部分右侧单元格的内容 (3) 制作明星写真
12、档案栏目 效果如图9-36 所示。(4) 制作音乐搜索表单 效果如图9-39所示。,9.3 设计过程 9.3.2 制作网页,图9-36 制作明星写真档案,图9-39 制作音乐搜索表单,7. 制作主体部分右侧单元格的内容 (5) 制作最新音乐专辑栏目 效果如图9-40 所示。(6) 制作网站拓展栏目 效果如图9-40所示。,9.3 设计过程 9.3.2 制作网页,图9-40 制作最新音乐专辑栏目,8. 制作底部的版权信息区域 将鼠标定位在主体表格的最右端，插入一个1行1列宽度为760像素的表格，边框粗细、单元格边距和单元格间距均设为0，在“属性”面板中将表格高度设置为40像素，输入使用浏览器的建
13、议和版权信息，如图9-41所示。,9.3 设计过程 9.3.2 制作网页,图9-41 制作底部的版权信息区域,1. 测试网站制作好站点中所有的页面后，首先要对整个网站进行测试。测试最基本的方法就是在Dreamweaver中打开站点首页，然后按F12键预览页面，在浏览器中测试每一个页面，看内容是否能正确显示，尤其要测试超链接是否能正确工作。为了确保不同的浏览者能够看到一致的页面效果，制作好的网站还应在不同的显示分辨率下进行测试，至少要在800600像素和1024768像素两种分辨率下进行测试。另外，还需要在不同字体显示大小情况下进行测试（即在“大字体”和“小字体”两种方式下测试），以确保不同字体
14、设置的浏览者能够看到一致的字体效果。测试完成之后，就可以将网站上传发布到远程站点上。,9.3 设计过程 9.3.3 测试和上传网站,2. 上传网站(1) 设置远程站点首先设置站点的服务器访问类型为FTP访问，这样本地站点建立的文件就可以通过FTP协议上传到远程的Web服务器上。 选择“站点”“管理站点”命令，打开“管理站点”对话框。单击对话框中的“编辑”按钮，弹出“站点定义为”的对话框，将“分类”列表框切换到“远程信息”。在右边的参数设置中分别设置FTP主机、登录用户名和登录密码，设置的参数如图9-42所示。,9.3 设计过程 9.3.3 测试和上传网站,图9-42 FTP访问的参数设置,(2
15、) 测试远程站点设置好各个参数后，用户可以单击“测试”按钮测试FTP远程站点是否连通。单击“测试”按钮，经过一段时间等待，出现测试成功的对话框，如图9-43所示。,9.3 设计过程 9.3.3 测试和上传网站,图9-43 测试远程站点,(3) 连接远程服务器远程站点测试成功后，接下来建立本地站点和Internet服务器的真正连接，才能真正构建远程站点。过程如下： 在站点面板中单击“连接”按钮，如图9-44所示。 连接成功后，会在站点窗口的远程站点窗格中显示主机目录，它将作为远程站点根目录。同时原先的“连接”按钮转变为“断开连接”按钮，如图9-45所示。,9.3 设计过程 9.3.3 测试和上传网站,图9-44 单击“连接”按钮,图9-45 远程站点根目录,(4) 上传网站切换到本地站点，单击站点面板中的“上传”按钮，如图9-46所示，接着弹出确认上传网站的对话框，如图9-47所示。单击“确定”按钮，本地站点就可以上传到远程站点。,9.3 设计过程 9.3.3 测试和上传网站,图9-46 单击“上传”按钮 图9-47 确认网站上传的对话框,
