《网页制作课件224061859》由会员分享，可在线阅读，更多相关《网页制作课件224061859（32页珍藏版）》请在金锄头文库上搜索。
1、1,回顾,建站的基本流程是什么？ 网页中常见的元素有哪些？,第二章,Dreamweaver 使用入门,3,2.1Dreamweaver基础知识 2.2Dreamweaver的界面 2.3新建网站 2.4超级链接,4,目标,理解与 Dreamweaver 相关的概念 掌握创建网站的操作步骤 掌握如何制作简单网页 掌握如何创建超级链接,5,2.1Dreamweaver 基础知识,2.1.1Dreamweaver简介 一款用于设计、开发网站和 Web 应用程序的专业HTML 编辑器 用户可以选择使用布局单元格或框架来设计页面的布局 可用于创建文本、插入动态图像、提供网页超链接、创建 Flash 文本
2、和 Flash 按钮等 可用于组合由某些软件（如 Photoshop、ImageReady 和 Flash 等）制作的图形、动画和按钮,6,2.1.2 Dreamweaver 概念 静态网页：只能浏览，不能实现客户端和服务器端的交流互动 动态网页：网站页面随用户的输入而变化，能与客户端交流互动 本地站点：一个在我们自己的计算机上，存储网站所有文件的临时文件夹 远程站点：位于远程Web 服务器上，与本地站点相对应 根文件夹：用于存储网站文件的本地根目录,7,2.2Dreamweaver 界面,Dreamweaver MX 2004 提供以下两种工作区布局可供选择： 设计者 代码编写者,8,设计人
3、员工作区,Dreamweaver 2004 MX 提供了一个集成所有面板和窗口的集成工作区,9,10,“插入”栏,“插入”栏中的按钮可用于将对象（如表格、图层和图形等）轻松插入 HTML 页面中 “插入”栏的“常用”选项卡中的按钮可用于插入最常用的对象，如链接、表格、图像、水平线等,11,属性检查器,帮助编辑当前选择的页面元素属性 演示“属性检查器“的简单用法,12,面板,组合常用功能、方便用户操作 演示面板的简单用法,“文件”面板,13,面板组,组合在一组标题下的多组相关面板 例如， “文件”面板包含以下两个组 文件 资源,14,“页面属性”对话框,“页面属性”对话框允许网页设计人员调整页面
4、设置，如标题、颜色和页边距等 演示”页面属性对话框“的简单用法,15,2.3新建网站,2.3.1建立本地站点 步骤： 选择新建站点，然后为其命名 选择服务器技术（如果适用） 选择在本地计算机上编辑本地副本的选项 选择用于存储网站文件的文件夹 选择连接到远程服务器的选项,演示：在 Dreamweaver MX 2004 中创建网站,16,演示：在 Dreamweaver MX 2004 中制作网页,2.3.2新建页面 步骤： 在面板组中选择站点，然后新建一个文件 重命名该文件并将其打开 为页面指定一个标题 在页面上键入文本或插入图像 保存页面,17,2.4超级链接,超链接是WWW的魅力所在。为了
5、把Internet上众多分散的网站和网页联系起来，构成一个有机的整体，就要在网页上加入链接。通过点击网页上的链接，才能真正实现网络无国界，我们才可以在信息海洋中尽情遨游。,18,超链接按源端点的链接划分，可分为超文本链接和非超文本链接两类。 超链接按目标端点的链接划分，可分为外部链接、内部链接、电子邮件链接、局部链接、脚本链接等 文档的任何部分（如文本、页面、表单、动画或图像等）都可用作超级链接 超级链接可用于指向页面的特定部分或网站的不同页面,2.4.1超链接的种类,19,2.4.2链接路径类型,有两种类型的链接路径： 绝对路径 绝对路径是包括服务器协议的完全路径。 （例如 http:/ 这
6、些链接指向您没有编辑控制权的站点。 此类链接用于为读者提供附加资源。 如友情链接： Microsoft产品 惠普产品 Sun技术,20,相对路径 相对路径包括站点根目录相对路径（Site Root）和文档相对路径（Document）两种。 文档相对路径（例如 adver/contents.html） 站点根目录相对路径（例如 /support/app/customer.html，其中“/”表示根目录） 这些链接指向您的网站内部的网页 这些链接是相对于文档或根文件夹而言的，因此不需要一个像 http:/ 一样的完整地址,21,文档相对链接birthdaysalbum/second.html,WW
7、W,schoolalbum.html,根文件夹相对链接 /photoalbum/birthdaysalbum/second.html,绝对链接http:/ 帮助您将页面元素（如文本、图像和按钮等）链接到其他文档（如 HTML 文件、图像和视频等） 链接可以建立在同一站点的各文档中，也可以建立在站点外的文档中,2.4.3创建超级链接,23,链接到其他文档,演示：链接到其他文档所包含的步骤,步骤： 选择将用作链接的页面元素 选择链接应打开的文件 选择到达所链接文档的路径 选择应打开文档的位置,24,链接 URL,如果 URL 路径太长并且很难记住，有一种简单的方法可将其链接到文本或对象 在 Dre
8、amweaver 中选择将要链接的文本或图像 在浏览器中打开该站点，然后从“地址”框中复制此链接 激活 Dreamweaver，在“属性”检查器的“链接”框中粘贴到达该文件的 URL 或路径 按下 Enter 键应用该链接,从浏览器的“地址”栏中粘贴的链接地址,25,链接到同一文档的各部分,当一个网页的主题较多或内容较长时，可以在网页内建立多个标记点，将超链接指向这些标记点，使浏览者能快速找到要阅读的内容 这些标记点也就是命名锚记，简称锚, 比尔.盖茨简介 . 比尔-盖茨是微软公司主席和首席软件设计师。微软公司件、服务和互联网技术方面都是全球范围内的领导者.,26,创建并链接命名锚记,步骤：
9、打开将要创建命名锚记的文档 在窗口的“设计”视图中确定插入命名锚记的位置 插入命名锚记 为锚记命名 在“属性”检查器中链接锚记,演示:创建命名锚记,27,链接到其他文档的特定位置,选择将用作链接的文本和图像 将选定的文本/图像与命名锚记链接起来,演示：链接到命名锚记,28,2.4.4利用Dreamweaver MX编辑超链接,设置链接颜色 设置链接字体 删除超链接,29,2.4.5管 理 超 链 接,设计一个清晰的超链接 1设计一个清晰的超链接 2首页上的超链接要“有去有回” 3给图像超链接做文字说明,30,利用站点地图管理超链接 1建立网页间的超链接 2移除网页间的超链接 3更新超链接 4检
10、查超链接,31,总结,Internet 是一种大型网络，是网络的网络 Dreamweaver MX 2004 是一种功能强大的网页编辑工具，可在所见即所得环境中灵活地制作网页 Dreamweaver 可在设计网页时在其中插入文本、图像、动画、音频、视频和 Java Applet 等对象 在 Dreamweaver 工作区中，所有面板、工具栏和文档窗口都集成在一个程序窗口中，类似于大多数基于 Windows 的程序,32,定义站点是设计网站的第一步，在此将定义站点的根文件夹、服务器和站点名称 网页共有两种类型，即静态网页和动态网页 通常，链接的路径分为三种： 绝对路径 文档相对路径 站点根目录相对路径,
