《网页制作与设计》立体化电子课件 第1章— 网页与网站.ppt

清华大学出版社 —《网页制件与设计》(ISBN 978–7–302–20945–4) * 网页 与 网站 基本概念 网站建设概述 网页设计概述 静态与动态网页 总结与习题 第 章 基本概念 1 中文：万维网 或环球网 英文：WWW或 World Wide Web 简记为Web 2 中文：网页 英文：Web Page 或WebPage 又称：HTML文档 或XHTML文档 3 中文：网站 英文：Web Site 或WebSite 基本概念 4 中文：主页/首页 英文：homepage 是用户用浏览器访问网站时默认访问的第一个网页 5 中文：超文本 是一种普通的字符文本，通过标签等手段嵌入图形、表格、表单、多媒体等对象 6 中文：超文本链接 简称：超链接 英文：hyperlink 是超文本的灵魂 基本概念 7 中文：超文本传输协议 英文：HTTP 全文：Hypertext Transfer Protocol 8 中文：统一资源定位符 英文：URL或URI 全文：Uniform Resource Locator/Identifier 9 中文：IP地址 标识一个Internet连接的数字符号串，能够唯一标识出主机在Internet中所处的网络位置 静态与动态网页 网页 分类 静态网页(static web pages) 由纯粹的HTML语言实现的网页；网页文档存储在Web服务器的文件系统中，内容通常不随浏览者的不同需求而改变 动态网页(dynamic web pages) 由Web服务器接到用户访问请求后动态生成的页面；内容会随着访问的变化而相应变化 静态与动态网页 静态网页的工作机理 静态与动态网页 动态网页的工作机理 静态与动态网页 根据是否需要数据库技术支持进行区分： 静态网页没有能力使用数据库。而动态网页一般需要后台数据库的支持 根据代码运行的位置进行区分： 静态网页通常运行于前台客户端；动态网页通常有一部分代码运行于后台服务器 根据制作网页的语言进行区分： 静态网页一般使用HTML语言实现；动态网页客户端使用脚本语言，服务器端使用编程语言 静态网页与动态网页的区别与联系 网页设计概述 两个 阶段 网页设计与网页制作，是生成网页的两个重要阶段，这两个阶段形式上独立，内容上紧密关联，分别由不同的专业人员完成 网页设计概述 网页设计就是根据策划方案中要突出的主题与要表达的内容，结合自己的主观认识，通过艺术的手法表现出来 网页设计概述 网页设 计原则 1. 整齐化一 2. 内容连贯 3. 合理分割 4. 色彩协调 5. 反差对比 6. 效果和谐 7. 界面亲和 网页设计概述 网页制作就是将网页设计师设计出来的设计稿，按照统一的规范，使用专业软件或编程语言，制作成Web网页的格式 网页设计概述 网页制作 的元素 1. 文字 2. 超链接 3. 图像 4. 多媒体对象 5. 表格 6. 表单 网页设计概述 常用的网页制作工具 HTML Dreamweaver Fireworks Flash FrontPage 网站建设概述 网站创意 网站主题 色彩搭配 网站风格 吸引受众 立意新颖 设计良好 结构清晰 界面美观 内容到位 风格与网站 内容要统一 风格是网站 多种要素综 合作用的效果 风格需要 不断强化 与巩固 色彩的鲜明性 色彩的独特性 色彩的适宜性 色彩的联想性 先主色后辅色 讲究艺术性 主题明确 主题统一 共同遵循 个性鲜明 围绕主题 形散神聚 网站形象 网站建设概述 主页 普通页 弹出页 网页类型 网站建设概述 主页要素 网站Logo 是网站形象的代表 网站的象征符号 相当于产品的商标 网站导航栏 是网站的导游地图 或网站的目录 主要包括： 横向导航栏 纵向导航栏 网站建设概述 著名网站的Logo标识 网站建设概述 菜单结构的网站导航栏 线性结构 树状结构 网状结构 混合结构 线性结构以主页为起点，后面依次排列着其他网页 这种结构只能实现线性访问 树状结构把各网页按访问的层次关系组织起来，各层网页间存在着超链接关系 网状结构将超链接交织成网 这种结构的网站更加灵活多变，网页之间的跳转更加随意 混合结构将多种结构方式配合起来综合使用 这种结构更符合网站实际构建 网站建设概述 网站建设概述 网站的线性结构 网站建设概述 网站的树状结构 网站建设概述 网站的网状结构 网站建设概述 网站规 划与设 计原则 1. 目的明确且主题鲜明 2. 内容充实且功能实用 3. 网站结构清晰 4. 内容与形式相统一 5. 兼容性与容错性