网页制作与设计课程

1、目录一、网页制作与设计课程21、网页文件格式22、网页中插入图像33、网页制作与设计34、设置段落4二、DreamWeaver创建本地站点4三、表单技术41、表单52、脚本53、表单的排版54、表单的web浏览65、捕获表单所提交的数据66、web浏览表单并进行数据提交67、锚点的设置7四、图层:时间轴71、时间轴:72、层和时间轴7（1）在Dreamweaver中创建层8（2）选择,移动,调整层的大小和删除层8（3）设置层的属性面板8(4)使用层管理器管理层8五.设置与层相关的行为91.显示层,隐藏层,拖动层行为9(1)拖动层9(2)显示-隐藏层92.行为涉及对象,事件,动作.9(1)弹出消

2、息行为9(2)调用javascript脚本10(3)调用javascript10(4)调用javascript10(5)转到URL行为10(6)跳转菜单行为11(7)跳转菜单开始行为11(8)打开浏览器窗口行为11(9)显示弹出式菜单行为11六、模板12七、布局表格121、布局单元格122、保证布局表格中各列的宽度12八、如何使用模板生成页面12九、如何更新模板13十、模板13十一、库13十二、自定义CSS样式14十三、如何进行本地站点的上传操作14十四、局域网内创建FTP服务器,实现网站的上传.15一、网页制作与设计课程1、网页文件格式网页文件的扩展名 htm网页制作的基本评言 HTML语言

3、Hyper Text Markup Language 超文本标识语言总共只有不到 100条命令,非常简单.完全使用它并不能制作动态网页.随着网页设计要求的提高及动态效果的引入,需要另外的软件加以配合,诞生了CSS样式表.CSS样式表:它为网页设计提供了更多更规范的属性,使得网页设计变得更加轻松.HTML命令-每一条命令称为一个标签.标签由一对小括号括起来: (html、html) 都可以，但是推荐使用小写英文字母任何一个网页 必须以 开始，以 结束，和是一对标签，双标签网页也有两部分组成：头部和主体目前，由于大家水平的限制，头部只能定义网页标题文字所有需要在浏览器中显示的内容全部定义在网页的主

4、体内定义头部的标签： . 定义网页标题的标签： . 定义网页主体的标签：.提示：标签之间可能嵌套，得不能交叉：网页最基本的结构如下： 网页标题文字 这里填写网页具体的内容为网页标签添加属性：语法格式：可以添加个属性，属性与标签之间使用空格隔开，属性之间也使用空格隔开，属性之间没有先后顺序提示：不同的标签有不同的属性插入网页背景图像：只能插入 jpg ，gif，png格式的图像图像最好使用英文名称，中文会出现编码错误图像必须存在，而且必须与网页保存在同一个文件夹内 这是设置网页的背景颜色这是设置网页的背景图像在网页中插入超级链接：超级链接是网页制作的核心，它将若干个相关的资源文档进行链接在mm.

5、htm网页中添加超级链接，指向 qqq.htm 网页：打开qqq.htm网页，语法格式：链接说明文字由于刚刚的qqq.htm页面与当前页面保存在一起，为当前站点资源，因此只需要给出文件名，而不需要给出路径如果你准备链接搜狐网，怎么办？这是错误的：打开搜狐网这是正确的：打开搜狐网2、网页中插入图像如何在网页中插入图像：图像最好使用英文名称图像必须与网页保存在一起图像只能为 jpg gif png格式以下是错误的：在网页中插入段落：段与段之间会自动空一行！段落文字如何对文字进行居中显示这是我的第一个网页如何更改文字的大小，颜色和字体字符3、网页制作与设计在网页中设置字符的颜色,大小和字体字符大小

6、1 -7 号,7号最大颜色:一般使用颜色字符表示,但颜色字符英文太多,非常难记,而且表述也不好! blue red yellow purple pink black white字体:宋体 仿宋 楷体_gb2312,幼圆,隶书等.如何具体描述字符的大小?无法使用HTML来完成,只能使用CSS样式表来完成.在使用CSS表示网页字符大小时,有 px 度量单位(像素)讲的3号字,其实就是 16px(16个像素)如何在网页中引入CSS样式表呢?font-size 字符大小font-family 字符字体color 颜色任何一个HTML标签都有两种属性:HTML属性,CSS样式属性,推荐使用CSS样式属性

7、,因为它更多,更规范4、设置段落如何设置段落:段落与段落之间会自动空一行.段落文字居中显示标签:字符段落的首行缩进:使用CSS样式表完成首行缩进要求改变网页状态栏文字(使用javascript脚本)如何在网页中嵌入javascript脚本:document.title=javascript脚本练习window.status=网页制作与设计教学二、DreamWeaver创建本地站点首先需要在你本地的计算机的磁盘上创建一个本地站点(1.在你计算机的磁盘上创建一个文件夹;2.将该文件夹设置为Dreamweaver的本地站点文件夹)也就是当前站点涉及的全部资源文件必须全部存放在你创建的文件夹内!自动刷

8、新本地文件列表:使Dreamweaver本地文件列表窗口的内容与本地站点对应的磁盘文件夹内容保持同步!如果不勾选自动刷新本地文件列表选项,则用户需要按f5刷新本地文件列表窗口默认图像文件夹参数:首先在本地站点文件夹内新建一个专门用于保存站点图像的文件夹(如:images),然后设置该参数,其值为本地站点内专门保存图像的文件夹.作用:当用户在编辑网页时,使用的任何一张不在当前站点内的图像时,Dreamweaver会自动将其复制到站点内指定的图像文件夹内.启用缓存:在Dreamweaver站点启动时,它会自动将本地站点内全部的文件之间的链接关系保存在缓存中,只要用户在Dreamweaver本地文件

9、列表窗口中移动文件或改变文件的名称,Dreamweaver会自动更新与当前文件相关的全部链接.不致于发生链接中断,网页或其他资源无法访问的情况.提示:网站创建后,千万不要在本地文件列表窗口之外去更改站点内文件的名称或移动站点内指定的文件或文件夹,否则会发生链接中断!站点名称站点文件夹默认图像文件夹http地址是否自动刷新本地文件列表窗口是否启动缓存三、表单技术1、表单表单(form) 就是数据输入输出的窗口.通过表单技术,客户端用户可以将数据提交给远程的WEB服务器.表单是客户端与服务端进行数据交互的重要手段.一个网页原则上可以设置多个表单,但实际上只有一个.参数讲解: 表单内容定义表单内部的

10、对象非常多,比如:单行文本框,密码框,多行文本框,复选框,单选框(单选按钮),下拉列表框,提交按钮,重置按钮,普通按钮(可添加脚本)上述对象必须添加在.标签之间,否则无效.2、脚本脚本:添加到网页中,用以实现特殊网页效果的命令,称为脚本.脚本环境有两种:VBScript和JavaScript.默认情况下,使用的是JavaScript.VBScript是VB的简版,用于网页中.它不区分命令字符的大小写.JavaScript是严格区分字符大小写.在两种脚本环境中均定义了系统的相关对象:window代表整个浏览器窗口;document代表当前正在浏览的网页. window.close() windo

11、w对象下的close()方法,用于关闭当前正在浏览的网页在网页对象上添加相关的动作,当动作发生时将会执行指定的命令:onclick - 鼠标的单击动作onclick=javascript:window.close()下面是一个完整的提交关闭网页窗口的按钮源代码:onclick=javascript:document.fgColor=red 前景onclick=javascript:document.bgColor=red 背景3、表单的排版用表格对象对表单进行排版先插入一个表单,然后在表单内插入一个用于排版的表格,最后按要求将表单对象添加到表格单元格内要进行表单数据的提交，必须要进行web浏览

12、假设asp文件的名称就是学号的名称 .asp因此，需要在标签中添加 action 属性，其值表示当点击提交按按钮后，当前表单中填写的数据递交给.asp动态网页进行处理。编辑 .asp 动态网页变量名称=request(表单的名称)获取表单中指定对象的值，并存放指定的变量中接下来，需要显示获取的表单数据，使用response.write命令xm=request(xm) 将表单中xm对象的值存放在变量xm中response.write xm 将变量xm的值显示在浏览器窗口中4、表单的web浏览为了正确提交表单的数据,必须采用web方式浏览表单.需要使用IIS来发布你的本地站点.开始-程序-管理工具

13、-internet服务管理器,在窗口的右侧区域展开默认WEB站点选项.右击默认WEB站点-属性,在弹出的属性对话框窗口中,选择WEB站点选项卡,在当前选项卡中填写当前WEB站点的名称,浏览当前WEB站点所使用的IP地址,填写当前WEB服务的端口号(维持80不变)选择主目录选项卡:在当前选项卡中设置当前WEB站点对应的本地站点文件夹,及当前WEB站点的访问权限(只需要选择脚本资源访问和只读).选择文档选项卡:在当前选项卡中设置当前WEB站点的默认主页,一般是:default.htm index.htmldefault.asp default.aspxindex.phpindex.jsp该进行WE

14、B浏览表单网页了:在Internet信息管理服务器窗口的右侧子区域,右击指定的表单网页,选择浏览即可.5、捕获表单所提交的数据设置简单的ASP网页,用于捕获表单所提交的数据在asp中有两个重要的系统内置对象request对象:用于捕获表单提交的数据response对象:用于将变量的数据显示在浏览器窗口中所有ASP脚本命令必须全部放在标签内部.获取表单中指定对象的值的命令:变量名称=request.form(表单对象名称)xm=request.form(xm)在浏览器窗口中显示指定变量的值:response.write 字符串 & 变量名称response.write 姓名= & xm & 在点

15、击表单的提交按钮时,自动调用相关的asp网页进行表单数据的处理在dreamweaver的设计视图窗口,选择表单对象,然后在属笥面板的动作文本框内填写相关的asp网页名称即可.6、web浏览表单并进行数据提交在网页中设置超级链接在网页中制作超级链接,链接的资源可以是任何资源类型:如果是文本文件,会直接打开如果是word文档,用户可以选择打开或保存如果是网页,会直接打开并显示如果是图片,会直接显示图片如果是音乐,会播放音乐或视频如果是flash动画,会直接播放动画如果是压缩文档,则会选择下载如果是可执行文件,也会选择下载如果在新开窗口打开链接的内容:选择链接文字,在属性面板的目标下拉列表框中,选择

16、_blank选项.7、锚点的设置其实就是一篇文章中的标签.在同一个网页内部可以创建N个锚点,然后再在网页的开头设置超级链接,指向这些锚点,这样实现的是:同一篇网页内容的快速定位.锚点链接:一般只指向同一篇文章的内部的锚点处,用于快速定位,但也可以指向另一个网页中听锚点,语法:链接文字制作过程:先在网页中定义N个锚点:常用-锚点标记在网页的开头新建多个链接,每个链接指向刚刚新建的锚点,在链接名称前面一定要添加#四、图层:时间轴1、时间轴:最简单的动画gif动画,目前几乎都是FLASH动画.时间轴中的每一个小方格为一帧.就是动画某一时刻播放的内容.在控制动画播放时,主要有两种帧:关键帧,一种是普通

17、帧.我们只需要控制关键帧中的内容,普通帧的内容由系统根据需求自动决定.用户只需要控制关键帧中的内容即可.如何对文字或图像制作动画,必须先将文字或图像存放在层内,再对层做运动.补间动画:动画中除了关键帧,还有普通帧,普通帧的动容由系统自动决定.逐帧动画:动画中的每一帧都是关键帧,可能非常细致地刻画人物的表情.两个关键帧决定直线运动,两个以上的关键帧可以做曲线运动.如何添加关键帧:按住ctrl键,在时间轴面板中当前动画的指定帧处点击,即可添加一个关键帧.记录层的运动路径:选择层左上角的层标志,右击,在弹出的快捷菜单中点击记录路径,然后开始拖动层,最后松下鼠标,在时间轴面板中就记录了你拖动层运动的所

18、有路径.制作电子显示屏效果:跑火灯效果:1.制作子父层:完成子父层的制作后,应调整子层的位置,位于父层的一侧.2.将子层拖入时间轴,为其制作动画效果,从父层的一侧运动到另一侧.(往返运动)3.一定要设置父层的溢出属性为hidden.2、层和时间轴在默认情况下,网页中的全部对象都布局在舞台(网页的背景层)中.对象与对象之间遵守严格的排版和布局约束.对象与对象不可以在空间布局上发生重叠.它给网页内容的编辑带来一定的困难. 克服这一难题的解决办法就是在网页中使用层技术.层技术是使用CSS样式表来定义的.通过引入层技术,可以实现特殊的动态网页效果.（1）在Dreamweaver中创建层可能通过菜单和工

19、具按钮完成,但两者的效果不同.一般通过工具栏按钮来完成(布局-描述层-然后通过鼠标的拖动在设计视图窗口中描绘一个指定大小的图层)在点击上述描述层按钮之前,按住ctrl键不放,可以连续绘制多个图层.第二种创建层的方法(菜单):插入-布局对象-层,通过这种方式插入的是一个固定大小的默认层.是否可以更改默认层的大小和其他参数呢?（2）选择,移动,调整层的大小和删除层选择层:在层内点击,然后点击层的左上方的标志来选择层;还可以在层的边线上点击直接选择层(会在层的边线上显示8个控点)如何移动层:通过直接拖动层的边线或层左上方的标志来移动层.如何调整层的大小:必须要先选择层,使层的边线上出现8个控点,然后

20、通过拖动控点来改变层的大小.如何删除层:选择指定的层后,直接按键盘上的delete删除键.（3）设置层的属性面板宽和高位置:左边距和上边距定义层的空间位置:xy为一个平面,xyz就是一个三维z轴值:为当前层位于舞台层的哪个方向上,是三维参数的定义.默认的舞台层的z值是0,可不可以将一个层的z值设置为负数.如果将一个层设置为网页的背景层,则需要将该层的z值设置为负数.该层中所有Flash动画的内容要保持透明.z值越大,越靠近用户的眼睛.背景图像背景颜色为层重新命名(4)使用层管理器管理层窗口-层,打开层管理器浮动面板.在层管理器面板中可以进行层的重新命名,可以改变层的z值.还可以显示和隐藏层.在

21、层的管理面板中,自下而上,层的z值是不断增加的,最上面一个层处于网页的最前面.在层的管理面板中创建子父层:(非常重要的内容)嵌套层:一个层里面还有一个层,进行层的嵌套.按住ctrl键,在层管理面板中选择需要作为子层的层,将它拖入父层中即可(如果失败,再来一次)没有实现嵌套时,层的定位是采用绝对值,即相对于浏览器左边线和上边线的距离,一旦作为子层,层的定位则采用相对值,即相对父层的左边线和上边线.如何控制一个子层(当子层的大小范围超过父层的边线范围时,是否显示超出的部分呢)这使用父层的溢出属性进行控制.默认情况下,父层的溢出属性为空白,表明子层超出父层的部分显示.如果将溢出属性变为hidden,

22、则表明子层超出父层的部分不显示.五.设置与层相关的行为1.显示层,隐藏层,拖动层行为(1)拖动层不要在页面中选择任何对象,点击窗口-行为,打开行为面板,在行为面板的标题栏中应该看见的是body标签,此时,点击+添加拖动层的行为,在弹出的对话框中选择要拖动的具体的层的名称,确定.在行为面板中触发当前行为的动作应该选择:onload,onmousedown(2)显示-隐藏层通过按钮来实现层的显示和隐藏先在页面上创建二个层,并在层内插入相关内容在页面插入两个普通按钮,不要添加表单点击隐藏层按钮,点击窗口-行为,显示行为浮动面板,点击行为面板中的+,添加隐藏-显示层行为,在弹出的对话框中,选择要隐藏的

23、层,最后确定.在行为面板中一定要保证当前行为必须作用在指定的按钮上,而且触发当前行为的动作一定要是onclick(单击事件)跑火灯2.行为涉及对象,事件,动作.如何不用Dreamweaver,用户可以完全通过脚本的编制实现行为的效果.通过行为来实现非常方便,不需要用户编制大量的脚本代码,只需要通过鼠标的简单的操作,即可完成复杂脚本才能完成的功能.但在设置行为时,必须要注意:行为设置在哪个对象上交换图像行为:当鼠标滑向图像时,出现另一个图像恢复图像行为:当鼠标滑出图像时,恢复原有的图像在网页的设计视图中插入图像选择图像,打开行为面板,添加交换图像行为事件名称 onmouseover勾选预告载入图

24、像勾选当鼠标滑出时恢复图像:其实就是添加恢复图像行为恢复图像:事件名称 onmouseout(1)弹出消息行为网页打开时,显示欢迎光临对话框窗口.行为作用在 body 标签上事件名称:onLoad(网页打开时自动执行的行为事件名称必须是onLoad)行为:弹出消息行为网页离开时,显示欢迎下次再来对话框窗口行为作用在 body 标签上事件名称:onUnload行为:弹出消息行为是在网页离开时,而不是在关闭时.如何通过弹出消息行为,而禁止使用网页右键菜单更改:(2)调用javascript脚本关闭网页按钮行为:调用javascript事件:onclick对象:作用在按钮上命令:window.ope

25、ner=null;window.close()更改网页背景按钮(3)调用javascript事件:onclick对象:作用在按钮上命令:document.body.style.backgroundColor=blue更改网页前景按钮document.body.style.color=white更改段落内容:必须事先为段落命名:段落文字行为作用在按钮上事件名称:onClick命令:pp.innerText=赵怀明更改图像对象必须事先为图像命名将行为作用在按钮上事件名称:onclick命令:图像对象的名称.src=图像文件的名称img1.src=grass.jpg希望网页在打开时,全屏显示:事件名

26、称:onload作用对象:body(4)调用javascript命令:window.moveTo(0,0) 移动窗口的命令window.resizeTo(screen.width,screen.height)将当前页面扩展成与屏幕一样宽一样高两个命令之间必须使用;分开(5)转到URL行为制作类似于超级链接的效果.1.首先需要在页面中添加按钮或文字(先设置标签,然后再在该标签内部添加文字)2.选择标签,在当前标签上添加转到URL行为3.行为的事件名称一般是onclick4.在框架中使用该行为,可以实现一次点击,在多个子窗口内打开多个页面.(6)跳转菜单行为类似于表单中的下拉列表框,但是用户在选择

27、某一个选项时,系统会自动打开相关的页面,这就是跳转菜单.注意:下拉列表框中的每个选项的value值都是一个页面的URL地址.当前行为的事件名称必须是onChange.制作过程:首先在网页中制作一个下拉列表框下拉列表框中每一个选项的值,都是一个网站或网页(资源)的URL地址.为当前下拉列表框重新命名,并选择它在行为面板中选择跳转菜单,点击确定按钮在行为面板中保证跳转菜单的事件名称为onChange缺陷:只有在用户选择了非当前选项后,网页才会跳转,因为只有选择了非当前选项,下拉列表框的值才会变化,才会触发onchange事件.如何克服上述缺陷,使用另一个行为跳转菜单开始行为.在跳转菜单下拉列表框后

28、面紧接着需要创建一个按钮,并在该按钮上添加跳转菜单开始按钮,即使用户不改变跳转菜单的选择,直接点击跳转开始按钮,也可以打开当前选项所表示的页面.(7)跳转菜单开始行为(8)打开浏览器窗口行为其实用的就是window.open命令.window.close() 关闭页面window.open 打开页面window.status 改变状态栏文字1.在页面上创建一个按钮,在按钮上作用打开浏览器行为,通过点击按钮,打开指定的页面.2.如何让弹出的页面窗口在N秒后自动关闭肯定需要在被弹出的窗口中显示的页面中添加window.close()命令,但该命令不是立即执行,而是被延时N秒后才执行.如何在页面中创

29、建延时器:window.setTimeout(将要执行的命令,延时的毫秒数)(9)显示弹出式菜单行为弹出式菜单有两个部分组成:水平菜单条,弹出式菜单.首先设计水平菜单条:确定有多少个条目(使用表格)必须对水平菜单条中各个选项制作假链接(关键)具体设计每一个弹出式菜单六、模板同一个网站内所有的页面(特别是某一个栏目内的全部网页)其风格应该保持一致(页面布局,色彩搭配,给人留下的整体映象).做网站其实就是做:主页+模板.除主页之外的全部页面,都应该使用模板来生成.模板就是用于制作网页的网页.在模板中只包括所有页面的共性内容,不允许出现具体页面的个性化内容.一般情况下,模板只包括有:页面的整体布局,

30、色彩搭配和所有页面的共性内容.一个网站内的全部模板存放在指定的文件夹内:templates文件夹.模板文件的扩展名是:dwt没有模板之前,我们用户必须先进行页面的整体布局,色彩搭配,然后再进行内容的编辑.使用布局表格进行网页的整体布局:在标准模式下只能使用普通标准表格,如何希望使用布局表格进行页面的布局,则需要进入布局模式:工具栏中布局选项卡中的布局按钮,进入布局模式:七、布局表格1、布局单元格操作:用户可以先手式绘 制布局表格,然后再在布局表格中绘制所有的布局单元格;但推荐的方法:是直接在页面中绘制布局单元格,让系统自动生成布局表格.一定要将布局表格中的全部单元格变成布局单元格:按往ctrl

31、键,可以连续绘制布局单元格.2、保证布局表格中各列的宽度如何保证布局表格中各列的宽度在页面布局过程中不会发生变化,从而影响页面的整体效果.使用间隔图像来完成.在制作完布局表格后,点击布局表格下方各列的列宽标签文字,在弹出的下拉列表框中选择添加间隔图像(间隔图像由系统自动生成,透明,宽度与当前列一样宽,高度仅为1个像素,它不会影响页面的浏览效果)添加完间隔图像后,Dreamweaver会自动在当前表格的最后添加一行,该行中的每一列放置的就是各列的间隔图像. 八、如何使用模板生成页面文件-新建-模板-选择站点-选择指定站点下具体的模板-进行页面编辑-保存.在制作模板时,一定要留有可编辑区域:在用户

32、使用模板生成具体的页面时,只能编辑可编辑区域的内容,其他区域不能进行编辑.可以在模板中设置多个可编辑区域(根据需要)选择站点内templates目录下指定的模板文件,直接双击打开,在需要设置为可编辑区域的地方右击,选择模板-创建可编辑区域-输入可编辑区域的名称-保存.可以边制作模板,边进行网页内容编辑,等模板做好以后,直接将模板应用到当前网页中.修改-模板-应用模板到页-选择具体的模板-选择当前网页中的可编辑区域(任何一个网页均有两个可编辑区域:body和head)-依次将它们移动到模板的可编辑区域中.九、如何更新模板无论当前模板已经应用了多少个页面,在执行模板更新时,系统会自动更新当前模板所

33、应用的全部页面.当然用户也可以选择手式更新.打开模板的另一种方式:先打开应用了模板的网页-修改-模板-打开附加模板-直接进行修改-文件-保存-自动弹出更新对话框,更新所有应用了当前模板的网页.手工更新页面使用的模板:打开页面-修改-模板-更新当前页如何将页面与模板分离:打开指定的页面-修改-模板-从模板中分离.十、模板首页+模板模板使得网页制作分为两部分进行:一部分是页面的布局,另一部分是页面内容的编辑.在模板制作过程中,一定要有可编辑区域,在使用模板生成具体的页面后,用户只能对可编辑区域进行编辑.与模板相关的操作主要有:1.制作模板2.使用模板生成网页3.将模板应用到网页4.更改模板5.更新

34、模板6.将模板与页面分离刚刚完成:先制作模板,等模板制作完成后,再使用模板生成具体的页面.边制作模板,边进行网面的内容设计,等模板完成之后,再将模板应用到具体的页面中.十一、库库是一段可以重复使用的脚本代码.是网站的资源.一旦将某一段代码定义为库对象,则网站中所有网页均可以对其进行引用.当更改库对象后,网站中所有页面的引用会自动更新.主要目的:在同一网站的不同页面引用同一个(组)对象.如何用户需要更改该对象的外观,则只需要更改库对象,该对象的所有引用会自动得到更新.首先创建指定的对象打开窗口-资源-点击库按钮-显示库窗口在设计视图中将您设计好的对象拖入库的上方窗口然后为其命名打开其他网页,将库窗口的库对象拖入当前页面,则形成了库对象在当前页面的一个引用.在库对象面板中,双击指定的库对象,则可以进行编辑,编辑完成后进行保存,系统会自动更新它的所有引用.提示:一个网站中全