第一篇：《网页制作》公共课简易教案
网页和网站
我们将平时在浏览器(IE)上看到的每一个页面称为网页，而在同一个域名地址下的网页的集合称为网站，网站可以只有一个简单网页，也可以由一系列网页文档互相链接而成。网站建设的一般步骤
网站建设是一件复杂的工程，如果不能合理的安排工作流程，可能会造成许多不必要的麻烦。对于不同的建站目标制作流程会略有不同，或者在建站过程中有一些交叉，但大体遵循以下的基本流程：
2.1．需求分析
在软件设计中经常提及需求分析这样的概念。网站建设也是一样，只有在充分的沟通了解网站建设的目标、意义、用户群以及更新需求，才能决定网站要使用怎样的技术手段，以及如何定位等。
2.2网站定位
根据需求分析，我们可以给站点一个较为准确的定位，即建站的目的、传达的主题、内容涉及范围等等。
2.3规划整体结构
这个阶段，要把对站点定位的感性认识转化为站点的网页结构、配色、层次结构和链接等具体内容。并且，可能的话列出几种方案供选择。网页制作
站点中的每一个网页既互相联系呼应但又都不尽相同，为了保持整个站点页面的一致性，也为了访问者更方便的浏览站点页面，制作网页时要注意一下几个问题：
3.1．导航
一个站点通常包含不止一个页面，按照页面所体现的内容，可以把站点的页面按照不同的栏目来归类。导航就是用来体现归类的结果，并且实现在技术上分门别类的显示相关网页。所以网站的导航一般都放置在比较显眼的位置（上部或左侧），以保证访问者能随时根据导航在站内页面间跳转。
3.2链接
链接是对导航的一个扩充，页面上的许多元素上都可以做链接。链接可以在新浏览器窗口打开，也可以将原来窗口的内容替换掉，所以一般来说要设置返回上一页以及返回首页的链接，以方便访问者调整自己在站点中的位置，更大范围的访问站内的信息。
3.3页面的布局
在制作网页时如果只是将页面元素做无序的堆砌，即便再美好的文字，再华丽的图片也不容易让人接受。如何组织页面上的元素，就是布局要解决的问题。布局就是将页面有条理的划分为若干个部分，分别放置导航栏、主题图片或者成段的文字等。好的布局会让访问者很容易的在网站上找到所需要的信息。常见的布局形式有：
（1）框型结构：框型结构如图3.1所示，其页面顶部为广告条，下方左侧为导航，右侧显示主要内容，下方为版权信息。这是网页设计中用的最广泛的一种布局方式。这种布局的优点是页面主次分明、结构清晰，是初学者最容易上手的布局方法。
图3.1框型结构布局
（2）口型结构：这是一个象形的说法，其结构如图3.2所示。页面上方为广告条，下方为版权信息，左面是导航，右面放置友情连接等，中间是主要内容。这种布局的优点是充分利用版面，信息量大；缺点是页面拥挤。也有将四边空出，只用中间的窗口型设计。
图3.2 口型结构布局
（3）T型结构：这种结构如图3.3所示，该布局适合于内容比较简洁的页面。页面上方为导航和广告条，下方为版权信息，中间留出大部分的空白突显主要内容。
图3.3 T型结构布局
4网站测试
在对站点内每个网页设计的过程中都要先在浏览器上进行测试。最终整个站点也要测试，测试的内容包括：链接是否正确、页面在不同浏览器和平台上显示的效果、网页打开速度、文件下载速度等。网站建设实例
在Dreamweaver 8中，“站点”一词既表示Web站点，又表示属于Web 站点的文件的本地存储位置。在开始构建Web站点之前，需要建立站点文件的本地存储位置。
5.1 创建站点
启动Dreamweaver 8，单击【站点】菜单，选择【管理站点】，打开“新建站点”对话框。
在【您打算为您的站点起什么名字】文本框中，输入任何您喜欢的名字，比如“我的简历”。【您的站点的HTTP地址是什么】文本框可不填。
单击【下一步】，由于我们这里以静态站点为例，所以在【您是否打算使用服务器技术】单选按钮组中选择“否”，如果是动态站点则选“是”，并且选择一个相应的服务器技术。
单击【下一步】，在【您把文件夹存储在计算机上什么位置】文本框末尾单击“浏览”按钮设置站点目录。注意：文件夹名字要为英文名。
单击【下一步】，在【您如何连接到远程服务器】下拉列表中选择“无”，暂不设置使用远程服务器。
单击【下一步】，确认站点相关信息。最后单击【完成】成功创建站点。此时，在【文件】面板中即可看见我们创建的站点“我的简历”及其目录结构。
5.2 页面属性
设置页面的属性，有2种方法。一种是“属性面板”，可以设置具体的对象属性，如：一段文字的格式、图片的大小、具体的超级链接等。一种是“页面属性”，就是设置页面的整体属性，包括字体大小、背景颜色、标题等。
方法一：属性面板
方法二：页面属性
在对话框左侧【分类】列表中选择【外观】选项，相应的参数设置就会显示在右侧区域。在该对话框中可设置网页中的文本字体样式、文字大小、文字颜色、页面背景颜色、页面背景图像以及边距等。
在对话框左侧【分类】列表中选择【链接】选项，相应的参数设置就会显示在右侧区域。在该对话框中可以设置页面的链接字体、大小、链接颜色、变换图像链接、已访问链接、活动链接和下划线样式。
在对话框左侧【分类】列表中选择【标题/编码】选项，相应的参数设置就会显示在右侧区域。在该对话框中可以设置页面的文档标题、文档类型和编码类型。
5.3布局网页
在制作网页之前应该用纸笔或者直接在word文档中设计出网页的布局草图，在草图中标明网页中各种元素的位置。这一步不是必须的，但是，设计好布局草图可以避免后续步骤中调整网页布局造成的麻烦。
5.3.1布局模式
布局网页的方法很多，用表格、层、框架都可以布局网页。我们这里只介绍最规范的一种方法，即布局模式。
在“插入”栏的“布局”选项卡中含有“标准”、“扩展”和“布局”3种布局模式，如下图所示。单击“布局”按钮可以将文档窗口切换到布局模式。
布局模式下有“布局表格”和“布局单元格”两个布局工具。可以在一个布局表格中使用多个布局单元格对网页进行布局，这是进行网页布局最常用的方法。也可以使用多个单独的布局表格进行不规则的、更复杂的布局。
5.3.2布局步骤与实例 1.画布局表格
单击【布局表格】按钮，鼠标变成十字形，在文档编辑区左上方按住鼠标不放，先拖开一个大小随意的矩形框，然后在编辑区下方的属性面板的“宽”和“高”属性中分别修改数值为983和700（像素）。可以通过设置“背景颜色”，来预览一下外观。
2.画布局单元格
根据草图中所有页面元素的位置以及占用页面大小，按照从上到下、从左到右的基本原则，逐一绘制布局单元格。单击【布局单元格】按钮，鼠标变成十字形，在布局表格左上方按住鼠标不放，拖开一个矩形框，拖动到“200×160”时，放开鼠标即可，如下图所示。虽然布局单元格也可以先随意绘制，再通过属性面板调整，但相邻的单元格在调整大小的时候如果操作不当可能会互相影响，需小心操作。
3.设置表格边框
由于在布局视图下是不能设置表格边框的，所以先退出布局视图，进入标准视图。在文档编辑区左下方的【标签选择器】上单击
| 内部。如下图： | 标签，选中该单元格。 ④ 鼠标移动到【CSS样式面板】上，右击“.style1”规则，在弹出的快捷菜单中选择【套用】。⑤ 重复③和④中的操作，逐一将“.style1”规则应用到接下来的几个单元格中去。⑥ 保存并预览，其效果如图5.5.4所示。 图5.5.3 表格边框设置 图5.5.4效果预览 注意：在Dreamwaver 8中，上一个单元格的下边框和下一个单元格的上边框的属性值效果是可以叠加的。对于相邻的两个单元格，在设置边框的时候需要考虑到这点。 （2）长文本行距、缩进调整的设置步骤如下： ① 在【CSS样式面板】右击“border.css”，选择【新建】创建一个新的CSS规则，命名为“.style5”。 ② 双击“.style5”，打开“CSS规则定义”对话框。③ 分别设置以下参数： ·在【分类】列表框中选择【类型】，设置【行高】为25像素； ·在【分类】列表框中选择【区块】，设置【文字缩进】为30像素； ·在【分类】列表框中选择【方框】，设置【边界】左、右各10像素。④ 单击【确定】关闭“CSS规则定义”对话框。 ⑤ 选中图11.21中的“自荐信”下方单元格中的两段长文本。 ⑥ 鼠标移动到【CSS样式面板】上，右击“.style5”规则，在打开的快捷菜单中选择【套用】。 ⑦ 保存并预览，其效果如图5.5.5所示。 图5.5.5 长文本行距调整效果预览 5.6使用模板 模板，它能帮助我们快速定制网页的风格，并由模板生成其他页面，从而避免了许多重复性的工作。制作模板与制作其他页面基本相同，只是模板不需要把页面的所有内容都完成，而只要把导航条、标题栏等各个页面相同的部分制作出来就可以了，其他部分则由模板生成具体页面时再设置。 1．创建模板 模板的后缀名是.dwt，保存模板时Dreamwaver 8会在站点目录下自动生成一个名为“Templates”的文件夹，用以保存模板文件。生成模板的步骤如下： （1）按照制作普通网页的方法，制作一个页面。（2）将该页面另存为模板，如果弹出警示对话框询问【要更新链接吗？】时，单击“是”。这时在站点目录下将出现一个名为Templates的文件夹，且包含了一个名为“filemod.dwt”的模板文件。 2．创建可编辑区 模板创建后还不能够直接使用，要先进行模板的编辑，主要是创建可编辑区。通过模板生成的新网页，只能更改可编辑区的内容，其余部分总是与模板中的相应部分完全一样。 创建可编辑区的步骤如下： （1）打开模板文件，选择一个希望在生成页面中可被编辑的元素。 （2）切换到“插入”栏的【常用】选项卡，单击【模板】按钮，选择【可编辑区域】，如图5.6.1所示。 图5.6.1 【可编辑区域】按钮 （3）在打开的如图5.6.2所示的“新建可编辑区域”对话框中输入可编辑区域的名称，最后单击【确定】按钮。 图5.6.2 命名可编辑区 （4）重复上述过程逐一创建并命名模板中的可编辑区域，最后保存并关闭模板文件。最终生成的模板文件如图5.6.3所示，图中的“Edit Region1”、“Edit Region2”等就是可编辑区。 图5.6.3 生成的模板文件及可编辑区 3．应用模板创建网页 基于模板创建网页的操作步骤如下：（1）单击【文件】菜单，选择【新建】，打开如图5.6.4所示的“新建文档”对话框。（2）切换到【模板】选项卡，在【模板用于】列表中选择“我的简历”站点，并选择站点模板“filemod”。 图5.6.4 “从模板新建”对话框 （3）单击【创建】按钮即可生成一个新页面。 通过模板创建的页面在文档编辑区的四周为淡黄色，且其右上角显示“模板：filemod”字样。鼠标移动至非可编辑区域时呈锁定状态，既不可选取也不可单击。 4．更新模板 不管从模板生成多少网页，这些网页在可编辑区域中可随意添加、编辑、删除页面元素。但是它们的共同部分——不可编辑区域，却严格遵守模板的统一设计。反过来，如果模板改变了，那么通过模板创建的各个页面也可以实现同步更新。 对模板的修改，只需打开模板文件，按照普通页面那样随意修改。修改后保存模板时Dreamwaver 8自动打开如图5.6.5所示的“更新模板文件”对话框，提示是否更新站点中所有基于此模板的页面。选择“更新”将更新所示基于此模板的页面；选择“不更新”则所有页面仍将基于原始模板。 图5.6.5 “更新模板文件”对话框 第二篇：《网页制作》教学大纲简易教案《网页制作》教学大纲简易教案 网站开发流程 规划 确定建设网站的目标； 分析目标用户及潜在用户对站点的需求； 3 确定网站风格； 4 考虑网络的技术问题。 设计 页面布局； 2 网页中的颜色； 文字、图像、动画以及多媒体的使用。 制作 测试与发布 维护 第一章 站点管理 站点：一系列文件的组合，通过各种链接关联起来，实现对整个站点的浏览。 设置站点信息 一，基本思路： 1，对站点进行规划 2，创建站点的基本结构 站点结构的显示方式：目录结构和站点地图 3，组织文件和资料开始制作 二，定义站点： 步骤：站点－新建站点－对站点进行定义 三，新建网页（站点中所包含的所有网页文件）和文件夹（用来存放网页中的图片、声音、Flash等） 四，设置站点地图布局 第二章 文字、图片和超链接 网页中最多的就是文字，并伴有精美的图片来美化网页，本章主要阐述如何使用菜单、插入面板在文档中插入这些对象以及使用属性面板编辑这些对象的属性。 一，设置页面属性（Ctrl+J，也可在属性面板中找到）： 在页面属性中分别对外观、链接和标题进行设置 二，文字 可在属性面板中对文字的样式、大小等进行设置。三，插入图像 方法1，插入－图像； 方法2，常用－图像； 方法3，Ctrl+Alt+I。四，设置超链接 1，页面链接 2，邮件链接（mailto:） 3，书签链接（对同一网页的不同部分进行链接）4，空链接（＃） 第三章 表格和层的应用 一，设置网页布局和处理表格 网页布局：给将要出现在网页中的所有元素进行定位。绘制布局表格和布局单元格： 方法：布局－切换到布局视图－点击布局表格or布局单元格按钮－拖动创建－在属性面板设置属性。 注意：布局表格和布局单元格之间不能相互重叠。 表格：表格是在网页中放置行列数据和图像的最佳工具。插入表格：常用－表格－设置行，列数－插入 拆分，合并单元格：选中要拆分或要合并单元格－属性面板中进行操作 设置表格和单元格的属性：属性面板中进行操作。 二，添加层 层是一种页面元素定位技术，它能够将层中的内容在浏览器窗口中任意定位。层是一个载体，在层中可以添加文本，图像和表格等元素。方法：布局－点击层按钮－拖动创建－在属性面板设置层属性。 第四章 模板 所谓“模板”是指具有一定共性的文档样板。 模板用于创建多个具有一致风格的网页，用户可根据模板生成大量相同的页面。新建网页模板（.dwt） 1,将已有文档另存为模板： 步骤：打开已有文档； 文件－另存为模板； 在出现的对话框中选择站点，给模板命名； 保存。 2，新建空白模板 步骤：窗口－资源（F11）； 模板－新建模板； 输入模板名－编辑。 定义模板的可编辑区域 模板包括：1，可编辑区域（具有可变内容） 2，锁定区域（具有静态不变内容）默认 1，将已有内容定义为可编辑区域： 步骤：选择要定义为可编辑区域的文本或内容； 插入－模板对象－可编辑区域； 输入区域名； 确定。 2，定义新的可编辑区域： 步骤：定位光标； 同上。 取消区域标记： 步骤：打开已有模板； 选中已有可编辑区域，修改－模板－删除模板标记。 注意：删除模板标记之后的区域将被锁定。 基于模板生成新网页 方法1：文件－新建，选择模板标签，选一个模板－创建。方法2：新建一个文档，修改－模板－应用模板到页。 方法3：新建一个文档，窗口－资源－模板，将所需模板直接拖动到新文档中。 第三篇：网页制作教案网页制作与设计教案 第一讲 网页设计概述....................................................................................................................3 1.1WWW和URL.....................................................................................................................3 1.2IE5的使用............................................................................................................................3 1.3 网页中所使用的技术............................................................................................................4 1.4 制作网页的基本方法............................................................................................................4 第二讲 HTML的基本标志与格式标志.......................................................................................4 2.1 HTML文档的基本结构.........................................................................................................5 第三讲 HTML的文本、图片与超级链接标志...........................................................................5 2.2 插入文字................................................................................................................................6 2.3 插入图片................................................................................................................................8 2.4 建立超级链接........................................................................................................................8 第四讲 HTML表格、表单与框架标志.......................................................................................9 2.5 插入表格................................................................................................................................9 2.6 表单的应用..........................................................................................................................10 2.7 框架窗口..............................................................................................................................10 第五讲 HTML标志综合运用案例.............................................................................................11 第六讲 DREAMWEAVER中简单WEB站点建立与管理.....................................................12 3.1 DREAMWEAVER概述............................................................................................................12 第七讲 DREAMWEAVER中静态网页设计.............................................................................13 3.2 在页面中加入文字和图像..................................................................................................14 3.3 超级链接的运用..................................................................................................................14 3.4.表格的应用.........................................................................................................................14 3.5.在网页中创建表单.............................................................................................................15 第八讲 DREAMWEAVER中动态网页设计.............................................................................15 第九讲 DREAMWEAVER综合性网页设计案例.....................................................................16 第十讲 VBSCRIPT概述.............................................................................................................17 4.1 VBSCRIPT语言简介.............................................................................................................17 第十一讲 VBSCRIPT的基本元素与输入输出.........................................................................18 4.2.基本数据类型.......................................................................................................................18 4.2.表达式和运算符.................................................................................................................19 第十二讲 VBSCRIPT的条件语句、循环语句和过程.............................................................20 4.3 VBSCRIPT基本语句.............................................................................................................20 第一讲 网页设计概述 【教学内容】 讲解网页设计的相关术语及网站制作的基本流程。【教学目的】 使学生对网站及网页有一定的认识，激发学生学习网页设计的兴趣。【教学重点】 网页设计中的若干术语。【教学难点】 理解网页设计中的若干术语。【教学方式】 讲授式、讨论式、案例分析式。【教学参考】 1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。 2、《Internet 网页工场》Wittime工作室 重庆出版社。 3、《WEB网站设计》Joel Sklar著 高等教育出版社。 4、《HTML网页制作教程》材义语编著 铁道出版社。【新课内容】 1.1 WWW和URL 1.1.1 Web的起源 Web是World Wide Web的简称，一般也称之为WWW或3W 1.1.2 Web的特点和结构 Web最大的特点是使用了超文本（Hypertext）WWW采用C/S（客户机/服务器）工作模式 在浏览器和服务器之间应用HTTP（Hyper Text Transfer Protocol，超文本传输协议）作为网络应用层通信协议 1.1.3 URL URL的完整格式 协议://主机名或IP地址：端口号/路径名/文件名 1.2 IE5的使用 Web浏览器是浏览Internet资源的客户端软件 在Windows环境下使用的浏览器主要有Internet Explorer、Netscape Navigator、Mosaic等 1.2.1 IE5的界面 1.2.2 IE5的使用 列表标志的使用。【教学方式】 讨论式、案例分析式、练习式。【教学参考】 1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。 2、《WEB网站设计》Joel Sklar著 高等教育出版社。 3、《HTML网页制作教程》材义语编著 铁道出版社。【新课内容】 2.1 HTML文档的基本结构 2.1.1 HTML语法 1、双标记 语法： <标记>内容 2、单标记 语法：<标记> 最常用的单标记是 3、标记属性 语法 <标记 属性1 属性2 属性3 … > 例子 4、注释语句 格式 例子 2.1.2 HTML文档的基本结构 【课后小结】 通过本次课的学习,要求能熟练掌握网页面的基本标志与格式标志,并能灵活运用 列表,有序列表,无序列表标志及属性。 第三讲 HTML的文本、图片与超级链接标志 【教学内容】 讲解HTML标准中的文本、图片与超级链接标志 【教学目的】 * 使学生了解标题元素,掌握字体,上下标,及特殊字符的标志。 < EM>......，强调文字，通常用斜体。 < STRONG>......，特别强调的文字，通常用黑体。 ......，以等宽体显示西文字符。 ......，使文字大小相对于前面的文字增大一级。 ......，使文字大小相对于前面的文字减小一级。......，使文字成为前一个字符的上标。......，使文字成为前一个字符的下标。 文本修饰 2.2.7 预格式化文本 使用预格式化标记 不再忽略在此之间的空格、制表符与回车符等元素 2.2.8 转义字符与特殊字符 一般转义符都是以“&”开始，以“；”结束，一个转义符之间不能有空格 2.2.9 文本强制换行和不换行 文本强制换行
属性：Width，Size，Align，Noshade，color 2.2.11 使用列表 1、无序列表
2、有序列表
3、定义列表
...... 2.4.4 图像地图 【课后小结】 本节介绍了在网页中加入文本、图片和超级链接的标志与相应属性，熟练运用这些标志是制作多媒体网页的基础。超级链接标志中，书签链接是一类特殊的链接方式，理解和使用书签链接学习HTML中超级链接标志的难点。 第四讲 HTML表格、表单与框架标志 【教学内容】 讲解HTML中制作表格、表单与框架的标志。【教学目的】 使学生掌握简单表格、表单与框架的制作。【教学重点】 * 表格中单元格的合并以及表格嵌套和叠加操作。* 框架的嵌套使用。* 表单元素标志与属性。【教学难点】 * 理解表格属性rowspan与colspan的含义以及表格嵌套实现的基本思想。* 理解框架属性name、target的意义。 * 理解表单中相应元素对应标志及属性的含义。【教学方式】 案例分析式、项目教学 【教学参考】 1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。 2、《WEB网站设计》Joel Sklar著 高等教育出版社。 3、《HTML网页制作教程》材义语编著 铁道出版社。【新课内容】 2.5 插入表格 2.5.1 在网页中插入表格 表格的基本构成元素：表头，单元格，列，行
|