第12部分网页制作和网站建设-PPT精品
网页制作webpage
Dreamweaver既是针对专业网页设计者 而特别开发的可视化网页设计工具，作为一 个所见即所得的网页编辑器，Dreamweaver 为用户提供了方便快捷的属性工具条、对象 工具条、站点管理窗口及快速工具条等工具， 不仅使得制作过程更加直观，同时也大大简 化了网页制作的步骤。
Fireworks集合了矢量、位图绘图工具的 优点，具有强大的web绘图功能。从扫描图 片到绘制矢量图，从修饰位图到输出风格各 异的按钮和Banner，从选择安全的调色板到 优化图形，从分割图片到制作Image Map， 从制作特殊文字效果到创建复杂、鲜活的动 画……以往需要多个软件才能完成的工作， Fireworks统统都给解决了。
style等。
<BLOCKQUOTE><／BLOCKQUOTE>:之间加入的文本将会在 浏览器中按两边缩进的方式显示出来。
3.列表标记 <ul>无序列表:用来创建一个标有圆点的列表； <ol>有序列表:它是用来创建一个标有数字的列表；
HTML语言的标记及其用法
4.表格标记 <table>…</table>建立表格；其间可以通过
下面给出的分别是选中窗口时（上）和选中图像时（下）的属性窗口：
代码面板
打开代码面板：
1. Window---Code Inspector; 2. 键盘上的[F10]键； 3. 单击文件工作窗口右下方的按钮； 设置代码面板： 设置代码形式：设置系统、面板上以及固定字体的大小、样式等。 设置代码面板的背景、文字和标记的顔色： 均在Edit—Preferences命令打开的对话框中进行（如下图）
href:链接目标的地址；target:链接目标的窗口名；若
《网页设计与网站建设》课程教学改革与实践
《网页设计与网站建设》课程教学改革与实践摘要：随着网络技术的快速发展，市场对“网页设计制作员”岗位的需求与日俱增。
基于职业岗位要求和实际教学中出现的问题，对《网页设计与网站建设》课程的教学目标、教学内容、教学方法、考核方式等多个方面进行了改革与实践。
关键词：网页设计；网站建设；教学改革中图分类号：tp434 文献标识码：a 文章编号：16727800（2013）0020170020 引言《网页设计与网站建设》是计算机网络技术专业的核心课程，随着网络技术的迅速发展，市场对“网页设计制作员”岗位的需求与日俱增。
在传统的教学和考核方式下，学生虽然能够掌握一定的网页制作知识和技能，但实际动手能力不强，教学与社会职业岗位要求脱节，不利于学生将来的职业发展。
1 课程现状及存在问题笔者所在学校的计算机应用技术、计算机网络技术、电子商务和物流管理4个专业均开设了《网页设计与网站建设》课程，由于互联网的普及，学生大多对此课程很感兴趣。
想要制作出精美的网页，需要融合各种专业知识。
网页制作常用软件有dreamweaver、photoshop、flash等，学生面对这么多的软件不可避免会产生畏难情绪，觉得涉及知识面太广，没有信心能同时熟练运用这些软件。
另外，教学内容陈旧，不符合市场岗位需求；教学方法不灵活，常常是教师先在多媒体教室进行理论教学，然后学生通过上机实验验证各网页元素的使用；考核方式单一，不能综合考核学生的动手能力，课程学完后，很多同学仍然不会制作一个完整的网站，又或者设计出来的网页仅仅只是模仿别人已有成果，缺乏个人独立思考和创新。
2 教学改革措施2.1 课程定位与目标《网页设计与网站建设》是计算机网络技术专业的核心课程，实践性较强。
本课程以图形图像处理技术、动画设计基础为前导课程，从高等职业技术教育的特点出发，以培养学生实际动手能力为目标，使学生具备网页素材搜集、网站布局和规划、网页元素制作、脚本代码编写、网站发布、网站管理和维护等知识和技能，并培养学生团队协作能力、沟通能力、分析解决问题能力和项目实施能力，同时也为后续课程《动态网页设计》的学习奠定基础。
《网页设计与制作》课程标准
《网页设计与制作》课程标准序言：《网页设计与制作》是理实一体化课程，是计算机专业（软件与信息服务、数字媒体、计算机应用专业）的一门重要的专业必修课。
本课程定位于WEB技术开发工作岗位。
它是WEB前端技术开发的必备课程，在整个课程系统中拥有重要的作用，一、课程的说明：经过本课程的学习，使学生认识网页设计技术的发源和发展、常用的网页制作软件及HTML语言，掌握运用Dreamweaver（以下简称DW）网页制作软件制作网页的方法，经过运用Photoshop图像办理软件和Flash动画制作软件，三个软件相互当合，达成网页设计与制作任务的方法。
为此后从事网页设计与制作、网站开发和管理确立基础。
在网页设计的实践中要点培育团队协作、交流交流能力，培育自主学习能力和探究创新能力。
二、课程内容与基本要求：该课程波及的知识是网页设计人员必备的基本技术，职业活动与课程内容的对应关系以下：三、教课目的1、职业要点能力目标(1) 掌握使用Photoshop进行图像办理的基本方法及操作技术(2) 掌握DreamweaverCS5的基本知识及操作技术(3) 掌握成立与管理站点的方法(4) 掌握制作主要内容为文本的网页的方法(5) 掌握在网页中插入与编写图像的方法(6) 掌握在网页中插入多媒体元素的方法(7) 掌握表格办理与网页布局的方法(8) 掌握创立超级链接的方法(9) 掌握使用框架制作旅行网站的方法(10) 掌握创立和使用模板的方法(11) 掌握创立和使用库的方法(12) 掌握在网页中增添AP Div的方法(13) 掌握在网页中使用行为的方法(14) 掌握HTML基础知识及经过代码修饰网页的方法(15) 掌握使用CSS款式表修饰网页的方法(16) 掌握动向网页的观点及简单动向网页的制作方法2、职业特意能力目标(1) 经过达成有关的项目，掌握网页设计的基本工作流程。
(2) 经过达成有关的项目，掌握网页设计常用工具的使用方法。
网页制作与网站建设
站点的基本管理
文件管理 新建文件或文件夹 删除、复制、重命名、移动文件或文件夹 导入和导出站点 导入：[文件]—[导入]—[添加文件] 导出：[文件]—[发布站点]
站点的基本管理 删除站点 鼠标右击文件夹列表中站点文件的根 目录—[删除] 站点设置 [工具]—[站点设置]—[常规]—[站点名 称]
取消主题
[格式]—[主题] 对所选网页或所有网页设置无主题
修改主题
选用主题后，如需修改其背景图片，[修改]—[图 形]—[浏览]选择图片文件—[另存为]，以其副本保 存，不破坏原有的主题
创建导航栏
是系统根据站点中网页之间的导航结构创建的 一种超级链接，它使制作者可以将不同层次网 页的超级链接以有效的方式显示在网页上，从 而大大方便了浏览。如在主页的导航栏中，可 以显示指向所有子页的超级链接；在子页的导 航栏中，可以显示所有指向主页以及所有同层 次网页的超级链接。
2.格式工具栏 3.DHTML效果工具栏 4.报表工具栏 5.表格工具栏 6.导航工具栏
7.定位工具栏
8.图片工具栏
9.样式工具栏
网页的建立、打开和保存 文本的输入和字符格式的设置 段落格式的设置
[格式]—[段落] 文本缩进、段间距、行间距 [格式]—[项目符号和编号] [样式]—[格式]—[字符] 字体、字型、字号颜色等
使用主题
主题是指一组预先定义的包括背景图案、字 体、项目符号等格式的统一式样。通过为网页 应用主题，可以使网页具有独特一致的背景、 标题、项目符号、水平线、按钮字体等格式。 如为整个站点应用主题，可以使站点中所有网 页保持协调一致的风格。
使用主题 选择应用主题
[格式]—[主题] 对所选网页或所有网页设置主题
2024版《网页制作》教学设计优质课比赛优秀设计
能力目标
能够熟练运用HTML、CSS和JavaScript等前端技术，完成静态网页和动态网页的设计与开发； 能够使用PHP、Java等后端技术，实现网站数据的处理和交互功能；能够运用响应式设计和 移动端开发技术，实现网页在不同设备上的适配和呈现。
素质目标
培养学生的创新意识和团队协作精神，提高学生的审美能力和用户体验设计能力，增强学生 的沟通能力和职业素养。
介绍如何使用JavaScript、PHP等后 端技术实现网页的交互功能和动态效 果。
响应式网页设计
讲解响应式网页设计的原理和实现方 法，使网页能够自适应不同设备的屏 幕尺寸。
8
教学方法
2024/1/28
案例教学法
01
通过分析经典案例，让学生了解优秀的网页设计作品的特点和
制作方法。
实践教学法
02
通过上机实践，让学生亲自动手制作网页，提高实际操作能力。
VS
课程定位
本课程是计算机科学与技术、软件工程等 专业的核心课程之一，也是其他相关专业 的重要选修课程。它旨在培养学生具备网 页设计与开发的能力，以适应信息化社会 对网页制作人才的需求。
2024/1/28
4
教学目标与要求
知识目标
掌握网页制作的基本概念和原理，了解网页设计与开发的前沿技术和趋势。
2024/1/28
18
教学反思与改进
2024/1/28
教学内容反思
针对教学过程中出现的问题和不足，对教学内容进行梳理和调整， 以提高教学效果。
教学方法改进
根据学生的反馈和学习效果，尝试采用新的教学方法和手段，如案 例教学、项目驱动等，以激发学生的学习兴趣和主动性。
教学资源优化
根据教学需求和学生实际情况，不断更新和完善教学资源，如教材、 教案、教学视频等，为学生提供更加优质的学习支持。
网页制作与网站建设
网页制作与网站建设1. 简介随着互联网的发展，网页制作和网站建设已经成为了一个重要的行业。
越来越多的企业和个人都意识到拥有一个优质的网站对于宣传、品牌建设和业务拓展的重要性。
本文将介绍网页制作与网站建设的基本概念、流程以及所需的技术和工具。
2. 网页制作的基本概念网页制作是指根据设计要求和用户需求，将页面设计图转化为实际的网页的过程。
它包括了页面布局、内容排版、图像处理、交互设计等方面。
在网页制作过程中，要考虑到页面的美观性、用户体验和响应速度等因素。
网页制作涉及到的基本概念有：•HTML：超文本标记语言，用于描述网页内容和结构的标记语言。
•CSS：层叠样式表，用于控制网页的布局和样式。
•JavaScript：用于实现网页的交互效果和动态功能的脚本语言。
3. 网站建设的流程网站建设是指从零开始搭建一个完整的网站，包括网站的整体规划、设计、开发和发布等过程。
一个成功的网站建设需要经过以下几个主要步骤：3.1 网站规划在网站规划阶段，需要明确网站的目标、受众和内容，确定网站的整体结构和各个页面的布局。
这一阶段还包括了对竞品分析和市场调研，确保网站能够满足用户需求并有竞争力。
3.2 网站设计在网站设计阶段，需要根据网站规划的要求进行页面设计。
设计师通常会使用工具如Photoshop或Sketch来设计网页的视觉效果，包括页面布局、颜色搭配、图像处理等。
3.3 网站开发在网站开发阶段，需要将设计好的页面转化为实际的网页。
开发者通常会使用HTML、CSS和JavaScript等技术来编写网页代码，并根据需求实现网页的各种功能和交互效果。
除了前端开发，网站建设还包括后端开发，用于处理用户提交的表单数据、管理网站的内容和用户账户等。
3.4 网站测试和优化在网站开发完成后，需要对网站进行测试，确保在不同的浏览器和设备上都能够正常显示和运行。
同时还需要对网站进行优化，提高页面的加载速度和用户体验。
3.5 网站发布和维护当网站开发和测试完成后，可以将网站发布到服务器上，使用户可以通过Internet访问网站。
网页设计与制作PPT图文教程
10 /37
FTP
文件传输
登陆ftp://210.45.160.13 打开“网页制作软件”文件夹 下载安装Dreamweaver 8.0
11 /37
Telnet
远程登录 操作方法:
• 单击”开始”菜单----”运行” • 输入“ Telnet ”
30 /37
上机作业
实验一 制作带有文本、图像和超链接等标 记的页面 要求：
• • • • 上机课须带教材 上机座位固定 遵守机房纪律 遵守上机纪律
31 /37
课后作业
1. 解释下列名词：网络、万维网、HTTP、FTP、域 名。 2. WWW的结构是怎样的？ 3. 一个完整的URL结构是什么？举出几个URL的例 子。 4. 如何设置IE的起始页？如何更改IE临时文件夹的 空间大小？ 5. 描述网站建设的具体步骤。 6. 网页设计应遵循哪些原则？ 7. 常见的网页布局类型有哪些？
电子邮件
Internet简介
计算机网络：是指通过网络设备把在地理上 分布于不同地点的多个计算机系统连接起来， 用来实现信息交换、资源共享和协同工作等 功能的系统。 Internet：是全球最大的、开放的、由众多网 络互联而成的计算机互连网，又称“因特 网”。
5 /37
Internet简介（续）
Internet的起源和发展 Internet的功能和应用
• •
14 /37
WWW工作原理
客户机、服务器、 HTTP(超文本传输协议)
15 /37
URL
统一资源定位器 传输协议://主机名[端口标识]/路径/文件名 举例：
• http://210.45.160.37 (IP地址) • (域名地址)
《网页设计与制作》课程标准
《网页设计与制作》课程标准适用专业：计算机专业学时： 72课时1、课程定位和课程设计《网页设计与制作》课程是中职计算机相关专业的一门专业必修课程。
本课程以图形图像处理为前导课程，本课程将从职业技术教育的特点出发，以培养学生实际动手能力为目标，使学生具备网页制作、网站规划与网站维护的专业能力和方法能力，以及培养学生的团队协作、沟通表达、工作责任心、职业规范和职业道德等综合素质和能力。
作为专业的核心主干课程，使学生掌握商业网站的开发和流程，并能独立进行操作，在就业时能够成为一个合格的人才。
学生毕业后可胜任网站管理员、网页设计员、网页美工员等工作岗位。
2、课程目标本课程以学生能够网页网站开发与维护的实际工作能力为学习目标，使学生具备计算机及其它相关专业课学习和应用中所必需的网页制作与网站设计的基本知识和基本技能，形成解决实际应用问题的方法能力，为以后的学习动态网页设计课程打下基础。
1、素质目标(1) 培养具有较强的网页设计创意思维、艺术设计素质；(2) 培养学生在学习过程中解决困难的能力；(3) 培养学生在学习过程中培养兴趣的能力，提高工作、学习的主动性；(4) 培养学生理论联系实际的工作和学生方法；(5) 培养具有高度责任心和良好的团队合作精神；(6) 具有社会责任感。
2、知识目标(1) 了解WEB站点的工作原理；(2) 理解Internet、WWW、HTTP、HTML的定义，计算机网络概念和作用；(3) 了解服务器、客户端、浏览器的概念和作用；(4) 掌握常规网站的规划及流程；(5) 熟练掌握HTML语言中各种标记符的运用能力；(6) 熟练掌握Dreamweaver应用软件的使用；(7) 理解网页中脚本语言的使用方法；(8) 熟练开发常规静态网站。
3、能力目标(1) 熟练掌握Dreamweaver应用软件制作网站及网页；(2) 熟练掌握使用绝对和相对URL，创建超链接，图像链接；(3) 掌握在网页中添加CSS的方法；(4) 培养学生设计、制作和维护动态网站。
网站建设与网页制作基础入门教程
网站建设与网页制作基础入门教程网站（Web Site）是一个比较抽象的概念，随着互联网的快速发展，网站建设就如建房子一样，已经越来越多。
但是，要建设一个新型的网站，确实需要懂得一些网站建设与网页制作基础入门知识，以下介绍网页制作与网站建议过程中的基础知识与使用方法。
一、注册域名域名（网站地址）是由一些字母或者汉字加入“域”的代号（com、cn、edu、net……）用小数点隔开所组成网站独一无二的标志，域名的组成，域名有英文域名，也有中文域名，例如百度域名为（），而中文域名很多都不用www，例如本人的网站（http://设计家园.com）就没有www，域名中"http://"是域名的协议（或称服务方式）；第二部分就是网站地址（也有使用IP地址），如百度网的主机地址为（），而中文域名的主机地址如（设计家园.com)，也有使用IP地址作为主机名，例如清华大学Web主机的IP 地址是“166.111.4.100”，这四个数字组合起来就是IP地址，除了可以用域名地址搜索网站，还可以用IP地址来搜索打开网站的网页，例如在浏览器的地址栏输入 http://166.111.4.100(有时也加入端口号，如果端口号为80可以忽略），就可以直接访问清华大学的网站。
二、租用网站空间域名就如一个刚刚出生的婴儿，要让婴儿在社会中成长，还需要有立身之地，网站空间就是域名立身之地。
只有租用网站空间才可以把文件存放到网站让别人浏览到网页，当前很多新开网站，特别是个人的小型网站租用的都是虚拟主机空间，虚拟主机空间虽然是很多人共同租用一个空间，但在管理上不用自己来维护，并且价格比网站空间便宜很多。
对开个人网站来说，租用中国大陆空间，一般都需要申请备案，队了时间要求半个月以上才能使用虚拟主机空间，而能备案基本都是公司或者单位集体开办的网站，因此很多个人网站租用的都是香港空间或者国外的空间，这些外地的空间不用备案，只要到有空间租用的网站（如中国E 动网）申请空间，就能马上按域名、空间地址（IP地址）来建设网站。
《网页设计与网站建设》课程教学改革与实践
《网页设计与网站建设》课程教学改革与实践摘要：随着网络技术的快速发展，市场对“网页设计制作员”岗位的需求与日俱增。
基于职业岗位要求和实际教学中出现的问题，对《网页设计与网站建设》课程的教学目标、教学内容、教学方法、考核方式等多个方面进行了改革与实践。
关键词：网页设计；网站建设；教学改革0 引言《网页设计与网站建设》是计算机网络技术专业的核心课程，随着网络技术的迅速发展，市场对“网页设计制作员”岗位的需求与日俱增。
在传统的教学和考核方式下，学生虽然能够掌握一定的网页制作知识和技能，但实际动手能力不强，教学与社会职业岗位要求脱节，不利于学生将来的职业发展。
1 课程现状及存在问题笔者所在学校的计算机应用技术、计算机网络技术、电子商务和物流管理4个专业均开设了《网页设计与网站建设》课程，由于互联网的普及，学生大多对此课程很感兴趣。
想要制作出精美的网页，需要融合各种专业知识。
网页制作常用软件有Dreamweaver、Photoshop、Flash等，学生面对这么多的软件不可避免会产生畏难情绪，觉得涉及知识面太广，没有信心能同时熟练运用这些软件。
另外，教学内容陈旧，不符合市场岗位需求；教学方法不灵活，常常是教师先在多媒体教室进行理论教学，然后学生通过上机实验验证各网页元素的使用；考核方式单一，不能综合考核学生的动手能力，课程学完后，很多同学仍然不会制作一个完整的网站，又或者设计出来的网页仅仅只是模仿别人已有成果，缺乏个人独立思考和创新。
2 教学改革措施2.1 课程定位与目标《网页设计与网站建设》是计算机网络技术专业的核心课程，实践性较强。
本课程以图形图像处理技术、动画设计基础为前导课程，从高等职业技术教育的特点出发，以培养学生实际动手能力为目标，使学生具备网页素材搜集、网站布局和规划、网页元素制作、脚本代码编写、网站发布、网站管理和维护等知识和技能，并培养学生团队协作能力、沟通能力、分析解决问题能力和项目实施能力，同时也为后续课程《动态网页设计》的学习奠定基础。
《网页设计与制作》PPT课件
一种简单滚动图片制作方法1：
将下面代码放在<body>和</body>之间就可以了： <p> <marquee width="495" height="150"> 滚动图片 图片地址和名称 <img src="鸽.gif" > <img border="0" src="旗.gif" > <img border="0" src="猪.gif" > </marquee> </p>
二、编辑网页
1、输入汉字：在新建的“new_page_1.htm” 页面上输入汉字信息，并进行字体、字号、 颜色等相关修饰。 2、插入图片：在当前页面上“插入”图片， 请单击“命令菜单”下的“插入”/“图 片”/“来自文件（或剪贴画）”，选择一张 图片，单击“确定”。 教学网站： /qjbok
的 “插入 /层”
2、输入数据：单击层，便可以向其中输入文字，
插入图片、动画等等信息。 3、移动：拖动层的左上角控制柄，就可以任意移 动层到任何位置。 4、重叠层：可以将多个层重叠，以达到一定的效 果。 5、改变层次：双击“层控制柄”，可以用鼠标 拖动相应的层到任何位置，到达改变层的次序。
二、编辑网页
3、预览：单击屏幕左下角的“预览”按钮，于是新 网页在浏览器下的显示效果就出现了。再单击“设 计”返回页面设计状态，可以继续修改。也可以单 击菜单栏“文件”下的“在浏览器中预览/ Microsoft Internet Explorer”或直接按<F12>键可 以在IE下预览制作的网页。 4、保存：单击 “文件”/“保存”，为文件起个名字， 并修改“保存位置”为D盘上“座号姓名”文件夹， 然后单击“确定”。这样所有网页使用的文件都放 在这个文件夹中，便于使用和管理。例如：888张 三 思考题：1、怎样找到你的文件夹？ 2、如何修改已经存盘后的网页文件？
网页设计与制作基础知识
网页设计与网站建设第1章网页制作基础知识本章内容1.1 基本概念☐计算机网络是Internet的基础，是多台计算机通过特定的连接方式构成的一个计算机的集合体。
☐网络是现代社会传播信息的重要途径，而网页又是这一途径中最为重要的手段。
可以说，在上网冲浪已经成为一种时尚的今天，网页已经成为人们与外界沟通的重要桥梁。
1.1.1 什么是Internet☐Internet，即英特网的英文表示，是最著名的广域网。
☐全世界的计算机相互连接而形成一个整个地球规模的计算机网络，这个全地球规模的计算机网络就是Internet。
☐在Internet中的任意一台计算机都可以从Internet上的其它计算机中来获得信息。
Internet的历史它起源与1969年，是由美国国防部设立的名为APPANET的军用网络。
1982年，美军方从APPANET 撤出，主要用于学术机构的连接，科学家可以分享数据今天Internet，以千万计的用户使用的全球性网络，没有人或机构拥有或全面控制。
Internet在我国的发展现状从国内Internet的发展现状来看，1994年4月，中科院计算机网络信息中心正式接入Internet，从此，中国Internet发生了飞速的发展。
截至2009年底，我国网民人数达到了3.84亿，即每四人中就有一人是网民。
另外网站数、IP地址等也迅速增长，分别达到251万和2.3亿。
从域名、网站数、IP地址等增长情况来看，我国互联网资源得到了全面提升。
Internet的接入方式PSTN接入（电话拨号）ISDN接入（综合业务数据网）DDN专线接入（数字数据网）DSL接入（宽带技术）分为对称的DSL和非对称的DSLInternet基本服务功能WWW服务WWW（World Wide Web，可译为“万维网”），是一个基于超级文本的信息查询工具。
WWW是在Internet的基础上，由各计算机节点上的WWW软件和超级文本格式的信息文件组成的。
网页制作与网站建设实践课程
网页制作与网站建设实践--如何添加一个带有滚动条的文本框我们都知道大篇幅的文章会占据页面的大部分空间，从而影响页面整体的美观性，而通过为其添加一个带有滚动条的文本框，则能够很好地解决上述问题。
下面就是相关语法：style='color: #ffffff;background-color: #000000;border: solid 2px black;width: 120px;height: 200px;overflow: scroll;scrollbar-face-color: #889B9F;scrollbar-shadow-color: #3D5054;scrollbar-highlight-color: #C3D6DA;scrollbar-3dlight-color: #3D5054;scrollbar-darkshadow-color: #85989C;scrollbar-track-color: #95A6AA;scrollbar-arrow-color: #FFD6DA;'>日志文字上述语法生成一个带有黑色背景及灰蓝色边框的文本滚动框。
语法里的参数相当简单，主要是控制不同部分的色彩，你可以做相应变化并在预览中观看实际效果。
至于调整文本框的大小，你可以在插入此语法后退出HTML编辑模式，然后在日志编辑页面使用鼠标直接进行调整。
接下来说说文字竖排是如何实现的。
除了制造特殊效果，我在Space 空间展示的文字竖排没有什么真正的实用性，只会给阅读者造成麻烦，不过本着尽可能挖掘Space潜力的原则，我还是尝试了如下的语法：日志文字这个语法中唯一的亮点就是Writing-Mode这个参数，其后的tb代表文字排列从上到下，rl代表从右到左。
实践人：余奇。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
动换行显示。对住址、数学算式、一行数字、 程序代码等尤为有用。 (4)<blockquote>：按缩进效果显示，与普通文本 文件中使用Tab键缩进效果一样。
(2)<font>
– color属性：字体颜色，用6位十六进制的数字或颜 色名表示。 如：要把文字设为红色—— <font color="#FF0000">红色字体</font> <font color="red">红色字体</font>
– size属性：字体大小，分为7个等级，1号字体最小， 7号字体最大。 如：<font size=7>设为7号字体</font>
– Dreamveaver：Adobe产品。目前应用最为广泛， 它是一款集网页制作和管理网站于一身的所见即所 得网页编辑器，可以对HTML网页文件进行可视化编 辑，还集成了程序开发语言。
2019/12/16
10
12.1.3 网页常用制作工具
(2)动画制作工具：Flash
– Flash：交互式动画设计工具，可以将音乐、声效和 动画方便地融合在一起。采用矢量绘图技术，因此 放大后也不会失真，且容量小。
面与浏览器窗口左边沿、上边沿的距离，单位为像素。 – bgproperties 属 性 ： 页 面 背 景 图 像 的 特 性 ， 值 为
“fixed”表示页面背景图像为固定，不随页面的滚动而 滚动。
2019/12/16
22
12.2.2 文本控制
1. 字体属性
(1)<h1>—<h6> 分别表示6种大小不同的标题字体，<h1>表示 的字体最大，<h6>表示的字体最小，标题标签 间的内容显示为黑体字。
<bgsound src="bg.midi" loop="-1">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312-80">
<script language="JavaScript">
Document.write("Hello net.")
网页本质上就是一个存放在互联网中某个Web服务 器上的文件。
当用户访问该网页时，存放网页的服务器把网页传 送到用户计算机，通过网页浏览器解读并展示出来。
访 问 一 个 网 站 时 ， 打 开 的 第 一 个 网 页 称 为 主 页 (Homepage)，也叫首页。
2019/12/16
3
12.1 网页基础
下时)的颜色。 –vlink属性：访问过的超链接文本的颜色。
2019/12/16
21
12.2.1 HTML文档结构
– background属性：背景图像文件。 – bgcolor属性：背景颜色。同时设定背景图像和背景颜
色时，背景图像优先。 – leftmargin属性、topmargin属性：分别为网页显示画
<b>粗体
<i>斜体
<sup>上标
<sub>下标
<big>大字体
<small>小字体
<u>下划线
<s>、<strike>删除线
<tt>打字机等间距字体
2019/12/16
24
12.2.2 文本控制
2. 文本布局 (1)<p>：创建一个段落。
– align属性：说明对齐方式，取值为left(左对齐)、 center(居中)、right(右对齐)。
2. <head> <head>标签对之间的内容定义了HTML文档的 头信息部分，包含了网页的一些基本信息。标签 对间的内容不会在浏览器的文档窗口中显示。
2019/12/16
17
12.2.1 HTML文档结构
例：
<html>
<head>
<title> 这是一个头信息的例子，这是网页标题
</title>
11
12.1.4 网页制作流程
(1)网站定位 明确客户要求制作一个什么样的网站。
(2)收集网站素材和策划栏目内容 可以让客户提交一份网站的栏目计划书，收集 整理网站素材、确定栏目内容后一般要起草栏 目规划书备案。
(3)提出页面设计方案 主要是美工根据前面的网站定位和栏目策划来 设计页面，包括主页和二级页面。
浏览器发出动态网页请求后，服务器对代码进行编
20译19/1后2/16生成HTML代码。
7
12.1.1 网页的分类
动态网页的特点：
(1)有数据库支持，可以降低网站维护的工作量。 (2)交互性好，可以实现更多的功能，如：用户注册、在
线调查、订单管理等。 (3)动态网页并不是独立存在于服务器上的网页文件，只
12.1.1 网页的分类 12.1.2 网页的基本构成 12.1.3 网页常用制作工具 12.1.4 网站制作流程
2019/12/16
4
12.1.1 网页的分类
1. 静态网页 静 态 网 页 是 指 纯 HTML 格 式 的 网 页 ， 一 般
以.htm、.html、.shtml或.xml为后缀名。访问者请 求浏览时，网页在Web服务器中不会发生动态改变。
各元素的显示状态。 HTML文件的一般结构：
<html>
<head> 头信息部分
</head>
<body> 正文部分
</body>
</html>
2019/12/16
16
12.2.1 HTML文档结构
1. <html> <html>标签对位于HTML文档的开头和结束位置， 左标签为开始的标志，右标签为结束标志。
有当用户请求时服务器才返回一个完整的网页。 (4)在搜索引擎检索方面不如静态网页效果好，因此网站
在进行搜索引擎推广时要做一定的技术处理才能较好 地被检索到。
2019/12/16
8
12.1.2 网页的基本构成
(1)文字：需考虑文字的内容和整体效果。
(2)图像：为了不影响网页传输速率，网页的图片不 能太大，常用的图片格式有GIF和JPEG，二者容 量较小且具有跨平台的特性，可在不同操作系统 支持的浏览器上显示。
3. <body> <body>定义了HTML文档的主体部分，标签对之间 是实际要在浏览器窗口中显示的内容和其他用于控 制网页元素显示方式的标签。
–text属性：整个网页中的文字颜色。颜色取值采用十六进 制的红绿蓝(red-green-blue, RGB)值表示，即#rrggbb。
–link属性：未阅读过的超链接文本的颜色。 –alink属性：活动的超链接文本(鼠标移动到超链接上未按
</body>
</html>
2019/12/16
18
12.2.1 HTML文档结构
(1)<title>：网页标题，显示在浏览器窗口的标题栏。 若无<title>命令，则在浏览器的窗口标题栏显 示网页的URL。
(2)<bgsound>：单标签。指定网页的背景音乐。
– src属性：背景音乐文件的路径和文件名。 – loop属性：播放次数，-1表示循环播放。
– 脚本script是使用一种特定的描述性语言，依据一定 的格式编写的可执行文件，又称作宏或批处理文件。
– 脚本程序可以使用户和网页进行交互，但有些脚本 程序会被植入病毒，通过浏览器菜单“工 具”“Internet选项”“安全”，可设置脚本的 禁用和启用。
2019/12/16
20
12.2.1 HTML文档结构
(5)交互性差，在网页功能实现方面相对较弱。
静态网页的浏览：浏览器向Web服务器发出访问 静态网页的请求，Web服务器接受请求后直接将 网页传到浏览器，浏览器解读HTML文件后显示。
2019/12/16
6
12.1.1 网页的分类
2. 动态网页
动态网页一般指用ASP、PHP、JSP或.NET等网络 编程语言编写的运行于服务器端的代1.4 网页制作流程
(4)制作页面
把美工设计的页面变成网页格式，通常是利用 切片工具分割图片，保存成网页格式文件。注 意区分网站中的静态页面和动态页面。
(5)程序设计
把网页串联起来，结合数据库，实现后台功能。
(6)测试发布
网页和程序整合好后，进行本地测试，主要测 试链接的有效性、浏览器中的显示效果等。之 后上传到客户的服务器中，由客户检测试用， 并根据客户反馈意见修改。
(3)超链接：从一个网页指向另一个目的地的链接。
(4)表格：主要作用是控制网页其他元素的布局方式。
(5)动画：常用的动画格式有GIF和SWF。GIF动画 的原理就是高速连续显示多幅静态图片，SWF动 画是用Flash软件制作的矢量动画。
(6)其他元素：音频、视频、表单、脚本语言编写的 特效(如：图片滚动)等。
2019/12/16
23
12.2.2 文本控制
– face属性：字体。
如：<font face="仿宋体">仿宋体文字</font>
注：若浏览者的计算机上没有安装设置的字体，文字 将以标准字体显示。face属性允许列出多个字体，用 逗号分隔，浏览器会根据顺序使用合适的字体显示。