网页设计与开发笔记

第一章网页设计基础 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 轴的值越大越在上面。 几个同样大小的层的制作:

设置一个快关将某层打开或关闭 “窗口”|“行为”,打开行为面板

选中“开”层,在行为面板中单击“添加行为”按钮,选“显示-隐藏元素” 选元素 确定显示 确定


相关内容

  • 笔记本电脑市场调研报告
  • 摘要:伴随着信息技术的高速发展,电脑已经成为生活中必不可少的产品.然而,现在,电脑市场充斥着各种各样的电脑.该怎么选择?已经成为很多人探讨的问题.笔者就大学生笔记本市场进行调研,分析了解大学生笔记本市场的现状及对各项指标的偏好程度.为更多大学生和供应商提供参考. 关键词:笔记本市场:问卷调查:偏好 ...

  • 笔记本电脑的渠道和促销策划方案
  •   目录   一、笔记本电脑营销环境分析.2   (一)当前笔记本电脑市场状况分析.2   1、当前笔记本电脑市场状况.2   2、竞争品牌笔记本电脑分析.2   (二)笔记本电脑校园市场环境分析.3   1、大学生市场需求分析.3   2、竞争品牌分析.3   二、策划目的.3   三、海尔笔记本 ...

  • 放眼未来十年
  • 通过对14家笔记本电脑电脑厂商在工业设计环境.资源整合.要素投入.成果与转化四大方面的调研发现,目前中国笔记本电脑工业设计能力已有一定的进步,但是总体来说我国工业设计领域基础薄弱. 竞争力问题 中国工业设计领域以往对工业设计的认知等方面存在一定问题,导致目前工业设计领域仍然有一些问题亟须解决,这些问 ...

  • 如何选择笔记本电脑,应该注重哪些?给个配置清单?
  • 如何选择笔记本电脑,应该注重哪些?给个配置清单? 共1条 一.开箱--如何判断JS拿给我的是不是新机? 很多用户朋友买本本的时候都不喜欢拆过封的机器,主要是担心遇到返修机或被经销商动过手脚,更换过配件.可是事实上,没有拆过封的本本经常会遇到,比如只摆了几天的样机,比如刚刚打开给其他的用户看过货等等, ...

  • 联想公司营销组合策略
  • 联想公司营销组合策略分析 (一)产品策略 1. 产品生命周期阶段的判断及相关策略制定 (1)以创新为本,改进笔记本产品设计和质量 通过对研发的高投入以保持持续创新的能力,快速推进研发平台的共享和融合:在笔记本的研发和设计方面,两个品牌各有所长,联想公司笔记本设计强项在于消费化应用,软件,易用性设计等 ...

  • 人月神话读书笔记
  • 人月神话这本书几年前就听别人说是本很经典的软件开发方面的书,这本书的成功之处在于他思想的前卫性,以至于不只是软件行业的人在读.现在终于找到读他的理由了,可以感受一下大师的杰作.在读之前我已经读过了软件工艺和极限编程,为什么留到最后读人月神话呢?主要是因为我觉得一本能够流传30年还被人们津津乐道的书, ...

  • [与城市互动的住区规划设计]读书笔记
  • <与城市互动的住区规划设计>读书笔记 <与城市互动的住区规划设计>以分析现状和问题开始,分别从规划原则.交通规划.公共配套设施.景观空间.住区管理模式等方面详细讲解了与城市互动的住区规划设计,说明了传统的住区规划设计和与城市孤立的理想式小区规划是难以实现的,只有在规划小区时充 ...

  • 创业学第十一章[葛建新 清华大学出版社 2004] 读书笔记
  • 创业学[葛建新清华大学出版社2004]读书笔记 第十一章技术管理 一.基本概念 1.技术管理是指企业为实现组织的战略和运行目标,提高自身规划.开发和实施技术的能力进行的管理工作.技术管理关注的是企业如何进行技术的开发和实施,如何借助技术创新保持自身的竞争优势.主要任务是根据现代化工业生产的客观规律, ...

  • 2011年10月信息资源开发与管理试题,答案,笔记
  • 全国2011年10月高等教育自学考试 信息系统开发与管理试题 课程代码:04757 一.单项选择题(本大题共20小题,每小题1分,共20分) 在每小题列出的四个备选项中只有一个是符合题目要求的,请将其代码填写在题后的括号内.错选.多选或未选均无分. 1.以下属于电子商务系统的是( B ) A.科技管 ...