[网页设计]点睛价值
整理了一下电脑，发现之前我做的网页设计作品，虽然一般般，但我感觉都是自己一码一码的敲的，还是挺有feel的！仿佛就在昨天，那时候的回忆，自己一个人在图书馆，静心的做这个网页设计。时间过的很快，转眼间都离开了学校！
在线演示：http://114.92.228.69/dingxiaowei/webdesign/index.htm
一、作品展示
1.登陆界面
2.主界面
4.随机抽奖(JQuery制作)
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、逻辑结构图
（1）首页
首页中运用了DIV布局，javascript特效，CSS样式表，以及文字、图片、音乐的连接等等。
index.html
导航连接：
<TR>
<TD vAlign=bottom width=1033style="font-family: 宋体">
<p align="center">
<font size="5"color="#0000FF" face="仿宋_GB2312">
<ul id="menu">
<li><a>首页</a></li>
<li><a href="超链接页面/表单.htm">表单录入</a></li>
<li><a href="超链接页面/随机抽奖1.htm">随机抽奖</a></li>
<li><a href="超链接页面/电脑节参赛作品/index.html">博客空间</a></li>
<li><a href="超链接页面/海贼王网站/index.html">我爱动漫</a></li>
<li><a href="超链接页面/品味咖啡/index.html">品味咖啡</a></li>
<li><a id="a1"onClick="aclick()">相关声明</a></li>
</ul>
</font>
</p>
</TD>
</TR>
导航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特效:
<scripttype="text/javascript">
$(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");})})
</script>
声明：这里我使用了我自学的Jquery技术，jQuery是javascript一个轻量级的封装框架，能够更方便的实现js效果，和屏蔽不同浏览器对js的解释的不同的烦恼。
（2）随机抽奖
这里运用了js特效，图片滚动展示的效果，还有js生成随机数的方法。
(2)随机抽奖页面
Javascript：
<scriptlanguage="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);
}
</script>
(3)表单录入页面
这部分主要就是表格的设计和表单的使用。
表单html
<body>
<form action="reg.aspx">
<input type="text">
<input type="password">
<input type="hidden">
<input type="button">
<input type="submit">
<input type="reset">
<input type="image"src="401861_005556281_2.jpg">
<input type="file">
<input type="radio">
<input type="checkbox">
<hr>
<fieldset>
<legendalign="center">用户注册</legend>
<label for="txtName">用户名:</label><input id="txtName"type="text" value="请输入"size="20" maxlength="6"><br>
<label for="txtPwd">密 码:</label><inputid="txtPwd" type="password" value=""size="20"><br>
性 别:<input id="rdoMale" type="radio"value="男" name="sex"checked="checked"><label for="rdoMale">男</label>
<input id="rdoFemale"type="radio" value="女"name="sex"><label for="rdoFemale"> 女</label><br>
学 历:<inputtype="radio" value="xx" name="xl" checked>小学
<input type="radio"value="cz" name="xl">初中
<input type="radio"value="gz" name="xl">高中<br>
爱 好:<input type="checkbox" value="cf"checked>吃饭
<input type="checkbox"value="sj">睡觉
<inputtype="checkbox" value="dq">打球
<br>
选择城市：<select>
<optionvalue="1">请选择</option>
<optionvalue="1" selected="selected">上海</option>
<optionvalue="2">北京</option>
<optionvalue="3">南京</option>
</select>
<hr>
<select size="4"multiple="multiple">
<optgroup label="河北">
<option>邯郸</option>
<option>石家庄</option>
<option>邢台</option>
</optgroup>
<optgroup label="河南">
<option>郑州</option>
<option>石安阳</option>
<option>新乡</option>
</optgroup>
<br>
自我介绍：<textarea cols="40" rows="3">我是多行文本
</textarea>
</fieldset>
<br>
<br>
<input type="submit"value="注册">
<input type="reset"value="重置">
<input type="button" value="check">
<marqueedircution="down"><marquee dircution="right">让子弹飞</marquee></marquee>
<!--<bgsound src="E:\音乐\Nightwish - She Is My Sin.mp3"></bgsound>-->
<embed src="冰菊物语古筝版.mp3" loop="true" name="冰菊物语" width="460" height="68">
</form>
</body>
(4) 登录验证页面
这是网站进入的首页，用户登录验证成功后进入网站首页，密码为dingxiaowei。登入的时候，会自动播放优美的美景音乐，让用户有一种欢快的体验。
登录验证
<html>
<head>请输入密码</head>
<script type="text/javascript">
window.onload = function () {
var pwd;
while(1)
{
pwd=prompt("请输入口令:(初始密码dingxiaowei)");
if (pwd == "dingxiaowei"){
break;
}
}
//alert("欢迎进入系统主页");
window.location= "index.htm";
}
</script>
<body>
<center>
<img src="pic/Login.JPG"></img>
<embed src="mp3/冰菊物语古筝版.mp3"loop="true" name="冰菊物语"width="0" height="0">
</center>
</body>
</html>
四、学习该课程的体会与心得
虽然我从大一开始就对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
====================== 相互学习，共同进步 ===================
[网页设计]点睛价值相关推荐
- 产品可用性原则：网页设计点睛秘笈
博客概要 领导推的文章= =~ 文章目录 博客概要 一.Krug可用性第一定律:别让我思考 二.扫描:满意即可,勉强应付 1. 我们不是阅读,而是扫描 2. 我们不做最佳选择,而是满意即可 3. 我们 ...
- 20个响应式网页设计中的“神话”误区
关于响应式网页的重要性我们已经证实了很长时间了,现在是该把焦点放到如何做出好的响应式网页设计的时候了.一起来看看吧! 虽然很多人都在谈论响应式网页,但并不是每个人都知道他们在说什么.很多时候你看到网上 ...
- 响应式网页设计的20个误区
响应式网页已经成为当下比较主流的设计形式,似乎每一个人都在谈论,但实际上并不是每一个人都真的懂得.以下总结了在进行响应式网页设计时的20个误区,你可以看看自身是否存在入其中所说的问题. 1.响应式网页 ...
- 我的家乡网页设计_Graphic Design|康石石浅谈LOGO设计在作品集中的创作方法
写在前面的话 平面设计范畴极广,其领域不仅限于常见的版式设计.海报设计.LOGO设计.VI设计.书籍装帧.广告设计.网页设计.在艺术留学申请过程中,学习平面设计的同学们需依据目标院校对作品集项目及页数 ...
- 利用人工智能进行网页设计的10种方法
作者:Harris 如今,网页设计不断发展,最好的网页设计师总是期待着他们工作中的下一件大事.人工智能(AI)正在成为中心舞台,并有可能彻底改变网页设计师的工作方式.通过人工智能,网站可以变得非常敏感 ...
- htmlcss网页设计代码案例_网页设计案例｜定价表版块设计方案鉴赏
很多做电子商务的企业,在网上卖东西或产品服务时,会推出一些价格套餐让客户选择,那么这些价格套餐的表现形式怎样设计才好呢?你可以参考这几个质量较高的网站,来做网页设计,效果都很好哦! 1.互联网会员网站 ...
- 游戏网页设计：拟物还是扁平？
游戏网页设计的扁平化设计从13年的设计潮流发展到如今的设计趋势,在网页设计中已经应用广泛.相比于曾经成为主流的质感化网页,这两者之间带给用户的体验变化究竟有哪些?以下我们来谈一谈. 扁平化设计为何如此 ...
- 搜索引擎优化网页设计：最佳实践
作为一名网页设计师.网页的设计是我们一个最直观的辨认.我们如今的生活依赖于网络,依赖于这个高速让我们互知和沟通的工 具.它早已不不过一个静态的页面,而是一个有思想有文化无国界的一个内容涵盖量丰富的还有 ...
- qq空间网页设计_网页设计中负空间的有效利用
qq空间网页设计 Written by Alan Smith 由艾伦·史密斯 ( Alan Smith)撰写 Negative space is a key design element that y ...
最新文章
- Asp.net 身份验证、授权概述
- 图解Linux的Socket
- sqlserver 实现数据库全文检索
- 如何让word档在同一页上显示两列或更多列
- maven缺少jar包问题
- OUTLOOK 的PST文件和OST文件的区别
- 100行代码搞定抖音短视频App，终于可以和美女合唱了。
- 如何使用ArcMap将Excel数据转换为shp数据
- 无法访问。您可能没有权限使用网络资源。请与这台服务器的管理员联系查明你是否有访问权限。
- m.2linux系统安装,LINUX 下安装MPLAY
- pidgin qq_Pidgin入门：Skype的开源替代品
- JavaWeb项目开发案例精粹-第3章在线考试系统-003Dao层
- 《指数基金定投指南》读书笔记
- python-igraph基本用法（一）
- 【资源】公开的电子书 合集 （计算机相关、多高清、pdf）
- 用python画带有正负值的条形图
- 资深前端老司机到底牛逼在哪？
- Unity：DOTween来回运行或者缩放等LoopType.Yoyo
- NPF driver 问题
- excel表格文件损坏 无法打开解决方法