网页制作课程设计报告.doc

长江师范学院数学与计算机学院网页制作课程设计报告网页制作课程设计报告学院：专业班级：姓名：学号：成绩：阅卷教师：目录1.设计目的12.设计思想12.1网站整体结构规划思想12.2主页设计思想12.3子页的设计思想13网页详细设计分析14结论1-10-1.设计目的阐述该个人网站的设计意图和创意简单介绍自己的个人网站。2.设计思想阐述网站的整体设计思想包括：2.1网站整体结构规划思想要求阐述网站整体结构的选择、设计的思想绘制网站结构草图。2.2主页设计思想要求对主页的布局思路进行阐述和分析。2.3子页的设计思想要求对子页的设计以及网页对象的选取思路进行阐述和分析。3网页详细设计分析要求选取一张网页对网页的设计实现过程进行阐述和分析详细说明制作该网页的步骤所使用的网页对象以及该网页对象的操作方法。4结论对整个设计报告做归纳性总结并分析设计过程中的困难及如何解决的最后提出展望。一、设计目的本课程的设计目的是通过实践使同学们经历Dreamweavercs3开发的全过程和受到一次综合训练以便能较全面地理解、掌握和综合运用所学的知识。结合具体的开发案例理解并初步掌握运用Dreamweavercs3可视化开发工具进行网页开发的方法；了解网页设计制作过程。通过设计达到掌握网页设计、制作的技巧。了解和熟悉网页设计的基础知识和实现技巧。根据题目的要求给出网页设计方案可以按要求利用合适图文素材设计制作符合要求的网页设计作品。熟练掌握Photoshopcs3、Dreamweavercs3等软件的的操作和应用。增强动手实践能力进一步加强自身综合素质。我本次主要是设计的一“新加坡之旅”为主题的网页针对新加坡的美丽风景做了介绍。二、设计思想利用Dreamweaver8.0制作一个关于“新加坡之旅”的网站利用表格、行为、层和链接等网页设计技术设计页面。本网站以新加坡旅游为素材主要讲解了与新加坡景点相关的内容。首页设风景介绍和风景欣赏两个栏目。景点介绍设7个栏目风景欣赏只含一个页面。具体结构如图1.1所示。首页风景欣赏景点介绍乌敏岛小印度牛车水花柏山鱼尾狮公园夜间野生动物园莱佛士大酒店三、网页详细设计分析(一)建立布局在这次的网页设计中用到大量的布局所以怎么样建立布局是关键。Dreamweavercs3是大多数人设计网页的称手兵器也是众多入门者的捷径。特别是其在布局方面的出色表现更受青睐。大家都知道没有表格的帮助很难组织出一个协调合理的页面。1.点击“ALT+F6”键进入布局模式插入布局表格。建立一个大概的布局。2.使用背景图片：选中该项按浏览可以插入一幅准备好的图片作为表格的背景因为图片是以平铺的形式作为表格背景所以表格大小和图片尺寸都要控制好。（二）网页中的图像图像传输是WWW的真正魅力所在它与文字相比具有显著的优点：一是直观人眼观看图像时接受信息的速度远远超过观看文字时接受信息的速度；二是能更清楚地表达细节内容。正是由于这些优点所以在进行网页设计时图像很受欢迎。如果网页做得像一幅风景画浏览者一定会流连忘返（如果图片很大效果会适得其反）。图像文件的格式有几十种如GIF、JPEG、BMP、EPS、PCX、PNG、FAS、TGA、TIFF、WMF等现在InternetExplorer和Netscape支持的、最常用的图像格式是GIF、JPEG和BMP。（1）在网页中插入图像利用Dreamweavercs3可以方便地在网页中插入图像还可以设置图像边框、大小、和位置并且可以直接对图像进行编辑。在网页中加入图像的操作非常简单：1.新建一个空白网页把光标定位在网页的开始位置。2.打开“工具”菜单选择“图片”菜单项在子菜单中选择“来自文件”菜单项或者单击工具栏中的图片工具图标弹出一个“图片”对话框。3.在此对话框中单击“浏览”按钮出现一个“选择文件”对话框。4.在“选择文件”对话框的文件列表中选择某个图像文件然后单击“确定”按钮或直接双击该图像文件该图像即被加入到网页中。在网页中插入图像后我们就可以对图像的各种属性进行设置了。（2）图像的各种属性设置1.选中所插入的图片单击鼠标右键弹出一个快捷菜单在菜单中选择“图片属性”菜单项出现一个“图片属性”对话框.2.打开“外观”选项卡。(1)设定图像边框粗细：在“外观”选项卡的“布局”栏里可以根据需要定义图像的边框也可以定义边框值