网页设计大作业——冯世勋

软件学院大作业任务书题 目： 个人主页 专 业： 电子商务 班 级： 电子商务102班 学 号： 8002310051 学生姓名： 冯世勋 完成人数： 起讫日期： 任课教师： 朱玮 职称： 讲师 部分管主任： 完成时间： 2011-12-15 目录说 明 第3页摘 要 第6页第一章引言 第8页第二章技术介绍 第9页第三章网站设计 第12页第四章网站运行 第37页参考资料 第42页说 明1. 本任务书由任课教师填写后，下达到学生。2. 任务完成后，任课教师需填写小结表。3. 任务书、学生成绩与学生完成后的大作业（纸质和电子两种）一并报送各教学研究部审核后转教务办。4. 另附一份全班大作业总结大作业的要求和内容：（包括题目选择范围、技术要求、递交时间、考核方法等）一、 内容要求总的页面是20个页面，内容主题不限，可以是体育，新闻，主页等等。二、 技术要求1、图文混排。2、通过表格对页面进行布局（包括表格修饰）。3、通过框架对页面进行布局（这里要包括页面链接）。4、通过层对页面进行布局。5、在页面中插入多媒体文件（三种方式）。6、走马灯效果（三种方式）。7、在页面中使用表单（包括文本框、密码框、文本域、下拉列表框、单选钮、复选框、提交按钮、 重置按钮等）8、使用css样式表美化页面。（使用三种方式运用CSS，使用标签样式和类样式）。9、通过js验证表单。完成页面之后再完成一个大作业报告（=20页）三、 质量要求必须在规定时间内按要求完成，页面质量符合课堂所讲内容要求，页面美观大方。如不符合要求者按不合格处理。四、 设计说明书在网页设计制作完成之后书写设计说明书（实验报告），按规定报告的格式书写。 教师小结：成绩： 教 师 签 名： 教研部负责人： 学生姓名： 冯世勋 个人主页摘要随着网络技术的不断发展与完善，每个公司都有了自己的网站，有些个人都有了自己的个人主页。在众多的网站中，人们说的现在不是有没有网站了，而是谁的网站更好操作，更好看。这就是对网页设计人员提出的一个新的考验。在这次设计中我仿照QQ空间的模板做了一个“个人主页”，其中主要的技术有：背景音乐，插入视屏，插入广告，图文混排，表格对页面进行布局，框架对页面进行布局，层对页面进行布局，走马灯效果，页面中使用表单（包括文本框、密码框、文本域、下拉列表框、单选钮、复选框、提交按钮、 重置按钮等），使用css样式表美化页面，通过js验证表单等等。经过本次实验个人觉得，一，务必重视基础知识的掌握。二，在本次实验中总有些单词记不住而让费时间找错，所以应熟记常见的单词。三，经过这次实验我许多常见的标签单词都记住了，所以要多多的练习，熟能生巧！关键词：图文混排，表格，框架，层，走马灯，表单，cssAbstractAlong with the development of network technology and perfect every company will have their own web sites, some people have their own personal homepage. In many of the web site, they say now is not have a website, but is the one who website better handling, looks better. This is for web design of the researchers propose a new test.In the design of the space I modelled on the QQ template made a personal homepage, of which the main technology is: background music, insert videos, insert advertising, graphic mix row, form on page layout, framework to page layout, layer to page layout, regimes effect, page using the forms (including text box, password box, text fields, drop-down list box, radio buttons, check box, submit button, reset button, etc), use CSS style sheets beautification page, through the js form of authentication and so on.After the experimental individuals feel, one, be sure to pay attention to the basic knowledge of master. Two, in this experiment will always remember some words and let the time-consuming barking up, so should remember what common words. Three, after the experiment many common words I tag all remember, must therefore of practice, practice makes perfect!Keywords: graphic mix row, form, frames, layer, regimes, the form, CSS 第一章 引言通过学习网页设计与布局这科目对网页有了很多的了解和认识，在百度里面搜所“网页设计”给它的定义是：网页设计网站是企业向用户和网民提供信息（包括产品和服务）的一种方式，是企业开展电子商务的基础设施和信息平台，离开网站（或者只是利用第三方网站）去谈电子商务是不可能的。企业的网址被称为“网络商标”，也是企业无形资产的组成部分，而网站是INTERNET上宣传和反映企业形象和文化的重要窗口。在想更多得想了解网页设计我就做了本次实验，这次试验是仿照QQ空间的排版做的。当点击个人主页这个页面进入，看到的是动态的“Simple Me在此 欢迎您的到来 ”紧接着下面是仿照QQ空间的导航。左边也是一个简单的导航链接，链接着：好友动态，与我有关，世勋微博，个人视频等等！例如：主页我是采用链接到QQ空间，个人档，留言板，日志，说说等等则是链接在本地的html中！在本次实验中用到了许多学到的知识点，html网页的文档结构，html文档及图像的排版，html里面的基本标签，html建立的超链接，html创建表格等等。在单独的页面里面，为了美化页面，所有的页面我都用了不同的背景图片。本次试验做了30个页面。第二章 技术介绍本实验主要是围绕个人主页设计布局，从基础知识的基本出发，做了30个页面，都是用页面及连接相互联系的！其中所涉及的主要技术有：1，图文混排，在设计个人主页中我简单的用了图文混排技术做了留言板页面，与我有关页面等等许多页面，图文混排技术在此网页里面起到基础的作用。其中文字混排的主要技术体现在文字排版中，就是将文字与图片混合排列，文字可在图片的四周、嵌入图片下面、浮于图片上方等，这样使得页面不再单调无味了。2，通过表格对页面进行布局（包括表格修饰），在布局个人主页中表格起到了导航不可替代的重要性。在此技术上我成功的做出了表格导航，表格修饰技术使得表格导航看上就像没有表格一样。在做好表格后，在每个里面都加了各自的图片，为了更美观，所需要的字我都写在图片里，这样的导航在简单上又不失美化。通过表格对页面进行布局（包括表格修饰）这技术主要体现在主页的导航里面，这样就可以使得主页看上去简单明了！3，通过框架对页面进行布局（包括页面链接），此技术在个人主页布局里面也是不可少的，没有它就不可能做出个人主页了。有了框架我把页面分成了三个部分，这样就可以好好地规划布局主页。在看似一个页面里却显示了三个部分，有了这个做基础，为下面的各个页面以及连接可以更好的布局，美化整个网站的结构！4，通过层对页面进行布局，在此技术上可以完成许多美化效果，CSS中的定位技术，在Dreamweaver中可对其进行可视化操作。层体现了网页技术从二维空间向三维空间的一种延伸。这样页面更生动，在页面布局时，层是不能少的，有了层的特点：重叠、便于移动、可设为隐藏等对页面的美化更是一个层次。在前面的基本知识做铺垫的同时加上通过层对页面进行布局让页面看地更是舒服。5，在页面中插入多媒体文件（三种方式），在此技术上让网页不在死板不在单调了，有了这技术可以在页面中插入背景音乐，插入背景图片，插入个人视屏等等。能更完整有序的表达作者想表达的，达到了眼，目，耳共用的效果，给人一种舒服的感觉。此技术我主要体现在音乐盒页面，个人视屏页面中。其它还有些简单的页面我也放了背景音乐，这些里面只是为了更完善的美化网页！6，走马灯效果（三种方式），此技术在欢迎语上我用到了三种，有左右一直摆动，这个在主页里面就可以看到。有从下到上不断的出现，这个在个人相册里面可以看到。还有一种在注册个人主页里面可以看到。这三种技术我分别用在了不同的页面里，这样我可以更好地表达每个页面的思想。当然也可以用这种技术链接广告，许多网站为了给自己网站有更好地发展，里面多多少少就有这些情况。7，在页面中使用表单（包括文本框、密码框、文本域、下拉列表框、单选钮、复选框、提交按钮、 重置按钮等），此技术我都用在了注册个人主页页面！许多网站里在注册该网站的用户时这些是不可以少的，文本框、密码框、文本域、下拉列表框、单选钮、复选框、提交按钮、 重置按钮等这些都有自己的重要性，不可代替！8，使用css样式表美化页面，（使用三种方式运用CSS，使用标签样式和类样式）。此技术可以让html更好的适应页面的美工效果，例如：它可以让单调的表格增加色调，用css标签让字体以及页面的颜色等发生变化。当然，这里是以html为基础提供丰富的格式化功能达到美化页面的效果。9，通过js验证表单，此技术在注册个人主页里面是不能少的，有了js验证表单可以更好的实现简单管理用户，和规范注册，例如：它在用户名，密码等等里面可以达到你预设的一些规范用户名及密码。js验证表单可以让注册后台系统更简单的管理，许多网站对于这种技术都是必用的。10，HTML文件的基础知识（很重要） （1）TML：Hyper Text Markup Language超文本标记语言 (2) 直接由浏览器解释执行，无须编译。 （ 3）语法结构：包括文档头部和文档主体。 下面是HTML代码的基本结构： 头部信息 文档主体，正文部分 11， 标签基础知识 1)用包围起来的代码2)包括单标签和双标签单标签 表示换行 表示插入一条水平线双标签 内容 例如：加粗文字3)标签的属性 属性之间没有顺序关系 属性值尽量用英文输入法下的全角引号包围。 SIZE：线的粗细 ALIGN：对齐方式 WIDTH：水平线的长度 4)重要的标签：头部标签，主体标签，图片标签，文字标签，字体标签，列表标签，表格标签，表单标签！12，其它基础知识,在页面中还有许多的基础知识和技术，在后面我会详细介绍各个技术的应用及代码的作用！第三章 网站设计 网站是企业向用户和网民提供信息（包括产品和服务）的一种方式，是企业开展电子商务的基础设施和信息平台，离开网站（或者只是利用第三方网站）去谈电子商务是不可能的。企业的网址被称为“网络商标”，也是企业无形资产的组成部分，而网站是INTERNET上宣传和反映企业形象和文化的重要窗口。本次“个人主页”充分利用导航与连接把页面的布局和排版做到了最佳！个人主页1，主体结构： 表格导航链接导航1. 个人主页2. 个人档3. 留言板4. 个人日志5. 音乐盒6. 个人相册7. 说说8. 了解更多1. 好友动态2. 与我有关3. 实名朋友4. 世勋微博5. 个人视屏6. 应用中心7. 注册主页8. 广告网站主要分两大类：一个是表格导航一个是链接导航，为了体现主页的个性特点，都增加了许多个性化的导航链接。2，详细网站分析： 打开“个人主页.html”出现三个部分，用代码; 这样就达到正顶上是表格导航，左边是链接导航，最后是显示的位置！如图：3.1显示（图3.1）在表格导航里可以链接到：a) 个人主页，体现主页。b) 个人档，体现出个人的档案，包含基本资料等。c) 留言板，在里面可以给主人留言，留下想说的话。d) 个人日志，里面有主人的所有日志，记录的点点滴滴 。e) 音乐盒，需要轻松一下时，打开音乐盒页面可以听到许多流行音乐。f) 个人相册，相片是定格美好的时刻，在这里可以回忆过去。g) 说说心情，每天都有不同想法和心情，这里大家都可以畅所欲言。h) 了解更多，综合许多链接就在这里，有许多的应，游戏。2.1单独的网页里面去但是显示却在第三部分里面显示。在链接导航里面又可以链接到：a) 好友动态，有关注的好友等一些动态及时显示。b) 与我有关，好友的留言及好友给主人的回复都在这里显示。c) 实名朋友，这里可以看到真实的朋友。d) 世勋微博，在微博里面可以和同样地好友一起交流话题。e) 个人视屏，展现自我，视频展现。f) 应用中心，轻松除了还有小游戏。g) 注册中心，看到这么个性的主页你想成为其中的一员就在这里注册。h) 广告1，2，3，43.表格导航 首先在这个页面中我用了代码Simple Me在此 欢迎您的到来 来完成动态的显示，也作为欢迎语！后是表格，在表格导航中我采用了border=0 来隐藏表格的各边，在用width=800 height=50与CSS等等设置了表格的属性。详细代码： Simple Me在此 欢迎您的到来 这样就显示出如图：3.2（图3.2）图中不难看出，第一个是插入了（个人主页），当点击这个“个人主页”时是进我自己的QQ空间，当然这个是要联网的，否则是无法显示的！第二个是插入了 （个人档），点击则进入了gerendang.html这个链接，此链接是个人档的介绍。个人档是由三个页面组成的，里面有个人档，最近的相册，和个人基本资料！个人档是一个小型的主页模式，我采用了框架也分了三部分，每部分都是独立的链接。在各个设置里类似主页的模式！在基本资料里面我用了一个图片，一些姓名，年龄，生日，血型，故乡，地址等等基本资料我都写在了图片上，这样我就可以简单的让一个页面显示我写好资料的图片了，这样既美观又方便了许多！代码： 个人资料 在最近更新的相册里面我用了表格，同样地我也影藏了表格的各个边，在插了自己的相片，为了美化页面每个我都用了背景图片，这样看上去就不单调无味了。代码断：Simple Me： img src=image/grd1.jpgwidth=110 height=80在里面的个人档里我显示的是自己的QQ空间的一些资料，我都是用截图的方式截了QQ空间的，有空间一些访问量，访问记录，最近访问好友，日志的数量说说的数量等等。代码断：个人档： img src=image/grd7.jpgwidth=210 height=266 img src=image/grd8.jpgwidth=210 height=266 最后在显示个人档时三个部分各自显示自己的内容，为了让那些内容能再规定的有限的空间里面显示我给它们都设置了些属性。这样给人一目了然的感觉！当然这是仿照QQ空间的个人档做的，没有QQ空间做的好是一定的了。如图：3.3（图3.3）第三个是插入了（留言板）点击这个则进入留言板页面，为了达到耳目同用的效果我给留言板增加背景音乐（）。进留言板后出现的是我自己的寄语，这个寄语也是写在图片里面的，当然为了与QQ空间偏差不是太大我在空间截过来的，在用标签使它居中。在就用到图文混排例如代码段： 第1578楼 2011-12-10 10:52:52 留言 来看看你哈，想死你了，知道不？哈哈哈哈 在这里我还设置了一些属性值，让它直接显示，这样类似空间的留言板以达到与QQ空间偏差不是太大的目的！如图：3.4（如图：3.4）第四个是（个人日志），点击进去后，我同样地为它加了背景音乐，为了让日志的字体好看些我用了来设置字体。因为日志标题和日志内容是不同的，我就用段落标签把日志的标题放在了主页面，所有的标题用了 链接了各自的子页面里！代码段： 转穿衣服的学问 转学做简历大二了，该学了 都昌话6级考试A 为了类似QQ空间我又在页面里面截了空间日志里面的最顶上的图片，把此图片放在了首位，这样看上去也美观，当然在这个页面的结尾也是一样的了，这些地方要是点击是不会到其他的页面里的了。在这个日志页面里我用了20个标题，链接了20个页面，但是这20个子页面做法类似，所以我就没有真的做了20个页面！如图：3.5（如图：3.5）在各自的子网页里面我为各个页面都加了不同的信纸作为背景图片，里面用换行与段落标签等排版文字。为了美观，里面的标题字体和颜色以及正文的字体颜色都是不同的！代码：转穿衣服的学问抢眼的小挎包如图：3.6（如图：3.6）第五个是（音乐盒），在这个页面里我结合了插入背景音乐的技术，在简单的技术基础上体现个性，在这里可以让用户轻松，放松心情，代码段：BODY background=image/yinyue1.jpg S.H.E-Super Star冷漠-小三当点进出后，在必须地背景图片上给用户一种视觉听觉并用的效果！如图：3.7（图：3.7）第六个是（个人相册），为了体现网站的本质是个性化为用户提供多效果体验，在这个页面里采用了表格展示图片的方法，代码段：Simple Me： img src=image/grd1.jpgwidth=110 height=80 img src=image/grd2.jpgwidth=110 height=80 img src=image/grd3.jpgwidth=110 height=80 img src=image/grd4.jpgwidth=110 height=80 img src=image/grd5.jpgwidth=110 height=80达到下面图中的效果如图：3.8（图：3.8）个人相册在设计时打算用表格加链接，但是工作量可能很大，所以就没采用，但是以后我会改善这个页面，毕竟是我的第一个网站，自己做的。第七个是（说说心情），这个页面本身的作用是提供一个抒发心情的平台，在这里我用到了图文混排技术，这样就更好地把一个人的说说的主页头像显示出来，旁边则是其心情抒发的内容，代码段： 来看看你哈，想死你了，知道不？哈哈哈哈 达到了图3.9（图3.9）在说说页面里，我还加了背景音乐！第八个是（了解更多）在这里面我利用了表格技术。里面本应该是小型游戏等。但是我只是加了些链接，它类似导航。代码段： 这里实现的效果如图：3.10（图：3.10）到这里表格导航就介绍完了，这些给整个网站提供了个性的描述！4，链接导航 这里我主要技术当然是连接了，看代码段就知道了: 好友动态与我有关实名朋友世勋微博这样就达到了图4.1的效果（图4.1）在这个导航里面有许多技术，其中主要技术有，视屏的插入，表单的验证等等。先介绍第一个（好友动态），在前面就介绍到，好友动态主要作用是展现好友一些心情说说，日志等一些动态，在这里我采用同图文混排把其放在一起展示，这样看似乱乱的却一条一条的展现出来了。代码段： Simple Me ：某男看同事将情人电话备注改成10086后，多次紧急情况脱险，便也效仿。一日晚，该男第一次在妻子面前接到情人电话，还故意让妻子看来电显示：10086。看完,妻子立刻将电话抢来，将电话中正撒娇的女人一顿骂,然后骂丈夫：“老娘傻啊？你一联通卡10086给你打电话，串门走亲戚啊！”。起床咯。 10:06 通过手机QQ空间 赞 评论 转发显示如图：4.2（图：4.2）第二三四个，这些所用到的技术在上面都说了多次，在这里就不在多说了。里面的代码段都类似，不需要在此呈献了，现在直接介绍主要的技术。第五个，“个人视屏”在这里能用简单的页面展示出强大的内容，里面我用到了多媒体技术插入视屏，还有一些属性的标签设置，胆码段：最终显示如图：4.3（图：4.3）在视屏页面里，为了修饰视屏的歌手，我还增加了歌手的一些信息！如图：（图：4.4）第六个不介绍第七个是“注册主页”，在这里面有JS表单验证，代码段：function checkForm()if(checkUserName()&checkPass()&checkDate()/增加判断年份的输入和范围return true;elsereturn false;/用户名非空验证function checkUserName()var name = document.myform.txtUser;if(name.value=)alert(请输入用户名);name.focus();return false; return true;/密码非空验证+确认验证function checkPass()var pass=document.myform.txtPass;var rpass=document.myform.txtRPass;if(pass.value=)alert(密码不能为空);pass.focus();return false;/确认密码的验证if(rpass.value!=pass.value)alert(确认密码与密码输入不一致);rpass.select();return false;return true;/验证出生年份function checkDate()var year = document.myform.year;var time=new Date();if(year.value=)/非空验证alert(请输入出生年份);year.focus();return false;else if(isNaN(year.value)/是否是数字验证alert(请输入数字);year.focus();return false;else if(parseInt(year.value)time.getYear()/输入范围验证alert(年份范围从1949-+time.getYear()+年);year.select();return false;elsereturn true;如图4.5（图4.5）最后是广告，在网站里面这个几乎都有，当然，在这里我也加了一个广告，代码段就不些了显示如图：4.6（图：4.6）介绍完了网站设计后，其总体显示如图:4.8(图:4.8)第四章 网站运行情况 1，遇到的问题 在设计此网站中当然也遇到了许多的问题，例如：1，我在解决插入视频里就弄了许久，在网上找到代码这是没用的，我还要查找教材，理解代码。,2，在插入多个音乐时怎样让其不同时播放？3，在设置框架时怎样布局排版。4，在在播放背景音乐时不能正常播放?5，在视屏里面不能正常显示画面等等。还有许多小问题，例如：相对路径和绝对路径的问题。 2，总结经过这次试验我认为一个好的学习方法可以做到事半功倍的效果，我也总结出来一套学习的方案（ 1）务必重视基础的掌握。对于学习基础是每门科目的核心，基础知识直接影响到课程掌握的程度。个人认为在网页设计里面基础核心知识有：A, 建立站点，本地站点和远程站点的概念。B, 定义站点：设置“站点名称”：定义Dreamweaver站点，命名为“Myweb。设置本地根文件夹：本地根文件夹指定为root文件夹。设置首页：设置首页为index.htm。C, 有关HTML文件的基础知识D, 基本网页设计 设置