学院前端页面设计.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><divclass="menu"><ulclass="center"><li><ahref三”首页.html">首页<a><li><liclass="active,>><ahref="新闻动态.html"style="color:#86A9D6;">新闻动态<a><li><li><ahref三,学院概括.ht学院学院概括<a><li><li><ahref=”团学工作.him”团学工作<a><li><ul><div><divclass="lunbotu"><imgsrc="CUsersLenovoDesktophtmlimage0C0C9D5FD4D84CA7471E3996EE2_FAE142BA_1112B.png"alt=',Image>><imgsrc="CUsersLenovoDesktophtmlimage602CDF876474FF81637173B6734_4E9CAB29_E18C0.png"alt=',Image2"><imgsrc="C:UsersLenovoDesktophtmlimage722982C2EB09AB7597ABC685BE4_2ACB7078_BE61.png"alt=',Image3,'><imgsrc="CUsersLenovoDesktophtmlimageA76DD85264414B50817BC6C1E6B_A9D1BA4B_DDAl.pngalt="Image4"><imgsrc="C:UsersLenovoDesktophtmlimageF886B7AF6D666E674AA3A006647_01748CE9_17852.jpg"alt="Image5"><div><script>/获取容器元素和所有图片varcontainer=document.querySelector(".Iunbotu");varimages=ContaineEgetElementsByTagNameCimgn);/设置初始索引和自动切换时间间隔(单位：亳秒)varcurrentindex=O;varinterval=100O;/每隔1秒切换一次/定义自动播放函数functionautoPlay()imagescurrentlndex.style.display="none"/更新索引currentindex=(currentindex÷I)%images.length;/显示下一张图片imagescurrentlndex.style.display="block")初始显示第一张图片imagescurrentlndex.style.display="block"/设置定时器自动切换图片setIntervaI(autoPlay,interval);<script><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="CUsersLenovoDesklophtmlimagel.png,'class="*fr"width=,200"><imgSrC="C:UsersLenovoDesktophtmlimage4.png"class="fr,'widlh=,'200,><span><h3>软件工程专业201班杨怡同学在“华为ICT大赛2022-2023”甘肃复赛中获奖<h3>vp>“华为ICT大赛2022-2023中国区甘肃省赛”初赛已经于2022年11月27日结束，信息工程学院三名学生成功入围复赛。近日，复赛结果公布，软件工程专业201班杨怡同学荣获“华为ICT大赛2022-2023甘肃省实践赛.网络赛道本科组三等奖，同时指导老师郑平荣获优秀指导教师奖。“华为ICT大赛”作为华为未来种子2.0重点项目之一，旨在为全球大学生提供一个ICT技术竞技与交流的平台。自2015年首届启动以来，至今已有58万余名学生参与，覆盖全球85个国家和地区。经过多年发展，华为ICT大赛在全球的知名度和影响力持续提升，不仅被中国高等教育学会正式纳入全国普通高校大学生竞赛项目榜单。华为希望通过ICT大赛，助力高校创新创业改革，培养行业亟需的IcT人才；加强全球科技交流互鉴，推动人类科技发展；助力全球更平等、可持续地发展，让每个人都从数字技术中受益。“华为ICT大赛”是ICT专业最有影响力的大赛之一，其大赛质量、规模、规范性在国内同类大赛中位于前列。参加此项大赛,不仅能激发学生学习专业知识的积极性，同时还充分体现了信息工程学院在人才培养、教师队伍建设、学生实践能力训练等方面的成果。<p><span><divclass="clear"><div><div><a><ahref='',><divclass="index"><imgsrc="CUsersLenovoDesktophtmlimage2.png"class=',fr"width=,270,><imgsrc=',CUsersLenovoDesktophtmlimage3.png"class="frwidth="200"><span><h3>上海超级计算中心主任李根国教授为信息工程学院师生作学术报告<h3><p>5月24日，应信息工程学院和安博教育科技集团的联合邀请，上海超级计算中心主任李根国教授通过腾讯会议的形式为信息工程学院数据科学与大数据技术专业、智能科学与技术专业大一、大二、大三年级学生及部分教师作了题为算力一数字时代的生产力的学术报告。李教授详细介绍了超算和智算的发展情况,对比分析了国际超级计算机发展及应用与国内超级计算机发展及应用的现状和趋势；通过对大数据的产生背景、使用流程、应用场景的讲述,以及对人工智能兴起与发展的阐述，让学生明确了所学专业的重要性和未来就业的方向；对“东数西算''国家战略进行了剖析，强调了算力对经济发展的促进作用，提出了“计算无处不在'的观点。报告结束后，李教授与部分师生围绕“ChalGPT-4”进行了交流和答疑。本次学术报告开拓了学生的视野，让学生清晰定位了所学专业的应用前景，为学生今后的学习和就业起到了积极的引导作用<p><span><divclass="clear"><div><div><a><dv><divclass=,clear"><div><div><divclass="end''><imgsrc=,CUsersLenovoDesktophtmlimagelogo.png',><p>Copyright©1999-2023兰州城市学院信息工程学院AllRightsReserved<br>甘公网安备62010502000272号地址：甘肃省兰州市安宁区安宁东路572号（730070）电话：0931-5190547邮箱：58568573<p><div><body><html>四.运行与测试1.首页三搀刑诚叩尊法信息工程学院1.anzhouCityUNIVERSITYSChoOloflnfo（TnatiOnEngineeringOVSttfinnn3GtM开妍.sxej（Iffi外包）丽Zrfx愿技术（帜所.专砌殖枕Bl38人.H中»3人.Me册人.l士w注1人.Btt量究生22人，«SMH»gW2.WT»I.三SA4雷契人2人.校坂郛样本帝AA3人日Ste百.干.万人才工8战院2L专业建设从IJl察的一个与科专业Ig个专业方向,劫成为计IWlK学与技术*Um-M45.FfitWtIB.网8工枚、K95-i¾eJMt.fiHilS¼fi.计VUBBIi个弓业方向.»MT个校0*HtiW扮与第成.IWimLW,ftfe.组信息工程学院关于2023届毕业生单与浜学金评也果的公示上信息工程学院关于推选王9!澳峥7名学生为2023届甘京省高校优秀毕业生的公示菖卿8：SUB学校下发关于傲好2023届校坂Ki1S优灭包生评选Ltfl<HBfl）文件用神,塔牲本人中孔IfiWfttJ,SJ学生工作袋皿的审核初定.t2023年2月27日院党政飘席会议用完决定推送王毋3得7£同学为2023届日;校优秀毕业生,现将各单予以公示，如对推理果有弁议.Bwr公示期内向团学办板帙.口体情况如下：m. 202加月27日至3月3日 Sia Bffl (本部：t56»4113iS# 453S1O)梯：O931-519OM7f&CJ.6»«E2023¢2«27 BCopyright © 1999 - 2023 兰州城市学乐信EL程学院 All Rights ReservedU公网安缶620105020272号频：H沙市海区安宁村572号(730070)电话：0931 5190547 «1®： 585685732,新闻动态:I羽TTIMF妤力1日3J-性子沅Lanzhou City University SChOoloflnfofmatiOnEngineefing新闻动态3,学院概况:学院概况【历史沿革】一州城市竽硒9I行学硒2021年在隙电子',信融工程学院Wm进行科专'll调整的草咄上设Ffi匚圾尔电子与aBr岸学尻的刖缴B1999年在兰州碰崎专科学校计算中心的黜上成立的计算机科学教育系，2008年电名为兰州域力的谯息口8跖，2016年信EL称学院与培黎机虹程学院进行学科专业调整设置为电子与1S江醋钺.数学学幽刖身足1958年兰州硝站等专科学校成立的数学森，2008年更名为兰（学院简介信Rl程学院W.强化将色汪创新.内通发网产饮Il合一为办学现金.CSHjR.面向全国.吟瞒经济建设Imt发时塔养带智体美劳全曲发展，具有扎实弓业HK加蛟邮跟应用能力的HS发应用B人水0在”从事数学收育淳的创新中人才.跖与：!碌华蝌世（Se技术股份有限公司、,绿安博大成政育科技有限责任公司.日南九技有限更任公司签订了深度产教融合合作序设，开展企业主导、学校工帐册生善与、校内实系”的人才培养及科研新馒式，开JB行业人才培养及JS用技术研究，培养具有职业技跟6«健力和竟争谯力9信息类人才.学砌府切牛工叔系、tie,智缸旧系、数学系、大学计算机放学部、大学数学®学8»个系部和1个3实训仲心,学院在校柚生1514A.【械队伍】学硒育政职员工"人,H中方任教帅6S人.职横S构中期S12人，踮蛔S29人，娴16人；学历结构中情±20人（锄疏读5人），硕士40人，学士5人另外，郃企必的华晟坦世信息技术股份有限公司9人，吗?安博大成赦日科技司R贵（铉司8人日乘九网帚科技fi三责任司8.学院91有WRi翎洋名阪人，日肃省高等学校创新饮酬学名帅I人，UiR窗8年怖成才奖4人.日肃窗Jt学团队3个.日泰省放学成果培即5）目4个.旧业南公学侬有软件工机数喇学与大数JK技术、智能科学与技术3个校企自作的工科专业MHNS学弓应用JHW（科0业.学位5小瘠全校类和伙学数学类公共课.耳中数学与应用数学专Ik是敦日部.本科收学工区地方高校第Tt本科专业综6改8试点专业、JS钠艳专业、窗S一流专业建设点，：件工行专业是省做特色专业.省*8-海专业建设点,学院现可门国家831课程，3iatRt娓，I门省级创新创4WRB¾iW?.（Tt4»ig）*?3有M,GW',麴泪学研究所、信息技术奴育'，应用研究所.纳米材料计算横KT，应用校圾康点学科、随机微分洌/呸厮近t亍为研究校8网点学科、分ama分方程的数值方法校及扶持学科、陌患传帖与通信安全业用平台校物应用型学科6个学科平台.学院经设有智城城市可持续发展环境大数据平台健设.智慧吱市故菇安全与除林保护技术研究与开发平台建设.JS于数学馒生的音IMi市环境联合治理研究3个学科方向.实践环陵】糊实验实训中心共有12个玄验（Silll）室.急面积1295平方米，造设备总套散500多台套，SS资产总陋IsOo多万元.有校育部中兴is讯ICI产校融合创新RtM个，日南省高等学松由M标危中心1个.计算机类。业用绿华松田砧技术股份制H公司、：!滋安漕如政育科技有耐壬公司、U索九涮GlW技向哂王公司.广州泰迪科技股份有Rl公司、中电万维信息技术有限责任公司、兰州飞积餐信息产业有IR公司、兰州大方电子司刘珍司等实习我业f化区地；数学与应剧S学专业有*中碱学校、柏冲明阳学校、兰州成功学校.广州雅宝孜日咨询旗若有眼公司、硒Ii大唐聊贷业管理咨询有限公司等合作gx®a科学研究近年电学硒Mal版OM.效材及狡弁40余88;发表学术论文5704编,其中SQ收录30首，E畋亲47版CSCDWCSSCI收浜*,答；卡担SS厅物乂UW项目80余项，具中国家自然科学基金项目8项，省部级基金项目10项，内研总运费800余万元；获地厅»及以上各美科研奖励K）J会项；茨得专语作权20余项.【学科竞赛】近年电学院学生在5晰杯全国软件和信息技术专业人才大费、中国高校计管机大赛一团体若序设计天悌工日去省高校大学三序设计大IL前大学生教学*S、三大学教学竟费、三SKW*-大学4娜创业大费、施访日肃省大学4课外学术M技作品竞表答学科专业克则就强/厢省皴统500«人次.旺所有®38ftlt202班5月30日.）4,团学工作:筑牢反诈防线，擦亮智慧双眼为深入货彻落实实的二十大精神，引导我院广大青年学习防范诈警的基本知识,提高防范诈餐的筮本物.我院于5月17B开展了历范电信网络涓fi,共建平安和沿厢.主题活动，呼吁同学们保护好人人身安全和财产安全的同时，为创造和35安全崛交加自己的力*.S月17日，信息工程学院反诈第宣传&B团队，JNta在"何克广场进行本次.本次活动首先由芯身成员JS囹自己班圾口,在垠砌行了反诈密演讲.此后,在中午12点io»左右，防海=队齐聚-®a«-前，拉起了条幅，喇学生在条幅上迸行签芳嗣I,通过防范电信网络诈珥共建平安和谐校园，不做通信网络洞a工具人”等电53有喷闻五§,志幽和Hm严谩的给路过的同学1周及宣传反诈领知识.此次J励的开展，切3滥高了捌反诈工作的针对性、JBSltl.增强广大学生的防尼电信网珞沿a炽，不做电信网珞诈虹E具人，保护好介入人身安全和财产安全.关注电信诈卷酬I,JttB自身社会羟验，崎社会造应能力，为创建"无洋校园"、"无诈学院”作出了职极为解！IW8：帏涵审核：王稚文编译青春，驱动未来僖息工程学院毕业晚会立夏悄然而至，麟好脚声触响，毕业Ift会作最后的告别.五.总结与收获通过这段时间对HTML学校学院网页的制作与学习，发现我在HTML的学习中还有着许多问题，在此次系统中自己先弄不出来轮播图，后来看了老师发来的资料和看了视频学习，终于弄出来了，但是无论是我的轮播图还是插入的视频，它都有空隙不能连在一起，这个问题目前还没有解决，说明我在这方面的知识还有所欠缺，在接下来的暑假生活中，我应该多加学习，争取可以自己解决这个问题,让自己的网页更加美观直接，当然我在这次系统中也有了一定的收获，我更加熟悉了HTML书写的规则和一些语句的使用，对CSS的使用和盒子的建立还有框架的搭建都比较熟悉了，也明白了前端对计算机的重要性，感谢刘晨老师这学期的教学，让我又掌握了一门计算机课程。我的学习生活还在继续，我也相信我会做的更好。
