网页制作课程设计总结

网页制作课程设计总结

　　1.设计目的

　　阐述该网站的设计意图和创意，简单介绍网站。

　　2.设计思想

　　阐述网站的整体设计思想，包括：

　　2.1网站整体结构规划思想

　　要求阐述网站整体结构的选择、设计的思想，绘制网站结构草图。

　　2.2 主页设计思想

　　要求对主页的布局思路进行阐述和分析。

　　2.3子页的设计思想

　　要求对子页的设计以及网页对象的选取思路进行阐述和分析。

　　3网页详细设计分析

　　要求选取一张网页，对网页的设计实现过程进行阐述和分析，详细说明制作该网页的步骤，所使用的网页对象以及该网页对象的操作方法。

　　4结论

　　对整个设计报告做归纳性总结，并分析设计过程中的困难及如何解决的，最后提出展望。

　　一、设计目的

　　本课程的设计目的是通过实践使同学们经历Dreamweaver 8开发的全过程和受到一次综合训练，以便能较全面地理解、掌握和综合运用所学的知识。结合具体的开发案例，理解并初步掌握运用Dreamweaver 8可视化开发工具进行网页开发的方法;了解网页设计制作过程。通过设计达到掌握网页设计、制作的技巧。了解和熟悉网页设计的基础知识和实现技巧。根据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。熟练掌握Photoshop 8、Dreamweaver 8等软件的的操作和应用。增强动手实践能力，进一步加强自身综合素质。我本次主要是设计的一“新加坡之旅”为主题的网页，针对新加坡的美丽风景做了介绍。

　　二、设计思想

　　利用Dreamweaver8.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的窗口，网页都要能正常的显示。设置图像缩放比例就是将图像设置为大小可以按比例变化，与浏览器的大小成一固定比例，这样在不同大小的浏览器窗口里图像都能正常的显示外观。设置图像缩放比例的步骤如下：

　　1.选中网页中的图像，单击鼠标右键，在弹出的快捷菜单里，选择“图像属性”菜单项，弹出一个“图像属性”对话框.

　　2.在“大小”栏中选中“指定大小”复选框，同时选中“宽度”和“高度”下面的“百分比”单选按钮，然后在“宽度”和“高度”栏里输入想显示的比例，单击“确定”完成设置。外还可以在“外观”选项卡的“水平间距”和“垂直间距”栏里进行设置，水平间距是指图像与周围元素在水平方向的间距，以象素为单位;垂直间距指图像与周围元素在垂直方向的间距。

　　(3)怎样编辑网页中的图像

　　在Dreamweaver 8中，可以使用“图片”工具栏中的各种工具对网页中的图像进行编辑，编辑功能主要有：图像旋转和翻转、剪裁、图像淡化、凹凸效果等等。

　　另外，为了使图片更符合要求，我们还在photoshop8中队所用的图片进行了处理，使得图片看起来更加精细美观，符合我们的主题要求。

　　(4)使用背景图像

　　使用背景图像与使用背景色不同，使用背景色只将网页的背景用某种颜色填充，而使用背景图像则是将网页的背景用图像平铺。这样做可以使制作的网页更美观好看。网页中使用背景图像的具体步骤如下：

　　1.新建一个空白网页。

　　2.单击鼠标右键，弹出的快捷菜单里选“网页属性”，弹出“网页属性”对话框.

　　3.开“背景”选项卡。

　　4.在“背景”选项卡的“格式”栏中选中“背景图片”复选框，然后单击下面的“浏览”按钮，出现一个“选择背景图片”对话框。

　　5.在“选择背景图像”对话框中单击“浏览文件”按钮，出现一个“选择文件”对话框。

　　6.在“选择文件”对话框的文件列表中选择图像文件，单击“确定”按钮。

　　这样，所选图片将作为整个网页的背景，如果在第4步时同时选中“水印”复选框，背景图片将显示为特殊的水印效果，当网页滚动时，背景不动，只有网页内容滚动，产生一种透明层的效果，非常吸引人。

　　(5)插入flash动画

　　关于 Flash 视频 使用 Dreamweaver 中的“插入 Flash 视频”命令，可将 Flash 视频内容插入 Web 页面，而无需使用 Flash 创作工具。该命令可以插入 Flash 组件;当您在浏览器中查看它时，它显示所选择的 Flash 视频内容以及一组播放控件。

　　(6)设置鼠标经过图片，进行图片交互

　　再插入图片的下拉菜单中有一项是“鼠标经过”，点击这一项，会弹出一个对话框，在对话框中可以设置鼠标经过前的图片和经过时的图片，选择“确定”即可。

　　(7)设置链接

　　选中图片或者文字，在下面的链接属性中输入所要连接到的地址，同时，下方的目标属性被激活，输入blank设置成在新窗口中打开网页。我们设置了链接本站点的网页页面，同时也连接了外网，使得大家访问页面时能够查询更多详细的信息，方便用户查询。

;

~

创建PPT课件章节页的4种方法
答：一个完整的PPT课件结构一般包括以下7个部分：1. PPT封面 2. PPT章节页 3. PPT目录页 4. PPT内容页 5. 综合测试 6. 课程总结 7. 结束页 当然每个课程设计者的意图，结构不同，视具体情况而定。今天我们主要讲的是PPT章节页的设计，新颖的章节设计，精彩的界面设计会为PPT课件增色。章节页在课程...

java课程设计结束了,老师要我们写心得体会,好心人帮我写一份吧_百度...
答：在此次课程设计中，我主要负责商品信息查询部分功能的实现和商品公告栏包括商城公告，销量排行，友情链接等功能的实现，这些功能都是有链接的，有的连接到本网站有关内容，有的是连接到以外的网站。在页面布局中，并没有遇到什么困难，主要是合理正确利用网页制作标记，实现准确定位。遇到的困难主要集中在页面...

数电课程设计自我总结
答：我也去答题访问个人页 关注 展开全部 数电课程设计自我总结 引导语:数电课程设计可以培养学生综合运用所学知识,下面是我整理的数电课程设计自我总结,欢迎参考! 【数电课程设计自我总结1】 数电课程设计是培养学生综合运用所学知识,发现,提出,分析和解决实际问题,锻炼实践能力的重要环节,是对学生实际工作能力的具体训...

课程设计的目的和意义
答：以下是我做课程设计时写的，希望能够帮你 目的：根据课堂讲授内容，学生做相应的自主练习，消化课堂所讲解的内容；通过调试典型例题或习题积累调试C程序的经验；通过完成辅导教材中的编程题，逐渐培养学生的编程能力、用计算机解决实际问题的能力。C语言课程设计过程总结：回顾起此次课程设计，至今我仍感慨颇多...

HTML5 Canvas课程设计目的
答：HTML5 Canvas课程设计目的：1、灵活的使用html+css语言和Div+css的布局来制作优良的静态页面。2、使用JavaScript语言制作精良的动态效果和用户体验。3、使用Html5来制作精美网页效果以及移动APP开发和混合APP的开发与制作。4、深入浅出的对于JavaScript的函数框架制作与使用。学习HTML5的优势：1、网络标准统一...

专业设计心得体会
答：通过这次课程设计,我对C语言更有兴趣了,我相信以后我一定赶上我们的太阳的。 专业设计心得体会2 本学期冲压模具课程设计以老师命题为主,为期一周,内容包括数据计算,课程设计说明书制作,图纸绘制以及课程设计小结。以小组为单位进行。 我们认为,在这学期的实验中,在收获知识的同时,还收获了阅历,收获了成熟,在此过程...

本科生课程设计任务书,设计报告 怎么写
答：必须要写出，为什么这样做来，也就是说，必须在掌握的基础上编写程序。5. 软件测试 说明自己模块的测试过程和测试原理。如果是组长，则要说明总体的测试情况。给出测试报告。6. 程序清单 给出自己设计模块的程序清单。7. 参考资料 说明自己在课程设计中参考的文献资料，参考资料的格式如下：[1] 作者1...

课程设计开题报告格式
答：在上述三个方面中间文献综述是重点。没有文献综述你就无法找到自己的题目也不知道这个题目别人已经做得怎么样所以你要认真进行综述。当然综述的目的还是引出你自己的话题所以不能忘记评述。课程设计开题报告格式2 1 总述 开题报告的总述部分应首先提出选题，并简明扼要地说明该选题的目的、目前相关课题研究...

如何做课程设计
答：课程设计（curriculum design）不同的定义反映了不同的课程研究取向。不同的关于课程设计的定义大致可分为两类：一类是技术取向的，如普拉特（Pratt）认为：课程设计是课程工作者从事的一切活动，这包含他对达成课程目标所需的因素、技术和程序，进行构想、计划、选择的慎思过程（黄政杰，1991，85 页）；另...

软件项目工作总结范文1000字
答：我也去答题访问个人页 关注 展开全部 最美好的就是工作的时光,这段时间的工作辛苦了,你要开始写你的工作总结了,总结是做好各项工作的重要环节,是我们工作中应用写作的一种方式。那么这个工作总结要怎么写比较好?的我陆续为大家整理了软件项目工作总结范文,欢迎分享给你的朋友! 软件项目工作总结范文【篇1】 20...