【网页设计与制作5700字（论文）】

网页设计与制作目录TOC\o"1-2"\h\u10571网页设计与制作 127209摘要 115821一、引言 210614二、MicrosoftFrontPage简介 230415（一）强大的编辑功能 221752（二）方便的网页向导功能 216977（三）完善的站点管理功能 34985（四）Web数据库发布功能 3600（五）与Office其它组件的紧密结合 317636三、网页设计系统理论 327960（一）栏目导航模块设计特点 33081（二）登录模块 428958（三）通知公告模块 48823（四）优秀网页设计网站模块 515630（五）教学资源模块 512302四、网页设计系统的实现 625268（一）注册与登录模块设计与实现 627656（二）新闻发布系统模块的设计与实现 824489（三）在线交流模块设计与实现 1115260五、网页设计系统测试 154655六、总结与展望 1625188参考文献 18摘要随着电子技术、现代通信技术和新媒体技术的高速发展阶段，网络教育作为一种新型战略的教育内容，以其开放的教育资源和良好的交互性吸引了越来越多的人的关注，逐渐成为研究热点。从传统形式以教师为中心规划的教育到以学生为中心发展的网络教育，全面教育正在发生发展变革。网络课程作为网络教育的重要信息载体，也得到了迅速的发展。设计和开发高质量的网络课程是当前教育领域的一个热门话题。本文通过对国内外各种网络课程的分析和研究，深入分析了我国高校网络课程的现实情况，并分析得出网页设计课程的鲜明特征进行系统建模。在研发流程中，采用了模块化的设计方法，最后对在线课程的架构进行了详细的论述，并对两个后台模块(注册登录模块、新闻发布模块等)的开发与实现过程进行了精辟论述。关键词：网络课程；网页设计；设计与开发一、引言在网络时代，网络覆盖范围越来越广，对网络设计技术人员的需求也越来越大。在学校教育的主要科目中，大多数学生准备选择网页设计课程。网页设计主要是通过各种技术如视频、图像、动画、社区语言等进行处理。目前，从学校设计网页的学习内容可以推断，学习内容本质上是案例分析和任务分配的形式。它不会激发学生的创造力和自我意识。如何激发学生的主动学习，如何将学生融入到现代网络技术的发展中，对于出现的所有问题，都需要对教育模式进行再创新，以促进学生对新的网络技术的理解和理解。如何正确的进行网页设计课程，只有教师才能合理的利用有效的资源来提高教育水平。二、MicrosoftFrontPage简介FrontPage是微软推出的Office集成软件的组件之一。FrontPage在整体设计、管理和网站连接方面内置功能十分强大，其内置功能如下:（一）强大的编辑功能FrontPage使用可视化界面对网页进行编辑，具有实力强大的编辑文档功能，可以轻松自如地向网页插入图像、声音、动画制作等媒体系统;FrontPage可以为网页中的交互图像添加动态视图，如振动、飞向、跳跃等;FrontPage提供了诸如添加图标、游动字幕、自定义分页、动态广告牌、默认值的设置等功能。使用FrontPage，可以实际执行上述功能，而无需编写程序语言。FrontPage具有“实时预览”的功能特性，会根据用户添加或编辑的元素组合自动导入HTML核心代码。对于熟练HTML的现有用户，可以使用HTML视图模式与VBScript、JavaScript等一起创建高级详情页面。（二）方便的网页向导功能FrontPage提供了层出不穷的制作模板和Web自定义菜单，例如“公司表示站点向导”、“个体站点向导”、“表单Web页面引导”等等。使用向导完成网站界面主体的设计结构，只需简单和确认信息。（三）完善的站点管理功能FrontPage具有强大实力的网站功能模块，不仅组织创建类型多样的网站，还允许直接导入、复制、删除和上传网站。此外，FrontPage提供了多种三维视图来实现对页面设计的一体化管理，包括统计报表管理、导航管理功能、文件夹集成功能、数据导入和导出等。（四）Web数据库发布功能将信息管理技术与web技术紧密结合，充分整合技术优势，利用Internet实现数据库优势互补，是web开发的必要手段。FrontPage提供了大力支持和数据库集成的方法，为数据库平台对象向导、输入数据表单和创建用于数据访问的Access页面提供专业方向向导。FrontPage通过在Asp文件中插入数据库创建，可以外部访问多种类型的核心数据库(如SQLServer核心数据库、access核心数据库等)。（五）与Office其它组件的紧密结合FrontPage非常类似于其他Office应用程序，如Word、Excel、PowerPoint等。它易于学习和使用，支持拖放技术，并具有在Office应用程序之间共享资源的优势。微软使用HTML作为Office套件包含的通用编码格式。在一些Office网络应用程序中，除了以自己的编码格式保存路径外，还可以将文件完整保存为HTML格式，完整保存到Web文件夹中。三、网页设计系统理论（一）栏目导航模块设计特点橙色和黄色代表温煦和热烈。橙色-黄色渐变效果被用作列导航地图的背景颜色，它在冷蓝色的背景衬托下尤为突出。网页标题让访问者观察了解本课程的内容重点和核心要义，有益于快速找到自己的专业选择。有些专题栏目还有二级导航，引导访问者选择精确的内容形式。如图3.1所示。图3.1栏目导航模块（二）登录模块在本研究中，所有用户都是通过登录门户登录在线课程教育平台，但是不同的账号有不同的使用权限，可以授予系统管理员，由系统管理员设置。如图3.2所示。图3.2登录模块（三）通知公告模块本模块组成带有拖动滚动条的设计，可以通过拖动窗口来显示更多的公告信息。这就是JS实际效果。主要代码设置如下:<选框onmouseover=this.stop风格()=""onmouseout=this.start()scrollAmount=1方向=up宽度=230Height=200edge="0"align="center">填写要滚动的文本，还可以从数据库动态返回数据!</MARQUEE>通知公告模块页面效果如图3.3所示图3.3通知公告模块（四）优秀网页设计网站模块在这个模块中，管理员数据筛选了一些优秀的网页设计网址链接，快捷方便访问者快捷访问。如图3.4所示图3.4优秀网页设计网站模块（五）教学资源模块学习资源模块广泛搜集的背景素材、优秀的内容显示、HTML核心代码、CSS源代码、FLASH源文件等供学生搜索下载。这个模块可以允许某些学生公开发表他们认为优秀的制作材料。如图3.5所示。图3.5教学资源模块四、网页设计系统的实现（一）注册与登录模块设计与实现登录界面主要指注册登陆。新注册用户点击“进入页面”按钮，打开登录页面如图4.1所示。用户输入正确选择的注册资料后，点击“Register”功能按钮，页面将移用“reg2.asp”文件，向数据库中写入逻辑意义的数据区域。图4.1注册界面注册用户可以直接输入登录帐号和账号密码。用户直接登录后，页面调用“logon.asp”文件对用户信息进行资质认证，认证成功完成进入课程网站“Web设计”教育平台功能界面。在“reg2.asp”文件中，向数据库提交用户注册信息的关键代码如下:<%uid=chkstr(trim(request.form("uid")))pwd=chkstr(trim(request.form("pwd")))email=chkstr(trim(request.form("email")))homepage=chkstr(trim(request.form("homepage")))oicq=chkstr(trim(request.form("oicq")))city=chkstr(trim(request.form("city")))sex=chkstr(trim(request.form("sex")))job=chkstr(trim(request.form("job")))iftrim(uid)=""ortrim(pwd)="”ortrim(email)=""then%><scriptlanguage=vbscript>MsgBox"错误:必须填写姓名、密码和电子邮件!”location.href="javascript:history.back()"</script><%elsesetrstmp=conn.execute("SelectuidfromUserWhereuid='"&trim(uid)&""')ifnotrstmp.eofthen07o><scriptlanguage=vbscript>MsgBox”错误:您的用户名已被使用，请重新输入!”location.href="javascript:history.back()"</script><%elseifcity=""thencity=”没填”endififlen(homepage)c8thenhomepage=”没填”endifstr="InsertIntoUser(uid,sex,pwd,email,homepage,city,oicq,job,about,face,penname,regtime)Values("'str=str&uid&”’，”’str=str&sex&”’，”’str=str&pwd&”’，”’str=str&email&”’，”’str=str&homepage&”’，”’setrs=server.createobject("adodb.recordset")setrs=conn.execute("Select*fromUserWhereuid="'&uid&”’，”’%>注册成功后，返回登陆界面进行登陆。（二）新闻发布系统模块的设计与实现本系统模块采用Access作为后台数据库。创建一个名为data的数据库，并在数据库中创建三个表:admin、article和lanmu。admin表内容覆盖2个字段值:user和password划分保存管理员账号和密码信息;lanmu表内容覆盖一个lanmu字段值，用来标签信息所属的列;文章表包含tit,com,pic,lanmu,date等字段，tit用于安全存储信息的标题内容，com用于存储信息的详细信息，pic用于存储插入图片，lanmu用于数据记录的信息属于lanmu表的哪一列。本模块组成中的lanmu表只有这一列。表4.1admin表的详细结构字段名数据类型字段大小说明user文本50管理员登录名password文本50管理员登录密码表4.2article表的详细结构字段名数据类型字段大小说明tit文本50新闻题目pic文本50上传图片date文本50新闻发布日lanmu文本50文章栏目com备注新闻内容表4.3lanmu表详细结构字段名数据类型字段大小说明lanmu文本50栏目名称1用户浏览信息的详细设计当用户在前台服务点击特定功能的编辑记录后，页面自动初始化参数“article_view.asp”，该文件通过运行附赠的asp脚本代码从数据库调出所需媒体新闻的详细信息，并将其数据显示在前台供用户上网浏览。2管理员进行新闻管理的详细设计管理员进入more.asp页面上的“新闻管理门户”网页链接，调用“login.asp”相关文件，打开管理员登录窗口。管理员输入账号密码。在页面登录之前，页面首先调用文件“cklogin.asp”进行密码验证过程。管理员密码登陆后，进入新闻配置界面。您可以修改管理员数字密码，颁布、改动、注销账号。打开链接“在开设专栏中添加编辑文章”，页面会调用“addarticle.asp”文件内容，打开“静态页”页面添加编辑文章。本页面包含文章题目、文字图片、文章链接等界面“添加新闻”。填写文章题目，选择本地上传图片，然后填写完整文章内容，点击“提交”功能按钮，页面会自动调用文件“add.asp”完成新闻(信息)分享功能。点击新闻审核界面的“调换”按钮，可以直接进入相应文章的更改页面。在编辑文章时，还需要调用“add.asp”文件来完成新闻的信息数据库。如果你点击“删除”链接在编辑文章,消息行“删除”按钮的位置将被删除,也就是说,从数据库中删除内容之后,页面会刷新按钮,新闻已被删除后页面将显示在前台。此过程也称为“add.asp”文件来完成。允许用户浏览信息的关键代码存储在“article_view.asp”文件中:<！——#include文件=“conn.asp”><%Idl=request.querystring("id")‘查询id中所有值的集合设置rs=server.createobject(“adodb.recordset”)的记录集Sql="select*fromarticlewhereid="+cstr(idl)rs.opensql,dd=rs(“date”)照片=rs(“pic”)rs.update%>通过以下代码实现的功能是:如果数据库中有照片，删除照片，显示房源新闻内容的左端，并在信息发布日期的右下角显示新闻内容。<%ifpic<>""then07o><imgborder="0"src=pic/<%=rs("pic")%>align="left"><br><%endif%><%=rs("com")%><tdwidth="3%”height="18"></td><%rs.closesetrs=nothingconn.closesetcorm=nothing%><tdwidth="94%”height="18"align="right"><%=dd%></td>。（三）在线交流模块设计与实现在这个模块中，用户可以表达自己的观点和问题，也可以实现回答其他同学的问题，从而阻断用户之间的在线交流。登录后，管理员可以对问题进行过滤，对相应的主题进行修改和删除，也可以设置某一主题的文章作为重点留言或停留在顶部，以便及时实现BBS的基本功能。1在线交流模块的详细设计本模块的数据库设计有三个表:admin表、bbs表、info表。其中管理员表包含admin_name、admin_pass两个字段，分别存储管理员登录名和密码;信息表中存储了论坛的名称、论坛的作者、该作者发表的帖子的总数和该作者回复的总数。对应的字段有title,message,user_name,ip,layer,re_number,uptop,jingpin,re_name,re_time,add_time对应于存储信息论坛标题、论坛标题、论坛内容、版主名字、主机IP、数量的反应,无论是在顶部，最后一个回复者的名字，最后一个回复的时间和消息发布的时间。表4.4admin表的详细结构字段名数据类型字段大小说明Admin_name文本50管理员登录名Admin_pass文本50管理员登录密码表4.5bbs表的详细结构字段名数据类型字段大小说明title文本50帖子标题message文本50帖子内容Usre_name文本50版主名字ip文本50主机iplayer数字长整型所在层数Re_name文本50回复者名字Re_time时间回复时间表4.6info表详细结构字段名数据类型字段大小说明ltname文本50论坛名称zzname文本50论坛名字ztnum数字长整型主体数目remum数字长整型回复数目2建立ASP与Access数据库的连接与Access数据库连接的代码如下:<%dimdbsetdb=server.createobject("adodb.connection")db.open"dbq="&server.mappath("bbs.mdb")&”;driver={microsoftaccessdriver(*.mdb)}”%>在每一个与数据库有读写操作的页面加入<!一##includefile="conn.asp”一>代码，就可以实现ASP与数据库的访问。3界面详细设计登录后，用户进入图4.2所示的界面。在这个页面上，用户在标题中输入消息的标题，在内容中输入消息的详细信息，在名称中输入消息的名称。点击“发送”按钮，页面调用“index.asp”文件中的脚本来处理消息，将新消息中的相关信息写入数据库，并在前台显示。图4.2用户发帖界面用户可以点击消息的任意标题，读取消息的详细内容，并打开回复界面，如图5.3所示。在回答页面上，用户可以说出他们想要什么。点击“回复”按钮，弹出“re.asp”页面，在数据库中写入回复消息并显示在前台。第一个答案在一楼，第二个在二楼，以此类推。4.3浏览及回帖界面关键代码设计"index.asp"文件中处理发帖的脚本如下:<!--#includefile="conn.asp”一><%ifrequest.form("title")<>"”andrequest.form("message")<>""thendimtitle,message,user_name,layer,fid,re_number,iptitle=th(request.form("title"))message=th(request.form("message"))user_name=th(request.form("user_name"))layer=1fid=0renumber=0onnumber=0ip=request.ServerVariables("REMOTE_ADDR")sql="insertintobbs(title,message,user_name,layer,fid,re_number,ip,re_name,ifrequest.QueryString("action")="jingpin"thenid=request.querystring("id")sql="updatebbssetjingpin=1whereid="&iddb.execute(sql)response.redirect"index.asp"endif%>"re.asp"文件中设置置顶的关键脚本如下:<%’以下设为置顶ifrequest.QueryString("action")="ziding"thenid=request.querystring("id")sql="updatebbssetuptop=1whereid="&iddb.execute(sql)response.redirect"index.asp"endif%>五、网页设计系统测试网站建设基本完成，基本功能初步实现，但产品是否达到预期效果，还需要通过一定的方法进行检验。一方面,需要测试该web页面代码是否符合web标准:与此同时,它也需要测试web代码占用的空间的改变之前和之后使用web标准,以及是否打开页面的效果在不同的浏览器中是一致的。对于上述项目，本课题采用相应的方法对结果进行测试和分析。该工具为Firefox浏览器提供的Webdeveloper插件工具中的本地html认证工具，用于检查页面文件是否符合web标准。因为页数太多了，不可能测试每个页面，所以测试一个有代表性的页面。表5.1部分页面的测试结果和说明测试结果：在HTML测试工具与web标准进行比较后，不合规的代码被分为两类:错误和警告。错误是指代码明显不规则，甚至完全不符合语法，这很容易导致代码不能正常工作等问题;