互联网行业-网页设计师制作Dreamweaver8网页设计的技巧

课程：《Dreamweaver8网页设计》http://pcedu.pconline.com.cn/sj/pm/coreldraw/index_1.htmlhttp://pcedu.pconline.com.cn/sj/pm/photoshop/wz/1103/2357784.htmlhttp://pcedu.pconline.com.cn/sj/pm/photoshop/http://www.xue5.com/itedu/200905/303327.html讲师：聂玲俐教学目标：通过对课程的学习，我们将全面了解网站开发的原理，掌握dw这个软件制作网页的方法和技巧，并能够根据需要独立开发网站。第一课:网页制作基础网站的概述1．网页与网站浏览网页时在浏览器中看到的一个个页面就是网页，而多个相关网页的集合就构成了一个网站。举例：www.sohu.com(搜狐网)www.baidu.com(百度网)www.youku.com(优酷网)等等。2.浏览网页的工具—浏览器。用于打开显示网页的软件。最常见的是Windows自带的IE浏览器。还有火狐Firefox，360安全浏览器、遨游、腾讯TT等等。网址：用于定位某个网站某个页面的一串字符，通常是这种格式http://sports.sohu.com/nba.shtml主页：访问网站时，默认打开的第一个页面就是主页也叫首页。3．认识网页的组成元素二、初识Dreamweaver81．制作网站的流程规划网站类型及主题---搜集资料素材---使用软件进行网页制作-----测试及发布2．认识是当前最流行、最方便的网页设计和网站开发工具软件。Dreamweaver:梦想编辑者，通过这个工具，实现编辑网页的梦。Dream：梦想Weaver:织布者，织工frontpage早期是Macrosoft公司推出的“网页三剑客”之一，“网页三剑客”指的是Dreamweaver、Flash、Fireworks这三个软件，它们这三个集合起来，就像江湖中最厉害的剑客一样，成为了网站开发中的专用利器，它集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别开发的可视化网页开发工具，2007年Macrosoft公司被Adobe公司收购，DWCS5是最新推出的版本。3.dw的用户界面从打开软件开始，试着做一个简单的网页我的第一个网页并加一张图片，保存，预鉴，并用代码写一个，三．基本工具介绍打开刚才那个网页，加常用—表格,表单---按钮，显示为制表符,再用代码讲解一下，三种状态,显示比例，属性，介绍文件面板.四、网页文件的基本操作基本网页的文件类型为HTML文档，保存的文件扩展名为“.html“。1、创建网页文档(HTML文档).文件→新建→新建文档→常规→类别→基本页2、保存指定文件（编辑中的文件如果文件名后面带有“*”号，表示未保存。）.文件→保存（或Ctrl+s）.文件→另存为.文件→保存全部注意：1、网页文件要用英文或数字进行命名，莫用中文。2．基本网页的扩展名.html.打开：程序退出再加三种方式：x，alt+f4，双击左上的标志钟速度统计在描述中输入分辨率尺寸，如（800*600，我的自定义）。单击确定即可。那么可以在“窗口大小”中看到刚才自定义的尺寸。“1K/1秒”，其中1K表示网页内容累计的大小。1秒是在56K的调制解调器下，网页下载会用多长时间。它是根据调制解调器的不同而不同的。表示在1k/S下用1s就可以把1k大小的网页下载下来，当然这还是要取决于实际的网速。先在别的地方建一个文件夹，再在那建一个网站，再在网站下面建一个网页。此时会自动默认放在那个站点上，就是根文件夹里。七、设置默认图像文件夹在根文件夹中建一个文件夹专门用于存放图片，image,看到站点下就有一个文件夹，设置默认图像文件夹，管理站点-编缉-高级。网站放在d盘的document上。再用那里的图片做一张网页。如果网站中没有默认的放图片的，复印文件夹创建文件就是创建网页，新建文件夹和网页的更改链接。添加水平线(首页和标题和背景)、日期和特殊符号输入空格的三种方式，图片名字改变页面背景设置也要改变。4、插入水平线，html,改线条颜色通过改代码.插入版权.改字体时的ys01和简单常用字体,但图片的字体可以显示.段落设置网页中使用的图片类型javascript:window.external.addFavorite('http://www.baidu.com','百度网')Javascript:window.close()onClick=this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.baidu.com/')ahref=#onclick=this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.baidu.com')设为首页/a首选参数常规检查链接设计作业：显示菜单和显示制表符之间的转换，做一个简单的网页标题和内容都是叫做我的第一个网面，内容字体用黑体红色斜字体，背景用粉红色，与顶部和左边框0距离，要求搜入一张图片并插入一张四行三列的表格和插入一个按钮。拼图动态菜单表单中label和lendge的意思表单标记form,input,select,optiontextarea,label,fieldset,legend网页中表单的作用表单是实现动态网页的一种主要的外在形式.它的主要功能是提供给用户输入信息的窗口并收集浏览者填写的信息.它是网站实现互动功能的重要组成部分.例如在网上要申请一个电子信箱,就必须按要求填写完成网站提供的表单页面,其主要内容是姓名,年龄,联系方式等个人信息.又例如要在某论坛上发言,发言之前要申请资格,也是要填写完成一个表单网页.无论网站使用的是那种形式的语言来实现网站的互动功能,例如ASP,PHP,JSP,表单已经成为它们统一的外在形式用换行符布局的表单请输入您的姓名:请问你的性别:男女你喜欢做些什么:看书上网睡觉我要留言:为什么要用表格布局表单表单和表单元素并不具有排版的能力,表单和表单元素的排版最终还是要由表格组织起来,因此在html代码中,表单标记和表格标记通常是如影随形的.用表格布局的表单代码用户名:密码:表单代码的组成一个表单的代码至少包括三个组成部分:(1)表单域:这里包含了处理表单数据所用动态网页的URL以及数据提交到服务器的方法.(2)表单元素:包含了文本框,菜单,复选框和单选框等.(3)提交按钮:将数据传送到服务器上的动态网页.表单的功能表单可以用于调查,订购,搜索等功能.一般的表单由两部分组成,一是描述表单元素的html源代码,二是服务器端用来处理用户所填信息的程序(暂时不学),或者客户端的脚本.在html里,我们可以定义表单,并且使表单与CGI或ASP等服务器端的表单处理程序配合.表单信息处理的过程为:当单击表单中的提交按纽时,输入在表单中的信息就会上传到服务器中,然后由服务器中的有关应用程序进行处理,处理后或者将用户提交的信息储存在服务器端的数据库中,或者将有关的信息返回到客户端浏览器中.表单域标记标记用来创建一个表单域,即定义表单的开始和结束位置,这一标记有几方面的作用.第一,限定表单的范围.所有表单对象,都要插入到表单域之中.单击提交按纽时,提交的也是表单范围之内的内容.第二方面,携带表单的相关信息,例如处理表单的脚本程序的位置(action),提交表单的方法(method)等.这些信息对于浏览者是不可见的,但对于处理表单确起着决定性的作用多个标记不能嵌套form标记常见属性methodmethod:get或postget方式提交的表单信息是非安全方式,附加在URL地址后面(百度)url表单元素1的name=表单元素1的value&表单元素2的name=表单元素2的value……设置高级form标记常见属性actionaction:接一个动态网页名设置action属性后会产生两个作用:1点击该表单的提交按钮将会链接到该网页2同时还会将表单中输入的数据发送给该网页进行处理表单数据提交后表单将数据提交给动态页后,动态页通过request对象取下数据,就能进行处理了,如把这些数据存入数据库,或按这些数据进行查询等.form标记常见属性enctype:一般不需要设置,如果表单中有文件上传对象,则设置该属性值为multipart/form-dataname和id:在表单的接收页面只接收有name的元素,赋ID的元素通过表单是接收不到值的target:接收页是否在新窗口打开,和a标记的该属性一样表单中的元素DW中表单对象与标记的对应关系表单域form标记中包含的表单标记主要有input,select(option),textarea等在DW中表单对象面板中的对象与这些标记的对应关系是:input-表单元素的通用标记input标记是收集用户输入信息的标记,是一个单标记,其含义由type属性决定.input标记的type属性总共有10种取值(书p23页),含义如表1所示:图像域(图像按钮)image隐藏域hidden重置按钮reset提交按钮submit普通按钮button单选框radio复选框checkbox文件域file密码域password文本域text描述type属性值文本域文本域举例:查询:input标记中的size属性是定义文本域的宽度文本域的默认值value文本域的宽度size文本域的最大输入字符数maxlength文本域的名称或idname或id描述文本域属值单选框单选框举例:女性男性checked属性设定初始时单选按钮哪项处于选定状态,同一组单选按钮name属性的值必须相同,这样这一组单选框中只有一个能被选中.复选框复选框,可以选中多项看书上网听音乐文件域供上传文件用,需要服务器端的上传组件配合文件域对表单标记form有特殊要求,method必须设为post,MIME类型必须为multipart/form-data按钮提交按钮(type=submit)将表单中所有具有name属性的元素内容发送到服务器端指定的应用程序重置按钮(type=reset)用户在填写表单时,若希望重新填写,单击该按钮将使全部表单元素的值还原为初始值普通按钮(type=button)该按钮没有内在行为,但可用javascript为其指定动作图像域即图像按钮,用一张图片做按钮,功能和提交按钮相同和标记标记是下拉菜单框或列表框标记,是一个标记的含义由其size属性决定的元素,如果该标记没有设置size属性,那么表示为下拉菜单框,如果设置了size属性,则变成了列表框,设置了multiple属性,则表示列表框允许多选.下列列表框中的每一项由标记定义,还可使用添加一个不可选中的选项.例如:你的籍贯:湖南广东江苏四川去掉size属性后跳转菜单DW中的跳转菜单实际上是一个带有javascript脚本的下拉菜单,点击跳转菜单的某一项将会转到某个网页新浪网搜狐网淘宝网多行文本域标记是多行文本域标记,用于让浏览者输入多行文本,如发表评论或留言,跟帖.这是一个有4行,每行可容纳40个字符,换行方式为虚拟的多行文本域.表单的辅助标记,标记fieldset是字段集标记,它必须包含一个legend标记,表示是字段集的标题.如果表单中的控件较多,可以将逻辑上是一组的控件放在一个字段集内,显得有条理些.个人资料…………标记的用途为控件定义一个标签,通过for属性绑定控件.在dw中插入表单控件时选择使用for属性附加标签标记如:男女这样当单击标签时就相当于单击表单控件表单控件还可添加快捷键,tab顺序键等将行为和表单一起使用在DW中,通过标签面板-行为-检查表单,可以对表单的输入进行检查,如文本域不能为空,必须是数字,或电子邮件地址等,这实际上是添加了检查表单提交事件的javascript代码实现的通过自己输入脚本实现跳转