【商务网站设计教案】网页设计基础大纲

1、第五章 网页设计基础大纲本章概要网页是商务网站的基本组成部分之一。静态网页指超文本标记语言即HTML编写的，可以在Web浏览器下浏览的多媒体文档。本章主要介绍HTML语言基础、静态网页制作和设计。学习要点：l 理解和掌握HTML句法、文档的基本结构和常用的页面元素；了解Dreamweaver的操作界面，能根据网站主题设计出符合要求的静态网页。l 从简单的网页制作入手，经过学习逐步提高到教复杂的网页制作，同时通过实践不断提高自己网页设计的设计理念。课时：45.1 HTML基本知识5.1.1 HTML介绍HTML是英文Hyper Text Markup Language的缩写，中文意思是超文本标记

2、语言。HTML是万维网文档发布和浏览的基本格式，它允许人们透明的共享网络上的信息，即使大家使用的计算机差别很大，所以它具备以下几个特点： 独立于平台，可以在任何的计算机硬件和操作系统上以相似的形式显示文档内容。 .超文本，允许文档中的任何文字或词组参照另一文档，用户可以在不同计算机中的文档之间及文档内部漫游。 精确的结构化文档，允许某些高级应用，如HTML文档和其他格式文档间相互转换以及搜索文本数据库。5.1.2 HTML文档结构一个HTML基本文档是普通的ASCII文本文件，由普通文本和HTML标记构成。HTML是标记的集合，这些标记由“”包含起来，有一些标记是成对出现的。HTML文档可以分

3、成两个部分：文件头和正文。每一部分都用一对特定的标记指出。HTML规范规定和标记文件头部分，而和标记正文部分。下面给出HTML文件的基本格式： 5.1.3 HTML基本标记的使用1. 文档头标记（1）标记（2）标记2.文件体标记3.常用页面标记标记（1）格式标记（2）文字标记（3）文本修饰标记（4）超链接标记（5）滚动标记 (6)表格标记 (7)分项列表标记 (8)图片标记 (9)背景音乐标记5.1.4 HTML标准单位1、长度单位2、颜色单位3、URL路径5.2 网页设计工具5.2.1 网页设计工具网页设计软件有很多。早期最出名的是微软Office软件包系列中的FrontPage ，操作简单

4、明了、视图化的设计界面和可以很方便嵌套其它Office软件文件的特性，使得它很容易被计算机初学者掌握。FrontPage和Office软件包中的其它软件一样，主要提供给非专业人士解决办公自动化方面的问题。同时，微软在面向程序员的Visual Studio软件包中推出InterDev 。InterDev使得网站开发人员能够快速地建立全交互、全动态的站点。由于具有可视化的开发特色和强大的数据库工具，InterDev可以向开发人员提供全面的、技术先进的开发intranet和Internet应用的系统。它主要提供给网络程序员开发动态网站。现在网站开发最广泛使用的是Macromedia公司的Dreamw

5、eaver系列，Dreamweaver MX是Dreamweaver系列中的最新版本。它可以使我们在单机环境下工作，快速创建、建立和管理Web站点。获取Dreamweaver的可视布局工具、Dreamweaver UltraDev 的快速Web应用程序功能以及HomeSite 的代码编辑支持，所有这些都可以在Dreamweaver MX这一完整的集成解决方案中完成。在接下来的小节里，我们将主要学习如何使用Dreamweaver MX制作网页。5.2.2 Dreamweaver的安装5.2.3 Dreamweaver的工作界面5.3 页面设计1.页面设置2.页面布局3.表格使用的原则：5.3.3

6、 文本对象的添加和设置1.文本添加2.文本设置3.网页文字设置原则：5.3.4 图片的插入和设置1.在网页中添加图片2.图片属性设置3.图片使用原则：5.3.5 超链接1.链接的类型2.链接的设置3.锚点链接4.框架链接5.4 网页修饰5.4.1 样式表CSS简介1.基本用语的认识2.CSS的应用方式5.4.2 样式表的创建1.创建步骤5.4.3 样式表修饰页面元素实例1.虚线表格的设计2.超链接文字的特殊样式3.滚动条的特殊样式5.4.4 CSS滤镜1.CSS滤镜简介2.滤镜的使用方法5.5表单和客户端脚本5.5.1 表单1.表单基础2.创建表单5.5.2 客户端脚本1. 客户端脚本2. J

7、avaScript简介5.6 框架和模板框架网页实际上是由框架结构页和一些独立的模块分页来构成。把不变的标题目录做成模块分页，在显示不同内容的时候，可以只改变一些框架内分页内容。框架技术解决了网页重用的难题，同时提高网站设计制作的速度。5.6.1网页框架1.框架的标记和参数2.建立框架页3.内嵌式框架（内联帧）5.6.2模板的应用1.制作和保存模板2.应用摸板3.摸板的更新本章小结本章给出了一个网站静态页面构建的详细步骤。站点文件夹的设立和关联、页面的布局、页面元素的添加和设置，以及页面元素的修饰等。以达到使读者深入学习和掌握网站页面设计相关知识和技术。练习1、如何理解静态页面的概念？2、请说明下列HTML文档体参数的属性和所设颜色起到的作用。3、试举处三个常用的单个标记，其作用是什么？4、什么是CSS ，使用CSS对网页设