网页设计(1) 第12讲 网页技术简介 马秀麟 2014年5月 2018/9/17 制作人：马秀麟.

Presentation on theme: "网页设计(1) 第12讲 网页技术简介 马秀麟 2014年5月 2018/9/17 制作人：马秀麟."— Presentation transcript:

1 网页设计(1) 第12讲 网页技术简介 马秀麟 2014年5月 2018/9/17 制作人：马秀麟

2 一、网页文件的相关知识 1、什么是网页文件 网页目标与内涵 超级链接 呈现信息
  1、什么是网页文件 网页目标与内涵 呈现信息 文本、声音、图像、动画的有机地组织起来，以有效的形式把信息呈现 超级链接 由于超级链接的存在，使得一个网站中的多个网页文件很容易形成一种立体的网络结构。 非常有利于浏览者跳跃式浏览。这些与人的思维习惯是一致的。 网页文件采用HTML语言组织，其文件被称为HTM文件。 2018/9/17 制作人：马秀麟

3 一、网页文件的相关知识 2、网页文件的组成： 网页的要素 网页文件被称为HTML文件。 一个网页由多个文件组成。
文本、图片、 图像、声音、动画、超级链接等等。 网页文件被称为HTML文件。 事实上HTML文件是一种纯文本文件，它只包括网页中的文字信息和格式控制信息。 图片、动画、图像等数字信息都独立存储，以链接的形式组织到HTML文件中。 HTML文件只是说明了相关信息在浏览器上的呈现位置、格式等特点。 一个网页由多个文件组成。 注意：在HTML文件中正确地标记文件的位置。 2018/9/17 制作人：马秀麟

4 一、网页文件的相关知识 3、网页类型 静态网页 动态网页——代码运行在服务器(客户端看不到) HTML文档——普通页面
静态网页特效——代码运行在客户端（用户可见） 嵌入客户端语言——JavaScript代码 显示当前日期 屏幕跑动小动画效果、广告效果、动感效果 动态网页——代码运行在服务器(客户端看不到) 后台数据库＋管理程序 两大主流：.NET 与 JSP 其他技术：ASP,PHP等。 2018/9/17 制作人：马秀麟

5 一、网页文件的相关知识 4、网页设计语言： 5、网页设计的常见问题 Hypertext Markup Language
HTML语言 Hypertext Markup Language 设计工具 记事本、专用写作工具FrontPage或Dreamweaver等。 动态网页：记事本、VS2008(.NET)、MyEclipse(JSP)等 5、网页设计的常见问题 链接的文件被遗漏 死链、错误链 ——借助站点做好工作 页面呆板、过渡生硬——做好 2018/9/17 制作人：马秀麟

6 一、网页文件的相关知识 6、网页设计流程 设计单个网页 精心规划（风格、布局） 准备素材 创建站点 精心布局 创建网页 布局技术
新建网页并保存 引用外部样式文件——统一设置网页的风格 精心布局 布局技术 表格布局 层布局（DIV+CSS布局） 框架布局 布局工具 （Dreamweaver布局、Photoshop布局） 输入内容 2018/9/17 制作人：马秀麟

7 一、网页文件的相关知识 测试与发布 浏览器的版本 屏幕分辨率 批量创建网页
先建模板页（母版页） 创建普通页面 保存为模板页 添加“可编辑区域”——可变区域 再利用母版页创建内容页 测试与发布 浏览器的版本 IE6.0, IE7.0, IE8.0, IE9.0, IE10.0 火狐、遨游、360浏览器、QQ浏览器等等 屏幕分辨率 2018/9/17 制作人：马秀麟

8 一、网页文件的相关知识 7.以多种方式设计网页 把Word文档另存为网页 把PPT文档另存为网页 从Web网站中另存网页 专业的网页设计工具
案例 把PPT文档另存为网页 从Web网站中另存网页 专业的网页设计工具 静态网页：Dreamweaver 动态网页：ASP.NET——VS2008 JSP——MyEclipse 2018/9/17 制作人：马秀麟

9 二、DW的界面与网页设计 1.DW的主界面 (1)工具栏 (2)面板： 常见的工具栏 工具栏操作 常见的面板
 常见的工具栏 插入工具栏项目：常用、布局、表单、文本等 文档工具栏： 标准工具栏： 工具栏操作 隐藏/显示工具栏：查看－工具栏 改变插入工具栏显示形式：显示为制表符/显示为菜单 (2)面板：  常见的面板 属性面板 时间轴面板 行为面板 2018/9/17 制作人：马秀麟

10 二、DW的界面与网页设计 面板信息说明 【插入】面板通常显示在窗口顶部，【属性】面板则显示在窗口底部。
 面板信息说明 【插入】面板通常显示在窗口顶部，【属性】面板则显示在窗口底部。 【属性】主要设置各类对象的属性——智能化的面板； 【行为】主要设置对象在遭受某些事件时可以作为的动态反映；例如弹出窗口，播放声音； 还有【CSS样式】【层】【时间轴】等， 其展开与关闭主要通过系统菜单【窗口】实现。 2018/9/17 制作人：马秀麟

11 二、DW的界面与网页设计 (3)两种视图模式 面板操作 设计方式 代码方式 智能化面板
 面板操作 智能化面板 面板的折叠与展开：窗口底部或右侧的小三角/窗口－面板名称 面板的隐藏： <F4>  (3)两种视图模式 设计方式 可视化设计方式，所见即所得 代码方式 通过【查看】中的【代码】可以检查网页源代码，甚至可以在网页源代码下直接修改HTML语言。 2018/9/17 制作人：马秀麟

12 二、DW的界面与网页设计 2、DW设计网页的基本过程 保证本地站点有效 以站点统一管理网页的相关文档 如果没有本地站点，请新建之
把网页放在站点中 2018/9/17 制作人：马秀麟

13 二、DW的界面与网页设计 为网站准备CSS文档 新建网页并立即保存 引用已经准备好的CSS文档 进行页面布局 编辑新网页
可以使用表格布局 可以使用层布局 编辑新网页 插入各种对象 借助表格或者层来定位 保存并预览网页 <F12> 2018/9/17 制作人：马秀麟

14 1.创建站点 三、DW的站点 (1)创建站点的意义 模拟网站工作，对网页文件统一管理； 避免绝对路径出现，对引用对象使用相对路径；
由于网页采用链接方式管理自己的多媒体信息，如果其链接使用了带有盘符的绝对路径，将会造成网页文件上传到服务后无法呈现这些信息，导致死链，错链。 可以利用模板批量创建网页； 2018/9/17 制作人：马秀麟

15 三、DW的站点 (2)创建站点方法 站点－管理站点－新建－...... 可根据提示把本次磁盘上的某一文件夹新建为站点。
 站点－管理站点－新建－...... 可根据提示把本次磁盘上的某一文件夹新建为站点。 请高度重视创建站点的工作。 2018/9/17 制作人：马秀麟

16 四、网页编辑初步 0、务必准备好站点 1、为整个网站准备CSS文档 CSS文档的价值 CSS文档的来源 设置网页的外观、默认字体
各级标题的字体、字形、字号和颜色 超链接的外观 其他特殊对象的统一外观 CSS文档的来源 从其他网站下载 自行创建自己的CSS文档 2018/9/17 制作人：马秀麟

17 四、网页编辑初步 创建网站的CSS文档 新建类型为CSS的文档 首先，在CSS文档中设置全体页面的风格
新建普通网页并保存新网页（放到站点中） 初始化页面属性 方法 修改—页面属性 内容 默认字体、页面背景、各级标题字体 切换到普通网页的”代码”状态 把普通网页中<style>..</Style>之间的样式剪切到CSS文档中 2018/9/17 制作人：马秀麟

18 四、网页编辑初步 新建个性化的样式（在CSS文档中） 打开CSS面板 窗口—CSS样式 右单击—“新建”样式—“类”，输入样式名字
直接在对话框中设置样式的外观 最后，保存类型为CSS文档。 2018/9/17 制作人：马秀麟

19 四、网页编辑初步 2、新建网页 创建网页并保存 引用已有的CSS文档 文件—新建—空白页—HTML—创建
<Ctrl>+S(保存) 引用已有的CSS文档 格式—CSS样式—附加样式表 注意：为了不出现错误链接，务必在执行此命令前保存网页文件 2018/9/17 制作人：马秀麟

20 四、网页编辑初步 3.网页的布局（即对象的定位） 插入表格 插入AP Div对象 表格的属性 单元格的合并与拆分 Div的插入
2018/9/17 制作人：马秀麟

21 四、网页编辑初步 4、向页面中输入内容 输入文字 插入静态图片 插入【媒体信息】 设置文字的样式 插入【鼠标经过图像】 2018/9/17
制作人：马秀麟

22 四、网页编辑初步 插入Flash对象 插入超级链接 普通链接 链接 热点链接 2018/9/17 制作人：马秀麟

23 四、网页编辑初步 5、网页中的其他常见对象 插入书签 插入水平线 插入滚动字幕 书签的用途 水平滚动字幕 垂直滚动字幕
以便链接到网页内部的某处 插入水平线 插入滚动字幕 水平滚动字幕 <marquee> </marquee> 垂直滚动字幕 用途 滚动的通知、广告效果 <marquee direction=up > </marquee> 2018/9/17 制作人：马秀麟