网页设计教案标准模板.doc

教 学 内 容批注第1章 Dreamweaver介绍1.1 Dreamweaver新增功能简介Dreamweaver是Macromedia公司推出的主页编辑工具。它是一个所见即所得网页编辑器，支持最新的DHTML和CSS标准。采用了多种先进技术，能够快速高效地创建极具表现力和动感效果的网页，使网页创作过程变得非常简单。值得称道的是，Dreamweaver不仅提供了强大的网页编辑功能，而且提供了完善的站点管理机制，可以说，它是一个集网页创作和站点管理两大利器于一身的创作工具。在学习使用Dreamweaver之前，我们先了解Dreamweaver的一些新增功能。1独特的往返HTML功能这个功能可以同步访问设计视图（Design View）和HTML源代码，可以打开用其他编辑器编辑的文档，但它不会改写手工输入的HTML标记或第三方标记。这就使得Dreamweaver自动生成的代码与手工输入的代码融为一体。2整合文本编辑器现在Dreamweaver增加了以代码为中心的新特性。手工编写代码就如设计视图环境一样方便，可以自动缩排、标点平衡、选择多行后一次缩进。可以在使用代码视图工具栏（Code View Toolbar）的下拉列表定义的JavaScript函数之间轻松导航。对于使用JavaScript编程的专业人员来说，这种代码导航无疑是一种高效的导航帮助。输入代码时Dreamweaver自动对HTML和JavaScript 代码使用不同的颜色显示。3把主窗口分割为代码视图和设计试图可以把Dreamweaver的主窗口分割为代码视图和设计试图。能够查看整页代码而无需离开文档窗口。这样，就可以在同一个窗口同时查看代码视图和设计视图，同时编辑多个文档的代码。4JavaScript调试器使用新增的JavaScript调试器，可以直接在浏览器中调试客户端JavaScript脚本，观察JavaScript的执行，就像它在Netscape或IE浏览器中一样，因而能够更好地了解每种浏览器是怎样执行JavaScript的。可以设置断点调试代码，然后在逐步执行代码的过程中观察变量的变化，及时发现编程错误。5编辑非HTML文档可以把Dreamweaver当作文本编辑器编辑非HTML文档，直接在代码视图（Code View）中编辑JavaScript，XML和其他文本文件。1.2 Dreamweaver的工作环境Dreamweaver提供了将全部元素置于一个窗口中的集成工作区。在集成工作区中，全部窗口和面板集成在一个应用程序窗口中。您可以选择面向设计人员的布局或面向手工编码人员需求的布局。启动Dreamweaver 时，会出现一个工作区设置对话框（如下图）：您可以从中选择一种工作区布局。如果您不熟悉编写代码，请您选择“设计者”。如果您以后想更改工作区，可以使用编辑菜单“首选参数”对话框切换到一种不同的工作区。编辑“首选参数”对话框如下图： “插入”栏（如下图）：包含用于将各种类型的“对象”（如图像、表格和层）插入到文档中的按钮。每个对象都是一段 HTML 代码，允许您在插入它时设置不同的属性。例如，您可以通过单击“插入”栏中的“表格”按钮插入一个表格。也可以不使用“插入”栏而使用“插入”菜单插入对象。“文档”窗口 显示您当前创建和编辑的文档。 “属性检查器”（如下图）： 用于查看和更改所选对象或文本的各种属性。“面板组”（如下图） 是分组在某个标题下面的相关面板的集合。若要展开一个面板组，请单击组名称左侧的展开箭头；若要取消停靠一个面板组，请拖动该组标题条左边缘的手柄。“文件”面板（如下图） 使您可以管理您的文件和文件夹，无论它们是 Dreamweaver 站点的一部分还是在远程服务器上。“文件”面板还使您可以访问本地磁盘上的全部文件，类似于 Windows 资源管理器。Dreamweaver提供了多种此处未说明的其他面板、检查器和窗口。若要打开其它面板，请使用“窗口”菜单。1.3 常用工具栏“插入”栏 “插入”栏包含用于创建和插入对象（如表格、层和图像）的按钮。当鼠标指针滚动到一个按钮上时，会出现一个工具提示，其中含有该按钮的名称。某些类别具有带弹出菜单的按钮。从弹出菜单中选择一个选项时，该选项将成为该按钮的默认操作。例如，如果从“图像”按钮的弹出菜单中选择“图像占位符”，下次单击“图像”按钮时，Dreamweaver 会插入一个图像占位符。每当从弹出菜单中选择一个新选项时，该按钮的默认操作都会改变。“插入”栏有以下几个类别：“常用”：使您可以创建和插入最常用的对象，例如图像和表格。 “布局”：使您可以插入表格、div 标签、层和框架。您还可以从三个表格视图中进行选择： “标准”（默认）、“扩展表格”和“布局”。当选择“布局”模式后，您可以使用 Dreamweaver 布局工具：“绘制布局单元格”和“绘制布局表格”。 “表单”：包含用于创建表单和插入表单元素的按钮。 “文本”：使您可以插入各种文本格式设置标签和列表格式设置标签。“HTML”：使您可以插入用于水平线、头内容、表格、框架和脚本的 HTML 标签。 “应用程序”：使您可以插入动态元素，例如记录集、重复区域以及记录插入和更新表单。“Flash 元素”：使您可以插入 Flash 元素。“收藏”：使您可以将“插入”栏中最常用的按钮分组和组织到某一常用位置。文档工具栏 文档工具栏中包含按钮，这些按钮使您可以在文档的不同视图间快速切换：“代码”视图、“设计”视图、同时显示“代码”和“设计”视图的拆分视图。 工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。以下对图中的指引进行说明：代码视图：仅在“文档”窗口中显示“代码”视图。设计视图：仅在“文档”窗口中显示“设计”视图。拆分视图：在“文档”窗口同时显示“代码”视图和“设计”视图。标 题： 可以直接在此处为文档设定标题，它将显示在浏览器的标题栏中。没有浏览器/检查错误：使您可以检查跨浏览器兼容性。在浏览器中预览/调试：在浏览器中预览或调试文档。从弹出菜单中选择一个浏览器。文件管理：显示“文件管理”弹出菜单。刷 新 ：当您在“代码”视图中进行更改后刷新文档的“设计”视图。视图选项：允许您为“代码”视图和“设计”视图设置选项。 状态栏 状态栏提供与您正创建的文档有关的其它信息。标签选择器 显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签以选择该标签及其全部内容。比如：单击 可以选择文档的整个正文。窗口大小 弹出菜单（仅在“设计”视图中可见）用来将“文档”窗口的大小调整到预定义或自定义的尺寸。“窗口大小”弹出菜单的右侧是页面的文档大小和估计下载时间。1.4 标尺和网格在网页排版的过程中，如果希望对元素精确定位，则标尺和网格是非常有用的工具。1显示标尺在文档窗口中，默认状态下不显示标尺，如果需要显示标尺，以便排版，可使用以下方法：在文档窗口中，选择“视图选项”命令，选中“标尺”。如图：2显示网格在文档窗口中，默认状态下不显示网格，如果需要显示网格，以便精确布局，可使用以下方法。在文档窗口中，选择“视图选项”命令，选中“标尺”，则在文档窗口中显示网格。显示网格之后的文档窗口如图所示：1.5 快捷键在运用Dreamweaver的过程中，熟练的使用快捷键，能达到事半功倍的效果，而且是“高手”的体现在这里我把Dreamweaver的快捷方式整理出来，希望对学员熟练掌握Dreamweaver有所帮助。文件菜单 新建文档Ctrl+N 打开文件Ctrl+O或者将文件从文件管理器或站点窗口拖动到文档窗口中 在框架中打开 Ctrl+Shift+O 关闭 Ctrl+W 保存 Ctrl+S 另存为Ctrl+Shift+S 检查链接Shift + F8 退出Ctrl+Q 编辑菜单 撤消Ctrl+Z 重复Ctrl+Y 或 Ctrl+Shift+Z 剪切Ctrl+X 或Shift+Del 拷贝Ctrl+C 或Ctrl+Ins 粘贴Ctrl+V 或Shift+Ins 清除Delete 全选Ctrl+A 选择父标签Ctrl+Shift+ 查找和替换Ctrl+F 查找下一个F3 缩进代码 Ctrl+Shift+ 左缩进代码Ctrl+Shift+ 平衡大括弧Ctrl+ 启动外部编辑器Ctrl+E 参数选择Ctrl+U 页面视图 标准视图Ctrl+Shift+F6 布局视图Ctrl+F6 工具条Ctrl+Shift+T 查看页面元素 可视化助理Ctrl+Shift+I 标尺Ctrl+Alt+R 显示网格Ctrl+Alt+G 靠齐到网格Ctrl+Alt+Shift+G 头内容Ctrl+Shift+W 页面属性Ctrl+Shift+J 代码编辑 切换到设计视图Ctrl+Tab 打开快速标签编辑器Ctrl+T 选择父标签Ctrl+Shift+“新建”，弹出如下对话框：从各种预先设计的页面布局中选择一种。比如：选择“基本页”HTML，点击创建按钮。Dreamweaver即展开工作区界面（一个空白页）：您可以在这个空白页添加表格和输入文本进行编辑。如果您要向页面添加图片或其它元素，应先保存这个空白页。1.8 页面制作引例现在，以下边的简单网页为例，叙述一下制作过程。简单网页如下图： 在开始制作之前，我们先对这个页面进行一下分析。看看这个页面用到了那些东西。 网页顶端的标题是“美丽景色网站”。 网页中间是一幅图片。 最下端的欢迎词是一段文字。 网页背景是粉颜色。知道了这个网页的结构以后我们就来可以制作了。首先启动Dreamweaver，确保你已经用站点管理器建立好了一个网站（根目录）。为了制作方便，请您事先打开资源管理器，把要使用的图片收集到网站目录images文件夹内。 【插入标题文字】进入页面编辑设计视图状态。在一般情况下，编辑器默认左对齐，光标在左上角闪烁，光标位置就是插入点的位置。如果要想让文字居中插入，点属性面板居中按钮即可。启动中文输入法输入“美丽景色”四个字。字小不要紧，我们可以对它进行设置。【设置文字的格式】 选中文字，在上图属性面板中将字体格式设置成默认字体，大小可任意更改字号。并选中“B”将字体变粗。【设置文字的颜色】首先选中文字，在属性面板中，单击颜色选择图标，在弹出的颜色选择器中用滴管选取颜色即可。【设置网页的标题和背景颜色】 点击“修改”菜单选“页面属性”。系统弹出页面属性对话框（如下图）请在标题输入框填入标题“美丽景色网站”。设置背景颜色：网页背景可以是图片，也可以是颜色。此例是颜色。如上图打开背景颜色选择器进行选取。如果背景要设为图片，点击背景图象“浏览”按钮，系统弹出图片选择对话框，选中背景图片文件，点击确定按钮。设计视图状态，在 “美丽景色”右边空白处单击鼠标，回车换一行，按照以下的步骤插入一幅画图片，并使这张图片居中。您也可以通过属性面板中的左对齐按钮让其居中。【插入图像】选择以下任意一种方法：(1) 使用插入菜单：在“插入”菜单选“图像”，弹出“选择图像源文件”对话框，选中该图像文件，单击确定。如下图：(2) 使用插入栏（如下图）：单击插入栏对象按钮选 按钮，弹出“选择图像源文件”对话框，其余操作t上。（3）使用面板组“资源”面板（如下图）：点按钮，展开根目录的图片文件夹，选定该文件，用鼠标拖动至工作区合适位置。注：为了管理方便，我们把图片放在“images”文件夹内。如果图片少，您也可以放在站点根目录下。注意文件名要用英文或用拼音文字命名而且使用小写，不能用中文，否则要出现一些麻烦。 一个图片就插入完毕了。（插入*.swf动画文件，选择“插入”菜单媒体Flash）。【输入欢迎文字】在图片右边空白处单击，回车换行。仍然按照上述方法，输入文字“欢迎浏览”然后，利用属性面板对文字进行设置。保存页面。【预览网页】一个简单的页面就这样编辑完毕了。在页面编辑器中按F12预览网页效果。网站中的第一页，也就是首页，我们通常在存盘时取名为index.htm。【小结】在今天的教程中我们制作了一个简单的网页。内容有四：图片插入和对齐设置；文字的格式、颜色和加粗等设置；背景颜色的设置；预览网页，查看实际效果。 不仅要掌握还要举一反三反复练习。第二章 CSS概述一、xhtml css基础知识1）文档类型当我们用dreamweaver新建一下html格式文档时，查看源代码，会发现代码最上部有如下这句话：这句话标明本文档是过渡类型，另外还有框架和严格类型，目前一般都采用过渡类型，因为浏览器对XHTML的解析比较宽松，允许使用HTML4.01中的标签，但必须符合XHTML的语法。许多朋友在制作页面时，往往喜欢把这句删除掉，在这里建议大家一定要保留这句话，删除它后可能引起某些样式表失效或其它意想不到的问题。2）语言编码接下来我们还会发现这样一句话：它标示文档的语言编码。就像我们平时所说的汉语、英语一样。这里的gb2312告诉浏览器，本文档采用简体中文编码；还有一种常用的编码是UTF-8编码，它是国际通用的编码。不管我们采用哪种编码，有一点就是包含的css样式表和其它文件也必须和本文档的编码一样，要不就会出现乱码。 3）html标签html标签在页面中都必须结束。成对的标签以“/标签名”结束，有些单一的标签在本身的结尾打上/来结束，这是xhtml代码编写的规范。成对的标签：.单一的标签：.还需说明一点的是按xhtml规范，标签必须用小写。4）css样式比方说，我们要用红色作为网页的背景色： 用HTML的话，我们可以这样： 用CSS的话，我们可以这样获得同样的效果： body background-color: #FF0000; 你会注意到，HTML和CSS的代码颇有几分相似。上例也向你展示了基本的CSS模型： 但是把CSS代码放在哪里呢？这正是我们下面要讲的。为一个HTML文档应用CSS为HTML文档应用CSS，有三种方法可供选择。下面对这三种方法进行了概括。我们建议你对第三种方法（即外部样式表）予以关注。 方法1：行内样式表（style属性） 为HTML应用CSS的一种方法是使用HTML属性style。我们在上例的基础之上，通过行内样式表将页面背景设为红色： 例子 这个页面是红色的 方法2：内部样式表（style元素） 为HTML应用CSS的另一种方法是采用HTML元素style。比如像这样： 例子 body background-color: #FF0000; 这个页面是红色的 方法3：外部样式表（引用一个样式表文件） 我们推荐采用这种引用外部样式表的方法。在本教程之后的例子中，我们将全部采用该方法。外部样式表就是一个扩展名为css的文本文件。跟其他文件一样，你可以把样式表文件放在Web服务器上或者本地硬盘上。 例如，比方说你的样式表文件名为style.css，它通常被存放于名为style的目录中。就像下面这样：现在的问题是：如何在一个HTML文档里引用一个外部样式表文件（style.css）呢？答案是：在HTML文档里创建一个指向外部样式表文件的链接（link）即可，就像下面这样： 注意要在href属性里给出样式表文件的地址。 这行代码必须被插入HTML代码的头部（header），即放在标签和标签之间。就像这样： 我的文档 .这个链接告诉浏览器：在显示该HTML文件时，应使用给出的CSS文件进行布局。这种方法的优越之处在于：多个HTML文档可以同时引用一个样式表。换句话说，可以用一个CSS文件来控制多个HTML文档的布局。这一方法可以令你省去许多工作。例如，假设你要修改某网站的所有网页（比方说有100个网页）的背景颜色，采用外部样式表可以避免你手工一一修改这100个HTML文档的工作。采用外部样式表，这样的修改只需几秒钟即可搞定修改外部样式表文件里的代码即可。 让我们来实践刚刚所学到的知识。 自己试试看打开记事本（或其他文本编辑器），创建两个文件一个HTML文件，一个CSS文件它们的内容如下：default.htm 我的文档 我的第一个样式表 style.cssbody background-color: #FF0000; 然后，把这两个文件放在同一目录下。记得在保存文件时使用正确的扩展名（分别为“htm”和“css”）。用浏览器打开default.htm，你所看到的页面应该具有红色背景。恭喜！你已经完成了自己的第一个样式表！5）css优先级id优先级高于class 后面的样式覆盖前面的 指定的高于继承 行内样式高于内部或外部样式 总结：单一的(id)高于共用的(class)，有指定的用指定的，无指定则继承离它最近的6）css盒模型组成css盒模型是本节教程的重点。前面几个知识点，如果您会用表格布局的话，就非常好理解和掌握了。这里的盒模型是和table布局的一个不同点。学习web标准，首先要弄懂的就是这个盒模型，这就是DIV排版的核心所在。传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。这种排版方式的网页代码简洁，表现和内容相分离，维护方便，能兼容更多的浏览器，比如PDA设备也能正常浏览。那么它为什么叫盒子呢？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。 我们可以把它想像成现实中上方开口的盒子，然后从正上往下俯视，边框相当于盒子的厚度，内容相对于盒子中所装物体的空间，而填充呢，相当于为防震而在盒子内填充的泡沫，边界呢相当于在这个盒子周围要留出一定的空间，方便取出。是不是这样就很容易理解盒模型了。所以整个盒模型在页面中所占的宽度是由左边界+左边框+左填充+内容+右填充+右边框+右边界组成，而css样式中width所定义的宽度仅仅是内容部分的宽度，这是许多朋友容易搞混的地方这里的边界我们也称之为：外边距、外补丁；填充也叫：内边距、内补丁。如果现在您对CSS盒模型理解还不够透彻，继续往下看，后来的章节会都会应用到盒模型实例。二、如何开始学习web标准？1）有HTML和CSS基础学习本系列教程前，要求您有一定的html和css基础，制作过网页，会用表格进行网页布局，这样学习起来才会很轻松。如果您对这些还不懂，建议先学习这些知识，然后再来学习本教程。2）转变观念在以前我们制作网站时，总是习惯于先考虑外观、颜色、字体及布局等所有表现在页面上的内容。但外观并不是最重要的，相反最终用户在访问网页时的体验才是优先要考虑的。一个由divcss布局且结构良好的页面可以通过css定义成任何外观，在任何网络设备上（包括手机、PDA和计算机）上以任何外观表现出来，而且用divcss布局构建的网页以够简化代码，加快显示速度。所以要想学好divcss，首先要转变观念，需要抛弃传统的表格(Table)布局方式，采用层(DIV)布局，并且使用层叠样式表(CSS)来实现页面的外观。给网站浏览者更好的体验。3）多动手、多动脑说到这点，有点小儿科了，就像我们上小学时老师常常教我们的那样。稍微动下脑筋就明白了，或者自己动手一试就知道了，但他就懒得试。举个简单的例子，拿浏览器兼容来说吧，你写个样式之后，在IE和火狐分别打开看一下不就明白了，但就是不去做。一定要多动手、多动脑，不要怕麻烦。另外在学习完一节教程后，一定要自己做一遍实例，这样能更快掌握。第三章 CSS控制文字和图像本章将学习字体以及如何用CSS来设置字体。如何解决“网站所选的字体仅当访问者的PC上安装有该字体时才会被显示”这一难题。本课将对下列CSS属性进行讲解： font-family font-style font-variant font-weight font-size font 字体族font-familyCSS属性font-family的作用是设置一组按优先级排序的字体列表，如果该列表中的第一个字体未在访问者计算机上安装，那么就尝试列表中的下一个字体，依此类推，直到列表中的某个字体是已安装的。 有两种类型的名称可用于分类字体：字体族名称（family-name）和族类名称（generic family）。下面来解释这两个术语。 字体族名称（family-name） 字体族名称（就是我们通常所说的“字体”）的例子包括“Arial”、“Times New Roman”、“宋体”、“黑体”等等。 族类（generic family） 一个族类是一组具有统一外观的字体族。sans-serif就是一例，它代表一组没有“脚”的字体。 下面我们通过三个族类的例子来进行解释：你在给出字体列表时，自然应把首选字体放在前面、把候选字体放在后面。建议你在列表的最后给出一个族类（generic family），这样，当没有一个指定字体可用时，页面至少可以采用一个相同族类的字体来显示。 下面是一个按优先级排列的字体列表的例子： h1 font-family: arial, verdana, sans-serif; h2 font-family: Times New Roman, serif; h1标题将采用Arial字体显示。如果访问者的计算机未安装Arial，那么就使用Verdana字体。假如Verdana字体也没安装的话，那么将采用一个属于sans-serif族类的字体来显示这个h1标题。 注意我们为“Times New Roman”采用的写法：因为其中包含空格，所以我们用引号将它括起来。 字体样式font-style CSS属性font-style定义所选字体的显示样式：normal（正常）、italic（斜体）或oblique（倾斜）。在下例中，所有h2标题都将显示为斜体。 h1 font-family: arial, verdana, sans-serif; h2 font-family: Times New Roman, serif; font-style: italic;字体变化font-variant CSS属性font-variant的值可以是：normal（正常）或small-caps（小体大写字母）。small-caps字体是一种以小尺寸显示的大写字母来代替小写字母的字体。不太明白？我们来看几个例子： 如果font-variant属性被设置为small-caps，而没有可用的支持小体大写字母的字体，那么浏览器多半会将文字显示为正常尺寸（而不是小尺寸）的大写字母。h1 font-variant: small-caps; h2 font-variant: normal; 字体浓淡font-weight CSS属性font-weight指定字体显示的浓淡程度。其值可以是normal（正常）或bold（加粗）。有些浏览器甚至支持采用100到900之间的数字（以百为单位）来衡量字体的浓淡。 p font-family: arial, verdana, sans-serif; td font-family: arial, verdana, sans-serif; font-weight: bold; 字体大小font-size 字体的大小用CSS属性font-size来设置。 字体大小可通过多种不同单位（比如像素或百分比等）来设置。在本教程中，我们将关注于最常用和最合适的单位。比如： h1 font-size: 30px; h2 font-size: 12pt; h3 font-size: 120%; p font-size: 1em; 上面四种单位有着本质的区别。px和pt将字体设置为固定大小，而%和em允许页面浏览者自行调整字体的显示尺寸。有些页面浏览者可能是残疾者、年长者、视力不佳者，或者他所使用的电脑显示屏显示质量差。为了令你的网站对所有人都具有良好的可用性（accessibility），你应采用像%或em这种允许用户调节字体显示大小的单位。下面你能看到我们展示如何在Mozilla Firefox和Internet Explorer里调整字体大小。自己试试看！这个功能很不错吧？缩写font CSS属性font是上述各有关字体的CSS属性的缩写用法。 比如说下面四行应用于p元素的代码： p font-style: italic;font-weight: bold;font-size: 30px;font-family: arial, sans-serif; 如果用font属性的话，上述四行代码可简化为： p font: italic bold 30px arial, sans-serif; font属性的值应按以下次序书写： font-style | font-variant | font-weight | font-size | font-family 记住：CSS的一个主要优势就是可以在任何时候设置字体，你花几分钟就可以改变整个网站的字体。CSS节省时间，而且把事情简化。文本 文本的显示格式与式样对于网页设计师来说是一个重要问题。这一课将向你介绍CSS在文本布局方面令人激动