第5章 页制作基础.ppt

《第5章 页制作基础.ppt》由会员分享，可在线阅读，更多相关《第5章 页制作基础.ppt（32页珍藏版）》请在麦多课文档分享上搜索。

1、第5章 网页制作基础,大学计算机信息科技教程（第二版）第5章 网页制作基础,2,主要内容,概述 设计站点 编辑网页 页面布局 建立超链接 使用CSS样式 层、行为和时间轴 模板 管理和发布站点,大学计算机信息科技教程（第二版）第5章 网页制作基础,3,5.1 概述,站点具有相关主题的网页有机地整合在一起，集中进行管理，构成一个整体，这就是站点。 超文本标记语言HTML站点中的每个网页的内容都要使用一种标准的语言来描述，这就是超文本标记语言HTML。 常用的网页制作软件 Microsoft Office中的FrontPage Macromedia公司的Dreamweaver,大学计算机信息科技教

2、程（第二版）第5章 网页制作基础,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简介,

4、HTML(HyperText Mackup Language超文本 标记 语言) 制作超文本文档的简单标记语言 只是提供一些语法标记给浏览器，由浏览器解释生成相应的页面。 由格式标签和资源引用构成。 标签来设置引用内容的格式，标签分头标签和尾标签，用“”括起来，与被标注的内容区分开来。,大学计算机信息科技教程（第二版）第5章 网页制作基础,10,5.1.2 HTML简介,网页标题,段落,图片,Rwjgxltj.html,大学计算机信息科技教程（第二版）第5章 网页制作基础,11,5.1.2 HTML简介,和标签标志了文件的开始和结束， 分成两部分： 第一部分叫作头部 以和标签标志开始和结束 其

5、中和标签用于定义网页的标题第二部分是文件体 以和标签标志开始和结束 包含对浏览器中显示的内容的具体描述 和标签标志一个段落，之间的文本将显示在浏览器中； 和标签控制文本的字体、大小、颜色等； 和标签用于排版段落的格式； 标签用于插入图片，没有结束标签，通常后面带有属性，表示图片文件的存储路径、对齐、以及大小。,大学计算机信息科技教程（第二版）第5章 网页制作基础,12,.和 和,.,大学计算机信息科技教程（第二版）第5章 网页制作基础,13,5.2 设计站点,网站设计 定义本地站点 管理站点资源（使用文件面板） 新建（快捷菜单：新建文件、新建文件夹） 移动、复制（拖曳、Ctrl拖曳） 删除、重

6、命名（Del、两次单击） 导入（复制/粘贴） 打开、保存和预览网页 打开（文件面板：双击文件） 保存（标准工具栏：保存按钮、全部保存按钮） 预览（标准工具栏：在浏览器中预览按钮）,大学计算机信息科技教程（第二版）第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

8、.2.2 定义本地站点,修改站点的设置信息,大学计算机信息科技教程（第二版）第5章 网页制作基础,20,5.2.2 定义本地站点,打开站点 选定站点，单击“完成”按钮,同一时刻只能打开一个站点,大学计算机信息科技教程（第二版）第5章 网页制作基础,21,单击,5.2.2 定义本地站点,建立多个站点 “新建”按钮：再建立另一个站点 复制站点 “复制”按钮：建立一个与选定站点相同的站点 删除站点 “删除”按钮：删除选定站点 导出、导入站点 选中站点，单击“导出”按钮，将站点导出为包含站点设置的 XML 文件，其文件扩展名为.ste。 以后单击“导入”按钮，可以导入该文件，并成为站点（注意选择站点根

9、文件夹）。,将导出的 .ste文件和站点的根文件夹一起复制到另一台电脑上,根文件夹,大学计算机信息科技教程（第二版）第5章 网页制作基础,22,单击,5.2.3 管理站点资源,定义了本地站点后，在本地计算机中建立了一个用于存放站点中的文档的文件夹。初始状态下，该文件夹是一个空文件夹，在此文件夹中可以进行新建文件夹、新建文件、复制文件、移动文件、删除文件、重命名文件等操作。,右击,大学计算机信息科技教程（第二版）第5章 网页制作基础,23,5.2.3 管理站点资源,新建文件夹 右单击“文件”面板中要新建文件夹的位置（如：站点名称或子文件夹名），在弹出的快捷菜单中选择“新建文件夹”命令，建立一个以

10、“untitled”为默认名称的文件夹，此时输入新建文件夹的名称（如：Picture），然后按Enter键即可。,快捷菜单：新建文件夹 Contents：网页 Picture: 图片 Css：样式 Templates：模板,大学计算机信息科技教程（第二版）第5章 网页制作基础,24,5.2.3 管理站点资源,新建文件 “文件”/“新建”命令，选择文件类别和类型（如：基本页），单击“创建”按钮。 单击起始页的“从范例创建”栏中列出的选项。 单击起始页的“创建新项目”栏中的选项。 “文件”面板，快捷菜单“新建文件”命令，输入文件名； 双击打开新建的文件。,快捷菜单：新建文件 输入文件名：如Inde

11、x.html 双击打开该文件,返回,大学计算机信息科技教程（第二版）第5章 网页制作基础,25,5.2.3 管理站点资源,移动、复制文件和文件夹 选定拖放 将出现“更新文件”对话框，提示是否要更新其他文件中有指向被移动的文件的超链接。,拖曳,大学计算机信息科技教程（第二版）第5章 网页制作基础,26,5.2.3 管理站点资源,复制文件，选定按住Ctrl键同时拖放,返回,大学计算机信息科技教程（第二版）第5章 网页制作基础,27,5.2.3 管理站点资源,删除、重命名文件和文件夹 选定按Delete键 选定再次单击,返回,大学计算机信息科技教程（第二版）第5章 网页制作基础,28,5.2.3 管

12、理站点资源,导入文件和文件夹,大学计算机信息科技教程（第二版）第5章 网页制作基础,29,5.2.4 打开、保存和预览网页,打开网页文档 “文件”/“打开” “文件”/“打开最近的文件” 起始页中列出的最近打开的文件名； 单击起始页中“打开”选项，在出现的“打开”对话框选择文件； 在“文件”面板中双击文件名。,本站点文件面板中双击文件名,返回,大学计算机信息科技教程（第二版）第5章 网页制作基础,30,5.2.4 打开、保存和预览网页,保存网页文档,标准工具栏,返回,大学计算机信息科技教程（第二版）第5章 网页制作基础,31,5.2.4 打开、保存和预览网页,预览网页,作业,参见elearning网站,大学计算机信息科技教程（第二版）第5章 网页制作基础,32,