《网页制作初步》PPT课件
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
2020/11/22
网页设计概述
网页设计的艺术原则 ➢ 对比原则 ➢ 平衡原则 ➢ 协调原则
2020/11/22
网页版面布局和色彩设计
版面布局的原理
➢ 突出重点和中心，主次分明 ➢ 图文并茂 ➢ 大小要和谐 ➢ 动静搭配要平衡
常用网页布局的类型
“国”字型、拐角型、标题正文型、左右框架型、上下框 架型、综合框架型、封面型、Flash型、变化型等
2020/11/22
2020/11/22
添加文字
文字和图像处理
2020/11/22
页面修饰
2020/11/22
图像的添加和修饰
2020/11/22
图像的修饰
2020/11/22
超链接的使用
页面之间的超链接
2020/11/22
电子邮件超链接
2020/11/22
图片热区超链接
（2）在表单的“属性”面板上设置表单的属性，如图10.50所示。 表单名称：用来表示该表单的唯一名称； 动作：表示该表单的数据将交给某个程序处理； 方法：表示表单提交的方法，有POST和GET两种。POST是传输信息
的内容，GET是传输URL的值。
2020/11/22
表单综合应用 （电子邮件反馈意见）
（1）选择菜单栏“插入”中的“表单”中的“表单”按钮，插入一 个表单。
（2）在表单中插入一个表格，6行3列，如图10.51所示。 （3）对表格进行相关设置，包括大小和颜色等，并且对第一行单元
格进行合并，然后输入“发送电子邮件调查表”。 （4）输入相关内容作为单项标题，包括“姓名”，“部门”，“电
话”和“意见”等，再输入一些提示性的文字，例如“*必填”等。 （5）选择菜单栏“文本域”到相应的单元格中。在“意见”一栏的
文本域内设置10行。 （6）将最后一行的单元格进行合并，并在“插入”菜单中的“表单”
中的“按钮”中使用 “重置”按钮。 （7）在表单的“属性”面板中的表单ID输入“formmail”，在动作框
2020/11/22
2020/11/22
网站测试和发布
测试网站
➢ （1）选择菜单栏“站点”中的“检查站点范围的链接”，在选项卡 里选择“链接检查器”，在显示后面的下拉框里选择“断掉的链接” 来检查出站点中所有无效的链接。如图10-55所示。
➢ （2）在选项卡里选择“链接检查器”，在显示后面的下拉框里选择 “外部链接”来检查出本站与外部网站的链接的全部信息，如图1056所示。
第十章 网站建设与网页制作初步
maokeji@zjut.edu.cn
2020/11/22
1
主要内容
网站概述 网页设计概述 Dreamweaver CS4简介 Dreamweaver CS4 站点管理 文字和图像处理 超链接的使用 表格与框架集的使用 表单设计 网站测试和发布
2020/11/22
2020/11/22
创建表格
表格与框架集的使用
2020/11/22
编辑表格
2020/11/22
表格的嵌套
2020/11/22
创建框架
框架的建立
2020/11/22
框架集和框架属性设置
2020/11/22
模板的使用
20Baidu Nhomakorabea0/11/22
2020/11/22
表单设计
（1）将光标定在需要插入表的位置，选择菜单栏“插入”中的“表 单”的“表单”按钮，插入一个表单。如图10.49所示。
里输入mailto:maokeji2001@163.com，如图10.52所示。 （8）最后在“插入”菜单栏中的“表单”中的“按钮”中使用 “提
交”按钮，在单元格的链接框中输入 “mailto:maokeji2001@163.com”，即表单提交后发送的邮件地址。 最终做好的表单如图10.53所示。
2
网站概述
网站概念
在因特网上根据一定的规则，用于展示特定内容的用超链接 方式组成的网页的集合。
网站的组成
域名、网站源程序、网站空间
网站的分类
➢ 根据网站的用途分类（门户网站、行业网站、娱乐网站 ） ➢ 根据网站的性质分类（政府网站 、商业网站 、个人网站 、
教育科研机构网站 、非盈利性机构网站 、企业网站 ）
HTML Microsoft FrontPage Flash Dreamweaver Fireworks
2020/11/22
Dreamweaver CS4简介
2020/11/22
菜单栏
“文件”菜单：除了包含常用的“新建”、“打开”、“保存”和 “保存全部”等按钮外，还包含了用于查看当前文档或对当前文档 执行操作的各种按钮，如“在Bridge中浏览”和“打印代码”等。
的访问。 “帮助”菜单：提供对Dreamweaver文档的访问，包括关于使用
Dreamweaver
2020/11/22
插入栏
2020/11/22
文档工具栏和面板组
2020/11/22
文件面板
2020/11/22
Dreamweaver CS4 站点管理
站点的创建 站点的配置 站点的管理 页面的创建
色彩设计
一般从色彩的鲜明性、独特性、艺术性和合理性四个方面 来考虑
2020/11/22
主页设计的原则
尽量不要容量大的图片和动画等，以免严重影响主页打开的速度。 排版要有条理，不能杂乱无章。 标识的设计要重视。 不要在主页上过多的自我介绍和欢迎浏览之类的词。
2020/11/22
网页制作工具概述
“编辑”菜单：主要包括“剪切”、“拷贝”、“粘贴”、“撤销” 和“重做”等按钮。
“查看”菜单：使用户可以看到文档的各种视图，如“设计”视图 和“代码”视图等。
“插入”菜单：提供“插入”工具栏的替代项，用于将各种对象插 入文档中。
“修改”菜单：使用后可以更改选定页面元素的属性。 “文本”菜单：用户可以设置文本的格式。 “命令”菜单：提供各种命令的访问。 “站点”菜单：用于站点管理以及上传和下载文件。 “窗口”菜单：提供对Dreamweaver中的所有面板、检查器和窗口
2020/11/22
网站建设的步骤
网站制作的环境准备 网站定位 网站策划 网站素材准备 域名注册和空间申请 网站编程、上传和测试 网站宣传和推广 网站的更新和维护
2020/11/22
网站设计的原则
网站主题不宜过多 网站的标准色彩不宜过多 网页长度要适中 表格的嵌套层次宜在三层内 网站导航要清晰
网页设计概述
网页设计的艺术原则 ➢ 对比原则 ➢ 平衡原则 ➢ 协调原则
2020/11/22
网页版面布局和色彩设计
版面布局的原理
➢ 突出重点和中心，主次分明 ➢ 图文并茂 ➢ 大小要和谐 ➢ 动静搭配要平衡
常用网页布局的类型
“国”字型、拐角型、标题正文型、左右框架型、上下框 架型、综合框架型、封面型、Flash型、变化型等
2020/11/22
2020/11/22
添加文字
文字和图像处理
2020/11/22
页面修饰
2020/11/22
图像的添加和修饰
2020/11/22
图像的修饰
2020/11/22
超链接的使用
页面之间的超链接
2020/11/22
电子邮件超链接
2020/11/22
图片热区超链接
（2）在表单的“属性”面板上设置表单的属性，如图10.50所示。 表单名称：用来表示该表单的唯一名称； 动作：表示该表单的数据将交给某个程序处理； 方法：表示表单提交的方法，有POST和GET两种。POST是传输信息
的内容，GET是传输URL的值。
2020/11/22
表单综合应用 （电子邮件反馈意见）
（1）选择菜单栏“插入”中的“表单”中的“表单”按钮，插入一 个表单。
（2）在表单中插入一个表格，6行3列，如图10.51所示。 （3）对表格进行相关设置，包括大小和颜色等，并且对第一行单元
格进行合并，然后输入“发送电子邮件调查表”。 （4）输入相关内容作为单项标题，包括“姓名”，“部门”，“电
话”和“意见”等，再输入一些提示性的文字，例如“*必填”等。 （5）选择菜单栏“文本域”到相应的单元格中。在“意见”一栏的
文本域内设置10行。 （6）将最后一行的单元格进行合并，并在“插入”菜单中的“表单”
中的“按钮”中使用 “重置”按钮。 （7）在表单的“属性”面板中的表单ID输入“formmail”，在动作框
2020/11/22
2020/11/22
网站测试和发布
测试网站
➢ （1）选择菜单栏“站点”中的“检查站点范围的链接”，在选项卡 里选择“链接检查器”，在显示后面的下拉框里选择“断掉的链接” 来检查出站点中所有无效的链接。如图10-55所示。
➢ （2）在选项卡里选择“链接检查器”，在显示后面的下拉框里选择 “外部链接”来检查出本站与外部网站的链接的全部信息，如图1056所示。
第十章 网站建设与网页制作初步
maokeji@zjut.edu.cn
2020/11/22
1
主要内容
网站概述 网页设计概述 Dreamweaver CS4简介 Dreamweaver CS4 站点管理 文字和图像处理 超链接的使用 表格与框架集的使用 表单设计 网站测试和发布
2020/11/22
2020/11/22
创建表格
表格与框架集的使用
2020/11/22
编辑表格
2020/11/22
表格的嵌套
2020/11/22
创建框架
框架的建立
2020/11/22
框架集和框架属性设置
2020/11/22
模板的使用
20Baidu Nhomakorabea0/11/22
2020/11/22
表单设计
（1）将光标定在需要插入表的位置，选择菜单栏“插入”中的“表 单”的“表单”按钮，插入一个表单。如图10.49所示。
里输入mailto:maokeji2001@163.com，如图10.52所示。 （8）最后在“插入”菜单栏中的“表单”中的“按钮”中使用 “提
交”按钮，在单元格的链接框中输入 “mailto:maokeji2001@163.com”，即表单提交后发送的邮件地址。 最终做好的表单如图10.53所示。
2
网站概述
网站概念
在因特网上根据一定的规则，用于展示特定内容的用超链接 方式组成的网页的集合。
网站的组成
域名、网站源程序、网站空间
网站的分类
➢ 根据网站的用途分类（门户网站、行业网站、娱乐网站 ） ➢ 根据网站的性质分类（政府网站 、商业网站 、个人网站 、
教育科研机构网站 、非盈利性机构网站 、企业网站 ）
HTML Microsoft FrontPage Flash Dreamweaver Fireworks
2020/11/22
Dreamweaver CS4简介
2020/11/22
菜单栏
“文件”菜单：除了包含常用的“新建”、“打开”、“保存”和 “保存全部”等按钮外，还包含了用于查看当前文档或对当前文档 执行操作的各种按钮，如“在Bridge中浏览”和“打印代码”等。
的访问。 “帮助”菜单：提供对Dreamweaver文档的访问，包括关于使用
Dreamweaver
2020/11/22
插入栏
2020/11/22
文档工具栏和面板组
2020/11/22
文件面板
2020/11/22
Dreamweaver CS4 站点管理
站点的创建 站点的配置 站点的管理 页面的创建
色彩设计
一般从色彩的鲜明性、独特性、艺术性和合理性四个方面 来考虑
2020/11/22
主页设计的原则
尽量不要容量大的图片和动画等，以免严重影响主页打开的速度。 排版要有条理，不能杂乱无章。 标识的设计要重视。 不要在主页上过多的自我介绍和欢迎浏览之类的词。
2020/11/22
网页制作工具概述
“编辑”菜单：主要包括“剪切”、“拷贝”、“粘贴”、“撤销” 和“重做”等按钮。
“查看”菜单：使用户可以看到文档的各种视图，如“设计”视图 和“代码”视图等。
“插入”菜单：提供“插入”工具栏的替代项，用于将各种对象插 入文档中。
“修改”菜单：使用后可以更改选定页面元素的属性。 “文本”菜单：用户可以设置文本的格式。 “命令”菜单：提供各种命令的访问。 “站点”菜单：用于站点管理以及上传和下载文件。 “窗口”菜单：提供对Dreamweaver中的所有面板、检查器和窗口
2020/11/22
网站建设的步骤
网站制作的环境准备 网站定位 网站策划 网站素材准备 域名注册和空间申请 网站编程、上传和测试 网站宣传和推广 网站的更新和维护
2020/11/22
网站设计的原则
网站主题不宜过多 网站的标准色彩不宜过多 网页长度要适中 表格的嵌套层次宜在三层内 网站导航要清晰