网页的创建及基本.ppt

第2讲 网页的创建及基本结构,第2讲 网页的创建及基本结构,【知识学习目标】 了解和掌握HTML文档的基本结构、标记格式，为网页设计打下良好的基础。 【能力训练目标】 组织个人网站的结构，能手工编写和修改最常用的HTML文档。 【重点与难点】 重点：html文档的基本结构,第2讲 网页的创建及基本结构,2.1 HTML的基本结构 2.2 网页的创建,一个HTML的例子, 厦门大学嘉庚学院简介 厦门大学嘉庚学院简介 厦门大学嘉庚学院地处风景优美的漳州市龙海区，与厦门一海之隔。设有商学院、人文学院、建筑学院等3个分院，共有全日制在校生15000余人，师资力量雄厚。 ,2.1 HTML的基本结构,2.1.1 标记及基本属性 1、标记 HTML文件由标记和被标记的内容组成。 标记一般为英文单词或缩写。 如：P、IMG、HR等 可分为两类： 一类：空标记，表示一个功能，单个出现。 如：hr划横线 br换行 二类：围堵标记，表示一个内容的范围及特性控制，成对出现 如： 荆门职业技术学院简介 一般格式为： 受标记影响的内容,2.1 HTML的基本结构,使用标记注意事项： 1每个标记必须使用包住，以示区别； 2表示作用范围结束； 3标记大小写均可； 4多个标记可作用同一个范围，但一般要全包，顺序任意。 2、标记的属性 对标记内容特性的控制。 一个标记通常有多个属性，以达到预期的效果。 如： 机信分院、化工分院、医学分院、人文分院 注意：1不是所有标记均有属性； 2可同时使用部分或全部，顺序不限。,2.1 HTML的基本结构,2.1.2 html文件基本结构 文件的内容； 对文件的格式、特性进行表述的标记。 基本结构如下： 网页标题 ,2.1 HTML的基本结构,2.1.3 文件结构的格式标记 1、标记 功能：HTML文件的标志性标记，告知浏览器按HTML的标准解释后面的文件，直至遇到结束标记 为止。 格式： 代码清单的第行 文件的全部内容 文件清单的最后一行,2.1 HTML的基本结构,、 功能：网页头部的标记，包含网页相关信息，定义的样式、使用的脚本等，除包含的内容显示在网页中外，其他的不显示在网页中。 格式： 厦门大学嘉庚学院欢迎您 ,2.1 HTML的基本结构,3、 功能：各网页命名，并显示在浏览器的标题栏上。 如果没有标题，则显示文档的路径及文件名。 格式：网页名称，包含在与之间。 例： 厦门大学嘉庚学院欢迎您 ,2.1 HTML的基本结构,4、 功能：标记网页中的主体内容。包含在与之内。所带属性为整个网页的属性。 格式： ,2.2 网页的创建,2.2.1、编辑和保存网页 编辑：任何一个文本编辑器均可编辑，最简单的是“记事本”。按网页结构编写组织即可。 保存：另存为，文件类型选所有文件格式，取名时注意加扩展名htm或html。 2.2.2、站点的组织,2.2 网页的创建,2.2.3、预览网页 1、在IE浏览器中打开 2、双击html文档 3、修改网页 a.退出浏览器，用记事本修改、保存、查看 b.在IE浏览器中用“查看”菜单中的“源文件” 查看、修改、保存、刷新。 2.2.4、发布网页 1、申请免费的个人空间和邮箱； 2、站点格式组织网页 3、通过ftp 程序（cuteFTP)上传站点所有网页。,认识Dreamweaver 8 的界面,插入栏 文档工具栏 浮动面板组 “属性”面板 扩展按钮 状态栏,创建、保存与打开、预览网页,创建网页 保存网页 打开已有网页 预览网页效果,创建和管理站点,创建站点 管理站点 编辑站点,发布站点,站点的本地测试 测试兼容性 测试链接 设置下载速度 申请主页空间及域名 发布站点 管理站点 站点宣传,设置页面属性,打开“页面属性”对话框 设置外观属性 设置链接属性 标题属性 标题/编码 设置跟踪图像,小结,1、HTML标记格式及作用 2、html文档的结构及各部分的作用 3、站点的结构 4、网页的浏览及修改,课堂练