夫唯域名网网页制作课程设计总结
网页制作课程设计总结
1.设计目标
阐述该网站的设计目标和创意，简要介绍网站。
2.设计理念
阐述网站的整体设计理念，包括：
2.1网站整体结构规划理念
要求阐述网站整体结构的选择、设计的理念，绘制网站结构草图。
2.2主页设计理念
要求对主页的布局思路进行阐述和分析。
2.3子页的设计理念
要求对子页的设计以及网页元素的选取理念进行阐述和分析。
3网页具体设计分析
要求选取一张网页，对网页的设计实现过程进行阐述和分析，详细说明制作该网页的步骤，所使用的网页元素以及该网页元素的操作方法。
4总结
对整个设计报告进行归纳性总结，并分析设计过程中的难题及如何解决的，最后提出展望。
一、设计目标
本课程的设计目标是通过实践让同学们经历Dreamweaver 8开发的全过程和受到一次综合训练，以便能较全面地理解、掌握和综合运用所学的知识。结合具体的开发案例，理解并初步掌握运用Dreamweaver 8可视化开发工具进行网页开发的方法；了解网页设计制作过程。通过设计达到掌握网页设计、制作的技巧。了解和熟悉网页设计的基础知识和实现技巧。根据题目的要求，给出网页设计方案，可以按要求，利用合适的图文素材设计制作符合要求的网页设计作品。熟练掌握Photoshop 8、Dreamweaver 8等软件的操作和应用。增强动手实践能力，进一步提升自身综合素质。我本次主要是设计的一个以“新加坡之旅”为主题的网页，针对新加坡的美丽风景做了介绍。
二、设计理念
利用Dreamweaver 8.0制作一个关于“新加坡之旅”的网站，运用表格、行为、层和链接等网页设计技术设计页面。
本网站以新加坡旅游为素材，主要讲解了与新加坡景点相关的内容。首页设有风景介绍和风景欣赏两个栏目。景点介绍设有7个栏目，风景欣赏只含一个页面。
三、网页具体设计分析
(一)构建布局
在这次的网页设计中使用了大量的布局，因此如何构建布局是关键。Dreamweaver 8是大多数人设计网页的得力助手，也是众多初学者的捷径。特别是其在布局方面的出色表现，更受青睐。大家都知道，没有表格的帮助，很难组织出一个协调合理的页面。
1.点击“ALT+F6”键，进入布局模式，插入布局表格。建立一个大致的布局。
2.使用背景图片：选中该项，按浏览可以插入一幅准备好的图片作为表格的背景，因为图片是以平铺的形式作为表格背景，所以表格大小和图片尺寸都要控制好。
(二)网页中的图像
图像传输是WWW的真正魅力所在，它与文字相比具有明显的优点：一是直观，人眼观看图像时接受信息的速度远远超过观看文字时接受信息的速度；二是能更清楚地表达细节内容。正是由于这些优点，所以在进行网页设计时图像很受欢迎。如果网页做得像一幅风景画，浏览者一定会流连忘返（如果图片很大，效果会适得其反）。图像文件的格式有几十种，如GIF、JPEG、BMP、EPS、PCX、PNG、FAS、TGA、TIFF、WMF等，现在Internet Explorer和Netscape支持的、最常用的图像格式是GIF、JPEG和BMP。
(1)在网页中插入图像
利用Dreamweaver 8可以方便地在网页中插入图像，还可以设置图像边框、大小、和位置，并且可以直接对图像进行编辑。在网页中加入图像的操作非常简单：
1.新建一个空白网页，把光标定位在网页的开始位置。
2.打开“工具”菜单，选择“图片”菜单项，在子菜单中选择“来自文件”菜单项，或者单击工具栏中的图片工具图标，弹出一个“图片”对话框。
3.在此对话框中单击“浏览”按钮，出现一个“选择文件”对话框。
4.在“选择文件”对话框的文件列表中选择某个图像文件，然后单击“确定”按钮，或直接双击该图像文件，该图像即被加入到网页中。在网页中插入图像后我们就可以对图像的各种属性进行设置了。
(2)图像的各种属性设置
1.选中所插入的图片，单击鼠标右键，弹出一个快捷菜单，在菜单中选择“图片属性”菜单项，出现一个“图片属性”对话框。
2.打开“外观”选项卡。
(1)设定图像边框粗细：在“外观”选项卡的“布局”栏里可以根据需要定义图像的边框，也可以定义边框值为“0”，即无边框。
(2)设置图像环绕方式：一般情况下一幅图像只能与一行文字处在同一高度，但有时需要将图像和文字分开，且两者互不影响。比如在网页左边插入一幅图像，要求右边的文字就像没有图像时可以多行输入，这就要通过设置图像的环绕方式来实现。在网页中图像的环绕方式有两种：
①左环绕：图像在左边，文本在图像的右边进行环绕。
②右环绕：图像在右边，文本在图像的左边进行环绕。
在“外观”选项卡的“布局”栏中打开“对齐方式”下拉列表框，选择“左”选项，并单击“确定”按钮，图像就被设置为左环绕方式，同样，如果选“右”，图像就被设置为右环绕方式。
(3)编辑图像大小：在Dreamweaver 8中，当在网页中加入一幅图像后，图像大小默认设置为其原来的大小，如果加入的图像太大或太小，或有其他特别需要，就得调整图像的大小。调整图像大小非常简单灵活，只要你选中加入的图像，用鼠标左键拖动图像边框，可任意调整图像的宽度和高度直到达到你满意的尺寸。
(4)设置图像缩放比例：网页设计的一个重要原则就是网页的兼容性，对于不同的浏览器或者不同的分辨率，不管是800×600的窗口，还是1024×768的窗口，网页都要能正常的显示。设置图像缩放比例就是将图像设置为大小可以按比例变化，与浏览器的大小成一固定比例，这样在不同大小的浏览器窗口里图像都能正常的显示外观。设置图像缩放比例的步骤如下：
(4)调整图像缩放比例：网页设计的关键要素之一便是网页的.适应性，面对各式浏览器或分辨率，无论800×600的视窗，抑或1024×768的视窗，网页均需保证正常展示。调整图像缩放比例即设定图像为可按比例缩放的尺寸，与浏览器尺寸保持一定比例，确保在各种尺寸的浏览器窗口中图像均能保持正常显示。调整图像缩放比例的步骤如下：
- 在网页中选择图像，点击鼠标右键，在弹出的快捷菜单中，选择“图像属性”选项，打开“图像属性”对话框。
- 在“大小”栏中勾选“指定大小”复选框，同时勾选“宽度”和“高度”下的“百分比”单选按钮，然后在“宽度”和“高度”栏中输入所需显示的比例，点击“确定”完成设置。此外，还可以在“外观”选项卡的“水平间距”和“垂直间距”栏中进行调整，水平间距指图像与周围元素在水平方向的间距，以像素为单位；垂直间距指图像与周围元素在垂直方向的间距。
(3)如何编辑网页中的图像
在Dreamweaver 8中，可利用“图片”工具栏中的各种工具对网页中的图像进行编辑，编辑功能包括：图像旋转和翻转、裁剪、图像渐变、浮雕效果等。
另外，为了使图片更符合需求，我们还在Photoshop 8中对所用图片进行了处理，使其看起来更加精致美观，符合我们的主题要求。
(4)应用背景图像
应用背景图像与使用背景色不同，使用背景色仅将网页背景填充为某种颜色，而使用背景图像则是将网页背景以图像形式平铺。这样做可以使网页更加美观。应用背景图像的具体步骤如下：
- 创建一个空白网页。
- 点击鼠标右键，在弹出的快捷菜单中选“网页属性”，打开“网页属性”对话框。
- 切换到“背景”选项卡。
- 在“背景”选项卡的“格式”栏中勾选“背景图片”复选框，然后点击下面的“浏览”按钮，出现一个“选择背景图片”对话框。
- 在“选择背景图像”对话框中点击“浏览文件”按钮，出现一个“选择文件”对话框。
- 在“选择文件”对话框的文件列表中选择图像文件，点击“确定”按钮。
这样，所选图片将作为整个网页的背景，如果在第4步时同时勾选“水印”复选框，背景图片将显示为特殊的水印效果，当网页滚动时，背景不动，只有网页内容滚动，产生一种透明层的效果，非常吸引人。
(5)插入Flash动画
关于Flash视频，可以使用Dreamweaver中的“插入Flash视频”命令，将Flash视频内容插入Web页面，无需使用Flash创作工具。该命令可以插入Flash组件；当您在浏览器中查看它时，它显示所选择的Flash视频内容以及一组播放控件。
(6)设置鼠标悬停图片，实现图片交互
在插入图片的下拉菜单中有一项是“鼠标悬停”，点击这一项，会弹出一个对话框，在对话框中可以设置鼠标悬停前的图片和悬停时的图片，选择“确定”即可。
(7)设置链接
选中图片或文字，在下面的链接属性中输入所要连接到的地址，同时，下方的目标属性被激活，输入blank设置成在新窗口中打开网页。我们设置了链接本站点的网页页面，同时也连接了外网，使得大家访问页面时能够查询更多详细的信息，方便用户查询。
;
浅析如何提升《网页设计与制作》课程教学质量
提升教学质量是教育工作者和社会广泛关注的问题，也是一个经久不衰的话题。《网页设计与制作》课程是高等职业院校计算机相关专业必修的一门课程，旨在培养学生网页设计、网页制作、网站建设与管理的能力。本文从课程内容、教学方法、学习方法、考核方式等几个方面对如何提升《网页设计与制作》课程教学质量进行了分析与阐述。[关键词]职业院校；网页设计；网页制作；教学质量一.引言随着现代科学技术的飞速发展，计算机已被广泛应用于社会生活的各个领域，网站网页已成为公司、企业或个人展示信息的一个平台。《网页设计与制作》课程现已成为高等职业院校计算机相关专业必修的、理论与实践相结合、重在学生设计与制作的一门专业课。传统的教学方式主要以在多媒体教室授课，在机房实验为主，由于实验时间与授课时间是不连续的，往往出现在实验环节中有些知识会被遗忘，在多媒体教室上课并没有起到实质性作用，学生只是自我感觉看懂了，听懂了，但真正动手操作练习时，会发现很多知识点并没有掌握，结果导致部分学生失去学习的信心，整门课程的教学质量也随之下降。那么如何提升《网页设计与制作》这门课程的教学质量，达到师生共赢的结果，这是值得我们探讨的。本人经过几年的《网页设计与制作》课程的教学实践与观察，从课程教学内容、教学方法、实践教学、考核方式等几个方面阐述了这一关键问题。二.合理调整课程教学内容从高职教育的培养目标出发，《网页设计与制作》课程教学内容重在培养学生的网页设计、实际动手制作的能力，培养高素质高技能型人才，学生毕业就能上岗，因此对课程的教学内容进行合理的调整尤为重要，本课程重要介绍网站建设规划、网页的设计与制作及网站的建设与管理，经过对本课程的调查、分析与研究，从五大模块进行了介绍：模块一介绍网页基础知识，网站的种类，网站的概念，并对优秀的网站网页进行赏析；模块二介绍HTML语言，通过一个典型的小型网站来讲解HTML语言各类标记符的使用方法；模块三介绍网站建设、网站规划及流程，通过对优秀网站的分析，使学生头脑里存在设计的概念、想法及思路；模块四介绍制作网页软件的使用，通过具体的网站实例来介绍软件的使用方法；模块五为网站综合设计，通过由学生选择设计各类题目，两人一组设计一个综合类网站，进而锻炼学生的团队合作能力，网页设计与制作的能力。将整门课程分为五大模块，在实施过程中可能分阶段进行，这种课程体系结构的安排证明在实践过程中、在教学质量中都取得了良好的教学效果。三.改进教学方法，激发学生学习兴趣在传统的《网页设计与制作》中，主要是以教师在多媒体教室讲授，然后学生在机房练习实验内容，这种教学方法使学生对知识的掌握很容易被遗忘，因此采取灵活多样的教学方法，不仅能够激发学生的学习兴趣，还能够起到事半功倍的效果。本人在此课程中主要采用了项目式教学法取得的良好教学效果进行分析阐述。本课程中主要采用了项目式教学方法，所谓项目教学，就是师生通过共同实现一个完整的项目工作而进行的一个教学活动。项目可以一个学生独立做，也可以多个学生一起做。在教学前期一定要一个人独立完成一个项目，为掌握了并不等于会使用，一定要让学生动手实际操作，以是否会用相关技术制作出网页为评价标准。在教学后期比较大的项目上可以几个人一起完成。在本门课程的教学过程中，一方面采用四人为一个小组共同设计系部网站这一个项目，每组选出一名小组长进行总体的策划，将这一完整项目分成多个子任务，每个任务分配到小组成员中，使他们各尽其责完成自己负责的任务；另一方面小组中的每个成员必须完成一个作品，这个网站的作品是由个人独立完成的项目。网站制作结束前经过教师核准验收后，可以宣布整个项目工作结束。接下来教师要对学生制作的作品进行展示，在进行作品展示时，教师可以把班级同学集中起来一起观看，这会更加促进学生的团队意识。同时，为了更好地利用网络空间和网上资源，可以把学生的好作品上传校园网站。让全校师生都来关注学生的成果。这样，既给学生施加民压力，也激发了学生的学习动力与信心，让学生享受成功的快乐，享受成果的乐趣，真正提高对所学知识的理解和掌握。因此，通过个人项目、团队项目、作品展示等教学方法与形式，不仅锻炼了学生的自我设计、制作、审美及创新能力，还锻炼了学生的团队合作能力，分析问题、解决问题的能力，在很大程度上提高了学生的学习积极性和学习兴趣。实践证明项目式教学方法可行，得到了学生的喜爱与好评，也取得了良好的教学效果。四.正确引导学生的学习方法要提高教学质量，必须培养学生良好的学习习惯、有效的学习方法、良好的学习态度。职业院校的学生大多数存在学习的积极性不高，不主动，课前不预习，课后不复习等现象，因此，在本课程的教学过程中，正确引导学生的学习方法是至关重要的。(一)教师要很好地引导学生总结学习过程中的经验教训,从自身因素寻找获取学习成功的突破口,意识到学习是一个艰苦、求是、提高、升华的过程。经常与学生沟通交流，使学生养成预习与自学的好习惯。使学生了解，通过预习和自学能够充分发挥其动手的能力，掌握各种技能，培养自身的创新能力，这种方法的运用要比老师单纯地讲好得多。(二)根据学生的认知水平、思维方式，适当降低教材的理论难度，一方面以课程内容“适度、够用”为主，增强实用性和操作性，适应学生的心理实际，进而让他们经过一段时间的学习后，觉得这些课程能够学会，从而增强学生的自信心。另一方面，多让学生欣赏一些网页制作方面的案例，增加学生的兴趣，调动学生的学习积极性，激发学生的潜能。(三)在实际教学中，多引用实例，多让学生分析、解决、判断及操作完成，帮助学生加强深对网站网页的理解，使其能够灵活运用所学的知识，学生设计与制作网页，使学生获得一种满足感。例如：在介绍网页中表格的布局时，以“制作旅游类网站”为主进行介绍，首先由小组中的一名同学在黑板上画出网页的布局结构，然后再请另一名同学在软件中进行设计，小组协作共同完成这一个案例，在制作过程中难免会遇到一些问题，如表格布局是否合理、单元格是否为顶端对齐、单元格的边距和间距是否为0等现象是学生经常出问题的地方，那么由学生进行操作所遇到的问题，他们自身的印象会更深，这样就使其在今后的实践环节中减少此类问题的出现。五.考核方式《网页设计与制作》课程分为三部分考核，第一部分为平时成绩占30%，通过学生的日常出勤情况、实验效果情况、平时表现进行考核；第二部为期末考试成绩占50%，期末考试主要以学生作品进行考核，主要是锻炼学生的网页设计与制作的能力，同时通过学生自评、互评、教师点评等方式进而调动了学生的学习举；第三部分为对期末所制作的作品进行答辩占20%，主要是考核学生的表达能力、信息的收集与整理的能力。通过这三种考核方式，能够极大的调动学生的积极性，培养学生的创新思维，培养学生团队合作意识，同时也受到了学生的认可与好评。六.结束语总之，《网页设计与制作》课程是一门实践性非常强的课程，如何提升本门课程的教学质量途径多种多样，只要在教学中不断探索，勇于创新，定会寻找出一条既符合实际又有效的途径，让学生在有限的时间内学习到更多的知识，操作的更熟练，为今后的工作、学习奠定良好的基础。同时,我也相信，只要每位教师本着“勤学、善思、实干”的准则，一如既往，再接再厉，调动学生学习的主动和积极性，培养学生观察、思维、推理、自学以及分析问题、解决问题的能力，任何一门课程的教学质量都会得到提高。六.参考文献：[1]夏晶.试析如何提高高职院校《工业企业管理》课程的教学质量,中小企业管理与科技 2009
