设计内容及要求1使用各种HTML标记,CSS各种常用样式及简单的JavaScript技术,完成的网页没有错误2首页设置导航栏,命名为index.html3利用CSS技术对网站进行布局,网站风格统一4灵活运用JavaScript使网页生动一、设计思路首页:二、设计结果及分析首页:首页作品简介人物简介广饶关于图片欣赏首页主页东营Id=menuId=wrapperId=sidebar1.对于主页,因为不太喜欢类似于搜狐类似的全文检索,更青睐于百度类似比较简洁的页面,随后设计出主页,虽然很简单,但我认为很精练,突出了这次设计的主题。东营:2.对于主页,因为不太喜欢类似于搜狐类似的全文检索,更青睐于百度类似比较简洁的页面,随后设计出主页,虽然很简单,但我认为很精练,突出了这次设计的主题。广饶简介:联系:3.第四章做了根据js的一个互动。可以对前台邮箱的内容进行判断。图片欣赏:4.第五章,由于需要用到表格的内容,所以将照片用着种形式呈现出。三、总结通过本次网页的制作过程,我学到了很多实用的东西,也充分了解了editpuls这个软件的强大,对学习了一个学期的课程也有了深入的了解。在这段时间里,一方面,我尝试着讲课本上所学的知识运用到制作中,另一方面,我又时刻在网上学习自己需要的知识,学习到了很多有用的知识。虽然之前对于代码的编辑不是很明白,但这几天不断搜集各种网站模板,不断学习设计思路。虽然呈现出的作品很不完整,基本达不到观赏性和实用性,但我还会不断练习。争取作出属于我的风格的web。五、附录(源代码)首页:headmetahttp-equiv=content-typecontent=text/html;charset=utf-8/titleweb课程设计/titlelinkhref=style.cssrel=stylesheettype=text/css/styletype=text/cssbody{margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#FFFFFF;background:black;}/style/headbodydivid=wrapperdivid=logoh1我大东营/h1/divdivid=menuulliahref=index.html主页/a/liliahref=jingji.html东营/a/liliahref=techan.html广饶/a/liliahref=dili.html关于/a/liliahref=注册.html欣赏/a/li/ul/divdivclass=jianjiep简介/p/divdivclass=itempstrong欢迎来到我的webahref=index.html课程设计/a/strong/brstrong我要向大家介绍一个美丽的ahref=jingji.html城市/a/strong/brstrong&我的ahref=techan.html家乡/a/strong/p/div/divdivid=footerpahref=济南大学/a信息科学与工程学院/p/div/body/html东营/广饶页面headmetahttp-equiv=content-typecontent=text/html;charset=utf-8/title东营/titlelinkhref=style.cssrel=stylesheettype=text/css/linkhref=jingji.cssrel=stylesheettype=text/css/styletype=text/cssbody{margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#000000;background:pink;}/style/headbodydivid=wrapperdivid=logoh1东营/h1/divdivid=menuulliahref=index.html主页/a/liliahref=jingji.html东营/a/liliahref=techan.html广饶/a/liliahref=dili.html关于/a/liliahref=注册.html欣赏/a/li/ul/divdivid=sidebarlih2荣誉/h2li东营荣获“2012中国特色魅力城市”称号/lili东营在2013年成为国家首批“智慧城市”试点单位(山东省共8个地市获得此称号,东营在山东排名第一)/li/lilih2区划/h2li东营区有6街道4镇(文汇街道、东城街道、辛店街道、胜利街道、黄河路街道、胜园街道,牛庄镇、六户镇、龙居镇、史口镇)/li/lilih2教育/h2pli教育、卫生稳步发展,质量进一步提高。2010年全市普通高校在校生人数为52796人,比1983年增长1419.3%;中等专业学校在校生为4329人,比1983年增长146.7%/lili普通中学在校生为123326人,比1983年增长64.8%。/lili城乡居民生活水平显著提高。2010年末,全市在岗职工总人数30.81万人,比1983年增长133.8%,在岗职工平均工资19282元,是1983年的37.6倍;/lili城镇居民可支配收入23796元,是1985年的30.2倍;农民人均纯收入13047元,是1985年的22.5倍。/li/lilih2地区特产/h2li河口冬枣/li/li/ul/divdivid=contentdivclass=posth2class=title图片/h2imgsrc=images/dili.jpgwidth=700height=500alt=imageh2class=title经济/h2divclass=entry在中国的城市之林中,东营市是一个非常年轻的城市。30年间,东营人在一张白纸上,画出了最新最美的画图,经济社会发展之快令世人刮目相看。生产总值。/br/br/divh2class=title资源/h2divclass=entryp石油资源/br东营市不仅“人杰”而且“地灵”。/p/divh2class=title气候/h2divclass=entryp东营市地处中纬度,背陆面海,受亚欧大陆和西太平洋共同影响,属暖温带大陆性季风气候/p/divh2class=title河流/h2divclass=entryp黄河,东营段上起滨州界,自西南向东北贯穿东营市全境,在垦利县东北部注入渤海,全长138公里。黄河水径流量年际变化大,年内分配不均,含沙量大。/divh2class=title文化/h2divclass=entryp吕剧吕剧是山东省地方戏曲剧种之一,曾名“化装扬琴”、“琴戏”。系由民间说唱艺术“山东琴书”(坐腔扬琴)发展演变而来。东营市广饶县是吕剧发源地。也被山东省省委省政府授予,吕剧之都、吕剧之乡起源于山东以北黄河三角洲,流行于山东和江苏、安徽部分地区。最初的吕剧班大都走乡串村,演出于田间地头,影响甚小。1910年前后搬上舞台。1953年戏曲改革中由山东省戏改组定名吕剧。1953年山东省吕剧院成立之后,吕剧成为遍及山东、享誉全国的剧种。2007年10月中旬,首届吕剧文化艺术节在吕剧的故乡——山东省东营市成功举办。/p/div/div/div/divdivid=footerpahref=济南大学/a信息科学与工程学院/p/div/body/htmlCss内容body{margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#534616;}#sidebar{float:left;width:240px;padding:0px;color:#787878;position:absolute;left:200px}#sidebarul{padding:0;list-style:none;}#sidebarli{margin:0;padding:10;}#sidebarliul{margin-bottom:30px;padding:0px20px20px20px;background:#FFFFFF;border-left:1pxsolid#D6E6CC;border-right:1pxsolid#D6E6CC;border-bottom:1pxsolid#D6E6CC;}#sidebarlili{line-height:35px;border-bottom:1pxdashed#D1D1D1;padding-left:3px;}#sidebarlilispan{display:block;margin-top:-20px;padding:0;font-size:11px;font-style:italic;}#sidebarh2{height:38px;padding:12px0020px;background:#1E1E1E;letter-spacing:-.5px;color:#FFFFFF;}#sidebarp{margin:0px0px20px0px;padding:10px20px20px20px;background:#FFFFFF;text-align:justify;}#content{float:right;width:670px;padding:0;}#zzz{float:right;width:670px;padding:100px;}.post{margin-bottom:25px;padding:0px;background:#FFFFFF;}.title{height:38px;background:#1E1E1Eurl(images/img01.jpg)no-repeatlefttop;padding:12px0020px;letter-spacing:-.5px;color:#FFFFFF;}.entry{background:url(images/img02.jpg)no-repeatlefttop;padding:0px20px20px20px;padding-bottom:20px;text-align:justify;font-size:16px;}