大学新手做的WEB页面设计适合作为作业资源-CSDN文库资源-CSDN文库

共21个文件

jpg：6个

js：5个

gif：5个

web页面设计

大学新手

4星 · 超过85%的资源需积分: 48 125 浏览量 2013-04-24 11:10:50 上传评论 9 收藏 215KB RAR 举报

在“大学新手做的WEB页面设计适合作为作业”这个项目中，我们可以探索一系列与Web页面设计相关的基础知识，这些知识对于初学者来说至关重要。Web页面设计是计算机科学和信息技术领域中的一个关键部分，特别是对于那些想要进入网页开发或前端开发行业的学生而言。我们要了解Web页面设计的基本构成。一个标准的Web页面通常由HTML（HyperText Markup Language）负责内容结构，CSS（Cascading Style Sheets）处理样式和布局，以及JavaScript来实现交互性。在这个项目中，源代码的提供意味着我们可以看到这些元素是如何结合在一起的。 HTML是Web页面的基础，用于定义文本、图像、链接等元素的结构。新手学习时，会接触到基本的HTML标签，如`<head>`、`<body>`、`<h1>`、`<p>`、`<a>`等，以及如何通过`class`和`id`属性来指定元素的标识。 CSS是使网页具有视觉吸引力的关键。它允许我们控制颜色、字体、布局和其他视觉效果。初学者可能学习了选择器的概念，如类选择器、ID选择器和元素选择器，以及盒模型（包括边距、填充、边框和内容区域）的理解。此外，浮动（float）、定位（positioning）和Flexbox或Grid布局也是CSS学习的重要部分。 JavaScript是实现动态功能的关键，如表单验证、响应式设计、动画效果等。新手可能接触过DOM（Document Object Model）操作，通过JavaScript修改网页内容，以及事件监听和处理。例如，他们可能已经编写了简单的按钮点击事件，改变文本或显示隐藏内容。在项目中，我们还可以学习到版本控制的重要性，比如使用Git来跟踪和管理代码变更。这对于协作和防止代码丢失至关重要。此外，项目可能还涉及到了基本的响应式设计，确保页面在不同设备和屏幕尺寸上都能良好显示。这通常涉及到媒体查询（media queries）的使用，根据设备特性调整样式。一个完整的Web页面设计作业可能还包括了网页优化和性能考虑，如减少HTTP请求、压缩资源、优化图片和利用缓存等。通过这样的项目，大学新手可以得到实际操作的经验，理解Web页面设计的各个环节，从而为未来更深入的学习和专业发展打下坚实基础。这个项目是一个很好的起点，因为它提供了一个可以运行和无错误的环境，让学生在实践中学习和解决问题。

资源推荐

资源详情

资源评论

收起资源包目录

新手.rar （21个子文件）

新手

css

jquery.lightbox-0.5.css 2KB

photos

mingshan.jpg 10KB

wusiguangchang.jpg 7KB

Thumbs.db 76KB

back.jpg 58KB

jiaotang.jpg 10KB

laoshan.jpg 7KB

zhanqiao.jpg 10KB

images

lightbox-btn-close.gif 700B

lightbox-btn-next.gif 812B

lightbox-ico-loading.gif 4KB

Thumbs.db 9KB

lightbox-blank.gif 43B

lightbox-btn-prev.gif 832B

jquery.js 53KB

jquery.lightbox-0.5.pack.js 6KB

jquery-1.8.0.min.js 90KB

jquery.lightbox-0.5.js 20KB

jquery.lightbox-0.5.min.js 10KB

Index.html 3KB

zhuce.html 6KB

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>注册界面</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">  <script type="text/javascript" > function userNameFocus(){ var uname=document.getElementById("uname").value; if(uname=="请输入用户名"){ document.getElementById("uname").value=""; } document.getElementById("uname").style.borderColor="#CC0000"; document.getElementById("uname").style.backgroundColor="#FFCC99"; } function userNameBlur(){ var uname=document.getElementById("uname").value; if(uname==""){ document.getElementById("uname").value="请输入用户名"; } document.getElementById("uname").style.borderColor=""; document.getElementById("uname").style.backgroundColor="#FFFFFF"; } function userPasswordFocus(){ document.getElementById("pwd1").style.borderColor=""; document.getElementById("pwd1").style.backgroundColor="#FFCC99"; } function userPasswordBlur(){ document.getElementById("pwd1").style.borderColor=""; document.getElementById("pwd1").style.backgroundColor="#FFFFFF"; } function userRePasswordFocus(){ document.getElementById("pwd2").style.borderColor=""; document.getElementById("pwd2").style.backgroundColor="#FFCC99"; } function userRePasswordBlur(){ document.getElementById("pwd2").style.borderColor=""; document.getElementById("pwd2").style.backgroundColor="#FFFFFF"; } function checkUserName(){ var uname=document.getElementById("uname").value; if(uname==" "||uname=="请输入用户名"){ alert("请输入用户名"); return false; } return true; } function checkPassword(){ var pwd1=document.getElementById("pwd1"); var pwd2=document.getElementById("pwd2"); if(pwd1.value.length==0){ alert("密码不能为空！"); return false; } if(pwd1.value.length<6){ alert("密码长度大于等于6"); return false; } if(pwd1.value!=pwd2.value){ alert("密码不一致，请重新输入"); return false; } return true; } function xieyi(){ var xieyi = document.getElementById("xieyi"); if(xieyi.checked){ return true; } alert("请先确认协议通过！"); return false; } function checkAll(){ if(!checkUserName()){ return false; } if(!checkPassword()){ return false; } if(!xieyi()){ return false; } return true; } </script> <style type="text/css">  </style> </head> <body background="photos/back.jpg"> <span class="STYLE2"></span> <div align="center" class="STYLE1" style="width:1400;">青岛风景网</div> <div align="center" style="width:1400; "> <form action="Index.html"> <table border="1" bgcolor="#FFFF66"> <tr> <td colspan="2" align="center">欢迎注册</td> </tr> <tr> <td width="100"><div align="center">用户名</div></td> <td width="287"><input type="text" name="uname" id="uname" value="请输入用户名" onFocus="userNameFocus()" onBlur="userNameBlur()"> </td> </tr> <tr> <td width="100"><div align="center">密  码</div></td> <td><input type="password" name="pwd1" id="pwd1" onFocus="userPasswordFocus()" onBlur="userPasswordBlur()"> </td> </tr> <tr> <td width="100"><div align="center">确认密码</div></td> <td><input type="password" name="pwd2" id="pwd2" onFocus="userRePasswordFocus()" onBlur="userRePasswordBlur()"> </td> </tr> <tr> <td width="100"><div align="center">性  别</div></td> <td><input type="radio" value="1" name="sex" > 男 <input type="radio" value="0" name="sex" checked="checked"> 女 </td> </tr> <tr> <td width="100"><div align="center">籍 贯</div></td> <td><select name="select" > <option>青岛</option> <option>上海</option> <option>北京</option> <option>大连</option> </select> </td> </tr> <tr> <td width="100"><div align="center">爱  好</div></td> <td><input type="checkbox" name="love" id="sport"> 运动 <input type="checkbox" name="love" id="read" checked="checked"> 读书 <input type="checkbox" name="love" id="art"> 音乐 <input type="checkbox" name="love" id="chx"> 美术 </td> </tr> <tr> <td width="100"><div align="center">邮  箱</div></td> <td><input name="text" type="text" width="15"> @qq.com </td> </tr> <tr> <td width="100" height="179"><div align="center">自我介绍</div></td> <td><textarea readonly="readonly" name="textarea" cols="38" rows="10"> </textarea> <br/> <input type="checkbox" name="xieyi" id="xieyi" > 确认 </td> </tr> <tr> <td colspan="2" align="center"><input name="submit" type="submit" onClick="return checkAll();" value="确认"/> <input name="reset" type="reset" value="重置"/> <input name="button" type="button" onClick="window.location.href='Index.html'" value="返回"/> </td> </tr> </table> </form> </div> </body> </html>

评论收藏

内容反馈