新网页设计与制作项目实训教程 教学课件 严加琼 曾金发 项目14

案例二：企业官网制作
总结词
专业形象塑造
详细描述
企业官网是企业形象的重要组成部分，设计时需注重专业 形象的塑造。采用符合企业品牌形象的颜色、字体和布局 ，以及专业的图片和内容，提升企业形象和可信度。
总结词
用户体验优化
详细描述
企业官网的用户体验至关重要，设计时应注重用户需求和 习惯。提供清晰的信息架构、便捷的导航和搜索功能，以 及响应式设计，确保用户在不同设备和浏览器上都能获得 良好的访问体验。
使用CSS和JavaScript创建一个模 态对话框，当用户与页面交互时弹 出，并覆盖背景内容。
表单验证
使用JavaScript对表单输入进行验 证，确保用户输入的数据符合要求， 提高数据质量。
特效制作
淡入淡出效果
使用CSS动画实现元素从透明到不透明或从一种颜 色渐变到另一种颜色的效果。
滑动效果
使用CSS或JavaScript实现元素在页面上的滑动效 果，如左右滑动、上下滑动等。
本课程将涵盖网页设计理念、HTML、CSS、JavaScript等前端技术，以及响应 式设计、网页性能优化等方面的知识，使学员能够独立完成一个精美、高效的网 页作品。
学习目标
01
掌握网页设计的基本理 念和原则，能够独立设 计出符合用户需求的网 页。
02
熟悉HTML、CSS、 JavaScript等前端技术， 能够熟练地编写网页代 码。
外部样式表
通过外部CSS文件引入样式，并 在HTML文档中使用`<link>`标
签引入该文件，如`<link rel="stylesheet" type="text/css"
href="styles.css">`

• 商务网站规划报告的格式一般包括封面、 目录、前言、正文和附录。其中，正文是 整个报告的核心，主要内容包括：市场分 析，网站目的及定位，网站技术解决方案，
思考与练习
• 1. 福德皮具公司是一家皮具加工生产性企 业，产品以外销为主。随着公司业务的飞 速发展，规模急剧扩大。现在需要建设公 司网站，以更好地树立公司形象，宣传公 司产品，方便快捷地与客户保持沟通和联 系。本次网站建设重点：
1.2.7 配色
• 2）非彩色和彩色的搭配 （1）非彩色的搭配 （2）彩色的搭配 色彩千变万化，彩色的 搭配是研究的重点。依 然需要学习一些色彩的 知识。将色彩按“红→黄 →绿→蓝→红”依次过渡 渐变，就可以得到一个
（1）设计公司网站首页，树立公司美好的 网上形象；
（2）全面展示公司产品，多层次多角度地 介绍产品的信息。
思考与练习
• 2. 某人准备建立一个信息网站，希望通过 有价值的信息吸引点击率，再通过访问量 争取到网络广告发布收益。应该如何定位 网站主题、内容？网站的目标市场定位在 哪些人群？
• 3. 分析Dell电脑的网站定位。 • 4. 网站规划的内容包括哪些？ • 5. 电子商务网站规划报告的内容包括哪些？
1.2.6 网页设计布局
• 设计首页的第一步是设计版面布局。就象 传统的报刊杂志编辑一样，将网页看作一 张报纸、一本杂志来进行排版布局。版面 指的是浏览器看到的完整的一个页面（可 以包含框架和层）。布局就是以最适合浏 览的方式将图片和文字排放在页面的不同 位置。版面布局一般的步骤如下：
（1）画出草案。 （2）粗略布局。 （3）定案。
你认为哪部分最为重要？
1.2 网站设计流程
• 任务导入 • 学习目标 • 任务实施 • 知识拓展 • 思考与练习

探索响应式网页设计的原理和技巧，学习如何创建适应不同屏幕和设备的网 页。
网页排版和布局
深入研究网页排版和布局的原则，包括网格系统、流式布局和固定布局等技术。
图像、音频和视频在网页中的应用
学习如何在网页中嵌入各种媒体文件，创建富媒体的用户体验，提升网页的吸引力。
动态交互效果设计实战
通过实际案例和项目，学习如何使用JavaScript和CSS创建各种动态交互效果。
PHP语言基础
介绍PHP的基本语法、函数和流程控制，学习如何使用PHP开发动态网页。
MVC模式与Web应用程序框架
深入研究MVC模式的原理和应用，介绍常用的Web应用程序框架。
网站发布与维护
了解网站发布的流程和方法，学习如何进行网站的维护和更新。
网站安全和防范策略
探索网站安全的重要性和挑战，学习如何应对常见的安全威胁和攻击。
【完整版】网页设计与制 作课程课件
探索网页设计与制作的全过程，从前端开发基础到后端开发基础，通过丰富 的案例和实战项目，提升您的技能与知识。
网页设历程以及课程的主要内容和学习目标。
前端开发基础
介绍前端开发的基本概念、技术工具和流程，包括HTML、CSS和JavaScript。
网页性能和优化
深入了解网页性能优化的技术和策略，提高网页的加载速度和用户体验。
前端框架的使用
介绍常见的前端框架，如Bootstrap和Vue.js，学习如何使用框架开发快速高效的网页。
后端开发基础
探索后端开发的基本概念和技术，包括服务器端语言和数据库。
数据库设计和应用
学习数据库的基本原理和设计方法，以及如何使用SQL语言进行数据查询和操 作。
HTML语言基础
学习HTML的基本语法和标签，掌握常用标签的用法以及语义化网页的重要性。

上一页 下一页 返回
1.1 认识网页
1.浏览者能够看到的内容
(1)主题：一般情况下，浏览器在所显示网页窗口的标题栏 上显示“主题”。网页的真正主题不一定出现在网页内部， 而是有可能作为显示此网页的浏览器窗口的标题。然而，大 多数网页的标题表现为屏慕上的文本或图像，标题的作用和 在书本或杂志中的作用一样，位于网页中比较醒目重要的顶 部附近，从而给网页赋予了名字。 (2)标题：浏览器在浏览网页时通常以较大字体、粗体或者 其他的突出显示类型来显示标题。一个网页可以有很多标题， 而且标题还可以有多达6层的嵌套深度。 (3)普通文本：是指组成网页基本内容A.多用途的文本。一 般情况下将普通文本中的线和块当作页面中的“段落”。
网页是一种网络信息传递的载体。这种媒介的性质和日 常的“报纸”、“广播”、“电视”等传统媒体是可以相提 并论的。在网络上传递的相关信息，比如文字、图片甚至多 媒体音影，都是在网页中的存储，浏览者只需要通过浏览网 页，就可以了解到相关信息了。
下一页 返回
1.1 认识网页
1.1.2网页是如何形成的
网页是由一些部件组成的，知道这些部件是做什么的很 重要，因为在网页编写或设计过程中，主要的任务就是为每 一个标准的部件选用或编写相应的内容，这些部件有的能够 在网页中直接看到，而有的却不能在网页中直接看到。
上一页 下一页 返回
1.1 认识网页
(4)签名：通常显示在网页的底部。签名标识了网页的作者，并 且常常还包含作者(或者网络竹理员)的电子邮件地址，从而 使访问者可以发送有关此网页的评论或者建议、问题等。
(5)水平线：用来装饰网页，它将网页分割成逻辑上的几个部分。 (6)动画：可以是网页中出现的文本或者图片，不同的是它们以
上一页 下一页 返回

新建好以后，我们就可以打开文档，对它的可编辑区进行编辑了。 如图18所示：
2）使用新网页后再应用模板 选择“文件”新建一个网页文档，然后在“资源”面板的模板中选 定将要使用的模板，点击“应用”，就可以把此模板应用到新建 的文档中去。 当然，我们也可以对已经存在的网页使用模板，具体操作如下： （1 1） 打开要应用模板的网页 （2 2） 选择【修改】|【模板】|【应用到模板】在弹出的模板中 选择一个模板到网页里面。于是我们就可以在网页里对其进行编 辑了。当然了，我们只能对其的可编辑区域进行操作。 我们在应用模板时，为了满足网页需要，可以对模板的页面属性作 设定。但是不能对文档的页面属性作修改。操作如下： 1)选择【修改】|【页面属性】，打开“页面属性”对话框以后，就 可以对其作设定了。如图19所示
此外，对一个已经创建好的模板，我们可以在文档窗口的下拉菜单 中选择【窗口】|【资源】命令，打开“资源”面板，从中选择创 建好了的模板，单击底部的 按钮，即可打开 它对它进行编辑。 或者我们直接在“资源”面板里双击需要编辑的模板，也可对它 进行修改。
7.3 应用模板
有了模板，我们就可以高效，快速的设计出风格一致的网页。在需 要的时候，也可以通过修改模板来自动更新使用模板创建的网页， 使网页的维护变得非常轻松。 下面我们再来学习一下如何用模板来创建新的网页和应用模板于已 存在的网页里。 应用模板创建新的网页有两种操作方法： 1）1） 直接从模板中创建网页 选择【文件】|【从模板新建】，在弹出的对话框中选择一个模板就 可以了。 如图17所示：
3)设定好以后，按“确定”按钮就可以把其运用于模板里了。 除此之外，我们还可以定义模板的可编辑区和锁定区的高亮显示。 操作如下： 1)选择【编辑】|【首选参数】，然后在弹出的对话框中选择“标记 色彩”如图20所示：

1.1 网页和网站
1.1.3 网页的基本功能
1、媒介的作用。使用者与信息之间的媒介。 一方面是发布者，功能是发布信息；另一方面 是浏览者，功能是提供浏览的信息，通过浏览 网页找寻需要的信息。
2、互动的作用。浏览者与网页制作单位之 间互动的窗口，可以单向或双向传递信息。
3、传输的作用。作为传输各种电子文件或 信息之用，如下载说明书、更新文件、驱动程 序等。
超链接的标志一般有：文本、图像、热区 三种。要注意的是，所有超链接标志均应清晰 无误地向浏览者标识出来，让人一看就知道。
1.2 网页中的主要元素
1.2.4其他的基本要素
除上述几种要素之外，在网页上经常使用 的还有动画、视频、声音等各种信息的形式。
1．动画。目前网络上常用的动画类型有 gif和Flash动画两种。
第2讲 HTML语言基础
$ [知识目标]
了解HTML文件的基本结构 掌握HTML中文本的编辑及图像的语法 掌握HTML中各种设置超级链接的语法 掌握HTML中表格和框架的基本语法
8 [能力目标]
掌握进行文本及图像的编辑操作 掌握创建各种超级链接的操作 能够编写简单的HTML网页 掌握HTML文件中表格和框架的使用
1.4 网页设计的基本流程
1.4.3网页的测试
1．浏览器兼容性测试。目前浏览器有： Internet Explorer与Netscape两大主流浏览器，二 者对HTML和CSS等语法的支持度是不同的。在 Dreamweaver中提供了可以检查网页中是否含有某版本浏 览器不能识别的语法功能，设计者可以借助其进行检查。
1.4 网页设计的基本流程
1.4.4网页上传和发布
网页设计好，必须把它发布到互联网上， 否则网站形象仍然不能展现出去。发布的服务 器可以是远程，也可以是本地。如果是发布到 互联网上，要先申请域名和主页空间，然后再 利用专用软件（如：CuteFTP）上传，FTP有很 多种软件，最著名的是 CuteFTP 和 LeapFTP， 也可以用Dreamweaver内置的FTP上传。

3.4.3 添加Flash影片
在网页中我们插入Flash对象的格式一般都是 Flash影片，在浏览网页的时候，Flash影片会通 过“Flash播放器”进行自动播放，Flash影片的 加入可以令网页更加生动和精彩。
3.4.4 添加内置的Flash交互对象
1. 添加Flash按钮 插入Flash影片时，需要用户掌握Flash软件 的使用，在Flash中制作影片来进行插入。在 Dreamweaver MX 2004中，对于不会运用Flash 软件的用户来说，可以直接插入Flash制作的按钮。
模 仿 制 作 未.1 3.2 3.3 3.4 3.5 3.6 文档的操作 页面属性的设置 文本元素的添加和编辑 图像和媒体的处理 超链接的创建与管理 创建文档的小技巧
本章要点


文挡的创建、修改与保存 用页面属性设置网页效果 网页各种元素的添加与编辑 不同超链接的创建与管理 创建文挡的技巧运用
3.3 文本元素的添加和编辑
在网页中，文本是表达网站主题必不可少的 内容，丰富、详实的文本内容会让网页更加充实、 不空洞，文本在网页中占有非常大的比重。因此， 文本内容的输入及合理的设置是制作网页的最基 本也是最重要的内容，虽然操作简单，但是绝对 不能忽视。 在页面中插入文本内容，一般可以通过两种 方式来插入。第一种是直接输入。第二种是从外 部文件或网络中复制文本。
BACK
2. 图像的插入和编辑 3． 翻转图 “翻转图”是图像在网页中的一种动态运用， 又称为“鼠标经过图像”，它在网页中的效果是， 在默认情况下显示为一幅图片，当鼠标经过该图 片时就会变成另外一幅图片，鼠标离开时，又会 恢复成原始图片。
3.4.2 插入Fireworks HTML
在Dreamweaver MX 2004中，可以插入用 Fireworks导出的HTML文档，使Fireworks与 Dreamweaver在制作网页过程中能够互相整合。

2-1
2-1
2-1
2-2
2-2
2-2
3-1
3-1
3-1
A
B
3-1
属性 margin-left margin-right margin-top margin-bottom
语法规则 margin-left:5px; margin-right:10px; margin-top:20px; margin-bottom:15px;
属性值 visible hidden scroll auto
说明 默认值。内容不会被修剪，会呈现在盒子之外 内容会被修剪，并且其余内容是不可见的 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
3-2
4-1
4-1
4-1
属性值 repeat no-repeat repeat-x repeat-y
… <p>花篮的花儿香 <br/>听我来唱一唱 唱一唱</p> <p>来到了南泥湾 <br/>南泥湾好地方 好地方</p> …
2-1
2-2
2-2

符号名称 &nbsp;
&lt; &gt; &amp; &copy;
说明 表示空格 表示 < 符号 表示 > 符号 表示 & 符号 表示版权 © 符号
2-2
3-1
3-1
<body> <h4>无序列表</h4> <ul> <li>桔子</li> <li>香蕉</li> <li>苹果</li> </ul>

置于页面中央：将转换的表格放在页面的中央。
2．表格转换为层
– 选中需要转换成层的表格，选择“【修改】 →【转换】→【表格到层】”菜单命令，打 开如图所示的“转换表格为层”对话框。
“转换表格为层”对话框
防止层重叠。选择此项，可以在建立，移动和调整
层大小时防止层互相重叠。
显示层面板。选择此项，转换后将显示层面板。
链接目标
本章小结
网页布局是网站建设的初始工作，是按照设计的原则 和方法，安排页面元素，并通过色彩调和出不同的网 站基调，使网页内容形成一个有机的整体，充分表达 网站主题的过程。
网页布局的方法很多，大致分为表格布局（包括布局 表格），层布局，框架布局。其中表格布局是最基本 的布局方式。“布局表格”布局、层布局最终都转换 成普通表格来实现页面布局。框架布局是把浏览器窗 口划分成几个不同的区域，在同一个浏览器窗口中显 示多个框架页面的技术。
右边的灰色区域来识别。可以通过鼠标在不同区域点击来选择某个 框架，以设置某个框架的尺寸大小。
单位：设置行、列尺寸的单位。可以是像素、百分比和相对。使
用“像素”单位时，框架的尺寸大小是保持不变的，选择“百分比 ”、“相对”时，框架的尺寸大小随着浏览器窗口的改变而发生改 变。
2．框架的属性设置
框架属性
3.2.2 表格的属性设置
1.边框、填充、间距
（1）边框
一个“一行一列”的表格，至少有两个边框，表格外 边框和单元格边框。边框颜色只有当边框值设置为非 零值时才能显示。当未指定单元格边框颜色时， Dreamweaver会以表格图的3外-2边-3 框颜色作为单元格的边 框颜色。
（2）间距
表格边框和单元格边框之间的距离或单元格边框与 单元格边框之间的距离称为间距。