第6章网站开发的过程1ppt课件.ppt

Web标准网页设计与ASP 第六章网站开发和网页设计的过程 6 1网站开发的过程 与传统的软件开发过程类似 为了加快网站建设的速度和减少失误 应该采用一定的制作流程来策划 设计和制作网站 通过使用制作流程确定制作步骤 以确保每一步顺利完成 好的制作流程能帮助设计者解决策划网站的繁琐性 减小网站开发项目失败的风险 同时又能保证网站的科学性 严谨性 网站的开发过程 网站的开发过程大致可分为策划与定义 设计 开发 测试发布5个阶段 6 1 1基本任务和角色 在网站开发的每一个阶段 都需要相关各方人员的共同合作 包括客户 设计师和编程开发人员等不同角色 6 1 2网站开发过程的各环节 1 明确网站定位2 收集信息和素材3 策划栏目内容4 设计页面方案5 制作页面6 实现后台功能6 整合与测试网站7 网站维护和推广 6 2遵循Web标准的网页设计步骤 网页设计是网站开发中耗时最多 也是最为关键的一个环节 下面介绍的是从零开始遵循Web标准的理念设计一个页面的过程 我们可以把一个页面的完整设计过程分为7个步骤 1 内容分析 仔细研究需要在网页中的展现的内容 梳理其中的逻辑关系 分清层次 以及重要程度 2 结构设计 根据内容分析的成果 搭建出合理的HTML结构 保证在没有任何CSS样式的情况下 在浏览器保持高度可读性 3 原型设计 根据网页的结构 绘制出原型线框图 对页面进行合理的分区的布局 原型线框图是设计负责人与客户交流的最佳媒介 4 效果图设计 在确定的原型线框图基础上 使用美工软件 设计出具有良好视觉效果的页面设计方法 5 布局设计 使用HTML和CSS对页面进行布局 6 视觉设计 使用CSS并配合美工设计元素 完成由设计方法到网页的转化 7 交互设计 为网页增添交互效果 如鼠标指针经过和点击时的一些特效等 完整的开发过程案例 6 2 2内容分析 设计一个网页的第一步是明确这个网页的内容 如网页需要传递给浏览者的信息 各种信息的重要性 各种信息的组织架构等 以 武汉大学珞珈学院 首页为例进行说明 对于这个页面 首先要有明确的网站名称和标志 logo 此外 要使浏览者能方便地了解这个网站所有者的信息 包括指向自身的介绍 学校概况 院系概况等内容的链接 然后再思考制作这个网站的目的是什么 这些目的就是该网站的定位 接下来我们可以根据网站的定位确定该网站具有的栏目结构 并把每个第一级栏目的标题作为导航条的导航项 6 2 3HTML结构设计 可以开始构建网站的内容结构 因为我们要实现结构和表现相分离 所以现在完全不要管CSS 而是完全从网页的内容出发 根据上面列出的要点 通过HTML搭建出网页的内容结构 6 2 4原型设计 在设计任何一个网页的版面布局之前 都应该有一个构思的过程 对网页的版面布局 内容排列进行全面的分析 如果有条件 应该制作出线框 Wireframe 图 线框图通俗地说就是设计草图 这个过程专业上称为 原型设计 例如 在上节将首页的内容放置在HTML结构代码之后 就可以先画一个如图6 7所示的网页线框图 草图 以后再按照这个草图绘制具体的网页效果图 6 2 5网页效果图设计 1 导航条的设计2 页脚部分的设计精心设计的页脚是有很大作用的 不要将页脚想象成一条多出来的 尾巴 而应该将它看做是一个支撑点 支撑着上述所有内容的一个区域 页脚区域中放置的内容一般也比较固定 如链接 联系信息及标志等 6 2 6布局设计 在这一步中 任务是把各种元素通过CSS布局放到适当的位置 而暂时不涉及对页面元素美化这样细节的因素1 整体样式设计首先对整个页面的共有属性进行一些设置 例如字体 margin padding等属性都进行初始设置 以保证这些内容在各个浏览器中有相同的表现 2 页头部分 header部分的代码中 将position属性设置为relative 目的是使其包含的子元素使用绝对定位时 以页头而不是浏览器窗口为定位基准 然后设定它的宽度width等于网页的宽 3 内容部分在原型线框图中 内容部分为左右两列 下面首先对HTML代码进行改造 然后设置相应的CSS代码 实现左右分栏的要求4 页脚部分为页脚部分增加一个div 并将其id名称设置为 footer 6 2 7视觉设计 页面总体的布局设计完成后 就要开始对细节进行设计了 整个设计过程是按照从内容到形式 逐步细化的思想来进行的 视觉设计主要是使用Fireworks切图再把切好的图放置到页面元素的背景中实现的 左侧列和右侧列的视觉设计 6 2 8交互效果设计 1 为 常用下载 中项目设置鼠标经过时效果 sidebar downboxlia hover background ffeeeeurl images bullet2 gif no repeat10pxcenter 注意同时改变了背景颜色和作为小图标的背景图像 color CC6633 改变文字颜色 2 图像边框动态改变 当鼠标经过一张展示图片时 图像的边框颜色由土黄色变为蓝色 背景色也由白色变为蓝色 contenta hoverimg padding 5px background 3d81b4 border 1px 3d81b4solid 6 2 9总结CSS布局的优点 使用CSS进行布局的最大优点是非常灵活 可以方便地扩展和调整 例如 当网站随着业务的发展 需要在页面中增加一些内容 那么不需要修改CSS样式 只需要简单地在HTML中增加相应的结构模块就可以了 不但如此 设计得足够合理的页面可以非常灵活地修改样式 例如 只需要将两列布局的浮动方向交换 就可以立即得到一个新的页面 如图所示 可以看到左右两列交换了位置 示例 网页兼容性测试方法 将网页在各种浏览器中预览增大或减小浏览器的宽度进行预览 特别注意在宽屏显示器中的效果 调整浏览器的默认字体大小预览 注意Firefox浏览器调整字体大小后会使表单文本框的大小发生变化 6 3网站的风格设计 网站的风格设计 所谓网站风格 就是指某一网站的整体形象给浏览者的综合感受 是站点与众不同的特色 它能透露出设计者与企业的文化品位 这个整体形象包括网站的CI CorporateIdentity 企业形象 包括标志 色彩 字体 标语 版面布局 浏览方式 交互性 文字 语气 内容价值 存在意义 站点荣誉等诸多因素 风格是有人性的 通过网站的外表 内容 文字 交流可以概括出一个站点的个性 情绪 是温文儒雅 是执著热情 是活泼易变 是放任不羁 象诗词中的 豪放派 和 婉约派 你可以用人的性格来比喻站点 风格的形成需要在开发中不断强化 调整和修饰 也需要不断向优秀网站学习 具体设计时 对于不同性质的行业 应体现出不同的网站风格 一般情况下 政府部门的网站风格应比较庄重沉稳 文化教育部门的网站应该高雅大方 娱乐行业的网站可以活泼生动一些 商务网站可以贴近民俗 而个人网站则可以不拘一格 更多地结合内容和设计者的兴趣 充分彰显个性 6 3 1网站风格设计的基本原则 1 尽可能地将网站标志 logo 放在每个页面最突出的位置2 使用统一的图片处理效果3 突出主色调4 使用标准字体风格设计包含的内容很多 其中影响网站风格最重要的两个因素是网页色彩的搭配和网页版式的布局设计 6 3 2网页色彩的搭配 任何网页创意使用的视觉元素总的归纳起来不外乎三种 文字 图像 色彩 三者选用搭配的适当 编排组合的合理 将对网页的美化起到直接的效果 在这三者中 色彩的作用不可小觑 色彩决定印象 当浏览者观看网页时 首先看到的就是网页的色彩搭配 在这一瞬间 对网页的整体印象就已经确定下来了 色彩形成的印象非常稳固 不知不觉间 就像被牢牢锁定了一样 6 3 3网页版式设计 网页中的文字应采用合理的字体大小和字形 确保在所有的页面中导航条位于相同的位置确保页头和页尾部分在所有的页面中都相同 不要使网页太长 特别是首页 确保浏览器在满屏显示时网页不出现水平滚动条 要在网页中适当留出空白 网页的版式种类 1 T型布局所谓 T 结构 就是指页面顶部为横条网站标志 广告条 下方左面为主菜单 右面显示内容的布局 因为菜单条背景教深 整体效果类似英文字母 T 所以我们称之为 T 形布局 这是网页设计中用的最广返的一种布局方式 这种布局的优点是页面结构清晰 主次分明 是初学者最容易上手的布局方法 缺点是规矩呆板 如果细节色彩上不注意 很容易让人 看之无味 2 口 型布局 这是一个象形的说法 就是页面一般上下各有一个广告条 左面是主菜单 右面放友情链接等 中间是主要内容 这种布局的优点是充分利用版面 信息量大 缺点是页面拥挤 不够灵活 也有将四边空出 只用中间的窗口型设计 3 三 型布局 这种布局多用于国外站点 特点是页面上横向两条色块 将页面整体分割为四部分 色块中大多放广告条 4 二 型布局 采取左右或者上下对称的布局 一半深色 一半浅色 一般用于设计型站点 优点是视觉冲击力强 缺点是将两部分有机的结合比较困难 5 POP 布局 POP 布局就像一张宣传海报 以一张精美图片作为页面的设计中心 在适当位置放置主菜单 常用于时尚类站点 6 4网站的栏目规划和目录结构设计 网站中的内容是根据网站的栏目组织起来的 所以网站栏目相当于网站的逻辑结构 而通常都要将网站每个栏目中的网页分门别类的放在不同的网站子目录中 所以网站的目录结构可看成是网站的物理结构 6 4 1网站的栏目规划 1 建立层次型结构2 设计每一个栏目 6 4 2网站的目录结构设计 1 目录结构设计的原则 1 网站应有一个主目录 2 不要将所有的文件都直接存放在网站根目录下 3 根据栏目规划来设计目录结构 4 每个目录下都建立独立的images子目录 5 目录的层次不要太深 6 不要使用中文文件名或中文目录名 2 站点结构图 6 5网站的导航设计 在访问网站的时候也一样 用户期望在任何一个网页上都能清楚地知道目前所处的位置 并且能快速地从这个网页切换到想要访问的网页 但访问网站的时候 经常会因为单击过多的网页而迷失方向 因此网站的导航设计对于一个网站来说非常的必要和重要 它是衡量一个网站是否优秀的重要标志 6 5 1导航的实现方法 1 导航条2 路径导航3 其他导航方式4 搜索 没有导航的导航 6 5 2导航的设计策略 首先 任何网站都要有一个主导航条其次 如果网站的层次很深 比如四层以上 主页作为第一层 最好要有路径导航 其他方式的导航只是作为辅助的导航手段 视实际需要而定 6 6网站的环境准备 网站环境准备是指为网站的运行准备必要的软 硬件环境 主要包括运行空间的准备 网络接入条件准备 域名及IP地址的申请等 对于中小型网站来说 主要是指主机空间准备和域名申请两项 6 6 1架设网站的基本条件 1 要有主机或主机空间所谓主机在这里是指Web服务器 我们知道用户能浏览网站上的网页实际上是从远程的Web服务器上读取了一些内容 然后显示在本地计算机上的过程 因此如果要使网站能被访问就必须把网站的所有文件放到Web服务器上 使用本机作为Web服务器 将网站上传到专门的Web服务器上 2 要有域名 由于使用 虚拟主机 方式存放的网站是不能通过IP地址访问到的 因为一个IP地址对应有很多个网站 输入IP地址后Web服务器并不知道你要请求的是哪个网站 所以必须要申请一个域名 Web服务器就可以通过域名信息来辨别请求的是哪个网站 而且有了域名后浏览者只要输入域名就可以访问到你的网站了 也便于浏览者记忆 6 6 2购买主机空间和域名 1 购买主机空间在淘宝网 上搜索 虚