《【教学课件】第5章网页制作基础.ppt》由会员分享，可在线阅读，更多相关《【教学课件】第5章网页制作基础.ppt（32页珍藏版）》请在三一办公上搜索。
1、第5章 网页制作基础,大学计算机信息科技教程（第二版）第5章 网页制作基础,2,主要内容,概述设计站点编辑网页页面布局建立超链接使用CSS样式层、行为和时间轴模板管理和发布站点,大学计算机信息科技教程（第二版）第5章 网页制作基础,3,5.1 概述,站点 具有相关主题的网页有机地整合在一起，集中进行管理，构成一个整体，这就是站点。超文本标记语言HTML 站点中的每个网页的内容都要使用一种标准的语言来描述，这就是超文本标记语言HTML。常用的网页制作软件 Microsoft Office中的FrontPageMacromedia公司的Dreamweaver,大学计算机信息科技教程（第二版）第5章
2、 网页制作基础,4,5.1 概述,Dreamweaver概述HTML简介,大学计算机信息科技教程（第二版）第5章 网页制作基础,5,5.1.1 Dreamweaver简述,Macromedia Dreamweaver 8 美国Micromedia公司开发集网页制作和网站管理于一体,大学计算机信息科技教程（第二版）第5章 网页制作基础,6,5.1.1 Dreamweaver简述,启动选择“开始”/“所有程序”/“Micromedia”/“Micromedia Dreamweaver 8”选项，Dreamweaver有两种工作区布局模式：设计器和编码器第一次运行显示,大学计算机信息科技教程（第二版
3、）第5章 网页制作基础,7,5.1.1 Dreamweaver简述,启动Dreamweaver后，显示起始页。在起始页中可以打开最近使用过的网页，快速地创建新的网页。,大学计算机信息科技教程（第二版）第5章 网页制作基础,8,5.1.1 Dreamweaver简述,打开或者创建网页后的操作界面,“插入”工具栏,“标准”工具栏,“文档”工具栏,文档窗口,面板组,属性检查器,通过菜单 查看工具栏XXX 来显示或隐藏某个工具栏，通过菜单 窗口XXX 来显示或隐藏某个面板组或属性面板。,大学计算机信息科技教程（第二版）第5章 网页制作基础,9,5.1.2 HTML简介,HTML(HyperText M
4、ackup Language 超文本 标记 语言)制作超文本文档的简单标记语言只是提供一些语法标记给浏览器，由浏览器解释生成相应的页面。由格式标签和资源引用构成。标签来设置引用内容的格式，标签分头标签和尾标签，用“”括起来，与被标注的内容区分开来。,大学计算机信息科技教程（第二版）第5章 网页制作基础,10,5.1.2 HTML简介,网页标题,段落,图片,Rwjgxltj.html,大学计算机信息科技教程（第二版）第5章 网页制作基础,11,5.1.2 HTML简介,和标签标志了文件的开始和结束，分成两部分：第一部分叫作头部以和标签标志开始和结束其中和标签用于定义网页的标题第二部分是文件体以和
5、标签标志开始和结束包含对浏览器中显示的内容的具体描述和标签标志一个段落，之间的文本将显示在浏览器中；和标签控制文本的字体、大小、颜色等；和标签用于排版段落的格式；标签用于插入图片，没有结束标签，通常后面带有属性，表示图片文件的存储路径、对齐、以及大小。,大学计算机信息科技教程（第二版）第5章 网页制作基础,12,.和和,.,大学计算机信息科技教程（第二版）第5章 网页制作基础,13,5.2 设计站点,网站设计定义本地站点管理站点资源（使用文件面板）新建（快捷菜单：新建文件、新建文件夹）移动、复制（拖曳、Ctrl拖曳）删除、重命名（Del、两次单击）导入（复制/粘贴）打开、保存和预览网页打开（文
6、件面板：双击文件）保存（标准工具栏：保存按钮、全部保存按钮）预览（标准工具栏：在浏览器中预览按钮）,大学计算机信息科技教程（第二版）第5章 网页制作基础,14,5.2.1 网站设计,网站：多个主题相关的网页按一定的组织结构、以超链接方式连接在一起，形成一个整体。网站主页：获取网站的信息的起点。建立网站：在本地硬盘建立一个本地站点（存放网站的所有文档的文件夹）网页设计、制作网页文档复制到服务器中,大学计算机信息科技教程（第二版）第5章 网页制作基础,15,5.2.1 网站设计,设计网站的基本步骤 对站点进行规划。确定站点的主题和风格，明确建立站点的目的。收集素材。合理规划站点结构。,例如：旅游天
7、地,大学计算机信息科技教程（第二版）第5章 网页制作基础,16,5.2.1 网站设计,创建站点的基本结构。在本地站点中建立若干个文件夹，用于存放各类文档，必要时还可以建立子文件夹。创建和编辑网页。将本地站点的所有文档发布到服务器。,大学计算机信息科技教程（第二版）第5章 网页制作基础,17,5.2.2 定义本地站点,新建站点“站点”/“新建站点”,大学计算机信息科技教程（第二版）第5章 网页制作基础,18,单击开始演示,新建站点,大学计算机信息科技教程（第二版）第5章 网页制作基础,19,5.2.2 定义本地站点,修改站点的设置信息,大学计算机信息科技教程（第二版）第5章 网页制作基础,20,
8、5.2.2 定义本地站点,打开站点选定站点，单击“完成”按钮,同一时刻只能打开一个站点,大学计算机信息科技教程（第二版）第5章 网页制作基础,21,单击,5.2.2 定义本地站点,建立多个站点“新建”按钮：再建立另一个站点复制站点“复制”按钮：建立一个与选定站点相同的站点删除站点“删除”按钮：删除选定站点导出、导入站点选中站点，单击“导出”按钮，将站点导出为包含站点设置的 XML 文件，其文件扩展名为.ste。以后单击“导入”按钮，可以导入该文件，并成为站点（注意选择站点根文件夹）。,将导出的.ste文件和站点的根文件夹一起复制到另一台电脑上,根文件夹,大学计算机信息科技教程（第二版）第5章
9、网页制作基础,22,单击,5.2.3 管理站点资源,定义了本地站点后，在本地计算机中建立了一个用于存放站点中的文档的文件夹。初始状态下，该文件夹是一个空文件夹，在此文件夹中可以进行新建文件夹、新建文件、复制文件、移动文件、删除文件、重命名文件等操作。,右击,大学计算机信息科技教程（第二版）第5章 网页制作基础,23,5.2.3 管理站点资源,新建文件夹 右单击“文件”面板中要新建文件夹的位置（如：站点名称或子文件夹名），在弹出的快捷菜单中选择“新建文件夹”命令，建立一个以“untitled”为默认名称的文件夹，此时输入新建文件夹的名称（如：Picture），然后按Enter键即可。,快捷菜单：
10、新建文件夹Contents：网页Picture:图片Css：样式Templates：模板,大学计算机信息科技教程（第二版）第5章 网页制作基础,24,5.2.3 管理站点资源,新建文件“文件”/“新建”命令，选择文件类别和类型（如：基本页），单击“创建”按钮。单击起始页的“从范例创建”栏中列出的选项。单击起始页的“创建新项目”栏中的选项。“文件”面板，快捷菜单“新建文件”命令，输入文件名；双击打开新建的文件。,快捷菜单：新建文件输入文件名：如Index.html双击打开该文件,返回,大学计算机信息科技教程（第二版）第5章 网页制作基础,25,5.2.3 管理站点资源,移动、复制文件和文件夹 选
11、定拖放将出现“更新文件”对话框，提示是否要更新其他文件中有指向被移动的文件的超链接。,拖曳,大学计算机信息科技教程（第二版）第5章 网页制作基础,26,5.2.3 管理站点资源,复制文件，选定按住Ctrl键同时拖放,返回,大学计算机信息科技教程（第二版）第5章 网页制作基础,27,5.2.3 管理站点资源,删除、重命名文件和文件夹 选定按Delete键选定再次单击,返回,大学计算机信息科技教程（第二版）第5章 网页制作基础,28,5.2.3 管理站点资源,导入文件和文件夹,大学计算机信息科技教程（第二版）第5章 网页制作基础,29,5.2.4 打开、保存和预览网页,打开网页文档“文件”/“打开”“文件”/“打开最近的文件”起始页中列出的最近打开的文件名；单击起始页中“打开”选项，在出现的“打开”对话框选择文件；在“文件”面板中双击文件名。,本站点文件面板中双击文件名,返回,大学计算机信息科技教程（第二版）第5章 网页制作基础,30,5.2.4 打开、保存和预览网页,保存网页文档,标准工具栏,返回,大学计算机信息科技教程（第二版）第5章 网页制作基础,31,5.2.4 打开、保存和预览网页,预览网页,作业,参见elearning网站,大学计算机信息科技教程（第二版）第5章 网页制作基础,32,
