中学网站制作教案[模版]

第一篇：中学网站制作教案[模版]

中学网站制作教案 ——超链接的应用 学习需求分析

你们是设计者，应该根据学习学要分析的过程展开分析。因此，作业要根据你们的调查目标、过程等展开分析，从而描述该内容学习的必要性。

以学习超链接为例（这不是为例，这就是你要认真展开做的。）

1>.发现问题：即了解学生学习中的困难，比如每个学生的动手能力不同。

2>.分析问题原因:可能是知识点不熟悉而导致操作中犯错，也可能是平时训练的不多等等其他原因。

3>.分析可行性（人、财、物的支持、重要性）教学目标

教学目标就是按照行为目标要求的四个要素来描写。

学习者特征分析

初中生的学习状态和小学生以及高中生都有很大的区别。与小学阶段的学习相比，表现出以下明显的差异：

1.学习内容逐步深化、学科知识逐步系统化，学习的课程门类逐渐增加，内容也逐步加深。小学期间，学生的学习内容是比较简单的，学科也相对简化，主要学习语文、数学等最基础的课程。老师的教学也更重趣味性和直观性，而不是强调知识的完整体系。而对于初中生来说，学习的网页制作教程frontpage，就除要求学生识记大量的定义、原理等知识点外，更重要的是培养学生掌握运用知识的能力。在掌握知识理论的同时必须熟悉上机操作。2.学习的自觉性和依赖性、主动性和被动性并存；

网也制作教程frontpage得教学应该切合初中生的这种特征，注意兴趣的引导，激发他们对课程学习的自觉性和主动性。

3.学生在学习中的自主能力日显重要。

网页制作教程frontpage的学习就不能局限于课堂的45分钟，老师需要引起学生的兴趣并强调课外的学习巩固。

初中生一般刚开始接触计算机，对已计算机类教程的学习多少都存在好奇心。相 对其他课程的学习，网页制作课程frontpage就具有较大的吸引力，所以要把握这种机会更好的引导学生学习和操作。

仔细查阅资料，这些分析与自己的设计有多少联系性。教学内容分析

内容分析法技术采用我们在课堂中讲授的一种方法去分析。其框架中的内容还是用简单的目标描述法。

第二篇：制作个人网站教案

学科：《信息技术》 课题：《制作个人网站》 课时：1 [教学目标]（1）熟悉Dreamweaver的软件环境，掌握该环境下的文字处理方法；

（2）掌握插入剪贴画的方法，掌握使用表格，网站内部的超链接，应用掌握的知识制作表达一定主题、包含文字、图片的个人网站。[教学重点与难点] 使用表格定位文字、图片，网站内部的超链接。[课时安排] 1.心课导入与布置任务（用时6～7分钟）2.学生自主学习（用时27分钟）3.教学评价（用时10分钟）4.教学总结（用时1～2分钟）教学过程：

1、导入

首先以学校要建校园网站为引言，校园网站下挂有教师个人网站、班级网站、学生个人网站等，激发学生要自己制作个人主页的兴趣，然后给学生布置任务，要求网站必须有同学们亲手制作的网页，才能真正成为的校园网站，提供大量的制作网页的素材（如图片、声音、动画、视频等），同学们可以自由地发表自己的想法和观点，开阔学生的思路，同时激发学生的创造欲望。

2、教学内容

教师利用多媒体教学网（或大屏幕投影仪）简单分析教学课件的要素，将Office中的Word 2000知识迁移到此，将任务进行分解成为若干个小任务，如制作一个网站，必须制作若干个网页，而一个网页可能由文字、图片、超链接等构成，因而就有要完成插入文字、插入图片、插入超级链接等小任务。具体的任务要求是：文字要有不同的字体、颜色、字号、对齐方式；图片要求大小调节合适、位置摆放合适；表格要有合并与拆分，表格内要有文字、图片；主页与子网页之间要有超级链接并为双向的。然后简单演示一个网站内部的超级链接。引导学生轻松愉快、主动去解决问题，完成任务，进而达到自身对知识的意义建构。

接下来就是学生开始自主学习的过程。学生带着制作网页这个任务，并由此而产生对网页中的文字处理与图片等知识的需求，由内在的需要促使学生去主动探索、学习相应的知识，并通过自己主动探索来解决问题。在此过程中，教师巡视查看学生的学习过程，了解学生的学习情况、进度，以指导者的身份对个别学生的问题进行单独交流、指导；如：有的学生问网页之间的超级链接如何去做，有的学生问如何利用表格对文字、图片的定位等。学生之间可以互相交流、互相学习、互帮互助、团结协作；对大多数学生的共性问题，教师给予广播式指导解决。对于理解能力、动手能力以及综合应用能力强的同学指导他们进一步学习扩展内容，发展他们的个性，培养他们的积极创新精神。如对某些学的快的学生给予引导如何用表格套表格的再定位方法准确地定位文字、图片。

3、教学评估

在规定的时间内学生基本完成了学习任务，下面是给学生一个展示自我的机会，从学生制作的网页中挑选出有代表性的作品，由学生自己介绍、演示，这样可以锻炼学生的表达能力，然后让学生互相讨论，发表意见、看法，实现相互交流、学习的目的。教师在此过程中以实现预定的教学目标为目的，适当地引导讨论方向。这一个过程是非常重要的过程，是一个再学习再提高的过程。对于知识掌握较好的学生正是表现自我的时候，是最有成就感的时候，对于少数知识掌握不太好的学生，真是一个再学习的过程，完成对知识的意义建构。

4、课堂总结

教师总结本节课的教学内容：掌握文字处理方法、插入剪贴画、使用表格，网站内部的超链接，应用掌握的知识制作表达一定主题、包含文字、图片的个人网站。对学生的制作成果表扬鼓励，并提出新的问题，留下悬念，激发学生继续学习的兴趣。如要使自己的网页更美观、内容更充实，具有“商业网站”的味道，我们就必须要对网页进行美化进行装饰，如何去才能实现呢？这是我们下一节要完成的任务。

第三篇：《视频网站制作》实验教案

网 页 制 作

授课教师：熊伶俐

授课班级：广播电视编导

授课时间：

教 案

2008级B方向 2011——2012学第一学期

目 录

实验一：基本网页元素的使用 ··························································· 1 实验二：插入多媒体对象··································································· 2 实验三：超级链接的使用实验四：页面布局实验五：实验六：模板的使用实验七：制作表单网页实验八：设计并制作一个视频网站··································································· 4 ·············································································· 5 CSS样式的使用··································································· 7 ·········································································· 9 ···································································· 10 ···················································11 实验一：基本网页元素的使用

实验内容：

1、插入文字；

2、插入图像。实验目的：熟练掌握基本网页元素的使用 实验器材：装有Dreamweaver的PC机一台 实验步骤：

1、插入文字 1.1输入文字

鼠标在文档工作区单击，当出现闪烁的光标后，选择合适的输入法即可输入文字。1.2改变文本属性

选中文字后，可以在属性面板上改变文字的大小、粗细、样式、对齐方式等，还可以为文字建立超级链接。1.3增加字体

打开字体选项列表，单击最后一行的“编辑字体列表”，弹出“编辑字体列表”对话框。单击“＋”按钮，在“可用字体”列表中选择字体，单击向左的箭头，即可将所选择的字体添加到字体列表中。1.4添加项目编号

在属性面板上单击“项目列表”按钮，输入几行文字，每行文字均带有强调性的圆形小黑点

单击“编号列表”按钮，输入几行文字，每行文字均带有数字编号。

单击“列表项目”按钮，在打开的“列表属性”对话框中可以对项目符号进行详细设计。2插入图像

2.1常用图像格式：GIF、JPEG 和 PNG。2.2插入图像

（1）将光标置于要插入图像的位置，在“插入”栏的“常用”选项卡中单击“图像”按钮或选择“插入”菜单中的“图像”命令。

（2）此时将打开“选择图像源”对话框，选取存放在站点中的图像文件，最后单击“确认”按钮即可将图片插入到指定区域。

（3）如果所选择的图像文件不是站点中的文件，则将打开“Macromedia Dreamweaver MX”对话框。提示是否将图像文件保存到根目录下，单击“是”按钮，然后打开“拷贝文件为”对话框，定位到站点中用于存放图像文件的文件夹，最后单击“保存”按钮即可。

2.3修改图像尺寸

1、自由缩放

单击图片，在图片的下方和右侧出现3个黑色的控制柄。分别拖动这3个控制柄可以改变图片的尺寸。若要等比例缩放图片，可以按住shift键，用鼠标左键拖动右下角的控制柄。

2、精确缩放

如果已经确定了图片的具体缩放尺寸，单击图片，在其属性面板中输入宽和高的具体数值，可以精确地改变图片的尺寸。2.4为图片增加说明文字

单击图片，在属性面板的替代框输入图片的说明文字，按下F12键，打开浏览器窗口，将光标移动到图片上就可以看到为其添加的说明文字。2.5鼠标经过图像

（1）将插入点定位到要插入鼠标经过图像的区域，然后在“插入”栏的“常用”选项卡中单击“鼠标经过图像”按钮。

（2）打开“插入鼠标经过图像”对话框。

在“图像名称”文字框内输入翻转图像的名称；单击“原始图像”文本框后的“浏览”按钮，然后在“原始图像”对话框中，选取作为初始图像的图片文件后按“确认”按钮；单击“鼠标经过图像”文本框后的“浏览”按钮，然后在“鼠标经过图像”对话框中，选取作为鼠标经过图像的图片文件后按“确认”按钮；确保选中“预载鼠标经过图像”复选框；在“替换文本”文本框内输入替换文字；在“按下时，前往的 URL”文本框中指定目标文件的地址，最后单击“确定”按钮。

（3）按【F12】键在浏览器窗口中查看鼠标经过图像效果。2.6插入图像映射（热区）

1、先选中图像，此时可以在图像属性面板上看见一个“地图”区域，在其下方有三个淡蓝色的工具图标，即矩形、圆形和多边形。

2、根据需要用鼠标选中其中的一个，再把鼠标移到图像上拖拽出一块淡蓝色的区域。实验小结：略（学生写实验过程中的感受、体会，遇到什么问题，如何解决问题等）

实验二：插入多媒体对象

实验内容：

1、插入声音；

2、插入视频；

3、插入Flash。实验目的：熟练使用各种多媒体素材丰富网页 实验器材：装有Dreamweaver的PC机一台，耳麦一副 实验步骤：

1、在页面中插入背景音乐。方法一：通过手工编写代码

（1）打开要添加背景音乐的网页，切换到代码视图或拆分视图。

（2）在 和 之间添加以下代码：。

bgsound 标记符的基本属性是 src，用于指定背景音乐的源文件。

loop，用于指定背景音乐重复的次数；如果不指定该属性，或者loop值为-1或者true时，背景音乐无限循环。方法二：通过行为来实现

（1）打开一个网页文档，在文档左下角的“标签选择器”中选择“ body ”标签。（2）打开行为面板，点击“＋”按钮添加行为“播放声音”。（3）选择声音文件。一个网页的背景音乐就添加好了。（4）在文档中选择背景音乐的图标。（5）在属性面板中，点击“参数”按钮。（6）修改参数Autostart为true。2、链接声音与视频

（1）选择要用作超链接的文本或图像。

（2）在属性面板中，单击链接文本框后的“浏览文件”按钮，选择站点中的音频文件或视频文件。

注：如果原来的文件名为中文，应事先将其改为英文。

3、嵌入声音与视频

（1）在文档窗口中，将插入点定位到要嵌入文件的地方，然后在“插入”栏的“媒体”选项卡中单击“插件”图标。

（2）在“选择文件”对话框中选择嵌入的音频文件或视频文件（文件名称必须是英文，不能插入汉字名称的文件）。

（3）通过在“高”和“宽”文本框中输入数值或者通过在“文档”窗口中拖动调整插件占位符的大小，可以确定播放器控件在浏览器中的显示大小。

4、插入Flash动画

将光标置于要插入Flash动画的位置，执行“插入/媒体/Flash”命令，从弹出的“选择文件”对话框中选择Flash文件，单击“确定”按钮即可。注：插入的Flash文档只能是.swf格式文件。

5、插入Flash文本

（1）执行“插入/媒体/Flash文本”命令，弹出“插入Flash文本”对话框，设置文本字体、大小、对齐方式、粗体、斜体、颜色、背景色、链接URL等参数。（2）在“另存为”对话框中指定Flash文本的存盘文件名。

注：若Flash文本设置了链接，则必须将该文件与HTML文档保存在相同的文件夹下。*文件的路径和文件名都不能含有中文。

6、插入Flash按钮

（1）执行“插入/媒体/Flash按钮”命令，弹出“插入Flash按钮”对话框。

（2）选择按钮样式（有多达40余种样式可供选择），然后输入按钮文本，选择文本字体、大小、背景色、链接URL等参数。

（3）在“另存为”对话框中指定Flash按钮的存盘文件名。（注意事项同Flash文本）

7、制作图象查看器

（1）执行“插入/媒体/图象查看器”命令（或者单击插入工具栏的Flash元素选项卡中的图象查看器命令），弹出“保存Flash元素”对话框，设置将图象浏览器Flash影片保存在 站点下面，单击“保存”按钮在页面中插入一个Flash对象。

（2）在面板组合区中找到标签面板，单击将其展开（或者用F9键直接打开标签面板），可以看到Flash元素具有很多属性值。

（3）在属性列表框中打开frameShow，单击右方的下拉箭头，选择是。

（4）打开属性imageURLs，单击右侧的按钮，打开“编辑‘imageURLs’数组”对话框。（5）系统默认加了3各图象在列表中，单击上方的减号按钮将其全部删除。

（6）单击加号按钮，但后单击列表框右侧的打开文件按钮，在弹出的“选择文件”对话框中选择需要显示的图片。

（7）重复上一步操作，直到将所有需要显示的图片全部加入列表框中。

（8）如果需要对图片设置链接，在属性列表中选中imageLinks属性，单击右侧的按钮，弹出“编辑‘imageLinks’数组”对话框，按顺序设计各图片的链接URL即可。（9）在属性列表框中找到title，在后面输入图片的标题。

（10）在属性列表框中找到transitionsType，设置其值为Random，让图片之间的切换效果为随机效果。

（11）按F12键预览最后的效果。

实验小结：略（学生写实验过程中的感受、体会，遇到什么问题，如何解决问题等）

实验三：超级链接的使用

实验内容：插入超级链接 实验目的：熟练使用超级链接

实验器材：装有Dreamweaver的PC机一台 实验步骤：

1、创建锚记

锚记是在文档中设置位置标记，并给该位置一个名称以便引用。通过创建锚记，可以使链接指向当前文档或不同文档中的指定位置。锚记常常被用来跳转到特定的主题或文档的顶部，使访问者能够快速浏览到选定的位置，从而加快信息的检索速度。

（1）在需要设置锚记的位置单击，在插入工具栏的常用选项卡中选择命名锚记按钮，打开“命名锚记”对话框。

（2）在对话框的“锚记”名称框中输入锚记名（区分大小写），单击确定按钮，锚记标记出现在光标插入点。如果锚记标记没有出现，执行“查看/可视化助理/不可见元素”命令即可。

2、文字或图片的链接

（1）单击需要创建超级链接的文字或者图片，然后在属性面板的“链接”文本框旁单击“浏览文件”按钮。

（2）打开“选择文件”对话框，定位到要跳转的文件后单击“确认”按钮即可。

3、电子邮件链接

方法一：在链接文本框中输入“mailto：电子邮件地址”。

方法二：单击插入工具栏的常用选项卡中的“电子邮件链接”按钮，弹出“电子邮件链接”对话框，在文本输入框中输入作为电子邮件链接显示在文档中的文本，在E－Mail栏中输入电子邮件地址。如果不输入文本，则在文档中直接显示电子邮件地址。

4、锚链接

直接在链接文本框中输入“＃锚记名”即可。

5、快速检查网页链接

（1）在Dreamweaver 8中运行“站点→检查站点范围的链接”命令，此时将会激活链接检查面板。

（2）从面板左上部的“显示”下拉菜单中可以选择“断掉的链接”、“外部的链接”、“孤立文件”三种，比如我们选取“孤立文件”之后，Dreamweaver 8将对当前链接情况进行检查，并且将孤立的文件列表显示出来。

（3）对于有问题的文件，直接双击鼠标左键即可打开进行修改。

提示：外部链接是链接到外部网站的链接地址，Dreamweaver无法对其正确性进行检查。在为网页建立链接的时候需要提醒大家一定要格外小心，因为网站通常都有数百个页面，稍不留神就会导致空链接或者是链接错误的情况，这对你的网站形象可是有很不好的影响哟！

6、删除超级链接

在属性面板的链接对话框中删除链接路径，该链接便消失了。

实验小结：略（学生写实验过程中的感受、体会，遇到什么问题，如何解决问题等）

实验四：页面布局

实验内容：

1、利用框架进行布局；

2、使用表格进行页面布局；

3、使用图层进行页面布局。

实验目的：熟练掌握和使用各种方法进行页面布局 实验器材：装有Dreamweaver的PC机一台 实验步骤：

1、利用框架进行布局

（1）选择“文件”菜单中的“新建”命令，打开“新建文档”对话框，在“常规”选项中的类别框内选择“框架集”，在“框架集”框内选择“左侧固定，上方嵌套”结构，单击“创建”按钮。

（2）选择“文件”菜单中的“保存全部”命令，之后将出现 4 个“保存为”对话框，分别将框架集和各框架网页保存在站点中的同一文件夹中。

（3）按【Shift + F2】键打开“框架”面板，单击该面板中的最外层边框，选择整个框架 集，在其“属性检查器”中的“列值”文本框内输入“170”，在“单位”框内选择“像素”，其他属性保持不变。再选择包含上下结构的框架集，在其“属性检查器”中设置“行值”为 80 像素，其他属性保持不变。

（4）将插入点定位在左侧框架内，按【Ctrl + J】键打开“页面属性”对话框，分别设置网页的背景色为“黑色”、文本颜色为“#d1c598”、链接颜色为“#d1c598”、活动链接颜色为“#993300”、访问过链接颜色为“#006600”，单击“确定”按钮。

（5）继续将插入点定位在左侧框架内，单击“插入表格”按钮，插入一个 3 行 2 列，宽度为“140”像素，适当高度，单元格填充、单元格间距、边框都为“0”的表格。对单元格进行适当合并，然后在各单元格内添加内容，并使用“属性检查器”进行修饰，制作出左侧框架中的网页。

（6）分别制作出另外两个框架中的网页，使用“全部保存”命令保存对文档的修改。（7）制作要作为超链接目标、在右下框架内显示的各网页，注意其风格与尺寸应与原来右下框架中的网页相似。

（8）在左侧框架内，为导航栏中的文字设置超链接，并将其链接“目标”指定为右下框架（即 mainFrame），保存对文档的修改，在浏览器窗口中预览网页。

2、使用表格进行页面布局

（1）在空白文档窗口中，按【Ctrl + J】键打开“页面属性”对话框，在“标题”文本框内输入网页的标题，在“背景”文本框内选择黑色作为网页的背景，在“文本”文本框内选择白色作文本颜色，设置完成后单击“确定”按钮。

（2）将“插入栏”切换到“布局”选项卡，单击“布局视图”按钮切换到布局视图模式下，按【Ctrl + S】键将网页保存到站点中。

（3）在“插入栏”中单击“绘制布局单元格”按钮，绘制一个宽为 600 像素，高为 24 像素的布局单元格，然后添加若干文字。

（4）按住【Alt】键不放，多次单击“绘制布局单元格”按钮，连续绘制4个宽度相等的单元格，分别在第二与第三个布局单元格内插入若干文本，在第四个布局单元格内插入一条宽度为 600 像素，高度为 1 像素的水平线，并使用属性检查器对添加的文本与水平线进行修饰。

（5）将绘制的第二个布局单元格的高度调整为 120 像素，适当调整其他三个单元格的高度与宽度，在适当调整布局表格的宽度。

（6）单击“标准视图”按钮，将文档窗口切换到标准视图模式，将插入点定位在绘制的第四个单元格内，单击“插入表格”按钮，在打开的“插入表格”对话框中，设置表格“行”为

8、“列”为

5、“单元格填充”为0、“单元格边距”为0、“宽度”为100%（即所在单元格的宽度600像素）、“边框”为0，完成后单击“确定”按钮。

（7）在插入表格中的第一、三、五、七行与一、三、五列交界处的单元格内，分别插入尺寸相等的图像，在图像下方的单元格内输入一些文字并进行修饰。

（8）使用单元格的“属性检查器”，将插入图像单元格的宽度设置为 150 像素，高度为 100 像素，文字所在单元格高度为 80 像素，没有内容的单元格宽度为 75 像素。

（9）另外将插入图像单元格的对齐方式设置为水平“居中对齐”、垂直“中间”对齐，此 时的文档窗口。

（10）选取包含图像的单元格，然后使用 CSS 样式为该单元格设置一种边框效果。（11）在第一个单元格与第二个单元格内设置一个背景图像，按【Ctrl + S】键保存对文档的修改，按【F12】键在浏览器窗口中预览网页效果。

3、使用图层进行页面布局

（1）在空白文档窗口中，确保文档窗口处于“标准视图”模式下，按【Ctrl + J】键打开“页面属性”对话框，在“标题”文本框内输入网页的标题，在“背景”文本框内选择黑色作为网页的背景颜色，单击“确定”按钮，再按【Ctrl + S】键将网页保存到站点中。（2）单击“绘制层”按钮，在文档窗口中顶部绘制一个层，设置以下层属性：左 20、上 20、宽度 600、高度 20、指定一个背景图像作为第一层的背景。

（3）在该层中添加若干文本，然后使用“属性检查器”对文本进行修饰。使用相同方法在下面继续绘制一个层，添加若干文本并进行修饰，之后适当调整该层的位置与大小。（4）按住【Alt】键不放，单击“绘制层”按钮，在文档窗口中连续绘制三个层，将其中的一个层的宽度设置为 150、高度为 115，然后同时选取它们（注意最后选择有精确尺寸的层），选择“修改”菜单“对齐”选项中的“设成宽度相等”与“设成高度相等”命令，将这三个层设置为大小相等的层。此时这三个层仍然处于选中状态。

（5）按【Shift】键选取绘制的第一个层，选择“修改”菜单“对齐”选择中的“左对齐”命令，使这三个层与第一层对齐，最后适当调整它们所在的上下位置，使用“插入栏”中的“图像”按钮分别插入尺寸相同的三个图像。

（6）使用相同方法分别在文档中绘制其他层，并插入若干图像与文字。

（7）按【Ctrl + S】键，保存对文档的修改，按【F12】键在浏览器窗口中预览网页。实验小结：略（学生写实验过程中的感受、体会，遇到什么问题，如何解决问题等）

实验五：CSS样式的使用

实验内容：使用CSS样式创建风格统一的网页 实验目的：熟练使用内部样式表和外部样式表 实验器材：装有Dreamweaver的PC机一台 实验步骤：

1、使用“CSS 样式”面板

在网站或网页中创建和应用 CSS 样式时，需要使用“CSS 样式”面板。选择“窗口”菜单中的“CSS 样式”命令或按【Shift + F11】键，可以打开“CSS 样式”面板。

在文档窗口中，class 类样式将出现在 “CSS 样式面板”中。而对于创建的其他两种样式，将直接包含在网页代码或 CSS 外部样式表中，而不会显示在“CSS 样式”面板。

2、创建 CSS 样式

在文档中要创建 CSS 样式，首先将“CSS 样式”面板打开，然后执行以下步骤。

（1）在 CSS 样式面板中，单击“新建 CSS 样式”按钮，打开“新建 CSS 样式”对话框。（2）在“新建 CSS 样式”对话框中进行如下设置：如果选择“创建自定义样式（class）”样式类型，则在“名称”文本框中输入样式名称；如果选择“重定义HTML 标签”或“使用 CSS 选择器”样式类型，则在“名称”文本框中选择相应的样式名称。

（3）在“定义在”框中选择，如果选择“新建样式表文件”选项，如果曾经定义过样式表文件，则可以从列表中选择一个文件；如果选择“仅对该文档”单选按钮，表示样式将直接定义在当前文档中。

（4）单击“确定”按钮，如果选择“新建样式表文件”选项，则打开“保存样式表文件”对话框，进行保存设置即可后弹出“样式名称的CSS 样式定义”对话框；则直接弹出“样式名称的 CSS 样式定义”对话框。

（5）用户可以在“分类”列表框中选择 8 种 CSS 样式属性，Dreamweaver 选择相应属性分类后则在对话框右部会显示相应的选项，可以根据需要设置。（6）最后单击“确定”按钮，则样式定义完毕。

3、应用CSS样式

在文档窗口，不论是内部样式还是外部样式表文件，对于出现在“CSS 样式”面板中的自定义 class 类样式，应首先选取要应用样式的文本、段落或其他对象，然后单击面板中的样式图标或样式名称。如果要取消样式，选取对象后，单击面板中的“无 CSS 样式”选项即可。

对于“重新定义 HTML 标签”样式与“使用 CSS 选择器”样式，网页自动应用该样式而无须用户指定。

4、自定义CSS样式实例

本实例定义一种网页中常用的正文样式，效果为“文字大小16 px，行高120%，首行缩进两个字符”。

（1）打开一个包含段落文本的文档，确保打开“CSS 样式”面板，单击“新建 CSS 样式”按钮，打开“新建CSS样式”对话框，在“名称”文本框中输入样式名称“test”，在“类型”选项中选择“创建自定义样式（class）（M）”单选按钮，选择“仅对该文档”单选按钮，设置完成后单击“确定”按钮。

（2）在打开的“.test 的CSS 样式定义”对话框中，设置字体为“宋体”、大小为 16 像素（px）、行高为 120%。

（3）然后在“分类”列表框中选择“区块”选项，设置文字缩进为 32 像素（相当于两个字符），单击“确定”按钮，则新建的“test”样式出现在“CSS 样式”面板中。

（4）在文档窗口中选择取要应用样式的文本，然后在单击“test”样式，即可应用该样式。

5、重新定义 HTML 标签样式实例

本实例定义一种常见的效果，即网页中的所有超链接都没有下划线。

（1）打开一个包含有超链接的文档，确保打开“CSS 样式”面板，单击“新建 CSS 样式”按钮，打开“新建 CSS 样式”对话框，在“类型”框内选择“重新定义 HTML 标签（R）”选项，然后在“名称”框内选择 a 标签（即超链接标签），选择“仅对该文档”选 项，单击“确定”按钮。

（2）在打开“a 的 CSS 定义”对话框中的“修饰”选项中选择“无”，单击“确定”按钮。

（3）此时样式被自动应用，网页中的所有超链接都没有下划线。

实验小结：略（学生写实验过程中的感受、体会，遇到什么问题，如何解决问题等）

实验六：模板的使用

实验内容：利用模板创建风格统一的网页

实验目的：掌握模板的创建和编辑方法；熟练利用模板创建网页 实验器材：装有Dreamweaver的PC机一台 实验步骤：

1、新建一个文档，将“插入”栏中的“常用”选项卡改为“布局”选项卡，此时就出现“布局”工具栏，切换到“布局”模式，单击“布局表格” 按钮，绘制一个宽：780px，高：636px的表格。

2、单击“布局表格” 按钮，从该表格的左上角起，绘制一个宽：780，高：120的表格。

3、单击“布局单元格” 按钮，从表格的左上角开始绘制一个宽：140，高：120的单元格.4、将光标定位在单元格内，选择[插入]/[图像]菜单命令，打开“选择图像源”文件对话框，选择图像logo.gif。

5、单击“布局单元格” 按钮，接着上面的单元格的右边绘制一个宽：640，高：120的单元格.6、将光标定位在单元格内，选择[插入]/[媒体]/[Flash]菜单命令，打开“选择文件”对话框，选择文件banner.swf。

7、接着往下绘制一个宽：780，高：21，水平：居中对齐，垂直;居中，背景颜色：#CC3333的单元格，输入文字：首页 个人简介 文学作品 绘画作品 动画作品 视频作品 学习心得 给我留言 写信给我，设置文字格式：字体“宋体”，大小“14px”。

8、接着再往下绘制一个宽：140，高：470，水平：居中对齐，垂直;居中，背景颜色：#0066FF的单元格。

9、接着上面表格的右边绘制一个宽：640，高：470，水平：居中对齐，垂直;居中，背景图像：back.gif的单元格。

10、接着上面的两个表格的下面绘制一个高：18，水平：居中对齐，垂直;居中，背景颜色：#000000的单元格，输入文字：2006年12月20日最后更新 © Copyright 2006 小慧版权所有，设置文字格式：字体：宋体，大小：12px，颜色：白色。

11、回到“标准”模式，将光标定位到第8步创建的单元格内，选择[插入]/[模板对象]/[可编辑区域]菜单命令，弹出如图2-10-11所示的对话框，单击“确定”按钮，则在该单元格内就出现了一个名为“EditRegion1”的可编辑区域。

实验小结：略（学生写实验过程中的感受、体会，遇到什么问题，如何解决问题等）

实验七：制作表单网页

实验内容：使用表单制作一个注册页面

实验目的：掌握表单的建立和使用；熟练使用表单提交相关数据 实验器材：装有Dreamweaver的PC机一台 实验步骤：

1、新建一个文档，将“插入”栏中的“常用”选项卡改为“表单”选项卡。

2、将光标定位在文档页面中需要插入表单的位置，单击 “表单” 按钮，此时光标定位处出现一个红色的虚线框，它表示表单的范围，所有表单对象都在该区域内插入。

3、在表单中插入一个9行2列的表格的表格，设置表格的背景图像为”bg1.gif”，表格“居中”。

4、合并第1行的单元格，输入文字”用户注册表”，文字之间空一格，格式：字体“宋体”，大小“16pt”，颜色：“红色”。

5、在第2行第1个单元格内输入“你的用户名：” 将光标定位到第2个单元格，单击 “文本字段” 按钮，在弹出的“辅助标签属性”对话框中单击“取消”按钮。

6、在第3行第1个单元格内输入“你的密码：” 将光标定位到第2个单元格，单击 “文本字段” 按钮，在弹出的“辅助标签属性”对话框中单击“取消”按钮，打开“属性”面板，在“最多字数符”中输入“6”，将“类型”改为“密码域”。

7、在第4行第1个单元格内输入“你的性别：” 将光标定位到第2个单元格，单击 “单选按钮” 按钮，在弹出的“辅助标签属性”对话框中“标签文字”中输入“男”，“位置”改为“在表单项前”，单击“确定”按钮，敲一个空格，再单击 “单选按钮” 按钮，在弹出的“辅助标签属性”对话框中“标签文字”中输入“女”，位置”改为“在表单项前”，单击“确定”按钮，选择“男”前面的单选钮，打开“属性”面板，将“初始状态”改为“已勾选”。

8、在第5行第1个单元格内输入“你的生日：” 将光标定位到第2个单元格，单击 “列表/菜单” 按钮，在弹出的“辅助标签属性”对话框中“标签文字”中输入“年”，“位置”为“在表单项后”，单击“确定”按钮，再单击 “列表/菜单” 按钮，在弹出的“辅助标签属性”对话框中“标签文字”中输入“月”，“位置”为“在表单项后”，单击“确定”按钮，再单击 “列表/菜单” 按钮，在弹出的“辅助标签属性”对话框中“标签文字”中输入“日”，“位置”为“在表单项后”，单击“确定”按钮；选择“年”前的列表，打开“属性”面板，将“类型”设为“菜单”，单击 按钮，在弹出的“列表值”对话框中的“项目标签”中输入“1990”，单击 按钮，添加第二个项目标签，输入“1991”，重复上面的操作，输入后面的数字，单击“确定”按钮，回到“属性”面板，将“初始化选定”设为“1990”，同理对后面的列表进行相同的操作。

9、在第6行第1个单元格内输入“你的生日：” 将光标定位到第2个单元格，单击 “复选框” 按钮，在弹出的“辅助标签属性”对话框中“标签文字”中输入“唱歌”，同理插入后面的复选框。

10、在第7行第1个单元格内输入“个人近照：” 将光标定位到第2个单元格，单击 “文件域” 按钮，在弹出的“辅助标签属性”对话框中单击“取消”按钮。

11、在第8行第1个单元格内输入“个人简介：” 将光标定位到第2个单元格单击 “文本字段” 按钮，在弹出的“辅助标签属性”对话框中单击“取消”按钮，在弹出的“辅助标签属性”对话框中单击“取消”按钮，打开“属性”面板，将“类型”改为“多行”。

12、将光标定位到第9行第2个单元格，单击 “按钮” 按钮，在弹出的“辅助标签属性”对话框中单击“取消”按钮，连续插入几个“不换行空格”，再单击 “按钮” 按钮，在弹出的“辅助标签属性”对话框中单击“取消”按钮，打开“属性”面板，将“动作”改为“重设表单”。

13、选择“提交”按钮，打开行为“面板”，添加行为“检查表单”，打开“检查表单”对话框，将文本“text1在表单中，text2在表单中”都设为“必需的”，单击“确定”按钮。

14、选择整个表单，打开“属性”面板，在“动作”中输入“mailto：你的邮箱地址”。

15、按【Ctrl+S】保存该网页为form.htm，按【F12】键预览。

实验小结：略（学生写实验过程中的感受、体会，遇到什么问题，如何解决问题等）

实验八：设计并制作一个视频网站

实验内容：制作一个视频网站

实验目的：掌握和了解网站制作的流程，熟练使用网页制作的各种技巧 实验器材：装有Dreamweaver的PC机一台，耳麦一副 实验步骤：

（一）制作首页

1、定义网页基本属性

（1）在空白文档窗口中，按【Ctrl + J】键打开“页面属性”对话框，在“标题”文本框内输入网页标题“游戏王国”，设置网页的背景色为“黑色”，文本色为“白色”，在“跟踪图像”框内选取绘制好的草图作为网页的“跟踪图像”，单击“确定”按钮。（2）按【Ctrl + S】键将文档保存到站点中。

2、页面布局

（1）在文档窗口中，将“插入栏”切换到“布局”选项卡，再单击“布局视图”按钮，将文档窗口切换到布局视图模式。

（2）单击“插入栏”中的“绘制布局单元格”按钮，在文档窗口顶部沿着跟踪图像绘制一个适当尺寸的布局单元格（用于放置标志图案），按住【Ctrl】键不放，继续使用“绘制布局单元格”按钮，在文档窗口中的两侧分别绘制两个布局单元格（用于放置页面两侧的边 框图案），在左侧沿着跟踪图像继续绘制三个布局单元格（左右两个单元格用于放置竖线效果，中间单元格用于放置“友情链接”等内容），适当调整各单元格的尺寸与位置。（3）将插入点分别定位到刚绘制的 6 个单元格内，然后按【Ctrl + Alt + I】组合键分别插入图像，适当调整布局单元格尺寸与图像匹配，并调整它们的位置。

（4）单击“插入栏”中的“绘制布局表格”按钮，在文档窗口右侧绘制第二个布局表格（嵌套在第一个布局表格中）。

（5）在该布局表格顶部沿着跟踪图像绘制一个用于插入金黄色细线的布局单元格，然后在其中插入这个图像，并适当调整它的尺寸与位置。

（6）按住【Ctrl】键不放，单击“插入栏”中“绘制布局单元格”按钮，在刚插入金黄色细线图像布局单元格下方的一行中绘制两个高度为 24 像素的布局单元格（左边单元格用于放小标题），然后使用“绘制布局表格”按钮，绘制一个包含这两个布局单元格的第三个布局表格。

（7）单击“绘制布局单元格”按钮，沿着跟踪图像继续绘制三个布局单元格（分别用于包含文字、图片和子栏目超链接）。

（8）分别在右侧布局单元格内添加图像与文字，并适当调整布局单元格与布局表格的尺寸与位置。为了看清楚在单元格中添加的文字，可按下【Ctrl + J】键打开“页面属性”对话框，将跟踪图像的透明度调整为“30%”。

（9）按照步骤（5）~（8）的方法添加另外两部分的内容（“Diablo”和“石器时代”）。（10）在最大的布局表格底部绘制一个布局单元格，并在其中插入图像（即最底端的图案，此处用作占位符），调整该布局单元格的尺寸与位置，使其与上面的内容相匹配。（11）在文档窗口中的左侧位于两个“细线”图像之间的区域按住【Ctrl】键不放，连续绘制 7 个大小相等的布局单元格。

（12）在其中插入图像、文字、日期、电子邮件链接和表单对象中的“列表/菜单”等网页内容，调整各单元格的尺寸与位置。

（13）单击“绘制布局表格”按钮，绘制一个布局表格，使其包含页面左侧除最左边的布局单元格之外的 10 个单元格。

（14）分别将左右两侧的4个布局单元格，即用来放置左右边框和左边两条竖线的单元格，适当调整高度与内容相匹配，并将其他布局表格与布局单元格的尺寸与位置适当调整。

（15）按【Ctrl + S】键保存对文档的修改。

3、进一步排版

接下来使用表格对页面进一步排版，具体步骤如下。（1）将文档窗口切换到“标准视图”模式下。

（2）将最后一个布局表格中的列表/菜单、日期与电子邮件链接所在单元格的对齐方式设置为水平“居中对齐”、垂直“中间”对齐，将包含文字与图像的单元格设置为水平“左对齐”、垂直“中间”对齐。

（3）在靠近边缘的两个单元格中设置背景图像，作为整个网页界面中的边框，在包含有细线的单元格内设置背景图像，最后选中左边用于放置“友情链接”的表格，为其设置背景 图像。

（4）将包含文字“Counter-Strike”、“Diable II”和“石器时代”所在单元格的对齐方式设置为水平“居中对齐”、垂直“中间”对齐，分别选择这三个单元格，然后设置一个背景图像，适当调整单元格的尺寸与位置。然后选取包含该单元格的表格，设置其背景图像。（5）将包含有文本“Counter-Strike”、“Diable II”和“石器时代”单元格下方的三个单元格的对齐方式设置为垂直“中间”对齐。

（6）将底部单元格的图像设置成为该单元格的背景图像，并适当调整单元格的尺寸。（7）设置完成后，在浏览器窗口中预览网页，然后适当调整各个表格与单元格的尺寸，按【Ctrl + S】键保存对文档的修改。

4、完善页面

最后设置页面中的超链接，并使用 CSS 技术对网页中的内容进行格式修饰，具体步骤如下。

（1）分别为文档窗口中的文本添加超链接（暂时没有制作目标文件的可以用“#”指定空链接），然后按【Shift + F11】键打开“CSS 样式”面板。

（2）在“CSS 样式”面板中，单击“新建 CSS 样式”按钮，在打开的“新建 CSS 样式”对话框中的“名称”文本框中输入“test”，在“类型”框中选择“创建自定义样式（class）”单选按钮，在“定义在”框内选择“新建样式表文件”，单击“确定”按钮。（3）在打开的“保存样式表文件为”对话框中选择站点根目录，在名称框中输入“mystyle”，单击“保存”按钮。

（4）在打开的“.test 的 CSS 样式定义（在 mystyle.css 中）”对话框，设置字体为“宋体”、大小为“16”像素（px）、颜色为“#CCCCCC”、行高为“150%”，单击“确定”按钮。在文档窗口中分别选择描述游戏栏目的正文文字，在“CSS 样式”面板中单击“test”将段落文本应用该样式。

（5）单击“新建 CSS 样式”按钮，在“新建 CSS 样式”对话框中的“名称”文本框内输入“gold”，在“定义在”框内选择“mystyle.css”样式表文件，单击“确定”按钮，打开“.gold 的CSS样式定义（在 mystyle.css 中）”对话框，设置字体为“宋体”、大小为“16”像素（px）、颜色为“#d1c598”、行高为“120%”，单击“确定”按钮，在文档窗口将左侧插入了小图标的文本应用该样式。

（6）单击“新建CSS样式”按钮，在“mystyle.css”中定义一个名为“title”的样式，定义该样式时，设置字体族列表“宋体、Arial”，大小为“16”像素，行高为“150%”，颜色为“#d1c598”。然后为标题文本“Counter-Strike”、“Diable II”和“石器时代”应用该样式。

（7）单击“新建 CSS 样式”按钮，在“mystyle.css”中定义一个名为“border”的样式，定义该样式时，设置边框样式为“凸出”、宽度为“细”、颜色为“#990033”，选中“全部相同”复选框，单击“确定”按钮。在文档窗口中，将包含超链接的单元格选中，然后应用该样式。

（8）在该样式表文件中，新建4个“使用CSS 选择器”样式。在 a:link 样式中，设置字体为“宋体”、大小为“16 像素”、行高为“120%”、颜色为“#D1C598”、修饰为“无”；在

a:visited 样式中，设置与 a:link 相同；在 a:hover 样式中，设置颜色为“#FFF9CC”，修饰为“下划线”，其他相同；在 a:active 样式中设置颜色为“#990033”，修饰为“无”，此时网页的中的超链接自动应用了 CSS 选择器样式。

（9）在该样式表文件中，新建一个名称为“button”的“创建自定义样式”，在“类型”选项中设置字体为“宋体”、大小为“16”像素、颜色为“#FFEFC6”；在“背景”选项中设置背景颜色为“#333333”；在“边框”选项中设置边框样式为“实线”、宽度为“细”、颜色分别为“#d1c598”、“#333333”、“#333333”、“#d1c598”（需先将“全部相同”选项清除），最后将文档窗口中插入的“列表/菜单”应用该样式。

（10）适当调整各个表格与单元格的尺寸与位置，按【Ctrl + S】键保存对文档的修改。

（二）制作其它页面

插入文字、图片、声音、动画、视频

（三）测试发布

1、Dreamweaver 中打开站点首页，然后按【F12】键预览页面，在浏览器中测试每一个页面，看内容是否能正确显示，尤其要测试超链接是否能正确工作。

2、将整个站点目录复制到另外一个位置，然后在浏览器中打开站点首页，测试是否所有的超链接都能正确工作。使用这种方法能够检测出使用绝对路径创建出的不正确的超链接。如果碰上无法正确跳转的超链接，应回到原来的站点中，打开相应页面重新设置超链接。

3、为了确保不同的浏览者能够看到一致的页面效果，制作好的网站还应在不同的显示分辨率下进行测试，至少要在 800×600像素和1024×768像素两种分辨率下进行测试。另外，还需要在不同字体显示大小情况下进行测试（即在“大字体”和“小字体”两种方式下测试），以确保不同字体设置的浏览者能够看到一致的字体效果。

4、测试完成之后，就可以将网站发布到远程站点上。

实验小结：略（学生写实验过程中的感受、体会，遇到什么问题，如何解决问题等）

第四篇：博物馆网站首页制作教案

博物馆网站首页制作教案

第一部分：课前导入

简单复习回顾上节所学内容 第二部分：学习新内容 【步骤一】 告知

简单介绍本单元需要学习掌握的内容

【步骤二】 引入

由一组图片导入 【步骤三】 操练

北京腾飞博物馆网站首页制作

一、行业应用 属于网页设计

二、设计理念

博物馆本身存放的就是大量距今年代比较久远的物品，因此设计师在设计过程中，从网页的颜色、装饰元素以及表面肌理等方面，都力求能够表现出一种历史久远、古老典雅的气氛，并给人以有内涵、有文化气息的视觉感受。【步骤四】具体操作步骤

1、制作背景

1新建 ○2打开素材 ○3设置前景色…….○

2、制作辅助效果 【步骤五】 归纳

本网站在开始时采用了很多图形绘制功能辅助进行布局，然后再结合各种肌理素材、混合模式、图层蒙版以及调色功能，为网页的各个部分叠加纹理；在制作内部的各个内容时，将使用的蒙版、图层样式、图形绘制以及文字输入等功能，为每个图形对象边框等精致的效果，以及相关的装饰图形及说明文字，最后还需要打开一些装饰图形，结合缩放功能将其摆放在网页的各个边角位置作为装饰。【步骤六】 评价

对学生作品作具体评价，好的作品给予肯定，容易出现问题的方面，如部分叠加纹理方面、蒙版的使用等，具体讲解。【步骤七】 小结

本案例：博物馆本身存放的就是大量距今年代比较久远的物品，因此设计师在设计过程中，从网页的颜色、装饰元素以及表面肌理等方面，都力求能够表现出一种历史久远、古老典雅的气氛，并给人以有内涵、有文化气息的视觉感受。因此同学们要把这种厚重感表现出来，此作品才算成功。

【步骤八】 作业

1、北京腾飞博物馆网站首页制作

2、完成实训报告册 【步骤九】 课后反思

第五篇：网站制作合同

网站制作合同 篇1

甲方：

乙方：

为了充分利用internet的优势，进行企业宣传和商务活动，甲方委托乙方进行网站设计制作，双方本着公平友好的原则，签定本合同：

一、甲方的权利和义务

1、甲方委托乙方进行网站设计制作工作，要求工作内容参见《附录：网站设计结构图》。

2、甲方应在乙方进行网站及网页的设计制作前提供有关网站整体设计的具体要求和意见（内容包括：首页和内页的页面设计的构图、色调、排版、网站结构、栏目设置、动态效果)。并有义务对修改后的最终设计方案予以确认。

3、甲方应及时、充分地提供网站建设所需的相关图片和文字（以电子文件的形式提供），以保证网站建设工作的如期进行，并负责网站所有文字和图片的校对工作。甲方在整体设计方案确定并签字后，有权提出文字和内容的基本修改的意见，但每次提出的修改意见不得超出上次修改意见范围，并不能违背已经确立的整体设计方案。

4、在网站设计制作工作全部完成后乙方应通过信函、传真、电子邮件、电话等方式通知甲方，甲方应在三日内进行验收、确认（如甲方在三日内未提出任何修改意见，则视同网站验收合格）。甲方签字确认后，再行提出修改意见的，须加收涉及修改部分总费用的80%的修改费。

5、甲方应对其网页所登载内容的真实性、准确性、合法性负全部责任，并且不得侵犯乙方或任何第三方的合法权利，一切由此所引起的纠纷、争议及所涉及的法律责任均由甲方承担；甲方有义务保证乙方不会因此而受到任何损害。

6、在乙方制作网站过程中，如甲方有超出合同范围的文字、图片、程序及风格等方面的修改或添加情况时，须签订合同的补充条款，并由双方协商应补充的费用。

二、乙方的权利和义务

1、乙方必须为甲方提供保质保量、优质及时的服务。

2、乙方在履行本合同时可以使用甲方的名称、商标、域名、企业标识等，但在使用过程中不能损害甲方的利益。乙方在未得到甲方允许的情况下，不得将甲方所提供资料公布在任何媒体或公开给第三方。

3、乙方根据甲方提出网站的总体设计风格及功能要求，并为甲方提供相应的设计方案。

4、在最终设计方案确认后，乙方全权、严格按照签字后的最终设计方案进行设计制作。

5、乙方不负责甲方的文案创意，如甲方要求乙方提供文案创意，应向乙方支付相应费用。

6、乙方应在甲方验收确认且付完全部款项后三个工作日内将全部网页上传至甲方所需空间，同时保证网站的正常运行。

7、经甲方同意乙方有权在甲方的主页中注明该主页由乙方制作的字样或标识。

三、合同期限：

1、甲方须在合同签订后个工作日内提供网站所需的一切资料。

2、乙方须在甲方提供全部资料后

即：网站制作自20xx年xx月xx日开始xx年xx月xx日结束。

3、网站制作周期应因甲方提出网站修改次数及其修改或增加数量和功能所用时间而顺延。

4、若因乙方原因，造成本合同的延误超过五个工作日的，甲方有权要求乙方按照每延误一日减免合

同总费用的1%的标准减免合同费用，最多不超过15%。若因甲方未及时、充分的提供网站建设的资料，和其他原因造成网站建设的延误，责任由甲方承担，并按合同规定时间向乙方支付全部费用。

四、验收确认：

1、甲方应在网站制作工作全部完成后三日内，进行网站验收工作。

2、验收合格后，甲方以书面方式签收。

3、在验收中发现问题，甲方应及时提出解决，超过验收期，甲方即不签收、又不提出书面异议，应视为甲方已验收合格。

4、验收时，以《网站建设明细表》及甲乙双方签订的所有条款为标准进行核对，包括页面无文字或图片错误，以及实际制作页数及功能和其它效果的确认。5、双方确认后，乙方向甲方交付相关密码及资料。密码一经交付，乙方将不再对网站的安全负责。若需乙方进行网站的日常维护管理，甲方则应授权乙方保管甲方相关密码及资料。

五、费用及付款（以下填写的数字均为大写）

1、本合同总款项为

2、甲方在本合同签订之日，向乙方支付本合同首付金额，计人民币

3、甲方应在验收完毕后三个工作日内（年月日前），向乙方一并支付本合同余款，共计人民币2500元

4、如在实际制作过程中在甲方认可的情况下增加的动态效果、网页特效和其它功能等应按合同附件

之《网站建设明细表》收费，并应与合同余款交付之日交付超出部分款项。

六、后期服务

1、乙方为甲方免费提供三个月内五次一个页面内文字或图片的修改，超出部分收费标准由甲乙双方共同商议决定，更换版式、增加网页、功能按当时乙方公布价格为准（文字须由甲方提供电子稿）。

2、其他服务甲乙两方协商解决，最后由甲方填写《网站建设客户确认单》，进行确认。

七、违约责任

1、在合同有效期内，因不可抗力而造成一方不能履行合同规定的责任和义务，不视为违约。不可抗力系指：战争、火灾、水灾、地震及其他不可预见并且对其发生和后果不能防止或避免的事故。

2、如甲乙双方在合同履行中发生纠纷尽量协商解决，协商不成，双方可诉至乙方所在地人民法院。

八、其他

1、本合同书一式两份，双方各执一份，具有同等法律效力。

2、本合同包括合同正文，网站建设明细表，网站建设用户确认单。

3、本合同自甲、乙双方签字盖章之日起生效。

4、本合同未尽事宜，双方可进一步协商，并签订补充协议或附件，补充协议或附件与本合同具有同等法律效力。

5、《附录：网站建设明细表》、《网站建设客户确认单》作为本合同附件，是本合同不可分割的一部分。

甲方：乙方：北京博为互联科技有限公司

经办人签字：经办人签字：郭德颖

甲方签章：乙方签章：

日期：年月日日期：年月日

网站制作合同 篇2

根据国家知识产权及网络管理的有关规定，_________（以下简称甲方）委托_________（以下简称乙方）为甲方筹建internet网站，设计制作网页的合作项目，经双方协商达成以下协议：

一、甲方权利与义务

1．甲方有权要求乙方按照附件一中双方商定的网站结构，在附件二中双方约定的时间内，完成合同中规定的内容。

2．甲方负责提供制作所需的一切资料（包括文字，图片以及其他相关文件），并制作成电子文件。在乙方开始制作网页时，甲方应备齐全部内容资料。

3．甲方应在网页制作的全过程中给与乙方便利条件，并积极配合。

4．甲方有权对乙方设计的网页提出修改意见，由双方协商更改。

二、乙方权利与义务

5．乙方应依据附件一中双方商定的网站结构，在附件二中双方约定的时间内，完成合同中规定的内容，乙方有权对甲方网页的设计提出自己的意见和建议。

6．双方合作期间，乙方对甲方提供的文字及图片资料未经甲方许可不得以任何方式泄露给第三方。

7．乙方对甲方提供的文字及图片资料中所涉及的包括知识产权在内的一切法律问题不承担任何法律责任。

8．乙方所制作的网页需兼容ie4．0 版和netscape4．0版以上主流浏览器，并支持800／600分辨率。

9．在制作过程中，对甲方陆续提出的修改要求，乙方应尽力协助实现，并交甲方验收通过。对有可能影响附件二中双方约定的完成时间的要求，乙方有权提出延期请求，由双方协商确定具体时间。

10．乙方负责在网站开通后10日内对甲方网站中由于乙方失误造成的页面错误进行修改。

三、违约责任

11．由于甲方未及时提供资料而导致乙方工作不能按时完成，乙方不负任何责任，并有权向甲方提出延期要求，延期时间由双方协商确定。

12．由于乙方原因未能按时完成合同所规定的内容，甲方有权向乙方提出索赔，具体额度由双方协商确定。

四、争议解决

13．双方因合同的解释或履行产生争议，由双方友好协商解决。协商不成，双方均有权向有管辖权的人民法院起诉。

五、知识产权的保护

14．甲方付清应付乙方的全部款项后，甲方正式享有网站的全部使用权。

15．双方合作期间，网站构架，网页版式设计等内容（甲方提供文本资料及图形，音像资料未经乙方加工部分除外）之版权，设计权，使用权归乙方所有，未经许可甲方不得擅自使用，不得复制或交由第三方使用。

16．如因乙方原因出现第三方指控与站点页面有关的知识侵权的事件，应由乙方负责并保证甲方权利不受损失。

六、合同的终止

17．在乙方收到甲方支付的全部费用后，本合同自行终止。

18．任何一方终止合同，需提前10个工作日书面通知对方，并说明正当终止理由，由双方签字代表协商终止合同。

19．由于战争，地震，火灾等法定人力不可抗因素导致的工作中断，双方均不承担责任，待条件恢复后，由双方协商确定合同变更内容。

七、合同金额及付款方式

20．甲方应向乙方网站规划费，网站设计费，网站制作费，以及网站后期维护费共计人民币_________元。

21．乙方为甲方进行网站总体设计制作之前，甲方应付给乙方网站预付款_________元。

22．待乙方全部完成甲方网站建设后，甲方应在三日内付给乙方网站建设款_________元。

23．乙方为网站后期维护期满，甲方应在三日内付给乙方网站维护款_________元。

甲方（盖章）：_________ 乙方（盖章）：_________

代表（签字）：_________ 代表（签字）：_________

_________年____月____日 _________年____月____日

网站制作合同 篇3

甲方：

乙方：XXX网络科技有限公司

经甲、乙双方友好协商，依据自愿、平等、互利的原则，就甲方代理经销乙方的手机wap网站的系列产品和服务，达成如下协议：

一、代理产品种类及代理区域

1-1 代理范围： 鉴于甲方完全接受乙方的规范管理，并经乙方审核符合产品代理商的相关资格，同意甲方作为乙方的产品代理商，在 县区域内作为 独家代理商销售灵智WPA网站制作。

1-2 代理时间：从 年 月 日至 年 月 日止。本协议期满时，如双方同意，可续订本协议。

1-3 甲方接受乙方按照《代理商管理规范》的各项有关规定对所有产品代理商实施审批、业绩统计、考核、定级、奖惩等方面的统一管理。

二、双方的权利、义务:

2-1 甲方的权利、义务

2-1-1 积极宣传推广所代理的乙方相关业务，维护乙方的企业形象和服务品质，如实向客户告知所提供的服务项目及基本报价等；不得进行以次充好、削减服务项目、对免费项目收费等损害乙方和或客户利益的行为。

2-1-2 依照乙方规定交纳预付款 元 （大写 元），并应按乙方制定的实时有效的价格标准为所选择的服务付款。

2-1-3 甲方须详细阅读并确实理解乙方在其网站上发布的代理商制度的全部内容，并严格遵守代理商制度。在提交乙方相关业务业务时，按照操作要求提交正确完整的客户数据资料并按正确步骤进行。甲方有义务定期浏览乙方网站，以及时了解代理商制度的最新变动。

2-1-4 甲方与最终用户办理相关业务时，与客户签定协议，并向客户提供必要的服务和支持，解答客户提出的各种问题。不得以欺诈、胁迫等不正当手段损害客户的利益。甲方可享受乙方规定的对该产品提供的各项服务与支持。2-1-5 甲方应遵守并促使其用户遵守乙方的各项服务和产品的在线申请/注册条款，甲方的用户违反前述条款的行为将被视为甲方的行为。

2-1-6 甲方接受乙方的销售价格指导。甲方自行与客户约定的服务价格、收费标准不得低于乙方公布的价格下限。

2-1-7 甲方需保证服务质量，不得损害乙方整体市场形象，也不得从事其它损害乙方利益的行为。

2-1-8 甲方在推广乙方的业务时，可以在其公司宣传材料和名片上以及广告内容中使用“环球聚合”，“灵智”“北京威智聚合代理商”等字样和统一标识、商标等，未经正式授权，甲方不得以“北京威智聚合办事处”或“北京威智聚合总代理”等具有垄断性、排他性和其它未经乙方授权的名义进行广告宣传及商业活动。企业名称中不得出现“北京威智”等引人误解其为乙方分公司或分支机构的字样。

2-1-9 甲方有权应邀参加乙方组织的代理商年会、研讨会和培训，获得培训资料和音像资料等，根据管理规范中的内容获得乙方的支持与奖励。

2-1-10 甲方保证其所有经营活动完全符合中国有关法律、法规、行政规章的规定。如因甲方违规经营给乙方带来任何损害，甲方应承担所有法律责任并赔偿损失。

2-1-11 在本协议有效期内及本协议终止或者解除后，甲方承诺不向与乙方构成商业竞争关系的企业、商业机构或者组织提供有关乙方业务、技术等一切相关信息或者资料，否则需承担相应的责任。

2-1-12 甲方与乙方的其他代理商之间不得进行恶性竞争或者其它不正当竞争。

2-2 乙方的权利、义务

2-2-1 乙方不与甲方的客户发生直接经济往来。

2-2-2 甲方递交的所有业务，由于实行即注即付方式，一经甲方递交，乙方便视为甲方及客户同意注册此业务，乙方将在甲方的预付款余额足够的前提下及时实行注册。

2-2-3 乙方向甲方提供完整的售后服务。

2-2-4 及时将与甲方代理业务有关的价格细则和变化、市场动态指导等通知甲方（一般用电子邮件或者短信方式和代理交流专区公告的方式）。2-2-5 向甲方提供业务范围内的技术支持和培训，帮助甲方提高技术能力，拓宽业务范围。

2-2-6 对因甲方违反本协议造成客户或乙方损失的，乙方有权终止本协议并有权要求甲方赔偿损失。

2-2-7 对因乙方过错造成的损失，乙方只向甲方承担责任。该责任的承担以甲、乙双方之间发生的该笔具体业务金额的总额为上限。

2-2-8 对甲方与其客户之间的纠纷、争议、损失、侵权、违约责任等，均由甲方与客户自行解决，乙方不介入甲方与客户的'纠纷、争议等，也不对客户的任何损失负责。

2-2-9 在本协议有效期内，乙方有权根据市场情况修订代理章程和产品定价信息；甲方应同意接受乙方的修订。更新后的各种信息乙方将在其网站上以公告形式或通过电子邮件通知甲方。修订信息自规定之日起生效。非特殊情况上述变更均不另行通知甲方。

2-2-10 乙方应对甲方的客户和相关内容及其他甲方明确提示为保密资料的信息给予保密。

2-2-11 乙方提供自动查询功能，使甲方能在乙方网站上查询其业务信息和帐款信息。乙方持续完善代理服务系统，以更方便和支持甲方开展代理业务。

2-2-12 乙方视必要定期或不定期举办代理商年会、研讨会和培训等活动。

三、甲乙双方间的相互关系:

甲方双方各自独立经营，每一方都有独立的权利和义务，任何一方均不得将其债务强加于另一方或影响已赋予另一方的权利，若因任何一方的行为引起第三方诉讼、索赔，均由该方独立承担责任。

四、付款/结算条款:

4-1 甲方成为乙方南阳黄页WAP制作网的产品代理商以支付预付款和签订在线协议为确定双重确认。甲方须在协议签定之日起五日内，将预付款汇至乙方指定的银行帐号，否则本协议自动作废。

4-2 合作确认后，按照乙方申请的代理级别确认乙方的销售折扣，网站的自动结算系统逐笔结算甲方的委托业务并从预付款中自动扣除，甲方应自行查询余额并保证其余额足以支付下一笔委托业务。

4-3 乙方按要求为甲方开具发票并以挂号件形式寄至甲方指定地址；如甲方在发票方面有任何特殊要求（如为客户分别开票等），须在汇款传真件上详细说明。

4-4 协议终止时，如果甲方实际发生业务的金额未达到预付款，则乙方扣除包含实际发生业务金额在内的款项后，剩余部分退还甲方。

五、协议的变更、解除、终止和违约责任：

5-1 甲、乙双方应本着诚实信用的原则履行本协议。任何一方在协议签定或履行中采用欺诈、胁迫或者暴力手段，另一方均可以解除本协议并要求对方赔偿损失。

5-2 任何一方在履行中发现或者有证据表明对方已经、正在或预期将要违约，可以终止履行本协议，但应及时通知对方。若对方对本协议继续不履行、履行不正当或者违约，该方可以解除本协议并要求对方赔偿损失。

5-3 在协议执行期间，如果双方或一方认为需要终止，应提前一个月通知对方。经双方协商同意后在财务结算完毕、各自责任明确履行之后，方可终止协议。因一方违反本协议的约定擅自终止本协议，给对方造成损失的，应赔偿对方损失。

5-4 经双方协商达成一致，可以对本协议有关条款进行变更，但即时结清者外应当以书面形式确认。

5-5 订立本协议所依据的法律、行政法规、规章发生变化，应变更本协议相关内容；订立本协议所依据的客观情况发生重大变化，致使本协议无法履行的，经甲乙双方协商同意，可以变更或者终止协议的履行。

5-6 因一方经营情况发生重大困难、濒临破产进入法定整顿期或者被清算，任意一方可以解除本协议。但进行重组、名称变更、分立或与第三方合并等不在此列。

5-7 一方未履行或违反依据本协议约定所应承担的义务，经另一方给予一定期限后仍不履行义务或不予采取补救措施，致使另一方依据本协议的预期利益无法实现或协议继续履行没有必要，另一方有权解除协议。

5-8 一方明确表示其将不履行义务或以行动表示其将不履行义务，另一方可以解除协议。

5-9 由于不可抗力或意外事件使协议无法继续履行或继续履行没有必要，双方均可要求解除协议。

5-10 协议解除后，双方依据本协议约定的权利义务终止，但一方在协议解除前应履行的义务仍需履行。除因不可抗力或意外事件致使协议解除的情形外，引起协议解除事由的一方应赔偿因协议解除给另一方造成的损失。

六、免责条款:

6-1 因不可抗力或者其他意外事件使得本协议的履行不可能、不必要或者无意义的，任一方均可以解除本协议。遭受不可抗力、意外事件的一方如全部或部分不能履行本协议、解除或延迟本协议，应自不可抗力、意外事件发生之日起五日内，将事件情况以书面形式通知另一方，并于事件发生之日起二十日内，向另一方提交导致其全部或部分不能履行或延迟履行的证明。

6-2 遭受不可抗力的一方应采取一切必要措施减少损失，否则应就扩大的损失承担责任。

6-3 本协议所称不可抗力、意外事件是指不能预见、不能克服并不能避免且对一方或双方当事人造成重大影响的客观事件，包括但不限于自然灾害如洪

水、地震、瘟疫流行和风暴等及社会事件如战争、**、政府管制等。

6-4 由于乙方的部分服务是建立在其他运营商的通道或者平台上，因而不能100%保证产品以及其他技术方式的完全通畅。如确因运营商网络问题造成偶尔不能及时畅通，不视为乙方违约。

七、争议的解决:

本协议履行期间如果双方发生争议，应友好协商解决；协商未果，提交南阳市法院解决。

八、其他约定:

九、附则:

9-1 本协议的订立、效力、解释、履行和争议的解决均适用中华人民共和国法律。

9-2 一方变更通讯地址或其它联系方式等，应自变更之日起十日内，将变更后的地址、联系方式通知另一方，否则变更方应对此造成的一切后果承担责任。

9-3 未经其他方书面同意，任何一方不得全部或部分转让其在本协议项下的权利和义务。

9-4 任何一方对本协议的内容和对方当事人的商业机密均负有保密的义务。双方的保密义务不因本协议终止而解除。

9-5 本协议同时得到甲乙双方完全理解和认同。在填写过程中，未经乙方书面同意，甲方不得随意更改本协议中的任何条款。本协议经双方签字盖章后生效。任何更改均需双方协商一致并以书面形式确认。

9-6 本协议一式两份，双方各执一份，协议附件与本协议具有同等法律效力。

甲方： 乙方：

被授权人签字盖章： 被授权人签字盖章： 联系人：联系人：

通讯地址： 通讯地址：

邮编： 邮编：473000

E-mail: 开户行：开户行：

银行帐号： 银行帐号：

联系人电话： 联系人电话： 手机： 手机：

合同签定日期：合同签定日期：

网站制作合同 篇4

甲方：_________

乙方：_________

一、总则

1.甲方同意为乙方提供网站策划，网站制作服务。

2.网站的信息发布必须符合中华人民共和国现行的各项相关法律，若网站的信息发布出现违反中华人民共和国现行的各项相关法律的内容，乙方应承担相应的法律责任，且甲方有权终止对乙方的服务，即关闭此网站乙方发布的信息。

二、甲方责任与权利

1.甲方根据双方达成共识的网站建设方案，负责乙方的网站策划，网站制作。

2.甲方必须保证网站上数据的准确性，可靠性，可看性及合法性。

3.在收到乙方的预付款后，甲方开始制作乙方的网站并保证在双方议定期限内完工。

4.甲方有为乙方网站进行一次维护的义务和权利。

5.网站完工验收后如乙方未能按期付清所有款项予甲方，甲方有权终止所有服务，并按司法程序向乙方追讨赔偿。

三、乙方责任与权利

1.乙方与甲方就网站建设方案达成共识并不得随意要求甲方更改方案。

2.乙方根据方案在双方议定的期限内把网站制作的详细资料递交给甲方。

3.乙方有权利了解和要求甲方通报网站建设和网页制作的详细情况。

4.网站的网页制作完成后，将请乙方审阅确认，在确认之前乙方有权根据实际情况并基于建站方案进行调整和少量的修改。确认后，上传至虚拟主机。网站制作完成。乙方不得随意要求甲方修改网站网页。

5.在网站工程验收程序中(_________天)，乙方有权要求甲方作出局部的调整和修改，不得以不恰当理由要求甲方作过多的更改。

6.乙方有权要求甲方作出局部的调整和修改，对于无理的要求和过Ji的言论伤害到人格甲方有权终止合作。

四、网站制作要求，收费标准，验收程序

1.企业介绍级网站要求：

(a)网站有_________种语言版本：_________;

(b)网站页数范围：_________;

(c)网站建设方案：_________。

2.企业介绍级网站收费标准：见本网站中网站设计报价。

3.付款方式：

(a)乙方应在本合同签订之日，向甲方交付网站建设总金额的1/3作为网站建设预付款。

(b)乙方应在网站验收合格之后，二天之内，一次性付清网站建设的所有款项。

4.客户预付：客户预付制作费用的50%以上，同时提交网站所需资料。预付金额比例：

(a)建站总金额在_________元以上预付50%制作费;

(b)建站总金额在_________元以下_________元以上预付60%制作费;

(c)建站总金额在_________元以下_________元以上预付70%制作费;

(d)建站总金额在_________元以下(包括_________元)，一次性付清制作费。

5.乙方网站制作实际费用为：_________。

6.验收程序：

(a)自本协议签订之日起_________天内为网站网页制作期，制作时间根据网站的复杂和简单程度来看，一般为10—25天，验收期限为_________天。

(b)网站网页策划及制作完成后，应在两天内交与乙方确认并作最后的调整和修改。

(c)网站制作完成并经甲，乙两方最后的调整和修改后，上传至虚拟主机。

(d)成功上传至虚拟主机之后，网站建设全部完成。

五、违约责任

1.不可抗力：因天灾，行政指令等不可抗力因素而造成的违约，违约方不承担任何法律责任。

2.因乙方资料不齐全，不详尽而造成的甲方不能按时完成制作的，乙方应承担全部责任。

3.因乙方提供非法图文或乙方非法操作而造成网站被关闭的，其全部责任由乙方承担。

4.因甲方上传非法图文或甲方非法操作而造成网站被迫关闭的，其全部责任由甲方承担。

5.因乙方未能按本协议约定期限内向甲方付款而造成违约的，由乙方承担责任并每逾_________天按总金额的10%作为违约金。

六、本协议期限为：_________年_________月_________日起至_________年_________月_________日。

七、本协议一式二份，双方各执一份，具有同等法律效力，协议过程中遇争议问题可协商解决。

八、有关未尽事宜，双方协商解决。协商后签定的补充协议与本协议具有同等的法律效力。

甲方(盖章)：_________乙方(盖章)：_________

代表(签字)：_________代表(签字)：_________

_________年____月____日_________年____月____日

网站制作合同 篇5

甲方：___________________

乙方：___________________

一、甲方选择的套餐名称：____________________

甲方最后结款期限：__________________________

二、甲方的权利和义务

1．甲方委托乙方进行网站设计制作。并根据自身的需要，选定模板风格。

2．网站制作工作全部完成，经过甲方验收后，在一个工作日内，向乙方支付未付的全部费用；乙方予以上传网站。

3．甲方应对其网页所登载内容的真实性、准确性、合法性无条件的负全部责任。

三、乙方的权利和义务

1．乙方应保证域名以及虚拟主机等在甲方使用期间的合法使用；

2．如乙方网站制作完成，甲方在最后结款期限内尚未支付剩余款项，乙方保留向司法机关提出控诉的权利。

四、验收确认

1．甲方须在乙方指定空间和时间内进行验收；

2．验收期为乙方指定验收后的三个工作日内，验收合格后，甲方以书面方式签收（《网站建设客户确认单》。超过验收期，甲方即不签收、又不提出书面异议，应视为甲方已验收合格，如甲方在验收期过后即不签收《网站建设客户确认单》又不支付剩余款项，乙方保留向政法机关提出诉讼的权利。

五、费用及付款

1．本合同总款项为________元整，先期预付款为总款额的________%，计__________元整，后期付款甲方须验收合格后立即支付，计________元整。

2．附加款项指在甲方认可的情况下增加的页面及效果、功能等，每增加一页按照________元/页收费（其他按《网站制作收费明细表》收费）。共计人民币________元整。

六、 其他

1．本合同书一式两份，双方各执一份，具有同等法律效力。

2．本合同自甲、乙双方签字盖章之日起生效。

3．本合同未尽事宜，双方可进一步协商，并签订补充协议或附件，补充协议或附件与本合同具有同等法律效力。

4．《网站建设客户确认单》作为本合同附件，是本合同不可分割的一部分。

甲方：____________________________

联系人：__________________________

盖章（单位代理）：________________

联系电话：________________________

授权代表签字（单位代理）：________

传真：____________________________

联系地址：________________________

本人签名（个人代理）：____________

邮政编码：________________________

身份证号（个人代理）：____________

电子邮件：________________________

会员号：__________________________

网址：____________________________

___________年_________月________日

乙方：____________________________

联系电话： _______________________

传真：____________________________

盖章：____________________________

授权代表签字：____________________

联系地址/邮编：___________________

电子邮件：________________________

___________年_________月________日

网站制作合同 篇6

甲方：_________

地址：_________

电话：_________

乙方：_________

地址：_________

电话：_________

甲方委托乙方制作主页，帮助甲方树立企业形象，扩大宣传，拓宽销售渠道，为明确双方责任，根据中国法律经双方协商，签订此合同，以期双方共同遵守。

一、双方的权利和义务

1.甲方的权利和义务

1.1 提供有关企业的电子文字材料及图片，以及其他相关文件，应保证材料完整，图片清晰。

1.2 开展的业务必须符合国家法律和社会公共利益。

1.3 甲方有权要求乙方按照双方商定的网站结构，在双方约定的时间内，完成合同中规定的内容。

1.4 按时支付网页设计制作费用。

2.乙方的权利和义务

2.1 乙方依据双方商定的网站结构，在双方约定的时间内，完成规定的内容。

2.2 乙方对甲方提供的文字及图片资料中所涉及的包括知识产权在内的一切法律问题不承担任何法律责任。

2.3 在制作过程中，对甲方陆续提出的修改要求，乙方应尽力协助实现，对有可能影响双方约定的完成时间的要求，乙方有权提出合理的延期请求，由双方协商确定具体时间。

二、网页制作过程

1.由甲方提供企业的网站电子文字材料及图片，乙方根据网站材料及甲方设计要求进行网站首页设计，在_________个工作日后将主页平面设计图交给甲方审核。

2.甲方根据网站平面设计图提出修改意见，乙方根据修改意见进行改动。

3.网站平面图经乙方修改完成并经甲方签字确认后，网页首页设计完成。（如甲方在网站设计工作完成后更改原来双方已确认的网站创意，图片，结构及文案时，由此产生的一切费用由甲方一次性支付给乙方。）

4.乙方开始网页制作工作，整个网站制作时间为_________个工作日，所有工作将在_________月_________日前完成。完工后，乙方将网页上传至甲方服务器空间，由甲方依据验收。

三、主页制作费用报价，合同金额及付款方式

首页：_________页×_________元/页= _________元；副页数：_________页×_________元/页=_________元。

验收期为一个星期，本合同涉及的预估总金额为人民币_________元。

合同签订后当日，甲方支付预估总金额的50%，即_________元，甲方应在验收期完成后_________天内交完余额。

四、验收标准和验收后修改补充

1.甲方可以通过任何与因特网进行网络连接的计算机浏览自己的主页。

2.主页无文字拼写及图片（以甲方提供的材料为标准）错误。

3.验收合格，甲方以书面文字传真方式签收。验收期限为_________.

5.验收期内，如果甲方需要修改主页，可以免费进行较小的改动，改动较大者须另与乙方签订网页维护制作合同。

6.在验收期后的_________日内，乙方收到甲方支付的全部费用后，网页设计与制作工作自行终止。

五、违约责任

甲方违约或拒不付费时，乙方有权不退还定金，有权向甲方提出索赔，具体额度由双方协商确定，由此造成的损失由甲方负责。

乙方违约或没有按照合同规定按时完成，甲方有权拒绝付款，由此造成的损失，乙方自行承担。

六、附则

1.本合同自双方签订后生效，一式_________份，甲乙双方各执_________份。

2.本合同未尽事宜，双方应在本合同达成的原则基础上以补充条款的方式明确，补充条款与本合同具有同等的法律效力。

甲方（盖章）：_________ 乙方（盖章）：_________

法定代表人（签字）：_________ 法定代表人（签字）：_________

_________年____月____日 _________年____月____日

签订地点：_________ 签订地点：_________