去年老生的课程设计报告.doc

《动态网站设计与开发》课程设计报告 超 酷 数 码 网 班 级: 11计算机网络技术1班 姓 名： 刘 星 辰 学 号： 111754030121 指导教师: 罗 刘 敏 设计时间： 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网页开发软件，来实现对一个超酷数码信息网。 设计要求原理环境（使用的软件） 网站分为6大类：电脑、手机、平板、家电、科技、酷玩 评测 网站的框架分为四行三列： 第一行第一列为网站top部分。Top是logo与菜单栏部分 第二行为焦点图新闻部分。包括有焦点新闻，最近更新的新闻，还有推荐阅读的新闻。 第三列为滚动新闻。以图片的方式进行滚动，鼠标移动图片上显示新闻标题，以新闻+图片方式，使界面不至于单一。 第四列为网站各板块新闻，每个板块第一个新闻有略缩图进行观看。以每板块10个新闻为最好。右边部分用以衬托出新闻的热门，通过点击量来进行排列，为用户推荐最新、最火的新闻动向。 设计过程（制作步骤、设计、数据、布局） 实验准备工作 实验素材包括文字内容、图片、视频等的搜集，相关软件的安装Logo制作. （2）站点的创建 打开“dreamweaver cs3”在“菜单栏”中找到“站点”选中【新建一个站点】，设置网站的名称以及网站本地文件的路径。然后打开小型web服务器软件，设置好网站的路径，来进行网站的搭建。搭建完成后可以在浏览器地址中输入“http://localhost”来进行去网站的测试。 网站logo制作 打开“美图秀秀图片编辑工具”，选择【新建】一个图片，图片背景选择透明，尺寸输入240*80.然后选择【确定】 准备好我们的logo素材在“饰品”中选择用户自定义，导入我们的素材两个翅膀和一个魔法阵，调整好位置。选择“文字”中的静态文字，然后输入“炫酷魔法数码新闻网”字号选择20.然后在新建一个静态文字。最后调整好位置保存即可。 前台主页面制作 打开“dreamweaver cs3”在“菜单栏”中找到“文件”选中【新建】，在“新建”文档中，选则常规 类别中选择“基本页” ，基本页中选中“html”，然后单击【创建】。 在“菜单栏”中找到“插入”选中表格，新建一个四行三列的表格，调整好表格的大小，第一行稍微小点选择240.第二行选择大点，第三行也是240，第四行选择500. 首页中选择“页面属性”设置背景色为白色.使用白色作为背景颜色是因为“白色具有柔和，高雅的意象，而且属于中间性格，男女皆能接受，所以白色也是永远流行的主要颜色，在许多的高科技产品，尤其是和金属材料有关的，几乎都采用白色来传达高级，科技的形象，使用白色时，大多利用不同的层次变化组合或他配其他色彩，才不会过单一，沉闷，而有呆板，僵硬的感觉。 ” 在第一行中第一列选择“插入”选中图形图像，选中我们制作的logo图片。然后插入我们的网站的导航代码。并对导航代码进行适当的修改。代码相见大标题四中菜单代码。如图3.3 第二行是网站焦点图和最新新闻部分，插入焦点图的代码和最新新闻咨询的代码、如图3.4 6.第三行是滚动新闻。以图片的方式进行滚动，鼠标移动图片上显示新闻标题，以新闻+图片方式，使界面不至于单一。如图3.5所示 7.第四列为网站各板块新闻，每个板块第一个新闻有略缩图进行观看。右边部分用以衬托出新闻的热门，通过