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

    开始了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="data:images/niunanlogo.jpg" width ="160px"/></a><a href ="http://www.tg029.com" target ="_blank" ><img src="data: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这个工具，最后也总算是完成了。回头想想，我们一直浏览的网页，现在自己也可以做出来，有些难以相信。现在看看，这一过程，其实也没有那么难。

新闻发布系统，网页设计，我们也行相关推荐

新闻发布系统的设计与实现
摘要伴随着网络的出现,网页逐渐融入人们的生活.快速及时的新闻浏览,五彩缤纷的网上信息,使网络与人们的生活息息相关.它打破了地域限制,真正使信息得以共享,改变了人们的工作和生活方式.网站新闻发布系统, ...
网站新闻发布系统的设计与实现（PHP+MySQL）
目录第1章概述 1 1.1 课题背景 1 1.2新闻发布系统研究的目的和意义 1 1.2.1新闻发布系统研究的目的 2 1.2.2新闻发布系统研究的意义 2 第2章系统分析 3 2.1需求调查 ...
【计算机毕业设计】新闻发布系统
一.系统截图(需要演示视频可以私聊) 摘要 21世纪的今天,随着社会的不断发展与进步,人们对于信息科学化的认识,已由低层次向高层次发展,由原来的感性认识向理性认识提高,管理工作的重要性已逐渐被人们 ...
计算机毕业设计php新闻发布系统的毕业设计
项目介绍本系统综合各方面的需求决定采用B/S架构,并利用PHP+MySQL+Apache组合来搭建PHP开发平台和 Dreamweaver CS3作为开发环境.同时结合CSS+DIV设计前台和后台各 ...
ASP.NET程序设计课程设计——新闻发布系统
点击查看详细信息发现这个资源传的不是最新版,需要最新版资源的可以私聊我 ASP.NET程序设计课程设计--新闻发布系统二.系统需求分析 2.1 功能性需求用户可以在系统内界面实现登录和注册功能. ...
14.4 设计新闻发布系统
14.4 设计新闻发布系统上面对环境配置完毕.在开始编码之前,先来设计新闻发布系统,包括设计页面.设计业务逻辑和设计数据库. 14.4.1 设计页面为了示例方便,这里的页面都没有使用图片. 从 ...
php新闻网页毕设,【优质源码】校园新闻发布系统 php+mysql 毕设程序
校园新闻发布系统 php+mysql 毕设程序 (无图言diao???) (左边跟我一起画个龙,右边再画一个彩虹) 先上图,再BB 首页登陆页个人中心页分类页后台管理后台管理计算机专业毕业 ...
新闻发布系统界面 html源码,新闻发布系统的前端页面设计
[实例简介] 这个一个简单的新闻发布系统的前端页面,基本上功能都有. [实例截图] [核心代码] kindeditor └── kindeditor ├── jsp │ ├── demo.jsp ...
网站策划文案－新闻发布系统简介
新闻发布系统是属于一般网站的基本配置功能.在做网站策划的时候,要结合企业的规模和实际需求进行规划.不用大而全,实用就行.更多网站策划信息,请浏览网络营销手册www.tomx.com的行业信息中心栏目. ...

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

新闻发布系统，网页设计，我们也行相关推荐

最新文章

热门文章