这是JavaScript DOM编程艺术里的构建JavaScript网站设计的例子,这本书给我学习JavaScript带来许多启发,在这个乐队宣传网站中,把前面学到的知识点整合在这个项目了.在这里记录下实现这个乐队的宣传网站的具体过程,加深理解.好,从现在开始来实现这个JavaScript网站实战. 一.网页的结构 由三个部分组成:头部.导航.内容 效果图是这样的(勉强看,有点不美观.哈哈): 二.网站的的结构 这是我的项目目录. images——放置所有的要使用到的图片资源. style——放…

一.编写live.html页面,1.JavaScript实现表格的隔行换色,并且当鼠标移过时当前行高亮显示:2.是输出表格中的abbr标签的内容 实现后的效果图是这样的: 1.实现思路 在输出表格的时候,给出一个判断,如果偶数或是奇数行我们想换色,则添加一个class为odd的值,在这个class里就设置了表格不同颜色tr行. 这里用到了一个判断函数:(下面是两个不同的方法,任选其一) 法一: //隔行换色 添加class属性 for(var i =0; i<tables.length; i++…

一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了看导航栏菜单项高亮显示时,已经写了部分内容,只是那时写的代码没有实现div显示和隐藏,现在就在之前编写的基础上,为页面添加显示和隐藏div的效果. 没有写JavaScript之前看到的效果: 实现后的效果图: 这个就是我们现在要做的效果. 1.背景: 我们在about.html页面中写了一个ul列表…

一.主页一般都会比较有特色,现在在网站设计(二)实现的基础上,来给主页添加一点动画效果. 1.这里实现的动画效果是:当鼠标悬停在其中某个超链接时,会显示出属于该页面的背景缩略图,让用户知道这个链接的页面大概内容是什么. 效果图: 2.实现这个效果的思路 (1)把主页的几个链接的背景图片缩放到150px*150px,拼成一张750*150的图片,并保存为slideshow.png,存放到images文件夹里. 拼成来的图片是这样子的: (2)写一个JavaScript脚本,用来生成动画效果. 脚本…

一.photos.html页面,点击每一张缩略图,就在占位符的位置那里,显示对应的大图. 看到的页面效果是这样的: 1.实现思路 这个功能在之前的JavaScript美术馆那里已经实现了. 首先在页面中使用ul列表显示出所有的缩略图,然后使用JavaScript,for循环检查出当前点击的是哪一张图片,最后把这张图片给显示出来. 用到三个函数:显示图片函数.创建占位符预装图片.点击显示图片 2.代码 (1)制作四张400px*300px的图片,然后把这四张图片缩小到100*100px的缩略图.把…

一.最后一个页面 contact.html.改进表单 在该页面实现的功能: 几乎所有的网站都会有表单填写,对于用户输入和填写的数据,首先我们一般现在前台验证,然后再去后台验证. 在前台最简单的验证:检查必填字段是否填写.填写格式是否符合要求等. 每个表单里面,当获取到输入焦点时,令提示文本消失 现在开始动手来写. 1.实现思路 (1)在这个表单里会验证的是必填字段和邮箱格式是否正确.首先,把判断必填字段和邮箱格式分别写在两个函数里:然后在一个validateForm()函数里,根据获取到的cla…

一.(一)中的代码还可以修改的地方. 在(一)中,如果是运行在服务器下,如apache等,可以把head和navigation的div抽取出来,放置在另一个html文件里,然后在页面中,include进来.这样,当要对导航栏进行修改时,只需要修改一个文件,而不用修改所有相关的页面文件.不过,我这里没有这样做,没有抽取出来. 二.实现当前页面的标识+不同页面的head头部背景图片的改变 现在在(一)实现的基础之上,来实现导航栏当前所选页面的菜单项高亮显示,让访问者一路了然知道“我正在这里”. 首先…

目录 第I篇 手机版专用网站设计和开发入门篇 第1章 准备创作环境和测试环境 3 1.1 使用Mobile Safari测试网页 4 1.1.1 iOS Simulator安装 5 1.1.2 使用Mobile Safari 6 1.2 使用IEMobile测试网页 7 1.2.1 Windows Phone 7 Emulator安装 8 1.2.2 使用IEMobile 9 1.3 使用Chrome Lite测试网页 10 1.3.1 Android Emulator安装 10 1.3.2 使…

前言 网站设计的优化是一个很大的话题,有一些通用的原则,也有针对不同开发平台的一些建议.这方面的研究一直没有停止过,我在不同的场合也分享过这样的话题. 作为通用的原则,雅虎的工程师团队曾经给出过35个最佳实践.这个列表请参考  Best Practices for Speeding Up Your Web Site  http://developer.yahoo.com/performance/rules.html ,同时,他们还发布了一个相应的测试工具Yslowhttp://developer…

不管你是不是一个羽翼未丰企业的领导,专业的网站能为你带来的东西比你想象的多很多.退一万步来说,“考虑到我们是一个小厂”,粗糙的网站也许能被用户理解,但是不一定能接受.每天大家所浏览的大量的网站,已经从头到脚为用户灌输了“一个正常的/好的网站应该是什么样子”的概念. 再进一步.不够好的网站会让用户分心,犹豫,纠结.大家相信大品牌,或者说看起来够专业的网站.如果你所提供的网站无法在几分钟内吸引到他们,就算是失败.用户怎么会在这种情况下突然开始信任你呢? 总而言之,尽量做专业的设计,打磨好每一个微小的…