版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
2023年7月23日第1页第3章JavaWeb编程基础：HTMLHTML语言Web结构Javascript2023年7月23日第2页Web编程JSP相关技术1、JAVA基础知识
JSP使用Java作为基本语言，JSP文件实际就是一些JSP定义的标记、Java程序和HTML文件的混合体，要学好JSP，必须掌握Java语言的基本知识。2、HTML基础知识使用JSP开发动态网页，最终产生的结果中超过90%以上将是HTML文件，因此，JSP程序员要全面理解HTML语言。2023年7月23日第3页3、JavaScript基础知识
JavaScript允许在客户端执行逻辑判断，这意味着客户端和服务器之间的交互次数会少一次。因此，掌握JavaScript开发知识非常必要。其中包括掌握JavaScript基本语法、CSS样式特效和使用JavaScript进行客户端验证。4、数据库基础知识
JSP大都和数据库相关，要求了解数据库基本知识、关系数据库基本原理和SQL语言。2023年7月23日第4页1.1HTMLHTML入门
HTML基本结构及标记符DreamWeaver页面布局与文字设计超链接列表多媒体效果
TABLE表格布局层Layer交互式表单CSS样式2023年7月23日第5页HTML入门HTML英语意思是：HypertextMarkedLanguage，即超文本标记语言通过HTML可以表现出丰富多彩的设计风格通过HTML可以展现多媒体的效果标签“<标签名字属性>”2023年7月23日第6页HTML的基本结构文档头、文档体<HTML>
<HEAD>
头部信息
</HEAD>
<BODY>
文档主体，正文部分
</BODY></HTML>2023年7月23日第7页在HTML中，所有的标记符都是一些字母或单词并用尖括号括起来。例如，<html>、<a>。HTML标记符是不区分大小写的。<html>、<Html>和<HTML>没有区别。绝大多数标记符都是成对出现的，包括开始标记符和结束标记符。某些标记符，例如<BR>，只要求单一标记符号。开始标记符与结束标记符的区别在于：结束标记符多一个斜杠“/”（不是反斜杠“\”！）标记符有自己的属性。属性是用来描述对象特征的特性。例如，一个人的身高、体重就是人这个对象的属性。标记符2023年7月23日第8页在HTML中，所有的属性都放置在开始标记符的尖括号里，多个属性之间用空格分开，通常也不区分大小写。
例如，可以用字体标记符和字号属性指定文字的大小。
<FONTSIZE=1>本行字将以较小字体显示。</FONT>2023年7月23日第9页一个Web页实际上对应于一个HTML文件，HTML文件以.htm或.html为扩展名。最基本的HTML文档包括：HTML标记<HTML></HTML>、首部标记<HEAD>和</HEAD>、正文<BODY></BODY>和标题标记<TITLE></TITLE>。<HTML>和</HTML>是Web页的第一个和最后一个标记符，Web页的其他所有内容都位于这两个标记符之间。这两个标记告诉浏览器或其他阅读该页的程序，此文件为一个Web页。2023年7月23日第10页
首部标记<HEAD>和</HEAD>位于Web页的开头，其中不包括Web页的任何实际内容，而是提供一些与Web页有关的特定信息。
<TITLE>和</TITLE>，用于定义网页的标题，当网页在浏览器中显示时，网页标题将在浏览器窗口的标题栏中显示正文标记符<BODY>和</BODY>包含Web页的内容。文字、图形、链接以及其他HTML元素都位于该标记符内，正文标记符中的文字，如果没有其他标记符修饰，则将以无格式的形式显示。2023年7月23日第11页page.htm<html><head><title>第一个页面</title></head><body>这是一个页面</body></html>效果如图实例操作2023年7月23日第12页超文本语言中的标签单标签
<标签名称><BR>双标签
<标签>内容</标签>
<APPLET></APPLET>
标签属性
<标签名字属性1属性2属性3…><APPLETCODE="Calculator.class"width=150height=200>2023年7月23日第13页多种视窗模式简便易行的对象插入功能方便地创建框架，自由编排网页用层与时间轴结合迅速创作网页动画使用css和html样式减少重复劳动dw内置了大量的行为用模板和库创建具有统一风格的网站dw的排版功能和强大的网站管理功能Dreamweaver入门2023年7月23日第14页工作界面工作视图的改变显示，隐藏和改变面板的大小标尺与网格制作网页的基础操作（打开，保存，关闭，设置页面属性等）2023年7月23日第15页2023年7月23日第16页2023年7月23日第17页2023年7月23日第18页2023年7月23日第19页2023年7月23日第20页
Dreamweaver的操作界面由“文档”窗口、工具栏、状态栏、上下文菜单、工具栏和属性检查器等部分组成.2023年7月23日第21页
“文档”工具栏中主要包含了一些对文档进行常用操作的功能按钮，用户通过单击这些按钮可以在文档的不同视图间进行快速切换。2023年7月23日第22页
“标准”工具栏中包含了一些“文件”和“编辑”菜单中对文档常用操作命令的按钮。选择“查看”｜“工具栏”｜“标准”命令，可以显示或隐藏“标准”工具栏.2023年7月23日第23页
状态栏位于文档窗口的底部，作用是提供与用户正编辑的文档有关的某些信息，如当前窗口大小、文档大小和估计下载时间等等.2023年7月23日第24页“插入”工具栏包含用于创建和插入对象(如表格、层和图像)所用到的所有按钮。这些按钮被分类组织到各个选项卡中.2023年7月23日第25页选择“窗口”｜“属性”命令，可以显示或隐藏属性检查器。属性检查器在Dreamweaver中软件默认将其显示在文档窗口的下方.2023年7月23日第26页确定网站的主题搜集资料网站布局，版式规划选择制作工具站点建设和网页制作测试并上传推广宣传维护更新建立网站的基本流程2023年7月23日第27页定义本地端站点导入一个本地端站点使用高级设置：本地信息远程信息测试服务器遮盖备注设计备注站点地图布局文件视图列
contribute设置栏注意:为了更顺畅的工作，避免不兼容的现象，在使用Dw工作时最好以英文和数字来命名文件和文件夹。建立本地站点2023年7月23日第28页1申请网页空间申请网页空间的方法有下列几种：租用专线（或ADSL）：如果你的预算充足的话，您可以向万维网、中国万维网等ISP（InternetServiceProvider）租用专线，让你的计算机24小时上网并架设成Web服务器，这么一来，其他人就可以通过Internet浏览你存放在自已计算机上的网页。网站上传租用网页空间或虚拟主机：ISP通常会提供网页空间或虚拟主机出租业务，这种业务的价格比较低，适合预算少的使用者。2023年7月23日第29页申请免费网页空间：事实上，就算您没有预算，还是可以上网去申请免费网页空间。目前有提供免费网页空间服务的站点不小，例如：虎翼网，等。2023年7月23日第30页2注册网域名称（DomainName）也可以设置类似、、的超酷网址。即就是为自已的网站注册个网域名称目前可通过“中国网络信息中心”（CNNIC）的网域名称注册系统申请.、.、.的网域名称。2023年7月23日第31页3将网页上传至Internet首先，解释什么叫做“上传”（或称上载，upload），要讲上传，就要先了解什么是FTP。简单来说，FTP（FileTransferProtocol）是一种网络文件传输协议，例如，在网络上下载软件或文件，就是利用FTP文件传输协议。所谓“上传”就是FTP的功能之一，既然可以把网络上的文件下载下来，那么也可以把文件从自已的计算机传送到网络上去，简而言之，“上传”就是把计算机里的数据，通过FTP文件传输协议送到网络的某台服务器上。2023年7月23日第32页上传方法一：在Dreamweaver中发布
创建好的站点可以发布到Internet上的空间中，也可以发布到局域网中的某一个主机上。如果没有具备这些条件，而又想测试一下Dreamweaver的上传功能，可以从定义站点对话框的“高级”选项卡中的“远程信息”中选择“访问”下拉列表中的“本地/网络”选项，并在“远程文件夹”中指定自己电脑中的一个文件夹，同样可以实现上传功能。2023年7月23日第33页1.上传到Internet
在文件面板中单击上传文件按钮，弹出如图所示的对话框，选择“是”，立即定义远程服务器；我们在申请网站空间时，已经得到了FTP主机，主机目录，登录名和密码等信息，在“访问”中选择FTP，填写相应的信息，如下页图所示；单击“确定”，完成远程服务器的测试；
讲述上传到Internet和上传到本机2023年7月23日第34页2023年7月23日第35页
此时把视图显示设置为远程视图，再单击上传文件按钮，提示是否上传整个站点，选择“是”，则开始上传站点中的所有文件，如图所示，传输完毕，自动关闭。
最后用申请空间时设置的站点名称登录即可在Internet上看到自己的站点。
2023年7月23日第36页
通过在本地模拟远程文件夹的方法，可以把网站上传到本地机上。方法和上传到Internet类似，在设置远程服务器时，选择“本地/网络”选项，通过浏览按钮在远程文件夹中设置一个本地文件路径，如图所示，单击“确定”设置完成，再单击上传文件按钮可以把站点文件上传到本地的其他位置。2.上传到本机2023年7月23日第37页2023年7月23日第38页FTP软件有很多，较知名的有CuteFTP、WS_FTPPro、等，下面将以CUTEFTP这套FTP工具软件为例，描述如何上传文件至网络服务器。首先，取得CUTEFTP软件,并安装该软件在自己的计算机上。上传方法二：FTP工具发布
2023年7月23日第39页Step1：选择“中国下载”网站，登录到：,如图所示。2023年7月23日第40页Step2：查找CuteFtp软件。在网页的搜索对话框中输入CuteFtp，如图12-14所示。2023年7月23日第41页Step3：如图所示，选择CuteFtp的版本。我们选择CuteFTPXP简体中文版
V5.0.2，并在本地进行下载2023年7月23日第42页使用CUTEFTPXP上传文件上传文件，就是利用FTP工具将网页作品安全的发送到网络服务器上的网页空间中。2023年7月23日第43页要联机到FTP网站，或修改联机设定，如图所示，点菜单“File/SiteManager”或按【F4】键。2023年7月23日第44页设定连接参数，如图所示。2023年7月23日第45页按下“Connect”钮，即可和FTP网站联机，如图所示。2023年7月23日第46页联机成功时，会出现一个对话框通知你，按下“OK”钮，如图所示。2023年7月23日第47页在自已计算机上选取可上传的文件，按“Upload”钮，即可上传网页至申请免费空间的网站。2023年7月23日第48页页面布局及文字设计标题换行<BR>段落标签<P>水平线段<HR>文字的大小设置文字的字体与样式文字的颜色综合示例网页设计2023年7月23日第49页标题HTML中提供了相应的标题标签<Hn>,总共提供六个等级，n越小，标题字号就越大<H1>…</H1>第一级标题
<H2>…</H2>第二级标题
<H3>…</H3>第三级标题
<H4>…</H4>第四级标题
<H5>…</H5>第五级标题
<H6>…</H6>第六级标题2023年7月23日第50页换行<BR>在HTML语言规范里，每当浏览器窗口被缩小时，浏览器会自动将右边的文字转至下一行。所以，编写者对于自己需要断行的地方，应加上<BR>标签。2023年7月23日第51页段落标签<P>文件段落的开始由<P>来标记，段落的结束由</P>来标记，</P>是可以省略的，因为下一个<P>的开始就意味着上一个<P>的结束<P>标签还有一个属性ALIGN，它用来指名字符显示时的对齐方式，一般值有CENTER、LEFT、RIGHT三种2023年7月23日第52页水平线段<HR>这个标签可以在屏幕上显示一条水平线，用以分割页面中的不同部分。<HR>有四个属性：
size水平线的宽度
width
水平线的长，用占屏幕宽度的百分比或象素值来表示
align
水平线的对齐方式，有LEFTRIGHTCENTER三种
noshade
线段无阴影属性，为实心线段2023年7月23日第53页文字的大小设置提供设置字号大小的是FONT，FONT有一个属性SIZE，通过指定SIZE属性就能设置字号大小，而SIZE属性的有效值范围为1－7，其中缺省值为3。我们可以SIZE属性值之前加上“＋”、“－”字符，来指定相对于字号初始值的增量或减量。2023年7月23日第54页文字的字体与样式HTML提供了定义字体的功能，用FACE属性来完成这个工作。FACE的属性值可以是本机上的任一字体类型，只有对方的电脑中装有相同的字体才可以在他的浏览器中出现你预先设计的风格。
<fontface=“字体”>2023年7月23日第55页文字的字体与样式为了让文字富有变化，或者为了着意强调某一部分，HTML提供了一些标签产生这些效果，现将常用的标签列举如下：<B>
</B>粗体HTML语言<I>
</I>斜体HTML语言<U>
</U>加下划线HTML语言<TT>
<TT>打字机字体HTML语言<BIG>
</BIG>大型字体HTML语言<SMALL>
</SMALL>小型字体HTML语言<EM>
</EM>表示强调，一般为斜体HTML语言<STRONG></STRONG>表示特别强调，一般为粗体HTML语言<CITE></CITE>用于引证、举例，一般为斜体HTML语言2023年7月23日第56页文字的颜色文字颜色设置格式如下：
<fontcolor=color_value>…</font>
这里的颜色值可以是一个十六进制数(用“#”作为前缀)，也可以是颜色名称如：Black="#000000“
Green="#00FF00"
Red="#FF0000“
Blue="#0000FF“2023年7月23日第57页
网站都是由许多网页组成的，网页之间通常又是通过超链接方式相互建立关联的。超链接是Web的精华。没有超链接，就无法通过单击的方式遨游Web世界，而如果没有了单击的功能，Web就会是死水一潭。没有超链接的网页在Web世界里没有实际意义，网站也就失去了存在的意义。超链接的应用范围很广，利用它不仅可以链接到其他网页，还可以链接到其他图像文件、多媒体文件及下载程序，也可以利用它在网页内部进行链接或是发送E-mail等。在Dreamweaver中，可以将文档中的任何文字及任意位置的图片设置为超链接。超链接类型有页间链接、页内链接、E-mail链接、空链接及脚本链接等。超链接的设置2023年7月23日第58页超链接简称链接，是指从一个网页指向一个目标对象的连接关系，该目标对象可以是网页，也可以是当前网页上的不同位置，还可以是图片、电子邮件地址、文件（如多媒体文件或者MicrosoftOffice文档），甚至可以是应用程序。一个超链接的基本格式如下：
<AHREF="资源地址">链接文字</A>·标签<A>链接的开始，</A>表示链接的结束；
·属性“HREF”定义了这个链接所指的地方；
·通过点击“链接文字”可以到达指定的文件。
<AHREF=“http://www.”>教育网</A>2023年7月23日第59页站点内部的链接不同站点间的链接网站外部的链接文件下载的链接电子邮件的链接空超链接页面内的超链接(锚点链接,目录链接、书签)2023年7月23日第60页设置链接网页的打开方式target=_blank：将超链接或热点所连接的网页显示在新打开的窗口中
target=_self：将超链接或热点所连接的网页显示在目前的窗口中。此项为默认值，不用重新指定target=_parent：将超链接或热点所连接的网页显示在目前文件的父框架中。target=_top：将超链接或热点所连接的网页显示在浏览器窗口，取消所有框架2023年7月23日第61页列表无序号列表序号列表2023年7月23日第62页有序列表有序列表（Orderedlist）也称数字式列表，它是一种在表的各项前显示有数字或字母的缩排列表。定义有序列表需要使用有序列表标记符<OL></OL>和列表项（Listitem）标记符<LI></<LI>（结束标记符可省略），语法如下：
<OL><LI>Listitem1<LI>Listitem2</OL>2023年7月23日第63页OL标记符最常用的属性type，用来设置数字序列样式。取值为：1、A、a、I、i。Value属性：可以指出当type属性取值为1时（默认的效果），列表前面可以显示不连续的值。Start属性：指出列表的初值有序列表属性2023年7月23日第64页2023年7月23日第65页2023年7月23日第66页无序列表无序列表（Unorderedlist）也称强调式列表，它是一种在表的各项前显示有特殊项目符号的缩排列表。定义无序列表需要使用无序列表标记符<UL></UL>和列表项（Listitem）标记符<LI></LI>（结束标记符可省略），语法如下：<UL><LI>Listitem1<LI>Listitem2</UL>UL标记符最常用的属性type，用来设置项目符号样式。取值为：disc、circle、square。2023年7月23日第67页2023年7月23日第68页设置页面属性外观链接标题网页标题/编码跟踪图像2023年7月23日第69页多媒体效果插入图象播放音乐播放视频2023年7月23日第70页插入图像超文本支持的图象格式有GIF、JPEG等。
插入图象的标签是<IMG>，其格式为：
<IMGSRC="图形文件地址">2023年7月23日第71页播放音乐点播音乐将音乐做成一个链接：<A
HREF="音乐地址">乐曲名</A>自动载入音乐
基本语法：
<EMBEDSRC="音乐文件地址">在网页中加入声音（插入/插件）
<embedsrc=""width=""height=""hidden=""autostart=""loop=""></embed>
默认：hidden="false"添加背景音乐方法1.上例中hidden=true
方法2.插入标签/html标签/bgsound2023年7月23日第72页播放视频链接一个视频文件将视频文件做成一个链接的方法：
<A
HREF="视频地址">视频名称</A>自动载入视频与音乐的播放一样，可以使用EMBED标签播放视频：
<EMBEDSRC=“视频文件地址”>2023年7月23日第73页在网页中加入影片方法1：（插入/ActiveX）<objectclassid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"width=""height=""title=""/><paramname="src"value="aa.rm"/><paramname="autostart"value="true"/><paramname="controls"value="imagewindow"/><embedsrc="aa.rm"width=""height=""autostart="true"controls="imagewindow"></embed></object>参数中设置：src，controls，autostart等方法2：img中使用属性dynsrc属性插入影片<imgdynsrc="aa.rm"width=""height="〉2023年7月23日第74页插入flash插入flash文本和flash按钮插入flashPaper插入flash视频插入Shockwave文件
Shockwave文件是Macromedia公司在Web上地交互式多媒体，用于播放插入网页中应用director以及多个相关程序来创建shockwave文件。文件地扩展名一般为.dir。插入applet插入ActiveX插入插件
2023年7月23日第75页插入FlashPaper文档插入Flash视频（.flv）
插入Flash视频对话框中各选项说明如下：1.视频类型：用于选择视频类型，包括“累进式下载视频”和“流视频”两个选项2.URL：指定FLV文件的相对或绝对路径3.外观：指定Flash视频组件的外观，所选外观会在预览中显示4.宽度/高度：以像素为单位指定FLV文件的宽度/高度5.限制高度比：保持Flash视频组件的宽度和高度之间的纵横比不变6.自动播放7.自动重新播放：指定播放控件在视频播放完之后是否返回起始位置8.必要时提示用户下载FlashPlayer:可在页面中插入代码，该代码将检测查看Flash视频所需的Player版本，并在用户没有所需的版本时提示他们下载flashPlayer的最新版本9.消息：指定将在用户需要下载查看Flash视频所需的Player最新版本时显示的消息2023年7月23日第76页视频类型选择“流视频”选项，则对话框中各选项功能如下：1.“服务器URI”：以rmtp:///app_name/instance_name的形式指定服务器名称，应用程序名称和实例名称2.流名称：指定想要播放的flv文件的名称3.实时视频插入：指定flash视频内容是否实时的。如果选定了该项，flashplayer将播放从flashcommunicationServer流入的实时视频输入。实时视频输入的名称是在“流名称”文本框中指定的名称4.缓冲时间：指定在视频开始播放之前进行缓冲处理所需的时间（单位秒）。默认的缓冲时间设置为0，这样在点击了播放按钮后视频会立即开始播放。如果要发送的视频的比特率高于站点访问者的连接速度，或者internet通信可能会导致带宽或连接问题，则可能需要设置缓冲时间。2023年7月23日第77页TABLE表格通过表格可以将页面划分为不同的部分，实现对元素的准确定位。表格是对文本和图形进行布局的重要工具，合理地利用表格布局页面，不但有助于清晰的搭建页面结构，又能保证形式上的丰富多彩创建表格编辑表格2023年7月23日第78页表格的基本结构表格的标题表格的尺寸设置表格内文字的对齐、布局跨多行、多列的表元表格的颜色2023年7月23日第79页表格的基本结构<table>...</table>定义表格
<caption>...</caption>定义标题
<tr>定义表行
<th>定义表头
<td>定义表元(单元格，表格的具体数据)
2023年7月23日第80页表格的标题表格标题的位置，可由ALIGN属性来设置，其位置分别由表格上方和表格下方。下面为表格标题位置的设置格式。设置标题位于表格上方：
<captionalign=top>...</caption>设置标题位于表格下方：
<captionalign=bottom>...</caption>
2023年7月23日第81页表格尺寸设置表格的大小
一般情况下，表格的总长度和总宽度是根据各行和各列的总和自动调整的，如果要直接固定表格的大小，可以使用下列方式：
<tablewidth=n1height=n2>
width和height属性分别指定表格一个固定的宽度和长度，n1和n2可以用像素来表示，也可以用百分比（与整个屏幕相比的大小比例）来表示2023年7月23日第82页表格尺寸设置边框尺寸设置边框是用border属性来体现的，它表示表格的边框边厚度和框线。将border设成不同的值，有不同的效果。如：
<tableborder=10
width=250>
<caption>定货单</caption>
<tr><th>苹果</th><th>香蕉</th><th>葡萄</th>
<tr><td>200公斤</td><td>200公斤</td><td>100公斤</td>
</table>2023年7月23日第83页表格尺寸设置格间线宽度
格与格之间的线为格间线，它的宽度可以使用<TABLE>中的CELLSPACING属性加以调节。格式是：
<TABLE
CELLSPACING=#>
#表示要取用的像素值例：
<tableborder=11
cellspacing=15>
<caption>定货单</caption>
<tr><th>苹果</th><th>香蕉</th><th>葡萄</th>
<tr><td>200公斤</td><td>200公斤</td><td>100公斤</td>
</table>2023年7月23日第84页表格尺寸设置内容与格线之间的宽度可以在<TABLE>中设置CELLPADDING属性，用来规定内容与格线之间的宽度。格式为：
<TABLE
CELLPADDING=#>
#表示要取用的像素值例：
<tableborder=3
cellpadding=5>
<caption>定货单</caption>
<tr><th>苹果</th><th>香蕉</th><th>葡萄</th>
<tr><td>200公斤</td><td>200公斤</td><td>100公斤</td>
</table>2023年7月23日第85页表格内文字的对齐/布局表格中数据的排列方式有两种，分别是左右排列和上下排列。左右排列是以ALIGN属性来设置，而上下排列则由VALIGN属性来设置。其中左右排列的位置可分为三种：居左（left)、居右(right)和居中(center)；而上下排列基本上比较常用的有四种：上齐(top)、居中(middle)、下齐(bottom)和基线(baseline)。<tralign=#>
<thalign=#>
#=left,center,right
<tdalign=#><trvalign=#>
<thvalign=#>
#=top，middle，bottom，baseline
<tdvalign=#>
2023年7月23日第86页表格的颜色在表格中，既可以对整个表格填入底色，也可以对任何一行、一个表元使用背景色。表格的背景色彩<tablebgcolor=#>
行的背景色彩<trbgcolor=#>
表元的背景色彩<thbgcolor=#>或<tdbgcolor=#>
#=rrggbb16进制RGB数码,或者是下列预定义色彩名称：
Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,Fuchsia,White,Green,Purple,Silver,Yellow,Aqua
2023年7月23日第87页编辑表格和单元格属性调整表格行数与列数：调整表格宽度与高度：设置表格的边框合并和拆分单元格单元格内容水平对齐和垂直对齐套用表格样式：命令/格式化表格导入与导出表格数据:文件/导入或者导出对表格数据排序:命令/排序表格向表格内部添加表格（嵌套）表格和层的转换2023年7月23日第88页按ctrl键并单击可以选择单元格按shift键并拖动可以保留其他列宽调整表格方法:选取表格,直接在属性面板中输入需要的值鼠标指向单元格内,点击右键,可以在弹出菜单中选择目标操作命令(在左侧或者上方插入一列或一行);插入多行多列时,可以执行”修改/表格/插入行或列”命令点击最后一行的最后一个单元格,按Tab键,可在表格末尾插入一行.2023年7月23日第89页边框与分隔线：Frame属性:表格外围边框
void不显示任何边框
above只显示上面的边框
below只显示下面的边框
hsides只显示上下边框
lhs只显示左边框
rhs只显示右边框
vsides只显示左右边框
box四周边框都显示
border四周边框都显示。这是默认值。
制作特殊的表格Rules属性:表格内部分割线
all:显示所有行列分割线
cols：只显示垂直列分割线
none:不显示分割线
rows:只显示水平行分割线
groups：只显示水平分组分割线。组由thead,
tbody,
tfoot和colgroup标记定义。2023年7月23日第90页设置表格的亮边框和暗边框
bordercolordark:暗边框，表格边框背光部分的颜色
bordercolorlight：亮边框，表格边框向光部分的颜色2023年7月23日第91页
在网页设计中，页面布局是一个非常重要的部分。有了好的布局，整个网页才可能美观、大方、实用。Dreamweaver提供了多种方法来创建和控制网页布局，使用表格的“布局模式”就是最常用、最实用的方式之一。
表格的“布局模式”来源于表格，但是在布局模式中简化了使用表格进行网页布局的过程，避免了使用传统的方法创建基于表格的页面布局时经常出现的一些问题，如定位不准、不易调整等。布局模式
2023年7月23日第92页布局方法：表格，框架，层布局的几种模式：标准、扩展、布局模式切换布局模式的方法：
1.查看/表格模式/布局模式
2.CTRL+F6键，布局模式和标准模式间切换
3.常用工具中，选布局/选择布局模式
标准模式：工作中最常用到的一种模式，即标准模式下显示表格等内容，最接近在浏览器中的实际显示状态扩展模式：加粗显示表格的边框，便于对表格进行选择，移动等操作，在该显示模式下显示的表格，与在浏览器中显示的表格不太一致布局模式：可以在布局模式中使用布局表格和布局单元格创建表格，在该模式下可以更方便快捷地创建网页的布局2023年7月23日第93页
设置布局模式的首选参数(参数选择)：
1.编辑/首选参数
2.选取左侧类别列表中的布局模式，按序进行设置自动插入间隔符：指定DW是否将列设置为自动伸展时自动插入间隔图像站点的间隔图像：指定使用间隔图像的目标站点，点击该栏显示当前DW中所有的站点间隔图像文件：为站点设置间隔图像文件，创建或浏览一个间隔图像文件单元格外框：用于设置布局单元格外框的颜色表格外框:用于设置布局表格外框的颜色表格背景:用于设置布局表格的背景颜色2023年7月23日第94页布局表格和布局单元格布局表格：可以在页面的空白处和布局表格内部建立布局表格，可以同时使用多个独立的布局表格建立复杂的页面布局，也可在布局表格中建立嵌套的布局表格，在布局模式下无法向布局表格中添加内容布局单元格：可以在布局页面空白处和布局表格内部添加布局单元格，当给空白页面中添加布局单元格时，会自动为当前页面添加一个布局表格，在布局模式下可以向布局单元格中添加内容将布局单元格靠齐到网格查看/标尺查看/网格设置布局表格属性设置布局单元格属性Note:在布局模式下，无法使用插入表格和绘制层等工具，可以转换到标准模式在进行操作2023年7月23日第95页层Layer层具有自由排版的重要功能，有了它就可以进行不再受任何束缚的网页布局设计。除此之外，使用层可以制作出特殊的网页设计效果，介绍有关层的知识，包括创建层，设计层属性，编辑层，以及层和表格的转换等2023年7月23日第96页
层(Layer)，有电脑美术设计知识的用户一定清楚它的强大功能：不同的层可以并存、可以重叠，不同层上的内容在一定的设置下可以分别显现出来，从而达到非常玄妙的设计目的。层是一种HTML页面元素，通常由<DIV>标记说明。层可定位在页面上的任意位置，并且其中可包含文本、图像、表单等所有可直接用于文档的元素。在Dreamweaver中，用户可以将层前后放置，隐藏或显示，以及在屏幕上移动，还可以制作许多网页效果，而不必再使用任何JavaScript或HTML编码就可以实现。2023年7月23日第97页插入层1.“插入/布局对象/层”命令；2.插入面板布局下的“描绘层”，并拖曳至编辑窗口建立嵌套层1.在一个层内建立其他层：插入一个层，在其内再点击鼠标插入另一个层；2.利用层面板建立嵌套关系：随意创建两个层，在层面板中点击选取层2，按住Ctrl键并拖曳鼠标至层1。
创建层
注：只有嵌套关系的子层会随母层的某些属性的改变而改变（如移动母层，子层会同时移动）,但母层不会因子层改变而变化。嵌套关系之外的层，各层之间相互独立，互不影响，但层与层之间的先后顺序是可调的。2023年7月23日第98页层的操作认识层属性面板移动层和改变层的大小
改变层的顺序
通过属性面板控制层的可见性
使用层面板控制可见性
内容溢出层的控制设置层的可见区域
对齐层
层和表格的相互转换2023年7月23日第99页认识层属性面板层编号：给层命名，在使用行为或者JavaScript来控制层的时候，就必须用到这个名称。
左、上：设置层相对于页面或父层左上角的位置
宽、高：设置层的宽度和高度
Z轴：指定层的索引值。值小的层在下面，值大的层在上面
可见性：设置初始状态下该层是否可见，有默认、继承、可见、隐藏4个选项
溢出：用于设置层中放置的内容超出层的边界时，如何显示：Visible,Hidden,Scroll,Auto
剪辑：指定层内的可见区域。2023年7月23日第100页移动层和改变层
移动层方法：
1.点击目标层，在属性面板中的“左”“上”输入坐标值
2.选取目标层，按方向键，使层一个像素的移位，按Shift+方向键，可使选取的层做10个像素的移位
3.用鼠标拖曳移动到目标位置改变层的大小：
1.鼠标拖曳调整到合适的大小
2.在属性面板中宽、高输入像素值
3.选取层，ctrl的同时按方向键，可使层的大小1个像素的改变：ctrl＋shift的同时，10个像素的改变
改变层的顺序
1.在属性面板中Z轴输入值
2.点击相应层的Z列数值，输入新的数字
3.鼠标指向层名称，按住鼠标拖曳到目标位置，则Z值会自动调整2023年7月23日第101页控制层的可见性
通过属性面板控制层的可见性：Default:浏览器默认方式，大多数浏览器都以inherit方式控制Inherit:继承父层的可见性Visible:总是显示该层的内容，不管父层是否可见Hidden:总是隐藏该层的内容，不管父层是否可见使用层面板控制可见性：“闭眼”图标，“睁眼”图标和没有图标，对应属性面板中的hidden、visible、inherit选项2023年7月23日第102页内容溢出层的控制Visible:自动扩大层，以完整显示其中的内容Hidden:层的大小不变，超出部分不显示Scroll：无论层中内容是否越界，都会出现滚动条Auto：只有当层中的内容超出层的边界时才出现滚动条2023年7月23日第103页设置层的可见区域
在剪辑中定义层的4个点的坐标来划出层中要显示的矩形范围，而矩形外的层内容将被隐藏。对齐层修改/对齐/对齐边缘等2023年7月23日第104页层和表格的转换
层是可以随意移动的，用层来定位页面上的内容比用表格更容易操作，因此可以使用层创建布局，然后将层转换为表格，以方面制作过程表格也可以转换为层，将一个表格转换为层后，位于该表格外的页面元素也会被放入层中，如果表格中有空的单元格，除非他们具有背景颜色，否则不会转换为层2023年7月23日第105页涉及的属性：最精确:用最精确的方式进行转换,为每个层创建一个单元格并增添一些单元格来保持相邻的层之间的距离，精确的保证转换之后的位置。
最小:合并空白单元小于X像素宽度:转换忽略X个像素的误差,将小于X个像素宽的层转换为相邻的单元格;
使用透明GIFS:转换后的表格的最后一行用透明图象填充,以适应更多的浏览器。软件自己生成一个透明的GIF格式的图像充填在表格最后一行，用于保证在所有的浏览器中都有一致的外观，选中该项之后将不能拖动表格的列来编辑表格，如果不选择，可能导致在不同的浏览器中表格具有不同的列宽而具有不同外观。可以根据设计需要选用本功能。
置于页面中央:转换后的表格在页面居中
布局工具各选项:转换为表格后继续使用层时可设置的参数2023年7月23日第106页1.格式:<marquee>滚动内容</marquee>2.marquee标志配合使用的属性(1)
loop=n:设定滚动次数，-1为无限次(2)
direction:设定滚动方向direction=left向左滚动direction=right向右滚动direction=up向上滚动direction=down向下滚动(3)
width:设定滚动区宽度(4)
height:设定滚动区高度(5)
bgcolor:设定滚动区背景颜色一、插入/标签/html标签的功能二、Marquee效果Marquee效果(跑马灯)2023年7月23日第107页(6)
behavior:设定滚动方式behavior=scroll按指定方向滚动到尽头,重新开始.即内容向同一个方向滚动behavior=slide不指定滚动次数时,滚动一次后停止。即内容接触到字幕边框就停止滚动behavior=alternate按指定方向来回滚动.即内容在相反两个方向滚来滚去(7)scrolldelay=n
设置字幕内容滚动时停顿的时间.值越小滚动看起来越流畅(8)
scrollamount=n指定滚动的速度,数值越大速度越快(9)
onmouseover=stop()设置鼠标移动到滚动字幕时的动作，常设置为停止滚动onmouseout=start()事件设置鼠标离开滚动字幕时的动作，常设置为开始滚动
2023年7月23日第108页
表单在HTML页面中起着非常重要的作用，它是与访问者交互信息的主要手段。表单一般包括说明性文字、用于输入文本的文本域、用于选择项目的单选按钮和复选框、用于显示选项列表的列表框以及用于发送命令的提交和重填按钮等内容。通常，一个完整的表单包括表单对象和应用程序两个基本组件。其中，表单对象在网页中起描述作用，应用程序则是服务器端或客户端的脚本，通过它们实现对用户信息的处理。创建交互式表单2023年7月23日第109页1．表单<form>和</form>定义表单的开始与结束，常用的属性有：action:指定处理表单中提交数据的网页文件,若要将表单数据寄到电子邮件信箱，可以指定该电子邮件信箱的URL；method:指定表单中数据的传输方式
2．单行文本框(文本域)格式：<inputtype=textsize=显示字符个数name=字段名value=默认值maxlength=最大字符个数>type=password,
密码域type=text,文本框2023年7月23日第110页
3.多行文本框（文本区域）格式：<textareaname=字段名rows=滚动文本框行数，cols=滚动文本框一行中的字符数></textarea>4.单选按钮格式：<inputtype=radioname=字段名value=默认值checked>5．提交按钮与重置按钮格式：<inputtype=submitvalue=按钮文字><inputtype=resetvalue=按钮文字>2023年7月23日第111页6.复选框格式：<inputtype=checkboxname=字段名value=字段值checked>7.下拉列表/菜单下拉列表格式：<selectname=字段名size=显示的列表项数multiple><optionvalue=值selected>显示列表项值</option></select>说明：size:指定屏幕上下拉列表中同时显示的选项个数multiple:设定是否可以复选(同时按住组合键CTRL+SHIFT实现复选操作)selected:设定选项已选中菜单格式见操作实例2023年7月23日第112页8.文件域：上传文件9.图像域：10.隐藏域11.单选按钮组12.跳转菜单格式见操作实例13.字段集：
(1)<fieldset></fieldset>用于生成字段外框(2)<legend></legend>定义字段外框的标题名称14.标签2023年7月23日第113页css样式及其应用
为方便设立统一风格的网站，Dw提供了CSS样式，CSS样式实际就是含有多个文本属性和网页属性的集合CSS:CascadingStyleSheet的缩写，中文为级联样式表或者层叠样式表优点:一组样式可以调用在多个对象上;语法易学易懂;丰富的样式效果执行“窗口/Css样式”或者按“Shift＋F11”打开Css样式，在此样式表中有：附加样式表：点击可以应用已有的Css样式到当前文本新建Css样式：点击该按钮可以新建一个Css样式编辑样式：点击该按钮可以编辑当前的Css样式删除Css样式：点击该按钮可以删除当前Css样式2023年7月23日第114页新建Css样式选择器类型：类，标签和高级，在6.0版本中分别称呼为：创建自定义样式（class），重定义html标签和使用CSS选择器定义在（两项）：新建样式表文件和仅对该文档
首先看仅在该文档：
1.使用类自定义样式：选择后在名称中输入一个名称
2.使用标签定义标签样式：使用标签可以重新定义html的标签样式，在标签中选择任一标签
3.使用高级选项定义链接效果：高级选项用来编辑链接文本的效果，在选择器中选择4项中的一项：A:link:新打开网页时，链接所呈现的状态A:hover：当鼠标移上链接时呈现的状态A:visited：链接被访问过所显示的状态A:active：链接被激活时所显示的状态，即当在链接上点击鼠标而且点击鼠标后尚未点击其他链接之前所显示的状态2023年7月23日第115页设置中的选项：
类型type：文字设定.字体，大小，粗细，样式，变体，行高，大小写，修饰，颜色背景background：背景设置.背景颜色，背景图像，重复，附件，水平位置，垂直位置区块block：主要设置文字的
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
评论
0/150
提交评论