网页设计原理

网页设计原理 1 掌握网站的开发流程掌握网页设计原理掌握网页设计规范欣赏优秀的网页 学习他人之长 激发学习网页设计的兴趣 本章目标 2 第一个阶段 规划和准备阶段 这个阶段要做的工作包括 1 市场调查 市场分析 2 制定网站技术方案 3 规划网站内容 第二阶段 网页设计 制作阶段 这个阶段要做的工作包括 1 网站总体设计 风格 布局 色彩 2 设计界面 制作网站中的各个网页 3 将各个网页通过超级链接进行整合 4 后台设计 第三阶段 网站的发布 推广和维护阶段 这个阶段要做的工作包括 1 测试 调试与完善网站 2 发布与推广网站 3 维护和更新网站 1 1网站开发流程 3 1 2 1网页设计的基本原则 1 用户至上原则 2 易用性原则网页中的导航应放置明显 结构清晰 操作简单 网站的链接结构合理 方便浏览者在不同网页之间跳转快捷 方便 3 实用性原则 1 2网页的设计原理 4 1 网页页面大小标准显示器的屏幕分辨率为1024 768 则不同版本的IE浏览器的屏幕大小为 IE6 0 1003 600pxIE8 0 隐藏菜单栏 1003 626IE8 0 不隐藏菜单栏 1003 598原则 不出现水平滚动栏 1 2 2网页页面与版块 5 LOGO是网站的标志 名片 如同商标一样 在网站设计中logo的设计是不可缺少的一个重要环节 Logo是网站特色和内涵的集中体现 它作用于传递网站的定位和经营理念 同时便于人们识别 会直接影响到客户对网站的判断 特别是网站日后需要进行全球性推广 优秀的商标设计会吸引来更多的访问者 LOGO可以是中文 英文字母 也可以是符号 图案 还可以是动物或者人物 LOGO的设计创意来源是网站的名称和内容 2 网页版块网站LOGO 6 2 网页版块网站LOGO 7 2 网页版块导航条 8 网站导航的表现形式主要有 菜单 站内搜索引擎 当前浏览位置等 1 菜单 菜单是网站最常见的导航方法 一个好的菜单系统关键在于能适应网站的层次需要 并且容易让浏览者理解网站的结构 2 站内搜索引擎 站内搜索引擎提供了一种主动查询方式 浏览者只要把自己需要寻找的内容的关键字输入到搜索引擎中 网站将自动地查找出站内符合条件的页面 这是一种人性化的做法 3 当前浏览位置 所谓 当前浏览位置 就是在网站的每个页面中加入当前位置的文字说明并逐级加入链接 2 网页版块导航条 9 2 网页版块导航条 常用导航栏 10 一般为广告横幅图片 或者使用JavaScript或Flash技术制作的动画 用于吸引用户观看 2 网页版块Banner条 网页广告栏 11 12 网页的主体文本图像动画超链接 2 网页版块内容版块 13 版权信息版块制作单位 制作人 时间等 2 网页版块版尾版块 14 网站设计不是把所有内容放置到网页中就行了 还需要我们把网页内容进行合理的排版布局 以给浏览者赏心悦目的感觉 增强网站的吸引力 在设计布局的时候要注意把文字 图片在网页空间上均匀分布并且不同形状 色彩的网页元素要相互对比 以形成鲜明的视觉效果 常见的布局结构有 同 字形布局 国 字形布局 匡 字形布局 三 字形布局和 川 字形布局 上下框架型 封面型 1 2 3网页版面布局设计 15 16 17 18 19 20 21 版面典型风格 对称型 偏置型 标题型 色彩的运用在网页中的作用真是太重要了 有些网页看上去十分典雅 有品位 令人赏心悦目 但是页面结构却很简单 图像也不复杂 这主要是色彩运用得当 色彩是人的视觉最敏感的元素 网页色彩处理得好 可以锦上添花 网页三原色 red green blue色彩的属性 色相 饱和度 明度色彩模式 RGB CMYKWeb216安全色 1 2 4网页色彩设计原理 23 表1 1色彩与心理反应 24 网页是由文本 图像 动画 超级链接等基本元素构成1 文本建议用于网页正文的文字一般不要太大 也不要使用过多的字体 中文字体一般使用宋体 大小一般使用9磅或12像素即可 2 图像网页中的图像主要有用于点缀标题的小图片 介绍性的照片 代表企业形象或栏目内容的标志性图片 即LOGO 用于宣传的广告 即Banner 等多种形式 3 超级链接超级链接是Web网页的主要特色 是指从一个网页指向另一个目的端的链接 这个 目的端 通常是一个网页 也可以是下列情况之一 相同网页上的不同位置 一个下载的文件 一幅图片 一个E Mail地址等 超级链接可以是文本 按钮或图片 鼠标指向超级链接位置时 会变成小手形状 1 2 5网页页面元素设计 25 4 导航栏导航栏是一组超级链接 用来方便地浏览站点 导航栏一般由多个按钮或者多个文本超级链接组成 5 动画动画是网页中最活跃的元素 创意出众 制作精致的动画是吸引浏览者眼球的有效方法之一 6 表格表格是HTML语言中的一种元素 主要用于网页内容的布局 组织整个网页的外观 通过表格可以精确地控制各网页元素在网页中的位置 1 2 5网页页面元素设计 26 7 框架框架是网页的一种组织形式 将互相关联的多个网页的内容组织在一个浏览器窗口中显示 例如在一个框架内放置导航栏 另一个框架中的内容可以随着导航栏中的链接而改变 8 表单表单是用来收集访问者信息或实现一些交互作用的网页 浏览者填写表单的方式是输入文本 选中单选按钮或复选框 从下拉菜单中选择选项等 网页中除了上述这些最基本的构成元素外 还包括横幅广告 字幕 悬停按钮 日戳 计算器 音频 视频 JavaAppplet等元素 1 2 5网页页面元素设计 27 前台技术XHTML 网页的结构技术 CSS 网页的表现技术 ECMAScript 前身为JavaScript 脚本语言 Ajax 由JavaScript脚本语言扩展而来 E4X 是ECMAScript的扩展 实现更快的访问XML数据 切片 网页图形处理 后台技术ASP技术动态网页技术 基于VBScript或JAVAScriptASP NET技术是ASP的后续技术JSP技术基于JAVA的多平台动态页技术PHP技术多平台的网页后台技术 免费的网页脚本语言 1 3网页设计与开发技术 28 他山之石可以攻玉 欣赏优秀的网页 学习他人之长 激发学习网页设计的兴趣 分析优秀网页的布局结构 颜色搭配 视觉效果 留下直观的第一印象 为学习网页奠定基础 1 4优秀网站赏析 29 网站实例分析 1 网站描述 这是一家航空公司的网站首页 2 布局网页布局采用的是比较常见的分栏式结构3 配色网页选用蓝色系 象征天空 与网站主题一致 网页主要运用了两种蓝色 分别是 14397D 和 1E95BD 如图所示 此外 网页文字的配色主要以白色和蓝色为主 1 4国外优秀网站赏析 图1 6利顿茶商 图1 7中国瓷器 31 1 4国外优秀网站赏析 图1 8中国古董网 图1 9北美工艺品展 32 1 4优秀个人网站 图1 11花蝶谷网图1 12艾艾在线 33 1 4优秀个人网站 图1 13云水茶人坊图1 14苹果树下 34 本节结束 35 DreamweaverCS5工作界面网站的创建网站的管理 主要内容 熟悉DreamweaverCS5的界面布局和工作环境掌握站点的创建和管理方法会创建本地站点和远程站点 本章目标 参数设置一般设置的参数有常规参数 新建文档参数和站点参数 这些都是开始创建站点 设计网页前需要考虑的因素 1 常规参数设置2 新建文档参数设置 参数设置3 站点参数设置 2 1 4DreamweaverCS4的帮助系统 DreamweaverCS4有一套专业的创建和管理站点的工具 实现站点的创建和管理非常方便 要制作一个能够被公众浏览的网站 首先要在本地磁盘上制作这个网站 然后把这个网站上传到WEB服务器上 放在本地磁盘上的网站文件夹称为本地站点 处于Internet中WEB服务器上的网站文件夹称为远程站点 DreamweaverCS4提供了管理本地站点和远程站点的强大的功能 2 2网站的创建 2 2创建本地站点 2 2创建本地站点 图2 18创建站点向导之一 填写网站名称 图2 19创建站点向导之一 确定是否使用服务器技术 2 2创建本地站点 图2 20创建站点向导之三 设置编辑方式 图2 21创建站点向导之四 设置如何连接远程服务器 2 2创建本地站点 图2 22创建站点向导之五 完成设置 显示设置信息 图2 23新创建的站点 建立站点后 DreamweaverCS4可以对站点及站点文件进行管理 管理站点是对已经建立的本地站点或远程站点进行管理 在DreamweaverCS4中 管理站点可以通过 管理站点 对话框进行管理 在 管理站点 对话框中 可以创建新站点 编辑站点 复制站点 删除站点以及导入或导出站点 2 3网站的管理 2 3网站的管理 图2 30 管理站点 对话框 2 3 1使用文件面板管理网站中的资源 图2 32创建文件和文件夹 2 3 2使用资源面板管理网站中的资源 Page 52 文本图片 Gif JPEG PNG 矢量格式超链接 链接的对象是文本 图片 图片的某个区域 脚本程序动画 Gif动画 Flash动画声音和视频 MIDI WAV MP3 RM导航栏 一组超链接 在网页的顶部或一侧表格 控制网页各元素的布局表单 接收用户输入 反馈给服务器网页特效 弹出窗口 文字随鼠标移动等 JaVaScript VBScript网页交互元素 聊天 购物 搜索 ADO结合ASP JSP 网页的基本元素 网页文档的基本操作包括 1 新建网页文档 2 保存与另存网页文档 3 打开网页文档 4 关闭网页文档 4网页文档的基本操作 2 5 1新建与保存网页DreamweaverCS4为创建新文档提供了若干选项 用户可以创建以下任意文档 新的空白文档或模板 基于Dreamweaver附带的预设计页面布局文档 基于现有模板的文档 1 创建新文档2 保存新文档 2 5制作简单网页 2 5 2页面属性设置页面属性的设置包括页面的布局和格式设置 1 设置网页标题 2 5制作简单网页 2 5 2页面属性设置2 设置网页外观 2 5制作简单网页 2 5 2页面属性设置3 设置网页链接 2 5制作简单网页 2 5 2页面属性设置4 设置网页跟踪图像 2 5制作简单网页 2 5 3网页的基本排版在通常情况下 网页上一般都包含文本 日期 特殊符号及水平线等基本元素 1 网页基本元素2 页面的简单排版 1 设置文本的大小 2 设置文本的字体 3 设置文本的颜色 4 设置文本对齐方式 2 5制作简单网页 2 5 4插入图像Web上常用的图像格式包括以下3种 GIF JPEG和PNG Dreamweaver能够使用GIF JPEG或PNG格式打开或预览任何图像 使用Dreamweaver将一个图像插入到网页中有3种方法 在插入面板的 常用 分类中选择 图像 按钮 执行 插入 图像 命令 使用 Ctrl Alt I 组合键 2 5制作简单网页 案例一 创建学校概况页面 案例综述 制作学校概况页面 通过简单的页面制作展示学校的基本情况 案例展示 本例中的素材包括4幅校园图片 实例效果如图3 42所示 2 5制作简单网页 练习 制作爱家美食网站 美食推荐 页面 展示 本实训中的素材包括2幅图片 制作如图所示的爱家美食网站 美食推荐 页面 2 5制作简单网页 2 6网页制作规范 在网页制作过程中 要求为目录和文件命名时都应遵循相应的规范 名称应能代表文件的意义 以便进行查找 修改 下面从网站目录建立规范 文件命名规范 文件头代码规范三个方面 具体介绍网页制作的规范 2 6 1网站目录建立规范 网站目录建立的原则是以最少的层次提供最清晰简便的访问结构 网站目录建立规范如图所示 2 6 2文件命名规范 基本原则 以最少的字母达到最容易理解的意义 所有文件名 文件夹使用小写英文字母 数字 下划线的组合 比如 news html unit1 1 html等 不要使用汉字 空格和特殊字符 有些服务器无法识别这些字符 会导致文件链接出错 尽量使用英文 最好有一定的意义 这样以后便于别人或自己修改 例如 名为 Login html 的文件 一看名称 就知道是登录页面 对于图像文件 在命名时要遵循以下几点 名称分为头部和尾部两部分 用下划线分开 尽量用英文 头部表示图片的大类性质 比如 广告 banner 标志 logo 菜单 menu 按钮 bu