《网页设计5202301730》由会员分享，可在线阅读，更多相关《网页设计5202301730（16页珍藏版）》请在金锄头文库上搜索。
1、网页设计复习材料1.网页基础网页是存放在WEB服务器上供客户机用户浏览的页面。在逻辑上可视为一个整体的一系列页面的有机集合称为网站（WEB SITE )2. HTML语言基础HTML(Hypertext Markup Language) 是一种规范，一种标准，它通过标记符（tag）来标记要显示的网页的各个部分2. HTML语言基础工作原理通过在网页中添加标记符，可以告诉浏览器如何显示网页，即确定内容的格式。浏览器按顺序阅读网页文件（HTML文件），然后根据内容周围的HTML标记符解释和显示各种内容。2. HTML语言基础基本语法在 HTML 中，所有的标记符都用尖括号括起来。例如，、。HTML
2、 标记符是不区分大小写的。、和没有区别。绝大多数标记符都是成对出现的，包括开始标记符和结束标记符。某些标记符，例如，只要求单一标记符号。开始标记符与结束标记符的区别在于：结束标记符多一个斜杠“/”（不是反斜杠“”！）在HTML中，所有的属性都放置在开始标记符的尖括号里，多个属性之间用空格分开，通常也不区分大小写。超链接概念所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后,链接目
3、标将显示在浏览器上，并且根据目标的类型来打开或运行。常用超链接类型按照链接路径的不同,网页中超链接一般分为以下3种类型: 内部链接,锚点链接和外部链接。 如果按照使用对象的不同，网页中的链接又可以分为：文本超链接，图像超链接，E-mail链接，锚点链接，多媒体文件链接，空链接等。表格框线制作思路将TABLE的bgcolor属性设置为要显示的线的颜色，将TABLE的cellspacing属性设置为细线的粗细（通常为1），将单元格或表格行的bgcolor属性设置为不同于表格bgcolor的值(通常设置为white)制作横竖分割线思路制作横竖分割线思路将TABLE的cellspacing属性和cel
4、lpadding的属性都设置为0，将要作为细线的单元格的bgcolor属性设置为细线的颜色，将该单元格的width属性（竖线）或height属性(横线)设置为细线的粗细(通常为1)，注意该单元格中不能有任何内容(包括空格）什么是页面版式设计页面版式就是指采用一种合适的技术将网页的内容显示在浏览器中。在网页中可以使用多种方式进行版式设计，以形成一个统一的站点风格并获得需要的效果。一般可以用表格和框架这两种方式进行页面版式设计版式在网页界面中的作用从网页技术角度讲，设计者通常是围绕着页面中的导航栏、图像、动画、正文等内容展开页面布局的。在页面制作过程中要确定一个页面的布局，应该综合考虑如何安置页面
5、中的各种内容，比如标题文字、导航栏、图片、动画、超链接等。版式在网页界面中的作用从审美角度出发，要求设计师运用统一、对比、对称、均衡等形式原理进行设计，利用网页中的元素构造出和谐、流畅、自然的网页界面。版式的实用功能 主次分明、重点突出应能让浏览者迅速找到网页的主题，并对整个页面有全面的掌握 导航清晰、便于浏览网页应该具有一致风格的导航系统，为用户浏览提供方便 布局合理、逻辑性强应能使网页中的各种视觉信息在页面中合理、有序地排列，既要体现出设计思想，又要符合一般的视觉原理和思维习惯 版式的审美功能 统一，是指设计作品的整体性、一致性。 分割，是指将页面划分为不同区域，以便妥善安排各种页面组成元
6、素。 对比，是指通过合理运用矛盾和冲突，使设计更加富有生机和活力。 表格的组成n 表格标记符tablen 表格标题 captionn 表格行 tr （table row）n 表格数据 td （table data）n 表格表头 th （table heading）表格的构造n 在 TH 或 TD 标记符中使用 rowspan 属性进行行合并n 在 TH 或 TD 标记符中使用 colspan 属性进行列合并边框与分隔线（Frame属性、Rules属性、Border属性） 表格对齐表格的页面对齐 表格内容的对齐:水平对齐(align) 垂直对齐:(valign) 控制单元格空白n Cellspa
7、cing属性n Cellpadding属性使用表格排版页面布局(划分页面区域、背景色的设置、嵌套表格)特殊排版效果表格细线的实现划分页面区域强调：如果要将某网页元素（例如一幅图像）放到特定位置，首先应想到使用表格！ 表格背景的设置n Bgcolor设置背景色n Background设置背景图像使用嵌套表格 复杂的网页布局需要借助嵌套表格！表格的应用综合应用表格的各种属性，可以创建一些常用的网页效果，例如：网页细线。！什么是框架n 在同一个浏览器窗口中同时显示多个网页的交互式结构。n 通过为超链接指定目标框架，可以为框架之间建立起内容的联系，从而实现页面导航的功能。框架结构n 框架集定义框架的结
8、构 n 框架具体定义每个页面 框架结构框架集的定义Rows 定义行结构框架 Cols 定义列结构框架Rows 和 cols 的取值：（像素数 % N*）框架的初始化在 frame 标记符中使用 src 属性可以指定框架中最初显示的页面超链接的目标框架所谓目标框架，是指单击框架网页中的超链接时，对应的目标文件显示在哪个框架中。设置目标框架1、 使用指定框架名称2、 特殊的框架名称（_blank 表示打开新的窗口 _top 表示返回顶层窗口）3、 在超链接标记符 A 中指定 target 属性，取值为具体的框架名称。控制框架的显示效果n 设置框架边框。n 设置框架滚动条。n 设置框架内容与框架边框
9、之间的空白使用页内框架n 用 iframe 标记符可以设置页内框架 不支持框架时显示的内容 n 也可以指定页内框架为目标框架CSS技术的概念表单的作用表单是用于实现网页浏览者与服务器之间信息交互的一种页面元素，它由表单控件和一般内容组成。表单工作原理表单工作原理 FORM包含所有表单内容 Action 属性服务器端脚本程序（ASP、JSP、PHP、Perl等）mailto:Method属性（get、post）Enctype属性表单控件的类型(主要)文本框 复选框 单选框 按钮 选项菜单注：可参考请报站http:/site.soyeah.cc/ 里面的互联网界更多优秀经典网页作品。文本框n 单行
10、文本框 n 口令框 复选框和单选框n 复选框 n 单选框 注意：单选框 name 属性相同者为一组！按钮n 提交按钮 n 重置按钮 n 自定义按钮 选项菜单n SELECT标记符（Size属性 Multiple属性）n OPTION标记符编写CSS样式 CSS特点：内容与表现分离1、类： class方式调用,如 .style1 .s12、标签：已有HTML标签,如h1 body。3 ID：ID方式调用，如#f2 #layer1应用CSS样式特殊的表单 列表 导航条菜单盒模型盒子模式（Box Model）说明：n 盒子里由外至里依次是： n margin 边距 n border 边框 n pad
11、ding 间隙 (也有人称做补丁) n content (内容，比如文本，图片等)n CSS 边距属性 (margin) 是用来设置一个元素所占空间的边缘到相邻元素之间的距离。n CSS 边框属性 (b order) 用来设定一个元素的边线。n CSS 间隙属性 (padding) 是用来设置元素内容到元素边框的距离。n CSS 背景属性指的是 content 和 padding 区域 。n CSS 属性中的 width 和 height 指的是 content 区域的宽和高 定义示例n #sampleMARGIN:10px10px10px10px;PADDING:20px10px10px20
12、px;BORDER-TOP:#CCC2pxsolid;BORDER-RIGHT:#CCC2pxsolid;BORDER-BOTTOM:#CCC2pxsolid;BORDER-LEFT:#CCC2pxsolid;BACKGROUND:url(bg_poem.jpg)#FEFEFEno-repeatrightbottom;COLOR:#666;TEXT-ALIGN:center;LINE-HEIGHT:150%;WIDTH:60%;#sample说明层的名称为sample，在页面中用就可以调用这个样式。MARGIN是指层的边框以外留的空白，用于页边距或者与其它层制造一个间距。”10px10px10
13、px10px”分别代表”上右下左”(顺时针方向)四个边距，如果都一样，可以缩写成”MARGIN:10px;”。如果边距为零，要写成”MARGIN:0px;”。注意：当值是零时，除了RGB颜色值0%必须跟百分号，其他情况后面可以不跟单位”px”。MARGIN是透明元素，不能定义颜色。PADDING是指层的边框到层的内容之间的空白。和margin一样，分别指定上右下左边框到内容的距离。如果都一样，可以缩写成”PADDING:0px”。单独指定左边可以写成”PADDING-LEFT:0px;”。PADDING是透明元素，不能定义颜色。BORDER是指层的边框，”BORDER-RIGHT:#CCC2pxsolid;”是定义层的右边框颜色为”#CCC”，宽度为”2px”，样式为”solid”直线。如果要虚线样式可以用”dotted”。BACKGROUND是定义层的背景。分2级定义，先定义图片背景，采用”url(./images/bg_logo.gif)”来指定背景图片路径；其次定义背景色”#FEFEFE”。”no-repeat”指背景图片不需要重复，如
