HTML标记的综合应用网页设计实验报告

时间:2024.3.27

 

学    院:  软件与通信工程学院 

课程名称:  网页设计基础   

专业班级:  08软件与通信工程学院4班   

姓    名:     陈贝贝        

学    号:    0088225         


学生实验报告

一、实验综述

1、实验目的及要求

实验目的:

通过用HTML语言进行编辑,使学生了解网站的制作流程;了解HTML表单标记的应用;了解HTML表格标记的应用;掌握HTML的基本概念、文档的基本结构;掌握HTML文档的结构、HTML设计文字排版;掌握HTML插入多媒体;掌握HTML基本标记,包括标题、背景图片、图像、水平线、字体编辑、段落、超链接、文本堆砌等的使用方法。熟练掌握HTML中的常用标记的名称及用途。熟练掌握对HTML语言文字结构的理解;掌握各种元素的使用;熟练掌握图片、动画、声音的嵌入以及超级连接的控制和应用,结合实际,巩固课堂中所学的理论知识。

实验要求:

以个人独立完成的方式,完成一个用HTML语言进行编辑的网页制作,实现一个具有独立主题的网页制作。

2、实验仪器、设备或软件

带IE浏览器的计算机,Windows的写字板、记事本。

二、实验过程(实验步骤、记录、数据、分析)

Step1:设计网站LOGO,网站的标准色彩,并且确定网站主题和网站栏目,一切设计完成后开始构建页面。

我定义的主题是个人网站,所以主要突出自己的个性特质。LOGO是sky dream,寓意是我的梦游园。色彩主页是以蓝色为主,强调梦感。栏目分为主页,日志(我的印记),相册(美丽瞬间),个人档案(我的万花筒),心情(我的叨叨)和留言板(留言星星河)。Flash是自己修改的,花了一些力气。

这里强调一下目录下文件夹的分类,不能出现中文,不然会无法显示。如图:

主页面index.html,然后依次建立分页面。

Step2对网页设计框架,进行布局。

利用表格和框架。主页这里的布局,我主要是使用的表格布局,嵌套使用了div+css样式。

在日志列表下面,因为主要框架相同,就可以避免重复。部分演示如下:


每个部分的框架,要设计好,不然很容易出现混乱的状况。

  

Step3:使网站更加美观和多元化,使用了一些媒体元素和特效:

l   插入了音乐<embed src="music/Norah Jones - New York City.mp3" hidden="true"></embed>;

l   插入flash导航,使用<object classid="c" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="837" height="312">
<param name="movie" value="flash/flash.swf">
<param name="quality" value="high">
<embed src="flash/flash.swf" quality="high"pluginspage=" http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="837" height="312"></embed>

        </object>

l   使用文字特效和图片滚动。利用的<MARQUEE  behavior =“value” bgcolor =“color” direction =“value” height =“value” width =“value”  loop =“value ” scrollamount =“value ” scrolldelay =“value” hspace=“value” vspace=“value”>滚动文字</MARQUEE>。

子页面效果预览

1.    留言板:运用了表单,按钮等元素。

三、结论

1.实验结果

实验结果:能在浏览器中运行,看到自己做的网站。

HTML标记的应用很重要,是构建页面的基本元素。

2.分析与讨论

A.有关于框架的,还在琢磨中。在日志快,除了内容不同,其余板式完全一致。但是框架出来的效果让人大跌眼镜,是我的技术比较生疏,效果不理想,框架一块有待提高;

B. 常见的问题总结

1、不要将所有文件都存放在根目录下,会造成文件管理混乱

常常搞不清哪些文件需要编辑和更新,哪些无用的文件可以删除,哪些是相关联的文件,影响工作效率。另外,上传速度慢。服务器一般都会为根目录建立一个文件索引。当您将所有文件都放在根目录下,那么即使你只上传更新一个文件,服务器也需要将所有文件再检索一遍,建立新的索引文件。很明显,文件量越大,等待的时间也将越长。所以,尽可能减少根目录的文件存放数。

   2、按栏目内容建立子目录 

 子目录的建立,首先按主菜单栏目建立。例如:企业站点可以按公司简介,产品介绍,价格,在线定单,反馈联系等建立相应目录。其他的次要栏目,类似what's new,友情连接内容较多,需要经常更新的可以建立独立的子目录。而一些相关性强,不需要经常更新的栏目,例如:关于本站,关于站长,站点经历等可以合并放在一个统一目录下。所有程序一般都存放在特定目录。例如:CGI程序放在cgi-bin目录。所有需要下载的内容也最好放在一个目录下。

 3、在每个主栏目目录下都建立独立的images目录

 为每个主栏目建立一个独立的images目录是最方便管理的。而根目录下的images目录只是用来放首页和一些次要栏目的图片。

 4、目录的层次不要太深

目录的层次建议不要超过3层,维护管理方便。

5、不要使用中文目录

 6、不要使用过长的目录

C、确定网站的链接结构

  网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上,但可以跨越目录。建立网站的链接结构有两种基本方式:

  1、树状链接结构

  类似DOS的目录结构,首页链接指向一级页面,一级页面链接指向二级页面。这样的链接结构浏览时,一级级进入,一级级退出。优点是条理清晰,访问者明确知道自己在什么位置,不会"迷"路。缺点是浏览效率低,一个栏目下的子页面到另一个栏目下的子页面,必须绕经首页。

  2、星状链接结构

  类似网络服务器的链接,每个页面相互之间都建立有链接。这种链接结构的优点是浏览方便,随时可以到达自己喜欢的页面。缺点是链接太多,容易使浏览者迷路,搞不清自己在什么位置,看了多少内容。

四、指导教师评语及成绩:

 

成绩:                                         指导教师签名:

                                               批阅日期:


第二篇:实验一 HTML标记基本应用与网页设计


实习一 HTML标记基本应用与网页设计

一、实习目的

1. 熟悉Dreamweaver 的工作环境;

2. 掌握Dreamweaver站点管理功能;

3. 掌握Dreamweaver制作网页的基本方法;

4. 掌握网页制作中的利用表格布局方法。

二、实习内容

1. 熟悉Dreamweaver的工作环境;

2. Dreamweaver管理站点功能;

3. 制作图文混排的网页;

4. 制作图片展示网页;

5. 制作个人网站首页。

三、实习步骤

1.熟悉Dreamweaver的工作环境。

启动Dreamweaver,熟悉Dreamweaver工作环境,了解Dreamweaver的界面的组成。

2. Dreamweaver管理站点

① 创建站点

打开“站点”菜单,单击“新建站点”,按照向导步骤完成站点的创建。

② 查看站点目录结构

单击“文件”面板,即可查看站点目录结构。

③ 网站其它目录

根据要制作的网站的内容,可以建立相应的目录,用以分类存放网站制作中的相关文件。

3.制作一个图文混排的网页

① 打开“文件“菜单”,单击“新建”,选择“基本页”中的“HTML”,在Dreamweaver中将出现一个空白的网页。

② 在网页中输入(粘贴)一段文字(孙悟空自传,教学资源网上可以下载),设置第一段(作为标题)为“黑体、24磅”,其余文字设置为“宋体、14磅”。

③ 在网页中插入一张图片(sunwukong.jpg,教学资源网上可以下载),设置图片的对齐属性为“左对齐”。

④ 将保存网页到网站的根目录(d:\myweb)中,文件名为zizhuan.htm。

4.制作一个图片展示网页

① 打开“文件”,单击“新建”,选择选择“基本页”中的“HTML”,在Dreamweaver中将出现一个空白的网页。

② 在网页中插入一个7行3列的表格,在表格属性中,将表格的边框粗细设置为0,接着再将第1行的3列合并,输入文字“孙悟空的幸福生活”,设置为“标题一”格式。调整单元格行高。

③ 在表格的单元格中,插入图片和文字说明(教学资源网上可以下载)。

④ 将保存网页到网站的根目录(d:\myweb\xiangce)中,文件名为xiangce.htm。

5.制作个人主页(首页)

网页设计时,网页的布局方式将直接影响页面的外观,同时也是体现设计师的水平的一个标准。在设计布局时,通常采用表格的方式。在本网站首面的制作中,我们也将使用表格方式布局。

① 打开“文件”,单击“新建”,选择选择“基本页”中的“HTML”,在Dreamweaver中将出现一个空白的网页。

② 在网页中插入一个7行2列的表格(宽:700像素;边框:0;边距:0;间距:0),然后将第2列的所有单格合并。

③ 在刚合并完成后单元格中,设置单元格对齐属性为“水平:左对齐;垂直:顶端对齐”,然后在该单元格插入一个4行1列的表格(宽度:100%;边框:0)。完成的布局如图然后调整

④ 在左边单元格和右边第1行的单元中,插入图片。

⑤ 将右边第2行拆分为2列。在第3行中,插入一个1行3列的表格(宽:100%;高:100%。

⑥ 接下来,在单元格中插入图片,输入文字。

⑦ 将“悟空自传”图片超链接到前面制作的网页“zizhuan.htm”,“我的相册”图片超链接到“xiangce.htm”,“我的母校”图片边接到“http://www.nwsuaf.edu.cn”,“与我联系”图片超链接到“mailto:sunwukong@tiangong.org”。

⑧ 将网页保存到网站的根目录(d:\myweb)中,文件名为index.htm。

四、实习结果

1.网页zizhuan.html截图如下:

2.网页xiangce.html截图如下:

3.网页index.html截图如下:

五、课后练习

1. 如何管理网站文件?

       答:首先应该建立网站的根目录,将网页文件及其他资源分门别类的保存在相应的文件夹中以方便管理和维护,网页间通过链接组织在一起。

2. 如何规划和设计个人主页?

    答:首先应确定个人主页的主题,并根据主题设计布局、框架、颜色搭配等,应该做到层次分明,表达信息明确,有适当的图片,能够吸引人的注意力。

六、实习总结及存在问题

   第一次实习,总体觉得网页设计相比于编程语言来说,比较简单。但是各种各样的标记让我很头疼,总是忘记写结束标记。主要存在的问题有以下几点:

1.       表格的行高不会调,插入图片以后,调整很困难。

2.       给一个图片或文字设置超链接后,不会去掉字体下划线,或图片的外框。

3.       若插入图片用的是绝对路径,文件夹移动会出现错误。

更多相关推荐:
Dreamwever网页设计实验报告

学院计算机系综合性实验实验报告课程名称网页制作实验学期20xx至20xx学年第2学期学生所在系部计算机系年级20xx专业班级Z091学生姓名学号任课教师胡英实验成绩计算机系制华北科技学院计算机系综合性实验报告网...

网页设计课程实验报告

浙江传媒学院网站设计课程实验报告课程设计名称网页设计与编程实训设计题目中小企业个体商业网站系部电子信息学院专业信息管理与信息系统学生姓名张磊学号080806144指导教师张浩斌一实验目的运用已经掌握的网页设计与...

网页制作实验报告

华北科技学院计算机系综合性实验实验报告课程名称网页制作A实验学期20xx至20xx学年第1学期学生所在系部计算机系年级大三专业班级信管B081班学生姓名尹芳学号20xx07034113任课教师沙嘉祥实验成绩计算...

网页设计实验报告

河南城建学院《网页制作》课程设计报告学号:专业:姓名:题目:指导教师:设计时间:计算机科学与工程系20##年6月目录一设计目的...3二、课程设计题目...3三、课程设计要求...3四、需求分析...4五、技术…

网页设计实训报告

网页设计报告题目:个人网站实训报告学号:XXX姓名:XXX一.实训意义:网页设计与制作综合实训是教学过程中重要的实践性教学环节.它是根据专业教学计划的要求,在教师的指导下对学生进行网页制作专业技能的训练,培养学…

Web网页设计实验报告

课程设计报告书20xx20xx学年第1学期设计题目Web网页制作实验报告年级专业08级市场营销姓名学号指导老师经济管理系12月20日目录一设计目的3二设计题目3三结构设计3四技术分析4五设计过程7六实验心得10...

web网站设计实验报告

目录一设计目的3二设计题目3三结构设计3四技术分析6五设计过程8六实验误区11七实验总结12附录网页源代码节选12一设计目的在Internet飞速发展的今天互联网成为人们快速获取发布和传递信息的重要渠道它在人们...

网页制作实验报告

网页制作实验报告主题NBA的答案阿伦艾弗森课班级姓学号一实验目的网络在现今生活中的重要地位已经不言而喻我们上网都避免不了浏览网页本实验通过学习使用Dreamweaver8设计网页来达到熟知一个网站的网页整个设计...

网页设计实验报告

网站规划与设计实验报告院系名称学生姓名学号专业名称班级经济与管理学院杨坤02135046信息管理与信息系统信管1302班实验1Dreamweaver80基本操作及简单网页制作实验1实验目的与要求1掌握Dream...

制作网页实验报告

XX大学课程设计报告课程名称计算机网络设计题目网页制作专业学生姓名学生学号指导教师20xx年6月12日目录一实验目的1二实验原理1三实验过程1四设计框图7五网页截图8五程序9七实验收获15一实验目的学会用HTM...

网页设计实验报告

网页设计实验报告一设计思路1个人觉得务必要先想好自己应该要设计一个什么样主题内容结构的个人网站而我要设计的网页的主题是体育内容是体育新闻结构就是框架表格图片互相嵌套2打开dreamweaver新建站点站点名称个...

网页设计实验报告

中南民族大学管理学院学生实验报告课程名称网页设计设计与制作教程姓名学号年级专业信息管理与信息系统指导教师实验地点管理学院综合实验室学年度第中南民族大学管理学院学生实验报告目录实验一实验二实验三实验四HTML上机...

网页设计实验报告(31篇)