大学计算机应用基础教程第9章-网页设计基础.ppt

第九章 网页设计基础 第九章 网页设计基础 第一节 网页制作基础 第二节 用FrontPage 2003制作网页 第三节 用FrontPage 2003建立网站 第四节 动态网页 主要内容： 本章主要介绍网页设计与网站建设的基础知识和基本概念，着重讲述使用可视化制作工具FrontPage 2003制作网页和站点。 第一节 网页制作基础 ●网页与网站 ●网页的相关操作 ●网页制作的素材 ●网页制作的方法 ●网站制作流程 ●网页与网站 网页（Web Page）是一个实实在在的文件，它存储在被访问的Web服务器（如网站服务器）上，通过网络进行传输，被浏览器解析和显示。它使用超文本标记语言（HTML）编写而成，通常又称为HTML文件，其文件扩展名默认为html和htm。 网站（Web Site）通常由众多网页有机地组织起来，为网站用户提供各种各样的信息和服务。网页是网站的基本信息单位。 ●网站的相关操作 一般通过浏览器软件浏览网页。常用的浏览器有Internet Explorer（简称IE）、Netscape Navigator等。 URL(Uniform Resource Locators): 统一资源定位，它是各种资源在Internet上统一的表示方式。网页在Internet上通过URL来指明其位置。 一个完整的URL格式为： 协议名称://服务器的IP地址|服务器域名/路径/文件标识 ●网站的相关操作 1．浏览网页 打开IE浏览器。 在IE浏览器的地址栏处，输入需要浏览的网页地址，按回车键。 ●网站的相关操作 2．保存浏览的网页： 在浏览器中，选择“文件”菜单中的“另存为”命令，打开“保存网页”对话框。选择目标文件夹，并在“文件名”组合框中给网页重新命名。 单击“保存”按钮。 ●网站的相关操作 3．保存浏览图片 将鼠标指向所需图片，单击鼠标右键，在弹出的快捷菜单中，单击“图片另存为”命令，打开“保存图片”对话框。 在“保存图片”对话框中，选择图片保存路径，然后单击“保存”按钮。 ●网站的相关操作 4．查看网页的HTML代码 选择浏览器中“查看”菜单中的“源文件”命令，浏览器将自动运行记事本程序打开网页的源文件，显示其HTML代码。 ●网页制作的素材 制作网页之前，确定网页的主题，然后搜集需要的素材，最后再动手制作。网页制作中通常需要用到的素材及类型如下： 文 图 声 动画和视频 ●网页的制作方法 1．HTML编码 网页文件又称为HTML文件。 HTML文件通过两个尖括号内的标记字符串来实现这些功能。例如HTML、BODY、TABLE。 HTML文件是文本文件，可以用文本编辑器来编辑（如Windows 的记事本、写字板）来编写，只要在保存文件时扩展名使用htm、html等即可。 第十一章 网页设计基础 ●网页的制作方法 1．HTML编码 html head title第一个HTML网页/title /head body h1欢迎进入HTML世界/h1 大家都来学习HTML语言!p 在这里可以学到许多HTML的知识。p /body /html 第十一章 网页设计基础 ●网页的制作方法 2．可视化网页制作 FrontPage：Office自带的一款HTML编辑器，用于对Web站点、Web页和Web应用程序进行设计、编码和开发，操作简单实用，可以让初学者轻松地创建个人网站。 Dreamweaver：这是网页三剑客之一，专门制作网页的工具，界面简单，实用功能比较强大。利用该工具，可以自动将网页生成代码。 ●网站的制作流程 确定网站主题 准备素材 规划网站 创建网页 网页编码 网页链接 发布 第二节 用FrontPage 2003制作网页 ●FrontPage基本功能 ●FrontPage工作界面 ●创建网页 ●文字效果的编排 ●网页中插入图片 ●网页中表格的处理 ●建立超链接 ●网页中的表单 ●FrontPage基本功能 FrontPage 2003是美国微软公司在FrontPage XP的基础上推出的更先进、更高效的网页设计软件，是创建、管理和维护Web网站强有力的工具。 FrontPage 2003采用与Office 2003其他组件相一致的工作界面，具有易于掌握、使用灵活、功能强大等优点，能与其他Windows应用程序高度集成。 FrontPage 2003不仅支持可视化的网页制作，还具有强大的网站创建、维护和发布功能。 ●FrontPage工作界面 ●FrontPage工作界面 FrontPage共有7种视图模式： 网页视图 文件夹视图 报表视图 导航视图 超链接视图 任务视图 远程网站视图 ●创建网页 1．新建网页 启