《网设计与制作》课程设计报告
高职《网页设计与制作》的课程设计
收稿 日期 ：２０１０—０３—１９ 作者 简 介 ：胡 雪梅 （１９６５一），女 ， 四川 宜 宾人 ，４，ｉ教授 ，工 学硕 士 ，主要 研 究方 向 ：计 算机 应 用技 术 ；胡 建 荣 （１９６３－）， 男 ，
浙 江桐 乡人 ，讲 师 ，工 学硕 士 ，主要 研 究 方向 ：计 算机 网络 技 术 。
（二 ） “任 务 驱 动 ” 的 教 学 方 法 采 用 任 务 驱 动 为 主 的教 学方 法 ，以 若 干 个 项 目为载 体 ． 将 网 页 设 计 与 制 作 的 知 识 点 和 技 术 要 点 穿 插 到 各 个 项 目任 务 中进 行 讲 解 ，使 学 生 掌 握 各 个 知 识 点 的实 际应 用 。
基 于 网 页 设 计 课 程 的 特 点 。我 们 设 计 了课 程 的整 体 教学 方案 ：
（一 ） “模 块 化 ” 的 课 程 内容 根 据 职 业 岗 位 对 知 识 掌 握 的要 求 ，将 网 页 制 作 员 和 管 理 员 必 备 的 知 识 和 技 能 分 为 ５大 模 块 ：网 页 基 础 模 块 、网 页 制 作 模 块 、 网 页 代 码 模 块 、 网站 管 理 模 块 和 综 合 实训 模 块 。
网页 设 计 与 制 作 课 程 具 有 以 下 特 点 ：首 先 ，
网页 设 计 课 程 具 有 很 强 的 操 作 性 和 实 践 性 ，特 别 强 调 学 生 的 操 作 能 力 和 学 以 致 用 的 综 合 实 践 能 力 ；其 次 ，网 页 设 计 没 有 固 定 的模 式 ，它 要 求 学 生 在 掌 握 网页 设 计 的基 本 理 论 和 方 法 的 基 础 上 。充 分 发 挥 自己 的 想 象 力 和 创 造 力 ，灵 活 运 用 所 学 的知 识 进 行 创 造 性 的 设 计 ：再 次 ， 网 页 设 计 课 程 具 有 很 强 的 现 实 性 和 时 效 性 ，具 有 明 显 的 时 代 发 展 特 点 。 因 此 我 们 的 教 学 不 是 单 纯 教 会 学 生 如 何 掌 握 某 些 知 识 和 某 种 技 能 ，而 是 要 培 养 学 生 获 取 、理 解 、分 析 、加 工 、处 理 、 创 造 和活 用 知 识 的 能力 。
《网页设计与制作》课程教学工作总结
《网页设计与制作》课程教学工作总结时间真是过得飞快，转眼间《网页设计与制作》这门课就要结束了。
在这段时间里，团队里大家齐心协力，经历了不少挑战，也收获了很多。
回想起来，这段教学过程既有值得庆祝的成绩，也有需要我们反思的地方。
下面就来聊聊这段时间的总结吧。
工作概述在课程设计上，我们特别注重互动和趣味性，力求让每个学生都能积极参与。
课程开始时，我们制定了详细的教学计划，也设定了阶段性目标，以确保学生们能逐步提高自己的能力。
主要成就在教学过程中，取得了一些显著的成绩。
经过我们的努力，学生们的网页设计水平有了明显的提升。
来看看一些具体的案例和数据吧：1. 项目展示：在学期末，学生们参加了“网页设计大赛”，展示了他们的作品。
大赛共有30个项目参赛，涵盖个人博客、企业官网、在线商店等多种类型。
根据评审的反馈，70%的作品获得了“优秀”评价，显示出学生们在设计思路和技术应用上的成长。
2. 课程反馈：通过期中和期末的问卷调查，95%的学生对课程内容表示满意，认为课程既丰富又实用。
尤其是在项目实操环节，大家普遍反映能更好地理解理论知识，并在实践中得到锻炼。
3. 团队合作：我们鼓励学生们以小组的形式进行项目合作，观察发现，大部分小组在合作中展现出了良好的沟通能力和分工意识。
这种合作模式不仅提升了学生的社交能力，也增强了他们的责任感和集体荣誉感。
经验与教训虽然取得了一些成绩，但在教学过程中也遇到了一些问题，这些问题需要我们认真分析和反思。
1. 时间管理：有些学生在项目截止日期前感到很大压力，最终导致作品质量下降。
这说明我们在项目进度的安排上需要更加细致，或许可以考虑将项目拆分成多个小阶段，让学生能更好地分配时间。
2. 技术难度：对于基础较弱的学生来说，课程内容的技术难度可能有点高。
虽然我们提供了额外的辅导时间，但依然有一些同学在理解某些概念时遇到困难。
这提醒我们在课程设计时，要考虑到不同水平学生的需求，适当调整教学节奏。
网设计与制作实训报告完整版
网设计与制作实训报告完整版网页设计与制作实训报告一、实训目的与背景网页设计与制作是现代社会中非常重要的技能之一，通过本次实训，我旨在培养自己的网页设计与制作能力，提高自己的实际操作能力，并将所学知识与技能应用于实际工作中。
二、实训过程与方法1. 确定实训内容与目标：为了更好地完成实训，我事先确定了实训的内容及所需达到的目标。
实训的内容包括学习HTML、CSS、JavaScript等网页设计与制作相关知识，并能够通过实际操作制作出具有实用性与美观性的网页。
2. 学习与研究：在开始实际操作之前，我首先进行了系统的学习与研究。
通过参考书籍、网络资源、视频教程等方式，我全面了解了HTML、CSS、JavaScript等技术的基本原理与应用方法，并加深了对网页设计与制作的理解。
3.实际操作与练习：在学习与研究阶段结束后，我开始进行实际操作与练习。
我首先从简单的网页设计开始，逐渐增加难度，通过一步步实际操作，不断巩固所学知识，并提高自己的技术水平。
同时，我也积极参与实验室和班级里的网页设计与制作项目，与同学们共同学习，互相交流经验。
4.实际项目案例：在实训的最后阶段，我开始进行实际项目案例的设计与制作。
我选择一个健身房的官方网站作为实际项目，通过网站的设计与制作，展示出我所学技术的实际应用。
在这个过程中，我不断与客户进行沟通与反馈，保证项目的质量与效果。
三、实训成果与收获通过本次实训，我取得了一些实质性的成果。
首先，我掌握了HTML、CSS、JavaScript等网页设计与制作技术，能够熟练运用这些技术进行网页设计与制作。
其次，我通过实际操作，提高了自己的实际操作能力，并在实际项目中展示出良好的设计与制作水平。
最后，我与同学们共同学习，互相交流经验，取得了一定的进步。
在实训中，我也遇到了一些问题与困难。
其中最大的困难是在实际项目中与客户进行沟通与反馈，因为客户对于网页设计与制作可能存在一些不了解或误解。
但通过与客户的不断沟通与解释，我最终成功理解并满足了客户的需求。
网页设计与制作实训报告
《网页设计与制作》课程设计报告书设计题目：工作室或公司网站设计起止日期： 2013.12.23-2013.12.27目录一、关于网站 (3)1、网站的主题 (3)2.网站材料 (4)二、网站的规划设计 (5)1.网站的功能定位 (5)2.站点的内容 (5)3.站点的风格 (5)4.网站功能模块图 (6)三．网站技术解决方案 (6)1、网站的制作工具 (6)2、所用技术 (7)四．网页介绍 (7)1、制作网站的网页 (7)2.第二层展示 (8)3.动漫排行榜展示 (9)4.第三层展示 (10)5.关于短片的插入： (13)五. 关于我们： (14)六．实训总结： (14)一、关于网站1、网站的主题我的网站的主旨在于从各个方面全面的介绍动漫，展示动漫产品以及漫画，包括有动漫排行榜，小短片，另外，网站里还有漫画，以及周边产品。
建立一个展示动漫的平台。
同时，网站里的每一个网页都有统一的风格，每一个网页的主题都是图片加上文字介绍，用以展示自己性格的效果。
最重要的是做出自己的风格，给浏览者好的欣赏感受。
动漫，是动画和漫画的合称与缩写，取这两个词的第一个字合二为一称之为“动漫”。
现可考证，该词语出处为1993年创办的动漫出版同业协进会与1998年创刊的动漫资讯类类月刊《动漫时代（Anime Comic Time）》，后经由漫友杂志传开，因概括性强在大陆地区的使用开始普及起来。
在中国以外，并没有此种说法。
国外习惯性将动画（anime）、漫画（comic）、游戏（game）三者合称作ACG，或加上轻小说（novel）合称为ACGN。
由于漫画本身的发展形成了现代故事漫画的表现形式，将影视艺术融入漫画之中，使得漫画与动画更容易结合，影视艺术独特的地方在于它能通过镜头的推拉摇移和片段剪辑的蒙太奇技巧来表达想法和感受。
漫画正是吸收了影视艺术的这两个特点。
当要讲述的故事越发复杂、人物越发丰富的时候，用传统单线式叙事的方法就越行不通，蒙太奇的介入就成为一种需要了；当漫画家在传统表现手段中无法找到更合适的抒发感情的方法的时候；当读者需要作品有更强的冲击力和表现力的时候，各种镜头的灵活运用就成为一种必需了。
网页设计与制作课程设计
网页设计与制作课程设计随着科技的飞速发展，互联网已经深入人们的工作、生活中。
网站作为网络的基本单元，已经成为各个领域中不可或缺的一部分。
因此，学习网页设计和制作技能是非常有必要的。
本文档将介绍网页设计与制作课程设计。
课程名称网页设计与制作课程概述本课程主要介绍网页设计与制作的基本知识和技能。
学生将学会使用HTML、CSS和JavaScript等技术开发网站。
在课程中，学生将编写、调试并测试网站的代码，了解并掌握如何创造简洁、美观、易于使用的界面。
课程目标1.掌握网页设计的基本知识和技能，包括HTML、CSS和JavaScript等相关技术2.能够设计和制作简单的网站，包括静态页面和动态页面3.能够熟练使用常见的网页开发工具和调试工具4.能够分析和解决网站开发过程中的常见问题课程内容第一周：HTML基础•学习HTML的基本知识和语法规则•了解HTML标签的基本分类和用法•编写HTML文档，包括文本、图像等第二周：CSS基础•学习CSS的基本知识和语法规则•了解CSS样式的基本分类和用法•能够为网页添加样式第三周：JavaScript基础•学习JavaScript的基本知识和语法规则•了解JavaScript变量、函数和循环等基础概念•能够编写简单的JavaScript代码第四周：网页布局与设计•学习网页布局和设计的基本原则•了解网页设计的基本要素，包括颜色、字体、排版等•能够为网站添加简单的布局和设计第五周：响应式网页设计•学习响应式网页设计的基本概念和原理•了解响应式网页设计的常见技术和工具•能够为网站添加响应式布局第六周：实践项目•结合前面所学的知识，实现一个完整的项目•分析并解决在项目实践过程中出现的问题•熟悉网站开发的整个流程，掌握网站制作的基本方法和技巧授课方式本课程采用面授和实践相结合的教学方式。
面授环节将主要讲授相关的理论知识和技术实践，实践环节将针对每个章节的内容，为学生提供相应的练习项目，并在实践过程中进行指导和解答。
网页设计与制作教程第四版课程设计
网页设计与制作教程第四版课程设计1. 课程简介本课程旨在通过实际的网页设计与制作案例，帮助学生掌握相关的HTML、CSS、JavaScript等技术。
同时，通过对网站性能和用户体验的分析和优化，提高学生对网站设计的认识和理解，从而能够独立完成一个高质量的网站。
2. 完成的任务本课程的任务是要求学生根据所学知识和实践经验，完成一个具有以下功能的网站：1.首页：展示网站的主题和特色，为用户提供一个友好的访问界面。
2.产品分类：通过分类展示不同的产品，方便用户查找目标商品。
3.产品展示：展示商品的详细信息，为用户提供商品的完整信息。
4.购物车：支持用户添加和删除商品，以及修改商品数量。
5.用户注册/登录：支持用户注册并登录后进行购物。
3. 设计思路3.1 网站整体布局在整体布局设计中，需要考虑导航栏、页脚、头部搜索栏等基本元素，尽量避免子网页过多并统一样式和色彩，从而提高用户的使用流畅性和体验。
3.2 首页设计首页作为网站的门面和展示重点，要注重页面的美观与实用性，同时还要提供让用户深入了解企业信息的介绍内容和功能。
3.3 分类模块设计分类模块是最常用的功能之一，需要考虑视觉效果和用户需求的平衡，支持商品的多角度分类查找，以及提供筛选功能。
3.4 产品展示设计产品展示页面是展示商品信息和完成购买的重要页面，需要结构清晰，内容丰富，功能齐全。
其中，页面布局、图片和文字等方面的处理都应该切实满足用户需求。
3.5 购物车设计购物车页面需要结构简单且易于使用，支持用户添加/删除商品和修改商品数量的实时更新。
3.6 用户注册/登录设计用户注册和登录模块是用户进行购物的关键步骤，需要设计清晰明了，方便用户操作。
同时还需要支持密码找回和修改等功能。
4. 实现过程我们可以使用现有的框架和工具来实现这个网站，例如使用Bootstrap或者LayUI框架来构建页面的布局和样式，同时使用PHP语言来编写和连接数据库。
4.1 HTML+CSS实现HTML5和CSS3可以实现丰富的动态效果，同时也支持响应式布局和多设备适配，因此可大大提高网站的用户体验和性能。
网页设计与制作实验报告
学号：2010215210420题目网页设计与制作学院计算机科学与技术学院专业计算机应用班级1004姓名李俊清指导教师丁一2012年6月10日实验一：网页设计html一、实验目的1．掌握常用的HTML语言标记。
2．利用文本编辑器建立HTML文档，制作简单网页。
3．掌握网页制作功能的使用。
二、实验内容1．熟悉制作网页的基本方法。
2．掌握网页文件的基本操作；页面属性的设置；文本的插入和格式设置3．建立一个网站。
三、实验步骤1．在E:盘上建立一个文件夹如myweb作为自己的web站点根目录，在文本编辑器EditPlus 中输入如下的HTML代码程序，保存为以.htm或.html为后缀的文件如index.htm作为自己的第一个页面，并在浏览器中运行。
<html><head><title>我的第一个网页</title></head><body><h1>欢迎访问我的网站。
</h1><h3>欢迎访问我的网站。
</h3><h5>欢迎访问我的网站。
</h5></body></html>2.在标记中分别加入以下属性，看看index.htm有什么变化。
bgcolor=#背景颜色#=rrggbb(16进制的RGB值)或颜色名称background=#背景图像#=image-URL(图片所在路径)text=#非可链接文字的色彩bgproperties=FIXED背景图像不动<html><head><title>我的第一个网页</title></head><body bgcolor="#CCCCFF" text="#993366"><h1 align="center">欢迎访问我的网站。
网页制作课程设计报告完整版
《网站制作》课程设计系别：信息技术系专业：班级：姓名：学号：指导老师：李枫完成日期：2015年07月9日目录《网站制作》课程设计 (1)目录 (2)一、设计任务与要求 (3)课设目的 (3)课设内容 (3)具体要求 (3)设计环境 (3)二、设计方案 (3)三．实现过程 (3)四、心得体会 (17)五、参考资料 (18)六、附录 (19)1、网站效果图 (19)2、网站中各网页屏幕截图 (19)一、设计任务与要求课设目的1、复习巩固网站设计与制作的基础知识：HTML、CSS和JS，进一步加深对Photoshop制作网页效果图、Dreamweaver布局网页等技术的理解和掌握，培养学生策划和制作商业网站的实践能力。
2、训练和培养学生获取信息和处理信息的能力，充分培养和提高学生的动手能力，学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、音视频资料、flash动画和网页特效等，提高学生的美工设计能力。
3、课程设计为学生提供了一个既动手又动脑，独立实践的机会，将课本上的理论知识和实际有机的结合起来，锻炼学生的分析解决实际问题的能力。
课设内容针对目前互联网上的网站制作背景和需求，策划、设计与制作一个完整的商业网站。
具体网页的内容自拟，但以下网站主题可供参考、选择：1、图书销售网站2、学校网站3、旅游网站4、摄影网站5、公司宣传网站6、驾校网站7、精品课程网站8、婚庆网站9、团购网站10、政府网站……具体要求1、动手制作网页之前：必须认真做好网站的需求分析，包括市场调查，定位网站目的，策划好网站的主题及功能定位，创意出网站的风格和亮点，确定网页色彩基调。
图1 网站结构图 规划好网站的风格和结构，网站主要内容及板块，各板块的具体内容及功能。
分析出“网站层次结构图”、 “网页版面设计”，以及“网站策划方案”。
2、创建完善的目录结构：站点文件夹采用英文单词命名，站点文件夹中所包含文件夹：images （存放图片文件）flash （存放动画文件）css （存放CSS 样式表文件）js （存放JS 脚本文件）other （存放其它文件）源文件 （存放自己设计的PS 源文件、Flash 源文件）首页命名为index.html ，其余文件全部用英文命名3、制作网页前，收集好所需的文字资料、图像资料、网页特效。
网设计与制作说课软件技术省公开课金奖全国赛课一等奖微课获奖PPT课件
六 课程特色
特色： 教学观念先进，突出应用能力培养。 本课程本着理论够用、实践加强标准，突出应用能力培养。适时调 整教学内容，保持与Web技术发展同时。改革考评方式，重视学生 学习过程。
25/30
创新点：
1、在学习当中，注意引导学生取得美熏陶，提升审美能力。 2、强调技术与艺术融合，将网页作品看成一份含有生命力 艺术品。 3、 以真实网站作为教学案例，让学生在真实工作环境中训 技能，提升学生适应岗位需求能力。 4、 虚拟项目设计考评模式。，给学生一些虚拟项目作为课程 设计，培养学生单独规范做项目标能力及网站设计综合能力， 也让学生找工作时能够向用人单位提供一个完整网站设计作品
4/30
1.2 本课程与先修课程后续课程衔接和配合
《网页设计与制作》课程在第三学期开设，共40课时（理论20课时， 实践20课时），教学工作集中在1~2周完成，第5周20课时项目实训。 作为一门专业基础课，该课程可为后续课程提供静态网页设计与制作 理论基础和操作技能。它与计算机应用基础、数据库及动态网页编程 等课程亲密相关。其中《计算机应用基础》为本课程先导课程，而 《Javascript》及《XML及应用》等课程是本课程后续课程。总之， 本课程学习有利于学生深入学习计算机类相关专业其它知识和提升职 业技能，完善学生专业知识结构，提升学生从事实际工作综合素质
7/30
技能与素质目标 培养学生搜集、处理信息，准备、加工素材能力 培养学生制作静态网页能力 培养学生设计网站综合能力 培养学生策划能力、色彩感悟能力、结构布局能力和想象力 训练和培养学生获取信息和处理信息能力，充分培养和提升学生动手
能力，学会经过网站、书籍、素材光盘等方式搜集所需文字资料、图 像资料、Flash动画和网页特效等 培养学生利用所学理论知识和技能处理网站开发过程中所碰到实际问 题能力及其基本工作素质
网页设计与制作实验报告
实验报告学号: 0701********专业: 计算机科学与技术班级：07计科2班姓名: 张兆民题目: 网页设计与制作指导教师:郭胜设计时间：2010年12月14日目录一课程设计目的 ............................................二、课程设计题目 (2)三、课程设计要求 (2)四、需求分析 (2)五、源代码及截图 (2)六、参考资料 (25)七、设计总结 (25)实验内容一、课程设计的目的本课程的设计目的是通过实践使同学们对技术有个全面的了解，通过这次综合训练，以便能较全面地理解、掌握和综合运用所学的知识。
结合具体的开发案例，理解并初步掌握运用Visual Studio 2005 开发工具进行网页开发的方法；了解网页设计制作过程。
了解和熟悉网页设计的基础知识和实现技巧。
根据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。
二、课程设计题目网页设计与制作——登陆系统三、课程设计要求根据所选择的主题，设计相关的网页，要求用技术做网页。
要求连数据库，实现基本功能。
四、需求分析选定主题，确定题目之后，在做整个网站之前对网站进行需求分析。
首先，做好需求调研。
调研的主要方式是在图书馆里翻阅相关书籍。
调研内容如下：1、网站当前以及日后可能出现的功能需求。
2、对网站的性能（如访问速度）的要求和可靠性的要求。
3、确定网站维护的要求。
4、网站的实际运行环境。
5、网站页面总体风格以及美工效果。
6、主页面和次级页面数量等。
7、内容管理及录入任务的分配。
8、项目完成时间及进度。
然后，调研结束之后对整个网站进行功能描述，并对网站进行总体规划，接着逐步细化。
五、网站源代码（1）登录界面：前台设计代码：Login.aspx<%@Page Language="C#"AutoEventWireup="true"CodeFile="login.aspx.cs"Inherits="login" %><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head runat="server"><title>无标题页</title><script language="javascript"type="text/javascript">// <!CDATA[function TABLE1_onclick() {}// ]]></script></head><body><form id="form1"runat="server"><div><div style="text-align: center"><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><table border="1"cellpadding="1"cellspacing="1"style="border-right: #ff0099 thick double; border-top: #ff0099 thick double; border-left: #ff0099 thick double; border-bottom: #ff0099 thick double"id="TABLE1"onclick="return TABLE1_onclick()"><tr><td colspan="3"style="background-image: url(img/0.jpg); background-color: #ffff66; height: 71px;"><br/><span style="color: #0000ff">设计者：张兆民<br/><strong><span style="font-size: 16pt; color: #ff0000;"></span></strong></span><br/><br/><br/><br/><br/> <asp:Label ID="Label1"runat="server"Font-Bold="True" Font-Size="X-Large"ForeColor="Red"Text="输入密码和用户名"></asp:Label> <br/></td></tr><tr><td colspan="3"style="height: 23px"><span style="color: #ffff00"><span style="color: #0000ff"> 用户登陆</span></span> <asp:TextBox ID="txtUser"runat="server"Width="143px"></asp:TextBox></td></tr><tr><td colspan="3"><span style="color: #0000cc">用户密码</span> <asp:TextBox ID="txtPass"runat="server"TextMode="Password"Width="129px"></asp:TextBox></td></tr><tr><td colspan="3"> .<asp:Button ID="Button1"runat="server"Text="注册"OnClick="Button1_Click"ForeColor="Red"/> <asp:Button ID="Button2"runat="server"OnClick="Button2_Click"Text="登陆"ForeColor="Red"/> <asp:Button ID="Button3"runat="server"Text="重置"OnClick="Button3_Click"ForeColor="Red"/></td> </tr><tr><td colspan="3"style="text-align: center; height: 99px; background-color: #ccffff;"><strong><span style="font-size: 32pt; color: #ff0000">员工管理系统</span></strong></td></tr></table><br/><br/></div></div></form></body></html>后台功能代码：Login.aspx.csusing System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partial class login : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){}protected void Button2_Click(object sender, EventArgs e){string username = txtUser.Text.Trim();string pwd = txtPass.Text.Trim();if (username == "张兆民" && pwd == "123456")Response.Redirect("succeed.aspx?uid="+txtUser.Text+"&txtPass="+txtPass.Text+"&txtUser="+txtU ser.Text);else{Label1.Text = "用户名或者密码有误！请重新输入！";}}protected void Button3_Click(object sender, EventArgs e){txtUser.Text = "";txtPass.Text = "";}protected void Button1_Click(object sender, EventArgs e){Response.Redirect("Default.aspx");}}截图：（2）新用户注册表界面：前台设计代码：Default.aspx<%@Page Language="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head runat="server"><title>无标题页</title><script language="javascript"type="text/javascript">// <!CDATA[// ]]></script></head><body style="background-color: #ffffff"><form id="form1"runat="server"><div><div style="text-align: center; border-top-style: double; border-right-style: double; border-left-style: double; border-bottom-style: double;"><br/><br/><br/><br/><table style="border-left-color: #66ff66; border-bottom-color: #66ff66;border-top-style: solid; border-top-color: #66ff66; border-right-style: solid;border-left-style: solid; border-right-color: #66ff66; border-bottom-style: solid; text-align: left;"id="TABLE1"onclick="return TABLE1_onclick()"><tr><td style="width: 191px"></td><td style="width: 468px; text-align: justify;"> <span style="color: #ff00ff"> <br/><strong> 新用户注册表</strong> <br/></span></td></tr><tr><td colspan="2"style="border-left-color: #ffccff; border-bottom-color: #ffccff;border-top-style: double; border-top-color: #ffccff;border-right-style: double;border-left-style: double; height: 28px; text-align: left;border-right-color: #ffccff;border-bottom-style: double"><asp:Label ID="Label2"runat="server"Text="请输入您的用户名"></asp:Label></td></tr><tr><td colspan="2"style="border-left-color: #ffccff; border-bottom-color: #ffccff;border-top-style: double; border-top-color: #ffccff;border-right-style: double;border-left-style: double; height: 64px; text-align: left;border-right-color: #ffccff;border-bottom-style: double"><strong style="border-left-color: #ffccff; border-bottom-color:#ffccff; border-top-color: #ffccff; border-right-color: #ffccff"> *用户名 </strong><asp:TextBox ID="userName"runat="server"style="border-left-color: #ff0066; border-bottom-color: #ff0066; border-top-style: dashed; border-top-color: #ff0066; border-right-style: dashed; border-left-style: dashed; border-right-color: #ff0066;border-bottom-style: dashed"></asp:TextBox><br/></td></tr><tr><td style="border-left-color: #ffccff; border-bottom-color: #ffccff; border-top-style: double; border-top-color: #ffccff; border-right-style: double;border-left-style: double; height: 22px; border-right-color: #ffccff; border-bottom-style: double; text-align: left;"colspan="2"><asp:Label ID="Label3"runat="server"Text="请填写安全密码"></asp:Label></td></tr><tr><td colspan="2"style="border-left-color: #ffccff; border-bottom-color: #ffccff;border-top-style: double; border-top-color: #ffccff;border-right-style: double;border-left-style: double; height: 61px; text-align: left;border-right-color: #ffccff;border-bottom-style: double"><strong style="border-left-color: #ffccff; border-bottom-color:#ffccff; border-top-color: #ffccff; border-right-color: #ffccff"><br/> *登陆密码 </strong><asp:TextBox ID="Pwd"runat="server"style="border-left-color: #ff0066; border-bottom-color: #ff0066; border-top-style: dashed; border-top-color: #ff0066;border-right-style: dashed; border-left-style: dashed; border-right-color: #ff0066;border-bottom-style: dashed"TextMode="Password"></asp:TextBox></td></tr><tr><td colspan="2"style="height: 22px; text-align: justify"><strong style="border-left-color: #ffccff; border-bottom-color:#ffccff; border-top-color: #ffccff; border-right-color: #ffccff"> *性别</strong> <asp:RadioButton ID="male"runat="server"Checked="True"GroupName="male"Text="男"/> <label for=male></label> <asp:RadioButton ID="female"runat="server"GroupName="male"Text="女"/></td></tr><tr><td style="text-align: justify; height: 26px;"colspan="2"><strong style="border-left-color: #ffccff; border-bottom-color:#ffccff; border-top-color: #ffccff; border-right-color: #ffccff"> *真实姓名 </strong><asp:TextBox ID="RealName"runat="server"style="border-left-color:#ff0066; border-bottom-color: #ff0066; border-top-style: dashed; border-top-color: #ff0066; border-right-style: dashed; border-left-style: dashed; border-right-color: #ff0066;border-bottom-style: dashed"></asp:TextBox></td></tr><tr><td style="border-left-color: #ffccff; border-bottom-color: #ffccff; border-top-style: double; border-top-color: #ffccff; border-right-style: double;border-left-style: double; text-align: center; border-right-color: #ffccff; border-bottom-style: double;"colspan="2"rowspan="3"> <br/> 留言板 <br/><br/><asp:TextBox ID="TextBox1"runat="server"Height="80px"Width="250px"></asp:TextBox><br/><br/><asp:CheckBox ID="agree"runat="server"Text="我已经看过并同意（服务条款）"/><br/><br/> <asp:Button ID="Button1"runat="server"OnClick="Button1_Click"Text="提交"/></td></tr><tr></tr><tr></tr><tr><td colspan="2"style="background-color: transparent"><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/></td></tr><tr><td style="width: 191px"></td><td style="width: 468px"></td></tr></table></div></div></form></body></html>后台功能代码：Default.aspx.csusing System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partial class_Default : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){}protected void male_CheckedChanged(object sender, EventArgs e) {}protected void Button1_Click(object sender, EventArgs e){string sex = "";if (female.Checked){sex = "女";}else{sex = "男";}if (agree.Checked){Response.Redirect("shopperson_Info.aspx?uid="+ userName.Text + "&pwd="+ Pwd.Text + "&sex=" + sex + "&realname=" + RealName.Text);}else{Response.Write("<script language='javascript'>alert('由于您不同意我们的《服务条款》注册失败！'</script>)");}}}截图：（3）注册成功界面：前台设计代码：ShopPerson_Info.aspx<%@Page Language="C#"AutoEventWireup="true"CodeFile="ShopPerson_Info.aspx.cs"Inherits="ShopPerson_Info" %><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head runat="server"><title>无标题页</title></head><body><form id="form1"runat="server"><div style="text-align: center"><br/><br/><br/><br/><br/><table style="border-left-color: #ff0066; border-bottom-color: #ff0066;border-top-style: double; border-top-color: #ff0066; border-right-style: double;border-left-style: double; border-right-color: #ff0066; border-bottom-style: double"> <tr><td colspan="2"style="text-align: left"><br/><br/><span style="font-size: 24pt"> </span><strong><span style="border-left-color: #ffccff; border-bottom-color:#ffccff; color: #ff0066;border-top-style: solid; border-top-color: #ffccff; border-right-style: solid;border-left-style: solid; border-right-color: #ffccff;border-bottom-style: solid"><span style="font-size: 24pt; border-left-color: #ffccff;border-bottom-color: #ffccff;border-top-style: solid; border-top-color: #ffccff;border-right-style: solid;border-left-style: solid; border-right-color: #ffccff;border-bottom-style: solid">恭喜您注册成功！</span><br/><br/><br/><br/></span></strong></td></tr><tr><td style="width: 90px; text-align: left; border-left-color: #ffccff;border-bottom-color: #ffccff; border-top-style: solid; border-top-color: #ffccff;border-right-style: solid; border-left-style: solid; border-right-color: #ffccff;border-bottom-style: solid;"><br/><strong> *用户名<br/></strong></td><td style="width: 374px; border-left-color: #ffccff; border-bottom-color:#ffccff; border-top-style: double; border-top-color: #ffccff; border-right-style: double; border-left-style: double; border-right-color: #ffccff; border-bottom-style: double;"><asp:Label ID="Label1"runat="server"Text="Label"></asp:Label></td> </tr><tr><td style="width: 90px; text-align: left; border-left-color: #ffccff;border-bottom-color: #ffccff; border-top-style: solid; border-top-color: #ffccff;border-right-style: solid; border-left-style: solid; height: 59px; border-right-color: #ffccff; border-bottom-style: solid;"><br/><strong> *登陆密码<br/></strong></td><td style="width: 374px; border-left-color: #ffccff; border-bottom-color:#ffccff; border-top-style: solid; border-top-color: #ffccff; border-right-style: solid; border-left-style: solid; height: 59px; border-right-color: #ffccff; border-bottom-style: solid;"><asp:Label ID="Label2"runat="server"Text="Label"></asp:Label></td> </tr><tr><td style="width: 90px; text-align: left; border-left-color: #ffccff;border-bottom-color: #ffccff; border-top-style: solid; border-top-color: #ffccff;border-right-style: solid; border-left-style: solid; border-right-color: #ffccff;border-bottom-style: solid;"><br/><strong> *性 别<br/></strong></td><td style="width: 374px; border-left-color: #ffccff; border-bottom-color:#ffccff; border-top-style: solid; border-top-color: #ffccff; border-right-style: solid; border-left-style: solid; border-right-color: #ffccff; border-bottom-style: solid;"><asp:Label ID="Label3"runat="server"Text="Label"></asp:Label></td> </tr><tr><td style="width: 90px; height: 21px; text-align: left; border-left-color: #ffccff; border-bottom-color: #ffccff; border-top-style: solid; border-top-color: #ffccff; border-right-style: solid; border-left-style: solid; border-right-color: #ffccff;border-bottom-style: solid;"><br/><strong> *真实姓名<br/></strong></td><td style="width: 374px; height: 21px; border-left-color: #ffccff;border-bottom-color: #ffccff; border-top-style: double; border-top-color: #ffccff;border-right-style: double; border-left-style: double; border-right-color: #ffccff;border-bottom-style: double;"><asp:Label ID="Label4"runat="server"Text="Label"></asp:Label></td> </tr><tr><td colspan="2"rowspan="2"style="border-left-color: #ffccff;border-bottom-color: #ffccff;border-top-style: solid; border-top-color: #ffccff; border-right-style: solid;border-left-style: solid; text-align: center; border-right-color: #ffccff; border-bottom-style: solid"><br/><br/><asp:Button ID="Button1"runat="server"OnClick="Button1_Click"Text="登陆"/> <br/></td></tr><tr></tr></table></div></form></body></html>后台功能代码：ShopPerson_Info.aspx.csusing System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partial class ShopPerson_Info : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){this.ClientScript.RegisterStartupScript(this.GetType(), "", "<script>alert('注册成功！')</script>");try{Label1.Text = Request.QueryString["uid"].ToString();Label2.Text = Request.QueryString["pwd"].ToString();Label3.Text = Request.QueryString["sex"].ToString();Label4.Text = Request.QueryString["realname"].ToString();}catch{}}protected void Button1_Click(object sender, EventArgs e){Response.Redirect("login.aspx");}}截图：（4）显示姓名界面：前台设计代码：Sousou.aspx<%@Page Language="C#"AutoEventWireup="true"CodeFile="Sousou.aspx.cs"Inherits="Sousou" %><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head runat="server"><title>无标题页</title></head><body><form id="form1"runat="server"><div style="text-align: center"><br/><br/><br/><br/><br/><br/><br/><br/><table border="1"cellpadding="1"cellspacing="1"style="border-left-color: lime;border-bottom-color: lime; border-top-style: double; border-top-color: lime;border-right-style: double; border-left-style: double; text-align: center; border-right-color: lime;border-bottom-style: double"><tr><td style="width: 283px; height: 139px"></td><td style="width: 265px; height: 139px"><br/><br/><br/><br/><br/> <br/></td><td style="width: 210px; height: 139px"></td></tr><tr><td colspan="3"style="height: 51px; text-align: center">尊敬的用户！恭喜您！登陆成功！</td></tr><tr><td colspan="3"style="height: 18px; text-align: center"></td></tr><tr><td colspan="3"style="height: 26px; text-align: center">姓名：<asp:TextBox ID="TextBox1"runat="server"></asp:TextBox> <asp:Button ID="Search_button"runat="server"Text="搜索"/></td> </tr><tr><td colspan="3"style="height: 99px; text-align: center"> <asp:GridView ID="GridView1"runat="server" AutoGenerateColumns="False"DataSourceID="AccessDataSource2"><Columns><asp:BoundField DataField="name"HeaderText="姓名"SortExpression="name"/></Columns></asp:GridView><asp:AccessDataSource ID="AccessDataSource2"runat="server"DataFile="~/App_Data/ProductShow.mdb"SelectCommand="SELECT [name] FROM [name] ORDER BY [name], [编号] DESC, [编号]"></asp:AccessDataSource></td></tr></table></div></form></body></html>后台功能代码：Sousou.aspx.csusing System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partial class Sousou : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){}private void DataBindgv(){DBAccess db = new DBAccess();DataSet ds = db.Getds();}protected void Search_button_Click(object sender, EventArgs e){Response.Redirect("Sousou.aspx");string strField = TextBox1.Text.ToString().Trim();string StrSql = "select * from Product_img where name='" + strField + "'";DBAccess db = new DBAccess();DataSet ds = db.Gets(StrSql);}}截图：（5）登录成功界面前台设计代码：Succeed.aspx<%@Page Language="C#"AutoEventWireup="true"CodeFile="succeed.aspx.cs"Inherits="succeed"%> <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"。
网页设计与制作报告(优秀3篇)
网页设计与制作报告（优秀3篇）（经典版）编制人：__________________审核人：__________________审批人：__________________编制单位：__________________编制时间：____年____月____日序言下载提示：该文档是本店铺精心编制而成的，希望大家下载后，能够帮助大家解决实际问题。
文档下载后可定制修改，请根据实际需要进行调整和使用，谢谢!并且，本店铺为大家提供各种类型的经典范文，如总结报告、心得体会、应急预案、演讲致辞、合同协议、规章制度、条据文书、教学资料、作文大全、其他范文等等，想了解不同范文格式和写法，敬请关注!Download tips: This document is carefully compiled by this editor. I hope that after you download it, it can help you solve practical problems. The document can be customized and modified after downloading, please adjust and use it according to actual needs, thank you!Moreover, our store provides various types of classic sample essays, such as summary reports, insights, emergency plans, speeches, contract agreements, rules and regulations, documents, teaching materials, complete essays, and other sample essays. If you would like to learn about different sample formats and writing methods, please pay attention!网页设计与制作报告（优秀3篇）在人们越来越注重自身素养的今天，越来越多的事务都会使用到报告，不同的报告内容同样也是不同的。
《网页设计与制作》项目化课程整体教学设计
发挥作用 ） ； 培养学生的创新思维能力 、 艺
术鉴赏能力和实际应变能力（ 根 据用 户 需
先 导 课是 《 计算 机基 础 》 、 《 网 络 互 联 技
术》 ， 平行 课有 《 多媒 体 技 术 与 应 用 》 、 《 数 据库 技术 》 ， 后续 课程有 《 动 态 网站 设 计 》 （ （ ＷＥ Ｂ应 用 开 发 》 。本 课 程 作 为 计 算 机 应 用技 术专业的一门主干专业课程 ， 一 般 在 ２年 级 开 设 ， 此时学生 已经具备一定 的计
后以是否通过验收来进行考核。
三、 课 程 口头 布 置 任 务 时 有 相 应记 录并 依 据 其进 行工 作 ， 最 后 参 照任 务 要求进行 测试 ） 的工 作 态 度 ； 能够 养成认 真、 严谨 、 踏实的工作习惯（ 根 据 用 户 需求 和任务要求进行方案制定和实施 ， 能 够解 决 问 题 使 得 系 统 满 足需 求 ， 编 写 网 站 策划
１ 、 能 力 目标 。 通 过 完 成 项 目 ， 使 得 学
生： 能 够 进 行 项 目需 求 分 析 ， 了 解 项 目业 务 背 景 ；能 根 据 项 目业 务 背 景 的不 同 ， 确 定 项 目需 要 实 现 的 功 能 ； 能 根 据 项 目需 求 对素材进 行收 集 、 整理与 处理 ； 能 根 据 项 目需 求 风 格 ， 设计 网站页 面 ； 能 根 据 客 户
Ｆ ｔ ｚ ｔ ｕ ｒ ｅ ａ Ｊ ｅ ａ￣ ｔ
燕 蔼 敦 璃
《 网页设计与制作》 项 目化课程整体教学设计
口 北 京市 应用 高级 技 工学 校
摘 要 ： 本 文针 对中职计算机 应用技术专业的
《网页设计与制作》课程标准
《网页设计与制作》课程标准适用专业：计算机专业学时： 72课时1、课程定位和课程设计《网页设计与制作》课程是中职计算机相关专业的一门专业必修课程。
本课程以图形图像处理为前导课程，本课程将从职业技术教育的特点出发，以培养学生实际动手能力为目标，使学生具备网页制作、网站规划与网站维护的专业能力和方法能力，以及培养学生的团队协作、沟通表达、工作责任心、职业规范和职业道德等综合素质和能力。
作为专业的核心主干课程，使学生掌握商业网站的开发和流程，并能独立进行操作，在就业时能够成为一个合格的人才。
学生毕业后可胜任网站管理员、网页设计员、网页美工员等工作岗位。
2、课程目标本课程以学生能够网页网站开发与维护的实际工作能力为学习目标，使学生具备计算机及其它相关专业课学习和应用中所必需的网页制作与网站设计的基本知识和基本技能，形成解决实际应用问题的方法能力，为以后的学习动态网页设计课程打下基础。
1、素质目标(1) 培养具有较强的网页设计创意思维、艺术设计素质；(2) 培养学生在学习过程中解决困难的能力；(3) 培养学生在学习过程中培养兴趣的能力，提高工作、学习的主动性；(4) 培养学生理论联系实际的工作和学生方法；(5) 培养具有高度责任心和良好的团队合作精神；(6) 具有社会责任感。
2、知识目标(1) 了解WEB站点的工作原理；(2) 理解Internet、WWW、HTTP、HTML的定义，计算机网络概念和作用；(3) 了解服务器、客户端、浏览器的概念和作用；(4) 掌握常规网站的规划及流程；(5) 熟练掌握HTML语言中各种标记符的运用能力；(6) 熟练掌握Dreamweaver应用软件的使用；(7) 理解网页中脚本语言的使用方法；(8) 熟练开发常规静态网站。
3、能力目标(1) 熟练掌握Dreamweaver应用软件制作网站及网页；(2) 熟练掌握使用绝对和相对URL，创建超链接，图像链接；(3) 掌握在网页中添加CSS的方法；(4) 培养学生设计、制作和维护动态网站。
网页设计与制作实训报告
网页设计与制作实训报告一.实训意义：网页设计与制作综合实训是教学过程中重要的实践性教学环节.它是根据专业教学计划的要求.在教师的指导下对学生进行网页制作专业技能的训练,培养学生综合运用理论知识分析和解决实际问题的能力, 实现由理论知识向操作技能的培养过程.因此加强实践教学环节,搞好实训教学,对实现本专业的培养目标,提高学生的综合素质有着重要的作用.二.实训目的:1. 通过综合实训进一步巩固,深化和加强学生的理论知识于专业技能。
(1) 掌握规划网站的内容结构,目录结构,链接结构的方法。
(2) 熟练掌握网页制作软件Dreamweaver8和基本操作和使用技能。
(3) 掌握页面的整体控制和头部内容设置的方法。
(4) 熟练掌握网页页面布局的各种方法。
(5) 熟练掌握在网页中输入,设置标题和正文文字的方法。
(6) 熟练掌握在网页中插入图像,Flash动画和背景音乐的方法。
(7) 熟练建立各种形式的超级链接的方法。
(8) 掌握表单网页制作方法。
(9) 掌握网页特效制作方法。
(10) 掌握网站测试的方法。
2. 训练和培养学生获取信息和处理信息的能力,充分培养和提高学生的动手能力,学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、Flash动画和网页特效等。
3. 培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及基本工作素质。
4. 培养学生理论联系实际的工作作风,严肃认真的科学态度以及独立工作的能力,树立自信心。
网页设计跟学习别的东西一样，也需要兴趣，所谓的兴趣也不是三分钟热度是一种执著。
学习网页设计需要耐心，如果没有耐心，就学不好网页设计，应为当你碰到一个问题时，如果不能立刻得到问题的答案，你可能需要很长时间去解决，我就碰到过一个问题，用了很长时间才解决。
学习网页设计需要坚持，坚持不断的学习，因为设计网页的软件在不断的更新，因此我们要不断的学习并且学习网页设计不要掉入技术的陷阱，如果你的网页设计技术一流，并且对软件的掌握程度已经达到一定水平，但是你设计的网页确不堪目睹，这是因为网页设计是介于平面设计和编程技术两者之间的"边缘科学."不仅涉及到美学,心理学,平面构成,色彩搭配等平面设计的方面的知识,还涉及到html,javascript,css,asp,php等编程语言技术方面的知识.只有综合运用多种知识,才能设计出视听特效,动感十足,富于个性的web页面,才能全面展现互联网这一新型媒体的独特魅力和多维空间的超强功能.并且我认为网页设计应该注重实用性，因为它是让人浏览的，是用户可以抚摸，可以评论，可以交互的。
《网页设计与制作》课程教案
《网页设计与制作》课程教案一、教学目标1. 了解网页设计与制作的基本概念和流程。
2. 掌握HTML、CSS和JavaScript的基本语法和应用。
3. 学会使用网页设计软件进行网页布局和美观设计。
4. 能够独立设计并制作一个简单的网页。
二、教学内容1. 网页设计与制作的基本概念和流程。
2. HTML的基本语法和使用方法。
3. CSS的基本语法和使用方法。
4. JavaScript的基本语法和使用方法。
5. 网页设计软件的使用方法和技巧。
三、教学方法1. 讲授法：讲解网页设计与制作的基本概念和流程，HTML、CSS和JavaScript 的基本语法和使用方法。
2. 示范法：通过实际操作演示如何使用网页设计软件进行网页布局和美观设计。
3. 练习法：学生跟随教师的步骤进行实际操作练习，巩固所学知识。
4. 互助法：学生之间相互讨论和帮助，解决学习中遇到的问题。
四、教学准备1. 教室环境：安装有网页设计软件的计算机。
2. 教学材料：教案、PPT、网页设计软件教程。
3. 网络环境：学生可以访问互联网，查找相关资料。
五、教学过程1. 导入：通过展示一些精美的网页，引起学生对网页设计与制作的兴趣。
2. 讲解：讲解网页设计与制作的基本概念和流程，HTML、CSS和JavaScript 的基本语法和使用方法。
3. 示范：教师使用网页设计软件进行网页布局和美观设计的实际操作演示。
4. 练习：学生跟随教师的步骤进行实际操作练习，巩固所学知识。
5. 讨论：学生之间相互讨论和帮助，解决学习中遇到的问题。
7. 作业：布置相关的练习题目，让学生课后巩固所学知识。
六、教学评估1. 课堂参与度：观察学生在课堂上的积极参与程度，提问和回答问题的积极性。
2. 练习完成情况：检查学生完成练习的情况，包括正确性和完整性。
3. 作业质量：评估学生作业的质量，包括对知识的掌握程度和创意性。
4. 同伴评价：学生之间相互评价对方的作品，提供反馈和建议。
《网页设计与制作》标准实验报告
网页设计与制作实验报告姓名：弋文君专业：市场营销班级：2010级2班学号：201007440412012-2013学年第二学期经济与管理学院实验名称：表格应用指导教师:_________实验日期:___年___月___日实验地点:_________ 成绩:_________ 实验目的：(1) 掌握表格的建立，修改的方法。
(2) 掌握图文混排的方法。
(3) 掌握鼠标经过图像的应用方式。
实验内容与基本要求:(1) 用表格方式建立家乡特色介绍的网页1.html，格式如下：(2) 图片1-6分别链接到相应文档，并在新窗口打开。
要求:实验报告上只需要写出1.html的代码。
实验步骤：（1）、打开dW网页制作软件下的html格式，右击选择“页面属性”，设置背景图片，文本颜色“蓝”，背景颜色“黑”，链接颜色“红”（2）、点击“插入”—“表格”，建立5列3行的表格，设置表格属性。
（3）、选中表格第一列和最后一列，右击“表格”—“合并单元格”，输入“我的家乡南充”和“版权所有”，选中中间三列，同样方式合并单元格。
（4）、图片1—6：点击“插入”—“图像”—“确定”；图片7点击“插入”—“图像对象”—“鼠标经过图像”，选择相应的“原始图像”、“鼠标经过图像”、“按下时前往的URL”图片。
（5）、对图片1---6分别创建链接，单击图片，再单击右键“创建链接”，打开相应的网页或输入相应的网址。
（6）、网页代码展示<!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><style type="text/css">body,td,th {<script type="text/javascript">function MM_swapImgRestore() { //v3.0var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;}function MM_preloadImages() { //v3.0var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}}function MM_findObj(n, d) { //v4.01var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];for(i=0;!x&&yers&&i<yers.length;i++) x=MM_findObj(n,yers[i].document);if(!x && d.getElementById) x=d.getElementById(n); return x;}}</script></head><body onload="MM_preloadImages('u=2402710936,334120626&fm=23&gp=0_conew1.jpg')"><table width="1029" height="566" border="2" cellpadding="2" cellspacing="0"><tr><th colspan="3" scope="row">我的家乡，南充</th></tr><tr><th width="272" height="178" scope="row"><img src="file:///F|/我的资‘料/新建文件夹/u=974826602,877128046&fm=21&gp=0_conew1.jpg" width="271" height="197" /><a href="/">南充美食</a></th><td width="466" rowspan="3"><a href="u=2465314675,731935378&fm=23&gp=0_conew1.jpg" onmouseout="MM_swapImgRestore()"onmouseover="MM_swapImage('Image7','','u=2402710936,334120626&fm=23&gp=0_conew1.jpg',1)" ><img src="u=155599163,3236453610&fm=23&gp=0_conew1.jpg" name="Image7" width="465" height="280" border="0" id="Image7" /></a><a href="/nanchong/"> &nbs p; 夜景展示</a></td><td width="272"><img src="u=2402710936,334120626&fm=23&gp=0_conew1.jpg" width="267" height="200" /><a href="/nanchong/"><th height="158" scope="row"><img src="file:///F|/我的资‘料/新建文件夹/u=2387159853,3673608345&fm=23&gp=0.jpg" width="267" height="171" /></th> <td><img src="u=885140946,1444301877&fm=23&gp=0_conew1.jpg" width="270" height="176" /></td><th height="25" colspan="3" scope="row">版权所有：</th></tr></table><p> </p></body></html>实验结果：实验总结：此实验比较简单，经过上课的学习能熟练的掌握，插入链接是必须掌握的知识实验评价（教师）：_________________________________________—————————————————————————————实验名称：框架应用指导教师:_________实验日期:___年___月___日实验地点:_________ 成绩:_________ 实验目的：(1) 熟练掌握框架网页的应用。
基于工作过程的《网页设计与制作》课程设计
和 序 化课 程 内容 ， ＿－ － ￣ ｇ ５ 工作过 程 课 程设 计 的 核 心理 念 ， 文 以《 页设 计与 制作 》 改课 程 设计 为例 ， 论 网 课 阐
述 了基 于工 作过 程课 程设计 的 一般 思路 和 方法 。
【 键词 】 工作过 程 ； 程设 计 ； 型 工作任 务 ； 学情境 关 ： 课 典 教
也远 未 跳 出学 科体 系 的藩篱 ｌ 在这 一传 统 观 念束 缚 下 程 可 以表述 为 图 ｌ ｌ Ｊ ， 编写 的教材 始 终不 能适 应 职业 工作 的需 要 ， 因此 ． 进行 ２ 基于 工作 过程 的《 、 网页设计 与 制作》 的课程设 计
高 职教 育 应 该 首 先 服 务 地 方 和 区域 经 济 的 要 求 ． 作》 课改 课程 的课程 设计 ， 讨 基于 工作 过 程 的课 程设 因此应该 在 高职 院校所 在 区域 选取 有代 表性 的企 业进 探 计 一 般 方法 。 行 充 分调 研 ， 以本 院软 件技 术 专业 《 页设计 与制 作 》 网 １ 基于 工作 过 程课 程设计 简介 、 课 程设 计 为 例 ．我 们对 安庆 科 技创 业 园 的 ５家 Ｉ Ｔ企 基 于 工 作过 程 的课 程设计 方 法 是 由德 国不来 梅 大 业 、合肥 软件 园 的 ３家 软件 服务 外包 公 司的软 件 服务 学 技 术 与 职业 教 育 研 究所 ｆ ＴＢ 于 ２ Ｉ １ ０世 纪 ８ Ｏ年代 首 与 开发人 员进行 深 入调 研 ．结合 软件 技术 专业 的毕业 先 提 出 的［ 它 是 以现 代 职业 工 作 整体 化 分 析 和 描述 ． 生 职业 岗位 分析 ， ２ 】 ， 确定 《 网页设 计 与制 作 》 要 面 向 的 主 为 基 础进 行 的工 作过 程 系统化课 程设 计 方法 。 该方 法 ． 是 职业 岗位 为前 台网 页设 计 师 和前 台网页 程 序 员 ． 即 认 为 现代 课程 研 究 的关键 在 于解 读契 合在 实 践 中的知 主要 的工 作 任务 是 前 台 页面设 计 和编 程．这 些 典 型工 基 于工 作过 程 的课 程设 计 ．实 现高 职人 才 培 养 目标将 是亟 待 解决 的 重要课 题 。 文结合 本 校《 本 网页 设计 与制
高职院校《网页设计与制作》课程教学设计
浅析高职院校《网页设计与制作》课程教学设计摘要：高职院校《网页设计与制作》课程要从教学目标、课程内容、考核方式等方面进行合理的设计，并运用以项目为载体、以任务驱动为教学方法调动学生学习的积极性，充分发挥教师的引导作用和学生的能动作用。
关键词：高职院校；计算机专业；《网页设计与制作》；教学设计中图分类号：g642文献标识码：a文章编号：1009-0118（2013）03-0159-02一、高职院校《网页设计与制作》课程的学习目标高职院校《网页设计与制作》课程旨在培养计算机网页前台设计工作人员，并为学生学习动态网页的制作打下基础。
因此，高职院校《网页设计与制作》课程应以行业需求确定专业培养目标，以职业能力为目标实施教学活动，以学生为中心组织教学过程，以灵活的教学方法和考核方法评价教学效果，并突出能力和应用目标。
学习完本课程后，学生能较为熟练地运用html语言基本知识；利用dreamweaver软件进行网站的创建、网页的布局、网页的编辑等；能够对企业建站项目进行策划、建设、维护和管理，能独立设计各类网站，并且通过学习可以获得从事网页编辑、网站策划、网络美工创作、动漫设计、信息编辑、网络广告设计等工作的相应技能。
二、高职院校《网页设计与制作》课程教学设计的思路高职院校《网页设计与制作》课程的教学设计遵循“3+2”原则，“3”指的是：（1）以学生为主体培养学生的职业能力目标；（2）项目任务为载体训练职业岗位能力；（3）理论与实践相结合的课程设计。
“2”指的是：（1）某些课程教学内容（如德育、外语内容等）必须“渗透”到全校所有课程中去，而不能依赖集中上课的形式；（2）对于职业能力中的“核心能力”，如自学能力、与人交流能力、与人合作能力、解决问题能力、信息处理能力、创新能力、数字应用能力、外语应用能力等，也必须要“渗透”到所有课程中去，而不能仅依赖集中讲授等方式。
从《网页设计与制作》课程以往的教学情况来看，学生在学习完这门课程后虽能掌握基本的理论知识，但在实际应用中，作品的利用率不高，一方面表现在网页的内容定位上，另一方面则表现在网页色彩的使用上。
《网页设计与制作》课程教学方案设计
《 网页设计与制作》 课程教学 方案 设计
广 东商学 院华 商 学院信 息 工程 系 周秋 怡
［ 摘 要］ 网页设计与制作是一 门立足于企业 实际的网页制作技 术开设 的计算机专业基础课 ， 实践性 强 ， 因此实验环节的设计至关重 要 。本 文根据课 程的特点和作者 多年 与企 业合作 经验和教学 实践 ， 设计 了一套 网页设计 与制作课程教 学设 计方案 ， 该方案 包括课堂 教 学演示、 课 后作业 、 自 测 实验和综合 实验 一 系列实验项 目的详细设计 。实践证 明， 通过 几个环节的反复训练 ， 学生能较好地掌握 网 页设 计 与 制作 的技 巧 ， 取 得 了不错 的 效 果 。 ［ 关键词 ］ 网页设计与制作 Ｄ ｒ ｅ ａ ｍ ｗ ｅ ａ ｖ ｅ ｒ 教 学设计
一
。
据， 详细设计各环节的实验 内容。 １ ） 演示实验设计 教师通过实例 的方法讲解 知识 点 ， 让学生能快速熟悉 Ｄｒ ｅ ａ ｍｗ ｅ ａ ｖ ｅ ｒ Ｃ Ｓ ５ 的程序界面 ， 较 轻松地学 习在设计 网页的过程 中应用 的知识点 ， 掌 握实现 每次实验 的基 本方法 。演示 实验可 以从 以下几方面人手 ， 设计 系列的演示实验。具体的实验项 目设计ｒ 如表 １ 所示。 表１ 演示实验项 目
一
实验项 目
实验 目的
项 目一 几 个 典 型 的 网 让学生掌握 网页的结构 ， 包括源文件 和主页的 站首 页效果演示 结构 ： ｌ ｏ ｇ ｏ 、 菜单 、 主要内容 、 版权 。 项 目二 演 示 一 个 简单 让学生掌握 网页制作的基本元素 ， 包括 网页标 网页的制作过程 题、 页面默认 字体 、 默认字体 大小 、 背景颜色 、 背景 图片 、 边距 、 超链接等。 项 目三 创建页 面布局 介绍 网页布局 的几种 方法 ： 表格布局 、 框架 布 局、 Ａ ＰＤ Ｉ Ｖ布局 、 Ｄ Ｗ 自定义 的布局 。 项 目四 使用 Ｃ Ｓ Ｓ 从Ｃ Ｓ Ｓ 的基本概念出发 ， 介绍 Ｃ Ｓ Ｓ 语言的特点 ， 以及 如何在 网页 中引入 Ｃ Ｓ Ｓ ， 并对Ｃ Ｓ Ｓ 进行 初 步的体验。
网页设计与制作课程实验报告(可编辑优质文档)
网页设计与制作课程实验报告（可编辑优质文档）(可以直接使用，可编辑完整版资料，欢迎下载）桂林航天工业高等专科学校电子工程系网页设计与制作课程实验报告2021-----2021学年第一学期专业：通信技术班级：2021041204 学号：39 姓名：高秋妹指导教师: 李云第一章网站概述1.1 需求分析：在21世纪的今天，中国互联网技术已经进入了一个高速发展的阶段，直接通过网络浏览网站，已经成为越来越多网民的选择，根据调查，中国目前有3亿多网民，其中50%的网民有过在网络上浏览网页获取社会信息的经历。
展望未来，机会无限。
在这样的背景之下，设计一个以文字和图片为主的系部网站，主要满足一下需求：充分发挥系二级网站的对外宣传效果，体现自身专业优势、名师风采、学生工作等内容，全面展示我校整体形象和办学特色。
1.2 功能概述：这次实现的是系部网站设计，主要内容有：系部网站首页的实现，和首页相关的内容，即通知公告，最新动态，友情链接，专业设置，师资建设，学生工作及文表下载等。
1.3网站风格：网站给人的第一印象来自视觉冲击，确定网站的标准色彩是相当重要的一步。
不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。
在本网站里主要用到的颜色有：淡蓝色和白色，网站看上去给人的第一印象就是温馨、充满梦想的网站。
1.4 可行性分析：网站设计与制作是专业课之一，随着网络的开放、电脑的普及率、以及计算机技术的提高，同时网上资源丰富多彩，加上已有一定的技术基础和优秀的老师作相关的指导，建设该班级网站有一定的可行性。
第二章网站制作2.1网页结构：2.2主要功能：●专业设置：介绍专业特色，发展前景，开设课程。
●师资建设：师资队伍人数、师资力量概况(职称、学历和年龄结构，教师培训计划及实施情况)、学术带头人介绍（包括研究方向、论文论著等）或个人主页链接、其他个人主页链接；教师风采，校级名师需有个人照片，个人简介，研究方向、团队以及研究项目，发表过的论文等，其他教师也需要有个人简介。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
《网页设计与制作课程设计》实验报告院系名称：管理学院专业班级：电子商务XXX学生姓名： XXX 学号： XXXXXXX2016年 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、主页<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>轻奢电商</title><style type="text/css">body{min-width:1080px;color:#006e89;font-family:微软雅黑;background-image:url(images/轻奢背景.jpg);}#outermost #title{margin: 0 auto;width: 1080px;}#nav{width: 1080px;margin:0 auto}#nav ul li{padding:0 5px;color:#CCC;margin:10px 0 0 0;float:right;list-style: none}#nav ul li a{color:#666;text-decoration: none}#nav ul li a:hover{color:#F00;text-decoration: underline }#outermost{clear:both;width:1080;margin-left:auto;margin-right:auto }#top{font-family: 隶书;font-size: 55px;margin:0}#outermost #title{margin: 0 auto;width: 1080px}#outermost #sddm{margin:0 auto;padding: 0;width: 1080px;z-index: 30;background-color:#030303;height:40px}#sddm li{margin:50;padding:0;list-style: none;float: left;font: bold 20px arial}#sddm li a{display: block;margin: 0 1px 0 0;padding: 4px 10px;width: 120px;background:#030303;color: #FFF;text-decoration: none }#sddm li a:hover{background: #030303 }#sddm div{position: absolute;visibility: hidden;margin: 0 35 0 0;padding: 0 35 0 0;background: #030303;border: 1px solid #030303 }#sddm div a {position: relative;display: block;margin: 0;padding: 5px 10px;width: 120;white-space: nowrap;text-align: left;text-decoration: none;background: #030303;color: #2875DE;font: 20px arial}#sddm div a:hover {background: #030303;color: #FFF}#main{margin:auto;font-size:30px;width:1000px;text-align:center}#content{magin-left:20px;font-size:22px;width:auto;height:200px;float:left}#content1{float:left;}#content2{magin:auto 0 auto auto;font-size:18px;height:200px;float:right}#bottom{magin:auto auto 0 auto;text-align:center;font-size:18px;clear:left}</style><script type="text/javascript"> $(function(){$("#KinSlideshow").KinSlideshow({moveStyle:"down",intervalTime:8,mouseEvent:"mouseover",titleFont:{TitleFont_size:14,TitleFont_color:"#FF0000"} });})</script><script type="text/javascript"><!--var timeout = 500;var closetimer= 0;var ddmenuitem = 0;function mopen(id){ mcancelclosetime();ddmenuitem = document.getElementById(id);}function mclose()function mclosetime(){ closetimer = window.setTimeout(mclose,timeout); }function mcancelclosetime(){ if(closetimer){ window.clearTimeout(closetimer); closetimer = null;}}document.onclick = mclose;// --></script><script type="text/javascript"> function a(obj){var zhi=document.getElementById('a'); zhi.innerHTML='';zhi.innerHTML='账号不能为空';return false;exit;}else{zhi.innerHTML='√';return true;}alert("aaa");}<!--验证密码-->function p(obj){var zhi=document.getElementById('p'); zhi.innerHTML='密码不能为空';return false;exit;}else{ zhi.innerHTML='√';return true;}}</script></head><body><div id="outermost"><div><p align="center" id="top"><img src="images/轻奢品牌.jpg" border="0">轻奢电商</p><p align="right"><img src="images/正品保障.jpg" border="0">正品保障<img src="images/7天退换.jpg" border="0">7天退换</p></div><ul id="sddm"><li><a href="#" onmouseover="mopen('m1')"onmouseout="mclosetime()">首页</a></li><li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">美妆</a><div id="m2" onmouseover="mcancelclosetime()" onmouseout= "mclosetime()"><a href="#">女士护肤</a><a href="#">男士护肤</a></div></li><li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">服饰</a><div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"><a href="#">精品女装</a><a href="#">潮流男装</a></div></li><li><a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()">零食</a><div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"><a href="#">国内美食</a><a href="#">进口美食</a><a href="#">酒水专区</a></div></li><li><a href="#" onmouseover="mopen('m5')" onmouseout="mclosetime()">母婴</a><div id="m5" onmouseover="mcancelclosetime()" onmouseout= "mclosetime()"><a href="#">婴幼儿专区</a><a href="#">孕妈专区</a><a href="#">玩具/文具/教育</a></div></li><li><a href="#" onmouseover="mopen('m6')" onmouseout="mclosetime()">关于我们</a></li><li><a href="list.htm" onmouseover="mopen('m7')" onmouseout="mclosetime()">在售分类</a></li></ul><div id="main"><p><hr size="1">品牌热卖<hr size="1"><br><div id="KinSlideshow" style=""><a href="/" target="_blank"><img src="images/pic1.jpg" ></a><a href="/" target="_blank"><img src="images/pic2.jpg" ></a></div></p><p><hr size="1">限量抢购<hr size="1"><br><img src="images/限量抢购.jpg" border="0"></p></div><div> <div id="content">轻奢电商——轻奢新主义，只为懂你的人<br><ul><li>轻奢国际尖货，跟踪国际一流品牌，提供超一流服务</li><li>轻奢母婴专享，提供超豪华护理套餐，限时一折抢购</li><li>轻奢化妆品专柜，超乎实体店的感官体验，限时特卖</li><li>轻奢零食主会场，进口零食倾情享受，酒水七折特卖</li></ul></div><div id="content1"><img src="images/登录.jpg" border="0"><div id="content2"><br><br><form method="post" action="" name="myform"> 用户：<input type="text" name="username" size="20" onblur="a(this)"><span id="a" style="color:red;font-size:12px;"></span><br>密码：<input type="password" name="pword" size="20"onblur="p(this)"><span id="p"style="color:red;font-size:12px;"></span></br><p><input type="submit" value="登录"><input name="" type="button" class="userpsubmit" value="注册" id="add" onclick="check_all(document.myform)"> </p></form> </div></div><div id="bottom" style="text-align:center"><hr width="80%"> </div></div></body></html>2、列表页<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>在售分类</title><style type="text/css">body{color:#006e89;font-family:微软雅黑;background-image:url(images/轻奢背景.jpg)}#sddm{padding:0;z-index: 30;background-color:#030303;height:40px;color:#FFF}#sddm li{padding:10px 30px 5px 30px;list-style: none;float: left;width:130px;font: bold 20px arial;color:#FFF}#sddm1{background-color:#006e89}#top{font-family:隶书;font-size:45px;text-align:center}#content{font-size:24px;padding:10px auto auto 20px;magin:auto auto auto 30px} #content ul first{font-size:24px;margin-left:50px}#content ul second{font-size:18px;margin-left:60px}a{font-size:18px;text-decoration:underline;color:#006e89}a:hover{font-size:18px;text-decoration:underline;color:#000}#bottom{magin:auto auto 0 auto;text-align:center;font-size:18px;clear:left}</style></head><body><div><p align="center" id="top"><img src="images/轻奢品牌.jpg" border="0">轻奢电商</p><p align="right"><img src="images/正品保障.jpg" border="0">正品保障<img src="images/7天退换.jpg" border="0">7天退换</p></div><ul id="sddm"><li>首页<li>美妆<li>服饰<li>零食<li>母婴<li>关于我们<li id="sddm1">在售分类</ul><div id="content"><div align="center"><hr width="80%">商品分类<hr width="80%"></div><ul id="first"><li>美妆<div><ul id="second"><li><img src="images/女士护肤.jpg" border="0">女士护肤：<a href="content.htm">洁面</a>|<a href="#">护肤套餐</a>|<a href="#">爽肤</a>|<a href="#">去角质</a>|<a href="#">T区护理</a>|<a href="#">面膜</a>|<a href="#">身体护理</a>|<a href="#">彩妆</a>|<a href="#">隔离防晒</a>|<a href="#">精华</a>|<a href="#">眼膜</a>|<a href="#">香水</a>|<a href="#">啫喱</a>|<a href="#">喷雾</a>|<a href="#">隔离防晒</a><li><img src="images/男士护肤.jpg" border="0">男士护肤：<a href="#">洁面</a>|<a href="#">剃须</a>|<a href="#">面膜</a>|<a href="#">面部护理</a>|<ahref="#">护肤套餐</a>|<a href="#">须后水</a>|<a href="#">眼部护理</a>|<a href="#">身体护理</a>|<a href="#">祛痘</a></ul></div><li>服饰<div><ul id="second"><li><img src="images/精品女装.jpg" border="0">精品女装:<a href="#">针织衫</a>|<a href="#">polo衫</a>|<a href="#">连衣裙</a>|<a href="#">牛仔裤</a>|<a href="#">风衣</a>|<a href="#">短裙</a>|<a href="#">松糕鞋</a>|<a href="#">棉衣</a>|<a href="#">凉鞋</a>|<a href="#">打底衫</a>|<a href="#">夹克</a><li><img src="images/潮流男装.jpg" border="0">潮流男装:<a href="#">T恤</a>|<a href="#">背心</a>|<a href="#">衬衫</a>|<a href="#">西装</a>|<a href="#">皮鞋</a>|<a href="#">泳裤</a>|<a href="#">帽子</a>|<a href="#">睡衣</a>|<a href="#">袖扣</a>|<a href="#">领带</a>|<a href="#">休闲裤</a></ul></div><li>零食<div><ul id="second"><li><img src="images/国内美食.jpg" border="0">国内美食:<a href="#">坚果</a>|<a href="#">肉脯</a>|<a href="#">果脯</a>|<a href="#">饼干</a>|<a href="#">特产</a>|<a href="#">炒货</a>|<a href="#">茗茶</a> <li><img src="images/进口美食.jpg" border="0">进口美食:<a href="#">巧克力</a>|<a href="#">糖果</a>|<a href="#">糕点</a>|<a href="#">咖啡</a>|<a href="#">健康冲饮</a>|<a href="#">咖啡伴侣</a><li><img src="images/酒水专区.jpg" border="0">酒水专区:<a href="#">花茶</a>|<a href="#">洋酒</a>|<a href="#">啤酒</a>|<a href="#">可口可乐</a>|<a href="#">牛奶</a>|<a href="#">葡萄酒</a>|<a href="#">茶叶</a>|<a href="#">鸡尾酒</a>|<a href="#">果汁</a></ul></div><li>母婴<div id="m3"><ul id="second"><li><img src="images/婴幼儿专区.jpg" border="0">婴幼儿专区:<a href="#">奶粉</a>|<a href="#">手推车</a>|<a href="#">学步鞋</a>|<a href="#">纸尿裤</a>|<a href="#">抱毯</a><li><img src="images/孕妈专区.jpg" border="0">孕妈专区:<a href="#">防辐射系列</a>|<a href="#">妈咪包</a>|<a href="#">家居服</a>|<ahref="#">营养品</a><li><img src="images/玩具.jpg" border="0">玩具/文具/教育:<a href="#">公仔</a>|<a href="#">乐器</a>|<a href="#">棋牌</a>|<a href="#">积木</a>|<a href="#">书包</a>|<a href="#">笔类</a>|<a href="#">连环画</a>|<a href="#">练习册</a>|<a href="#">乐高</a></ul></div></ul></div><div id="bottom" style="text-align:center"><hr width="80%"></div></body></html>3、内容页<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>洁面</title><style type="text/css">body{color:#006e89;font-family:微软雅黑;text-align:center;background-image:url(images/轻奢背景.jpg);}#top{font-family:隶书;font-size:45px;text-align:center} #sddm{margin:0 ;padding: 0;z-index: 30;background-color:#030303;height:40px;color:#FFF}#sddm li{padding:10px 30px 5px 30px;list-style: none;font: bold 20px arial;width:130px;color:#FFF}#sddm1{background-color:#006e89;}#content{width:100%}#content1{width:25%;float:left} #content2{width:25%;float:left} #content3{width:25%;float:left} #content4{width:25%;float:left} #bottom{magin:auto auto 0 auto;text-align:center;font-size:18px;</style></head><body><div><p align="center" id="top"><img src="images/轻奢品牌.jpg" border="0">轻奢电商</p><p align="right"><img src="images/正品保障.jpg" border="0">正品保障<img src="images/7天退换.jpg" border="0">7天退换</p></div><ul id="sddm"><li>首页<li>美妆<li>服饰<li>零食<li>母婴<li>关于我们<li id="sddm1">在售分类</ul><p align="left">您的位置>美妆>女士护肤>洁面<hr size="1"></p><div id="content" align="center"><div id="content1"><img src="images/list1.png" border="0"><br>洁面膏<br>尺码：100g<br>洁面膏彻底清除堆积在毛孔里的污垢和角质细胞，用后清爽无比</div><div id="content2"> <img src="images/list2.png" border="0"><br>草本青春洁面慕斯<br>规格：150mL<br>草本青春洁面慕斯150mL，蕴含有丰富的植物油和植物萃取，质地温和绵密，能够温和的清洁皮肤</div><div id="content3"><img src="images/list3.png" border="0"><br>玫瑰衡肤保湿洁面乳<br>尺码：80g<br>玫瑰衡肤保湿洁面乳80g，蕴含丰富的玫瑰果油，可提升肌肤水分含量<br></div> <div id="content4"><img src="images/list4.png" border="0"><br>衡肤泡沫洁面液<br>尺码：200mL<br>衡肤泡沫洁面液，玫瑰、绿茶和药蜀葵和多种植物活性成份可以轻柔的去肌肤表面污垢<br></div></div><div id="bottom" style="text-align:center"><hr></body></html>五、实验总结在本次网站页面设计中，首先要整理清楚构思，根据CSS样式以及DIV块化设计完成代码设计。