开发者社区> 杰克.陈> 正文

JavaScript网站设计实践(一)网站结构以及页面效果设计

简介: 原文:JavaScript网站设计实践(一)网站结构以及页面效果设计 这是JavaScript DOM编程艺术里的构建JavaScript网站设计的例子,这本书给我学习JavaScript带来许多启发,在这个乐队宣传网站中,把前面学到的知识点整合在这个项目了。
+关注继续查看
原文:JavaScript网站设计实践(一)网站结构以及页面效果设计

这是JavaScript DOM编程艺术里的构建JavaScript网站设计的例子,这本书给我学习JavaScript带来许多启发,在这个乐队宣传网站中,把前面学到的知识点整合在这个项目了。在这里记录下实现这个乐队的宣传网站的具体过程,加深理解。好,从现在开始来实现这个JavaScript网站实战。

一、网页的结构

由三个部分组成:头部、导航、内容

效果图是这样的(勉强看,有点不美观。哈哈):

二、网站的的结构

这是我的项目目录。

images——放置所有的要使用到的图片资源。

style——放置使用到的层叠样式表

js——放置所有要使用到的js文件

5个html文件对应导航栏的5个菜单

         Home:网站主页

   About:乐队介绍

   Photos:乐队演出日程

         Live:乐队的演出日程

         Contact:供访者与乐队进行交流

网站主页的代码:

webDesign.html

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>webDesign</title>
 6         <link rel="stylesheet" href="style/webdesign.css" />
 7         <link rel="stylesheet" href="style/color.css" />
 8         <link rel="stylesheet" href="style/typography.css" />
 9         
10     </head>
11     <body>
12         <div id="header">
13             <img src="images/weblogo.gif" />
14         </div>
15         
16         <div id="navigation">
17             <ul>
18                 <li><a href="webDesign.html">Home</a></li>
19                 <li><a href="about.html">About</a></li>
20                 <li><a href="photos.html">Photos</a></li>
21                 <li><a href="live.html">Live</a></li>
22                 <li><a href="contact.html">Contact</a></li>
23             </ul>
24         </div>
25         <div id="content">
26             <h1> Lorem Ipsum DOlor</h1>
27             <p>
28                 Lorem ipsun dolor sit amet ,consectruer adipiscing elit.Nullam iaculis vestibulun 
29                 Lorem ipsun dolor sit amet ,consectruer adipiscing elit.Nullam iaculis vestibulun 
30                 Lorem ipsun dolor sit amet ,consectruer adipiscing elit.Nullam iaculis vestibulun 
31                 Lorem ipsun dolor sit amet ,consectruer adipiscing elit.Nullam iaculis vestibulun 
32                 Lorem ipsun dolor sit amet ,consectruer adipiscing elit.Nullam iaculis vestibulun 
33             </p>
34             
35             </p>
36         </div>
37     </body>
38 </html>

 css样式

webdesign.css

 1 * {
 2     margin: 0;
 3     padding: 0;
 4 }
 5 body{
 6     margin:1em 10%;
 7 }
 8 
 9 #header{
10     background-image: url(../images/guitarist.gif);
11     background-color: #000;
12     background-repeat: no-repeat;
13     background-position: bottom right;
14     border-width: .1em;
15     border-style: solid;
16     border-bottom-width: 0;
17 }
18 #navigation{
19     background-image: url(../images/nav-bg.png);
20     background-position: bottom left;
21     background-repeat: repeat-x;
22     border-width: .1em;
23     border-style: solid;
24     border-bottom-width: 0;
25     border-top-width: 0;
26     padding-left: 10%;
27 }
28 #navigation ul{
29     width:100%;
30     overflow: hidden;
31     border-left-width: .1em;
32     border-left-style: solid;
33     
34 }
35 #navigation li{
36     display: inline;
37 }
38 #navigation li a{
39     display: block;
40     float: left;
41     padding: .5em 2em;
42     border-right: .1em solid;
43 }
44 #content{
45     border-width: .1em;
46     border-style: solid;
47     border-top-width: 0;
48     padding: 2em 10%;
49     line-height: 1.8em;
50 }

 

typography.css

body {
    font-size: 76%;
    font-family: helvetica,arial,sans-serif;
}
body *{
    font-size: 1em;
}
a{
    font-weight: bold;
    text-decoration: none;
}
#navigation{
    
    font-family: "lucida grande", helvetica ,arial,sans-serif;
}
#navigation a{
    text-decoration: none;
    font-weight: bold''
}
#content{
    line-height: 1.8en;
}
#content p{
    margin:1em 0;
}
h1{
    font-family: georgia,"times new roman",sans-serif;
    font: 2.4em normal;
}
h2{
    font-family: georgia,"times new roman",sans-serif;
    font: 1.8em normal;
        margin-top: 1em;
}
h1{
    font-family: georgia,"times new roman",sans-serif;
    font: 1.4em normal;
    margin-top: 1em;
}

 

color.css

body {
    color: #fb5;
    background-color: #334;
}
a:link{
    color: #445;
    background-color: #eb6;
}
a:visited{
    color: #345;
    background-color: #eb6;
}
a:hover{
    color: #667;
    background-color: #fb5;
}
a:active{
    color: #778;
    background-color: #667;
}
#header{
    color: #ec8;
    background-color: #334;
    border-color: #667;
}
#navigation{
    color: #455;
    background-color: #789;
    border-color: #667;
}
#content{
    color: #223;
    background-color: #edc;
    border-color: #99a; 
}
#navigation ul{
    border-color: #99a;
}
#navigation a:link,#navigation a:visited{
    color:#eef;
    background-color: transparent;
    border-color: #99a;
}
#navigation a:hover{
    color: #445;
    background-color: #eb6;
}
#navigation a:active{
    color: #667;
    background-color: #ec8;
}

 

然后,,打开谷歌浏览器浏览,看到的 页面是:

 网站总体布局完成了。接下来的就是写每一个页面,以及每个页面用到的JavaScript。

 

每天进步一点点~~~~

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
前端工具 - 开发者工具(F12)
前端工具 - 开发者工具(F12)
2 0
HTTP - 长连接 & 短连接 & 长轮询 & 短轮询 & 心跳机制
HTTP - 长连接 & 短连接 & 长轮询 & 短轮询 & 心跳机制
6 0
《剑指Offer》- 连续子数组的最大和或最小和
本文是《剑指Offer》系列(JavaScript版)的第一篇,题目是“连续子数组的最大和或最小和”。
1 0
WebSocket - 理论篇
WebSocket - 理论篇
5 0
挑战全网最幽默的Vuex系列教程:第一讲 Vuex到底是什么鬼
Vuex 是 Vue.js 的座驾,所以,如果还不懂Vue.js 的话,那还是先把 Vue.js 勾搭上了再带过来一起坐坐吧。当然,既然能够溜达到这里,想必跟 Vue.js 起码也已经是朋友了吧。
3 0
挑战全网最幽默的Vuex系列教程:第二讲 Vuex旗下的State和Getter
上一讲 「Vuex 到底是个什么鬼」,已经完美诠释了 Vuex 的牛逼技能之所在(纯属自嗨)。如果把 Vuex 比喻成农药里面的刘备,那就相当于你现在已经知道了刘备他是一个会打枪的力量型英雄,而且他打的枪还是双排量的,认识到这一点后,那么接下来就是要了解他到底是如何打枪的,是左手打,还是右手打,还是双手一起端着枪打?
4 0
挑战全网最幽默的Vuex系列教程:第三讲 Vuex旗下的Mutation
上一讲「Vuex 旗下的 State 和 Getter」,告诉了我们怎么去使用仓库 store 中的状态数据。当然,光会用肯定还不够,大部分的应用场景还得对这些状态进行操控,那么具体如何操控呢,这就是这一讲要说的重点。
1 0
挑战全网最幽默的Vuex系列教程:第四讲 Vuex旗下的Action
通过上一讲「Vuex 旗下的 Mutation」,我们知道了如何去修改 State 的数据,而且只能通过 Mutation 去提交修改,另外还了解到了 Mutation 必须是同步函数,那么如果需求当中必须要用到异步函数怎么办?
1 0
挑战全网最幽默的Vuex系列教程:第五讲 Vuex的小帮手
前面已经讲完了 Vuex 下的 State、Getter、Mutation 及 Action 这四驾马车,不知道大家是否已经理解。当然,要想真正熟练掌握的话,还是需要不断的练习和动手实践才行。
1 0
挑战全网最幽默的Vuex系列教程:第六讲 Vuex的管理员Module(实战篇)
这一讲是 Vuex 基础篇的最后一讲,也是最为复杂的一讲。如果按照官方来的话,对于新手可能有点难以接受,所以想了下,决定干脆多花点时间,用一个简单的例子来讲解,顺便也复习一下之前的知识点。
1 0
+关注
杰克.陈
一个安静的程序猿~
10427
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载