第一章网页设计基础 1.1 概述
1. Internet www w3 2. 网页与网站 Web
相关网页集会----网站 3. 浏览器 IE 4.Web 页组成
5. 网页设计与开发过程 1 由任务定位网站 2 收集素材和资料 3 规划 4 设计制作
1.2认识DW
第二章 创造站点
2.1网站
1. 网站(Web Site)
是一个存放在网络服务器上的完整信息的集合体。它包含一个或多个网页,这些网页以一定的方式连接在一起,成为一个整体。 2.URL
Http://www.sohu.com http 超文本传输协议 3. 主页 Index.html
2.2 定义本地站点
“站点“是一个文件夹,是网站中使用的所有相关联的文件和资源的集合。储存了网站中所有用到的文件。
在开始构建网站前,需要建立站点。
站点可组织相关的所有文档。跟踪和维护链接、管理文件、共享文件、以及将站点文件传输到WEB 服务器上。
放置在本地磁盘上的网站 1. 规划站点结构
在创建任何Web 站点页面前,要对站点的结构进行设计和规划。决定要创建多少页,每页上显示什么内容,页面布局外观以及各页如何相互连接。 2. 创建站点
第三章创建Web 页
编辑网页
将文件导入网页 使用复制
格式:文字:字体 使用pt 12 16 18 字形 字号 颜色
HTML 网页属性 CSS 选中的文字
段落 分段
换行 shift+回车 对齐
表 有序
无序
图像
第三章 链接
链接指从一个网页跳转到某一目标。目标可以是网站内的网页另一网站还可以是网页内的部分。
分类:1. 内部链接 2. 外部链接 3. 锚点链接
锚记链接 #锚名
热点链接
图片链接
第五章 表格 表格作用: 1. 存储数据 2. 页面布局
表格应用场合: 1. 论坛
2. 门户网站 网站首页 3. 购物网站
表格的基本结构: 行、列、单元格
插入表格:“插入” “表格”
导入数据:从记事本中导入
表格的嵌套 拆分、合并
框架
什么是框架?
网页上的不同文档区 每个框架就是一个网页
框架与框架集
框架集定义一组框架的布局和属性,包括框架的数目、大小、位置以及在框架中初始显示页面的地址。框架集文件本身不包含要在浏览器中显示的网页内容,框架集文件只是向浏览器提供如何显示一组框架以及在这些框架中应显示哪些网页的有关信息。
框架和框架集的创建 窗口/插入
在“插入”栏插入预定义的框架集 创建预定义框架集 手动设计框架
导航条
插入/spry/spry菜单栏
网页表单
为收集客户端的信息,发送到服务器端,以便处理客户端输入的信息。DW 中提供了文本框、文本区、单选按钮、复选框、下拉列表框、提交按钮和重置按钮等等输入信息的对象称为表单。这些表单对象具有一下各自不同的功能: 单行文本框
用来输入比较简单的信息
多行文本框
用来输入建议、需求等大段文字,使用带有滚动条的多行文本框。
单选按钮
用于表示唯一的选择结果,如 同学录注册 表单中的 性别 按钮
复选框
用来表示许多项可以同时选中的事物,比如个人爱好、所学学科和选购的产
品类等。 下拉列表框
当需要选择职业、文化程度等事项时,除了文本区以外,还可以考虑使用下拉
列表框
提交按钮和重置按钮
利用DW 处理表单 表单插入面板
方法下拉列表框用来选择将表单数据传输到服务器方式 默认:使用浏览器的默认设置将表单数据发送到服务器
GET :将表单数据附加在请求页面的URL 地址后面。少量数据字符不能超过8192字符
POST :将在HTTP 请求中嵌入表单数据,POST 方法用来传送大量数据
“目标”下拉列表框用来设定提交表单后,请求页面将以何种方式显示返回结果。 各选项含义:
_blank:在未命名的新窗口中显示返回结果。
_parent:在显示当前页面的窗口中显示返回结果。 _self:在显示当前页面的窗口中显示返回结果。 _top:在顶层窗口中显示返回结果。
“文本域”、“字符宽度”和“初始值”的设置与单行文本域类似。在 行数 文本框中输入文本域最多可显示的行数
网页布局
应用表格布局页面: 类型: “国”字型 拐角型 正文型 左右框架型 Flash 型
页面的构成:
网页尺寸:根据屏幕分辨率的大小设计网页宽度
一般屏幕分辨率为800*600,那么设计网页尺寸为780*428,如果屏幕分辨率为1024*768,那么设计页面尺寸为980*600 页头(页眉):通常放置logo (网站标志)和banner (广告条) 页脚:放置版权信息、联系电话、网站介绍、备案信息等等。 导航栏
单元格插入背景图片: 选中单元格
在拆分窗口选中代码中找到td 光标定位在此处,输入
空格 出现的关键字中选background 将其插入代码中 单击浏览找到图片 保存
使用CSS
CSS 称层叠样式表或级联风格页
使用CSS 定义的网页风格可控制诸如字体、边框、颜色与背景等属性,也可以通过定义外部风格文件实现整个网站页面风格的统一。
使用CSS 的作用: 将格式和结构分离 更容易控制页面的布局
可以制作出体积更小下载更快的网页 可以更快更容易的维护及更新大量的网页 良好的浏览器兼容性
新建CSS 样式: 使用菜单“格式”“ CSS 样式”“新建”
类型:
字体 font-family 大小 font-size 粗细 font-weight 样式 font-style 变量 行高 line-height 大小写转换
边框样式
点划线 dotted 虚线 dashed 实线 solid 双线
插入媒体:
1. 图像对象 鼠标经过对象 2. 插入动画
如何将图片排起来显示 表格 框架
两图片叠在一起 图片显示:表格
框架
使用Div 标签和AP Div
概述:Div 元素在页面中定义一个区域,为HTML 文档内大块的内容提供结构和背景。DIV 的其起始标签和结束标签间的所有内容构成一个块,可包含文本、图像、表格及其他各种页面内容。
Div 元素用CSS 样式控制表现效果或显示某个位置。 Div 元素:“Div 标签”和“AP Div” 插入Div 标签:
插入、常用、Div 标签 AP Div元素
AP Div是一种网页的元素,又称为“层”,即网页内容的容器
AP Div在网页中不仅可与表格相互配合进行网页的布局,还可以与行为相结合实现一些特殊的效果。
AP Div可以理解为浮动在网页上的一个页面,可被准确的定位在网页的任何位置,且可以规定它的大小。 特点: 1. 容器 2. 定位 3. 隐藏
层的层次关系
Z 轴的值决定各层叠放的次序,z 轴的值越大越在上面。 几个同样大小的层的制作:
设置一个快关将某层打开或关闭 “窗口”|“行为”,打开行为面板
选中“开”层,在行为面板中单击“添加行为”按钮,选“显示-隐藏元素” 选元素 确定显示 确定
第一章网页设计基础 1.1 概述
1. Internet www w3 2. 网页与网站 Web
相关网页集会----网站 3. 浏览器 IE 4.Web 页组成
5. 网页设计与开发过程 1 由任务定位网站 2 收集素材和资料 3 规划 4 设计制作
1.2认识DW
第二章 创造站点
2.1网站
1. 网站(Web Site)
是一个存放在网络服务器上的完整信息的集合体。它包含一个或多个网页,这些网页以一定的方式连接在一起,成为一个整体。 2.URL
Http://www.sohu.com http 超文本传输协议 3. 主页 Index.html
2.2 定义本地站点
“站点“是一个文件夹,是网站中使用的所有相关联的文件和资源的集合。储存了网站中所有用到的文件。
在开始构建网站前,需要建立站点。
站点可组织相关的所有文档。跟踪和维护链接、管理文件、共享文件、以及将站点文件传输到WEB 服务器上。
放置在本地磁盘上的网站 1. 规划站点结构
在创建任何Web 站点页面前,要对站点的结构进行设计和规划。决定要创建多少页,每页上显示什么内容,页面布局外观以及各页如何相互连接。 2. 创建站点
第三章创建Web 页
编辑网页
将文件导入网页 使用复制
格式:文字:字体 使用pt 12 16 18 字形 字号 颜色
HTML 网页属性 CSS 选中的文字
段落 分段
换行 shift+回车 对齐
表 有序
无序
图像
第三章 链接
链接指从一个网页跳转到某一目标。目标可以是网站内的网页另一网站还可以是网页内的部分。
分类:1. 内部链接 2. 外部链接 3. 锚点链接
锚记链接 #锚名
热点链接
图片链接
第五章 表格 表格作用: 1. 存储数据 2. 页面布局
表格应用场合: 1. 论坛
2. 门户网站 网站首页 3. 购物网站
表格的基本结构: 行、列、单元格
插入表格:“插入” “表格”
导入数据:从记事本中导入
表格的嵌套 拆分、合并
框架
什么是框架?
网页上的不同文档区 每个框架就是一个网页
框架与框架集
框架集定义一组框架的布局和属性,包括框架的数目、大小、位置以及在框架中初始显示页面的地址。框架集文件本身不包含要在浏览器中显示的网页内容,框架集文件只是向浏览器提供如何显示一组框架以及在这些框架中应显示哪些网页的有关信息。
框架和框架集的创建 窗口/插入
在“插入”栏插入预定义的框架集 创建预定义框架集 手动设计框架
导航条
插入/spry/spry菜单栏
网页表单
为收集客户端的信息,发送到服务器端,以便处理客户端输入的信息。DW 中提供了文本框、文本区、单选按钮、复选框、下拉列表框、提交按钮和重置按钮等等输入信息的对象称为表单。这些表单对象具有一下各自不同的功能: 单行文本框
用来输入比较简单的信息
多行文本框
用来输入建议、需求等大段文字,使用带有滚动条的多行文本框。
单选按钮
用于表示唯一的选择结果,如 同学录注册 表单中的 性别 按钮
复选框
用来表示许多项可以同时选中的事物,比如个人爱好、所学学科和选购的产
品类等。 下拉列表框
当需要选择职业、文化程度等事项时,除了文本区以外,还可以考虑使用下拉
列表框
提交按钮和重置按钮
利用DW 处理表单 表单插入面板
方法下拉列表框用来选择将表单数据传输到服务器方式 默认:使用浏览器的默认设置将表单数据发送到服务器
GET :将表单数据附加在请求页面的URL 地址后面。少量数据字符不能超过8192字符
POST :将在HTTP 请求中嵌入表单数据,POST 方法用来传送大量数据
“目标”下拉列表框用来设定提交表单后,请求页面将以何种方式显示返回结果。 各选项含义:
_blank:在未命名的新窗口中显示返回结果。
_parent:在显示当前页面的窗口中显示返回结果。 _self:在显示当前页面的窗口中显示返回结果。 _top:在顶层窗口中显示返回结果。
“文本域”、“字符宽度”和“初始值”的设置与单行文本域类似。在 行数 文本框中输入文本域最多可显示的行数
网页布局
应用表格布局页面: 类型: “国”字型 拐角型 正文型 左右框架型 Flash 型
页面的构成:
网页尺寸:根据屏幕分辨率的大小设计网页宽度
一般屏幕分辨率为800*600,那么设计网页尺寸为780*428,如果屏幕分辨率为1024*768,那么设计页面尺寸为980*600 页头(页眉):通常放置logo (网站标志)和banner (广告条) 页脚:放置版权信息、联系电话、网站介绍、备案信息等等。 导航栏
单元格插入背景图片: 选中单元格
在拆分窗口选中代码中找到td 光标定位在此处,输入
空格 出现的关键字中选background 将其插入代码中 单击浏览找到图片 保存
使用CSS
CSS 称层叠样式表或级联风格页
使用CSS 定义的网页风格可控制诸如字体、边框、颜色与背景等属性,也可以通过定义外部风格文件实现整个网站页面风格的统一。
使用CSS 的作用: 将格式和结构分离 更容易控制页面的布局
可以制作出体积更小下载更快的网页 可以更快更容易的维护及更新大量的网页 良好的浏览器兼容性
新建CSS 样式: 使用菜单“格式”“ CSS 样式”“新建”
类型:
字体 font-family 大小 font-size 粗细 font-weight 样式 font-style 变量 行高 line-height 大小写转换
边框样式
点划线 dotted 虚线 dashed 实线 solid 双线
插入媒体:
1. 图像对象 鼠标经过对象 2. 插入动画
如何将图片排起来显示 表格 框架
两图片叠在一起 图片显示:表格
框架
使用Div 标签和AP Div
概述:Div 元素在页面中定义一个区域,为HTML 文档内大块的内容提供结构和背景。DIV 的其起始标签和结束标签间的所有内容构成一个块,可包含文本、图像、表格及其他各种页面内容。
Div 元素用CSS 样式控制表现效果或显示某个位置。 Div 元素:“Div 标签”和“AP Div” 插入Div 标签:
插入、常用、Div 标签 AP Div元素
AP Div是一种网页的元素,又称为“层”,即网页内容的容器
AP Div在网页中不仅可与表格相互配合进行网页的布局,还可以与行为相结合实现一些特殊的效果。
AP Div可以理解为浮动在网页上的一个页面,可被准确的定位在网页的任何位置,且可以规定它的大小。 特点: 1. 容器 2. 定位 3. 隐藏
层的层次关系
Z 轴的值决定各层叠放的次序,z 轴的值越大越在上面。 几个同样大小的层的制作:
设置一个快关将某层打开或关闭 “窗口”|“行为”,打开行为面板
选中“开”层,在行为面板中单击“添加行为”按钮,选“显示-隐藏元素” 选元素 确定显示 确定