网页设计与制作实验报告Word格式.docx
- 文档编号:19612866
- 上传时间:2023-01-08
- 格式:DOCX
- 页数:8
- 大小:25.61KB
网页设计与制作实验报告Word格式.docx
《网页设计与制作实验报告Word格式.docx》由会员分享,可在线阅读,更多相关《网页设计与制作实验报告Word格式.docx(8页珍藏版)》请在冰豆网上搜索。
我的第一个网页<
/title>
/head>
body>
h1>
欢迎访问我的网站。
/h1>
h3>
/h3>
h5>
/h5>
/body>
/html>
2.在标记中分别加入以下属性,看看index.htm有什么变化。
bgcolor=#背景颜色#=rrggbb(16进制的RGB值)或颜色名称
background=#背景图像#=image-URL(图片所在路径)
text=#非可链接文字的色彩
bgproperties=FIXED背景图像不动
bodybgcolor="
#CCCCFF"
text="
#993366"
>
h1align="
center"
<
h3align="
left"
h5align="
right"
四、常见问题
1.新建的网页不能用IE浏览器浏览:
保存格式不正确(扩展名不正确)。
在记事本编辑网页
保存时扩展名一定要是.htm或.html;
修改方法:
关闭记事本和IE浏览器后在资源管理器中将文件扩展名改为.htm或.html;
2.页中显示HTML代码:
标记缺“>
”或“<
”是全角。
实验二、Dreamweaver站点/文档
一、实验目的
1(掌握站点的创建
3(学习将其它格式的文档转换成HTML格式的文档。
5(掌握站点创建、管理和维护模块的基本功能。
7(学会实际运用插入外部对象并进行效果设置的方法。
3(学习使用站点操作方法。
1(建立本地站点
(1)在D盘新建一个以自己学号和姓名命名的文件夹,将下载回来的素材解压后复制到此文件夹中并重命名为images
(2)建立一个名为“河南开封”的站点,站点的路径设置为第
(1)题中创建的学号和姓名的文件夹位置
(提示:
站点|新建站点)
2.创建和设置网站主页(index.html),要求如下(注意效果图中标注的地方):
1)设置标题为“河南开封欢迎您!
”(title里面的内容);
2)设置页面背景为“bj.gif”;
修改-页面属性-外观-背景图像)
3)设置文本“河南开封”属性:
字体大小26像素、颜色为“#006600”、字体为“华文行楷”,加粗。
3.新建一个页面,命名为kff.html,编辑要求如下:
1)设置标题为“开封府简介”;
2)设置文本“开封府厚重历史”属性:
字体大小26像素、颜色为红色、默认字体并加粗;
3)插入图片“kff.jpg”。
(6)为主页文件index.html中的文本“开封府”设置超级链接,要求单击能够实现子页文件kff.html的访问,并且去掉链接的下划线,设置已访问链接颜色为“#000000”,活动链接颜色“#FF0000”;
((提示:
修改-页面属性-链接)
(7)为子页文件kff.html设置超级链接文本“返回主页”,要求单击能够实现主页index.html的访问,链接属性设置与第(6)题一样;
(8)预览调试站点mysite2中的网页文件,并进行完善。
实验三、布局table/框架
1.本实例是要创建边框为1像素的表格。
二、仪器用具
1、生均一台多媒体电脑,组建内部局域网,并且接入国际互联网。
2、安装WindowsXP操作系统;
建立IIS服务器环境,支持ASP。
3、安装网页三剑客(DreamweaverMX;
FlashMX;
FireworksMX)等网页设计软件;
4、安装Acdsee、Photoshop等图形处理与制作软件;
5、其他一些动画与图形处理或制作软件。
三、实验原理
1.创建边框为1像素的表格。
四、实验方法与步骤
1)在文档中,单击表格“”按钮,在对话框中将“单元格间距”设置为“1”。
2)选中插入的表格,将“背景颜色”设置为“黑色”(#0000000)。
3)在表格中选中所有的单元格,在“属性”面版中将“背景颜色”设置为“白色”(#FFFFFF)。
4)设置完毕,保存页面,按下“F12”键预览。
四、实验内容
1(表格制作,在文本编辑器中输入如下的HTML代码程序,用table.htm文件名保存在自
己目录中,并在浏览器中运行。
tableborder=2>
tr>
th>
课程名称<
/th>
td>
语文<
/td>
数学<
物理<
化学<
/tr>
考试成绩<
80<
95<
90<
85<
/table>
表格标签
2(设计表单,在文本编辑器中输入如下的HTML代码程序,用form.htm文件名保存在自
BODY>
fontsize=5>
FORMMETHOD=POST>
姓名<
INPUTTYPE="
TEXT"
NAME="
Client_Name"
p>
电话<
Phone"
商品名称
SELECTNAME="
product_name"
onchange="
changeprice()"
optionvalue="
手表"
手表<
/option>
照相机"
照相机<
电视机"
电视机<
DVD机"
DVD机<
/SELECT>
单价
unit_price"
optionvalue=100>
100<
optionvalue=1000>
1000<
optionvalue=2500>
2500<
optionvalue=1200>
1200<
数量<
text"
quantity"
金额<
amount"
submit"
value="
提交"
&
nbsp;
reset"
重置"
/FORM>
/font>
3(用表格进行精确定位;
插入图片、动画等多媒体元素。
超文本支持的图片格式一般有XBitmap(XBM)、GIF、JPEG三种。
插入图片的标签是<
IMG>
,其格式为:
IMGSRC="
图片文件地址"
。
SRC属性指明了所要链接的图片文件地址,这个图形文件可以是本地机器上的图形,也可以是位于远端主机上的图片。
地址的表示方法可以沿用上一篇内容“文件的链接”中URL地址表示方法。
例:
images/ball.gif"
IMG属性有HEIGHT、WIDTH、BORDER、ALT等,分别表示图片的高、宽、边框、替代文字等。
HTML>
HEAD>
TITLE>
图片<
/TITLE>
/HEAD>
PALIGN=center>
我下载的图片<
/P>
ball.gif"
ALIGN=center>
/BODY>
/HTML>
注意:
图片ball.gif和HTML应该保存在相同的文件目录里。
五、讨论与结论
本实验主要通过整个表格和单元格颜色的差异来衬托出实验效果,间距的作用主要在于表现这种颜色差异。
表格的背景颜色和单元格的背景颜色容易混淆,在实验中要认真判断,一旦操作错误则得不到实验的效果。
“表格宽度”文本框右侧的表格的宽度单位,包括“像素”和“百分比”两种,容易混淆,要充分地理解这两种单位表示的意义才能正确地进行选择,否则就不能达到自己想要的效果,设置错误就会严重影响实验效果。
实验四、CSS
1.掌握css样式的概念及其建立,能够区分三种css样式,并根据要求建立相应的样式。
1.设置CSS样式。
左侧框架内内容设置样式,存储在css1.css样式文件中,
增加h3标签,行高36px,大小18px;
笑傲江湖设置为标题3;
增加a标签,字体颜色为#000066,无修饰;
增加body标签,字体大小12px,背景色#99CC66,扩展Glow,颜色为红色,Strength为5
增加ol标签,设置行高40px,列表项图像为“3.1list.gif”;
设置框架中四个标题为ol格式,效果如下图所示。
右侧框架中设置“第一章灭门”字体颜色#000099,字体大小为18px,加粗,并对另外三个标题均应用此设置
1.鼠标点到左框架,文本-css样式-新建,点选标签,键入标签名h3,保存在css1,对h3作如下设置。
2.同样增加设置其它标签
3.鼠标点到笑傲江湖,属性面板格式改为标题3.
4(右侧框架中设置“第一章灭门”为标题,字体颜色#000099,字体大小为18px,加粗,自动保存为style2,并对另外三个均设为标题,标题样式均设为style2。
5.保存全部并预览。
四、实验总结
1.CSS样式应用广泛,应在实践操作中积累经验,熟练掌握。
实验五、综合作业
进入大学里的条第一门公选课,我选择了《网站设计与制作》这门课程,进入这门课程的学习。
虽然这门课程的总学时比较短,但是经过老师的认真授课以及我的认真听讲,我学到了很多有关网站设计与制作的知识,在一定程度上为我认识了解网站设计与制作提供了良好的基础,并为我下一步深入学习相关方面的知识做了良好的铺垫。
一、网站设计与制作中所用的工具
1.dreamweaver用与编辑HTML、ASP、JSP、PHP时的辅助工具。
2.flash网页需要画面流动时的首选择
3.photoshop图象处理软件,一般网页都需要有图片相搭配,photoshop是款很强大的工具。
4.fireworks跟Photoshop一样都是图象处理软件,但fireworks偏向与对网页的处理。
二、网站的概念与域名
网站是指在因特网上,根据一定的规则,使用HTML等工具制作的用于展示特定内容的相关网页的集合。
人们可以通过网站来发布自己想要公开的资讯,或者利用网站来提供相关的网络服务。
人们可以通过浏览器来访问网站,获取自己需要的资讯或者享受网络服务。
文字与图片是构成一个网页的两个最基本的元素。
除此之外,网页的元素还包括动画、音乐、程序等等。
域名是网站在互联网上的名字。
一个非产品推销的纯信息服务网站,其所有建设的价值,都凝结在其网站域名之上。
失去这个域名,所有前期工作就将全部落空要把域名起得形象、简单、易记。
三、网页的制作与网站版式
根据这几节课的学习,我基本了解了要想做好一个网站,就必须把网页做好。
首先,要明确所做网站是什么类型的。
其次是布局,还有网站的信息、网站打开的速度等。
(1)、网站的整体布局:
网站主页就好象是宣传栏或者店面——对访问者产生第一印象,都希望尽量给人留下好的印象。
网页应该力求抓住而不是淹没浏览者的注意力,过多的闪烁、色彩、下拉菜单框、图片等会让访问者无所适从,一般来说,好的网站应该给人有这样的感觉:
干净整洁;
条理清楚;
专业水准;
引人入胜。
(2)、信息:
无论商业站点还是个人主页,你必须给人们提供有一定价值的内容才能留住访问者,所以你必须提供某些有价值的东西。
(3)、打开速度:
我们都知道,页面下载速度是网站留住访问者的关键因素,如果20—30秒还不能打开一个网页,一般人就会没有耐心。
至少应该确保主页速度尽可能快,最好不要用大的图片。
(4)、颜色搭配:
颜色也是影响网页的重要因素,不同的颜色对人的感觉有不同的影响,所以在做网页的时候应该注意颜色的搭配。
包括网页的整体的颜色、网页中文字的颜色等。
不要将所有颜色都用到,尽量控制在三至五种色彩以内。
(5)、网站的版式设计:
网页设计作为一种视觉语言,特别讲究编排和布局,虽然主页的设计不等同于平面设计,但它们有许多相近之处。
版式设计通过文字图形的空间组合,表达出和谐与美。
多页面站点页面的编排设计要求把页面之间的有机联系反映出来,特别要处理好页面之间和页面内的秩序与内容的关系。
为了达到最佳的视觉表现效果,我们将反复推敲整体布局的合理性,使浏览者有一个流畅的视觉体验。
(6)、网页标题的可读性:
必须尽量使你的网页易于阅读。
为所有标题和副标题设置同一字体,并将标题字体加大一号,所有标题和副标题都采用粗体,这样便于识别标题,使浏览者一眼就可以看到要点,以便找出并继续阅读有兴趣的内容。
所以,要认真写好每个标题~
四、HTML语言
虽然课程比较短暂,但老师还是在讲课中穿插了一点HIML语言,它在网页制作中也发挥了比较重要的作用,可以大大提高网页制作的效率。
虽然,我不是计算机专业的,但作为一个电脑爱好者我会在课后抽时间认真去学习掌握这门语言,让自己具备更专业的知识。
总而言之,经过对《网站设计与制作》这门课程的学习,我收获了很多。
我所学的专业并不是计算机方面的,更别说是网页设计了,但是由于我对网页设计及制作的强烈兴趣,我选择这门课程是我最大的乐趣,因为我学到了知识。
并且我今后会继续在这方面提高自己,全面提高,综合发展。
在这里我很感谢老师的认真授课,让我对这门课有了初步的了解,学到了很多关于这方面的知识。
最后我想说句谢谢老师~
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 制作 实验 报告
![提示](https://static.bdocx.com/images/bang_tan.gif)