网页制作课程设计报告

《网页制作课程设计报告》由会员分享，可在线阅读，更多相关《网页制作课程设计报告（14页珍藏版）》请在金锄头文库上搜索。

1、网页制作课程设计报告网页制作课程设计报告学院：专业班级：姓名：学号：成绩：阅卷教师：长江师范学院数学与计算机学院网页制作课程设计报告目录1设计目的 12.设计思想12.1网站整体结构规划思想 12.2主页设计思想12.3子页的设计思想13网页详细设计分析14结论2长江师范学院数学与计算机学院网页制作课程设计报告1.设计目的 阐述该个人网站的设计意图和创意， 简单介 绍自己的个人网站。2.设计思想 阐述网站的整体设计思想，包括：2.1 网站整体结构规划思想要求阐述网站整体结构的选择、设计的思 想，绘制网站结构草图。2.2 主页设计思想要求对主页的布局思路进行阐述和分析。2.3 子页的设计思想要求

2、对子页的设计以及网页对象的选取思 路进行阐述和分析。3 网页详细设计分析要求选取一张网页， 对网页的设计实现过程 进行阐述和分析， 详细说明制作该网页的步 骤，所使用的网页对象以及该网页对象的操作方法。4 结论对整个设计报告做归纳性总结， 并分析设计 过程中的困难及如何解决的，最后提出展一、设计目的本课程的设计目的是通过实践使同学们经历 Dreamweaver cs3 开发的全过程和受到一次综合训练，以便 能较全面地理解、掌握和综合运用所学的知识。结合具体的 开发案例， 理解并初步掌握运用 Dreamweaver cs3 可视化开 发工具进行网页开发的方法；了解网页设计制作过程。通过 设计达到

3、掌握网页设计、制作的技巧。了解和熟悉网页设计 的基础知识和实现技巧。根据题目的要求，给出网页设计方 案，可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。熟练掌握 Photoshop cs3、Dreamweaver cs3等软件的的操作和应用。增强动手实践能力，进一步加强自身综合素质。我本次主要是设计的一“新加坡之旅”为主题的 网页，针对新加坡的美丽风景做了介绍。1、设计思想利用Dreamweaver8.0制作一个关于“新加坡之旅”的 网站，利用表格、行为、层和链接等网页设计技术设计页面。本网站以新加坡旅游为素材，主要讲解了与新加坡景 点相关的内容。首页设风景介绍和风景欣赏两个栏目。

4、景点 介绍设7个栏目，风景欣赏只含一个页面。具体结构如图1.1 所示。景点介绍风景欣赏二、网页详细设计分析（一）建立布局在这次的网页设计中用到大量的布局，所以怎么样建立布局是关键。Dreamweaver cs3是大多数人设计网页的称手 兵器，也是众多入门者的捷径。特别是其在布局方面的出 色表现，更受青睐。大家都知道，没有表格的帮助，很难 组织出一个协调合理的页面。1点击“ ALT+F6 ”键，进入布局模式，插入布局表格。建立一个大概的布局。2使用背景图片：选中该项，按浏览可以插入一幅准备 好的图片作为表格的背景， 因为图片是以平铺的形式作为 表格背景，所以表格大小和图片尺寸都要控制好。（二）网

5、页中的图像图像传输是 WWW 的真正魅力所在，它与文字相比 具有显著的优点：一是直观，人眼观看图像时接受信息的 速度远远超过观看文字时接受信息的速度；二是能更清楚地表达细节内容。正是由于这些优点，所以在进行网页设计时图像很受欢迎。如果网页做得像一幅风景画，浏览者 一定会流连忘返（如果图片很大，效果会适得其反） 。 图 像文件的格式有几十种，如GIF 、JPEG、BMP 、EPS、PCX 、PNG、FAS、TGA 、TIFF 、WMF 等，现在 Internet Explorer 和 Netscape 支持的、最常用的图像格式是 GIF 、 JPEG 和 BMP 。（ 1）在网页中插入图像利用

6、Dreamweaver cs3 可以方便地在网页中插入图像，还 可以设置图像边框、大小、和位置，并且可以直接对图像 进行编辑。在网页中加入图像的操作非常简单：1. 新建一个空白网页，把光标定位在网页的开始位置。2. 打开“工具”菜单，选择“图片”菜单项，在子菜单 中选择“来自文件”菜单项，或者单击工具栏中的图片工 具图标，弹出一个“图片”对话框。3. 在此对话框中单击“浏览”按钮，出现一个“选择文 件”对话框。4. 在“选择文件” 对话框的文件列表中选择某个图像文 件，然后单击“确定”按钮，或直接双击该图像文件，该 图像即被加入到网页中。 在网页中插入图像后我们就可以 对图像的各种属性进行设置

7、了。（2）图像的各种属性设置1. 选中所插入的图片， 单击鼠标右键， 弹出一个快捷菜单，在菜单中选择“图片属性”菜单项，出现一个“图片 属性”对话框 .2. 打开“外观”选项卡。(1)设定图像边框粗细：在“外观”选项卡的“布局”栏 里可以根据需要定义图像的边框，也可以定义边框值为 “ 0”，即无边框。(2)设置图像环绕方式： 一般情况下一幅图像只能与一行 文字处在同一高度，但有时需要将图像和文字分开，且两 者互不影响。比如在网页左边插入一幅图像，要求右边的 文字就像没有图像时可以多行输入， 这就要通过设置图像 的环绕方式来实现。在网页中图像的环绕方式有两种： 左环绕：图像在左边，文本在图像的右

8、边进行环绕。 右环绕：图像在右边，文本在图像的左边进行环绕。 在“外观”选项卡的“布局”栏中打开“对齐方式”下拉 列表框，选择“左”选项，并单击“确定”按钮，图像就 被设置为左环绕方式，同样，如果选“右” ，图像就被设置 为右环绕方式。(3) 编辑图像大小： 在 Dreamweaver cs3 中，当在网页 中加入一幅图像后，图像大小默认设置为其原来的大小， 如果加入的图像太大或太小，或有其他特别需要，就得调 整图像的大小。调整图像大小非常简单灵活，只要你选中 加入的图像，用鼠标左键拖动图像边框，可任意调整图像的宽度和高度直到达到你满意的尺寸。(4)设置图像缩放比例： 网页设计的一个重要原则就

9、是 网页的兼容性，对于不同的浏览器或者不同的分辨率，不 管是800 X 600的窗口，还是 1024 X 768的窗口，网页都 要能正常的显示。 设置图像缩放比例就是将图像设置为大 小可以按比例变化，与浏览器的大小成一固定比例，这样 在不同大小的浏览器窗口里图像都能正常的显示外观。 设 置图像缩放比例的步骤如下：1. 选中网页中的图像，单击鼠标右键，在弹出的快捷 菜单里， 选择“图像属性” 菜单项， 弹出一个 “图像属性” 对话框 .2. 在“大小”栏中选中“指定大小”复选框，同时选 中“宽度”和“高度”下面的“百分比”单选按钮，然后 在“宽度”和“高度”栏里输入想显示的比例，单击“确 定”完

10、成设置。 外还可以在 “外观” 选项卡的 “水平间距” 和“垂直间距”栏里进行设置，水平间距是指图像与周围 元素在水平方向的间距，以象素为单位；垂直间距指图像 与周围元素在垂直方向的间距。( 3)怎样编辑网页中的图像在 Dreamweaver cs3 中，可以使用“图片”工具栏中 的各种工具对网页中的图像进行编辑，编辑功能主要有： 图像旋转和翻转、剪裁、图像淡化、凹凸效果等等。另外，为了使图片更符合要求，我们还在 photoshopcs3 中队所用的图片进行了处理， 使得图片看起 来更加精细美观，符合我们的主题要求。（4）使用背景图像使用背景图像与使用背景色不同， 使用背景色只将网 页的背景用

11、某种颜色填充， 而使用背景图像则是将网页的 背景用图像平铺。这样做可以使制作的网页更美观好看。 网页中使用背景图像的具体步骤如下：1.新建一个空白网页。2.单击鼠标右键，弹出的快捷菜单里选“网页属性”，弹出“网页属性”对话框 .3. 开“背景”选项卡。4. 在“背景”选项卡的“格式”栏中选中“背景图片” 复选框，然后单击下面的“浏览”按钮，出现一个“选择 背景图片”对话框。5. 在“选择背景图像”对话框中单击“浏览文件”按 钮，出现一个“选择文件”对话框。6. 在“选择文件” 对话框的文件列表中选择图像文件， 单击“确定”按钮。这样，所选图片将作为整个网页的背景，如果在第 4 步时 同时选中“

12、水印”复选框，背景图片将显示为特殊的水印 效果，当网页滚动时，背景不动，只有网页内容滚动，产 生一种透明层的效果，非常吸引人。（ 5）插入 flash 动画关于 Flash 视频 使用 Dreamweaver 中的“插入 Flash 视频” 命令， 可将 Flash 视频内容插入 Web 页面， 而无需使用 Flash 创作工具。该命令可以插入Flash 组件；当您在浏览器中查看它时，它显示所选择的Flash 视频内容以及一组播放控件。（6）设置鼠标经过图片，进行图片交互 再插入图片的下拉菜单中有一项是“鼠标经过” ，点 击这一项，会弹出一个对话框，在对话框中可以设置鼠标 经过前的图片和经过时

13、的图片，选择“确定”即可。（7）设置链接选中图片或者文字， 在下面的链接属性中输入所要连 接到的地址，同时，下方的目标属性被激活，输入 blank 设置成在新窗口中打开网页。 我们设置了链接本站点的网 页页面，同时也连接了外网，使得大家访问页面时能够查 询更多详细的信息，方便用户查询。新加坡的标志与象征 新加坡是东南亚的一个岛国* 也是一个城市国家盘该国位于 马来半岛南端，毗邻马六甲的 南口，我南ifii冇新加坡海峡与 印尼相隔，北血有柔佛海峡与 马來西亚相隔，并以直堤相连 于新马两岸之间。新加坡是呃 洲最重要的金融、服务和航运 中心之新加坡在城市保洁 方面效果显著，故亦有柱花园 城市”之美称

14、。号敏岛 花柏山牛车水 葉佛土大酒応 枝间野生动物园小印度 鱼尾狎公凶四、结论通过这次网页课程设计激发学习兴趣，调动学习的自 觉性，自己动脑、动手，动口，运用网络资源，结合教材及 老师的指导，通过自身的实践，创作出积聚个人风格、个性 的个人网页。总体来说，整个学期的学习过程，我学会了很 多知识，在此次网页设计中，我充分利用了这次设计的机会， 全心全意投入到网页世界，去不断的学习，去不断的探索； 同时去不断的充实，去不断的完善自我，在网络的天空下逐 渐的美化自己的人生！做好页面，并不是一件容易的事，它包括个人主页的选 题、内容采集整理、图片的处理、页面的排版设置、背景及其整套网页的色调等很多东西。本次课程设计不是很好，页 面过于简单，创新意识反面薄弱，这是我需要提高的地方。 需要学的地方还有很多，需要有耐心、坚持，不断的学习， 综合运用多种知识，才能设计出好的web 页面。总体来说，通过这次的对网页课程设计，有收获也有遗憾、不足的地方，但我想，我已经迈入了网页设计的大门，只要我再认真努力的去学习，去提高，凭借我对网页设计的热情和执着，我将来设计出的网页会更加专业，更完善。- #-