实验2-HTML与静态网页.doc
实验2-HTML与静态网页.doc
- 配套讲稿：
如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制：
部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词：
- 实验 HTML 静态 网页
- 资源描述：
-
实验2 HTML与静态网页 ———————————————————————————————— 作者： ———————————————————————————————— 日期： 2 个人收集整理 勿做商业用途 。实验3-1 站点首页的设计 【实验目的】 1、了解HTML各种标记语言的作用，以及如何制作一个静态网页 2、掌握常用网页制作软件(如Dreamwaver8.0）的使用 【实验条件】 个人计算机一台，预装Windows 2000或Windows XP 操作系统，和Dreamwaver8。0软件。 【实验说明】 在网页示例中,表格t1为网页的头部，放置公司的logo,公司名称，和一些图片等等；t2中的内容为网页的主要内容；t3是网页的尾部，通常显示一些相同的网站版权、经营许可证及网站联系人等信息. 推荐学时： 1学时 【实验内容与步骤】 步骤一：分析该公司网站首页，并对其进行设计.以下图中的网页为例 图3—1 需要制作的网页 表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/xhtml1—transitional。dtd"〉 <html xmlns="http：//www.w3.org/1999/xhtml”〉 <head〉 <meta http—equiv=”Content—Type" content="text/html； charset=gb2312” /> <title>公司首页〈/title> 〈style type="text/css"> 〈!-— .STYLE1 ｛ color： ＃FFFFFF; font—size： 18pt； font—family: "宋体”； font-weight: bold； ｝ .STYLE2 ｛ font—size： 16px； color: #FF0000; font—weight： bold; font-family: "宋体"； } .STYLE3 ｛ font—size： 18px; ｝ body { background—color: #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”〉 <tr> 〈th rowspan="3" background="01.GIF" scope=”col">〈img src="index_pic。gif" width="160" height=”208" /〉〈/th> <th scope="col”〉<img src=”index_top1。gif" width="618” height=”60” /〉</th> 〈/tr〉 <tr〉 <td width=”618” height="80” valign="middle" background="index_top2.gif">〈p align="center" class="STYLE1"〉您的公司名称</p> 〈/td> 〈/tr〉 <tr〉 〈td>〈img src="index_top3.gif” width="618" height="68” /></td> </tr> </table> <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=”col"〉＆nbsp;</th〉 〈th colspan=”4” scope="col"> ；〈/th> </tr> <tr〉 〈td height="20"> ；〈/td〉 <td width="80” class=”STYLE2”〉团队精神〈/td> <td width=”80" class="STYLE2”>团队介绍〈/td> 〈td width=”80" class="STYLE2”>公司目标</td> <td class=”STYLE2"〉发展方向〈/td> </tr> <tr〉 〈td height=”20”〉 ；</td> <td colspan="4" valign="top"><hr align=”left" width="80%" /〉</td〉 </tr> 〈/table>〈/td> 〈/tr〉 〈tr> 〈td width=”210” height=”240" valign="top"〉〈table width=”180" border=”0" cellspacing=”0" cellpadding="0"> <tr> <th height="46" background="INDEX_LM。GIF" class=”STYLE2" scope=”row"〉首页</th> </tr〉 <tr> 〈th height=”46" background=”INDEX_LM.GIF” class="STYLE2" scope=”row”>公司简介〈/th> </tr〉 〈tr> <th height="46” background="INDEX_LM。GIF" class=”STYLE2" scope=”row"〉产品介绍</th〉 </tr> 〈tr〉 〈th height=”46” background="INDEX_LM。GIF" class="STYLE2” scope="row"〉技术支持</th〉 〈/tr> </table〉〈/td〉 〈td width=”568" valign="top”〉<table width="568" border="0" cellspacing=”0" cellpadding=”0"〉 〈tr> 〈th height="30” colspan=”2" scope="row”〉＆nbsp；</th> 〈/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；</th> </tr> 〈tr〉 〈th height=”30" colspan=”2” scope=”row”〉 〈/th〉 〈/tr〉 </table></td〉 </tr〉 </table〉 〈table width="778” border="0” align="center” cellpadding=”0” cellspacing=”0” bgcolor=”#CCCCCC”> <tr〉 <th scope=”row"〉〈hr size="3" color=”#FFFFFF" /〉〈/th> 〈/tr> <tr〉 <th scope=”row"〉〈span class="STYLE4">版权所有〈br /> 公司地址〈br /〉 电话〈/span></th> </tr〉 </table> </body〉 〈/html> 【相关知识】 常见的HTML标记及其的作用如下： 标 记 含 义 作 用 〈HTML〉 文件声明 让浏览器知道这是HTML文件 〈HEAD> 开头 提供文件整体信息 〈TITLE> 标题 定义文件标题，显示在浏览器标题栏 <BODY> 正文 设计文件格式及内文 〈!-—注释--> 说明 为文件加上说明,不在浏览器中显示 〈P〉 段落 为字、图像、表格等之间留一行空白 <BR> 换行 让字、图像、表格更显示于下一行 <HR> 水平线 插入一条水平线 <CENTER〉 居中 让字、图像、表格显示在中间 <DIV〉 层 设定字、图像、表格等的摆放位置 <NOBR〉 不折行 让文字不因为太长而换行 <B> 粗体标记 产生字体加粗显示的效果 〈EM> 强调 字体出现斜体效果 〈I〉 斜体 字体出现斜体效果 <U〉 加上底线 加上底线 〈H1〉 一级标题 变粗变大加宽，程度与级数成反比 〈H2〉 二级标题 将字体变粗变大加宽 〈H3〉 三级标题 将字体变粗变大加宽 〈H4〉 四级标题 将字体变粗变大加宽 <H5> 五级标题 将字体变粗变大加宽 〈H6〉 六级标题 将字体变粗变大加宽 <FONT> 文字格式 设置字体、大小、颜色等 <a> 锚点 设置链接 〈meta> 设置语言字符集（Charsets)的信息 Table标记有<table>定义表格，〈tr〉定义表行，〈td>定义表元，<th>定义表头.常用的Table标记属性及其作用如下： 标记属性 描 述 align 设置或者获取表格排列 background 设置或获取表格中文本和图像平铺的背景图片 bgcolor 设置或者获取表格背景颜色 border 设置或者获取表格边框的宽度 cellpadding 设置或获取单元格边框与单元格内容之间的空间总量 cellspacing 设置或获取各单元格之间的空间总量 height 设置或获取表格的整体高度 style 设置表格内置样式 width 设置或者获取表格宽度 表单form的常用属性及作用如下： 标记属性 描 述 action 设置或获取表单内容要发送处理的URL method 设置或获取如何将表单数据发送到服务器，即采用哪种HTTP方式 name 设置或获取表单名称 13展开阅读全文
咨信网温馨提示：1、咨信平台为文档C2C交易模式，即用户上传的文档直接被用户下载，收益归上传人（含作者）所有；本站仅是提供信息存储空间和展示预览，仅对用户上传内容的表现方式做保护处理，对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿，我们不确定上传用户享有完全著作权，根据《信息网络传播权保护条例》，如果侵犯了您的版权、权益或隐私，请联系我们，核实后会尽快下架及时删除，并可随时和客服了解处理情况，尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确)，网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据，个别因单元格分列造成显示页码不一将协商解决，平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺，下载前须认真查看，确认无误后再购买，务必慎重购买；若有违法违纪将进行移交司法处理，若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传，付费前请自行鉴别，如您付费，意味着您已接受本站规则且自行承担风险，本站不进行额外附加服务，虚拟产品一经售出概不退款（未进行购买下载可退充值款），文档一经付费（服务费）、不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印，是因预览和防盗链等技术需要对页面进行转换压缩成图而已，我们并不对上传的文档进行任何编辑或修改，文档下载后都不会有水印标识（原文档上传前个别存留的除外），下载后原文更清晰；试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓；PPT和DOC文档可被视为“模板”，允许上传人保留章节、目录结构的情况下删减部份的内容；PDF文档不管是原文档转换或图片扫描而得，本站不作要求视为允许，下载前可先查看【教您几个在下载文档中可以更好的避免被坑】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用；网站提供的党政主题相关内容(国旗、国徽、党徽－－等)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
6、文档遇到问题，请及时联系平台进行协调解决，联系【微信客服】、【QQ客服】，若有其他问题请点击或扫码反馈【服务填表】；文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“【版权申诉】”，意见反馈和侵权处理邮箱：1219186828@qq.com；也可以拔打客服电话：0574-28810668；投诉电话：18658249818。
实名认证
平台协调中心【客服】
自信AI助手![2016年甘肃省证券从业资格《证券市场》：基金的费用考试题[10页].docx](/Images/s.gif)
微信客服
客服QQ
发送邮件
意见反馈
链接地址：https://www.zixin.com.cn/doc/2641261.html