《网页设计与制作》标准实验报告

时间：2024.4.20

网页设计与制作

实验报告

姓名：弋文君

专业：市场营销

班级：20##级2班

学号：20100744041

20##-20##学年第二学期

经济与管理学院

实验名称：表格应用 指导教师:_________

实验日期:___年___月___日 实验地点:_________ 成绩:_________

实验目的：

(1) 掌握表格的建立，修改的方法。

(2) 掌握图文混排的方法。

(3) 掌握鼠标经过图像的应用方式。

实验内容与基本要求:

(1) 用表格方式建立家乡特色介绍的网页1.html，格式如下：

(2) 图片1-6分别链接到相应文档，并在新窗口打开。

要求:实验报告上只需要写出1.html的代码。

实验步骤：

（1）、打开dW网页制作软件下的html格式，右击选择“页面属性”，设置背景图片，文本颜色“蓝”，背景颜色“黑”，链接颜色“红”

（2）、点击“插入”—“表格”，建立5列3行的表格，设置表格属性。

（4）、图片1—6：点击“插入”—“图像”—“确定”；图片7点击“插入”—“图像对象”—“鼠标经过图像”，选择相应的“原始图像”、“鼠标经过图像”、“按下时前往的URL”图片。

（5）、对图片1---6分别创建链接，单击图片，再单击右键“创建链接”，打开相应的网页或输入相应的网址。

（6）、网页代码展示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

body,td,th {

function MM_swapImgRestore() { //v3.0

var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

}

function MM_preloadImages() { //v3.0

var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}

function MM_findObj(n, d) { //v4.01

var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

if(!x && d.getElementById) x=d.getElementById(n); return x;

}}

</script>

</head>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

实验结果：

实验总结：此实验比较简单，经过上课的学习能熟练的掌握，插入链接是必须掌握的知识

实验评价（教师）：_________________________________________—————————————————————————————

实验名称：框架应用 指导教师:_________

实验日期:___年___月___日 实验地点:_________ 成绩:_________

实验目的：

(1) 熟练掌握框架网页的应用。

(2) 掌握CSS样式的应用。

实验内容与基本要求:

(1) 参照例题28，设计如下格式的框架网页。

要求：

1、导航1-5链接到相应网页，网页出现在框架A区域。

2、要求整个网页主题一致，整齐美观。

实验步骤：

（1）、、打开dW网页制作软件下的html格式，右击选择“页面属性”，设置背景图片，文本颜色“蓝”，背景颜色“黑”，链接颜色“红”

（3）创建css样式：在任意空白处单击右键“css样式”——“新建”，然后在弹出的对话框输入“n”,再在弹出的对话框设置样式的颜色，背景等。按照logo和版权不同，设置的样式也就不同。所以要多建立css样式，方便后面实验操作。

（4）导航1—5分别输入“个人中心”、“相册”、“我的分享”、“粉丝团”“留言板”，按照第三步设置相应的css样式，并为每个导航内容创建链接“

（5）在表格第三行行插入相应图片，并设置“鼠标经过图像”。

（6）表格第四行插入相关图片与文字，形成一个静态页面，然后在第四行输入开头“插入”----“命名锚记”，在弹出的对话框输入相合适的字母。

（7）对导航1---5创建链接，单击“插入”——“超级链接”，在弹出的对话框选择“链接”后面的倒三角下拉框，选择之前输入的字母即可。这样，5个导航均链接到了A区域的网页。

网页代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

body {

background-image: url(0u00im3-75_conew4.jpg);

background-repeat: no-repeat;

background-color: #000;

body,td,th {

color: #0C3;

#apDiv1 {

position:absolute;

width:481px;

height:68px;

z-index:1;

</style>

#apDiv2 {

position:absolute;

width:294px;

height:75px;

z-index:1;

</style>

function MM_swapImgRestore() { //v3.0

var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;}

}

function MM_findObj(n, d) { //v4.01}

</script>

<div id="apDiv2">不性感，不感性的主页</div>

</div>

<p>      只因为我相信这世界有些人分开以后就再也没有相见的机会，我知道这样，可是我仍然无能为力。</p>

<p>      最近跟两个朋友住在一起，L不上学多年，Z刚大学毕业。<br />

跟Z亲近一点，我是个要强的人，所以只要他没找工作或者是面试失败想要玩几天的时候我就会在他耳边不停不停念叨让他抓紧时间， <br />

<p>我也从没有因为这疏离过L。<br />

</div>

var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");

</script>

</body>

</html>

实验结果：

实验总结：此实验检测表格的建立和图像打开位置的设置等技巧，具有很强的操作性和一定的难度，在座的过程中请教了其他同学的帮忙

实验评价（教师）：_________________________________________—————————————————————————————

实验名称：某商务网站设计制作 指导教师:_________

实验日期:___年___月___日 实验地点:_____ 成绩:_____

实验目的：

(1) 掌握网站设计与制作的基本方法。

(2) 熟悉营销性网站的建设方法。

实验内容与基本要求:

建立某企业网站。(网站建设已过，项目选择使用以前的)

要求：一级至少是4个页面，至少做到二级页面。

实验步骤：

1、遵循前几个实验步骤，打开html格式，设置页面属性，确定文本颜色，链接颜色，背景图片等。

2、综合运用以上实验中的知识制作主页和子网页，包括以下操作：

（1）鼠标经过图像：“插入”—“图像对象”—“鼠标经过图像”

（2） div标签：“插入”—“布局对象”—“div标签”

（3） spry菜单栏：“插入”—“布局对象”—“spry菜单栏”

（4）图片滚动：代码前面加<marquee>。

（5）插入超级链接：选中“插入”—“超级链接”—“选择链接文件或是网站”

（6）表格：插入表格，设置表格属性，比如列数，行数，间距，合并单元格，调整大小等

3、主页里面菜单栏目录插入超极链，链接接各二级子网页。设置链接颜色和变换颜色，与其他文本区分

主页展示：

二级网页

三级网页

实验总结：此实验是对之前所有知识和操作技巧的综合，包括图像，表格，标签，链接等的运用，工作量和难度都较大，花费很多时间和参考咨询实践才完成，中途也要一定困难。

实验评价（教师）：_________________________________________—————————————————————————————

更多相关推荐：

网页设计与制作个人实训报告: 一、实训目的：通过实训，掌握网页制作系列软件Dreamweaver、Fireworks、Flash和Photoshop的使用方法。达到全面理解、运用网页制作的知识，并使之得以融会贯通，在掌握理论的基础上再加以实…
网页设计与制作实验报告: 高等教育自学考试通信与信息系统管理专业专科实验报告考点名称课程名称计算机网络与应用
网页设计与制作实训报告: 《网页设计与制作》实习报告指导老师：实习地点：实习时间：实习班级：学生姓名：一、实习目的①学会制作新闻发布系统。②学会制作在线调查系统。③熟悉购物网站的主要功能和栏目。④学会购物网站数据库表的创建和数据库连接的…
网页设计与制作实验过程及报告: 网页制作过程及报告网页设计与制作的一般实验步骤：1、确定网站主题网站里的每一个网页都要有统一的风格，以加强渲染自己性格的效果。最重要的是做出自己的风格，吸引浏览者的眼球。2、搜集材料主要在网站上搜集所要的网页信…
网页设计与制作实训报告: 甘肃机电职业技术学院网页设计与制作实训报告专业班级姓名指导老师郭建明20xx521一实训目的1进一步熟悉和掌握网站建设的基本流程和技术规范2巩固运用Dreamweaver网页制作软件制作网页特别是制作复杂网页的...
网页设计与制作实训报告: 网页设计与制作实训报告班级：姓名：**学号：47指导老师：***实训时间：5.95.22甘肃机电职业技术学院20**年5月20日一、实训目的：1、进一步熟悉和掌握网站建设的基本流程和技术规范；2、巩固运用Dre…
网页设计与制作课程设计报告: 网页设计与制作课程设计报告学校邵阳学院课题制作邵阳学院之旅网站专业班级电气工程及其自动化姓名吴鹏辉学号104120xx14指导教师牛莉邵阳学院电气工程系吴鹏辉网页设计与制作目录1设计目的12设计思想13网页详细...

网页制作与网站设计实验报告: 12345678910111213141516171819
网页设计与制作实验二实验报告: 网页设计与制作课程实验报告开课实验室经管院机房实验室20xx年4月5日一实验目的要求实验目的1用Dreamweaver构建静态HTML页面掌握表单及表格的使用掌握制作CSS并能在网页中导入CSS使用CSS样式美...
个人网页设计与制作实验报告模板: 渭南师范学院通识教育选修课个人网站设计与制作课程实验报告学号姓名专业班级
网页设计与制作课程设计报告: 网页设计与制作课程设计报告学校课题专业班级姓名学号指导教师邵阳学院电气工程系吴鹏辉网页设计与制作目录1设计目的12设计思想13网页详细设计分析231建立站点232建立布局333网页中的图像44结论8I邵阳学院电...
网页设计与制作课程设计报告: 20xx20xx学年第一学期网页设计与制作课程设计报告题目维影影视公司网页设计专业数字媒体技术班级121班姓名指导教师成绩计算机与信息工程系二0一四年六月二十日计算机与信息工程系网页设计与制作课程设计报告目录1...

热门关注