第1章 网站的建立教学课件 网页制作基础教程（Dreamweaver CS6 第2版） .pptx

第1章 网站的建立教学课件 网页制作基础教程（Dreamweaver CS6 第2版）工信版主 编 黄洪杰 电子工业出版社电子工业出版社网页制作基础教程网页制作基础教程(Dreamweaver CS6(Dreamweaver CS6 第第2 2版版)电子教案电子教案第第1 1章章 网站的建立网站的建立主页好书推介读书心得淘书之乐互动留言项目项目1 1 掌握网页概念和网页制作工具掌握网页概念和网页制作工具本书介绍的软件是Adobe公司的Dreamweaver。这款软件连同Flash、Firework一起被成为“网络三剑客”，一直是网页制作者最关注的产品。子项目子项目1 1 网页、超链接与网站网页、超链接与网站网页就是把文字、图形、图像、声音、动画、视频等多种媒体形式的信息，以及分布在因特网上的各种相关信息相互链接起来而构成的一种信息表达方式。因特网采用了一种网状的结构，浏览者可以根据自己的喜好随时改变阅读的顺序。这种形式就是超文本，改变顺序的就是超链接。在浏览器中输入网址后，看到的第一个网页我们称其为“主页”。子项目子项目1 1 网页、超链接与网站网页、超链接与网站网页、支持网页各种效果的程序文件、数据文件，甚至说明文档的集合，就组成了网站。网站的建设是通过制作网页来完成的，网页之间通过超链接连接起来，掌握这些技能就可以制作出一个简单的网站子项目子项目2 HTML2 HTMLHTML语言，也就是Hyper Text Markup Language（超文本标识语言）。HTML语言作为超文本标记语言，用来描述某个事物应该如何合理地显示在计算机屏幕上。也可以这么说，HTML就是以特殊的标记形式将网页存储为通常的文本文件。子项目子项目2 HTML2 HTML例如，要在网页上实现“欢迎参观我的主页”这句话为黑体18号字并居中显示，相应的HTML语句为：欢迎参观我的主页句首的表示居中，句尾的表示居中结束；而表示粗体，与之相呼应；表示文字为黑体，表示字体型号为18号，句尾的两个表示设置结束。子项目子项目3 3 静态网页与动态网页静态网页与动态网页网页可以分为静态网页和动态网页，区分它们的标准是网站所使用的服务技术，与网页上是否有动态效果无关。在浏览静态网页时，该网页是在网站所在的服务器上真实存在的。在浏览动态网页时，那个网页可能并不是真实存在的，或者不是完整存在的。而仅仅是一个模板，网页中的一些内容来自数据库等信息源，由相关的网页程序来控制那些信息显示在模板的什么位置上。子项目子项目3 3 静态网页与动态网页静态网页与动态网页支持动态网页的技术又分为客户端动态技术和服务器动态技术。客户端动态技术在显示网页内容时并不与网站服务器产生交互，服务器接受浏览器的请求发送网页后，自动在计算机上运行并将结果显示在浏览器中。例如，网页中常见的JavaScript、DHTML、Flash就是客户端动态技术。服务器动态技术在显示网页内容的过程中需要服务器和客户端的共同配合，服务器会根据客户端发来的参数运行相关程序，产生页面，然后再把已经形成的网页发送到客户端的浏览器上。例如，常见的ASP网页和PHP网页就使用服务器动态技术。子项目子项目4 4 网页制作工具网页制作工具在众多网页制作软件中，FrontPage曾经以操作简单而获得初学者的青睐。使用FrontPage软件编辑主页，就像在Word中编辑文本一样。和其他网页制作软件相比，Dreamweaver是一款更专业的网页制作工具，拥有更广泛的网页制作者群。它主要有以下优点：（1）不生成冗余代码。（2）强大的动态页面支持。（3）优秀的网站管理功能。项目项目2 2 使用使用DreamweaverDreamweaver建立网站建立网站子项目子项目1 Dreamweaver 1 Dreamweaver 操作环境操作环境单击任务栏上的“开始”按钮，打开“开始”菜单；将鼠标指针指向“开始”菜单中的“所有程序”，打开“程序”菜单；再单击子菜单中的“Adobe Dreamweaver CS6”，启动Dreamweaver。子项目子项目1 Dreamweaver 1 Dreamweaver 操作环境操作环境Dreamweaver的操作环境由标题菜单栏、文档工具栏、文档编辑区、状态栏、面板组等组成。子项目子项目2 2 建立网站前的准备工作建立网站前的准备工作在开始建立网站之前，首先要确定网站的主题，根据主题确定这个网站需要由多少个网页构成，以及这些网页之间的关联关系等子项目子项目2 2 建立网站前的准备工作建立网站前的准备工作网页中除了文字之外，还应该包含图片、声音、动画等内容。这些资料都要在确定网站主题后、制作网页之前准备好，并存放在一个专门的文件夹中。子项目子项目3 3 建立站点建立站点新建一个网站有多种方法，可以单击“站点”菜单中的“新建站点”命令，也可以单击标题栏的“站点”按钮，在下拉菜单中选择“新建站点”命令，还可以在面板组中打开“文件”选项卡，通过单击“管理站点”，然后新建站点。子项目子项目3 3 建立站点建立站点输入新站点的名称。子项目子项目4 4 新建网页与文件夹新建网页与文件夹在面板组“文件”选项卡中，将鼠标指针移到站点名称上，单击右键，从弹出的快捷菜单中选择“新建文件”命令。建立文件夹的方法与之相似。子项目子项目5 5 更改文件名与删除文件更改文件名与删除文件只需要在面板组中两次单击该文件的文件名，文件名就立刻变成编辑状态，就可以改名了。注意是两次单击该文件名，不是双击该文件的文件名。如果要删除网页文件，只需要选中该文件，按下键盘上的“delete”键即可。项目项目3 3 打开与保存网页打开与保存网页子项目子项目1 1 打开网页文件打开网页文件打开网站中的网页文件一般有三种方法。第一种方法是在打开Dreamweaver后，在弹出的欢迎画面中单击“打开”命令，然后找到要编辑的文件。第二种方法是在面板组中打开网页文件。首先打开面板组的文件选项卡，然后在显示的本地文件中双击网页文件，将其打开。第三种方法是使用菜单打开网页文件。单击“文件”菜单，在弹出的下一级菜单中选择“打开”命令，然后找到网页文件，将其打开。子项目子项目2 2 更改网页标题更改网页标题网页标题指的是浏览该网页时显示在浏览器标题栏中的文字，而不是这个网页的文件名。在网页打开的状态下，可以发现文档工具栏右端的标题文本框中有“无标题文档”几个字，这是默认的网页标题。将“无标题文档”几个字删除，输入主页的标题。子项目子项目3 3 保存网页文件保存网页文件网页名称后面都有一个星号，这说明网页没有保存下来。单击“文件”菜单，在弹出的下一级菜单中选择“保存”命令，可以将当前打开的网页文件保存。子项目子项目4 4 预览网页预览网页单击“文件”菜单，在弹出的下一级菜单中选择“在浏览器中预览”，然后在其子菜单中选择“IExplorer”。子项目子项目5 5 退出退出DreamweaverDreamweaver单击“文件”菜单中的“关闭”命令，或者单击网页编辑窗口右上角的 按钮，都可关闭这些网页的编辑窗口。在“文件”菜单中选择“关闭全部”命令，可以将当前所有打开的网页都关闭单击“文件”菜单，在弹出的下一级菜单中选择“退出”命令，可以将Dreamweaver以及打开的网页同时关闭。