下载文档原格式
网页设计实验报告一、实验目的。
本实验旨在通过设计一个简单的网页，掌握网页设计的基本原理和技术，包括HTML、CSS等相关知识，加深对网页设计的理解和应用。
二、实验内容。
1. 确定网页设计的主题和内容，包括页面布局、颜色搭配、文字排版等方面的设计。
2. 使用HTML语言编写网页的结构和内容，包括标题、段落、列表、图片等。
3. 使用CSS样式表美化网页的外观，包括字体、颜色、边框、背景等样式的设置。
4. 调试和优化网页，确保网页在不同浏览器和设备上的兼容性和稳定性。
三、实验过程。
1. 确定网页设计的主题和内容。
根据实验要求，我选择了一个简单的个人简历页面作为设计主题，包括个人信息、教育经历、工作经验和技能展示等内容。
2. 使用HTML语言编写网页的结构和内容。
我首先创建了一个HTML文件，并使用HTML标签编写了页面的基本结构，包括标题、段落、列表和图片等内容。
3. 使用CSS样式表美化网页的外观。
我创建了一个独立的CSS文件，通过设置字体、颜色、边框、背景等样式，使页面呈现出美观的外观效果。
4. 调试和优化网页。
在完成基本设计后，我对页面进行了多次调试和优化，确保页面在不同浏览器和设备上的兼容性和稳定性，同时也对页面的加载速度和性能进行了优化。
四、实验结果。
经过一系列的设计、编写和优化，我成功地完成了一个简单的个人简历网页设计。
页面整体布局合理，颜色搭配和文字排版也较为美观，同时在不同浏览器和设备上都能够正常显示和使用。
五、实验总结。
通过本次实验，我深入了解了网页设计的基本原理和技术，掌握了HTML、CSS等相关知识，提高了对网页设计的理解和应用能力。
同时，我也意识到网页设计需要注重细节和用户体验，不断调试和优化是设计过程中不可或缺的环节。
六、实验感想。
本次实验让我对网页设计有了更深入的认识，也让我体会到了设计的乐趣和挑战。
在今后的学习和工作中，我将继续加强对网页设计相关知识的学习和实践，不断提升自己的设计能力和水平。
网页设计实验指导书经济与管理学院二零一二年二月实验一HTML标记的基本语法一、实验目的和要求1．熟悉HTML文件的编辑环境；2．掌握HTML中与文字、图像、页面、表格、表单和框架等的基本标记。
3．学会使用HTML设计出文本与图像相结合的较为复杂的页面。
二、实验内容1、根据如表1-1所示的表格写出完整的HTML代码；其中，《网络原理》和《网页设计与制作》课程的详细说明文件分别为该网页所在目录的net.htm和web.htm，需要为表中的书名设置相应的超级链接，以便在点击后可跳转到相应的说明页上。
2、编写出实现如图1-1所示页面效果的关键html代码，要求点击左边各目录项，相应的链接会显示在右下的帧中，并且适当填加特效如：背景图片、图像、动画等（也可自行设计效果）。
图1-1 个人网站首页3、编写出实现如图1-2所示页面效果的关键html代码，其中各子项目都做了超链接，链接的目标文件自行指定。
图1-2 列表效果图三、实验步骤1．打开任何一种文本编辑工具，可以是附件中的记事本，也可以是rontPage/Dreamweaver 的代码窗口。
2．按各种不同标签的语法规则，输入合法的代码。
3．输入完成后保存代码文件，文件后缀为.htm/.html。
4．在IE浏览器中打开保存的文件，看看是否能完成自己想要的设置。
四、程序代码（在实验报告中写出）（1）<table width="500" border="1"><caption>课程表</caption><tr><td><div align="center">课号</div></td><td><div align="center">课程名</div></td><td><div align="center">学分</div></td></tr><tr><td><div align="center">1002201</div></td><td><div align="center"><u>《网络原理》</u></div></td><td><div align="center">6</div></td></tr><tr><td><div align="center">1003302</div></td><td><div align="center"><u>《网页设计与制作》</u></div></td><td><div align="center">5</div></td></tr><tr><td><div align="center">1003507</div></td><td><div align="center">《管理学原理》</div></td><td><div align="center">5</div></td></tr></table>2.还没弄3.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style type="text/css"><!--.STYLE1 {font-family: "宋体";font-size: xx-large;}.STYLE4 {font-family: "宋体"; font-size: xx-large; font-weight: bold; }.STYLE5 {font-family: "宋体";font-size: x-large;}.STYLE6 {font-family: "新宋体"; font-size: x-large; }--></style></head><body><ul><li><h1><span class="STYLE1">列表项目1</span></h1><ol><li class="STYLE6"><a href="常用/新建文件夹/市场营销.doc">子列表项1</a></li><li class="STYLE6"><a href="常用/新建文件夹/市场营销.doc">子列表项2</a></li></ol></li></ul><ul><li><p class="STYLE4">列表项目2</p><ol><li class="STYLE5"> <a href="常用/新建文件夹/市场营销.doc">子列表项1</a></li><li class="STYLE5"><a href="常用/新建文件夹/市场营销.doc">子列表项2</a></li></ol></li></ul></body></html>五、实验心得体会主要包括在实验过程中学到了哪些东西；遇到了哪些困难，又是如何解决的；还有什么问题没有解决，分析其原因。
南阳理工学院HTML+CSS上机实验指导书（2011 版）软件学院· .NET 教研室2011.8目录实验一熟悉HTML 网页如何手工制作 (3)实验二熟悉HTML 网页和各种标签 (3)实验三熟悉使用DREAMWEAVER制作HTML 网页的方法 (4)实验四列表标签和超链接标签 (4)实验五网页表格的制作 (5)实验六网页表单的制作 (5)实验七熟悉CSS基本结构一 (6)实验八熟悉CSS基本结构二 (6)实验九熟悉CSS基本结构三 (7)实验十熟悉CSS基本结构三 (7)实验十一熟悉DREAMWEAVER使用（一） (8)实验十二熟悉DREAMWEAVER使用（二） (9)实验一熟悉HTML 网页如何手工制作【实验目的】熟悉HTML 的基本结构和常用标记，使用记事本编写网页文件。
【实验内容】建立一个简单的HTML 文件，并输入相应的内容，要求使用相应标签对网页内容进行排版。
排版中涉及到的标签包括：标题标签、字体标签、分段标签等。
【实验步骤】1、打开记事本程序，编写网页的基本结构2、对网页进行编辑，输入文本内容，并用相应的标签对文本内容进行排版设置3、将文件保存为*. Html4、用浏览器打开所保存的网页文件，在浏览器中显示效果5、根据结果重新调整原代码6、重复步骤4，步骤 5实验二熟悉HTML 网页和各种标签【实验目的】熟悉HTML 的基本结构和常用标记，使用记事本编写网页文件。
【实验内容】建立一个简单的HTML 文件，并输入相应的内容，要求使用相应标签对网页内容进行排版。
进一步，向网页中加入图片，使用相应标签对网页进行美化。
网页美化中涉及到的标签包括：图像标签、超链接标签等。
【实验步骤】1、打开记事本程序，编写网页的基本结构2、对网页进行编辑，输入文本内容，并用相应的标签对文本内容进行排版设置3、将文件保存为*. Html4、用浏览器打开所保存的网页文件，在浏览器中显示效果5、根据结果重新调整原代码6、向网页中加入图片，利用相应标签对图片进行设置，达到美化网页效果7、重复步骤4，步骤 5实验三熟悉使用Dreamweaver 制作HTML 网页的方法【实验目的】熟悉使用Dreamweaver制作HTML 网页的方法【实验内容】使用Dreamweaver建立一个站点，然后建立简单的HTML 文件，并输入相应的内容，要求使用相应标签对网页内容进行排版，同时注意掌握Dreamweaver 的使用方法。
一、引言随着互联网技术的飞速发展，网页设计已成为当今社会最热门的行业之一。
为了提高自身技能，我参加了为期一个月的网页设计实训课程。
在此期间，我学习了大量的网页设计知识，现将实训过程中的知识点总结如下。
一、HTML基础知识1. HTML文档结构：了解HTML文档的基本结构，包括文档声明、头部、主体等部分。
2. 基本标签：掌握常用标签的语法和用法，如标题、段落、列表、链接、图片等。
3. 表单元素：了解表单元素的使用方法，如输入框、下拉菜单、单选框、复选框等。
4. HTML5新特性：学习HTML5新标签和特性，如canvas、video、audio等。
二、CSS样式设计1. CSS基础语法：掌握CSS的语法规则，包括选择器、属性、值等。
2. 布局技术：学习常用的布局技术，如浮动、定位、网格布局等。
3. 响应式设计：了解响应式设计的原理和实现方法，以适应不同设备。
4. 常用CSS框架：学习常用的CSS框架，如Bootstrap、Foundation等。
三、JavaScript编程1. 基本语法：掌握JavaScript的基本语法，包括变量、数据类型、运算符、函数等。
2. DOM操作：学习如何操作网页文档对象模型（DOM），如获取元素、修改属性、添加事件等。
3. 事件处理：了解事件处理机制，掌握常用事件，如鼠标事件、键盘事件等。
4. 常用库和框架：学习常用的JavaScript库和框架，如jQuery、Angular、React等。
四、网页设计工具1. Dreamweaver：掌握Dreamweaver的基本操作，如创建网站、编辑HTML、CSS、JavaScript等。
2. Photoshop：学习Photoshop的基本操作，如图像处理、切图、设计等。
3. Sublime Text：了解Sublime Text的编辑功能和快捷键。
4. Git：学习使用Git进行版本控制，提高代码管理能力。
五、网页设计规范1. 界面布局：了解网页界面布局的规范，如页面宽度、高度、间距等。
山东信息职业技术学院《网页设计》实验报告（2010—2011学年第二学期）班级：姓名：学号：指导老师：实验一认识Dreamweaver CS3一、实验目的1、熟悉Dreamweaver CS3环境。
2、了解HTML文件结构。
二、实验环境计算机三、实验内容创建站点有两种方式：使用向导有序地进行设置，或者通过在“管理站点”对话框中设置“高级”选项卡信息来创建。
无论哪种方式，都要事先在本地磁盘上建立一个用来存放站点的文件夹，这个文件夹就是本地站点的根目录。
下面介绍一下这两种方式的具体操作步骤。
1．使用向导建立站点使用向导建立站点的步骤如下：（1）打开建立站点向导的方法有3种。
①在进入Dreamweaver的起始页界面中选择“新建”→“Dreamweaver站点”命令，如图所示。
②选择“站点”菜单中的“新建站点”命令。
③选择“站点”菜单中的“管理站点”命令，打开如图所示的“管理站点”对话框，执行“新建”→“站点”命令。
起始页中新建站点“管理站点”对话框（2）打开“站点定义为”对话框，在“您打算为您的站点起什么名字”文本框中输入站点名字，如travel。
若已申请域名则可以在“您的站点的HTTP地址（URL）是什么”文本框中填入申请的域名地址。
如图所示。
设置站点名和URL地址（3）单击“下一步”按钮，询问是否使用服务器技术，如图所示。
若是静态站点则选中“否，我不想使用服务器技术”单选按钮，若是动态站点可以进一步设置使用哪一种服务器技术。
选择是否使用服务器技术（4）单击“下一步”按钮，在“您将把文件存储在计算机上的什么位置”文本框中直接输入站点根目录的路径，或者单击“浏览”按钮，选择文件夹目录。
（5）单击“下一步”按钮，在“您如何连接到远程服务器”下拉列表框中选择一种连接到远程服务器的方式，这里选择“无”选项。
（6）单击“下一步”按钮，将显示前几步设置的总结信息，若需修改可单击“上一步”按钮返回重新设置，若确定设置则单击“完成”按钮。
html网页设计实验报告
实验目的：
通过本次实验，掌握HTML基本标签的使用方法，并能够运用所学知识设计一个简单的网页。
实验步骤：
1. 下载安装HTML编辑器
2. 设计网页结构，包括标题、导航栏、内容区域等
3. 插入文字、图片、链接等元素
4. 优化网页排版和样式
实验成果：
经过不断的实验设计和排版调整，我完成了一个简单而实用的
网页设计。
整个网页结构明确、内容丰富，符合大众化的视觉风格，同时也充分体现了网页设计的个性和创新。
实验体会：
通过本次实验，我深刻认识到了HTML网页设计的重要性和实用性。
在今天的知识经济时代，网络已经成为我们的生活和工作
中不可或缺的一部分，而在网络世界中，如何利用网页设计和实
现信息传递和交流显得尤为重要。
所以，掌握HTML网页设计技
能不仅可以丰富我们的知识储备和实践能力，还可以为我们今后
的职业生涯打下坚实的基础。
总结：
通过本次实验，我对HTML网页设计技术的应用有了初步认识，也进一步了解到了HTML网页设计的一些基本知识和实用技巧。
我相信，在今后的学习和实践中，我会不断地扩展和深化我的HTML网页设计技术，为我今后的职业生涯发展打下坚实的基础。
第1章HTML基础HTML(超文本标记语言)是制作网页的基础。
HTML标记是HTML的核心与基础，用于修饰、设置HTML文件的内容及格式。
一个HTML文件中包含了所有将显示在网页上的文字信息。
其中也包括对浏览器的一些指示，如文字应放置在何处，显示模式如何等。
如果还有一些图片、动画、声音或是任何其他形式的资源，HTML文件也会告诉浏览器到哪里去查找它们，以及它们将放置在网页中的什么位置。
教学目标通过对本章的学习，读者应了解和掌握HTML的各种标记和语法，并能够使用HTML 设计简单的静态网页。
教学重点与难点●使用HTML设计静态网页●编辑网页文本格式●创建超链接●使用表格●使用列表1.1 网页基础知识Internet是从Interconnected Networks延伸而来的，是跨国界的网络。
Internet把世界各地数以千万计的计算机和传输线路连接在一起构成一个网络。
通过它可以交换信息、共享资源，并以此为基础实现各种计算机通信应用项目。
在Internet中，网页是它的重要组成部分，本节首先介绍一些与网页相关的名词和概念。
1.1.1 万维网——WWWWWW(World Wide Web)即环球信息网，也可以称为Web，中文名字为“万维网”。
用户在使用浏览器来访问Web的过程中，无须关心一些技术性的细节即可得到丰富的信息资料。
WWW 是Internet上发展最快和目前使用最广泛的一种服务。
ASP动态网站开发教程• 2 •简单的说，WWW是漫游Internet网的工具，它把Internet上不同地点的相关信息聚集起来，通过WWW浏览器(比如IE，Internet Explorer)检索，无论用户所需的信息在什么地方，只要浏览器为用户检索到之后，就可以将这些信息(文字、图片、动画、声音等)“提取”到用户的计算机屏幕上。
1.1.2 超文本传输协议——HTTPHTTP(HyperText Transfer Protocol)即超文本传输协议，它是WWW服务器上使用的最主要协议。
天津理工大学实验报告学院（系）名称：管理学院<a> 链接 <a href=""></a>其中 href:用来指定超链接目标。
name:书签名target：用来指定超链接的目标框架名。
表格：<table> 定义表格及边框<table border="1"></table><caption> 表的标题 <caption>标题</caption><tr> 行<tr></tr><th> 定义表格的表头 <th>表头</th><td> 定义表格单元<td>row 1, cell 1</td><thead> 定义页眉<thead></thead><tfoot> 定义页脚<tfoot></tfoot><tbody> 定义主体</tbody><tbody><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>HTML使用</title><style>h1{color: aqua;}</style><script>alert(123)</script><script src=""></script><!-- 引入外部js文件--><link rel="stylesheet" href=""><!-- 引入外部css文件--></head><body><h1>引入外部</h1><h2>引入外部</h2><h3>引入外部</h3><h4>引入外部</h4><h5>引入外部</h5><h6>引入外部</h6><b>加粗</b><i>斜体</i><u>下划线</u><br> <!-- 换行--><s>删除线</s><p>段落标签</p><hr> <!-- 水平分割线--><p>你真66 66</p>1 > 01 < 2你&我黄金¥46546吼吼吼©商标®<img src="dt.gif" alt=""></body></html><table border="5" > <!-- cellpadding="5" cellspacing="5"--> <thead><tr><th>name</th><th>age</th><th>hobby</th></tr></thead><tbody><tr><td>zhao</td><td>18</td><td>ri</td></tr><tr><td colspan="2">zhao</td><td rowspan="2">18</td><td>ri</td></tr><tr><td>zhao</td><td >18</td><td>ri</td></tr></tbody></table><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>注册页面</title></head><body><h1>注册页面</h1><form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data"><p><label for="i1">username:<input type="text" id="i1" name="username" placeholder="用户名"></label></p><p><label for="i2">password:</label><input type="password" id="i2" name="password"></p><p><label for="i3">birthday:</label><input type="date" id="i3" name="birthday"></p><p>gender:<input type="radio" name="gender" checked="checked" value="male"> 男<input type="radio" name="gender" value="female"> 女</p><p>hobby:<input type="checkbox" name="hobby" value="long" checked> long<input type="checkbox" name="hobby" value="she"> she<input type="checkbox" name="hobby" value="ma"> ma</p><!-- <p>--><!-- province:--><!-- <select name="" id="s1">--><!-- <option value="" selected>北京</option>--><!-- <option value="">上海</option>--><!-- </select>--><!-- </p>--><!-- <p>--><!-- book:--><!-- <select name="" id="s2" multiple>--><!-- <option value="" selected>字</option>--><!-- <option value="" selected>上</option>--><!-- <option value="">行</option>--><!-- </select>--><!-- </p>--><!-- <p>--><!-- area:--><!-- <select name="" id="s3">--><!-- <optgroup label="dsf">--><!-- <option value="">hdr</option>--> <!-- <option value="">hdr</option>--> <!-- <option value="">hdr</option>--> <!-- </optgroup>--><!-- <optgroup label="gse">--><!-- <option value="">grd</option>--> <!-- <option value="">grd</option>--> <!-- <option value="">grd</option>--> <!-- </optgroup>--><!-- <optgroup label="hrd">--><!-- <option value="">h_dr</option>--> <!-- <option value="">h_dr</option>--> <!-- <option value="">h_dr</option>--> <!-- </optgroup>--><!-- </select>--><!-- </p>--><p>选择文件:<input type="file" name="file"></p><!-- <p>--><!-- 自我介绍:--><!-- <textarea name="" id="" cols="30" rows="10"></textarea>--><!-- </p>--><p><input type="submit" value="注册"><input type="button" value="按钮"><input type="reset" value="重置"></p></form></body></html>CSS层叠样式表的用法：CSS：层叠样式表（ Cascading Style Sheets ，主要实现网页美化以及各种特效；CSS分为三种：一、行内样式（inline style）语法：<标签名 style="属性1：值1；属性2：值2；……属性n：值n">标签内容</标签名>行内样式仅作用于使用它的对应标签，虽其他标签没作用，行内样式的优先级最高；二、内部样式（inner style）——即在head标签里新增一个style子标签语法：<style type="text/css">--- 内部样式 ---</style>内部样式可以分为以下三种：2.1 HTML标签选择器语法：html 标签名 {属性1：值1；……属性n：值n；}2.2 class类选择器语法：.类名 {属性1：值1；……属性n：值n；}2.3 id选择器语法：#Id名 {属性1：值1；……属性n：值n；}使用Id选择器的语法类似： <h1 id="Id选择器名"></h1>2.4 内部样式三种选择器的优先级从高到低的顺序为：Id选择器 > class类选择器 > HTML标签选择器三、外部样式：CSS代码保存在扩展名为.css的样式表中，HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。
实验一简单个人HTML主页的设计一、实验目的1、学习利用记事本等简单编辑工具编制网页的方法2、掌握HTML标记的基本语法，并能熟练使用各标记编制网页二、实验要求1、完成实验内容中要求的所有处理操作。
2、了解网页设计的基本方法。
三、实验内容利用记事本使用HTML语言编制网页，第一个页面要求有文字、图片，并应用到表格、列表、链接等技术，第二个网页是编制一个表单页面，具体操作要求如下。
1）利用HTML标记编制网页，文件头部分要包含网页标题，文件主体要求设置背景图像或背景色。
这些是最基础的要求。
2）按自己设定的格式输入文本内容，注意换行和换段的方法。
3）插入图片：在适宜的位置处插入图片。
4）插入表格。
5）设置超链接。
6）编制表单页面。
四、参考代码index.html 参考代码如下。
<html ><head><title>HTML综合实验</title></head><body><div align="center"><table width="93%" height="69" border="1" cellspacing="0"><tr><td bgcolor="#FF6600"><div align="center"><font size="+5">欢迎光临######的个人求职网页</font></div></td></tr></table><table width="93%" height="58" border="1" cellspacing="0"><tr><td><div align="center"></div><div align="center"></div><div align="center">专业介绍</div><div align="center"></div></td><td><div align="center"><a href="qzjl.html">求职简历</a></div></td><td><div align="center">实践经历</div></td><td><div align="center">相关资料</div></td><td><div align="center">求职意向</div></td><td><div align="center"><a href="6.html">留言板</a></div></td></tr></table><br /><br /><br /><table width="93%" height="501" border="1" cellpadding="1" cellspacing="1"><tr><td width="51%" height="108"><div align="center"><br /><font size="5"> <font color="#000099"> 网络安全方向</font><br /></font><br /><br /></div></td><td width="49%"><div align="center"><br /><br /><font size="5" color="#000099"> 计算机科学与技术专业</font><br /><br /><br /><br /></div></td></tr><tr><td height="78"><br /> 本专业</td><td><br /> 本专业</td></tr><tr><td height="113"><div align="left"> 网络安全</div></td> <td><p align="left"><br /> 软件开发</p></td></tr><tr><td height="124"><div align="center"><font color="#FF0000">适应的工作部门和项目</font><br /><div align="left">(1)<br />(2)<br />(3)</div></div></td><td><div align="center"><br /><font color="#FF0000">适应的工作部门和项目</font><br /><div align="left">(1)<br />(2)<br />(3)<br />(4)<br />(5)</div></div></td> </tr></table></body></html>qzjl.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”，“我的母校”图片边接到“”，“与我联系”图片超链接到“mailto:sunwukong@”。
⑧将网页保存到网站的根目录（d:\myweb）中，文件名为index.htm。
四、实习结果
1.网页zizhuan.html截图如下：
2.网页xiangce.html截图如下：
3.网页index.html截图如下：
五、课后练习
1. 如何管理网站文件？
答：首先应该建立网站的根目录，将网页文件及其他资源分门别类的保存在相应的文件夹中以方便管理和维护，网页间通过链接组织在一起。
2. 如何规划和设计个人主页？
答：首先应确定个人主页的主题，并根据主题设计布局、框架、颜色搭配等，应该做到层次分明，表达信息明确，有适当的图片，能够吸引人的注意力。
六、实习总结及存在问题
第一次实习，总体觉得网页设计相比于编程语言来说，比较简单。
但是各种各样的标记让我很头疼，总是忘记写结束标记。
主要存在的问题有以下几点：
1.表格的行高不会调，插入图片以后，调整很困难。
2.给一个图片或文字设置超链接后，不会去掉字体下划线，或图片的外框。
3.若插入图片用的是绝对路径，文件夹移动会出现错误。
