学院前端页面设计.docx
信息工程学院课程设计报告（2022-2023学年第二学期）课程：人机交互与界面设计题目：学院前端页面设计目录：一.设计目的二.设计思路三.项目源程序代码四.运行与测试五.总结与收获一.设计目的设计一个学院网页，可以让本院的学生更加方便的寻找想要的信息，也可以让不了解或者想要了解本院信息的人更加方便和清楚地去搜素想要的信息，对高考招生也有便利之处。二.设计思路通过HTML和CSS设计页面，这次我主要设计了四个页面来介绍学院，有首页，新闻动态，学院概况和团学工作四个导航栏，在我看来，这四个页面可以很好地让大家了解信息工程学院，了解信息工程学院发生的事情和举办的活动。本次设计的时候四个页面都用了一个CSS,这样可以让页面之间保持统一，让页面之间跳动不是很大。第一步，先写出了总体的框架，这样我要写的页面的框架都好了，也保证了每个网页的首尾都是一样的。第二步往里面添加内容，我先打开了兰州城市学院信息工程学院的官网，然后找到了我想要放到我自己网页里面的信息，保存下来，然后按照官网的样子去做，在新闻动态和团学工作的页面上添加了轮播图，添加了一个JaVaSeript,这样就有了一个动画效果。第三步我添加了内容，改了字体颜色，让每个页面之间连接起来，再完善了一下细节，这样一个比较完善的兰州城市学院信息工程学院的网页就做好了。三.项目源程序代码1, CSS部分代码ul,li,hl,h2,h3,ppadding:O;margin:O;list-style:none；)a(text-decoration:none;color:#000；1h(mlbackground:#eee：1body(width:1000px;margin:0pxauto;line-height:21px;background:#fff;.clearclear:both：1.menuliIist-Stylernone:logfbnt-size:36px;fbnt-weight:bold;color:#fff;).bannerposition:relative;clear:both；).bannerimgdisplay:block;width:100%;height:400px;).headbackground:#fff;text-alignxenler；1.menuclear:both;background:#0959A1;width:100%;height:65px;text-align:center;border-top:Ipxsolid#000;border-bottom:Ipxsolid#000;.menuIiacolor:#fff；1.menuIia:hovercolor:#86A9D6;1.menuIitext-alignxenter;display:inline-block;padding:20pxOpx;fbnt-size:24px;Width:20%;float:left；1.rightfloacright;width:660px;padding:20px：.leftmin-height:300px;float:left;width:260px;padding:20px；1.contentbackground:#fff8fl;font-size:14px;display:inline-block;width:100%；).index(clear:both;padding:IOpx0;border-bottom:#cccdashedIpx；1.indexhovercolor:#0F6DB4；).endclear:both;background:#0959A1;color:#fff;padding:80px0;text-alignxenter;1.end-imgwidth:100px;height:50px;1.padpadding:20px70px;display:block；).mainmargin:20px30px;line-height:30px；1.maindivmin-heighl:20px；).indeximgmargin-right:50px；).indexh3color:#f14107;font-size:18px;margin-bottom:20px；1.index.frmargin-right:0:margin-left:50px；.infbbackground:#86A9D6;Padding:30px;text-indent:2em；1.titlelext-alignxenter;coIor:#F00;margin-bottom:30px;padding:1Opx；).titlehlfbnt-weightmonal;)flfloat:left；)frfloat:right；.bar(text-alignxenter;background:#86A9D6;fbnl-weighcbold;padding:15px；1.titlepicturetext-indent:2em；2, HTML代码（首页）<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8',><linkhref="cssall.css"rel="stylesheet"media="all"type="textcss"><tille>兰州城市学院信息工程学院<Ele><head><style><style><body><divclass="head',><divclass="logo"><imgSrC="C:UsersLenovoDesktophtmlimagelogo.png”width=',1000"><div><div><divclass="menu"><ulclass="center"><liclass=',active"><ahref="首页.html"style="colo亡#86A9D6;”>首页<a><li><li><ahref="新闻动态.html”>新闻动态<a><li><li><ahref="学院概括.htmF>学院概括<a><li><li><ahref=”团学工作.html学团学工作<a><li><ul><div><divclass="banner"><imgSrC="C:UsersLenovoDesktophtmlimagebanner2.jpg”width="100%,><div><divclass="content"><divclass=',info"><p>信息工程学院设有软件工程系、网络工程系、3G软件开发系、信息管理与信息系统（服务外包）系四个系，并成立了信息技术研究所。本院现有教职工38人，其中教授3人,副教授9人，博士研究生1人，硕士研究生22人，校级教学名师2人，骨干教师1人，重点学科带头人2人，校级学科学术带头人3人，甘肃省百、千、万人才工程我院2人入选。<br>专业建设从原来的一个专科专业和两个专业方向，发展成为计算机科学与技术、信息管理与信息系统两个本科专业，并有软件工程、网络工程、信息管理与信息系统、信息管理与服务外包、计算机教育五个专业方向。建成了一个校级一级学科系统分析与集成。拥有网络工程、软件工程、硬件平台、组装与维护和信息技术处理五个实验室和三个多媒体教室，图书资料共有1089册，固定资产总额为289万元，保障本科专业教学需要。<p><div><divclass=,main"><ahref="#"><divclass="index"><imgsrc="CUsersLenovoDesktophtmlimage5.png"class="fr"width="200',><imgsrc=,CAUsersLenovoDesktophtmlimage6.png'rclass="fr,'width=,220"><span><h3>信息工程学院关于2023届毕业生单项奖学金评选结果的公示<h3><span><divclass="clear"><div><div><a><ahref=,',><span><h3>上信息工程学院关于推选王翌浜等7名学生为2023届甘肃省高校优秀毕业生的公示<h3><p>各班级：根据学校下发关于做好2023届校级和省级优秀毕业生评选工作的通知文件精神，经学生本人申请，班级推荐，院学生工作领导小组审核初定，经2023年2月27日院党政联席会议研究决定推选王翌浜等7名同学为2023届甘肃省高校优秀毕业生，现将名单予以公示，如对推选结果有异议，请在公示期内向团学办反映。具体情况如下：<p><divCIaSS="index"<imgsrc="CUsersLenovoDesktophtmlimage7.png"class="fr,width=,270'>><p>公示期：2023年2月27日至3月3日受理地点：院团学办（本部：综合楼4113培黎：教三楼3510）电话：0931-5190547信息工程学院2023年2月27日<p><span><divclass=',clear,><div><div><a><divclass="clear"><div><div><divclass=,clear"xdiv><div><divclass="end"><imgsrc="CUsersLenovoDesktophtmlimagelogo.png,'><p>Copyright©1999-2023兰州城市学院信息工程学院AllRightsReserved<br>甘公网安备62010502000272号地址：甘肃省兰州市安宁区安宁东路572号（730070）电话：0931-5190547邮箱:58568573<p><div><body><html>3, HTML代码（新闻动态）<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><linkhref="cssall.css"rel=',stylesheet"media=,a11"type="textcss"><tille>兰州城市学院信息工程学院vliUe><head><style><style><body><divclass="head',><divclass=*'logo"><imgSrC="C:UsersLenovoDesktophtmlimagelogo.png”width=',l000"><div><div><
