MyException - 我的异常网
当前位置:我的异常网» 网页设计 » 新闻发布系统,网页设计,小弟我们也行

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

www.MyException.Cn  网友分享于:2015-04-27  浏览:0次
新闻发布系统,网页设计,我们也行
    开始了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这个工具,最后也总算是完成了。回头想想,我们一直浏览的网页,现在自己也可以做出来,有些难以相信。现在看看,这一过程,其实也没有那么难。




1楼u0130311858分钟前
无bug无收获,正是因为一些小bug才让我们更了解自己做的东西啊!

文章评论

2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
代码女神横空出世
代码女神横空出世
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
程序员应该关注的一些事儿
程序员应该关注的一些事儿
为什么程序员都是夜猫子
为什么程序员都是夜猫子
一个程序员的时间管理
一个程序员的时间管理
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
漫画:程序员的工作
漫画:程序员的工作
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
那些争议最大的编程观点
那些争议最大的编程观点
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
编程语言是女人
编程语言是女人
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
 程序员的样子
程序员的样子
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
Java程序员必看电影
Java程序员必看电影
程序员都该阅读的书
程序员都该阅读的书
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
旅行,写作,编程
旅行,写作,编程
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
我的丈夫是个程序员
我的丈夫是个程序员
中美印日四国程序员比较
中美印日四国程序员比较
总结2014中国互联网十大段子
总结2014中国互联网十大段子
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
老程序员的下场
老程序员的下场
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
程序员必看的十大电影
程序员必看的十大电影
如何成为一名黑客
如何成为一名黑客
10个调试和排错的小建议
10个调试和排错的小建议
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
鲜为人知的编程真相
鲜为人知的编程真相
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有