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