网页设计—基本构架

1、网页设计SQLJavaScriptVBScriptJavaHTMLJSPASP.netORACLEAccess/SQL Server课程结构静态网页动态网页应该熟练掌握网页开发工具和相关工具（图像处理、Flash、FireWork等应该熟练掌握网页语言，主要通过程序设计实现动态服务页面的开发。C#科目特征：操作性较强，运用广，讲究创意。软件环境：Dreamweaver、FrontPage、 photoshop、firework、Flash等教学方法：案例教学教学要求：认真按时认真按时完成课外设计类作业。考核方法：交设计作品（21）、期末闭卷考试课程介绍课程介绍 以DreamWeaver为主要工

2、具，讲述网页设计方法，中间将穿插一些必要的程序设计语言： HTML（HyperText Markup Language ）：超文本标记语言 JavaScript：非常流行的一种脚本语言CSS：层叠样式表，一种格式化网页的标准方式。 还将穿插一些必要的图像处理软件： Photoshop、Firework 要想提高静态网页设计水平，视个人情况，可以自学其它一些重要软件，如Flash（学院有开设选修课程） 几个概念 网页 网站 网址 首页 主页 静态网页与动态网页网页设计-HTML首部主体字幕标记图像表格框架超连接表单首部HTML：HyperText Markup Language语言标记： 首部

3、主体 实例：网页结构网页结构.htm 文挡标题 文档主体：文本、图像、声音、HTML命令等 主题：用于显示该网页的主题。主体1.主体属性：Background=”.abc.gif”BGColor=”#ffaacc”TopMargin=”30” margin: 页边的空白leftmargin=50 Topmargin=40link=#ff6600Vlink=#330099 Text=Red实例：主体属性主体属性.htm.htm文本2、分组、分段、分行显示文本中断本行标志，文本将在下一行输出。注意：无需相应的匹配标记若存在则html忽略 分段标志，对文本进行分段注意：无需相应的匹配标记若存在则ht

4、ml忽略组标志 ! Div P BR !Align 属性属性，用来设置组、段落的对齐方式例如：这段文字居右对齐这组文字居中对齐！注：此外还可以用 来设置文本居中显示！3、注释标志：1 2 例如： this is another html comment 实例：分行、居中与注释实例：分行、居中与注释.htm4 .文本文本1) 格式化文本标记格式化文本标记 设置黑体属性 设置斜体属性 文本文本2) 设置字体、字号和颜色设置字体、字号和颜色 Size：整数，指定字体的大小，其取值为1-7Color：字体颜色，除了用“RRGGBB”表示外，也可通过名称指定：Black黑Navy海蓝Blue蓝Olive

5、橄榄Green绿Purple 紫Teal淡青Yellow 黄White白Gray灰Lime橙Fuchsia紫红Maroon栗Red红Aqua淡蓝Silver银白例如：this is red this is blue注：控制行内不同的文字效果也可以用标记注：控制行内不同的文字效果也可以用标记例如： 这是一段有多种颜色和字体大小构成的一行文字文本5. 标题标志标题标志 n=1 - 6如：这是一级标题实例：标题标题.htm6. 列表列表有序列表有序列表：用来定义一个加编号的列表，由标记定义。格式： type: A（大写字母）、a（小写字母）、 I（大写数字）、i（小写数字） 1（阿拉伯数字）star

6、t：整数，用来指定单前列表想的顺序值。无序列表无序列表格式如下：Item1. type：circle（空心园）、disc（实心园）、squire（方块）注： 也可以用来定义无序列表实例：有序和无序列表有序和无序列表.Htm“图像列表图像列表”的制作方法？的制作方法？图像图像的格式：JPG：适用于较大的图像GIF：适用于小图像，并允许是透明和动画PNG：矢量图像 图像的处理工具PhotoshopFireWorkFlashCoreDraw图像通过标记，把图像或视频放到Web页面中。 格式：各属性值意思如下：Alt：指定加载图像时显示的文字，这些文字也是当光标移动图像时显示的文字。Border：整数

7、，图像边框的宽度Heigth：整数，图像的高度Width：整数，用来指定图像的宽度。它允许浏览器在图象下载之前就可以正确格式化页面。 SRC：指定要显示的图像的URL Dynsrc：（Dynamic Source动态源）指定到视频剪辑或VRMl文件的URL。Controls：指定该选项后，如果有视频剪辑，则显示一套视频控件Hspace：整数，用来指定图像的左、 右边距。Loop：整数，用来指定视频剪辑播放次数。 Start：指定何时开始播放DYNSRC文件，其取值可以是FileOpen或MouseOver。图像例子：Image.Htm（显示两个图像，一个是JPG，另一个GIF）注：要播放视频文

8、件，应使用Dynsrc属性，该属性必须与Controls属性一起使用。如果Dynsrc和SRC属性同时使用，因Dynsrc优于SRC，所以若计算机有多媒体功能，而且所指定的视频文件不存在时，才显示由SRC属性指定的图形文件。例如：播放播放AVI 文件文件.Htm图像的对齐方式图像的对齐方式align属性：属性：top：middle：bottom：left：right：超链接路径： 绝对路径：带盘符的路径 相对路径： 习题：1、在b.htm中链接e.jpg2、在c.htm中链接d.jpg3、在e.htm中链接d.jpg网络地址 绝对地址：协议头：/域名/文档路径/文件名。 相对地址：只包含文档路

9、径和文件名的地址。锚点链接：网页内部导航链接！需要先定义锚点（标签）！需要先定义锚点（标签）！注意看操作方法注意看操作方法超链接作用：用来定义一个Web页到另一个Web页的跳转，在Web页中，超链接可以是文本或图像。格式： 含义：Href：制定目标节点的URL链接 Name：超链接的名字Target：指定一个框架窗口，用该属性可以指定不同的窗口，包括：_blank把链接加载到一个新的无标题窗口_parent把链接加载到链接所在文档的父文档_self把链接加载到链接所在的同一个框架窗口_top把链接加载到整个窗口例子：hyperlinks.htm超链接二、文字图像链接链接到本地站点(内部链接)！

10、看不到盘符的链接！链接不允许出现盘符！链接到其它站点(外部链接)！应该包含协议头信息！页内链接文件下载链接指向下载文件跳转菜单字幕标记 MARQUEE（字幕标记）（字幕标记）HTML提供了一个字幕标记，可以用来滚动字幕。格式： 滚动内容（文字、图片等）Behavior：指定文本动画的性质，其取值为：Scroll、Slide或AlternateDirection：指定文字移动的方向，其取值为：left 、Right、UP或DownHeight：整数，指定字幕的高度，以象素为单位 Width：整数，用来指定字幕的宽度，以象素为单位Hspace：整数，指定字幕的外部边缘与浏览器窗口之间的左右边距Lo

11、op：整数，用来指定字幕滚动次数，也可以设置为关键字InfiniteScrollamount：整数，用来指定文字每次滚动所移动的距离（象素）ScrollDelay：整数，指定滚动运动之间的时间，以毫秒为单位Vspace：整数，用来指定字幕的外部边缘与浏览器窗口之间的上下边距例子：Marquee.Htm表格通过标记来定义，表格可分为表头、行、单元格构成，这些元素分别用不同的标记来定义：定义表的行：定义单元格：定义表头 /*与TD等价，可以相互替换*/：定义表的标题表格1) 定义表格 Allign：制定表的对齐方式，取值为三种：Left、CENTER、RightBackground：指定用作背景图

12、形的一个URL BGColor：指定表格的背景颜色Border：整数，指定边框的尺寸，象素为单位。BorderColor：指定边框颜色BorderColorLight：指定3D边框的高亮显示颜色，必须和Border属性一起使用BorderColorDark：指定3D边框的阴影颜色，必须和Border属性一起使用CellPadding：整数，用来指定单元格之间在水平和垂直方向上的间距，以像素为单位Width：整数，用来指定表的宽度，以像素为单位；也可以把宽度指定为一个百分比。 Height：整数，用来知道表的高度表格2) 定义标题：定义标题：Valign:指定标题的垂直对齐方式，取值为：Top、

13、Middle、Bottom3) 定义行：定义行：TR align=”align” background=”url” bgcolor=”#rrggbb” valign=”valign” 4) 定义单元格：定义单元格：表的单元格用标记或标记定义，格式如下：注：ColSpan：整数，用来指定单元格跨越的表的列数 Nowrap：使单元格内的文本换行。 RowSpan：整数，用来指定单元格跨越的表的行数。各对象间关系：table tr td(th)一般我们设定表格的规格（大小）时，最好按照以下方法处理：1、在table中设定表格的宽度2、在每一个TR中设定本行的高度3、在第一个TR中通过设定TD（单元格

14、）的宽度以确定该列的宽度，如果遇到单元格合并则顺延至下一行的TD中设定。实例：建立表格实验建立表格实验.htm表格框架作用：将浏览器窗口（网页）划分为多个窗格，其中每个窗格中含有一个Html文档。相关标记：Frameset FrameIFrameNoFrame1. 框架设置标记格式：frameset cols=”col1,col2,col3, framevorder=”1或0”FrameSpacing=integer rows=”row1,row2,row3,” 含义：cols：指定框架的列宽，单位：像素、百分比、相对尺寸( * )。例：cols=”25%,100,*” (把一个浏览器分为三列

15、，第一列占25， 第二列100像素，而第三列为浏览器窗口剩余部分。）FrameBorder：指定框架是否显示三维边框，值为0，FrameSpacing：指定框架之间的间隔，单位：像素。Rows：指定框架的行高。单位：像素、百分比、相对尺寸（ * ）框架2.框架标记(Frame)无匹配标记作用：指定框架的属性，包括名称、框架是否可以滚动、显示的文件。格式： 含义：MarginHeight：指定框架的高度，单位：像素 Name：指定框架的名称 NoResize：是否能调整框架的大小 Scrolling：框架是否可以滚动 SRC：指定框架内显示的HTML文件。例子：Frame.Htm框架3.浮动框架

16、这种框架可以放在WEB页的任何位置。格式：含义：参考前例例子：Iframe.htm4.Noframe：如果在浏览器不支持框架情况下，可以通过此标记显示适当消息，要显示的信息放在他们中间。如： 该页面含有框架，但用户的浏览器不支持框架。 框架集标记设定窗口划分为几行或几列，此标记可以嵌套 框架标记设定此框架的一些属性：框架名称、框架网页、边框、 滚动条、高度或宽度等 3、设计嵌套框架如果有n个方格就有n个 4、保存框架文件数n+1 5、在框架中的超链接框架表单HTML中的表单也称窗体，它用来收集用户数据输入，实现网页浏览者与服务器之间信息交互，通过 定义 action：指定将要接收表单数据的后端

17、过程的URLMethod：指定客户端和服务器之间数据交换的方法，其取值为Get和Post。Onsubmit：指定提交表单时调用的事件处理程序。Target：指定一个目标窗口。可以指定各种不同的目标窗口_black 把链接加载到一个新的目标窗口_parent 把链接加载到链接所在文档的父窗口_self把链接加载到链接所在的同一个框架窗口_top把链接加载到整个窗口get：在URL的末尾附加要向服务器发送的信息post：将整个表单数据打包一起发送到服务器表单注：一般情况下，通过标记把内部控件放在表单内，这些控件常用于收集数据，并启动这些数据向服务器的传送，而所谓提交表单事件，就是将表单收集的数据传

18、送给服务器。提交操作是通过内部控件Submit来实现的。例如：该例中，当单击Submit按钮时，表单将数据 从TextField文本控件发送到可执行部分。例子：例子：表单表单.Htm表单1、输入（、输入（Input）标记和内部）标记和内部椌椌件件 TYPE：指定椌件的类型。其取值可以是下面的椌件名称。Checked：当椌件是checkbox或radio时，用该属性指定默认选定的复选框椌件或者单选按钮椌件。MaxLength：整数，用来指定Password、Text、TextArea椌件中所允许的最大字符数。Size：整数，用来指定Password、Text椌件的字符长度。SRC：当指定Imag

19、e类型时，该属性用来定位要显示的图像的URLEvent：在提交椌件的值之后激发的事件。例子：输入例子：输入(INPUT)标记标记.Htm表单1. Text椌件功能：用来接收文本输入格式： 事件：OnBlur、OnFocus、OnSelect、OnChange2. TextArea椌件（文本区）功能：同Text类似，允许多行输入。格式：属性：cols：整数，用来指定文本区的宽度，以字符为单位 Rows：整数，用来指定文本区的高度，以行为单位。 Name：指定与椌件相关联的表单输入变量的名称。 在提交是被传送至后端进程。事件：OnBlur、OnFocus、OnSelect、OnChange 表单3

20、. PASSWORD椌件功能：与TEXT相似，但在输入数据时，显示的不是实际内容，而是*号以防止其他人看到屏幕上输入的数据格式、属性、事件：同上例子：文本输入框、密码输入框、文本区5. CheckBox椌椌件件功能：在表单上显示一个复选框格式：属性、事件：同上例子：checkBox.htm4.RADIO椌件 功能：允许用户从若干个选项中选择一项。 格式、属性、事件：同上例子：radio.htm！注意，如何实现多选一？！注意，如何实现多选一？！表单5、文件选择框允许用户在表单中选择文件，然后上传到服务器。格式：size：用于设置控件的宽度例子：例子：文件选择文件选择.htm.htm6、BUTTON椌件功能：在表单上显示一个多