网页设计课程报告
- 格式:doc
- 大小:3.19 MB
- 文档页数:13
课程设计报告(web前端开发)一、课程目标知识目标:1. 学生能理解并掌握HTML5、CSS3和JavaScript的基础知识,了解网页的基本结构和常见的前端开发技术。
2. 学生能了解并运用响应式设计原理,实现不同设备上的网页适配。
3. 学生掌握DOM操作,能实现动态交互效果和数据绑定。
4. 学生了解前端框架Vue.js的基本使用,能运用其进行组件化和模块化开发。
技能目标:1. 学生能运用所学知识独立完成静态网页的设计与制作,具备基本的网页布局能力。
2. 学生能通过JavaScript和框架实现简单的网页交互功能,提高用户体验。
3. 学生具备团队协作能力,能在项目中发挥自己的专长,与他人共同完成项目开发。
情感态度价值观目标:1. 培养学生对前端开发的兴趣和热情,激发其主动学习和探索的精神。
2. 培养学生具备良好的编程习惯,注重代码规范和性能优化。
3. 培养学生面对困难和挑战时,保持积极心态,善于寻求解决方案。
4. 培养学生具备合作精神,尊重他人意见,学会倾听和沟通。
课程性质:本课程为实践性较强的课程,注重培养学生的动手能力和实际项目经验。
学生特点:学生具备一定的计算机基础,对前端开发有一定了解,学习积极性较高。
教学要求:结合实际项目案例,以任务驱动的方式进行教学,注重理论与实践相结合,提高学生的实际操作能力。
同时,关注学生的个体差异,进行差异化教学,确保每个学生都能在课程中取得进步。
在教学过程中,及时评估学生的学习成果,调整教学策略,以达到课程目标。
二、教学内容1. 网页基础知识- HTML5基本标签、属性和文档结构- CSS3选择器、样式属性、盒模型和布局- 网页色彩、字体和图标设计2. 响应式设计- 媒体查询和设备适配- 弹性布局和网格布局- 移动端和桌面端页面优化3. JavaScript基础- 数据类型、运算符、流程控制- 函数、对象和数组- DOM操作、事件处理和表单验证4. 前端框架Vue.js- Vue.js基本概念、生命周期和指令- 组件化开发和模块化设计- 数据绑定、计算属性和侦听器5. 项目实战- 网页设计与制作:静态页面布局、样式设计、交互功能实现- 前端工程化:版本控制、构建工具、性能优化- 团队协作:项目分工、沟通与协作、代码审查教学内容安排与进度:第一周:网页基础知识学习第二周:响应式设计原理与实践第三周:JavaScript基础及DOM操作第四周:Vue.js框架学习第五周:项目实战与前端工程化第六周:团队协作与项目总结教材章节关联:《HTML5与CSS3权威指南》第1-5章、第7-9章《JavaScript高级程序设计》第1-6章、第13章《Vue.js实战》第1-7章教学内容确保科学性和系统性,结合实际案例,使学生掌握前端开发的核心知识,培养其解决实际问题的能力。
web网页设计课程设计报告一、教学目标本课程旨在通过学习,使学生掌握Web网页设计的基本原理和方法,能够使用HTML、CSS等工具进行网页设计与制作,培养学生的创新意识和实践能力,提高学生运用信息技术解决实际问题的能力。
知识目标:理解Web网页设计的基本概念,掌握HTML、CSS等网页设计工具的使用方法。
技能目标:能够独立完成简单的网页设计与制作,具备一定的网页美工能力。
情感态度价值观目标:培养学生对信息技术的好奇心和创新意识,提高学生运用信息技术解决实际问题的能力,使学生认识到Web网页设计在现代社会的重要性。
二、教学内容本课程的教学内容主要包括HTML、CSS和网页设计的基本原理。
1.HTML:介绍HTML的基本结构,标签的使用,图片、链接和音频视频嵌入等。
2.CSS:介绍CSS的基本语法,选择器,盒模型,布局和样式。
3.网页设计:介绍网页设计的基本原则,色彩、字体和布局的设计方法。
三、教学方法本课程采用讲授法、案例分析法和实验法相结合的教学方法。
1.讲授法:用于讲解基本概念、原理和工具的使用方法。
2.案例分析法:通过分析实际案例,使学生更好地理解和掌握网页设计的方法和技巧。
3.实验法:通过实际操作,使学生掌握HTML、CSS等工具的使用,培养学生的实践能力。
四、教学资源1.教材:选用权威、实用的教材,如《Web网页设计基础》等。
2.参考书:提供相关的参考书籍,如《HTML与CSS入门经典》等。
3.多媒体资料:制作精美的PPT,提供视频教程、在线案例等。
4.实验设备:提供足够的计算机设备,安装有相关的软件,如SublimeText、Visual Studio Code等。
五、教学评估本课程的评估方式包括平时表现、作业和考试三个部分,各部分所占比例分别为40%、30%和30%。
1.平时表现:通过课堂参与、提问、小组讨论等方式评估学生的学习态度和积极性。
2.作业:布置适量的作业,评估学生的理解和应用能力。
网页课程设计结果及分析一、课程目标知识目标:1. 让学生掌握网页设计的基本概念,了解网页的构成元素和结构。
2. 使学生了解HTML和CSS的基本语法,能运用其进行简单网页的编写。
3. 让学生掌握网页布局的基本方法,如使用Bootstrap框架进行响应式设计。
技能目标:1. 培养学生运用HTML和CSS编写和美化网页的能力。
2. 培养学生运用网页设计工具(如Dreamweaver)进行网页创作的技能。
3. 培养学生解决实际网页设计问题的能力,如调试代码、优化页面加载速度等。
情感态度价值观目标:1. 激发学生对网页设计的兴趣,培养其主动学习的态度。
2. 培养学生的团队协作意识,使其学会与他人共同解决问题。
3. 引导学生关注网页设计的社会价值,如用户体验、信息传播等,培养其社会责任感。
课程性质分析:本课程为信息技术课程,旨在让学生掌握网页设计的基本知识和技能,培养其创新意识和实践能力。
学生特点分析:六年级学生具有一定的计算机操作基础,对新事物充满好奇,喜欢动手实践,但注意力容易分散,需要教师引导。
教学要求分析:1. 注重理论与实践相结合,让学生在实践中掌握知识。
2. 采用任务驱动法,激发学生的学习兴趣和积极性。
3. 增加课堂互动,培养学生的团队协作能力和沟通能力。
二、教学内容1. 网页设计基本概念:网页、网站、URL、域名等。
2. 网页构成元素:文本、图片、链接、表格、表单等。
3. HTML基础:标签、属性、文本格式化、链接、图片、列表、表格等。
4. CSS基础:选择器、属性、文本样式、背景样式、布局样式、响应式设计等。
5. 网页布局方法:使用Bootstrap框架进行响应式布局。
6. 网页设计工具:Dreamweaver软件的基本操作和运用。
7. 网页调试与优化:代码调试、页面加载速度优化、搜索引擎优化等。
教学大纲安排:第一周:网页设计基本概念,HTML基础。
第二周:CSS基础,网页构成元素。
第三周:网页布局方法,使用Bootstrap进行响应式设计。
一、引言随着互联网技术的飞速发展,网页设计已成为当今社会最热门的行业之一。
为了提高自身技能,我参加了为期一个月的网页设计实训课程。
在此期间,我学习了大量的网页设计知识,现将实训过程中的知识点总结如下。
一、HTML基础知识1. HTML文档结构:了解HTML文档的基本结构,包括文档声明、头部、主体等部分。
2. 基本标签:掌握常用标签的语法和用法,如标题、段落、列表、链接、图片等。
3. 表单元素:了解表单元素的使用方法,如输入框、下拉菜单、单选框、复选框等。
4. HTML5新特性:学习HTML5新标签和特性,如canvas、video、audio等。
二、CSS样式设计1. CSS基础语法:掌握CSS的语法规则,包括选择器、属性、值等。
2. 布局技术:学习常用的布局技术,如浮动、定位、网格布局等。
3. 响应式设计:了解响应式设计的原理和实现方法,以适应不同设备。
4. 常用CSS框架:学习常用的CSS框架,如Bootstrap、Foundation等。
三、JavaScript编程1. 基本语法:掌握JavaScript的基本语法,包括变量、数据类型、运算符、函数等。
2. DOM操作:学习如何操作网页文档对象模型(DOM),如获取元素、修改属性、添加事件等。
3. 事件处理:了解事件处理机制,掌握常用事件,如鼠标事件、键盘事件等。
4. 常用库和框架:学习常用的JavaScript库和框架,如jQuery、Angular、React等。
四、网页设计工具1. Dreamweaver:掌握Dreamweaver的基本操作,如创建网站、编辑HTML、CSS、JavaScript等。
2. Photoshop:学习Photoshop的基本操作,如图像处理、切图、设计等。
3. Sublime Text:了解Sublime Text的编辑功能和快捷键。
4. Git:学习使用Git进行版本控制,提高代码管理能力。
五、网页设计规范1. 界面布局:了解网页界面布局的规范,如页面宽度、高度、间距等。
网页设计与制作报告书课程名称:网页设计与制作报告题目:个人主页专业班级:软件工程(服务外包)114-4学号:************姓名:肖腾威指导教师:***摘要:在Internet飞速发展的今天,互联网成为人们快速获取、发布和传递信息的重要渠道,它在人们政治、经济、生活等各个方面发挥着重要的作用。
因此网站建设在Internet应用上的地位显而易见,它已成为政府、企事业单位信息化建设中的重要组成部分,从而倍受人们的重视。
关键字:网页制作;制作方法;设计要素;网页测试一、网页制作开发背景Dreamweaver以其功能强大、容易上手、界面亲切而著称。
它采用所见即所得的方式编辑网页,利用它可以轻松的组织、编辑网页并将其发布到指定的站点上,而且在发布之后还能对更新情况进行监控以更新站点的内容。
现在流行的网页制作软件有很多,如Macromedia 公司的Dreamweaver、微软公司的Dreamweaver、还有Adobe Pagemill 3.0--制作多框架,表单和Image map 图像的网页工具、Netscape等等。
其中Dreamweaver更以其功能强大、容易上手、界面亲切而著称。
它采用所见即所得的方式编辑网页,利用它可以轻松的组织、编辑网页并将其发布到指定的站点上,而且在发布之后还能对更新情况进行监控以更新站点的内容。
工具准备好了,可根据你的个人喜好来选择一些素材,如图片、喜欢的文章等。
二、网页制作设计技巧首先,我们来看一下创建一个只包含一个网页的站点。
选择“文件”菜单的“新建”选项,单击“站点”命令,这时新建站点对话框就弹出来了,在“指定新站点位置”文本框中输入新站点的位置,单击“只有一个网页的站点”图标,单击“确定”按钮。
这就建立好站点了,我们现在来看一下新的站点里有什么,单击“视图”工具条的“文件夹”按钮。
在文件夹列表里有一个网页文件,名字叫做“index.htm”。
我们知道,每一个站点都要有一个主页,这个主页也是一个网页文件。
《网站制作》课程设计系别:信息技术系专业:班级:姓名:学号:指导老师:李枫完成日期:2015年07月9日目录《网站制作》课程设计 (1)目录 (2)一、设计任务与要求 (3)课设目的 (3)课设内容 (3)具体要求 (3)设计环境 (3)二、设计方案 (3)三.实现过程 (3)四、心得体会 (17)五、参考资料 (18)六、附录 (19)1、网站效果图 (19)2、网站中各网页屏幕截图 (19)一、设计任务与要求课设目的1、复习巩固网站设计与制作的基础知识:HTML、CSS和JS,进一步加深对Photoshop制作网页效果图、Dreamweaver布局网页等技术的理解和掌握,培养学生策划和制作商业网站的实践能力。
2、训练和培养学生获取信息和处理信息的能力,充分培养和提高学生的动手能力,学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、音视频资料、flash动画和网页特效等,提高学生的美工设计能力。
3、课程设计为学生提供了一个既动手又动脑,独立实践的机会,将课本上的理论知识和实际有机的结合起来,锻炼学生的分析解决实际问题的能力。
课设内容针对目前互联网上的网站制作背景和需求,策划、设计与制作一个完整的商业网站。
具体网页的内容自拟,但以下网站主题可供参考、选择:1、图书销售网站2、学校网站3、旅游网站4、摄影网站5、公司宣传网站6、驾校网站7、精品课程网站8、婚庆网站9、团购网站10、政府网站……具体要求1、动手制作网页之前:必须认真做好网站的需求分析,包括市场调查,定位网站目的,策划好网站的主题及功能定位,创意出网站的风格和亮点,确定网页色彩基调。
图1 网站结构图 规划好网站的风格和结构,网站主要内容及板块,各板块的具体内容及功能。
分析出“网站层次结构图”、 “网页版面设计”,以及“网站策划方案”。
2、创建完善的目录结构:站点文件夹采用英文单词命名,站点文件夹中所包含文件夹:images (存放图片文件)flash (存放动画文件)css (存放CSS 样式表文件)js (存放JS 脚本文件)other (存放其它文件)源文件 (存放自己设计的PS 源文件、Flash 源文件)首页命名为index.html ,其余文件全部用英文命名3、制作网页前,收集好所需的文字资料、图像资料、网页特效。
一、引言课程设计是一块“试金石”,是加深对自我能力认识的重要途径。
大学的学习基本上都是理论的接受,而缺少能力的熟练与加强,我们缺少的并不是知识的储备,而是能力的积蓄。
但由于大学特殊的学习模式和环境,缺少实际情景的见证和实践活动的参与,同学之间缺乏必要的交流和比对,使得我们很多时候很难对自身的能力有明晰的认识,能力缺陷往往被遮蔽起来。
而课程设计“前所未有”地考验着我们的知识迁移和运用能力、适应环境的能力、应对突发事件的能力以及如何处理人际关系等各方面的能力,为我们提供了不可多得的见证的机遇和平台。
通过这次课设,我们可以新的思考维度有效发现自己能力上的缺陷。
综合运用所学理论知识、方法和技能,开展实际工作,巩固专业技能,培养和强化社会沟通能力;树立新的发展起点和目标,通过课设,认识社会的需要,发现自身的差距,培养面对现实的正确态度和独立分析解决问题的基本能力;培养良好的职业精神,适应毕业以后的实际工作需求。
二、课程设计目的掌握HTML格式语言,能使用网页设计工具,理解动态页面技术的工作原理三、课程设计任务(1)用HTML或网页设计工具设计网页(2)用IE浏览器浏览所设计的网页,要求页面美观,包含常见的HTML格式元素(3)包含动态页面技术(有脚本代码或后台逻辑代码)四、设计方案选择:选择动态页面和静态页面相结合,取长补短。
设计分工:谷加林:主页、留言板、主页动态效果的代码编写协助所有组员完成代码的编写杜春吉:主页设计、留言板设计、总体排版、协助所有组员完成设计。
蔡旺:注册网页代码编写和学校风貌网页设计及相关资料收集处理。
姜文粹:登录网页代码编写和学校简介网页设计及协助素材收集整理。
五、具体设计内容作用:美化网站,提高网页的浏览效率,页面以简单风格为主,背景以白色为主。
页面右上角边有网站导航条,背景以半透明白色为主。
冲该页面可以看出,该网站主要是宣传学校,所以要简洁大方,不要太花哨。
界面如图所示主页面部分代码如下:头部<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>南京工程学院欢迎您</title><link type="text/css" rel="stylesheet" href="css/base.css" /><link type="text/css" rel="stylesheet" href="css/style.css" /><script type="text/javascript" language="javascript" src="js/jquery-1.7.2.min.js"></script><script type="text/javascript" language="javascript" src="js/common.js"></script><script type="text/javascript" language="javascript" src="js/flash.js"></script><script type="text/javascript" language="javascript" src="js/scroll.js"></script></head><body><div style="border-top:6px solid #128be9;"></div><div class="wrap"><!--header--><div class="header clearfix"><div class="header-a fl"><a href="#" class="clearfix"><img src="images/logo.jpg" alt="#" width="140" height="140" class="fl" /><img src="images/logo22.jpg" alt="#" width="211" height="76" class="fr" style="margin-top:25px;margin-left:25px;"/></a></div><div class="header-b fr" style="margin-top:30px;"><ul class="clearfix"><li class="fl"><a href="index.html" class="header-bb">网站首页<p>home</p></a></li><li class="fl"><a href="about.html">学校概况<p>about</p></a></li><li class="fl"><a href="news.html">新闻资讯<p>news</p></a></li><li class="fl"><a href="views.html">风貌展示<p>views</p></a></li><li class="fl"><a href="#">招贤纳士<p>join us</p></a></li><li class="fl"><a href="team.html">小组介绍<p>connect</p></a></li></ul></div> //导航菜单</div><!--index--><div class="index clearfix"><div class="flash tc"><ul>/div><script type="text/javascript">$(document).ready(function(){$(".scroll").imgscroll({speed: 40, //图片滚动速度amount: 0, //图片滚动过渡时间width: 1, //图片滚动步数dir: "left" // "left" 或"up" 向左或向上滚动});});</script><div style="border:4px solid #CCC;margin-top:50px;"></div> </div></div><!--friendlinked--><div class="index-fri"><ul class="clearfix"><li class="fl"><a href="#">友情链接</a></li><li class="fl"><a href="#">友情链接</a></li><li class="fl"><a href="#">友情链接</a></li><div class="footer"><a href="#">网站首页</a>|<a href="#">学校概况</a>|<a href="#">新闻资讯</a>|<a href="#">风貌展示</a>|<a href="#">在线留言</a>|<a href="#">人才招聘</a>|<a href="#">联系我们</a><p>学校地址: 江宁区科技园弘景大道1号</p></div></div></div></body></html>Flash—js//首页焦点图特特效$(function() {var sWidth = $(".flash").width(); //获取焦点图的宽度(显示面积)var len = $(".flash ul li").length; //获取焦点图个数var index = 0;var picTimer;//以下代码添加数字按钮和按钮后的半透明长条var btn = "<div class='btn'>";for(var i=0; i < len; i++) {btn += "<span>" + "</span>";}btn += "</div>"$(".flash").append(btn);$(".flash .btnBg").css("opacity",0.5);//为数字按钮添加鼠标滑入事件,以显示相应的内容$(".flash .btn span").mouseenter(function() {index = $(".flash .btn span").index(this);showPics(index);}).eq(0).trigger("mouseenter");//本例为左右滚动,即所有li元素都是在同一排向左浮动,所以这里需要计算出外围ul元素的宽度$(".flash ul").css("width",sWidth*len);//鼠标滑上焦点图时停止自动播放,滑出时开始自动播放$(".flash").hover(function() {clearInterval(picTimer);},function() {picTimer = setInterval(function() {showPics(index);index++;if(index == len) {index = 0;}},3000); //此3000代表自动播放的间隔,单位:毫秒}).trigger("mouseleave");//显示图片函数,根据接收的index值显示相应的内容function showPics(index) {var nowLeft = -index*sWidth; //根据index值计算ul元素的position$(".flash ul").stop(true,false).animate({"left":nowLeft},500); //通过animate()调整ul元素滚动到计算出的position$(".flash .btn span").removeClass("on").eq(index).addClass("on"); //为当前的按钮切换显示效果}});Scroll--js//图片滚动调用方法imgscroll({speed: 30,amount: 1,dir: "up"});$.fn.imgscroll = function(o){var defaults = {speed: 40,amount: 0,width: 1,dir: "left"};o = $.extend(defaults, o);return this.each(function(){var _li = $("li", this);_li.parent().parent().css({overflow: "hidden", position: "relative"}); //div_li.parent().css({margin: "0", padding: "0", overflow: "hidden", position: "relative", "list-style": "none"}); //ul_li.css({position: "relative", overflow: "hidden"}); //liif(o.dir == "left") _li.css({float: "left"});//初始大小var _li_size = 0;for(var i=0; i<_li.size(); i++)_li_size += o.dir == "left" ? _li.eq(i).outerWidth(true) : _li.eq(i).outerHeight(true);//循环所需要的元素if(o.dir == "left") _li.parent().css({width: (_li_size*3)+"px"});_li.parent().empty().append(_li.clone()).append(_li.clone()).append(_li.clone());_li = $("li", this);//滚动var _li_scroll = 0;function goto(){_li_scroll += o.width;if(_li_scroll > _li_size){_li_scroll = 0;_li.parent().css(o.dir == "left" ? { left : -_li_scroll } : { top : -_li_scroll });_li_scroll += o.width;}_li.parent().animate(o.dir == "left" ? { left : -_li_scroll } : { top : -_li_scroll }, o.amount);}//开始var move = setInterval(function(){ goto(); }, o.speed);_li.parent().hover(function(){clearInterval(move);},function(){clearInterval(move);move = setInterval(function(){ goto(); }, o.speed);});});};网站简介作用:介绍网站概况,用文字介绍网站战略、业务、团队、案例的具体情况。
实验报告学号: 0701********专业: 计算机科学与技术班级:07计科2班姓名: 张兆民题目: 网页设计与制作指导教师:郭胜设计时间:2010年12月14日目录一课程设计目的 ............................................二、课程设计题目 (2)三、课程设计要求 (2)四、需求分析 (2)五、源代码及截图 (2)六、参考资料 (25)七、设计总结 (25)实验内容一、课程设计的目的本课程的设计目的是通过实践使同学们对技术有个全面的了解,通过这次综合训练,以便能较全面地理解、掌握和综合运用所学的知识。
结合具体的开发案例,理解并初步掌握运用Visual Studio 2005 开发工具进行网页开发的方法;了解网页设计制作过程。
了解和熟悉网页设计的基础知识和实现技巧。
根据题目的要求,给出网页设计方案,可以按要求,利用合适图文素材设计制作符合要求的网页设计作品。
二、课程设计题目网页设计与制作——登陆系统三、课程设计要求根据所选择的主题,设计相关的网页,要求用技术做网页。
要求连数据库,实现基本功能。
四、需求分析选定主题,确定题目之后,在做整个网站之前对网站进行需求分析。
首先,做好需求调研。
调研的主要方式是在图书馆里翻阅相关书籍。
调研内容如下:1、网站当前以及日后可能出现的功能需求。
2、对网站的性能(如访问速度)的要求和可靠性的要求。
3、确定网站维护的要求。
4、网站的实际运行环境。
5、网站页面总体风格以及美工效果。
6、主页面和次级页面数量等。
7、内容管理及录入任务的分配。
8、项目完成时间及进度。
然后,调研结束之后对整个网站进行功能描述,并对网站进行总体规划,接着逐步细化。
五、网站源代码(1)登录界面:前台设计代码:Login.aspx<%@Page Language="C#"AutoEventWireup="true"CodeFile="login.aspx.cs"Inherits="login" %><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head runat="server"><title>无标题页</title><script language="javascript"type="text/javascript">// <!CDATA[function TABLE1_onclick() {}// ]]></script></head><body><form id="form1"runat="server"><div><div style="text-align: center"><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><table border="1"cellpadding="1"cellspacing="1"style="border-right: #ff0099 thick double; border-top: #ff0099 thick double; border-left: #ff0099 thick double; border-bottom: #ff0099 thick double"id="TABLE1"onclick="return TABLE1_onclick()"><tr><td colspan="3"style="background-image: url(img/0.jpg); background-color: #ffff66; height: 71px;"><br/><span style="color: #0000ff">设计者:张兆民<br/><strong><span style="font-size: 16pt; color: #ff0000;"></span></strong></span><br/><br/><br/><br/><br/> <asp:Label ID="Label1"runat="server"Font-Bold="True" Font-Size="X-Large"ForeColor="Red"Text="输入密码和用户名"></asp:Label> <br/></td></tr><tr><td colspan="3"style="height: 23px"><span style="color: #ffff00"><span style="color: #0000ff"> 用户登陆</span></span> <asp:TextBox ID="txtUser"runat="server"Width="143px"></asp:TextBox></td></tr><tr><td colspan="3"><span style="color: #0000cc">用户密码</span> <asp:TextBox ID="txtPass"runat="server"TextMode="Password"Width="129px"></asp:TextBox></td></tr><tr><td colspan="3"> .<asp:Button ID="Button1"runat="server"Text="注册"OnClick="Button1_Click"ForeColor="Red"/> <asp:Button ID="Button2"runat="server"OnClick="Button2_Click"Text="登陆"ForeColor="Red"/> <asp:Button ID="Button3"runat="server"Text="重置"OnClick="Button3_Click"ForeColor="Red"/></td> </tr><tr><td colspan="3"style="text-align: center; height: 99px; background-color: #ccffff;"><strong><span style="font-size: 32pt; color: #ff0000">员工管理系统</span></strong></td></tr></table><br/><br/></div></div></form></body></html>后台功能代码:Login.aspx.csusing System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partial class login : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){}protected void Button2_Click(object sender, EventArgs e){string username = txtUser.Text.Trim();string pwd = txtPass.Text.Trim();if (username == "张兆民" && pwd == "123456")Response.Redirect("succeed.aspx?uid="+txtUser.Text+"&txtPass="+txtPass.Text+"&txtUser="+txtU ser.Text);else{Label1.Text = "用户名或者密码有误!请重新输入!";}}protected void Button3_Click(object sender, EventArgs e){txtUser.Text = "";txtPass.Text = "";}protected void Button1_Click(object sender, EventArgs e){Response.Redirect("Default.aspx");}}截图:(2)新用户注册表界面:前台设计代码:Default.aspx<%@Page Language="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head runat="server"><title>无标题页</title><script language="javascript"type="text/javascript">// <!CDATA[// ]]></script></head><body style="background-color: #ffffff"><form id="form1"runat="server"><div><div style="text-align: center; border-top-style: double; border-right-style: double; border-left-style: double; border-bottom-style: double;"><br/><br/><br/><br/><table style="border-left-color: #66ff66; border-bottom-color: #66ff66;border-top-style: solid; border-top-color: #66ff66; border-right-style: solid;border-left-style: solid; border-right-color: #66ff66; border-bottom-style: solid; text-align: left;"id="TABLE1"onclick="return TABLE1_onclick()"><tr><td style="width: 191px"></td><td style="width: 468px; text-align: justify;"> <span style="color: #ff00ff"> <br/><strong> 新用户注册表</strong> <br/></span></td></tr><tr><td colspan="2"style="border-left-color: #ffccff; border-bottom-color: #ffccff;border-top-style: double; border-top-color: #ffccff;border-right-style: double;border-left-style: double; height: 28px; text-align: left;border-right-color: #ffccff;border-bottom-style: double"><asp:Label ID="Label2"runat="server"Text="请输入您的用户名"></asp:Label></td></tr><tr><td colspan="2"style="border-left-color: #ffccff; border-bottom-color: #ffccff;border-top-style: double; border-top-color: #ffccff;border-right-style: double;border-left-style: double; height: 64px; text-align: left;border-right-color: #ffccff;border-bottom-style: double"><strong style="border-left-color: #ffccff; border-bottom-color:#ffccff; border-top-color: #ffccff; border-right-color: #ffccff"> *用户名 </strong><asp:TextBox ID="userName"runat="server"style="border-left-color: #ff0066; border-bottom-color: #ff0066; border-top-style: dashed; border-top-color: #ff0066; border-right-style: dashed; border-left-style: dashed; border-right-color: #ff0066;border-bottom-style: dashed"></asp:TextBox><br/></td></tr><tr><td style="border-left-color: #ffccff; border-bottom-color: #ffccff; border-top-style: double; border-top-color: #ffccff; border-right-style: double;border-left-style: double; height: 22px; border-right-color: #ffccff; border-bottom-style: double; text-align: left;"colspan="2"><asp:Label ID="Label3"runat="server"Text="请填写安全密码"></asp:Label></td></tr><tr><td colspan="2"style="border-left-color: #ffccff; border-bottom-color: #ffccff;border-top-style: double; border-top-color: #ffccff;border-right-style: double;border-left-style: double; height: 61px; text-align: left;border-right-color: #ffccff;border-bottom-style: double"><strong style="border-left-color: #ffccff; border-bottom-color:#ffccff; border-top-color: #ffccff; border-right-color: #ffccff"><br/> *登陆密码 </strong><asp:TextBox ID="Pwd"runat="server"style="border-left-color: #ff0066; border-bottom-color: #ff0066; border-top-style: dashed; border-top-color: #ff0066;border-right-style: dashed; border-left-style: dashed; border-right-color: #ff0066;border-bottom-style: dashed"TextMode="Password"></asp:TextBox></td></tr><tr><td colspan="2"style="height: 22px; text-align: justify"><strong style="border-left-color: #ffccff; border-bottom-color:#ffccff; border-top-color: #ffccff; border-right-color: #ffccff"> *性别</strong> <asp:RadioButton ID="male"runat="server"Checked="True"GroupName="male"Text="男"/> <label for=male></label> <asp:RadioButton ID="female"runat="server"GroupName="male"Text="女"/></td></tr><tr><td style="text-align: justify; height: 26px;"colspan="2"><strong style="border-left-color: #ffccff; border-bottom-color:#ffccff; border-top-color: #ffccff; border-right-color: #ffccff"> *真实姓名 </strong><asp:TextBox ID="RealName"runat="server"style="border-left-color:#ff0066; border-bottom-color: #ff0066; border-top-style: dashed; border-top-color: #ff0066; border-right-style: dashed; border-left-style: dashed; border-right-color: #ff0066;border-bottom-style: dashed"></asp:TextBox></td></tr><tr><td style="border-left-color: #ffccff; border-bottom-color: #ffccff; border-top-style: double; border-top-color: #ffccff; border-right-style: double;border-left-style: double; text-align: center; border-right-color: #ffccff; border-bottom-style: double;"colspan="2"rowspan="3"> <br/> 留言板 <br/><br/><asp:TextBox ID="TextBox1"runat="server"Height="80px"Width="250px"></asp:TextBox><br/><br/><asp:CheckBox ID="agree"runat="server"Text="我已经看过并同意(服务条款)"/><br/><br/> <asp:Button ID="Button1"runat="server"OnClick="Button1_Click"Text="提交"/></td></tr><tr></tr><tr></tr><tr><td colspan="2"style="background-color: transparent"><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/></td></tr><tr><td style="width: 191px"></td><td style="width: 468px"></td></tr></table></div></div></form></body></html>后台功能代码:Default.aspx.csusing System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partial class_Default : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){}protected void male_CheckedChanged(object sender, EventArgs e) {}protected void Button1_Click(object sender, EventArgs e){string sex = "";if (female.Checked){sex = "女";}else{sex = "男";}if (agree.Checked){Response.Redirect("shopperson_Info.aspx?uid="+ userName.Text + "&pwd="+ Pwd.Text + "&sex=" + sex + "&realname=" + RealName.Text);}else{Response.Write("<script language='javascript'>alert('由于您不同意我们的《服务条款》注册失败!'</script>)");}}}截图:(3)注册成功界面:前台设计代码:ShopPerson_Info.aspx<%@Page Language="C#"AutoEventWireup="true"CodeFile="ShopPerson_Info.aspx.cs"Inherits="ShopPerson_Info" %><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head runat="server"><title>无标题页</title></head><body><form id="form1"runat="server"><div style="text-align: center"><br/><br/><br/><br/><br/><table style="border-left-color: #ff0066; border-bottom-color: #ff0066;border-top-style: double; border-top-color: #ff0066; border-right-style: double;border-left-style: double; border-right-color: #ff0066; border-bottom-style: double"> <tr><td colspan="2"style="text-align: left"><br/><br/><span style="font-size: 24pt"> </span><strong><span style="border-left-color: #ffccff; border-bottom-color:#ffccff; color: #ff0066;border-top-style: solid; border-top-color: #ffccff; border-right-style: solid;border-left-style: solid; border-right-color: #ffccff;border-bottom-style: solid"><span style="font-size: 24pt; border-left-color: #ffccff;border-bottom-color: #ffccff;border-top-style: solid; border-top-color: #ffccff;border-right-style: solid;border-left-style: solid; border-right-color: #ffccff;border-bottom-style: solid">恭喜您注册成功!</span><br/><br/><br/><br/></span></strong></td></tr><tr><td style="width: 90px; text-align: left; border-left-color: #ffccff;border-bottom-color: #ffccff; border-top-style: solid; border-top-color: #ffccff;border-right-style: solid; border-left-style: solid; border-right-color: #ffccff;border-bottom-style: solid;"><br/><strong> *用户名<br/></strong></td><td style="width: 374px; border-left-color: #ffccff; border-bottom-color:#ffccff; border-top-style: double; border-top-color: #ffccff; border-right-style: double; border-left-style: double; border-right-color: #ffccff; border-bottom-style: double;"><asp:Label ID="Label1"runat="server"Text="Label"></asp:Label></td> </tr><tr><td style="width: 90px; text-align: left; border-left-color: #ffccff;border-bottom-color: #ffccff; border-top-style: solid; border-top-color: #ffccff;border-right-style: solid; border-left-style: solid; height: 59px; border-right-color: #ffccff; border-bottom-style: solid;"><br/><strong> *登陆密码<br/></strong></td><td style="width: 374px; border-left-color: #ffccff; border-bottom-color:#ffccff; border-top-style: solid; border-top-color: #ffccff; border-right-style: solid; border-left-style: solid; height: 59px; border-right-color: #ffccff; border-bottom-style: solid;"><asp:Label ID="Label2"runat="server"Text="Label"></asp:Label></td> </tr><tr><td style="width: 90px; text-align: left; border-left-color: #ffccff;border-bottom-color: #ffccff; border-top-style: solid; border-top-color: #ffccff;border-right-style: solid; border-left-style: solid; border-right-color: #ffccff;border-bottom-style: solid;"><br/><strong> *性 别<br/></strong></td><td style="width: 374px; border-left-color: #ffccff; border-bottom-color:#ffccff; border-top-style: solid; border-top-color: #ffccff; border-right-style: solid; border-left-style: solid; border-right-color: #ffccff; border-bottom-style: solid;"><asp:Label ID="Label3"runat="server"Text="Label"></asp:Label></td> </tr><tr><td style="width: 90px; height: 21px; text-align: left; border-left-color: #ffccff; border-bottom-color: #ffccff; border-top-style: solid; border-top-color: #ffccff; border-right-style: solid; border-left-style: solid; border-right-color: #ffccff;border-bottom-style: solid;"><br/><strong> *真实姓名<br/></strong></td><td style="width: 374px; height: 21px; border-left-color: #ffccff;border-bottom-color: #ffccff; border-top-style: double; border-top-color: #ffccff;border-right-style: double; border-left-style: double; border-right-color: #ffccff;border-bottom-style: double;"><asp:Label ID="Label4"runat="server"Text="Label"></asp:Label></td> </tr><tr><td colspan="2"rowspan="2"style="border-left-color: #ffccff;border-bottom-color: #ffccff;border-top-style: solid; border-top-color: #ffccff; border-right-style: solid;border-left-style: solid; text-align: center; border-right-color: #ffccff; border-bottom-style: solid"><br/><br/><asp:Button ID="Button1"runat="server"OnClick="Button1_Click"Text="登陆"/> <br/></td></tr><tr></tr></table></div></form></body></html>后台功能代码:ShopPerson_Info.aspx.csusing System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partial class ShopPerson_Info : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){this.ClientScript.RegisterStartupScript(this.GetType(), "", "<script>alert('注册成功!')</script>");try{Label1.Text = Request.QueryString["uid"].ToString();Label2.Text = Request.QueryString["pwd"].ToString();Label3.Text = Request.QueryString["sex"].ToString();Label4.Text = Request.QueryString["realname"].ToString();}catch{}}protected void Button1_Click(object sender, EventArgs e){Response.Redirect("login.aspx");}}截图:(4)显示姓名界面:前台设计代码:Sousou.aspx<%@Page Language="C#"AutoEventWireup="true"CodeFile="Sousou.aspx.cs"Inherits="Sousou" %><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head runat="server"><title>无标题页</title></head><body><form id="form1"runat="server"><div style="text-align: center"><br/><br/><br/><br/><br/><br/><br/><br/><table border="1"cellpadding="1"cellspacing="1"style="border-left-color: lime;border-bottom-color: lime; border-top-style: double; border-top-color: lime;border-right-style: double; border-left-style: double; text-align: center; border-right-color: lime;border-bottom-style: double"><tr><td style="width: 283px; height: 139px"></td><td style="width: 265px; height: 139px"><br/><br/><br/><br/><br/> <br/></td><td style="width: 210px; height: 139px"></td></tr><tr><td colspan="3"style="height: 51px; text-align: center">尊敬的用户!恭喜您!登陆成功!</td></tr><tr><td colspan="3"style="height: 18px; text-align: center"></td></tr><tr><td colspan="3"style="height: 26px; text-align: center">姓名:<asp:TextBox ID="TextBox1"runat="server"></asp:TextBox> <asp:Button ID="Search_button"runat="server"Text="搜索"/></td> </tr><tr><td colspan="3"style="height: 99px; text-align: center"> <asp:GridView ID="GridView1"runat="server" AutoGenerateColumns="False"DataSourceID="AccessDataSource2"><Columns><asp:BoundField DataField="name"HeaderText="姓名"SortExpression="name"/></Columns></asp:GridView><asp:AccessDataSource ID="AccessDataSource2"runat="server"DataFile="~/App_Data/ProductShow.mdb"SelectCommand="SELECT [name] FROM [name] ORDER BY [name], [编号] DESC, [编号]"></asp:AccessDataSource></td></tr></table></div></form></body></html>后台功能代码:Sousou.aspx.csusing System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partial class Sousou : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){}private void DataBindgv(){DBAccess db = new DBAccess();DataSet ds = db.Getds();}protected void Search_button_Click(object sender, EventArgs e){Response.Redirect("Sousou.aspx");string strField = TextBox1.Text.ToString().Trim();string StrSql = "select * from Product_img where name='" + strField + "'";DBAccess db = new DBAccess();DataSet ds = db.Gets(StrSql);}}截图:(5)登录成功界面前台设计代码:Succeed.aspx<%@Page Language="C#"AutoEventWireup="true"CodeFile="succeed.aspx.cs"Inherits="succeed"%> <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"。
网页课程设计报告例子 Last updated on the afternoon of January 3, 2021湖南涉外经济学院课程设计报告课程名称:网页设计报告题目:“舌尖上的中国”网页设计报告学生姓名: ***所在学院:信息科学与工程学院专业班级:电商本2015**班学生学号: * *指导教师: ***2016年 6 月 24 日课程设计任务书摘要《舌尖上的中国》是中国中央电视台播出的美食类纪录片,主要内容为中国各地美食生态。
通过中华美食的多个侧面,来展现食物给中国人生活带来的仪式、伦理等方面的文化;见识中国特色食材以及构成中国美食特有气质的一系列元素;了解中华饮食文化的精致和源远流长。
该片的重要主题是“变”,向观众展示传统农耕的中国,同时也告诉观众很多中国传统正在改变。
这不仅仅是在拍摄美食,更是在拍摄承载中国人精神的食物。
本网站介绍了中国各地美食,网页是根据《舌尖上的中国》这档节目中的七个主题来设计的。
分别为:自然地馈赠、主食的故事、转化的灵感、时间的味道、厨房的秘密、五味的调和、我们的田野。
本站的建立使用了Fireworks、Flash和Dreamweaver网页制作工具。
采用HTML语言、CSS样式、Javascript脚本语言编写网页,最终使静态页面也有丰富多彩的视觉效果;另外又使用了网页特效,赋予了其他页面动态之美,动静结合,主题突出,吸引浏览者的目光。
关键词:中国;美食;文化内容包括:1.为什么要设计该网站?2.本网站包含什么内容?采用了什么技术实现3.建立本网站可以达到什么效果?目录一、作品简介本作品其主要内容是关于中国各色美食的讲解。
中国文化博大精深,当然其中也包含饮食文化。
本网站通过中华美食的多个侧面,来展现食物给中国人生活带来的仪式、伦理等方面的文化。
以美食作为窗口,让海内外观众领略中华饮食之美。
进而感知中国的文化传统和社会变迁。
不仅这样,还展示了普通中国人的人生百味,展示的是人和食物之间的故事,透过美食来看社会。
一、实训背景随着互联网技术的飞速发展,网页设计已经成为一种重要的技能。
为了提高学生的网页制作能力,本课程安排了网页制作实训环节。
通过本次实训,学生能够熟练掌握网页制作的基本流程和技巧,提高自己的实际操作能力。
二、实训目的1. 使学生熟悉网页制作的基本流程和操作步骤。
2. 培养学生运用网页制作软件(如Dreamweaver、Photoshop等)进行网页设计和制作的能力。
3. 提高学生综合运用所学知识解决实际问题的能力。
4. 增强学生的团队协作意识和沟通能力。
三、实训内容1. 网页制作软件的学习与掌握(1)学习Dreamweaver的基本操作,包括新建、打开、保存网页等。
(2)学习使用Dreamweaver的布局、文本、图像、表格、框架、超链接等功能。
(3)学习使用Photoshop进行图像处理,包括裁剪、调整大小、添加文字、图层等。
2. 网页设计的基本原则与技巧(1)了解网页设计的基本原则,如对比、重复、对齐、亲密性等。
(2)学习网页布局的方法,如网格布局、流式布局、响应式布局等。
(3)学习网页色彩搭配技巧,提高网页的美观度。
3. 网页内容制作(1)学习在网页中添加文本、图片、表格、列表等元素。
(2)学习网页动画效果的制作,如滚动字幕、鼠标悬停等。
(3)学习网页交互功能的实现,如表单、JavaScript等。
4. 网站测试与优化(1)学习使用浏览器进行网站测试,包括兼容性、响应速度等。
(2)学习使用SEO(搜索引擎优化)技巧,提高网站在搜索引擎中的排名。
四、实训过程1. 选题与构思学生根据兴趣和需求,选择一个主题进行网页设计。
如个人博客、企业网站、教育网站等。
2. 收集与整理素材学生通过互联网、书籍、素材网站等途径收集相关素材,包括图片、图标、字体等。
3. 网页设计与制作学生运用所学知识和技能,进行网页设计。
主要包括以下步骤:(1)规划网站结构,包括页面布局、导航栏、页脚等。
(2)设计网页风格,包括色彩搭配、字体选择、图片处理等。
武汉理工大学华夏学院课程报告课程名称:网页设计与制作题目:仙剑四简介专业信息工程系班级物联网1122班学号10213312210姓名李维嘉成绩_________________ 指导教师苏永红2014年10月20日至2014年12月30日1 设计目的本课程的设计目的是通过实践使同学们经历Dreamweaver cs3开发的全过程和受到一次综合训练,以便能较全面地理解、掌握和综合运用所学的知识。
结合具体的开发案例,理解并初步掌握运用Dreamweaver cs3可视化开发工具进行网页开发的方法;了解网页设计制作过程。
通过设计达到掌握网页设计、制作的技巧。
了解和熟悉网页设计的基础知识和实现技巧。
根据题目的要求,给出网页设计方案,可以按要求,利用合适图文素材设计制作符合要求的网页设计作品。
熟练掌握Photoshop cs3、Dreamweaver cs3等软件的的操作和应用。
增强动手实践能力,进一步加强自身综合素质。
学会和团队配合,逐渐培养做一个完整项目的能力。
2 开发环境PC机一台Dreamweaver软件Windows Server 2005系统运行平台IIS6.0WEB服务器和脚本解释器IE7.0浏览器,Microsoft Visual Studio2005DirecX9.0系统插件SQL Server2005企业版。
3 需求分析设计个人网站的ASP网页设计,要求实现网站信息浏览、超链接、数据库连接、信息查询、信息添加和删除等基本功能。
具体要求为:(1)网站要有一个明确的主题,网站标志语、界面主色调与网站主题相匹配,界面布局设计美观、大方、合理,要求用到HTML、表格、表单、框架、导航条、CSS、AP DIV布局对象、插入多媒体对象,JavaScript脚本语言或VBScript 脚本语言、ASP技术、IIS服务器,网页与数据库连接技术。
(2) 主页要求有用户登录显示,实现网站信息浏览、超链接、信息查询、信息修改等基本功能。
4 概要设计(1)设定图像边框粗细:在“外观”选项卡的“布局”栏里可以根据需要定义图像的边框,也可以定义边框值为“0”,即无边框。
(2)设置图像环绕方式:一般情况下一幅图像只能与一行文字处在同一高度,但有时需要将图像和文字分开,且两者互不影响。
比如在网页左边插入一幅图像,要求右边的文字就像没有图像时可以多行输入,这就要通过设置图像的环绕方式来实现。
在网页中图像的环绕方式有两种:①左环绕:图像在左边,文本在图像的右边进行环绕。
②右环绕:图像在右边,文本在图像的左边进行环绕。
在“外观”选项卡的“布局”栏中打开“对齐方式”下拉列表框,选择“左”选项,并单击“确定”按钮,图像就被设置为左环绕方式,同样,如果选“右”,图像就被设置为右环绕方式。
(3)编辑图像大小:在Dreamweaver cs3中,当在网页中加入一幅图像后,图像大小默认设置为其原来的大小,如果加入的图像太大或太小,或有其他特别需要,就得调整图像的大小。
调整图像大小非常简单灵活,只要你选中加入的图像,用鼠标左键拖动图像边框,可任意调整图像的宽度和高度直到达到你满意的尺寸。
(4)设置图像缩放比例:网页设计的一个重要原则就是网页的兼容性,对于不同的浏览器或者不同的分辨率,不管是800×600的窗口,还是1024×768的窗口,网页都要能正常的显示。
设置图像缩放比例就是将图像设置为大小可以按比例变化,与浏览器的大小成一固定比例,这样在不同大小的浏览器窗口里图像都能正常的显示外观。
5详细设计1、设计登陆界面图1 登陆界面2、设计首页界面图2 首页界面3、设计仙剑四界面图3 仙剑四界面4、设计主要人物界面图4 主要人物界面5、设计精选壁纸界面图5 精选壁纸界面6、动画选播界面图6动画选播界面6总结通过这次设计,我对和SQLServer技术在应用有了更深一层的认识和应用。
在以后.NET网站的建设中可能会遇到一些意想不到的难题,我会在以后的学习和工作中会做进一步的学习和探索,以取得更大的进步。
我非常感谢学校给了我这次制作网页的机会,通过这次实训,我学到了很多有价值的东西。
我独立的完成了网站设计的全过程,把设计中散乱的网页链接成框架体系,使平时学到的知识点有了很高的提高,并且合理的在试验中进行了实践。
在这次实验的过程中,我搜集了大量的素材和网页设计的技术技巧方面的书,扩大了知识面,给我在以后的设计过程中能博采众长,制作出好的网页打下了基础。
其次,我现在已经掌握文档排版标记的使用熟练使用及其属性设置、特殊符号;我现在已经熟练使用超级链接,合理使用列表。
最后,我感受最深的是:要想做好一个网站,素材和技能都十分重要。
好的素材需要多方查找资料,可以从图书、网站和新闻上查找。
好的技能需要不断的实践,经常做练习、做网页。
如果拥有好的素材和精湛的技能就可以做出精湛的网页。
7 参考文献《网页设计与制作》主编:库少平张毅出版社:北京邮电大学出版社《ASP程序设计教程与实训》主编:吴鹏丁利群出版社:北京大学出版社《网页设计与制作》主编:席金菊何碧英出版社:科学出版社《数据库原理与SQL Server应用》主编:高金兰出版社:科学出版社8 附录源程序首页源代码:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>仙剑四</title><link href="css/style.css" rel="stylesheet" type="text/css" /><script type="text/javascript">function MM_CheckFlashVersion(reqVerStr,msg){with(navigator){var isIE = (appVersion.indexOf("MSIE") != -1 && userAgent.indexOf("Opera") == -1);var isWin = (appVersion.toLowerCase().indexOf("win") != -1);if (!isIE || !isWin){var flashVer = -1;if (plugins && plugins.length > 0){var desc = plugins["Shockwave Flash"] ? plugins["Shockwave Flash"].description : "";desc = plugins["Shockwave Flash 2.0"] ? plugins["Shockwave Flash 2.0"].description : desc;if (desc == "") flashVer = -1;else{var descArr = desc.split(" ");var tempArrMajor = descArr[2].split(".");var verMajor = tempArrMajor[0];var tempArrMinor = (descArr[3] != "") ? descArr[3].split("r") : descArr[4].split("r");var verMinor = (tempArrMinor[1] > 0) ? tempArrMinor[1] : 0;flashVer = parseFloat(verMajor + "." + verMinor);}}// WebTV has Flash Player 4 or lower -- too low for videoelse if (userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 4.0;var verArr = reqVerStr.split(",");var reqVer = parseFloat(verArr[0] + "." + verArr[2]);if (flashVer < reqVer){if (confirm(msg))window.location = "/shockwave/download/download.cgi?P1_Prod_Version=Shockwave Flash";}}}}</script><style type="text/css">body {background-color: #9CC;}#apDiv1 {position:absolute;width:1226px;height:151px;z-index:1;left: 59px;top: 898px;visibility: visible;}#apDiv2 {position:absolute;width:225px;height:164px;z-index:1;left: 1018px;top: 535px;overflow: scroll;background-color: #CCFF33;}#main tr td table tr td #apDiv2 p {color: #000;}</style></head><body onload="MM_CheckFlashVersion('7,0,0,0','本页内容需要使用较新的Macromedia Flash Player 版本。