如何设计一个简单的网站首页
- 2019 年 11 月 27 日
- 筆記
欢迎点击「算法与编程之美」↑关注我们！
本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。
问题描述
网站首页是一个网站的入口网页。对于一个网站的了解往往是通过他的首页。首页的主要作用就是引导互联网用户浏览网站其他部分的内容。网站首页上展现的这部分内容一般被认为是一个目录性质的内容。首页的作用是一个网站内容的汇总和索引，在首页上有很多图标和链接，栏目也比较多，就像以一个住宅的大门一样，由此通往各个模块，首页是网站必需的，不可或缺的。
解决方案
设计网页的时候我们需要考虑很多因素。首先我们需要知道网页上应该包含哪些内容。对于大部分网页上必须有的就是导航栏。当然关于本网站的相关信息即文字和图片这也当然必须有。此外我们还可以根据情况及网页设计需求考虑对于本网页的设计我们是否需要分栏。
网页设计框架有很多种，具体使用哪种就要结合网站需要，进行选择了。（现在的网页差不多都采用分列布局，常见的有单列布局、双列布局、三列布局和混合布局，超过三列的布局很少见。）本次网页的布局如下图所示：
图2.1网页布局
在这之后，我们还要考虑网页的主色调等等问题。之后，我们就可以用简单的代码将网页包含的相关信息显示出来。但此时因为没有设置css样式，所以此时网页显示出来的效果，我们可以看到并不好看。代码如下
div id="top_bg"> <div id="container"> <div id="header"> <div id="header_logo">光影世界环保社区<span>[保护环境，从我做起]</span></div> <div id="header_bottom"> <div id="menu"> <ul> <li><a href="#">团队简历</a></li> <li><a href="#">环境监测</a></li> <li><a href="#">环境报告</a></li> <li><a href="#">环境常识</a></li> <li><a href="#">交流合作</a></li> </ul> </div> </div> </div> <div id="content"> <div id="content_left"> <div id="section"> <div id="section_1_top">用户登录</div> <div id="section_1_mid"> <div id="myform"> <from action="" method="post"> <div class="frm_cont username">用户名： <label for="username"></label> <input type="text" name="username" id="username" /> </div> <div class="frm_cont password">密 码： <label for="password"></label> <input type="password" name="password" id="password" /> </div> </br> <div text-align:center> <input type="submit" name="button1" id="button1" value="登录" /> <input type="button" name="button2" id="button2" value="注册" /> </div> </from> </div> </div> <div id="section_1_bottom"></div> </div> <div id="section2"> <div id="section_2_top">新闻频道</div> <div id="section_2_mid"> <ul> <li><a href="#" target="_blank">美洲鳄的保护环境日益改善</a></li> <li><a href="#" target="_parent">光影世界颁发环境天使大使</a></li> <li><a href="#" target="_blank">四届环保组织到中国四川考察</a></li> <li><a href="#" target="_blank">低碳生活离我们的生活远吗？</a></li> </ul> </div> <div id="section_2_bottom"> </div> </div> </div> <div id="content_right"> <div> <h1>挑战与职责</h1> <p>那么的市场上了马车哦啊女款可惜那时快</p> <p>那么的市场上了马车哦啊女款可惜那时快......(此处省略文字)</p> <p>那么的市场上了马车哦啊女款可惜那时快......(此处省略文字)</p> </div> <div> <h1>动物世界</h1> <a href="#"><img src="img/thumb_1.jpg" width="108" height="108" /></a> <a href="#"><img src="img/thumb_2.jpg" width="108" height="108" /></a> <a href="#"><img src="img/thumb_3.jpg" width="108" height="108" /></a> <a href="#"><img src="img/thumb_4.jpg" width="108" height="108" /></a> </div> </div></div></div></div> </div> <div id="footer">Copyright©2017 光影世界环保社区 ALL Right Reserved</div> </div>
|
|
|---|
图2.2初步显示效果
要让网页变得好看，我们就需要设置css样式。（本次我们使用外联样式。）设置样式就包括字体样式，颜色，图片大小，边框等等。（常见的盒子模型当然不能忽略。）
*{ body{ background: #232524; margin: 0; padding: 0; font-family: "宋体",arial,helvetica,sans-serif; font-size: 12PX; line-height: 1.5em; width: 100%; } a:link,a:visited{ color: #069; text-decoration: underline; } a:active,a:hover{ color: #990000; text-decoration: none; } #top_bg{ width: 100%; background: #7bdaae url(../img/top_bg.jpg)repeat-x; height: 830px; } #container{ width: 900px; margin: 0 auto; } #header{ width: 100%; height: 280px; } #header_logo{ float: left; display: inline; width: 500px; height: 20px; font-family: tahoma,geneva,sans-serif; font-size: 20px; font-weight: bold; color: #678275; margin: 28px 0 0 15px; padding: 0; } #header_logo span{ margin-left: 10px; font-size: 11pz; font-weight: normal; color: #000; } #header_bottom{ float: left; width: 873px; height: 216px; background: url(../img/header_bottom_bg.png)no-repeat; margin: 15px 0 015px; } #menu{ float: left; width: 465px; height: 29px; margin: 170px 0 0 23px; display: inline; padding: 0; } #menu ul{ list-style: none; display: inline; } #menu ul li{ float: left; padding-left: 20px; padding-top: 5px; } #menu ul li a{ font-family: "黑体"; font-size: 16px; color: #393; text-decoration: none; } #menu ul li a:hover{ color: #fff; background: #396; } #content{ overflow: auto; margin: 15px; padding: 0; } #content_left{ float: left; width: 250px; margin: 0 0 0 10px; padding: 0; } #section{ margin: 0 0 15px 0; padding: 0; } #section_1_top{ width: 176px; height: 36px; font-family: "黑体"; font-weight:bold ; font-size: 14px; color: #276b45; background: url(../img/section_1_top_bg.jpg)no-repeat; margin: 0px; padding: 15px 0 0 70px; } #section_1_mid{ width: 217px; background: url(../img/section_1_mid_bg.jpg)repeat-y; margin: 0; padding: 5px 15px; } #section_1_mid.myform{ margin: 0; padding: 0; } .myform.frm_cont{ margin-bottom:8px ; } .myform.username input,.myform.password input{ width: 120px; height: 18px; padding: 2px 0px 2px 15px; border: solid 1px #aacfe4; } .btns{ text-align: center; } #section_1_bottom{ width: 246px; height: 17px; background: url(../img/section_1_bottom_bg.jpg)no-repeat; } #section2{ margin: 0 0 15px 0; padding: 0; } #section_2_top{ width: 176px; height: 42px; font-family: "黑体"; font-weight: bold; font-size: 14px; color: #276b45; background: url(../img/section_2_top_bg.jpg)no-repeat; margin: 0; padding: 15px 0 0 70px; } #section_2_mid{ width: 246px; background: url(../img/section_2_mid_bg.jpg)repeat-y; margin: 0; padding: 5px 0; } #section_2_mid ul{ list-style: none; margin: 0 20px; padding: 0; } #section_2_mid li{ border-bottom: 1px dotted #fff; margin: 0; padding: 5px; } #section_2_mid li a{ color: #fff; text-decoration: none; } #section_2_mid li a:hover{ color: #363; text-decoration: none; } #section_2_bottom{ width: 246px; height: 18px; background: url(../img/section_2_bottom_bg.jpg)no-repeat; } #content_right{ float: right; width: 580px; padding: 10px; } .post{ padding: 5px; } .post h1{ font-family: tahoma; font-size: 18px; color: #588970; margin: 0 0 15px 0; padding: 0; } .post p{ font-family: arial; font-size: 12px; color: #46574d; text-align: justify; margin: 0 0 15px 0; padding: 0; } .post img{ margin: 0 0 0 25px; padding: 0; border: 1px solid #333; } #footer{ font-size: 12px; color: #7bdaae; text-align: center; }
|
|
|---|
最终的效果图如下：
图2.2效果图
结语
这里需要注意的就是虽然你可以在你的HTML中使用特殊的字体，但是你不可能预测访问者在他们的计算机上将看到什么。在你的计算机里看起来相当好的页面，在另一个不同的平台上看起来可能非常糟糕。一些网站设计员喜欢使用来定义特性，这虽然允许你使用特殊的字体，但是仍需要一些变通的方法，以免你所选择的字体在访问者的计算机上不能显示。所以在设计网页时一定要考虑浏览器的兼容性问题。
END
实习编辑 | 王楠岚
责 编 | 刘 连
where2go 团队
微信号：算法与编程之美
