1、 网站建设实习报告学 院:信息技术学院专 业:计算机网络技术姓 名:第二小组班 级:10 高职网络(1 )班指导教师:张媛、张萍、付峰小组成员:马 瑞李 毅、彭旺景、陈 豪仵江波、马红成、胡凯威目录目录 1摘要 2概述 3第一章 项目需求分析 41.1 需求分析 .41.2 实训目的 .41.3 所需软件 5第二章 网站设计 02.1 网站主题 02.2 网站材料 02.3 网站的制作工具 02.4 制作网站的网页 02.5 上传测试网站 1第三章 网页设计 23.1 首页的设计与制作 23.2 资料的搜集 23.3 建立模板和库 23.4 各个子网页的建立 .23.5 实现网页间的链接 .3
2、3.6 实现动静态网页的结合 .4第四章 Linux 操作系统 .0第五章 后台管理 25.1 登陆页面的设计 25.2 新闻发布系统 3第六章 实训过程 56.1 收集网站建设的资料和信息 56.2 确定每个页面的布局 56.3 先规划好首页要表达的内容 56.4 将其余页面分发给特定的几人 56.5 超链接 56.6 整理 66.7 美工 66.8 前后台 66.9 功能实现 6总结 7摘要网络发展到今天,建立网站已经成为一个很普遍的问题了,对于一个企业来说,建设好自己的网站可以抢占新世纪发展的战略要点。建立新的企业形象,直接开拓国际市场,开展 24 小时网上营销及高效廉价的定向宣传;与客
3、户建立最直接的交流机制,缩短推出新产品和打开新市场的周期,与富有吸引力的客户群发展客户关系网;与自己的销售人员保持联系,进一步面向本地市场。出色的网站吸引人的地方不仅仅在于其内容,鲜明的结构和独特的风格往往能起到画龙点睛的作用。一个网站即使内容再丰富,如果网站的结构和风格不能吸引人,那也是毫无价值的。往往整个网站的风格是一个网站吸引浏览者的魅力所在,因此应当根据网站的主题、内容和浏览者的要求来设计自己独特的网站风格。整个网站的结构和内容都是在开始设计之前就已经经过详细的计划的。其实任何网站都一样:企业网站的宗旨就是对外宣传企业形象,发布企业最新的企业产品,其服务群体就是为对其产品感兴趣的客户或
4、者正在使用企业产品的用户服务,这就是企业网站的建设方向;个人网站的宗旨就是宣传自己,提供一个自身和外界交流的场所;由此可见,网站的设计方向是依据网站的客户、服务群体等多方面来确定的。概述本站是一个用 Dreamweaver、Flash、PHP、SQL server2000 设计编写的美食网站,主要包括 6 个模块:首页,菜谱,厨房,食材,饮食健康,饮食资讯等。通过本网站系统能提供各种与美食相关的信息以及各种美食信息的交流。与其他企业网站一样,也应通过Internet 来对外宣传网站建立以 Dreamweaver,Flash 等技术编写的前台表现模块,为用户提供方便快捷的信息服务与交流。随着网络
5、技术的迅猛发展,互联网的快速发展使越来越多的人选择从互联网上获取信息,因此,互联网逐渐成为一个宽广的信息发布平台和获取信息的平台。本网站系统就要有用户注册和新闻发布两大动态功能。通过以 PHP 编写,以 SQL 2000 作为后台数据库的网站后台管理系统,制作了一个简单的美食网站系统,实现了美食网站用户登陆、注册以及新闻发布等功能。第一章 项目需求分析1.1 需求分析互联网丰富多彩,这些信息大多通过网页与用户进行交互。网页的实现形式多种多样,无论是短小精悍的个人主页,还是结构清晰、丰富的大型网站,网站的需求分析和规划设计都要放在第一步,因为它直接关系到网站的功能是否完善,质量是否能够达到保证。
6、1.2 实训目的网站的建设不仅仅是制作主页的问题,还需要考虑网站的定位、目标用户、网站内容、服务事项、空间方案、安全性、艺术设计、数据库技术等等。任何网站在建设之前就必须明确方向、用途和服务群体等一系列的问题,写出详尽的建站计划,可以说这是网站建设的根源和核心所在。作为一个美食网站,我们的服务群体及访问者都定位在爱好和热爱美食的大众,为为大家服务就是我们这个网站的目的和方向。从整个页面上可以看出,我们的这个整个网站涉及所有热爱美食的人。整个网站的结构和内容都是在开始设计之前就已经经过详细的计划的。其实任何网站都一样,企业网站的宗旨就是对外宣传企业形象,发布企业最新的企业产品,其服务群体就是为对
7、其产品感兴趣的客户或者正在使用企业产品的用户服务,这就是企业网站的建设方向;个人网站的宗旨就是宣传自己,提供一个自身和外界交流的场所;由此可见,网站的设计方向是依据网站的客户、服务群体等多方面来确定的。通过综合实训进一步巩固,深化和拓展学生的理论知识与专业技能。训练和培养学生获取信息和处理信息的能力,充分培养和提高学生的动手能力,学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图象资料、flash 动画和网页特效等。培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及其基本工作素质。培养学生理论联系实际的工作作风,严肃认真的科学态度以及独立工作的能力,树立自信心。1
8、.3 所需软件网页编辑排版 Macromedia Dreamweaver 8、网页图像制作软件 Photo CS2、网页动画制件软件 Flash、ACCESS 数据库、动态网页编程语言 ASP第二章 网站设计2.1 网站主题我们网站的主旨在于从各个方面全面的介绍美食,展示美食,包括不同地方、不同民族的美食,网站里还包括美食的简介和美食的做法,为爱好美食的食友建立一个好的的平台。同时,网站里的每一个网页都有统一的风格,每一个网页的主题色彩都是橘黄色,最重要的是做出自己的风格,给浏览者和美食爱好者以好的视觉感受。 2.2 网站材料 主要在网站上搜集所要的网页信息,包括图片、文字、相关的新闻。同时,
9、查询相关的书籍、百度和素材光盘等方式收集所需的文字资料,图象资料,flash 动画和网页特效等,用以得来更加具有说服力的页面。要想做一个比较好的网站,能够给浏览者好的欣赏感受,就要尽量搜集材料,搜集得材料越多,以后制作网站就越容易。精选自己收集的材料,作为自己制作网页的素材,这样就可以做好一个好的网站。2.3 网站的制作工具 做网页时主要使用的是 Deamweaver。另外,为了处理网页中的其他元素,还使用了Photoshop、Macromedia Fireworks、Macromedia Flash 等软件。2.4 制作网站的网页 素材、风格、模板都设计好以后,下一步就是具体的制作网页。制作
10、网站时,首先要做的就是站点的规划,建立一个本地站点,建立的各个页面都应该放在本地站点中,在网页制作时所需的各个元素都进行了统一的管理,建立统一的文件夹放同一类型的文件,我在制作时建立了“image”文件夹来存放图片。同时,网页中的 css 样式文件也应统一管理,做到有条不紊,我们设计的网站的新闻发布如下图:图 3-1 新闻发布插入相关链接的菜单栏,一方面为了布局合理,弥补左下角的空缺,另一方面给浏览者提供放表的导航,点击其中任意一个都会连接到其他网页,如点击返回登陆就会连接到下面网页:图 3-2 后台登陆2.5 上传测试网站网页制作完毕以后,要进行反复的测试,保存后在 IE 浏览器上反复运行自
11、己的网站,用以发现设计中的缺陷并及时改正。第三章 网页设计3.1 首页的设计与制作在静态网页制作中首先我们要考虑的就是主页面的布局以及色彩。主页的设计是整个网站的灵魂,构思导航栏的分类,然后是整体规划,每一版块都有其个性的色彩,清晰明了,便于阅读浏览,我们构思大致分几部分,首页、菜谱、厨房、食材、饮食健康、饮食咨询、后台登录等七大板块。图 3-1 网站主页3.2 资料的搜集主页的导航栏设计好后,接下来就是对主页导航栏的各个内容进行资料的收集,我们采用大量的资料收集再对资料进行塞选,得到最适合导航栏内容的资料。素材的选择,要符合网站的主题,图片的大小要符合模板的轮廓,我们将不符合模板的用软件处理
12、编辑,然后放入站点底下,进行图文的链接和排版。3.3 建立模板和库此次网站建设中我们决定大量运用模板和库,运用模板和库对于建立网站提供便利同时也为我们减少大量的工序。3.4 各个子网页的建立我们设计好模板后只要在可编辑区依次编辑所需资料就可,运用模板建立子网页少了很多工序,为我们节省大量的时间。尽管我们建立了模板,但我们在建立子网时很小心,因为一张图片的大小插入就有可能破坏整个模板的结构尤其在使用表格时,因此我们对所插入的图片和表格都得进行测量,做到不影响网站整体的美观。图 3-2 分页美食资讯图 3-3 分页饮食菜谱3.5 实现网页间的链接做好各个子网和首页后,接下来就是通过链接,将整个网站
13、中的网页链接起来,使各个分页和主页、分页和分页间可以流畅的切换,从而减少人们浏览网页的时间。图 3-4 分页链接3.6 实现动静态网页的结合将静态网页转换,插入动态效果使得我们在后台操作时,插入的时事新闻可以在网页中实现,完成新闻发布的效果。图 3-5 实现动静态网页代码第四章 Linux 操作系统发布服务器: SFTP 用户名: SFTP 密码: TelNet 用户名: TelNet 密码: MySql 5.0 及以上版本 Php 5.0 及以上版本 Apache 2.0 及以上版本 主站绑定域名:www.v- 默认首页:index.html 设置 php 解析 htm 和 html 扩展名
14、 博客绑定域名: 默认首页:index.php 网站目录结构: v-ec(主站) upload: 写权限 w3cgroup(博客) upload: 写权限 Apache、Php 及 MySql 设置 httpd.conf 配置: Linux 路径:/usr/local/apache/conf/httpd.conf #忽略大小写 LoadModule speling_module modules/mod_speling.so CheckSpelling On #设置默认首页 DirectoryIndex index.htm index.html index.php #设置 php 能解析的文件
15、AddType application/x-httpd-php .php AddType application/x-httpd-php .htm AddType application/x-httpd-php .html #设置多域名绑定,请将 192.168.11.11 更改为真实服务器 IP NameVirtualHost 192.168.11.11:80 #绑定主域名 www.v-,请将 192.168.11.11 更改为真实服务器 IP DocumentRoot /www/docs/v-ec ServerName www.v- ServerAlias www.v- # ErrorLo
16、g logs/www.v--error_log # CustomLog logs/www.v--access_log common #绑定博客域名 ,请将 192.168.11.11 更改为真实服务器 IP # ServerAdmin DocumentRoot /www/docs/w3cgroup ServerName ServerAlias # ErrorLog logs/-error_log # CustomLog logs/-access_log common php.ini 设置: Linux 路径:/usr/local/Zend/etc/php.ini ;设置开始短标签模式 s
17、hort_open_tag = On ;开启显示错误,调试状态设置为 On,正式上线设置为 Off display_errors = Off ;设置错误报告方式 error_reporting = E_ALL 启用 gd 库 extension=php_gd2.dll ;启用 mysql extension=php_mysql.dll ;设置时区 date.timezone = PRC f(windows 系统下名为 my.ini)设置: Linux 路径:/etc/f ;默认字符 default-character-set=utf8 ;表名、字段名的不区分大小写 lower_case_tab
18、le_names = 1 ;允许同时连接的数量 max_connections = 1024 ;关闭连接前的等待时间 wait_timeout = 7200第五章 后台管理每个网站都是需要一个后台管理系统,对整个网站进行数据的管理。在后台中只有管理人员通过口令和密码验证才能进入管理后台的主页面。在后台管理中可以进行留言的查看、留言回复、更新和注册用户信息的查看和注册信息的修改。注册信息的查看和修改步骤基本一致。后台管理设计的逻辑拓扑图如下所示:图 5-1 后台管理设计的逻辑拓扑图5.1 登陆页面的设计登陆页面的设计,我们对用户名和密码进行了加密,只允许管理员能登陆进去,在页面上,我们设计了自己
19、的名称“春色撩人登录系统” ,在登陆的下面设计了“welcome to cslr com”的字样,让浏览者一样了然,字体大小适中,颜色搭配合理,格调淡雅,给浏览者好的视觉感受,后台登录页面图如下:图 5-1 后台登陆页面后台登陆页面的代码:图 5-2 后台登陆页面的代码5.2 新闻发布系统新闻发布系统,我们可以用这个后台系统将新闻发布在网页上,实现新闻发布的功能,浏览者可以通过主页面浏览到我们发布的新闻内容,新闻发布系统图如下:图 5-2 新闻发布系统新闻发布系统代码如下:图 5-3 新闻发布系统代码第六章 实训过程6.1 收集网站建设的资料和信息通过我们小组成员的不断讨论,最后我们小组把本次
20、的项目实训定为饮食一类,俗话说的好:民以食为天!我们觉得这关乎于我们的健康,与我们的生活息息相关,我们小组的成员在网上找了相关的图片以及资料,向我们的实习老师咨询了相关的专业知识,大家团结起来一起把项目实训完成。6.2 确定每个页面的布局在网站上下载了相关模板,然后将任务分配给小组每个人,开始整理素材,制定框架。组长:马瑞编程:彭旺景、陈豪美工:李毅、胡凯威秘书:马红成、仵江波6.3 先规划好首页要表达的内容将规划好的内容罗列到纸上,小组进行讨论、研究;导航栏,网页布局,版权,网站的风格、网站的色彩搭配。6.4 将其余页面分发给特定的几人做出基本框架,然后开始工作,各组成员各司其职,将分页分配
21、给各个成员完成,遇到问题找同组人商量,解决不了的向老师请教,保证页面的质量。6.5 超链接给每个页面都设置与之相应的超链接,使主页与分页、分页与分页之间可以相互链接。6.6 整理待到所有页面被制作好后,整合在一起用超链接相互连接起来,保证所有的链接没有任何问题。6.7 美工整体框架构建起来之后在通过美工将页面整理到最佳状态。6.8 前后台前台页面制作完成后着手处理后台数据库,新闻发布,注册、登录等链接数据库。6.9 功能实现从前台登录后台管理,实现添加新闻模块、修改新闻模块的功能,并且能使发布的新闻显示在前台的新闻动态里。总结我们在本次实训过程中采用了在开发静态网页方面比较普遍使用的 HTML
22、 开发语言,当然在制作的过程中碰到过一些比较棘手的问题都一一解决了,让我在解决问题方面的能力得到了提高。当然,最终的做品还是有一些不完善的地方,我也不是非常满意,比如:网页的整体布局还是有一些缺陷,后台管理还有一些不完美的地方。虽然存在各种各样的问题,但是,这次动手实践经历的意义也是显而易见的。整个开发的过程对我来说是一次将理论应用于实践的过程,是将以前所学知识充分利用的过程,是一次真正的实践过程。另外,亲自动手也让自己看到了自身能力的不足,看到了理想与现实之间的差距,这一切都需要今后进一步加强学习理论知识与真正动手做一些课题来弥补。总体说来,在这次网站设计中,学到了很多在课堂内所学不到的知识,真正拓展了自己的能力,是一次难得的历练经历收获很大。通过这段时间的学习,在老师的指导下,明确操作的具体步骤和建设网站的基本理念、丰富了我们 HTML、PHP、Linux 和 Mysql 结合起来运用的技巧,用后台管理前台,在 Linux操作系统上发布网站。通过这一段时间的实训,我们才初步掌握了网站设计的基本方法,解决在创建过程中的种种问题,在问题出现过程中,我们请教了专业老师,同时在书本上和网上查找相关的知识,极大的丰富了我们的知识面,让我们不再局限于书本上的知识,同时开阔了我们的视野,让我们能够把所学到的东西运用于实践当中。