网站开发实习Word文件下载.docx
- 文档编号:22249038
- 上传时间:2023-02-03
- 格式:DOCX
- 页数:22
- 大小:107.53KB
网站开发实习Word文件下载.docx
《网站开发实习Word文件下载.docx》由会员分享,可在线阅读,更多相关《网站开发实习Word文件下载.docx(22页珍藏版)》请在冰豆网上搜索。
.element1
{
width:
250px;
padding:
10px;
border:
5pxsolidgray;
margin:
}
计算过程如下:
250px(宽度)+20px(左右内边距)+10px(左右边框)+20px(左右外边距)=300px
元素(盒模型)的总宽度与总高度应当这样计算:
盒的总宽度=width+padding-left+padding-right+border-left+border-right+margin-left+margin-right
盒的总高度=height+padding-top+padding-bottom+border-top+border-bottom+margin-top+margin-bottom
3.1.2Float属性
XHTML的div元素所形成的盒子(box),默认情况下,是垂直分布的,即水平方向只能有一个盒子,另外一个盒子只能排列在前一个盒子的下方,在CSS术语中,这种元素叫做块级元素(BlockElements),h1、p这些元素都是块级元素;
默认情况下可以在水平方向分布的元素,被称作行内元素(InlineElements),如span、a都是行内元素。
如例1。
例1块级元素与行内元素
<
html>
body>
<
div>
第一个块级元素<
/div>
第二个块级元素,出现在第一个块级元素下方<
ahref="
#"
>
超链是行内元素,这是第一个行内元素<
/a>
第二个行内元素,水平方向位于前一个行内元素右边<
/body>
/html>
网页布局中,为使水平方向可以并行出现两个或者两个以上的例子,需要使用CSS的float属性,能够使盒子在水平方向上浮动。
将例1中的div元素加入float属性,如例2
例2利用CSSfloat属性
divstyle="
float:
left;
1pxsolidred"
第二个块级元素,加入float属性后出现在第一个块级元素右边<
clear:
both"
3.1.3两栏布局页面
下面举例说明DIV与CSS结合制作一个两栏页面,通过这个页面进行扩充,可以制作出三栏页面,并在相应位置放入图片、Flash、文字、数据列表等等。
这种页面布局可以应用到ASP.NET开发网站时母版页中。
例子中有具体的代码说明。
例3两栏布局XHTML文档
!
DOCTYPEhtmlPUBLIC"
-//W3C//DTDXHTML1.0Transitional//EN"
"
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
htmlxmlns="
//www.w3.org/1999/xhtml"
head>
metaname="
keywords"
content="
"
/>
description"
metahttp-equiv="
content-type"
text/html"
title>
两栏页面结构举例<
/title>
linkrel="
stylesheet"
type="
text/css"
href="
2Columns.css"
media="
screen"
/head>
divid="
wrapper"
header"
这里放头部图片或者是Flash文件<
page"
<
content"
<
p>
页面左栏内容<
/p>
sidebar"
页面右栏内容<
footer"
这里是网页下部
例4两栏布局CSS文件(文件名:
2Columns.css)
/*两列页面设计要点author:
wusir
1width=960px
2headerheight(includenavigation):
*/
body{
font-family:
宋体,Arial,Helvetica,sans-serif;
font-size:
12px;
color:
#000000;
margin:
0;
padding:
#wrapper{
width:
960px;
0auto;
#header{
958px;
height:
120px;
0px;
border:
1pxsolidred;
/*Page*/
#page{/*page只设定宽度,不设定高度,说明宽度固定而高度灵活,由这个容器内的内容决定高度*/
8pxauto;
/*Content*/
#content{/*左栏使用float设定*/
float:
left;
658px;
500px;
8px;
1pxsolidgreen;
#sidebar{
right;
258px;
8px;
1pxsolidblue;
/*Footer*/
#footer{
70px;
8pxauto;
1pxsolidorange;
项目开发计划:
3.2ASP.NET动态网站开发
在ASP.NET之前,微软的动态Web编程技术称为ActiveServerPages(ASP,动态服务器页面),ASP是微软公司开发的代替CGI脚本程序的一种应用,它可以与数据库和其它程序进行交互,是一种简单、方便的编程工具。
尽管ASP对于创建动态网站在当时是一种流行的选择,但是它缺乏其它编程技术中的一些重要功能(比如ASP不支持对面向对象技术),微软推出ASP.NET以弥补ASP的缺点。
ASP.NET1.0版本于2002年1月发布,到2005年,ASP.NET2.0版本发布,成为动态网站开发的主流选择,2007年底,随同VisualStudio2008一起,微软发布了ASP.NET3.5,将AJAX技术结合为ASP.NET的标准配置,使得开发动态网站变得前所未有的简单与高效。
3.2.1母版页
母版页就像是PPT文件中的模板,使用母版页后,所有的页面都有统一的风格,如页头与页尾。
母版页不限于只有一个,比如主页为一个母版页,栏目为一个母版页,具体内容页面为另外一个母版页,可以使用DIV+CSS制作好的页面布局,导入母版页。
具体操作办法参见实习步骤。
3.2.2访问数据库
动态网站区分于静态网站,就是动态网站可以访问数据库。
ASP.NET访问数据库有多种办法,其中SQL语句是最基本的要求。
ASP.NET提供有数据源控件和数据绑定控件(在【工具箱】的【数据】选项卡内),可以对数据库进行快捷的访问,本实习部分采用这种办法。
为了分层开发架构的开发,本实习还采用ADO.NET技术,结合数据库存储过程完成分层架构的开发。
3.2.3数据验证
ASP.NET提供了简单易用的数据验证办法,在用户没有输入应该输入的数据或者格式出现错误时,系统可以发出提示信息,指导用户输入正确格式的数据。
3.2.4注册登录功能
ASP.NET3.5集成的安全功能,可以迅速完成用户注册页面、登录页面及用户修改口令等功能,具体操作见操作步骤。
3.3SQLServer
SQLServer是微软公司出品的数据库管理系统,可以与VS2008完美结合。
本实习采用SQLServer数据库,在本应用中,SQLServer2000以上的版本都可以完成工作。
VS2008的集成开发环境(IDE)可以在其内部就完成数据库的创建与操作。
本实习主要完成数据库、数据表的创建与修改,存储过程的创建与修改。
3.4分层开发架构
开发复杂软件或网站时,经常采用分层架构的方式,将复杂的问题简化,同时也为团队协作和今后的软件维护打下良好的基础。
常用的分层架构为三层架构,三层架构为:
展示层(PL)、业务逻辑层(BLL)和数据访问层(DAL)。
结合网站的情况,展示层为用户可见的网页,主要是.aspx和.aspx.cs文件,业务逻辑层是具体的操作,如数据的修改、添加、删除、查询等;
数据访问层是与具体数据库的连接、打开、关闭。
ASP.NET既可以完成分层开发架构的开发,也可以使用简单的不分层(一层方式)完成开发。
本实习步骤中,涉及到这方面的问题,会有提示。
4.需求分析:
4.1需求设计
根据沃克俱乐部所提出的要求,分析该论坛的技术层次需要如下:
●网站应该能够支持用户账户;
●所有用户,无论登录或者未登录,都可以浏览网站上的帖子及评论;
●只有通过认证的用户才可以发帖子或评论;
●通过认证的用户发帖子时,必须提供帖子标题、内容并选择版块;
●通过认证的用户发评论时,必须是针对某一个帖子进行发表;
●每个论坛版块都有至少1个版主,版主可以对本版块的帖子进行管理,如置顶、删除操作
●需要有一个特别的认证账户(网站管理员)可以对所有的用户进行管理,能够更换版主,同时可以对网站上所有帖子、评论进行管理
4.2数据库架构设计
当把ASP.NET设置为基于窗体的身份验证类型之后,系统会自动创建一个ASPNETDB.MDF数据库,并且定义了一系列的数据库表,创建用户账户。
现在需要做的是,根据上一小节的分析定义除系统数据库表之外其它的表结构。
根据分析,需要三个需要手工创建的表:
Columns:
版块表,用来定义俱乐部论坛不同的版块,如健走活动、骑行联盟等。
Posts:
帖子表,会员发布的帖子将被保存在本数据库表中作为一条记录,包括标题、内容、发布时间等。
Comments:
评论表,会员根据某个具体的帖子发布的评论将在本表中被保存为一条记录,包括内容、评论时间等。
2.数据库表结构
表1版块表(表名Columns)结构
列名
数据类型与长度
属性
列名含义说明
ColumnId
int
主键
自动递增
ColumnName
nvarchar(10)
不允许空
版块名称
表2帖子表(表名Posts)结构
PostId
UserId
uniqueidentifier
外键
用户Id
版块Id
Title
nvarchar(40)
帖子标题
Post
nvarchar(4000)
帖子内容
SubmitDate
datetime
发布日期
ShowFlag
bit
是否显示标志
VisitNum
允许空
访问次数
ReplyNum
回复次数
表3评论表(表名Comments)结构
CommentId
帖子Id
Comment
nvarchar(1000)
评论内容
datetime
评论日期
是否显示标记
说明UserId的数据类型是uniqueidentifier,与ASPNETDB数据库中aspnet_Users的主键UserId数据类型一致。
这是一个确保全球唯一的极大的数,用于唯一识别用户账户。
4.3界面设计
用户界面是应用的前端部分,用户通过用户界面与系统交互。
对于Web网站应用系统来说,用户界面是网站的一系列网页。
用户对网站质量的判断,大多是来自于对网页可用性、快捷性的评价,所以确保网页用户界面的直观及方便非常重要。
论坛网站需要如下网页:
●主页:
在该网页中,匿名用户会看到一个“登录”和“注册”链接,而已登录用户则可以进行发新帖与发评论的操作,如果已认证用户为管理员或版主,则可以进行帖子与评论管理。
●版块页:
版块页将列出本版块全部允许显示的帖子,包括帖子标题、作者及发布日期。
●发新帖页:
该网页只能被已认证用户打开访问,用户可以在该网页中发新帖,包括标题、内容与版块,用户名及发布时间则根据当前用户及当前时间自动由系统提交。
●帖子详细内容页:
该网页显示帖子详细内容及对于该帖的评论,匿名用户只能浏览该网页,已认证用户可以添加新评论。
●管理页:
网站管理员、版主可以对帖子及评论进行管理,网站管理员还可以对用户进行管理,比如屏蔽用户及调整版主。
虽然一个动态网站可能由几十个、几百个甚至上千个网页组成,但其实质只有几个网页,通过参数传递的方式,显示众多的网页。
比如帖子详细内容页,即使有几千条帖子,但查看帖子详细内容时,都是通过调用数据库中不同的记录,在帖子详细内容页这一个页面中显示出来。
4.4网站具体制作与代码编写
4.4.1创建数据库
1、创建用户与数据库
(1)打开VS2008,选择菜单【文件】|【新建网站】,将网站位置选择为“文件系统”,目录命名为“ClubForum”,语言选择为“VisualC#”;
选择菜单【网站】|【ASP.NET配置】,出现【ASP.NET网站管理工具】欢迎页面;
(2)单击页面上部的【安全】选项卡(或中部的【安全】链接),此时可以进行创建用户、创建角色及身份验证类型设置;
(3)单击界面左下角【选择身份验证类型】链接,默认设置是【通过本地网络】单选钮,即Windows身份验证,单击【通过Internet】单选钮,将其设置为基于窗体的安全,单击【完成】按钮返回;
(4)在返回的界面中,【用户】窗格由于身份验证类型已经改为基于窗体的安全,因此现在可以创建用户及管理用户,
(5)单击【创建用户】链接,提示进行用户名、密码等的输入,在输入时,注意保证左下角的【活动用户】复选框为选中状态(默认为选中),否则用户将无法登录网站。
用户账户内容的输入会进行验证检查,比如保证用户名为唯一,密码满足特定强度(默认至少为七个字符长,并至少包含一个非字母数据字符),电子邮件符合正确格式等,如果输入无效数据,将显示验证错误消息,禁止创建新用户。
如果没有错误,单击【创建用户】按钮,有创建用户完成的信息提示,用户创建完成。
在【ASP.NET网站管理工具】页面内,创建一个用户名Admin,再创建几个普通用户,用户名自己设定,注意记录下密码,供以后使用(数据表中的密码已经被加密,无法看出明文密码)。
同时创建一个Administrator用户角色,将用户名Admin加入这个角色。
在设置基于窗体的安全之后,系统会自动创建一个名为ASPNETDB的数据库。
关闭ASP.NET管理工具,进入ClubForum网站,在解决方案资源管理器中,单击上方的【刷新】按钮,再单击App_Data文件夹前边的“+”号,可以看到该文件夹中存在一个系统新建的数据库ASPNETDB.MDF。
进入数据库资源管理器,观察ASPNETDB数据库的表,其中有11个系统表。
有两个表与账户密切相关,它们是aspnet_Users和aspnet_Membership,这两个表存储用户的账户信息,对网站的每个注册用户,这两个表中将有一条对应的记录。
aspnet_Users表包含标识用户的基本列,特别是用户名。
aspnet_Membership表包含注册用户所提供的信息,如电子邮件地址、密码、账户创建时间、安全问题与答案、用户是否为活动状态等。
ASPNETDB数据库,尤其是aspnet_Users和aspnet_Membership数据库表,将在实际的网站开发中有极大的用处。
2、在【服务器资源管理器】界面,单击“ASPNETDB.MDF”前面的“+”号,右击【表】,单击【添加新表】,将4.2讨论的数据表结构创建三个新表。
并在Columns表中添加两到三条记录,如健走、骑行、游泳等,作为实验数据供开发使用。
3、连接数据库
数据库的连接方式在web.config文件中设置。
通过在appSetting元素中添加一个数据库连接字符串ConnectionString来实现,代码如下:
appSettings>
addkey="
ConnectionString"
value="
DataSource=.\SQLEXPRESS;
AttachDbFilename=|DataDirectory|\ASPNETDB.MDF;
IntegratedSecurity=True;
UserInstance=True"
/appSettings>
其中的value值为连接字符串,可以在第2步中右击“ASPNETDB.MDF”文件,选择【属性】,查找其“连接字符串”属性,将其属性值复制粘贴即可。
4.4.2创建母版页
在【解决方案资源管理器】右击,单击【添加新项】,在对话框中选择【母版页】,使用默认文件名,MasterPage.master,在【源】视图,可以把<
部分的<
asp:
ContentPlaceHolder>
元素删除,只保留<
部分的元素,将已经制作好的网页布局的页头部分HTML代码放入<
部分的
ContentPlaceHolderid="
ContentPlaceHolder1"
runat="
server"
/asp:
上部,将页脚部分放入其下部,将正文部分放入其中间,这样的结果,以后所有以这个母版页为母版的页面,都有相同的页头与页脚。
删除创建网站时默认建立的Default.aspx页面,重新创建一个主页名为Index.aspx,注意在【添加新项】对话框,保证【选择母版页】选项被选中,这时就可以选择已经制作好的母版页。
以后的页面都要选定这个母版页,保证整个网站的页面是统一风格。
如果要设定主页、栏目页及帖子详细内容页的正文部分有不同的布局,可以在具体的页面内进行调整。
在主页Index.aspx的<
元素内,将前述网页布局(例3)正文部分内容放入,在【设计】视图检查效果。
4.4.3创建登录页与注册页
登录页命名为Login.aspx,注册页命名为Register.aspx,注意这两个网页的母版页仍然选择MasterPage.master,将【工具箱】中【登录】内的控件Login和CreateUserWizard分别拖放到这两个网页上,即完成了登录页面与注册页面的制作。
如果想把用户登录功能做到主页上并提供更好的用户体验界面,可以调整Login控件,并结合【登录】选项卡内的其它控件如LoginView、LoginName等,制作到主页上。
4.4.4制作发新帖页
创建一个发新帖的页面,命名为NewPost.aspx。
已登录用户可以使用这个页面发新帖,实际对应于在数据表Posts中加入一条新记录。
要加入一条新记录,需要提供这条记录需要的所有字段的值。
注意这些字段的值,需要用户提供只有三个,标题(Title)、内容(Post)和栏目(ColumnId),其它字段的值由数据表自动生成(如PostId)或系统提供(如UserId)。
由于需要用户提供的信息只有栏目、标题与内容,所以在NewPost.aspx页面添加三个控件,对应这三个信息由用户选择或输入,具体控件的布局由自己完成。
●DropDownList控件的数据绑定
首先拖放一个DropDownList控件到页面,将其命名为ddlColumn,这个下拉框为用户提供可选栏目,其工作原理为:
用户在下拉框
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网站 开发 实习