第9章 网页、网站设计和制作综合实例.pptVIP

9.1 实例创意和效果展示 9.2 实例说明 9.3 设计过程 ; 该实例是一个小型的娱乐资讯网站的首页，页面的色调是蓝色，给人的感觉是凉爽、清新，将蓝色与白色混合，能体现柔顺、淡雅、浪漫的气氛，精美的表格线条使整个页面显得华丽而整洁。 在页面的顶部是广告条和常用的页面链接。接着下面是导航部分，整个页面总共有9个导航链接，是这个小型站点的9个版块。本页是网站的首页，因此“本站首页”的导航是展开的。在页面的左侧主要包括“聊天室”、“虚拟社区”的登录区域和友情链接区域；页面的中间主要是新闻区域和明星写真区域；页面的右侧是公告区域和音乐搜索区域；在页面的最底部是版权信息区域。 ; 整个页面采用表格布局和组织内容，做到内容丰富而又有条不紊，如图9-1所示。 ; 本页面的制作过程中用到的主要技术包括： 1. 站点的???划 建立一个本地站点设计网页和测试网页的效果。 2. 页面属性的设置 通过页面属性的设置，定义页面的标题、文字颜色和超级联接的颜色。 3. CSS样式的使用 通过CSS样式的使用，改变文字的显示风格和表格的框线风格，使界面更加美观。 4. 表格的布局 通过表格的布局，使页面的内容既丰富而又整齐、清晰。 ; 5. JavaScript脚本的应用 通过JavaScript脚本的应用，实现“加入我的收藏夹”、“设置本站为首页”的功能和公告中的滚动字幕特效。 6. Flash按钮的制作 将友情链接中的链接做成Flash按钮的风格，增加页面的图像动态效果。 7. 表单的制作 通过表单的制作，为用户提供登录“聊天室”、“虚拟社区”的窗口和搜索音乐的捷径。 8. 图像的使用 在广告条和明星写真的区域插入图像，在导航条的背景上添加背景图像使得整个页面充满动感。 ;;;;;;;;;;;;; 5. 制作主体内容的框架 页面的主体部分是本实例制作的核心部分。主体部分，从左到右可以分为两个部分，左边部分是两个登录表单和几个综合网站的链接；右边是娱乐新闻、明星写真、本站公告和音乐搜索等几个栏目。 ; 6. 制作主体表格左侧的内容 (1) 制作“聊天室”登录表单 效果如图9-25所示。 (2) 制作“虚拟社区”登录表单 效果如图9-26所示。 ; 6. 制作主体表格左侧的内容 (3) 制作友情链接 效果如图9-28所示。 ; 7. 制作主体部分右侧单元格的内容 (1) 制作娱乐新闻栏目 效果如图9-33所示。 ; 7. 制作主体部分右侧单元格的内容 (2) 制作本站公告栏目 效果如图9-34 、9-35所示。 ; 7. 制作主体部分右侧单元格的内容 (3) 制作明星写真档案栏目 效果如图9-36 所示。 (4) 制作音乐搜索表单 效果如图9-39所示。 ; 7. 制作主体部分右侧单元格的内容 (5) 制作最新音乐专辑栏目 效果如图9-40 所示。 (6) 制作网站拓展栏目 效果如图9-40所示。 ; 8. 制作底部的版权信息区域 将鼠标定位在主体表格的最右端，插入一个1行1列宽度为760像素的表格，边框粗细、单元格边距和单元格间距均设为0，在“属性”面板中将表格高度设置为40像素，输入使用浏览器的建议和版权信息，如图9-41所示。 ; 1. 测试网站 制作好站点中所有的页面后，首先要对整个网站进行测试。测试最基本的方法就是在Dreamweaver中打开站点首页，然后按〈F12〉键预览页面，在浏览器中测试每一个页面，看内容是否能正确显示，尤其要测试超链接是否能正确工作。 为了确保不同的浏览者能够看到一致的页面效果，制作好的网站还应在不同的显示分辨率下进行测试，至少要在800×600像素和1024×768像素两种分辨率下进行测试。另外，还需要在不同字体显示大小情况下进行测试（即在“大字体”和“小字体”两种方式下测试），以确保不同字体设置的浏览者能够看到一致的字体效果。 测试完成之后，就可以将网站上传发布到远程站点上。 ; 2. 上传网站 (1) 设置远程站点 首先设置站点的服务器访问类型为FTP访问，这样本地站点建立的文件就可以通过