网页设计与制作(2009)[宣讲].pptVIP

两种常用布局方法 表格 框架 * 布局表格 布局表格和单元格共同表示用户可添加到网页的水平与垂直区域，这些区域可以为内容提供复杂的可视结构。 我们可以选择预定义的布局表格模板，也可以创建自己的布局表格。 * 布局表格和单元格的属性 调整表格的大小 对选中单元格的高度、宽度、背景颜色、边框、边距等项进行相应的设置。 添加圆角图片、设置阴影来修饰网页。 * 框架布局 框架是一种将浏览器窗口划分为功能独立的多个区域的常用方法。框架集定义每个框架的大小、位置、名称和初始网页，普通网页提供每个框架（子窗口）的内容。一个框架的超链接可以更改显示在另一个框架中的网页。 框架集是一种特殊的网页，该网页定义了整体的框架布局，但不提供实际内容。 * 框架的创建和保存 新建框架网页 框架组成 在框架中加入网页 边框、滚动条、网页 1）建立新网页 2）指定已经存在的网页 保存框架页 【文件】| 【另存为】 【文件】| 新建| 【网页】 ，选择“框架网页”标签 * 框架属性设置 框架/框架属性 网页名称 初始网页 框架大小 边距 滚动条 框架的可调整性 间距 30% 70% 80% 20% 相对大小：1和4 相对大小：3和7 * 框架之间的超链接 在框架网页中，单击某框架内网页上的超链接时，被超链接所指定的网页通常在另一个框架中打开，这个框架称为目标框架。 命名: frame src=“url” name=“main” 链接: a href=“main2.htm target=“main”点击这里跳到main框架/a * 嵌入式框架 在网页的内部也可以插入框架来显示单独的网页。 * 使用层来定位元素 层是一个可以应用CSS来进行绝对定位的工具。 利用层的绝对定位功能，也可以实现网页的布局。 * 网页设计遵循的一般原则 栏目设计要合理 倘若內容较多，栏目设计要合理、清晰，让浏览者容易找到所需的信息。 导航清晰易懂 一个清晰、容易理解的导航栏，可以使新手快速了解到网站的结构，便于转到其他的页面。 时常更新內容 经常更新网页内容，给网友提供最新的信息，才能使网站更有吸引力。 * 网页设计遵循的一般原则 若要网站能够吸引人： 第一内容要不断更新 第二多媒体素材的合理使用 * 利用制作工具 编写HTML源代码 使用记事本等字处理软件直接编写代码，保存为.htm或.html的纯文本文件 使用所见即所得的可视化工具软件。如：frontpage、dreamwaver 主题5 网页制作 网页文档中包含了网页元素及其显示格式，制作网页就是将网页元素按照风格所确定的显示格式写成HTML文档。 * 常用网页制作工具 网页编写软件 Frontpage 、Dreamwaver …… 图形/图像处理软件 Photoshop、Fireworks …… 网页动画制作软件 Flash 制作静态网页不是很难！? * 想知道浏览你网页的网友有什么意见或建议？ 想知道对你网站提供的内容感兴趣的是什么人？ 想知道客户有哪些服务需求？ 想知道客户对产品有什么意见？ …… 动态交互网页编程 要使网站具有交互功能，就需要在网页中 加入实现动态交互的程序代码。 这就是基于WEB的应用程序开发！ 示例1 示例2 示例3 * 动态交互网页编程 常用网页脚本语言 Javascript 、VBScript Java applet小程序 动态网页开发工具 Asp、Jsp、Php 其它CGI程序 * 主题6 FrontPage 2003 网站的建立与管理 编辑网页 网页的格式与CSS级联样式表 使用图像 网页的布局 网页的动态效果 应用表单实现交互网页 保持网站一致性外观的方法 * FrontPage 2003界面 设计网页 自动生成的HTML语句 预览网页效果 基本内容区 文本 图像 表格 背景声音 超级链接 文件夹列表 * 建立网站的方法 使用模板建立网站 FrontPage 2003提供了多种网页模板和网站模板，用户可以很方便地建立自己的网站。 自己设计网站 可以先建立一个空白网站或只有一个网页的网站，然后在网站中添加其他网页的方法自己设计。 * 使用模板 模板中预定义了网站的大致内容和布局，并使用某一种主题创建风格一致的网页。主题包含了采用某种配色方案的统一设计元素，包括字体、图形、背景、导航栏、水平线及其他网页元素。 * 自己设计网站 如果从一个空白的网页开始设计，需要进行以下一项或多项操作： 使用框架、表格布局或绝对定位工具来精确定位网页上的文本和图像。 使用颜色或图像来设置网页背景。 应用样式或使用样式表来设置文本格式。 添加文本、图像、网页横幅、表格、表单、超链接等网页元素。 添加Flash内