,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,*,第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、网页的浏览及修改,课堂练习,1、按站点的要求建立文件夹，根文件夹取名“学号”,2、制作主页，主页取名index.html,内容为作业目录。,3、制作一个对学院进行简介的网页,4、建立相应的链接,