HTML大作业
目录
一、主题 (2)
二、网站设计思路 (2)
三、网站功能介绍 (2)
四、制作过程 (3)
首页 (3)
个人资料 (5)
相册 (7)
音乐 (8)
好友留言 (9)
五、页面展示 (10)
六、总结分析 (12)
附录 (13)
一、主题
我的QQ空间
二、网站设计思路
之前一直没想好做什么样的网页,后来在逛QQ空间的时候觉得做个空间的网页也不错。所以就准备着做了。首先我想到的是QQ空间里的页面框架都差不多,那么我该怎样让我的QQ空间的也有相似的框架呢。我想到用CSS+DIV,DIV+CSS可以使HTML代码更整齐,它的可控性比布局表格强。我初步计划设五个页面,分别为“首页”、“个人资料”、“相册”、“音乐”、“好友留言”。在首页插一些图片和文字,个人资料里加了一个MV。
三、网站功能介绍
首页页面的功能有“首页”、“个人资料”、“相册”、“音乐”、“好友留言”(这些都在最上面,靠左,分别链接到“首页”、“个人资料”、“相册”、“音乐”、“好友留言”页面);好友动态(好友动态在中间);我的资料和图像(在左上角);最近访客(在资料和图像下面);好友留言(在访客下面,链接到“好友留言”);还插入了背景音乐“林俊杰—她说”,设置为不重复播放;网页最下是制作人姓名、制作人邮箱、学号和联系电话。
个人资料页面的功能最上面和最下面都和首页相同;中间上面是
我的个人资料,下面插入梁静茹的“爱久见人心”的MV,设置为不重复播放;左边是我的图像;图像下面是“图片”、“日志”、“说说”、“浏览量”。
相册页面的功能最上面和最下面都和首页相同;中间插了九张图片,背景音乐为曲婉婷的“我的歌声里”,不重复播放。
音乐页面的功能最上面和最下面都和首页相同;中间上面有一张林俊杰的图片;下面是两首歌,分别为林俊杰的“她说”和曲婉婷的“我的歌声里”,两首歌有开始和暂停键;左边是我的图像;图像下面是“图片”、“日志”、“说说”、“浏览量”。
好友留言页面的功能最上面和最下面都和首页相同;中间是好友留言;左边是我的图像;图像下面是“图片”、“日志”、“说说”、“浏览量”;在左下有好友留言;背景音乐为曲婉婷的“我的歌声里”,不重复播放。
四、制作过程
首页
首先设置整个页面的背景和页面高宽度,背景水平重复,再利用菜单将整个页面分为五个部分,分别为导航、个人资料、最近访客、空间动态、还有个人制作声明。用无序列表设置导航,并且链接到其他页面。根据不同要求设置字体颜色,插入图片,加上链接。插入音频,并且把长宽度都设置为10,使人不易察觉,这样进入页面就有
音乐响起。
用CSS设置排版,去掉链接的下划线,以及背景图片的设置重复背景,边框为1像素,还有波浪线的颜色为#334455,如果设置的字体本机没有,那么默认的字体则为"方正喵呜体",背景颜色为白色,同时设置了各个区的外边距的复合属性。代码如下图所示:
用DIV设置顶部,无序列表设置导航“首页”、“个人资料”、“相册”、“音乐”、“好友留言”。
在页面中插入歌曲,代码如下图所示:
空间制作人声明代码如下图:
在后面附录里有。
个人资料
这个页面的布局跟首页差不多。在这个页面中添加表格,在表格中填写个人资料,代码如下图:
在页面左边设置我的图像。图像下面是“图片”、“日志”、“说说”、“浏览量”。代码和显示图分别如下:
在中间插入一段梁静茹演唱的“爱久见人心”的MV,代码和显
示图分别如下:
相册
布局跟首页一样,在这页面中,也是添加表格,在表格中插入图片,代码和显示图分别如下:
同样插入背景音乐,背景音乐为曲婉婷的“我的歌声里”。同样有制作人声明。
音乐
页面布局同首页,左边跟个人资料的左边一样,在中间添加一张
林俊杰的图片,图片下面为两首歌曲。歌曲的代码如下图:
页面效果如下图:
好友留言
布局同首页,其余的在前面页面中都可以找到原型,只是把中间换成了好友留言。代码如下图:
五、页面展示
首页
个人资料
相册
音乐
好友留言
六、总结分析
大一下学期我们学习网页制作时做过一次网页,那次是用Dreamweaver做的,我记得当时花了快一个星期。本以为这次不会花那么长时间,没想到也花了一个星期。主要是这次使用代码做的,跟Dreamweaver有所不同。而我这次做的网页是用CSS+DIV来排版布局的,它的优点在于可以使HTML代码更整齐,跟容易让人理解,而且在浏览时的速度也比传统的布局方式快,最重要的是它的可控性要比布局表格强得。
其实,在做网页的时候,有很多都不会,比如说:插入视频等。当我不会做的时候,我就会问下同学或者上百度去搜索。虽说有的问题在百度上也找不到答案,这时我就去翻书,因为书上会很详细的讲解。做这次网页我最大的收获就是不管遇到什么困难,只要你不放弃,
总会找到你想要的答案。
附录
a{
text-decoration:none
}
#content {
border:1px dashed #334455
}
#top{
height:900px; width:1440px; background-image:url(img/1.jpg);margin:0px 0px
}
.menu{
width:1440px; height:40px;repeat-x;margin:0px auto 0px 100px
}
.menu ul{
width:1440px;loat:left; display:inline;
}
.menu ul li{
width:70px;float:left;display:inline; margin:0px 10px
}
.menu ul li a{
width:90px;float:left;height:40px;float:left;
font-size:20px;font-family: "方正喵呜体";
text-decoration:none; text-align:center; line-height:50px; color: #FFFFFF; margin:0px 0px 0px 0px
}
.menu ul li a:hover{
background-color:#0033FF; background-position: center
}
#left{
height:750px; width:150px;background-color: #FFFFFF; float:left;margin:20px auto auto 140px
}
#right{
height:750px; width:800px;background-color: #FFFFFF;float:left;margin:20px auto auto 10px;
}
#foot{
height:60px; width:960px;background-color: #FFFFFF;float:left;margin:10px auto auto 140px
}
STYLE1 {
font-family: "新宋体"
}
空间动态
每个人都会经过这个阶段,见到一座山,就想知道山后面是什么。我很想告诉他,可能翻过山后面,你会发现没什么特别。回望之下,可能会觉得这一
边更好。每个人都会坚持自己的信念,在别人看来,是浪费时间,她却觉得很重要.
阅读(216) 评论(1314) 转载(520) 收藏(520)
站在人生的十字路口,我们也许会徘徊不定、犹豫不决。影响我们下决心的因素,往往既不是事情过于复杂,也不是我们的判断力不够,而是对于自己即将放弃的选择心有不甘,既想要鱼,又想要熊掌。这时候我们就要明白,没有舍就没有得,今天所放弃的,明天可能会加倍回报给你。
《网页设计与制作》期末考试试题
《网页设计与制作》期末考试试题 一、单项选择题(本大题共30小题,每小题2分,共60分) 1、目前在Internet上应用最为广泛的服务是( )。 A、FTP服务 B、WWW服务 C、Telnet服务 D、Gopher服务 2、域名系统DNS的含义是( )。 A、Direct Network System B、Domain Name Service C、Dynamic Network System D、Distributed Network Service 3、主机域名center. nbu. edu. cn由四个子域组成,其中( )子域代表国别代码。 A、center B、nbu C、edu D、cn 4、当阅读来自港澳台地区站点的页面文档时,应使用的正确文本编码格式是( )。 A、GB码 B、Unicode码 C、BIG5码 D、HZ码 5、当标记的TYPE属性值为( )时,代表一个可选多项的复选框。 A、TEXT B、PASSWORD C、RADIO D、CHECKBOX 6、为了标识一个HTML文件开始应该使用的HTML标记是( )。 A、
B、 C、web大作业题目Web程序设计期末考查 一、能力要求 1、能独立的运用开发工具进行基于web程序设计前台的简单系统开发 2、能根据一定主题设计出各个页面模块,使用所学的web技术构建简单的 web系统 3、能撰写简要的设计与开发文档 二、设计题目参考(系统主题): 以下大作业主题仅作参考,作业主题可以自拟。 1.以通讯录为主题 2.以班级信息为主题 3.以课程信息为主题 4.以作业信息为主题 5.以教师信息为主题 6.以教材信息为主题 7.以院系信息为主题 三、考查要求: 1.必须以某个特定的主题为中心,主题可以自拟,系统由5个以上文件(页 面)组成。 2.在页面中要有以下页面元素:图片,超连接,表单,表格设计、JavaScript 特效等。 3.使用Dreamweaver、notopad、fireworks作为开发工具 4.页面的风格属性用CSS技术设置 5.主页面包括滚动文字链接、动态图片(可以使用Dreamweaver时间轴制 作)、按钮等元素 6.撰写出相应的开发文档,主要包括:网站的中心主题、网站的框架、页 面的组织、所用的开发技术、课程的学习心得等 7.作品在一周内完成 四、评价标准 不及格(60分以下):不能独立完成作品,或上交作品完全不符合考查要求。 特别说明,如发现直接使用他人作品,未加任何修改,期末考查成绩评定为不及格(证明抄袭使用他们作品的方式包括教师询问、答辩或他人检举,如发现对所交作品完全陈述不清,但作品本身又明显体现了一定水平即认定是抄袭他人作品)。 及格(60-69):能独立完成作品,作品基本符合考查要求,作者能正确陈述完成作品的开发步骤和思路。没有作品说明文档的一律评定为及格或以下成绩。 中等(70-79):能按时、独立完成作品,作品基本符合考查要求。说明文档基本能体现了作品主题和完成步骤。 良好(80-89):独立完成作品,完成考查要求中规定的功能,界面美观,撰写的说明文档思路清晰,能完整说明作品开发思路与设计理念。 优秀(90-100):独立完成作品,界面美观,完成并适当优化了考查要求中的基本功能,撰写的说明文档格式准确规范。作品和说明文档体现了作者完好的掌握了该课程所要求的知识点和技能要求,并体现了一定的创新水平。 HTML期末模拟及参考答案HTML期中考试题(含答案) 第1题判断正误(10分) (1)HTML标记符的属性一般不区分大小写。(对)(2)网站就是一个链接的页面集合。(对)(3)将网页上传到Internet时通常采用FTP方式。(对)(4)所有的HTML标记符都包括开始标记符和结束标记符。(错)(5)用H1标记符修饰的文字通常比用H6标记符修饰的要小(错)(6)B标记符表示用粗体显示所包括的文字。(对)(7)GIF格式的图象最多可以显示256种颜色。(对)(8)HTML表格在默认情况下有边框。(错)(9)创建图象映射时,理论上可以指定任何形状作为热点。(对)(10)指定滚动字幕时,不允许其中嵌入图象。(错) 第2题单选题(20分) (1)WWW是的意思。答案:B A.网页B.万维网C.浏览器D.超文本传输协议 (2)在网页中显示特殊字符,如果要输入“<”,应使用_________。答案:D A.lt; B.≪ C.< D.< (3)以下有关列表的说法中,错误的是:。答案:D A.有序列表和无序列表可以互相嵌套。 B.指定嵌套列表时,也可以具体指定项目符号或编号样式。C.无序列表应使用UL 和LI 标记符进行创建。 D.在创建列表时,LI 标记符的结束标记符不可省略。 (4)如果要在表单里创建一个普通文本框,以下写法中正确的是:。答案:A A. B. C. D. (5)在指定单选框时,只有将以下属性的值指定为相同,才能使它们成为一组。答案:B A.type B.name C.value D.checked (6)要创建一个左右框架,右边框架宽度是左边框架的3倍,以下HTML语句正确的是:。B A. |