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

网页设计与制作教程 机械工业出版社同名教材 配套电子教案 2005.8 * * 9.1 实例创意和效果展示 9.2 实例说明 9.3 设计过程 第9章 网页、网站设计与制作综合实例 该实例是一个小型的娱乐资讯网站的首页，页面的色调是蓝色，给人的感觉是凉爽、清新，将蓝色与白色混合，能体现柔顺、淡雅、浪漫的气氛，精美的表格线条使整个页面显得华丽而整洁。 在页面的顶部是广告条和常用的页面链接。接着下面是导航部分，整个页面总共有9个导航链接，是这个小型站点的9个版块。本页是网站的首页，因此“本站首页”的导航是展开的。在页面的左侧主要包括“聊天室”、“虚拟社区”的登录区域和友情链接区域；页面的中间主要是新闻区域和明星写真区域；页面的右侧是公告区域和音乐搜索区域；在页面的最底部是版权信息区域。 9.1 实例创意和效果展示 整个页面采用表格布局和组织内容，做到内容丰富而又有条不紊，如图9-1所示。 9.1 实例创意和效果展示 图9-1 实例效果 本页面的制作过程中用到的主要技术包括： 1. 站点的规划 建立一个本地站点设计网页和测试网页的效果。 2. 页面属性的设置 通过页面属性的设置，定义页面的标题、文字颜色和超级联接的颜色。 3. CSS样式的使用 通过CSS样式的使用，改变文字的显示风格和表格的框线风格，使界面更加美观。 4. 表格的布局 通过表格的布局，使页面的内容既丰富而又整齐、清晰。 9.2 实例说明 9.2.1 技术要点 5. JavaScript脚本的应用 通过JavaScript脚本的应用，实现“加入我的收藏夹”、“设置本站为首页”的功能和公告中的滚动字幕特效。 6. Flash按钮的制作 将友情链接中的链接做成Flash按钮的风格，增加页面的图像动态效果。 7. 表单的制作 通过表单的制作，为用户提供登录“聊天室”、“虚拟社区”的窗口和搜索音乐的捷径。 8. 图像的使用 在广告条和明星写真的区域插入图像，在导航条的背景上添加背景图像使得整个页面充满动感。 9.2 实例说明 9.2.1 技术要点 在设计本页面时，需要使用的素材包括： 网站广告条使用的Gif动画。 导航条的背景图片。 新闻前边的指示箭头。 公告栏中字幕前边的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. 页面属性的设置 双击index.htm进入页面的编辑状态，在标题栏中输入“娱乐无极限”。执行“修改”→“页面属性”命令，打开“页面属性”对话框。 选择“外观”分类选项，将文本颜色设为黑色、背景颜色设为白色，左边距、右边距、上边距和下边距的值均设为0，如图9-4所示。 9.3 设计过程 9.3.2 制作网页 图9-4 设置页面外观 选择“链接”分类选项，将链接颜色设为天蓝色“#c0dfff”，已访问链接的颜色设为天蓝色“#c0dfff”，变换图像链接颜色设为“#3366ff”，活动链接设为“#000000”，链接下划线样式设为“仅在变换图像时显示下划线”，如图9-5所示。 9.3 设计过程 9.3.2 制作网页 图9-5 设置页面链接 2. CSS样式的设计 (1) 页面中的文字 目前流行的大多数网页文字的风格是9pt大小的宋体，本页面采用这种风格，分别重新定义body、tr和td标签的CSS样式为字体“宋体”、大小“9pt”，如图9-6所示。 9.3 设计过程 9.3.2 制作网页 图9-6 定义body、tr和td标签的CSS样式 2. CSS样式的设计 (2) 表格边框细线的