web网页设计与制作实习报告.docx

上传人:b****8 文档编号:10716061 上传时间:2023-02-22 格式:DOCX 页数:10 大小:1.34MB
下载 相关 举报
web网页设计与制作实习报告.docx_第1页
第1页 / 共10页
web网页设计与制作实习报告.docx_第2页
第2页 / 共10页
web网页设计与制作实习报告.docx_第3页
第3页 / 共10页
web网页设计与制作实习报告.docx_第4页
第4页 / 共10页
web网页设计与制作实习报告.docx_第5页
第5页 / 共10页
点击查看更多>>
下载资源
资源描述

web网页设计与制作实习报告.docx

《web网页设计与制作实习报告.docx》由会员分享,可在线阅读,更多相关《web网页设计与制作实习报告.docx(10页珍藏版)》请在冰豆网上搜索。

web网页设计与制作实习报告.docx

web网页设计与制作实习报告

网页设计与制作

实验报告

 

 

学生姓名

班级

学号

指导教师

文志华

2015.5.23

实验一简单网页制作

一、实验目的

1.熟悉Dreamweaver软件的操作界面。

2.掌握建立本地站点的方法。

3.掌握简单网页制作方法。

4.掌握超链接的建立方法。

三、操作步骤

1.创建“潜水俱乐部”站点

(1)在D盘新建文件夹,命名为shiyan1;

(2)将images文件夹和gallery文件夹复制到中shiyan1中;

(3)启动Dreamweaver,使用“站点|新建站点”命令创建站点。

2.制作“俱乐部首页”。

(1)新建网页。

(2)使用“文件|保存”命令保存网页,命名为index.html。

(3)在文档工具栏上设置网页标题“泡泡潜水俱乐部欢迎你”。

(4)从“文本.txt”中将首页的相关文字粘贴到网页中。

(5)设置一级标题、二级标题、三级标题、项目列表、编号列表。

(6)插入图像。

(7)在Copyright后插入版权符号©。

(8)在电话号码之间插入半角空格。

(9)在电子邮箱地址上建立超链接,mailto:

vip@BubbleU。

(10)选中网页内容,然后单击“插入Div标签”按钮,分别插入header、navigation、mainContent、footer共4个Div。

(11)保存网页,按F12,预览网页。

四.实验结果

实验二XHTML语言

一、实验目的

1.掌握XHTML语法。

2.掌握XHTML标记及属性。

3.掌握XHTML标记校验的方法。

二、实验内容

制作“学校主页-新闻中心-学校新闻-校领导赴包装设计艺术学院调研”的网页

校领导赴包装设计艺术学院调研

浏览:

2827次日期:

2015-03-21

三、操作步骤

1)创建站点

(1)在D盘新建文件夹,命名为shiyan2;

(2)将“文本.txt”和images文件夹复制到中shiyan2中;

2)用记事本打开“文本.txt”。

3)选择“文件|另存为”命令,将文件另存为shiyan2.html。

4)在网页中添加XHTML标记和属性。

实验标题字体黑体蓝色40px

日期字体宋体灰色大小12px正文字体楷体大小14px

5)用浏览器打开,并修改发现的错误。

四、实验制作结果

实验三导航栏制作

一、实验目的

1.掌握垂直导航条的制作方法。

2.掌握水平导航条的制作方法。

二、实验内容

制作学校样式的导航条。

三、操作步骤

导航栏制作

body,div,ul,li,h1,h2,h3,h4,h5,h6{

margin:

0px;

padding:

0px;

}

#nav{

width:

800px;

height:

51px;

margin:

100pxauto;

background:

url(nav_bg.jpg)repeat-x;

}

#navul{

list-style-type:

none;

}

#navulli{

float:

left;

width:

100px;

height:

51px;

background:

url(nav_01.jpg)no-repeatrightcenter;

}

#navullia{

display:

block;

width:

100px;

height:

51px;

line-height:

51px;

text-align:

center;

color:

#ffffff;

text-decoration:

none;

}

#navullia:

hover{

width:

100px;

height:

51px;

background:

url(nav_03.jpg)no-repeat;

}

  • 学校概况
  • 学科建设
  • 科学研究
  • 师资队伍
  • 教学管理
  • 招生就业
  • 对外交流
  • 学校首页

四、实验制作结果图

实验四应用背景图像

一、实验目的

1.掌握CSS背景(background)属性。

2.掌握设置背景图像位置的方法。

3.掌握使用背景图像替换文本的方法。

4.掌握使用背景图像制作圆角框的方法。

二、实验内容

1.制作圆角框。

2.制作泡泡俱乐部首页。

三、实验步骤

1.制作圆角框。

(1)创建站点。

(2)创建内部样式表。

在浏览器中的效果如下:

制作圆角框

四、实验结果

实验五浮动(float)页面布局

一、实验目的

1.掌握固定宽度网页布局的方法。

2.深入理解浮动的概念。

3.掌握三列布局网页的典型逻辑结构。

4.熟练掌握CSS浮动布局的方法。

二、实验内容

制作一个简易的博客首页。

三、实验步骤

1.整体布局与公共CSS定义

分析页面主要分5大块,顶部的Logo、导航条Nav、Banner、Content、Footer,

2.布局Logo栏

首先我们需要把页面上的logo给切割出来,其大小为173*46,名字为:

logo.gif

 

一般网站都会做到点击logo,就会回到主页,应该怎么做呢,大家首先会想到,给图片加上链接就可以了,代码一般会这么写

不过KwooJan要介绍另外一种方法,将图片做成链接a的背景,同样可以达到上面说的效果,并且HTML代码就会更精简,少了,看看下面Logo栏的页面代码,红色的为将logo.gif作为背景的链接

3.布局导航栏Nav

4.Banner布局

第一种:

将图片作为

背景

第二种:

直接将图片插入之间,代码:

5.内容Content板块布局

从图片上我们看到,内容板块分为左右两个区域,左边ContentL宽度是600px,右边ContentR宽度是300px,但是由于我们要将内边距设置成15px(这样才会好看),所以ContentL的宽度在CSS中就要设置成600-15*2=570px,而右侧的ContentR则需要设置成300-15*2=270px;

6.Footer布局内容左侧板块(ContentL)布局

7.内容右侧板块(ContentR)布局

四、实验总结

在浏览器中的效果如下:

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > PPT模板 > 其它模板

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1