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

一、网页的结构

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

效果图是这样的（勉强看，有点不美观。哈哈）：

二、网站的的结构

这是我的项目目录。

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

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

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

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

Home：网站主页

　　　About:乐队介绍

　　　Photos：乐队演出日程

Live：乐队的演出日程

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

网站主页的代码：

webDesign.html

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title>webDesign</title>

         <link rel="stylesheet" href="style/webdesign.css" />

         <link rel="stylesheet" href="style/color.css" />

         <link rel="stylesheet" href="style/typography.css" />

     </head>

     <body>

         <div id="header">

             <img src="data:images/weblogo.gif" />

         </div>

         <div id="navigation">

             <ul>

                 <li><a href="webDesign.html">Home</a></li>

                 <li><a href="about.html">About</a></li>

                 <li><a href="photos.html">Photos</a></li>

                 <li><a href="live.html">Live</a></li>

                 <li><a href="contact.html">Contact</a></li>

             </ul>

         </div>

         <div id="content">

             <h1> Lorem Ipsum DOlor</h1>

             <p>

                 Lorem ipsun dolor sit amet ,consectruer adipiscing elit.Nullam iaculis vestibulun

                 Lorem ipsun dolor sit amet ,consectruer adipiscing elit.Nullam iaculis vestibulun

                 Lorem ipsun dolor sit amet ,consectruer adipiscing elit.Nullam iaculis vestibulun

                 Lorem ipsun dolor sit amet ,consectruer adipiscing elit.Nullam iaculis vestibulun

                 Lorem ipsun dolor sit amet ,consectruer adipiscing elit.Nullam iaculis vestibulun

             </p>

             </p>

         </div>

     </body>

 </html>

css样式

webdesign.css

 * {

     margin: 0;

     padding: 0;

 }

 body{

     margin:1em 10%;

 }

 #header{

     background-image: url(../images/guitarist.gif);

     background-color: #000;

     background-repeat: no-repeat;

     background-position: bottom right;

     border-width: .1em;

     border-style: solid;

     border-bottom-width: 0;

 }

 #navigation{

     background-image: url(../images/nav-bg.png);

     background-position: bottom left;

     background-repeat: repeat-x;

     border-width: .1em;

     border-style: solid;

     border-bottom-width: 0;

     border-top-width: 0;

     padding-left: 10%;

 }

 #navigation ul{

     width:100%;

     overflow: hidden;

     border-left-width: .1em;

     border-left-style: solid;

 }

 #navigation li{

     display: inline;

 }

 #navigation li a{

     display: block;

     float: left;

     padding: .5em 2em;

     border-right: .1em solid;

 }

 #content{

     border-width: .1em;

     border-style: solid;

     border-top-width: 0;

     padding: 2em 10%;

     line-height: 1.8em;

 }

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。

JavaScript网站设计实践（一）网站结构以及页面效果设计的更多相关文章

  1. B/S结构-登录页面-测试用例设计

    页面描述: 有一个登陆页面, 假如上面有2个textbox, 一个提交按钮 测试需求: 请针对这个页面设计30个以上的testcase 功能测试(Function test) 0. 什么都不输入,点击 ...

  2. （转）EntityFramework之领域驱动设计实践

    EntityFramework之领域驱动设计实践 - 前言 EntityFramework之领域驱动设计实践 (一):从DataTable到EntityObject EntityFramework之领 ...

  3. EntityFramework之领域驱动设计实践

    EntityFramework之领域驱动设计实践 - 前言 EntityFramework之领域驱动设计实践 (一):从DataTable到EntityObject EntityFramework之领 ...

  4. [转]EntityFramework之领域驱动设计实践

    本文转自:http://www.cnblogs.com/daxnet/archive/2010/11/02/1867392.html Entity Framework之领域驱动设计实践 EntityF ...

  5. JavaScript网站设计实践（五）编写photos.html页面，实现点击缩略图显示大图的效果

    一.photos.html页面,点击每一张缩略图,就在占位符的位置那里,显示对应的大图. 看到的页面效果是这样的: 1.实现思路 这个功能在之前的JavaScript美术馆那里已经实现了. 首先在页面 ...

  6. 【基础笔记】《html&CSS设计与构造网站》一书导读

    ◉HTML 1.结构网页使用HTML HyperText Markup Language 来描述页面结构超文本标记语言允许对文本建立链接,允许对文本进行标记网页开头都有一个DOCTYPE 文档类型 声 ...

  7. 【大型网站技术实践】初级篇：借助Nginx搭建反向代理服务器

    一.反向代理:Web服务器的“经纪人” 1.1 反向代理初印象 反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从 ...

  8. Httpster –世界各地最潮的网页设计案例聚合网站

    Httpster 这个网站聚合了世界各地最新最潮的网页设计案例,展示了创意的设计,精心的策划,优秀的排版.这些作品都按月份和类别进行了很好划分,你可以方便的找到自己感兴趣的网站案例. 立即去看看 您可 ...

  9. MVC5 网站开发实践 2.2、管理员身份验证

    上次完成了管理员的登录,这次要解决对管理员登录后的验证,采用AuthorizeAttribute属性的方式.之前还要解决几个问题,然后才重写验证类,最后稍微改一下界面. 目录 MVC5 网站开发实践  ...

随机推荐

  1. file的getPath getAbsolutePath和getCanonicalPath的区别

    转自:http://www.blogjava.net/dreamstone/archive/2007/08/08/134968.html file的这几个取得path的方法各有不同,下边说说详细的区别 ...

  2. MVC 5 的 EF6 Code First 入门

    英文渣水平,大伙凑合着看吧…… 这是微软官方SignalR 2.0教程Getting Started with Entity Framework 6 Code First using MVC 5 系列 ...

  3. 理解dojo.require机制

    转自:http://blog.csdn.net/dojotoolkit/article/details/5935844 Dojo 提供了一个非常强大的javascript控件库. 在使用dojo之前, ...

  4. 用slf4j+logback实现多功能日志解决方案 --- 转

    大家都知道,slf4j是原来log4j的作者写的一个新的日志组件,意思是简单日志门面接口,可以跟其他日志组件配合使用,常用的配合是slf4j+logback,无论从功能上还是从性能上都较之log4j有 ...

  5. [Tommas] 测试用例覆盖率（二）

    二.详细用例的设计 划分好了测试项,接着就是针对各个测试项,考虑具体的测试用例了.根据测试项的特点,测试用例的设计角度也有所不同.下面我们就来看看通常的功能点测试用例,该从哪些角度出发来进行设计: 1 ...

  6. 环境监测小助手V1.1的Windows版

    环境监测小助手V1.1——可以实时查看空气质量和城市排名 一款跨平台空气质量监测软件 数据来源互联网,请联网使用. 暂不支持效果预览. 下载地址:http://files.cnblogs.com/py ...

  7. Base-Android快速开发框架(一)--概述

    首先简单介绍一下Base.Base是本人长期以来经过10来款APP总结出来的一个Android快速开发框架.包含数据缓存模块.工具包.第三方组件包.网络模块.数据解析.常用主界面布局等.可以快速的开发 ...

  8. Eclipse(非J2EE版本)配置Extjs环境以及安装部署Tomcat

    Eclipse(非J2EE版本)配置Extjs环境(Spket) 1. 安装spket插件,帮助->安装新软件->http://www.agpad.com/update. 2. 设置Spk ...

  9. python中__dict__和dir()

    转自:http://www.cnblogs.com/ifantastic/p/3768415.html 首先需要知道的是,dir() 是 Python 提供的一个 API 函数,dir() 函数会自动 ...

  10. HW6.18

    public class Solution { public static void main(String[] args) { double[] array = {6.0, 4.4, 1.9, 2. ...