网页设计与网站建设1.pptVIP

网页设计与网站建设 张丽姿 642798 sxjt_z@163.com 课程介绍 课程名称——网页设计与网站建设 课程目标—— 能独立完成静态网站的规划与制作 能独立完成网页动画的设计与制作 （引导页、片头、广告、产品展示） 教学内容——网页三剑客 dreamweaver （重点） flash（辅助） fireworks （简单介绍） 第一部分 基础知识 1.1 相关概念 教学目标 能描述或举例说明什么是网页和网站 能简述网页浏览的原理 能区分静态网站与动态网站 能说出Dreamweaver 的功能 会根据工作需要设置dreamweaver的工作环境 1.1 相关概念 什么是网页和网站 网页浏览的原理 静态网站与动态网站的不同 Dreamweaver 的功能 设置dreamweaver的工作环境 1、什么是网页和网站 网页—— 是一种可以在万维网上传输，并被浏览器识别和正确显示出来的文件。 网站—— 是建立在网络服务器上的一组计算机文件。 2、网页浏览的原理—— 3、静态网站与动态网站 静态网站 动态网站 静态网站 静态网页以.htm、.html、为后缀； 每个静态网页都是一个独立的文件，内容固定； 静态网页没有数据库的支持，内容的更新工作较困难； 动态网站 动态网页以.asp、.jsp等为后缀； 动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页； 以数据库技术为基础，可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等等； 4、Dreamweaver 的功能 ——可视化的网页制作和网站软件 可以制作静态和动态网页 可以嵌入JavaScript 代码，实现丰富的效果 强大的模板功能 可以实现站点的管理 可以实现站点的上传、维护和更新 5、设置dreamweaver的工作环境 工具栏的设置 常用工具栏 插入工具栏 属性面板 折叠/隐藏 位置 浮动面板 视图方式 分组讨论1 你认为制作一个合格的网站最需要具备的能力是什么？ 实例：制作一个网页 终极目标 制作一个网页 分解目标 能列举出网页的基本元素有哪些 能将不同来源的文本用最快最简单的放入dreamweaver 中 会根据需要设置文本的结构（标题、段落、列表） 1.2 HTML是什么？ HTML的含义 Hyper Text Markup Language 超文本(Hypertext)——是用超链接的方法组织在一起的网状文本。 标记语言（ Markup Language ）——用“Mark-up（标记）”定义网页的内容和结构 HTML的特点 与平台无关——windows，unix，linux，mac 简单——描述性语言 HTML的结构 包括头部（Head）、主体（Body）两大部分 每部分又包括若干控制网页内容和结构的标签 常用html标记 html html文件标记 head 头 body 主体 title 网页标题 p 段落 ul 符号列表 ol 编号列表 li 列表项 h1~h6 6级标题 table 表格 img 图像 a 超链接 1.3 图像的插入 案例1：制作一个图文并茂的页面 终极目标 掌握网页制作的一般流程 制作一个图文并茂的网页 分解目标 会插入图像 网页中使用的图像格式：jpg、gif、png 会用表格控制图像和文本的排列 表格边框、对齐 间距 填充 使用技巧 可以在HTML中使用的图像格式：gif、jpg、png 图像的使用原则： 不变形、不失真、体积尽可能的小 优化图像 单独优化 批处理 将大图切片再使用 1.4 创建站点 首先创建站点的重要性 创建站点 编辑站点 删除站点 1.5 CSS 什么是CSS 保存位置 CSS选择器的类型 一、CSS 在HTML中的引用（保存位置） 嵌入式： 保存在当前HTML文档的head部分，并且放在style标记中 只能当前文档中使用该样式 链接式： 保存为.css文件 可以被任何html文件引用 导入式（？） 行内式（？） 二、CSS选择器的类型 基本选择器 类：名称自定义；手动套用；可用于任何html标记 标签：重新定义html标记的默认属性（名称为已有html标记名；自动套用） ID（？） 复合选择器伪类 后代选择器（嵌套声明） 集体声明（？） 1.6 超级链接 超链接的分类 按照链接目标的位置 内部链接 外部链接 按照链接目标的类型 Html文件即网页（内部、外部） 图像 Email 空链接 下载链接（无法直接在IE中直接打开的文件） 超链接的插入方法 属性面板（输入、指向、浏览） 代码视图 超链接的样式 四种状态 link visited hover acti