网络艺术与网页制作
《网络艺术与网页制作》笔记&课本练习一叶扁舟第一部分网页基本知识第一章互联网概述第一节互联网起源与在中国的发展一、互联网起源二、在中国的发展第二节互联网基础理论知识一、Internet1、【笔记】因特
《网络艺术与网页制作》笔记&课本练习一叶扁舟第一部分网页基本知识
第一章互联网概述
第一节互联网起源与在中国的发展
一、互联网起源
二、在中国的发展
第二节互联网基础理论知识
一、Internet
1、【笔记】因特网是世界范围内计算机网络的一个集合,是由计算机网络通过一致的联网协议和软件协议组成的集合,共享这数字信息。
2、【课本】计算机网络是将分布在不同物理位置的具有独立功能的计算机系统,利用通信设备和显露相互连接起来,在网络协议和软件的支持下进行数据通信、实现资源共享的计算机系统的集合。
二、WWW(WorldWide Web)
1、万维网,是目前使用最广泛和最方便的一种基于超文本、提供交互的信息服务。
2、WWW不是传统意义上的物理网络,是基于Internet 的、由软件和协议组成的、以超文本文件为基础的全球分布式信息网络。
3、WWW的系统结构采用的是客户/服务器结构模式。物理结构上是由客户机和服务器组成。它们都连接在因特网上,通过因特网进行通信。浏览器的主机是客户机,提供信息的主机是服务器,在应用程序上,客户机上运行的是IE 之类的浏览器程序,浏览器程序的主要作用就是对HTML 标记语言进行解释并且将它显示在浏览器窗口中。
三、Internet的协议
1、TCP/IP协议:Internet的基本协议,中文译名传输控制协议,因特网互联协议,又叫网络通讯协议,简言之即由网络层的IP 协议和传输层的TCP 协议。
①IP 地址在网络中,每一台主机必须有一个IP 地址,以确定主机的位置,在整个网络中必须是唯一的,由32位二进制数字组成。
②DNS(DomainName System)是因特网中的一项核心服务,它将域名和IP 地址相互映射到一个分布式数据系统,通过该系统将域名与IP 地址一一对应,并将域名映射成IP 地址,实现快速连接站点的目的。
③TCP (Transmission Control Protocol)传输控制协议TCP 是一种面向连接(连接导向)的、可靠的、基于字节流的运输层(Transportlayer)通信协议。
2、文件传输协议FTP:用于Internet 上的控制文件的双向传输。主要作用是让用户连接上一个远程计算机(运行FTP 服务器程序)进行上传和下载。
3、电子邮件传输协议SMTP(SimpleMail Transfer Protocol):基于FTP,即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式。SMTP 协议属于TCP/IP协议族,它帮助每台计算机在发送或中转信件时找到下一个目的地。
4、域名的一般书写格式:机构名.主机名.类别名.地区名。
5、网络新闻传输协议NNTP(NetworkNews Transport Protocol):是一个主要用于阅读和张贴新闻文章(俗称为“帖子”,比较正式的是“新闻组邮件”)到Usenet 上的Internet 应用协议,也负责新闻在服务器间的传送。NNTP用于向Internet 上NNTP 服务器或NNTP 客户(新闻阅读器)发布网络新闻邮件的协议,提供通过Internet 使用可靠的基于流的新闻传输,提供新闻的分发、查询、检索和投递。NNTP还专门设计用于将新闻文章保存在中心数据库的服务器上,这样用户可以选择要阅读的特定条目,还提供过期新闻的索引、交叉引用和终止。
6、HTTP协议:超文本传输协议,用于传送WWW 方式的数据,是客户端浏览器或其他程序与
,《网络艺术与网页制作》笔记&课本练习一叶扁舟Web 服务器之间的应用层通信协议。在Internet 上的Web 服务器上存放的都是超文本信息,客户据需要通过HTTP 协议传输所要访问的超文本信息。
第三节网络艺术形式
一、网页
1、网上求职
2、门户网站
3、网上社区/博客
4、网上购物
5、游戏网站
6、娱乐网站
7、旅行网站8、参考/资讯
二、网络广告
▲网络广告是广告主基于互联网所投放的采用文本链接、多媒体等技术的一种新型广告。
1、动态广告OR 静态广告8、专题性广告网页
2、旗帜广告9、撕页广告(静态&动态)
3、对联式网络广告
4、摩天大楼广告
5、矩形广告10、软件类广告11、网络视频广告(视窗)12、促销型广告9、家庭/教育10、婚恋网站11、计算机技术12、个人网站13、企业网站14、搜索网站15、视频网站
6、按钮广告13、隐蔽性广告(博客等)
7、电子邮件广告(平面设计 文字超链接)14、微博广告
三、网络游戏
1、定义:以互联网为传输媒介,以游戏运营商服务器和用户计算机为处理终端,以游戏客户端软件为信息交互窗口的旨在实现娱乐、休闲、交流和取得虚拟成就的具有可持续性的个体性多人在线游戏。
四、网络文学
1、定义:以互联网为展示平台和传播媒介的,借助超文本链接和多媒体演绎等手段来表现的文学作品、类文学文本及含有一部分文学成分的网络艺术品。
2、发展:
五、网络音乐
1、定义:指音乐作品通过互联网、移动通信网等各种有线和无线方式传播的,其主要特点是形成了数字化的音乐产品制作、传播和消费模式。网友通过电信互联网提供在电脑终端下载或者播放的互联网在线音乐,无线网络运营商通过无线增值服务提供在手机终端播放的无线音乐,又被称为移动音乐。
2、彩铃:是“个性化多彩回铃音业务”(ColoringRing Back Tone)的简称,它是一项由被叫客户为呼叫自己移动电话的其他主叫客户设定特殊音效(音乐、歌曲、故事情节、人物对话)的回铃音的业务。
六、电子杂志网络杂志、互动杂志
1、电子杂志是一种非常好的媒体表现形式,它兼具了平面与互联网两者的特点,且融入了图像,文字,声音、视频、游戏等相互动态结合来呈现给读者,此外,还有超链接、及时互动等网络元素,是一种很享受的阅读方式。
2、电子杂志延展性强,未来可移植到PDA、MOBILE、MP4、PSP及TV(数字电视、机顶盒)等多种个人终端进行阅读。
第四节网络艺术形式特点
,《网络艺术与网页制作》笔记&课本练习一叶扁舟
一、数字化、网络化,借助网络迅速传播
二、具备“网络互动性”和“虚拟沉浸性”
三、大众化特征
四、创作流程的开放性,作品是“未完成状态”
五、具有更丰富的媒体表现形式
六、共享性
七、个人性
第二章网页基本知识
一、网页的基本元素
1、文本。
2、图片。图像传递的信息比文字更直观,主要有GIF、JPEG/JPG、PNG格式。
3、链接。
4、声音和动画。网页中可以插入的声音文件格式很多,包括MID 格式和MP3格式。而动画主要有GIF 动画和Flash 动画。
5、表单。网页完成交互功能的重要元素。
二、网页图形界面设计
1、视听元素:文本、背景、按钮、图标、图像、表格、颜色、导航工具、背景音乐、动态影像等。
2、版式设计:在有限的屏幕空间上将视听多媒体元素进行有机的排列组合。尺寸由读者掌控。
①不同显示器可设置不同的分辨率,这就要求设计者不能精确控制页面上每个元素的尺寸和位置;
②不同浏览器因编写程序有差异,也会影响网页显示。
三、静态网页与动态网页的区别
1、运行于客户端的程序、网页、插件、组件,属于静态网页。如html、flash等。是纯粹html 格式网页设计。常见格式后缀:.html或.htm。
2、动态页面通常在服务器端运行,通过网站后台管理系统对网站的内容进行更新。常见格式后缀:.asp或.php或.jsp或.cgi。
四、信息流
1、定义:指信息的传播与流动,信息流是物流过程的流动影象,信息流分三个过程:采集、传递和加工处理。
五、制作网页的基本工具
1、FrontPage。微软公司网页制作工具
2、Dreamwaver。Macromedia公司网页制作工具。
3、Photoshop。图形图像制作和加工工具。
4、Fireworks。网页图片处理工具。
5、Flash。网页动画设计开发软件,采用“流”控制技术,可一边下载一边观看。
六、网页图形设计
七、网页设计特点
1、交互性与互动性
①交互性的三种形式:移开、移上未点击、移上并点击(状态)
2、信息传播的非线性
3、多种媒体的综合性
,《网络艺术与网页制作》笔记&课本练习一叶扁舟
八、网页设计原则
1、主题鲜明
2、形式与内容统一
3、强调整体
第二节网站定位
一、什么是网站
1、在互联网上,由域名(也就是网站地址)和网站空间构成,使用HTML 等工具制作的用于展示特定内容的相关网页的集合,通常包括主页和其他具有超链接文件的页面。
二、网站建设流程
1、整体规划:①以宣传为目的的网站;
②以信息传递为目的的网站;
③其他功能性网站。
2、网页设计与制作:网站的形象设计、布局与版面的设计和页面制作与程序设计。
3、测试网页。
4、网页的上传与发布。
三、网页设计策划
1、导航模式:建立网站地图。包括所有的网页、每一网页的类型和内容,这些网页之间的链接及它们所处的层级关系。
①导航需要解决:我在哪?
我怎样才能到达我要去的地方?
如迷路的人常问自己:我以前到过这里吗?或我能返回我以前某地吗?
还有多久到达那里?
2、布局设计:利用网络系统分割区域,整理导航、子菜单、内容等位置。
3、交互模式:显示那些与用户互动的网站要素如何运作,如在网页中是否需要滚动页面、窗体在新窗口弹出或从本窗口直接显示新网页,以及一些动态界面元素。
4、颜色系统:为整个网站结构决定一个与理念相符合的颜色结构规则,表现出网站的整体性。颜色系统除中心性主颜色以外,也可以根据各个区域段(子网页)性质,分别用独立的颜色群来体现。
5、图形、图像、图标设计。
第三章
第一节初识Dreamwaver(课本内容)站点的建立
一、站点的定义
1、站点实质是一个文件夹,文件夹中涵盖一系列文档,这些文档通过各种链接关联起来,利用浏览器可以实现对整个网站的浏览。站点分为本地站点和远端站点。首先,在本地计算机的硬盘上创建本地站点,把握全局站点结构,管理站点中的各个文档,完成对文档的编辑,然后将本地站点发送到远端的Internet 服务器上,创建远端站点。
二、站点中的目录结构文件夹:html、images、media、scripts、styles 网页文件:.index
1、命名:可采用英文缩写和组合,也可用拼音缩写与组合,以便识别,不要用中文字或a、b、c、1、2、3等命名。首页统一命名为index。
2、创建本地站点
3、管理站点
第二节认识Dreamwaver 操作界面
第三节表格
,《网络艺术与网页制作》笔记&课本练习一叶扁舟
第四节图像
第二部分教材内容(练习题)
第一章网页设计与制作概述
一、选择题
1、DW是()公司出品的网页设计软件。
A.MicrosoftB.MacromediaC.TecentD.IBM
2、
A.表格的开始和结束B.行的开始和结束C.列的开始和结束D.单元的开始和结束
3、网页中的标题部分,对应的字体由大到小,可以使用的范围是(
A.h6到h1B.h7到h1C.h1到h6D.h1到h7
4、在DW 中颜色用()表示。
A.二进制数B.八进制数C.十进制数D.十六进制数
5、
A.插入动画B.编辑图片C.设置超级链接D.插入图片
6、下面关于HTML 语言的说法错误的是()
A.HTML的意思是“超文本标记语言”B.HTML是用于编写网页的统一的语言规范
C.只能使用记事本编写HTML 代码D.网页的头标记是Head
7、代表中国的顶级域名是()
A.CNB.COMC.NETD.EDU
8、一个基于HTML 超文本语言的网页无法被())程序编辑
)A.写字板B.记事本C.Windows命令提示符D.Dreamwaver9、国际标准化组织ISO 于1984年正式颁布的开放系统互连基本参与模型的简写为(
A.SNAB.OSIC.DNAD.TCP/IP
10、Internet是由()发展起来的。
A.NSFNETB.MILNETC.ESNETD.ARPANET
11、一个网吧将其所有的计算机连成网络,该网络属于(
A.广域网B.城域网C.局域网D.网吧
12、WWW服务是以()协议为基础的。
A.HTMLB.HTTPC.WWWD.URL
13、在美国用顶级域名来区分机构或组织的性质,其中表示商业实体的是()
A.govB.comC.milD.org
14、WWW上每一个网页(HomePage)都有一个独立的地址,这些地址统称为())
A.IP地址B.域名系统(DNS)C.统一资源定位器(URL)D.E-mail地址
15、()是网页传递信息的主要载体,传输速度快,而且可以设置其大小、颜色、段落、层次等属性。
A.图像B.表格C.链接D.文本
二、填空题2、网站首页的文件名是固定的,一般是index 或default,其他页面可以自由命名。
3、HTML英文全名是4、在HTML HTML 文档的最前面,用来标识HTML 文档的开始。
5、要设定文字的字体、字号和颜色可以使用
6、之间的文字以下划线显示。
,《网络艺术与网页制作》笔记&课本练习一叶扁舟
7、HTML的超链接是通过
8、当浏览器不能显示图像时,标签中的alt 属性能够用文本代替图像。
9、
10、常用的IP 地址有ABC 三类,128.11.3.31是一个B 类IP 地址。
三、问答题
1、简述网站的设计流程。
答:①整体规划。可分为以宣传为目的的网站、以信息传递为目的的网站以及其他功能性网站。
②网页设计与制作。主要工作包括网站的形象设计、布局与版面的设计和页面制作与程序设计。其中网站的形象设计包括网发展的标志设计、中英文设计、网站的主题颜色及字体设计。常见的页面布局技术主要有表哥布局技术、通过CSS 技术完全地定位文本和图像以及DIV CSS布局技术三类。而网站页面版式可以分为“形象页面”与“内容页面”两类。
③测试网页。
④网页的上传与发布。
2、请用HTML 语言编写出基本的网页结构。
答:
头部信息
|  , |
3、常用的网页设计工具有哪些,各有什么特点?
答:①FrontPage。和Word 系出同门且有着丰富的模版,是新手上手的很好的选择。
②Dreamwaver。集网页设计、代码开发、网站创建和管理于一体的软件,提供了可视化的布局工具、快速的Web 应用程序开发,以及广泛编辑和ASP/JSP/ASP.NET/PHP等动态网页的支持,并可实现数据库的编写。是一款真正的“所见即所得”的网页编辑工具。
③Photoshop。图形加工软件,对图像的处理方式多样,特别是对图像的滤镜处理,可以制作出许多特殊的图像想过,且能轻松将图像进行切片等操作,方便网页使用,支持存储格式为网页支持的GIF、JPEG、PNG等。
④Fireworks。以处理网页图片为特长,具有同时按位图图形和矢量图形的模式进行编辑的特点,并可轻松创作GIF 动画。
⑤Flash。网页动画设计软件。用该软件制作的动画采用“流”控制技术,可以一边下载动画、一边播放。,且大量的图形是矢量图形,因此缩放操作中没有失真。此外,该软件制作的动画文件所占的体积较小。
4、简述静态网页与动态网页的WWW 工作流程。
答:①静态网页:在客户机的浏览器地址栏中输入一个网页地址,按回车键,客户机就用因特网上的HTTP 协议发送一个请求到该地址所指定的服务器。服务器收到请求后,将客户机请求的页面文件或系统的默认页面文件或系统的默认页面文件传送到客户机中。浏览器解释正文主体部分
,《网络艺术与网页制作》笔记&课本练习一叶扁舟这个HTML 文件,并将结果显示在浏览器窗口中。
②动态网页:当服务器收到请求后,将根据请求的信息,在服务器上找到相应的页面文件并对该文件进行处理,运行该文件包含的程序代码,然后将运行结果以标准的HTML 文件格式送回到客户机,由客户机的浏览器显示结果。
5、简述网页色彩搭配的技巧。
答:①同种色彩搭配。首先选定一种色彩,然后调整透明度和饱和度,将色彩变淡或加深,而产生新的色彩,使页面看起来色彩统一,具有层次感。
②邻近色彩搭配。在色环上相邻的颜色进行搭配可以使网页避免色彩杂乱,易于达到页面和谐统一的效果。
③对比色彩搭配。以使网站特色鲜明、重点突出,产生强烈的视觉效果。在设计时以一种颜色为主色调,其对比色为点缀,以起到画龙点睛的作用。
④暖色色彩搭配。使用红色、橙色、黄色等色彩的搭配,以营造出温馨、和谐和热情的氛围。
⑤冷色色彩搭配。使用绿色、蓝色及紫色等色彩的搭配,以营造出宁静、清凉和热情的氛围。冷色色彩和白色搭配一般会获得较好的视觉效果。
⑥有主色的混合色彩搭配。以一种颜色为主,同时混合使用其他色彩,形成一种缤纷绚丽而不杂乱的搭配效果。
第三章图像和其他媒体
一、选择题
1、通过Swap Image 动作来替换图像的时候,如果第一个图像的尺寸大小为300×600,第二个图像的尺寸大小为200×500,第三个图像的尺寸大小为500×800,则以下说法正确的是()。
A.三个图像都将以300×600的尺寸显示
B.三个图像都将以200×500的尺寸显示
C. 三个图像都将以500×800的尺寸显示
D.第二个图像将被拉伸
2、
)进行设置。

4、不属于网页通常使用的图像格式的是()。
A.JPEGB.GIFC.PNGD.BMP
5、调整图像尺寸时要保持元素的比例(宽高比),在按住()键的同时拖动顶角的选择控制点。
A.ShiftB.Ctrl
二、填空题C.AltD.Shift Ctrl
1、网页中常见的音频格式有2、Flash文件的扩展名为模版文件的扩展名为3、居中对齐是将图像的中部与当前的基线对齐。

《网络艺术与网页制作》笔记&课本练习一叶扁舟
4、在可视方式下用户最小可以将元素大小调整到8×8像素,若要将元素的宽度和高度调整到1×1像素,需要在方框区域中输入数值。5、插入鼠标经过图像选择主菜单“插入”→“图像对象”→“鼠标经过图像”命令。
三、问答题
1、简述网页文件使用的图像格式和它们的区别。
答:①GIF 文件。一种基于LZW 算法的连续色调的无损压缩格式,压缩率一般在50左右。GIF 文件最多使用256种颜色,最适合显示色调不连续或具有大面积单一颜色的图像。
②JPEG 文件。用于摄影或连续色调图像的高级格式,可包含数百万种颜色。通过压缩JPEG 文件在图像品质和问价大小之间达到良好的平衡。
③PNG 文件。目前保证最不失真的格式,存储形式丰富,兼有GIF 和JPEG 的色彩模式,能把图像文件压缩到极限以利于网络传输,但又能保留所有与图像品质有关的信息,是无损压缩。同时还支持透明图像的制作。
2、什么是鼠标经过图像?
答:鼠标经过图像在浏览器中浏览时,当鼠标经过这种图像时,图像会发生变化。鼠标经过图像实际上由两个图像组成,原始图像(首次载入页时显示的图像)和鼠标经过图像(当鼠标指针移到原始图像时显示的图像)。
3、简述常用音频格式文件的区别。
答:①midi 或mid 格式用于乐器。
②wav 格式文件有较好的声音品质,许多浏览器都支持此类格式文件并且不要求插件。③mp3格式是一种压缩格式,它可令声音文件明显缩小,且声音品质非常好。
④ra、ram、rpm或Real Audio 格式具有非常高的压缩程度,全部歌曲文件可以在合理的时间范围内下载。
⑤qt、qtm、mov和QuickTime 是由Apple Computer 开发的音频和视频格式。支持大多数编码格式。
4、简述图像占位符的作用。
答:在准备好将最终图像添加到Web 页面之前使用的占位图形。通过插入指定大小的图像占位符可以在页面中预留图像的位置,从而实现预览页面基本效果。
第四章超级链接及其应用
一、选择题
1、在Dreamweaver8中可以为图像创建热点,不可以改变()
A、热点形状B、热点的位置C、热点大小D、热点鼠标的灵敏程度
2、在属性面板上设置超链接时,超链接打开的位置在()框的下拉列表中选择。
A、链接B、目标C、边框D、替换
3、要在当前窗口打开链接,应在Dreamweaver8中设置()为()
A、目标,-blankB、链接,-topC、目标,-self
4、导航条在一个网页中一般可以有()个
A、1B、2C、3D、4D、链接,-parent
5、在Dreamweaver 中,网站内部文件之间的链接都是以()的形式出现的。
A、相对地址B、绝对地址C、内部地址D、相对或绝对地址
6、E-mail链接的一般形式为()
A、mailto:name@server.com
C、mail:name@server.com
二、填空题B、mail:server.com@nameD、mailto:server.com@name
,《网络艺术与网页制作》笔记&课本练习一叶扁舟1、链接路径一般有三种类型,分别为绝对路径、相对路径、根目录相对路径。2、在创建超级链接分类中,跳转菜单链接适合一个文档多页面分类使用。3、创建到锚点的链接的过程分为两步;首先创建命名锚点,然后创建锚记链接。4、创建锚机链接是在属性面板的“链接”文本框中,键入一个数字符号“#”和锚记名称。5、导航条项目有四种状态,分别为状态图像、鼠标经过图像、按下图像、按下时鼠标经过图像。6、链接是指从一个网页指向一个目标的连接关系。
三、简答题
1、超级链接中三种路径的区别是什么?
答:①绝对路径。提供链接文档的完整URL 地址,而且包括所使用的协议类型。使用绝对路径要确保路径有效。当要链接其他服务器上的文档,必须使用绝对路径。
②相对路径。指省略相对于当前文档和所链接的文档都相同的绝对URL 部分,只提供不同的路径部分。
③站点根目录相对路径。指从站点的根目文件夹到文档的路径,当在处理承载有多个不同站点的服务器时要考虑使用这种类型的路径。
2、什么是跳转菜单?
答:跳转菜单是文档中的弹出菜单,对站点访问者可见,并列出链接到文档或文件的选项。
3、简述属性面板的链接“目标”弹出菜单中四个选项的含义。
答:①_blank:将链接的文档载入一个新的、未命名的浏览器窗口。
②_parent:将链接的文档载入该链接所在框架的父框架或父窗口。如果包含链接的框
架不是嵌套框架,则所链接的文档载入整个浏览器窗口。
③_self:将链接的文档载入链接所在的同一框架或窗口。此目标是默认的,通常不需
要指定它。
④_top:将链接的文档载入整个浏览器窗口,从而删除所有框架。
第五章表格的创建与应用
一、选择题
1、在定义表格的属性时。在
②
③
④
2、在Dreamweaver 中如何制作一个4行4列的单线表格(边框颜色#ff9900,单元格颜色#ffcc00)?
3、说明制作一个1行4列的立方体表格的操作步骤。要求:单元格背景为白色,亮边框颜色为“#ffff00”,暗边框颜色为“#ff0000”。
4、简述制作不固定宽和高的圆角表格的方法步骤。
答:①制作四张圆角图片。
②插入表格。
③插入图片。
④设置单元格宽度和高度。
⑤设置页面背景颜色。
⑥设置表格背景颜色。
⑦调整中心单元格的高度。
⑧保存并预览网页。
第八章样式表
一、选择题)属性。D、页眉