Dreamweaver网页制作

网页入门及小技术楼斌BBSID：lou生命科学学院2004.03.26网页设计的工具1、FrontPage最易学，与word基本相似2、所见即所得的网页制作利器Dreamweaver网页按钮制作工具Uleadphotoimpact8.0(横幅、项目符号、按钮、按钮栏、图标、导航条、分隔符）图片工作Photoshop、flash、fireworkDREAMWEVAER初步认识选创建代码区所见即所得Body区，网页主体Head区，主要设置字体编码，网页标题等编辑窗口①主菜单：编辑窗口的绝大部分功能；②工具栏③对象面板④属性面板⑤面板组（又称可停靠浮动面板）⑥快速启动栏（又称启动面板）⑦编辑区域：以所见即所得的方式显示被编辑网页内容对象面板（Objects）在网页编辑的过程中，通过单击对象面板的按钮来为网页添加相应的元素，如图片、表格、层、Flash。我们称这些元素为为对象。单击对象面板上的向下箭头，能插入其他类型的对象，如特殊字符（Characters）、表单（Froms）等。快速启动栏是切换到站点管理器，是切换到行为面板，是查看网页源代码。查看历史记录Properties属性面板：Crtl+F3CSSStyles样式面板：Shift+F11Behaviors行为面板：Shift+F3Objects对象面板：Crtl+F2设置页面属性：是在正式开始制作网页前一个必不可少的工序。双击打开刚才新建的index.htm，就自动转入编辑窗口。选择ModifyPageProperties设置一些必要的页面属性，如下图：①Title（标题）：页面的标题会直接显示在浏览器的左上方，务必要养成为每一页都设定一个标题的习惯，这既便于访问者的浏览，也有助于你在网页编辑的过程中区分不同的页面。虽然标题并不是一个网页必要的元素，但却是体现着网页制作者有否从细处为浏览者着想。②BackgroundImage（背景图片）：点击Browse按钮，可以为网页添加背景图片。③Background（背景颜色）：默认为白色，可以选择其他的颜色。④Text（文字颜色）：在这里将文字设置为黑色。要注意，假如不对背景及文字的颜色进行设置（此时RGB色值显示为空），那么浏览器在显示页面的时候，就会采用系统的默认设置。但因为不同的系统的设置都可能会有所区别，这样就回导致页面的显示效果也是千差万别。因为，为了更好地让页面体现出你的设计思想，就千万别忘记设定页面的背景颜色及文字颜色。⑤Link（链接颜色）：设定超级链接的颜色，不设定则默认为蓝色。⑥Left和Top：设置左部及顶部的页边距，一般都设置为“0”以方便于网页的编辑。确保页面的设置正确后，点击OK结束。从最简单的网页开始文字属性面板选择链接对象粗体、斜体、文字方式设置文字颜色DREAMWEVAER的小技巧1、有些主页，若把鼠标指向某个链接，在状态栏会出现该链接的说明，是不是会感觉很方便？其实这不难做到，只要在链接语句中加入以下的内容，就可以实现了！试试看！〈HTML〉〈HEAD〉〈TITLE〉链接说明〈/TITLE〉〈/HEAD〉〈BODY〉atitle=“思明南路”href=“”厦门大学/a〈/BODY〉〈/HTML〉要在图形上显示文字，您可能立刻就会想到使用Java来实现这一功能。但这里，我要介绍给您的是直接用HTML的方法。用层技术？，非也！，方法非常简单：使用表格，在表中键入文字，然后用您希望的图形作为这个表格的背景文件。图形的大小需与表格相同。这样您就已经轻易地在图形上显示文字了。2、在图形上显示文字春3、如何调整表格高度有时当我们拖动表格的边框，无论怎样拖动，等到放下鼠标，表格却又恢复到原来的样子。试着拖动表格的边框看看。出现这种情况的原因在于我们已经为表格提供了一个固定的高度，其直观表象就是无论你怎样拖动表格的边框，表格的高度都不变化。我们首先需要选定表格。比较简单的方法是，将光标移动到表格内，然后按“ctrl+a”，看看，不是就选中了与包含光标所在位置的最小的表格了吗。选定了表格以后，在properties框（属性框）中点击一下“clearrowheights”图标（下图中带红框的按钮），表格的高度设定值就被取消了。这时表格的高度会按照表格的内容自动的匹配高度。不只有上面的一种方法，我们也可以选中表格，在表格的属性框中直接删除掉表格的height值就可以了。同样的，该方法也适用于改变表格的宽度的情况，只不过，选定了表格以后，删除的不是行的高度，而是列的宽度。若表格只需很小的一行高，如1象素，则可以从程序中td /td改为td/td4、轻松打造弹出窗口1.首先，从菜单栏中Window-Behaviors(窗口-行为)或直接按快捷键Shift+F3调出行为面板。2.如图所示，按行为面板左上角的“+”号添加行为，在弹出的菜单中选择“OpenBrowserWindow（打开浏览器窗口）”行为，或选择“弹出信息”。通知28日春游…….【4.1最基本的弹出窗口代码】以代码方式实现：将代码放在HTML的任意位置，head和/head之间可以，body间/body也可以，越前越早执行，尤其是页面代码长，又想使页面早点弹出就尽量往前放。SCRIPTLANGUAGE=javascript!--window.open('page.html')--/SCRIPTwindow.open('page.html')用于控制弹出新的窗口page.html如果page.html不与主窗口在同一路径下，前面应写明路径，绝对路径(http://和相对路径(../)均可。下面再说一说弹出窗口的设置。我们来定制这个弹出的窗口的外观，尺寸大小，弹出的位置以适应该页面的具体情况。SCRIPTLANGUAGE=javascript!--window.open('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no')//写成一行--/SCRIPT参数解释：top=0窗口距离屏幕上方的象素值；left=0窗口距离屏幕左侧的象素值；toolbar=no是否显示工具栏，yes为显示；menubar，scrollbars表示菜单栏和滚动栏。resizable=no是否允许改变窗口大小，yes为允许；location=no是否显示地址栏，yes为允许；status=no是否显示状态栏内的信息（通常是文件已经打开），yes为允许；【4.2经过设置后的弹出窗口】js脚本开始；弹出新窗口的命令弹出窗口的文件名窗口高、宽度弹出窗口的名字（不是文件名），非必须，可用空''代替；htmlheadscriptLANGUAGE=JavaScript!--functionopenwin(){window.open(page.html,newwindow,height=100,width=400,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no)}//--/script/headbodyonload=openwin()………./body/html这里定义了一个函数openwin(),函数内容就是打开一个窗口。怎么调用呢？方法一：bodyonload=“openwin()”浏览器读页面时弹出窗口；方法二：bodyonunload=“openwin()”浏览器离开页面时弹出窗口；方法三：用一个连接调用：ahref=“#”onclick=“openwin()”打开一个窗口/a注意：使用的“#”是虚连接。方法四：用一个按钮调用：inputtype=buttononclick=openwin()value=打开窗口【4.3下面是一个完整的代码，用函数控制弹出窗口】如果我们再将一小段代码加入弹出的页面(注意是加入到page.html的HTML中，可不是主页面中，否则...)，让它10秒后自动关闭是不是更酷了？首先，将如下代码加入page.html文件的head区：scriptlanguage=“JavaScript”functioncloseit(){setTimeout(“self.close()”,10000)//毫秒}/script然后，再用bodyonload=“closeit()”这一句话代替page.html中原有的BODY这一句就可以了。（这一句话千万不要忘记写啊！这一句的作用是调用关闭窗口的代码，10秒钟后就自行关闭该窗口。）【4.4弹出的窗口之定时关闭控制】【在弹出窗口中加上一个关闭按钮】FORMINPUTTYPE='BUTTON'VALUE='关闭'onClick='window.close()'/FORM呵呵，现在更加完美了！【4.5同时弹出2个窗口】scriptLANGUAGE=JavaScript!--functionopenwin(){window.open(page.html,newwindow,height=100,width=100,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no“)window.open(”page2.html“,”newwindow2“,”height=100,width=100,top=100,left=100,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no“)}//--/script为避免弹出的2个窗口覆盖，用top和left控制一下弹出的位置不要相互覆盖即可。最后用上面说过的四种方法调用即可。注意：2个窗口的name(newwindows和newwindow2)不要相同，或者干脆全部为空。【4.6终极应用--弹出的窗口之Cookie控制】首先，将如下代码加入主页面HTML的HEAD区：scriptfunctionopenwin(){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”}}/script然后，用bodyonload=“loadpopup()”（注意不是openwin而是loadpop！）替换主页面中原有的BODY这一句即可。你可以试着刷新一下这个页面或重新进入该页面，窗口再也不会弹出了。5.调查信息以Email形式发送在一些页面上我们经常能看到调查信息，它是反馈浏览者信息的重要方式，这个例子是一个简单的调查，填写的信息将以电子邮件方式直接发送到指定信箱。调查信息窗体顶部你的姓名:Em