网页设计与制作教程第2版北京市精品教材课件作者赵丰年吕宜宏第15章节网站开发实例.pptVIP

第15章 网站开发实例 本章要点 15.1 网站规划 15.2 网页设计 15.3 建立本地站点 15.4 网页制作 15.1 网站规划 本节主要介绍网站开发中的网站规划部分，内容包括： 网站分析 内容规划 15.1.1 网站分析 请按照书中的分析制作网站分析 （p256） 15.1.2 内容规划 在制作网站之前设计者最好先将文件目录规划好，这样在制作网页时按照这个规划再将网页制作出来，整个网站开发过程就会变的有章可循。 绘制出站点内容规划图，如图所示。 15.1.2 内容规划（续） 15.2 网页设计 网页设计阶段要做的工作包括： 绘制线框图设计页面布局 设计导航系统 设计颜色方案 设计图像、多媒体和行为 设计 CSS 样式 15.2.1 设计页面布局 基于网站内容的考虑，网站页面的布局采用“三列、标题和脚注”形式。布局的实现采用“div 标签 + CSS 样式”布局技术。 在做页面设计时，设计者可以将网页的线框图用绘图软件或笔绘制出来，以便在具体制作网页时作为指导依据。 15.2.1 设计页面布局 （续） 首页布局的线框图如图 15.2 所示。 15.2.2 站点导航 基于文本的超连接是使用最普遍的一种导航方式。本实例网站使用了一些 CSS 样式将它们与整个网页布局很好的融合在一起，从而有效地将网站信息组织到页面中，使用户能够轻松自如的使用网站。 实例站点中的导航系统主要由两部分构成 位于页面左侧栏“sidebar”中的主导航栏 位于页面右侧栏“sidebar2”中的次导航栏 在首页底部提供了 “调查问卷”链接，以便用户对站点提出意见和建议。 15.2.3 颜色方案 由于创作的是提供旅游信息的个人兴趣网站，因此选用象征清新、自然、向上的绿色作为网站主颜色。具体的颜色方案如表 15.1所示 15.2.4 图像、多媒体和行为 网站提供的是以文字为主的国内旅游信息，考虑到快速下载和方便浏览的原则，网页中只使用了一定数量的旅游景区风景图片，而没有使用多媒体对象和行为。 实例网站使用到了本书前些章节中使用过的图像文件和文本文件，这些基本网页素材是构建网站的基石，在网站开发前请注意搜集。 15.2.5 CSS 布局样式 网页布局设计采用div 标签，对应的 CSS 样式如图 15.3 所示。此时只需对页面布局中的 div 布局块和对应的 CSS 样式名称有个整体把握即可，具体CSS 样式定义的详细信息，请参阅 15.4.1 节 mycss.css 样式表中的注释语句。 15.2.5 CSS 布局样式（续） 15.3 建立本地站点 前面我们完成了网站规划阶段和设计阶段，下面进入实施阶段——创建本地站点。主要内容包括： 定义站点 建立文件结构体系 15.3.1 定义站点 本节主要任务是： （1）制作站点根目录 （2）定义本地站点 演示——在pc硬盘上新建站点根目录（p260~p261） 15.3.1 定义站点（续） 演示——在Dreamweaver 中定义本节站点（p261） 15.3.2 建立文件结构 依据15.1节中的网站规划，本小节主要工作任务是： （1）将站点使用的资源存储到对应文件夹 （2）建立网站文件结构 15.3.2 建立文件结构（续） 搜集整理资源 演示——将站点需要的资源复制到对应的文件夹（p262） 15.3.2 建立文件结构（续） 建立网站文件结构 演示——使用“文件”面板建立文件结构目录（p262） 15.3.2 建立文件结构（续） 完成的文件面板如图所示。 15.4 网页制作 本小节的主要工作任务是以网页设计为基础制作出站点中的网页文件。内容包括： 制作首页 制作二级页面 使用模板制作其他页面 15.4.1 制作首页 本小节的主要工作任务是制作首页，具体步骤如下： （1）创建网页 （2）添加内容 （3）定义和链接样式表文件 15.4.1 制作首页（续） 演示——首页的制作过程（p263~p269） 15.4.2 制作二级页面 本节继续按照上小节工作流程，制作二级页面“beijing.html”。 演示——二级页面的制作过程（p270~p272） 15.4.3 使用模板制作网页 由于站点中所有二级页面都有类似的布局结构，因此可以使用模板功能提高网页制作的工作效率。 演示——将现有网页制作成模板（p272~p273） 15.4.3 使用模板制作网页（续） 演示——对现有网页应用模板（p273~p274） 15.4.3 使用模板制作网页（续） 演示——修改模板中的可编辑区域（p274~p275） 15.4.3 使用模板制作网页（续） 演示——使用模板制作其他页面（p275） 尚辅网 / *