《动态网站设计与开发》课程设计报告-超酷数码网.docVIP

《动态网站设计与开发》课程设计报告 超 酷 数 码 网 班 级: 11计算机网络技术1班 姓 名： 学 号： 指导教师: 设计时间： 2015 年 5 月 河南理工大学万方科技学院 信息科学与工程系 目 录 1、网站设计概述 1 1.1 设计要求 1 1.2 设计原理 1 1.3 设计环境 1 1.4 小组分工 2 2、设计及学习目的 2 3、网站设计及内容 3 3.1 导航设计 3 3.2 设计过程 4 3.2.1实验准备工作 4 3.2.2站点的创建 4 3.3.3网站logo设计 4 3.3.4前台主页面设计 4 3.3.5后台页面设计 7 3.3.6 新闻板块制作 8 4、部分代码示例 9 4.1 网站头部菜单和搜索代码 10 4.2 新闻焦点图代码 10 4.3 热门新闻代码 11 4.4 后台登录界面代码 11 4.5 后台菜单管理代码 12 5、网站设计小结 13 6、参考资料 13 7、评语及成绩 14 一、网站设计概述： 随着科技的飞速发展，网络成为人们获取、发布和传递信息的主要途径。万维网已经称为了这个时代的最重要的信息传播手段。由于传统数码信息通过报纸书刊进行编辑，造成了更新慢，一般一星期一刊，通过网络来建立网站，可以达到数码信息的实时更新以及维护。所以要基于Internet通过运用DreamWeaver CS3网页开发软件，来实现对一个超酷数码信息网。 设计要求： 通过网页设计的学习与开发，运用ASP来负责页面结构，css负责样式的表现，javascript负责网站的动态行为，来构建一个数码信息网的建立。要求网站的界面简单直接，易于操作和交互性强。具有数码信息网的基本栏目：手机，电脑，平板，笔记本，酷玩，数码评测等栏目。 设计原理： 用所学内容，以表格、列表、超链接、css和js为基础，利用DreamWeaver CS3网页开发软件来实现对数码新闻网站的编写。 设计环境（使用的软件）： 以windows xp为平台，利用DreamWeaver CS3网页开发软件，美图秀秀图片编辑工具来设计和编写超酷数码信息网。通过“小型web服务器软件”来进行搭建网站，最后在IE浏览器下进行测试和修改。 小组分工： 小组成员一起讨论网站的框架以及分类，包括网站的元素选择等。 刘星辰：负责网站的主要构成部分，首页以及部分核心代码的编写，以及新闻模版的编写。 王志辉：负责手机新闻素材的搜集和整理，通过组长给定的模版来进行手机新闻版块的制作。 李展：负责电脑新闻素材的搜集和整理，通过组长给定的模版来进行电脑新闻版块的制作。 闫恒：负责科技新闻素材的搜集和整理，通过组长给定的模版来进行科技新闻版块的制作。 崔晨：负责平板电脑新闻素材的搜集和整理，通过组长给定的模版来进行平板电脑版块的制作。 任瑶：负责家电新闻素材的搜集和整理，通过组长给定的模版来进行家电新闻版块的制作。 我所分配的任务：负责网站的主要构成部分，首页以及部分核心代码的编写，以及新闻模版的编写。 二、设计及学习目的： 1.掌握HTML的基本结构，要求熟练运用列表、表格、css、js、网站多媒体等标记的了解和使用，学会学以致用。 2.熟悉并掌握Dreamweaver界面和其操作，熟悉使用dreamweaver建立站点及制作网页； 3.掌握网站的维护和修改。 4.掌握网站的发布方法，通过域名来进行访问网站。 三、网站设计及内容： 设计一个导航框架(结构图如下)： 通过调查来定位数码信息网的分类和栏目。 网站分为6大类：电脑、手机、平板、家电、科技、酷玩 评测 网站的框架分为四行三列： 第一行第一列为网站top部分。Top是logo与菜单栏部分 第二行为焦点图新闻部分。包括有焦点新闻，最近更新的新闻，还有推荐阅读的新闻。 第三列为滚动新闻。以图片的方式进行滚动，鼠标移动图片上显示新闻标题，以新闻+图片方式，使界面不至于单一。 第四列为网站各板块新闻，每个板块第一个新闻有略缩图进行观看。以每板块10个新闻为最好。右边部分用以衬托出新闻的热门，通过点击量来进行排列，为用户推荐最新、最火的新闻动向。 设计过程（制作步骤、设计、数据、布局） 实验准备工作 实验素材包括文字内容、图片、视频等的搜集，相关软件的安装Logo制作. （2）站点的创建 打开“dreamweaver cs3”在“菜单栏”中找到“站点”选中【新建一个站点】，设置网站的名称以及网站本地文件的路径。然后打开小型web服务器软件，设置好网站的路径，来