网页设计实验报告
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第三阶段的实验报告
设计题目
韩国明星-BIGBANG
一、本阶段设计要求（教师填写）
1、内容要求：在第一二次设计题目的基础上，对内容进行完善，增加2—4页面。
2、对于本阶段应该包括以下几个主要部分：
A、使用模板制作两个页面，必须定义可编辑区。
B、根据自己的主题插入表单及表单元素，例如：在线报名，联系我们，在线订购单等。
D、使用行为给网页添加特效，例如：弹出信息，打开浏览器窗口，添加背景音乐，设置状态栏文本等。
E、在网页中插入Flash动画、Flash按钮、Flash文本等。（第一阶段做过的就不用做）
F、丰富网页中的各种链接，例如：图象热点链接，E-mail链接，下载连接，锚点链接等。
二、第一阶段所完成的任务
第一阶段已经完成了，确定主题，收集素材，定义站点，以及对网站作整体规划，在格式方面，已经完成整体页面属性设置，文字属性设置，页面中插入图像，制作鼠标经过图像以及导航栏的插入等。在链接方面已经完成文字链接和导航栏的链接等。
三、所用技术（本阶段所使用的技术）
1.网页框架技术。
2.添加背景音乐。
3.在网页中插入Flash动画、Flash按钮等。
4各种链接：E-mail链接，下载连接，图像热点链接等。
四、实施过程
打开Dreamweaver cs3，新建一个展示相册的页面。首先建立框架集，选择框架类型为上方和下方框架，将页面分为上下三部分，在第一部分中利用FLASH创建精美相册，在第二部分插入图片，在底部框架中注明网页的落款和版权说明。
一．创建框架集，并设置框架的颜色和宽度等属性，将页面分成上下三部分，效果如下：
二．利用FLASH制作相册。
(一)运行Dreamweaver，插入并保存FLASH元素，在属性面板中重新设置动画的宽、高值，如下图所示：
(二)设置“Flash元素”的参数，为Flash相册指定调用的图片、设置相册外观等
（三）在中间部分插入图片，底部注明落款和版权说明，在浏览器中预览效果。
（5）以上只是以首页的设计为例，除此之外，还逐一完成了网站中每张网页的设计操作。
（七）、测试上传，完成制作。
第二阶段的实验报告
设计题目
韩国明星-BIGBANG
一、本阶段设计要求（教师填写）
对于本阶段应该包括以下几个主要部分：
A、利用CSS来定义网站的样式表。
B、网页要有落款、版权说明。
C、网站中需要至少一个页面分别运用表格、框架等技术。
三、所用技术
1.用Photoshop处理所用的图片。
2.在Dreamweavercs3 中 建立布局，插入布局表格。
3插入图片，设置背景图像，设置图像属性。
4.设置鼠标经过图片
5.插入文本，设百度文库文字格式
6.创建超级链接（文件链接，图片链接，网页链接）
四、实施过程（描述网站的总体布局和设计过程，可以通过截图、表格等方式体现设计步骤，描述实施中遇到的问题及解决方案）
(五)、在Dreamweavercs3中插入表格，在完成整体排版布局后插入图片，例如首页
（六）、完成插入文本，插入网页头部内容，设置鼠标经过图像，创建超级链接等页面的设计。（1）文本插入
（2）插入网页头部内容，包括插入关键字、插入说明、设置刷新等
(3)设置鼠标经过图像
(4)通过创建链接，包括文本链接、文字和图片的热点链接等完成页面与页面之间的跳转，进一步丰富页面的内容。
3、构建站点：建立站点文件和文件夹结构。并使用向导创建站点，使用高级设置本地站点、管理本地站点。
4、格式要求：A设置整体页面属性、制作普通文字页面、在页面中放入图像，制作图文混排页面、制作鼠标经过图像的交互效果，制作导航条的交互效果。
B在页面中插入Flash按钮或Flash文本或Flash动画，丰富网页内容。
C、利用Dreamweaver cs3的扩展管理器安装必要的插件，制作特殊效果，例如：彩色渐变文字，使用图像创建漂浮广告，根据不同时间显示不同的问候语，创建随机切换的广告图等。（选择其中之二来做即可）
五、小结（本阶段的收获、体会及总结）
在本阶段中，完成了网页制作的很重要的几个步骤，目的是进一步丰富原本静态单调的页面，技术和能力的要求比第一阶段更高了。区别来说，第一阶段主要是为网站建立主要的大的框架结构，以及做一些简单的图片和文字处理。而在这一阶段，我添加了FLASH动画，插入和背景音乐，还给各个网页设计的做了进一步的丰富。完成了这一阶段，自己的收获更大，收益也更多，因为这一阶段难度更高所以自己也有了更多的成就感，所以整个设计的过程自己也很享受。
《网页设计》课程实验设计报告
第一阶段实验报告
设计题目
韩国明星-BIGBANG
一、本阶段设计要求
1、内容要求：主题要新颖，明确，健康，积极向上，必须是自己的原创作品。结构要清晰有条理，并且内容要突出主题思想。素材形式要丰富多种多样。
2、步骤要求：按照建立网站的基本流程，对网站做整体规划（画草图），考虑网站的规模大小，收集必要素材等。
(一)、确定网站主题，即韩流明星BIGBANG
(二)、搜集材料，主要从成员简介，社会评价，演艺经历，音乐作品，成员写真，获奖经历，近期活动消息，热门视频等方面搜集资料，然后分类整理成文件夹。
(三)、用Photoshop处理图片
(1) 图片合并，以便更好的添加文字 如： ＋
＋
（2）图片的裁剪 如：
(四)、在Dreamweavercs中新建站点
打开已经做好的页面，丰富页面的内容，包括插入背景音乐，添加email链接，下载链接以及图片热点链接等技术
一．如在音乐页面中插入音乐和歌曲下载链接，在浏览器中预览效果如下：
二．在主页中设置电子邮件的链接，点击主页菜单栏中contacts便可进入页面。
三．丰富页面，添加更多的链接，例如主页中的图像热点链接
C利用框架或表格，对页面做整体规划。并对表格属性进行设置。
D在网页中制作外部友情网站链接，内部页面链接，选择制作电子邮件链接和同页面或不同页面之间的锚点链接。
E必须要有导航条，导航项必须在4项以上，形式不限。
5、功能要求：必须能从首页进入二级页面，并且从二级页面返回首页。
二、选题背景
Bigbang是韩国的一个有名的男子组合，意为宇宙大爆炸。当然它的诞生确实在音乐界造成了一定的影响，他们的多才多艺更是使得他们能一直走到如今。所以作为他们的铁杆粉丝，我也想要把这个组合介绍给大家，让大家一起了解流行音乐的真正魅力。
设计题目
韩国明星-BIGBANG
一、本阶段设计要求（教师填写）
1、内容要求：在第一二次设计题目的基础上，对内容进行完善，增加2—4页面。
2、对于本阶段应该包括以下几个主要部分：
A、使用模板制作两个页面，必须定义可编辑区。
B、根据自己的主题插入表单及表单元素，例如：在线报名，联系我们，在线订购单等。
D、使用行为给网页添加特效，例如：弹出信息，打开浏览器窗口，添加背景音乐，设置状态栏文本等。
E、在网页中插入Flash动画、Flash按钮、Flash文本等。（第一阶段做过的就不用做）
F、丰富网页中的各种链接，例如：图象热点链接，E-mail链接，下载连接，锚点链接等。
二、第一阶段所完成的任务
第一阶段已经完成了，确定主题，收集素材，定义站点，以及对网站作整体规划，在格式方面，已经完成整体页面属性设置，文字属性设置，页面中插入图像，制作鼠标经过图像以及导航栏的插入等。在链接方面已经完成文字链接和导航栏的链接等。
三、所用技术（本阶段所使用的技术）
1.网页框架技术。
2.添加背景音乐。
3.在网页中插入Flash动画、Flash按钮等。
4各种链接：E-mail链接，下载连接，图像热点链接等。
四、实施过程
打开Dreamweaver cs3，新建一个展示相册的页面。首先建立框架集，选择框架类型为上方和下方框架，将页面分为上下三部分，在第一部分中利用FLASH创建精美相册，在第二部分插入图片，在底部框架中注明网页的落款和版权说明。
一．创建框架集，并设置框架的颜色和宽度等属性，将页面分成上下三部分，效果如下：
二．利用FLASH制作相册。
(一)运行Dreamweaver，插入并保存FLASH元素，在属性面板中重新设置动画的宽、高值，如下图所示：
(二)设置“Flash元素”的参数，为Flash相册指定调用的图片、设置相册外观等
（三）在中间部分插入图片，底部注明落款和版权说明，在浏览器中预览效果。
（5）以上只是以首页的设计为例，除此之外，还逐一完成了网站中每张网页的设计操作。
（七）、测试上传，完成制作。
第二阶段的实验报告
设计题目
韩国明星-BIGBANG
一、本阶段设计要求（教师填写）
对于本阶段应该包括以下几个主要部分：
A、利用CSS来定义网站的样式表。
B、网页要有落款、版权说明。
C、网站中需要至少一个页面分别运用表格、框架等技术。
三、所用技术
1.用Photoshop处理所用的图片。
2.在Dreamweavercs3 中 建立布局，插入布局表格。
3插入图片，设置背景图像，设置图像属性。
4.设置鼠标经过图片
5.插入文本，设百度文库文字格式
6.创建超级链接（文件链接，图片链接，网页链接）
四、实施过程（描述网站的总体布局和设计过程，可以通过截图、表格等方式体现设计步骤，描述实施中遇到的问题及解决方案）
(五)、在Dreamweavercs3中插入表格，在完成整体排版布局后插入图片，例如首页
（六）、完成插入文本，插入网页头部内容，设置鼠标经过图像，创建超级链接等页面的设计。（1）文本插入
（2）插入网页头部内容，包括插入关键字、插入说明、设置刷新等
(3)设置鼠标经过图像
(4)通过创建链接，包括文本链接、文字和图片的热点链接等完成页面与页面之间的跳转，进一步丰富页面的内容。
3、构建站点：建立站点文件和文件夹结构。并使用向导创建站点，使用高级设置本地站点、管理本地站点。
4、格式要求：A设置整体页面属性、制作普通文字页面、在页面中放入图像，制作图文混排页面、制作鼠标经过图像的交互效果，制作导航条的交互效果。
B在页面中插入Flash按钮或Flash文本或Flash动画，丰富网页内容。
C、利用Dreamweaver cs3的扩展管理器安装必要的插件，制作特殊效果，例如：彩色渐变文字，使用图像创建漂浮广告，根据不同时间显示不同的问候语，创建随机切换的广告图等。（选择其中之二来做即可）
五、小结（本阶段的收获、体会及总结）
在本阶段中，完成了网页制作的很重要的几个步骤，目的是进一步丰富原本静态单调的页面，技术和能力的要求比第一阶段更高了。区别来说，第一阶段主要是为网站建立主要的大的框架结构，以及做一些简单的图片和文字处理。而在这一阶段，我添加了FLASH动画，插入和背景音乐，还给各个网页设计的做了进一步的丰富。完成了这一阶段，自己的收获更大，收益也更多，因为这一阶段难度更高所以自己也有了更多的成就感，所以整个设计的过程自己也很享受。
《网页设计》课程实验设计报告
第一阶段实验报告
设计题目
韩国明星-BIGBANG
一、本阶段设计要求
1、内容要求：主题要新颖，明确，健康，积极向上，必须是自己的原创作品。结构要清晰有条理，并且内容要突出主题思想。素材形式要丰富多种多样。
2、步骤要求：按照建立网站的基本流程，对网站做整体规划（画草图），考虑网站的规模大小，收集必要素材等。
(一)、确定网站主题，即韩流明星BIGBANG
(二)、搜集材料，主要从成员简介，社会评价，演艺经历，音乐作品，成员写真，获奖经历，近期活动消息，热门视频等方面搜集资料，然后分类整理成文件夹。
(三)、用Photoshop处理图片
(1) 图片合并，以便更好的添加文字 如： ＋
＋
（2）图片的裁剪 如：
(四)、在Dreamweavercs中新建站点
打开已经做好的页面，丰富页面的内容，包括插入背景音乐，添加email链接，下载链接以及图片热点链接等技术
一．如在音乐页面中插入音乐和歌曲下载链接，在浏览器中预览效果如下：
二．在主页中设置电子邮件的链接，点击主页菜单栏中contacts便可进入页面。
三．丰富页面，添加更多的链接，例如主页中的图像热点链接
C利用框架或表格，对页面做整体规划。并对表格属性进行设置。
D在网页中制作外部友情网站链接，内部页面链接，选择制作电子邮件链接和同页面或不同页面之间的锚点链接。
E必须要有导航条，导航项必须在4项以上，形式不限。
5、功能要求：必须能从首页进入二级页面，并且从二级页面返回首页。
二、选题背景
Bigbang是韩国的一个有名的男子组合，意为宇宙大爆炸。当然它的诞生确实在音乐界造成了一定的影响，他们的多才多艺更是使得他们能一直走到如今。所以作为他们的铁杆粉丝，我也想要把这个组合介绍给大家，让大家一起了解流行音乐的真正魅力。