NBA网页设计与制作实验报告
一、实验目的
网络在现今生活中的重要地位已经不言而喻,我们上网都避免不了浏览网页。本实验通过学习使用Dreamweaver 8设计网页,来达到熟知一个网站的网页整个设计过程是怎样进行的,并能自行设计一个具有鲜明主题的基本完整的静态简单网页的目的。
二、实验设计器材及环境
1、一台台式机或者笔记本
2、Windows xp操作系统
3、Dreamweaver 8软件、photshop软件
三、实验原理与方案
Dreamweaver 8是常见的设计工具,在设计过程中基本上不需要亲自动手设计源代码,初学者也不会设计源代码,要设计一个满意的网页仍要遵循一定的步骤:
1、确定网站主题、风格和布局
2、搜集相关素材,比如音频、图片、文本等
3、根据网站主题,在网站中放入相关元素和内容
四、实验步骤
(一)准备素材
确定网页的主题和风格,收集各种可能需要的设计素材,素材包括图片,音乐,动画,视频,由于刚刚开始学习制作网页,所以我主要搜集图片和必须的文本。并新建一个文件夹把搜集的素材放到该文件夹里面。
(二)设计规划
规划网站,对网页的整体框架和结构进行设计,确定整个网站的内容,明确自己的网页需要满足的功能和内容。html网页设计实验心得
(三)具体设计
1、创建站点。点击“站点”下拉菜单的“创建站点”,名字站点名称和站点在计算机的路径。
2、在电脑里面运行Dreamweaver 8,在“文件”下拉菜单点击“新建”,打开“新建文档”对话框,选举“框架集”里的“上方固定,下方左侧嵌套”,并点击“创建”按钮
3、调整框架的大小,分别保存各个框架和框架集并命名(注:不能用汉字,只能用英文字母)
4、分别给各个框架加入合适的背景或者或者插入图片
5、把用photshop做好的图片插入到顶部的框架中,调整图片的大小合适。在图片上面插入两个层,分别写入文本
6、在左下方的框架选择合适的背景颜,并加入五个层,分别输入文本“返回首页”、“经典名言”、“个人荣耀”、“进攻特点”、“薪水技术”和“精彩瞬间”。如图所示
7、创建5个不同的基本页面
(1)点击“文件”下拉菜单的“创建”,创建基本页面,在打开的页面中设置背景,并插入一个层,把准备好的文本插到层里面,设置好文本的字体类型、大小和颜。
(2)和上步一样设置一个页面,只是背景颜不一样。插入一个一行两列的表格,分别在表格的两个单元格中插入文本,设置文本的大小、类型和颜。
(3)前面同上方法,后面插入一个一行一列的表格,并插入文本,调整好文本大小、类型和颜。
(4)点击“文件”下拉菜单的“创建”,创建一个基本页面,在打开的页面设置背景颜,在页面上插入一个一行两列的表格,在表格中的左单元格中插入他的历年的薪水情况,在右单元格中插入他的技术特点相关的资料文本。
(5)开始方法和上面一样,并插入一个两行两列的表格,并在表格的单元格中插入艾弗森在NBA的比赛精彩瞬间的图片,调整好图片的大小。在表格右边空白处插入一个层,在层中插入文本,文本主要包括艾弗森的基本情况,并调整好文本的颜、大小和类型。如图
8、在右下方的框架中设置背景颜。并插入一个艾弗森为背景的图片,调整好图片的大小。在图片右边插入一个层,在层里面设置好文本的放进去,并调整好文本的大小、颜和类型。
9、分别选中框架中的各个层,并在层里面选中文本,然后在下角的属性中点击链接,并把链接到上面设置好的页面中。还有点击目标的下拉条,设置成刚才右框架的名称。
10、选中左下家的框架,并选中以“返回首页”的层,链接到主页上的主页框架,目标也和上面的步骤一样,只是把那也设置成主页的一部分。
11、点击浏览器预览/调制,然后浏览情况,看看设计的情况,再度修改。
12、在最上框架上插入一个层,并在层里写入文本“mic”,并设置插入一段准备好的音频。
五、体会心得
在本次网页设计中,我不仅学到了很多关于网页设计方面的知识。我从中学会运用Dream
waver设计简单的网页,在这个过程中,我通过自学教材、上网查询,学习了Dreamweaver、photshop等网页软件的应用,学会了管理、维护自己的站点。在设计过程中也出现了很多的问题,但通过看书,上网查询,请教老师等方式,不断的学习、解决、提高,设计出的网页不论是外观还是内容,都在不断的进步、改善。可以说在自己动手,不断实践的过程中,网页设计水平得到了很大的提高。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论