HTMLCSSJS大作业.docx
《HTMLCSSJS大作业.docx》由会员分享,可在线阅读,更多相关《HTMLCSSJS大作业.docx(50页珍藏版)》请在冰点文库上搜索。
![HTMLCSSJS大作业.docx](https://file1.bingdoc.com/fileroot1/2023-5/20/3c092a33-6d73-487d-a9c0-ea2a26d3cced/3c092a33-6d73-487d-a9c0-ea2a26d3cced1.gif)
HTMLCSSJS大作业
网页设计与开发——HTMLCSSJavaScript结业设计大作业
第一章序言
本学期学习了HTML,CSS,JavaScript最基本的语法。
学习了如何设计最基础的网页,如何设置网页中文字属性,如何插入表格,利用表格控制页面格局,如何插入背景图片,设置背景颜色,,利用JavaScript脚本技术插入一些动画等等。
在自己尝试着做一些小网页时,深深感受到制作时的乐趣。
HTML所扮演的角色:
HTML是Internet上用于设计网页的主要语言。
网页包括动画、多媒体、图形等各种复杂的元素,其基础架构都是HTML。
HTML的英文是“HyperTextMarkkupLanguage”,翻译为“超文本标记语言”用它就可以设计出一个标准的网页。
不仅可以爱记事本中编写HTML代码,任何文本编辑器都可以编写HTML,都可以用来制作网页。
比如写字板、Word、WPS等编辑程序,不过在保存时要存为.htm或.html格式。
不仅用IE浏览器可以查看网页(.html文件)效果,NetscapNavigator也可以浏览。
HTML具有跨平台性,即是说,只要有合适的浏览器,不管在那个操作系统下,都可以浏览HTML文件。
只有通过HTML文档进行相应的解析。
CSS就是CascadingStyleSheets,译为“层叠样式表”,简称样式表,它是一种制作网业的新技术。
“样式”就是指网页中文字的颜色、大小、图片位置等格式,“层叠”的意思是,当在HTML中引用了数个样式文件(CSS文件)时,当样式文件中的样式发生冲突时,浏览器会依据层叠顺序处理。
CSS是目前唯一的网页页面排版样式标准。
它能使任何浏览器都能听从指令,知道该以何种布局、格式显示各种元素及其内容。
JavaScript是一种基于对象的脚本语言,他用于开发Internet客户端的应用程序。
它可以结合HTML、CSS,实现一个Web页面中与Web客户交互的功能。
它可以直接对用户或客户的输入做出响应,无须经过Web服务程序。
因此,可以实现类似弹出提示框这样的交互性网页功能。
它对用于的响应是以“事件”做驱动的,比如,“单击网页中的按钮”这个时间可以引发对应的响应。
JavaScript依赖于浏览器,与操作系统无关。
因此,只要在浏览器的计算机上,且浏览器支持JavaScript,就可以对其正确执行。
第二章题目立意
利用HTML,CSS,JavaScript技术设计一个简单的网页。
通过链接方法,把每个网页连接起来。
我主要设计一个文学天地,介绍包括古代诗人(李白,苏轼等)以及现代文学家(徐志摩,林徽因)的作品以及一些简介。
其中用CSS技术编排页面布局,用JavaScript技术插入动画等特效。
第三章作品简介
首页为简单的欢饮界面,包括一张日历,欢迎进入的字样,以及跟随鼠标移动的上升气泡。
点击链接进入第一页,主要是导航,引导读者进入各个页面。
其中插入了滚动字体“欢迎进入文学天地!
”。
根据导航读者将进入各个页面,包括李白,杜甫,苏轼,陆游等古代诗人的简介,作品介绍等,以及现代文学家的一些作品,某些页面插入了背景音乐以及一些特效。
最后一个页面为迎接即将到来的圣诞节插入的一个欢快的圣诞快乐的flash动画。
第四章作品详解
首页效果如下图1所示:
图1
首页设计代码如下:
陈文华的网页设计
--
body{background-image:
url(欢迎.jpg);
background-repeat:
no-repeat;
background-position:
50%100%;
}
#Layer1{
position:
absolute;
width:
262px;
height:
115px;
z-index:
1;
left:
789px;
top:
406px;}
.STYLE1{
font-size:
xx-large;
font-family:
"楷体";
color:
#33FF99;}
a:
link{
text-decoration:
none;
color:
#00FFFF;}
a:
visited{
text-decoration:
none;
color:
#FF0000;}
a:
hover{
text-decoration:
underline;
color:
#FF66FF;}
a:
active{
text-decoration:
none;}-->
欢迎进入
文学天地
varDn="初一;初二;初三;初四;初五;初六;初七;初八;初九;初十;十一;十二;十三;十四;十五;十六;十七;十八;十九;二十;廿一;廿二;廿三;廿四;廿五;廿六;廿七;廿八;廿九;三十";