首页范文大全工作报告正文
导航

网页设计的实验报告

网页设计的实验报告(一)

河南城建学院

《网页制作》课程设计报告

学 号: 专 业: 姓 名: 题 目: 指 导 教 师设 计 时 间:计算机科学与工程系2010年6月

目 录

一 设计目的 .................................................. 3

二、课程设计题目 ........................................ 3

三、课程设计要求 ........................................ 3

四、需求分析 ................................................ 4

五、技术分析 ................................................ 5

六、创意分析 ................................................ 8

七、制作过程及要点 .................................... 9

八、参考资料 .............................................. 12

九、设计总结 .............................................. 12

一 设计目的

本课程的设计目的是通过实践使同学们经历Dreamweaver cs3开发的全过程和受到一次综合训练,以便能较全面地理解、掌握和综合运用所学的知识。结合具体的开发案例,理解并初步掌握运用Dreamweaver cs3可视化开发工具进行网页开发的方法;了解网页设计制作过程

通过设计达到掌握网页设计、制作的技巧。 了解和熟悉网页设计的基础知识和实现技巧。

根据题目的要求,给出网页设计方案,可以按要求,利用合适图文素材设计制作符合要求的网页设计作品。

熟练掌握Photoshop cs3、Dreamweaver cs3等软件的的操作和应用。 增强动手实践能力,进一步加强自身综合素质。 学会和团队配合,逐渐培养做一个完整项目的能力。

二、课程设计题目

玩转西安

三、课程设计要求

1.课程设计要求一组一题,每题之间不得有雷同现象。

2.每个题目至少要 有15个不同页面(不能利用模板生成),总页面不少于30个。作品中必须有index.htm为索引页,作品中需包含flash动画、超链接、图片、声音等多媒体元素。

3.课程设计过程中,首先要进行项目调研分析、技术设计分析及页面布局。 4.设计结束时,每人须按题目分析设计的要求,上交所有的HTML文档和素材,将所有文件只作为压缩包,文件名按“学号+姓名+项目名称”来命名。

5.作品内容必须要和课程设计报告中的项目内容要一致,设计报告要求在5000字左右,报告内容应有课程设计题目、需求分析、设计制作方案及关键制作技术等内容,必要处需要将效果图抓屏后进行插图。课程设计报告要求用A4纸打印后与作品一同上交,无设计报告者不予评定成绩。

选定主题,确定题目之后,在做整个网站之前对网站进行需求分析。首先,做好需求调研。调研方式主要是上网查阅资料,在图书馆里翻阅相关书籍。调研内容如下:

1、 网站当前以及日后可能出现的功能需求。

2、 客户对网站的性能(如访问速度)的要求和可靠性的要求。 3、 确定网站维护的要求。 4、 网站的实际运行环境。

5、 网站页面总体风格以及美工效果。 6、 主页面和次级页面数量等。 7、 内容管理及录入任务的分配。

8、 各种页面特殊效果及其数量(如flash等)。 9、 项目完成时间及进度。

然后,调研结束之后对整个网站进行功能描述,并对网站进行总体规划,接着逐步细化。

我们选做的主题是旅游交通,并且选定题目为“玩转西安”,其目的是做一个简单的网站,介绍西安旅游的各个方面,提供一定的资讯信息,。进行一番调研之后,该网站整体站功能结构图如下:

(一)建立布局

在这次的网页设计中用到大量的布局,所以怎么样建立布局是关键。Dreamweaver cs3是大多数人设计网页的称手兵器,也是众多入门者的捷径。特别是其在布局方面的出色表现,更受青睐。大家都知道,没有表格的帮助,很难组织出一个协调合理的页面。

1.点击“ALT+F6”键,进入布局模式,插入布局表格。建立一个大概的布局。 2.使用背景图片:选中该项,按浏览可以插入一幅准备好的图片作为表格的背景,因为图片是以平铺的形式作为表格背景,所以表格大小和图片尺寸都要控制好。

(二)网页中的图像

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

利用Dreamweaver cs3可以方便地在网页中插入图像,还可以设置图像边框、大小、和位置,并且可以直接对图像进行编辑。在网页中加入图像的操作非常简单:

1.新建一个空白网页,把光标定位在网页的开始位置。

2.打开“工具”菜单,选择“图片”菜单项,在子菜单中选择“来自文件”菜单项,或者单击工具栏中的图片工具图标,弹出一个“图片”对话框。 3.在此对话框中单击“浏览”按钮,出现一个“选择文件”对话框。 4.在“选择文件”对话框的文件列表中选择某个图像文件,然后单击“确定”按钮,或直接双击该图像文件,该图像即被加入到网页中。在网页中插入图像后我们就可以对图像的各种属性进行设置了。 (2)图像的各种属性设置 1.选中所插入的图片,单击鼠标右键,弹出一个快捷菜单,在菜单中选择“图片属性”菜单项,出现一个“图片属性”对话框. 2.打开“外观”选项卡。

(1)设定图像边框粗细:在“外观”选项卡的“布局”栏里可以根据需要定义图像的边框,也可以定义边框值为“0”,即无边框。

(2)设置图像环绕方式:一般情况下一幅图像只能与一行文字处在同一高度,但有时需要将图像和文字分开,且两者互不影响。比如在网页左边插入一幅图像,要求右边的文字就像没有图像时可以多行输入,这就要通过设置图像的环绕方式来实现。在网页中图像的环绕方式有两种:

①左环绕:图像在左边,文本在图像的右边进行环绕。 ②右环绕:图像在右边,文本在图像的左边进行环绕。

在“外观”选项卡的“布局”栏中打开“对齐方式”下拉列表框,选择“左”

网页设计的实验报告(二)

JIANGXI AGRICULTURAL UNIVERSITY

本 科 课 程 报 告

题目: 网页制作实验报告

学 院: 软件学院 姓 名: 徐潇 学 号: 20101506 专 业: 软件工程 班 级: 软件1002班 指导教师: 唐建军、胡昶

二0一一年十二月

实验一、认识HTML

一、实验目的:了解HHTML中涉及的技术。

HTML语言的组成及特点,学会利用HTML语言编辑网页。 了解CSS。

了解网站开发的流程。

二、实验内容

1.参考书1.2.1节,利用记事本实现唐诗实例。

(1):在“记事本”中输入虞美人的文本。

(2):选择“文件”—>“保存”命令,将该文件保存为“虞美人.html”,此时该文档将显示IE图标。

(3):打开图标。

如图所示:

2. 在Dreamweaver中输入如下代码:

3.请写出以下效果的HTML代码(包括分行及分段效果)

角标的实现:在拆分视图下的文本编辑区域输入X1,然后看其在代码编辑区的变化。想要实现上下角标要用到<sup></sup>角标在字母的上方; <sub></sub>角标在字母的下方。

红色字体的实现:在文本编辑区域回车编写“这是红色的字”然后选中这行字在属性面板中选择颜色为红色。

粗体字的实现:在文本编辑区域回车编写“这是粗体字”然后选中这行字在属性面板中点击粗体。

斜体字的实现:在文本编辑区域回车编写“这是斜体字”然后选中这行字在属性面板中点击斜体

4.我上网浏览了谷歌

他的URL:http://

目 标:谷歌的目标是“万能搜索”

此网站的导航利用超连接及表单等实现导航的

实验二、Dreamweavor应用

一、实验目的:掌握如何在Dreamweaver中进行网页编辑; 掌握Dreamweaver中站点的设置;

掌握网站空间的申请及网页的上传。

二、实验内容

1.将实验1中的内容,利用DreamWeavor完成,并注意在拆分视图下,观察它是如何将格式操作变成HTML代码的。

2.按书中要求,制作唐诗宋词网站的首页。

3.在Dreamweaver中设置站点,并为唐诗宋词网站规划网站文件夹结构。

网页设计的实验报告(三)

《网页设计技术》

实验报告

姓名: 南志贤

学号: 班级: 电气1001班

学院: 电气与电子工程学院

专业: 电气信息类

教师: 刘文涛

一、实验任务书

1、目 的 和 意 义:

这是我做的第一次网站,也是我第一次接触做网站,做我的个人网页并不是仅仅为了完成老师布置的任务,而是真正地想多掌握一门知识--学习如获使用网页制作相关软件(Dreamweaver、Firework、flash软件)并进行网页制作(其实这些软件并不是只是用于网页设计,学习使用这些软件对于日后的生活是有很大帮助的),同时锻炼自己的自学能力和创造实践能力,怎么说我觉得通过网页设计这门课程,它达到地目的和意义是非常重大的,我觉得主要可以概括为以下几个方面:

(1)利于基础知识的理解

通过《网页设计》选修课程的学习,让学生掌握一些信息时代生存与发展必需的信息技术基础知识和基本技能,具备了在日常生活与学习中应用信息技术解决问题的基本态度与基本能力。但是,平时学生对于网页设计及网站管理的机理等知识内容的理解比较肤浅,认为它有一种神秘感。但是,学生如果接触了网页设计,就能真正理解,其实网页设计也不过如此,从而打破计算机的一种神秘感。

(2)、有利于逻辑思维的锻炼

在许多常规学科的日常教学中,我们不难发现这样一个现象,不少学生的思维常常处于混乱的状态。写起作文来前言不搭后语,解起

数学题来步骤混乱,这些都是缺乏思维训练的结果。然而网页设计却能直接有效地训练学生的创新思维,培养分析问题、解决问题的能力。即使一个简单的网页,从确定网页特色风格到排版布局、界面布局(有时涉及到编写代码)到调试运行,整个过程学生都需要有条理地构思,这中间有猜测设想、判断推理的抽象思维训练,也有分析问题、解决问题、预测目标等能力的培养。

(3)、有利于与其他学科的整合

在网页设计中,我们可以解决其它学科有关问题,也利用其它课程的有关知识来解决信息技术中比较抽象很难理解的知识。在信息技术课中整合其它学科的知识,发挥信息技术的优势,例如,在看网页设计的有关代码时,其中很多脚本代码的使用规则和我们今年上半年所学的C语言的规则是相通的。

(4)、有利于治学态度的培养。

网页设计设计中,特别是再用表格法布局时,这过程中是需要有条理地构思及判断推理,有时因为粗心可能会导致网页无法正常运行从而可能会导致整个网页需要重新制作,这时我们会有一种哑巴吃黄连——有苦说不出的感觉,。因此,网页设计初学阶段,我们经常会犯这样的错误,可能要通过几次乃至十多次的反复修改、调试,才能成功,但这种现象会随着学习的深入而慢慢改观。这当中就有一个严谨治学、一丝不苟的科学精神的培养,又有一个不怕失败、百折不挠品格的锻炼

2、 内容和要求:

网页设计这门选修课程需要我们完成一个网站,在此我制作了一个关于90后追求个性和自由的网站,这个网站主要包括有15张网页。因为这个主题跟我们息息相关,我觉得是我们现代学生的思想和追求的一种写照。我的整个网站中含有FLASH动画图片、音乐(例如我的资料网页中的背景音乐,视频多媒体元素中都有相关视频)。 利用表格或层技术进行网页的布局,其中主要是用表格进行布局,层技术使用相对较少,因为层技术在使用时当浏览网页时会错位这个问题我一直没有攻克所以没有过多使用。网站的整体风格比较一致、色彩协调、主题鲜明,整个网站中以各种浅色为主调,各个网页各有特色,但却并不影响整个网站的色彩的协调和主题的表达。其中网页中的2篇日志我认为是比较励志的,所以在此向大家推荐一下。过多的我在此也不都啰嗦,希望通过这个网站的浏览能对我有一个充分的了解。

3、实验环境:

Adobe Dreamweaver CS5

Adobe Dreamweaver CS3 (这个软件用的较少,主要用的是Adobe Dreamweaver CS5)

二. 网站功能

三、制作流程

(1) 步骤一:先通过在图书馆查找资料以及网上视频自学Adobe

Dreamweaver CS5

(Adobe Dreamweaver CS3 ) Adobe PhotoshopCS5 Adobe Flash

网页设计的实验报告(四)

江 西 科 技 师 范 学 院

实 验 报 告

课 程 网站规划与网页设计

院 系 文学院

班 级 08广告学

学 号 20082337

姓 名 辛焱超

告 规 格

一、实验目的

四、实验方法及步骤

二、实验原理

五、实验记录及数据处理

三、实验仪器 六、误差分析及问题讨论

目 录

1. HTML网页设计

2. FrontPage网页设计

3. FrontPage网页设计和Dreamweaver网站设计

4. Dreamweaver网站设计

5. Fireworks网页设计

6. Flash动画制作工具

7. 动画制作工具flash和网站规划及实现

8. 网站规划及实现 9.

10.

11.

12.

13.

14.

15.

每次实验课必须带上此本子,以便教师检查预习情况和记录实验原始数据。

实验时必须遵守实验规则。用正确的理论指导实践袁必须人人亲自动手实验,但反对盲目乱动,更不能无故损坏仪器设备。

这是一份重要的不可多得的自我学习资料袁它将记录着你在大学生涯中的学习和学习成果。请你保留下来,若干年后再翻阅仍将感到十分新鲜,记忆犹新。它将推动你在人生奋斗的道路上永往直前!

成绩

实验一

一、实验课程名称

网站规划与网页设计

二、实验项目名称

HTML网页设计