去年老生课程设计报告.pdf
动态网站设计与开发课程设计报告动态网站设计与开发课程设计报告超超 酷酷 数数 码码 网网班级:11 计算机网络技术 1 班姓名：刘 星 辰学号：111754030121指导教师:罗 刘 敏设计时间：2015 年 5 月河南理工大学万方科技学院信息科学与工程系目目 录录1、网站设计概述.11.1 设计要求.11.2 设计原理.11.3 设计环境.11.4 小组分工.12、设计及学习目的.23、网站设计及内容.33.1 导航设计.33.2 设计过程.43.2.1 实验准备工作. 43.2.2 站点的创建. 43.3.3 网站 logo 设计. 43.3.4 前台主页面设计. 43.3.5 后台页面设计. 73.3.6 新闻板块制作. 84、部分代码示例.94.1 网站头部菜单和搜索代码.104.2 新闻焦点图代码. 104.3 热门新闻代码. 114.4 后台登录界面代码. 114.5 后台菜单管理代码. 125、网站设计小结.136、参考资料.147、评语及成绩.15第 1 页一、网站设计概述：一、网站设计概述：随着科技的飞速发展，网络成为人们获取、发布和传递信息的主要途径。万维网已经称为了这个时代的最重要的信息传播手段。由于传统数码信息通过报纸书刊进行编辑，造成了更新慢，一般一星期一刊，通过网络来建立网站，可以达到数码信息的实时更新以及维护。所以要基于 Internet 通过运用 DreamWeaverCS3网页开发软件， 来实现对一个超酷数码信息网。1、设计设计要求要求：通过网页设计的学习与开发， 运用 ASP 来负责页面结构， css 负责样式的表现， javascript负责网站的动态行为，来构建一个数码信息网的建立。要求网站的界面简单直接，易于操作和交互性强。具有数码信息网的基本栏目：手机，电脑，平板，笔记本，酷玩，数码评测等栏目。2、设计设计原理原理：用所学内容，以表格、列表、超链接、css 和 js 为基础，利用 DreamWeaver CS3网页开发软件来实现对数码新闻网站的编写。3、设计设计环境（使用的软件）环境（使用的软件）：以windows xp为平台，利用DreamWeaver CS3网页开发软件，美图秀秀图片编辑工具来设计和编写超酷数码信息网。通过“小型 web 服务器软件”来进行搭建网站，最后在 IE 浏览器下进行测试和修改。4 4、小组分工：小组分工：小组成员一起讨论网站的框架以及分类，包括网站的元素选择等。刘星辰：负责网站的主要构成部分，首页以及部分核心代码的编写，以及新闻模版的编写。王志辉：负责手机新闻素材的搜集和整理，通过组长给定的模版来进行手机新闻版块的制作。李展：负责电脑新闻素材的搜集和整理，通过组长给定的模版来进行电脑新闻版块的制作。第 2 页闫恒：负责科技新闻素材的搜集和整理，通过组长给定的模版来进行科技新闻版块的制作。崔晨：负责平板电脑新闻素材的搜集和整理，通过组长给定的模版来进行平板电脑版块的制作。任瑶：负责家电新闻素材的搜集和整理，通过组长给定的模版来进行家电新闻版块的制作。我所分配的任务：负责网站的主要构成部分，首页以及部分核心代码的编写，以及新闻模版的编写。二、设计及学习目的：二、设计及学习目的：1.掌握 HTML 的基本结构，要求熟练运用列表、表格、css、js、网站多媒体等标记的了解和使用，学会学以致用。2.熟悉并掌握 Dreamweaver 界面和其操作， 熟悉使用 dreamweaver 建立站点及制作网页；3.掌握网站的维护和修改。4.掌握网站的发布方法，通过域名来进行访问网站。第 3 页三、网站设计及内容：三、网站设计及内容：1、设计一个导航框架(结构图如下)：通过调查来定位数码信息网的分类和栏目。网站分为 6 大类：电脑、手机、平板、家电、科技、酷玩 评测网站的框架分为四行三列：第一行第一列为网站 top 部分。Top 是 logo 与菜单栏部分第二行为焦点图新闻部分。包括有焦点新闻，最近更新的新闻，还有推荐阅读的新闻。第三列为滚动新闻。以图片的方式进行滚动，鼠标移动图片上显示新闻标题，以新闻+3.1 网站的分栏图3.2 网站的框架第 4 页图片方式，使界面不至于单一。第四列为网站各板块新闻，每个板块第一个新闻有略缩图进行观看。以每板块 10 个新闻为最好。右边部分用以衬托出新闻的热门，通过点击量来进行排列，为用户推荐最新、最火的新闻动向。2、设计过程（制作步骤、设计、数据、布局）（1）实验准备工作实验素材包括文字内容、图片、视频等的搜集，相关软件的安装 Logo 制作.（2）站点的创建打开“dreamweaver cs3”在“菜单栏”中找到“站点”选中【新建一个站点】 ，设置网站的名称以及网站本地文件的路径。然后打开小型 web 服务器软件，设置好网站的路径，来进行网站的搭建。搭建完成后可以在浏览器地址中输入“http:/localhost”来进行去网站的测试。（3）网站 logo 制作1.打开“美图秀秀图片编辑工具”，选择【新建】一个图片，图片背景选择透明，尺寸输入 240*80.然后选择【确定】2.准备好我们的 logo 素材在“饰品”中选择用户自定义，导入我们的素材两个翅膀和一个魔法阵，调整好位置。选择“文字”中的静态文字，然后输入“炫酷魔法数码新闻网”字号选择 20.然后在新建一个静态文字。最后调整好位置保存即可。（4）前台主页面制作1.打开“dreamweaver cs3”在“菜单栏”中找到“文件”选中【新建】 ，在“新建”文档中，选则常规 类别中选择“基本页” ，基本页中选中“html” ，然后单击【创建】 。2.在“菜单栏”中找到“插入”选中表格，新建一个四行三列的表格，调整好表格的大小，第一行稍微小点选择 240.第二行选择大点，第三行也是 240，第四行选择 500.3.首页中选择“页面属性”设置背景色为白色.使用白色作为背景颜色是因为“白色具有柔和，高雅的意象，而且属于中间性格，男女皆能接受，所以白色也是永远流行的主要颜色，在许多的高科技产品，尤其是和金属材料有关的，几乎都采用白色来传达高级，科技的形象，使用白色时，大多利用不同的层次变化组合或他配其他色彩，才不会过单一，沉闷，而有呆板，僵硬的感觉。 ”4.在第一行中第一列选择“插入”选中图形图像，选中我们制作的 logo 图片。然后插入我们的网站的导航代码。并对导航代码进行适当的修改。代码相见大标题四中菜单代码。如第 5 页图 3.35.第二行是网站焦点图和最新新闻部分，插入焦点图的代码和最新新闻咨询的代码、如图 3.46.第三行是滚动新闻。以图片的方式进行滚动，鼠标移动图片上显示新闻标题，以新闻+图片方式，使界面不至于单一。如图 3.5 所示7.第四列为网站各板块新闻，每个板块第一个新闻有略缩图进行观看。右边部分用以衬托出新闻的热门，通过点击量来进行排列，为用户推荐最新、最火的新闻动向。如图 3.6 所图 3.3 网站的 logo 以及菜单栏图 3.5 图片方式滚动新闻图 3.4 网站的第二部分焦点图第 6 页示。6.最后全部完成后，选中菜单栏中“文件”选中另存为“index.asp” 。打开浏览器，在浏览器地址中输入“localhost” ，对刚才所做的网站进行浏览，对不足部分进行完善和美化。最后效果如图 3.7 所示图 3.6 各板块新闻资讯以及热门文章推荐第 7 页（5）后台页面设计后台页面作为管理整个网站，起到至关重要的左右，后台页面我需要一个登录页面和管理页面。1.登录界面设计新建一个 asp 空白的页面，添加个背景图片和三个文本输入框、三个文本框和两个按钮。如图 3.8 所示2.后台管理界面设计图 3.7 完成后的网站首页图 3.8 后台登录界面第 8 页后台管理界面主要是以新闻的发布， 新闻管理， 另配置浏览版等投票选项。 如图3.9.3.103.11（6）新闻板块制作新闻板块也主要包括关于各个板块发布新闻的浏览，有网站头部，新闻，和热点新闻组成。制作完成后如图 3.12图 3.9 后台管理菜单图 3.10 新闻的发布图 3.11 新闻的管理第 9 页图 3.12 板块页面的制作第 10 页四、部分代码示例四、部分代码示例1.网站头部菜单OTnews_ads(ot0001);OTnews_ads(ot0002);OTnews_ads(ot0003);OTnews_ads(ot0004);2.新闻焦点图代码第 11 页3.热门新闻代码热门文章%Call Index_Vote(false)%OTnews_ads(ot0009);4.后台登录界面代码用户名：第 12 页密 码：验证码： 点击获取验证码!- src=tool/VerCode.asp -5.后台菜单管理代码autoOpenStr= menuSelID= databaseresponse.write(_&_)If OT_Database=access ThenEnd IfCall MenuStr2(menuSelID,0,后台参数配置,sysAdmin.asp?mudi=manage)Call MenuStr2(menuSelID,0,后台人员操作日志,memberLog.asp?mudi=manage)Call MenuStr2(menuSelID,0,后台人员在线纪录,memberOnline.asp?mudi=manage)autoOpenStr= response.write(_)menuSelID=0Set menuexe=conobj.execute(select MT_ID,MT_theme,MT_URL,MT_menuID from OT_menuTree where MT_level=1 andMT_state=1 order by MT_menuIDASC,MT_rankASC)Do Until menuexe.EOFIf menuSelIDmenuexe(MT_menuID) ThenmenuSelID=menuexe(MT_menuID)autoOpenStr=response.write()End IfCall MenuStr2(menuSelID,menuexe(MT_ID),menuexe(MT_theme),menuexe(MT_URL)menuexe.movenextLoopmenuexe.closeSet menuexe=Nothingresponse.write(_)%第 13 页五、网站设计小结五、网站设计小结网页设计，不仅仅一个网站设计得成功与否，很大程度上决定于设计者的规划水平，规划网站就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。通过小组的讨论，虽然有的意见会有冲突，但是最后我们每人说出自己的意见，说出设计方法和思路。制订了网站规划的很多内容，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，你只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。也只有如此制作出来的网页才能有个性、有特色，具有吸引力。有的人说“傻瓜写出机器能识别的代码，程序员写出机器能识别的代码”。在整个网站中，我们通过标记对其，以及标记备注，方便以后网页的维护和修改。网页制作完毕，我们通过小型 web 服务器来模拟网站，进行调试和修改来达到更好的视觉效果。花了一个月的左右终于完成了，网站制订了大改近百个页面。要感谢小组成员陈时浩，闫恒，李展，任瑶，崔晨的配合和讨论，同样也谢谢老师对网站的指导和意见。这次设计给我们的启发就是在写代码的时候标记一定要对其，必要的时候要给出一定的注释，方便以后的阅读和修改，这个好习惯可以让我们在错误的时候快速的发现错误，找到错误，并解决错误。第 14 页六六、参考资料、参考资料1.网页设计与开发郑娅峰主编清华大学出版社2.在你身边为你设计腾讯 CDC 主编 电子工业出版社3.dreamweaver 项目实战李静主讲传智播客团队4.一周 hold 住 html+css张鹏主讲传世博客团队第 15 页七、评语及成绩七、评语及成绩姓名刘星辰刘星辰班级网专网专 1101指导教师罗刘敏罗刘敏题目超炫数码新闻网超炫数码新闻网指导教师评语评定成绩：指导教师签字：年月日
