您的位置：首页 > 其它

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

2015-04-26 15:39 281 查看 
开始了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这个工具，最后也总算是完成了。回头想想，我们一直浏览的网页，现在自己也可以做出来，有些难以相信。现在看看，这一过程，其实也没有那么难。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航