《网页设计与制作-复习资料.doc》由会员分享,可在线阅读,更多相关《网页设计与制作-复习资料.doc(19页珍藏版)》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、精品文档,仅供学习与交流,如有侵权请联系网站删除网页设计与制作自考课程复习资料第一部分知识点1 互联网概念:它是目前世界上最大的计算机通信网络,遍布全球,将世界上各种规模的计算机网络连接成一个整体,从而实现信息交流与共享。服务:它主要提供了WEB、BBS、TELNET、FTP等服务。2 网络协议定义:它是一系列通信规则的总称,主要包括用户数据与控制信息的结构和格式,需要发出的控制信息以及相应要完成的操作与响应,对事件实现顺序的详细说明等三部分内容。分类:它分为硬件协议和软件协议,其中硬件协议定义硬件设备如何协调工作,如:100BaseT Ethernet等,软件协议则用于完成程序之间的通信,如
2、:TCP/IP,IPX,NETBEUI等。3 OSI七层模型定义:OSI即开放系统互联,它是由国际标准化组织(ISO)发起制定的计算机网络通信标准。OSI七层模型:从高层到低层依次排列为,应用层、表示层、会话层、传输层、网络层、数据链路层、物理层。4 TCP/IPTCP:即传输控制协议,工作在OSI模型中的传输层,用于建立和校验数据连接。IP:即网际协议,工作在OSI模型中的网络层,用于处理网络上一个主机到别一个主机的数据报路由选择。5 IP地址定义:通过IP层协议为互联网中的每一个网络和每一台主机所分配的惟一通信地址,称IP地址。组成:它由32位二进制数表示,每8位为一组,以圆点“。”分隔,
3、其中每组数据具体设置时一般用十进制表示,范围在0255。层次:它为层次结构地址,分为主机、由主机构成的网络、由网络构成的互联网。分类:它分为5类,包括A类(1126)、B类(128191)、C类(192223)、D类(224239)、E类(240254)。6 域名和域名系统域名:即互联网上与IP地址对应的字符型地址标识。域名分类:分为国际域名(com、net、gov、org、edu、mil等)、国内域名(cn、jp、hk、us、tw、au、fr等)和中文域名(中文.cn)。域名系统:即Domain Name System,简称DNS,它实质上是一个分布式数据库,包括提出数据的标准格式,数据库查
4、询方法,以及本地更新数据的标准方法。7 WWW概念:万维网(World Wide Web,www)又称全球信息网,简称WEB,是目前互联网上最流行的交互式信息查询服务。应用:URL(统一资源定位器) HTTP(超文本传输协议) HTML(超文本标记语言)8 网页和主页网页:即是基于超文本和超媒体的信息载体。主页:即整个站点的核心,站点内所有内容都由该页面进行索引,该页通常命名为index.htm或default.htm。9 HTML网页的核心是HTML(超文本标记语言),它并不是一种程序设计语言,而是一种页面描述语言。10网页设计的基本目标基本目标:要有好的创意(idea),丰富的内容,新颖的
5、观点。页面制作:页面结构,页面内容,文字,图形等。商业网页设计要求:良好视觉效果,站点开发周期应尽可能短,网页发布的信息一定要准确,维护更新要方便,申请有意且好记忆的域名,有分司或站点的标志,底部有站点相关说明信息等。11网页制作工具分类标记型网页制作工具:Notepad、HotDog等;所见即所得网页制作工具:Dreamweaver、FrontPage等;编程型网页制作工具:CGI(通用网关接口)、ASP(活动服务页面)、JAVA等;图像处理工具:Photshop、Fireworks、Coreldraw等;动画影片制作工具:Flash、Premiere等。12初学网页制作需注意的几个方面从了
6、解HTML的基本标记开始;选择一个自己认为顺手的工具,从第一个页面开始;多访问他人的网页,从中受到启发;深入分析成功网站及网页。13网页制作最基本的原则:有创意。14网站设计需要考虑的基本原则网页内容便于阅读;站点、页面色彩的搭配得当;带宽足够宽;浏览器功能强大与最佳分辨率;提供与浏览者的交互;站点内容要精、专,并及时更新;简单即是美。15站点设计的国际专业流程初始商讨;构思;综合内容;页面布局和导航;图形制作;内容集成;测试;验收交付。16站点风格的概念 即整个网站所采用的结构布局、色调、文字、标志、图案等要素带给浏览者的关于该网站的印象。17商业站点的风格特征公司徽标或商标应当出现在页面最
7、上方;采用主题图形产品广告来突出公司形象与风格;主要栏目一般采用图文并茂的超级链接;不要把主要栏目和次要栏目都显示在同一个页面上;商业网站一般都有固定栏目页面,如Support (技术支持)、Service(服务)、About Us(关于公司)等;必须建立站内搜索引擎。18非商业组织的风格强调页面的主色调;主题图形要求反映单位的风彩,设计有创意,有内涵,庄重中不乏活泼;超链接的分类一定要清晰,可采用图形,必要时可建立站内搜索引擎;一般设有信息查看板。19个人站点的主要风格主题图形式信息发布式介于以上二者之间20站点的层次和典型的站点结构站点的层次:指整个站点各个层次之间的结构关系;典型的站点结
8、构:即三层结构,首页栏目页文章页 或 一级页面二级页面三级页面21网站目录结构组织的原则网站目录:是指设计者建立网站时所创建的目录;目录结构建设原则:1)不要将所有文件都存放在根目录下;2)按栏目内容分别建立子目录;3)在每个主目录下都建立独立的images目录;4)目录的层次不要太深;5)切忌使用中文目录;6)不要使用过长文件名的目录;7)尽量使用意义明确的目录;22网站的链接结构概念:它是指页面之间相互链接的拓朴结构。基本方式:主要分为树型链接结构(一对一)和星型链接结构(一对多)。23重心平衡概念:即页面重心反映网页上各种元素分布的协调程序。方式:对称布局与非对称布局。24色彩的基本概念
9、色彩分类:彩色和非彩色;非彩色:指黑色、白色和各种深浅不同的灰色;彩色:指非彩色以外的颜色;彩色的属性:色相(指颜色,是颜色的基本属性)、纯度(又称饱和度,指颜色纯洁程序)、明度(又称亮度,指颜色的深浅程序)。非彩色的属性:明度。25计算机中的颜色表示三原色:RGB(Red Green Blue),分别为红绿蓝三种颜色。计算机用位数表示颜色:8位表示颜色的数量为28 种 16位表示颜色的数量为216种 24位表示颜色的数量为224种26JPG和GIF文件格式色彩的载体是图像,图像的载体是文件格式;JPG:适合存储于高清晰度照片;GIF:最多允许256色,适合于存储小图形,包括透明背景图和动态效
10、果图。27WEB安全色概念:指浏览器所能识别的00、33、66、99、cc、ff 六组数据任意选3种组合成的颜色。数量:6*6*6=216种28抖动产生:指采用安全色以外的颜色表示网页元素,在WEB显示时会产生抖动的现象。概念:指在WEB显示时,采用WEB安全色去替代予之相近网页元素颜色,而产生的颜色的偏差。29页面布局的概念页面尺寸 整体造型 页眉 文本 页脚 图片 多媒体30页面布局的方法:纸上布局法和软件布局法。31大色块构图法及基要点大色块构图分类:对称色块构图法和非对称色块构图法。 大色块构图要点: 1)冷暖色调在均匀使用时不宜靠近; 2)纯度接近的两种颜色不宜放在一起; 3)整个页
11、面最好有一个主色调。32线条构图方法及其要点凭借简单线条形成网页。构图要点:1)抽象线条与图片搭配;2)统一色调。33文本色彩体系 通过设置标记的属性来为整个网页规定色彩体系,如:34网站设计应注意八个方问题网站的设计目的决定设计方案;浏览者的需求第一位;页面的有效性;页面布局保持统一性;使用表格和适当的帧结构来设计网页;谨填图片的使用;平面设计意识;减少JavaApplet和其他多媒体的使用。第二部分知识点1 HTML的基本概念HTML为超文本标记语言,是创建网页最基础的描述语言。网页由标记和文本组成。标记分为单标记和双标记,并都由“”两符号括起来。2 HTML文件的组成文档头部说明及控制信
12、息文档描述的主要内容部分3 页面排版标记的使用标题标记:标题名称标题字体标记:,其中x取值为16,值越小标题字体越大。转行标记:预排版标记:文字效果标记: 1)粗体: 或 2)斜体: 或 或 3)底线:4)删除线:5)文字闪烁:,其中IE不支持,但Netscape浏览器支持该效果。6)上标:7下标:8)字体大小:,其中n的取值17,值越大字体越大。9)字体颜色:,其中value取值为6位16进制数。10)背景色:,其中value取值为6位16进制数。11)背景图:,其中url表示图片所在路径。12)文本颜色:,其中value取值为6位16进制数。特殊符号:1) > 3) © 4
13、)“ " 5) &4 清单列表的使用符号清单1) 2)3)其中menu、lh、ul标记属性type可为:Disc、Circle和Square。标号清单:,其中ol标记属性中type可为1,a,A,i,I,而start属性为设置起始标号。自定义清单:5 表格相关标记及属性表格基本形式:表格属性:1)border属性:或2)width属性:或3)cellspacing属性:,设置框线厚度。4)cellpadding属性:,设置数据与边框的距离。5)bgcolor属性:,设置表格背景色。单元格属性1)width属性:单元格宽度2)height属性:单元格高度3)align属性:水平
14、对齐方式4)valign属性:垂直对齐方式5)bgcolor属性:背景色6)nowarp属性:强制不换行合并单元格:1)列合并: 2)行合并:表格标题:6 图片与多媒体相关标记图片标记 1) - 指定图片所在路径2)- 指定图片宽度3)- 指定图片高度4)- 指定图片左右间距5)- 指定图片上下间距6)- 指定图片边框7)- 指定图片水平对齐方式8)- 指定图片提示信息嵌入声音 1)声音文件格式:wav、au、mid、mp3等; 2)自动播放标记:嵌入视频 1)视频文件格式:mov、mpg、dat、avi等; 2)播放标记:7 超链接概念:指从一个网页指向另一个目的站点或页面的链接。格式:8
15、URL概念:url即纺一资定位器。格式:协议:/主机:端口号/目录/文件名.扩展名协议:http、ftp、file等。端口号:ftp默认为21,而http默认为80。9 表单表单结构:表单元素表单元素: 单行文本: 密码文本: 多行文本: 单选框: 多选框: 隐藏域: 下拉列表: 提交按钮: 重置按钮:10框架基本结构横向框架:纵向框架:框架嵌套框架与框架中文本距离:框架边框:11META标记刷新:支持编码:关键字:描述内容:12动态网页技术的概念与分类概念:凡是能够接受用户操作,并作出相应响应的网页实现技术。分类:服务器端动态网页技术和客户端动态网页技术。13客户端动态网页技术DHTML组成
16、:包括HTML、Javascript、Dom、Css等;DHTML优点:动态样式、动态内容、动态定位。14Javascript概念与特点JS概念:即是一种基于对象和事件驱动并具安全性能的脚本语言。JS特点1)是一种脚本编写语言2)基于对象3)基于事件4)安全的5)简单的6)跨平台的15Javascript与Java区别JS为基于对象,而JAVA为面向对象;JS为解释性编程语言,而JAVA不编译编程语言;JS采用弱变量,而JAVA采用强变量;代码格式不一样;嵌入方式不一样,JS采用,而JAVA采用;JS采用动态联编,而JAVA采用静态联编16Javascript的主要内容JS主要内容:包括事件与
17、事件处理名柄,变量与常量,表达式与运算符,函数,数组,对象等元素,以及顺序,条件,循环,对象等控制语句。JS对象:window、document、form、navigator、string、math、date对象等;注释符号:1)/ 行注释 2)/*/ 块行注释17Javascript嵌入HTML的方法文档中:标记中:外部调用:18DOM的概念DOM即文档对象模型,将HTML、CSS和脚本语言联合起来组成一个或多个人都能实现互操作模型。19CSS的概念CSS是Cascading Style Sheet的缩写,译为层叠样式表,用于页面中的对象风格和样式进行定义,并具有一般性和通用性,目前版本为C
18、SS1.0、CSS2.0、CSS3.0。20CSS的基本规则Box模型:选择符属性1:属性值1;属性2:属性值2;选择符分类:包括标记、类、ID三种。如: pcolor:red - 针对页面中的p标记起作用 .tbgcolor:#000000 - 针对标记中有class=”t”属性的起作用 #fcursor:hand - 针对标记中有ID=”f”属性的起作用 21CSS的引用方法内联式样式表:嵌入式样式表:1)格式:2)位置:定义在两个head之间。外部式样式表:,放在两个head之间调用外部样式文件。22CSS中的文本属性word-spacing -单词间距letter-spacing-字间
19、距text-decoration:none/underline/overline/line-through/blink-文本修饰 vertical-align:top/middle/bottom-垂直对齐方式text-align:left/center/right-文本水平对齐text-transform:capitalize/uppercase/lowercase-文字转换text-indent:n-文本缩进line-height:n-行间距23CSS中颜色背景属性background-color:#value;background-image:url(图片路径);background-re
20、peat:repeat/repeat-x/repeat-y/no-repeat;background-attachment:fixed;background-position:0% 0%;24CSS中字体属性font-family:字体;font-size:字体大小;font-style:normal/italic-字体样式font-weight:normal/bold/bolder/lighter-字体粗细第三部分知识点1 Dreamweaver概述DW是美国Macromedia公司(现已被Adobe公司收购)开发的集网页制作与管理网站于一体的所见即所得的网页编辑软件。2 Dw的特点最佳的制
21、作效率;网站管理;无可比拟的控制能力;所见即所得;梦幻样版与XML;全方位的呈现。3 Dw的系统要求Cpu = 600MhzOs =windows98Ram =128MbDisk =275Mb 显示器可达1024*768分辨率4 Dw编辑界面界面:包括菜单、插入栏、文档工具栏、文档窗口、标签选择器、属性面板及其他控制面板组成。显示视图:分为设计、拆分、代码三种显示视图。5 Dw主菜单菜单由文件、编辑、视图、插入、修改、文本、命令、站点、帮助组成。6 创建站点的工作流程计划与准备,包括设置DW站点;创建网页,调整网页布局,添加内容;根据需要编辑代码;将网页链接在一起;预览和发布站点;添加显示来自
22、数据库信息的动态网页。7 Dw站点创建选择方法:基本或高级选项步骤:1)给站点起名称 2)选择站点技术 3)设置站点位置 4)远程站点设置8 Dw页面属性(修改页面属性)外观:页面字体、大小、颜色、背景色、背景图、边距设置;链接:链接字体、大小、颜色、变换图像链接、已访问链接、活动链接、样式、下划线等设置。9 Dw表格布局表格是网页布局最常用的元素,由行和列构成单元格,而单元格就成了网页元素的载体。布局模式(Ctrl+F6):分为布局表格和绘制布局单元格。10Dw快捷键Ctrl+N 新建文件 Ctrl+O 打开文件 Ctrl+S 保存文件 Ctrl+P 打印文件Ctrl+J 页面属性 Ctrl
23、+F2 插入工具栏 Ctrl+F3 属性栏 Ctrl+F6 布局模式F2 层面板 F3 查找下一个 F4 隐藏面板 F5 刷新 F8 文件面板 F12预览 11Fireworks概述FW是Macromedia公司开发研制专业用于网页图形图像素材的设计,还可以设计页面导航、动态图片及个性较强的网页等。12Fw界面Fw由菜单、工具栏、画布、属性面板及其他面板等组成。13Fw新建文件新建文件:文件菜单新建文件选项 或 Ctrl+N画布设置:画布大小、分辨率(默认为72像素/英寸)、画布颜色(白色、透明、自定义)。14Fw工具栏 Fw工具栏包括:选择、位图、矢量、WEB、颜色、视图工具选项。15Fw插
24、入对象插入操作:编辑菜单插入选项插入对象:新建按钮、新建元件、热点、切片、空位图、层、帧等。16Fw保存与导出预览保存文件:图片格式为png导出预览:图片格式可以为Gif、Gif动画、Jpeg、Png、Bmp、Tiff等。17Fw快捷键Ctrl+N 新建文件 Ctrl+O 打开文件 Ctrl+S 保存文件 Ctrl+P 打印文件Ctrl+F 查找 Ctrl+G 组合 Ctrl+F2 工具栏 Ctrl+F3 属性面板 F2 层 F11 库 Shift+F2 帧 Shift+F3 行为 18Flash概述Flash是Macromedia公司开发研制专业用于网页动画素材的设计,还可以设计全动画的交互
25、式网页。19Flash界面Flash由菜单、工具栏、时间轴、场景、属性面板、动作面板及其他面板等组成。20Flash工具栏 包括工具、查看、颜色、选项四个工具选项。21Flash新建文件新建文件:文件菜单新建文件 或 Ctrl+N设置文档:修改菜单文档属性(Ctrl+J),其中可设置的文档属性有文档大小、背景色、帧频(默认为12fps)、标尺单位(默认为像素)。22Flash时间轴时间轴主要分为层和帧两部分;层:每层相对独立,采用Z轴显示模式,值越大显示在越前面;帧:分为帧(F5)、关键帧(F6)、空白关键帧(F7); 插入帧的作用:是指某对象一直到该位置都存在但没有变化; 插入关键帧的作用:
26、是指该对象存在具可以发生变化; 插入空白关键帧的作用:是指该位置没有对象,现可以插入对象。23Flash元件概念:即构成动画的基础,可以重复使用。类型:影片剪辑、按钮、图形三种类型。新建元件:插入菜单新建元件 或 Ctrl+F824Flash补间操作补间形式:分为补间动作和补间形状;补间动作:元件动画;补间形状:图形动画。25Flash动画 动画就是指不同时间段播放不同的画面,一般可以通过改变对象的大小、形状、色彩、位置等状态形成动画效果。26Flash快捷键Ctrl+N 新建文件 Ctrl+O 打开文件 Ctrl+S 保存文件 Ctrl+J 文档属性Ctrl+B 分离 Ctrl+G 组合 C
27、trl+L 库 Ctrl+k 对齐Enter 播放 Ctrl+Enter测试影片 Ctrl+T 变形 Ctrl+F2 工具栏Ctrl+F3 属性 F4 隐藏面板 F8 转为元件 F9 动作27Flash保存与导出影片保存(Ctrl+S):文件格式为.fla导出:文件格式一般为swf28Photoshop概述Photoshop软件是由美国Adobe公司研发专门用于平面图像设计,适用于平面广告、网页图片、企业宣传画册、软件界面等的设计。29Photoshop界面由菜单、工具栏、编辑区、选项面板及其他面板等组成。30Photoshop新建文件新建文件:文件菜单新建文件 或 Ctrl+N文档设置:宽度
28、、高度、分辨率(默认为72像素/英寸)、模式(灰度、RGB、CMYK、LAB)、背景。31Photoshop工具栏主要工具包括:选择、选框、套索、魔术捧、裁剪、切片、修补、图章、画笔、历史记录笔、橡皮擦、油漆桶、模糊、减淡、钢笔、文本、滴管、缩放、移动等工具。32Photoshop图像色彩调整色阶:Ctrl+L曲线:Ctrl+M33Photoshop快捷键Ctrl+A 全选 Ctrl+Shift+I 反选 Ctrl+D 取消选区 Ctrl+E 合并图层34Photoshop保存文件 保存图片格式一般为:Jpg,源文件格式为:Psd。35Frontpage2003概述Frontpage2003是
29、Microsoft公司开发研制的办公自动化软件中一员,专门用于网页设计与网站管理,是一个所见即所得的网页制作工具,可编写代码也可使用工具完成网页设计,并嵌入预览网页功能。36Frontpage2003界面Frontpage2003由菜单、常用工具栏、格式工具栏、编辑区等组成。37Frontpage2003站点与网页视图站点视图:文件夹、远程站点、报表、导航、超链接、任务视图;网页视图:设计、拆分、代码、预览视图。38Frontpage2003新建站点及网页新建站点:文件菜单新建新建站点新建网页:文件菜单新建新建网页39Frontpage2003插入网页元素包括:表格、表单、框架、文字、图片、动
30、画、声音、视频等。40Frontpage2003格式设置 Frontpage2003可进行字体、段落、项目符号、背景、主题、网页过度、样式等格式设置。第四部分知识点1 网站栏目划分的原则一定要紧扣站点的主题设置一个最近更新或网站指南栏目设置一个可以双向交流的栏目设一个下载或常用问题(FAQ)回答栏目2 Web服务器的概念指安装服务器软件并使用Internet协议响应基于TCP/IP协议的网络上WEB客户请求的计算机。指一个基于服务器/客户机构架的应用程序,其作用是响应客户端的浏览程序所发生的请求。3 Web服务器工作机制WEB:包括客户机和服务器;客户机:包括TCP/IP和WEB浏览器;服务器
31、:包括HTTP和后台数据库;CGI提出请求工作原理:响应请求 客户机服务器数据库4 MIME标准MIME即多媒体Internet邮件交换协议,前身为SMTP,可进行文本、图像、声音、视频和二进制数据的传输。MIME类型:由主类型和子类型构成,如Application/msword Audio/wav image/bmp message text/html text/plain video5 Web服务器与网页设计者WEB服务器站点 上传和管理网页 客 户 访问网页6 PWS概述概念:PWS即个人网页服务器,是一个在windows平台下运行的WEB服务器应用程序。组成:包括个人WEB服务器(pe
32、rsonal web server)、 事务服务器(Transaction server)、数据库访问组件(Data Access Components)、Frontpage服务器扩展(Frontpage Server Extensions)、消息队列服务(Queue Server1.0)。IIS:IIS即Internet Information Server,因特网信息服务。7 虚拟主机概念:它是使用特殊的软件硬件技术把一台运行在因特网上的服务器分成多台“虚拟”的主机,每一台虚拟主机都有独立的域名和IP地址,具有完整的Internet服务器功能,虚拟主机间完全相互独立,并可由用户自行管理。评
33、价指标:1)服务器放置位置 2)主机与网络连接速度 3)主机运行操作系统4)硬盘空间大小 5)Email信箱数量 6)是否支持数据库7)是否支持Frontpage 8)是否支持加密传输8 影响Web站点性能的指标网络连接带宽 站点上文件的大小内嵌在网页或网页启动的应用程序或脚本所需的资源内存大小 计算机处理器的速度9 Web站点维护FTP方式管理:CuteFtp、LeapFtp、FlashFXP等软件;WEB方式管理10网站推广传统推广方式 搜索引擎注册 网络广告交换邮件列表服务 BBS讨论组11XML的概念XML即可扩展标记语言,是一种基于SGML(通用标记语言标准)标准的网络信息描述语言,能够使用户根据文档的结构来创建自己的DTD(文档格式),从而使XML能够脱离固定标记而表述数据的含义。12XML的特点开放性 可扩展性 互操作性 严密性13XML的基本结构和规则文档第一行必须是XML文档说明;文档必须包含至少一个元素;每个开始标记必须与结束标记配套使用,也就是双标记,如;文档中必须包含惟一的打开和关闭标记;各标记间不能交叉使用。【精品文档】第 19 页