文档库 最新最全的文档下载
当前位置:文档库 › 《网页设计与制作》课程设计报告 ()

《网页设计与制作》课程设计报告 ()

《网页设计与制作》课程设计报告 ()
《网页设计与制作》课程设计报告 ()

《网页设计与制作课程设计》

实验报告

院系名称:管理学院专业班级:电子商务XXX

学生姓名: XXX 学号: XXXXXXX

网页界面网站栏目网站功能(JS程序)合计

50分10分40分100分

2016年 06 月

一、实验目的

本实验属于设计性实验,在学习完《网页设计与制作》课程的基础上,通过实验学习网页制作的步骤与方法,使用CSS+DIV制作一个简单的网站,能够对网站有一个清晰的认知和规划。进一步熟悉和领悟HTML语言、CSS样式表和JAVASCRIPT语言的语法结构。将理论与实践相结合,加深对本课程的理解。

二、实验步骤

1、进行网站整体规划,包括网站主题、栏目以及界面的构思,确定网站结构,形成初步设计思路。

2、设计网站的主页以及栏目,利用CSS+DIV制作网站主页和弹出式导航条菜单,利用JavaScript制作动态效果,并用firework软件对主页进行切图。

3、设计并利用CSS+DIV制作列表页,并用firework软件对列表页进行切图。

4、设计并利用CSS+DIV制作内容页,并用firework软件对内容页进行切图。

5、进行调试和修改已形成最终实验结果。

三、网站设计思路

1、参照“唯品会”“折800”等电商网站,确定网站主题为“轻奢电商”。

2、设计网站主页,主页设置首页、美妆、服饰、零食、母婴、关于我们、在售分

类等七个一级栏目。其中美妆、服饰、零食、母婴四个栏目含有二级栏目。

3、首页设置品牌热卖、限量抢购等图片展示,并利用Javascript设置用户名和密码的表单验证,在图片之下设置一个新闻列表提供有关网站的最新消息,右侧设置账户、密码的表单验证,并在网页结尾处写上官方微信和版权信息。

4、由主页导航栏上的的在售分类引出列表页,在列表页中采用新闻列表样式具体展示本企业的全部商品分类并设置超链接。

5、由列表页中美妆|女士护肤|洁面弹出具体的内容页面,主要由图片以及相应的文字介绍组成。

四、网站的核心代码

1、主页

轻奢电商

轻奢电商

正品保障7天退换


品牌热卖


限量抢购

轻奢电商——轻奢新主义,只为懂你的人

  • 轻奢国际尖货,跟踪国际一流品牌,提供超一流服务
  • 轻奢母婴专享,提供超豪华护理套餐,限时一折抢购
  • 轻奢化妆品专柜,超乎实体店的感官体验,限时特卖
  • 轻奢零食主会场,进口零食倾情享受,酒水七折特卖



用户:


密码:

onblur="p(this)">

style="color:red;font-size:12px;">


在售分类

轻奢电商

正品保障7天退换

  • 首页
  • 美妆
  • 服饰
  • 零食
  • 母婴
  • 关于我们
  • 在售分类


3、内容页

洁面

轻奢电商

正品保障7天退换

  • 首页
  • 美妆
  • 服饰
  • 零食
  • 母婴
  • 关于我们
  • 在售分类

您的位置>美妆>女士护肤>洁面



洁面膏

尺码:100g

洁面膏彻底清除堆积在毛孔里的污垢和角质细胞,用后清爽无比


草本青春洁面慕斯

规格:150mL

草本青春洁面慕斯150mL,蕴含有丰富的植物油和植物萃取,质地温和绵密,能够温和的清洁皮肤


玫瑰衡肤保湿洁面乳

尺码:80g

玫瑰衡肤保湿洁面乳80g,蕴含丰富的玫瑰果油,可提升肌肤水分含量


衡肤泡沫洁面液

尺码:200mL

衡肤泡沫洁面液,玫瑰、绿茶和药蜀葵和多种植物活性成份可以轻柔的去肌肤表面污垢


五、实验总结

在本次网站页面设计中,首先要整理清楚构思,根据CSS样式以及DIV块化设计完成代码设计。其中对于Javascript的应用主要体现在三个方面:下拉菜单的动态效果,用户登录的表单验证以及图片轮播的动态效果。

我在本次试验中最大的困难是有关盒子的宽高、边界以及悬浮等属性,如何利用DIV模块将内容悬浮至水平排列,以及如何将用项目编号嵌套的新闻列表排列展示等。伴随着这些问题的解决,我对CSS中的宽高属性以及边框属性有了一个更为清晰的认知。另外,由于网站的主题选定为“轻奢电商”,因此,图片的展示要多于文字的展示,图片的作用更为重要,在此过程中,可以用Fireworks软件进行切图,这是网页必不可少的元素。

网页设计是一个前端的操作,对界面的设计和把握主要要求我们细致,有耐心。在对程序不断的调试之后不断发现当前网页的问题是我们的任务所在,在这个过程中,我们不但能重新学习代码的功能,还可以提高对网页源代码的理解程度。

网页设计与制作实例教程

网页设计与制作实例教程 习题答案 第1章网页与网站基础 一、选择题 1.A 2.B 3.C 4.C 5.A 二、判断题 1.√2.×3.√4.×5.√ 三、问答题 略 第2章网页规划设计 一、选择题 1.D 2.A 3.C 4.A 5.C 二、判断题 1.×2.×3.×4.√5.√ 三、问答题 1.答:网站需求分析一般包括三个阶段的内容:网站背景分析、总体需求分析、具体需求分析。(每个阶段可再详细描述。) 2.答:可从以下几个方面来阐述网站设计的原则:①日期、时间和数字;②欢迎词; ③弹出窗口和引导页面;④新闻和公告信息;⑤网址;⑥控件;⑦链接;⑧主页内容 3.答:打开新浪网首页,分析其布局类型。(答案略) 4.答:网页色彩搭配方法可从以下两个方面去阐述:①根据页面风格以及产品本身的诉求确定主色;②根据主色确定配色。 网页色彩搭配技巧可从以下几个方面去阐述:①用一种色彩;②用两种色彩;③用一个色系;④用黑色和一种色彩以及色彩搭配忌讳的方面。 5.答:打开当当网,具体分析其规划过程。(答案略) 第3章初识网页制作软件 一、选择题 1.C 2.C 3.B

二、填空题 1.代码、拆分、设计2.文件、资源、规则3.超级链接 三、操作题 略 第4章制作网页内容 一、选择题 1.D 2.B 3.A 4.D 5.ABD 6.D 7.B 8.D 9.A 10.A 二、判断题 1.√2.√3.×4.√5.√6.√7.√8.√9.×10.√三、操作题 略 第5章设置网页超级链接 一、选择题 1.D 2.D 3.A 4.D 5. C 二、判断题 1.×2.×3.×4.√5.× 第6章使用CSS样式美化网页 一、选择题 1.B 2.C 3.C 4.B 5.A 6.D 7.D 8.D 9.B 10.C 11.A 12.A 13.C 14.D 15.D 16.A 17.A 18.B 19.D 20.D 二、简答题 1.×2.×3.×4.×5.×6.×7.√8.×9.√10.√11.×12.×13.×14.√15.√16.√ 第7章规划布局网页 一、选择题 1.B 2.A 3.B 4.B 5.D 二、简答题

贪吃蛇游戏课程设计实验报告全解

辽宁科技大学课程设计说明书 设计题目:基于C#的贪吃蛇游戏 学院、系:装备制造学院 专业班级:计算机科学与技术 学生姓名:叶佳佳 指导教师:丁宁 成绩: 2015年12月12日

目录 一、概述 (1) 1、用C#实现该设计的方法 (1) 2、贪吃蛇游戏说明 (1) 二、实验目的及设计要求 (1) 1、实验目的 (1) 2、实验要求 (2) 三、课程设计具体实现 (2) 1、概要设计 (2) 1.1、设计思想 (2) 1.2、主模块实现 (2) 1.3、主函数流程图 (4) 2、详细设计 (5) 2.1、设计思想 (5) 2.2、具体模块实现: (5) 四、调试过程及运行结果 (10) 1、调试过程 (10) 2、实验结果 (11) 五、实验心得 (12) 六、参考资料 (13) 七、附录:源代码 (13)

一、概述 1、用C#实现该设计的方法 首先应该了解设计要求,然后按照功能设计出实际模块,每个模块都要完成特定的功能,要实现模块间的高内聚,低耦合。设计模块是一个相当重要的环节,模块的数量不宜太多,也不宜太少,要是每个模块都能比较简单的转换成流程图。模块设计完成后,就该给每个模块绘制流程图。流程图要尽可能的简单且容易理解,多使用中文,补一些过长的代码,增加理解难度。此外,流程图应容易转换成代码。 根据流程图编写好代码后在WindowsXP操作系统,https://www.wendangku.net/doc/8e9727024.html,2008开发环境下进行运行测试,检查错误,最终设计出可行的程序。 2、贪吃蛇游戏说明 游戏操作要尽可能的简单,界面要尽可能的美观。 编写程序实现贪吃蛇游戏,贪吃蛇游戏是一个深受人们喜欢的游戏:一条蛇在密闭的围墙内,在围墙内随机出现一个食物,通过键盘上的四个光标键控制蛇向上下左右四个方向移动,蛇头撞到食物,则表示食物被吃掉,这时蛇的身体长一节,同时计10分;接着又出现食物,等待被蛇吃掉,如果蛇在移动过程中,撞到墙壁、障碍物或身体交叉(蛇头撞到自己的身体),则游戏结束。游戏结束时输出相应得分。 具体要求有以下几点: (1)对系统进行功能模块分析、控制模块分析正确,符合课题要求,实现相应功能;可以加以其他功能或修饰,使程序更加完善、合理; (2)系统设计要实用,采用模块化程序设计方法,编程简练、可用,功能全面; (3)说明书、流程图要清楚; 二、实验目的及设计要求 1、实验目的 .NET课程设计是教学实践环节中一项重要内容,进行此课程设计旨在掌握基础知识的基础上,进一步加深对VC#.NET技术的理解和掌握; 提高和加强学生的计算机应用及软件开发能力,使学生具备初级程序员的基本素质; 培养学生独立分析问题、解决问题、查阅资料以及自学能力,以适应信息管理行业日新 1

扫雷的课程设计报告

西安文理学院信息工程学院课程设计报告 设计名称:数据结构课程设计 设计题目:实现一个N*M的扫雷游戏 学生学号:1402130407 专业班级:软件13级四班 学生姓名:樊秀琳 学生成绩: 指导教师(职称):谢巧玲(讲师) 课题工作时间:2015.6.22 至2015.7.3

说明: 1、报告中的任务书、进度表由指导教师在课程设计开始前填写并发给每个 学生。 2、学生成绩由指导教师根据学生的设计情况给出各项分值及总评成绩。 3、所有学生必须参加课程设计的答辩环节,凡不参加答辩者,其成绩一律 按不及格处理。答辩由指导教师实施。 4、报告正文字数一般应不少于3000字,也可由指导教师根据本门综合设 计的情况另行规定。 5、平时表现成绩低于6分的学生,取消答辩资格,其本项综合设计成绩按 不及格处理。

信息工程学院课程设计任务书 指导教师:院长: 日期:2015年6月22日

信息工程学院课程设计进度安排表 学生姓名:樊秀琳学号:1402130407 专业:软件工程班级:13级四班 指导教师签名: 2014年6月22日

成绩评定表 学生姓名:樊秀琳学号:1402130407 专业:软件工程班级:13级四班

摘要 摘要: 扫雷游戏是Windows操作系统自带的一款小游戏,在过去的几年里,Windows操作系统历经数次换代更新,变得越来越庞大、复杂,功能也越来越强大,但是这款小游戏依然保持原来的容貌,可见这款小游戏受到越来越多人的喜爱。扫雷游戏是比较经典的一款小游戏,实现它的方法很多,可以用很多不同算法设计和语言实现,如C,C++,VB,JAVA等。我利用eclipse编写了与它功能相似的扫雷游戏,寓学于乐。 程序的功能是随机生成地雷数,通过鼠标操作玩游戏,不接受键盘,按任意键结束程序。单击屏幕上的笑脸可以重新开始游戏。所有地雷标出后胜利,当鼠标左键单击到地雷时提示游戏失败。其功能类似于Windows操作系统自带的扫雷游戏。论文首先介绍了进行该游戏课程设计的目的,然后是任务描述和设计的相关要求,最后是最重要的需求分析和设计方案。重点介绍了在游戏过程中各事件的处理,其中又以鼠标事件和清除未靠近地雷区方块这两方面最为最要,鼠标事件是利用鼠标所发出的信息了解用户的意图,进而做出相对应的动作。清除未靠近地雷区的方块较为复杂。 关键词:算法设计;事件;Eclipse

网页制作课程设计报告

网页制作课程设计报告 学院: 专业班级: 姓名: 学号: 成绩: 阅卷教师:

目录 1.设计目的 (1) 2.设计思想 (1) 2.1网站整体结构规划思想 (1) 2.2 主页设计思想 (1) 2.3子页的设计思想 (1) 3网页详细设计分析 (1) 4结论 (2)

1.设计目的 阐述该个人网站的设计意图和创意,简单介绍自己的个人网站。 2.设计思想 阐述网站的整体设计思想,包括: 2.1网站整体结构规划思想 要求阐述网站整体结构的选择、设计的思想,绘制网站结构草图。 2.2 主页设计思想 要求对主页的布局思路进行阐述和分析。 2.3子页的设计思想 要求对子页的设计以及网页对象的选取思路进行阐述和分析。 3网页详细设计分析 要求选取一张网页,对网页的设计实现过程进行阐述和分析,详细说明制作该网页的步骤,所使用的网页对象以及该网页对象的操作方法。

4结论 对整个设计报告做归纳性总结,并分析设计过程中的困难及如何解决的,最后提出展望。 一、设计目的 本课程的设计目的是通过实践使同学们经历Dreamweaver cs3开发的全过程和受到一次综合训练,以便能较全面地理解、掌握和综合运用所学的知识。结合具体的开发案例,理解并初步掌握运用Dreamweaver cs3可视化开发工具进行网页开发的方法;了解网页设计制作过程。通过设计达到掌握网页设计、制作的技巧。了解和熟悉网页设计的基础知识和实现技巧。根据题目的要求,给出网页设计方案,可以按要求,利用合适图文素材设计制作符合要求的网页设计作品。熟练掌握Photoshop cs3、Dreamweaver cs3等软件的的操作和应用。增强动手实践能力,进一步加强自身综合素

WEB个人主页课程设计

Web应用开发技术 实验报告 专业:计算机科学与技术 班级: 学号: 姓名:

一、设计题目 个人网站 二、目的 1、本次设计是学生在学完ASP动态网站开发课程后的一次实践性很强的课程设计,是对ASP进行动态网站开发所学知识的综合运用。 2、掌握使用ASP技术进行网站开发设计。 3、通过本次实习,使学生加深所学知识内容的理解,并能积极地调动学生的学习兴趣,结合实际应用操作环境,真正做到理论与实际相结合。 三、功能需求描述 此网站可以对主人留言,来发表自己的心情,也可以把自己的联系方式写入其中,达到和睦相处、心灵的驿站的目的等。 四、总体设计

五、详细设计 (一)、我的主页 此页面为网站的主页,通过发布新心情,点击通讯录可以查看通讯录好友信息,点击留言板可以查看好友留言。 主要代码: 个人空间