实验报告
学生姓名：学号：
一、实验室名称：软件大楼302
二、实验项目名称：用HTML语言制作简单的网页
三、实验原理：
1.网页
（1）网页就是在浏览器上看到的一页，网页也称为Web页。
（2）主页通常是进入网站首先浏览的网页，具有引导用户浏览整个网站内
容的作用。
（3）超链接是网页中的特殊标记。它指向了WWW中的其他资源，如其他
网页、网页的另一个段落、声音文件等。这些资源可以位于自己的计算机上，也可以位于其他计算机上。用作超链接的标记可以是一段文字、一幅图像，也可以是一幅图像的一部分。在浏览网页时，单击超链接就可以跳转到超链接所指向的资源。超链接像一根一根的线一样，将各种网页链接在一起，形成一个庞大的信息网。
2.HTML语言
（1）HTML语言就是超文本标记语言，是网页制作的基础，也是基本的工具，使用其他任何工具制作的网页，最终都要以HTML方式存储在计算机里。
（2）HTML的脚本可用任何一种文本编辑器进行编写，如记事本、Microso ft Word等。保存时要将脚本保存成纯文本格式，扩展名必须是.htm。
（3）HTML脚本的基本结构。HTML脚本总是以标记开头，标记结尾，在和标记之间是HTML的所有内容，
一般情况下它分为两部分：头部和主体。头部总是由
和标记定义
的，其中包含了HTML脚本的标题和说明信息；头部下面是HTML脚本的主体部分，它以
作为起始标记，作为结束标记，其中所包含的就是在
浏览器中所看到的内容，包括文字、图片、动画等。
3.FrontPage，dreamwerver，notepad
以FrontPage为例，它是一种简单易学的Web管理和网页制作的软件。Front Page2000的窗口，如图1.1所示。
在窗口工作区的左下方是网页视图模式的3个状态按钮：“普通”、“HTM L”和“预览”。网页视图模式的默认状态是“普通”，用于以所见即所得的方式编辑网页。“HTML”网页视图模式用于以HTML语言的方式编辑网页。
制作网页过程中，想查看网页的制作效果，切换到“预览”网页视图模式即可。
切换网页视图使用鼠标单击相应的状态按钮即可。
图1.1 FrontPage 2000的窗口
选用其他网页开发工具也是可以的这里没有限制
四、实验目的：
1.简单了解HTML语言。
2.认识网页以及网页的结构。
3.掌握用HTML语言制作简单网页的方法。
五、实验内容：
用HTML语言制作简单的网页。
六、实验器材（设备、元器件）：
1.实验设备
计算机
2.实验软件
IE浏览器、网页制作软件，记事本。
七、实验步骤：
给每个学生分配一台计算机。独立完成简单网页制作的实验内容，并写出实验报告。具体步骤如下。
1.制作第一张网页
第1步进入如图1.1所示的ForntPage2000(或者Word 2003/2007)窗口，单击“HTML”状态按钮，进入“HTML”网页视图模式。
第2步在窗口的工作区中，输入如下内容：
我的网站</ title></p><p></head></p><p><body></p><p><br></p><p><p align = "center"><b><font face = "楷体—gb2312" color = "#550055" size = "7">我的网站</font></b></p>（注：可将“我的网站”改为一个人名字命名的</p><p>网站，如“张三个人网站”）</p><p><br></p><p><p align = "center"><b><i><font face ="楷体—gb2312"color = "#ff00ff"</p><p>size = "5">—春天时的梦</font></i></b></p></p><p><hr width = "90%"></p><!--/p4--><!--p5--><p><p align = "center"><font face= "楷体—gb2312" color ="#ff00ff" size =</p><p>"4">一首小诗</p><p></ font ></ p ></p><p><p align = "center"><font face = "楷体—gb2312" color = "#00ffff" size =</p><p>"4">精美图片</p><p></ font></ p></p><p><p align = "center"> <font face = "楷体—gb2312" color = "#008800" size =</p><p>"4">更多内容...</font ></ p></p><p><hr width = "90%"></p><p><p align = "center"> <marquee> <font face = "华文彩云" color = "#c000c0" size =</p><p>"5">欢迎来到阿蒙的家</ font></marquee> </p></p><p><p align = "left"></p><p><font color = "仿宋—gb2312 " color = "#00ff00"size = "4" >搜狐网站</font></p><p><font face ="仿宋—gb2312"color = "#0000ff"size = "4">163网站</font></p><p></p></p><p></body></p><p></html></p><p>提示1：<hr width = 90%>是在页面上插入一条90%页宽的水平线。</p><p>提示2：<p align = "center"> <marquee> <font face = "华文彩云" color= "#c000c0" size = "5">欢迎来到阿蒙的家</font ></marquee></p>中的<marquee></marquee>标记对是使其间的文字水平滚动显示。</p><p>第3步单击“浏览”状态按钮，切换到“预览”网页视图模式查看效果。</p><p>第4步单击工具栏的“保存”按钮，将该网页保存为“index.html”</p><p>第5步进入IE窗口，单击“文件”“打开”命令，进入“打开”对话框；单击“浏览”按钮，选择“index.html”</p><!--/p5--><!--p6--><p>文件后，单击“确定”按钮，这时IE窗口中显示的就是该网页的内容，如图1.2所示。</p><p>图1.2 从IE窗口中浏览到的“index.html”文件</p><p>2.制作第二张网页（可以改为其它内容）</p><p>第二张网页主要是对文字的处理和给网页加背景图片。</p><p>第1步在FrontPage 2000(或者Word 2003/2007)窗口中，单击工具的“新建”按钮，新建第二张网页。</p><p>第2步在窗口的工作区中，输入如下内容：</p><p><html></p><p><head></p><p><meta http- equiv = "content- Type" content = "text / html; charset = gb2312"></p><p><title> 一首小诗</ title></p><p></ head></p><p><body background = "file : /// f: /我的网站/ tl. gif"></p><p><br></p><p><br></p><p><br></p><p><p align = "center"> <b> <font face = "楷体—gb2312"color = "#550055" size =</p><p>"7">游子吟</font ></b >< /p></p><p><br></p><p><p align = "center"><b ><i><font face = "楷体—gb2312"color = "#ff00ff"</p><!--/p6--><!--p7--><p>size = "5" —孟郊</ font></i></b></p></p><p><p align = "center"><font face = "楷体—gb2312"color= "#00ff00"size = "4">慈母手中线，</font></p><p><font face = "楷体—gb2312"color = "#0000ff" size =</p><p>"4">游子身上衣。</font></p></p><p><br></p><p><p align = "center" ><font face = "楷体—gb2312"color = "#ff0000"size = "4">临行密密缝，</font></p><p><font face = "楷体—gb2312" color = "#008800"size =</p><p>"4">意恐迟迟归。</font></p></p><p><hr width = "40%"></p><p><p align = "center"><marquee><font face>= "华文彩云"color = "#c000c0" size =</p><p>"5"请您欣赏！</ font ></ marquee></p></p><p></body></p><p></html></p><p>提示：<body background = "file:///f:/我的网站/tl.gif'>"中的background = file:///f:/我的网站/tl.gif就是给网页加上了背景图片，图片的文件名是tl.gif。（要改为自己最喜欢的图片）</p><p>第3步单击“预览”状态按钮，切换到“预览”网页视图模式查看效果。</p><p>第4步单击工具栏的“保存”按钮，将该网页保存为“一首小诗.html”。</p><p>第5步在IE窗口中浏览，浏览到的效果，如图1.3所示。</p><!--/p7--><!--p8--><p>图1.3 从IE窗口中浏览到的“一首小诗.html”文件</p><p>3.制作第三张网页</p><p>第三张网页主要是在网页中显示一张图片</p><p>第1步在FrontPage2000(或者Word 2003/2007)窗口中，单击工具栏的“新建”按钮，新建第三张网页。</p><p>第2步在窗口的工作区中，输入如下内容：</p><p><html></p><p><head></p><p><meta http- equiv = "Content- Type" content = "text / html; charset = gb2312"></p><p><title >水果与蔬菜<title></p><p></head></p><p><body></p><p><p><ing src ="f: 我的网站/水果与蔬菜.jpg" alt = "水果与蔬菜" width = "880" height = "450"></ p></p><p></ body></p><p><html></p><p>第3步单击“预览”状态按钮，切换到“预览”网页视图模式查看效果。</p><p>第4步单击工具栏的“保存”按钮，将该网页保存为“精美图片.html”。</p><p>第5步</p><p>在IE窗口中浏览，浏览到的效果，如图1.4所示。（可以是个人照片或其他精美</p><!--/p8--><!--p9--><p>图片）</p><p>图1.4 从IE窗口中浏览到的“精美图片.html”文件</p><p>4. 建立超链接</p><p>超链接标记的使用格式：</p><p><a href = "URL">文字或图像标记</a></p><p>其中URL指明超链接对象的位置，它可以是HTML文件名、图像文件名，</p><p>也可以是域名。</p><p>将主页与其他网页及相应网站建立超链接的步骤如下。</p><p>第1步在ForntPage 2000(或者Word 2003/2007)窗口中，打开“index.html”文件，并另存为“我的主页.html”文件第2步文字“一首小诗”与“一首小诗.htm”网页文件建立超链接。</p><p>用<p align = "center"><font face = "楷体—gb2312"color = "#000ff" size = "4"><a href = f :/我的网站/一首小诗.htm>一首小诗</a> </font></p>替换<p align = "center"><font face = "楷体—gb2312"color = "#0000ff" size = "4">一首小诗</font ></p>。</p><p>第3步文字“精美图片”与“精美图片.htm”网页文件建立超链接。</p><p>用<p align = "center"><font face= "楷体—gb2312"color = "#00ffff"size = "4"><a href = f ：我的网站/精美图片.html>精美图片</a ></font></p> 替换<p align = "center"><font face = "楷体—gb2312"color = "#00ffff"size =</p><!--/p9--><!--p10--><p>"4">精美图片</font></p></p><p>第4步</p><p>文字“更多肉容...”与“西藏礼仪.htm”网页文件（也可以用互联网上下载的其他网页文件）建立超链接。</p><p>用<p align = "center"><font face = "楷体—gb2312"color = "#008800"size = "4"><a href = f"/我的网站/西藏礼仪.htm>更多内容...</a ></font></p>替换<p align = "center"><font fae = "楷体—gb2312"color = "#008800"size = "4">更多内容...</font></p></p><p>第5步文字“搜狐网站”与搜狐网站建立超链接。</p><p>用<font face = "仿宋—gb2312" color = "#00ff00"size = "4"><a href = http:// https://www.360docs.net/doc/437983026.html,>搜狐网站</a ></font>替换<font face = "仿宋—gb2312" color= "#00ff00"size = "4"搜狐网站</font>.</p><p>第6步文字“163网站”与163网站建立超链接。</p><p>用<font face = "仿宋—gb2312"color = "#00ff00"size = "4"><a href = http ://https://www.360docs.net/doc/437983026.html,>163网站</a ><font>替换<font face= "仿宋—gb2312"color = "#00ff00"size = "4">163网站</font>.</p><p>修改后的“我的主页.htm:”文件在IE窗口中浏览到的效果，如图1.5所示</p><!--/p10--><!--p11--><!--/p11--><!--p12--><p>需要申请域名。</p><p>八、实验数据及结果分析：</p><p>（1）如果你将文字在网页中居中、右对齐、左对齐显示，应如何处理？</p><p>居中align="center"</p><p>左对齐align="left"</p><p>右对齐 align="right"</p><p>（2）如果要将相临两行文字间的距离加大，应使用什么标记？</p><p>两行代码间添加<br></p><p>（3）在网页中加背景图片与在网页中显示图片有什么区别？各自如何实现？</p><p>加背景使用以下语句</p><p><body background = "图片所在地址"></p><p>（4）一张网页要与另一张网页实现超链接，应如何进行？</p><p>（5）一张网页要超链接到一个网站，应如何进行？</p><p>九、总结及心得体会：</p><p>网页可以正常打开并且显示正常，网页之间以及网页与网站之间的链接可以正常链接成功。本次实验基本完成了各项任务。</p><!--/p12--><!--rset--><h2>html实验报告</h2><p>《企业网站开发》实验指导书 计算机科学与技术学院 2013-3</p><p>目录 实验一HTML语言标志 (1) 【实验目的】 (1) 【实验环境】 (1) 【实验重点及难点】 (1) 【实验内容】 (1) 实验二使用Dreamweaver创建本地站点 (2) 实验三网页编辑与超链接 (6) 【实验目的】 (6) 【实验环境】 (6) 【实验重点及难点】 (6) 【实验内容】 (6) 实验四网页图像的应用 (7) 实验五表格和布局表格 (10) 【实验目的】 (10) 【实验环境】 (10) 【实验重点及难点】 (10) 【实验内容】 (10) 实验六CSS样式的应用 (11) 【实验目的】 (11) 【实验环境】 (11) 【实验重点及难点】 (11) 【实验内容】 (11) 实验七层 (12) 实验八Dreamweaver的框架和行为 (13) 【实验目的】 (13) 【实验环境】 (13) 【实验重点及难点】 (13) 【实验内容】 (13) 实验九Dreamweaver的模版 (14) 【实验目的】 (14) 【实验环境】 (14) 【实验重点及难点】 (14) 【实验内容】 (14) 实验十Dreamweaver表单 (15) 【实验目的】 (15) 【实验环境】 (15) 【实验重点及难点】 (15) 【实验内容】 (15)</p><p>实验一HTML语言标志 【实验目的】 1．掌握<head></head>的<title>标记，和<meta>标记； 2．掌握使用<body>标记设置网页背景颜色和文本颜色。学习使用分段标记 ；3．掌握使用<font>标记设置文字的属性； 4．掌握在网页中插入背景图片； 5．掌握在网页中插入水平线，并设置水平线的属性； 6．掌握在网页中插入背景音乐。 【实验环境】 Windows xp 【实验重点及难点】 掌握字体、水平线等常用标记。 【实验内容】 1、制作一个简单的网页sy1-1.htm，用记事本编辑，内容为个人简介信息。 要求： ●搜索关键字为“个人”“主页”“简介”，标题为我的个人简介。 ●背景为#33ccff,文本颜色为黑色，文本需分段表示。 2、过记事本编辑网页sy1-2.htm，内容为李白的诗“静夜思”。 要求：每行诗为一个段落，四行文字颜色不同，字体不同。 3、通过记事本编辑网页sy1-3.htm，实现如下页面。图片自选，插入背景音乐“故乡的云.mp3”。</p><h2>个人网页制作实验报告</h2><p>湖南文理学院芙蓉学院个人主页课程设计报告 课题: 个人主页课程设计 姓名：吴珊 学号： 09120155 同组姓名：李芳 专业班级：计算机科学与技术0901班 指导教师：任盛 设计时间： 2012年6月13日</p><p>目录 1、实验目的与要求 (3) 2、主题介绍 (3) 3、工具的选择与介绍 (4) 3．1主要使用工具：Dreamweaver (4) 3．2图片处理软件：Photoshop (5) 4、网页设计实现的过程 (5) 4．1实验的分工 (5) 4．2主页的制作 (6) 4．3分页2制作（新疆美食）： (7) 5、个人网站截图 (9) 6、实验总结 (11) 7、参考文献 (11) 附录： (12) 附录一（主页部分代码，有删减）： (12) 附录二（分页2新疆美食部分代码，有删减）:------------------- 14</p><p>1、实验目的与要求 （1）自主选择主题实现一个关于主题的个人网站 （2）使用PS、Dreamweaver等软件对界面进行设置 （3）实现网页界面的美观、内容详尽丰富。 2、主题介绍 国家的历史有长有短，疆域有大有小，实力有强有弱，人口有多有少，民族构成、宗教信仰、政权性质和经济结构也有差异，故而各国的饮食文化是不一样的。 中国饮食文化是一种广视野、深层次、多角度、高品位的悠久区域文化；是中华各族人民在100多万年的生产和生活实践中，在食源开发、食具研制、食品调理、营养保健和饮食审美等方面创造、积累并影响周边国家和世界的物质财富及精神财富。 民以食为天，中华上下五千年美食文化更是源远流长。所以这次我们选择了“美食”作为主题。美食，顾名思义就是美味的食物，贵的有山珍海味，便宜的有街边小吃。但是不是所有人对美食的标准都是一样的，其实美食是不分贵贱的，只要是自己喜欢的，就可以称之为美食。吃前有期待、吃后有回味的东西。美食遭遇心情的时候，美食已不仅仅是简单的味觉感受，更是一种精神享受。中国美食体现了中华民族的饮食文化传统，有许多独特之处。由于风味多样，四季有别。导致各地的美食各有千秋。 系因地理、气候、习俗、特产的不同形成了不同的地方风味,美食菜系的划分单就汉族的饮食特点而言，目前有四大菜系、八大菜系、十大菜系之说，而且划分系类仍有继续增加的趋势。如果按四大菜系分：有川菜、粤菜、苏菜和鲁菜。也有分八大菜系的。其中各大菜系交相辉映，各有千秋，成为了中华民族珍贵的文化瑰宝！ 本次的主题分为两大部分，新疆美食、湖南美食两个主要部分。通过这两个板块来介绍两个地方的美食，以突显南北两方的美食差异与特点。让大家通过我们这个网页，以我们的网页为窗口了解湖南美食，了解新疆美食，从而增强对我国的美食文化的了解。 湖南美食-----湖南菜特别讲究原料的入味，技法多样，有烧、炒、蒸、熏等方法，尤以“蒸”菜见长。最为精湛的是煨，原汁原味。且刀功精妙，形味兼美，菜肴千姿百态，变化无穷。 新疆美食-----新疆的主食是面条、馕和牛羊肉，菜以酸辣口味为主，洋葱、番茄、辣椒、土豆用大蒜头等是常用的蔬菜配料，当然也少不了孜然、辣椒粉、醋等调味料，所以新疆菜总是香喷喷、又酸又辣，特别开胃。总地来说，新疆各民族的人们都偏爱吃面食、奶制品、牛羊肉及各种瓜果.</p><h2>Html设计实验报告</h2><p>信息职业技术学院 《网页设计》实验报告（2010—2011学年第二学期） 班级： 姓名： 学号： 指导老师：</p><p>实验一认识Dreamweaver CS3 一、实验目的 1、熟悉Dreamweaver CS3环境。 2、了解HTML文件结构。 二、实验环境 计算机 三、实验容 创建站点有两种方式：使用向导有序地进行设置，或者通过在“管理站点”对话框中设置“高级”选项卡信息来创建。无论哪种方式，都要事先在本地磁盘上建立一个用来存放站点的文件夹，这个文件夹就是本地站点的根目录。下面介绍一下这两种方式的具体操作步骤。 1．使用向导建立站点 使用向导建立站点的步骤如下：（1）打开建立站点向导的方法有3种。 ①在进入Dreamweaver的起始页界面中选择“新建”→“Dreamweaver站点”命令，如图所示。 ②选择“站点”菜单中的“新建站点”命令。 ③选择“站点”菜单中的“管理站点”命令，打开如图所示的“管理站点”对话框，执行“新建”→“站点”命令。 起始页中新建站点“管理站点”对话框（2）打开“站点定义为”对话框，在“您打算为您的站点起什么名字？”文本框中输入站点名字，如travel。若已申请域名则可以在“您的站点的HTTP地址（URL）是什么？”文本框中填入申请的域名地址。如图所示。</p><p>设置站点名和URL地址 （3）单击“下一步”按钮，询问是否使用服务器技术，如图所示。若是静态站点则选中“否，我不想使用服务器技术”单选按钮，若是动态站点可以进一步设置使用哪一种服务器技术。 选择是否使用服务器技术 （4）单击“下一步”按钮，在“您将把文件存储在计算机上的什么位置？”文本框中直接输入站点根目录的路径，或者单击“浏览”按钮，选择文件夹目录。 （5）单击“下一步”按钮，在“您如何连接到远程服务器？”下拉列表框中选择一种连接到远程服务器的方式，这里选择“无”选项。 （6）单击“下一步”按钮，将显示前几步设置的总结信息，若需修改可单击“上一步”按钮返回重新设置，若确定设置则单击“完成”按钮。 站点创建完成后将在“文件”面板中显示出站点的结构和文件。 2．使用高级设置建立站点 使用高级设置建立站点的第一步同前，在如图所示的“站点定义为”对话框中切换到“高级”选项卡，如图所示。在左边的分类中选择“本地信息”选项，然后分别设置“站点名称”、“本地根文件夹”、“默认图像文件夹”、“HTTP地址”等信息。若有需要还可以在左边的分类中选择其他项目进行设置，完成以后单击“确定”按钮，即可创建站点。 对于已经创建好的站点，可以执行编辑、复制、删除、导出和导入等操作。 1．编辑站点 如果要重新设置站点的属性，可以执行以下步骤： （1）单击“站点”→“管理站点”选项。（2）从站点列表中选择要编辑的站点名称，单击“编辑”按钮。可以参考前面创建站点的方法重新设置站点属性。（3）编辑完毕后，单击“确定”按钮，返回到“管理站点”对话框，单击“完成”按钮。 2．复制站点 如果要创建多个结构相同或相似的站点，可以利用站点的复制功能，具体步骤如下： （1）单击“站点”→“管理站点”选项。 （2）从列表中选择要复制的站点名称，单击“复制”按钮。</p><h2>网页设计与制作实验报告</h2><p>网页设计与制作实验指导一览表 实验1 HTML语言 实训目的: 为了让学生能熟悉学习网页不可避免要接触的HTML语言，达到用该语言可以建立一个简单的网页的目的，同时了解建立站点是做网站必不可少的，要掌握建立站点的方法。 素材准备： 准备制作网页所需的文字素材、图像素材。 实验课时： 2学时 实验内容： 1.创建站点； 2.新建网页以及保存，重命名； 3.输入HTML语言。 实验步骤：</p><p>1.在E盘中新建本地根文件夹，命名为root，并在该文件夹中新建image 文件夹以存放网站中所要用到的图片。 2.定义站点：设置 "站点名称"，命名为 "mysite";设置本地根文件夹,指定 为E盘下的root文件夹;设置 "HTTP地址"为localhost。 3.创建与设置文档的页面属性：新建一个页面，保存名为“HTML基础” 的文档。 4.切换代码模式下，输入代码。 5.保存文件，预览文件效果。 实验过程注意事项: 1.在创建站点的过程中注意建立本地文件夹，文件夹命名最好为英文；网站 中所有的文件最好取名为英文；注意文件的路径； 2.所有的图片文件单独放在image文件夹内。 实验思考: 除了用HTML语言来做这个网页，还有没有其它的方法？ 书写实验报告要求: 根据最终所作的网页，写出实验报告。 页面效果图： 图1-1</p><p>实验2 初识Dreamweaver 实验目的： 为了让学生能熟练掌握Dreamweaver的安装与卸载，启动与退出，基本工作环境和设置，对Dreamweaver操作环境有一定了解。 素材准备： 准备好从网上下载的安装程序。 实验课时： 2学时 实验内容： 1.安装Dreamweaver： 2.Dreamweaver的启动与退出： 3.了解工具栏、菜单栏、标题栏等工作环境： 4.卸载Dreamweaver 实验步骤： 1.打开从网上下载的Dreamweaver程序，双击安装。 2.安装完成后输入注册号。 3.启动Dreamweaver，并查看工具栏、菜单栏、标题栏等工作环境。 4.退出Dreamweaver。 5.卸载Dreamweaver 实验过程注意事项： 1.安装过程完成后，要激活。 实验思考： 从“控制面板”里删除程序与从安装到的目录文件里删除有什么区别？ 书写实验报告要求： 写出本次实验报告。 实验3 文本操作</p><h2>网页制作实验报告6个实验</h2><p>目录 实验一网页设计基础实验 (2) 实验二HTML语言应用 (4) 实验三CSS样式表的应用---CSS的引用 (10) 实验四Dreamweaver的使用、个人网站的制作 (13) 实验五用框架、模板设计网页 (15) 实验六表单制作 (19)</p><p>实验一网页设计基础实验 一、实验目的 1．掌握网站设计的基本原则、网站及网页的基本风格与基本构图特点； 2．了解网页布局的形式。 3.用记事本编写一个简单的网页。 二、实验内容 1．上网访问实际若干电子商务网站，了解各网站的风格（主题图形形象、导航是否清晰，整体色调的搭配是否协调，主题是否突出等）。 2．在网上找出下列版面布局的结构形式： ⑴．“T”结构布局 1."T"结构布局。所谓"T"结构。就是指页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条背景教深，整体效果类似英文字母"T",所以我们称之为"T"形布局。这是网页设计中用的最广返的一种布局方式。这种布局的优点是页面结构清晰，主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节色彩上不注意，很容易让人"看之无味"。 2."口"型布局。这是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，右面放友情连接等，中间是主要内容。这种布局的优点是充分利用版面，信息量大(我的主页首页即属于这种布局)。缺点是页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计，例如网易壁纸站。 3."三"型布局。这种布局多用于国外站点，国内用的不多。特点是页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。 4.对称对比布局。顾名思义，采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。优点是视觉冲击力强，缺点是将两部分有机的结合比较困难。 5.POP布局。POP引自广告术语，就是指页面布局象一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类站点，比如https://www.360docs.net/doc/437983026.html,。优点显而易见：漂亮吸引人 进入internet找到以上各种布局，并写出各种版面布局网站的域名和所采用的版面布局形式 找出使用大色块和抽象线条构图风格的网站（至少各2个）；例：大色块主页 找出10个国内外著名企业或商务网站主页上的宣传标语或体现企业精神的代表性词句。 三、实验步骤与要求 1）新建一个记事本文件本在其中输入如下代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.360docs.net/doc/437983026.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.360docs.net/doc/437983026.html,/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>我的第一个网页 Html设计实验报告
山东信息职业技术学院 《网页设计》实验报告（2010—2011学年第二学期） 班级： 姓名： 学号： 指导老师：
实验一认识Dreamweaver CS3 一、实验目的 1、熟悉Dreamweaver CS3环境。 2、了解HTML文件结构。 二、实验环境 计算机 三、实验内容 创建站点有两种方式：使用向导有序地进行设置，或者通过在“管理站点”对话框中设置“高级”选项卡信息来创建。无论哪种方式，都要事先在本地磁盘上建立一个用来存放站点的文件夹，这个文件夹就是本地站点的根目录。下面介绍一下这两种方式的具体操作步骤。 1．使用向导建立站点 使用向导建立站点的步骤如下：（1）打开建立站点向导的方法有3种。 ①在进入Dreamweaver的起始页界面中选择“新建”→“Dreamweaver站点”命令，如图所示。 ②选择“站点”菜单中的“新建站点”命令。 ③选择“站点”菜单中的“管理站点”命令，打开如图所示的“管理站点”对话框，执行“新建”→“站点”命令。 起始页中新建站点“管理站点”对话框（2）打开“站点定义为”对话框，在“您打算为您的站点起什么名字”文本框中输入站点名字，如travel。若已申请域名则可以在“您的站点的HTTP地址（URL）是什么”文本框中填入申请的域名地址。如图所示。 设置站点名和URL地址
（3）单击“下一步”按钮，询问是否使用服务器技术，如图所示。若是静态站点则选中“否，我不想使用服务器技术”单选按钮，若是动态站点可以进一步设置使用哪一种服务器技术。 选择是否使用服务器技术 （4）单击“下一步”按钮，在“您将把文件存储在计算机上的什么位置”文本框中直接输入站点根目录的路径，或者单击“浏览”按钮，选择文件夹目录。 （5）单击“下一步”按钮，在“您如何连接到远程服务器”下拉列表框中选择一种连接到远程服务器的方式，这里选择“无”选项。 （6）单击“下一步”按钮，将显示前几步设置的总结信息，若需修改可单击“上一步”按钮返回重新设置，若确定设置则单击“完成”按钮。 站点创建完成后将在“文件”面板中显示出站点的结构和文件。 2．使用高级设置建立站点 使用高级设置建立站点的第一步同前，在如图所示的“站点定义为”对话框中切换到“高级”选项卡，如图所示。在左边的分类中选择“本地信息”选项，然后分别设置“站点名称”、“本地根文件夹”、“默认图像文件夹”、“HTTP地址”等信息。若有需要还可以在左边的分类中选择其他项目进行设置，完成以后单击“确定”按钮，即可创建站点。 对于已经创建好的站点，可以执行编辑、复制、删除、导出和导入等操作。 1．编辑站点 如果要重新设置站点的属性，可以执行以下步骤： （1）单击“站点”→“管理站点”选项。（2）从站点列表中选择要编辑的站点名称，单击“编辑”按钮。可以参考前面创建站点的方法重新设置站点属性。（3）编辑完毕后，单击“确定”按钮，返回到“管理站点”对话框，单击“完成”按钮。 2．复制站点 如果要创建多个结构相同或相似的站点，可以利用站点的复制功能，具体步骤如下： （1）单击“站点”→“管理站点”选项。 （2）从列表中选择要复制的站点名称，单击“复制”按钮。 （3）若要对复制的站点进行编辑，可以从站点列表中选中新复制的站点，单击“编辑”按钮，编辑完成返回到“管理站点”对话框，单击“完成”按钮。
网页设计实验报告
《网络程序设计》 实验报告 学院：信息工程学院 专业：电子信息工程专业 学期：2014~2015学年第二学期 学号： 姓名：
实验1 使用JSP编写网页程序 1.1 实验目的 1．熟悉MyEclipse开发环境。 2．熟悉JSP基本语法。 3．练习使用JSP脚本语句。 4．熟练运用JSP内置对象。 1.2 实验预习 1．安装MyEclipse。 本实验使用的版本是10.7-offline-installer-windows 32位版。安装时默认路径在“使用用户\AppData\Local\”，可以自行更改。 2．了解java开发环境的配置。 1.3 实验任务 1．启动MyEclipse程序，并将启动界面截图。 2．启动tomcat服务器，并将启动状态信息截图。 配置window->Preferences->Tomcat。设MyEdipse T omcat 6为不可用并将Tomcat 5.X
server设为可用，选择路径为apache-tomcat-5.5.27的所在路径。 3．编写第一个JSP网页程序，在JSP页面中嵌入脚本代码，通过内置对象out在页面中打印出“Hello My First JSP Page”。 新建一个project，其中Web Service Project，Report Web Project都可用，就目前来说区别不大。在index.jsp文件内编写代码。其文件内结构如下： 语言参数，调用头文件 //文件开始标签
//文件头部标签
<tltie> //文件标题标签 <head> // <body> //文件主体标签 Hello My First JSP Page. <br> //网页显示内容 <body> <html></p><h2>《网页设计与制作》实验报告</h2><p>《网页设计与制作》实验报告院系名称：专业班级：电 学生姓名：学号： 2013年 5 月26 日</p><p>实验一：HTML语言实验 一、实验目的 1、掌握利用HTML语言编写网页的能力； 2、掌握利用HTML语言编写表格的能力； 3、掌握利用HTML语言编写表单的能力。 二、实验课时 2学时 三、实验内容 1、表格实验的结果。 ①表格制作代码： <HTML> <HEAD> <TITLE>制作网页表格 ②网页表格制作截图：
2、表单实验的结果 ①表单实验代码：
实验1.2——电子商务1104王远 
