《网页制作》公共课简易教案_网页制作课程教案
《网页制作》公共课简易教案由刀豆文库小编整理，希望给你工作、学习、生活带来方便，猜你可能喜欢“网页制作课程教案”。
网页和网站
我们将平时在浏览器(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.设置表格边框
由于在布局视图下是不能设置表格边框的，所以先退出布局视图，进入标准视图。在文档编辑区左下方的【标签选择器】上单击标签即可选中相应的表格，然后在【属性检查器】中修改【边框】值为1。4.添加网页元素（1）添加文本
在页面上添加文本，只需将光标置于需要添加文本的单元格中，然后直接输入文字。（2）添加水平线
水平线有很多妙用，插入水平线可使文档结构清晰，层次分明，便于浏览。将光标置于需要插入水平线的位置。切换到“插入”栏的【HTML】选项卡，单击【水平线】按钮，即可插入水平线。根据需要，在“属性”检查器中修改各个属性值即可。如果要修改水平线的颜色，只要选中水平线，切换到“拆分窗口”，进行如下修改：
只有通过预览页面，才能见到水平线的修改效果。（3）插入图像 5.4层，行为，特效
5.4.1利用层作下拉菜单 1.层介绍
层是一种非常灵活的页面元素，大小和位置可以随意设置，可在层上面插入文本和图像等。
2.设置行为
下拉菜单的行为要设置3种对象的行为。
第一：菜单“我的日志”的行为。选中“我的日志”这段文字，打开“行为”面板，设置“显示－隐藏层”行为。
第二：层的行为。选中层的“井”字形标签，设置“显示－隐藏层”行为。效果如以上2图。
第三：标签。在“标签选择器”上选中，然后打开“行为”面板，设置“显示－隐藏层”行为。5.4.2 特效
在网络上搜索“网页特效”，可以得到许多用脚本语言书写好的代码。有些代码很实用，可以为页面增色。比如下面的这段取自特效锦集网站（http://code.helpor.net/time.php）的时间特效代码。
可按如下步骤将上述特效代码插入自己的网页中：
首先复制特效代码，然后将光标置于需插入时间特效的单元格中，单击“文档”工具栏上的【代码】按钮，这时在【代码】视图中出现的插入点的位置处粘贴特效代码；最后按F12键预览网页就可以看到这个时间特效了。效果如下图：
5.4.3 滚动公告栏 效果如下图：
制作方法：
要用到标签，而且必须写在内部。如下图：
在中间写入文字后，形成类似效果欢迎光临！后，在属性面板上设置一下文字属性后，把鼠标定位在上，调出“标签检查器”面板，设置的属性，如下图：
按F12预览，就可见效果。
5.5使用CSS样式表
CSS也叫层叠样式表，使用 CSS 能够以 HTML 无法提供的方式来设置文本格式和定位文本，从而能更加灵活自如地控制页面的外观。单击【窗口】菜单，选择【CSS样式】可以在Dreamwaver 8右侧面板组的最上方展开【CSS样式面板】。对CSS样式的新建、编辑以及删除等操作都可以在这个面板中进行。
1．创建自定义CSS规则
新建自定义CSS规则的方法如下：
（1）在站点目录下新建一个文件夹（如：CSS），用以存放本章中所创建的CSS文件。（2）单击【CSS样式面板】右下方的按钮，打开如图5.5.1所示的“新建CSS规则”对话框。
（3）选择【类（可应用于任何标签）】，在【名称】文本框中为新定义的CSS规则命名，命名必须以字符“.”开头，如“.style1”。
（4）如果希望该CSS规则只应用于当前的网页，则选择【仅对该文档】；如果希望该CSS规则可以在其他页面中被引用，则在下拉列表中选取一个已经存在的外部CSS文件，如果之前没有定义任何外部CSS文件，则选择【新建样式表文件】。
图5.5.1 “新建CSS规则”对话框
（5）选择了【新建样式表文件】后，单击【确定】按钮将CSS文件以“border”为文件名保存在前面新建的CSS文件夹中。
（6）单击【保存】按扭后，将打开如图5.5.2所示的“CSS规则定义”对话框，这里先不做任何设置，单击【确定】按钮关闭对话框。此时，在【CSS样式面板】中将会显示新创建的CSS文件“border.c”以及文件中包含的CSS规则“.style1”。
图5.5.2 “CSS规则定义”对话框
2．设置CSS样式格式
从图5.5.2可以看出CSS样式的属性可分为8大类：类型、背景、区块、方框、边框、列表、定位和扩展。下面介绍几个常用属性的设置。
（1）类型：该属性定义网页中文本字体、颜色以及字体风格等样式。
（2）背景：该属性定义背景元素的高级设置，包括背景图像及其水平或垂直方向的位置等。
（3）区块：该属性定义文本的高级设置，包括单词间距、字母间距、文本缩进和空格等。
（4）方框：该属性定义块元素的高级设置，包括填充和边界。在设置填充时，如果选中【全部相同】，则只需设置【上】的数值和单位即可。
（5）边框：该属性定义表格边框的高级设置，包括设置边框线样式、边框线的粗细程度和颜色等。
（6）列表：该属性定义列表项目符号的高级设置，包括项目符号的类型、项目符号图像和位置等。
（7）定位：该属性定义元素大小、位置和形状的高级设置。
（8）扩展：该属性定义鼠标指针在对象上移动时采用何种光标形状和对象上所应用的滤镜效果等。
3．CSS应用
上一节遗留了两个问题，即表格边框设置和长文本行距调整。我们就以它们为例，介绍一下CSS的设置、修改和应用。
（1）表格边框的设置
利用CSS来设置表格边框的过程如下：
① 双击【CSS样式面板】中未完成的CSS规则“.style1”，重新打开“CSS规则定义”对话框。在左侧的【分类】列表框中选择【边框】，如图5.5.3所示。
② 分别设置左右边框线为“实线”、下边框线为“虚线”，粗细均为1像素，颜色均为“#999999”的灰色。最后单击【确定】关闭对话框。
③ 将光标置于“1.程序员”单元格中，单击【标签选择器】上的标签，选中该单元格。
④ 鼠标移动到【CSS样式面板】上，右击“.style1”规则，在弹出的快捷菜单中选择【套用】。⑤ 重复③和④中的操作，逐一将“.style1”规则应用到接下来的几个单元格中去。⑥ 保存并预览，其效果如图5.5.4所示。
图5.5.3 表格边框设置
图5.5.4效果预览
注意：在Dreamwaver 8中，上一个单元格的下边框和下一个单元格的上边框的属性值效果是可以叠加的。对于相邻的两个单元格，在设置边框的时候需要考虑到这点。
（2）长文本行距、缩进调整的设置步骤如下：
① 在【CSS样式面板】右击“border.c”，选择【新建】创建一个新的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 “更新模板文件”对话框
《网页制作》教学大纲简易教案网站开发流程规划 1 确定建设网站的目标；2 分析目标用户及潜在用户对站点的需求； 3 确定网站风格； 4 考虑网络的技术问题。设计 1 页面布局； 2 网......
HTML第一节课1.本课程主要目标使用DIV+CSS布局网页使用CSS美化网页制作精美的商业网站 2.整体课程内容3.本课程授课目标3.1了解HTML整体课程 3.2 会使用HTML标签3.3 了解并......
《网页制作》教案潘有寅一、说教材：(一)教材分析：现在网络快速发展，广大的学生接触，使用INTERNET的机会也大大增加，学生在使用网络 获取信息时，更多的是通过浏览网页这一方式，我认......
《信息技术》第三册新课程标准教案制作第一个网页(网页诞生了)[教学目的]1．通过浏览几个精彩网页，激发学生制作网页的学习兴趣。2．熟练掌握启动Frontpage 2000，熟悉Frontpage200......
网页制作与设计教案第一讲 网页设计概述 ....................................................................................................................3 1.1W......
