实验2-HTML与静态网页.doc

实验2 HTML与静态网页 作者： 日期：2 个人收集整理 勿做商业用途。实验3-1 站点首页的设计【实验目的】1、了解HTML各种标记语言的作用，以及如何制作一个静态网页2、掌握常用网页制作软件(如Dreamwaver8.0）的使用【实验条件】个人计算机一台，预装Windows 2000或Windows XP 操作系统，和Dreamwaver8。0软件。【实验说明】在网页示例中,表格t1为网页的头部，放置公司的logo,公司名称，和一些图片等等；t2中的内容为网页的主要内容；t3是网页的尾部，通常显示一些相同的网站版权、经营许可证及网站联系人等信息.推荐学时： 1学时【实验内容与步骤】步骤一：分析该公司网站首页，并对其进行设计.以下图中的网页为例图31 需要制作的网页表t1,t2和t3纵向排列,并在网页中居中显示，其结构如图所示。其中，t2第一行包含表t21,第二行第一列包含表t22，第二列包含表t23,表t21，t22和t23结构如图所示。步骤二：使用Dreamweaver来进行网页制作。1、使用Dreamweaver新建网页后，在设计页面插入表格t1。具体表格的单元格大小见代码.其内容如下： 背景图片插入图片插入图片背景图片，并输入公司名称居中显示插入图片2、插入表格t2，具体表格的单元格大小见代码。对整个t2设置背景图片，其它内容如下: 团队精神团队介绍公司目标发展方向 插入一条水平线，顶部显示 背景图片，显示“首页”背景图片，显示“公司简介”背景图片，显示“产品介绍”背景图片，显示“技术支持” 主要内容 3、插入t3,具体表格的单元格大小见代码。对整个t3设置背景颜色，其它内容如下： 插入一条水平线输入版权等信息 步骤三：保存网页并运行.参照网页代码如下：!DOCTYPE html PUBLIC /W3C/DTD XHTML 1。0 Transitional/EN” ”http：/www。w3。org/TR/xhtml1/DTD/xhtml1transitional。dtdhtml xmlns=http：/www.w3.org/1999/xhtml”head公司首页/titlestyle type=text/css!-.STYLE1 color： FFFFFF; fontsize： 18pt； fontfamily: 宋体”； font-weight: bold；.STYLE2 fontsize： 16px； color: #FF0000; fontweight： bold; font-family: 宋体；.STYLE3 fontsize： 18px;body backgroundcolor: #000033;。STYLE4 font-size: 18px； color： 000000; -/style/head body leftmargin=0” topmargin=0” marginwidth=0 marginheight=”0 table width=”778 border=0 align=”center” cellpadding=0” cellspacing=0” th rowspan=3 background=01.GIF scope=”colimg src=index_pic。gif width=160 height=”208 /th th scope=col”img src=”index_top1。gif width=618” height=”60” / /tr tr p align=center class=STYLE1您的公司名称 /td /tr img src=index_top3.gif” width=618 height=68” / table width=778 border=”0 align=”center cellpadding=”0” cellspacing=”0” background=INDEX_BG.GIF” tr td height=60” colspan=3”table width=”778” border=0” cellspacing=”0 cellpadding=”0 tr th width=”210” height=20 scope=”colnbsp; ；/th &nbsp；/td 团队介绍/td td width=”80 class=STYLE2”公司目标 tr td height=”20” ； hr align=”left width=80% /td /table/td /tr tr td width=”210” height=”240 valign=toptable width=”180 border=”0 cellspacing=”0 cellpadding=0 th height=46 background=INDEX_LM。GIF class=”STYLE2 scope=”row首页 /tr th height=”46 background=”INDEX_LM.GIF” class=STYLE2 scope=”row”公司简介/th th height=46” background=INDEX_LM。GIF class=”STYLE2 scope=”row产品介绍/th tr th height=”46” background=INDEX_LM。GIF class=STYLE2” scope=row技术支持 /table/td td width=”568 valign=top” th height=30” colspan=”2 scope=row”nbsp； /tr tr th width=80 height=180 align=left valign=top scope=row”p class=STYLE3”在这里你可以看到您的公司的名称,描述，栏目的名称等等，一切你输入的东西都可以在这里显示出来./p p class=”STYLE3”如果你觉得这个页面效果不理想，你也可以变换页面栏目的排版设置，页面的颜色，直至更换成你喜欢的模板。/p/th th scope=row”nbsp； tr th height=”30 colspan=”2” scope=”row” /th /tr /td /tr tr /tr tr 版权所有br / 公司地址br / 电话/span /tr【相关知识】 常见的HTML标记及其的作用如下： 标 记含 义作 用HTML文件声明让浏览器知道这是HTML文件HEAD开头提供文件整体信息TITLE标题定义文件标题，显示在浏览器标题栏正文设计文件格式及内文!-注释-说明为文件加上说明,不在浏览器中显示P段落为字、图像、表格等之间留一行空白换行让字、图像、表格更显示于下一行水平线插入一条水平线CENTER居中让字、图像、表格显示在中间DIV层设定字、图像、表格等的摆放位置NOBR不折行让文字不因为太长而换行粗体标记产生字体加粗显示的效果EM强调字体出现斜体效果I斜体字体出现斜体效果U加上底线加上底线H1一级标题变粗变大加宽，程度与级数成反比H2二级标题将字体变粗变大加宽H3三级标题将字体变粗变大加宽H4四级标题将字体变粗变大加宽五级标题将字体变粗变大加宽H6六级标题将字体变粗变大加宽文字格式设置字体、大小、颜色等锚点设置链接meta 设置语言字符集（Charsets)的信息 Table标记有定义表格，tr定义表行，td定义表元，定义表头.常用的Table标记属性及其作用如下： 标记属性描 述align设置或者获取表格排列background设置或获取表格中文本和图像平铺的背景图片bgcolor设置或者获取表格背景颜色border设置或者获取表格边框的宽度cellpadding设置或获取单元格边框与单元格内容之间的空间总量cellspacing设置或获取各单元格之间的空间总量height设置或获取表格的整体高度 style设置表格内置样式width设置或者获取表格宽度 表单form的常用属性及作用如下： 标记属性描 述action设置或获取表单内容要发送处理的URLmethod设置或获取如何将表单数据发送到服务器，即采用哪种HTTP方式name设置或获取表单名称 13