网页设计与制作2011-1.ppt

网页设计与制作 基础知识网页设计HTML语言脚本语言网页发布Dreamweaver 作业 基础知识 概述网站浏览原理网站设计原则 网页设计与制作 全球信息网 WWW WorldWideWeb 即Web 基于Internet的信息服务系统 向用户提供一个以超文本技术为基础的多媒体的全图形浏览界面 所有WWW的页面都是用HTML编写的文件 基础知识 概述 超文本标记语言 HTML HyperTextMarkupLanguage其格式为ASCII码 即纯文本文件 是WWW用于建立与识别超文本文档的标准语言 即网页文件 网页 Webpage 在浏览器上看到的画面叫网页主页 Homepage 进入网站后所看到的第一个页面 index htm 也称为首页网站 Site 是一组相关网页的集合 基础知识 概述 各个网页的设计与制作 网页 Homepage主页 HTTP协议 Data 浏览器 基础知识 网站浏览原理 用HTML编写 用开发工具编写如Dreamweaver 基础知识 网站设计原则 主题定位 制作网站首先要考虑网站的主题 好的网站不仅应该有美感 个性 创意 更要有质量 网站的内容是最重要的基本因素 空洞的网站对人没有任何吸引力 基础知识 网站设计原则 题材选择 主题要小而精 最好是自己擅长或者喜爱的内容 题材不要太滥或者目标太高 网站名称要正气 易记 要有特色 体现自己的个性 网站的题材主要有 新闻 体育 聊天 即时信息 ICQ 社区 邮件列表 科学技术 娱乐 旅行 参考 资讯 求职 家庭 教育 生活 时尚以及一些体现个人特色和爱好等的网站 网站的名称很重要 在很大程度上决定了整个网站的定位 网站的名称要有概括性 简短 有特色 容易记 还要符合自己网站的主题和风格 例 闪客帝国 清风文苑 红果园等 所谓CI CorporateIdentity 是借用的广告术语 意思是通过视觉来统一企业的形象 主要包括Logo设计 网站的色彩搭配 网站的标准字体 网站的整体风格和创意等 基础知识 网站设计原则 定位网站CI形象 定位你的网站CI形象 Logo 标准颜色 蓝 绿色 黄 橙色 黑 灰 白等其他颜色注意 背景颜色和前文的对比一定要大 为了突出主要文字 背景绝对不能选择花纹繁杂的图案 色彩要控制在三种颜色以内 网站的色彩搭配 基础知识 网站的标准字体 网页默认的字体 中文为 宋体 9磅字英文为 TimesNewRoman 网站的整体风格和创意 网站风格 建立在有价值的内容的基础之上必须保证内容的质量和价值明确自己网站想留给人什么样的印象创意思考的过程 准备期 孵化期 启示期 验证期 形成期 基础知识 具有一定的美工功底会更易于上手 有创意 网页设计与制作 网页的类型网页制作方法网页版面布局网页制作三剑客 网页设计与制作 基于客户端 静态网页 htm 动态页面 DHTML JavaScript 网页的类型 基于服务器端 动态页面 ASP PHP JSP等 工具软件实现 Deamweaver是网页编辑软件Fireworks是图形 图像处理软件Flash是矢量动画编辑软件 编程基础 网页设计 动态网页一般以数据库技术为基础 可将相关信息通过动态网页录入到数据库 又可通过动态网页将数据库内容显示出来 其文件后缀一般与产生的服务器技术相匹配 如ASP技术的网页后缀是 asp JSP技术是 jsp 等 采用动态网页 可以实现交互功能 如用户的注册和登录 在线留言 论坛 网上调查 网上教学平台和投票选举等 何谓动态网页 示例 直接编写HTML源代码利用工具软件 利用任何文本编辑软件保存为纯文本文件即可 htm或html 通过编辑窗口编辑网页 不需要html源代码 如 FrontPage DreamweaverJavaScript Java ASP CGI PHP JSPFireworks Flash 网页制作方法 网页设计 网页设计 网站的分类树型结构 网站 一级页面 三级页面 二级页面 级页面 一个个页面设计与制作 主页设计 首页 页面属性页面设计 表格 框架 填写内容添加链接和交互版权信息等 页面设计 其他页面设计 和首页保持相同的风格要有返回首页的链接目录结构不要超过四层 认识网页三剑客 DreamweaverFireworksFlash 是Macromedia公司网页设计 三剑客 之 火焰 它以处理网页图片为特长 并可以轻松创作GIF动画 是由美国著名的软件开发商Macromedia公司推出的一个 所见即所得 的可视化网站开发工具 是Macromedia公司网页三剑客之中的 闪电 其以制作网上动画为特长 它做出的动画声音动画效果都是其他软件无法比拟的 Adobe Macromedia 网页设计 HTML语言 定义HTML文档的基本结构HTML的基本单位URL路径 HTML HyperTextMarkupLanguage 网页设计与制作 HTML语言 HTML 超文本标记语言专门用来编写网页文件常用的文本编辑软件 EditPlus UltraEdit 新浪网下载 记事本等 文件类型为 htm或 html HTML的定义 表格示例职工档案基本信息赵华男33岁干部党员毕业学校清华大学 水平线宽度为1 示例1 浏览结果 文件头文件标题文件体 HTML文件是以各种功能的元素所组成用于描述这些功能元素的符号称为标记标记基本上是成对出现 英文或英文缩写 特点 HTML文档的基本结构 文件头文件标题文件体 HTML语言 对象对象 标记的一般格式 语法 HTML语言的指令 元素 窗口中显示的内容 功能 描述文件格式 格式由浏览器解释和执行 用标记书写 超文本标记语言 HTML HTML语言 定义文本属性标记语法格式 计算机 示例 定义段落属性标记语法格式 标记名 注意 不同的元素标记所对应的属性不同 属性值 标记属性 HTML语言 HTML的基本单位 长度单位 定义水平线 表格边框 图像等的长 宽 高及对象在页面上的位置等属性 分类 绝对长度 相对长度示例 在页面上建立水平线标记绝对长度相对长度 水平线的宽度为400像素 水平线占据窗口的50 的宽度 水平线标记名 HTML语言 颜色单位 定义字体 页面 表格背景及超连接的颜色格式1 16进制颜色代码 RRGGBB格式2 10进制RGB码RGB RRR GGG BBB 格式3 直接颜色名称示例 COLOR red 颜色单位 定义字体 页面 表格背景及超连接的颜色格式1 16进制颜色代码 RRGGBB RR代表红色 00 FF GG代表绿色 00 FF BB代表兰色 00 FF RRR代表红色 0 255 GGG代表绿色 0 255 BBB代表兰色 0 255 HTML的基本单位 HTML语言 超链接示例背景图案为 a1 jpg 普通文字色彩为蓝色设置超链接文字为 00ff00 启动超链接文字为粉红色 ff00ff 已链接文字为红色 red 示例2 方法1 示例 见ex 1 htm计算机 示例1 插入多媒体标记 infinitetrue false 1 滚动字幕 示例2 插入滚动标记 align 字幕的对齐方式 left center right top middle buttom behavior 设定浏览器处理字幕的方法height 设定字幕的高度width 设定字幕的宽度direction 设定字幕滚动的方向 left right bgcolor 设定字幕的背景颜色hspace 设定字幕左右的空白空间vspace 设定字幕上下的空白空间scrollamount 设定每个连续滚动字幕后面的间隔scrolldelay 设定两次滚动之间的间隔时间loop 设定字幕的滚动次数ONMOUSEOUT this start 鼠标移出该区域时继续滚动 ONMOUSEOVER this stop 鼠标移入该区域时停止滚动 scroll表示文本单项滚动slide表示文本到达边界停止alternate表示滚动文本到达边界后反向滚动 为 infinite 或 1 时 字幕会无限制地滚动 示例 见ex 3 htm北京交通大学计算机学院 URL路径 含义 一种互联网地址的表示法在数据中可以包含以何种协议链接 要链接到哪一个地址 链接地址的端口号以及服务器里文件的完整路径和文件名等信息 URL路径分类 绝对路径和相对路径作用 对链接的地址和文件进行定位 HTML语言 URL路径 绝对路径 包含服务器上磁盘驱动器名称和完整的路径语法格式 示例 相对路径 相对于当前的HTML文档所在目录的路径语法格式 相对关系 部分路径 文件名示例 images logo gif相对文档的相对路径 html link index htm相对根目录的相对路径 HTML语言 脚本语言 脚本语言客户端脚本服务器端脚本脚本标记 网页设计与制作 通过脚本语言实现动态网页 一种嵌入在网页中的解释型语言 脚本语言 客户端脚本 服务器端脚本 控制网页元素的外观和行为 创作动态的 交互式的网页 在客户端计算机上被浏览器执行 调用服务器端部件及操作服务器端数据库 实现向客户端用户发送动态信息的功能在服务器端被Web服务器执行 脚本语言 JavaScriptJscriptVBSVBScript 脚本语言 JavaScript即 Java语法和函数 脚本语言 VBScript即 VisualBasic语法和函数 脚本标记格式 脚本语言 是一种基于对象和事件驱动 并具有安全性能的 基于客户端浏览器的脚本语言 是Java与HTML折衷的选择 认识JavaScript 脚本语言 JavaScript的特点 脚本语言 简单性 JavaScript采用小程序段的方式实现编程 而且是一种解释性语言 不需要编译就能解释执行 动态性 JavaScript可以直接对用户的输入作出响应 无需经过Web服务器 它对用户的响应 是以事件驱动的方式进行的 跨平台性 JavaScript依赖于浏览器本身 与服务器和客户端的操作环境无关 但不同的浏览器对它的执行在个别方面存在差别 在使用时需要注意 JavaScript代码格式 放于标识或标识之中 JavaScript的引入 注意 JavaScript代码有大 小写之分 在写Jav