随着信息通信技术的不断成熟，以及互联网与各行各业的日益融合，越来越多的人接触或从事网页设计制作工作。在介绍网页制作技术之前，我们有必要先了解一下相关的基础知识。本章主要介绍网页相关知识、网页的基本元素以及制作网页常用的技术和软件。
本章学习目标
◎ 了解互联网、因特网、万维网的关系和区别。
◎ 了解网站、网页和HTML的基本概念。
◎ 了解静态网页和动态网页的区别和联系。
◎ 了解HTTP、FTP、IP地址、域名和URL等基本概念。
◎ 能够安装并使用浏览器查看网页。
◎ 了解从媒体内容和布局元素两个角度出发，网页所包含的基本元素。
◎ 了解网页开发所使用的基本技术和工具。
HTML5+CSS3网页设计与制作案例教程
在学习如何设计一个网页之前，我们首先要对网站、网页及其相关知识具有最基本的认识。
1.1.1 互联网(internet)、因特网(Internet)、万维网(WWW)
互联网指由若干计算机网络相互连接而成的网络。进一步讲，凡是能彼此通信的设备组成的网络就叫互联网，即使仅有两台机器，不论用何种技术使其彼此通信，就可以称为互联网。互联网的英文用开头字母小写的internet表示，不是专有名词，泛指由多个计算机网络相互连接而成的一个大型网络。因特网和其他类似的由计算机相互连接而成的大型网络系统，都可算是互联网，因特网只是互联网中最大的一个网络。
因特网是目前全球最大的一个电子计算机互联网，是由美国的ARPA网发展演变而来的。但因特网并不是全球唯一的互联网络，例如在欧洲，跨国的互联网络就有“欧盟网”(Euronet)、“欧洲学术与研究网”(EARN)、“欧洲信息网”(EIN)，在美国还有“国际学术网”(BITNET)，世界范围的还有“飞多网”等。Internet专指全球最大的也就是我们通常所使用的互联网络——因特网，“因特网”是作为专有名词出现的，因而开头字母必须大写。
万维网是指环球信息网，英文全称为World Wide Web，简称WWW。万维网是基于TCP/IP协议实现的，是指在因特网上以超文本为基础形成的信息网，它为用户提供了一个可以轻松驾驭的图形化界面，用户通过它可以查阅Internet上的信息资源。TCP/IP协议由很多协议组成，不同类型的协议又被放在不同的层，其中位于应用层的协议就有很多，比如FTP、SMTP和HTTP。只要应用层使用的是HTTP协议，就称为万维网。简而言之，万维网是通过互联网获取信息的一种应用，我们所浏览的网站就是WWW的具体表现形式，但其本身并不就是互联网，只是互联网的组成部分之一。
1.1.2 网站和网页
网站英文为Web Site。简单来说，网站是多个网页的集合，即根据一定的规则，将用于展示特定内容的相关网页，通过超链接构成一个网站整体。通俗地讲，网站就像因特网上的布告栏一样，人们可以通过网站发布自己想要公开的资讯，或者利用网站提供相关的网络服务。人们可以通过网页浏览器访问网站，获取自己需要的资讯或者享受网络服务。例如，常见的网站有搜狐、新浪、雅虎等。
网页是Internet的基本信息单位，英文为Web Page。网页就是以HTML语言为基础编写的，能够通过网络传输，并被浏览器翻译成可以显示出来的包含文字、图片、声音、动画等媒体形式的页面文件。进入网站首先看到的是其首页，一般情况下，首页集成了指向二级分页以及其他网站的超链接。
2
网页设计基础知识01图1-1所示是新浪网的首页。
图1-1 新浪网首页
1.1.3 网页与HTML
网页呈现在用户面前的是各种文字、图像、动画、音频、视频等丰富的内容，而网页
在本质上是文本文件和其相关的资源，网页最根本的语言是HTML(HyperText Markup Language，超文本标记语言)。HTML是Web编程的基础，是网页设计和开发领域的一个
重要组成部分。HTML指定如何在浏览器中显示网页，它是制作网页的一种标准语言。
图1-2是一个网页示例，其最基本的代码就是HTML语言编写的，它对应的源代码如
图1-3所示。
图1-2 网页示例
3
HTML5+CSS3网页设计与制作案例教程
图1-3 示例网页所对应的源码
1.1.4 静态网页和动态网页
静态网页和动态网页的区别不体现在视觉效果上，而体现在两者所采用的技术上。
静态网页是指没有后台数据库、不含程序的网页，你编写的是什么，它显示的就是什么，不会有任何改变。静态网页更新起来相对比较麻烦，适用于更新较少的展示型网站。静态网页有一个固定的url，且以.htm、.html、.shtml、.xml等形式为后缀。发布在服务器上的静态网页是事先保存在服务器上的文件，每个网页都是一个独立的文件，内容相对稳定，容易被搜索引擎检索。
图1-4所示是一个以.html为后缀的静态网页，其网址为https://www.doczj.com/doc/b816703688.html,/ category-5/category-5-1/category-5-1-1.html。
图1-4 静态网页示例
4
网页设计基础知识01
动态网页一般使用ASP、PHP、JSP、.NET等网络编程语言编写，是运行于服务器端
的代码，浏览时先将服务器端代码执行成HTML代码，然后再显示在客户端浏览器中(访
客是无法看到这个文件的源代码的，看到的只是比如ASP代码通过服务器执行过后的HTML代码)。动态网页可以实现的功能较多，如用户注册、登录、在线调查、用户管理、
订单管理、站内搜索、即时更新新闻、留言或书写评论等，一般以.asp、.jsp、.php等常见
形式为后缀，而且动态网页的网址中通常有一个标志性的？符号。
图1-5所示是一个动态网页，其网址为https://www.doczj.com/doc/b816703688.html,/index.php?catid=7。
图1-5 动态网页示例
1.1.5 IP地址、域名和URL
IP地址是指互联网协议地址(Internet Protocol Address)。IP地址是IP协议提供的一种
统一的地址格式，它为互联网上的每一个网络和每一台主机分配一个逻辑地址，以此来屏
蔽物理地址的差异。
IP地址是一组数字，不方便记忆，因此人们为每台计算机赋予了一个具有代表性的名
字，这就是主机名。主机名由英文字母或数字组成，将主机名和IP对应起来，这就是域名。
域名和IP地址是可以交替使用的，但一般域名需要通过DNS域名解析服务转换成IP地址
才能找到相应的主机。
URL(Uniform Resource Locators，统一资源定位符)是对资源位置的一种表示，是互联
网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件
的位置以及浏览器应该怎么处理它，通常称为URL地址。这种地址可以是各种形式的文件，
也可以是局域网上的某一台计算机，更多的是Internet上的网址。
5
HTML5+CSS3网页设计与制作案例教程
1.1.6 HTTP和FTP
HTTP(HyperText Transfer Protocol，超文本传输协议)是一种常用的网络通信协议，是客户端浏览器或其他程序与Web服务器之间的应用层通信协议。在Internet上的Web 服务器中存放的都是超文本信息，客户机需要通过HTTP协议传输所要访问的超文本信息。
FTP(File Transfer Protocol，文件传输协议)用于Internet上的控制文件的双向传输。HTTP协议用于链接到某一网页，而FTP协议则用于上传或下载文件。
1.1.7 浏览器
浏览器是查看网页的一种工具，它可向服务器发送各种请求，并对从服务器发来的超文本信息和各种多媒体数据格式进行解释、显示和播放。用户需要在计算机上安装浏览器来“阅读”网页中的信息，这是使用因特网的基本条件之一，就像我们需要通过电视机来收看电视节目一样。
一般来说操作系统中都已经内置了浏览器，例如Windows操作系统内置有微软公司的Internet Explorer(简称IE)浏览器，用户也可以自行安装浏览器，其他浏览器还有Mozilla的Firefox、Apple的Safari、Opera、Google Chrome、Green Browser浏览器、360安全浏览器、搜狗高速浏览器、傲游浏览器、百度浏览器、腾讯QQ浏览器等。
不同浏览器对网页的解析可能存在差异，本书案例主要使用IE 11.0浏览器显示网页效果，特殊情况下(如IE 11.0不支持某页面效果)会使用其他浏览器。
网页作为信息的载体，包含各种各样的元素。从网页的内容或者多媒体元素的角度出发，网页包含文本、图像、动画、音频和视频等；从布局设计的角度看，网页包含页眉、主内容区和页脚等。
1.2.1 网页的基本媒体元素
从网页上包含的内容来看，网页的基本元素包括文本、图像、动画、音频、视频等多种媒体元素。除此以外，我们也可把目光聚焦到网页中使用非常频繁的元素超链接上。图1-6所示是新浪网首页的基本媒体元素。
6
网页设计基础知识
01
图1-6 网页的基本媒体元素示例
1. 文本
一般情况下，网页中的信息以文本为主。文本一直是人类最重要的信息载体与交流工具，它能准确地表达信息的内容和含义，所以文本是网页中运用最广泛的元素之一。
为了丰富文本的表现力，网页设计与制作者可以通过设置文本的字体、字号、颜色、底纹和边框等属性来改变文本的视觉效果。建议用于网页正文的文字一般不要太大，也不要使用过多的字体，中文文字一般使用宋体。
2. 图像
图像是美化网页必不可少的元素，适用于网页的图像格式主要有JPEG、GIF和PNG。图像能比文本更直观地表达信息，在网页中通常起到画龙点睛的作用，它能表达网页的形象和风格，恰到好处地使用图像能使网页更加生动和美观。网页中的图像主要有用于点缀标题的小图像、背景图像、介绍性的图像、代表企业形象或栏目内容的标志性图像、用于宣传广告的图像等多种形式。
3. 动画
动画是网页中最活跃的元素，创意出众、制作精致的动画是吸引浏览者眼球的最有效方法之一。但物极必反，过多的动画容易使人眼花缭乱，进而产生视觉疲劳。
网页中使用较多的动画格式是GIF动画(也可以理解为GIF图像)与Flash动画。GIF 动画在浏览器中播放不需要插件，通常用于制作简单的、只需要几帧图片的交替动画。Flash 动画制作出的动画质量较好，许多网页中的大型、复杂的动画几乎都用Flash来制作。一般浏览器中都内嵌入插件Adobe Flash Player用来支持Flash动画的播放。
4. 音频
音频的适当使用能极好地吸引读者，烘托良好的艺术氛围。但添加音乐后，网页加载
7
HTML5+CSS3网页设计与制作案例教程
速度会受到影响。另外，不同的浏览器对于音频文件的处理方法是不同的，彼此之间很可能不兼容。因此，在添加音乐时需要考虑声音文件的大小、品质和在不同浏览器中的差异，适时适度地添加。
用于网络的声音文件格式非常多，常用的是MIDI、WAV、MP3、RM和AIF等。很多浏览器不需要插件也可以支持MIDI、WAV格式的文件，而MP3和RM格式的声音文件则可能需要专门的浏览器插件播放。
5. 视频
视频文件可以给访问者带来强烈的视觉冲击力，让网页内容更加丰富。网络上的许多插件也使向网页中插入视频文件的操作变得非常简单。随着网络带宽的增加，网页中应用的视频文件格式也越来越多，常见的有RM、WMV、ASF、MPEG、AVI、RMVB和DivX等。
6. 超链接
超链接是Web网页的主要特色，指从一个位置指向另一个目的端的连接关系。一个超链接由链接载体和链接目标两部分组成。最常见的链接载体是文本或图片，链接目标则可以是任意网络资源，它可以是另一个网页，也可以是网页上的一个位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是一个应用程序。
1.2.2 网页的基本布局元素
从布局设计的角度讲，网页一般由标题、页眉、主内容区和页脚部分构成，页眉部分通常包括网站Logo和导航栏，如图1-7所示。
图1-7 网页的基本布局元素
8
网页设计基础知识01
1. 标题
网页标题是对一个网页内容的高度概括，便于搜索引擎搜索，预览时通常出现在浏览
器的标题栏以及状态栏中。
2. 页眉
页眉是指页面上端的部分，通常是网站访问者在网页中看到的第一个元素，是网站设
计中非常重要的部分。因其注意力值较高，网页设计者们常常依靠独特的设计手法，搭配
上创意优秀的图片，让网页突破很多空间界限，给人深刻的印象。
大多数网站制作者在页眉部分设置站点名字图片或标志、网站宗旨、展示宣传网站的
广告条和动画、链接网页的导航栏，以及跳转网页的按钮等，有的则把它设计成广告位出
租。当然，页眉也并非所有网页都有，一些特殊的网页就没有明确划分出页眉。
(1) Logo
Logo是徽标或者商标的英文缩写，起到对徽标拥有公司的识别和推广的作用。网络中
的徽标主要是各个网站用来与其他网站链接的图形标志，代表一个网站或网站的一个板块。
一个Logo在网站中的作用主要体现在树立形象、传递信息以及品牌拓展三个方面。
Logo的设计需要从多方面分析，它涉及图形、文字、颜色和排版等各个方面的内容。
通常设计Logo时主要从构成(英文名称、网址、标志图形和主题描述)、颜色、形体(企业品牌
标识和名称)、文字的字体以及文字的抽象这五个方面考虑。图1-8是几个网站的Logo示例。
图1-8 网站Logo示例
(2) 导航栏
导航栏是网站内多个栏目的超链接组合，在网页中起着很重要的作用，它不仅是整个
网站的方向标，而且还能体现整个网站的内容，如同书的目录一样。导航栏是网页设计中
不可缺少的部分，利用导航栏，浏览者就可以快速找到他们想要浏览的页面。
导航栏通常位于网页的顶部或左侧。合理地使用导航栏，可以使网页层次分明，但导
航栏不宜过多，否则留给内容的空间就可能不够(尤其是那些提供横幅广告的网站)。可用
图像、文本或Flash来创建导航栏。文本的加载速度更快、更容易生成，使用CSS样式可
为文本导航栏指定“悬停即改变颜色”等效果。图像导航则显得更美观，因为当鼠标指针
悬停在上方时，图像更容易更改，从而为最终用户提供视觉线索。
9
HTML5+CSS3网页设计与制作案例教程
3. 主内容区
顾名思义，主内容区放置网页的主体元素，往往由文字、图像、下一级内容的超链接等构成，有一些网页还加入音频、视频等多媒体元素。
在设计主内容区时，可以使用DIV等布局元素合理地把网页分割成不同板块；文字和图片巧妙配合、文字和背景和谐对比；还要符合用户的阅读习惯，将重要的内容排在左上方。
4. 页脚
页脚位于网页的最底部，和页眉相呼应。页脚部分通常用来介绍网站所有者的具体信息，如名称、地址、联系方式、ICP备案、网站版权、制作者信息等，其中一些内容也可能被做成标题式超链接，引导用户进一步了解详细内容。
在Web标准中，网页主要由三部分组成：结构(Structure)、表现(Presentation)和行为(Behavior)。对应的标准也分为三方面：结构化标准语言，主要包括HTML、XHTML和XML；表现标准语言，主要包括CSS；行为标准，主要包括ECMAScript(网页脚本语言规范)等。
本节介绍网页标记语言HTML、网页样式设计所使用的技术CSS、最常用的脚本语言JavaScript，以及动态网页编程技术ASP、JSP和PHP等。
1.3.1 网页标记语言HTML
HTML是用于创建网页和设计其他可在网页浏览器中看到的信息的一种标记语言，它以纯文字格式为基础。可以使用任何文字编辑器或所见即所得的HTML编辑器来编辑HTML文件。HTML被用来结构化信息——例如标题、段落、列表和图像等，主要负责网页的“内容”部分。
如果想要专业地学习网页的设计和编辑，必须具备一定的HTML知识。虽然目前有类似于Dreamweaver这样的网页编辑软件存在，这些软件并不要求使用者掌握HTML，但网页的本质是由HTML构成的，掌握好HTML是精通网页制作的最根本要求。
1.3.2 网页表现技术CSS
CSS是Cascading Style Sheet的缩写，中文译为“层叠样式表”，简称“样式表”。W3C(World Wide Web Consortium，万维网联盟)创建CSS标准的目的是以CSS取代HTML 表格式布局、帧和其他表现的语言，用来定义网页外观样式，特别是进行网页的排版布局。HTML和CSS分别实现了网页内容和样式的设计，实现了结构和外观的分离，使站点的访问及维护更加容易。
10
网页设计基础知识01
如今网页排版愈发复杂，布局样式都需要通过CSS来实现。采用CSS技术可以方便
有效地对页面布局，更加精确地控制网页的字体、颜色、背景和其他效果。内容相同的网
页，只需要对CSS样式进行一些改变，就可以实现不同的页面外观和格式。学好CSS技
术是精通网页制作的基本要求。
1.3.3 网页脚本语言JavaScript
脚本语言由ASCII码构成，是一种不必事先编译，只要利用适当的解释器就可以执行
的简单程序。在网页中使用脚本语言，可以丰富网页的表现力，是网页设计中很重要的一
种技术。目前常用的脚本语言有JavaScript、VBScript和JScript，其中JavaScript是众多网
页开发者首选的脚本语言。
JavaScript是一种属于网络的脚本语言，已经被广泛用于Web应用开发，常用来为网
页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。通常JavaScript代码可
以直接嵌入HTML文件中，随网页一起传送到客户端浏览器，然后通过浏览器来解释执行。
1.3.4 动态网页编程技术https://www.doczj.com/doc/b816703688.html,、JSP、PHP等
网页的发展绝不满足于仅供用户单纯地浏览，更应该着重于用户的交互操作和对网站
内容的便捷管理，这些都需要动态网页编程技术来实现。目前常用的动态网页编程技术有JSP、https://www.doczj.com/doc/b816703688.html,和PHP等。
JSP是Java Sever Pages的缩写，是基于Java的动态网页技术标准，用于创建可支持跨
平台及Web服务器的动态网页。从构成情况上来看，JSP页面代码一般由普通的HTML
语句和特殊的基于Java语言的嵌入标记组成，所以它具有Web和Java功能的双重特性。
ASP是Active Server Pages的缩写，是微软公司推出的Web服务器端脚本开发环境。https://www.doczj.com/doc/b816703688.html,是ASP技术的升级换代版，是建立在公共语言运行库上的编程框架，可用于在
服务器上生成功能强大的Web应用程序。https://www.doczj.com/doc/b816703688.html,开发的首选语言是C#及https://www.doczj.com/doc/b816703688.html,，同
时也支持多种语言的开发。
PHP原始为Personal Home Page的缩写，现已正式更名为PHP: Hypertext Preprocessor。
PHP是一种HTML内嵌式语言，也是一种在服务器端执行的嵌入HTML文档的脚本语言。
它的语言比较简单，属于轻量级的高级语言，风格类似于C语言，被广泛地运用于互联
网中。
1.4
网页设计常用工具
HTML文件的编写可以使用任何文本编辑器，如记事本、写字板、Word等，不过在
保存时都必须保存为.html或者.htm格式。为了使设计网页更加简单、方便，有些公司和人
11
HTML5+CSS3网页设计与制作案例教程
员设计了专业的HTML编辑工具，这些工具绝大多数可以分为两类：第一类是基于文本的HTML编辑器，第二类是所见即所得编辑器。
1.4.1 基于文本的编辑器
基于文本的编辑器要求使用者掌握HTML代码，可以对其进行定制从而提高编码速度，通常复杂的机制用于检查编码中的错误。这样的编辑器非常非常多，建议读者多下载几个免费版本进行简单试用。
1. Windows自带的记事本
基于文本的编辑器，最简单的要数Windows自带的记事本，虽然它在严格意义上并不能被称为HTML编辑器，但它简单易得，可以编辑HTML、CSS、JavaScript等，在学习HTML之初是一个非常好的选择。缺点是记事本只是基本的文字编辑软件，没有代码提示、检查等功能。
2. Notepad++
Notepad++是一套自由软件中的纯文本编辑器，它的功能比Windows中的记事本(Notepad)强大，除了可以用来制作一般的纯文字的帮助文档，也十分适合用作撰写计算机程序的编辑器。Notepad++不仅有语法高亮度显示，也有语法折叠、代码自动补全等功能，并且支持宏以及扩充基本功能的外挂模块。
图1-9是Notepad++编辑网页的示例。
图1-9 基于文本的编辑器Notepad++
3. Phase 5
Phase 5是自从1998年起就被人期待和熟知的网页编辑器，它支持大多数语言的格式，例如HTML、PHP、JavaScript和VBScript等。
12
网页设计基础知识01 1.4.2 所见即所得编辑器
所见即所得编辑器不要求使用者了解HTML知识，除了HTML编辑功能外，提供图
形化的“预览”页面效果，允许用户通过看到的页面预期效果进行简单的拖放布局即可。
此类软件中最著名的当属Adobe Dreamweaver(简称DW)，它是美国Macromedia公司(后被Adobe公司收购)开发的集网页制作和管理网站于一身的所见即所得网页编辑器。DW是针
对专业网页设计师特别开发的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平
台限制和跨越浏览器限制的充满动感的网页。Dreamweaver是一款专业的网页制作工具，
它不仅拥有“所见即所得”的可视化编辑环境，还提供了强大的HTML代码编写功能。无
论使用HTML语言，还是使用可视化的编辑器，Dreamweaver都为我们提供良好的工具，
丰富我们的操作。
图1-10是Dreamweaver CS6编辑网页的示例。
图1-10 所见即所得编辑器Dreamweaver
1.4.3 如何选择工具
根据前面的介绍，读者可能会毫无疑问地爱上所见即所得编辑器，因为它具备预览功
能，能进行拖放式编辑，同时也能进行方便快捷的代码编辑，具有更大的灵活性。但一些
开发者更喜欢使用基于文本的编辑器来完成工作，原因是所见即所得编辑器占用更大的系
统资源，并且容易产生冗余代码，使得一些不必要的代码重复出现多次，更糟糕的是所见
即所得编辑器并非所有方式都具有相同的输出效果，往往会“所见非所得”。
综上所述，无论是基于文本的编辑器还是所见即所得编辑器都具有各自的优缺点。本
书涉及的HTML和CSS都可以在记事本或Dreamweaver中进行编辑和处理。目前来看
13
HTML5+CSS3网页设计与制作案例教程
Dreamweaver是今后从事网页设计与制作的一个首选工具，但在学习的过程中，为了专注于代码本身，建议在开始时采用Windows自带的记事本作为网页编辑工具。在学习了基础知识以后，可以使用Dreamweaver，但为了更好地掌握代码的使用，仅仅建议使用Dreamweaver的代码编辑功能。
1.5.1 单选题
1. HTTP的中文含义是( )。
A. 文件传输协议
B. 超文本传输协议
C. 顶级域名网址
D. 以上都不是
2. 构成Web站点的最基本的单位是( )。
A. 网站
B. 主页
C. 网页
D. 文字
3. 网页的基本元素不包括()。
A. 文本
B. 图像
C. 动画
D. 脚本
4. WWW的含义是( )。
A. 网页
B. 万维网
C. 浏览器
D. 超文本传输协议
5. Adobe Dreamweaver是( )软件。
A. 图像处理
B. 网页编辑
C. 动画制作
D. 字处理
1.5.2 填空题
1. 网页呈现在用户面前的是各种文字、图像、动画、音频、视频等丰富的内容，而网页在本质上是由文本文件和其相关的资源组成，网页最根本的语言是 。
2. 从浏览者角度讲，网页是多媒体信息的综合。对于任何一个网页，组成它的最基本元素主要是 、 、 、视频和音频等。
3. 从布局角度讲，网页从上到下一般由标题、页眉、 和 组成，页眉部分通常包括网站Logo和 。
4. 上网浏览网页时，应使用 作为客户端程序。
1.5.3 判断题
1. 互联网(internet)、因特网(Internet)和万维网三者的意思完全相同，只是不同的叫法而已。( )
2. 每个静态网页都有一个固定的url，且以.htm、.html等为扩展名。( )
3. 采用CSS技术可以方便有效地对页面布局，更加精确地控制网页的字体、颜色、背景和其他效果。( )
14
网页设计基础知识01 1.5.4 简答题
1. Web浏览器是什么？
2. 简述HTML及其在网页设计制作中的作用。
3. 简述静态网页与动态网页的定义和区别。
4. 网页制作常用的技术有哪些，分别有什么作用？
15
《网页设计与制作》课程标准 课程代码： 502043 参考学时： 90 学分： 4 课程类型：专业课
2015年 1 月编 一、适用专业 计算机应用技术（3年制中职，5年制高职） 二、开课时间 第4学期 三、课程定位 1、课程性质 本课程是计算机应用技术（3年制中职，5年制高职）的专业课程。 2、教学任务 本课程主要以Dreamweaver软件为操作平台，针对职业教育网络技术专业中理论结合实践的特点，以培养高技能应用型人才为目标，重点加强学生的理论基础和训练学生的实际操作能力。在教学知识模块上首先介绍网页的相关知识，学习HTML标记语言，在此基础上深入学习Dreamweaver软件的操作方法以及网页元素在网页中的使用技巧，锻炼学生网页的排版设计能力，最后通过样式表、客户端脚本、服务器行为的学习让学生熟悉并掌握开发简单动态网站的能力。在本课程的实践教学内容中，选取紧密联系实际的项目并进行详细分解，重点培养学生的静态、动态网页制作能力、具备网站的建立和维护能力、独立思考、解决问题以及自主创新的能力。 四、课程培养目标 1、方法能力目标 1)培养学生谦虚、好学的品质； 2)培养学生勤于思考、做事严谨的良好作风； 3)培养学生良好的职业道德； 4)培养学生事物美的观念； 2、社会能力目标 1)培养学生的团队协作精神； 2)培养学生分析问题、解决问题的能力； 3)培养学生勇于创新、敬业乐业的工作作风； 4)培养学生诚实、守信、坚忍不拔的性格。 3、专业能力目标 1)掌握网页设计相关知识、网页元素组成、网页结构、网站开发流程、网页设计 与制作工具；
2)掌握HTML标记语言并能够熟练使用标记元素来书写网页框架； 3)掌握Dreamweaver软件的使用方法；学习文本、图像等多媒体元素在网页中的 使用技巧； 4)熟练掌握表格的弹性控制及表格元素标记的使用方法并能应用单元格的合并拆 分、表格嵌套来完成网页的排版； 5)掌握模板的使用方法；熟练应用模板来制作、修改、批量更新网页； 6)掌握两栏框架的制作方法和使用浮动框架嵌套网页的技巧； 7)熟悉AP元素的浮动和定位并能结合时间轴来实现多个AP元素的动画效果； 8)熟练掌握表单的制作方法、表单元素标记、了解网页通过表单来提交数据的原 理； 9)掌握网页中客户端行为的概念；能够使用常见的客户端行为来制作前台页面的 动态效果； 10)掌握样式表对网页的外观和格式的控制、样式表的冲突与继承并能够熟练 书写样式； 11)熟练掌握服务器行为的概念、连接数据库、插入、修改、更新、删除操作 记录；能够使用服务器行为开发简单的动态网站。 五、课程衔接 在课程设置上，前导课程有《Photoshop高级应用》，后续课程有《网站建设》六、教学内容与学时分配 教学学时数分配见下表所示 表教学内容与学时分配
网页设计与制作实例教程 习题答案 第1章网页与网站基础 一、选择题 1．A 2．B 3．C 4．C 5．A 二、判断题 1．√2．×3．√4．×5．√ 三、问答题 略 第2章网页规划设计 一、选择题 1．D 2．A 3．C 4．A 5．C 二、判断题 1．×2．×3．×4．√5．√ 三、问答题 1．答：网站需求分析一般包括三个阶段的内容：网站背景分析、总体需求分析、具体需求分析。（每个阶段可再详细描述。） 2．答：可从以下几个方面来阐述网站设计的原则：①日期、时间和数字；②欢迎词； ③弹出窗口和引导页面；④新闻和公告信息；⑤网址；⑥控件；⑦链接；⑧主页内容 3．答：打开新浪网首页，分析其布局类型。（答案略） 4．答：网页色彩搭配方法可从以下两个方面去阐述：①根据页面风格以及产品本身的诉求确定主色；②根据主色确定配色。 网页色彩搭配技巧可从以下几个方面去阐述：①用一种色彩；②用两种色彩；③用一个色系；④用黑色和一种色彩以及色彩搭配忌讳的方面。 5．答：打开当当网，具体分析其规划过程。（答案略） 第3章初识网页制作软件 一、选择题 1．C 2．C 3．B
二、填空题 1．代码、拆分、设计2．文件、资源、规则3．超级链接 三、操作题 略 第4章制作网页内容 一、选择题 1．D 2．B 3．A 4．D 5．ABD 6．D 7．B 8．D 9．A 10．A 二、判断题 1．√2．√3．×4．√5．√6．√7．√8．√9．×10．√三、操作题 略 第5章设置网页超级链接 一、选择题 1．D 2．D 3．A 4．D 5． C 二、判断题 1．×2．×3．×4．√5．× 第6章使用CSS样式美化网页 一、选择题 1．B 2．C 3．C 4．B 5．A 6．D 7．D 8．D 9．B 10．C 11．A 12．A 13．C 14．D 15．D 16．A 17．A 18．B 19．D 20．D 二、简答题 1．×2．×3．×4．×5．×6．×7．√8．×9．√10．√11．×12．×13．×14．√15．√16．√ 第7章规划布局网页 一、选择题 1．B 2．A 3．B 4．B 5．D 二、简答题
《网页设计与制作》课程标准前言： 《网页设计与制作》是理实一体化课程，是计算机专业（软件与信息服务、数字媒体、计算机应用专业）的一门重要的专业必修课。本课程定位于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) 通过完成相关的项目，掌握网页设计常用工具的使用方法。 (3) 通过完成相关的项目，掌握网页布局及美化的基本方法。 (4) 通过完成相关的项目，掌握简单网页交互的制作方法。 3、方法能力目标 形成一定的学习能力、沟通与团队的协作能力，形成良好的思考问题、分析问题和解决问题的能力，养成良好的职业素养。遵守国家关于软件与信息技术的相关法律法规，形成关键性的软件开发与应用的能力。 四、教学内容 第一章网页制作基础知识（4学时） 教学目标： 网页与网站基本概念、网页基本组成元素、常用网页制作软件 主要教学内容： 网页制作基础知识 网页的基本构成元素 网页制作常用软件和技术 第二章 Dreamweaver CS6轻松入门（2学时）
《网页设计与制作》课程说课稿 一、课程定位 《网页设计与制作》课程是我院计算机应用技术专业、计算机网络技术专业及电子商务专业的重要专业基础技能课程，该课程不仅实用性强、应用面广，而且与岗位的联系非常密切，仅仅就这一门课程的学习，学生毕业后就可以从事相关网页设计与制作的工作，考取相关的网页设计与制作员的资格证书，如果将此作为技能基础，继续学好后续基于网络编程的动态网页设计技术，学生还可以从事网络软件的设计与开发，进行商务网站的设计与制作，同时也可以考取网页设计师、网络软件工程师等相关国家职业资格证书。该课程的开设，正好满足我校关于“高素质、技能型人才”培养目标的需求，通过该课程的教学，可以培养出一批优秀的、能够在一线工作岗位上从事网页设计与制作、网站规划、管理与维护的工作人才。基于该课程的主要工作岗位有：网站管理与维护人员、网页设计与编辑人员、网站策划人员及网页美工人员等。 二、课程教学设计的过程与思路 在教学过程中，结合职业岗位对人才的需求（一线工作岗位上从事网页设计、制作、编辑，网站规划、维护和管理的人员）、我校对人才培养的目标（培养高素质、技能型、应用型人才）及本课程对人才培养的目标（能够独立完成一个网站的建设，毕业后能够从事企事业单位的网页设计与制作、网站维护与管理等工作的人才），我们将培养学生熟练的网页设计与制作操作技能作为培养重点，在具体课程教学设计中，应用“工学结合”的教育思路、实施“建构主义”的教学方法，采取“小组协作学习”的学习方式完成整个课程的教学与学习。 在“工学结合”的教育思路下，主要以“工作导向——项目导向——任务驱动——知识学习”的一个架构来完成教学。 具体给大家阐述如下： 老师教学之前的教学设计：根据知识点——设计任务——组合项目——达成一项工作 老师教学中的教学设计：给学生布置一项工作（工作导向）——将工作转化为项目（项目导向）——将项目细化为每一个任务（任务驱动）——通过任务引出知识点（知识学习）
网页设计与制作教程 第一章基础篇 1.INTERNET和WWW INTERNET的功能和应用 1．信息的获取与发布 2．电子邮件 3．网上交际 4．电子商务 5．网络电话 6．网上事务处理 7．远程登陆 8．文件传输 9．电子公告版 10．全球信息网 11．INTERNET的其他应用 WWW简介 1．网页，网页文件和网站 2．HTTP和FTP协议 3．超文本和超链接 4．INTERNET地址 5．域名 6．统一资源定位器（URL） 7．HTML 常见网络浏览器----IE 第二章网站建设概论 （1）信息类网站 （2）交易类网站 （3）有偿信息类网站：101网校、 （4）功能型网站 （5）综合类网站 2.根据网站的性质分类： （1）政府网站 （2）企业网站 （3）商业网站 （4）教育科研机构网站 （5）个人网站 （6）非赢利机构网站 （7）其他类型的网站 3.根据在大型搜索引擎上的设置分类 4.娱乐和休闲类网站；商业与经济类，艺术，人文，健康，医药，政府，政治类，电脑与 网络类，社会和文化，科学与教育类，参考资料类 2.1.2网站建设的步骤 1．制作环境的准备：1）设备：扫描仪，数码相机，打印机2）完善系统环境3）备齐网页开发工具软件，网页制作工具，服务器端程序开发工具及一些实用的辅助工具。。。4。
备齐素材制作和加工软件，包括对图形，动画，刘媒体和声音进行处理的素材制作和加工软件 5）备齐常用的网站发布工具，如FTP文件传输软件 2.网站目标的确定：对象：访问者的类型；主题明确，数据充分。保持目标的简洁 3.网站主题，风格和创痍点的确定 1）主题选材要小而精 2）擅长或感兴趣的内容 ）选题不要太滥：因特网上只有第一，人们记不住第二第三名 2）网站的风格：CI（标志，色彩，字体，标语），版面布局，浏览方式，交互性，文字，语气，内容价值，存在意义，站点荣誉等诸多因素 1）确信风格是建立在有价值的内容上的 2）需要彻底弄清楚站点给人的印象是什么 3）在明确网站印象后，开始努力建立和加强这种印象：1）标志（LOGO）2）色彩3）标准字体4）醒目标准口语5）统一图片处理效果7）使用网站特有的图标；使用自己设计的花边，线条和点；；9）展示网站的荣誉和成功作品10）告诉网友关于个人真实的故事和想法3）网站的创意（准备期，孵化期，启事期，验证期，形成期） 4.网站结构的确立：1）网站结构的确立2）网站目录的设置3）网站链接结构的设置：树状连接结构；星状链接结构3）两种结构的综合 5.网站素材的准备 6.网站制作工具的选择和确定：DREAMWEA VER和FRONTPAGE，PHOTOSHOP，FIREWORKS，动画制作工具：FLASH，COOL 3D；网页特效工具，网页特效精灵，有声有色 7.网站的建设 1）申请E---MAIL帐号 2）申请网页空间：1。打开虎翼网空间申请主页 3）域名注册：对于个人网站，在申请免费网页空间的同时也完成了域名的注册 4）网页制作：先简单后复杂，布局先大后小，制作网页时要多灵活运用软件配备的设计模板，这样可以大大提高制作效率 8。网站的测试（看看有没有问题）和上传（将网站发布到WEB服务器，网页制作工具本身具有FTP功能） 9。网站的宣传和推广（搜索引擎上注册，与别的网站交换链接，运用网络广告） 10.网站的更新和维护：必须不断给它补充新的内容，才能够长期吸引住浏览者 2.1.3 网站设计的原则 1）网站主题不要多于三个：小而精，定位小 2）网站的标准色彩不要超过三种 3）重视网站目录结构的创建（创建目录的原则百度上找出来）：不要将所有文件都存在根目录下，目录层次不超过三层，不要使用过长的目录名，尽量不要使用中文目录名 4）链接层次不要超出三层（便于维护） 5）网页长度应限定在三个整屏以内 6）表格的嵌套层次要控制在三层左右（表格插入表格里） 7）网站导航要清晰 2.优秀网站的五大要素 1）网站内容丰富 2）页面下载速度快（网页简单，不要大量图片）
实验一网页的认识 实验目的 1、掌握利用Internet进行信息游览、搜索，下载网页、图片、文字和文件； 2、利用记事本来编辑HTML文档并浏览； 3、熟悉HTML基本标记的使用。 实验环境 WindowsXP操作系统，内部组成局域网，外连Internet互联网。 实验重点及难点 ◆熟悉HTML的结构、语法。 ◆熟悉HTML基本标记的使用。 实验内容 1、从网上（如网页制作大宝库https://www.doczj.com/doc/b816703688.html,等）下载网页制作时需要的小图片、 动画及flash等网页制作素材。 2、收集你认为比较好的网页并从网页主题、网页内容、结构布局、色彩搭配等方面来分析 网页。 3、通过浏览新浪网站主页分析其网页基本元素，查看其源代码，收藏到收藏夹中，将其设 为主页。 4、制作一个简单的网页sy1-1.html，用记事本编辑，网页标题为“熟悉HTML文档的结构”， 内容为司空曙的《江村即事》，如下图所示。 5、通过附录1的练习熟悉HTML基本标记的使用。（可参考第二章内容）
实验二 Dreamweaver基本操作（一） 实验目的 1、熟悉Dreamweaver的工作环境并了解本地站点的建设和管理； 2、熟悉网页文件的基本操作； 3、熟练掌握在网页文件中文本、图像、超链接的添加和设置。 实验环境 WindowsXP操作系统，Dreamweaver CS3软件，内部组成局域网，外连Internet互联网。实验重点及难点 ◆文字的插入及设置。 ◆图像的插入及设置。 ◆各种超链接的创建。 实验内容 1、使用Dreamweaver建立一个本地站点并命名为“Dreamweaver基本操作”，包含以下几 个文件和文件夹：图片文件夹（images）；音乐文件夹（sound）等。 2、在站点“Dreamweaver基本操作”中新建一个名为sy2-1.html的网页文件，从提供的网 页原始素材中把相关文字复制到该网页文件中，并进行适当的文字设置，结果如下图所示。 3、在站点“Dreamweaver基本操作”中对网页sy2-1.html按如下要求进行编辑并另存为 sy2-2.html，效果如图所示。 ●标题文字大小用
标记； ●作者信息文字大小为24像素，字体为幼圆，颜色为红色； ●古诗文字大小为24像素，字体为隶书，颜色为蓝色； ●在作者信息后加一条水平线，居中，水平线宽度为浏览器的30%，水平线的粗细为20 个像素，颜色为棕色；网页设计与制作课程试卷(五) 一、单项选择题 (本大题共40小题，每小题2分，共80分) (1) Photoshop中，下列__D_____操作不能提交图像变换。 A. 按Return键 B单击选项栏中的“提交”按钮 C. 在变换选框内双击 D在变换选框外双击 (2) Photoshop 中，利用蒙板制作淡出效果的方法为____C____。 A.添加蒙板后使用橡皮图章工具 B.添加蒙板后使用钢笔工具 C.添加蒙板后使用渐变工具 D.添加蒙板后使用填充工具 (3) 下列情况不属于冷色彩的是______A___。 A.黄色 B.蓝色 C.绿色 D.蓝绿 (4)下列情况不属于色彩联想性的是______D__。 A.蓝色——天空 B.黑色——黑夜 C.红色——喜事 D蓝色— —高科技 ^ (5) 创建浮动广告的路径应使用__C______. A.“窗口”—>“时间轴”—>“添加行为”命令 B. “窗口”—>“时间轴”—>“录制层路径”命令 C. “修改”—>“时间轴”—>“录制层路径”命令 D.“修改”—>“时间轴”—>“添加行为”命令 6）下列关于层的说法，不正确的一项是___D_____。 A.在DreamweaverMX中，层用来控制网页中元素的位置 B.层可以放置在网页的任何位置 C.层以点为单位精确定位页面元素 D.层中可以包含任何HTML文件中的元素 (7)要打开网页时弹出一个信息框，可以使用新建行为中的___B____。 A.打开测览器窗口 B.弹出信息 C.调用JavaScript D.播放声音 (8)要上传整个站点，要选定整个站点文件可以按的键是___A_____。 A.Ctrl+A B.Ctrl C.Shift D.Shift+A (9)检查测览器的兼容性应选的选项是_____D__。 A.搜索 B.验证 C.链接检查器 D.目标测览器检 查 (10)下列属于合法IP的是_____A__。 A.202.96.1.2 B.257.33. 21.5 C .33.23.99 D.10001111 (11)在模板中，由DreamWeaverMX自动建立的是____D___。 A.可编辑区域 B.可选区域 C.重复区域 D.锁定 区域 (12)在DreamWeaverMX中有___B____种方法可以建立基于模板的网页。 A.2 B.3 C.4 D.5 (13)模板文件的扩展名为______C_。 A.lbi B.htm C.dwt D.asp (14)下列不是FlashMX的选取工具的是___D____。 A.箭头工具 B.图标是空心箭头的工具 C.套索工具 D.手形工具
网页设计与制作课程标 准 公司内部编号：（GOOD-TMMT-MMUT-UUPTY-UUYY-DTTI-
《网页设计与制作》课程标准前言： 《网页设计与制作》是理实一体化课程，是计算机专业（软件与信息服务、数字媒体、计算机应用专业）的一门重要的专业必修课。本课程定位于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) 掌握动态网页的概念及简单动态网页的制作方法
《网页设计与制作》课程简介 课程名称：网页设计与制作 课程代码：02038 适用专业：初等教育（计算机与信息技术方向） 课程性质：专业核心课程、必修课、专业技能课 学分：3 学分 计划学时：72学时（理论36学时，实训36学时） 一、前言 1. 课程性质 本课程是初等教育计算机与信息技术专业的一门专业技能课程，培养学生网页设计与制作能力，适应初等教育对信息技术教师的人才基本要求，同时满足社会对计算机专业人才的需求，适合从事网站建设相关的岗位。 本课程的先修课程是《计算机应用基础》，后续课程是《https://www.doczj.com/doc/b816703688.html,程序设计》。在完成《计算机应用基础》课程学习后，学生掌握了计算机基本知识和原理，学会了一些应用软件和工具软件的使用，进而学习《网页设计与制作》这门课程不会感到困难。在以后学生还将学习《https://www.doczj.com/doc/b816703688.html,程序设计》课程，能设计和制作动态网页。 2. 课程基本理念 初等教育计算机与信息技术专业培养的对象主要是小学信息技术教师，今后从事小学信息技术教学和学校信息化教育教学的管理者及维护者，建设网站和网页是信息技术教师应掌握的基本技能。课程要理论与实践相结合，培养学生动手能力，能胜任今后小学信息技术教师的工作任务。同时满足社会对计算机专业人才的需求，适合从事网站建设相关的岗位群。 3. 课程设计思路 根据初等教育计算机与信息技术专业人才培养方案，《网页设计与制作》是重要的专业技能课程，是作为小学信息技术教师基本技能训练与考核的项目之一。课程以工作任务来组织内容，以案例驱动贯穿教学过程。由浅入深，最后完成主题网站的开发项目。课程教学中以Dreamweaver的使用为主线，要重视HTML
《网页设计与制作》课程教学大纲 课程名称：网页设计与制作 学分及学时：4学分总学时72学时，理论36学时 适用专业：网络工程 开课学期：第四学期 开课部门：计算机与互联网学院 先修课程：计算机文化基础计算机网络 考核要求：考试 使用教材及主要参考书： 向知礼主编：《网页设计与制作》航空工业出版社2017年 杨松主编：《网页设计案例教程》航空工业出版社2015年 一·课程性质和任务： 本课程全面地介绍网页制作技术的基本理论和实际应用。全书共10章，分为3大部分。前5章为第1部分，主要介绍网页制作的基本理论——HTML，同时穿插介绍Fireworks，Flash，Anfy等软件在网页制作过程中的应用；第6章～第8章为第2部分，主要介绍网页制作技术，包括CSS技术、客户端脚本技术(DHTML)以及XML技术；第9章～第10章为第3部分，主要介绍当前最流行的网页制作工具——Dreamweaver，通过应用实践能够从实际应用的角度进一步巩固所学知识。 课程内容不但包括各种网页制作技术的基础理论，而且强调网页制作的具体应用，使读者既能打下坚实的理论基础，又能掌握实际的操作技能。 二·课程教学目的与要求 以Dreamweaver的使用为主线，介绍网页制作的相关技术。使学生理解网页制作的基本概念和理论,掌握站点的建立和网页的设计,能用HTML语言修改网页;掌握网页制作和站点的
基本知识;掌握站点的创建和网页的编辑;掌握超链接、图像、CSS样式的使用;掌握表格、框架、表单、多媒体对象的使用;理解行为、模板、库、CSS布局的概念和使用;理解HTML语言、网站的测试与的发布； 要求：教学过程中，须注重学生实践操作能力的培养，采取“面向实践、能力为先”的教学思路，教学内容应结合当前WEB技术的发展趋势，把握未来企业级WEB页面开发的发展方向，兼顾各行各业的需求变化，力争面向社会，服务于企业“互联网+”战略。 三、课程学时分配 四·课程教学中应注意的问题 理论课讲解WEB页面开发的原理及方法，并在多媒体教师机上进行演示操作；
《网页设计与制作》课程教案 一、课程定位 本课程是计算机应用技术专业的一门专业基础课程，该课程的学习能够提升他们对网页制作的兴趣，让他们学习网页制作的基本技能，为后继课程打下基础，同时扩展其就业面，为就业做好准备。 本课程的目的和任务是让学生学会Dreameaver CS6、Flash和Fireworks 的使用方法，并能够使用这3款软件制作出美观实用的网页。 二、课程总目标 掌握网页制作的基本方法和技能，掌握网站建设的流程，能够运用所学知识建设常用的网页和网站，同时能够美化网页，设计人性化、艺术化的网站静态页面部分。 （一）知识目标： 1.熟悉网页制作的基本元素； 2.掌握Dreamweaver CS6软件的基本操作方法； 3.掌握在网页中插入文字、图片、声音、flash等的方法； 4.掌握常见的网页布局方法，学会使用CSS美化网页； 5.掌握在网页中使用表单和制作网页特效的方法； 6.掌握简单图形图像的处理，能够制作符合网页主题的图片和简单动画 并巧妙地和网页中内容搭配起来。 7.掌握建设一个功能相对完善的网站的方法并能制作常用的网站的静 态页面部分。 （二）职业能力培养目标 1. 能够根据网站开发需求，去寻找网页设计和网站开发所需要的文字、 图片、动画、声音、视频等素材并作美化处理； 2．能够制作出符合主题色彩的网页，网页要求美化、被绝大多数浏览 者接受和喜爱；
3.能够设计企业网站、政府门户网站、学校网站等常见网站的基本静态 页面。 （三）素质目标 1.具有勤奋学习的态度，严谨求实、创新的学习精神； 2.具有良好的心理素质和职业道德素质； 3.具有高度责任心和良好的团队合作精神； 4.具有运用理论知识发现问题、分析问题并解决问题的能力，同时能够 不断学习，不断创新，让自己的设计越来越完善，有止于至善的精神。（四）职业技能证书考核要求： 可以根据自身情况考取“全国计算机信息高新技术资格证”，“网页设计制作员”，“网页设计师”等职业技能证书。 三、重点、难点章节及内容 1.重点章节： 1.2 网页、网站相关术语简介 1.6 网站建设的基本流程 2.3 Dreamweaver CS6的工作环境 3.2 创建本地站点 3.4 使用站点 3.5 网页设计中的规范 4.1 网页文件的基本操作 4.3 插入文本 4.4 插入水平线 4.5 插入其他基本元素 4.6 创建列表 5.1 超级链接概述 5.2 创建超级链接 5.3 使用dw制作各种超级链接
存档资料成绩： 课程设计报告书 课程名称网页设计与制作 题目设计个人网站主页 分院电信分院 专业班级电子商务 学号 学生姓名 指导教师 2011 年 6月 20日
课程设计评阅意见 评阅人__________职称________ 年月日
目录 第1章课程设计任务书 .................................. 错误!未定义书签。 一、课程设计题目设计个人网站主页............... 错误!未定义书签。 二、课程设计工作：................................... 错误!未定义书签。 三、课程设计的内容要求：............................. 错误!未定义书签。 1、课程设计要求.................................. 错误!未定义书签。 2、课程设计内容.................................. 错误!未定义书签。 第2章课程设计目的 .................................... 错误!未定义书签。 第3章课程设计内容................................... 错误!未定义书签。 设计一选题的基本原则................................. 错误!未定义书签。 （1）选题应反映本专业的培养目标，符合专业综合训练的要求。错误!未定义书签。 （2）选题要有利于深化所学的专业知识和拓展所学的知识面。错误!未定义书签。 （3）选题的难易程度和工作量要适当，保证在规定的时间内，在教师的指导下，经过努力能够完成。 设计二选题范围..................................... 错误!未定义书签。 设计三选材......................................... 错误!未定义书签。 设计四正确运用DW和Ps ............................. 错误!未定义书签。 设计五课程设计心得................................. 错误!未定义书签。 第4章课程设计步骤 .................................... 错误!未定义书签。 设计一查找相关资料................................. 错误!未定义书签。 设计二利用Ps进行切片.............................. 错误!未定义书签。 设计三利用DW编辑.................................. 错误!未定义书签。
Dreamweaver网页设计与制作 一、课程性质与任务 本课程是中等职业学校计算机专业网络方向核心课程之一。本课程的主要任务是介绍利用Dreamweaver开发工具进行网页设计，包括新建、编辑和设置一个Web站点；如何对页面属性进行基本的设置，如何设置、编辑CSS层叠式样式表；如何排版文字、表格和层；如何进行基本的图像处理；建立框架；模板和库的使用和编辑；网站的发布与维护等基本知识与应用。目的是通过本课程的学习，培养学生的实际动手能力和计算机的操作能力，能够运用所学的知识进行网页设计。 本课程建议安排在二年级完成。 二、课程教学目标 1．了解WEB站点的工作原理； 2．了解、HTML、CSS的定义，概念和作用； 3．掌握HTML语言中的各种文本格式、字符格式、段落设置、列表、表单、框架、多媒体标记的作用； 4．掌握Dreamweaver应用软件的使用功能； 5．能熟练运用Dreamweaver应用软件；熟练掌握使用绝对和相对URL，创建超链接，图像链接，图像映射的建立方法； 6．掌握在网页中添加CSS、嵌入图像、声音、多媒体信息的方法； 7．熟练掌握表格的使用方法，学会利用表格设布局网页；掌握框架制作网页的方法，会使用框架设计网页；掌握制作表单的方法，会利用表单建立交互式页面；
8．能够按网页设计技术要求修改和调试JavaScript代码； 三、教学的内容及要求 本课程的教学内容由理论模块、实训模块两个部分构成。 1.讲授模块是由教师示范操作，让学生通过练习达到掌握操作的要求；总的教学时数为36-42学时。 2.实训模块是由教师布置实训任务，由学生分组共同完成，达到熟练掌握使用Dreamweaver设计网站的要求，教学时数为48-54学时。 理论模块 第一单元网页设计概述 第二单元创建Web站点 第三单元网页设计语言基础
一、填空题（ 2‘ *5 ） 1、 题干网站由网页构成，并且根据功能的不同，网页又有____和动态网页之分。 知识点编号 题目类型填空题 难度等级简单 权重分值 2 分 答案静态网页 网站由网页构成，网页有静态和动态之分。所谓静态网页是指用户无论何时何地访 答案说明问，网页都会显示固定的信息，除非网页源代码被重新修改上传。静态网页更新不方便，但是访问速度快。而动态网页显示的内容则会随着用户操作和时间的不同而变化，这是因为动态网页可以和服务器数据库进行实时的数据交换。 关键字认识网页 2、 题干Web标准是一系列标准的集合，主要包括结构、_____和____。知识点编号 题目类型填空题 难度等级简单 权重分值 2 分 答案表现和行为 答案说明 Web标准并不是某一个标准，而是一系列标准的集合，主要包括结构（Structure）、表现（ Presentation ）和行为（ Behavior ）三个方面。 关键字Web标准3、 题干HTML中文译为 ________________ ，主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。 知识点编号 题目类型填空题 难度等级简单 权重分值 2 分 答案超文本标记语言 答案说明 HTML（英文 Hyper Text Markup Language的缩写）中文译为“超文本标记语言”，主要是通过 HTML标记对网页中的文本、图片、声音等内容进行描述。 关键字HTML语言简介 4、 题干HTML语言主要是通过_______________ 对网页中的文本、图片、声音等内容进行描述。知识点编号
题目类型填空题 难度等级简单 权重分值 2 分 答案HTML标记 答案说明HTML中文译为“超文本标记语言”，主要是通过 HTML标记对网页中的文本、图片、声音等内容进行描述。 关键字HTML语言简介 5、 题干在网站建设中， HTML用于搭建页面结构，CSS用于设置页面样式， __________用于为页面添加动态效果。 知识点编号 题目类型填空题 难度等级简单 权重分值 2 分 答案JavaScript 答案说明考察对 JavaScript 的理解 关键字JavaScript 语言简介 二、判断题（ 2‘ *10 ） 1、 题干因为静态网页的访问速度快，所以现在互联网上的大部分网站都是由静态网页组成的。知识点编号 题目类型判断题 难度等级简单 权重分值 2 分 答案错 答案说明 现在互联网上的大部分网站都是由静态网页和动态网页混合组成的，两者各有千秋，用户在开发网站时可根据需求酌情采用。 关键字认识网页 2、 题干网页主要由文字、图像和超链接等元素构成，但是也可以包含音频、视频以及 Flash等。知识点编号 题目类型判断题 难度等级简单 权重分值 2 分 答案对 答案说明 网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash 等。 关键字认识网页
广西玉林高级技工学校 《网页制作与设计》课程标准 一、课程基本信息 二、课程性质 本课程是中职计算机术专业的一门主干专业课程。通过本课程的学习，要求学生掌握网页设计的基本概念，学会使用常用的网页设计工具和常用脚本语言，能够设计制作常见的静态和动态网页，具备网站的建立和维护能力。同时通过本课程的学习，培养学生的综合职业能力、创新精神和良好的职业道德。 三、设计思路 本课程标准的总体设计思路：以计算机专业学生的就业为导向，根据行业专家对计算机网络技术专业所涵盖的岗位群进行的任务和职业能力分析，紧紧围绕完成工作任务的需要来选择课程内容，设定职业能力培养目标；以“工作项目”为主线，创设工作情景；以书本知识的传授变为动手能力的培养为重点，强化学生实践动手能力的培养，以实现职业能力的培养目标。 四、课程目标 1.职业知识目标 1．熟悉HTML 语言的作用和开发环境，能够编写HTML 代码； 2．掌握常用的HTML 标签，能够实现基本的图文信息显示； 3．理解HTML 页面框架的作用，能够针对需求进行框架的设计； 4．掌握各类HTML 表单元素标签，能够进行表单设计；
5．掌握各类HTML 多媒体元素标签，能够进行多媒体页面设计； 6．掌握CSS 样式的基本使用方法，能够应用CSS 样式表美化页面；7．掌握CSS 网页布局的方法，能够结合DIV 标签进行页面布局； 8．掌握JavaScript 的语法基础，能够编写简单的JavaScript 应用程序；9．掌握JavaScript 的函数、内置对象、事件等，能够实现表单的验证；10．掌握DOM 树形结构及其操作方法，能够控制DOM 对象。 2.职业技能目标 1．能独立进行资料收集与整理、具备用户需求的理解能力； 2．能根据项目需求，具备项目页面的设计与实现能力； 3．能根据静态页面设计原则与CSS 技术规范，实现页面美化与布局；4．具有使用JavaScript 技术进行页面事件处理与表单验证的能力； 5．能根据DOM 树形结构，进行页面DOM 的控制； 6．具有综合应用HTML 语言、CSS 样式、JavaScript 脚本进行页面的设计、编码、调试、维护能力。 3.职业素质目标 1．养成善于思考、深入研究的良好自主学习的习惯； 2．通过项目与案例教学，培养学习者的分析问题、解决问题的能力； 3．具有吃苦耐劳、团队协作精神，沟通交流和书面表达能力； 4．通过课外拓展训练，培养学习者的创新意识； 5．具有爱岗敬业、遵守职业道德规范、诚实、守信的高尚品质。 五、课程主要内容与要求
《网页设计与制作》课程教学大纲 适用专业：计算机网络技术 学时：64学时 一、编写说明 （一）本课程的性质、目的和任务 《网页设计与制作》是计算机网络技术专业的一门专业基础课。通过本课程的学习，使学生能够掌握网页设计制作的基本知识和技巧，同时熟悉网站建设的基本知识，达到能独立构建简单网站或通过协作构建较复杂网站并设计相关网页的水平。 在完成基本知识教学的同时，还要通过实践环节，强化对学生动手能力的培养与训练。 （二）课程教学的基本要求 通过本课程的学习，要求学生掌握HTML语言的文档结构和基本标签使用，能综合应用Dreamweaver CS6软件、HTML和CSS技术制作网页；掌握规划、开发、发布和管理静态网站的专业知识和技能；能独立构建简单网站或通过协作方式完成较复杂网站的建设，培养学生将理论知识应用于实践并解决实际问题的能力，为今后的进一步学习打下坚实基础。 （三）实践环节
（四）本课程与其它课程的关系 先修课程：计算机应用基础、图像处理软件PhotoShop 后续课程：https://www.doczj.com/doc/b816703688.html,动态网站开发、中小型网站设计与开发等 （五）教学时数分配表 （六）考核方式与要求 1.该课程是考查课 2.考核形式：上机操作 3.成绩的计算方法： ①平时成绩：40％（主要评估学生的现实表现） ②试卷成绩：60％ （七）教材与主要参考书 1.教材： 《ADOBE DREAMWEAVER CS6标准培训教材》,ACAA专家委员会 DDC传媒编著,人民邮电出版社，2013年1月 2.主要参考书： 《中文版Dreamweaver CS6基础培训教程》,数字艺术教育研究室编著,人民邮电出版社，2014年6月
《网页设计与制作》课程标准 一、课程定位 本课程是软件技术专业的专业基础课程，是培养学生Web客户端静态页面设计能力的支撑课程。 本课程主要培养学生的静态页面设计能力，该课程综合HTML语言、CSS样式、JavaScript脚本三项技术，通过“教、学、做”理论与实践一体化教学，使学生掌握Web客户端静态页面编写的基本方法，并逐步形成正确的客户端静态页面设计思想，能够熟练地使用HTML语言、CSS样式设计、JavaScript编程进行页面设计，为Web开发后续课程打下基础。 先修课程：计算机应用基础、C语言程序设计 后续课程：https://www.doczj.com/doc/b816703688.html,程序设计、Java Web程序设计 二、课程目标 通过本课程的学习，使学生逐步建立和掌握Web客户端静态页面设计的思想方法，具有分析问题和解决问题的能力，能够使用HTML语言、CSS样式、JavaScript脚本编写Web客户端静态页面解决实际问题，具备吃苦耐劳、团结协作的良好品质。 （一）知识目标 1．熟悉HTML语言的作用和开发环境，能够编写HTML代码； 2．掌握常用的HTML标签，能够实现基本的图文信息显示； 3．理解HTML页面框架的作用，能够针对需求进行框架的设计； 4．掌握各类HTML表单元素标签，能够进行表单设计； 5．掌握各类HTML多媒体元素标签，能够进行多媒体页面设计； 6．掌握CSS样式的基本使用方法，能够应用CSS样式表美化页面； 7．掌握CSS网页布局的方法，能够结合DIV标签进行页面布局； 8．掌握JavaScript的语法基础，能够编写简单的JavaScript应用程序； 9．掌握JavaScript的函数、内置对象、事件等，能够实现表单的验证； 10．掌握DOM树形结构及其操作方法，能够控制DOM对象。
网页设计与制作课程标准 Final approval draft on November 22, 2020
网页设计与制作课程标准课程代码：建议课时数：96 学分：6 适用专业：五年制高职电子商务专业 先修课程：图像处理、数据库管理、实用网络技术 后续课程：动画制作、电子商务网站建设 一、前言 1.课程的性质 该课程是江苏省五年制高职电子商务专业的一门专业平台课程，是一门实用性极强的课程。 其任务是：该课程主要涉及到网站建设规划与管理、HTML语言、静态网页制作、动态网页制作等内容；通过本课程的学习，学生能具备建立、管理和维护动态网站运行环境的知识和基本能力。通过学习，掌握网络的基础知识，网站建设的基本方法，网页制作的基本方法以及初步掌握通过Dreamweaver创建动态网站的操作技能。 2.设计思路 本课程的设计体现“以能力为本位、以职业实践为主线、以项目课程为主体”，打破了传统的学科体系的模式，将中小型网站建设与管理的职业岗位能力中用到的知识点融合在项目中。学生通过各项目的系列练习操作，熟练地掌握岗位所需知识和技能，并不断强化，项目体现操作能力和解决问题能力的培养。它体现了职业教育“以就业为导向，以能力为本位”的职业教育理念。 课程框架结构、学分和学时分配、对学生选课的建议
二、课程目标 总目标：使学生掌握常用的网页设计工具，熟练运用多种网页设计技术，具备Web网页设计、制作及站点管理的基本知识和基本技能，学生能够独立制作中小型的网站。 具体目标 （一）知识教学目标： 了解网站的历史和现状，对当今网站应用的各种技术有一个感性的认识。 了解网站平面设计的概念和过程。 了解HTML的基本概念、基本格式、能编写一个网页； 了解IIS的工作原理；知道启动web服务扩展；知道虚拟服务器技术的实现与创建；了解网站的管理包括：IIS配置备份与恢复、网络监视、日志管理。 学会并掌握站点建设能制作简单网页 学会并掌握使用布局表格和单元格设计页面布局；掌握框架网页的创建、调整、删除等基本操作 学会并掌握在网页中添加图像的基本方法、设置图像属性、变换图像效果等，掌握多种超链接的创建方法、以及设置超链接目标窗口及文本提示、设置邮件链接、书签链接等，掌握在网页中插入各种多媒体元素。 了解CSS样式的概念及其作用，了解css样式定义的各选项的含义及其作用，掌握在网页中添加样式表的方法，掌握样式表文件的导出及链接外部样式表的方法。 学会并掌握表单的创建方法，掌握表单的布局的建立、表单元素的添加、表单元素的属性以及表单元素样式的设定等。