网页设计报告

1、太原工业学院课程设计太原工业学院太原工业学院课程设计说明书课程设计说明书课程名称课程名称 网络平台开发技术网络平台开发技术 课题名称课题名称 WelcomeWelcome ToTo MyMy WorldWorld 学学 生生 姓姓 名名 刘创刘创 专专 业业 计算机科学与技术专业计算机科学与技术专业 班班 级级 13205411320541 学学 号号 3737 指指 导导 教教 师师 邢珍珍邢珍珍 成成 绩绩 摘摘 要要本次网页课程的设计题目是：本次网页课程的设计题目是：WelcomeWelcome ToTo MyMy World.World.以以“我的世界我的世界”为中心，向登录、我的主页

2、、我的音乐（为中心，向登录、我的主页、我的音乐（MaydayMayday） 、我的日志、我的日志( (空间日志空间日志摘选摘选) )、我的图片（自然风光）、我的图片（自然风光） 、我的留言（数据库数据）等方向开发出、我的留言（数据库数据）等方向开发出的一种展现自我生活情趣的网站。坚持以网站的安全性、实用性、健壮的一种展现自我生活情趣的网站。坚持以网站的安全性、实用性、健壮性方向出发考虑来设计网页，在设计过程中全面考虑界面的可实用性、性方向出发考虑来设计网页，在设计过程中全面考虑界面的可实用性、美观性，使设计出的网站更加人性化，更加适于他人欣赏浏览。美观性，使设计出的网站更加人性化，更加适于他人

3、欣赏浏览。在我的音乐主页中详细描述与概括了有关在我的音乐主页中详细描述与概括了有关 Mayday(Mayday(五月天五月天) )的发展史，的发展史，以及作品，在本网页中使用了相当多的网页设计技术，其中就有：以及作品，在本网页中使用了相当多的网页设计技术，其中就有：JavaScriptJavaScript、CSSCSS、divdiv，以及跑马灯，以及跑马灯 marqueenmarqueen、艺术字、华文行彩字体、艺术字、华文行彩字体、音乐播放器、音乐播放器、flvflv 视频播放等相关技术，在本网页中将网页课设的技术视频播放等相关技术，在本网页中将网页课设的技术表现的应有尽有、淋漓尽致；在我的

4、日志网页中，摘录我的空间生活日表现的应有尽有、淋漓尽致；在我的日志网页中，摘录我的空间生活日志志-承认忘记承认忘记 、 回归回归 、 太原之别太原之别 、 MyMy CollegeCollege LifeLife等，其等，其中也用到了不可或缺的技术：中也用到了不可或缺的技术：JavaScriptJavaScript、CSSCSS、divdiv，以及跑马灯，以及跑马灯marqueenmarqueen、艺术字、华文行彩字体等；在我的图片网页页面中，加载了、艺术字、华文行彩字体等；在我的图片网页页面中，加载了我的一些喜爱的风景、人物、动物的图片，用到了我的一些喜爱的风景、人物、动物的图片，用到了 J

5、avaScriptJavaScript、跑马灯、跑马灯、艺术字、等相关技术；在我的留言网页页面中，采用了连接数据库艺术字、等相关技术；在我的留言网页页面中，采用了连接数据库 ADOADO技术，当你要浏览我的昨日留言中，你将通过后台的数据库连接查看他技术，当你要浏览我的昨日留言中，你将通过后台的数据库连接查看他人对我的留言等人对我的留言等 aspasp 相关技术相关技术; ;最后就是我的登录页面、我的主页页面最后就是我的登录页面、我的主页页面了，在登录页面中将允许登录用户输入相关用户信息进行校验信息，如了，在登录页面中将允许登录用户输入相关用户信息进行校验信息，如太原工业学院课程设计果信息不符合

6、，仍然保留在原登录界面，如果登录成功则进入我的主页果信息不符合，仍然保留在原登录界面，如果登录成功则进入我的主页页面设计。此刻，你将真正进入的页面设计。此刻，你将真正进入的“Welcome“Welcome ToTo MyMy World”World”主页面。主页面。在这个主页中，你将畅游于在这个主页中，你将畅游于“我的世界我的世界”网页中，一张张美图、一篇网页中，一张张美图、一篇承认忘记承认忘记的日志欣赏、一首孙楠的的日志欣赏、一首孙楠的拯救拯救还有还有 MaydayMayday 的的温柔温柔将让你忘记外世的纷繁吵杂而沉浸于网页世界流连忘返。将让你忘记外世的纷繁吵杂而沉浸于网页世界流连忘返。同

7、时，由于时间、技术等因素，设计出的网页或许有不尽人意的地同时，由于时间、技术等因素，设计出的网页或许有不尽人意的地方，这就需要自己多努力学习，多加练习。方，这就需要自己多努力学习，多加练习。天下大事必作于细。天下大事必作于细。太原工业学院课程设计目目 录录1、系统需求分析 .11.1系统概述.11.1.1 设计题目 .11.1.2 设计背景 .11.2系统运行环境.11.3功能需求描述.12、系统总体设计 .22.1 开发与设计的总体思想.22.1 系统功能图.23.系统详细设计.33.1 主页及登录页面.33.1.1 页面设计技术.43.1.2 部分功能模块及代码.53. 1. 3 页面 h

8、tml 标签.63. 2 我的日志页面.83.2.1 页面设计技术.83.2.2 部分功能模块及代码.83.2.3 页面 html 标签.93. 3 我的图片页面.123.3.1 页面设计技术.123.3.2 部分功能模块及代码.123.3.3 页面 html 标签.133. 4 我的音乐页面.143.4.1 页面设计技术.153.4.2 部分功能模块及代码.153.4.3 页面 html 标签.153. 5 我的留言页面.173.5.1 页面设计技术.173.5.2 部分功能模块及代码.173.5.3 页面 html 标签.184、总结.18太原工业学院课程设计 1 1、系统需求分析1.11

9、.1系统概述系统概述 本次网页课程的设计题目是：本次网页课程的设计题目是：WelcomeWelcome ToTo MyMy World.World.以以“我的世界我的世界”为中心，向为中心，向登录、我的主页、我的音乐（登录、我的主页、我的音乐（MaydayMayday） 、我的日志、我的日志( (空间日志摘选空间日志摘选) )、我的图片（自然风、我的图片（自然风光）光） 、我的留言（数据库数据）等方向开发出的一种展现自我生活情趣的网站。坚持以、我的留言（数据库数据）等方向开发出的一种展现自我生活情趣的网站。坚持以网站的安全性、实用性、健壮性方向出发考虑来设计网页，在设计过程中全面考虑界网站的安

10、全性、实用性、健壮性方向出发考虑来设计网页，在设计过程中全面考虑界面的可实用性、美观性，使设计出的网站更加人性化，更加适于他人欣赏浏览。面的可实用性、美观性，使设计出的网站更加人性化，更加适于他人欣赏浏览。1.1.11.1.1 设计题目设计题目本次网页课程的设计题目是：本次网页课程的设计题目是：WelcomeWelcome ToTo MyMy World.World.本网站必须包含网站的一些本网站必须包含网站的一些基本功能，即前台的用户申请登陆功能，浏览功能，音乐欣赏，日志欣赏，图片欣赏基本功能，即前台的用户申请登陆功能，浏览功能，音乐欣赏，日志欣赏，图片欣赏等功能，提交留言和后台的用户管理。

11、等功能，提交留言和后台的用户管理。1.1.21.1.2 设计背景设计背景在互联网发展迅猛的今天，我们无时无刻不与网络接触，可以从中查找我们需要在互联网发展迅猛的今天，我们无时无刻不与网络接触，可以从中查找我们需要的信息，可以发布想让别人知道的信息，可以找到你不认识但真心的朋友，也可以第的信息，可以发布想让别人知道的信息，可以找到你不认识但真心的朋友，也可以第一时间看到国内外的重大事件。当我们无事可做的时候，便开始了娱乐方式的搜索，一时间看到国内外的重大事件。当我们无事可做的时候，便开始了娱乐方式的搜索，由此，由此， “我的世界我的世界”网站应运而生，服务大家，为我们的生活增添了色彩。随着我国网

12、网站应运而生，服务大家，为我们的生活增添了色彩。随着我国网民的增加，也促进了其他网站的开发。民的增加，也促进了其他网站的开发。1.21.2系统运行环境系统运行环境HTML5.0HTML5.0 WIN8WIN8 简体中文版简体中文版 6464 位操作位操作 ADOADO 数据库数据库 accessaccess 数据库表数据库表IIS 服务器服务器1.21.2功能需求描述功能需求描述 浏览网页的用户首先，凭借用户名以及匹配的密码进行登录。当用户信息不匹配时，浏览网页的用户首先，凭借用户名以及匹配的密码进行登录。当用户信息不匹配时，则提示客户登录失败，并重新返回登录界面。如果用户数据信息正确，则进入

13、主页面则提示客户登录失败，并重新返回登录界面。如果用户数据信息正确，则进入主页面“Welcome To My World” ，客户可以在本页面单击链接，客户可以在本页面单击链接“我的主页我的主页” 、 “我的日志我的日志” 、“我的音乐我的音乐” 、 “我的日志我的日志” 、 “我的图片我的图片” 、 “我的留言我的留言”进入相应的子网页页面，其中进入相应的子网页页面，其中在在“我的音乐我的音乐”页面又有页面又有“音乐的发展史音乐的发展史” 、 “音乐作品音乐作品”等一系列链接，满足客户的等一系列链接，满足客户的种种需求。最后，在种种需求。最后，在“我的留言我的留言”中使用了中使用了 asp

14、技术，后台链接数据库的留言数据，技术，后台链接数据库的留言数据，提供给了客户的查询等功能。提供给了客户的查询等功能。太原工业学院课程设计 2 2 2、系统总体设计、系统总体设计2.12.1 开发与设计的总体思想开发与设计的总体思想以以“我的世界我的世界”为中心，向登录、我的主页、我的音乐（为中心，向登录、我的主页、我的音乐（MaydayMayday） 、我的日志、我的日志( (空空间日志摘选间日志摘选) )、我的图片（自然风光）、我的图片（自然风光） 、我的留言（数据库数据）等方向开发出的一种、我的留言（数据库数据）等方向开发出的一种展现自我生活情趣的网站展现自我生活情趣的网站2.22.2系统

15、功能结构图系统功能结构图My World 网页设计页面总框架登陆页面 一我的主页 二我的音乐 三我的日志 四我的留言 六用户信息管理音乐发展 七音乐成员 八我的图片 五音乐作品 九图 2.1 网站结构图Asp 连接数据库 ADO太原工业学院课程设计 3 3 3、系统详细设计、系统详细设计3.13.1 主页主页及登陆页面及登陆页面图 3-1 登陆页面演示图图 3-2 主页页面演示图太原工业学院课程设计 4 3.1.13.1.1 页面设计技术页面设计技术 在登录页面中将允许登录用户输入相关用户信息进行校验信息，如果信息不符合，仍然保留在原登录界面，如果登录成功则进入我的主页页面设计，在这里运用了

16、asp链接数据库技术。登陆成功后，此刻，你将真正进入的“Welcome To My World”主页面。在主页页面设计中，运用了 CSS、div，以及跑马灯 marqueen、艺术字、华文行彩字体、音乐播放器等技术。3.1.23.1.2 部分功能模块及代部分功能模块及代登陆页面核心代码：function JugeUserData() var username = document.getElementById(username); var pass = document.getElementById(password); if (username.value = )alert(请输入用户名);

17、 username.focus(); return false; if (pass.value = ) alert(请输入密码); return false; if(username.value=lc & pass.value=123456)alert(Login Success！);return true;太原工业学院课程设计 5 alert(用户名以及密码不匹配,请重新输入);return false; 主页页面核心代码： 我的首页 我的日志 我的图片 我的音乐 我的留言 我的博客 欢迎访问由 LC 设计的网站。该网站创建于 2015 年 12 月 9 号，使用相关的技术有：HTM

18、L 基础知识、CSS 布局、APDIV、ADO 数据库连接等。同时，我的博客链接地址： My CSDN Blog欢迎前来访问，与之共享编程中的相关技术及收获的乐趣。编程使世界变得更加美好！ 欣赏歌曲：拯救 3.1.33.1.3 页面的页面的 htmlhtml 标签标签DIV 标签#div1 position: absolute;width: 152px;height: 320px;z-index: 1;left: 32px;top: 131px;背景标签body background-image: url(data/background/MainPageBack.jpg);background

19、-repeat: no-repeat;太原工业学院课程设计 7 #div2 position: absolute;margin: 0 auto;width: 800px;left: 290px;top: 102px;#div3position: absolute;margin: 0 auto;width: 245px;left: -2px;top: 551px;height: 80px;#div4position: absolute;margin: 0 auto;width: 245px;left: 242px;top: 341px;height: 80px;二级下拉列表标签太原工业学院课程设

20、计 8 3.23.2我的日志页面我的日志页面3.2.13.2.1 页面设计技术页面设计技术在我的日志网页中，摘录我的空间生活日志在我的日志网页中，摘录我的空间生活日志-承认忘记承认忘记 、 回归回归 、 太原之别太原之别 、MyMy CollegeCollege LifeLife等，其中也用到了不可或缺的技术：等，其中也用到了不可或缺的技术：JavaScriptJavaScript、CSSCSS、divdiv，以，以及跑马灯及跑马灯 marqueenmarqueen、艺术字、华文行彩字体等。、艺术字、华文行彩字体等。 3.2.23.2.2 部分功能模块及代部分功能模块及代码码 var spee

21、d=10;document.getElementById(demo2).innerHTML=document.getElementById(demo1).innerHTMLfunction Marquee()if(document.getElementById(demo2).offsetWidth-document.getElementById(demo).scrollLeft=0)document.getElementById(demo).scrollLeft-=document.getElementById(demo1).offsetWidthelsedocument.getElement

22、ById(demo).scrollLeft+;var MyMar=setInterval(Marquee,speed)太原工业学院课程设计 9 document.getElementById(demo).onmouseover=function() clearInterval(MyMar)document.getElementById(demo).onmouseout=function() MyMar=setInterval(Marquee,speed) 奔跑的时候 会忘记的烦恼3.2.33.2.3 页面的页面的 htmlhtml 标签标签#Div1 position: absolute;wi

23、dth: 79px;height: 53px;z-index: 1;left: 1px;top: 463px;#Div2 position: absolute;width: 922px;height: 53px;z-index: 1;太原工业学院课程设计 10 left: 174px;top: 0px;#Div3 position: absolute;width: 136px;height: 41px;z-index: 1;left: 130px;top: 106px;#Div4 position: absolute;width: 199px;height: 42px;z-index: 1;l

24、eft: 617px;top: 176px;#Div5 position: absolute;width: 213px;height: 42px;z-index: 1;left: 614px;top: 245px;#Div6 position: absolute;太原工业学院课程设计 11 width: 192px;height: 42px;z-index: 1;left: 136px;top: 156px;#Div7 position: absolute;width: 74px;height: 41px;z-index: 1;left: 687px;top: 513px;p#STCaiyun

25、 font-family:STCaiyun;color:#9F3;font-size:25px; body background-image: url(data/background/MyDiaryPageBack.gif);background-repeat: no-repeat;太原工业学院课程设计 12 3.33.3我的图片页面我的图片页面3.3.13.3.1 页面设计技术页面设计技术在我的图片网页页面中，加载了我的一些喜爱的风景、人物、动物的图片，用到在我的图片网页页面中，加载了我的一些喜爱的风景、人物、动物的图片，用到了了 JavaScriptJavaScript、跑马灯、艺术字、等

26、相关技术等。、跑马灯、艺术字、等相关技术等。 3.3.23.3.2 部分功能模块及代码部分功能模块及代码 var speed=10;document.getElementById(demo2).innerHTML=document.getElementById(demo1).innerHTMLfunction Marquee()if(document.getElementById(demo2).offsetWidth-document.getElementById(demo).scrollLeft=0)document.getElementById(demo).scrollLeft-=docu

27、ment.getElementById(demo1).offsetWidthelsedocument.getElementById(demo).scrollLeft+;太原工业学院课程设计 13 var MyMar=setInterval(Marquee,speed)document.getElementById(demo).onmouseover=function() clearInterval(MyMar)document.getElementById(demo).onmouseout=function() MyMar=setInterval(Marquee,speed) 假如生活欺骗了你

28、，3.3.33.3.3 页面的页面的 htmlhtml 标签标签styletype=text/css#Div1#Div1 position:position: absolute;width:absolute;width: 1200px;height:1200px;height: 100px;z-index:100px;z-index: 1;left:1;left: 60px;top:60px;top: 80px;80px; #Div2position:#Div2position: absolute;width:absolute;width: 87px;height:87px;height: 3

29、9px;z-index:39px;z-index: 1;left:1;left: 0px;top:0px;top: 3px;3px; #Div3position:#Div3position: absolute;width:absolute;width: 159px;height:159px;height: 54px;z-index:54px;z-index: 1;left:1;left: 66px;top:66px;top: 265px;265px; #Div4position:#Div4position: absolute;width:absolute;width: 204px;height

30、:204px;height: 100px;z-index:100px;z-index: 1;left:1;left: 274px;top:274px;top: 219px;219px; #Div5position:#Div5position: absolute;width:absolute;width: 355px;height:355px;height: 34px;z-index:34px;z-index: 1;left:1;left: 50px;top:50px;top: 386px;386px; #Div6position:#Div6position: absolute;width:ab

31、solute;width: 282px;height:282px;height: 71px;z-index:71px;z-index: 1;left:1;left: 14px;top:14px;top: 376px;376px; .mouthfont-size:20px;.mouthfont-size:20px; font-weight:bold;font-weight:bold; display:block;display:block; width:350px;width:350px; -webkit-transform:-webkit-transform: rotate(90deg);ro

32、tate(90deg); -moz-transform:-moz-transform: rotate(90deg);rotate(90deg); filter:filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);progid:DXImageTransform.Microsoft.BasicImage(rotation=3); p#STXingkaip#STXingkai font-family:STXingkai;color:#9F3;font-size:25px;font-family:STXingkai;colo

33、r:#9F3;font-size:25px; p#Arialp#Arial font-family:Arial;font-family:Arial; p#allp#all font-family:font-family:宋体宋体,Arial;,Arial;bodybody background-image:background-image: url(data/background/background13.jpg);url(data/background/background13.jpg);background-repeat:background-repeat: no-repeat;no-re

34、peat;太原工业学院课程设计 14 3.43.4我的音乐页面我的音乐页面音乐链接中的其他页面：音乐作品页面音乐发展史页面：太原工业学院课程设计 15 3.4.13.4.1 页面设计技术页面设计技术在我的音乐主页中详细描述与概括了有关在我的音乐主页中详细描述与概括了有关 Mayday(Mayday(五月天五月天) )的发展史，以及作品，的发展史，以及作品，在本网页中使用了相当多的网页设计技术，其中就有：在本网页中使用了相当多的网页设计技术，其中就有：JavaScriptJavaScript、CSSCSS、divdiv，以及，以及跑马灯跑马灯 marqueenmarqueen、艺术字、华文行彩字

35、体、音乐播放器、艺术字、华文行彩字体、音乐播放器、flvflv 视频播放等相关技术，视频播放等相关技术，在本网页中将网页课设的技术表现的应有尽有、淋漓尽致。在本网页中将网页课设的技术表现的应有尽有、淋漓尽致。3.4.23.4.2 部分功能模块及代码部分功能模块及代码 var MenuBar1 = new Spry.Widget.MenuBar(MenuBar1, imgDown:/C|/Users/ASUS/Desktop/网页课设/SpryAssets/SpryMenuBarDownHover.gif, imgRight:/C|/Users/ASUS/Desktop/网页课设/SpryAss

36、ets/SpryMenuBarRightHover.gif);3.4.33.4.3 页面的页面的 htmlhtml 标签标签body background-image: url(data/background/MyMusicPageBack.jpg);.v font-family: 楷体;font-size: 24px;font-weight: lighter;color: #33FF66;text-decoration: blink;.STYLE1 font-family: 新宋体.two font-family: 楷体;font-size: 18px;font-style: italic;

37、font-weight: normal;font-variant: normal;text-decoration: underline blink;background-color: #CCCCFF;color: #0099CC;body,td,th font-size: 18px;#Layer1 position:absolute;left:107px;top:638px;width:111px;height:136px;z-index:1;visibility: hidden;background-color: #CCCCFF;太原工业学院课程设计 16 .LV font-family:

38、新宋体;font-size: 14px;color: #66FF00;text-decoration: blink;#Layer2 position:absolute;left:710px;top:889px;width:433px;height:18px;z-index:2; #Div1 position: absolute;width: 628px;height: 39px;z-index: 5;left: 317px;top: 81px;#Layer4 position:absolute;left:846px;top:865px;width:405px;height:22px;z-ind

39、ex:4;#Div2position: absolute;left: 212px;top: 77px;width: 661px;height: 52px;z-index: 4;#Div3position: absolute;left: 924px;top: 362px;width: 259px;height: 226px;z-index: 4;#Div4 position: absolute;left: 4px;top: 144px;width: 218px;height: 58px;z-index: 3;#Div5 position: absolute;left: 218px;top: 10

40、6px;width: 276px;height: 309px;z-index: 3;#Div6 position: absolute;left: 186px;top: -3px;width: 922px;height: 74px;z-index: 3;#Div7position: absolute;left: 666px;top: 181px;width: 275px;height: 48px;z-index: 3;#Div8position: absolute;left: 926px;top: 106px;width: 295px;height: 267px;z-index: 3;#Div9

41、position: absolute;left: 1083px;top: 150px;width: 353px;height: 53px;z-index: 3;#Div10position: absolute;left: 1px;top: 460px;width: 302px;height: 230px;z-index: 3;#Div11position: absolute;left: 4px;top: 2px;width: 77px;height: 31px;z-index: 3;#Div12position: absolute;left: 592px;top: 747px;width: 1

42、79px;height: 143px;z-index: 3;#Div13position: absolute;left: 132px;top: 2px;width: 23px;height: 25px;z-index: 3;#Div14position: absolute;left: 0px;top: 679px;width: 455px;height: 274px;z-index: 3;#Div15position: absolute;left: 926px;top: 570px;width: 455px;height: 274px;z-index: 3;#Div16position: ab

43、solute;left: 500px;top: 375px;width: 455px;height: 274px;z-index: 3;#Div17position: absolute;left: 499px;top: 106px;width: 418px;height: 274px;z-index: 3;p#STCaiyun font-family:STCaiyun;color:#9F3;font-size:25px; p#STXingkai font-family:STXingkai;color:#9F3;font-size:20px; p#STXingkaiA font-family:S

44、TXingkai;color:#330066;font-size:20px; .mouth font-size:20px; font-weight:bold; display:block; width:350px; -webkit-transform:rotate(90deg); -moz-transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 太原工业学院课程设计 17 3.53.5我的留言页面我的留言页面昨日留言页面：3.5.13.5.1 页面设计技术页面设计技术

45、在我的留言网页页面中，采用了连接数据库在我的留言网页页面中，采用了连接数据库 ADOADO 技术，当你要浏览我的昨日留言技术，当你要浏览我的昨日留言中，你将通过后台的数据库连接查看他人对我的留言等中，你将通过后台的数据库连接查看他人对我的留言等 aspasp 相关技术，以及相关技术，以及JavaScriptJavaScript、CSSCSS、divdiv、艺术字等相关技术。、艺术字等相关技术。3.5.23.5.2 部分功能模块及代码部分功能模块及代码 太原工业学院课程设计 18 Welcome To Enjoy My message board 昨日留言 3.5.33.5.3 页面的页面的 h

46、tmlhtml 标签标签body background-image: url(data/background/MyMessagePageBack.jpg);#Div1 position: absolute;width: 73px;height: 67px;z-index: 1;left: 0px;top: 0px;#Div2 position: absolute;width: 524px;height: 176px;z-index: 1;left: 208px;top: 91px;#Div3 position: absolute;width: 109px;height: 35px;z-inde

47、x: 1;left: 353px;top: 312px;#Div4 position: absolute;width: 143px;height: 48px;z-index: 1;left: 19px;top: 190px;#Div5 position: absolute;width: 296px;height: 53px;z-index: 1;left: 35px;top: 255px;p#STCaiyun font-family:STCaiyun;color:#9F3;font-size:25px; 总总 结结通过短暂的几天网页设计，收获颇多。比如通过短暂的几天网页设计，收获颇多。比如 J

48、avaScript、div、CSS、音频、视频、音频、视频等相关技术的使用，网页设计的布局等收获颇多。等相关技术的使用，网页设计的布局等收获颇多。首页内容精彩丰富，简洁明快，语言风趣，通俗易懂。页面可爱清爽。首页主要首页内容精彩丰富，简洁明快，语言风趣，通俗易懂。页面可爱清爽。首页主要是导航作用。首页制作时，时刻考虑着网页的基本原则：统一，连贯，分割，对比及是导航作用。首页制作时，时刻考虑着网页的基本原则：统一，连贯，分割，对比及和谐的原则，内容统一，都是为了主题服务，一个网站强调的就是一个整体，只有围和谐的原则，内容统一，都是为了主题服务，一个网站强调的就是一个整体，只有围绕一个统一的目标所

49、做的设计才是成功的；连贯，页面之间关系连贯，统成一体；每绕一个统一的目标所做的设计才是成功的；连贯，页面之间关系连贯，统成一体；每版内容都自成一体，颜色各异，便于浏览；整个网页有动有静，颜色不同，形成对比，版内容都自成一体，颜色各异，便于浏览；整个网页有动有静，颜色不同，形成对比，不呆板，富有生气；颜色各异，但又不同之中又相同，浑然一体。而且制作过程中，不呆板，富有生气；颜色各异，但又不同之中又相同，浑然一体。而且制作过程中，不忘以下原则：不忘以下原则：简洁实用简洁实用: : 这是非常重要的，网络特殊环境下，尽量以最高效率的方式将用户所这是非常重要的，网络特殊环境下，尽量以最高效率的方式将用户

50、所要想得到的信息传送给他就是最好的，所以要去掉所有的冗余的东西。使用方便要想得到的信息传送给他就是最好的，所以要去掉所有的冗余的东西。使用方便: :同第同第太原工业学院课程设计 19 一个是相一致的，满足使用者的要求，网页做得越适合使用，就越显示出其功能美；一个是相一致的，满足使用者的要求，网页做得越适合使用，就越显示出其功能美；页面用色协调，布局符合形式美的要求页面用色协调，布局符合形式美的要求: : 布局有条理，充分利用美的形式，是网页富布局有条理，充分利用美的形式，是网页富有可欣赏性，提高档有可欣赏性，提高档 次。当然雅俗共赏是人人都追求的。次。当然雅俗共赏是人人都追求的。利用我们所学的

51、框架集，制作更完美的页面。将动态网页与静态网页结合起来。利用我们所学的框架集，制作更完美的页面。将动态网页与静态网页结合起来。再后，调试过程，好多次本来在再后，调试过程，好多次本来在 dreamdream 里好好的，把字调的好好的，位置很对，可在里好好的，把字调的好好的，位置很对，可在浏览器里御览就出毛病了，不是靠上了，就是靠下了，很不老实，经过再三调试，整浏览器里御览就出毛病了，不是靠上了，就是靠下了，很不老实，经过再三调试，整理，加了好多表格，终于满意了，很是麻烦，想请问老师，为什么会出现这种情况啊，理，加了好多表格，终于满意了，很是麻烦，想请问老师，为什么会出现这种情况啊，还有怎么解决啊，不用这么反复调整的办法，还有什么好办法啊？还有怎么解决啊，