前端页面设计总结_第1页
前端页面设计总结_第2页
前端页面设计总结_第3页
前端页面设计总结_第4页
前端页面设计总结_第5页
已阅读5页，还剩25页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

信息工程学院课程设计报告（2021-2022学年第二学期）课程：人机交互与界面设计题目：前端页面设计总结

设计思想设计一个班级网站。各个网页设计分析1.网页的结构主要分为登录界面，网站首页，班级活动展示，班级部分人员信息，班级论坛，课表查询共六大板块。2.部分网页的具体实现方法：网站首页主页设计主要以盒子的形式划分。背景图片也调整到对应大小，页面上方的导航栏所对应的字符都设置了超链接href，班级图标也通过链接刷新首页，鼠标移动到相应位置时会到达下一个页面，中间的图片之间设置了合适的间距并调整图片大小，并用js做成了轮播图，其中还用js做了一个的换肤效果，并且还加上来一个类似于点击文字、链接放大的效果。代码：<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>大数据212首页</title> <linkrel="stylesheet"href="css/index.css"type="text/css"> <scriptsrc="js/index.js"></script></head><body> <divclass="skin"><!--页面皮肤--> <inputtype="button"value="设为黄色"onclick="color('yellow')"> <inputtype="button"value="设为红色"onclick="color('red')"> <inputtype="button"value="设为蓝色"onclick="color('blue')"> <inputtype="button"value="设为绿色"onclick="color('#00ff00')"> </div> <divclass="header"><!--头部--> <divclass="logo"><ahref="index.html"title="大数据212"><imgsrc="images/logo2.jpg"/></a></div> <pclass="by">创造分析 手脑并用</p> <divclass="nav"><!--导航--> <ul> <li><ahref="index.html"title="首页">首页</a> </li> <li><ahref="hdzs.html"title="活动展示">活动展示</a></li> <li><ahref="ryxx.html"class="curr"title="人员信息">人员信息</a></li> <li><ahref="lt.html"title="论坛">论坛</a></li> <li><ahref="kbcx.html"title="课表查询">课表查询</a></li> <li><ahref="login.html"title="登录/注册">登录/注册</a></li> </ul> </div> </div> <divid="max"><!--轮播图--><divclass="re"><ul><li><imgsrc="images/2.jpg"alt=""></li><li><imgsrc="images/3.jpg"alt=""></li><li><imgsrc="images/4.jpg"alt=""></li><li><imgsrc="images/5.jpg"alt=""></li><li><imgsrc="images/6.jpg"alt=""></li></ul><ol><li></li><li></li><li></li><li></li><li></li></ol></div></div><divclass="content"> <divclass="one"> <imgsrc="images/al.jpg"alt="路易艾黎"> <divclass="text"><pclass="p1"><ahref="/item/%E8%B7%AF%E6%98%93%C2%B7%E8%89%BE%E9%BB%8E/1006925">新西兰友人——路易·艾黎</a></p><br><pclass="p2">路易·艾黎（RewiAlley，1897年12月2日～1987年12月27日），生于新西兰坎特伯雷地区斯普林菲尔德镇，新西兰有名的教育家、作家。路易·艾黎于1927年4月21日前往中国，1938年8月担任行政院咨询“工合”工作的技术顾问。路易·艾黎于1927年4月21日前往中国，1938年8月担任行政院咨询“工合”工作的技术顾问。1940年，在陕西宝鸡凤县创建培黎工艺学校。1982年，北京市人民政府授予他“荣誉市民”称号。1985年，甘肃省政府授予其“荣誉公民”称号。1987年12月27日，路易·艾黎在北京逝世，享年90岁。被称为“中国的十大国际友人”。</p></div> <hr/> </div> <divclass="two"> <imgsrc="images/logo2.jpg"alt="兰州城市学院培黎校区"> <divclass="text"><pclass="p1"><ahref="/question/580716220.html">兰州城市学院——培黎校区</a></p><br><pclass="p2">兰州城市学院培黎校区位于安宁区安宁东路180号，毗邻培黎广场，原培黎石油学校所在地，现兰州城市学院的前身之一。原培黎石油学校占地面积153332㎡，建筑面积103000㎡，图书馆藏书18万册，固定资产总额6500万元。2008年以后主要新建设工业实训中心和4号学生公寓等教学及辅助设施3.5万平方米；项目总扩建面积13.4万平方米。现有学院：美术学院、外国语学院、培黎石油工程学院（培黎职业技术学院）、社会管理学院、培黎工程技术学院</p></div> <hr/> </div> <divclass="three"> <imgsrc="images/hk.jpg"alt="乔治何克"> <divclass="text"><pclass="p1"><ahref="/item/%E4%B9%94%E6%B2%BB%C2%B7%E4%BD%95%E5%85%8B/1691653">乔治•何克</a></p><pclass="p2">乔治·何克，国籍英国，1915年生。1937年23岁时毕业于牛津大学，以十二万分的热情中国工业合作会工作，何克先后担任“工合”的秘书兼视察员到1941年“工合”已发展到3000多个，成为抗日救援的一支重要力量。1945年他著的《我看到了新中国》一书在美国和英国出版。何克作为双石铺培黎学校校长，他以延安的革命精神和八路军的思想作风来管理学校，教育学生。1945年7月22日乔治·何克由于在建设校园中不幸患破伤风去世，享年30岁。</p></div> <hr/> </div> <divclass="four"> <imgsrc="images/pic.jpg"alt="兰州城市学院培黎校区"> <divclass="text"><pclass="p1"><ahref="/content/2818827490422.html">大数据技术</a></p><pclass="p2">数据科学与大数据技术专业是一门普通高等学校本科专业，属于计算机类专业，基本修业年限为四年，授予理学或工学学士学位。该专业培养德、智、体、美、劳全面发展，掌握数据科学的基础知识、理论及技术，包括面向大数据应用的数学、统计、计算机等学科基础知识，数据建模、高效分析与处理，统计学推断的基本理论、基本方法和基本技能。了解自然科学和社会科学等应用领域中的大数据，具有较强的专业能力和良好的外语运用能力，能胜任数据分析与挖掘算法研究和大数据系统开发的研究型和技术型人才。</p></div> </div> </div> </body></html>课表查询创建一个课程表的表格，并设置一些样式。在这个课程表中，每个单元格代表一个时间段，并按星期几进行排列。第一行列出了星期几的标题。接下来的行表示不同的时间段。这个HTML代码使用了类名“ppp”和一些样式规则来控制课程表的位置和外观。具体来说，它将课程表的位置设置为相对于网页的绝对位置（top:100px;left:300px;），并设置了背景颜色为antiquewhite。这段代码还包含一个标题标签（caption）用于显示“我的课表”字样。代码：<trheight="60"align="center"><tdwidth="30">3</td><tdwidth="120"rowspan="2"bgcolor="ccff00">概率论与数理统计[博文楼401]</td><tdwidth="120"rowspan="2"></td><tdwidth="120"rowspan="2"></td><tdwidth="120"rowspan="2"bgcolor="87ceff">大学英语B4[博文楼302]</td><tdwidth="120"rowspan="2"bgcolor="99ccff">毛泽东思想和中国特色社会主义理论体系概论[博文楼103]</td><tdwidth="120"rowspan="2"bgcolor="ccff00">概率论与数理统计[博文楼107]</td><tdwidth="120"rowspan="2"></td></tr><trheight="60"align="center"><tdwidth="30">4</td></tr><trheight="60"align="center"><tdwidth="30">5</td><tdwidth="120"rowspan="2"></td><tdwidth="120"rowspan="2"bgcolor="ffcc99">虚拟现实脚本设计[博雅楼B502]</td><tdwidth="120"rowspan="4"bgcolor="33cc99">融媒体内容设计[求实楼206]</td><tdwidth="120"rowspan="2"></td><tdwidth="120"rowspan="4"bgcolor="6699ff">web前端开发技术[求实楼409]</td><tdwidth="120"rowspan="2"></td><tdwidth="120"rowspan="2"></td></tr><trheight="60"align="center"><tdwidth="30">6</td></tr><trheight="60"align="center"><tdwidth="30">7</td><tdwidth="120"rowspan="2"bgcolor="eea2ad">体育4</td><tdwidth="120"rowspan="2"bgcolor="cd919e">形势与政策计[博文楼404]</td><tdwidth="120"rowspan="2"></td><tdwidth="120"rowspan="2"bgcolor="eea2ad">体育4</td><tdwidth="120"rowspan="2"></td></tr><trheight="60"align="center"><tdwidth="30">8</td></tr><trheight="60"align="center"><tdwidth="30">9</td><tdwidth="120"rowspan="2"></td><tdwidth="120"rowspan="2"></td><tdwidth="120"rowspan="4"></td><tdwidth="120"rowspan="2"></td><tdwidth="120"rowspan="2"bgcolor="c6e2ff">数学建模[博文楼303]</td><tdwidth="120"rowspan="2"></td><tdwidth="120"rowspan="2"></td></tr><trheight="60"align="center"><tdwidth="30">10</td></tr></table></body></html>班级部分人员信息这个表格用于展示人员信息，包括学号、姓名和籍贯等字段。代码中使用了一些HTML标签和属性来定义表格的结构和样式。代码的CSS样式和JavaScript脚本文件的引入说明了使用了外部样式和脚本来设置表格的样式和功能。表格的第一行是表头（thead），包含了列标题。后续的行包含了具体的人员信息，每个信息都放在一个单元格（td）中。最后一行包含了一个表格脚（tfoot），用于放置一些汇总或导航信息。代码：<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>Document</title> <linkrel="stylesheet"href="css/ryxx.css"> <scriptsrc="js/jquery.min.js"></script> <scriptsrc="js/ryxx.js"></script></head><body> <table> <tr> <th><inputtype="checkbox"class="j-checkall"/></th> <th>学号</th> <th>姓名</th> <th>籍贯</th> <!--<th>操作</th>--> </tr> <tr> <td><inputtype="checkbox"class="j-checkbox"/></td> <td>01</td> <td>本旭阳</td> <td>甘肃康县</td> <!--<td><button>查看</button><button>修改</button><button>删除</button></td>--> </tr> <tr> <td><inputtype="checkbox"class="j-checkbox"/></td> <td>02</td> <td>陈潇潇</td> <td>甘肃礼县</td> <!--<td><button>查看</button><button>修改</button><button>删除</button></td>--> </tr> <tr> <td><inputtype="checkbox"class="j-checkbox"/></td> <td>03</td> <td>党冰冰</td> <td>甘肃正宁</td> <!--<td><button>查看</button><button>修改</button><button>删除</button></td>--> </tr> <tr> <td><inputtype="checkbox"class="j-checkbox"/></td> <td>04</td> <td>郭家茵</td> <td>甘肃古浪</td> <!--<td><button>查看</button><button>修改</button><button>删除</button></td>--> </tr> <tr> <td><inputtype="checkbox"class="j-checkbox"/></td> <td>05</td> <td>吕贞</td> <td>甘肃通渭</td> <!--<td><button>查看</button><button>修改</button><button>删除</button></td>--> </tr> <tr> <td><inputtype="checkbox"class="j-checkbox"/></td> <td>06</td> <td>小张</td> <td>甘肃成县</td> <!--<td><button>查看</button><button>修改</button><button>删除</button></td>--> </tr> <tr> <td><inputtype="checkbox"class="j-checkbox"/></td> <td>07</td> <td>小李</td> <td>甘肃徽县</td> <!--<td><button>查看</button><button>修改</button><button>删除</button></td>--> </tr> <tr> <td><inputtype="checkbox"class="j-checkbox"/></td> <td>08</td> <td>小侯</td> <td>甘肃环县</td> <!--<td><button>查看</button><button>修改</button><button>删除</button></td>--> </tr> <tr> <thcolspan="6"> <p><b><ahref="index.html"target="_blank">首页</a></b> <b><ahref="index.html"target="_blank">上一页</a></b> <b><ahref="ryxx.html"target="_blank">下一页</a></b> <b><ahref="ryxx.html"target="_blank">页尾</a></b> </p> </th> </tr> </table></body></html>（4）班级活动展示代码中包含了一些用于设置样式和功能的标签和属性。页面包含一个头部（header）和一个返回按钮，用于导航和返回主页。代码使用JavaScript来实时显示当前日期和时间，并将其展示在页面的一个特定位置。页面还包含一个大容器（div），用于展示活动图片。这里展示了六张图片，每张图片使用一个图片标签（img）来呈现。代码：<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>活动展示</title> <linkrel="stylesheet"href="css/hdzs.css"></head><body> <divclass="header"> <divclass="shl"> <formclass="search_form"><inputtype="text"class="input_text"placeholder="请输入搜索内容"><!----><inputtype="submit"value="搜索"class="input_sub"></form> </div> <divid="currentTime"><scripttype="text/javascript">setInterval(function(){vardate=newDate();vary=date.getFullYear();//获取年份varM=date.getMonth()+1;//获取月份//getMonth返回0、1、2、...、11，分别代表1~12月vard=date.getDate();//获取日期varw=date.getDay();//获取星期//getDay返回0、1、2、...、6，分别代表周日、周一、...、周六switch(w){case1:w='一';break;case2:w='二';break;case3:w='三';break;case4:w='四';break;case5:w='五';break;case6:w='六';break;default:w='日';}varh=date.getHours();//获取小时if(h>=0&&h<=9)h='0'+h;varm=date.getMinutes();//获取分钟if(m>=0&&m<=9)m='0'+m;varcurrentTime=document.getElementById('currentTime');currentTime.innerHTML=y+'年'+M+'月'+d+'日'+''+'星期'+w+''+h+':'+m;},1000)</script> </div> <ahref="index.html"class="return">返回</a></div><pclass="bt">活  动  展  示  页</p><divid="zpq"><imgsrc="images/111.jpg"class="img1"><imgsrc="images/222.jpg"class="img2"><imgsrc="images/333.jpg"class="img3"><imgsrc="images/7.jpg"class="img4"><imgsrc="images/9.jpg"class="img5"><imgsrc="images/10.jpg"class="img6"></div></body></html>（5）.班级论坛班级论坛主要包括一个用表单做的新闻表和一个留言板。代码：<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>论坛</title> <linkrel="stylesheet"href="css/lt.css"> <scriptsrc="js/jquery.min.js"></script> <scriptsrc="js/lt.js"></script></head><body> <divclass="header"> <pclass="by">大数据212班级论坛</p> <ahref="index.html"class="return">返 回</a> </div> <divclass="xw"> <h2class="head">快讯</h2> <divclass="gun"><ulclass="content"> <li><ahref="#">青年大学习：今天你学习了吗？？？</a></li> <li><ahref="#">2022届毕业典礼的线上观看</a></li> <li><ahref="#">号外号外：秦皇嬴政将统一度量衡</a></li> <li><ahref="#">信鸽：光明神已陨落，现在由光明引领我</a></li> <li><ahref="/doc/7004129-7227011.html">scp档案</a></li> </ul></div> </div> <divclass="lyb"> <h2class="header2">请留言<span>（请认真填写哦~）</span></h2> <formaction="#"method="post"> <table> <tr> <td> <textareaname=""id=""cols="80"rows="25"class="message">......</textarea> </td> </tr><br> <tr> <td> </td> <td><ahref="index.html"><inputtype="submit"value="提交"class="btn1"></a></td> </tr> </table> </form></div> </div></body></html>（6）.登录页面这是一个简单的登录界面的HTML代码。页面包含了一个登录表单，用户可以输入用户名和密码进行登录。代码使用了一些CSS样式来设置登录界面的外观，包括背景颜色和元素的位置、大小和样式等。页面将所有元素放在一个容器（container）中，使用了背景渐变效果。登录界面（login-wrapper）是一个相对居中的框，包含了一个标题（header）和一个表单区域（form-wrapper）。表单区域包含了两个输入框，分别是用户名输入框和密码输入框。登录按钮（btn）用于提交登录表单。提示信息（msg）显示了一些附加信息，例如"没有账户？注册"。代码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>*{margin:0;padding:0;}html{height:100%;}body{height:100%;}.container{height:100%;background-image:linear-gradient(toright,#999999,#6292a8);}.login-wrapper{background-color:bisque;width:358px;height:588px;border-radius:15px;padding:050px;position:relative;left:50%;top:50%;transform:translate(-50%,-50%);}.header{font-size:38px;font-weight:bold;text-align:center;line-height:200px;}.input-item{display:block;width:100%;margin-bottom:20px;border:0;padding:10px;border-bottom:1pxsolidrgb(128,125,125);font-size:15px;ou

人人文库> 全部分类> 教育资料 > 毕业论文

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论