《网页制作》结课作业

合集下载

《网页制作》(结课作业)

《网页制作》(结课作业)

201706考试批次《网页制作》结课作业学生姓名:刘光鑫学习中心:山东淄博继续教育进修学校学号:***************专业:计算机科学与技术年级层次:1509高起专北京语言大学网络教育学院《网页制作》结课作业注意:本学期所布置的结课作业,请同学一律按照以下要求执行:1) 结课作业提交起止时间:2017年5月2日--6月19日。

(届时平台自动关闭,逾期不予接收。

)2) 结课作业课程均需通过“离线作业”栏目提交电子版,学院不收取纸介的结课作业,以纸介回寄的作业一律视为无效;3)截止日期前可多次提交,平台只保留最后一次提交的文档,阅卷时以最后一次提交的结课作业为准,截止日期过后将关闭平台,逾期不交或科目提交错误者,按0分处理;4) 提交文档要求:提交的文档格式为doc、rar,大小10M以内;5) 必须严格按照每门课程的答题要求完成作业,没有按照学院要求来做的结课作业,将酌情扣分。

个人网站设计报告一、准备工作经过本学期对网页设计基础这门课的学习,我对网页设计以及相关工具的使用有了深入的了解,在本学期末设计制作主题为个人主页的网页。

经过考虑对制作工具的筛选,决定用Dreamweaver做个人网页,设计和制作图片、页面及图标等。

本网站内容充实,在主页的设计上运用了模板、框架等。

分页面上运用了导航条。

插入了动态图片以及视频等增加了美观度,在首页的设计上本着简单易懂的原则,用户只要点击链接就能看到自己想看到的链接内容。

网站的首页设置了背景音乐,使访问者在浏览的同时还能欣赏到悠扬的旋律。

二、作品结构利用框架(选取了左右下的框架结构)设置基本模样。

左边框架作为导航栏,下边的部分作为滚动图片栏,右上方一大部分作为各个子网页的浏览区,在导航栏插入了音乐,以便放入的音乐不会随着链接的进入而消失,增添了网页的趣味性。

导航栏共包括:我的档案、我的日志、我的班级、我的宠物、视频欣赏等五项,分别链接到各个子页面,在导航区的最下方还设置有返回欢迎页面的链接,并且设置导航区的背景、颜色、插入动态图片等。

网页设计期末作业个人总结

网页设计期末作业个人总结

网页设计期末作业个人总结一、前言在网页设计课程期末作业中,我与我的团队共同完成了一个网站的设计与开发。

这个网站是一个在线购物平台,旨在为用户提供一个便捷、安全、舒适的购物体验。

在整个设计与开发过程中,我们面临了各种挑战和困难,但也取得了一些成果和收获。

下面将对我在网页设计课程中的学习与实践做一个总结。

二、设计与规划在网页设计与规划阶段,我们首先明确了网站的目标和定位,确定了网站的主题和风格,并进行了用户需求分析。

我们根据用户的需求,设计了一个简洁、直观、易于使用的界面和导航结构。

同时,我们也进行了网站的布局设计和页面的构思,包括颜色搭配、字体选择、元素排布等。

在整个设计与规划过程中,我们注重用户体验,努力提升网页的可用性和吸引力。

三、技术选型与开发在技术选型与开发阶段,我们选择了一些常用的前端技术,如HTML、CSS、JavaScript等,并结合了一些框架和工具,如Bootstrap、jQuery等。

在开发过程中,我们采用了模块化的开发方式,将页面划分为多个组件,每个组件负责一个功能模块,从而提高了开发效率和代码质量。

同时,我们也注意了网站的兼容性和响应式设计,保证了网站在不同设备上的良好显示效果和用户体验。

四、测试与优化在测试与优化阶段,我们进行了不同方面的测试,包括功能测试、兼容性测试和性能测试等。

通过测试,我们发现了一些问题和bug,并进行了修改和优化。

同时,我们也对网页进行了速度优化,如压缩图片、合并CSS和JavaScript文件等,从而提高了网页的加载速度和响应能力。

我们还使用了一些工具,如Google Analytics等,来分析网站的访问情况和用户行为,以便更好地了解用户需求和优化网站。

五、反思与总结通过这次网页设计课程的学习和实践,我对网页设计和开发有了更深入的了解和认识。

我学会了如何规划和设计一个网站,如何使用各种技术和工具进行开发,如何测试和优化一个网页。

我也遇到了一些问题和挑战,但通过团队合作和不断的学习,我成功地克服了这些困难,并取得了一定的成绩和进步。

答题网页制作期末总结

答题网页制作期末总结

答题网页制作期末总结一、引言网页制作课程已经结束了,回顾这一学期的学习,我深有感触。

通过这门课程,我掌握了网页制作的基本知识和技术,学到了很多实用的工具和方法。

在老师和同学们的帮助下,我不断锻炼自己的代码能力和设计能力,逐渐成长为一名合格的网页制作人员。

下面是我对这门课程的总结和反思。

二、学习内容在这门课程中,我们学习了网页制作的基础知识,包括HTML、CSS和JavaScript等技术。

HTML是网页的基本结构语言,通过学习HTML,我学会了如何搭建一个网页的骨架,如何使用标签来布局和展示内容。

在学习CSS时,我了解了如何使用样式来美化网页的外观,如何调整元素的大小、颜色和位置。

而学习JavaScript,则为网页增加了更多的交互性,使网页能够与用户进行双向的沟通和操作。

除了这些基础知识,我们还学习了一些实用的工具和框架。

比如,我们使用了Sublime Text来编写代码,使用了Git来管理代码的版本控制,使用了Bootstrap来快速构建响应式网页。

这些工具和框架大大提高了我们的开发效率,减少了重复劳动的时间。

三、学习方法在学习这门课程的过程中,我采用了一些有效的学习方法,以提高我的学习效果。

首先,我保持了良好的学习习惯,每天都抽出一定的时间来学习和练习。

其次,我注重理论与实践的结合,通过编写实际的代码项目,将理论知识运用到实践中,从而加深理解和记忆。

此外,我还积极参与课堂讨论和小组合作,与同学们一起解决问题,共同进步。

四、技术实践在这门课程中,我完成了多个技术实践项目,这些项目涵盖了网页制作的各个方面。

1. 静态网页制作在这个项目中,我根据设计师提供的设计稿,使用HTML和CSS制作了一个静态的网页。

通过这个项目,我熟悉了网页制作的基本流程和技巧,了解了如何将设计稿转化为实际的网页。

2. 响应式网页制作在这个项目中,我使用了Bootstrap框架来制作一个响应式网页。

通过这个项目,我学会了如何使用Bootstrap提供的栅格系统和组件,实现网页在不同设备上的自适应布局和样式。

考试批次网制作结课作业

考试批次网制作结课作业

考试批次网制作结课作业TPMK standardization office【 TPMK5AB- TPMK08- TPMK2C- TPMK18】201709考试批次《网页制作》结课作业学生姓名学习中心学号专业年级层次北京语言大学网络教育学院《网页制作》结课作业注意:本学期所布置的结课作业,请同学一律按照以下要求执行:1)结课作业提交起止时间:2017年8月2日--9月11日。

(届时平台自动关闭,逾期不予接收。

)2)结课作业课程均需通过“离线作业”栏目提交电子版,学院不收取纸介的结课作业,以纸介回寄的作业一律视为无效;3)截止日期前可多次提交,平台只保留最后一次提交的文档,阅卷时以最后一次提交的结课作业为准,截止日期过后将关闭平台,逾期不交或科目提交错误者,按0分处理;4)提交文档要求:提交的文档格式为doc、rar,大小10M以内;5)必须严格按照每门课程的答题要求完成作业,没有按照学院要求来做的结课作业,将酌情扣分。

一、设计题目(请在以下网页设计作品中任选其一,最后整理一份网站设计与实现的报告即可,具体要求如下。

总分100分)1、制作个人主页2、制作公司网站主页3、制作环保网站网页4、制作BBS注册网页5、制作购物网站6、制作班级主页7、制作家乡介绍网页8、制作汽车世界网页9、制作销售书店网页10、制作美食天下网页二、网站设计与实现具体要求1、设计题目:选择一个你最感兴趣的主题,进行网站设计与开发,网站内容具有实用价值。

2、开发环境:综合使用DreamweaverCS、CSS、HTML、FlashCS、FireworksCS、VBScrip(JAVAScript)等工具和语言,但动态网页制作不做硬性规定。

3、内容要求:①内容不限,但要求主题思想明确;②具体的设计所需素材,可在网上查找,但不得有严重侵权行为,一经发现按零分处理。

4、技术要求:①选用Div、表格、框架、层等若干技术设计和布局网页;②超级链接(一般链接、电子邮件、锚点等)的使用;④行为的运用、时间轴动画、JavaScript特效等;⑤其他:按自己的喜好,添加的其他技术效果。

答题网页制作期末总结范文

答题网页制作期末总结范文

答题网页制作期末总结范文一、引言网页制作是当下非常热门的技能,随着互联网的普及和发展,越来越多的人开始学习网页制作,希望能够掌握制作一个精美、功能完善的网页。

在本学期的学习中,我也通过课程的学习和实践,掌握了网页制作的基础知识和技能。

在这篇总结中,我将对本学期的学习内容和实践经验进行总结和分享。

二、学习内容在本学期的学习中,我主要学习了以下几个方面的内容:1. HTML语言基础在网页制作中,HTML语言是不可或缺的基础,通过学习HTML语言,我掌握了HTML元素、标签以及常用的属性和样式等知识。

我学会了使用HTML语言来创建网页的基本结构,如doctype声明、head标签、body标签等。

我还学会了使用常用的HTML标签,如p标签、h1-h6标签、ul和li标签等。

在此基础上,我还学习了使用CSS样式表来实现网页的美化效果。

2. CSS样式表CSS样式表是网页制作中用来控制网页样式和布局的技术,通过学习CSS样式表,我学会了使用样式选择器、样式属性和样式值来控制网页元素的外观和行为。

我了解了常用的样式属性,如颜色、字体、背景、边框等,并学会了使用样式嵌入、样式链接和行内样式等方式来引入CSS样式表。

3. JavaScript脚本语言JavaScript是网页制作中常用的脚本语言,通过学习JavaScript,我掌握了一些基本的编程概念和技巧,如变量、运算符、条件语句和循环语句等。

我学会了使用JavaScript来实现网页的一些交互效果,如按钮点击事件、表单验证和图片轮播等。

4. 响应式网页设计随着移动设备的普及,响应式网页设计越来越重要。

在本学期的学习中,我也学习了响应式网页设计的基本原理和技术。

我学会了使用媒体查询来针对不同的设备和屏幕尺寸应用不同的样式。

我还研究了一些响应式网页设计的最佳实践,如使用流式布局、自适应图片和媒体查询等。

三、实践经验除了理论学习,我还通过实践来巩固和应用所学的知识。

网页设计期末作业班级总结

网页设计期末作业班级总结

网页设计期末作业班级总结一、背景介绍在本学期的网页设计课程中,我们班级共有X名学生参与了网页设计期末作业的编写。

本次作业的主题是制作一个班级网页,旨在展示我们班级的活动、成果以及同学们的优势和特点。

通过这次作业,我们班级的同学们得到了很好的锻炼和实践机会,提高了网页设计的能力和技巧,同时也增强了协作和沟通能力。

二、作业目标本次作业的目标是设计一个具有美观、清晰、实用特点的班级网页。

具体目标包括:1. 展示班级的基本信息:班级名称、年级、班级口号等;2. 展示班级成员信息:学生姓名、照片、个人介绍等;3. 展示班级活动:班会、课外活动、比赛成果等;4. 提供留言功能:让同学们能够相互交流和留下自己的意见建议。

三、设计思路我们根据作业目标和班级的特点,制定了如下的设计思路和方案:1. 网页整体风格:我们选择了简洁明了、色彩搭配得当的风格,以便浏览者可以快速浏览并获取相关信息。

2. 页面结构:我们采用了一级导航栏的方式,将班级的基本信息、成员信息和活动内容用不同的分区进行展示,便于浏览者查看。

3. 成员展示:我们将成员信息进行分类展示,方便浏览者查找和认识班级的每位同学。

4. 活动展示:我们将班级的活动按照时间顺序进行排列,鼓励同学们积极参与,并且可以通过图片、文字等方式展示活动的内容和成果。

5. 留言功能:我们提供了留言板功能,鼓励同学们互相交流,也可以发布一些寄语和祝福。

四、具体操作在设计网页的过程中,我们使用了HTML、CSS和JavaScript等技术来实现各种功能。

具体操作步骤如下:1. 确定网页的结构和布局,包括导航栏、侧边栏、主体内容等。

2. 制作网页的素材,包括班级的照片、学生的个人照片和介绍等。

3. 使用HTML和CSS来实现网页的基本骨架和样式。

4. 使用JavaScript来实现一些交互功能,比如点击导航栏可以跳转到相应的页面,留言板的提交和展示等。

5. 进行网页的调试和优化,确保网页的兼容性和稳定性。

《网页制作》结课作业

《网页制作》结课作业

湖南文理芙蓉学院个人主页课程报告201703考试批次《网页制作》结课作业学生姓名学习中心•学号考号专业年级层次北京语言大学网络教育学院《网页制作》结课作业注意:本学期所布置的结课作业,请同学一律按照以下要求执行:一、学生必须预约才能在学生平台看见相关课程的“结课作业”按钮;二、提交路径:个人平台首页--学习中的课程,点击该课程名称--点击“结课作业”--点击“浏览”按钮,选择要上传的文档后点击“提交作业”即可。

三、结课作业提交起止时间:2017年1月21日--3月20日。

(届时平台自动关闭,逾期不予接收。

)四、提交的文档格式必须为word文档,截止日期前可多次提交,平台只保留最后一次提交的文档;五、严格按照课程名称提交相应课程结课作业,提交错误的结课作业,按0分处理。

一、设计题目(请在以下网页设计作品中任选其一,最后整理一份网站设计与实现的报告即可,具体要求如下。

总分100分)1、制作个人主页2、制作公司网站主页3、制作环保网站网页4、制作BBS注册网页5、制作购物网站6、制作班级主页7、制作家乡介绍网页8、制作汽车世界网页9、制作销售书店网页10、制作美食天下网页二、网站设计与实现具体要求1、设计题目:选择一个你最感兴趣的主题,进行网站设计与开发,网站内容具有实用价值。

2、开发环境:综合使用Dreamweaver CS、CSS、HTML、Flash CS、Fireworks CS、VBScrip(JAVAScript)等工具和语言,但动态网页制作不做硬性规定。

3、内容要求:①内容不限,但要求主题思想明确;②具体的设计所需素材,可在网上查找,但不得有严重侵权行为,一经发现按零分处理。

4、技术要求:①选用Div、表格、框架、层等若干技术设计和布局网页;②超级链接(一般链接、电子邮件、锚点等)的使用;④行为的运用、时间轴动画、JavaScript特效等;⑤其他:按自己的喜好,添加的其他技术效果。

5、网站结构要求:网站页面组织结构清晰合理,要求站点至少要有三层结构,至少三个网页以上。

网页制作期末作业模板.doc

网页制作期末作业模板.doc

网页制作
作业(五)
学院:教育科学与技术学院班级:网络二班
姓名:武鹏飞
学号:100806131234
日期:2012年6月29日
综合网站的开发及其设计方案
一、确定网站主题及风格创意
(1)网站的主题是什么?
网站的主题是:苹果平板电脑网站。

背景颜色主要是橙黄色以及渐变的银灰色,体现电子商务主题。

(2)网站的用户是谁?有哪些功能?
该网站属于商务网站,用户为平板电脑购买者,游客可以浏览到最新的商品以及一些活动,此外还增设了娱乐游戏应用等。

(3)网站的风格定位是什么?
采用平面设计风格,基于一个二维视图来工作的,给人以空灵的意境和透气爽快的感觉。

二、网站功能模块规划
(1)画出站点地图,
(2)画出链接结构图
(3)阐述各模块的布局特点及技术实现
●布局技术
1)该布局分为上中下三个结构,分别插入div(id=zongbu),div
(id=bannerip),div(id=bottom)三个外层。

2)在div(id=zongbu)中继续插入子层,进行排局。

同理,在其他外层当
中插入子层,进行调整达到需求。

●各静态模块的功能特点及内容呈现
通过链接来联通各个子页,以实现其网站的功能,主要功能达到用户很好得购买到理想的商品。

●动态模块的功能实现及技术(包括ASP核心代码的解释)
本网站没有使用其动态功能
三、综合性布局设计(编写故事板)
四、总结
通过这次网页制作的学习,初步能够建立站点以及制作一些简单的网页,重在美工和排版,此外还可以加上行为,使网页动起来,不足之处没能和ASP达到很好的链接,缺失动态效果,以后努力完善。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

湖南文理芙蓉学院个人主页课程报告201703考试批次《网页制作》结课作业学生姓名学习中心•学号考号专业年级层次北京语言大学网络教育学院《网页制作》结课作业注意:本学期所布置的结课作业,请同学一律按照以下要求执行:一、学生必须预约才能在学生平台看见相关课程的“结课作业”按钮;二、提交路径:个人平台首页--学习中的课程,点击该课程名称--点击“结课作业”--点击“浏览”按钮,选择要上传的文档后点击“提交作业”即可。

三、结课作业提交起止时间:2017年1月21日--3月20日。

(届时平台自动关闭,逾期不予接收。

)四、提交的文档格式必须为word文档,截止日期前可多次提交,平台只保留最后一次提交的文档;五、严格按照课程名称提交相应课程结课作业,提交错误的结课作业,按0分处理。

一、设计题目(请在以下网页设计作品中任选其一,最后整理一份网站设计与实现的报告即可,具体要求如下。

总分100分)1、制作个人主页2、制作公司网站主页3、制作环保网站网页4、制作BBS注册网页5、制作购物网站6、制作班级主页7、制作家乡介绍网页8、制作汽车世界网页9、制作销售书店网页10、制作美食天下网页二、网站设计与实现具体要求1、设计题目:选择一个你最感兴趣的主题,进行网站设计与开发,网站内容具有实用价值。

2、开发环境:综合使用Dreamweaver CS、CSS、HTML、Flash CS、Fireworks CS、VBScrip(JAVAScript)等工具和语言,但动态网页制作不做硬性规定。

3、内容要求:①内容不限,但要求主题思想明确;②具体的设计所需素材,可在网上查找,但不得有严重侵权行为,一经发现按零分处理。

4、技术要求:①选用Div、表格、框架、层等若干技术设计和布局网页;②超级链接(一般链接、电子邮件、锚点等)的使用;④行为的运用、时间轴动画、JavaScript特效等;⑤其他:按自己的喜好,添加的其他技术效果。

5、网站结构要求:网站页面组织结构清晰合理,要求站点至少要有三层结构,至少三个网页以上。

网站中元素要包括:文字、图像、声音、Flash动画等。

6、网页界面要求:①网页页面结构清晰、美观大方、形式新颖、内容充实、浏览方便、鼓励创新;②网页中没有错别字;③每页均可以返回首页和链接到其它页,每页都有导航条;④可以自己制作图片、动画等以增加网页展示效果。

7、网站文件结构:网站建立的文件目录结构应合理,除首页(index.html或index.htm)外,其它页文件、图片等应放在相应的文件夹下,并且所有文件名、文件夹名、图片名等都必须使用英文小写字母。

三、撰写设计报告要求:最后整理一份网站设计与实现的报告,内容包括目录、需求分析、网站网页设计与实现内容,内容组织逻辑要合理,层次清晰,语言要准确通顺。

其具体来讲最好有以下内容:1、网站主题介绍;2、网站需求描述;3、网站页面结构规划与设计、网站文件夹目录规划、网页布局规划与设计;4、网页的实现(主要的步骤及实现代码等);5、总结;6、按合理的顺序附主要源代码。

四、评分总则1、作业成绩2、设计报告①内容逻辑组织合理,层次清晰;②内容充实,重点突出,详略得当;③观点表达正确,语言准确通顺;④图表制作正确规范;⑤排版规范美观。

制作个人主页目录一、运行坏境 (5)二、设计的目的和意义 (5)2.1课题的目的: (5)2.2课题的意义: (5)三、设计步骤: (6)3.1 准备工作: (6)3.2 Flash设计步骤: (6)3.3 HTML的编写步骤: (6)3.4 Dreamweaver的设计步骤: (6)四、程序源代码 (10)五、调试过程分析 ..........................................错误!未定义书签。

六、网页的测试与发布...................................错误!未定义书签。

七、小结..........................................................错误!未定义书签。

参考文献. (20)一、运行坏境本网页主要基于windows XP /2000 或其他系列操作系统,安装有Flash 播放器、网页三剑客:Macromedia Dreamweaver 、Macromedia Fireworks 、Macromedia Flash 的运行坏境。

二、设计的目的和意义2.1课题的目的由于本人比较喜欢火影,所以本次课程设计中主要是以火影为主要的素材。

本次课程设计的主题是个人网页制作,我主要做了7个网页。

网页主要是以flash 为主,子网页主要是以介绍为主,其中包含了人物的特点、擅长的技能、图片,能够帮助火影爱好者更清晰的了解剧情里面的人物关系和自身的特点!还有各种关于火影相关的连接,能够比较系统的找到火影的相关信息,希望对广大感兴趣的人爱好者会有所帮助!个人网页设计是采用HTML、Dreamweaver、Photoshop等结合开发的,要进行网页的开发,必须对要Dreamweaver、flash、Photoshop等设计软件有所了解。

而且还要熟悉利用HTML语法来编写网页代码。

当然,还要有一定美术功底。

2.2课题的意义:①.理论意义随着Internet在中国的迅速发展,人们日常生活中越来越多地使用这项新的技术来为自己的工作和学习服务.由于WEB页面能把文本、图像、声音、动画、视像等多种媒体信息集于一体,不但使信息的显示更加生动,而且使信息的浏览更为方便,同时WEB页能实现网上交易平台、客户信息反馈方便了企业与客户之间信息交流,因此许多企业纷纷建设具有自己独特风格的网站以增强企业知名度.②.现实意义我们本次通过设计个人网页主要是学习掌握HTML语言的用法,以及Dreamweaver的一些具体操作,还有学会运用一些Photoshop的知识。

希望通过本次设计能够熟悉以上知识,并能够设计出好的网页。

三、设计步骤:3.1准备工作:①.本站素材来源:火影中文网、百度、Google等,并结合Photoshop、123Flash等辅助软件制作网页背景、图标等素材。

素材主要包括网站所需要的图片、火影忍者相关的文字说明如作者岸本齐史简介、火影忍者人物性格分析火影人忍者简介及剧情介绍等。

②.前期构思,主要完成网站主题框架设计如首页与分页面的逻辑结构、各分页面框架布局、首页框架布局、导航栏链接、完成基本的图像文字排版及部分较为简单的页面构思。

在头脑里完成《网站“火影之家”规划报告》(草案)。

3.2 Flash设计步骤:①. 进入Flash软件的运行环境设置背景颜色为黑色。

如图3-1所示:图3-1将下面的线条重复的放在黑色的背景上面,会出现有种渐变色的感觉。

如下图3-2所示:图3-2还有图片的相应的切换,每张图片都是由模糊到清楚慢慢的变化。

(需要编写程序实现这些功能)②.在编程区域编写程序,源代码见程序源代码中(style.css):③.效果图如下:图3-1 图3-2图3-3 图3-4图3-5 图3-63.3 HTML的编写步骤:①.新建一个记事本文件。

②.在文本文档中编辑自己的HTML代码。

③.将文本文档的后缀名.txt改成.htm(或者 .html)。

④.如果完成后的.htm文档需要修改可以:1.用文本文档的方式打开修改 2.选择IE浏览器查看--》源文件修改网页中设计到的主要代码:获取图片代码:<img src="./images/#.gif" width="144" height="50">背景颜色设置:<body bgcolor="#d0d0d0">文字链接设置:<a href="lastpage.htm">This text</a>图片链接设置:<u><a href="index.htm"><img src="./images/11.jpg" width="116" height="32"></a></u>3.4 Dreamweaver的设计步骤:①.打开Dreamweaver主界面,单击菜单栏→文件打开已经编写好index.Html 等网页文件。

②.然后对index.Html文件的排版进行设置,经过一段时间的调整,主界面基本形成。

效果图如下所示:图3-7 —欢迎页面(1)图3-7 —欢迎页面(2)图3-7 —欢迎页面(3)③.子界面设置效果如下图所示:图3-8 —火影简介截图(1)图3-8 —火影简介截图(2)图3-8 —火影简介截图(3)图3-9—人物简介页面截图(1)图3-9—人物简介页面截图(3)单击logo 链接到海贼网的官方网界面,界面截图下:图3-10 —链接界面截图四、程序源代码①.style.css中的源代码如下:@charset "utf-8";/* CSS Document */body {font-size: 12px;margin: 0px;padding: 0px;background-color: #000;background-image: url(../images/bg.jpg);background-repeat: repeat-x;}a {color: #362a00;text-decoration: none;}a:hover {color: #ea0000;text-decoration: underline;}#index{margin:0 auto;text-align:center;color:#ccff66;}#index embed{width:800px;height:600px;}#index h1{font-size:36px;}#index h2 a{color:#02e3e3;font-size:24px;text-decoration:none;}#index h2 a:hover{color:#ccff66;}#header {height: 223px;width: auto;background-image: url(../images/header_bg.jpg);background-repeat: no-repeat;background-position: center;}#nav {height: 107px;background-image: url(../images/nav_bg.jpg);background-repeat: no-repeat;background-position: center;}#nav .nav_main {height: 107px;width: 931px;margin: auto;color: #FFC;}#nav .nav_main ul {margin: 0px;padding: 0px;}#nav .nav_main ul li {margin-left:45px;line-height:80px;display: inline;}#nav .nav_main ul.u1 {width: auto;font-size: 20px;font-weight: bold;text-align: center;padding-top: 25px;padding-bottom: 5px;color: #FC0;}#nav .nav_main .u1 li a {color: #FC0;text-decoration: none;padding-right: 5px;padding-left: 5px;}#nav .nav_main .u1 li a:hover {text-decoration: underline;color: #FC0;}#nav .nav_main .u1 li .red {color: #F00;}#nav .nav_main .u1 li .red:hover {color: #F00;}#nav .nav_main ul.u2 {text-indent: 25px;padding-top: 2px;padding-bottom: 2px;}#nav .nav_main .u2 li a {color: #FFC;text-decoration: none;padding-right: 5px;padding-left: 5px;}#nav .nav_main .u2 li a:hover {color: #FFC;text-decoration: underline;}#main {height:1200px;width: auto;background-image: url(../images/main_bg.jpg);background-position: center;background-repeat: repeat-y;}#main_up {background-image: url(../images/up_bg.jpg);background-repeat: no-repeat;background-position: center top;width: auto;}#main_up_body {width: 931px;margin: auto;height: 1200px;}#news {height: 1200px;width: 930px;}#news .news_main {background:#d5ad4b;height: 1200px;text-align:center;overflow:auto;}#news .news_main p{text-align:left;font-size:16px;line-height:180%;margin:10px;text-indent:32px;}#flink {background-image: url(../images/flinkbg.jpg);background-repeat: no-repeat;background-position: center center;padding-top: 16px;padding-bottom: 16px;text-align: center;padding-left: 70px;}#flink img {padding-right: 3px;padding-left: 3px;border-top-width: 0px;border-right-width: 0px;border-bottom-width: 0px;border-left-width: 0px;}②.index.Html中的源代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>火影忍者</title><link href="style/style.css" rel="stylesheet" type="text/css" /></head><body><div id="index"><h1>欢迎来到火影之家</h1> <h1><a href="home.html">ENTER</a></h1><embed src="images/index.swf" ></embed></div></body></html>③.home.Html中的源代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>火影忍者</title><link href="style/style.css" rel="stylesheet" type="text/css" /></head><body><div id="header"></div><div id="nav"><div class="nav_main"><ul class="u1"><li><a href="home.html">火影简介</a></li><li><a href="one.html">三代班</a></li><li><a href="two.html">卡卡西班</a></li><li><a href="three.html">阿斯玛班</a></li><li><a href="four.html">凯班</a></li><li><a href="five.html">红班</a></li></ul></div></div><div id="main"><div id="main_up"><div id="main_up_body"><div id="news"><div class="news_main"><img src="images/home.jpg"><p>《火影忍者》是日本漫画家岸本齐史的代表作,作品自1999年开始在周刊《少年JUMP》上连载后,读者反应非常热烈。

相关文档
最新文档