新计算机网络技术与应用简明教程 教学课件 978 7 302 16459 3 ch06.pptVIP

第六章 网站构建及应用 教学目标 了解网站构建的基本流程 掌握网页设计的方法 了解服务器端动态网页设计 教学重点 掌握Dreamweaver 8的基本使用 理解HTML网页编码语言 教学过程 网站建设概述 使用Dreamweaver 8设计网页 HTML语言 服务器端动态网页 6.1 网站的建立 网站建设概述 网站开发工具 6.1.1网站建设概述 1. 网站策划准备阶段 2. 内容设计与实现阶段： 3. 网站的发布与推广、维护阶段 6.2 使用Dreamweaver 8设计网页 Dreamweaver最初由Macromedia公司推出，是一款“所见即所得”的网页编辑工具，与Flash、Fireworks 并称为 Macromedia的“网页制作三剑客”， 2005年4月，著名图形软件开发商Adobe公司收购了Macromedia，同年9月，Adobe公司正式推出了Dreamweaver 8的版本，比之前的版本具有更强的功能和灵活性。 6.2.1 运行Dreamweaver 8 6.2.2 熟悉工作界面 （1/7） 1、编辑窗口： 打开Dreamweaver 8并建立空白页面后看到的白色区域就是编辑窗口。 6.2.2 熟悉工作界面 （2/7） 2、“插入”工具栏： 网页的内容多种多样，都可以被称为对象，简单的对象如文字、图像、表格等，复杂的对象包括导航条、程序等。大部分对象都可以通过“插入”工具栏插入 6.2.2 熟悉工作界面 （3/7） 单击“常用”旁边的向下箭头，可以打开其他的插入对象 6.2.2 熟悉工作界面 （4/7） 3、“属性”面板： 网页设计中的对象都有各自的属性，比如文字有字体、字号、对齐方式等属性，图像有大小、链接等属性。所以要有“属性”面板，可以对这些对象进行属性的修改。 6.2.2 熟悉工作界面 （5/7） 4、“浮动”面板： Dreamweaver中有很多的浮动面板，方便设计者使用，其实浮动面板上的操作功能在菜单当中也有相应的命令。Dreamweaver的浮动面板有“属性”面板、“设计”面板、“代码”面板、“应用程序”面板、“文件”面板、“答案”面板等等。“浮动”面板可以通过面板左上角的三角图标打开或折叠起“浮动”面板 6.2.2 熟悉工作界面 （6/7） 当需要更大的编辑窗口时，可以按F4快捷键，这样所有的面板都会隐藏。再按下F4键，隐藏的面板又会在原来的位置上出现。对应的菜单命令是“窗口”|“显示面板（隐藏面板）”。 6.2.2 熟悉工作界面 （7/7） 5、网页编辑视图： 在编辑窗口上方有一个“文档”工具栏，如图6.7所示，左侧前三个按钮对应三种视图，分别是代码、拆分和设计。 6.2.3 站点管理 （1/2） 1）创建新站点 6.2.3 站点管理 （2/2） 2）删除站点 6.2.4设计主页 新建一个网页文件 6.2.5 CSS样式的使用 （1/4） CSS是Cascading Style Sheets（层叠样式表），如果在网页制作时采用CSS技术，可以轻松而又有效地对页面的整体布局、字体、颜色、链接、背景和其它效果实现更加精确的控制。当CCS样式更改时，应用该样式的所有网页文档会自动更新。 6.2.5 CSS样式的使用 （2/4） 6.2.5 CSS样式的使用 （3/4） 创建自定义样式：用户可以对任何文本块或文本区域应用自定义CSS样式。 重定义HTML标签：该样式是对现有HTML标记的一种重定义，当用户创建或改变一个CSS样式时，所有使用该标记的文本格式也将自动被更新。 使用CSS选择器：该样式用于重新定义一些特定的标记组合或包含了特定ID属性的标记。 6.2.5 CSS样式的使用 （4/4） “CSS样式定义”对话框 6.2.6 层的使用 （1/2） 在Dreamweaver 8中层的使用可以更方便地对页面元素进行布局 6.2.6 层的使用 （2/2） “显示层面板” 6.2.7 行为的使用 通过行为可以在网页上制作出一些简单的交互效果，根据用户操作来触发相应的动作。打开“行为”面板，利用行为面板来添加所选中对象的行为、删除行为等 6.