个人动态网页的制作Word文件下载.doc
《个人动态网页的制作Word文件下载.doc》由会员分享,可在线阅读,更多相关《个人动态网页的制作Word文件下载.doc(36页珍藏版)》请在冰豆网上搜索。
![个人动态网页的制作Word文件下载.doc](https://file1.bdocx.com/fileroot1/2022-10/7/5a1ee4c9-6296-4993-8b24-030b38136ea6/5a1ee4c9-6296-4993-8b24-030b38136ea61.gif)
入学年级
专业
计算机科学与技术
所属学习中心
名称
毕业论文(设计)
题目
指导教师意见:
评分:
指导教师(签名)
年月日
评审意见:
评审组长(签名)
备
注
西南大学网络教育学院
毕业论文(设计)评定表
目录
摘要………………………………………………………………………………………………4
绪论………………………………………………………………………………………………5
一、开发工具及环境搭建……………………………………………………………………5
1-1、开发工具……………………………………………………………………………5
1-2、IIS环境搭建………………………………………………………………………6
二、个人网页设计及制作……………………………………………………………………9
2-1、设计个人网站首页及相关页面…………………………………………………9
2-2、个人网站网页制作………………………………………………………………16
2-2-1、htmlcss简介………………………………………………………………16
2-2-1、网页制作………………………………………………………………………18
三、ASP简介及ASP技术工作原理…………………………………………………………20
3-1、asp动态网站脚本语言…………………………………………………………20
3-2、MicrosoftOfficeAccess简介………………………………………………20
3-3、asp访问数据库……………………………………………………………………21
四、网站内容管理系统………………………………………………………………………23
4-1、数据表的设计………………………………………………………………………23
4-1-1、管理员登录表设计…………………………………………………………23
4-1-2、个人动态表设计………………………………………………………………24
4-2、后台界面设计………………………………………………………………………24
4-3、后台功能简介………………………………………………………………………27
五、系统实现……………………………………………………………………………………28
5-1、个人首页………………………………………………………………………………28
5-2、管理员登录……………………………………………………………………………28
5-3、发布个人动态…………………………………………………………………………31
5-4、打包文件说明…………………………………………………………………………34
六、结束语………………………………………………………………………………………35
参考文献………………………………………………………………………………………35
致谢………………………………………………………………………………………………36
摘要
随着经济社会的发展,计算机已被应用到社会生活的各个领域。
与此同时,互联网作为信息技术的通信桥梁连接着全球的计算机,而网站作为网络信息主要的表现形式而且还是互联网信息的主要承载者,在Internet上表现出其及其重要的地位,并发挥着其及其重要的作用。
无论是在国内还是国外都得以迅速的发展和壮大,并被人们重视和关注。
互联网已经彻底的改变了世界,互联网的世界里蕴藏着无限的可能,在这种情况下,各行各业及其个人、单位、工厂、企事业等等在网上构筑属于自己的网络信息平台,保护自己的网络资源并在互联网上开辟自己的市场和消费群体,以及构造自己的数字化世界和加强全球范围内不同地域的人们联系交流等等活动也就显的日益重要。
Internet的日益兴起和以网页为载体的网络信息的广泛传播和应用,使得网站的建设及网页制作得到发展的空间,大至大型企业的产品推销、售后服务、解决方案,小至个人网页开发,形形色色,五彩缤纷,网站建设和网页制作也成为计算机网络领域最热门的话题
关键词:
html;
CSS;
ASP;
IIS;
photoshop;
dreamweaver;
acess
绪论
随着Internet的迅速普及,我们已经不再满足于仅仅浏览网页,而是希望更深入地参预到网络中去,Internet的开放性使个人建立自己的网站成为可能,拥有自己的网站也越来越成为一种时尚,同时创建一个能充分体现自我风格和特色的个人网站已经成为互联网用户的新追求。
基于上述背景,根据自己在大学所学的知识,构建一个个人网站平台。
从建站的实际情况出发,经过对相关网站的一番考察和分析,确定了采用asp和access数据库技术,以Dreamweaver作为开发环境,综合运用photoshop和其他设计软件,最终实现个人网站的主要功能。
通过设计一个个人网站,已达到个人推荐,展现自我的一个空间。
网站主要有:
个人动态、个人简介、个人随笔、个人相册和后台管理几个模块。
其中,个人简介是自我介绍,有与我相关的信息。
个人相册则是用来展示我们平时旅游的照片和工作中的作品展示。
个人动态和个人随笔是展示一些个人相关的学习、记事方面文章。
后台管理是管理员进行登录进入的界面,可以对网站个人动态、个人随笔进行相应的管理功能。
真正的做到“学以致用”,“把理论与实践相结合”。
一、开发工具及环境搭建
1-1、开发工具
1、AdobeDreamweaverCS6介绍
dreamweavercs6是世界顶级软件厂商adobe推出的一套拥有可视化编辑界面,用于制作并编辑网站和移动应用程序的网页设计软件。
由于它支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页(通常是标准通用标记语言下的一个应用HTML),对于初级人员,你可以无需编写任何代码就能快速创建web页面。
Dreamweaver现在最新版本已经更新到AdobeDreamweaveCC,对CSS3、html5、javascritp网页制作语言具有良好的支持。
在本文中,我们主要用Dreamweave来制作HTML页面,也就是我们所谓的切图,HTML属性的网页才可以被浏览器所编译。
2、ADOBEPHOTOSHOPCS6介绍
AdobePhotoshop,简称“PS”,是由AdobeSystems开发和发行的图像处理软件。
Photoshop主要处理以像素所构成的数字图像。
使用其众多的编修与绘图工具,可以有效地进行图片编辑工作。
PS有很多功能,在图像、图形、文字、视频、出版等各方面都有涉及。
2003年,AdobePhotoshop8被更名为AdobePhotoshopCS。
2013年7月,Adobe公司推出了新版本的PhotoshopCC,自此,PhotoshopCS6作为AdobeCS系列的最后一个版本被新的CC系列取代。
在本文中,我们主要用PHOTOSHOP来设计个人网页的样式,并对网页中某些图片,小图标部份进行切图。
1-2、环境搭建
在windows
7中实现配置IIS
1、单击【开始】-【控制面板】-【程序】,打开“程序和功能”对话框。
(如图1-1所示)
图1-1程序和功能对话框
2、单击左边菜单栏中【打开或关闭Windows功能】项,打开“Windows功能”对话框,在对话框“组件”列表中,选中“Internet
信息服务(IIS)”项。
(如图1-2所示)
图1-2windows功能对话框
3、选中“Internet
信息服务(IIS)”项,然后单击“确定”即可。
随后系统会自动弹出“正在配置组件”提示框,这时候用户需等待一段时间。
4、点击“完成”按钮,完成IIS的安装。
5、因为我操作的时候我的系统是64位的,所以部份地方还需要单独的设置一下:
网站里的ASP选项打开,需要设置“将错误发送到浏览器”为“TRUE”。
如图1-3
图1-3
应用程序池需要设置兼容32位应用程序,如图1-4
图1-4
二、个人网页设计及制作
2-1、设计个人网站首页及相关页面
1、网站顶部包括个人简介和网站导航条。
代码展示:
<
divclass="
header-section"
>
<
container"
<
imgsrc="
images/p1.jpg"
class="
img-circle"
h1>
欢迎来到我的个人网站
<
span>
!
/span>
/h1>
p>
我的姓名是王从欢,学号:
1511351113001,现在在西南大学网络教育四川省贸易学校学习中心进行学习,学院是计算机与信息科学学院,就读专业是计算机科学与技术。
感谢您访问我的个人网站,在这里你可以了解到关于我的工作、生活的个人动态,还可以在这里看到一些和我有关的照片。
/p>
/div>
--导航条代码-->
navid="
head-nav"
ulclass="
clearfix"
li>
<
ahref="
index.asp"
个人首页<
/a>
/li>
Ahref="
list.asp?
classid=1"
个人动态<
/A>
classid=2"
个人相册<
classid=3"
个人随笔<
/ul>
/nav>
前台效果展示:
2、网站主体部份,第一块为个人动态和个人随笔的动态列表,第二块为个人相册的部分展示,第三块为我的工作地点展示。
这里展示一部份个人动态的代码,个人动态和个人随笔样式是一样的,用的是相同的代码。
个人动态代码展示:
study-grid"
study1-tt1clearfix"
<
h2>
/h2>
h3>
<
更多>
/h3>
study1"
ul>
Atitle=优秀WEB前端UI