- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

【web网页设计期末课程大作业】基于HTML+CSS+JavaScript仿山东传媒职业学院网站

IT司马青衫发表于 2022/08/10 23:02:32 2022/08/10

【摘要】 🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】🎓 web前端期末大作业：【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】🌎超炫酷的Echarts大屏可视化源码：【🔰 echarts大屏展示大数据平台...

🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主

💂 作者主页: 【主页——🚀获取更多优质源码】

🎓 web前端期末大作业：【📚毕设项目精品实战案例 (1000套) 】

🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】

🌎超炫酷的Echarts大屏可视化源码：【🔰 echarts大屏展示大数据平台可视化(150套) 】

🎁 免费且实用的WEB前端学习指南：【📂web前端零基础到高级学习视频教程 120G干货分享】

🥇 关于作者: 历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。十载寒冰，难凉热血；多年过去，历经变迁，物是人非。然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！

@TOC

一、👨‍🎓网站题目

🏫 校园网页设计、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。

二、✍️网站描述

🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度

🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)

页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
所有页面相互超链接，可到三级页面，有5-10个页面组成。
页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。
菜单美观、醒目，二级菜单可正常弹出与跳转。
要有JS特效，如定时切换和手动切换图片轮播。
页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。
页面清爽、美观、大方，不雷同。。
不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

三、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

四、🌐网站演示

五、⚙️ 网站代码

🧱HTML结构代码


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<title>山东传媒职业学院</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
  <div id="banner"><img src="img/001.JPG" alt="" /></div>
  <div id="menu">
    <ul>
      <li><a href="index.html">学院首页</a></li>
      <li><a href="gu1.html">学院简介</a></li>
      <li><a href="gu2.html">学院新闻</a> </li>
	  <li><a href="#">专业简介</a></li>
      <li><a href="#">校园党建</a></li>
	  <li><a href="#">教学科研</a></li>
	  <li><a href="#">师资队伍</a></li>
	  <li><a href="#">校园文化</a></li>
	  <li><div class="search"><input type="search" /><input type="button" value="搜索" /></div></li>
    </ul>
    <div class="clear"></div>
  </div>
  <div class="banner"><img src="img/banner2.jpg" width="1200" height="232" alt=""/></div>
  <div id="main">
  <table width="180" border="0" align="left" cellpadding="0" cellspacing="0" class="slider">
  <tr>
    <td style="border-bottom:1px solid #CCC" height="40" align="center" valign="middle" bgcolor="#0066CC"><a style="color:#FFF" href="#">学校概况</a></td>
    </tr>
  <tr>
    <td style="border-bottom:1px solid #CCC" height="40" align="center" valign="middle" bgcolor="#F7F7F7"><a style="color:#000" href="#">现任领导</a></td>
    </tr>
  <tr>
    <td style="border-bottom:1px solid #CCC" height="40" align="center" valign="middle" bgcolor="#F7F7F7"><a style="color:#000" href="#">学院往事</a></td>
    </tr>
  <tr>
    <td style="border-bottom:1px solid #CCC" height="40" align="center" valign="middle" bgcolor="#F7F7F7"><a style="color:#000" href="#">学校校训</a></td>
    </tr>
  <tr>
    <td style="border-bottom:1px solid #CCC" height="40" align="center" valign="middle" bgcolor="#F7F7F7"><a style="color:#000" href="#">党政机构</a></td>
    </tr>
     <tr>
    <td style="border-bottom:1px solid #CCC" height="40" align="center" valign="middle" bgcolor="#F7F7F7"><a style="color:#000" href="#">科研机构</a></td>
    </tr>
     <tr>
    <td style="border-bottom:1px solid #CCC" height="40" align="center" valign="middle" bgcolor="#F7F7F7"><a style="color:#000" href="#">教辅机构</a></td>
    </tr>
     <tr>
    <td style="border-bottom:1px solid #CCC" height="40" align="center" valign="middle" bgcolor="#F7F7F7"><a style="color:#000" href="#">群众团体</a></td>
    </tr>
    <tr>
    <td height="300" align="center" valign="middle" bgcolor="#FFFFFF"></td>
    </tr>
  </table>

  <div class="nr">
      <h2 style="line-height:40px;">山东传媒职业学院简介</h2>
	  <img src="img/1.jpg" width="660" height="350" alt="" class="nr-img"/>
<p class="txt-indent">山东传媒职业学院前身是1960年创建的山东省广播学校，1982年更名为山东省广播电视学校。2008年2月，经山东省人民政府批准，中华人民共和国教育部备案，建立山东传媒职业学院。学院隶属于山东省新闻出版广电局，与省教育厅共管，是省内唯一一所广播影视及大众传媒类国有公办普通高校。2014年10月，山东省出版技工学校并入山东传媒职业学院。      </p>
      <p class="txt-indent">学院现有章丘校区、燕子山校区和文东校区。燕子山校区位于济南市历下区燕子山西路，文东校区位于济南市历下区文化东路，章丘校区作为主校区位于济南市章丘区大学城，2008年建成使用，占地面积共计一千余亩，建筑面积12.8万平方米，教学生活设施先进齐全,校园环境优雅，人文氛围浓郁，是读书求学的理想场所。</p>
      <p class="txt-indent">学院面向全国13个省市招生，新生报到率超过90%，全日制在校生规模6000人以上。毕业生分布在中央电视台及全国各省市县广播影视机构、动漫创意机构、网络与新媒体等相关单位，多数已成为业务骨干。学校毕业生就业率达到96%。        </p>
      <p class="txt-indent">学院设有播音主持系、影视制作系、新闻传播系、信息工程系、动画系、艺术设计系六个教学单位和实训中心、图书馆两个教辅单位。设有播音与主持、影视节目制作、影视编导、新闻采编与制作、视觉传达艺术、影视动画、影视灯光、录音技术与艺术、广播电视网络技术等23个专业，涵盖广播电视及新媒体的传播、制作、艺术、技术等领域，形成了以广播影视节目制作专业群、新闻传播专业群、广播电视技术专业群为骨干的“三足鼎立式”专业群建设格局。学院已拥有播音与主持、摄影摄像技术、新闻采编与制作3个省级特色专业和广播电视网络技术、播音与主持2个省级教学团队，9门省级精品课程。2012年，主持与播音专业和摄影摄像技术专业被国家财政部、教育部评为“中央财政支持的国家重点建设专业”。        </p>
      <p class="txt-indent">学院是教育部信息技术应用培训教育工程培训基地、山东广电培训中心，设有山东省新闻出版局职业技能鉴定所、山东省新闻出版行业特有工种职业技能鉴定站、山东省广播影视行业特有工种职业技能鉴定站、山东省广播影视系统普通话水平测试站，并与中国传媒大学合作开展了11个专业的本科现代远程教育、3个专业的专升本函授教育、4个专业的自学考试（独立本科）网络助学教育，同步以山东广电培训中心为平台面向社会提供艺术类考前辅导和在职人员技能培训等服务
        学院师资力量雄厚，现拥有专任教师175人，其中教授4人，其他系列正高级职称1人，副高以上职称69人，教师中硕士以上学历65人，专业带头人21名，聘请了高水平客座教授3名，兼职教师20名，引进高水平传媒行业大师组建六个“大师工作室”，并建有十多个校内教师工作室。“双师型”教师在专任专业课教师的占比达38%以上，实习指导教师和兼职专业课教师均具有高级职业资格或中级专业技术资格。        </p>
      <p class="txt-indent">学院建有集教学、科研、社会服务三大功能于一体的、符合省级广电媒体标准的综合实训中心，包括可满足直播要求的600平方米高清演播室、200平方米标清演播室、100平方米虚拟演播室，并设立了数字视频非线性编辑工作站机房、苹果后期包装机房、三维动画实验室、摄影棚等实验实训场地达60多个。学院图书馆各类图书音像资料80余万册（件）。
        学院建有先进的校园计算机网、有线电视网和以国家有线电视网为依托的交互式远程教室等公共服务设施。搭建了主干宽带1000兆、拥有3500多个信息点的校园“数据资源共享云平台”，实现了校区间有线无线全覆盖，校区间的网络账号、校园一卡通账号、宿舍电控账号、校内教务、网站、资产等各项系数据无差别通用。在线教育平台和质量监控平合平台正式上线运行，为全校师生教学、科研、生活提供了更加便利的应用环境，为教师参与混合教学法改革以及教学管理提供了更加便捷的信息化手段。
        学院坚持“依托传媒，服务传媒”的办学理念，大力实施人才培养模式改革，引领职业教育创新发展。在办学模式上突出“校媒融合”办学特色，按照“综合素质高，创新能力强，适应全媒体”的人才培养目标，在校内搭建包括报纸、广播电视台、网站、记者站、新媒体、实训中心在内的“六位一体”全真型全媒体校园教学平台，以项目为纽带，全面实施“不同专业、不同能力阶段、校内校外”相融通的"融通立交”培养模式。学生在校期间全面参与影视领域各类型各题材节目的策划、主持、制作、拍摄等环节，熟练掌握各类实践教学项目的操作流程，为高技能型人才的培养和输送提供有力保障。        </p>
      <p class="txt-indent">学院实行开放办学，联手行业合作构建学生专业实践和就业的平台培养传媒应用型人才。与山东广播电视台、山东教育电视台、山东广电网络中心及各地市电视台、影视中心等100多家传媒行业企业建立了校外产学研实践教学基地，实现了“前台后院”式的教学与实践无缝衔接。校内建立了包含“创业园”、“孵化园”的创业学院，近30家示范企业、大学生实体及模拟企业项目入驻，满足学生观摩实习、跟岗实习、顶岗实习、教师顶岗锻炼及校企合作进行项目开发等需要，使学生在校期间即可完成“学生”到“媒体人”的身份转换。在《大众日报》、《齐鲁晚报》等新闻媒体组织的“山东教育总评榜”活动中，学院荣获“最具专业特色院校”和“就业前景十佳院校”。
        学院以“唯真尚能”为校训，倡导“务实、严谨、灵动、和谐”的校风，“心致诚、业致精”的教风和“乐学善思”的学风，坚持立德树人，以践行社会主义核心价值观为重点，以理想信念教育为切入点，大力开展素质教育，构建以“思想品德、知识体系、综合素质、职业能力”为培养要素的“四位一体”人才培养体系。学院在各党支部和广大党员中持续进行了以“走进班级、走进学生宿舍、走进贫困生”的“三进”活动，在学生中广泛开展了“一坛（青年学生成长论坛）一团（校园学生社团）一课堂（国学院第二课堂）”育人工程和“一系（教学系）一品（品牌文化）一特色（专业特色）”的文化品牌创建活动，形成了以理想信念教育为灵魂、以优秀传统文化教育为内核、以职业核心能力教育为基础、以特色活动教育为载体的“四足鼎立”特色素质育人模式，实现学生德业兼修、全面发展，打造了山传德育品牌。学院先后获得“全省广播电视系统先进集体”、“省直文明单位”、“平安建设先进基层单位”等称号。</p>
     <p class="txt-indent"> 学院以服务社会为使命，高度重视科研工作,学术影响力持续上升。2015年学院成功中标山东省教育科学“十二五”规划重大招标课题《关于完善山东省现代职业教育体制机制的研究》，实现了承接省级重大课题研究的突破。截至2016年底，共承担各级各类课题100余项，组织完成了18个专业67门核心课程的课程标准建设。受教育厅委托，牵头进行全省新闻采编与制作专业教学指导方案的开发工作。</p>
     <p class="txt-indent">学院先后获得山东省职业教育教学成果奖二等奖1项，三等奖1项。
        “东风吹来满眼春，潮起正是扬帆时。”面对高等职业教育发展的新形势和新机遇，山东传媒职业学院学院将以创新、协调、绿色、开放、共享五大发展理念为引领，以立德树人为根本任务，以提高人才培养质量为核心，坚持走“强化内涵、彰显特色、发挥优势、提升质量”的发展之路，培养创新型、复合型、发展型高素质技能人才，为山东省和国家传媒产业转型升级提供技术技能人才支撑。
        学院将以质量求生存、以特色求发展，为文化传媒事业发展贡献自己力量。        </p>
      <p>东校区地址：山东济南市经十东路章丘大学城8678号 邮编：250200<br/>
        西校区地址：山东济南市燕子山西路38号 邮编：250014<br/>
        文东校区地址：山东济南市文化东路18-4号 邮编：250014<br/>
        咨询电话：0531—61326612/82678988/82962347/82929371<br/>
        网址：http://www.sdcmc.net</p>
    </div>
  </div>
  <div class="clear"></div>
  <div id="footer">
    <div id="footer_infor">  山东传媒职业学院  </div>
  </div>
</div>
</body>
</html>

💒CSS样式代码

@charset "utf-8";
*{margin: 0; padding: 0;}
.clearit{clear:both;}
body { background:#F3F3F3;font-size: 14px; line-height: 28px;
}
A:link {TEXT-DECORATION: none;}
A:visited {TEXT-DECORATION: none;}
A:hover {TEXT-DECORATION: underline;color: #ffffff;}
ul,li{list-style-type:none;}

#container #main .menu_left img {
	padding-top: 3px;
	padding-bottom: 3px;
}
#container {
	width: 1200px;
	clip: rect(auto,auto,auto,auto);
	padding: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

tr, td{ font-family:'微软雅黑'; font-size:14px;}

#main{ width:1200px; background: #fff; overflow:hiddenl;��
	margin: 0px;
	padding: 0px;
}
#main .nr h2{ text-align:center; border-bottom:#000099 1px solid;}
#main .nr p{ line-height:25px; font-family:'微软雅黑'; padding:10px; font-size:14px;}
#main .nr ul li{ line-height:25px;  font-family:'微软雅黑'; font-size:14px; line-height:40px; border-bottom:1px dashed #ccc;}
#main .nr ul li:hover{ text-decoration: none;}
#main .nr ul li a{ color:#333}
#main .nr ul li a:hover{ color: #666}
#footer {
	background-color: #333333;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
#footer p a {
	color: #FFFFFF;
	font-weight: bold;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
#footer_infor   {
	color: #CCCCCC;
	text-align: center;
	font-size: 12px;
	padding-top: 12px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-bottom: 5px;
	margin-top: 0px;
}
#footer_infor a {
	color: #CCCCCC;
	text-decoration: none;
}
#footer_infor a:hover {
	color: #0066FF;
}


#footer p {
	text-decoration: blink;
	text-align: center;
	margin: 0px;
	padding: 0px;
}


#banner {
	height: 85px;
	margin: 0px;
	padding: 0px;
}
#menu { width:1200px;
	background-color: #0066CC;
	margin: 0px;
	padding: 0px;
}
.menu_left {
	width: 168px;
	float: left;
	margin-top: 4px;
	margin-right: 0px;
	margin-bottom: 4px;
	margin-left: 0px;
	padding: 5px;
}


#menu ul {
	list-style-type: none;
	margin:0 20px;
	padding: 0px;
}
#menu ul li { width:110px; float:left;
}

#menu ul li a {
	float: left;
	font-size: 14px;
	color: #FFFFFF;
	text-decoration: none;
	margin: 0px;
	font-weight: normal;
	display: block;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
}
#menu ul li a:hover {
	color: #FF3300;
	margin: 0px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	display: block;
}
.bk h2 {
	font-size: 14px;
	text-align: center;
	color: #FFFFFF;
	margin: 6px;
	padding: 0px;
}
.bk img {
	float: right;
	padding: 0px;
	margin: 0px;
}


.clear {
	clear: both;
}
.content {
	width: 330px;
	float: right;
	margin: 5px;
	padding: 0px;
}
.content ul li  {
	line-height: 20px;
}
.content ul li.txt-right{float: right;}

.content a {
	text-decoration: none;
	margin: 0px;
	text-align: center;
	vertical-align: bottom;
	color: #000000;
}
.bk .bk-left li {
	text-align: left;
	padding: 5px;
	text-decoration: none;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: dashed;
	border-right-style: dashed;
	border-bottom-style: solid;
	border-left-style: dashed;
	border-top-color: #CCCCCC;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	border-left-color: #CCCCCC;
}
.bk .bk-left ul {
	padding: 0px;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 0px;
}

.bk .bk-left a {
	text-align: left;
	font-size: 12px;
	margin: 0px;
	padding: 0px;
	text-decoration: none;
}
.bk .bk-left a:hover {
	color: #FF0000;
	text-decoration: underline;
}

.bk .bk-left h2 {
	background-color: #1E63A8;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 0px;
	padding-left: 0px;
	margin-right: -1px;
	margin-left: 0px;
}
.slider{
	float: left; 
	margin-right: 20px;
}
.nr{
	float: right;
	width:1000px;
	background: #fff;
}

.nr p{text-align: justify;  }
.nr p.txt-indent{text-indent:24px;}
.nr img.nr-img{text-align: center; margin:0 auto; padding:10px 0;display: block; border: none;}
.site{line-height: 28px; border-bottom: 1px solid #ccc; font-size: 12px; color: #666}
.txtlixt{
	width: 90%;
	margin: 15px auto;
}
.txtlixt li{
	background-image: url(../img/li.jpg);
	background-position:center left;
	background-repeat: no-repeat;
	line-height: 31px;
	border-bottom:  1px solid #eee;
	text-indent:14px;
}
.txtlixt li em {
	float: right;
	margin-right: 15px;
	font-style: normal;
	color: #999;
}
#pagination-digg {margin-left: 25%;}
#pagination-digg li { border:0; margin:0; padding:0; font-size:11px; list-style:none; /* savers */ float: left}
#pagination-digg a { border:solid 1px #9aafe5; margin-right:2px; }
#pagination-digg .previous-off,#pagination-digg .next-off  { border:solid 1px #DEDEDE; color:#888888; 
display:block; float:left; font-weight:bold; margin-right:2px; padding:3px 4px; }
#pagination-digg .next a,#pagination-digg .previous a { font-weight:bold; }
#pagination-digg .active { background:#2e6ab1; color:#FFFFFF; font-weight:bold; display:block; float:left; 
padding:4px 6px; /* savers */ margin-right:2px; }
#pagination-digg a:link,#pagination-digg a:visited { color:#0e509e; display:block; float:left; padding:3px 6px; 
text-decoration:none; }
#pagination-digg a:hover { border:solid 1px #0e509e; }
.search{
	margin-top: 15px;
	padding:0;
	width:260px;
}
.search input[type="search"]{border:1px solid #ccc; width:190px;float:left;height:24px;}
.search input[type="button"]{border:none; width:60px;float:left; background:#ccc;height:24px;}

六、🥇 如何让学习不再盲目

第一、带着目标去学习，无论看书报课还是各种线下活动。
首先要明确自己的学习目标是什么，是想解决什么问题，实现怎样的目标。

第二、学习要建立个人知识体系
知识是学不完的，书籍是浩如烟海的。我们尽情徜徉其中的时候，千万不要被海水淹死，没有自我了。在学习过程中，我们会发现每一个知识点都是有她的边界和背景的，我们要善于归纳整理知识

第三、学到了就要用到

有时，我们一天下来感觉学到了很多干货，那么我们一定要将这些知识点和实际工作和生活联系起来。知识和实践相互联系靠拢。爱学习是一件好事，但只有会学习的人，才有价值。

七、🎁更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！

2.💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬

💂【获取方式】

gitee码云源码仓库-欢迎Star: https://gitee.com/zhanyuqiu2022/my-app

点赞
收藏
关注作者

0/1000

抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认取消

加入云驻计划，成为创作者

华为云周边好礼
免费体验产品
特殊身份标识
线下官方门票
内部专家零距离
与10000+优质创作者共同成长

立即加入