Dreamweaver网页制作.ppt

网页入门及小技术,楼斌BBSID：lou2004.03.26,网页设计的工具1、FrontPage最易学，与word基本相似2、所见即所得的网页制作利器Dreamweaver网页按钮制作工具Uleadphotoimpact8.0(横幅、项目符号、按钮、按钮栏、图标、导航条、分隔符）图片工作Photoshop、flash、firework,DREAMWEVAER初步认识,选创建,代码区,所见即所得,Body区，网页主体,Head区，主要设置字体编码，网页标题等,编辑窗口,主菜单：编辑窗口的绝大部分功能；工具栏对象面板属性面板面板组（又称可停靠浮动面板）快速启动栏（又称启动面板）编辑区域：以所见即所得的方式显示被编辑网页内容,对象面板（Objects）,在网页编辑的过程中，通过单击对象面板的按钮来为网页添加相应的元素，如图片、表格、层、Flash。我们称这些元素为为对象。单击对象面板上的向下箭头，能插入其他类型的对象，如特殊字符（Characters）、表单（Froms）等。,快速启动栏,是切换到站点管理器，,是切换到行为面板，,是查看网页源代码。,查看历史记录,Properties属性面板：Crtl+F3CSSStyles样式面板：Shift+F11Behaviors行为面板：Shift+F3Objects对象面板：Crtl+F2,从最简单的网页开始,文字属性面板,选择链接对象,粗体、斜体、文字方式,设置文字颜色,DREAMWEVAER的小技巧,1、有些主页，若把鼠标指向某个链接，在状态栏会出现该链接的说明，是不是会感觉很方便？其实这不难做到，只要在链接语句中加入以下的内容，就可以实现了！试试看！HTMLHEADTITLE链接说明/TITLE/HEADBODY厦门大学/BODY/HTML,要在图形上显示文字，您可能立刻就会想到使用Java来实现这一功能。但这里，我要介绍给您的是直接用HTML的方法。用层技术？，非也！，方法非常简单：使用表格，在表中键入文字，然后用您希望的图形作为这个表格的背景文件。图形的大小需与表格相同。这样您就已经轻易地在图形上显示文字了。,2、在图形上显示文字,3、如何调整表格高度,有时当我们拖动表格的边框，无论怎样拖动，等到放下鼠标，表格却又恢复到原来的样子。试着拖动表格的边框看看。出现这种情况的原因在于我们已经为表格提供了一个固定的高度，其直观表象就是无论你怎样拖动表格的边框，表格的高度都不变化。我们首先需要选定表格。比较简单的方法是，将光标移动到表格内，然后按“ctrl+a”，看看，不是就选中了与包含光标所在位置的最小的表格了吗。选定了表格以后，在properties框（属性框）中点击一下“clearrowheights”图标（下图中带红框的按钮），表格的高度设定值就被取消了。这时表格的高度会按照表格的内容自动的匹配高度。不只有上面的一种方法，我们也可以选中表格，在表格的属性框中直接删除掉表格的height值就可以了。同样的，该方法也适用于改变表格的宽度的情况，只不过，选定了表格以后，删除的不是行的高度，而是列的宽度。,若表格只需很小的一行高，如1象素，则可以从程序中改为,4、轻松打造弹出窗口,1.首先，从菜单栏中Window-Behaviors(窗口-行为)或直接按快捷键Shift+F3调出行为面板。,2.如图所示，按行为面板左上角的“+”号添加行为，在弹出的菜单中选择“OpenBrowserWindow（打开浏览器窗口）”行为，或选择“弹出信息”。,通知28日春游.,【4.1最基本的弹出窗口代码】,以代码方式实现：将代码放在HTML的任意位置，和之间可以，间也可以，越前越早执行，尤其是页面代码长，又想使页面早点弹出就尽量往前放。window.open(page.html)用于控制弹出新的窗口page.html如果page.html不与主窗口在同一路径下，前面应写明路径，绝对路径(http:/和相对路径(./)均可。,下面再说一说弹出窗口的设置。我们来定制这个弹出的窗口的外观，尺寸大小，弹出的位置以适应该页面的具体情况。参数解释：top=0窗口距离屏幕上方的象素值；left=0窗口距离屏幕左侧的象素值；toolbar=no是否显示工具栏，yes为显示；menubar，scrollbars表示菜单栏和滚动栏。resizable=no是否允许改变窗口大小，yes为允许；location=no是否显示地址栏，yes为允许；status=no是否显示状态栏内的信息（通常是文件已经打开），yes为允许；,【4.2经过设置后的弹出窗口】,js脚本开始；,弹出新窗口的命令,弹出窗口的文件名,窗口高、宽度,弹出窗口的名字（不是文件名），非必须，可用空代替；,.这里定义了一个函数openwin(),函数内容就是打开一个窗口。怎么调用呢？方法一：浏览器读页面时弹出窗口；方法二：浏览器离开页面时弹出窗口；方法三：用一个连接调用：打开一个窗口注意：使用的“#”是虚连接。方法四：用一个按钮调用：,【4.3下面是一个完整的代码，用函数控制弹出窗口】,如果我们再将一小段代码加入弹出的页面(注意是加入到page.html的HTML中，可不是主页面中，否则.)，让它10秒后自动关闭是不是更酷了？首先，将如下代码加入page.html文件的区：functioncloseit()setTimeout(“self.close()”,10000)/毫秒然后，再用这一句话代替page.html中原有的这一句就可以了。（这一句话千万不要忘记写啊！这一句的作用是调用关闭窗口的代码，10秒钟后就自行关闭该窗口。）,【4.4弹出的窗口之定时关闭控制】,【在弹出窗口中加上一个关闭按钮】呵呵，现在更加完美了！,【4.5同时弹出2个窗口】,为避免弹出的2个窗口覆盖，用top和left控制一下弹出的位置不要相互覆盖即可。最后用上面说过的四种方法调用即可。注意：2个窗口的name(newwindows和newwindow2)不要相同，或者干脆全部为空。,【4.6终极应用-弹出的窗口之Cookie控制】,首先，将如下代码加入主页面HTML的区：functionopenwin()window.open(page.html,width=200,height=200)functionget_cookie(Name)varsearch=Name+=varreturnvalue=;if(document.cookie.length0)offset=document.cookie.indexOf(search)if(offset!=-1)offset+=search.lengthend=document.cookie.indexOf(;,offset);if(end=-1)end=document.cookie.length;returnvalue=unescape(document.cookie.substring(offset,end)returnreturnvalue;,functionloadpopup()if(get_cookie(popped)=)openwin()document.cookie=“popped=yes”然后，用（注意不是openwin而是loadpop！）替换主页面中原有的这一句即可。你可以试着刷新一下这个页面或重新进入该页面，窗口再也不会弹出了。,5.调查信息以Email形式发送,在一些页面上我们经常能看到调查信息，它是反馈浏览者信息的重要方式，这个例子是一个简单的调查，填写的信息将以电子邮件方式直接发送到指定信箱。,你的姓名:Email:你对网页制作技巧栏目的意见和建议:注意：按下“发送”按钮后你填写的内容将以电子邮件方式发送给我们(adsf),6、这个E-mail地址可是与一般的不同哟!别人用软件也抓不到这个地址了!,脚本说明:把如下代码加入区域中);document.write(user+site+);/End-,7、给你的主页加上彩色边框,if(document.all)document.body.style.cssText=border:15ridgered/“border:15”是宽度，“red”可以换成你需要的颜色，如“green(绿色)”，“blue(蓝色)”等等。以上是加框框的代码，直接修改加入您的主页代码body/body中即可。,8、滚动条样式,BODYSCROLLBAR-FACE-COLOR:#3333FF;/滚动条凸出部分的颜色SCROLLBAR-HIGHLIGHT-COLOR:#505050;/滚动条空白部分的颜色SCROLLBAR-SHADOW-COLOR:#fc2400;/立体滚动条阴影的颜色SCROLLBAR-3DLIGHT-COLOR:#5965c7;/滚动条亮边的颜色;SCROLLBAR-ARROW-COLOR:#666666;/上下按钮上三角箭头的颜色SCROLLBAR-TRACK-COLOR:#b2ddc7;/滚动条的背景颜色SCROLLBAR-DARKSHADOW-COLOR:#b4fc48;/滚动条强阴影的颜色SCROLLBAR-BASE-COLOR:#333333;/滚动条的基本颜色,9、水纹特效,将以下代码加入下functionf1()setInterval(mdiv.filters.wave.phase+=10,100);if(document.all)document.write()window.onload=f1,此处根据自己的图片的位置来写,水纹特效,PhotoImpact简介,Firework简介,1,2,注意此处要打钩,架设自己的FTP服务,1、从0/pub/server/ftp-server/ftp-serv-u/处下载serv-u5.0进行安装。2、注册（注册码：HsVRCjxHMe/HwDOrrUxqeMuChKO0DdlzUy2tCGgcdMVQDs/7P9EdwjKrowsPF/h4YObIvknAH/FHA95cfEyb3wzQp2v7UfOzCFEFq7223、设置,网页上传,用IE上传网页在IE的地址栏中输入FTP：/用户名：密码服务器地址如ftp:/lou7这样就登陆上了服务器了。,一、什么是FTP？FTP是英文FileTransferProtocol(文件传输协议)的缩写。二、常用FTP软件在很久很久以前的UNIX的系统上的FTP程序是基于命令行的，有点象DOS的模样。现在的Window95/98/NT仍然有基于命令行的字符界面的FTP程序，命令行的FTP使用起来自然不方便。类似于Windows的图形界面流行开之后，自然就有了图形界面的FTP程序。WS_FTP是其中资格比较老的一个，CuteFtp相对年轻一些，而后来的BulletProof、LeafFTP、Crystal就属于比较前卫的了。另外，大部分浏览器，如IE、Netscape也支持FTP协议。如果你手头还没有FTP软件，那就只好使用浏览器来下载安装程序了。这是最简单的上传主页的办法,整个操作就象在本地计算机操作文件一样,通过复制、粘贴或多窗口拖放就能实现文件的上传和下载,非常直观。缺点：速度慢！,用IE下载别人的程序,单击查看文件,样式文件,下拉菜单程序,将程序从TemporayInternetFiles拷出，修改为自己所需的。,如：从中下载菜单下拉程序：hierArrays-frame.jshierMenus.jsMENU.JS用记事本打开hierArrays-frame.jsarMenu1=newArray(200,0,#224388,#224388,#ccdaf4,#b6cbea,#96abca,#96abca,院部,xueyuan.htm,0,生物系-微藻工程研究所,jg/weizao.htm,0,生物系-生态学研究所,jg/shengtai.htm,0,生物系-生化与分子生物学研究所,jg/shenghua.htm,0,)arMenu2=newArray(200,0,#224388,#224388,#ccdaf4,#b6cbea,#96abca,#96abca,博士硕士点、科学介绍、出版教材及专著情况、招生信息,jx.htm,0),代码如下：学院