商 丘 职 业 技 术 学 院
毕业设计
题 目：个人网站建设
姓 名：黄永乐
班 级：05计应六班
专 业：计算机应用技术
指导教师：魏先勇
2007 年12月 30日
【摘要】在21世纪的今天，随着计算机的逐步普及，办公自动化的普及，学习电脑、懂电脑、用电脑的人门越来越多。网络作为信息技术的通信桥梁连接着全球的计算机，而网站作为网络信息主要的表现形式而且还是互联网信息的主要承载者，在Internet上表现出其及其重要的地位，并发挥着其及其重要的作用。无论是在国内还是国外都得以迅速的发展和壮大，并被人们重视和关注。互联网已经彻底的改变了世界，互联网的世界里蕴藏着无限的可能，在这种情况下，各行各业及其个人、单位、工厂、企事业等等在网上构筑属于自己的网络信息平台，保护自己的网络资源并在互联网上开辟自己的市场和消费群体，以及构造自己的数字化世界和加强全球范围内不同地域的人们联系交流等等活动也就显的日益重要。于是各种各样的网站便如雨后春笋般地出现鱼龙混杂且良莠不齐。Internet的日益兴起和以网页为载体的网络信息的广泛传播和应用，使得网站的建设及网页制作得到发展的空间，大至大型企业的产品推销、售后服务、解决方案，小至个人Web页面开发，形形色色，五彩缤纷，网站建设和网页制作也成为计算机网络领域最热门的话题。本文以互联网上现有的一些网站为例，介绍了设计构思、实现、网站数据安全等内容。并对网站体系结构进行了分析，并给出了设计方法。并介绍了网站建设前期的准备，网页制作的一些方法与技巧，以及在建设和制作中值得注意的一些问题。
【关键词】网站 页面 互联网
[Abstract] In the 21st century, with the computer gradually spread, the spread of office automation, computer learning, using the computer more and more doors. As information technology network communication bridge to the global computer, and the web site as the main information network forms and the Internet is the main information bearing, and perceived importance and attention. The Internet has fundamentally changed the world, protect their network resources on the Internet and open up their markets and consumer groups. Construction of the digital world and the strengthening of the global scope of the different geographical link people exchanging activities also marked the Day important benefits. So a variety of websites will have sprouted and produced quite a mixed bag of people there are very mixed. The growing rise of the Internet and web-carrier network information and the widespread application make the website, Solutions to small personal Web development, various, colorful pages web site building and the production of computer network has become the most popular areas of the town. Based on the Internet some of the existing site as an example, the design concept and realize that the website security of the data, and so forth. Terms of Architecture as well as the analysis and design methods are given. And introduced a preliminary site preparation, website production methods and techniques, and the construction and production noteworthy problems.
[Keyword] Website Web Internet
目录
3第一章 绪论
设计思想
开发工具的选用及介绍
网页制作技术概述
4第二章 网站总体分析与设计
42．1网站系统分析
52．2主页设计
16第三章 网页制作步骤.
网页制作的基本步骤
整体规划
资料收集
伪界面设计
代码转换及交互添加
测试网页兼容性
发布站点
网页表格与布局
使用表格布局
创建表格
设置表格属性
使用表格的一些小技艺
使用布局视图设计网页布局
．1绘制布局表格或单元格
设置布局单元格和表格的属性
使用层布局页面
创建层
编辑层
使用嵌套层
编辑网页内容
文件的操作
．2文本操作
．3设置图片格式
20第四章 系统的使用说明与安装
203．1运行环境要求
203．2安装设置
21参考文献
21致谢
第一章 绪论
在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。Internet上发布信息主要是通过网站来实现的，获取信息也是要在Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。但是如今也是张扬个性的年代，个人网站也是顺应了互联网的发展趋势，为扩大自己在社会中的影响力起到了更好更快更全面的包装及宣传作用，。随着网络的普及,越来越多的电脑爱好者开始接触网络,面对网上一个又一个精彩纷呈的网站,众多的电脑爱好者都按捺不住内心的憧憬开始接触网页设计和制作,而这项工作也不像它的启蒙阶段那样需要直接面对枯燥无味的代码,反复的在程序语言和最终界面之间来回切换,随着一些可视化的操作界面,所见即所得工作窗口软件的不断出现和升级,让进入网页帛作的门槛不可那么高不可及.Dreamweaver MX无疑是这些软件当中的佼佼者,可能说它是现在最为普及和超强功能的一个网页制作软件。
设计思想
通过网站，全面宣传，展示个人风采、优点，发布关于自己的有关作品以便达到网站制作技术的交流与沟通，增强彼此间的交流范围及合作意想，在Internet上实现彼此学习彼此提高，共同创作更多更好的作品。
开发工具的选用及介绍
选用的开发工具及相关软件主要有：
Dreamweaver、Frontpage、Photoshop、ASP、VBScript、Java Script、Flash等等。其中Dreamweaver、Frontpage均是网页制作工具，两者功能都十分强大，各有千秋，可以相互配合使用，以便能够更高效的制作网页；Photoshop是一个图象图形处理软件，在网页制作过程中处理图片渲染网页起着不可嘀咕的作用，它与网页三剑客之一--Firework在图象图片处理方面都占有一席之地；ASP即Active Server Pages：“动态服务器网页”，一般简称为“ASP”，ASP之所以能受到大家的重视与使用的原因，主要在于所产生的执行结果都是标准的HTML格式，而且这些程序是在网络服务端中执行，使用一般的浏览器（如IE 或Netscape）都可以正确地获得ASP的“执行”结果，并且将这ASP执行的结果直接在浏览器中“浏览”，不像VBScript或 JavaScript是在客户端（Client）的浏览器上执行，若使用VBScript来设计程序，客户端（Client）在IE浏览器中可以显示程序执行的结果，可是，客户端（Client）若使用Netscape浏览器就无法显示VBScript的执行结果。ASP与所有的ActiveX Script语言都相容，除了可结合HTML外，还可以与VBScript、Java Script、Active X服务器组件来设计。
网页制作技术概述
网页技术从1989年到现在经历了从简单到复杂、从静态到动态、从客户端到服务器的巨大发展。现在的网页技术和动态服务器网页不仅种类繁多，而且功能强大，极大地丰富了信息的表现力，使得网页除了发布信息之外，更日益成为一种享受生活乐趣的新方式。
网页制作技术虽然有很多，比如HTML、DHTML、JavaScript、VBScript、ASP、JSP、PHP等，但总的来说可以分为三类：静态网页技术 、动态网页技术和动态服务器网页技术。静态网页技术指的就是HTML，即HyperText Markup Language, 它是所有其他网页制作技术的基础，所有的网页对象，包括文字、图片、超链接、Flash动画、表格、列表等都需要通过HTML才能展现出来。动态网页技术指的就是DHTML，它通过脚本技术（包括JavaScript、VBScript、JScript）、层叠样式表技术（CSS）及稳当对象模型（DOM）的综合能让网页中的对象产生各种动态的变化，比如鼠标移上后弹出快捷菜单、随鼠标条移动的广告图片等。而动态服务器网页技术是在WWW服务器端动态生成网页的技术，目前非常流行的ASP、JSP、PHP等都属于动态服务器网页技术。
我的个人网站采用的是静态网页技术，因为它是所有其他网页制作技术的基础，要想学习如何做网页就必须从HTML学起。
第二章 网站总体分析与设计
2．1网站系统分析
根据前面的设计思想进行分析，按照系统开发的基本观点对网站进行分解，从设计及内容上可对网站作如下划分：
众多的网页。我的个人网站一共有24个页面组成。
统一的风格。网站有许多网页组成，但是作为整体来讲，它必须有一个同意的风格。
所以我的个人网站主要以白、蓝为主色调，以左右框架为布局，以便更好的来插入
图片及Flash动画。
4. 便捷的导航系统。导航是一个网站非常重要的组成部分，也是衡量一个网站是否优秀的重要标准。便捷的导航能够帮助用户一最快的速度找到自己所需的网页。导航系统最常用的实现方法就是导航条，再次我的个人网站也同样使用的是导航条。
5 . 分层的栏目组织。本站共6个栏目，分别为首页、心情文章，心情留言，心情随笔，心情机密，心情箴言等。每个栏目又由不等的子栏目构成。
6. 域名。任何发布在因特网上的网站都有自己的域名，
2．2主页设计
利用前一节所分析的情况来一步一步制作。
1. 首先按照事先的网页布局来进行设计，最上方安插LOGO横幅图片或者Flash动画。
2. 接着往下是制作一广告宣传栏，输入一些介绍自己的个性化语句。再往下可以插入一些小副图片加以点缀。
3. 然后就是主页的重中之重----制作导航栏。本站在此做的是隐藏性导航栏下拉菜单
4. 最后就是在下方放置一首优美的Flash歌曲，目的是使浏览者一边翻看导航栏内容一边欣赏歌曲，从而使访问者对本站产生好感。制作效果及编写代码如下：
首页效果图
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Transitional//EN">
<html>
<head>
<script language=JavaScript>function mmLoadMenus() {
if (_menu_1122084412_0) return;
_menu_1122084412_0 = new Menu("root",80,18,"",12,"#000000","#FFFFFF","#CCCCCC","#000084","left","middle",3,0,1000,-5,7,true,true,true,0,true,true);
("亲情篇 ");
("爱情篇");
("友情篇");
("哲理篇");
=true;
='#555555';
=1;
='#FFFFFF';
='#777777';
_menu_1122085134_0 = new Menu("root",88,26,"",20,"#FFFFCC","#FFFFCC","#3366FF","#0066FF","left","middle",3,0,1000,-5,7,true,false,false,0,true,true);
("亲情篇","('', '_blank');");
("爱情篇","('', '_blank');");
("友情篇","('', '_blank');");
("哲理篇","('', '_blank');");
="bold";
=true;
='#555555';
=1;
='#FFFFFF';
='#777777';
();
} // mmLoadMenus()
step=0
function flash_title()
{
step++
if (step==3) {step=1}
if (step==1) {='★ ★ 心情拼盘 ★ ★'}
if (step==2) {='☆ ☆ 心情拼盘 ☆ ☆'}
setTimeout("flash_title()",200);
}
flash_title()
</script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body background="image/" link="#999933" vlink="#999933" alink="#999933" onLoad="scrollit(100)">
<div id="Layer6" style="position:absolute; left:228px; top:199px; width:567px; height:578px; z-index:6"><img src="image/" width="568" height="710"></div>
<div id="Layer5" style="position:absolute; left:388px; top:370px; width:253px; height:278px; z-index:7">
<pre>心情站主：黄永乐 </pre>
<pre>出生年月：86年7月</pre>
<p>星座： 巨蟹座</p>
<p>爱好：读书、音乐</p>
<p>专业：计算机</p>
<p>最想做的事：散步</p>
<p>最爱的人：妈妈</p>
<p>格言：走自己的路让别人去说吧!</p>
<p> </p>
</div>
<div id="Layer3" style="position:absolute; left:20px; top:200px; width:203px; height:149px; z-index:2">
<script language="JavaScript">
<!-- Hide this script from old browsers --
setCal()
function getTime() {
// 初始化时间
var now = new Date()
var hour = ()
var minute = ()
now = null
var ampm = ""
// 时间检测，并设置上下午AM和PM
if (hour >= 12) {
hour -= 12
ampm = "PM"
} else
ampm = "AM"
hour = (hour == 0) ? 12 : hour
// add zero digit to a one digit minute
if (minute < 10)
minute = "0" + minute // do not parse this number!
// return time string
return hour + ":" + minute + " " + ampm
}
function leapYear(year) {
if (year % 4 == 0) // basic rule
return true // is leap year
/* else */ // else not needed when statement is "return"
return false // is not leap year
}
function getMonthName(month) {
// 为月份名称设定数组
var ar = new Array(12)
ar[0] = "1月"
ar[1] = "2月"
ar[2] = "3月"
ar[3] = "4月"
ar[4] = "5月"
ar[5] = "6月"
ar[6] = "7月"
ar[7] = "8月"
ar[8] = "9月"
ar[9] = "10月"
ar[10] = "11月"
ar[11] = "12月"
return ar[month]
}
function setCal() {
var now = new Date()
var year = ()
var month = ()
var monthName = getMonthName(month)
var date = ()
now = null
var firstDayInstance = new Date(year, month, 1)
var firstDay = ()
firstDayInstance = null
var days = getDays(month, year)
// 呼叫函数画日历
drawCal(firstDay + 1, days, date, monthName, year)
}
function drawCal(firstDay, lastDate, date, monthName, year) {
// 以下设定表格的属性，这些参数可以自己改变，只是注意相互匹配。
var headerHeight = 35 // height of the table's header cell
var border = 2 // 3D height of table's border
var cellspacing = 2 // width of table's border
var headerSize = "4" // size of tables header font
var colWidth = 30 // width of columns in table
var dayCellHeight = 12 // height of cells containing days of the week
var dayColor = "darkblue" // color of font representing week days
var cellHeight = 20 // height of cells representing dates in the calendar
// create first row of table to set column width and specify week day
text += '<TR ALIGN="center" VALIGN="center">'
for (var dayNum = 0; dayNum < 7; ++dayNum) {
text += openCol + weekDay[dayNum] + closeCol
}
text += '</TR>'
var digit = 1
var curCell = 1
for (var row = 1; row <= ((lastDate + firstDay - 1) / 7); ++row) {
text += '<TR ALIGN="right" VALIGN="top">'
for (var col = 1; col <= 7; ++col) {
if (digit > lastDate)
break
if (curCell < firstDay) {
text += '<TD></TD>';
curCell++
} else {
if (digit == date) {
text += '<TD HEIGHT=' + cellHeight + '>'
text += '<FONT COLOR="' + todayColor + '">'
text += digit
text += '</FONT><BR>'
text += '</TD>'
} else
text += '<TD HEIGHT=' + cellHeight + '>' + digit + '</TD>'
digit++
}
}
text += '</TR>'
}
text += '</TABLE>'
text += '</CENTER>'
(text)
}
// -- End Hiding Here -->
</script>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div id="Layer2" style="position:absolute; width:990px; height:762px; z-index:1; left: 16px; top: 160px">
<table width="100%" height="751" border="1">
<tr>
<td width="21%" rowspan="2" valign="top"><p> </p>
<p><font color="#0066FF"><a href="javascript::" name="link2" id="link1" onMouseOver="MM_showMenu(_menu_1122085134_0,0,-90,null,'link2')" onMouseOut="MM_startTimeout();"></a></font></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<marquee behavior="scroll" direction="up" width="200" height="350" loop="-1" scrollamount="4" scrolldelay="1">
<font color="#0033FF" size="2"><br>
</font><font color="#0033FF">
<p> </p>
<font size="2"> <font color="#999933" size="4">假如生命是一列 <br>
奔驰而过的火车 <br>
快乐与伤悲 就是<br>
那两条铁轨<br>
在我身后紧紧追随<br>
所有的时刻 <br>
都很仓皇而又模糊<br>
除非你能停下来<br>
远远地回顾<br>
只有在回首的刹那<br>
才能得到一种清明的<br>
酸辛 <br>
所以 <br>
也只有<br>
在太迟了的时候<br>
才能细细揣摩 <br>
一种无悔的<br>
美丽的 心情</font><br>
</font> </font> </marquee> <font color="#0033FF">
<p> </p>
<font size="2"> </font><font size="2"><br>
</font></font> <p></p>
<p></p>
<td width="9%" height="31" align="center">
<p><font color="#FFFFCC"><strong><font size="3"><a href="index">首
页</a></font></strong></font></p></td>
<td width="10%" align="center"><p><font color="#FFFFCC"><strong><font size="3"><a href="">心情箴言</a></font></strong></font></p></td>
<table width="101%" border="1">
<tr align="center">
<td height="59" colspan="2"><font color="#999900" size="4"><span class="style5"><strong>名站导航</strong></span></font></td>
</tr>
<tr align="center">
<td height="30"><font color="#999900" size="2"><span class="style5"><a href=" target="_blank">流行MTV</a></span></font></td>
<td><font color="#999900" size="2"><span class="style5"><a href=" target="_blank">音乐在线</a></span></font></td>
</tr>
</table></td>
</tr>
</table>
</div>
<p> </p>
<p> </p>
<script>
<!--
function scrollit(seed) {
var m1 = "我不能选择我的命运 ";
var m2 = "是命运选择了我 ";
var m3 = "于是 日以复夜 ";
var m4 = "用一根冰冷的针 ";
var m5 = "绣出我曾经炽热的 ";
var m6 =" 青春 "
var msg=m1+m2+m3+m4+m5+m6;
var out = " ";
var c = 1;
if (seed > 100) {
seed--;
cmd="scrollit("+seed+")";
timerTwo=(cmd,100);
}
else if (seed <= 100 && seed > 0) {
for (c=0 ; c < seed ; c++) {
out+=" ";
}
out+=msg;
seed--;
=out;
cmd="scrollit("+seed+")";
timerTwo=(cmd,100);
}
else if (seed <= 0) {
if (-seed < ) {
out+=(-seed,);
seed--;
=out;
cmd="scrollit("+seed+")";
timerTwo=(cmd,100);
}
else {
=" ";
timerTwo=("scrollit(100)",75);
}
}
}
//-->
</script>
<EMBED NAME='CS1198991361953' SRC='叶丽仪-上海滩.MP3' LOOP=false
AUTOSTART=false MASTERSOUND HIDDEN=true WIDTH=0 HEIGHT=0></EMBED>
</html>
2．3 网页保存注意事项
在网页制作过程中及时保存所做的网页是一项非常重要的。因为制作中，工作量极大，每时每刻无不在添加修改新的东西，如果没有即使保存的话，万一遇到突发事件。比如停电或者是死机，那么你长时间的工作等于竹篮打水一场空，不仅浪费了时间也浪费你的精力。所以每做一部分都要及时的保存，有时甚至每做一步都要保存。另外在保存时格式一定要正确。HTML文件本身是一种文本文件，它的文件扩展名为“html”或者是“htm”，所以只要哟文字编辑功能的工具都可以用来编辑或处理HTML文件。特别注意的是，只有主页在保存时必须命名为：“”，当再保存网页时就是不能再命名为“”，因为主页名字具有唯一性。否则后者将替代前者而成为主页。接下来就是依依制作各个分页，利用事先准备好的素材及资料进行布局和填充。在此不再依依祥述，特别从中筛选几个网页及源代码以供浏览查看。
. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Transitional//EN">
<html>
<head>
<script language=JavaScript>
step=0
function flash_title()
{
step++
if (step==3) {step=1}
if (step==1) {='★ ★ 心情拼盘 ★ ★'}
if (step==2) {='☆ ☆ 心情拼盘 ☆ ☆'}
setTimeout("flash_title()",200);
}
flash_title()
</script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="JavaScript" src=""></script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
_pgW=innerWidth; _pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=_pgW || innerHeight!=_pgH) ();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body background="image/">
<div id="Layer1" style="position:absolute; left:-17px; top:-3px; width:1012px; height:1847px; z-index:1">
<table width="104%" height="5230" border="1">
<tr>
<td width="15%" rowspan="2"> </td>
<td width="69%" height="142" valign="top"><img src="image/" width="722" height="138"></td>
<td width="16%" rowspan="2"> </td>
</tr>
<tr>
<td height="5080">
<pre>
</pre>
<p> </p>
<p> </p></td>
</tr>
</table>
</div>
<div id="Layer2" style="position:absolute; left:144px; top:146px; width:726px; height:5078px; z-index:2">
<pre>
<img src="image/" width="599" height="414">
<img src="image/" width="597" height="57">
<img src="image/" width="600" height="432">
<img src="image/" width="604" height="377">
<img src="image/" width="613" height="360">
<img src="image/" width="605" height="62">
<img src="image/" width="618" height="515"></pre>
</div>
<div id="Layer3" style="position:absolute; left:146px; top:145px; width:87px; height:31px; z-index:6"><a href="" target="_blank"><img src="image/" width="83" height="33" border="0"></a></div>
<script>
<!--
function scrollit(seed) {
var m1 = " 我不能选择我的命运 ";
var m2 = "是命运选择了我 ";
var m3 = "于是 日以复夜 ";
var m4 = "用一根冰冷的针 ";
var m5 = "绣出我曾经炽热的 ";
var m6 ="青春"
var msg=m1+m2+m3+m4+m5+m6;
var out = " ";
var c = 1;
if (seed > 100) {
seed--;
cmd="scrollit("+seed+")";
timerTwo=(cmd,100);
}
else if (seed <= 100 && seed > 0) {
for (c=0 ; c < seed ; c++) {
out+=" ";
}
out+=msg;
seed--;
=out;
cmd="scrollit("+seed+")";
timerTwo=(cmd,100);
}
else if (seed <= 0) {
if (-seed < ) {
out+=(-seed,);
seed--;
=out;
cmd="scrollit("+seed+")";
timerTwo=(cmd,100);
}
else {
=" ";
timerTwo=("scrollit(100)",75);
}
}
}
//-->
</script>
<body onLoad="scrollit(100)">
</html>
2. 以下为“我的作品”中的界面展示：
作品展示图
第三章 网页制作步骤.
网页制作的基本步骤
整体规划 需要完成的规划：网站主题、风格、页面元素、逻辑结构等
资料收集 收集内容： a、跟主题相关的文字图片资料 b、一些优秀的页面风格 c、下载一些你喜欢的交互页面 d、开放的源代码
伪界面设计 根据事先规划的结构，在平面软件里设计你想要的最终效果，利用平面图片的形式先展示一次，设计时要注意宜人性、人机、心理等各方面因素
代码转换及交互添加 把平面的伪界面转化为HTML代码，添加相应的交互功能Js、按纽、表单，以及一些与数据库相连接的代码。
测试网页兼容性 你可以不必严格按照W3C标准来制作页面，但是你必须保证让所有现有的浏览器能比较好的展示你的作品。
发布站点 测试完毕，符合你的要求，当然就可以开始发布你的网站了，发布的服务器可以是远程，也可以是本地，各个语言有各自的相应的服务器，比如AS
网页表格与布局
表格是在HTML页上显示表格式数据以及文本和图形进行布局的强有力的工具。
设置网页的页面布局是网页制作的第一步，在DTEAMWEAVER MX中，设计完美的布局是网页看起来生动精彩，布局的合理搭配是吸引浏览者目光的第一要素。
使用表格布局
网页的主要组成元素是文字，图形及其它一些可视化元素（如FLASH动画，FLASH按钮，图片，文本）为使它们完美的展现需要一个布局格式，那么表格是网页布局中一种出色的布局方法，它易于修改而且与大多数人所接受。
创建表格
在“插入”栏或“常用”选项卡下选择“插入表格”，在弹出的插入表格对话框中设置要插入的表格属性。
设置表格属性
如果对表格布局不满意，还可以通过托动表格来调整属性，也可以通过修改属性面板来调整表格属性。（如：行，列，宽，高，间距，边框，对齐，背景颜色，边框颜色，背景图象等）
使用表格的一些小技艺
（1）用表格排版网页，可以使你的网页更美观大方（将表格的宽设为100%，可以使网页的兼容性更好）
（2）不要把整个网页放在一个大的表格里，因为一个大表格里的内容要全部LOAD完才会显示，如果整个网页放在一个表格里，那么网页就只有全部显示和全部显示出来两种情况。
使用布局视图设计网页布局
布局视图可以随心所欲设计理想的布局格式
．1绘制布局表格或单元格
单击布局面板中的布局视图，单击布局表格按钮或布局单元格按钮，就可以创建任意的表格或单元格。
设置布局单元格和表格的属性
因为布局单元格其实质还是表格，因此也可以和表格属性设置一样设置布局表格的属性（行，列，宽，高，间距，边框，对齐……）
使用层布局页面
DREAMWEAVER MX中,通过层可以实现对网页内容的精确定位,其友好的可视化特性,能够帮助用户在网页中轻松便捷地创建层,定位网页内容,创建动态网页的容器,在层中可以放置文本,图像,表单,对象插件,FLASH动画等。
创建层
选择“插入”菜单中的“层”即可插入一个层
编辑层
eq \o\ac(○,1)插入文字
将光标定位在层内,输入文字即可
eq \o\ac(○,2)插入图片,FLASH动画
将光标定位在层内,单击“图像”按钮或FLASH动画即可,并调整其大小适合于图层的大小。
使用嵌套层
层是一个容器,那么中间也可以放置层以实现特殊效果
在空白层中定位光标,单击“插入”/“层”即可实现层的嵌套功能
编辑网页内容
文件的操作
【1】首先启动DREAMWEAVER MX,单击“文件”/“打开”
【2】在弹出的“打开”对话框中选择打开文件所在的硬盘，分区及子目录
【3】选择要打开的文件
【4】单击打开按钮
．2文本操作
eq \o\ac(○,1)输入和修改文本
1）可以调用系统输入法进行手工输入
2）可以将别的文档中的文本内容复制到DREAMWEAVER MX编辑的网页中
3）可以直接导入HTML，TXT文档
eq \o\ac(○,2)撤消和重做
1）撤消按钮按CTRL+Z或编辑菜单中的“撤消”
2）重做按CTRL+Y
eq \o\ac(○,3)复制和粘贴
1）CTRL+C复制
2）CTRL+V粘贴
eq \o\ac(○,4)设置文本属性
1）在编辑区下的属性面板中设置字体大小，颜色，字体，对齐方式等
2）在“格式”列表中选择段落，并设置字体大小，颜色等
．3设置图片格式
常见的图片格式有：GIF，JPEG，BMP等
eq \o\ac(○,1)插入图片
1）CTRL+J或者DREAMWEAVER MX的“修改”主菜单中选择“页面属性”调出网页“页面属性对话框”设置窗口，单击“背景图像”单击“浏览”，在图像源中选择图片，单击”确定“即可。
2）单击”插入“面板上的图像插入按钮或快捷键CTRL+ALT+I
eq \o\ac(○,2)图文混排
将光标定位在图片的后面，输入文本信息，选中图片，在属性面板中选择对齐方式，却可实现理想效果。
eq \o\ac(○,3)使用轮替图像
单击“常用”面板中的“鼠标经过图像”或“插入”菜单中的“交互式图像”，在弹出的对话框中选择“原始图像”和“鼠标经过图像”即可。
eq \o\ac(○,4)插入导航条
单击“常用”面板中的“插入导航条”按钮，在弹出的对话框中选择图像文本即可。
eq \o\ac(○,5)超级链接
使用超级链接可实现不同的URL之间的跳转。
根据目标端点的不同超链接可分为：
·外部链接：此类链接的目标端点是本站以外的URL
·内部链接：与外部链接的相对，此类链接的目标端点是本站中的其他文。
·E-MAIL链接：此类链接的目标端点是E-MAIL地址
·局部链接：也称锚链接，此类链接的目标端点是某HTML文件中的命名锚，也可是站内其他页面的锚点，此类链接的目标页面是目标锚点的位置
链接的目标属性有：
----BLANK：表示该链接在新窗口中打开链接指向的URL
----NEW：此标记的目标链接也在新窗口中打开，只不过如果有另一个—NEW属性的链接被点击时，原先的文件会被取代，也就是说—NEW产生的目标新窗口只有一个
----SELF：在链接所在的窗口位置或者帧位置打开链接目标页面
----PARENT：在链接所在的当前文件的父级帧中打开链接目标页面
----TOP：在链接所在的完整窗口中显示链接目标页面
eq \o\ac(○,6)设置超链接文本链接
选中建立链接的文本，在属性面板的“链接”提示文字后的空白栏中输入完整的URL。
eq \o\ac(○,7)网站需要的FLASH动画
第四章 系统的使用说明与安装
3．1运行环境要求
Windows98，2000xp
Personal Web Server （PWS）
3．2安装设置
A. 将本网站拷贝到硬盘上的某一目录下，如：拷贝至c:\y1下。
B. 运行PWS，将默认的Web站点主目录设置为该目录，如上例应为c:\y1；
参考文献
[1]李世杰 Active Server Pages(ASP) 网页设计手册 北京:清华大学出版社 1999
[2]前沿电脑图像工作室 巧学巧用Dreamweaver、Fireworks、Photoshop、Flash制作网页 北京:人民邮电出版社
[3]ASP入门与实例演练薄 小志编著 中国青年出版社
[4]小型网站建设技术 刘涛编著 中国铁道出版社
致谢
做网站之前做了大量的准备工作，经过这几个月的搜集体资料，网上参考，终于完成了自已的毕业网站作品，在这篇毕业设计完成之际，我衷心的感谢我的指导老师魏先勇老师，魏老师在百忙之中抽出时间来为我指导讲解，并提出了许多宝贵的意见和建议，我的论文才得以顺利完成。 作品有不少的漏洞，实在是能力有限，望老师多多体谅，许多地方还要老师多多指点，望老师看完作品给予批评指教。谢谢老师的审阅！在即将离开学校之际，再次衷心感谢我的所有老师对我本次毕业设计的关心与指导，谢谢你们为我的大学生活划上一个完满的句号！
PAGE
PAGE 1
