这是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. Android LayoutInflater&LayoutInflaterCompat源码解析

    本文分析版本: Android API 23,v4基于 23.2.1 1 简介 实例化布局的XML文件成相应的View对象.它不能被直接使用,应该使用getLayoutInflater()或getSy ...

  2. java vm args

    这个问题主要还是由这个问题 java.lang.OutOfMemoryError: Java heap space 引起的.第一次出现这样的的问题以后,引发了其他的问题.在网上一查可能是JAVA的堆栈 ...

  3. WCF发布后远程访问的域名解析问题

    环境: VS2010 sp1,.net framework 4.0,windows server 2003 x64 ,iis 6.0 症状: WCF开发测试,本地调用都正常.发布后,在浏览器中访问ht ...

  4. Java Web程序工作原理

    Web开发的最重要的基本功能是HTTP:Java Web开发的最重要的基本功是Servlet Specification.HTTP和Servlet Specitication对于Web Server和 ...

  5. 【idea】移动下载站

    硬件: 1.Mac或 Linux台 2.300M 无线TP-LINK TL-WR802N AP无密码,与 Mac 同一个网段,Mac开 rails 应用 扫一扫页面,手机下载.OK Mac 搭建ROR ...

  6. C++ ODR规则与dlopen 问题

    问题: 开发平台*.so插件的时候遇到相同的函数名称出现在不同的.so文件中,假设分别为a.so和b.so,b.so要使用a.so中的定义函数 a(),而在dlopen会先加载a.so然后加载b.so ...

  7. unix 文件属性

    在unix下提到文件属性,不得不提的一个结构就是stat,stat结构一般定义如下: struct stat { dev_t st_dev; /* ID of device containing fi ...

  8. NIOP1995 石子合并（区间DP）

    状态转移方程在代码中标出 本题注意是圆形,所以之前要预先处理一下s数组.处理之后总长度为2*n-1.第一个合并的起点有n个,所以总的方案数是n 注释在代码中标出 http://www.rqnoj.cn ...

  9. C++ 顺序表

    C++ 顺序表 /***1顺序表1.必做题 编写程序建立一个数续表,并逐个输出顺序表中所有数据元素的值.编写主函数测试结果. 编写顺序表定位操作子函数,在顺序表中查找是否存在数据元素x. 如果存在,返 ...

  10. 【转】shell中IFS用法

    http://blog.itpub.net/27181165/viewspace-775820/ 一 IFS的介绍   Shell 脚本中有个变量叫IFS(Internal Field Seprato ...