新闻发布系统,网页设计,我们也行

    开始了B/S的学习,开始了浏览器前台网页的制作,开始了一段新的征程。
    我们都浏览过各种网页,领略过各式各样的风格。有像百度那样简单大气的,也有像hao123那样复杂齐全的。以前从没有想过这样的网页是如何“炼”的,而在学习了新闻发布系统后,只想说一句:原来是这样子的啊。
    网页设计,有两种方法:一种是表格,一种是div+css。牛腩视频中教我们用的是后者,这也是有一定原因的。
    为什么要使用div+css样式来排版?传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容。改用css排版后,是通过由css定义的大小不一的盒子和盒子嵌套来编排网页。因为用这种方式排版的网页代码简洁,更新方便,能兼容更多的浏览器。
    自己虽然没有接触过用表格去制作网页,但通过跟着视频中用div+css方法制作网页,确实感受到上面所说的优点。下面,就开始具体讲讲用div+css方法来进行网页设计。
    一.设计模型
    先说我们在网页设计中常听的属性名,CSS盒子模型都具有这些属性,所以我们在设计时少不了这一工具的帮助。具体属性如下图所示:


    当然,我们也可以将这些属性转移到现实生活中的盒子上去理解。有一点不同的是,现实中的东西一般不能大于盒子,否则盒子会坏的,而CSS盒子具有弹性,里面的东西大过盒子本身最多把它撑大,但不会损坏。
    二.设计思路
    在网上了解到,传统的网页设计是这样进行的:先考虑好主色调,要用什么类型的图片,用什么字体、颜色等,然后再用PhotoShop这类软件自由的画出来,最后切成小图,再不自由的通过设计HTML生成页面。
    改用CSS排版后,我们的设计思路就相应的发生了转变,主要考虑的是页面内容的语义和结构。在做好网页后,可以轻松地调自己想要的网页风格。 此排版还有一个目的:让代码易读,区块分明,强化代码重用,所以结构很重要。如果用CSS排版,如果客户有什么不满意,改起来也是很容易,也可以定制几种风格的CSS文件供客户选择。
    三.设计流程
    1.用div来定义语义结构;
    2.然后用CSS来美化网页,如加入背景、线条、边框、对齐属性等;
    3.最后在这个CSS定义的盒子内加上内容,如文字、图片等。
    四.设计说明
    在上一步设计流程中,提到了div,那么,我们再对div做一个简单总结,这样,对于设计流程可能就更加清楚些了。
    DIV是层叠样式表中的定位技术,全称Division,即为划分。
    <div>可定义文档中的分区或节。
    <div>标签可以把文档分割为独立地、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。
    如果用id或class来标记<div>,那么该标签的作用更加有效。
    <div>是一个块级元素,浏览器通常会在div元素前后放置一个换行符。
    五.设计实例
    下面以牛腩新闻发布系统的首页制作为实例,将理论与实践相结合。
	a.设置导航栏标题,并使用已编写好的commonCSS样式:

 <head runat="server">
        <title>首页-牛腩新闻发布系统</title>   
        <link href="css/common.css" rel="stylesheet" />
 </head>

	b.设置网页内容,由四个盒子组成,分别为:

(1)top(顶部):

<div id="top">
        <a href ="Default.aspx" ><img src="images/niunanlogo.jpg" width ="160px"/></a>
        <a href ="http://www.tg029.com" target ="_blank" ><img src="images/tg029logo.gif" width ="600px" /></a>
</div>

(2)search(搜索条件):

<div id="search">
        搜索条件:
        <asp:RadioButton ID="radTitle" GroupName ="cond" runat ="server" Text ="标题" Checked ="true" />
        <asp:RadioButton ID="radContent" GroupName ="cond" runat ="server" Text ="内容" Checked ="true" />
        <asp:TextBox ID="txtKey" runat="server" CssClass ="txtKey "></asp:TextBox>
        <asp:ImageButton ID ="ibtnSearch" ImageUrl ="~/images/search.gif" runat ="server" />
</div>  

(3)main(主要内容):

<div id="main">
        <!-- 新闻分类 -->
        <!-- 最新新闻 -->
        <! -- 热点新闻 -->
</div>

(4)footer(版权):

<div id="footer">
        版权所有 © <a href ="http://niunan.javaeye.com" target ="_blank" >牛腩</a>&<a href ="http://www.tg029.com" target ="_blank">众志网</a>
</div>

	c.设计CSS样式(列举部分):

 * { /*把默认值定义为0*/
        margin: 0;
        padding: 0;
      }
    #top,#search, #main, #footer 
        {/*公共样式*/
            margin: 10px auto 10px auto;
            width: 860px;
        }
    #footer
     {/*尾部样式*/
        text-align: center;
        border-top: 1px solid #D6D7D6;
        padding-top: 10px;
        clear:left;
     }

    六.设计代码
    第一次接触网页设计代码,总是会有陌生的感觉,但接触的多了,也是会越来越亲近的。下面是总结的一些常用的代码:
         (1)颜色
想要使用某种颜色,取得其颜色值即可。
	<font color=#000000 size=2>
    (2)文字链接
超链接效果:
	<a href ="网址空间";></a>
重新打开窗口效果:
	<a href ="网址空间";;target="_blank"></a>
    (3)添加图片
	<img src="http://www.163.com/wwwimages/n/163logo.gif"; width="150" height="100">
    (4)换行
在想换行的位置输入<br>,这样就会分成两行显示
    (5)鼠标感应,文字变色(由蓝变红)
    li a:link, li a:visited 
    {
        color: #00f;
    }
    li a:hover
    {
        color: #f00;
    }
    七.设计心得
    当看到自己把首页做出来的那一刻,真的很开心。其中也出现过bug,通过自己琢磨、和同学交流之后,再加上firebug这个工具,最后也总算是完成了。回头想想,我们一直浏览的网页,现在自己也可以做出来,有些难以相信。现在看看,这一过程,其实也没有那么难。




一整套毕业设计!代码论文调研报告齐全!同学上学期的毕设! 一、课题来源及意义 随着我国社会主义市场经济的快速发展,各各业的竞争日趋激烈。传统的全静态的新闻,由于自动化程度低,运中需要大量的网页制作人员,已经被淘汰。而全动态的新闻,自动化程度高,而被广泛采用。 通过使用动态和静态结合的新闻发布系统,使我们能够全身心地投入到网站运营上去。随着Internet的普及,网页逐渐融入人们的生活,快速及时地浏览新闻,获取五彩缤纷的网上信息,已成为人们日常生活的一部分,与此同时越来越多的企业建立了自己的WWW网站,企业通过网站可以展示产品,发布最新动态,与用户进交流和沟通,与合作伙伴建立联系,以及开展电子商务等。其中,新闻管理系统是构成企业网站的一个重要组成部分,它担负着双层作用,一方面可以用来动态发布有关新产品或新开发项目,另一方面又可以及时向顾客公告企业经营业绩、技术与研发进展、特别推荐或优惠的工程项目、产品和服务,从而吸引顾客,扩大顾客群。 信息时代的高速发展,传统的报纸杂志已经远远满足不了人们的需求,人们更加希望能够在网上了解更多的新闻和信息,于是我们就很有必要在网上创建一个新闻发布管理信息系统了。大部分网站都是采用静态的方式来发布和管理信息的,可是网站需要更新的信息量也越来越大,所以这很不利于网站管理人员的工作。为了更加方便的管理网站,于是我们就很迫切的需要利用动态技术创建一个新闻发布管理信息系统了。 信息技术的发展使得整个世界越来越小,这也意味着企业的竞争环境由区域化向全球化发展,尤其是中国加入了WTO后,经济全球化是大趋势,企业所处的宏观环境实际上已经不仅仅是通过信息技术员连接起来狭义的网络,而应该将技术环境与经济环境结合在一起考虑,形成一种大网络的概念。企业对信息的掌握程度、信息获取是否及时、信息能否得到充分利用、对信息的反应是否敏感准确,已越来越成为衡量一个企业市场竞争能力的重要因素。所以建立动态的新闻发布系统适应企业发展的要求,其意义是具大的。新闻系统是一个比较典型的文档系统,掌握了新闻系统的开发,对于开发其它的文档系统都有很大的帮助。 二、国内外的发展状况 新闻发布系统,在国内外早已有着成熟的研究成果和广泛的社会应用.国内众多大型门户网站,如网易(http://www.163.com),新浪(http://www.sina.com.cn),搜狐(http:// www.sohu.com),首都在线(http://www.263.net),人民日报网(http://www.people.com.cn),中国新闻网(http://www.chinanews.com.cn)等,每天甚至时刻进海量信息的维护,以保持网站内容及时更新,内容管理系统,起着绝对重要的作用,是当今动态网站内容更新的主要手段。国外也有很多这样的大型门户网站,如CNN(www.CNN.com),美国之音(www.voanews.com),新加坡联合早报网(www. zaobao.com)等。 三、本课题的研究目标
评论 84
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值