《网站建设实训》实训任务书指导书

网站建设实训实训任务书一、实训意义和目的意义：通过实训能够为学生积累项目开发的经验，从而为学生在相应岗位上就业提供技术和技能支撑。目的：通过综合模块强化训练，使学生能够综合运用网页设计与制作技能、网页编程技能、Access/SQL Server数据库设计与应用技能、网络基本操作技能以及在模块实训过程中所学的网站及Web应用系统开发的方法和技巧独立或协作开发具有一定实际价值的中小型网站及Web应用系统，培养网络信息处理的综合能力。 通过实训达到如下的能力与技能标准：l 能根据中小型网站及Web应用系统的开发需要对其进行较全面的分析；l 能使用模块化的方法设计系统功能；l 能根据开发需要设计数据库及表；l 能根据开发需要搜集、处理素材；l 能根据开发需要设计各个页面；l 能熟练使用流行技术制作页面；l 能阅读并根据需要编写代码；l 能实现网站及Web应用系统中的常见功能；l 能调试、测试、发布网站及Web应用系统；l 能处理网站及Web应用系统开发中常见的问题。二、实训任务和要求1、复习巩固网页设计与制作、网页编程、数据库设计与应用的知识和技能，系统学习网站及Web应用系统的开发、调试以及常见故障处理方法。要求熟练掌握用流行技术设计制作页面；能根据系统开发需要设计数据库；熟练掌握网页中操作数据库的方法；能用SQL语句较熟练地对数据库进行读取、插入、更新与删除操作；能够阅读并根据需要编写代码；掌握网站和Web应用系统的开发、调试方法和常见故障处理方法。 穿插在网站和Web应用系统开发中完成。2、网站及Web应用系统开发（1）自选企业网站开发网站功能：用来展示企业各方面的情况并提供网上留言功能。开发要求：在百度中搜索“网站成功案例”关键词，选择一个企业网站，搜集网站素材，利用所提供的后台管理系统开发该网站。网站内容要能实时更新，主要页面采用DIV+CSS布局。（2）顶岗实习网上管理与交流平台开发系统功能：通过顶岗实习平台实现网上管理和师生之间的汇报与答复功能。开发要求：系统提供系统主页和学生、导师、系部管理员、系统管理员、院领导等操作界面（要包含所有操作菜单）；系统主页提供学生、导师和管理员等用户的登录功能（含个人信息编辑功能），以及院、系部新闻通知显示功能；学生登录后进入学生界面汇报实习进展情况，导师登录后进入导师界面针对学生的汇报进行回复；系部管理员和系统管理员登录后进入相应界面进行基础管理、实习管理、计划管理、互动交流管理、论文报告管理等（只要求开发“基础管理”功能，开发能力强的同学可开发“实习管理”等功能）。三、时间与进度安排时间安排：共64学时。进度安排如下（自选网站和应用系统开发的顺序可以对调）：课 时内 容备 注4网站需求分析、网站主要页面设计通过等专业服务网站上展示的企业网站，搜集网站素材，利用所提供的后台管理系统，模仿九信医疗有限公司网站的开发过程和方法开发网站。20后台管理系统使用、网站主要页面制作4系统完善、测试、发布4系统分析、模块设计、数据库设计、系统主页和各模块主页设计顶岗实习网上管理与交流平台（基础管理和交流平台部分）开发。开发能力强的同学可开发“实习管理”功能，给予加分。4系统主页实现16系统管理员和系部管理员模块主页实现和“基础管理”功能开发8学生、导师、院领导模块主页实现4系统优化、整理并上传成果、撰写总结、部分学生参加答辩四、材料和成果要求每个网站及Web应用系统的基本功能应该实现并成功运行，同时须上交源代码。开发网站及Web应用系统时，必须进行实训记载（可按模块记载），记载的内容应包括时间、地点、目的与要求、内容、调试中出现的问题及解决办法、体会等。实训结束后要进行实训总结。五、考核办法本实训的考核以平时考核为主，并抽取20%的学生参加答辩。其总评成绩构成如下：参加答辩时：总评成绩=平时成绩（30%）+材料成绩（40%）+答辩成绩（30%）。不参加答辩时：总评成绩=平时成绩（30%）+材料成绩（70%）。其中：平时成绩从平时考勤、表现、回答问题情况、参与讨论情况、开发的熟练程度等方面进行综合评定。材料成绩从所开发的网站及Web应用系统的创意和美观性、结构布局、系统的功能和可操作性、容错性、技术含量；实训记载和总结报告撰写的认真、全面、正确程度等方面进行综合评定。答辩成绩根据对所开发的网站和系统提问时问题回答和现场操作情况进行评定。总评成绩实行“一票否决制”，即凡有抄袭而来的作品则总评一律不及格。总评成绩实行五级分制：优、良、中、及格、不及格。网站建设实训实训指导书一、 网站和Web应用系统开发流程1网站开发流程2Web应用系统开发流程客户提出开发需求开发方提供实现方案和报价双方签署开发合同并支付预付款开发方进行功能需求分析系统设计（模块设计、数据库设计、页面设计等）系统实现测试（开发者单元测试、测试人员模块测试和系统测试）发布、试运行、运行和维护客户支付余款。二、网站及Web应用系统开发（一）九信医疗有限公司网站开发（演示用）1网站需求分析开发的网站是用来展示企业各方面的情况的，网站一般按栏目划分。根据九信医疗有限公司的企业实际情况，可将栏目划分产品中心、医学专栏、新闻中心、服务专区、关于我们、留言板等，“产品中心”栏目包括呼吸机系列、医用氧气瓶系列、医用耗材系列、洗涤机械/发电机组系列4个子栏目，“医学专栏”栏目包括呼吸机使用知识、急救知识2个子栏目。网站内容的实时更新通过在后台管理系统添加内容、在前台页面中实时调用实现。2网站设计须要设计制作的主要页面包括主页、新闻内容显示网页、更多新闻显示网页、图片列表显示网页、留言板网页等。网站各网页风格应统一、协调，布局简洁、大方，便于浏览者查看网站内容。主要页面设计如下： 3网站实现（1）后台管理系统使用系统（JSJCMS.rar）架设时不能使用虚拟目录法（主要网页在根目录下，而生成的静态网页不在根目录下！）。系统通过登录网页login.asp进入，登录用户名为admin，密码为123456。可以在后台中自行添加用户。进入后台管理系统后，各个参数设置和功能使用主界面左边的各个链接进行。在主界面上，应先进行栏目管理（添加一级栏目时可设置当单击一级栏目名称时是显示新闻列表、图片列表还是直接显示内容，还可设置栏目名称是否显示出来），再添加、修改新闻（可生成静态网页），再进行模板管理，最后再使用其余功能（如友情链接管理、留言管理、公告管理等）。新闻模板包括：新闻显示页面(news_view.asp)模板、更多新闻列表(news_more.asp)模板、图片列表模版(js-pic.asp)。其他模板包括：搜索模板、留言模板、投稿模板。模板代码就是页面的源代码，因此，应该先对相应的页面进行布局，并在须显示内容处使用“$内容$”之类的标记，然后将整个源代码复制到模板代码输入框中，保存即可。在页面代码中可通过后台提供的“代码调用”功能调用要显示内容对应的代码，比如横排显示栏目名可使用代码调用“”。后台管理系统没有提供任何前台网页，均须要自行设计制作。（2）网站主要页面（或模板）制作各个网页（或模板）应使用流行的DIV+CSS布局，可借助于Dreamweaver自带的Spry菜单栏构件、选项卡面板构件、折叠面板构件实现常用的弹出菜单、选项卡、折叠面板效果。（a）主页制作设计分析：页头背景图像高39px，右边各个链接上方空10px。主页正文区背景图像宽870px，内容区宽858px，幻灯片848x324；logo区背景图像高58px，logo左边空5px，表单上方空15px，右边空5px；导航栏上方空2px，导航背景图片每个140x33，两个栏目之间间隔1px，内容面板中上方空15px，左边空14px，每个内容面板包含1个背景图像，正文区下方是立体感的高14px的背景图像，预留5px的空余空间美观。页脚上方空15px。1新建网页index.asp，编码方式“简体中文（GB2312）”。标题为“呼吸机_家用呼吸机_便携呼吸机_氧气瓶-九久信”。2定义通用性CSS规则* margin:0;padding:0; body font-family: 宋体, serif;font-size: small;line-height: 150%;color: #666;background-color: #eee;background-image: url(images/bg_top.gif);background-repeat: repeat-x;td font: small/150% 宋体,arial; vertical-align: top;imgborder:0;lilist-style-type:none;h1,h2,h3,h4,h5,h6 font-weight: normal;a color: #666; text-decoration: none; a:hover color: #36f;3制作页头 说明：在设计视图发现“相关网站”另启一行（在浏览时正常），可将前的空格删除。4处理页头#links margin: 0px auto;width: 858px; /*正文区内容宽度为858px*/height: 39px;/*body的背景图像高39px*/#links ul margin-top: 10px; float: right;#links ul li float: left;#links ul li.lan margin-right: 4px/*页头中“相关网站”链接效果*/#xgwzposition: relative;#xgwzlj display: none;position: absolute;top: 19px;left: 0px;width: 120px;height: 76px;overflow: auto;background: #fff;border: #ddd 1px solid;#xgwzlj a display: block; padding: 1px 6px; text-align: right;#xgwzlj a:hover color: #fff;background: #f00; 5正文区布局6定义CSS规则处理正文区布局#wrapwidth: 858px;margin:0 auto;background: url(images/index_shadow_r.gif) repeat-y;padding:0px 6px;/*背景图像高1px，宽870px=858+6*2，中间为白色*/overflow:auto; /*正文区内容占用的高度自动伸缩*/#wrap_bottomwidth: 864px; /*若用870px，则左右边框没有渐变感*/height:14px; /*背景图像1x14*/margin:0 auto;background: url(images/index_shadow_b.gif) repeat-x;7正文区-LOGO 九久信呼吸机 function check() var keyword=document.getElementById(form1).word.value; if(keyword=搜索)document.getElementById(form1).word.value=; function ongetkey() var keyword=document.getElementById(form1).word.value; if(keyword=) alert(请输入关键字!); else document.getElementById(form1).submit(); 8定义CSS规则处理正文区-LOGO#logo background:url(images/bg_logo.gif) repeat-x;height:58px; /*背景图像高58px*/#logo h1 float:left;margin-left:5px;#logo h1 span visibility:hidden; /*隐藏一级标题*/#logo form float:right;margin-right: 5px;margin-top:15px;#logo img vertical-align:bottom;#logo input margin-right:5px;9正文区-幻灯片 10定义CSS规则处理正文区-幻灯片#banner text-align: center;11正文区-选项卡式面板直接在div#banner下方插入Spry选项卡式面板。12定义CSS规则处理正文区-选项卡式面板先在SpryTabbedPanels.css中修改CSS规则。.TabbedPanels margin: 0px;padding: 0px;/*float: left;*/clear: none;width: 846px; /*修改了*/ /*以下是新增加的*/margin:2px auto;.TabbedPanelsTab position: relative;top: 1px;float: left;/*padding: 4px 10px;*/margin: 0px 1px 0px 0px;font: bold 0.7em sans-serif;background-color: #DDD;list-style: none;/*border-left: solid 1px #CCC;border-bottom: solid 1px #999;border-top: solid 1px #999;border-right: solid 1px #999;*/-moz-user-select: none;-khtml-user-select: none;cursor: pointer;/*以下是新增加的*/text-align:center;width:140px;line-height:33px;background:url(./images/tablink.gif) #fff;font-size:1.1em;font-family:黑体;color:#000;.TabbedPanelsTabSelected background-color: #EEE;border-bottom: 1px solid #EEE;/*以下是新增加的,不须要加到.TabbedPanelsTabHover中，因为在SpryTabbedPanels.js中将Click（即Selected）与MouseOver对调了*/background:url(./images/tabover.gif);color:#36f;.TabbedPanelsContentGroup clear: both;/*border-left: solid 1px #CCC;border-bottom: solid 1px #CCC;border-top: solid 1px #999;border-right: solid 1px #999;background-color: #EEE;*/.TabbedPanelsContent padding: 0px; /*从4修改成0*/*以下是新增加的*/float:left; /*内容少时自动压缩宽度，以便右边显示动画*/background-color:#FFF;background:url(./images/tabcontentbg.gif) no-repeat -3px 0px;height:130px; /*设置高度后才能显示背景图像*/padding-top:15px;overflow:hidden;再将SpryTabbedPanels.js中第218-228行的“onTabClick”与“onTabMouseOver”对调，将306-307行的“MouseOver”与“click”、“onTabMouseOver”与“onTabClick”分别对调，以便鼠标“移到”选项卡上时交换显示信息（原来是“单击”选项卡时交换显示信息）。13正文区-选项卡式面板-前3个选项卡内容面板分别在前3个选项卡内容面板中输入代码：14定义CSS规则处理正文区-选项卡式面板-前3个选项卡内容面板.TabbedPanelsContent ul.parent margin-left: 14px;.TabbedPanelsContent ul.parent li float: left;width: 208px; /*=(846-14)/4，只能以px为单位，而不能用25%来显示1行4项，因为.TabbedPanelsContent使用了float:left自动压缩宽度，比如实际内容只有2项，则自动压缩后宽度只有总宽度的一半，在这一半的空间中每1项应该是50%，而不是25%*/.TabbedPanelsContent ul.parent ul.child li clear: left;width:auto;font-size:0.9em;border-right:solid 1px #CCC;width:90%;.TabbedPanelsContent ul.parent li h4float: left;font-size:1.0em;.TabbedPanelsContent ul.parent li spanfloat: right;margin-right:20px;.TabbedPanelsContent ul.parent li h4 acolor:#36F;15正文区-选项卡式面板-第4个选项卡内容面板%Set rs = Server.CreateObject(ADODB.RecordSet)sql = select top 1 * from news where sh=1 and (lm=48 or lm2=48 or lm3=48) order by ontop desc,updat desc,id descrs.Open sql,conn,1,3,1if rs.eof then response.write 暂无内容。else response.write rs(content)end ifrs.close:Set rs=nothing%再在主页代码顶部加上：16定义CSS规则处理正文区-选项卡式面板-第4个选项卡内容面板先给内容面板增加class属性：class=TabbedPanelsContent tabspecial再定义CSS：.tabspecial width:50%; 以及.TabbedPanelsContent .morespecial float:right;17正文区-选项卡式面板-第5个选项卡内容面板% Set rs = Server.CreateObject(ADODB.RecordSet)sql= select top 2 * from news where title and sh=1 and (lm=1 or lm2=1 or lm3=1) rs.Open sql,conn,1,3,1if rs.eof then response.write 暂无内容。else response.write() i=0 do while not rs.eof i=i+1 response.write( &rs(title) & ) response.write() response.write() response.write( & rs(content) & ) response.write() rs.movenext loop response.write()end ifrs.close:Set rs=nothing%18定义CSS规则处理正文区-选项卡式面板-第5个选项卡内容面板.TabbedPanelsContent ul.parent li.text1 width: 57%;margin-right:10px;.TabbedPanelsContent ul.parent li.text2 width: 41%;.TabbedPanelsContent ul.parent li div clear:both;font-size:0.9em;border-right:solid 1px #ccc;padding-right:10px;line-height:22px;19正文区-选项卡式面板-第6个选项卡内容面板 想订货，或有意见或建议请留言！进入留言板20定义CSS规则处理正文区-选项卡式面板-第6个选项卡内容面板先给内容面板增加class属性：class=TabbedPanelsContent tabspecial及.tabspecial ptext-align:center;line-height:2em;.tabspecial p acolor:#FC0;21正文区-选项卡式面板-内部右侧显示动画图片在选项卡式面板外层div中（插入处），插入： 22定义CSS规则处理正文区-选项卡式面板-内部右侧显示动画图片.TabbedPanels position: relative;.TabbedPanels .TabbedPanelsContentGroup position: relative; z-index:2;.TabbedPanels #donghua position:absolute;top:35px; /*参照.TabbedPanels（嵌套关系），而不是.TabbedPanelsContentGroup（并列关系）*/right:10px;z-index:1;.TabbedPanels #donghua img.special width: 280px;height: 120px;.TabbedPanels #donghua #donghuamore text-align: right;23页脚 呼吸机产品导航：呼吸机|家用呼吸机|便携呼吸机|氧气瓶 客服电话：      0523-86880973Email：jiuxin-medical 久信医疗科技有限公司     邮编：225300  地址：江苏省泰州市江洲南路105号 24定义CSS规则处理页脚#footer width:600px;margin:15px auto 0px;font-size:0.9em;color:#999;text-align:center;#footer acolor:#999;#footer a:hovercolor:#36f;#footer spancolor:#f00;#footer .ftleftfloat:left;width:45%;text-align:left;#footer .ftleft imgfloat:left;/*2行文字显示在右边*/（b）新闻内容页subindex.asp模板制作（模板源代码提供给后台中的news_view.asp模板用）1初始网页subIndex.asp制作页头、正文区上部、页脚类似于主页index.asp，故将index.asp“另存为”subIndex.asp，再删除选项卡面板及相关代码（CSS中的、head中的链接样式文件和脚本文件、body中的结构代码、body最后的调用代码）、幻灯片代码（要保留div#banner）。删除代码视图中如下代码：由于正文区的内容区域宽920px，背景图像shadow_r.gif（代替主页中的index_shadow_r.gif）宽932px。故须要修改CSS规则中的属性值为：body font-family: 宋体, serif;font-size: small;line-height: 150%;color: #333;background-color: #f8f8f8;background-image: url(images/bg_top.gif);background-repeat: repeat-x;#links margin: 0px auto;width: 920px;height: 39px;/*body的背景图像高39px*/#wrapwidth: 920px;margin:0 auto;background: url(images/shadow_r.gif) repeat-y;padding:0px 6px;/*背景图像高1px，宽932px=920+6*2，中间为白色*/overflow:auto; /*正文区内容占用的高度自动伸缩*/#wrap_bottomwidth: 926px; /*若用932px，则左右边框没有渐变感*/height:14px; /*背景图像8x14*/margin:0 auto;background: url(images/shadow_b.gif) repeat-x;2正文区-导航布局在div#logo下方插入：3定义CSS规则处理正文区-导航布局#nav background:url(images/nav.gif) repeat-x;height:33px;line-height:33px;font-size:1.1em;font-family:sans-serif, 黑体;font-weight:bold;4正文区-导航布局-Spry菜单栏（1）插入Spry菜单栏如下： 首页 产品中心 项目 1.1 项目 1.2 项目 1.3 医学专栏 新闻中心 项目 3.1 项目 3.1.1 项目 3.1.2 项目 3.2 项目 3.3 服务专区 关于我们 留言板5定义CSS规则处理正文区-导航布局-Spry菜单栏ul.MenuBarHorizontalmargin: 0;padding: 0;list-style-type: none;font-size: 100%;cursor: default;width: auto;/*以下是新增加的*/width:43em; /*6em*7项+1em(用于每项右边的竖线边框1px)*/ margin:0 auto; /*水平居中*/ul.MenuBarHorizontal limargin: 0;padding: 0;list-style-type: none;font-size: 100%;position: relative;text-align: left;cursor: pointer;width: 8em;float: left;/*以下是新增加的*/ width:6em;border-right:solid 1px #FFF;text-align: center;ul.MenuBarHorizontal ulmargin: 0;padding: 0;list-style-type: none;font-size: 100%;z-index: 1020;cursor: default;width: 8.2em;position: absolute;left: -1000em;/*以下是新增加的*/font-weight: normal;font-size:0.9em;line-height:2em;width: 13em;ul.MenuBarHorizontal ul liwidth: 8.2em;/*以下是新增加的*/text-align: left;width: 13em;border-right:solid 1px #666;border-bottom:solid 1px #666;ul.MenuBarHorizontal ul ulposition: absolute;margin: -5% 0 0 95%;/*以下是新增加的*/margin: -2px 0 0 100%;ul.MenuBarHorizontal adisplay: block;cursor: pointer;background-color: #EEE;padding: 0.5em 0.75em;color: #333;text-decoration: none;/*以下是新增加的*/padding: 0em 0.75em;background:url(./images/nav.gif) repeat-x;ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focusbackground-color: #33C;color: #FFF;/*以下是新增加的*/color:#36f;background:url(./images/nav2.gif) repeat-x;/*以下的不要！ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisiblebackground-color: #33C;color: #FFF;*/ul.MenuBarHorizontal a.MenuBarItemSubmenu/*background-image: url(SpryMenuBarDown.gif);background-repeat: no-repeat;background-position: 95% 50%;*/ul.MenuBarHorizontal a.MenuBarItemSubmenuHover/*background-image: url(SpryMenuBarDownHover.gif);background-repeat: no-repeat;background-position: 95% 50%;*/*以下是新增加的2个选择器*/ul.MenuBarHorizontal ul acolor: #fff;background-color: #999;background-image:none; /*去掉原来的背景图像*/padding: 0em 0.75em;ul.MenuBarHorizontal ul a:hover, ul.MenuBarHorizontal ul a:focuscolor: #000;background-color: #CCF;background-image:none;以及#nav .specialborder border-left: solid 1px #fff; /*给首页栏目增加左边框*/6正文区-导航布局-Spry菜单栏（2）在代码视图下，删除导航栏各个一级栏目下的二级和三级栏目，然后插入代码以便从数据库中提取子栏目，插入代码后结果如下： 首页 产品中心 医学专栏 新闻中心 服务专区 关于我们 留言板7正文区-标志图像在导航栏div#nav下的div#banner中插入advertise.jpg和textspace.gif，并将advertise.jpg链接到“/js-pic.asp?lm=3”。8正文区-新闻内容显