第5章 网页制作基础2wppt课件.pptVIP

《大学计算机信息科技教程（第二版）》——第5章 网页制作基础 第5章 网页制作基础 主要内容 概述 设计站点 编辑网页 页面布局 建立超链接 使用CSS样式 层、行为和时间轴 模板 管理和发布站点 5.1 概述 站点 具有相关主题的网页有机地整合在一起，集中进行管理，构成一个整体，这就是站点。 超文本标记语言HTML 站点中的每个网页的内容都要使用一种标准的语言来描述，这就是超文本标记语言HTML。 常用的网页制作软件 Microsoft Office中的FrontPage Macromedia公司的Dreamweaver 5.1 概述 Dreamweaver概述 HTML简介 5.1.1 Dreamweaver简述 Macromedia Dreamweaver 8 是美国Macromedia公司开发的一种集网页制作和网站管理于一体的网页制作软件，它具有一套针对专业网页设计师使用的视觉化网页开发工具，利用它可以轻而易举地制作出充满动感的网页，它是网页设计者的首选工具。 5.1.1 Dreamweaver简述 启动 选择“开始”/“所有程序”/“Micromedia”/“Micromedia Dreamweaver 8”选项， Dreamweaver有两种工作区布局模式：设计器和编码器。第一次运行Dreamweaver 8时会显示 “工作区设置”对话框，以供选择所喜欢的工作区布局。 5.1.1 Dreamweaver简述 启动Dreamweaver后，显示起始页。在起始页中可以打开最近使用过的网页，快速地创建新的网页。 5.1.1 Dreamweaver简述 打开或者创建网页后的操作界面 5.1.2 HTML简介 HTML是HyperText Mackup Language的缩写，称为超文本标记语言，它是一种用于制作超文本文档的简单标记语言。它只是提供一些语法标记给浏览器，由浏览器解释生成相应的页面。 超文本标记语言HTML由一些格式标签和资源引用构成，通过标签来设置引用内容的格式。标签分头标签和尾标签，用“”和“”括起来，与被标注的内容区分开来。 5.1.2 HTML简介 html和/html标签标志了文件的开始和结束。文件的html…/html段被分成两部分： 第一部分叫作头部，以head和/head标签标志开始和结束； 第二部分是文件体，它包含对浏览器中显示的内容的具体描述，以body和/body标签标志开始和结束。 在头部中，title和/title标签用于定义网页的标题。 在文件体中，p和/p标签用于标志一个段落，在这对标签之间加入的文本将显示在浏览器中；font和/font标签用于控制文本的字体、大小、颜色等；div和/div标签用于排版段落的格式；img标签用于插入图片，它没有结束标签，通常后面带有属性，表示图片文件的存储路径、对齐、以及大小。 5.1.2 HTML简介 5.2 设计站点 网站设计 定义本地站点 管理站点资源 打开、保存和预览网页 5.2.1 网站设计 每个网页在服务器上都是以文件形式存放的，通常在服务器上有多个主题相关的网页，这些网页按一定的组织结构、以超链接方式连接在一起，形成一个整体，这就是网站。 在每个网站中存放着一个被称为主页的网页文件，它是获取该网站的信息的起点。主页中含有一些超链接，指向相关信息的网页或其它网站的主页。通常，用户在浏览器窗口中输入网址后，显示出的就是该网址对应服务器中的网站的主页。 要建立一个网站，一般首先在本地硬盘中建立一个本地站点，即存放网站的所有文档的文件夹。待网页设计和测试好以后，再把这些文档复制到服务器中，供浏览者浏览。 5.2.1 网站设计 设计网站的基本步骤 对站点进行规划。 确定站点的主题和风格，明确建立站点的目的。 根据确立的主题，收集一些素材。 明确将站点中各部分的内容，规划出几个次要的网页主题，根据各个次要的主题将素材进行分类，规划出合理的站点结构。 5.2.1 网站设计 创建站点的基本结构。 在本地站点中建立若干个文件夹，用于存放各类文档，必要时还可以建立子文件夹。 创建和编辑网页。 将本地站点的所有文档发布到服务器。 5.2.2 定义本地站点 启动Dreamweaver后，选择“站点”/“新建站点”命令或单击起始页上的 选项，出现“站点定义”对话框后，选择“基本”选项卡，然后进行以下操作： “编辑文件”界面的文本框中输入站点名称（如“旅游天地”）和URL（若暂时没有，可以忽略），单击“下一步”按钮。 进入“编辑文件 第2部分”界面，确定是否要使用服务器技术。若要制作设计ASP、ASP.NET、JSP技术的动态网页，则需选择使用