现在流行的网页制作软件有很多，如Macromedia公司的Dreamweaver、微软公司的Frontpage、还有AdobePagemill3.0--制作多框架，表单和Imagemap图像的网页工具、Netscape等等。其中Frontpage更以其功能强大、容易上手、界面亲切而著称。它采用所见即所得的方式编辑网页，利用它可以轻松的组织、编辑网页并将其到指定的站点上，而且在之后还能对更新情况进行监控以更新站点的内容。
工具准备好了，可根据你的个人喜好来选择一些素材，如图片、喜欢的文章等。现在就让我们从第一步的建立站点来踏上建造网上家园之旅。
用FRONTPAGE创建站点是很容易的。首先，我们来看一下创建一个只包含一个网页的站点。选择“文件”菜单的“新建”选项，单击“站点”命令，这时新建站点对话框就弹出来了，在“指定新站点位置”文本框中输入新站点的位置，单击“只有一个网页的站点”图标，单击“确定”按钮。这就建立好站点了，我们现在来看一下新的站点里有什么，单击“视图”工具条的“文件夹”按钮。在文件夹列表里有一个网页文件，名字叫做“index.htm”。我们知道，每一个站点都要有一个主页，这个主页也是一个网页文件。浏览者访问站点时首先进入的就是站点的主页。主页的名字在一般情况下就叫做“index.htm”。就是说我们新建只包含一个网页的站点时，FRONTPAGE就自动为我们创建了站点的主页了。这个新建的站点主页时空的，我们可以向里面添加内容。
在文件列表里除了主页之外，还有文件夹。新建站点时，FRONTPAGE都会在站点所在位置下新建两个文件夹，一个是“images”另一个是“_private”。我们在编辑站点时可以在“image”文件夹里放置站点用到的图片。“private”文件夹比较特殊，其中的文件对浏览者来说是隐含的，我们可以把一些不想让浏览者看到的网页文件放在这个文件夹里，比如：我们可以在这个文件夹里存放注册用户的个人信息。
尽管每一个站点都要有一个主页，不过创建站点时我们仍然可以从一个空站点开始：选择“文件”菜单的“新建”命令，单击“站点”选项，在“新建站点”对话框里，我们可以选择“空站点”图标来创建一个空站点。“新建站点”对话框中还有许多其他图标，这是FRONTPAGE提供的用来创建站点模板或向导。我们创建只有一个网页的站点或者创建空站点，都是从头开始来创建一个站点，这就好像盖房子一样，首先画图纸。然而，有许多的房子都具有相似的结构和用途，所以我们可以用一张图纸盖很多相似的房子，这样就节省了许多工作。
同样的，尽管站点的风格千差万别但是有许多站点的功能和结构都是一样的，如果我们从头开始建立站点的话，就要做许多重复劳动，这时，我们就可以使用模板或向导来建立站点。模板和向导的作用就好像盖房子的图纸一样，我们不必每次建立站点时都从头开始。我们单击“个人站点”图标，用它可以迅速创建一个个人站点，输入站点所在的位置，单击“确定”按钮，这样我们刚就创建了个人站点。个人站点模板已经为我们规划好了站点的目录和建立了相关的页面。现在我们点击一下“文件夹”按钮，双击index.htm图标，
看，这就是我们的个人站点的主页。哎，好象有许多文字都不对，没关系，这些文字都是可以改变的，现在写的是文字的用途，比如“主题”文字就是用来写网站标题的地方，我们只要把它改为自己喜欢的标题就可以了。返回到“文件夹”模式，双击photo.htm。也可以把风景图片换成自己的照片，只要在新建站点的基础上进一步修改就可以做出自己的个人站点了。这不仅节省了许多力气，同时也给了初学者一个良好的出发点。
那么模板和向导有什么区别呢？我们安装软件时，一步步的用对话框提示我们完成安装过程的程序就是一个向导。在FRONTPAGE里，向导也是一种模板，不过它是一种特殊的模板，它会以对话框的形式辅助你完成站点的创建过程。
你看，FRONTPAGE提供了两个向导：公司展示向导、讨论站点向导，使用起来都很方便，你有兴趣也可以利用向导建立一个站点。
创建页面最简单的方法就是单击FRONTPAGE“常用”工具栏的“新建”按钮。它的右方有一个向下的小箭头，它是用来选择要新建什么，可以用“新建”按钮新建网页、站点、文件夹和任务。默认状态下是新建网页。
如果要新建网页，可以不用向下箭头键选择，而直接单击“新建”按钮。不过使用文件菜单的“新建”命令来新建网页能够有更大的选择。单击文件菜单的“新建”命令，选择“新建网页”，在“新建”对话框里，可以看到FRONTPAGE提供的许多网页模板，我们可以用这些模板来建立相应的网页。在右下角的预览框里可以看到选中模板的外观。选择“两栏正文”网页，这样就创建了一个新的分为两栏的网页了。然后点确定。使用模板可以不用总是从空白网页开始编辑，这样就省力很多。
网上几乎所以的网页都使用图片加以点缀，在网页中插入适当的图片，能够产生图文并茂的效果。
首先要看你的图形是什么格式的，也就是它扩展名是什么只有扩展名为GIF和JPEG的图形文件才能成为我们的页面的一部分。因为这两种图形格式不仅应用广泛，而且有利于节省存贮空间。如果图形不是这种格式，使用了其它格式的图形文件，在保存网页时FRONTPAGE会提示做格式转换，FRONTPAGE可以自动进行格式转换。
现在可我们看看怎么插入图形选择“插入”菜单的“图片”命令，单击“来自文件”按钮。
在默认情况下，FRONTPAGE认为你要插入的图片总是放在你建立的站点的目录或它的子目录下的。可以说,站点就是一个目录。我们把编辑的许多网页文件放在同一个目录下，我们称这个目录为站点的主目录。这些网页引用的图形一般也放在这个目录下。当然，我们也可以在这个目录下建立其他的子目录，再把所有的图形放在子目录里。所以搜索下拉列表只允许在主目录和主目录下的子目录进行选择。
如果要插入的图片不在主目录下,在“选择文件”对话框中进行选择。选择好文件以后，单击“确定”按钮，回到“图形”对话框。单击“确定”按钮，图形就插入了。现在单击“常用”工具栏的“保存”按钮。在“另存为”对话框中输入新的web页文件的名字，单击“保存”按钮。出现了一个对话框,因为我们刚才插入的文件不在站点内，现在FRONTPAGE要把它复制到站点内，可是使用什么名字，放在站点的哪个目录下呢，就要在这设置了，单击“改变文件夹”按钮，另外这儿还在需要时对图形的格式进行转换。单击“位置”按钮，在默认情况下，图形被保存在站点的主目录下，现在我们选择IMAGE目录，单击“确定”按钮。回到“嵌入式文件”窗口，再单击“确定”。这样，图形就保存在站点内了
我们还可以从INTERNET上插入一个图形。选择“插入”菜单的“图片”命令，在URL栏内输入图片的地址，单击“确定”按钮。由于是插入网上的图片，因此在插入图形以后，应该保存一下网页，使图形存到站点内。
您可能说,我不会画画，插入图片容易，可是编辑图片就不容易了。没关系，FRONTPAGE自己带有许多剪贴画，你可以把它们插入到自己的网页。选择“插入”菜单的“图片”命令，选择“剪贴画”。你看，各种剪贴画都分类放好了。你可以自由地选择。不过，插入后别忘了保存网页，把剪贴画复制到站点目录下。
一般我们插入的图形总是和文本在一起的，所以调整图形和文本的对齐方式很重要。在默认情况下，图形自动与文本的底部对齐。这一个网页，由于默认的对齐效果，页面出现了大量的空白。这时就要调整图形的对齐属性。在图形上单击鼠标右键，选择“图片属性”，选择“外观”选项卡我们把对齐方式调整为“左对齐”。使用图形可以使网页更加丰富多彩，而且我们还可以用图形来建立超链接，使网页相互联系起来。怎么用图形来建立链接呢？其实图形超链接只要在建立超链接时选择图形就可以了。首先选中超链接的图形，单击箭头图形，单击“常用”工具栏“超链接”按钮，选择主页文件“页面1.htm”，单击“确定”按钮.在普通模式中，按住CTRL键，单击箭头图形，就跳到主页页面了。
如果我们要在图片上加上文字，单击图形工具栏“文本”按钮，现在图形中就出现了一个文本框，输入：“计算机软件”按一下Esc键，取消文字编辑，就选中文字框了，调整文本框到合适的位置，单击页面其他区域，文字就添加成功了。
如果我要修改单击一下要修改的文字，这时文字作为一个整体被选中了，再点一下文字，这时文本框里有光标闪烁，你可以编辑文本了，重新输入：“计算机硬件”，在页面其他区域单击。文字就修改完成了。
字体设置：选上文字，打开格式工具栏的“字体”下拉列表框，在里面选择相应的字体就可以了。如果浏览网页的人使用的计算机没有设置的字体？浏览器会用系统默认的字体代替你设置的字体。不过，使用常用字体是一个好习惯。
字的颜色：单击“格式”工具栏“字体颜色”按钮旁的向下箭头，选择适当的颜色，字的颜色就改变了。
还可以对字体进行一些其他设置。选择“格式”菜单的“字体”命令，在这里我们还可以作进一步的设置。这里除了“格式”工具栏可以做的设置以外，还可以设置许多效果。
“字符间距”选项卡：它是用来设置文字的间距的。单击“间距”下拉列表，可以选择字符的间距是普通、扩充还是紧缩的。选择扩充，这时预览框的文字间距就变大了。也可以调整间距大小来改变间距，输入10，文字的间距就更大了。
“定位”下拉列表：在FRONTPAGE中每一行都有一个底线，定位就是指文字相对于底线的距离。也就是把文字上下移动，现在选择“上移”，文字就向上移动了。预览框中的黑线就是行的底线。
方法是，一般只要切换到预览模式就可以了。单击“预览”选项卡，在这个预览模式下的显示和在浏览器中的显示是一样的。但这并不意味着我们就不必用浏览器来检查编辑的网页了。因为即使是同一个页面，可能在不同的浏览器中显示会不太一样。比如在INTERNETEXPLORER中是这样显示的，但是在NETSCAPE中又是那样显示的。所以，我们要在自己的机器上多装几个浏览器，用来检查网页的兼容性。
那么为什么不用不同的浏览器来检查呢？选择“文件”菜单的“在浏览器中预览”选项，在浏览器列表框中选择不同的浏览器。（以INTERNETEXPLORER5.0为例）单击“确定”按钮。就可以看到新建页面在浏览器中的效果了。
怎样才能自己做的网页相互联系起来呢?也就是说让别人点页面上的图形或文本就跳转到其他页面呢？
选择“插入”菜单的“超链接”命令，在文件列表框内选择“页面1.htm”文件，注意在URL文本框中显示了该文件的地址。单击“确定”按钮.超链接就制作成功了。我们切换到预览模式（单击预览按钮），当我们把鼠标指向“主页”两字时鼠标变成手形，单击它，我们就切换到主页了。
那么为什么不在普通模式下试呢？：因为普通模式主要是用来编辑网页的，当我们在普通模式把鼠标指向“主页”两字时鼠标没有变成小手状，因此不能进行页面切换。不过如果按住CTRL键，鼠标就变成了小手状。这时单击就可以进行切换了。也就是说在普通模式中按住CTRL键才能激活超链接。
我们也可以将超链接指向其他站点的网页。选中作为超链接的文本，单击“常用”工具栏的“超链接”按钮，这和选择插入菜单的超链接命令是一样的。在“创建超链接”对话框里，在URL地址栏直接输入要连接的网页或网站的地址。如果不清楚要作超链接的地址，只要单击URL地址框后面的放大镜就可以用浏览器在INTERNET上查找要链接的网页，FRONTPAGE会自动记录你找到的地址。单击“确定”按钮就可以了。我们还可以改变已经设置好的超链接。首先确认是普通模式，在要改变的超链接下单击鼠标右键，选择“超链接属性”命令，输入新的URL地址就可以了。要想取消超链接，删除所有URL地址框里的内容就可以了。还有一种超链接，可以链接电子邮件。这样可以使你的网上朋友通过Email及时与你联系，这是一个网站站长和网友交流的重要手段。先选中要作为超链接的文本，一般文本就是你的邮箱地址，单击“超链接”按钮，单击“信封”按钮，输入你的邮箱地址，单击“确定”按钮，退出对话框，选择“确定”，这时超链接就建立好了。我们试一下，切换到预览模式，单击邮件链接。
这样我们就差不多完成了网页的制作步骤，最后可将它到Web服务器上。站点前还要对它进行检查工作，包括超链接，页面等。
随着信息时代的发展，web技术的一天天成熟，如何制作出一个符合规范，美观又浏览速度快的网页已经越来越成为一个网页设计师所要考虑的重点了。过去的网页设计师只需考虑网页前台美工处理，然后切片形成网页即可，而自从CSS层叠式样式表诞生后，网页排版成为了一个新的网页技术研究的领域。在制作网页中，我们布局网页的方法一般有两种，第一种是使用table（表格）来布局网页，另一种是使用div容器来布局网页。下面我们就一个实例来讲解这两种方法来布局网页的操作步骤，以及比较两种方法的优点和不足之处。
第一步，打开dreamweaver8.0软件，数好目标表格的行和列（从最小的格子数起）点击插入菜单中的表格项，然后打开下面的属性面板
第三步，合并后，一定要严格定义好每行的高度，其次一定要定义好第二行每个单元格的宽度，注意三个单元格的宽度之和应该是表格的总宽度。
第四步，将总表格居中对齐，设置好表格的边框颜色以及每个单元格的底纹，即可。
这样，一个通过表格制作的网页框架就做好了，表格的每个单元格就可以存放图片、文字、动画等等了。
第一步，新建一个dreamwer文件，点击插入菜单中的插入布局对象中的div标签，点击确定；
新建完后将CSS样式的边框、底纹以及高度和宽度设置好。这样就设置好了顶部单元格。
设置好所有的css属性后，点击dreamweaver的编辑窗口div标签，点击如图5属性栏中的divID应用即可。
第三步，使用相同的方法继续插入布局对象中的DIV标签，第二行插入DIV应注意，首先插入一个大的div容器，然后在里面插入左中右三个div，定义好每个div的宽度后，注意左边和中间的div容器的css代码必须写入：float:left；否则div容器是无法形成横排的
第四步，使用相同的方法插入底部的第六个div容器。保持与上面容器宽度一致，同时在css代码中将每个div容器的底纹和边框设置好。
使用table表格来布局网页框架的优点：制作方法直接，直接通过插入菜单中插入以及属性栏中设置所有的操作即可，无需定义CSS样式；制作的速度快。缺点：由于html文件中的table标签的浏览速度较慢，所以，使用嵌套表格的方法来布局网页框架会使网页浏览的速度变慢。
使用DIV的方法布局网页框架的优点：可以通过css样式给框架进行功能强大的属性设置以及给网页的局部进行任意的定位，制作出来的页面浏览速度较快，同时页面的风格可以通过修改单独的css文件进行随意的修改和更新；缺点：每个div容器都需要定义css样式来控制，制作过程相比table方式要复杂。现在的网页越来越倾向于使用DIV的方法来布局网页了。:
table方法布局网页主要应用在功能较为简单、页面不多的网站中；而div主要应用于大型的网站页面设计中。
网页制作教学是技工教育计算机学科教学中的重要内容，传统教学模式下，习惯将计算机理论知识与上机实践分开教学，往往是理论知识教学与实践应用能力教学由两个教师来承担，教学效果并不理想。运用一体化教学模式，可以有效地解决理论教学与实践教学相分离的弊端，提高网页制作课堂教学的成效。
“一体化”教学是一种以教师为主导、学生为主体的现代化教学模式，在专业教师的指导下，教师通过设计大量的由简单到复杂、由浅入深的“实践活动”来完成教学过程。“一体化”教学模式是以培养具有扎实理论基础知识、操作技能强的复合型技能人才为目的，将教学大纲、教学过程有机地统和在一起，以实现理论教学与实践教学的目标要求。“一体化”教学模式具有课程理论适度化、模式一体化、内容综合化的特征，“一体化”教学模式对教师的个人综合素质要求较高，教师不仅要具有较高的理论讲授能力，更重要的是还能够熟练地运用现代化的教学手段、设施，具备较高操作技能。同时，“一体化”教学模式的运用，对硬件教学设施要求也较高，以网页制作教学为例，“一体化”教学模式的实施，可以采取自学、导学、助学、促学相结合的方式，规划并创建站点制作主页和内页优化网站和管理站点。《网页设计与制作》是技工教育的主干专业课程，该课程具有实用性强、应用面广、操作性强以及与未来就业岗位密切相关的特点，在《网页设计与制作》学科中，大胆地进行教学模式改革，打破传统的课堂教学模式，实施“一体化”教学，能够提高学生的学习能力、综合能力以及协作能力，激发学生的学习兴趣。
网页制作过程中，运用“一体化”教学模式，学生成为了学习的主体，在整个教学过程中，教师更多的是发挥引导协助的作用，这样不仅提高了学生自主学习的能力，而且对于落实网页制作学科的教学目标要求也具有重要的意义。
当前，各大中职院校基本上都开设了网页制作课程，其中“Dreameweaver网页制作”就是网页制作教学科目必修的基础性学科之一，是一门艺术与技术相结合、实践应用性比较强的课程，以在课程教学过程中运用“一体化”教学模式为例，确定设计思路时，首先就要打破传统的教学模式，确定以提高学生实践能力、动手能力为主的教学目标，让学生在动手操作、实训中建构相关的理论基础知识，逐步培养他们运用“Dreameweaver”技术的能力。由于“Dreameweaver”网页制作软件需要配合HTML语言的一些基础性知识，因此，需要对该项内容进行细分、设计，分解为多个子模块，每个子模块要都以培养学生的实践能力为主导，注重学生职业能力的训练，综合考虑课程理论知识、资格证书以及技能、态度等等要求。网页设计教学都是以典型案例为载体展开的，以“工作任务”为中心进行理论与实践整合，从而实现理论教学与实践教学的“一体化”。
在确定了设计思路之后，确立优秀的网站设计项目是“一体化”教学法实施成功的必要保障，否则，如果确定的网站设计项目不合理，一体化教学方法就失去了其存在的价值。项目的选择、网页的制作必须要具有系统性，而且要能够前后联系、相互衔接、由简入难，让学生使用素材库中的素材进行设计、分析，比如，在《网页制作》课堂教学过程中，教师可以让学生设计校园网站，要求制作的校园网站要采取各个页面采用不同布局方法进行布局，而且各个页面元素的插入、设计要尽量应用到“Dreameweaver”网页制作科目中所学到的知识点，这样通过指导学生设计校园网站，使他们掌握建立、上传、美化、布局、优化网页的方法，在实践运用过程中掌握网页制作设计的基本知识。总之，“一体化”教学模式的实施，需要运用到项目教学方法的内容，以优秀的项目作为载体，完成网页制作课程的教学任务。
“一体化”教学项目的运用可以分为三个阶段，分别是向学生讲授网页制作软件使用方法、制作网页以及总结评价网页制作成果，其中，第二个阶段是“一体化”教学方法实施的核心部分，该阶段，教师要把学生分为几个小组，明确网页设计的任务，给予具体的指导，解决学生学习过程中的各种疑难问题。“一体化”教学模式下，要突出以学生为主体、以人为本的教学理念，教师通过分解网页设计项目，帮助学生选择素材，引导学生创建一个网页使用表格布局、表格以及曾三种布局方法，以实现优化网页页面的目标。传统教学模式下，教师习惯先进行静态网页设计教学，这固然是网页制作课程的入门必备知识，然而，“一体化”教学模式下，教师要将动态网页设计教学与静态网页设计教学结合在一起，完善网页制作的功能创建，并引导学生直接在互联网平台进行，这样有利于实现整个网页设计的优化、整合，从而实现提高学生网站设计能力的目的。
“一体化”教学模式要充分开发各种学习资源，给学生提供各种丰富的实践机会。根据“Dreameweaver”网址制作课程特点以及教学目标要求，采取制作作品考核与学期末理论考核相结合的方式，对学生的制作的网页进行综合评价。学生和教师可以提出问题，并结合相应的网站项目评分表，形成学生和教师对该项目各自的评价。在对学生进行评价时，还应结合其在项目开发过程中的学习能力、合作能力、参与程度、服务程度以及所起作用等各方面的表现情况。
一体化教学模式从本质上改善了网页设计与制作课堂教学效果，使学习者能够真正地掌握一门学习技术，提高他们的开发能力、创新能力，最大限度地调动了学习者的积极性、主动性。
[1]冯晓娟.职业学校的一体化教学[J].中国商界（下半月），2010（05）.
[2]熊凯.高职院校《网页制作》课程教学的几点体会[J].当代经理人（下旬刊），2006（07）.
据中国互联网信息中心统计，全国数千网万网民中37.8%有过网上购物的经历，随着网络和电子商务的快速发展，网页设计制作也成为网络时代重要的技能之一。电子商务网页制作是电子商务专业的核心课程，要想设计制作出精美的电子商务网页，需要学生多思考、多练习，如何选择一种教学方法使学生用专业网页制作工具构建商务网站，是值得我们关注和研究的，学生是教育的主体，要充分考虑技校学生的实际情况，在设计项目时要激发学生对活动的参与，在理论知识和工作任务之间建立联系，让学生掌握整个项目任务的工作过程，从教学实际出发，将项目教学法应用到电子商务网页课程的教学实践中，教学效果显著，学生能够积极探索，自主学习，注重的不是学生的最终学习效果，而是完成项目的过程。学生在项目实施的过程中合理运用知识和技能，体验创新的艰辛与乐趣，从而有效提升学生提出问题、分析问题及解决问题的能力。有针对性给予相关知识与技能的指导使学生对商务网站的制作有一个系统全面的掌握。
项目教学法就是以项目为载体，以任务为中心并融合相关知识和技能，以学生为活动主体实施项目教学方法，也就是将教学内容融入项目实施过程的一种教学方法。项目教学法以项目为中心，有明确的任务，能让学生围绕已学习知识和学习资源，使学生学习的主动性、积极性得以发挥。在运用项目教学进行电子商务网页教学设计时，需要将网页的制作流程分成一个个的任务，每个任务先通过教师来演示所用到的知识要求，具体的任务安排由学生操作来贯穿整个教学，以实际的任务来驱动学生的学习，使学习过程是一个不断成功完成任务的过程。通过学习，一方面使学生能够综合运用已学的课程知识，真正做到理论结合实际，真正掌握电子商务专业的核心能力，并具备一定的原创水平。另一方面，通过实施分段项目培养模式，不仅可以及时发现学生的个性特长，而且对学生综合能力的培养和团队合作精神的训练，从而提高了学生的学习效率。
电子商务网页制作课程是电子商务专业的主干课程，是理论和实践相结合，借助Dreamweaver软件，进行商务网页的设计与制作，在以往的教学模式中，该课程是以教师讲授理论知识和案例为中心的教学方式，只针对学生能否掌握软件的基本操作，而忽视了培养学生专业知识的培养，从而造成了学生只会按照老师布置的实例操作，联系到具体的电子商务网页制作中就不知道如何操作，不能消化所学的知识，对学生未来适应多变的工作环境对理论知识的需要，而项目中的技能学习也不能给学生提供足够的使技能达到专业的水平。在电子商务网页制作教学中采用项目教学主要是带动专业知识的学习和能力的培养，以创作的商务网站来检验电子商务网页制作课程的教学效果。
运用“项目教学法”进行电子商务网页制作教学时，从“项目确定、项目分组、项目实施、项目检查”四个方面来完成。
通过前期对威客网企业人才需求调查，选择设计一个好的适合电子商务网页制作课程的项目，对项目教学实施效果的好坏有着直接的影响。项目的设定要将教学任务的知识点和实际操作相结合，让学生在项目制作的过程中学习到相应的理论知识点，同时，要考虑到技校学生的认知能力、实践能力和兴趣特点等实际情况，同时还要考虑项目的实现价值，把不同类型的电子商务网站作为项目案例，如淘宝网、京东商城，美团网等，通过对不同商务类网站的制作了解不同的网页制作技巧和网页布局。具体过程如下：在电子商务网页制作这门课程中，选择制作一个主页和若干个辅页的商务网页作品。它涵盖了这门课程需要学习的所有工作任务。在进行电子商务网页课程项目设定时要求将电子商务网页课程划分为几个项目，每个项目里划分为不同的任务，要紧密联系课程设置、课程目标、课程内容、学时和学分等内容，在电子商务网页制作这门课程中，分别设置了网页设计概述、超链接的制作、网页布局、网页修饰、网页特效、动态网页和电子商务网页综合制作这7个项目来进行课程的设置。课程内容从简单到复杂，每个项目都包括电子商务网页制作课程全部任务所构成的完整的工作过程，如网页修饰项目中，我设计了两个任务，第一个是制作精美的网页内容，涵盖的所用的文字、图像与文字的位置关系、图片边框等技能要点，第二个是制作公司的主页，主要内容网页中表格的制作、网页中插入flash、文字滚动等效果的制作。通过这个项目让电子商务网页制作学习由浅入深，循序渐进。
项目确定下来之后，学生分组是一个重要环节，在练习项目这一教学层次中，一般5～6个人一组，分组时根据学生的知识结构，学习能力，性格特点等形成互补搭配，并选出一名组织能力较强的学生为组长。并选定一位组长，组长负责成员任务的分配，并监督实施各方面的工作。在项目分组阶段提出项目创作的要求和说明，给出项目评价方案，并制定小组的管理制度。按照已确定的工作步骤和程序进行项目的制作。
项目实施过程中主要以学生相互协作为主，教师在指导一些理论知识和给出与企业岗位相关的情境，在学生学习的过程中，如在设计电子商务网页制作的流程项目中通过具体网站的制作，分别设计了整体规划，网页布局、网页制作、网站和网页测试这五个任务，让学生有充足的制作时间和空间，到网上搜集一些知名的电子商务网站，引导学生一步步学习网页设计，并动手进行项目的制作，在制作过程中，如网页整体规划这个任务中，如何设计企业的LOGO、表现商家广告内容的图片（Banner）以及网页色彩的搭配技巧等方面，找一些比较好的文字内容、图片处理效果、好看的主页引导动画效果等处理逐步先完成各个小项目，最终完成整个项目。学生按照电子商务网页制作的流程进行素材的收集、小组成员之间的信息交流、小组讨论、小组合作，合成项目作品并进行完善，选择制作一个项目要尽量来源于实际的工作情境，以更为有效的培养学生的实际工作能力。
项目教学结果的检查是开展项目教学活动不可缺少的一个重要环节，在电子商务网页制作课程中，采取成果展示，小组互评，教师评价相结合的方式，当学生完成了作品，要对各项目小组进行项目成果的展示和作品交流，在展示过程中对每个项目小组遇到的问题、困难及解决办法收获与感受，活动小结等多个方面进行交流。教师应尽量让学生发表自己的意见，从而达到取长补短的效果。之后再由教师对整个项目工作成绩进行评价或评分。评价学生掌握了哪些理论和技能知识，并对存在的问题进行分析，以学生完成项目的情况来评价学生的学习效果。
在应用项目教学法进行电子商务网页制作教学后，学生能真正理解该课程的学习目的和价值，提高了学生对电子商务网页制作流程的深刻理解和应用能力。项目教学法强调以学生为主体，调动学生的积极性，增加学生的参与能力，提高学习的效率，如教网页中的框架项目时，框架对于学生来说是比较难学的，在设计教学任务时，首先由教师来讲解框架的基础知识和演示框架的设计，突破难点，培养学生的学习兴趣，学生通过学习、实践、使所学的知识转变为实际运用能力。
项目教学法吸取了探究教学法，任务驱动教学法与案例教学法优点，以项目作为教学对象，通过协作学习的方式开展学习，只要我们能在电子商务网页制作教学过程中充分合理地运用“项目教学法”，就一定可以为学生找到一种行之有效的学习方法，从而增加学生对电子商务专业学习的兴趣。为今后的工作打下一个坚实的基础。
【1】 郑琦；肖红；；以能力为本位、项目化的高职课程改革与实践[J]；广西教育；2011年09期2、【2】月商；广东省电子商务技师学院要把“新供销班”办成学校的示范班[N]；中华合作时报；2011年
案例教学在信息时代快速发展的今天，各行各业对技术型人才的要求普遍提高。技术院校捕捉到市场对人才的新要求，也在积极地进行教学改革。将全新的教学方法与网页设计教学结合起来，是促进网页设计教学目标实现的重要手段。案例教学法与网页设计课程的操作性与实践性特点相符，以此来打破传统教学模式对网页设计教学的限制，能够让学生的发展需求得到满足。
选择案例教学法内容，是实施案例教学活动的第一步。在选择案例教学内容时，教师要坚持两点原则。第一，教学案例要具有真实性与典型性。教师选择教学案例时，需要查找社会生活中真实存在的网页设计案例，杜绝一切不真实的案例走进课堂。教学所用案例要具有典型性，不仅与生活密切相关，更要能够启发学生的网页设计思维，促进学生找到切入点去讨论。实事求是的教学，才能促进学生网页设计能力的提升。第二，教学案例内容要与教学内容相关。之所以将案例教学法引入技工院校的网页设计课堂中，就是为了促进网页设计教学目标的快速实现，让学生通过网页设计知识的学习，提高自己的实践能力。因此，教师需要在教学目标的引导下选择案例教学的内容，本着提高全体学生网页设计技巧的目的选择有针对性的案例教学内容。
出示任务书是利用案例教学法实施教学的重要环节。任务书中包括案例学习的内容以及具体要求，教师要重视任务书的设计工作，将学生要掌握的理论知识与实践技巧明确地整理在任务书中，让学生以任务书为引导实施开展学习。换言之，如果学生掌握了任务书中的知识点，达到了任务书中的目标，就等于完成了课本相关内容的学习。值得注意的是，教师要重视技工院校学生创造力的培养，在任务书中设置的任务要具有启发性，设置任务的难度不宜太大，要给学生完成任务的信心。例如，在讲解制作文本网页知识时，教师可以设计这样一个任务书：掌握网页文本格式的设置技巧，如空格、对齐、项目列表、标题、字体字号的设置等。这部分内容学习难度不大，教师可以选择学生所在城市的一个旅游景点，让学生为这个旅游景点设计一个文本网页。这样让学生参与到真实的案例中，可以锻炼学生的网页设计技巧，有利于提高专业技能。
让学生在案例学习活动中发挥自己的主观能动性，是提升学生学习效果的重要手段。在案例教学中，教师要组织学生就难以解决的问题进行讨论，让学生在互帮互助中成长起来。讨论活动的实施要有标准，教师要求小组内的每一位成员都表达自己的看法，分析自己的网页设计工作，为小组成员的学习贡献自己的力量。在所有观点都摆上台面上之后，再针对关键问题进行讨论。例如，在旅游景点文本网站的设计中，一些学生对旅游景点的特色列表持有不同见解，教师要鼓励学生分析网页服务对象以及受众，讨论出最佳方案，让学生在自主探究中实现个人能力的提升。
学生的学习能力再强，也需要教师的引导。在技工院校的网页设计教学中，教师要积极发挥在课堂教学中的主导作用。教师通过案例教学法实施教学，给学生创造了更加自由与多元化的学习、探究与讨论的空间，也让教学内容更加开放，从而使教师的教学行为更加轻松。在学生的讨论过程中，教师要巡回指导，避免使学生的学习走入歧途，浪费时间。例如，在学习网页设计的知识时，教师引入城市现代化进程网页的案例组织学生讨论。讨论中，一些小组在特效功能上产生了分歧，教师要及时指导，帮助学生明晰每一种特效的视觉作用与情感作用，并引导学生开发特效的设计方法，保证案例学习的质量。
综上所述，网页设计知识的应用性与综合性较强，教师要重视专业理论知识的讲解，也要针对企业对人才的需求、学生的个人能力等加强对操作方法的指导。选择科学合理的案例教学内容，突出学生在案例学习中的主体地位，让问题讨论更加深入，鼓励学生说出自己的疑惑。科学应用案例教学法，是推动技工院校教学改革的重要环节。
[1]王哲.项目教学法在技工院校《网页设计与制作》课程中的探索与实践[D].南昌:南昌大学,2012.
[2]盛志燕.案例教学法在中职《网页设计与制作》课程中的应用分析[J].信息与电脑(理论版),2015(16).
作者在论文的写作当中难免要阅读相关的学术资料，在论文引用的他人作品时不能全部都写到论文当中去，那么只要将其主要文献标注好后依次列在论文的最后面。下面是学术参考网的小编整理的关于网页设计论文参考文献，欢迎大家阅读赏析。
[1]胡崧.HTML从入门到精通[M].北京：中国青年出版社，2007.
[2]知新文化.HTML完全手册与速查辞典[M].北京：科学出版社，2007.
[3]杨选辉.网页设计与制作教程[M].北京：清华大学出版社，2009.
[4]王诚君，刘振华，郭竑晖，高中山.Dreamweaver8网页设计应用教程[M].北京：清华大学出版社，2007.
[5]李光明，曹蕾，余辉.中文Dreamweaver8网页设计与实训教程[M].北京：冶金工业出版社，2006.
[6]周德华，许铭霖.新编网页设计教程[M].北京：冶金工业出版社，2006.
[7]赵铭建，赵慧，乔孟丽，康梅娟.网页设计与制作[M].东营：中国石油大学出版社，2007.
[8]赵祖荫，王云翔，胡耀芳.网页设计与制作教程[M].北京：清华大学出版社，2008.
[9]陈季.Flash基础与实例教程[M].北京：北京希望电子出版社，2005.
[10]丁海祥.计算机平面设计实训[M].北京：高等教育出版社，2005.
[11]曹雁青，杨聪.Photoshop经典作品赏析[M].北京：北京海洋智慧图书有限公司，2002.
[12]张怒涛.Photoshop平面设计图像处理技法[M].北京：清华大学出版社，2003.
[14]孙强，李晓娜，黄艳.JavaScript从入门到精通[M].北京：清华大学出版社，2008.
[17]常永英序设计教程(C#版)[M].北京：机械工业出版社，2009.
[18]肖金秀，冯沃辉，陈少涌.ASP.NET程序设计教程[M].北京：冶金工业出版社，2003.
[20]刘培文，韩小祥.ASP.NET程序设计教程[M].北京：中国人民大学出版社，2009.
[1]安颖莲，李秀，姚瑞霞，田荣牌.《网页设计与制作》课程教学设计与实践.中国教育信息化，2007(17).
[2]沈志刚，于晓霞.“模块项目化”教学法在网页设计与制作课程中的应用.福建电脑，2009(5).
[3]周娟.高职网页设计与制作课程教学的几点改进.电脑知识与技术，2009(26).
[4]蔡北勤.模块化基础上的工作过程系统化教学模式探讨.交通职业教育，2007(6).
[5]，冯永华.课堂教学变革的反思与重建———“慕课”背景下课堂教学变革的思考[J].教师教育学报，2014，11(3)：53-63.
[6]孙晓娟.基于“慕课”的高职课程改革及教学评价的研究[J].中国管理信息化，2016，1(4)：236-237.
[7]张琳.高职网页设计课程的教学生态模式研究[J].教育现代化，2015，4(10)：99-101.
[8]郑伟、薛岚.高职院校图形类专业实践教学研究[J].科技资讯，2010(12)：248-248.
[9]郑伟.高职院校非图形类专业《网页设计与制作》课程教学改革的探讨[J].福建电脑，2011，27(1)：205-206.
[10]郑伟、薛岚.高职院校图形类专业《网页设计与制作》课程建设改革的探讨[J].艺术科技，2013，26(3)：283-283.
[11]李荣刚.视觉传达专业中的网页设计课程探索[J].美术学刊，2012，(10).
[12]何磊孙志宜.视觉传达设计专业课程教学改革与创新[J].合肥师范学院学报，2015，(1)33期
[13]魏坤.视觉传达设计专业发展现状与教学对策——以汉江大学设计学院为例[J].中国艺术，2013，(4).
[14]戴士弘.职业教育课程教学改革[M].北京：清华大学出版社，2007：13-15
[15]梁景红.网站设计与网页配色[M].北京，人民邮电出版社，2008，(52).
[1]王寅田.基于Hadoop的交通物流大数据处理系统设计与实现[D].上海交通大学2014
[2]滕勇.基于WMI的电信营业终端管理系统的设计与实现[D].上海交通大学2013
[3]刘畅.模型驱动的飞机座舱显示控制应用软件开发方法研究与实现[D].上海交通大学2014
[4]李岩.可调整时间自动机可达性算法的研究与实现[D].上海交通大学2014
[5]余启鸿.物流企业信用评级技术研究及系统实现[D].上海交通大学2014
[6]张明锐.基于AOP的座舱显示应用软件框架研究与实现[D].上海交通大学2014
[7]浦杰.券商门户系统统一通讯平台的研究和实现[D].上海交通大学2012
[8]陆志林.基于jBPM和SSH的电子政务开发平台的研究和实现[D].上海交通大学2012
[9]郑琦.基于OCM模型的在线计费系统开发及应用[D].上海交通大学2007
[10]华天.电子制造企业产品生命周期管理系统的研究与实现[D].上海交通大学2013
随着互联网技术的不断发展，尤其是智能手机和电子商务高度普及，网页制作技术的重要性体现的越来越明显。在PC机上，网站的形式越来越多样，功能越来越人性化；在智能手机上，微网站越来越成熟，移动端应用也经常将网页技术融入其中。同时，企业对于网页制作人才需求的质和量也越来越高。本文主要论述在高职高专的网页制作教学中，如何进行课程和教学的设计才能培养出满足符合市场和企业需求的网页制作人才。
网页制作市场非常广阔，市场对于人才的需求也越来越多元化，具体可以分为以下几类：（1）网页设计人员，根据客户需求设计页面效果，这需要设计人员具备一定的美工基础，在网页制作及软件开发等公司主要担任美工的职位。（2）网页制作人员，根据页面效果图制作网页，这需要工作人员熟悉HTML语言、CSS语言、Javascript语言和页面整合工具，这类人员可以胜任网页制作公司的等工作。（3）前端开发人员，前端开发人员要比网页制作人员具备扎实和丰富的技能，它需要熟练掌握CSS和Javascript，而且能够熟练掌握JQuery、ExtJs等RIA技术。（4）网站信息编辑人员，要求工作人员能够熟练使用网页整合工具和HTML语言，熟练的使用各种内容管理系统，为动态网站进行信息编辑和上传。
近些年网页制作技术迅速发展，其主要原因是HTML5技术的普及和应用，HTML5不是独立的网页制作技术，它是结合CSS3和Javascript的综合技术，这项技术弥补了HTML4的很多缺陷，它具备多媒体融合、无插件等特点，更适合移动终端网站的建设。随着旧操作系统不断的被淘汰，HTMLS～PC的运用也会越来越普遍。
网页制作课程在很多专业都开设，它几乎成为计算机专业必备的专业基础课，在具体开设过程中主要存在以下几方面问题：（1）过多的注重理论，开设的课程过多的讲授网页理论知识或者HTML知识，缺乏实践，无法培养技能人才，（2）过多的注重操作，课程以培养操作和技能为主，学生没有扎实的理论基础，通常学生只会使用网页制作软件，而对HTML代码和技术理论知之甚少，学生很难进行技能的提高和自主学习的开展，没有提升的空间。（3）知识过于陈旧，课程内容不能随着行业的发展而更新，知识内容非常陈旧，培养的学生不能满足企业的要求。（4）实践不成体系，实践课程缺乏连贯性，没有形成体系，每个实践内容只适合某个知识点，不能承前启后，也不能和企业的项目进行联系，学生学习的内容很难进行拓展。
课程定位是课程开设的基础，根据多年的网页制作教学经验和市场调研的结果，从以下3个方面进行课程的定位：（1）岗位定位，网页制作课程所培养的学生主要面向软件开发、网站设计与制作和网站维护等工作岗位，能够完成Pc机和移动终端的网页设计、静态页面制作和网页后期维护等工作内容。（2）技能定位，学生能够熟练的运用Dreamweaver和Photoshop等工具进行网站的设计和制作，能够熟练的使用HTML和CSS语言完整页面的布局，能够熟练的进行网站的测试和Web服务器的配置，能够使用常见的内容管理系统建立简单的动态网站。（3）课程性质定位，网页制作课程是理论与实践相结合的课程，理论是实践的支撑，实践是理论的具体运用。这门课程需要学生掌握计算机基础知识，同时，它也是很多课程重要基础。
培养目标决定了人才培养的方向，所培养的网页制作人才能够胜任企业中的网页制作工程师、网页设计师、网站运维工程师和网站编辑工程师等岗位，学生不仅掌握企业要求的技能，还具备良好的职业道德和敬业精神，具备自主学习能力，能够不断的根据市场变化和企业需求提高自身素质。
根据课程定位和培养目标进行教学内容的设计，将网页制作课程划分为5大模块：
第1个模块主要学习网页中基本元素和超级链接的运用，学习使用Dreamweaver CS6以上版本完成文本、图像和超级链接等技术的运用，引入HTML5的声音和视频等技术。在学习操作的同时，将HTML语言融入进来。
第2个模块学习如何利用表格技术和DIV+CSS技术进行网页的布局，教学内容的重点放在DIV+CSS实现网页布局，表格布局作为网页布局的课程导入技术。可以将CSS划分为简单布局实现、复杂布局实现、Hacker技术和CSS3技术等多层次学习。
第3个模块主要学习网页的交互功能，首先学习表单的运用，然后引入Javascript语言。
第4个模块学习如何进行网页的设计、效果图的绘制和素材的生成，这部分内容需要借助Photoshop和Fireworks等图像处理软件。
第5个模块学习如何进行网站的运维，包括网站测试、服务器的配置、IP和域名的申请及网站的等。这部分内容可以引入阿里云的ECS云服务器作为实验平台，云平台具有价格低廉、维护方便等特点，这也符合很多企业在云平成工作内容的工作方式。
根据网页制作课程实践要求高的特征，选择项目教学法结合任务驱动模式作为本课程的教学方法。在教学中引入企业实际的案例作为实验项目，根据教学内容在项目的基础之上拆分出任务情景，网页制作中文本运用的任务情景（见图1），左侧是学生需要完成的工作内容，右侧是完成后的效果。在具体课程开展过程中遵循以下流程：（1）快速学习，教师选择核心的知识点进行简短的讲授，以便学生在进入工作情景前拥有必备的基础知识。同时，教师讲授参考资料的查询和使用方法，为学生开展自主学习奠定基础。（2）任务实践，教师根据知识点设定任务情景，小任务由学生独立完成，大任务通过分组完成。任务情景的设定要能够覆盖所讲授内容所有的知识点，并且对经常使用的知识点要多次使用，每个任务情景要覆盖上一次学习的知识点，通过这种迭代方式强化实践操作的熟练性。图像运用的任务情景（见图2），它不仅覆盖了网页中图像使用的技术，也覆盖上一次学习文本使用的知识点。（3）反射学习，学生完成任务后，教师汇总学生在任务制作过程中存在的技术和技巧等方面存在的问题，以解决问题的方式深化知识点的讲授，深化理论知识的学习。（4）任务迭代，学生在反射学习之后再次进入工作情景完成工作任务，教师可以适当的提高要求，缩短任务时间，通过这种方式学生对于知识点的掌握会更加的扎实。（5）任务总结，所用的学生完成任务后，教师对本次工作任务进行知识点的难点、重点、技术问题和技巧等方面进行总结，完善学生的知识结构和理论。
Photoshop是一个专业的图像处理软件，具有强大的图像处理功能，能够对各种图像文件进行精细的处理，可以用于平面设计、广告设计、数码摄影的处理，也可以用于网页的制作。设计一个整体效果协调、有创意、有个性，吸引浏览者视线的网页，是网页设计者所追求的目标，同时也使得网页的设计方法也越来越多，本文将以网页制作为主题，介绍Photoshop如何结合网站群技术，实现网页的制作。
一般情况下一个网页版面有：网站Logo图区、导航区、正文区、说明区等，版面布局是网页设计的框架，在整个网页设计过程中起到灵魂的作用，规划和确定网站Logo图区、导航区、正文区、说明区的位置，使网站的文字、图片和动画和谐完美地搭配一起，让网页在更好地传递信息的同时，也具有赏心悦目的视觉效果，下面分别论述几种比较常用的网页布局。
1）“国字”型布局：因布局结构与“国”字相似，采用上中下模式，网页顶部也即网页的Logo图区和导航栏区，一般放置网页的Logo标志和导航栏、Banner广告，网页中间放置网页的内容信息和图片资料，网页底部放置网页的版权信息、联系方式等，是比较受大中型企业欢迎网页布局模式。
2）左右框架型：是一种左右分割的网页框架结构，一般左面是导航链接，有时最上面会有一个标题或标志，右面是正文，大部分的大型论坛是采用这种结构，有些企业网站也喜欢采用这种结构。
3）T型布局：页面顶部放置网站的Logo标志或Banner广告，网页的左下侧放置导航链接栏、右下侧放置网页的正文内容；网页底部放置一些辅助信息。
4）封面型布局：页面以一些精美的平面设计结合一些动画为主体，放上一些链接或者“进入”链接，进而设计成首页，这种布局以企业网站和个人主页较多。
5）综合框架型布局：这种是左右框架型和上下框架型的结合，页面顶部放置网站标志、广告条、菜单栏，网页中间左侧为二级栏目条，右侧为链接栏目条，中间为网页的主体内容，网页的底部为网页说明区，放置版权、联系方式等辅助信息。
6）Flash布局：就是以Flash作为整个页面，通过Flash来诠释页面所要传达的信息。
下面以水土保持网站为例，讲述Photoshop如何在网站群中的应用，以及网页的设计流程。如图1所示。
按[Ctrl+N]创建一个宽度为1000像素、高度为900像素、72像素/英寸、RGB模式的图像文件，选择菜单【视图】/【标尺】和【视图】/【显示】/【参考线】，利用水平标尺或垂直标尺按住鼠标左键进行拖动，创建水平参考线或垂直参考线，根据网页布局模式为Logo图区、导航区、正文区及说明区中信息的放置提供参考依据，并进行排版。
由于网页框架在网页制作过程起着重要的作用，因此制定一个合适的网页布局，对网页设计有着事半功倍的效果，也决定着网页的美观程度。例如“水土保持”网页采用比较受欢迎的“国字”型布局，在网页顶部放置Logo图区和导航栏区，中间正文区放置网页的内容信息，网页底部放置版权、通讯地址、联系方式等相关说明信息。如图2所示
创建好参考线之后，打开“水土保持”网站的Logo图片，使用【移动工具】将Logo图片放置在网页的顶部，然后生成一个图层，并将图层进行重命名为“Logo”。
设置前景色为#cef78d，利用矩形选框工具依据参考线在Logo图区下面绘制一个矩形选框并用前景色进行填充绘制导航栏放置区。
设置前景色为#d3f89a，然后选择[矩形选框]工具，在正文区绘制一个矩形选区，执行【选择】/【修改】/【羽化】命令，对选区进行羽化2PX，然后执行【编辑】/【描边】命令，利用前景色对选区进行描边操作，描绘出颜色边框，在制作出的颜色边框内，选择【矩形选框】工具，描绘出一个矩形选区，更改前景色为#d8f7a8，对选区进行颜色填充，制作出分类内容标题框依次用同样的方法，绘制出正文区中的其它分类内容方形区，然后依据参考线把分类标题图标放置到各自的方形框标题区中。
设置前景色为#9ace48，依据参考线，利用【矩形选框】工具绘制一个矩形选区，并利用前景色进行颜色填充，然后调整矩形选区的大小，进行1个像素的羽化，更改前景色为#60940e，对选区进行再次的颜色填充，绘制出底部说明区。
为了让设计好的网页框架能够在IE中协调、连贯的显示出来，需采用Photoshop软件中的ImageReady软件包，利用切片工具和切片选择工具，对图像进行切割，即在图像中要创建切片的区域上拖动【切片工具】进行切割，把图像分割成若干个小图片组，然后选择【文件】/【存储为Web和设备所用格式】命令，在打开的对话框中直接单击【存储】按钮，在弹出的保存对话框中，选择保存类型为【HTML和图像】，将图像保存为网页文件格式，从而转换成网页形式输出。
在站群系统环境下，将已设计好的网页框架HTML文件上传到相应站点目录下，并在生成的首页文件中，在相应的图片区域添加组件按钮，实现功能的完善。
在导航区中添加网站导航组件，正文区中添加标题列表组件、文章列表组件、变换图片文章组件、滚动图片文章组件，并把这些组件移动到合适的位置，调整组件及页面显示样式，说明区中添加计数器组件及版权组件等相关网站说明信息；如图3
打开站群系统管理环境，在栏目管理处，根据网页布局模式要求添加文字栏目创建文字导航栏，并设置在首页导航栏显示；在资料库管理处， “资料库管理”中相应的栏目下，添加对应的资料，让网站内容信息在正文区显示，使网站内容显示丰富多彩。如图4。
Photoshop在网页制作中应用比较广泛，比如也可以制作动画、按钮等，本文只是阐述了Photoshop在站群中的应用，以及通过实例介绍了Photoshop结合站群技术来实现网页的制作。由于现在是一个信息化的时代，网站制作的需求越来越多，了解和熟悉这些技巧，可以提高网页的制作效率，同时也拓宽了我们制作网页的方式和方法。当然，网页的设计方法还有很多，如Dreamweaver+Fireworks+Flash网页三剑客来制作网页，+Sqlserver+Dreamweaver来制作网页，只有通过不断的实践，摸索出更多的技巧和方法，才能不断地优化网页制作，设计出高水准的网页界面。
[1] 刘传梁.红色圣典-Photoshop CS4平面设计技法精讲.北京：中国铁道出版社，2010.
[2] 洪亮、王琪.Photoshop CS4中文版基础实例教程.北京：国防工业出版社，2009.
[4] 方宁、王英华、林波等.功夫Photoshop CS2网页设计与配色实战攻略[M].北京：清华大学出版社，2007.
《网页设计与制作》作为一门高校网络与新媒体相关专业强化学生学习兴趣点的专业基础课程，开展课程教学模式改革与实践研究有着十分重要的现实意义[1].
结合学生就业实际情况、已从事与网站建设相关岗位的毕业生反馈信息，现阶段《网页设计与制作》课程教学中存在的问题，具体而言：
长时间以来，《网页设计与制作》课程大多推行理论课与实践课交替开展的教学模式，起先由教师对相关专业知识、软件技术操作内容进行教授示范，之后由学生通过随堂笔记或者学习记忆对教师教授内容开展模仿操作.教师占据课程教学主体地位，教学内容缺乏生动形象性，学生学习过于被动，学习主观能动性难以得到有效调动.一些学生对教师教授的理论知识、布置的上机作业等不感兴趣，沉溺于网络游戏、手机游戏等，致使专业知识教学成效不尽如人意.学生受基础理论知识与专业理论知识不扎实影响，对于自身面临的疑难问题难以迅速反应并开展自主解决.再加上理论教学内容与实践教学内容未能实现有效衔接，使学生在对于“何为过程性知识、何为陈述性知识？”、“何为理论性知识、何为实践性知识？”等认识上模棱两可，即便学生能够对教师所教授知识展开有效模仿操作，也难以将它们运用至实际工作中去.
教师在《网页设计与制作》课程教学中通过操作鼠标进行示范，学生片面的认识十分简单，学习过程中不实事求是，等到进入实践课要求他们独立开展操作时，面对提供完备操作流程的学习任务不屑一顾，认为太过简单；面对未提供相关操作流程的学习认识则无从着手，进而产生“高不成低不就”的局面.学生未能基于独立自主实践队专业知识进行掌握，致使难以建立隶属自身特有的知识、经验架构，一旦进入社会职业岗位中便不知所措，无法独立自主制定工作方案，更别谈是付诸实际行动，难以有效将所学知识与实际结合，不具备自主解决问题的能力.
结合毕业生反馈信息，普遍存在学生沟通意识欠缺，不具备客户至上理念等问题，致使难以对职业岗位进行有效适应.一些学生不明确客户要求，亦或对客户要求抛之脑后，而凭借自身主管意识开展设计；一些学生对客户要求形成错误认识，为客户带来不必要的麻烦.受各方缺乏沟通或沟通能力不足影响，致使返工情况屡见不鲜，不但降低了工作效率，还会对客户信任造成负面影响，不利于企业的有序发展.这些不良后果极易使学生产生负面情绪，进而对后续工作造成不良影响，由此进入恶性循环；进而这些学生对工作产生厌烦心理，没有成就感，不具备工作的动力.
在时展新形势下全国高校网络与新媒体专业，必须与时俱进，大胆进行改革与创新，引入先进的科技和成功发展的经验，进一步强化《网页设计与制作》课程教学模式改革与实践，对促进《网页设计与制作》课程教学模式改革与实践逐步开展可以从以下几个方面着手：
高校《网页设计与制作》课程强调对设计人员实践操作能力和基本功训练，对于网页设计等一系列相关操作技术要求每个学生必须能够娴熟掌握，具有管理、开发和维护小型网站的能力.鉴于此，《网页设计与制作》课程开展教学内容改革的重要前提是用人企业的需求.结合企业用人需求从事不同高校网页设计与制作专业、网上招聘启示及人才市场相关信息等，对不同行业需求开展总结：（1）以企业局域网为重要前提的操作，好比对等网的组建与维护、office文档的存储与整理、B/S企业MIS系统的管理与维护、计算机一系列软件的安装与使用等；（2）企业网站的管理，好比企业网站建设、企业网站文件管理、企业网站策划等；（3）企业电子商务活动，好比在线商务活动、产品在线宣传、互联网信息处理等；（4）具备相应计算机图形设计、软件设计能力，具备相应B/S应用程序开发能力；（5）娴熟掌握Flash、Dreamweaver等网页设计工具，精通CGI网页交互语言，熟悉HTML设计等[2].在此基础上，《网页设计与制作》课程在侧重Flash、Dreamweaver及Fireworks网页教学前提下，应当进一步关注HTML设计、图形设计与处理、JavaScript代码等的教学，以强化学生计算机图形设计能力、软件设计能力；此外，还应当强调网站建设、管理，强化学生对网站组建、管理、维护等内容的系统认识.
2.2.1案例教学法要想调动起学生学习主观能动性，避免传统灌输式教学模式，在教学期间应当推行案例教学法.结合教学进度、要求引入案例并开展好备课工作，对案例涉及理论、技能进行教授讲解，探讨案例中存在的相关问题及处理对策等，同时案例要具备针对性、典型性，自符合学生接受能力开展选取、设计.好比，可选取介绍“民族传统”、“家乡美景”等的门户网站，教师通过向学生开展讲解此类网站涉及的知识点，要求学生制订学期学习计划，设计制作一个小型网站，且网站制作过程要与课程教学内容保持协调.2.2.2项目化教学法选取实际项目为前提，加大对学生分析、解决问题能力培养的力度.在专业网站设计与制作过程的前提下建立学习项目，沿着职业岗位任务主要方向明确不同模块内容，包括网站建设方案制作、网站制作以及网站设计等，依托紧贴职业实际的教学内容，有效调动起学生浓厚的学习兴趣.依据职业岗位任务主要方向提取各项能力目标，并融入进制作网站建设方案、网页基础知识储备等多个不同模拟制作任务中，达到对学生分析、解决问题能力培养的目的.与此同时，制定一系列相关独立实践任务，以使学生在完成任务的同时，对自身所学知识理论进行巩固，进而娴熟掌握各项网页制作技能.2.2.3任务驱动教学法将实践操作任务、模拟制作任务作为载体，关注对学生学习能力、技术应用能力及工作能力等方面的培养.在教学中部署一系列模拟制作任务，并与其中插入相应的知识内容，经由任务背景介绍、操作流程讲述、知识点拓展等布置，引导学生进行自主思考.学生通过解决问题来掌握知识，经由任务把所掌握知识应用于实际问题解决中，进而强化自身动手、解决问题的能力.与此同时，需要学生自主完成实践操作任务环节，以增强学生自学能力、技能应用能力等方面训练.以某学院网站引导页任务制作为例，应展开下述操作：（1）背景介绍，经由该学院网站，提升学院影响力，为师生相互、校企相互、家校相互等往来提供便利；（2）任务要求，对学院网站特色进行尽可能凸显，吸引更多网页浏览者，并为浏览者留下深刻印象；（3）任务分析，设计前对学院网站用户相关需求展开全面研究，找准网站风格定位，可选取图片或者Flash动作用以引导页，将图片用以引导页第一步通过PS设计好引导页效果图及Flas，然后开展切片，最后完成表格设置工作，并将图片、Flas添加进网页引来浏览者，提升网站流量；（4）延伸知识点，包括表格属性设置、切片优势、切片方法等；（5）处理问题，要想加快网页浏览速度，通常要求将大图切为小图.基于任务制作过程开展知识点延伸教学，结合实际情况让掌握理论知识的同时，了解知识的获取渠道及方法，改善学生学习效率.由于伴随技术发展，学生职业生涯会受到一定影响，因此教师一方面要权衡知识的够用情况，一方面要权衡知识点的系统性.应当尽可能拓宽学生知识面，在知识点选定过程中不仅要结合岗位群，又要自技术发展、设备软件更新所对学生职业造成的影响出发，留有一定的余量.在全面教学期间，强调对学生综合职业能力、职业素质等方面的培养，汇集教、学、做于一体，尽量适应学生为主体、教师为主导的新型教学模式的需求.各模拟制作任务均很好地融入知识目标、能力目标，侧重能用什么做什么，尽可能凸显《网页设计与制作》课程教学与职业岗位能力需求的紧密联系，强化学生专业学习针对性、实用性.2.2.4激励教学法要想激发学生对网页设计的学习兴趣，锻造学生自学能力、创造能力，学校应当积极组织各式各样种类的就业技能大赛、Flash设计大赛、网页设计大赛等活动，通过激励性活动一方面促进学生对所学知识的实践应用，一方面有效发挥学生团队协助能力、设计创新能力.
2.3.1联机教学借助网络开展好《网页设计与制作》课程教学.《网页设计与制作》是一实践性强、应用广泛的技术，要想说明网页设计的性质及相关实践应用，实时展示极为关键，所以在网络教学中接入互联网，通过互联网对一系列理论知识开展详实说明，如此可有效提升教学课堂生动形象性，强化学生对《网页设计与制作》课程实用性、重要性的明确认识.2.3.2开设《网页设计与制作》在线课堂要想进一步改善《网页设计与制作》课程教学成效，可考虑开设该课程的在线课堂，促进教师与师生之间的互动，实时了解学生意见，优化整合教学方法、教学进度，对学生学习遇见的疑难困惑进行及时解答.此外，还可将该课程全部课程资源传输上网，诸如教学大纲、教案、课件等资料，还可依据课程章节补充相关设计案例等.如此，学生一方面可通过网络获取课堂教学的各项内容，一方面可借助多媒体优势满足自身自主学习需求.
总而言之，高校网络与新媒体专业《网页设计与制作》课程教学模式的改革与实践，是一项十分复杂的系统工程.其是对传统课堂教学方式的一种挑战，对教师和学生均提出了极为严苛的要求.鉴于此，相关人员务必要不断钻研研究、总结经验，清楚认识《网页设计与制作》课程性质、教学特征及教学目标，全面分析《网页设计与制作》课程教学中存在的问题，“强化教学内容改革”、“强化教学方法改革”、“强化教学手段改革”等，积极促进促进《网页设计与制作》课程教学模式改革与实践有序开展.
〔1〕刘万辉,宋桂岭.基于工作过程的““网页设计与制作”课程改革的探索与实践[J].计算机教育，2010(02).
《网页设计与制作》课程是计算机专业、电子商务等专业的一门专业课程，是一门实践性很强的专业技术基础课程，又是一门主干课程，是为加强对学生技术应用能力的培养而开设的综合性课程，它涵盖了HTML语言 Dreamweaver、photoshop、Flash等相关知识，全面介绍WEB站点开发、设计、制作、维护等技术。通过本课程的学习，使学生掌握该软件的操作方法和操作技巧，学会运用其创建个人网站、具备一定的网站设计能力，学会网站的测试、维护、及推广等。通过实例的讲解，让学生掌握网页制作和网站开发的知识。从如何策划网站、收集网站资料、准备素材、各个页面的逻辑关系和链接的建立到网站动态系统的开发，如何申请空间和域名，如何上传网站以及网站测试、维护、及推广等。
通过本课程的学习，使学生掌握 HTML 语言的语法规则及文字、链接、列表、表格、表单、图像、多媒体、框架元素标签及属性，能设计出多窗口网页、动态网页；能熟练运用Dreamweaver进行网站的导入、规划、管理、的相关技术及网页制作的操作技能；能熟练运用photoshop、进行图片处理，能熟练运用Flash制作网页动画；能维护、管理和设计WEB应用程序；能独立设计WEB站点。
（2）熟练掌握网页制作软件Dreamweaver cs5的基本操作和使用技能。
（二）训练和培养学生获取信息和处理信息的能力，充分培养和提高学生的动手能力，学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、flas和网页特效等。
（三）培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及其基本工作素质。
（四）培养学生理论联系实际的工作作风、严肃认真的科学态度以及独立工作的能力，树立自信心。
本门课程的传统教学方法是采取全课堂制授课方法，考核的方法也大都采用统一试卷的考核方式，学生所学的知识大部分集中在理论基础方面，进而偏离了当今《网页设计与制作》的发展方向。
在“教学做一体化”的教学模式中为了培养和突出学生的能力，故在实践教学中突出以学生“做”为主，就是要像在企业里一样，只给你要求说明或样板，自己用所学知识自己设计、自己制作，然后由全班评选出最好的作品出来。所以在实际教学中也以此为主线来教学，多种教学方法相结合帮助学生学的好，做的更好。
以前《网页设计与制作》教学是分开讲的，在实践课上学生比较活跃，而在理论课上学生觉得没用听得累，老师讲得“累”，觉得自己的辛苦不被学生所接纳，心“累”。为了改变这种现状，在教学计划里压缩了单纯的理论课，在学生实际操作时，再将运用到的理论知识，理论指导实践。
“教学做一体化”的教学模式在教学实施中把课堂教学转向工作情境，课堂由教师为主转向以学生为中心，在教学中把课程分为几大模块，每一个模块又分成几个项目实施教学，每一个项目又划分成几个小任务，这些小任务由几个基本操作去完成。教师只要说清楚课堂要完成的作品和课后作业的要求，让他们在课堂照着案例做，每一个小任务要求用10分钟时间做，教师巡视并作个别指导，10分钟后教师根据学生提出的问题和自己的观察及经验分析难点，演示讲解，学生再继续做，如此反复，按计划完成一个项目。
“教学做一体化”的教学模式产生了很好教学效果，主要体现在学生们的问题多并能及时询问，学生之间互相学习和比拼，不再为交作业而做作业，而是把它作为衡量自己能力和展示才华的一次机会，为他们将来走上工作岗位奠定了坚实的基础。
鉴于学生的基础和接受能力的差别，课堂教学重点之一是教法设计，教师根据所教模块的特点，采用灵活多样的教学方式。在教学中首先采用项目教学法贯穿始终，在授课中，采用项目要求说明一学生做，老师巡视指导一讲解示范一训练纠正一师生共评的基于工作过程的项目方式教学，更有利于学生在“做”中学，学习如何完成任务、与人合作、解决实际问题，这些能力是就业必不可少的。
建立帮助小组，对底子薄的同学多关注，留意他是否也能按时完成或遇到那些需要及时解决的问题，使大家顺利完成各项任务。在教学过程中也可以适当应用问题教学法，提高学生的学习兴趣，精讲多练，达到了“教学做一体化”满意的教学效果。
开展“过程考核”教学，调动了学生的学习兴趣，通过对商务3131班40名学生的调查表明，实践证明，该教学方法收到了良好的教学效果。博鱼体育
