多媒体网页设计教程 教学课件 朱国华 ch10.pdfVIP

第10章 综合案例 张睿萍 张睿萍 本章要点 • 网站制作的基本流程 • 站点目录结构的规划 • 网页的创建、布局及设置方法 • 网站设计和制作技巧 多媒体网页设计 目录 10.1 网站制作基本流程 10.2 网站制作详细过程 多媒体网页设计 10.1 网站制作基本流程 ： 网站的开发工作流程包括三个阶段 设计规划阶段、 设计与测试阶段、发布与维护阶段。 本章将通过制作一个摄影题材的“视点” 网站来说明 开发过程。 1．网站规划 网站的规划通常包括网站目标的确定、用户分析、确定网站风格三部分。 2 ．设计与制作 网站的设计阶段主要设计网站的内容结构、设计每个页面的布局、设 。 计主页及页面的导航等 3 ．网站发布与维护 多媒体网页设计 “视点” 网站设计 本例共包括欢迎页面、主页、业界资讯、摄影器材、摄影技术、作品欣 赏6个页面。除欢迎页面外，其他页面都采用 “国字形”布局 。 网站效果图 多媒体网页设计 10.2 网站制作详细过程 10.2.1 创建站点 10.2.2 制作欢迎页面 10.2.3 制作网页模板 10.2.4 利用模板生成其他页面 10.2.5 使用框架制作二级页面 10.2.6 网站的测试 多媒体网页设计 10.2.1 创建站点 1 ．规划站点目录结构 本站点共包括5个主要页面，每个页面都 需要用到较多的图片素材，可以把每个 页面用到的素材放在各自对应的文件夹 中，所有的网页文件直接放在站点根目 录文件夹shidian 中 。创建站点的目录结 构，如右图所示 。 网站目录结构 2 ．新建站点 新建一个名称为“视点” ，站点根目录为 “D:\shidian” 的本地站点。 多媒体网页设计 10.2.2 制作欢迎页面 欢迎页面通常比较简洁，是网站呈现给浏览者的第一个页面，吸引 浏览者进入到网站中进行浏览访问。本欢迎页面效果如下图所示 。 多媒体网页设计 10.2.3 制作网页模板 本站点中主页与各子页的设计结构相同，每个页面的顶部完全一样， 页面的中部和底部内容各不相同。因此可以利用模板将网页中不变的 顶部元素固定下来，把设计好的布局保存为模板，再使用模板来创建 网页。制作好的模板页面如下图所示。 A B C 多媒体网页设计 10.2.4 利用模板生成其他页面 1 ．制作主页 2 ．制作业界资讯页面 3 ．制作摄影器材页面 4 ．制作摄影技术页面 5 ．制作作品欣赏页面 6 ．设置各页面间的链接 多媒体网页设计 10.2.5 使用框架制作二级页面