网页课程设计指导书

网页课程设计指导书（精选8篇）

网页课程设计指导书 篇1

山东建筑大学商学院电子商务专业

《网页设计》课程设计指导书

一、对学生的基本要求：

1、理论联系实际、严肃认真、实事求是的科学态度和勇于探索的创新精神。

2、运用所学基础理论与专业知识分析和解决实际问题，培养独立思考完成任务的能力。

3、运用网页设计及制作的基本方法和基本技术设计制作静态网站的能力。

二、具体设计内容

应用《网页设计》课程学习的网页设计及制作的基本方法和基本技术设计、制作静态网站。可以从给定的选题中选择一个课题或自拟课题（自拟课题需经指导教师批准），进行需求分析、设计和制作。

题目：

1、XXX产品（商品）营销网站

2、XXX班级网站

3、XXX公司（部门）网站

4、XXX主题网站

三、具体设计要求

1、网站设计具体要求

1）针对你所选择的课题进行需求分析，写出网站的功能要求及总体结构。

2）网站需包含主页和二级页面等；主页需有LOGO图片和BANNER图片；二级页面的数量不少于3个。

3）网页的具体设计要求：版式布局合理、色彩搭配美观大方、图片文字设计得体并突出主题。

4）网站制作中，以下具体技术HTML、CSS、JAVASCRIPT至少使用两种。

2、课程设计报告书具体要求

1）网站总体设计：网站创建的目的、意义；功能模块和网站总体结构（以图形的方式表示出来）等。

2）主页设计：设计思想、创意、色彩选择、LOGO和BANNER的设计等。

第1页

3）二级页面设计：设计思想、内容表现等。

4）具体技术实现：使用了哪些技术及在网站中的具体表现形式。

5）设计总结：本次设计的心得体会，成功之处和不足之处等。

6）参考文献。

四、设计进度表：

1、15周周三：网站的需求分析，总体设计、规划。

2、15周周四～周五：具体设计制作。主页及二级页面的版式布局，色彩、图片文字等的设计制作。

3、16周一～周三：设计制作、测试发布，及报告书的编写。

4、16周周四下午：提交网站源代码和课程设计报告书。

5、16周周五：成绩评定。等待指导老师提问答辩（采用抽查的方式）。

五、考核内容及分值分配

1、课程设计报告书。(40分)

1）正文：（2000字以上）（30分）

（1）网站总体设计：网站创建的目的、意义；功能模块和网站总体结构（以图形的方式表示出来）等。（5分）

（2）主页的设计：设计思想、创意、色彩选择、LOGO和BANNER的设计等。

（10分）

（3）二级页面设计：设计思想，内容表现等。（5分）

（4）具体技术实现：使用了哪些技术及在网站中的具体表现形式（10分）。

2）设计总结：本次设计的心得体会，成功之处和不足之处等。（7分）

3）参考文献。（3分）

参考文献必须是学生在课程设计中真正阅读过和运用过的，文献按照在正文中的出现顺序排列。各类文献的书写格式如下：

a．图书类的参考文献

序号 作者名·书名·（版次）·出版单位，出版年：引用部分起止页

码。

b．翻译图书类的参考文献

序号 作者名·书名·译者·（版次）出版单位，出版年：引用部分起

止页码。

c．期刊类的参考文献

序号 作者名·文集名·期刊名·年，卷（期）：引用部分起止页码。

2、设计制作的网站（60分）

1）网站创意及结构布局：创意是否新颖、结构布局是否合理。（10分）

2）页面设计（二级页面不少于3个）（25分）

（1）页面版式、文字及色彩设计（15分）

（2）主页LOGO、BANNER图片（10分）

3）编程技术：包括具体程序和使用效果（20分）

（1）具体程序设计（15分）

（2）功能及使用效果（5分）

4）测试及发布（5分）

网站经过测试，并发布在互联网上，运行效果良好者为5分。

注意事项：要求每个学生都要独立完成，如发现抄袭或和已经提交的网站相同者，所涉及者均按照不及格处理。

网页课程设计指导书 篇2

1 下拉式菜单的制作

现以DW CS6中Spry菜单栏组件为例说明水平式下拉式菜单的制作过程。

1.1 插入 Spry 菜单栏组件

利用DW的插入菜单或插入面板将Spry菜单栏组件插入到某个Div元素或某表格单元格中,从而固定菜单位置。当Div元素元素宽度为500px时,在DW的网页设计视图中得到如图1所示菜单,默认情况下有4个菜单项。用鼠标选中Spry菜单栏组件,可在窗口下方属性面板修改菜单项,如“项目1”等的名称,通过“+”、“-”按钮增加、删除菜单项,并设置各菜单项对应的链接URL和目标窗口或框架。

1.2 调制菜单项的宽度

如图1所示,默认情况下各菜单项不一定在同一行,这是因为各菜单项宽度和超过Div元素宽度,因此,要调整菜单项宽度。

进入DW的网页代码视图,可找到DW生成的与菜单有关的一段Html代码:

(1)设置整个菜单栏组件的宽度

DW为Spry菜单栏组件生成了一系列CSS规则, 观察上述 代码 , 可发现该 组件所占 宽度可用MenuBarHorizontal选择器对应的CSS规则控制,双击CSS面板中的该选择器,可在CSS规则定义对话框中调整有关属性,如图2所示,可调整“方框”宽度属性为auto或为外部Div元素元素的宽度500px。

(2)设置菜单项的宽度

用鼠标点击菜单项“项目2”的边框线选中该菜单项,然后可在窗口下面的属性面板设置其宽度,单位可为百分比(%)或像素(px),如图3所示,此处设为25%。调整后4个菜单项正好横排占满Div元素。另外,对照DW为Spry菜单栏组件自动生成的CSS规则,可发现菜单项由ul.MenuBarHorizontal li选择器对应的CSS规则控制,同样可用CSS规则定义对话框调整宽度。

子菜单项“项目1.1”等的宽度也可用窗口下面的属性面板设置。另外,也可采用ul.MenuBarHorizontal ul和ul.MenuBarHorizontal ul li同时设置。

1.3 设置菜单项文字的属性

超链接建立在菜单项文字之上,因此,菜单项文字的属性 (字体、背景颜色、对齐方式等) 可用ul. MenuBarHorizontal a选择器对应的CSS规则控制,进行相应设置即可。

经过上述设置后,菜单一般能满足要求。

2 树形目录的制作

树形目录非常适合展示具有层次关系的数据和超链接。Visual Studio 2010[6]、ExtJS等软件含有树形目录组件,但DW CS5、6没有树形目录组件。可以从网络上搜到一些制作树形目录的代码。下文介绍利用bassistance.de网站[7]提供代码压宿包(jquery.treeview. zip)制作含静态树网页的过程。

(1)下载压宿包并解压到自制网站的某个目录下。

(2)在解压生成的演示文件夹demo中含有多个html文件,它们中含有各种形式的树形目录,选择一个最合适的html文件作为模板再修改便可,现假定选中large.html进行编辑。

(3)在网页设计(或代码)视图中将树以外不需要的内容、网页元素删除,得如图4所示原始树目录。

(4)现假设要制作一本书的目录,希望该树目录在浏览器中展开后效果如图5所示。

将图4中原树目录中的条款改成各章、节、款的名称即可,如将“Home”改成“第一章网页设计基础”。不需要的条款可用退格(BackSpace)删除。若要在某条款下增加一条款,则将光标移至该条款后按回车(Enter) 即可。若要调整某条款的逻辑层次,则可选中该条款, 再用属性面板的凸出或缩进按钮调节;但反复调整时,有可能使树形目录在浏览器中不能正常显示,此时可以将所有条款调整为同一层次,即垂直对齐,然后再从上到下重新调整各条款层次;也可进入网页代码视图修改,图4所示树目录正确代码如下:

由此可见,整个树用项目列表元素 <ul>…</ul> 表示,条款x用列表项元素表示,即 <li> 条款x </li>,当条款x后含有子条款时,则子条款构成的树又用项目列表元素表示,且嵌套于列表项元素中,即 <li> 条款x <ul> 子树 </ul> </li>。若标签不符合这种排列组合规律可以手工修改。

(5)利用treeview li选择器对应的CSS规则调整各条款的字体大小等属性。

(6)设置超链接属性。

对超链接有无下划线、颜色等进行控制,可在网页文件代码视图的头元素中添加如下CSS规则表:

在DW设计视图中编辑出如图6所示格式的目录,此目录在浏览器中效果即如前文图5所示。

(7)含树形目录的网页一般与框架网页配合使用, 故此后要设置相应的框架网页。

(8)修改条款上原有的默认超链接或在条款上添加超链接,即设置URL、目标窗口或框架等。

3 结束语

下拉式菜单和树形目录常被用作导航界面组件, 利用它们组织超链接可使网页简洁明了。但是一般的网页制作教材对它们介绍不详细或没有介绍。鉴于这两种导航方式的实用性,在教学中可以超越一般的教材而作出较详细的制作过程介绍,这能被不具备JavaScript、ExtJS、jQuery编程知识的人员所接受。

在介绍网页设计与制作课程时,要鼓励学生充分利用网络上的学习资料和代码资源,决不能拘泥于教材的学习。

摘要：下拉式菜单和树形目录常是两种常用的网页导航界面元素,但一般的网页制作教材介绍不详细或没有介绍。为了满足教学需要,文章介绍了利用DreamWeaver CS 6中的Spry菜单栏组件制作下拉式菜单的过程和利用jquery.treeview插件制作树形目录的过程,该方法不要编写程序,学生易于接受。

《网页设计》课程教学解析 篇3

关键词： 网页设计 课程定位 教学内容 教学方法 课程考核

一、课程定位与性质

《网页设计》是面向计算机及其相关专业开设的一门课程，是一门计算机软件应用类课程。《网页设计》课程要实现的教学目标包括：①网站的基本知识，例如网站的发展和分类知识、网站开发所需的技术、HTML语言和CSS的结构和语法等；②掌握网站的开发流程，例如建站规划、效果图制作、建立站点等相关知识；③掌握各种网页元素在Dreamweaver中的使用，例如表格、文本、图像、超级链接和表单等；④熟悉一些网页设计辅助软件的功能和使用方法，例如Photoshop；⑤能够解决一些网页设计中的常见问题。

本课程旨在培养学生的计算机应用能力，使学生掌握网页设计方法、网页设计语言及相关设计工具和美化工具的使用，从而满足和适应信息化社会对物流管理专业学生综合素质的要求。

二、教学内容与教学条件

1.理论教学内容

（1）课程内容设计

课程内容设计在教学大纲的指导下完成，在教学过程中适时引入新的教学案例和教学方法，这些教学内容能够丰富学生的网络知识，提高学生的网页设计能力和计算机应用能力，为将来使用和开发与专业相关的软件奠定基础。

（2）教学内容安排

课程授课采用讲练结合的方式进行。在教学过程中，不再把书本上的现成知识传授给学生作为教学目标。通过理论讲授、案例演示和分析，让学生在真实的情境中学到相关知识，这样学生就知道如何把相关知识点应用于实际。课程采用的教学案例和学生练习的内容都出自实际应用，从而大大增强教学效果。鼓励学生将课内学到的内容应用到课外实际应用中，并将学生课外创作的自选作品作为成绩考核的重要依据。

2.实践教学内容

（1）实践教学内容

实践教学内容与理论教学内容保持高度一致，讲授什么知识点，学生就上机练习什么知识点，分析什么教学案例，学生就制作什么教学案例，通过实际项目的分解让学生更好地掌握《网页设计》的应用，大大提高学生的综合素质。同时，不断丰富实践教学内容，采用最新教学案例，取得较好的教学效果。

（2）实践教学条件

计算机实验室能够保证学生《网页设计》课程上机时，1人1机，全部上机在Windows7网络环境实现，利用电子教室软件实现课程电子资料实时发送，课堂电子作业实时提交，实现整个实验教学过程的无纸化。

三、教学方法与教学手段

1.教学方法

教学方法采用讲授法与案例教学法。对于《网页设计》相关的概念及基础知识，采用传统的课堂讲授的教学方法完成，让学生理解并接受。对于《网页设计》课程中的一些应用性和实践性比较强的知识点，采用案例教学法，通过案例演示和分析，学生知道完成教学案例的途径和相关知识点。通过布置任务，让学生查找并应用知识点，以学生为主、教师为辅，激发学生学习兴趣，提高学生应用能力。

2.教学手段

《网页设计》课程教学采用“电化教学”手段，引入“电子教室软件”辅助教学。教师通过教学课件和教学案例演示教学内容，教师微机屏幕上的内容能够实时发送到每个学生的微机屏幕上，这样学生就可以通过自己的屏幕实时看到教师的教学内容。通过“电子教室软件”，教师机的教学资料可以很快发送到学生机上，学生完成的电子作业和自创作品可以快速提交给教师。通过“电子教室软件”，教师能够很好地和学生完成提问和回答等教学互动，监控学生的操作屏幕，及时了解学生的状态并相应给出教学指导。“电子教室软件”具有电子点名功能，只需要几秒钟就可以完成整个班级的学生点名工作。

四、课程考核与试卷分析

1.课程考核

改革“一张卷子”评定成绩的课程评价模式，应用以单元测试、评价作品和上机实操考试为基础的综合考核方式，更注重学生平时的电子作业、教学实例和自选创新作品的完成情况，通过综合评价，变考书本为考能力，边学习边考核，加重平时成绩在总成绩中的比例，这样能够全面评价学生的网页设计能力。

2.试卷分析

考试命题完成是在课程教学大纲的框架下完成的，全体学生《网页设计》考试采用理论+实操的形式，试题覆盖教学的全部内容。从考试结果分析，试卷注重基础知识的考查，难度偏易，区分度较好。从学生考试时间分析，90分钟内学生全部能完成考试，以下是试卷分析结果。

试卷分析结果

五、结语

课程是培养人才的最基本的元素，是人才培养过程中最基本的单元。通过对《网页设计》课程定位与性质、教学内容与教学条件、教学方法与教学手段和课程考核与试卷分析的解析，加强课程建设，提高课程教学质量。

参考文献：

[1]丁海燕.网页设计与制作教学实践研究[J].实验科学与技术，2015，13（2）：166-168.

[2]于文波.基于虚拟仪器的“电工实验”课程考试方法改革研究与实践[J].沈阳工程学院学报（社会科学版），2014，10（2）：241-244.

网页课程设计报告2 篇4

计算机是科学于艺术的完美结合。我具有一定的音乐艺术基础，并且对音频视频的艺术设计有着浓厚的兴趣，所以我在暑假期间，自学了《Cool Edit pro2.1》，《Adobe Premiere pro2.0》，《After Effects》的一些相关知识以及一些其他的相关软件,下面我来谈一谈我个人的一些见解

首先我来简单的谈一谈我对音频处理技术的个人见解。我在中学时期考取了二胡八级证书，同时我对音频的创作以及后期处理比较感兴趣。下面我来简单的介绍一下《Cool Edit pro2.1》。

Cool Edit 2000是一个功能强大的音乐编辑软件，可以运行与Windows 95/NT下，能高质量地完成录音、编辑、合成等多种任务，只要拥有它和一台配备了声卡的电脑，也就等于同时拥有了一台多轨数码录音机、一台音乐编辑机和一台专业合成器。

Cool Edit 2000能记录的音源包括CD、卡座、话筒等多种，并可以对它们进行降噪、扩音、剪接等处理，还可以给它们添加立体环绕、淡入淡出、3D回响等奇妙音效，制成的音频文件，除了可以保存为常见的.wav、.snd和.voc等格式外，也可以直接压缩为MP3或Cool Edit 2000（.rm）文件，放到互联网上或email给朋友，大家共同欣赏，当然，如果需要，你还可以烧录到CD上。甚至，借助于Cool Edit 2000对采样频率为96kHz、分辨率为24位录音的支持，你还以制作更高品质的DVD音频文件。

用Cool Edit 2000编辑声音，与在字处理器中编辑文本相似，一方面，都包括复制、剪切和粘贴等操作。另一方面，都须事先选择编辑对象或范围，这些操作才有意义，对于声音文件而言，就是在波形图中，选择某一片断或整个波形图。一般的选择方法有，在波形上按下鼠标左键向右或向左滑动，如果要往一侧扩大选择范围，可以在那一侧右击鼠标，要选整个波形，双击鼠标即可。此外，Cool Edit 2000还提供了一些选择特殊范围的菜单，它们集中在Edit菜单下，如Zero Crossings（零交叉），可以将事先选择波段的起点和终点移到最近的零交叉点（波形曲线与水平中线的交点）；Find Beats（查出节拍），可以以节拍为单位选择编辑范围。对于立体声文件，你还可以单独选出左声道或右声道，进行编辑。添加音效，是Cool Edit 2000最激动人心的功能。在Cool Edit 2000的菜单Transform（变换）下，有20个子菜单，通过它们，用户可以方便地制作出各种专业、迷人的声音效果。如Reverb（余音），可以产生音乐大厅的环境效果；Dynamics Processing（动态处理），可以根据录音电平动态调整输出电平；Filters（过滤器），可以产生加重低音、突出高音等效果；Noise Reduction（降噪），可以降低甚至清除文件中的各种噪音；Time/Pitch（时间/音调），能够在不影响声音质量的情况下，改变乐曲音调或节拍等等，最神奇的是Brainwave Synchronizer（脑波同步器），可以通过立体声耳机，产生有助于入睡、放松，甚至思考的音乐。

显然，在描述这些奇妙的音效方面，语言未免显得有些苍白无力，最好的学习方法，就是反复试用、反复体会它们。你可以录制或打开一个现成的声音文件，然后，点击菜单

Transform，选择一种音效，调整音效的各项设置，或直接选用一种预置效果，按下OK按钮，听听看，不满意用Undo还原重来。

以下是我总结的音频后期处理的几个基本的步骤。一，降噪。二，高音激励。三，压线。这三个是最基本也是必不可少的三个步骤。具体的操作方法在这里不一一介绍。后面的处理步骤并不唯一，要根据演唱者或乐器音色的特征，在加上你丰富的工作经验。学好《Cool Edit pro2.1》理论知识是一方面，多动手，勤动脑，重思考，积累丰富的工作经验更为重要。只有通过平时的日积月累，我们才能创造出最完美的音轨。

下面我再来谈一谈我对视频处理的个人见解。首先进行视频处理，最基本，最常用，最专业的软件就是《Adobe Premiere pro2.0》。同时还要用到一些其他的相关软件，比如《After Effects》，《Adobe Photo Shop》，《3D Max》等。下面我着重介绍一下《Adobe Premiere pro2.0》。

《Adobe Premiere pro2.0》是一款功能强大，专业的视频处理软件。它不仅适用于专业的影视后期制作人士，而且适用于业余的影视制作爱好者。它的应用范围也相当广泛，包括：广告设计，影视制作，网页设计，等领域。主要功能包括：视频的剪辑，排版，片段编辑，字幕编辑，音频处理，视频特效，运动特效，节目渲染，影片输出。同时Premiere 6.0中，首次加入关键帧的概念，用户可以在轨道中添加、移动、删除和编辑关键帧，对于控制高级的二维动画游刃有余。Premiere6.0提供了兼容于QuickTime系统和其他系统的第三方插件，使用这些插件可以实现视频(滤镜)效果和过渡效果。由于提供了光盘刻录插件，可以轻松的制作出适合光驱播放的影片。

同时《Adobe Premiere pro2.0》支持的格式相当丰富，常用的视频格式有：AVI,WMV等。音频格式有：MP3,WMA,WAV等。图片格式有：JPG,JPE,JPEG,GIF,PSD。值得一提的是当导入PSD格式图片时，Premiere可以保留图片中的图层信息，并且可以对图层信息进行相关的特效处理，这是Premiere 的一大亮点

下面我来以我暑假的工作经验，介绍一下制作一个完整的MV的过程。首先，我们要明确MV制作大体分几个步骤。一，素材搜集与整理。二，素材剪辑与排版。三，片头，片尾以及字幕编辑。四，渲染与输出。五，压缩。

首先搜集素材的方法有很多，可以用DV甚至手机进行拍摄。可以用屏幕录像软件直接在计算机上录制一些动漫，游戏的片段。由于设备的限制，我主要是使用《Game Recorder》（游戏录像机）来录制一些游戏中的镜头。

素材录制好后，可以做一下简单的整理，比如说重命名或者分类管理。然后导入到Premiere 中，进行剪辑与排版，此时要发挥充分想象力与无限的创意，发散思维，不要局限于一点。

接下来的步骤是添加字幕，Premiere有着强大的字幕编辑功能，文字的特效，滚动，都可以轻松的实现。再接下来就要为你的MV制作精彩的开头与结尾。此时要用到的相关软件有《After Effects》，《Adobe Photo Shop》，《3D Max》。这里就不做具体的介绍了。

确认调试好后就可以进行渲染了，渲染也称作预演，为输出服务。最后在计算机上选择一个较大的磁盘空间，将制作好的MV输出。但你会发现，输出的文件相当大，不便于传播。此时就要进行最后的步骤——压缩。将输出的AVI格式的影片压缩为常用的RM格式影片，文件的体积便小了很多。

还有一些专场特效的设置，视频音频特效的添加以及关键帧的灵活运用的相关技巧，是在书本上学不到的，这些技巧都是我在平时的工作中自己发现的。学好《Adobe Premiere pro2.0》基础知识很重要，但是动手能力的培养，勤于思考的习惯起到了不可忽视的作用。

以上就是我在暑假积累的学习与工作经验，在今后的学习中，我会进一步强化我的专业知识，培养动手能力，注重积累丰富的工作经验，我相信，我会在我的领域取得成功！

电子信息学院07级计算机网络技术2班

学习网页设计课程心得 篇5

HTML（Hyper Text Mark-up Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部、主体两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。

HTML文档制作不是很复杂，且功能强大，支持不同数据格式的文件镶入，这也是WWW盛行的原因之一，其主要特点如下：

1、简易性，HTML版本升级采用超集方式，从而更加灵活方便。

2、可扩展性，HTML语言的广泛应用带来了加强功能，增加标识符等要求，HTML采取子类元素的方式，为系统扩展带来保证。

3、平台无关性。虽然PC机大行其道，但使用MAC等其他机器的大有人在，HTML可以使用在广泛的平台上。

CSS 语法由三部分构成：选择器、属性和值。selector {property: value}选择器通常是你希望定义的 HTML 元素或标签，属性是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明：body {color: blue}上面这行代码的作用是将 body 元素内的文字颜色定义为蓝色。在上述例子中，body 是选择器，而包括在花括号内的的部分是声明。声明依次由两部分构成：属性和值，color 为属性，blue 为值。

色彩可用色调（色相）、饱和度（纯度）和明度来描述。人眼看到的任一彩色光都是这三个特性的综合效果，这三个特性即是色彩的三要素，其中色调与光波的波长有直接关系，亮度和饱和度与光波的幅度有关。

色彩的三要素： 明度、色相、饱和度。

刚刚接触超文本，遇到的最大的障碍就是一些用“<”和“>”括起来的句子，我们称它为标签，是用来分割和标记文本的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。

1.单标签

某些标记称为“单标签”，因为它只需单独使用就能完整地表达意思，这类标记的语法是：< 标签名称>

最常用的单标签是
, 它表示换行。

2.双标签

另一类标记称为“双标签”，它由“始标签”和“尾标签”两部分构成，必须成对使用，其中始标签告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标签告诉Web浏览器在这里结束该功能。始标签前加一个斜杠（/）即成为尾标记。这类标记的语法是：

<标签> 内 容

其中“内容” 部分就是要被这对标记施加作用的部分。例如你想突出对某段文字的显示，就将此段文字放在一 标记中：

第一：

3.标签属性

许多单标记和双标记的始标记内可以包含一些属性，其语法是：

< 标签名字 属性1 属性2 属性3 … >

各属性之间无先后次序，属性也可省略（即取默认值），例如单标记

---

表示在文档当前位置画一条

水平线（horizontal line），一般是从窗口中当前行的最左端一直画到最右端。带一些属性：

11计算机1班徐略俊20110610040120

---

中SIZE属性定义线的粗细，属性值取整数，缺为1；ALIGN属性表示对齐方式，可取LEFT（左对齐缺省值），CENTER（居中），RIGHT（右对齐）；WIDTH 属性定义线的长度，可取相对值，（由一对 “ ”号括起来的百分数，表示相对于充满整个窗口的百分比），也可取绝对值（用整数表示的屏幕像素点的个数，如WIDTH=300），缺省值是“100%”。

学习心得

网页课程设计指导书 篇6

报告人：06计算机应用班××号×××

一、题目：×××网站的设计

二、设计任务、要求

（内容格式为宋体小四）

三、软件环境及工具

（内容格式为宋体小四）

四、网站的规划

（网站的规划及简要说明，包括网站风格、网站特点、网站色彩、网站内容、网站草图（文件构成和页面构成）、任务分解；网站技术、参照网站或参考书籍、所需资料等。内容格式为宋体小四）

五、网站栏目介绍

（站内栏目简介,包括网站的栏目组成、各栏目的简要说明。内容格式为宋体小四）

5．1首页

（网站首页内容的详细介绍，主要的制作思路及过程，可适当配合页面截图说明。内容格式为宋体小四）

5．2（栏目1）

（网站中某栏目内容的详细介绍，主要的制作思路及过程，可适当配合页面截图说明。内容格式为宋体小四）

5．3（栏目2）

（网站中某栏目内容的详细介绍，主要的制作思路及过程，可适当配合页面截图说明。内容格式为宋体小四）

…

六、测试情况

（网站在设计初期发现的问题及修改过程、设计完成后本地测试、上传测试等情况。内容格式为宋体小四）

七、答辩及验收情况

（内容格式为宋体小四）

八、设计总结和体会

网页课程设计指导书 篇7

前言

课程设计是高等教育针对某门课程开展的综合性实践教学环节, 学生根据课程教学目标运用所学的理论知识和相关技能, 完成教师指定范围内的具有综合性、应用性的具体内容, 来达到考核和训练的目的。

依托课程设计培育项目开发软件工程思想

网页设计是高职计算机相关专业 (计算机应用技术、信息管理、网络技术、移动通信技术等专业) 的一门集知识、技能于一体的专业基础课程, 对于高职院校学生来说需要掌握并具备HTML语言、美术基础、图形图像处理、动画技术、CSS层叠样式技术、各种脚本语言等多项软件开发技术。

通过多年的教学实践发现, 学生对程序设计类相关课程的学习越来越不感兴趣。特别是到学期结束, 要进行课程设计时学生没有任何思路和想法, 到处找点东西拼凑起来交差应付了事。能否在前期项目积累的基础上, 再拓展一些学生感兴趣的点, 让学生多一些发掘潜能的机会, 在课程设计中就必须强调教学过程与软件开发进程的一致性, 遵循“以学生为主体, 教师为主导”的原则, 其精心选择设计项目且兼顾技能要求与接受能力, 强弱互补发扬团队协作精神互助完成既定项目, 在达到预期目标的同时锻炼他们项目开发的软件工程思想, 通过PDCA (Plan→Do→Check→Action) 四个基本活动提升软件项目的正确性和可用性, 对比国家标准编制项目的系列软件文档, 不仅训练了学生的文档写作能力, 并对软件工程活动中的前期调研、项目需求分析、项目设计与编码、项目测试及运行维护、总结验收等的过程管理有了一个具体的实践过程, 初步具备了从事工程项目实践的技能 (软件项目的系统与设计、编写文档、源码设计与控制、使用工具等基本职业素养) 。

结合课程进度布置课程设计任务

大多数计算机类课程的课程设计都安排在理论授课结束之后, 此时已基本接近期末, 学生处于备战期末考试状态, 各方面压力都较大, 很难有足够的精力投入到课程设计中。所以教师在本门课程第一节课时, 就需要将课程的性质、教学安排、课时量、考核方式和与社会岗位相融入的环节明确告知学生, 让学生对课程教学目标有一个非常明确、清晰地了解, 本门课程在职业岗位中所需要储备的职业能力等相关知识, 在学期过半时就需要将以任务书的形式把课程设计的指导思想、技术要求、拟实现的目标、编程思想、软件交付时间、团队组合形式及评分标准等相关内容一一告知给学生, 学生对此次网页设计课程的课程设计相关情况有了全盘了解, 且做到胸中有数, 积极自觉地提前熟悉并开始着手策划。

在过期过半时就需要布置课程设计任务, 此时学生已掌握了大量的基础性知识, 将软件开发所需要掌握的语言Java Script的学习和使用同步嵌入, 让学生了解Java Script是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言, 常用来给HTML网页添加动态功能来响应和增强用户的各种操作, 如改进设计、验证表单、检测浏览器、创建cookies以及更多应用;而且还可以用于服务器端的编程, 为客户提供更流畅的浏览效果。然后在技术环节和综合能力方面随课程进度开始逐步点拨, Java Script程序语言基础、Java Script对象、基于Java Script的程序设计思想、网页游戏规则的制定、游戏算法的选定等。对于所涉及的未学过的知识, 可鼓励学生积极自学, 利用课余时间积极阅读相关资料, 激发学生学习的自主性, 提出疑惑寻求援助提前进入课程设计状态。再通过两周的集中实训实践任务内容, 以四名学生为单位的小组形式通力协作顺利完成项目预期, 每位学生都需要安排独立完成的环节和内容, 促使每位学生都积极动手进入角色真正达到锻炼和提高学生能力的目的。

构建课程设计项目培养核心能力

网页游戏提供了一种轻量级的娱乐方式, 操作简单, 打开浏览器就可以开始游戏操作。考虑到学生对网页游戏比较熟悉和感兴趣, 而且连连看网页游戏是一款比较典型的网页小游戏, 学生在前期学习的基础上, 具备开发一套网页版连连看休闲小游戏的能力, 给忙碌紧张的学习生活制造一点轻松的创意。根据前期调研初步选择Java Script客户端脚本语言进行连连看网页游戏的开发, 通过游戏项目的开发使学生将收获到以下经验和知识:

●熟练掌握Java Script客户端脚本语言

●掌握基于对象的编程思想

●掌握连连看游戏开发过程

●能够进行需求分析和合理地编制出项目计划书

●能够进行项目设计

●掌握主要功能模块的实现方法

●提高沟通意识和协作技能

兴趣是最好的老师, 只有感兴趣了才能充分调动其主观能动性, 才能最大限度地挖掘人的潜能。有一部分学习基础较差的学生学习积极性并不高, 有一种无法抗拒的厌学情绪学什么都没劲, 而对一些网络小游戏则是非常迷恋, 甚至可以达到通宵达旦、废寝忘食地步。承认和尊重学生爱玩的天性, 如何让学生在掌握教学大纲中规定的知识和技能的基础上, 把网页游戏项目引入网页设计课程设计中, 通过简单易行的小游戏引导学生主动参与的积极性, 从爱游戏到爱程序设计这门课程。在整个课程设计环节, 学生是主体, 教师是指导者, 教师的主要职责是及时掌握每组学生的设计方案, 确认方案的可行性, 避免学生在设计中走弯路;当学生在设计中遇到问题时, 则应适时引导和启发学生自己寻找解决问题的方法。当出现较为普遍的问题, 可采用集体答疑方式师生一起探讨解决问题的方法, 通过问题讨论可激发学生主动探索解决问题的积极性, 增强学生间和师生间的互动与交流。发现好的思想及时给予肯定和表扬, 给学生足够自主的设计空间和多样化设计形式, 激发学生的创新意识, 以“能力为本位”充分发挥潜能培养学生的团队协作能力、编程能力和项目开发的体系构建, 以事半功倍的效果为今后的就业和工程实践奠定开发基础。

抓住技术重点掌控项目实施过程

在前期项目准备和需求分析的基础上, 先确定拟开发游戏的名称和具备的功能, 采用Webding符号作为图形符号操作对象, 实现在一定时间内消除游戏区中所有图块的目的。连连看作为大众型娱乐小游戏, 其用户界面是决定软件质量的首要条件, 建议学生先从用户界面设计入手, 采取先易后难、循序渐进的方法, 由于未涉及程序代码的编写, 学生容易入门, 不会感到有太大的困难, 极易产生满足感、成就感, 以此激发进一步学习的热情。

项目设计阶段的主要工作任务是在项目分析阶段的基础上, 经过设计人员的研讨, 产生对设计目标的概念, 形成可视化设计方案 (草图) , 它是设计团队间最佳的沟通介质, 可以直观地解释项目设计目标。可采取项目设计报告会、设计大赛等形式来激励设计者设计出更好的作品, 主要阶段成果为项目设计方案 (说明书) 。

项目制作阶段的主要工作任务是在项目设计基础上, 根据设计方案进行网页制作、程序开发、测试及文档编写。程序开发中的编码工作任务比较繁重, 不仅需要考虑性能和功能的实现, 而且需要考虑今后的维护和扩展, 更需要考虑系统的集成和稳定, 因此程序开发以Java Scrip客户端脚本编程技术为切入点, 严格遵照规范 (文档规范、编程规范) 的开发过程进行。本阶段的主要阶段成果为网页、程序代码和使用说明文档, 可采取文档规范和编程规范培训 (或专题讲座) 、项目制作协调会等形式, 来保证项目的质量。

⑴设计连连看游戏网页界面

界面设计本着美观实用, 面向大众的原则, 充分考虑界面易于操作的系统需求, 分为两个主要分区。上方为游戏控制区, 主要包括初始化信息和时间显示内容。玩家可以通过游戏控制功能来选择难度系数、开始新一轮游戏 (洗牌) 或者退出游戏;下方为游戏区, 是游戏主体界面, 布局设计简单直观置于界面的正中主体位置。

⑵连连看游戏网页的功能模块设计

根据项目设计方案 (说明书) 中连连看游戏网页的基本功能需求, 进行功能模块设计。 (1) 确定本项目对象树并创建根对象 (命名空间) ; (2) 游戏控制区功能模块设计; (3) 游戏区功能模块设计; (4) 游戏主控程序; (5) 代码整合及部署。根据系统工程概念建立一个网站文件夹实现目录分类管理, 将llkcodetest1.0.js脚本文件放于网站的js文件夹下。用户界面文件作为主页文件index.html放于网站根下, 网页图片放在网站的img文件夹下, 背景音乐放在mid文件夹下。 (6) 应用程序测试。

根据评价考核指标验收学习效果

在课程设计项目组织实施过程中, 学生都在渐进式地完成属于自己的项目部分, 其结果如何直接反映了每位学生的学习态度、知识的掌握程度。实行以“能力考核为中心”的“考核方式验收学习效果, 要求学生对项目作演示汇报总结, 分析项目在开发过程中取得了哪些成绩, 存在哪些缺点和不足, 有什么经验、在哪些方面有所提高, 反思、归纳课程设计的实施过程, 可以使学生更深刻地加深知识的掌握。再由相关学科的教师组成的项目验收小组核查项目计划规定范围内各项工作或活动是否已经全部完成, 可交付成果是否令人满意, 并将审查和评价结果记录在验收文件中给出综合评分, 结合学生相互评定的分数作为学期总评成绩, 既体现了公平性, 又体现出权威性。

网页课程设计指导书 篇8

【关键词】网页设计与制作；现状分析；课程改革；实践

引言

随着信息产业化建设不断升温，互联网已经成为我们难以割舍的重要部分，信息发布、产品推介等通过网页快速高效的传递到世界每个角落，越来越多的企业开始重视企业网站建设，网页设计人员就业前景越来越好，就我国而言网络企业数量还不到整体企业的1/5，职业学校担负着计算机专业人才培养的重任，为了满足企业对人才的要求，我们应严格按照国家要求，解决教学中存的问题，不断提升课程教学与实际应用的契合性，提升学生学习兴趣，为未来方便就业奠定坚实基础。

《网页设计与制作》课程有其自身特点，这是一门操作性要求较强的课程，学生们通过学习操作，运用软件完成一些设计作业，深层次挖掘可以发现，该课程实践性强，却也是一门边缘学科，因此在课程教授时需要不断激发学生兴趣，将更多的理论赋予实践，始终要学生们保持操作学习，只有如此，才能掌握要领。

一、计算机《网页设计与制作》课程现状分析

随着课程改革不断深入，高职院校相对以往理论填鸭式教学已经有了很大的改观，目前我们的多媒体教学应用开始普及，学生边操作边学习已经成为教学主流，尽管如此一些理论与实践的脱钩现象还是存在的，我们的学生实际设计能力与未来从业要求还有一定差距，这是传统教育的弊端体现，也是未来我们要攻克的难关，对于目前《网页设计与制作》课程普遍存在的问题进行分析，可以发现我们需主要解决的问题有：

首先教师教学水平需提高。《网页设计与制作》的执教教师需要了解目前的市场变化与行业需求，面对日新月异的发展要做到有计划的调整教学方法，传授给学生更多更新的咨讯与学习方法，这些都有助于学生提升实践操作能力，我们设计网页将来服务各行各业，这就需要我们有丰富的信息来源，有条理的梳理各行业特点，可见我们的教师承担的任务不仅仅是课堂上为学生讲解理论知识。高水平的教师能够带动学生的积极性，教学效果好。

其次教学目标需要更清晰明确。目标是教学的落脚点，《网页设计与制作》作为实践课，在上课之初我们就应告诉学生教学目标，学生在学习过程中有的放矢，直接击中学习的重点和难点，简而言之，强化对学生未来从业有用的教学部分，弱化辅助性的理论部分，将了解与掌握的部分直接明了的告诉学生。

再次应重视项目教学。以往的教学中我们对项目任务不是很重视，也没有监督每个同学完成，其实这是考察学生实践能力的重要途径，教学过程中应严格按照教学步骤分享学生们的项目任务，不断强化项目于社会需求、市场需求的同步，让学生在校园感受未来就业时的工作状态，有利于学生消化课堂重点的同时会有更多的创新部分被发掘，学生进步更快。

二、网页设计与制作课程教学目标与定位探索

《网页设计与制作》旨在培养学生设计与开发的能力，其中涉及到Dreamweaver、potoshop、coredraw等软件的应用，通过学习，学生们能够规划网站，设计版块等，加工信息、处理各类框架布局，最终完成一项项目任务。由于从业后学生们需要按照客户要求，对网页设计做出策划、制作等，因此在《网页设计与制作》课程学习过程中，我们不仅要培养学生对软件的使用的能力，还有沟通能力、搜集能力、协作能力等。

《网页设计与制作》课程教学过程中要始终确立“培养学生综合能力”的目的。综合能力是计算机应用的综合能力，这就将我们的而教学改革落到了实处，极好的解决理论与实践脱轨的问题，高职学生在具备WINDOWS系统操作能力后，熟悉办公软件，专业方面熟练掌握Dreamweaver、potoshop、coredraw等软件，通过学习能够独立完成页面不同主题、内容、功能等项目任务。总而言之，《网页设计与制作》课程就是要提升学生在数字媒体应用上的理论水平及实践能力，能够独立完成网页设计与制作。

三、网页设计与制作课程教学改革设计建议

1.课程教学内容设计。网页设计涉及的原理与技术相对较多，比如ASP/和HTML等，我们在一门课上很难做到面面俱到，这就需要我们教师在教课时做到将多种软件相互交织渗透，结合固有的知识点做一些不要的延展，提升学生的综合能力。一个完整的网页少不了精美的图片，这就需要学生们熟练掌握potoshop，利用技术对一些不完整的画面做细节处理，结合coredraw可以对文字进行设计编辑，在教学过程中教师尽量以一个完整的网页案例作为模板，让学生综合运用各类软件丰富其中的细节和板块，提升学生的操作实践能力。

2.提倡“任务驱动”教学法。这里是对教学内容设计的深化，我们在做课堂教育时，提出一个完整网页设计案例，要学生们找到重点，将其中的画面、板块、构架等融入讲解，以多媒体教学手段，做出演示，一些特殊的知识点要重点作出强调，最后要给学生们布置任务，即设计一个网页出来，还要进行评分，与案例网页的对比，学生们有一定的参照性，通过动手实践，学习能力会有很大的提升。

3.实现教学相长。教与学本身就是同步的，在体现实践性的部分，我们拥有的优越条件是，让学生们人手一机，独享一台计算机远比看大屏幕要强得多，学生们可以时刻保持与老师的思路同步，在操作上也可以做到随时遇到问题随时解决。通过网络我们可以下载到更多有用的案例或可见，节省教师的时间，也能够让学生切身感受到学习乐趣，根本上提升学习效率。

4.设计实验环节。很多学生实际上已经掌握了很多理论知识，且在实践操作方面也大大超过了我们的课程安排，这里我们需要对学生做摸底，做到提升兴趣激发更身层次的求知欲，我们要给学生们一些命题实验，比如做一个公益活动推广类网页等，让学生们分组完成，该项目可以为学生们的综合考核加分，通过项目试验，可以锻炼学生的开发能力、写作能力，为就业做好准备。

5.改进考核方式。目前我们更注重学生将理论与实践相结合，因此在做考核时也要考虑这一点，三位一体的考核方式适应当下的教学，即任务作业、实践操作、理论考核等三方面评定，任务作业的比重可以有20%、实践操作60%、理论考核有20%，通过有重点的量化，在平时的教学过程中更有针对性的培养学生动手创新能力，重视上机操作，尽量多的拿出作品，为自己的学习加分。

四、结束语

综上所述，高职教育的网页设计与制作更注重学生的技能培养，通过理论与实践深刻结合，不断缩短用人单位与所供人才之间的差距，通过我们不断对课程的改进和设计，《网页设计与制作》已经走出传统的教学模式，广泛激起了学生的而兴趣，且更多的学生愿意为作品倾注心血，未来通过课程教学内容设计更新、提倡“任务驱动”教学法、实现教学相长、设计实验环节、改进考核方式等，相信我们的教学定会取得长足进步，教学效果更好。

参考文献：

[1]张伟娜.《网页设计与制作》课程教学的探讨与实践[J].中国教育信息化.2008.02.

[2]仲静.告知网页设计与制作课程教学改革探析[J].电脑知识与技术，2014.11.

[3]喻会.高职《网页设计与制作》课程教学改革浅析[J].湖北成人教育学院学报，2015.04.