网页设计实验报告.docx
- 文档编号:29204863
- 上传时间:2023-07-21
- 格式:DOCX
- 页数:63
- 大小:2.88MB
网页设计实验报告.docx
《网页设计实验报告.docx》由会员分享,可在线阅读,更多相关《网页设计实验报告.docx(63页珍藏版)》请在冰豆网上搜索。
网页设计实验报告
学年:
2005~2006第一学期
课程名称:
网站建设与网页设计
班级:
12级网络经济
姓名:
学号:
实验项目编号:
E14209801
实验名称:
HTML语言基础
实验时间:
====================================================
实验一 网站建设相关基础(2学时)
一、实验目的
1.掌握门户网站设计的基本原则、网站及网页的基本风格与基本构图特点;
2.熟悉页面排版,掌握网页布局的方法。
二、实验内容
1.上网访问实际若干门户网站,了解各网站的风格(主题图形形象、导航是否清晰,整体色调的搭配是否协调,主题是否突出等)。
2.在网上找出下列版面布局的结构形式:
⑴.“厂”结构布局
⑵.“口”型(“国”字型)布局
⑶.“三”型布局
⑷.对称对比布局
3.找出若干旅游网站(至少5个);
4.找出若干B2B网站(至少5个);
5.使用电脑中的图片工具(Photoshop)把不同图片转换为.JPG、.GIF和PNG格式,比较三种图片格式的区别。
三、实验步骤与要求
按“实验内容”中1~5完成网上的操作,完成实验报告,在实验报告中要求记录如下内容:
⑴.所访问各门户网站的风格及特点;
⑵.各种版面布局网站的域名和所采用的版面布局形式;
⑶.记录旅游、B2B网站的名称、域名、URL及LOGO;
⑷.记录B2B网站主页上的宣传标语或体现企业精神的代表性词句。
四、说明:
1、所有实验环节均由每位学生独立完成,严禁抄袭他人实验结果,若发现有结果雷同者,按实验课考核办法处理。
实验二基本页面元素操作(2学时)
一、实验目的:
(1)熟悉基本网元素及其操作
(2)熟悉使用页面属性
二、实验内容
本实验的内容主要是制作一个“XXX景点介绍”网站的页面文件,它包括文本、图像、水平线以及日期和时间,效果如下图所示。
三、实验步骤与要求
实验前认真预习,熟练掌握有关概念和知识。
实验过程中记录发生的现象并分析原因。
(1)创建页面LOGO。
(2)创建主页,建立一个网页文件index.htm并打开进行编辑。
(3)输入自己拟定撰写的文字内容。
(4)将“XXX景点欢迎你”设置滚动效果的文字。
(5)对文字进行排版。
(6)插入水平线,并设置水平线的颜色。
(7)插入导航条
(8)插入图片
(9)插入日期和时间
(10)打开页面属性对话框
(11)设置网页的背景图像。
(12)浏览各个网页的实际效果。
四、说明:
1、所有实验环节均由每位学生独立完成,严禁抄袭他人实验结果,若发现有结果雷同者,按实验课考核办法处理。
实验三页面链接和表格(2学时)
一、实验目的:
(1)利用表格进行文本的整齐排列和自由的图文混排
(2)利用链接打开不同的页面。
二、实验内容
本实验的内容主要是利用表格进行网页的定位练习
1.建立一个本地站点,站点内至少包含网页五个。
2.页面用表格定位,自定义不同的区块,效果可以与下图相似。
3.设置超链接将站点中的网页链接起来。
三、实验步骤与要求
实验前认真预习,熟练掌握有关概念和知识。
实验过程中记录发生的现象并分析原因。
(1)建立一个本地站点文件夹。
(2)在站点中建立一个网页文件index.htm并打开进行编辑。
(3)最外层的表格宽度为700像素,嵌套的表格宽度为100%,整体上分为上下两个表格。
四、说明:
1、所有实验环节均由每位学生独立完成,严禁抄袭他人实验结果,若发现有结果雷同者,按实验课考核办法处理。
实验项目编号:
E14209802
实验名称:
制作个人主页
实验时间:
====================================================
实验四制作个人网站(6学时)
一、实验目的:
(1)综合利用所学的HTML语言制作页面。
(2)页面布局及内容的合理设计。
二、实验内容
本实验的内容主要是综合利用所学的HTML对网页设计制作进行的练习
1.建立一个包含多页面的网站。
2.页面用表格定位,自定义不同的区块。
3.主页用以介绍自己,分页面介绍一些细节,效果图如下两图所示。
三、实验步骤与要求
实验前认真预习,熟练掌握有关概念和知识。
实验过程中记录发生的现象并分析原因。
(1)建立一个本地站点文件夹。
(2)主页定为文件index.htm并打开进行编辑。
(3)建议最外层的表格宽度为700像素,嵌套的表格宽度为100%。
(4)要求包含导航、自己的照片、链接、表格等元素。
四、说明:
1、所有实验环节均由每位学生独立完成,严禁抄袭他人实验结果,若发现有结果雷同者,按实验课考核办法处理。
实验项目编号:
E14209803
实验名称:
HTML高级应用
实验时间:
====================================================
实验五框架网页的创建(4学时)
一、实验目的:
(1)框架网页的创建和编辑操作
(2)目标框架的设定
二、实验内容
本实验的内容主要是利用框架结构来建立网页,并设置目标框架。
1.建立一个本地站点,包括2-3个网页。
2.用框架结构为网页布局,其中一个网页为下图,其他网页自由发挥.
3.设置网页间的超链接,并设置目标框架.
4.页面间要求包含至少一个动画、声音和视频。
三、实验步骤与要求
实验前认真预习,熟练掌握有关框架网页的基础概念和知识。
实验过程中记录发生的现象并分析原因。
(1)新建一个空白文档,创建一个“上方及左侧嵌套”,右侧下方框架为主框架(mainFrame)。
(2)保存框架及框架集
(3)在顶部框架中插入图像
(4)左侧框架中设置页面属性背景图像。
(5)在左侧框架中插入7行1列无边框架和背景表格。
(6)在表格中插入导航图像按钮。
(7)在右侧框架中插入文字、图像等网页元素。
(8)制作两个网页分别命名为dianying.html和jingyue.html,保存在同一站点内。
(9)为左侧导航按钮制作超链接,设置链接目标为“mainFrame”。
(10)单击菜单栏“文件”|“保存全部”
(11)预览网页并检测超链接是否在指定框架内打开。
四、说明:
1、所有实验环节均由每位学生独立完成,严禁抄袭他人实验结果,若发现有结果雷同者,按实验课考核办法处理。
实验项目编号:
E14209804
实验名称:
交互设计
实验时间:
====================================================
实验六表单网页的创建(4学时)
一、实验目的:
(1)熟悉表单的各元素
(2)创建表单网页实例
二、实验内容
本实验的内容主要是熟练表单的基本操作,并制作表单网页。
1.建立一个本地站点,包括2-3个网页
2.其中一个网页为表单网如下图,其他网页为中含中表单项目自由发挥制作.
3.设置超链接将站点中的网页链接起来。
表单网页一
表单网页二
三、实验步骤与要求
实验前认真预习,熟练掌握有关概念和知识。
实验过程中记录发生的现象并分析原因。
实验完毕将所有文件打包交给老师。
(1)建立一个本地站点
(2)在站点中建立一个网页文件index.htm并打开进行编辑。
(3)绘制布局表格
(4)在表格中插入相应的表单元素。
(5)对网页内容进行排版。
(6)浏览网页的实际效果。
(7)在站点中建立一个网页文件bbs.htm并打开进行编辑。
(8)绘制布局表格
(9)在表格中插入相应的表单元素。
(10)对网页内容进行排版。
(11)浏览网页的实际效果。
四、说明:
1、所有实验环节均由每位学生独立完成,严禁抄袭他人实验结果,若发现有结果雷同者,按实验课考核办法处理。
实验项目编号:
E14209805
实验名称:
CSS样式使用
实验时间:
====================================================
实验七CSS样式使用(6学时)
一、实验目的:
(1)了解CSS的基本概念。
(2)掌握css的常用属性,并应用在设计中,使网页设计内容更加丰富。
二、实验内容
(1)使用不同的方法(HTML属性,JavaScript,CSS)为页面底版设置颜色
(2)在不同位置设置CSS(直接写在控件中,另外设置样式表),取得相同的结果
(3)修改控件中字体的尺寸和颜色
(4)利用CSS设置菜单(展开和隐藏效果)
三、实验步骤与要求
实验前认真预习,熟练掌握有关概念和知识。
实验过程中记录发生的现象并分析原因。
实验完毕将所有文件打包交给老师。
1.用html设置页面底板颜色: