JavaScript网站设计实践（一）网站结构以及页面效果设计
这是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网站设计实践（一）网站结构以及页面效果设计的更多相关文章
- B/S结构-登录页面-测试用例设计
页面描述: 有一个登陆页面, 假如上面有2个textbox, 一个提交按钮 测试需求: 请针对这个页面设计30个以上的testcase 功能测试(Function test) 0. 什么都不输入,点击 ...
- （转）EntityFramework之领域驱动设计实践
EntityFramework之领域驱动设计实践 - 前言 EntityFramework之领域驱动设计实践 (一):从DataTable到EntityObject EntityFramework之领 ...
- EntityFramework之领域驱动设计实践
EntityFramework之领域驱动设计实践 - 前言 EntityFramework之领域驱动设计实践 (一):从DataTable到EntityObject EntityFramework之领 ...
- [转]EntityFramework之领域驱动设计实践
本文转自:http://www.cnblogs.com/daxnet/archive/2010/11/02/1867392.html Entity Framework之领域驱动设计实践 EntityF ...
- JavaScript网站设计实践（五）编写photos.html页面，实现点击缩略图显示大图的效果
一.photos.html页面,点击每一张缩略图,就在占位符的位置那里,显示对应的大图. 看到的页面效果是这样的: 1.实现思路 这个功能在之前的JavaScript美术馆那里已经实现了. 首先在页面 ...
- 【基础笔记】《html&CSS设计与构造网站》一书导读
◉HTML 1.结构网页使用HTML HyperText Markup Language 来描述页面结构超文本标记语言允许对文本建立链接,允许对文本进行标记网页开头都有一个DOCTYPE 文档类型 声 ...
- 【大型网站技术实践】初级篇：借助Nginx搭建反向代理服务器
一.反向代理:Web服务器的“经纪人” 1.1 反向代理初印象 反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从 ...
- Httpster –世界各地最潮的网页设计案例聚合网站
Httpster 这个网站聚合了世界各地最新最潮的网页设计案例,展示了创意的设计,精心的策划,优秀的排版.这些作品都按月份和类别进行了很好划分,你可以方便的找到自己感兴趣的网站案例. 立即去看看 您可 ...
- MVC5 网站开发实践 2.2、管理员身份验证
上次完成了管理员的登录,这次要解决对管理员登录后的验证,采用AuthorizeAttribute属性的方式.之前还要解决几个问题,然后才重写验证类,最后稍微改一下界面. 目录 MVC5 网站开发实践 ...
随机推荐
- PSR-4——新鲜出炉的PHP规范
FIG 制定的PHP规范,简称PSR,是PHP开发的事实标准. PSR原本有四个规范,分别是: PSR-0 自动加载 PSR-1 基本代码规范 PSR-2 代码样式 PSR-3 日志接口 2013年底 ...
- Doing Homework（HDU 1074状压dp)
题意:给你n个要做的作业,它们的名字.期限.可完成所需天数(必须连续)在规定期限不能完成要扣分(每天一分)求做作业顺序使扣分最少. 分析:作业数量较少,用状态压缩,做到第i种作业花费的天数dp[i]. ...
- class0513(html基础加强2）
使用VS创建网页 新建Web项目(新建→ASP.Net Web应用程序),新建html页面(添加→新建项→Web→HTML页) 查看页面的方式: 切换到“设计”视图,可以在这里查看初步的预览效果,不是 ...
- [LeetCode]切割字符串，使各个子串都是回文
题目:Given a string s, partition s such that every substring of the partition is a palindrome. Return ...
- sql-表值函数tvf
带有参数的视图 create function fn_fenye (@count as int,@page as int) returns table as return select * from ...
- openstack学习线路指导
原文链接: http://www.aboutyun.com/thread-7225-1-1.html 网上很多hadoop资料,openstack资料相对较少,这里整理一下,帮助初学者尽快入门. 首先 ...
- 零基础学习hadoop到上手工作线路指导
零基础学习hadoop,没有想象的那么困难,也没有想象的那么容易.在刚接触云计算,曾经想过培训,但是培训机构的选择就让我很纠结.所以索性就自己学习了.整个过程整理一下,给大家参考,欢迎讨论,共同学习. ...
- ubuntu下一次网络流量危机
为了便于团队合作,公司局域网搭建了一台服务器,安装了ubuntu 13.04. 一直相安无事.直到今天上午. 突然的大流量,让整个局域网网速慢下来,网页都打不开. 差不多一个小时都是这样,我还以为是公 ...
- 单点登录与消息队列以及在J2EE中的实现方案
前言 这次为大家简单介绍两个在WEB开发中经常使用的概念——单点登录和消息队列以及具体到J2EE中的一些实现方案.本文原创性的工作比较少,主要是一些总结概括和自己的理解. 单点登录SSO SSO的业务 ...
- Java文件合并
文件分割与合并是一个常见需求,比如:上传大文件时,可以先分割成小块,传到服务器后,再进行合并.很多高大上的分布式文件系统(比如:google的GFS.taobao的TFS)里,也是按block为单位, ...