个人网站设计与制作课程设计
网页课程设计任务书
课程设计任务书一、设计目的本学期的《网页设计》以站点的设计为主，理论学习服务于主题与内容。
在课程设计周完成一个站点的设计与制作，从而达到以下两个目的：（一）学会使用Dreamweaver CS3、HTML、Fireworks、Flash规划站点、制作网页。
并在站点的设计中掌握一定的实用性和技巧性的技术。
（二）根据个人的设计主题，培养出查阅有关资料的习惯，强化自学能力，为进一步提高个人的素质打下基础。
二、设计过程要求（一）纪律：上机过程中遵守纪律及有关上机规定，不得浏览无关网站，尤其是不健康的站点。
课程设计过程中的表现，将作为最终评定成绩的参考。
（二）内容：网站内容以“个人网站、班级网站、计算机工程系网站、求职网站”四项为主题或自定题目，如：个人展示，宿舍生活，班级主页或文学、体育、旅游、美食等专题性站点，但建议根据个人的预期就业目标选择。
课程设计结束后可将自己所设计的网站拷贝带走，作为就业自荐的一份材料或作品。
（三）保存：设计结果及有关素材要及时上传至个人空间。
（四）要求：所设计的网站要求具有实用性和较好的创意，并尽可能应用到所学的知识，同时尽可能减少到其它站点的链接。
通过个人对资料的查阅，力所能及地利用一些好的脚本程序。
（五）考核：考核分两部分进行。
首先，网站设计的实际成果；其次，写出《课程设计报告》，在设计报告中要写明设计的主题、个人的构思与创意、采用的技术方法、使用的特殊脚本程序、各网页的设计技巧、各网页的主要内容的说明、并画出整个站点的结构图。
在设计报告的最后要注明参考文献、写明设计心得及对此课程的建设性的意见。
1、内容：20分（1）网站题材及内容是否符合本次设计的要求；（2）对选材的把握及处理是否符合内容的需要，对选材阐述的深度是否专业、精辟；（3）网站的选材是否全面、详细、充实、相关信息是否丰富。
2、版面：20分（1）版面是否简洁，主要指文本、图案是否整齐美观；（2）布局是否合理，主要指网站的结构是否科学，栏目设置是否合理，导航是否分明，是否方便查阅；（3）色彩，指色彩搭配是否协调，有层次感，且有利于浏览阅读。
个人博客网站课程设计
个人博客网站 课程设计一、课程目标知识目标：1. 学生能够理解个人博客网站的基本概念，掌握网站结构、页面布局和内容发布的基本知识。
2. 学生能够了解网站前端技术，如HTML、CSS、JavaScript，并运用这些技术进行简单的网页制作。
3. 学生掌握网站后端技术，如数据库操作和服务器端编程，实现博客网站的动态数据展示和用户交互。
技能目标：1. 学生能够运用所学知识，独立设计和制作个人博客网站，完成网站的整体布局和页面美化。
2. 学生能够编写简单的动态网页，实现博客文章的发布、编辑、删除等功能。
3. 学生能够通过实际操作，提高问题解决能力和团队协作能力。
情感态度价值观目标：1. 学生培养对网络技术的兴趣，激发学习主动性和创新意识。
2. 学生在学习过程中，注重个人信息安全和网络安全，树立正确的网络道德观念。
3. 学生通过个人博客网站的制作，培养表达自我、展示个性的信心，提高沟通和交流能力。
本课程针对初中年级学生，结合教材内容，注重理论与实践相结合，以培养学生的实际操作能力和创新能力为目标。
课程性质为实践性、综合性，教学要求学生在掌握基本知识的基础上，能够独立完成个人博客网站的设计与制作，将所学知识应用于实际生活，提高信息技术素养。
通过本课程的学习，期望学生能够达到以上所述具体的学习成果。
二、教学内容本章节教学内容主要包括以下几部分：1. 网站基础知识：- 网站概念与分类- 网站结构及页面布局- 网络协议与域名解析2. 网站前端技术：- HTML：基本结构、常用标签、表单制作- CSS：选择器、样式属性、页面布局- JavaScript：基本语法、事件处理、DOM操作3. 网站后端技术：- 数据库基础：数据类型、表结构设计、SQL语句- 服务器端编程：PHP基础、会话控制、文件操作- 数据库连接：MySQL与PHP的交互4. 个人博客网站制作：- 网站需求分析- 设计与规划：页面布局、功能模块划分- 网站制作：前端页面编写、后端逻辑实现- 网站测试与优化教学内容按照以下进度安排：1. 网站基础知识（2课时）2. 网站前端技术（4课时）3. 网站后端技术（4课时）4. 个人博客网站制作（6课时）本章节内容与教材相关章节紧密关联，确保学生能够系统地掌握网站制作相关知识。
网站个人课程设计报告
个人课程设计报告一、教学目标本课程的教学目标是使学生掌握XX学科的基本概念、原理和方法，能够运用所学知识解决实际问题。
具体来说，知识目标包括了解XX学科的基本概念和原理，掌握XX学科的基本方法；技能目标包括能够运用XX学科的方法分析问题和解决问题，能够进行XX学科的实验操作；情感态度价值观目标包括培养学生的科学精神，提高学生对XX学科的兴趣和热情。
二、教学内容根据课程目标，本课程的教学内容主要包括XX学科的基本概念、原理和方法。
教学大纲将按照教材的章节进行安排，每个章节都会有详细的内容介绍和案例分析。
具体的教学内容安排如下：1.第一章：XX学科的基本概念和原理2.第二章：XX学科的基本方法3.第三章：XX学科的应用案例分析三、教学方法为了达到课程目标，本课程将采用多种教学方法，包括讲授法、讨论法、案例分析法和实验法等。
讲授法用于向学生传授基本概念和原理，讨论法用于引导学生深入思考和探讨问题，案例分析法用于让学生通过实际案例掌握XX学科的方法，实验法用于培养学生的实验操作能力。
四、教学资源为了支持教学内容和教学方法的实施，本课程将选择和准备多种教学资源。
教材将是主要的教学资源，我们将选择一本权威的教材，以确保学生能够接触到最新的知识和概念。
此外，我们还将提供参考书籍、多媒体资料和实验设备等，以丰富学生的学习体验和提高学生的实践能力。
五、教学评估本课程的评估方式将包括平时表现、作业和考试等。
平时表现评估将根据学生在课堂上的参与度、提问和回答问题的情况进行。
作业评估将根据学生提交的作业质量和完成情况进行。
考试评估将包括期中和期末考试，考试内容将涵盖课程的全部内容，采用客观题和主观题相结合的方式，以全面反映学生的学习成果。
评估方式将力求客观、公正，以确保评估结果能够真实反映学生的学习情况。
六、教学安排本课程的教学进度将按照教材的章节进行安排，每个章节都会有详细的教学内容和教学时间安排。
教学安排将紧凑合理，确保在有限的时间内完成教学任务。
web网页设计课程设计-个人博客
这个子网页采用的是YUI中的Paginator:Getting started with Paginator JS控件，可以在网页中插入文字图片，并有翻页效果。
每个人的兴趣爱好可以有很多，如果采用流式布局则会显得很冗杂，于是我采用了这个JS控件，让游客可以对每一个感兴趣的栏目进行浏览，不会产生疲劳。另外我将图片大小调节同意大小，并添加在每个框架中，这样可以使整个网页布局不会产生太大波动。
2.3系统总框图
2.4 设计网站
首部的LOGO，这个区域揭示了整个网站的主旨，所以这一部分的图片和内容必须设计得很精。然后是左下区域的座右铭，座右铭体现了个人的性格和修养以及价值观，这一部分布局必须清晰明了。最后是右下部分的其他，为了使网页看起来简洁明了，我在这一部分添加了一个单独的图片作为一个DIV。
E-R图
数据库表
数据字典：
Id：每个留言一个id，主键，非空
Title：每个留言一个title，可以为空
Tentent：每个留言一个内容，可以为空
Time：每个留言一个时间，可以为空
Ip：每个留言一个ip，一个ip可以对应多个留言
Huifu：每个留言对应一个管理员回复，可以为空
总结
在这次课程设计中，我再一次巩固了对HTML静态网页和ASP动态网页的设计制作方法，特别是对HTML网页已经较为熟练的掌握了。并且我对CSS样式文件和JS脚本文件的使用也有了更深的了解。
3.1.2个人简历
这个页面依旧使用了黄色的主色调，顶部是蓝色，与个人信息想呼应。主题是大海，个人简历就像鱼儿在海中的经历一样，这也和个人简历的风格想呼应。
左上角我添加了一个时钟空间，并添加了一个可以游动的鱼，点击之后可以快速返回主页，这条小鱼是使用JS代码和GIF动图完成的，和整个大海的风格比较融合。另外我在网页底部添加了固定的BOTTOM页脚，主要内容也是跟海有关，为的也是和主题融合。
网页设计课程设计报告心得体会
网页设计课程设计报告心得体会•相关推荐网页设计课程设计报告心得体会（精选11篇）我们得到了一些心得体会以后，不妨将其写成一篇心得体会，让自己铭记于心，这样可以帮助我们总结以往思想、工作和学习。
那么好的心得体会都具备一些什么特点呢？下面是小编帮大家整理的网页设计课程设计报告心得体会，欢迎阅读与收藏。
网页设计课程设计报告心得体会篇1在《网页设计》的学习中，老师开展了动态思维训练教学方式来激发我们的学习兴趣，调动了我们的学习自觉性。
老师的认真负责、充满激情，令我们的课堂气氛活跃而有序。
学习方式的灵活多变，让我们在舒适的环境下以愉快的心情接受、掌握和灵活的运用所学知识和技能。
《网页设计》的教学都是理论实践相结合的，老师很详细的讲每一个知识点，而且在讲每个知识点的时候都会举实际例子来加深我们对那个知识点的印象，如果我们有什么不明白的，老师会耐心的将我们不懂的再讲，直到都明白为止。
在每次的理论后，我们都会上一次机来巩固之前学习过的理论知识，在上机的过程中有什么不明白或不懂的，老师都会耐心仔细的给我们讲，在讲的同时会告诉我们一些制作的技巧。
每次实训完后，我们都会把自己做的放在服务器上。
老师专门为《网页设计》这门课程开了一个后台服务器，让我们可以把每次做的网页上传到服务器上，老师也可以通过这个服务器看到我们制作的情况，然后针对我们出现的问题作耐心指导或在原本内容上更深次的讲解，直到我们明白为止。
学习了《网页设计》后，我知道了动手也要动脑，同时也增强了我的创造能力和动手能力。
从学习本课程后，我发现了自己的优点，在制作这方面充满信心，也对自己以后学习专业充满了希望。
在此谢谢老师！网页设计课程设计报告心得体会篇21、明确设计的方向首先我们应该明确我们在为哪些用户做设计，了解这些用户，以此分析出相应的功能、交互方式、风格。
其次还要理解公司的战略，比如：假如已经有同类产品流行于市场，差异化就是公司必须要考虑的，拾人牙慧者必死。
个人课程设计报告格式
南京工业大学网站设计与管理课程设计报告个人工作报告学院：经济与管理工程专业：电子商务学号： 2204130134姓名：陈昱同成绩：2016年1月第一部分工作日记2016-12-26 星期一今天是课程设计的第一天，我们小组首先对课程设计的任务和要求进行阅读和分析，按照成员各自的特点讨论确定设计内容，并进行分工。
将课程设计分为四个部分。
第一部分，小组讨论确定校友录的系统网站设计的主要内容，如校友录主页面、用户注册页面、校友通讯录显示与查询页面、校友通讯录编辑与删除页面等，进行具体人员责任分配和时间进度安排。
第二部分，各自完成分配任务。
第三部分，各自提出问题，通过讨论分析，解决问题。
第四部分，小组进行总结反思。
我们小组分工明确，费小娴（阶段负责人）和卢克豪负责校友录分层结构设计；朱一鸣（阶段负责人）和赵凯负责进行系统业务流程分析、用例图绘制、类图绘制、数据库设计中的E-R图及数据库表设计。
最后，由陈昱同进行课程设计总结的撰写和PPT制作。
2016-12-27 星期二课程设计的第二天，我完成了小组报告中的“小组需求调研对话记录”，进行了班级通讯录录入程序设计，其中包括删除班级通讯录程序设计，由于自己对书本知识不太熟悉，平时代码打的少，在实际操作过程中，出现了许多大大小小的问题。
比如，一个小小的标点，都会导致程序无法运行，这不仅需要我们对于代码的敏感度要高，还要我们非常的细心。
在完成任务的同时，我也发现单单靠书本上的知识，是远远不够的，还需要我们通过多种渠道和方式去学习设计程序。
比如翻阅其他相关书籍，与同学多沟通，向老师请教，在互联网上搜索。
2016-12-28 星期三课程设计的第三天，我编辑通讯录程序设计和查询班级通讯录设计，同时我也帮助我们小组的同学完成类图的制作，类图是上学期陆敬筠老师在课堂上讲解过的，我刚接触的时候却感觉非常的陌生，说明在学习过程中没有温习，学过的知识容易丢。
而类图是主要用来描述系统中各个模块中类之间的关系，包括类或者类与接口的继承关系，类之间的依赖、聚合等关系。
网页设计与制作课程整体教学设计
六、教学效果
校内督导评价
潍坊职业学院教学督导室主任周希华教授： 信息工程学院的《网页设计与制作》课程是一门实践
课程设计理念与思路
一是以真实的项目为载体重构和序化 教学内容，而不是按照传统的原理、 实验、实训的内容进行教学；
二是在课程教学过程中开放性地引入 企业工作流程、行业标准和企业主流 技术；
三是将网页制作相关职业岗位的典型 工作过程作为组织教学内容的基础；
四是以启发学生主观能动性和培养学 生的自主学习能力作为课程教学的着 力点。
二、教学内容—教学内容的组织与安排
基于工作过程设计教学内容 结合网页设计与制作的基本特点和学生的学习认知规律 ，打破原有的知识体系结构，按工作过程重组、序化教学 内容。根据专业培养目标和课程培养目标，课程组联合企 业专家对不同的岗位工作任务进行细化、归纳，设计了7个 学习情境，每个学习情境按照工作过程，又分成若干个工 作任务，将所有知识点融入工作任务的讲解中，从简单到 复杂、从入门到深化进行科学安排，循序渐进的实现教学 目标，课程内容与项目开发内容一致，理论与实践一体化 ，实现学习和工作的深度融合。
作品展示个人自评、小组点评、教师 点评、用户点评。
学 结 合
三、教学方法与手段—教学模式设计与创新
教学方法设计
项目 教学法
任务驱 动教学
法
案例 教学法
教学 方法
案例 教学法
案例 教学法
启发 教学法
三、教学方法与手段—教学手段
个人留言板网站课程设计
个人留言板网站课程设计。
一、课程目标知识目标：1. 让学生掌握个人留言板网站的基本结构，了解其工作原理；2. 使学生掌握HTML、CSS和JavaScript等前端技术，并能够运用到个人留言板的设计中；3. 让学生了解后端技术，如PHP和MySQL，能实现留言板的数据存储和展示。
技能目标：1. 培养学生独立设计和制作个人留言板网站的能力；2. 提高学生解决实际问题的能力，如前端界面布局、数据交互等；3. 培养学生团队协作能力，共同完成一个完整的网站项目。
情感态度价值观目标：1. 激发学生对计算机编程和网络技术的兴趣，培养其主动学习的态度；2. 培养学生勇于尝试、不断实践的精神，提高其面对困难的勇气和毅力；3. 增强学生的网络安全意识，使其遵循网络道德规范，尊重他人隐私。
本课程针对初中年级学生，结合信息技术学科特点，注重实践性和操作性。
在教学过程中，教师应关注学生的个体差异，鼓励学生主动探索、积极思考，提高其创新意识和动手能力。
通过本课程的学习，使学生能够将所学知识应用于实际项目中，达到学以致用的目的。
同时，培养学生良好的情感态度和价值观，为其今后的学习和生活打下坚实基础。
二、教学内容1. 网站基础知识：介绍网站的基本结构、工作原理以及常用的网络协议，让学生对网站开发有整体的认识。
相关教材章节：第一章 网络基础知识2. 前端技术：讲解HTML、CSS和JavaScript等前端技术，使学生能够独立完成网页设计和制作。
相关教材章节：第二章 HTML；第三章 CSS；第四章 JavaScript3. 留言板功能设计：引导学生学习如何实现留言板的前端界面布局和交互功能。
相关教材章节：第五章 网页布局与界面设计；第六章 交互式网页设计4. 后端技术：介绍PHP和MySQL等后端技术，让学生掌握留言板数据存储和展示的方法。
相关教材章节：第七章 PHP基础；第八章 MySQL数据库5. 留言板网站实战：将所学知识综合运用，分组完成一个完整的留言板网站项目。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
scrolldelay="300" height="50" onmouseout="start()" onmouseover="stop()">
<p> <span class="STYLE1"> <span class="STYLE3" onfocus="MM_controlSound('play','document.CS96','Music/胡彦斌-闪亮的日子.mp3')"> <img src="pic/mus/hu.jpg" name="Image37" width="25" height="25" border="0" id="Image37" />胡彦斌——闪亮的日子</span></span></p>
2、访客记录代码
<div id="apDiv2"></div>
<p><td width="383" rowspan="2"><center>
<span class="df">您是第</span><span class="STYLE16">
<script src="" language="JavaScript" charset="gb2312"></script>
制作总结：
1、在做网站前要养成建站点在站点里操作的习惯。
2、在制作网站的过程中大量用到表格，掌握了表格的嵌套，拆分，添加，删除……。
3、在制作网站的过程中运用到CSS样式，了解到其强大的功能，听说DIV+CSS样式功能更强大，可惜DIV控制不太熟悉，能做出自己本来不会的东西才算是学会了东西。
本来是想把同学做的网站连在一起，那样好像也算是一个班级的网站，可惜没连上……
留言板页面
1、鼠标经过图像
2、Marquee语句控制的向上滚动的寄语
3、用到表单，文本域，按钮，单选框
4、这只是个留言板的静态模拟，期待能做出动态的留言板。
资料页面
简单的表格布局，一直在思考漂亮点的模式，可是一直没想到只好用这个简单的模式了
日志页面
1、日志页面用到Spry选项卡式面板参数为默认
2、“日志名”居左，“推荐”居右
3、每篇日志中的每个“上一篇”和“下一篇”和“返回日志列表”都是真实有效的，规格参数都一样
1、在日志里加入了媒体元素，*.swf游戏和*.flv视频媒体元素的Html链接目标均设置为_blank，方便返回主页面。
相册页面
font-size: 100%;
cursor: default; //是默认的小箭头指向
width: 8em; //控制菜单栏之间的宽度
}
ul.MenuBarVertical ul
{
……
width: 6.2em; //控制二级菜单的可视宽度，但不是二级菜单的实际宽度（不太好描述，结合下一注释和实际操作更好理解^_^）
}
随笔页面
随笔页面利用表格和图片做出种笔记本的感觉，只是在表格里设置背景图像repeat---y出现点小问题。
分享页面
1、Spry选项卡式面板
2、电子书籍下载用到下载链接
3、游戏分享插入了*swf格式小游戏Html目标设置为_blank方便返回主页面
好友页面
之前没有设置这个页面，是想放一些外链的，做了好久发现不是很美观就换做这个好友秀页面了……
</map>
5、相册before love用到鼠标经过图像
音乐页面
1、歌词的显示和歌曲的滚动都用到了Marquee语句，本页面还利用行为播放声音代码如下div align="center"><span class="粗1">正在播放</span><span class="Blue1" onfocus="MM_controlSound('play','document.CS40','Download/胡彦斌-闪亮的日子.mp3')">
</span><span class="df">位来访客</span><span class="STYLE16"><span class="df">。</span></span>
</center
3、时间代码用到了JavaScript脚本语言
4、前期图片美化、裁剪多次用到photoshopCS4
5、多次用到Map链接
1、相册的建立用到了Fireworks CS4很方便的建立了整个相册
2、相册封面借助PS统一了风格
3、每个相片的页面也都能进入其他页面，例如下一页，前一页，留言板，音乐
4、相册Dear Family用到了行为
<map name="Map6" id="Map6">
<area shape="rect" coords="53,31,154,108" href="#" onclick="MM_popupMsg('对不起，您暂时没有访问权，')" />
</marquee>
</span></div>（详见日志：滚动文字Marquee属性及参数设置）
2、多次用到Spry菜单栏来显示歌曲
ul.MenuBarVertical
{
margin: 0; //控制菜单栏与上下表格的距离
padding: 0; //控制内边距，相对于margin外边距
list-style-type: none;
……
}
ul.MenuBarVertical ul li
{
width: 6.4em; //这个才是控制二级菜单的宽度，如果这个width设置为8em,上一个width还是6.2em，这个二级菜单的实际宽度为8em，但可以看到宽6.4em的界面，剩下1.6em的透明界面，但是二级菜单的网站设计与制作
实验要求：静态网页，至少包含主页，日志， 相册，留言板，个人资料
制作准备：确定网站主题风格，网站结构，颜色搭配，搜集素材。
制作环境：Adobe Dreamweaver CS4
指导老师：金秋乐老师
主页页面
1、马鞍山即使天气预报代码
<iframe src=" " width="245" height="110" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="No" allowTransparency="true"（允许透明=“真”）></iframe>