Web前台程序设计课程设计报告题目领略家乡的文化特色小组成员高凤伟、褚晓凯、李文龙、靳宇鹏年级2014级1班专业计算机科学与技术二级学院信息工程学院
目录1需求分析11.1课程设计目的11.2网站主题11.3网站功能介绍11.4时间安排表11.5成员分工12概要设计22.1建立站点22.2初始化站点22.3首页页面设计32.4唐山首页页面设计92.4保定首页页面设计132.5保定美食页面设计152.6沧州首页页面设计172.7沧州武术页面设计192.8石家庄首页页面设计212.9石家庄景区页面设计243首页页面详细设计273.1制作header273.2制作nav273.3制作banner293.4制作content303.5制作footer384唐山首页页面详细设计394.1制作header394.2制作nav404.3制作banner414.4制作content424.5制作footer475沧州首页页面详细设计485.1制作头部485.2制作导航495.3制作主体506沧州武术页面详细设计526.1制作头部526.2制作导航536.3制作主体557保定首页页面详细设计577.1制作导航577.2制作主体587.3制作底部60II
8保定美食页面详细设计608.1制作头部608.2制作主体618.3制作底部669石家庄首页页面详细设计679.1制作头部679.2制作banner679.3制作nav部分699.4制作content709.5制作footer7410石家庄景区页面详细设计7510.1制作头部7510.2制作内容7511网站测试8011.1首页面测试8011.2唐山首页页面测试8111.3保定首页页面测试8111.4保定美食页面测试8211.5沧州首页页面测试8211.6沧州武术页面测试8211.7石家庄首页页面测试8311.8石家庄景区页面测试8312课程设计小结83II
1需求分析1.1课程设计目的随着网络技术的发展与互联网的普及，网站建设与网页制作越来越成为各行各业以及个人宣传自己的有利工具，网站在当今时代被越来越多的人用来宣传。 本课程的设计目的是增强动手实践能力，进一步加强自身综合素质。 学会和团队配合，逐渐培养做一个完整项目的能力。 我们小组本次主要设计的是以“我的故乡”为主题的网页，作为一个介绍故乡类的网站，网页元素充分体现了小组成员中每个人故乡的特色，达到让同学们和老师们看到网页后能充分了解我每个人的故乡的目的。通过对"我的故乡"网站结构设计、调试、连接、巩固、加深并扩大所学的理论知识，培养基本理论分析，解决实际问题的能力，逐步掌握网站设计和调试的基本步骤，同时培养严肃认真、细致踏实、刻苦钻研、有所创作、事实求是的科学作风。1.2网站主题本站以组成员的家乡为出发点,描述家乡特色为主题。1.3网站功能介绍访问着可以在主页部分预览每个人家乡的特色部分，选择感兴趣的部分可以点击进入进行详细的了解。整个网站分为八个页面，分别为：主页面、李文龙家乡页面（唐山特色文化，美食等）、高凤伟家乡页面（保定特色文化，美食等）、高凤伟家乡特色页面，褚晓凯家乡页面（沧州特色文化，美食等），褚晓凯家乡特色页面，靳宇鹏家乡页面（石家庄特色文化，美食等），靳宇鹏家乡特色页面。各个页面间都是相互连接的，方便读者更快捷地找到想了解的信息。1.4时间安排表时间安排见表1-1。表1-1课程设计时间安排表序号课程设计内容时间分配（学时）1确定网站的主题和整体风格、收集建站所需的资料12规划网站结构13主页和其他页面的设计与制作34答辩1合计61.5成员分工课程设计小组成员分工见表1-2。表1-2课程设计成员分工表序号课程设计步骤成员1确定网站的主题和整体风格全部成员2收集建站所需的资料全部成员85
3规划网站结构全部成员4主页李文龙5唐山页面李文龙6保定页面高凤伟7保定特色页面高凤伟8沧州页面褚晓凯9沧州特色页面褚晓凯10石家庄页面靳宇鹏11石家庄特色页面靳宇鹏12报告负责人高凤伟13答辩负责人李文龙2概要设计2.1建立站点（1）创建网站根目录创建网站根目录“我的故乡”文件夹。（2）建立相关子目录分别创建文件夹“CSS”，“images”，“HTML”。2.2初始化站点（1）创建html文件和css文件课程设计共有8个html文件，分别是首页.html，唐山首页.html，保定首页.html，经典美食.html，沧州首页.html，沧州武术.html，石家庄首页.html，石家庄.html。在css文件夹里有7个css文件，分别是首页.css，唐山首页.css，沧州首页.css，沧州武术.css，保定首页.css，石家庄首页.css，石家庄.css。各个文件名和内容对应关系见表2-1。表2-1html文件和css文件介绍表序号文件名内容介绍1首页.html全部的家乡介绍2唐山首页.html唐山特色介绍3沧州首页.html沧州特色介绍4沧州武术.html沧州武术详细说明5保定首页.html保定特色介绍6保定美食.html保定美食详细介绍7石家庄首页.html石家庄简介8石家庄景区.html石家庄景区描写9唐山首页.css控制样式85
10沧州首页.css控制样式11沧州武术.css控制样式12保定首页.css控制样式13保定美食.css控制样式14石家庄首页.css控制样式15石家庄景区.css控制样式（2）初始化css样式具体代码：body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,,input,button,textarea,p,,th,td{margin:0;padding:0;}body{background:#fff;color:#555;font-size:14px;}img{border:none;}a{color:black;text-decoration:none;}2.3首页页面设计（1）HTML结构分析整个页面分为6个模块，具体结构如图2-1所示。图2-1首页结构图85
（2）页面布局具体代码：李文龙首页靳宇鹏的故乡李文龙的故乡高凤伟的故乡褚晓凯的故乡更多联系我们故乡简介更多>>李文龙之故乡-唐山▫河北省省辖市▫河北省东部▫历史悠久▫评剧发源地85
▫皮影、乐亭大鼓享誉全国褚晓凯之故乡-沧州▫河北省地级市▫河北省东南▫诗经传承地▫吴桥杂技▫经济开放区、沿海开放城市高凤伟之故乡-保定▫河北省中部▫交通便利▫文化底蕴深厚▫著名高校云集▫京津产业转移的重要承载地靳宇鹏之故乡-石家庄▫河北省会▫河北省西南部▫新中国的摇篮▫铁路枢纽城市▫优质小麦生产基地85
新闻资讯更多>>保定戏曲彩色周末惠民演出落幕2016.09.08唐山“独行侠”单车骑行环游世界2016.06.08唐山世园会5月6日起开放夜场观景2016.05.04沧州金丝小枣2016.10.07北京药企组团落户河北沧州2016.07.08西柏坡高速公路累计通行车辆2016.10.15石家庄市地铁2号线正式开工2016.08.08保定今年开建两条无轨电车线路2016.10.2385
仲子后人向沧州博物馆捐献碑文拓片2016.08.08唐山迁西县旅游市场持续升温2016.10.19美丽景色学步桥文化城金碘洞夜景石家庄村庄85
保定景区南天门南湖公园狼牙山鹿泉Copyright©2016Liwenlong.Allrightsreserved.美丽故乡varcurIndex=0;//时间间隔(单位毫秒)，每秒钟显示一张，数组共有5张图片放在Photos文件夹下。vartimeInterval=2000;vararr=newArray();85
arr[0]="../images/qingdongling.jpg";arr[1]="../images/清东陵.jpg";arr[2]="../images/铁狮子.jpg";arr[3]="../images/石家庄.jpg"setInterval(changeImg,timeInterval);functionchangeImg(){varobj=document.getElementById("banner_img");if(curIndex==arr.length-1){curIndex=0;}else{curIndex+=1;}obj.src=arr[curIndex];}2.4唐山首页页面设计（1）HTML结构分析整个页面分为5个模块，具体结构如图2-2所示。图2-2唐山首页页面结构图（2）页面布局具体代码：85
李文龙故乡-唐山首页故乡美食故乡故事故乡美景故乡美文更多联系我们联系方式计算机科学与技术一班联系人：李文龙联系电话：13315032925今日快讯更多>>唐山开平区连发两次地震最高4.2级唐山85
“独行侠”单车骑行环游世界唐山世园会5月6日起开放夜场观景唐山动物园开园试运行市民可免费游园乐亭县农牧局继续开展“让候鸟飞”清网统一行动西柏坡高速公路累计通行车辆唐山市政路桥项目建设成效显著迁安经济开发区多项经济指标位列全省前十丰南区率先出台意见加大对“两违”打击力度唐山迁西县旅游市场持续升温唐山特色85
刘美烧鸡流传百年，经久不衰刘美烧鸡手工制作技艺的发祥地—河北省乐亭县，位于唐山市东南部，也是乐亭大鼓的发祥地。刘美烧鸡手工制作技艺是由始创人刘俊老先生，在传承至今已有200多年的祖上卤煮肉的基础上，经过潜心钻研，开创了我国烧鸡整形之先河，并以此而成名。迁西板栗产量、质量和出口量，在全国居第一位迁西县为“京东板栗”主要产区之一。迁西板栗的主产区包括：汉儿庄、青山关等，产量占迁西总产量的60%，分布在长城以南15公里内。京东板栗以色泽鲜艳、甘甜芳香和营养丰富闻名，在国内外市场久负盛名。栗树是我国培育最早的果树之一，与桃、杏、李、枣并称“五果”。麻糖—第二批非物质文化遗产唐山麻糖产品色泽淡黄，形似花朵，薄似蝉翼，酷似玉雕，香甜可口，松软酥脆，营养丰富，多次获得省部国家级各种奖项，受到党和国家领导人及中外宾朋的交口称赞。唐山麻糖以“新新麻糖”为众人所知，“新新麻糖”这个老字号一直延续至今，已有百余年的历史。85
Copyright©2016Liwenlong.Allrightsreserved.美丽唐山2.5保定首页页面设计（1）HTML结构分析整个页面分为3个模块，具体结构如图2-2所示。图2-3保定首页页面结构图（2）页面布局具体代码：高凤伟85
123初识保府主题旅游经典美食 醉美 保 定赵勇:推广“京西百渡”经验加快河北旅游产业跨越发展文章摘要：9月25日，首届河北省旅游产业发展大会圆满结束。在上午举行的总结会上，省委副书记赵勇强调，认真学习贯彻全省旅游工作推进大会精神，大力推广京西百渡休闲度假区经验，加快我省旅游产业跨越发展。省委常委、宣传部部长田向利出席会议，副省长王晓东主持会议实时新闻9月25日，首届河北省旅游产业发展大会京津冀旅游协同发展论坛在涞源县举行。省委副书记赵勇出席论坛并作主题演讲，发出京津冀旅游协同发展六项倡议。中国旅游智库专家委员会主任、国务院研究室原主任魏礼群，海南省委常委、三亚市委书记张琦等出席论坛并作主题演讲从9月25日举行的首届河北省旅游产业发展大会旅游投资项目签约仪式上获悉，此次大会集中签约35个项目，项目总投资1156亿元。签约仪式上，省旅游发展委员会与有关地区或部门签署了一批战略合作协议，包括与中国进出口银行河北省分行、北京银行石家庄分行、中信银行石家庄分行、兴业银行石家庄分行等6家金融机构签署...9月23日，省委书记、省人大常委会主任赵克志，省委副书记、省长张庆伟到涞源县、易县、涞水县，观摩考察京西百渡旅游项目。这是赵克志、张庆伟等在易县易水湖休闲度假区，体验水镇街区十二坊民俗活动。版权所有：河北省保定市旅发委备案序号：冀ICP备14018056号-1Allrightsreserved85
联系电话：0312-5038943联系地址：河北省保定市北市区莲池北大街50号//varoX1=document.getElementById("top");varod1=document.getElementById("d1");varod2=document.getElementById("d2");varod3=document.getElementById("d3");od1.onclick=function(){document.body.style.background="url(1.jpg)";}od2.onclick=function(){document.body.style.background="url(2.jpg)";}od3.onclick=function(){document.body.style.background="url(3.jpg)";}2.6保定美食页面设计（1）HTML结构分析整个页面分为3个模块，具体结构如图2-2所示。图2-4保定美食页面结构图（2）页面布局具体代码：85
gfw经典美食美食新闻驴肉火烧 更多>白玉鸡脯 更多>牛肉罩饼 更多>螺丝豆腐 更多>芝麻烧饼 更多>骨渣丸子 更多>曲阳烧饼 更多>骨渣丸子骨渣丸子在蠡县民间广为流传，此菜在传统制作丸子的基础上加入脆骨，在丰富口感的的同时又增加了营养，脆骨的含钙量及高，对人体缺钙的人群有一定的辅助疗效，成菜色泽红亮，丸子象征团圆，是过年过节餐桌上必不可少的一道美味。白运章包子白运章包子是以肥瘦相间的新鲜牛肉、时令蔬菜为馅料，包子皮是用发面和烫面按一定比例制成。包子的特点是皮薄有筋道，肉馅鲜香，回味无穷。回族面食厨师白运章创制。鲜牛肉浇馅，拌以多种调料、佐料、切碎挤干的菜料，面粉作皮，包馅，蒸熟。皮薄、边窄、馅大、油香、形美，隔皮见馅，由馅成丸，入口喷香。已有70余年制作历史。。牛肉罩饼牛肉罩饼始于清朝年间，相传嘉庆皇帝南巡路过保定，闻异香而振神，问左右：“何物发此香？”左右答：“牛肉罩饼。”知府即将牛肉罩饼献上，嘉庆甚喜，吃后称赞：“色、香、味”三绝。从此，牛肉罩饼即成了历任知府招待各路宾客的美食。85
碗肉是天津蓟县一道地方菜，雷同于梅菜扣肉，但又不尽相同。主料为为猪肉（带皮五花肉），豆片。碗肉也是河北省保定市唐县的汉族传统名吃，其他地区很难吃得到。煎饼软糯可口，汤汁浓郁香辣，搭配唐县当地养的羊羔宰杀后的美味的羊杂，那味道会让你回味无穷、唇齿留香。尤其是在寒风凛冽的时候，滚烫的味道会让你遍体生温，身心舒畅。朱家螺丝豆腐，是保定传统风味小吃，原产自“朱玉和豆腐房”。这家豆腐房买卖不大，可名气不小，很多大饭店、熟肉店都经销朱家螺丝豆腐，当年还是保定六味斋六味名吃中的一味。朱掌柜是唐山丰润人，祖上就做豆腐生意。。保定面酱主要是指甜酱，是北方面食中一种不可少的佐料。普通吃烙饼、薄饼、家常饼，都爱涂上一层甜酱，裹大葱，吃炸酱拌拉面，甜酱更是主要的原料。保定府的甜酱，远近闻名，足见用途甚广。详情》版权所有：河北省保定市旅发委备案序号：冀ICP备14018056号-1Allrightsreserved联系电话：0312-5038943联系地址：河北省保定市北市区莲池北大街50号2.7沧州首页页面设计（1）HTML结构分析整个页面分为3个模块，具体结构如图2-2所示。85
图2-5沧州首页页面结构图（2）页面布局具体代码：褚晓凯狮城:沧州欢迎您狮城文化美食沧州武术之乡美食"铁狮子头""即“红烧狮子头”85
，是电视剧《神医喜来乐》和《神医喜来乐传奇》中的菜品,沧州狮子头是一道色香味俱全的汉族名肴，属于冀菜系。头名字的由来，沧州又称狮城，最具有代表的就是镇海吼铁狮子，所以就叫他做铁狮子头。千童文化秦朝方士徐福受始皇帝之命，招募童男童女，百工数千，经集训东渡扶桑，求长生不老药未归，把先进的秦文化带到当时日本诸岛，促进了当地农业、手工业、冶炼、制药、纺织的飞速发展，使日本诸岛由绳纹文化进入弥生文化，开创了中日友好先河，这一现象被称为“千童文化”。varcurIndex=0;//时间间隔(单位毫秒)，每秒钟显示一张，数组共有5张图片放在Photos文件夹下。vartimeInterval=2000;vararr=newArray();arr[0]="imags/铁狮子.jpg";arr[1]="imags/铁狮子1.jpg";arr[2]="imags/夜色.jpg";arr[3]="imags/武术.jpg";arr[4]="imags/体育馆.jpg";setInterval(changeImg,timeInterval);functionchangeImg(){varobj=document.getElementById("obj");if(curIndex==arr.length-1){curIndex=0;}else{curIndex+=1;}obj.src=arr[curIndex];}2.8沧州武术页面设计（1）HTML结构分析整个页面分为3个模块，具体结构如图2-2所示。85
图2-6沧州武术页面结构图（2）页面布局具体代码：沧州中国:沧州中国武术之乡武术之乡世界非物质文化遗产杂技之乡武术之乡85
沧州民间武术，有50多个拳种，兴与明，盛于清，至清朝乾隆时期武术之乡已形成，至清末已声扬海内外。新中国成立后，沧州武术得到复兴，各市县、乡镇设有培养武术人才的拳社、武馆、武校、体校、武术队，一些中、小学校也设置了武术课程和武术操。全市境内，习武者达数十万人。1985年，河北省体委正式命名沧州为“武术之乡”。沧州武术中，现规模和影响较大的有八极拳、劈挂拳、燕青拳等。铁狮文化沧州民间武术，有50多个拳种，兴与明，盛于清，至清朝乾隆时期武术之乡已形成，至清末已声扬海内外。新中国成立后，沧州武术得到复兴，各市县、乡镇设有培养武术人才的拳社、武馆、武校、体校、武术队，一些中、小学校也设置了武术课程和武术操。全市境内，习武者达数十万人。1985年，河北省体委正式命名沧州为“武术之乡”。沧州武术中，现规模和影响较大的有八极拳、劈挂拳、燕青拳等。版权所有：褚晓凯出版社电子邮件  937453680@qq.com2.9石家庄首页页面设计（1）HTML结构分析整个页面分为5个模块，具体结构如图2-2所示。85
图2-7石家庄首页页面结构图（2）页面布局具体代码：石家庄主页欢迎来到石家庄文化丨设为首页丨收藏本站 123石家庄文化首页石家庄介绍特色景点美食评论交流特色景区 更多>关键词 搜索指数西柏坡 ★★★★抱犊寨 ★★★★赵州桥 85
★★★驼梁 ★★★空中花园 ★★★窦王岭 ★★石家庄简介石家庄，简称“石”，河北省会，地处河北省西南部，旧称石门。石家庄辖区总面积15848平方公里，市区面积2206平方公里。石家庄市辖8个区、11个县，代管2个县级市。石家庄市地处河北省中南部，环渤海湾经济区。东与衡水接壤，南与邢台毗连，西与山西为邻，北与保定交界，距首都北京273公里。京石、石太、石黄、石安高速公路和107、207、307、308国道以及2条省道、42条县道在石家庄市域纵横交错，公路通车总里程6379公里。石家庄是全国铁路运输的主要枢纽，京广、石太、石德、朔黄四条铁路干线交汇于此。石家庄跨华北平原和太行山地两大地貌单元，是全国粮、菜、肉、蛋、果主产区之一，农业集约化和产业化水平较高，生产规模位居全国36个重点城市第一位，被国家确定为优质小麦生产基地，素有“北方粮仓”之称。因毛泽东主席在石家庄市平山县西柏坡指挥震惊中外的三大战役，又被誉为“新中国的摇篮”。2016年2月23日，石家庄在CCTV“中国经济生活大调查”2015年度十大最具幸福感省会城市中名列第八。特色美食 更多>关键词 搜索指数赵州雪花梨 ★★★★正定八大碗 ★★★★钢炉烧饼 ★★★平山白灵菇 ★★★版权所有：靳宇鹏 最终解释权归靳宇鹏所有。85
如有兴趣，请联系。 联系电话010-000000varoDiv=document.getElementById("div1")varaDiv=document.getElementById("div2")varbDiv=document.getElementById("div3")varCC=document.getElementById("tu")oDiv.onclick=function(){CC.style.background="url(网页课设/石家庄3.jpg)";CC.style.backgroundPosition="0-30px";}aDiv.onclick=function(){CC.style.background="url(网页课设/石家庄2.jpg)"CC.style.backgroundPosition="0-80px";}bDiv.onclick=function(){CC.style.background="url(网页课设/石家庄5.jpg)"CC.style.backgroundPosition="0-40px";}2.10石家庄景区页面设计（1）HTML结构分析整个页面分为2个模块，具体结构如图2-2所示。图2-8石家庄页面结构图85
（2）页面布局具体代码：石家庄特色景区石家庄特色景区抱犊寨（河北省石家庄市鹿泉抱犊寨）抱犊寨，旧名抱犊山，古名萆山，位于河北省石家庄鹿泉区西郊，距省会石家庄16公里，距首都北京288公里，是一处集历史人文和自然风光为一体的名山古寨。系国家4A级旅游区、河北省旅游先进单位、石家庄十佳旅游景区。它东临华北平原，西接太行群峰，一峰突起，峥嵘雄秀，四周皆是悬崖绝壁，远望犹如巨佛仰卧，眉目毕肖，其山顶平旷坦夷，有良田沃土660亩，土层深达66米，异境别开，草木繁茂，恍如世外桃源。有“天下奇寨”、“抱犊福地”之誉。抱犊寨不是一个村庄，而是一座名山的名称。它位于鹿泉区境内，是一处集自然景观与人文景观于一地的旅游景区。抱犊寨位于石家庄市西17公里处，山势巍然，仅南北坡各有一条羊肠小道可通。登至山巅，豁然开朗。修建有目前全国最大山顶门坊——南天门，全国第一座山顶地下石雕五百罗汉堂，全国最大的金漆壁画装饰的韩信祠以及长城寨墙等。新开辟的“西苑——莲花山——抱犊寨”客运索道全长1800多米，为国内唯一设有中转站，没有中间塔、全封闭往返式客运索道，最高悬空271米，成为抱犊寨的一大景观。属于国家4A级景区，抱犊寨是一处集历史人文和自然风光为一体的名山古寨。海拔580米，四周悬崖绝壁，顶部平旷坦夷，有肥沃良田660亩，土层深达66米。曾是汉淮阴侯韩信“背水一战”的古战场，亦是著名道人张三丰成道涉足之福地，其风光奇异独特，景色宜人，被誉为“天堂之幻觉，人间之福地，兵家之战场，世外之桃花源”的天下奇寨天桂山天桂山85
，位于河北省会石家庄市西北90公里处的平山县境内。是我国北方著名的山岳古刹型风景名胜区，2001年荣膺国家AAAA级旅游区，2002年被国务院审定为国家重点风景名胜区，2003年被国家旅游局和共青团中央授予“全国青年文明号”单位。景区总面积132．5平方公里。境内奇峰突起，怪石林立，洞泉遍布，林繁花茂，云环雾绕，古刹重重，既有雄秀交融的天然风光，又有皇家园林的高贵气韵和道家仙山的庄严气势及神秘色彩，俗有“皇家道院”之称，“北方桂林”之誉，为我国名山大川中一朵瑰丽的奇苑空中花园石家庄空中花园全称——空中四季海滨生态公园，是联邦房地产集团投资3亿打造的真正意义上的空中花园，面积近30,000平方米，举高16米，占地26,000余平方米，将七座高层住宅楼的第六、七、八、九层连接起来，全部为大型钢结构和全封闭中空高透光率玻璃框架围和而成，三十六层的宏伟建筑屹立钢构玻璃之上…是世界顶级酒店花园技术与最前沿科技完美结合的杰作!据燕赵晚报提供的资料，已建成的室内生态公园，世界上目前只有两座。一是位于英国康沃尔郡的“现代伊甸园”有5个足球场大；第二个是位于美国田纳西州首府纳什威尔的奥普里兰酒店室内花园，占地约1.8万平方米；石家庄“空中四季生态公园”是第三座。按规模大小，世界排名第二，国内第一。窦王岭 窦王岭位于太行山中段东侧石家庄市井陉县境内，是离石家庄最近的大型山林文化景区。因隋末农民起义英雄窦建德曾率兵在此战斗与生活而得名。这里是古今穿越的融合，演绎的是千年文化的碰撞。有2380年前的长城始祖——战国中山古长城；有1300年前窦建德农民起义军的行营——窦王寨建筑群；有窦建德的墓地——窦王墓。这里有河北省唯一的全透明玻璃悬空台。为游客提供难以预料的刺激体验，华北地区最大的综合滑沙场，惊险刺激的山涧飞人，胆量与激情相融合的水、陆、空全方位拓展基地，国内最精美的漂流河，还有鬼屋，激流勇进、高山漂流、豪华波浪、华夏飞碟、滑沙、山岭飞龙车,四季滑雪场，儿童乐园等近百个游乐项目85
3首页页面详细设计3.1制作header（1）分析结构header部分，没有特别设计内嵌内容，二是通过与body的背景实现融合，达到了特定的效果。（2）准备素材素材图片来源于百度图片，图片上的文字为自己ps设计。（3）搭建结构具体代码：（4）控制样式具体代码：#header{height:180px;width:980px;margin:0auto;}（5）实现效果图3-1header效果图3.2制作nav（1）分析结构nav的设计主要用到列表的float属性，实现列表的并排样式，同过设计ul，a的背景等属性实现nav的效果。（2）准备素材未用到具体的图片，文字等素材。（3）搭建结构具体代码：首页靳宇鹏的故乡李文龙的故乡高凤伟的故乡褚晓凯的故乡更多联系我们85
（4）控制样式具体代码：#nav{height:40px;width:980px;margin:5pxauto;}#nav.nav_ul{list-style-type:none;background-color:#286a46;width:960px;height:40px;padding-left:20px;}.nav_ulli{display:inline-block;}a{display:inline-block;width:120px;height:40px;line-height:40px;text-align:center;color:white;font-weight:900;text-decoration:none;}a:hover{background-color:#2e9057;padding-top:-5px;font-weight:900;border-radius:10px;}（5）实现效果图3-2nav效果图3.3制作banner（1）分析结构85
banner部分的制作主要是在制作好的div内部用img属性插入图片，以及利用js实现图片的自动变换。（2）准备素材图片素材来自于各个省市的门户网站和各个省市的旅游门户网站，通过获取网页内容的图片元素得来。（3）搭建结构具体代码：（4）控制样式具体代码：#banner{height:270px;width:980px;margin:0auto;/*background-image:url(../images/清东陵.jpg);background-repeat:no-repeat;*/}varcurIndex=0;//时间间隔(单位毫秒)，每秒钟显示一张，数组共有5张图片放在Photos文件夹下。vartimeInterval=2000;vararr=newArray();arr[0]="images/qingdongling.jpg";arr[1]="images/清东陵.jpg";arr[2]="images/铁狮子.jpg";arr[3]="images/石家庄.jpg"setInterval(changeImg,timeInterval);functionchangeImg(){varobj=document.getElementById("banner_img");if(curIndex==arr.length-1){curIndex=0;}else{curIndex+=1;}obj.src=arr[curIndex];}（5）实现效果85
图3-3banner效果图3.4制作content（1）分析结构content部分主体由两个content组成，分为上下两个content。上部content由left和right左右两部分构成，left部分分为四个小部分，分别放置四个故乡的图片和简单介绍。right部分内部用ul实现新闻的简单排列。（2）准备素材图片素材来自于各个省市的门户网站和各个省市的旅游门户网站，通过获取网页内容的图片元素得来。简介文字来自百度百科，新闻借鉴各省市的新闻类网站。（3）搭建结构具体代码：故乡简介更多>>李文龙之故乡-唐山▫河北省省辖市▫河北省东部▫历史悠久▫评剧发源地▫皮影、乐亭大鼓享誉全国褚晓凯之故乡-沧州▫河北省地级市▫河北省东南▫诗经传承地▫吴桥杂技85
▫经济开放区、沿海开放城市高凤伟之故乡-保定▫河北省中部▫交通便利▫文化底蕴深厚▫著名高校云集▫京津产业转移的重要承载地靳宇鹏之故乡-石家庄▫河北省会▫河北省西南部▫新中国的摇篮▫铁路枢纽城市▫优质小麦生产基地新闻资讯更多>>保定戏曲彩色周末惠民演出落幕2016.09.08唐山“独行侠”单车骑行环游世界2016.06.08唐山世园会5月6日起开放夜场观景85
2016.05.04沧州金丝小枣2016.10.07北京药企组团落户河北沧州2016.07.08西柏坡高速公路累计通行车辆2016.10.15石家庄市地铁2号线正式开工2016.08.08保定今年开建两条无轨电车线路2016.10.23仲子后人向沧州博物馆捐献碑文拓片2016.08.08唐山迁西县旅游市场持续升温2016.10.19美丽景色85
学步桥文化城金碘洞夜景石家庄村庄保定景区南天门南湖公园85
狼牙山鹿泉（4）控制样式具体代码：#content{height:300px;width:980px;margin:5pxauto;}#content_left{background-image:url(../images/title_bg.png);background-size:600px30px;background-repeat:no-repeat;height:300px;width:600px;margin-right:5px;float:left;}.content_left_title{width:600px;height:30px;/*background-image:url(images/bg_04.png);background-repeat:no-repeat;background-size:120px25px;background-position:33px3px;*/}.content_left_jianjie{display:inline-block;margin-left:38px;padding-left:8px;width:480px;line-height:30px;background-image:url(../images/bg_04.png);85
background-repeat:no-repeat;background-size:110px25px;background-position:0px3px;}#content_left.content_left_titlespan{font-size:15px;font-weight:bold;}.content_left1,.content_left2,.content_left3,.content_left4{width:295px;height:130px;float:left;border-radius:5px;background-color:#d3d8d6;font-weight:bold;font-size:15px;position:relative;color:#57605a;}.content_left1{margin-right:10px;margin-bottom:10px;}.content_left3{margin-right:10px;margin-bottom:10px;}.content_left_wen{position:absolute;top:22px;left:190px;width:100px;font-size:12px;font-weight:none;}.content_left1img,.content_left2img,.content_left3img,.content_left4img{display:block;border:3pxsolidwhite;margin-left:4px;border-radius:5px;}85
.content_left1span,.content_left2span,.content_left3span,.content_left4span{display:block;margin-left:10px;padding-top:5px;height:17px;}#content_right{height:300px;width:375px;margin:0auto;float:left;border-top:2.5pxsolid#bf9f62;background-image:url(../images/bg_04.png);background-repeat:no-repeat;background-size:110px27px;background-position:10px2px;}.content_right_ul{margin-top:5px;margin-left:20px;}.content_right_ulli{width:375px;padding:2px0;}.content_right_ul_one{list-style:none;}.content_right_ul_xinwen{display:inline-block;width:300px;height:20px;font-weight:bold;line-height:20px;}.content_right_ul_more{font-weight:bold;font-size:15px;}.content_right_ul_gaiyao{display:inline-block;width:260px;85
padding-top:1px;}#photo{height:360px;width:980px;margin:5pxauto;}.photo_title{height:30px;width:980px;line-height:30px;background-image:url(../images/bg_04.png);background-repeat:no-repeat;background-size:110px25px;background-position:10px2px;font-weight:bold;}.photo_jingse{display:inline-block;width:740px;margin-left:20px;}.photo_titleinput{border-radius:10px;border:2pxsolid#ACACAC;background-image:url(../images/search.jpg);background-repeat:no-repeat;background-position:5px5px;width:60px;padding-left:150px;padding-top:2px;padding-bottom:2px;color:#ACACAC;}table{margin-left:2px;border-collapse:collapse;}td{padding:5px;width:170px;height:130px;text-align:center;font-size:15px;85
font-weight:bold;}.photo_img{display:inline-block;border:2pxsolid#cccccc;padding:5px;}（5）实现效果图3-4content效果图3.5制作footer（1）分析结构footer部分结构简单由简单的信息构成。（2）准备素材未用到具体素材。（3）搭建结构具体代码：Copyright©2016Liwenlong.Allrightsreserved.美丽故乡（4）控制样式具体代码：#footer{height:50px;width:980px;margin:0auto;text-align:center;font-size:12px;}（5）实现效果85
图3-5footer效果图4唐山首页页面详细设计4.1制作header（1）分析结构header部分，设计一张背景的图片和ps的logo设计相互拼接，达到特定的效果。（2）准备素材一种背景图片，通过ps设计网站logo。（3）搭建结构具体代码：（4）控制样式具体代码：#header{height:200px;width:980px;margin:0auto;background-image:url(../images/bg_top.jpg);background-position:-800px-200px;background-repeat:no-repeat;position:relative;}.header_img{position:absolute;top:10px;left:-80px;}（5）实现效果图4-1header效果图4.2制作nav（1）分析结构85
nav的设计主要用到列表的float属性，实现列表的并排样式，同过设计ul，a的背景等属性实现nav的效果。（2）准备素材未用到具体的素材。（3）搭建结构具体代码：首页故乡美食故乡故事故乡美景故乡美文更多联系我们（4）控制样式具体代码：#nav{height:40px;width:980px;margin:0pxauto;}#nav.nav_ul{list-style-type:none;background-color:#0064ae;width:960px;height:40px;padding-left:20px;}.nav_ulli{display:inline-block;}a{display:inline-block;width:120px;height:40px;line-height:40px;text-align:center;color:white;font-weight:900;85
text-decoration:none;border-right:1pxdashedblack;}.nav_ul_last{border-right:none;}a:hover{text-decoration:underline;}（5）实现效果图4-2nav效果图4.3制作banner（1）分析结构banner部分的制作主要是在制作好的div内部用img属性插入图片，设置好图片的大小。（2）准备素材图片素材来自于唐山市的门户网站和唐山市的旅游门户网站，通过获取网页内容的图片元素得来。（3）搭建结构具体代码：（4）控制样式具体代码：#banner{height:270px;width:980px;margin:0auto;background-image:url(../images/banner_bg.jpg);background-position:-600px0;}（5）实现效果图4-3banner效果图4.4制作content（1）分析结构85
content由left和right左右两部分构成，right部分分为上中下三个小部分，分别放置唐山的三个特色的图片和简单介绍。left部分内部用ul实现新闻的简单排列。（2）准备素材图片素材来自于唐山市的门户网站，通过获取网页内容的图片元素得来。简介文字来自百度百科，新闻借鉴各省市的新闻类网站。（3）搭建结构具体代码：联系方式计算机科学与技术一班联系人：李文龙联系电话：13315032925今日快讯更多>>唐山开平区连发两次地震最高4.2级唐山“独行侠”单车骑行环游世界唐山世园会5月6日起开放夜场观景唐山动物园开园试运行市民可免费游园乐亭县农牧局继续开展“让候鸟飞”清网统一行动西柏坡高速公路累计通行车辆唐山市政路桥项目建设成效显著迁安经济开发区多项经济指标位列全省前十丰南区率先出台意见加大对“两违”打击力度唐山迁西县旅游市场持续升温唐山特色刘美烧鸡流传百年，经久不衰刘美烧鸡手工制作技艺的发祥地—河北省乐亭县，位于唐山市东南部，也是乐亭大鼓的发祥地。刘美烧鸡手工制作技艺是由始创人刘俊老先生，在传承至今已有200多年的祖上卤煮肉的基础上，经过潜心钻研，开创了我国烧鸡整形之先河，并以此而成名。85
迁西板栗产量、质量和出口量，在全国居第一位迁西县为“京东板栗”主要产区之一。迁西板栗的主产区包括：汉儿庄、青山关等，产量占迁西总产量的60%，分布在长城以南15公里内。京东板栗以色泽鲜艳、甘甜芳香和营养丰富闻名，在国内外市场久负盛名。栗树是我国培育最早的果树之一，与桃、杏、李、枣并称“五果”。麻糖—第二批非物质文化遗产唐山麻糖产品色泽淡黄，形似花朵，薄似蝉翼，酷似玉雕，香甜可口，松软酥脆，营养丰富，多次获得省部国家级各种奖项，受到党和国家领导人及中外宾朋的交口称赞。唐山麻糖以“新新麻糖”为众人所知，“新新麻糖”这个老字号一直延续至今，已有百余年的历史。（4）控制样式具体代码：#content{height:500px;width:980px;margin:5pxauto;}#content_left{height:500px;width:300px;/*background-color:#cccccc;*/margin-right:5px;float:left;}.content_left_top{padding-top:30px;85
padding-left:5px;height:100px;width:295px;border-top:2pxsolid#0064ae;border-bottom:2pxsolid#0064ae;background:#d7d2fb;font-weight:bold;position:relative;}.content_left_top_title{position:absolute;top:1px;left:5px;width:92px;height:25px;border-radius:5px;font-size:20px;font-weight:bold;padding-left:23px;background-color:#d9d9d9;background-image:url(../images/content_bg.png);background-repeat:no-repeat;background-position:01px;}.content_left_bottom{height:365px;width:300px;margin-top:-5px;background:#cecbfc;}.content_left_bottom_ul{margin-left:25px;}.content_left_bottom_ul_one{margin-left:20PX;list-style:none;}.content_left_bottom_ul_title{display:inline-block;font-weight:bold;width:200px;height:25px;margin-left:-5px;border-radius:5px;85
font-size:20px;font-weight:bold;}.content_left_bottom_ul_more{font-size:12px;font-weight:bold;}.content_left_bottom_ulli{margin:5px0;}#content_right{height:500px;width:675px;margin:0auto;background:#d7d2fb;float:left;}.content_right_title{font-size:20px;color:#0064ae;font-weight:bold;padding-top:10px;text-align:center;}.content_right_wen_left{width:190px;height:130px;float:left;background:yellow;margin-right:5px;}.content_right_wen_leftimg{display:inline-block;width:190px;height:130px;}.content_right_wen_right{width:470px;height:130px;float:left;}.content_right_wen_rightp{85
font-size:15px;font-family:隶书;text-indent:2em;}.content_right_wen_out{height:130px;}（5）实现效果图4-4content效果图4.5制作footer（1）分析结构footer部分结构简单由简单的信息构成。（2）准备素材未用到具体的素材。（3）搭建结构具体代码：Copyright©2016Liwenlong.Allrightsreserved.美丽唐山（4）控制样式具体代码：hr{border:1pxsolid#ACACAC;}#footer{height:50px;width:980px;margin:0auto;text-align:center;85
font-size:12px;}（5）实现效果图4-5footer效果图5沧州首页页面详细设计5.1制作头部（1）分析结构具体结构为div背景图有img图叠加显示相对定位法圈定位置。（2）准备素材网页百度的图片（3）搭建结构具体代码：狮城:沧州欢迎您（4）控制样式具体代码：.oneBox{border:1pxsolidwhite;border-radius:50px;width:1200px;height:200px;margin:0pxauto;background:url(imags/夜色.jpg);opacity:1;background-size:600px200px;background-repeat:no-repeat;position:relative;}.one{position:absolute;left:500px;opacity:0.9;border-radius:50px;}.text1{position:absolute;top:50px;85
right:590px;font-family:"宋体";color:white;font-size:40px;}.text3{position:absolute;top:50px;right:500px;font-family:"楷体";color:black;font-size:40px;}.text2{position:absolute;top:130px;right:400px;font-family:"楷体";color:black;font-weight:bold;font-size:25px;}（5）实现效果图5-1头部效果图5.2制作导航（1）分析结构运用列表方式相对定位法，将其固定在头部下方覆盖一部分，连接到下一个网页（2）准备素材无特殊准备（3）搭建结构具体代码：狮城文化美食沧州武术之乡85
（4）控制样式具体代码：.twoBox{width:700px;height:50px;position:absolute;top:170px;left:25%;margin:auto;background:#3a3026;border-radius:40px;}ul,li{list-style:none;display:inline-block;line-height:50px;}a{text-decoration:none;color:white;text-align:center;margin-left:120px;font-family:"微软雅黑";}a:hover{color:black;font-size:20px;}（5）实现效果图5-2导航效果图5.3制作主体（1）分析结构主题为三个块布局显示，内容为图片文字环绕和图片的交替显示（2）准备素材百度搜集素材（3）搭建结构85
具体代码：美食"铁狮子头""即“红烧狮子头”，是电视剧《神医喜来乐》和《神医喜来乐传奇》中的菜品,沧州狮子头是一道色香味俱全的汉族名肴，属于冀菜系。头名字的由来，沧州又称狮城，最具有代表的就是镇海吼铁狮子，所以就叫他做铁狮子头。千童文化秦朝方士徐福受始皇帝之命，招募童男童女，百工数千，经集训东渡扶桑，求长生不老药未归，把先进的秦文化带到当时日本诸岛，促进了当地农业、手工业、冶炼、制药、纺织的飞速发展，使日本诸岛由绳纹文化进入弥生文化，开创了中日友好先河，这一现象被称为“千童文化”。（4）控制样式具体代码：.threeBox{width:1200px;height:400px;margin:20pxauto;position:relative;}.threeBox1{width:390px;height:190px;position:absolute;top:5px;left:5px;}.threeBox2{width:390px;height:190px;position:absolute;top:205px;left:5px;}.threeBox3{width:790px;height:390px;position:absolute;85
top:5px;left:400px;}.p1{float:left;margin:3px;}.text5{margin:2px;text-indent:2em;}h4{text-align:center;}（5）实现效果图5-3主体效果图6沧州武术页面详细设计6.1制作头部（1）分析结构头部与背景颜色相结合，简单大方，内容明了。（2）准备素材无特殊素材（3）搭建结构具体代码：中国:沧州中国武术之乡（4）控制样式具体代码：body{background-color:#d9e7f4;85
}.oneBox{width:80%;height:150px;margin:0pxauto;position:relative;}.letter1{position:absolute;color:black;left:40%;letter-spacing:10px;font-size:40px;font-family:"楷体";top:40px;right:80px;}.letter2{position:absolute;color:gray;letter-spacing:4px;font-size:30px;font-family:"楷体";bottom:30px;right:30px;border-radius:40px;}（5）实现效果图6-1头部效果图6.2制作导航（1）分析结构北京采取黑色为色底，导航框设置为弧形（2）准备素材无特殊素材（3）搭建结构85
具体代码：武术之乡世界非物质文化遗产杂技之乡（4）控制样式具体代码：.twoBox{border-radius:60px;width:80%;height:50px;margin:10pxauto;position:relative;line-height:50px;background-color:black;}.x1{width:80%;color:black;}ul,li{margin-left:135px;list-style:none;color:white;display:inline-block;}.lianjie1{text-decoration:none;color:white;}.lianjie1:hover{color:gray;}（5）实现效果图6-2导航效果图6.3制作主体（1）分析结构85
布局为大盒子中嵌套两个div小盒子。（2）准备素材百度寻找。（3）搭建结构具体代码：武术之乡沧州民间武术，有50多个拳种，兴与明，盛于清，至清朝乾隆时期武术之乡已形成，至清末已声扬海内外。新中国成立后，沧州武术得到复兴，各市县、乡镇设有培养武术人才的拳社、武馆、武校、体校、武术队，一些中、小学校也设置了武术课程和武术操。全市境内，习武者达数十万人。1985年，河北省体委正式命名沧州为“武术之乡”。沧州武术中，现规模和影响较大的有八极拳、劈挂拳、燕青拳等。铁狮文化沧州民间武术，有50多个拳种，兴与明，盛于清，至清朝乾隆时期武术之乡已形成，至清末已声扬海内外。新中国成立后，沧州武术得到复兴，各市县、乡镇设有培养武术人才的拳社、武馆、武校、体校、武术队，一些中、小学校也设置了武术课程和武术操。全市境内，习武者达数十万人。1985年，河北省体委正式命名沧州为“武术之乡”。沧州武术中，现规模和影响较大的有八极拳、劈挂拳、燕青拳等。白玉鸡脯 更多>牛肉罩饼 更多>螺丝豆腐 更多>芝麻烧饼 更多>骨渣丸子 更多>曲阳烧饼 更多>骨渣丸子骨渣丸子在蠡县民间广为流传，此菜在传统制作丸子的基础上加入脆骨，在丰富口感的的同时又增加了营养，脆骨的含钙量及高，对人体缺钙的人群有一定的辅助疗效，成菜色泽红亮，丸子象征团圆，是过年过节餐桌上必不可少的一道美味。白运章包子85
白运章包子是以肥瘦相间的新鲜牛肉、时令蔬菜为馅料，包子皮是用发面和烫面按一定比例制成。包子的特点是皮薄有筋道，肉馅鲜香，回味无穷。回族面食厨师白运章创制。鲜牛肉浇馅，拌以多种调料、佐料、切碎挤干的菜料，面粉作皮，包馅，蒸熟。皮薄、边窄、馅大、油香、形美，隔皮见馅，由馅成丸，入口喷香。已有70余年制作历史。。牛肉罩饼牛肉罩饼始于清朝年间，相传嘉庆皇帝南巡路过保定，闻异香而振神，问左右：“何物发此香？”左右答：“牛肉罩饼。”知府即将牛肉罩饼献上，嘉庆甚喜，吃后称赞：“色、香、味”三绝。从此，牛肉罩饼即成了历任知府招待各路宾客的美食。碗肉是天津蓟县一道地方菜，雷同于梅菜扣肉，但又不尽相同。主料为为猪肉（带皮五花肉），豆片。碗肉也是河北省保定市唐县的汉族传统名吃，其他地区很难吃得到。煎饼软糯可口，汤汁浓郁香辣，搭配唐县当地养的羊羔宰杀后的美味的羊杂，那味道会让你回味无穷、唇齿留香。尤其是在寒风凛冽的时候，滚烫的味道会让你遍体生温，身心舒畅。朱家螺丝豆腐，是保定传统风味小吃，原产自“朱玉和豆腐房”。这家豆腐房买卖不大，可名气不小，很多大饭店、熟肉店都经销朱家螺丝豆腐，当年还是保定六味斋六味名吃中的一味。朱掌柜是唐山丰润人，祖上就做豆腐生意。。保定面酱主要是指甜酱，是北方面食中一种不可少的佐料。普通吃烙饼、薄饼、家常饼，都爱涂上一层甜酱，裹大葱，吃炸酱拌拉面，甜酱更是主要的原料。保定府的甜酱，远近闻名，足见用途甚广。详情》（4）控制样式具体代码：85
.conent{margin-top:15px;width:1300px;height:400px;/*float:left;*/}.conent-left{border-radius:15px;width:300px;height:400px;float:left;position:relative;}ul,li,a{padding:0;margin:0;text-decoration:none;}li{text-indent:4em;}.left-1{width:200px;height:100px;position:absolute;top:280px;left:50px;}.conent-right{width:950px;height:400px;float:left;position:relative;}#one{width:300px;height:200px;position:absolute;top:0px;left:0px;}#one1{font-size:15px;width:300px;height:200px;position:absolute;top:0px;85
left:0px;display:none;}#two{width:300px;height:200px;position:absolute;top:0px;left:305px;}#two1{font-size:15px;width:300px;height:200px;position:absolute;top:0px;left:305px;display:none;}#three{width:300px;height:200px;position:absolute;top:0px;left:610px;}#three1{font-size:15px;width:300px;height:200px;position:absolute;top:0px;left:610px;display:none;}#four{width:300px;height:200px;position:absolute;top:205px;left:0px;}85
#four1{font-size:15px;width:300px;height:200px;position:absolute;top:205px;left:0px;display:none;}#five{width:300px;height:200px;position:absolute;top:205px;left:305px;}#five1{font-size:15px;width:300px;height:200px;position:absolute;top:205px;left:305px;display:none;}#six{width:300px;height:200px;position:absolute;top:205px;left:610px;}#six1{font-size:15px;width:300px;height:200px;position:absolute;top:205px;left:610px;display:none;}（5）实现效果85
图8-2主体效果图8.3制作底部（1）分析结构布局为大盒子中嵌套两个div小盒子。（2）准备素材百度寻找。（3）搭建结构具体代码：版权所有：河北省保定市旅发委备案序号：冀ICP备14018056号-1Allrightsreserved联系电话：0312-5038943联系地址：河北省保定市北市区莲池北大街50号（4）控制样式具体代码：.bottom{font-size:10px;font-family:"宋体";font-weight:bold;position:relative;bottom:-50px;left:490px;}（5）实现效果图8-3底部效果图85
9石家庄首页页面详细设计9.1制作头部（1）分析结构一段文字以及超链接（2）准备素材无（3）搭建结构具体代码：欢迎来到石家庄文化丨设为首页丨收藏本站 （4）控制样式具体代码：#header{width:980px;height:10px;background-position:0-12px;margin:auto;text-align:right;font-family:"微软雅黑";font-size:15px;color:red;padding:5px000;}#headera:link{text-decoration:none;color:red;}（5）实现效果图9-1header效果图9.2制作banner（1）分析结构三幅图片以及三个小盒子用js来实现图片的改变（2）准备素材三幅图片以及换图片js代码（3）搭建结构具体代码：85
123varoDiv=document.getElementById("div1")varaDiv=document.getElementById("div2")varbDiv=document.getElementById("div3")varCC=document.getElementById("tu")oDiv.onclick=function(){CC.style.background="url(网页课设/石家庄3.jpg)";CC.style.backgroundPosition="0-30px";}aDiv.onclick=function(){CC.style.background="url(网页课设/石家庄2.jpg)"CC.style.backgroundPosition="0-80px";}bDiv.onclick=function(){CC.style.background="url(网页课设/石家庄5.jpg)"CC.style.backgroundPosition="0-40px";}（4）控制样式具体代码：#tu{width:980px;height:300px;background-image:url("网页课设/石家庄5.jpg");background-size:cover;background-position:0-40px;margin:auto;}#div1,#div2,#div3{width:20px;height:20px;display:inline-block;margin:5px;}#div1{85
background-color:blue;position:absolute;right:300px;}#div2{background-color:blue;position:absolute;right:250px;}#div3{background-color:blue;position:absolute;right:200px;}（5）实现效果图9-2banner效果图9.3制作nav部分（1）分析结构五段文字、四段超链接，然后再加上背景图片（2）准备素材一个导航背景图片（3）搭建结构具体代码：石家庄文化首页石家庄介绍特色景点美食评论交流（4）控制样式具体代码：85
#daohang{width:1080px;height:50px;background-image:url("网页课设/导航.jpg");background-position:-20px-30px;background-size:1080px380px;left:155px;position:absolute;top:325px;display:block;}ul{margin-right:60px;list-style-type:none;}#daohangli{width:150px;display:inline-block;vertical-align:middle;}#daohanga{display:block;line-height:25px;text-decoration:none;}a:hover{color:red;/*background-position:-20px-120px;*/}（5）实现效果图9-3nav效果图9.4制作content（1）分析结构三部分content_leftcontent_middlecontent_right（2）准备素材三幅背景图片、以及文字资料（3）搭建结构具体代码：85
特色景区 更多>关键词 搜索指数西柏坡 ★★★★抱犊寨 ★★★★赵州桥 ★★★驼梁 ★★★空中花园 ★★★窦王岭 ★★石家庄简介石家庄，简称“石”，河北省会，地处河北省西南部，旧称石门。石家庄辖区总面积15848平方公里，市区面积2206平方公里。石家庄市辖8个区、11个县，代管2个县级市。石家庄市地处河北省中南部，环渤海湾经济区。东与衡水接壤，南与邢台毗连，西与山西为邻，北与保定交界，距首都北京273公里。京石、石太、石黄、石安高速公路和107、207、307、308国道以及2条省道、42条县道在石家庄市域纵横交错，公路通车总里程6379公里。石家庄是全国铁路运输的主要枢纽，京广、石太、石德、朔黄四条铁路干线交汇于此。石家庄跨华北平原和太行山地两大地貌单元，是全国粮、菜、肉、蛋、果主产区之一，农业集约化和产业化水平较高，生产规模位居全国36个重点城市第一位，被国家确定为优质小麦生产基地，素有“北方粮仓”之称。因毛泽东主席在石家庄市平山县西柏坡指挥震惊中外的三大战役，又被誉为“新中国的摇篮”。2016年2月23日，石家庄在CCTV“中国经济生活大调查”2015年度十大最具幸福感省会城市中名列第八。特色美食 更多>关键词 搜索指数赵州雪花梨 ★★★★正定八大碗 ★★★★85
钢炉烧饼 ★★★平山白灵菇 ★★★（4）控制样式具体代码：#content{width:980px;height:580px;margin:5pxauto;overflow:hidden;top:370px;left:183px;position:absolute;}.content_left{width:230px;height:580px;background-image:url("网页课设/bg5.jpg");background-repeat:no-repeat;background-size:cover;float:left;}#jieshao{width:510px;height:580px;background-image:url("网页课设/zi2.jpg");background-position:cover;float:left;margin-left:5px;}.content_right{width:230px;background-image:url("网页课设/bg5.jpg");background-repeat:no-repeat;background-size:cover;float:right;height:580px;}.jing{font-size:25px;85
font-weight:bold;text-align:left;color:yellow;}.geng{font-size:20px;}.jing1{color:white;}.content_leftul{width:250px;}.content_rightul{width:250px;}.content_leftli{line-height:40px;text-align:left;width:230px;}.content_rightli{line-height:40px;text-align:left;width:230px;}.content_lefta:link{text-decoration:none;color:black;}.content_righta:link{text-decoration:none;color:black;}.content_lefta:hover{color:#FF6600;}.content_righta:hover{color:#FF6600;}.content_middlep{font-size:17px;}（5）实现效果85
图9-4content效果图9.5制作footer（1）分析结构Footer背景颜色以及文字（2）准备素材无（3）搭建结构具体代码：版权所有：靳宇鹏 最终解释权归靳宇鹏所有。如有兴趣，请联系。 联系电话010-000000（4）控制样式具体代码：#footer{width:980px;height:80px;background-color:#f9eac3;color:green;position:absolute;top:955px;left:183px;font-size:15px;}（5）实现效果图9-5footer效果图85
10石家庄景区页面详细设计10.1制作头部（1）分析结构文字以及背景颜色（2）准备素材无（3）搭建结构具体代码：石家庄特色景区（4）控制样式具体代码：.one{text-align:center;background-color:#b85245;}（5）实现效果图10-1头部效果图10.2制作内容（1）分析结构图文混排（2）准备素材若干图片以及文字介绍（3）搭建结构具体代码：抱犊寨（河北省石家庄市鹿泉抱犊寨）抱犊寨，旧名抱犊山，古名萆山，位于河北省石家庄鹿泉区西郊，距省会石家庄16公里，距首都北京288公里，是一处集历史人文和自然风光为一体的名山古寨。系国家4A级旅游区、河北省旅游先进单位、石家庄十佳旅游景区。它东临华北平原，西接太行群峰，一峰突起，峥嵘雄秀，四周皆是悬崖绝壁，远望犹如巨佛仰卧，眉目毕肖，其山顶平旷坦夷，有良田沃土660亩，土层深达66米，异境别开，草木繁茂，恍如世外桃源。有“天下奇寨”、“抱犊福地”之誉。抱犊寨不是一个村庄，而是一座名山的名称。它位于鹿泉区境内，是一处集自然景观与人文景观于一地的旅游景区。抱犊寨位于石家庄市西17公里处，山势巍然，仅南北坡各有一条羊肠小道可通。登至山巅，豁然开朗。修建有目前全国最大山顶门坊——南天门，全国第一座山顶地下石雕五百罗汉堂，全国最大的金漆壁画装饰的韩信祠以及长城寨墙等。新开辟的“西苑——莲花山——抱犊寨”85
客运索道全长1800多米，为国内唯一设有中转站，没有中间塔、全封闭往返式客运索道，最高悬空271米，成为抱犊寨的一大景观。属于国家4A级景区，抱犊寨是一处集历史人文和自然风光为一体的名山古寨。海拔580米，四周悬崖绝壁，顶部平旷坦夷，有肥沃良田660亩，土层深达66米。曾是汉淮阴侯韩信“背水一战”的古战场，亦是著名道人张三丰成道涉足之福地，其风光奇异独特，景色宜人，被誉为“天堂之幻觉，人间之福地，兵家之战场，世外之桃花源”的天下奇寨天桂山天桂山，位于河北省会石家庄市西北90公里处的平山县境内。是我国北方著名的山岳古刹型风景名胜区，2001年荣膺国家AAAA级旅游区，2002年被国务院审定为国家重点风景名胜区，2003年被国家旅游局和共青团中央授予“全国青年文明号”单位。景区总面积132．5平方公里。境内奇峰突起，怪石林立，洞泉遍布，林繁花茂，云环雾绕，古刹重重，既有雄秀交融的天然风光，又有皇家园林的高贵气韵和道家仙山的庄严气势及神秘色彩，俗有“皇家道院”之称，“北方桂林”之誉，为我国名山大川中一朵瑰丽的奇苑空中花园石家庄空中花园全称——空中四季海滨生态公园，是联邦房地产集团投资3亿打造的真正意义上的空中花园，面积近30,000平方米，举高16米，占地26,000余平方米，将七座高层住宅楼的第六、七、八、九层连接起来，全部为大型钢结构和全封闭中空高透光率玻璃框架围和而成，三十六层的宏伟建筑屹立钢构玻璃之上…是世界顶级酒店花园技术与最前沿科技完美结合的杰作!据燕赵晚报提供的资料，已建成的室内生态公园，世界上目前只有两座。一是位于英国康沃尔郡的“现代伊甸园”有5个足球场大；第二个是位于美国田纳西州首府纳什威尔的奥普里兰酒店室内花园，占地约1.8万平方米；石家庄“空中四季生态公园”是第三座。按规模大小，世界排名第二，国内第一。85
窦王岭 窦王岭位于太行山中段东侧石家庄市井陉县境内，是离石家庄最近的大型山林文化景区。因隋末农民起义英雄窦建德曾率兵在此战斗与生活而得名。这里是古今穿越的融合，演绎的是千年文化的碰撞。有2380年前的长城始祖——战国中山古长城；有1300年前窦建德农民起义军的行营——窦王寨建筑群；有窦建德的墓地——窦王墓。这里有河北省唯一的全透明玻璃悬空台。为游客提供难以预料的刺激体验，华北地区最大的综合滑沙场，惊险刺激的山涧飞人，胆量与激情相融合的水、陆、空全方位拓展基地，国内最精美的漂流河，还有鬼屋，激流勇进、高山漂流、豪华波浪、华夏飞碟、滑沙、山岭飞龙车,四季滑雪场，儿童乐园等近百个游乐项目（4）控制样式具体代码：.zi1,.zi2,.zi3,.zi4{width:480px;margin-left:10px;font-family:"楷体";font-size:18px;text-indent:2em;color:white;}.zi1{position:absolute;top:60px;left:420px;}.zi2{width:450px;position:absolute;top:640px;left:420px;}.zi3{width:450px;position:absolute;top:980px;left:420px;85
}.zi4{width:450px;position:absolute;top:1380px;left:420px;}.tu1{margin:5px;position:absolute;left:10px;top:30px;}.tu2{margin:5px;position:absolute;right:10px;top:30px;}.tu3{margin:5px;position:absolute;left:10px;top:290px;}.tu4{margin:5px;position:absolute;right:10px;top:290px;}.tu5{margin:5px;position:absolute;left:10px;top:620px;}.tu6{margin:5px;position:absolute;right:10px;top:620px;85
}.tu7{margin:5px;position:absolute;left:10px;top:960px;}.tu8{margin:5px;position:absolute;right:10px;top:960px;}.tu9{margin:5px;position:absolute;left:10px;top:1380px;}.tu10{margin:5px;position:absolute;right:10px;top:1380px;}（5）实现效果图10-2内容效果图85
图10-3内容效果图图10-4内容效果图11网站测试11.1首页面测试（1）浏览器测试分别采用IE11，firefox，chrome浏览器显示页面结果见表11-1。表11-1浏览器测试结果序号浏览器测试结果1IE11页面样效果正常显示2Firefox页面样效果正常显示3Chrome页面样效果正常显示（2）链接测试对页面中的链接进行测试，结果见表11-2。表11-2链接测试结果序号链接目标结果1靳宇鹏故乡石家庄首页.html成功2李文龙故乡唐山首页.html成功85
3褚晓凯故乡沧州首页.html成功4高凤伟故乡保定首页.html成功（3）表单测试对页面中的表单进行测试，结果见表11-3。表11-3表单测试结果序号控件测试内容结果1Inputtype=“text”能否更改value可以正常更改11.2唐山首页页面测试（1）浏览器测试分别采用IE11，firefox，chrome浏览器显示页面结果见表11-4。表11-4浏览器测试结果序号浏览器测试结果1IE11页面样效果正常显示2Firefox页面样效果正常显示3Chrome页面样效果正常显示11.3保定首页页面测试（1）浏览器测试分别采用IE11，firefox，chrome浏览器显示页面结果见表11-5。表11-5浏览器测试结果序号浏览器测试结果1IE11页面样效果正常显示2Firefox页面样效果正常显示3Chrome页面样效果正常显示（2）链接测试对页面中的链接进行测试，结果见表11-6。表11-6链接测试结果序号链接目标结果1初识保府初识保府.html成功2主题旅游主题旅游.html成功3经典美食保定美食.html成功85
11.4保定美食页面测试（1）浏览器测试分别采用IE11，firefox，chrome浏览器显示页面结果见表11-7表11-7浏览器测试结果序号浏览器测试结果1IE11页面样效果正常显示2Firefox页面样效果正常显示3Chrome页面样效果正常显示11.5沧州首页页面测试（1）浏览器测试分别采用IE11，firefox，chrome浏览器显示页面结果见表11-8表11-8浏览器测试结果序号浏览器测试结果1IE11页面样效果正常显示2Firefox页面样效果正常显示3Chrome页面样效果正常显示（2）链接测试对页面中的链接进行测试，结果见表11-9表11-9链接测试结果序号链接目标结果1武术之乡沧州武术.html成功11.6沧州武术页面测试（1）浏览器测试分别采用IE11，firefox，chrome浏览器显示页面结果见表11-10表11-10浏览器测试结果序号浏览器测试结果1IE11页面样效果正常显示2Firefox页面样效果正常显示3Chrome页面样效果正常显示85
11.7石家庄首页页面测试（1）浏览器测试分别采用IE11，firefox，chrome浏览器显示页面结果见表11-11表11-11浏览器测试结果序号浏览器测试结果1IE11页面样效果正常显示2Firefox页面样效果正常显示3Chrome页面样效果正常显示（2）链接测试对页面中的链接进行测试，结果见表11-12表11-12链接测试结果序号链接目标结果1石家庄介绍#jieshao成功2特色景点石家庄景点.html成功3美食石家庄美食.html成功11.8石家庄景区页面测试（1）浏览器测试分别采用IE11，firefox，chrome浏览器显示页面结果见表11-13。表11-13浏览器测试结果序号浏览器测试结果1IE11页面样效果正常显示2Firefox页面样效果正常显示3Chrome页面样效果正常显示12课程设计小结现在，计算机和网络已经深入到了我们生活中的方方面面，也已经成了生活中不可缺少的一部分，网络成了我们获取知识和信息的一种便捷工具，现在的网民也在不断的增多，所以，了解和学习网络知识是我们作为一名大学生迫切所需的。我通过这一学期的学习，和这次的课程设计，对网页设计有了初步的认识和了解，并基本掌握了sublime的应用。在课程设计过程中虽然出现了很多的问题，但通过看书，上网查询等方式，慢慢的，一点一点的小组成员之间合作解决了，课程设计的同时也是我门不断提高的过程。通过自己的和小组成员之间的努力，最后设计出的网页不论是外观还是内容，都85
是让自己满意的，虽然在某些方面还有一些视觉和编程上的问题，但是对于我们的网页设计能力，都是非常大的提高。由于网页设计的需要，我们在设计过程中不断的翻阅书籍，不断的收集素材，在这个过程中，我们学习到了一些关于建设网站和制作网页的知识。尤其是对网页制作的过程与一些技巧手法更有了另外一番了解，对网页制作的基础知识也有了一定的掌握。在这个课程设计过程中，我同样认识到网页设计不是一门学科的独秀，而是多种课程的综合。总体来说，通过这个半年对网页设计的学习，有收获也有遗憾。但是，我们已经迈入了网页设计的大门，只要我再认真努力的去学习，在今后的闲余时间学习制作网页的更多知识以实现自身技能的提高，我坚信将来设计出的网页会更加专业，更加华丽，使它最终成为自己的一项技能。1.基于C8051F单片机直流电动机反馈控制系统的设计与研究2.基于单片机的嵌入式Web服务器的研究3.MOTOROLA单片机MC68HC（8）05PV8/A内嵌EEPROM的工艺和制程方法及对良率的影响研究4.基于模糊控制的电阻钎焊单片机温度控制系统的研制5.基于MCS-51系列单片机的通用控制模块的研究6.基于单片机实现的供暖系统最佳启停自校正（STR）调节器7.单片机控制的二级倒立摆系统的研究8.基于增强型51系列单片机的TCP/IP协议栈的实现9.基于单片机的蓄电池自动监测系统10.基于32位嵌入式单片机系统的图像采集与处理技术的研究11.基于单片机的作物营养诊断专家系统的研究12.基于单片机的交流伺服电机运动控制系统研究与开发13.基于单片机的泵管内壁硬度测试仪的研制14.基于单片机的自动找平控制系统研究15.基于C8051F040单片机的嵌入式系统开发16.基于单片机的液压动力系统状态监测仪开发17.模糊Smith智能控制方法的研究及其单片机实现18.一种基于单片机的轴快流CO〈,2〉激光器的手持控制面板的研制19.基于双单片机冲床数控系统的研究20.基于CYGNAL单片机的在线间歇式浊度仪的研制21.基于单片机的喷油泵试验台控制器的研制22.基于单片机的软起动器的研究和设计23.基于单片机控制的高速快走丝电火花线切割机床短循环走丝方式研究24.基于单片机的机电产品控制系统开发25.基于PIC单片机的智能手机充电器26.基于单片机的实时内核设计及其应用研究27.基于单片机的远程抄表系统的设计与研究28.基于单片机的烟气二氧化硫浓度检测仪的研制29.基于微型光谱仪的单片机系统30.单片机系统软件构件开发的技术研究31.基于单片机的液体点滴速度自动检测仪的研制32.基于单片机系统的多功能温度测量仪的研制33.基于PIC单片机的电能采集终端的设计和应用34.基于单片机的光纤光栅解调仪的研制35.气压式线性摩擦焊机单片机控制系统的研制36.基于单片机的数字磁通门传感器37.基于单片机的旋转变压器-数字转换器的研究38.基于单片机的光纤Bragg光栅解调系统的研究39.单片机控制的便携式多功能乳腺治疗仪的研制40.基于C8051F020单片机的多生理信号检测仪41.基于单片机的电机运动控制系统设计42.Pico专用单片机核的可测性设计研究43.基于MCS-51单片机的热量计44.基于双单片机的智能遥测微型气象站45.MCS-51单片机构建机器人的实践研究46.基于单片机的轮轨力检测47.基于单片机的GPS定位仪的研究与实现48.基于单片机的电液伺服控制系统49.用于单片机系统的MMC卡文件系统研制50.基于单片机的时控和计数系统性能优化的研究51.基于单片机和CPLD的粗光栅位移测量系统研究52.单片机控制的后备式方波UPS53.提升高职学生单片机应用能力的探究54.基于单片机控制的自动低频减载装置研究55.基于单片机控制的水下焊接电源的研究56.基于单片机的多通道数据采集系统57.基于uPSD3234单片机的氚表面污染测量仪的研制58.基于单片机的红外测油仪的研究59.96系列单片机仿真器研究与设计60.基于单片机的单晶金刚石刀具刃磨设备的数控改造61.基于单片机的温度智能控制系统的设计与实现62.基于MSP430单片机的电梯门机控制器的研制63.基于单片机的气体测漏仪的研究64.基于三菱M16C/6N系列单片机的CAN/USB协议转换器65.基于单片机和DSP的变压器油色谱在线监测技术研究66.基于单片机的膛壁温度报警系统设计67.基于AVR单片机的低压无功补偿控制器的设计68.基于单片机船舶电力推进电机监测系统69.基于单片机网络的振动信号的采集系统70.基于单片机的大容量数据存储技术的应用研究71.基于单片机的叠图机研究与教学方法实践72.基于单片机嵌入式Web服务器技术的研究及实现73.基于AT89S52单片机的通用数据采集系统74.基于单片机的多道脉冲幅度分析仪研究75.机器人旋转电弧传感角焊缝跟踪单片机控制系统76.基于单片机的控制系统在PLC虚拟教学实验中的应用研究77.基于单片机系统的网络通信研究与应用78.基于PIC16F877单片机的莫尔斯码自动译码系统设计与研究79.基于单片机的模糊控制器在工业电阻炉上的应用研究80.基于双单片机冲床数控系统的研究与开发81.基于Cygnal单片机的μC/OS-Ⅱ的研究82.基于单片机的一体化智能差示扫描量热仪系统研究83.基于TCP/IP协议的单片机与Internet互联的研究与实现84.变频调速液压电梯单片机控制器的研究85.基于单片机γ-免疫计数器自动换样功能的研究与实现86.基于单片机的倒立摆控制系统设计与实现87.单片机嵌入式以太网防盗报警系统88.基于51单片机的嵌入式Internet系统的设计与实现89.单片机监测系统在挤压机上的应用90.MSP430单片机在智能水表系统上的研究与应用91.基于单片机的嵌入式系统中TCP/IP协议栈的实现与应用92.单片机在高楼恒压供水系统中的应用93.基于ATmega16单片机的流量控制器的开发94.基于MSP430单片机的远程抄表系统及智能网络水表的设计95.基于MSP430单片机具有数据存储与回放功能的嵌入式电子血压计的设计96.基于单片机的氨分解率检测系统的研究与开发97.锅炉的单片机控制系统98.基于单片机控制的电磁振动式播种控制系统的设计99.基于单片机技术的WDR-01型聚氨酯导热系数测试仪的研制100.一种RISC结构8位单片机的设计与实现101.基于单片机的公寓用电智能管理系统设计102.基于单片机的温度测控系统在温室大棚中的设计与实现103.基于MSP430单片机的数字化超声电源的研制104.基于ADμC841单片机的防爆软起动综合控制器的研究105.基于单片机控制的井下低爆综合保护系统的设计106.基于单片机的空调器故障诊断系统的设计研究107.单片机实现的寻呼机编码器108.单片机实现的鲁棒MRACS及其在液压系统中的应用研究109.自适应控制的单片机实现方法及基上隅角瓦斯积聚处理中的应用研究110.基于单片机的锅炉智能控制器的设计与研究111.超精密机床床身隔振的单片机主动控制112.PIC单片机在空调中的应用113.单片机控制力矩加载控制系统的研究项目论证，项目可行性研究报告，可行性研究报告，项目推广，项目研究报告，项目设计，项目建议书，项目可研报告，本文档支持完整下载，支持任意编辑！选择我们，选择成功！项目论证，项目可行性研究报告，可行性研究报告，项目推广，项目研究报告，项目设计，项目建议书，项目可研报告，本文档支持完整下载，支持任意编辑！选择我们，选择成功！单片机论文，毕业设计，毕业论文，单片机设计，硕士论文，研究生论文，单片机研究论文，单片机设计论文，优秀毕业论文，毕业论文设计，毕业过关论文，毕业设计，毕业设计说明，毕业论文，单片机论文，基于单片机论文，毕业论文终稿，毕业论文初稿，本文档支持完整下载，支持任意编辑！本文档全网独一无二，放心使用，下载这篇文档，定会成功！85
85
微信/支付宝扫码支付