网页制作三合一上.ppt

1、网页制作 三合一 上 Dreamweaver MX,目 录,第1章 网页制作基础 第2章 Dreamweaver MX 2004使用入门 第3章 Dreamweaver MX 2004初级应用 第4章 Dreamweaver MX 2004高级使用 第5章 Fireworks MX 2004使用入门 第6章 Fireworks MX 2004图形图像的处理 第7章 Fireworks MX 2004中的文本和层 第8章 Fireworks MX 2004的优化及高级应用 第9章 Flash MX 2004使用入门 第10章 Flash MX 2004的基本应用 第11章 Flash MX 20

2、04的动画制作,第1章 网页制作基础,1.1 Internet简介 1.2 网页浏览原理 1.3 网站概论,1.1 Internet简介,1.1.1 什么是Internet,按计算机在地理范围上分布的远近可以将计算机网络分为以下3类：局域网（Local Area Network，LAN），地理范围小于十公里；城域网（Metropolitan Area Network，MAN），地理范围覆盖若干个单位或一个城市；广域网（Wide Area Network，WAN），地理范围从几十公里到几千公里以上。,Internet是全球最大的、开放的、由众多网络互连而成的计算机互联网，中文译名为“国际互联网”

3、或“因特网”。,1.1.2 Internet的功能和应用,（1）信息的获取与发布。 （2）电子邮件（E-mail）。 （3）网上交际。 （4）电子商务。 （5）网络电话。 （6）网上事务处理。 （7）远程登录。 （8）文件传输。 （9）电子公告板。 （10）全球信息网。 （11）Internet的其他应用。,1.2 网页浏览原理,1.2.1 网络传输协议和域名地址解析,TCP/IP协议Transfer Control Protocol/Internet Protocol（传输控制协议/网际协议）。,浏览器和HTTP服务器总是通过TCP/IP通信。这就是说每台运行这种应用程序的计算机都需要运行T

4、CP/IP软件，并且配置一个IP地址。IP地址长4字节，每个字节的值用十进制数表示，例如192.168.100.1就是一个典型的4字节IP地址。,HTTP（Hypertext Transfer Protocol，超文本传输协议）是网络检索和浏览的最常用的协议。,URL（Universal Resource Locator，统一资源定位符）以单个串的形式提供访问站点中文件所需的所有信息，其结构为：:/:/ 例如：http:/:80/news/00001.htm。,1.2.2 客户机/服务器响应机制,（1）存在并已经激活的网络连接。,（2）安装并启动用于浏览网页的浏览器软件，例如Internet

5、Explorer或Netscape Navigator。,1.2.3 HTML规范常识,HTML（Hypertext Markup Language，超文本标识语言）是网络的通用语言，是一种简单、通用的文本标识语言。, 第一个网页 Hello HTML! Hello HTML! 搜狐网 ,1.3 网站概论,1.3.1 网站的种类,（1）根据网站提供的服务分类。 信息类网站 交易类网站 互动游戏类网站 有偿信息类网站 功能性网站 综合类网站 （2）根据网站的性质分类，分为：政府网站、企业网站、商业网站、教育科研机构网站、个人网站、非营利机构网站、其他类型的网站。 （3）根据在大型搜索引擎上的设置

6、分类，分为：娱乐与休闲类网站、商业与经济类网站、艺术与人文类网站、健康与医药类网站、新闻与媒体类网站、政府与政治类网站、电脑与网络类网站、社会与文化类网站、科学与教育类网站、参考资料类网站。,1.3.2 网站建设基本流程,1制作环境的准备 2网站目标的确定 3网站主题、风格和创意点的确定 4网站结构的确立 5网站素材的准备 6网站制作工具的选择和确定 7网站的建立 8网站的测试和上传 9网站的宣传和推广 10网站的更新和维护,1.3.3 网页色彩方案,1色彩的一些基本概念（1）色相。指的是色彩的名称，这是色彩最基本的特征，是一种色彩区别于另一种色彩的最主要的因素。,明度变化,（2）纯度。指色彩

7、的鲜艳程度，纯度高的色彩纯、鲜亮，纯度底的色彩暗淡、含灰色。,纯度变化,（3）相近色。是指色环中相邻的三种颜色。,（4）互补色。是指色环中相对的两种色彩。,（5）暖色。如图中的黄色、橙色、红色、紫色等都属于暖色系列。,（6）冷色。如图中的绿色、蓝色、蓝紫色等都属于冷色系列。,暖色,冷色,（7）色彩均衡。,2色彩的联想红色让人联想到玫瑰，联想到喜庆，联想到兴奋。 白色让人联想到纯洁、干净、简洁； 紫色象征着女性化、高雅、浪漫； 蓝色象征高科技、稳重、理智； 橙色代表了欢快、甜美、收获； 绿色代表了充满青春的活力、舒适、希望等。 3黑白灰的运用4确定网站的主题色,1.3.4 网站的宣传,（1）在各

8、大搜索引擎中注册你的网站。 （2）在新闻组上发布你的主页。 （3）利用电子邮件群发送消息。 （4）在比较出名的ISP主页上注册。 （5）通过新闻媒体进行宣传。 （6）与相关网站做友情链接。 （7）利用留言板进行宣传。 （8）利用电子邮件发出通知。 （9）参加各种广告交换组织。 （10）使用主页注册软件。 （11）通过其他可能的方法帮助宣传。,第2章 Dreamweaver MX 2004使用入门,2.1 Dreamweaver MX 2004功能简介 2.2 Dreamweaver MX 2004的工作环境 2.3 参数设置 2.4 Dreamweaver MX 2004的辅助工具,2.1 D

9、reamweaver MX 2004功能简介,（1）自定界面。 （2）丰富的样式列表。 （3）跨浏览器有效性检查。 （4）使用内置的图形编辑程序让开发更加节省时间。 （5）创建更适用的用户界面。 （6）功能更多的CSS支持、CSS的可视化设计及CSS检查工具。 （7）改进CSS直观应用效果。 （8）改进的CSS面板。 （9）基于文本属性改进的CSS检查工具。 （10）新的基于页面属性的CSS。,（11）CSS代码提示。 （12）免费插件。 （13）FTP安全保障。 （14）外部文档/代码的无缝结合。 （15）Studio一体化。 （16）Microsoft ASP.NET Form控制对象。

10、（17）更新内容参考。 （18）PHP服务器行为。 （19）支持Macromedia Flash元素。 （20）MX HTML构件。 （21）更多有效的代码编辑。 （22）详尽的属性编辑。 （23）更新更快的查询功能。,2.2 Dreamweaver MX 2004的工作环境,2.2.1 主菜单介绍,“文件”菜单,“编辑”菜单,“查看”菜单,“插入”菜单,“修改”菜单,“文本”菜单,“命令”菜单,“站点”菜单,“窗口”菜单,“帮助”菜单,2.2.2 面板,“常用”面板,“布局”面板,“表单”面板,“文本”面板,HTML面板,“应用程序”面板,“Flash元素”面板,2.2.4 控制面板,关于各

11、种属性面板和控制面板，在以后章节中将会有大量的介绍。,2.2.3 属性面板,2.3 参数设置,2.3.1 常见参数,2.3.2 字体参数,2.3.3 状态栏参数,2.4 Dreamweaver MX 2004的辅助工具,2.4.1 网格,2.4.2 标尺,改变原点位置,还原原点位置,第3章 Dreamweaver MX 2004的初级应用,3.1 站点的建立 3.2 创建Dreamweaver页 3.3 网页的文本编辑 3.4 网页中的图像编辑 3.5 创建链接 3.6 行为,3.1 站点的建立,3.2 创建Dreamweaver 页,3.2.1 新建空白HTML页,选择“文件”“新建”命令,

12、3.2.2 利用模板创建网页,实例,3.2.3 保存网页,提醒两点： （1）网页一般要保存在站点下的路径中，这样才能保证网页中的图片等引用格式的正常显示。 （2）如果是主页，不仅要保存在站点根目录下，而且一般习惯的命名方式为index.htm，以示区别。,3.2.4 预览网页,3.3 网页的文本编辑,3.3.1 插入和设置文本,不同字体的表现,不同的字体效果,不同字号的效果,不同的格式的效果,3.3.2 段落设置,靠左 居中 靠右,不同的对齐方式：,缩进文本,3.3.3 项目符号,无序清单,有序清单,多级清单,3.4 网页中的图像编辑,3.4.1 在网页中插入图像,Web页中通常使用的只有三种

13、：GIF、JPEG和PNG。,GIF（图形交换格式）文件最多使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，例如导航条、按钮、图标、徽标或其他具有统一色彩和色调的图像。 JPEG（联合图像专家组标准）文件格式是用于摄影或连续色调图像的高级格式，这是因为JPEG文件可以包含数百万种颜色。PNG（可移植网络图形）文件格式是一种替代GIF格式的无专利权限制的格式，包括对索引色、灰度、真彩色图像以及Alpha通道透明的支持。,3.4.2 设置图像属性,3.4.3 热点链接的设置,通过属性中的链接或单击右键选择链接,3.4.4 交互图像的处理,交互前后的图像,3.5 创建链接,3.5.

14、1 内部网站链接,首页,子页,3.5.2 外部网站链接,1与万维网的链接,2通过E-mail链接,若要使用“插入电子邮件链接”命令创建电子邮件链接，请执行以下操作： （1）在“文档”窗口的“设计”视图中，将插入点放在希望出现电子邮件链接的位置，或者选择要作为电子邮件链接出现的文本或图像。 （2）执行下列操作之一，插入该链接：选择“插入”“电子邮件链接”命令。选择“插入”栏中的“通用”选项卡，然后单击“插入电子邮件地址”按钮。 （3）出现“电子邮件链接”对话框。,（4）完成此对话框的相关内容。 （5）单击“确定”按钮。,3.5.3 链接的管理,若要添加链接，请执行下列操作之一： 将某个页面从Wi

15、ndows资源管理器拖动到站点中的一页上。 在站点中选择一个HTML页面，如果在Windows中，则接着选择“站点”“链接到已有文件”命令。 在站点中选择一个HTML页面，如果在Windows中，则接着选择“链接”“链接到新文件”命令。 在站点中选择一个HTML页面，出现“点到文件”图标。将此图标拖动到想要链接的对象上，可以是“点到文件”视图中的文件、打开的Dreamweaver文档，也可以是桌面上打开文档中的命名锚记。 若要删除链接，请执行下列操作之一： 在站点地图中选择该页，然后选择“站点”“删除链接”命令。 在站点地图中选定该页，右击，然后从快捷菜单中选择“删除链接”命令。 删除链接不会

16、删除该文件，但会从指向该链接的页面上的HTML源代码中删除该链接。 若要打开链接源，则在站点地图中选择一个文件，然后执行以下操作之一： 选择“站点”“打开链接源”命令。 右击，然后从快捷菜单中选择“打开链接源”命令。,3.5.4 站点视图,1查看分支通过使某个分支成为站点地图的焦点可以查看站点特定部分的详细信息。 选择要查看的页，然后选择“查看”“作为根查看”查看站点地图中的另一分支。站点地图在窗口中重新绘制就像指定页位于站点的根目录一样。站点地图之上的“站点导航”文本框显示从主页到指定页的路径。通过一次单击选择路径中的任意项，从该级别开始查看站点地图。 2更改链接可以通过在站点地图中添加、更

17、改和删除链接来修改站点的结构。Dreamweaver自动更新站点地图以显示对站点所做的更改。 3显示相关文件可以修改站点地图的布局，以显示或隐藏文件和相关文件。当需要强调关键主题或内容而隐藏不太重要的材料时，此功能非常有用。若要使用站点地图隐藏文件，必须将该文件标记为隐藏。当隐藏某文件时，该文件的链接也会隐藏起来。当显示标记为隐藏的文件时，它的图标和链接将显示在站点地图中，但名称以斜体显示。 4向站点添加文件在站点地图中工作时，可以选择页、打开页进行编辑、向站点添加新页、创建文件之间的链接以及更改页标题。,3.6 行为,3.6.1 行为简介,行为是事件和由该事件触发的动作的组合。,事件是浏览器

18、生成的消息，指示页的访问者执行了某种操作。,动作是由预先编写的JavaScript代码组成的，这些代码执行特定的任务。,在将行为附加到页元素之后，只要该元素发生了用户所指定的事件，浏览器就会调用与该事件关联的动作（JavaScript代码）（可以用来触发给定动作的事件随浏览器的不同而有所不同）。例如，如果将弹出消息动作附加到某个链接并指定它将由onMouseOver事件触发，那么只要某人在浏览器中用鼠标指针指向该链接，就将在对话框中弹出消息。单个事件可以触发多个不同的动作，可以指定这些动作发生的顺序。 Dreamweaver MX 2004提供大约20多个行为动作，可以在Macromedia

19、Exchange Web站点以及第三方开发人员站点上找到更多的动作。如果精通JavaScript，可以编写自己的行为动作。,3.6.2 行为面板,行为列表,添加行为,删除行为,动作（+）：是一个弹出式菜单，其中包含可以附加到当前所选元素的多个动作。当从此列表中选择某个动作时，将出现一个对话框，可以在其中指定该动作的参数。如果所有动作都灰显，则没有所选元素可以生成的事件。 删除（-）：从行为列表中删除所选的事件和动作。 上下箭头按钮将特定事件的所选动作在行为列表中向上或向下移动。给定事件的动作是以特定的顺序执行的。可以为特定的事件更改动作的顺序。,事件（单击行为列表中所选事件名称旁边的箭头按钮时

20、出现的菜单）是一个弹出式菜单，其中包含可以触发该动作的所有事件。只有在选择了行为列表中的某个事件时才显示此菜单。根据所选对象的不同，显示的事件也有所不同。如果未显示预期的事件，则检查是否选择了正确的页元素或标签（若要选择特定的标签，请使用文档窗口底部左侧的标签选择器）。同时确保在“显示事件”子菜单中选择了正确的浏览器。,3.6.3 关于事件,第4章 Dreamweaver MX 2004的高级应用,4.1 表格 4.2 层 4.3 框架 4.4 表单,4.1 表格,4.1.1 表格的建立,单击插入栏的“表格”按钮或者选择“插入”“表格”命令,4.1.2 选择表格,若要选择整个表格，可以执行以下

21、操作之一： 单击表格的左上角或单击右边或底部边缘的任意位置。,单击表格单元格，然后在文档窗口左下角的标签选择器中选择table标签。 单击表格单元格，然后选择“修改”“表格”“选择格式”命令。 单击表格单元格，然后在标签检查器中选择table标签。,若要选择行或列，请执行以下操作： 定位鼠标指针使其指向行的左边缘或列的上边缘。 当鼠标指针变为选择箭头时，单击以选择行或列，或进行拖动以选择多个行或列。,若要选择单个单元格，请执行以下操作之一： 单击单元格，然后在文档窗口左下角的标签选择器中选择td标签。 单击单元格，然后选择“编辑”“全选”命令。 单击表格单元格，然后在标签检查器中选择td标签。

22、若要选择一行或矩形的单元格块，请执行以下操作之一： 从一个单元格拖到另一个单元格。 单击一个单元格，然后按住 Shift 键单击另一个单元格。,若要选择不相邻的单元格，请执行以下操作： 在按住Ctrl键的同时单击要选择的单元格、行或列。 如果按住Ctrl键单击尚未选中的单元格、行或列，则会将其选中。如果它已经被选中，则再次单击会将其从选择中删除。,4.1.3 表格属性,1表格属性,2单元格属性,选择“命令”“格式化表格”命令,4.1.4 格式化表格,4.1.5 编辑表格,对表格进行编辑的命令,合并单元格,拖动表格边框,拆分单元格,4.1.6 在表格中插入内容,1插入文本图像,2嵌套表格,3导入

23、表格式数据,4.2 层,4.2.1 创建层,新建文档，在插入栏中单击“描绘层”按钮，可以在设计页面中用鼠标拖动形成一个矩形框，即所建立的新层。,按下快捷键F2或者直接选择层窗口，可以查看网页设计中的层情况。,4.2.2 层的属性,1层的首选参数,2层的属性,4.2.3 层的操作,1选定层,可以通过执行以下操作之一来选定一个层： 在“层”面板中单击该层的名称。 单击一个层的选择柄。如果选择柄不可见，则在该层中的任意位置单击以显示该选项柄。 单击一个层的边框。 在一个层中按住Ctrl+Shift键并单击。如果已选定多个层，此操作会取消选定其他所有层而只选择所单击的层。,通过执行以下操作之一来选择多

24、个层： 按住 Shift 键并单击“层”面板上的两个或更多个名称。 在两个或更多个层的边框内（或边框上）按住 Shift 键并单击。 当选定多个层时，最后选定层的大小调整柄将以黑色突出显示，其他层的大小调整柄则以白色显示。,2调整层大小,可通过执行以下操作之一来调整选定层的大小： 若要通过拖动来调整大小，则拖动该层的任一大小调整柄。 若要一次调整一个像素的大小，则在按箭头键时按住Ctrl键。箭头键移动层的右边框和下边框。对于此方法，不能使用上边框和左边框来调整大小。 若要按网格靠齐增量来调整大小，则在按箭头键时按住Shift+Ctrl键。 在属性检查器中输入宽度（W）和高度（H）的值。,在设计

25、视图中选择两个或更多个层，可通过执行以下操作同时调整多个层的大小： 选择“修改”“对齐”“设成宽度相同”或“修改”“对齐”“设成高度相同”命令，选定的层符合最后一个选定层（黑色突出显示）的宽度或高度。 在属性检查器中的“多个层”下输入宽度和高度值，这些值将应用于所有选定层。,3移动层,若要通过拖动来移动，则拖动最后一个选定层（黑色突出显示）的选择柄。,若要一次移动一个像素，则使用箭头键。按箭头键时按住Shift键可按当前网格靠齐增量来移动层。,4对齐层,4.2.4 层窗口的操作,1改变层堆栈顺序,2改变层的可见性,4.3 框架,4.3.1 创建框架集,4.3.2 框架集属性,4.3.3 框架的

26、修改,1修改框架的大小,2拆分框架,4.3.4 保存框架,要保存框架集文件，在“框架”面板或文档窗口中选择框架集，然后进行如下操作： 要保存框架集文件，选择“文件”“保存框架集”命令。 要将框架集文件另存为新文件，选择“文件”“框架集另存为”命令。,要保存在框架中显示的文档，则在框架中单击，然后选择“文件”“保存框架”或 “文件”“框架另存为”命令。 要保存与一组框架关联的所有文件，则选择“文件”“保存所有框架”命令。,4.3.5 框架的属性,4.3.6 在框架中插入内容,4.4 表单,4.4.1 创建表单,插入表单,4.4.2 表单属性,4.4.3 添加表单项目,1添加文本域,单击文本框,2插入列表或菜单,3插入单选按钮和复选框,4添加按钮,5跳转菜单,4.4.4 在表单中插入表格,