整理了一下电脑，发现之前我做的网页设计作品，虽然一般般，但我感觉都是自己一码一码的敲的，还是挺有feel的！仿佛就在昨天，那时候的回忆，自己一个人在图书馆，静心的做这个网页设计。时间过的很快，转眼间都离开了学校！

在线演示：http://114.92.228.69/dingxiaowei/webdesign/index.htm

一、作品展示

1.登陆界面

[网页设计]点睛价值_第1张图片

2.主界面

[网页设计]点睛价值_第2张图片
3.表单界面
[网页设计]点睛价值_第3张图片

4.随机抽奖(JQuery制作)

[网页设计]点睛价值_第4张图片

5.我爱动漫

[网页设计]点睛价值_第5张图片

二、文档说明 

一、作品内容介绍

我所完成的这个作品，主页通过DIV+CSS布局构成。页面包括导航，图片的插入，音乐媒体文件的插入，超链接和javascript特效等等。实现了一个类似于一个个人小空间网站的功能。网站的顶部导航连接是连接到几大块，涉及到表单、登录功能、字幕滚动、和一些js特效的制作，左侧导航是连接的一些陶冶情操的小页面。

二、开发环境

本网站主要使用了Dreamwever和PS做为开发工具。主页面主要由DIV+CSS进行页面的布局，通过css实现导航特效，其次通过一些超链接实现了子页面的连接和声音以及图片的连接。

（1）  开发环境的设置

打开DreamweaverCS5，执行“站点”->”管理站点”命令，新建一个“10141303”的站点，在文件夹中，选择已经建立好的站点，单击鼠标右键，选择“新建文件”

命令，定义主页面index.htm;接着在站点上选择“新建文件”命令，定义图像文件使用的文件夹为pic。

（2）  开发工具的介绍

AdobeDreamweaver CS6是一个可视化的页面设计和网站管理工具，支持最新的Web技术，包含HTML检查、HTML格式控制、HTML格式化选项、HomeSite/BBEdit捆绑、可视化页面设计、图像编辑、全局查找。

Adobe Photo同样也是Adobe公司的另外一款软件，这个提供了丰富的图片处理功能，图像处理是对已有的位图图像进行编辑加工处理以及运用一些特殊效果，其重点在于对图像的处理加工。在表现图像中的阴影和色彩的细微变化方面或者进行一些特殊效果处理时，使用位图形式是最佳的选择，它在这方面的优点是矢量图无法比拟的。

三、系统的结构说明

1、逻辑结构图

 [网页设计]点睛价值_第6张图片

（1）首页

首页中运用了DIV布局，javascript特效，CSS样式表，以及文字、图片、音乐的连接等等。

[网页设计]点睛价值_第7张图片

index.html

导航连接：

  

    

      

          

        

      

   

导航CSS:

#menu

{

   list-style-type:none;

   margin-top:2px;

   margin-left:200px;

}

 #menu li

 {

    background-color:Red;

    text-align:center;

    cursor:pointer;

    width:140px;

    height:30px;

    float:left;

    font-size:26px;

 }

导航js特效:

   $(function () {

   //鼠标经过变色

   $("#menu li").mousemove(function() {

   //链式编程

$(this).css("background-color","Orange").siblings().css("background-color","Red").siblings().css("fout-size","29");})

    //离开时候复原

   $("#menu li").mouseleave(function() {

   //链式编程

$(this).css("background-color","Red").siblings().css("background-color","Red").siblings().css("fout-size","26");})})

声明：这里我使用了我自学的Jquery技术，jQuery是javascript一个轻量级的封装框架，能够更方便的实现js效果，和屏蔽不同浏览器对js的解释的不同的烦恼。

（2）随机抽奖

这里运用了js特效，图片滚动展示的效果，还有js生成随机数的方法。

[网页设计]点睛价值_第8张图片

(2)随机抽奖页面

Javascript：

       var Nos;

        function Lottery() {

           //随机生成100-100000的号码

            Nos = Math.round(Math.random() *(100000 - 100) + 100);

            var result =document.getElementById("layer1");

            if (result != null) {

                result.innerHTML = "恭喜这位网友 "+Nos+" 您中奖了！！！;

            }

            T = setTimeout('Lottery()', 10);

          

        }

   

(3)表单录入页面

这部分主要就是表格的设计和表单的使用。

[网页设计]点睛价值_第9张图片

表单html

   

      

      

      

 

      

      

      

      

 

      

 

      

      

 

      

      

           用户注册

      

      

       性  别:

                      

        学  历:小学

                      初中

                      高中

 

 

       爱  好:吃饭

                      睡觉

                       打球

      

       选择城市：

               

               

       

      

      

      

      

 

      

       让×××飞

      

      

   

 

(4) 登录验证页面

这是网站进入的首页，用户登录验证成功后进入网站首页，密码为dingxiaowei。登入的时候，会自动播放优美的美景音乐，让用户有一种欢快的体验。

 [网页设计]点睛价值_第10张图片

登录验证

请输入密码

四、学习该课程的体会与心得

虽然我从大一开始就对web设计比较感兴趣，那时候就自己就在图书馆看看这方面的书籍，后来大一参加过学院组织的电脑节web设计大赛，荣获一等奖。现在大三了，ASP.NET是我一直专研的方向，html+css+js也是其中一部分比较重要的内容。通过此次的课程设计，将我之前所学的知识都能够回顾一遍，能够更加熟练的进行网页设计。

这个大作业，我花了整整两天的时间才能够完成，尤其在首页的布局方面，可谓花尽心思，精确到每一个边距的每一个像素，都要计算好，不然就会出现不随我意的布局效果。

尤其要强调的是javascript，js是一个脚本语言，它不像其他非脚本语言那样严谨，但是如果出现错误，也会使你非常头疼，想完成一个功能，明明觉得是对的，从语言本身的角度，但它就是不能实现你想要的效果，最后通过alert（）函数，进行一步一步的调试，这也不失为一种脚本语言的调试方法，最后找到一个难发现的错误，就是我在定义函数的时候，使用了系统关键字作为函数的方法名，结果怎么在onclick属性里面去调用这个js方法就是没用。同过这个问题的解决，也让我更深刻的理解了js脚本语言的使用，并不是想象中的那么“不严谨”的。

页面的设计最考验的就是人的耐心，有耐心的人才能做出一个优雅的页面，千万不可浮躁，不然就要实现想要的效果就比较困难的，总觉得页面跟你对着干。

我也是通过静下心来，慢慢的对首页进行布局，最终才完成了想要的效果，虽然比不少人家专业的web设计人员，但能做出这样，心里还是比较满意的。

通过这次课程设计，能够将我之前所学得以巩固和融会贯通，让我觉得受益匪浅。



需要完整的设计文档以及网站项目文件的请留言！

==================== 迂者 丁小未 CSDN博客专栏=================

MyBlog：http://blog.csdn.net/dingxiaowei2013             MyQQ:1213250243

Unity QQ群：858550         cocos2dx QQ群：280818155

====================== 相互学习，共同进步 ===================