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

简介:
    开始了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这个工具,最后也总算是完成了。回头想想,我们一直浏览的网页,现在自己也可以做出来,有些难以相信。现在看看,这一过程,其实也没有那么难。




目录
相关文章
|
9月前
|
前端开发 搜索推荐
帝国CMS自适应网址导航网站模板代码
帝国CMS自适应网址导航网站模板代码分享
98 2
|
前端开发 .NET 开发框架
新闻发布系统,网页设计,我们也行
<pre><span style="font-family:KaiTi_GB2312; font-size:18px"> 开始了B/S的学习,开始了浏览器前台网页的制作,开始了一段新的征程。 我们都浏览过各种网页,领略过各式各样的风格。有像百度那样简单大气的,也有像hao123那样复杂齐全的。以前从没有想过这样的网页是如何“炼”的,而在学习了新闻发布系统后,只想说一句:原来是
1470 0
|
移动开发 前端开发 HTML5
2013年最精致的企业网站设计欣赏【系列四】
  企业网站的设计首先要考虑的是将企业网站建设成为一个与众不同的网站,网站可以反应出建设构想,初步形态及网站推广计划,有自己独特的设计风格,能够彰显企业的特色。下面这个列表向大家展示一下最精致的企业网站设计作品,尽情欣赏。
822 0
|
移动开发 前端开发 网络架构
2013年那些脱颖而出的网页设计作品【系列一】
  2013年,网页设计领域出现了几个新的流行趋势,最热门的要数响应式设计(Responsive Design)和扁平化设计(Flat Design)了,另外大图片背景、视频背景设计也被越来越多的设计师采用。
827 0
|
HTML5 移动开发 前端开发
【特别推荐】10款唯美浪漫的婚礼 & 结婚纪念网站模板
  互联网的重要性不言而喻,如今我们的生活已经完全离不开网络。这里给大家分享一组唯美浪漫的结婚邀请网站以及婚礼请柬网站模板,如果你也正想制作这样的网站,相信这些漂亮的网站模板能够带给你很大的帮助,让你快速创建出自己的网站。
1129 0
|
移动开发 前端开发 HTML5
酷站欣赏:20个精美的国外扁平化网页设计作品
  随着 LED 液晶显示器中的像素密度和图像质量的提高以及平板电脑和智能手机的普及,以前在小型显示器或低分辨率显示器中使用的让细节更新清晰的阴影技术不再需要了。传统的设计正在慢慢地被丢弃,更多人的崇尚简单,简约的设计。
1059 0
|
移动开发 JavaScript 前端开发
经典网页设计:精美的个人作品集网站设计欣赏【下篇】
  作为一个网页设计师,需要经常去关注优秀的网站作品,获取创作灵感,掌握最新的设计趋势。在这个竞争激烈的就业市场,个人作品集网站是最好的求职工具。因此,设计师们都竭尽所能设计一个有创造性的个人作品展示网站,期望给访客留下深刻的印象。
828 0
|
移动开发 JavaScript 前端开发
经典网页设计:漂亮的个人作品集网站设计欣赏【中篇】
  作为一个网页设计师,需要经常去关注优秀的网站作品,获取创作灵感,掌握最新的设计趋势。在这个竞争激烈的就业市场,个人作品集网站是最好的求职工具。因此,设计师们都竭尽所能设计一个有创造性的个人作品展示网站,期望给访客留下深刻的印象。
868 0
|
移动开发 前端开发 JavaScript
优秀网页设计:30个优秀的汽车网站设计欣赏
  梦想天空和大家分享过各种类型的优秀网页设计,包括餐饮网站,旅游网站,电子商务网站等等。今天这篇文章和大家分享国外30个优秀的汽车网站设计作品欣赏,希望能带给你网站设计灵感。 您可能还喜欢 10套精美的免费网站后台管理系统模板 25个国外优秀的餐饮网站设计案例欣赏 20个独具创意的优...
1304 0
优秀网页设计:35个吸引眼球的精美作品集网站
  作品集网站是设计师、艺术家和摄影师展示个人作品的最佳方式,因为网站能够非常便捷和直观的向潜在客户呈现其作品。同时,网站也能体现出作者的创意能力和专业水平。下面推荐的35个优秀作品集网站在网站布局,色彩运用方面都非常的好,相信能为您带去灵感。
992 0