网页设计实验报告.docx

网页设计实验报告.docx

《网页设计实验报告.docx》由会员分享，可在线阅读，更多相关《网页设计实验报告.docx（18页珍藏版）》请在冰点文库上搜索。

网页设计实验报告

《网页设计》课程实验设计报告

第一阶段实验报告

设计题目

韩国明星-BIGBANG

一、本阶段设计要求

1、内容要求：

主题要新颖，明确，健康，积极向上，必须是自己的原创作品。

结构要清晰有条理，并且内容要突出主题思想。

素材形式要丰富多种多样。

2、步骤要求：

按照建立网站的基本流程，对网站做整体规划（画草图），考虑网站的规模大小，收集必要素材等。

3、构建站点：

建立站点文件和文件夹结构。

并使用向导创建站点，使用高级设置本地站点、管理本地站点。

4、格式要求：

A设置整体页面属性、制作普通文字页面、在页面中放入图像，制作图文混排页面、制作鼠标经过图像的交互效果，制作导航条的交互效果。

B在页面中插入Flash按钮或Flash文本或Flash动画，丰富网页内容。

C利用框架或表格，对页面做整体规划。

并对表格属性进行设置。

D在网页中制作外部友情网站链接，内部页面链接，选择制作电子邮件链接和同页面或不同页面之间的锚点链接。

E必须要有导航条，导航项必须在4项以上，形式不限。

5、功能要求：

必须能从首页进入二级页面，并且从二级页面返回首页。

二、选题背景

Bigbang是韩国的一个有名的男子组合，意为宇宙大爆炸。

当然它的诞生确实在音乐界造成了一定的影响，他们的多才多艺更是使得他们能一直走到如今。

所以作为他们的铁杆粉丝，我也想要把这个组合介绍给大家，让大家一起了解流行音乐的真正魅力。

三、所用技术

1.用Photoshop处理所用的图片。

2.在Dreamweavercs3中建立布局，插入布局表格。

3插入图片，设置背景图像，设置图像属性。

4.设置鼠标经过图片

5.插入文本，设置文字格式

6.创建超级链接（文件链接，图片链接，网页链接）

四、实施过程（描述网站的总体布局和设计过程，可以通过截图、表格等方式体现设计步骤，描述实施中遇到的问题及解决方案）

（一）、确定网站主题，即韩流明星BIGBANG

（二）、搜集材料，主要从成员简介，社会评价，演艺经历，音乐作品，成员写真，获奖经历，近期活动消息，热门视频等方面搜集资料，然后分类整理成文件夹。

（三）、用Photoshop处理图片

（1）图片合并，以便更好的添加文字如：

＋

＋

（2）图片的裁剪如：

（四）、在Dreamweavercs中新建站点

（五）、在Dreamweavercs3中插入表格，在完成整体排版布局后插入图片，例如首页

（六）、完成插入文本，插入网页头部内容，设置鼠标经过图像，创建超级链接等页面的设计。

（1）文本插入

（2）插入网页头部内容，包括插入关键字、插入说明、设置刷新等

（3）设置鼠标经过图像

（4）通过创建链接，包括文本链接、文字和图片的热点链接等完成页面与页面之间的跳转，进一步丰富页面的内容。

（5）以上只是以首页的设计为例，除此之外，还逐一完成了网站中每张网页的设计操作。

（七）、测试上传，完成制作。

第二阶段的实验报告

设计题目

韩国明星-BIGBANG

一、本阶段设计要求（教师填写）

对于本阶段应该包括以下几个主要部分：

A、利用CSS来定义网站的样式表。

B、网页要有落款、版权说明。

C、网站中需要至少一个页面分别运用表格、框架等技术。

D、使用行为给网页添加特效，例如：

弹出信息，打开浏览器窗口，添加背景音乐，设置状态栏文本等。

E、在网页中插入Flash动画、Flash按钮、Flash文本等。

（第一阶段做过的就不用做）

F、丰富网页中的各种链接，例如：

图象热点链接，E-mail链接，下载连接，锚点链接等。

二、第一阶段所完成的任务

第一阶段已经完成了，确定主题，收集素材，定义站点，以及对网站作整体规划，在格式方面，已经完成整体页面属性设置，文字属性设置，页面中插入图像，制作鼠标经过图像以及导航栏的插入等。

在链接方面已经完成文字链接和导航栏的链接等。

三、所用技术（本阶段所使用的技术）

1.网页框架技术。

2.添加背景音乐。

3.在网页中插入Flash动画、Flash按钮等。

4各种链接：

E-mail链接，下载连接，图像热点链接等。

四、实施过程

打开Dreamweavercs3，新建一个展示相册的页面。

首先建立框架集，选择框架类型为上方和下方框架，将页面分为上下三部分，在第一部分中利用FLASH创建精美相册，在第二部分插入图片，在底部框架中注明网页的落款和版权说明。

一．创建框架集，并设置框架的颜色和宽度等属性，将页面分成上下三部分，效果如下：

二．利用FLASH制作相册。

（一）运行Dreamweaver，插入并保存FLASH元素，在属性面板中重新设置动画的宽、高值，如下图所示：

（二）设置“Flash元素”的参数，为Flash相册指定调用的图片、设置相册外观等

（三）在中间部分插入图片，底部注明落款和版权说明，在浏览器中预览效果。

打开已经做好的页面，丰富页面的内容，包括插入背景音乐，添加email链接，下载链接以及图片热点链接等技术

一．如在音乐页面中插入音乐和歌曲下载链接，在浏览器中预览效果如下：

二．在主页中设置电子邮件的链接，点击主页菜单栏中contacts便可进入页面。

三．丰富页面，添加更多的链接，例如主页中的图像热点链接

五、小结（本阶段的收获、体会及总结）

在本阶段中，完成了网页制作的很重要的几个步骤，目的是进一步丰富原本静态单调的页面，技术和能力的要求比第一阶段更高了。

区别来说，第一阶段主要是为网站建立主要的大的框架结构，以及做一些简单的图片和文字处理。

而在这一阶段，我添加了FLASH动画，插入和背景音乐，还给各个网页设计的做了进一步的丰富。

完成了这一阶段，自己的收获更大，收益也更多，因为这一阶段难度更高所以自己也有了更多的成就感，所以整个设计的过程自己也很享受。

第三阶段的实验报告

设计题目

韩国明星-BIGBANG

一、本阶段设计要求（教师填写）

1、内容要求：

在第一二次设计题目的基础上，对内容进行完善，增加2—4页面。

2、对于本阶段应该包括以下几个主要部分：

A、使用模板制作两个页面，必须定义可编辑区。

B、根据自己的主题插入表单及表单元素，例如：

在线报名，联系我们，在线订购单等。

C、利用Dreamweavercs3的扩展管理器安装必要的插件，制作特殊效果，例如：

彩色渐变文字，使用图像创建漂浮广告，根据不同时间显示不同的问候语，创建随机切换的广告图等。

（选择其中之二来做即可）

D、使用行为继续添加特效，例如：

弹出信息，打开浏览器窗口，添加背景音乐，设置状态栏文本等。

E、把多个页面中的相同元素创建为库项目，并加以应用。

F、使用站点地图显示站点内页面间的链接关系。

3、课程设计报告编写基本要求：

A．必须独立完成课程设计报告；

B．课程设计报告书写规范、文字通顺、图表清晰、数据完整、结论明确；

C．要求课程设计报告必须打印，装订成册。

二、前两阶段所完成的任务

第一二阶段已经完成了，确定主题，收集素材，定义站点，以及对网站作整体规划，在格式方面，已经完成整体页面属性设置，文字属性设置，页面中插入图象，制作鼠标经过图象，制作导航栏，插入Flash元素，用CSS来定义网站的样式表，用行为给网页添加特效等。

为进一步丰富网页在链接方面已经完成各种链接的制作等。

三、所用技术（本阶段所使用的技术）

1.创建模板，利用模板制作页面并定义可编辑区域

2.插入表单和表单元素

3.创建站点地图

4.建立库项目

5.增加“打开浏览器”的特效，以及使用插件

四、实施过程（描述网站的整体结构，使用站点地图显示站点内页面间的链接关系，并对本阶段新增的网站功能加以说明，最后，阐述网站的不足之处及可以继续完善的功能。

）

一．打开在DreamweaverCS，在插入记录中选择创建模板并保存，利用模板制作网页并根据排版要求定义可编辑区域。

之后再利用插入表格等方式对网页进行进一步的内容丰富，下图是创建模板的截图：

二通过插入表单的方式在“最爱bigbang的vip”网页中创建一个”粉丝登陆“

的小窗口，在姓名一栏插入文本域，在密码一栏插入密码域，效果图如下:

三网站中各个网页都涉及完之后，建立站点地图，方便于直观的看清网站的结构，使得整个网站更加完整和完美。

四建立一个版权的库项目如下

五、小结

第三阶段的完成也就意味着本次网页制作的圆满结束。

自己从这次实践中收获的不仅是网页制作的知识，更是一份独立完成作业的满足和欣喜。

在整个过程中我严格按照老师的要求完成制作，同时做到不失自己的风格。

在老师的指导下和自己耐心的钻研下，我尽我最大的努力将网页制作到完美。

当看到自己的最终成果时，不禁发自内心的感叹，感叹一路来的构思、设计、制作、修改最终完美收工。

但网页制作的技术很广泛，自己也只是略懂一二，相信还有很多值得学习的地方。

任务下达日期：

年月日

任务完成日期：

年月日

最终效果图