第1章_网页设计与制作概述
《网页设计与制作》课件
# 网页设计与制作
本课程旨在传授网页设计与制作的基础知识和技能。通过课程学习，您将掌 握网页设计的流程、布局原则、交互设计以及网站的维护与发布。
第一章：课程介绍
1 学习目标
明确课程学习目标，了解学习内容和要求。
2 课程安排
详细介绍每个章节的内容安排和学习进度。
3 教学方法
2 标准布局
讲解网页布局设计的基本原则和注意事项。
介绍常用的标准网页布局模式和技巧。
3 自适应布局
பைடு நூலகம்
4 响应式布局
学习如何设计适应不同设备和屏幕尺寸的 网页布局。
解析响应式设计的概念和实现方法。
第四章：网页交互设计
1 交互设计概述
揭示交互设计的重要性和基本原则。
3 交互设计流程
探讨交互设计的典型流程和步骤。
2 常用交互元素
介绍常见的网页交互元素和设计技巧。
4 JavaScript基础
入门级JavaScript语法和常用函数的使用。
第五章：网站维护与发布
1 网站测试与调试
学习进行网站测试、调 试和优化的方法。
2 网站备份与恢复
讲解网站备份和恢复的 重要性和实施步骤。
3 网站发布与维护
指导网站发布和日常维 护的关键要点。
介绍教学方法，包括理论讲解、实践演练和案例分析等。
第二章：网页设计基础
1 网页设计概述
2 HTML基础
介绍网页设计的定义、重要性和发展趋势。
学习HTML标签的使用和基本语法规范。
3 CSS基础
学习CSS样式的定义和常用属性。
4 网页设计流程
简要介绍网页设计的典型流程和步骤。
第三章：网页布局设计
网页设计与制作第一章概述
下一页
上一页
1.4 网页制作工具
❖Dreamweaver
Dreamweaver 是由美国著名的软件开发商Macromedia公司推出的一个“所见即所得”的可视 化网站开发工具。可用于可视化设计与管理网页和网站的专业级HTML编辑器。Dreamweaver是 唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。 可编写ASP、JSP及PHP 程序，从而创建动态网站系统。包括可视化编辑、HTML代码编辑的软件包，并支持ActiveX、 JavaScript、Java、Flash、ShockWave等特性。
1995年4月创办“中国黄页”网站。1997年年底，马云和他的团队在北京开 发了外经贸部官方站点、网上中国商品交易市场等一系列国家级站点。 1999年初，马云回到杭州以50万元人民币创业，开发阿里巴巴网站。
第一章 基础知识
1 网页的概念 2 网页的分类 3 HTML概述 4 网页制作工具 5 网页制作前的准备工作
在eBay易趣网及淘宝网上店铺中，在校大学生开的“个人店铺” 达到40%
李彦魔术般 地成为每股122.54美元，一夜之间产生了9位亿万富翁、 30位千
本章内容
1.1 Internet基础知识 Internet
Internet是由遍布全球的各种网络系统、主机系统，通过统一的协议TCP/IP联接在一起所组成 的世界性计算机网络系统。
• WWW（World Wide Web）服务： – World Wide Web（万维网），简称WWW，是Internet上最重要的信息服务之一，WWW是 以Internet上众多WWW服务器所发布的无数网页及它们之间的链接为基础构成的一个庞 大的多媒体信息网。
网页设计与制作- 第01章_网页设计概述
网页设计与制作
1.1 网页基本概念
– 7．导航栏：导航栏的作用是引导浏览者准确、 方便地查看当前网站的不同内容并在相关页面之 间自由跳转。实际上，导航栏就是一组相对固定 的超链接，链接的目标就是站点中的主要网页。
– 8．表单：网页中的表单类似于Windows程序的 窗体，主要用来将浏览者输入的信息提交给服务 器端程序进行处理。表单是提供交互功能的基本 元素，例如问卷调查、信息查询、用户注册、网 上订购等，都需要通过表单进行客户端信息的收 集工作。
7
网页设计与制作
1.1 网页基本概念
• 例1.1 打开记事本（notepad.exe），输入如
下内容，将文件保存为ep1_1.html，然后双击
ep1_1.html在浏览器中打开并预览。效果如图
所示。
<html> </html>
<head> </head> <body>
</body>
<title>我的HTML网页</title>
– 9．其他常见元素：网页中除了以上几种最基本 的元素之外，还有一些其他的常见元素，包括悬 停按钮、Java特效和ActiveX特效等。这些元素 使网页更加丰富多彩和生动有趣。
15
网页设计与制作
1.2 网页浏览的基本原理
• 1.2.1 WWW服务器工作模式 • 1．客户机和服务器
– Web服务是建立在客户机/应用服务器/数据 库服务器（Client/ Server/ Database Server，C/S/DS）三层结构模型之上的， 在网络环境中，客户机向服务器发出服务请 求，服务器接收并处理客户的请求，最后将 结果返回到客户机。
网页设计与制作案例教程电子教案课件
网页设计与制作案例教程-电子教案课件第一章：网页设计基础1.1 网页设计概述介绍网页设计的概念、目的和重要性讲解网页设计的基本原则和设计流程1.2 网页布局与排版介绍网页布局的概念和重要性讲解常用的网页布局方法和技术演示实例：制作一个简单的网页布局第二章：HTML与CSS基础2.1 HTML基础介绍HTML的概念和作用讲解HTML的基本结构和常用标签演示实例：制作一个简单的网页2.2 CSS基础介绍CSS的概念和作用讲解CSS的基本语法和常用选择器演示实例：为网页添加样式和布局第三章：图像与多媒体处理3.1 图像处理介绍图像在网页设计中的作用和重要性讲解图像的基本格式和处理方法演示实例：制作一个简单的图像轮播效果3.2 多媒体处理介绍多媒体在网页设计中的应用讲解音频和视频的嵌入方法演示实例：在网页中添加音频和视频第四章：网页交互与动画4.1 交互设计基础介绍交互设计在网页设计中的作用和重要性讲解常用的交互设计技术和方法演示实例：制作一个简单的交互式导航菜单4.2 动画与过渡效果介绍动画在网页设计中的应用和重要性讲解CSS动画和过渡效果的语法和用法演示实例：制作一个简单的CSS动画效果第五章：响应式网页设计5.1 响应式网页设计概述介绍响应式网页设计的概念和重要性讲解响应式网页设计的基本原则和方法5.2 媒体查询与网格系统讲解媒体查询的语法和用法讲解网格系统的概念和应用演示实例：制作一个响应式网页布局第六章：网页前端编程技术6.1 JavaScript基础介绍JavaScript的概念和作用讲解JavaScript的基本语法和常用语法演示实例：制作一个简单的网页交互效果6.2 jQuery库的使用介绍jQuery的概念和作用讲解jQuery的基本语法和常用方法演示实例：使用jQuery实现网页元素的动态效果第七章：网页后端技术7.1 PHP基础介绍PHP的概念和作用讲解PHP的基本语法和常用语法演示实例：制作一个简单的PHP网页7.2 MySQL数据库的使用介绍MySQL的概念和作用讲解MySQL的基本操作和常用SQL语句演示实例：使用MySQL存储和管理网页数据第八章：网页优化与性能提升8.1 网页优化概述介绍网页优化的重要性讲解网页优化的基本原则和方法8.2 提高网页性能讲解提高网页加载速度的方法讲解代码压缩和合并的技术演示实例：优化网页性能第九章：搜索引擎优化（SEO）9.1 SEO基础介绍SEO的概念和作用讲解SEO的基本原则和方法9.2 关键词研究和内容优化讲解关键词研究的方法和技巧讲解内容优化的重要性和方法演示实例：为一个网页进行SEO优化第十章：网页设计与制作的实战项目10.1 项目概述和需求分析介绍项目背景和目标分析项目需求和功能10.2 网页设计与制作流程讲解网页设计与制作的详细流程演示实例：完成一个实战项目的网页设计与制作第十一章：网页设计与制作工具11.1 网页编辑器与IDE介绍常用的网页编辑器和集成开发环境（IDE）讲解如何使用这些工具进行网页设计与制作11.2 图形设计软件介绍常用的图形设计软件及其在网页设计中的应用讲解如何使用这些工具进行网页图形设计第十二章：网页设计与制作实战技巧12.1 网页动画与特效讲解如何制作网页动画和特效演示实例：制作一个动态轮播图12.2 网页响应式设计讲解如何实现网页的响应式设计演示实例：制作一个响应式网页布局第十三章：网页安全性与维护13.1 网页安全性基础介绍网页安全性的重要性和常见安全问题讲解如何提高网页安全性13.2 网页维护与更新讲解如何进行网页的维护和更新演示实例：对一个网页进行维护和更新第十四章：网页设计与制作的案例分析14.1 案例一：企业官方网站设计分析企业官方网站的设计要求和特点讲解如何设计和制作企业官方网站14.2 案例二：电子商务网站设计分析电子商务网站的设计要求和特点讲解如何设计和制作电子商务网站第十五章：网页设计与制作的未来发展15.1 网页设计趋势与创新分析当前网页设计的趋势和创新方向讲解如何跟上网页设计的未来发展15.2 网页设计与制作的未来技术介绍未来可能影响网页设计与制作的技术讲解如何应对这些技术挑战和机遇重点和难点解析重点：1. 网页设计基础：理解网页设计原则、设计流程以及布局与排版的方法。
网页设计与制作 第1章 网页设计与制作概述
【学习目标】
1.掌握网页设计与制作中有关概念 2.了解Dreamweaver软件的界面构成 3.学会Dreamweaver的站点操作 4.学会Dreamweaver的文件操作 5.了解网站制作的一般流程，能够使用 Dreamweaver制作一个简单的网站
1.1 网站设计与制作的基础知识 1.1.1 网站设计的有关概念 互 联 网
1.3 站点操作 1.3.1 站点的创建
Step3
在“站点名称”文本框中修改站点名称，点击“下一步”进入图所示界面。由于 我们创建一个本地站点，所以不必使用服务器技术，选中“否，我不想使用服务 器技术”，点击“下一步”
1.3 站点操作 1.3.1 站点的创建
Step4
由于不需要连接到远程服务器， 此项选“无”后，单击“下一 步”；出现一个网站的汇总信息， 单击“完成”
1.4 实践与运用——农家院网站的设计与制作 1.4.2 新建网页
新建网页
设置页面属性
1.4 实践与运用——农家院网站的设计与制作 1.4.3 网页的设计 网页布局 设置导航
插入网页图像
互联网又名因特网，英文名字是Internet，是将全球范围内的计算机通过通信线路和 设置，采用标准的TCP/IP协议连接起来，能够实现资源共享和相互通信的计算机网 络。国际互联网络。通过互联网我们能够收发电子邮件、传输文件、上网浏览信息、 进行网络办公、开展电子商务等。目前，互联网已成为我们工作、生活、娱乐等不 可缺少的组成部分，目前全国网民已达4亿，大家除利用网络浏览信息外，还在进行 网上购物、网络办公、网络游戏、网络支付等，网络已渗透到社会生活的各个领域。 又名WWW网，特指利用浏览器对网络进行访问的部分。访问者通过浏览器（如IE） 访问网络资源（如新浪网、网易等），由于操作的简便性，非常受普通网民的欢迎。 正是由于其操作的简便性，许多网络服务都通过WWW来提供，如电子邮件的收发， 早期我们采用的收发软件如FoxMail已被束之高阁，而是直接通过浏览器访问电子 邮件服务器进行收发操作。在网络硬盘中，我们通过浏览器进行文件传输服务，我 们可以讲，对于新一代互联网用户来讲，万维网就是互联网。
《网页设计与制作实用教程》-第1章_网页设计与制作概述
多的视觉冲击力和空间想像力
3．网页的色彩 网页的色彩是树立网站形象的关键因素之一。在搭配网
页色彩时，要注意色彩的鲜明性、独特性、合适性和联想 性。
1.4 网页开发语言
1.4.1 HTML语言 1.4.2 动态网站开发语言
1．ASP 2．JSP 3．PHP
1.5网站规划
1.5.1 网站制作流程 1．确定网站主题 2．搜集资料 3．规划网站 4．选择合适的制作工具 5．制作网页 6．上传测试 7．推广宣传
1.5.2 网站策划书 1．网站建设目的及功能定位 2．网站内容模块规划 3．网站语言 4．网站设计风格 5．网站架设描述
6．网站信息布局图
Flash动动画画播播放放
网站首页 艺术生涯
评文摘录
浏览者
吴山明网站
作品展示们
作品分类
7．网站发布与推广 8．技术支持 9．网站服务费用 10．有效期
1．5．3站点评测 1．美工设计 2．栏目内容 3．浏览速度 4．技术含量 5．用户兴趣
本章小结
超级链接:这是网页制作中经常要用到的 概念，指的是页面对象之间的连接关系 。
导航条：导航条能十分有效地实现超级 链接功能 。
发布：将制作好的网页上传到服务器的 过程即是发布，也称为上传或上载。
1.1.2网站分类 门户网站 如：新浪 职能网站 如：阿里巴巴 专业网站 如：CCTV（） 个人网站 如：吴山明教授个人网站
π型结构 T型结构
三型结构
1.3网页制作工具
1.3.1 网页布局工具 1．Dreamweaver 2．Frontpage
《网页设计与制作》课程教案
《网页设计与制作》课程教案第一章：网页设计与制作概述1.1 课程介绍网页设计与制作的基本概念网页设计与制作的目的与意义网页设计与制作的应用领域1.2 网页设计原则网页设计的基本原则用户体验设计原则响应式网页设计原则1.3 网页制作工具与技术网页设计软件的选择与使用HTML与CSS的基本语法与使用方法JavaScript的基础知识与应用第二章：网页布局与排版2.1 网页布局的基本概念网页布局的定义与作用常见的网页布局方式布局元素的分类与使用2.2 排版的原则与方法排版的基本原则文本的格式化与排版图片与多媒体元素的排版2.3 响应式网页布局与排版响应式网页布局的概念与意义媒体查询的使用方法布局与排版在不同设备上的应用第三章：网页色彩与字体3.1 色彩的基本概念与应用色彩的视觉效应与心理作用色彩的搭配原则与技巧色彩在网页设计中的应用案例3.2 字体的选择与使用字体的分类与特点字体的搭配原则与技巧字体在网页设计中的应用案例3.3 网页色彩与字体的综合应用色彩与字体的协调与平衡字体大小与行距的设置与调整色彩与字体的个性化应用与创新第四章：网页图片与多媒体元素4.1 网页图片的选择与处理图片的格式与特点图片的选择标准与技巧图片的处理与优化方法4.2 多媒体元素的应用音频与视频元素的应用动画与GIF图片的应用交互式多媒体元素的应用4.3 网页图片与多媒体元素的优化图片与多媒体元素的加载优化图片与多媒体元素的响应式应用图片与多媒体元素的视觉效果与用户体验第五章：网页交互与动画5.1 网页交互的基本概念与原理交互的定义与作用交互的实现方式与技术交互的设计原则与技巧5.2 JavaScript基础与应用JavaScript的基本语法与功能事件处理与DOM操作JavaScript库与框架的选择与使用5.3 网页动画的实现与优化CSS动画的制作方法与技巧JavaScript动画的制作方法与技巧动画的加载优化与性能考虑第六章：HTML与CSS高级应用6.1 表单设计与验证表单的基本结构与属性表单元素的使用与布局表单验证的实现方法6.2 网页组件设计与实现导航栏与面包屑的制作折叠面板与标签页的制作轮播图与幻灯片的设计与实现6.3 网页动画与过渡效果CSS过渡与动画的实现JavaScript动画的实现方法动画的性能优化与调试第七章：前端框架与库7.1 前端框架的基本概念前端框架的作用与优势常见的前端框架介绍框架的选择与使用7.2 Bootstrap框架的应用Bootstrap的基本结构与组件栅格系统与布局设计Bootstrap表单与样式定制7.3 React与Vue框架的选择与应用React框架的基本概念与使用方法Vue框架的基本概念与使用方法框架项目结构与组件化开发第八章：网页兼容性与优化8.1 网页兼容性基本概念浏览器兼容性的原因与挑战兼容性测试的方法与工具兼容性解决方案与最佳实践8.2 网页性能优化网页加载速度的影响因素图片与多媒体元素的优化代码压缩与合并技巧8.3 搜索引擎优化（SEO）SEO的基本概念与原则关键词研究与内容优化代码优化与站点结构调整第九章：网页安全与维护9.1 网页安全基本概念网页安全的威胁与挑战跨站脚本攻击（XSS）的预防跨站请求伪造（CSRF）的预防9.2 数据备份与恢复数据备份的重要性与方法数据库备份与文件备份恢复策略与流程9.3 网站维护与更新网站维护的内容与流程网站更新的方法与技巧网站监控与性能调优第十章：项目实践与案例分析10.1 项目实践流程项目需求分析与规划设计阶段与实现阶段项目测试与上线流程10.2 项目案例分析案例一：个人博客网站设计与制作案例二：电子商务网站设计与制作案例三：响应式企业官网设计与制作项目过程中的问题与解决方法网页设计与制作的趋势与展望重点和难点解析1. 第一章：网页设计与制作概述难点解析：网页设计原则的理解与应用、网页制作工具与技术的熟练运用2. 第二章：网页布局与排版难点解析：响应式网页布局与排版的设计与实现3. 第三章：网页色彩与字体难点解析：色彩与字体的协调与平衡、字体大小与行距的设置与调整4. 第四章：网页图片与多媒体元素难点解析：网页图片与多媒体元素的优化方法、响应式应用5. 第五章：网页交互与动画难点解析：JavaScript事件的处理与DOM操作、动画的实现与优化6. 第六章：HTML与CSS高级应用难点解析：表单验证的实现方法、网页组件的布局与样式设计7. 第七章：前端框架与库难点解析：框架的选择与使用、React与Vue框架的选择与应用8. 第八章：网页兼容性与优化难点解析：兼容性解决方案与最佳实践、网页性能优化的实施方法9. 第九章：网页安全与维护难点解析：预防跨站脚本攻击（XSS）与跨站请求伪造（CSRF）的策略、网站维护与更新的方法10. 第十章：项目实践与案例分析难点解析：项目需求的分析与规划、项目测试与上线流程的控制本教案《网页设计与制作》涵盖了网页设计与制作的基本概念、技术应用、项目实践等各个方面。
《网页设计与制作》(第二版)电子课件第一章
（1）创意并不是天才的灵感，
而是思考的结果
根据美国广告学教授詹姆斯的研究，创意思考的过 程可分为五个阶段： 准备期 ——研究所搜集的资料，根据经验，启发 新创意； 孵化期 ——将资料咀嚼消化，使意识自由发展， 任意结合； 启示期 ——意识发展并结合，产生创意； 验证期 ——将产生的创意讨论修正；
（4）其他注意方面
①不要使用中文目录名，使用中文目录名可能 对网址的正确显示造成困难。 ②不要使用过长的目录名，太长的目录名不便 于记忆。 ③尽量使用意义明确的目录名，你可以用Flash、 Dhtml、Javascript来建立目录名，也可以用1， 2，3来建立目录名，但是哪一个更明确，更 便于记忆和管理呢?显然是前者。
现实生活中的Logo
（2）设计网站的标准色彩
“标准色彩”是指能体现网站形象和延伸内涵的色彩。 例如：IBM的深蓝色，肯德基的红色条形，Windows 视窗标志上的红蓝黄绿色块，都使我们觉得很贴切， 很和谐。 标准色彩要用于网站的标志、标题、主菜单和主色 块，给人以整体统一的感觉。一般来说，一个网站的 标准色彩不超过3种 ，太多则让人眼花缭乱
1.3网站建立的一般流程
一般来说，网页制作可分为三个阶段： 1．前期工作准备阶段：在此阶段主要完成以下几 个方面的工作：拟定网页主题、搜集相关资料、 规划网页内容、绘制结构草图。 2．中期制作阶段：在此阶段主要利用各种网页制 作工具，开始制作网页，并不断地进行上传与测 试，直到最后制作完毕。 3．后期维护阶段：网页制作完成后，可进行发布 和推广应用。根据需要，对网页进行更新与维护。
栏目的实质是一个网站的大纲索引，索引应该 将网站的主体明确显示出来
一般的网站栏目安排要注意以下几方面： （1）记住一定要紧扣你的主题即将你的主题按 一定的方法分类并将它们作为网站的主题栏目 （2）设立一个最近更新或网站指南栏目 （3）设立一个可以双向交流的栏目 （4）设立一个下载或常见问题回答栏目
网页设计与制作教程(第4版)电子教案
1.2 Web标准
1.2.3 采用Web标准的优点 1．客户端的优点 采用Web标准后，客户端的好处主要体现在以下方面：
• 文件下载与页面显示速度更快； • 内容能被更多的用户所访问（包括失明、弱视、色盲等 残障人士）；
2．服务器端的优点 采用Web标准后，服务器端的好处主要体现在以下方面： • 更少的代码和组件，容易维护； • 带宽要求降低（代码更简洁），成本降低； • 更容易被搜寻引擎搜索到；
1.3 网站的规划与设计
在建设网站之前，需要对网站进行一系列的分析和设计， 然后根据分析的结果提出合理的建设方案，这就是网站的规 划与设计。
网站的规划与设计一般应遵循以下三个原则： • 最大限度地满足用户需要； • 最有效地进行资源利用； • 使用方便，界面友好，运行高效；
常规的规划与设计方法一般有以下三种：自顶向下、自 底向上、不断增补的设计方法。
1.4 网站开发工作流程
典型的Web开发工作流程包括以下几个阶段。
1）规划站点：包括确立站点的策略或目标、确定所面向的 用户以及站点的数据需求。
2）设置开发环境：包括选择Web应Байду номын сангаас程序服务器、利用 Dreamweaver网页制作软件定义站点及数据源。
3）规划页面设计和布局：包括用绘画工具创建页面和界面 模型，以及使用Dreamweaver、FrontPage布置页面。
动态网页技术根据程序运行的区域不同，分为客户端动 态技术与服务器端动态技术。
客户端动态技术不需要与服务器进行交互，实现动态功 能的代码往往采用脚本语言形式直接嵌入到网页中。服务器 发送给浏览者后，网页在客户端浏览器上直接响应用户的动 作。常见的客户端动态技术包括JavaScript、ActiveX和 Flash等。
网页设计与制作教程
网页设计与制作教程目录第1章网页设计与制作概述1.1网络的基础知识1.1.1 TCP/IP协议1.1.2 IP地址1.1.3域名地址1.1.4统一资源定位器1.2图形图像的基础知识1.2.1位图与矢量图1.2.2常用的图像格式1.2.3常用的图形格式1.3网页的布局知识1.3.1网页的基本结构1.3.2页面的布局原则和模式1.4网页的色彩应用1.4.1色彩属性与象征意义1.4.2网页色彩的规划1.5 HTML基础1.5.1 HTML语言的基本结构1.5.2 HTML语言的基本单位1.5.3 HTML标记符基础1.5.4文本格式标记符1.5.5超标记符1.5.6图像标记符1.5.7表格标记符1.5.7框架标记符1.5.8表单标记符1.5.9滚动条1.6 CSS技术1.6.1 什么是CSS1.6.2 在网页中使用CSS1.6.3 CSS 样式定义1.6.4 CSS 属性1.6.5 CSS 过滤器简介1.7 JavaScript技术1.7.1 JavaScript脚本嵌入HTML文档的方法1.7.2使用客户端脚本习题一第2章DreamweaverCS6网页设计基础2.1 Dreamweaver的工作环境2.2构建Dreamweaver站点2.2.1创建本地站点2.2.2管理本地站点2.2.3创建和管理本地站点中文件2.3网页文本编辑2.3.1正文文本的添加2.3.2文本格式的设置2.3.3页面属性的设置2.3.4插入特殊字符2.3.5插入空格2.4 CSS样式设置2.4.1创建CSS规则2.4.2样式表2.5制作一个简单网页2.6 Dreamweaver工作环境的设置习题二第3章图像与多媒体3.1图像的应用3.1.1在网页中插入图像3.1.2设置图像属性3.2创建鼠标经过图像3.3图像占位符与属性的设置3.4插入flash动画3.5音频的应用3.5.1音频文件格式3.5.2网页中添加音频3.6视频的应用习题三第4章超级与其应用4.1超概述4.2创建文本超4.3创建图像超4.4创建电子4.5空习题四第5章网页的布局5.1表格的应用5.1.1插入表格5.1.2表格的嵌套5.2表格编辑与属性设置5.2.1文档中的设置表格格式优先顺序5.2.2选择表格与其它元素5.2.3设置表格属性5.2.4设置单元格、行或列属性5.2.5编辑单元格、行或列5.3应用APDiv布局页面5.4APDiv与表格的相互转换.5.4.1将APDiv转换为表格5.4.2表格转换为APDiv5.5框架的应用5.5.1创建框架集5.5.2查看和设置框架集属性5.5.3查看和设置框架属性5.5.4设置框架中显示的网页5.5.5嵌套的框架集5.5.6框架的编辑习题五第6章表单的应用6.1创建表单6.2添加表单对象6.2.1插入文本域6.2.2插入单选按钮/单选按钮组6.2.3插入复选框/复选框组6.2.4插入选择框〔列表/菜单〕6.2.5插入文件域6.2.6插入按钮6.3表单的提交6.4应用表格布局表单实例习题六第7章行为与脚本语言与模板和库的应用7.1行为在网页中的应用7.1.1行为、事件、动作7.1.2添加行为7.1.3Dreamweaver内置事件7.2 JavaScript脚本7.2.1 JavaScript脚本概述7.2.2 JavaScript脚本语言特效7.3创建与应用模板7.3.1创建模板7.3.2使用模板创建新网页7.3.3修改模板7.3.4文档从模板中分离7.3.5设置模板的首选参数7.4创建与应用库项目7.4.1创建库7.4.2在网页中应用库项目7.4.3编辑并更新库页面7.4.4将库项目从源文件中分离习题七第8章站点的测试8.1站点的测试8.1.1检查浏览器兼容性8.1.2.的检查与修正8.1.3不同分辨率下的测试8.1.4运行站点报告8.1.5内容的编辑8.2创建远程站点8.2.1设置远程服务器8.2.2连接远程站点8.3文件的上传和下载8.3.1文件的上传8.3.2下载文件8.3.3文件的取出与存回习题八第9章FireworksCS6基础与其在网页制作中的应用9.1 FireworksCS6基础9.1.1认识FireworksCS6工作区9.1.2文档管理9.1.3使用布局工具9.1.4各种面板9.1.5常用工具9.2绘制并编辑矢量图形9.2.1绘制与编辑基本形状9.2.2绘制与编辑自动形状9.2.3自由变形形状9.2.4复合形状9.3创建并修饰位图图像9.3.1创建位图图像9.3.2编辑位图图像9.3.3修饰位图9.4创建并编辑文本9.4.1创建文本9.4.2选择文本9.4.3编辑文本9.5应用笔触和填充9.5.1应用颜色工具9.5.2应用和更改笔触9.5.3应用和更改填充9.5.4在笔触和填充中添加纹理9.5.5应用样式9.6应用动态滤镜9.6.1应用动态滤镜9.6.2调整动态滤镜9.7使用切片和热点9.7.1使用切片9.7.2使用热点习题九第10章FlashCS6基本操作与在网页制作中的应用10.1 FlashCS6的基本操作10.1.1 FlashCS6的工作界面10.1.2 Flash文档的创建、打开、保存10.1.3面板组的使用10.2时间轴的使用10.2.1图层10.2.2帧10.2.3播放头10.2.4场景10.3元件、实例和库资源10.3.1元件的创建10.3.2实例10.3.3库面板以与元件与实例的关系10.4创建各种动画10.4.1遮罩层动画10.4.2引导层动画10.4.3形状补间动画10.4.4逐帧动画10.5在动画中添加声音10.6文本的使用10.6.1传统文本字段10.6.2使用文本布局框架(TLF)文本10.7动作面板的使用10.7.1动作面板的介绍10.7.2动作脚本的基本元素10.8 ActionScript基本语句10.8.1时间轴控制命令10.8.2浏览器/网络命令10.9动作的应用10.10测试发布Flash动画10.10.1制作过程中的测试10.10.2测试方法10.10.3下载模拟测试10.10.4发布影片10.10.5优化Flash文档习题十第11章PhotoshopCS6基本操作与在网页设计中的应用11.1 PhotoshopCS6基本操作11.1.1 PhotoshopCS6的工作界面11.1.2文件操作11.1.3环境设置11.1.4基本概念11.1.5选区的创建与编辑11.1.6利用画笔类工具绘制图像11.1.7利用形状绘制工具绘制图像11.1.8图像修饰工具的应用11.1.9调色命令的高级应用11.1.10图层样式11.1.11文字图层11.1.12滤镜11.2页面设计与制作11.2.1整体页面的制作11.2.2制作导航栏11.2.3制作网页内容板块11.2.4制作网页页脚习题十一第12章网页制作工具集成与网页制作综合实训12.1 Fireworks与Dreamweaver的集成12.2使用Photoshop和Dreamweaver12.2.1 Dreamweaver中处理Photoshop文件的工作流程12.2.2创建智能对象12.2.3更新智能对象12.3 Dreamweaver与Flash的集成12.4网页制作综合实训习题十二。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
扬州大学机械工程学院
第12页
2017年8月3日星期四
办公室网络信息技术
1.3.2网页美化工具 1．图像处理软件:Photoshop,Fireworks 2．动画制作软件 :FLASH,Swish、Ulead GIF Animator,Ulead Cool 3D、3D Flash Animator、Xara3D
2017年8月3日星期四
办公室网络信息技术
1.1.2网站分类 门户网站 如：新浪 职能网站 如：阿里巴巴 专业网站 如：CCTV（） 个人网站 如：吴山明教授个人网站
扬州大学机械工程学院
第13页
2017年8月3日星期四
办公室网络信息技术
1.4 网页开发语言
1.4.1 HTML语言 网页开发语言HTML
扬州大学机械工程学院
第14页
2017年8月3日星期四
办公室网络信息技术
1.4.2 动态网ห้องสมุดไป่ตู้开发语言 1．ASP 2．JSP 3．PHP
扬州大学机械工程学院
第15页
扬州大学机械工程学院
第5页
2017年8月3日星期四
办公室网络信息技术
超级链接:这是网页制作中经常要用到的 概念，指的是页面对象之间的连接关系。 导航条：导航条能十分有效地实现超级链 接功能 。 发布：将制作好的网页上传到服务器的过 程即是发布，也称为上传或上载。
扬州大学机械工程学院
第6页
第4页 2017年8月3日星期四
扬州大学机械工程学院
办公室网络信息技术
IP地址：IP地址是一组32位的数字号码，如 “218.30.12.184”，这就是上网主机的地址。 域名： IP地址是一长串的数字号码，这些数字 难记又难以理解。为了方便大家理解、记忆， 便有了域名的概念。 表单: 表单是用于填写申请或提交信息的交互 页面。如电子邮箱、主页空间、QQ号码等的 申请页面，以及论坛、聊天室、留言簿等。
扬州大学机械工程学院
第7页
2017年8月3日星期四
办公室网络信息技术
1.2网站结构与网页布局
1.2.1 网站结构 1．归类站点内容 2．项目放置的位置 3．导航草图设计 4．创建设计草图
主页面 index.htm
页面1 1.htm
页面2 2.htm
页面3 3.htm
页面4 4.htm
页面5 5.htm
扬州大学机械工程学院 第3页 2017年8月3日星期四
办公室网络信息技术
主机名：指要访问服务器的Internet名称。 所要访问的文件路径及文件名：它指要访问资 源的具体位置。 文件传输协议（File Transfer Protocol，简 称FTP）：是一种快速、高效和可靠的信息传 输方法。 超文本标记语言（Hyper Text Markup Language，简称HTML）：它是WWW创建超 媒体文本的语言，它也是网页创建中最基本的 语言，制作的任何一个网页都是基于HTML文 本标识的。
扬州大学机械工程学院 第2页 2017年8月3日星期四
办公室网络信息技术
统一资源定位器（Universal Resource Locator，简称URL）：是用来指出某项 信息的位置及存取方式，以取得各种服 务信息的一种标准方法。 通信协议：也就是上面举例中的“http” 部分，它包括HTTP（超文本传输协议） 、FTP（文件传输协议）、Gopher（ Gopher协议）和News（新闻组）等。
本章介绍了网页设计与制作的基本概 念和基本知识、常用的网页制作工具、网 站的基本结构和网页布局等内容。通过本 章的学习使同学对网页的设计与制作过程 有一个概貌性的了解。
扬州大学机械工程学院
第21页
2017年8月3日星期四
扬州大学机械工程学院
第17页
2017年8月3日星期四
办公室网络信息技术
6．网站信息布局图
网站首页 Flash动画播放 动画播放
艺术生涯 评文摘录 作品展示 作品分类
浏览者 浏览者
吴山明网站 艺术交流 作品收藏 联系我们 普通图文版
扬州大学机械工程学院
第18页
2017年8月3日星期四
办公室网络信息技术
办公室网络信息技术
第一章 网页设计与制作概述
学习目标: 了解有关网页的一些基本概念 了解网站的基本结构特性和网页的布局 了解网页制作的基本工具和开发语言 了解站点规划的基本流程
扬州大学机械工程学院
第1页
2017年8月3日星期四
办公室网络信息技术
1.1 互联网与网站
1.1.1基本概念: 网页：在网站中，供用户阅读的一个个页面， 就称之为“网页”，又称为Web页。 万维网（World Wide Web）：万维网简称 WWW或3W，是目前Internet（因特网）上最 流行的一种基于超文本形式的资源组织形式。 浏览器：要想访问网络中的各种资源，还需要 一个工具，那就是浏览器，否则无法访问到网 络中丰富的资源。 目前常用的浏览器有:IE、搜狗和腾讯TT
扬州大学机械工程学院
第9页
2017年8月3日星期四
办公室网络信息技术
3．网页的色彩 网页的色彩是树立网站形象的关键因素之一。在搭配网 页色彩时，要注意色彩的鲜明性、独特性、合适性和联想 性。 4．网页的文字 注意以下基本原则: （1）不要使用超过3种字体类型，否则网页看起来将显得杂 乱，没有主题。 （2）不要用太大的字，因为版面空间非常宝贵和有限，粗陋 的大字体不能带给浏览者更多的信息 （3）最好不要使用不停闪烁的文字。 （4）标题的字体比正文要稍大一些，颜色也应有所区别。
7．网站发布与推广 8．技术支持 9．网站服务费用 10．有效期
扬州大学机械工程学院
第19页
2017年8月3日星期四
办公室网络信息技术
1.5.3站点评测 1．美工设计 2．栏目内容 3．浏览速度 4．技术含量 5．用户兴趣
扬州大学机械工程学院
第20页
2017年8月3日星期四
办公室网络信息技术
本章小结
扬州大学机械工程学院
第10页
2017年8月3日星期四
办公室网络信息技术
5．网页版面和布局 网页布局主要有以下3种结构。 π型结构 T型结构 三型结构
扬州大学机械工程学院
第11页
2017年8月3日星期四
办公室网络信息技术
1.3网页制作工具
1.3.1 网页布局工具 1．Dreamweaver 2．Frontpage
2017年8月3日星期四
办公室网络信息技术
1.5网站规划
1.5.1 网站制作流程 1．确定网站主题 2．搜集资料 3．规划网站 4．选择合适的制作工具 5．制作网页 6．上传测试 7．推广宣传
扬州大学机械工程学院 第16页 2017年8月3日星期四
办公室网络信息技术
1.5.2 网站策划书 1．网站建设目的及功能定位 2．网站内容模块规划 3．网站语言 4．网站设计风格 5．网站架设描述
页面6 6.htm
扬州大学机械工程学院
第8页
2017年8月3日星期四
办公室网络信息技术
1.2.2 网页页面布局 1．网页设计和布局原则 2．网站命名和标志 网站命名应遵循以下的原则： （1）体现网站的主题，凝练，概括性强。 （2）合法、合情并合理。 （3）字数不要太多，一般控制在6个字以内。 （4）有个性，体现一定的内涵，可给浏览者更 多的视觉冲击力和空间想像力