网站设计与开发技术教程 第1章_网页设计与制作概述.ppt

网页设计与制作概述 了解有关网页的一些基本概念了解网站的基本结构特性和网页的布局了解网页制作的基本工具和开发语言 1 1互联网与网站基本概念 网页 是一种网络信息传输的载体 在网站中 供用户阅读的一个个页面 称之为 网页 又称为Web页 万维网 WorldWideWeb 万维网简称WWW或3W 它也是建立在Internet上的一种网络服务 它遵循HTTP协议 通过超文本和超媒体 将Internet上包括文本 声音 图形 图像 影视信号等各种类型的信息聚集在一起 浏览器 要想访问网络中的各种资源 还需要一个工具 那就是浏览器 否则无法访问到网络中丰富的资源 目前常用的浏览器有 IE netscape和腾训TT统一资源定位器 UniversalResourceLocator 简称URL Internet上的每一个网页都具有一个唯一的名称标识 通常称之为URL地址 是用来指出某项信息的位置及存取方式 以取得各种服务信息的一种标准方法 通信协议 也就是上面举例中的 http 部分 它包括HTTP 超文本传输协议 FTP 文件传输协议 Gopher Gopher协议 和News 新闻组 等 主机名 指要访问服务器的Internet名称 IP地址 IP地址是一组32位的数字号码 如 218 30 12 184 这就是上网主机的地址 域名 IP地址是一长串的数字号码 这些数字难记又难以理解 为了方便大家理解 记忆 便有了域名的概念 域名的范围要比主机名要大 一个域名下可以有多个主机名 域名下还可以有子域名 例如 域名www good 下 有主机server1和server2 其主机全名就是server1 good 和server2 good 也就是常说的二级域名 域名前加上传输协议信息及主机类型信息就构成了网址 URL 文件传输协议 FileTransferProtocol 简称FTP 是一种快速 高效和可靠的信息传输方法 超文本标记语言 HyperTextMarkupLanguage 简称HTML 它是WWW创建超媒体文本的语言 它也是网页创建中最基本的语言 制作的任何一个网页都是基于HTML文本标识的 表单 表单是用于填写申请或提交信息的交互页面 如电子邮箱 主页空间 QQ号码等的申请页面 以及论坛 聊天室 留言簿等 超级链接 这是网页制作中经常要用到的概念 指的是页面对象之间的连接关系 导航条 导航条能十分有效地实现超级链接功能 发布 将制作好的网页上传到服务器的过程即是发布 也称为上传或上载 1 2网站制作流程 搜集资料 规划网站选择合适的制作工具制作网页测试发布推广宣传网站维护 1 定位网站的主题和名称主题必须与Web页面主要推销或展示的产品或服务紧密相关 同时它又必须有相当的吸引力 对于主题的选择 应注意 主题要小而精 定位要小 内容要精 题材最好是你自己擅长或者喜爱的内容 题材不要太滥或者目标太高 1 规划设计 2 确定网站的栏目和版块 一般的网站栏目安排要注意以下几方面 要紧扣你的主题将你的主题按一定的方法分类并将它们作为网站的主栏目 主题突出 容易给人留下深刻印象 设一个最近更新或网站指南栏目设定一个可以双向交流的栏目设一个下载或常见问题回答栏目 3 确定网站的目录结构 不要将所有文件都存放在根目录下 按栏目内容建立子目录 在每个主目录下都建立独立的images目录 目录的层次不要太深 目录的层次建议不要超过3层 不要使用中文目录不要使用过长的目录尽量使用意义明确的目录 便于记忆和管理 4 确定网站的链接结构 树状链接结构 一对一 点击 古典音乐 点击 古筝 星状链接结构 一对多 点击 影视 点击 古典音乐 最好的办法是 首页和一级页面之间用星状链接结构 一级和二级页面之间用树状链接结构 点击 古典音乐 音乐页面 在程序员进行详细设计的同时 网页美工开始设计网站的整体形象和首页 整体形象设计包括标准字体 Logo 标准色彩 广告语等 首页设计包括版面 色彩 图像 动态效果 图标等风格设计 也包括菜单 标题 版权等模块设计 也可以将自己感兴趣的素材通过图像切割工具将其收集 模块布局宗旨在于方便访问者浏览 如今的多媒体Web网页具有强大的交互功能 多种媒体方式如文字 图片 动画 声音 超级链接等同时存在 文字是一种简洁有效的媒体 输入方便 处理速度快 在网速较慢的情况下适合用文字进行大面积布局 图片可以给人以较为直观的感受 以及更为感性的认识 其缺点是下载速度慢 在网速慢的情况下不宜大面积运用 5 设计网站的整体风格 网页的色彩网页的色彩是树立网站形象的关键因素之一 在搭配网页色彩时 要注意色彩的鲜明性 独特性 合适性和联想性 各板块采用与网站首页同一色系的颜色 整个板块内部也尽量保持风格一致 可以采用专门的配色软件 网页的文字注意以下基本原则 不要使用超过3种字体类型 否则网页看起来将显得杂乱 没有主题不要用太大的字 因为版面空间非常宝贵和有限 粗陋的大字体不能带给浏览者更多的信息最好不要使用不停闪烁的文字 标题的字体比正文要稍大一些 颜色也应有所区别 设计网站的标志 logo logo是你站点特色和内涵的集中体现 看见logo就让大家联想起你的站点 标志可以是中文 英文字母 可以是符号 图案 可以是动物或者人物等等 下载另存后的文件为 Twins07 swf在自己的页面中选择 插入 媒体 Flash 命令 中国风格 古色古香 韵味典雅 古典的边框 温雅的颜色 具有个性的网页欣赏 天马星空 随性发挥 常见的中国门户网站 庄重大气 有板有眼 方方正正 内敛不张扬 企业类简洁网页 页面清爽 让客户一目了然 大气 颜色多和产品类型有关 欧美风格 科技感 动感的弧形图案 金属质感的图标 以及商业化 科技感的图片 时尚感 前卫 时尚的图片 相关颜色的陪衬 科技色多 色调偏冷 页面结构硬朗 日韩风格 渐变颜色 颜色鲜明 使用高分辨率的图片 日韩风格 颜色搭配调和 多种颜色而不觉花哨 色彩丰富饱和而恰到好处 根据网站内容的整体风格 设计版面布局 设计者可以参考其他优秀的网站 调用自己的各种知识储备 特别是艺术方面的知识 这时设计者用笔在纸上粗略地勾画出布局的轮廓 常见的网页布局结构有 6 网页版面和布局 T型结构同字结构川字结构三字结构单一结构Flash型 T型结构 同字结构 川字结构 三字结构 单一结构 2 网页制作工具 1 网页布局工具DreamweaverFrontpage 2 网页美化工具图像处理软件 Photoshop Fireworks动画制作软件 FLASH