Download presentation
Presentation is loading. Please wait.
1
网页制作 第一讲
2
教学目标 了解网页的基本概念； 掌握网页的组成特点； 具备建立简单的小网页的能力；
能够建立网页站点，在网页的适当位置插入文本、图片和超级链接。 掌握表格在网页制作中的作用；掌握表格的插入和常见操作方法； 掌握热点连接的意义和热点连接的方法； 掌握在页面中插入小动画效果的方法； 掌握三种布局方法。
3
Contents 网页制作之：B/S应用模式 开发环境安装 运行环境安装 HTML与DreamWeaver入门 实验内容
4
网页制作之：B/S应用模式
5
开发环境安装 文本编辑器 集成开发环境 不常用 记事本、EditPlush等 DreamWeaver（CS4） Eclipse
Visual Studio 不常用 Word 很少使用 Frontpage 已经“停产” 相关软件下载地址： 注意： 1、安装前：请把CS4的升级检测服务器设置为本机：即搜索到Hosts文件，在其中增加一行内容： activate.adobe.com 2、安装软件，注册码： 3、如果出现许可证已过期：首先进入c:\program files\Common Files\Adobe\Adobe PCD\cache\(默认系统安装的位置)如果你的系统安装在其它盘 那么请把c改成你的系统所在的盘符 。然后把这个里面的文件删除。 ；启动DW 然后可以看到要求你注册的页面，重新输入注册码
6
运行环境安装——WEB服务器 静态网页——本地浏览 网络浏览——不管是否静态 注意：静态与动态
不需要安装运行环境，直接打开网页就可以用浏览器浏览 网络浏览——不管是否静态 Apache：Html IIS：Html、Asp、Asp.net Tomcat/Resin：Html、Jsp、Servlet 注意：静态与动态 Apache下载地址： *IIS、Tomcat等安装可自学
7
Apache的配置 Apache 配置文件 IIS的配置简单示例
功能强大，十分成熟的互联网web服务软件，可集成IIS、PHP、Tomcat等，从而对asp、php、jsp等语言支持。 配置文件 Conf/http.conf 主目录、默认主页： “DocumentRoot ” IIS的配置简单示例
8
HTML与DreamWeaver入门 网页相关知识 网页设计技术 DW入门 新建简单网页 网页中的表格 网页设计的常见组件
9
一、网页相关知识 1、什么是网页文件 网页目标与构成 超链接是网页的最大特点 网页文件采用HTML语言组织，其文件被称为HTM文件 呈现信息
文本、声音、图像、动画被有机地组织起来，以有效的形式把信息呈现出来 超链接是网页的最大特点 由于超链接的存在，使得一个网站中的多个网页文件很容易形成一种立体的网络结构，非常有利于浏览者跳跃式浏览 超链接构成网状结构，与人的思维习惯是一致的 网页文件采用HTML语言组织，其文件被称为HTM文件
10
一、网页的相关知识 2、网页文件的组成 网页的要素 网页文件被称为HTML文件 一个网页由多个文件组成
文本、图片、 图像、声音、动画、超链接等等 网页文件被称为HTML文件 事实上HTML文件是一种纯文本文件，它只包括网页中的文字信息和格式控制信息 图片、动画、图像等数字信息都独立存储，以链接的形式组织到HTML文件中。 HTML文件只是说明了相关信息在浏览器上的呈现位置、格式等特点 另存一个网页 一个网页由多个文件组成 不可遗漏文件 以相对方式链接各类对象（以当前网页文件的位置为基础），利用链接把对象组织在一个体系中
11
一、网页的相关知识 3、网页类型 静态网页 动态网页——交互性、代码运行在服务器(客户端看不到) HTML文档——无特效的普通静态页面
静态网页特效——代码运行在客户端（“用户可见”） 嵌入客户端的语言——JavaScript代码 显示当前日期 屏幕跑动小动画效果、广告效果、动感效果 动态网页——交互性、代码运行在服务器(客户端看不到) 后台数据库＋管理程序 两大主流：.NET 与 JSP 其他技术：ASP,PHP等
12
一、网页的相关知识 4、网页设计语言 5、网页设计的常见问题 HTML语言 设计工具
Hypertext Markup Language——超文本标记语言 设计工具 记事本、专用写作工具FrontPage或Dreamweaver等 著名的网页设计三剑客：Dreamweaver+Flash+Fireworks 动态网页：记事本、VS2008(.NET)、Eclipse(JSP)等 5、网页设计的常见问题 链接的文件被遗漏 死链、错误链 ——借助站点做好工作 页面呆板、过渡生硬 ——借助图像软件做布局
13
一、网页的相关知识 6、网页设计的关键点（以课程网站为例） (一) 定位网站主题与名称
(二) 定位网站的（Corporate Identity）形象 通过视觉来统一企业的形象 (三) 确定网站的栏目 (四) 确定网站的整体风格 (五) 确定网站布局 (六) 收集网站资源 (七) 规划网站文件及目录
14
一、网页的相关知识 7、网页设计流程 精心规划（风格、布局）——自己知道做什么？ 准备素材 创建站点 创建模板页（母版页） 建立内容页
精心布局 布局技术：表格布局、层布局（DIV+CSS布局）、框架布局 布局工具：Dreamweaver布局、Photoshop布局 组织可编辑区域 建立内容页 测试与发布
15
一、网页的相关知识 8、各种形态的网页文档的示例 JSP网站 静态网页（ http://www.bnu.edu.cn/index.htm ）
普通静态网页 带有特效的静态网页 网页中嵌入的JavaScript文档 ASP网站（沿asp.net技术发展） ASP.NET网站 JSP网站 当然还有很多基于其他技术的网站：php、perl、WML ……
16
二、网页设计技术 1、网页设计的原则 从本质上讲，网页的目的是呈现信息。因此，网页设计的过程就是组织信息、布局信息显示方式的过程。
为使网站具有较好的响应速度、达到较高并发能力，应该以尽可能简要的形式组织网页，降低每个网页文件的大小。 为使网页具有较好的动感效果和亲和力，网页中可嵌入一定的特效。 如果必须使用视频，必须使用流媒体。 尽可能不使用背景音乐。 在网页中，对所有对象的组织都采用基于网页文件的相对路径，绝对不可以带有盘符。 网页文件、图像文件等各类文件命名都不用汉字，禁止在文件名中间带有标点和空格。
17
二、网页设计技术 2、学习网页设计 基本过程 所涉及工种：美工、UI工程师、底层开发人员、系统设计、测试工程师
从设计静态网页入门，以DreamWeaver的界面操作为起点，组织简单的静态网页； 在Dreamweaver设计静态网页的基础上，逐步认知常见的HTML控制符号； 在对HTML的控制符有所了解后，开始学习在网页中嵌入各种特效的技术； 借助专业的工具（例如VS2008)创建前台代码与后台数据库的交互，进入动态网页开发的领域； 界面设计（美工）与后台（代码）的分离。美工人员与动态网页开发的分工与协作。 所涉及工种：美工、UI工程师、底层开发人员、系统设计、测试工程师
18
二、网页设计技术 3、最简单网页的设计的示例 Hello World，用记事本 将Office文档存储为网页 预览网页
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> </BODY> </HTML>
19
三、DW入门 1、DW创建网页的基本流程 (1)创建站点 (2)单个简单网页 路径小知识： 1）相对于根目录：“/path/”
2）上级目录：“../../img..” 3）当前目录 ：“include/..”或“./include/..” 4）绝对路径：“ 1、DW创建网页的基本流程 (1)创建站点 以站点统一管理网页中各类文件； 避免绝对路径。 (2)单个简单网页 新建网页； 网页布局； 向各个区域中插入对象； 含新建样式文件(CSS)或附加样式文件 利用样式设置各个对象的外观； 比如：文字的字体、字号，图像的外观，层对象的位置、背景和外观等等 插入各种超链接； 保存网页文件、测试网页文件。
20
三、DW入门 (3)批量生成网页——综合性网站 新建网页 网页布局——设置框架性的背景、菜单 把布局好的网页转存为模板 基于模板创建新网页
注意：只有位于站点中的网页才可转存为模板 为网页添加可编辑区域 基于模板创建新网页 逐一新建 新网页已具有模板的结构 在新网页中输入个性化内容 *可采用服务器脚本技术
21
三、DW入门 2、DW的站点（规划目录） (1)创建站点的意义 模拟网站工作，对网页文件统一管理；
把与网页有关的文档都存储在站点下，以免遗漏； 避免绝对路径出现，对引用对象使用相对路径； 由于网页采用链接方式管理自己的多媒体信息，如果其链接使用了带有盘符的绝对路径，将会造成网页文件上传到服务后无法呈现这些信息，导致死链，错链。 可以利用模板批量创建网页。
22
三、DW入门 (2)创建站点的方法 首先创建一个名称简单的文件夹（可以后建） 文件夹放在可存取信息的磁盘上
文件夹的名称要简单、规范，不要使用汉字（特别是网站内部） 创建站点 站点－管理站点－新建－...... 可根据提示把本地磁盘上的某一文件夹新建为站点。 注意高级选项中：图像等路径的设置 请高度重视创建站点的工作 图片目录：images CSS目录：css 公共文件：include 配置目录：config
23
三、DW入门 3、DW的操作界面 (1)DW的主界面 插入面板 菜单栏 文件 工具栏 文档 编辑区 状态栏 属性面板 其他面板组
24
三、DW入门 （2）工具栏 常见的工具栏 插入工具栏项目：常用、布局、表单、文本等 文档工具栏 标准工具栏 工具栏操作
常见的工具栏 插入工具栏项目：常用、布局、表单、文本等 文档工具栏 标准工具栏 工具栏操作 隐藏/显示工具栏：查看－工具栏 改变插入工具栏显示形式：隐藏或显示标签
25
三、DW入门 面板 常见的面板 面板信息说明 属性面板 行为面板 插入面板 【插入】面板通常显示在窗口顶部，【属性】面板则显示在窗口底部；
行为面板 插入面板 面板信息说明 【插入】面板通常显示在窗口顶部，【属性】面板则显示在窗口底部； 【属性】主要设置各类对象的属性——智能化的面板； 【行为】主要设置对象在遭受某些事件时可以作出的动态反映；例如弹出窗口，播放声音； 【CSS样式】等， 其展开与关闭主要通过系统菜单【窗口】实现。
26
三、DW入门 三种视图模式 设计方式 代码方式 拆分方式 可视化设计方式，所见即所得
通过【查看】中的【代码】可以检查网页源代码，甚至可以在网页源代码下直接修改HTML语言 拆分方式 设计与代码，两者兼顾
27
四、新建简单网页 1、新建网页 2、向网页中输入文本 选择“文件”－“新建”－“基本页”－HTML，则创建出一个空白的网页文档
单击“文件”－“保存”（Ctrl+S），把文件保存到网站中。 预览网页 文件－在浏览器中预览，主页网页的基本HTML代码 2、向网页中输入文本 直接向页面中输入文本 从其他文档中粘贴文本
28
四、新建简单网页 3、把图像插入到网页中 插入—对象图像—鼠标经过图像 插入静态图片 插入—图像，选择图像文件
Html标签：<img src=“” …. /> 注意： 保证把图像复制到站点内 各个图像文件的名称尽可能简单 插入—对象图像—鼠标经过图像 在鼠标经过或离开时，显示不同的图像
29
四、新建简单网页 4、插入超链接 超链接的类型 通过菜单建立超链接
普通链接:<a href=“” target=“”></a> 链接:<a href=“mailto:”></a> 热区链接: 通过菜单建立超链接 普通链接 插入－超链接—输入目标地址 注意：如果是网站地址，则需输入：“ 链接 插入－电子邮件链接， 自动添加：mailto: 标记
30
四、新建简单网页 利用【属性】面板建立超链接 超链接的“目标” 先选中希望建立超链接的对象（文本、图像） “链接”文本框
“目标”文本框——在何处打开被链接的网页 超链接的“目标” _Blank ——新窗口 _Top ——顶级窗口 _Self ——当前窗口自身 _Parent ——当前窗口的父窗口 其他字符串 ——以字符串命名的子框架
31
四、新建简单网页 5、设置网页属性 (1)修改—页面属性（或在【属性】面板底部点击） (2)设置整个网页的字体、字形、字号
(3)设置网页标题 (4)设置网页的背景 背景图像 背景颜色
32
四、新建简单网页 6、实用案例（一起来制作简历首页） 标题 设置页面属性 录入一段自我介绍 插入一张照片 将自己的名字突出显示
发现问题：排版布局困难？
33
五、网页中的表格 1、使用表格 表格的用途 插入表格 选择表格或单元格 以表格方式呈现信息
利用表格实现网页定位（单元格Border宽度为0） 插入表格 插入－表格 表格的标志 Table代表表格, Td代表一个单元格，Tr代表一行，Thead表示表头 选择表格或单元格 鼠标拖动方式选定 利用【设计】视图底部的特殊标记（Table或Td)
34
五、网页中的表格 单元格的合并与拆分 调整单元格的宽度——充分利用【属性】面板 单元格的背景与背景色
选中几个单元格，右单击，选择快捷菜单“表格”-“合并单元格” 选中单元格，右单击，选择快捷菜单“表格”-“拆分单元格” Colspan，Rowspan属性 调整单元格的宽度——充分利用【属性】面板 百分比方式、象素方式 Width属性 单元格的背景与背景色 Bgcolor,background
35
五、网页中的表格 2、以表格布局页面 两种实现表格布局的方法 表格布局页面的示例：重新规划自我介绍页面 *嵌套表格（表格布局的复杂性）
利用布局面板 插入表格 设置表格的宽度 设置布局单元格的边框为0。 表格布局页面的示例：重新规划自我介绍页面 *嵌套表格（表格布局的复杂性）
36
六、网页设计的常见组件 1、热点链接 建立热点链接的意义 方法 超链接可以以文本串、图像为链接标记 超链接也可以针对图像中的局部区域
医学网站针对各个器官的链接 营销、政治网站针对地图上城镇的链接 方法 插入大幅图像 选中大幅图像 在【属性】面板中，单击某个“地图”标记，在大图上绘制，建立热区；为热区建立超链接：注意多边形热点链接的建立 Img标签增加usemap属性，在随后定义map对象 <map name=“” id=“”> <area shape=“” coords=“” href=“”> </map>
37
六、网页设计的常见组件 2、插入书签（锚点） 书签的定义 插入书签 使用：主页面链接到子页面的书签处
对网页内部的各个特定位置做上标记，以便链接到网页中的特定位置 插入书签 光标放在网页的特定位置，插入－命名锚记，给予名称； <a name=“” id=“”>string</a> 使用：主页面链接到子页面的书签处 子网页名称#书签名 例如：<a href=“xsgl.htm#A”>张平</a>
38
六、网页设计的常见组件 3、*插入Flash对象 插入Flash SWF 插入－媒体－SWF 插入Flash Paper
插入Flash FLV 插入－媒体－FLV 会生成一堆标签： <object ….> <param name= value> …… </object> 以及一些兼容措施
39
六、网页设计的常见组件 4、插入水平线 方法 修改属性 插入—HTML—水平线 修改颜色 修改宽度
在【代码】视图下，找到<Hr>标记，添加Color属性 <Hr color=“#FF0000” /> ——红色分割线 修改宽度
40
六、网页设计的常见组件 5、背景音乐 6、插入层对象 背景音乐（在源文件中插入<bgsound>）
<bgsound src=ma.mp3 loop="-1" > Loop= 表示无限循环、重复播放 6、插入层对象 插入层对象 插入—布局—插入Div标签或绘制AP Div 设置层对象属性（通过CSS） 层对象的位置 层对象的大小 层对象的背景 可能在Chrome浏览器不支持 AP Div：absolutely positioned Div
41
插入HTML标签
42
六、网页设计的常见组件 7、插入滚动字幕（编辑HTML） 水平滚动字幕 垂直滚动字幕
<marquee> </marquee> <marquee direction=right> </marquee> Direction 代表方向 垂直滚动字幕 <marquee direction=up width=数值 height=数值> </marquee>
43
本周实验 新建个人主页 包含第一个简历页面：index.html 需要包含自我介绍、照片 需要包含表格 需要包含直线 合理设置字体大小
需要插入 链接 *需要包括滚动消息
Similar presentations
