第四部分
建立主题网站
教学内容：
一、规划网站
二、网站设计
三、网站实现
四、发布管理网站
教学目标：
1. 了解网站相关的基础知识
2. 简单认识html语言，学会在语言组里添加部分修饰成分
3．学会制作简单的主题网站
4、了解网站发布的部分内容
教学重点：简单认识html语言，学会在语言组里添加部分JAVA语句及CSS样式表。
使用FRONTPAGE制作主题网站
3．学会制作简单的主题网站
教学难点：在html语言组里添加部分JAVA语句及CSS样式表。
课时数：
_____课时
教学内容：
导入：打开两个优秀的个人主页
秘密花园
http://www.lili.cc/
苹果树下
http://appleshow.cc/
介绍就两个优秀的网站。
将学生分组
一、规划网站
网站：因特网上具有相似性质、共同内容的一组
信息资源就是一个网站。
构成一个网站的基本元素是各种各样的文
件以及存放这些文件的文件夹。
这些文件大致分为三类：
html
或
htm
为后缀名的网页文件
链接的音视频
web数据库和程序文件
网页：用html语言写成的文件，它存放在某一台
计算机中，而这台计算机必须是与网络相
连的。
主页：通常用来表示访问某个网站时出现的第一
个页面。
网站的结构：
树状结构
线性结构
网状结构
html —— hypertext
makeup
language http——hypertext
transport
protocol
网站规划几步骤
一、需求分析与选题
设计提问：同学们思考并讨论自己小组要设计网站的主题？网站主题一般分为休闲娱乐、电脑网络、生活服务、文化科学、教育就业等等。
主题选择的原则——1、主题要小而精
2、设计的内容是自己擅长或者喜爱的内容
完成下表
网站主题
网站名称
小组成员
注意内容
选择的理由
二、选择网页制作工具
html语言——后面详细讲解
简单介绍几个主要组成部分
例：
欢迎光临机器人做学玩网站<title> </head> <body> 欢迎进入机器人做学玩网站！！！！</p><p></body> </html> frontpage工具——</p><p>dreamweaver工具——</p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p>（看看书上的比较，简单了解一下）</p><p></p><p>三、确定网站建设计划表</p><p>完成自己主题网站的计划表</p><p></p><p>二、网站设计</p><p>（根据自己的情况，完成相应的设计步骤）</p><p>一、栏目设置</p><p>二、版面设计</p><p>三、树立网站整体风格</p><p></p><p>四、收集素材</p><p>介绍部分素材网站</p><p>http://www.sucaiw.com/ </p><p>http://cqtm.diy.myrice.com/</p><p>三、规划建设（frontpage）</p><p>以设计制作一个简单的个人网页为例，讲解frontpage的使用</p><p>第一部分：frontpage的简单介绍</p><p>一、窗口构成</p><p>1．标题栏、菜单栏、工具栏、状态栏与Office其他组件类似。</p><p>FrontPage 2000与其它Office软件的窗口大致相似，主窗口由标题栏、菜单栏、工具栏、视图栏、编辑区和状态栏等组成。</p><p>2．视图栏</p><p> 管理Web站点的工具。</p><p>3．工作区</p><p> 是管理站点和编辑网页的主要场所。在站点的“网页”视图模式下，网页编辑区的下方有三个编辑按钮它们分别代表三种编辑模式：普通、HTML和预览。用户一般在普通模式下设计网页，如果切换到HTML模式下，将会看到系统自动生成的 HTML程序。</p><p>二、FrontPage 2000的视图</p><p>FrontPage 2000提供了六种视图模式，即网页视图、文件夹视图、报表视图、导航视图、超链接视图和任务视图。它们是用户进行网站设计的有力工具，灵活运用视图模式，将极大地方便设计操作和网站管理。</p><p>一、网页视图</p><p> 网页视图用于编辑和显示网页，创建站点和制作网页都在此视图下进行。</p><p>二、文件夹视图</p><p> 打开一个网站后，系统默认是以文件夹视图来显示的，文件夹视图与Windows中的资源管理器相似，它能够显示当前的Web中的内容是如何组织的。</p><p>三、报表视图</p><p> 报表视图用于显示当前站点的各种文件报表，例如，“最近更改的文件”报表、“断开的超连接”报表等。</p><p>四、导航视图</p><p> 导航视图清楚地显示了Web的结构，用户可以从中了解到网站中各部分之间的逻辑关系，它反映了网站的整个脉络。</p><p>五、超链接视图</p><p> 超链接视图以图形化的界面显示了当前网页和网站内其他文件之间的超链接关系,也可以显示网站与网站之间的超链接。</p><p>六、任务视图</p><p>任务视图用任务列表的方式对任务进行管理，操作人员可以把详细的任务放在任务列表中，这样它就会提醒设计人员需要完成哪些任务，还剩哪些任务没有完成。</p><p>三、表格的应用</p><p>演示操作：1、插入7行2列的表格</p><p>表格—插入—表格—“插入表格对话框”设置行数、列数、边框粗细等参数</p><p> 2、将表格部分单元格合并</p><p>使其出现符合设计的样式</p><p>学生操作：根据自己主页的栏目划分及版面设计，插入合适的表格。</p><p></p><p></p><p></p><p></p><p></p><p></p><p>四、插入菜单</p><p>强调在网页制作是素材整理的重要性。将网页中需要用到的素材包括图片、动画、音频、视频等整体放入站点的IMAGE、FLASH等文件夹中统一管理，避免出现上传链接出错的状况。</p><p>1、图片</p><p>2、</p><p>滚动字幕flash动画</p><p>4、水平线</p><p>5、书签</p><p>操作演示：在第一行插入图片banner，在第一列插入gif动画 </p><p>跟学生讲解图片工具栏各种工具的作用</p><p></p><p></p><p></p><p></p><p></p><p>五、超链接</p><p>文字超链接 图片超链接 书签 链接到新的网页、电子邮件等。</p><p>（具体讲解每一个超链接的意义）</p><p>操作演示：</p><p>根据自己的网页设计制作超链接（以右健操作为主）</p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p>六、css样式表</p><p>以考试模拟试题为主，像学生讲解有关css样式表的含义</p><p><style type = “text/css”> 样式表内容 </style> </p><p></p><p></p><p></p><p></p><p></p><p></p><p>七、动态网页</p><p>动态网页与静态网页的区别</p><p>让学生进百度检索找出动态网页与静态网页的区别</p><p></p><p></p><p></p><p></p><p></p><p></p><p>动态网页是与静态网页相对应的，也就是说，网页 URL的后缀不是.htm、.html、.shtml、.xml等静态网页的常见形式，而是以.asp、.jsp、.php、.perl、.cgi等形式为后缀，并且在动态网页网址中有一个标志性的符号——“?”，如有这样一个动态网页的地址为: http://www.eneo.cn/blogview.asp?logID=108 这就是一个典型的动态网页URL形式。</p><p>这里说的动态网页，与网页上的各种动画、滚动字幕等视觉上的“动态效果”没有直接关系，动态网页也可以是纯文字内容的，也可以是包含各种动画的内容，这些只是网页具体内容的表现形式，无论网页是否具有动态效果，采用动态网站技术生成的网页都称为动态网页。</p><p>从网站浏览者的角度来看，无论是动态网页还是静态网页，都可以展示基本的文字和图片信息，但从网站开发、管理、维护的角度来看就有很大的差别。网络营销教学网站将动态网页的一般特点简要归纳如下: (1)动态网页以数据库技术为基础，可以大大降低网站维护的工作量; (2)采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等等; (3)动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页; 插入javascript代码</p><p><script language=”javascript”> </script> </p><p></p>
</div>
</div>
</div>
</div>
</div>
<div class="flex justify-between items-center mt-4">
<div class="flex items-center gap-2">
<button class="p-1.5 rounded hover:bg-gray-100 transition-colors duration-200" title="上一页">
<i class="fa fa-chevron-left text-gray-600"></i>
</button>
<span class="text-sm">第 <span class="font-medium">1</span> 页，共 <span class="font-medium">1</span> 页</span>
<button class="p-1.5 rounded hover:bg-gray-100 transition-colors duration-200" title="下一页">
<i class="fa fa-chevron-right text-gray-600"></i>
</button>
</div>
<div>
<select class="border border-border rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary">
<option>第1页</option>
</select>
</div>
</div>
</div>
</div>
</div>
<!-- 右侧边栏 -->
<div class="lg:w-1/4">
<!-- 文档基本信息 -->
<div class="bg-white rounded-lg shadow-sm p-4 mb-6">
<h3 class="font-bold mb-3 pb-2 border-b border-border">文档信息</h3>
<ul class="space-y-3 text-sm">
<li class="flex justify-between">
<span class="text-gray-500">格式：</span>
<span class="font-medium">PDF</span>
</li>
<li class="flex justify-between">
<span class="text-gray-500">页数：</span>
<span class="font-medium">未知页</span>
</li>
<li class="flex justify-between">
<span class="text-gray-500">字数：</span>
<span class="font-medium">未知</span>
</li>
<li class="flex justify-between">
<span class="text-gray-500">上传时间：</span>
<span class="font-medium">2018-08-30 11:01:00</span>
</li>
<li class="flex justify-between">
<span class="text-gray-500">下载次数：</span>
<span class="font-medium">0</span>
</li>
<li class="flex justify-between">
<span class="text-gray-500">浏览次数：</span>
<span class="font-medium">96</span>
</li>
<li class="flex justify-between">
<span class="text-gray-500">积分：</span>
<span class="font-medium text-secondary">1</span>
</li>
<li class="flex justify-between">
<span class="text-gray-500">收藏：</span>
<span class="font-medium">0</span>
</li>
</ul>
</div>
<!-- 文档作者信息 -->
<div class="bg-white rounded-lg shadow-sm p-4 mb-6">
<h3 class="font-bold mb-3 pb-2 border-b border-border">作者信息</h3>
<div class="flex items-center">
<img src="/static/images/466-60x60.jpg" alt="教师头像" class="w-12 h-12 rounded-full object-cover">
<div class="ml-3">
<h4 class="font-medium">5ygggwenku_164258</h4>
<p class="text-sm text-gray-500">来自：学校：泰州实验中学</p>
</div>
</div>
<div class="mt-3">
<p class="text-sm text-gray-600 mb-3"></p>
<button class="w-full py-2 border border-primary text-primary rounded-lg hover:bg-primary/5 transition-colors duration-200 text-sm">
关注作者
</button>
</div>
</div>
<div class="bg-white rounded-lg shadow-sm p-4 mb-6">
<h3 class="font-bold mb-3 pb-2 border-b border-border">配套课件</h3>
<ul class="space-y-3">
<li>
<a href="/ppt/OqwmBvPo.html" class="flex items-start group">
<i class="fa fa-file-powerpoint-o text-secondary mt-1 mr-2"></i>
<div>
<h4 class="text-sm font-medium text-dark group-hover:text-secondary line-clamp-2">环境对健康的影响PPT及专用教学设计内容</h4>
<p class="text-xs text-gray-500 mt-1">与本教案直接关联</p>
</div>
</a>
</li>
<li>
<a href="/ppt/yoGLWQVZ.html" class="flex items-start group">
<i class="fa fa-file-powerpoint-o text-secondary mt-1 mr-2"></i>
<div>
<h4 class="text-sm font-medium text-dark group-hover:text-secondary line-clamp-2">环境对健康的影响PPT课件和教学内容分析</h4>
<p class="text-xs text-gray-500 mt-1">2026-01-13 01:47:36</p>
</div>
</a>
</li>
<li>
<a href="/ppt/roxPBaeo.html" class="flex items-start group">
<i class="fa fa-file-powerpoint-o text-secondary mt-1 mr-2"></i>
<div>
<h4 class="text-sm font-medium text-dark group-hover:text-secondary line-clamp-2">环境对健康的影响PPT课件和教学目标设计</h4>
<p class="text-xs text-gray-500 mt-1">2018-05-01 19:26:00</p>
</div>
</a>
</li>
<li>
<a href="/ppt/wZX3rY1o.html" class="flex items-start group">
<i class="fa fa-file-powerpoint-o text-secondary mt-1 mr-2"></i>
<div>
<h4 class="text-sm font-medium text-dark group-hover:text-secondary line-clamp-2">环境对健康的影响PPT课件和优质课教案设计</h4>
<p class="text-xs text-gray-500 mt-1">2026-01-08 17:17:36</p>
</div>
</a>
</li>
<li>
<a href="/ppt/wZX3rrpo.html" class="flex items-start group">
<i class="fa fa-file-powerpoint-o text-secondary mt-1 mr-2"></i>
<div>
<h4 class="text-sm font-medium text-dark group-hover:text-secondary line-clamp-2">环境对健康的影响公开课课件</h4>
<p class="text-xs text-gray-500 mt-1">2018-05-17 09:35:00</p>
</div>
</a>
</li>
<li>
<a href="/ppt/zoY3lnNq.html" class="flex items-start group">
<i class="fa fa-file-powerpoint-o text-secondary mt-1 mr-2"></i>
<div>
<h4 class="text-sm font-medium text-dark group-hover:text-secondary line-clamp-2">环境对健康的影响PPT课件和教学设计一等奖</h4>
<p class="text-xs text-gray-500 mt-1">2018-08-22 00:38:00</p>
</div>
</a>
</li>
</ul>
</div>
<!-- 相关文档 -->
<div class="bg-white rounded-lg shadow-sm p-4 mb-6">
<h3 class="font-bold mb-3 pb-2 border-b border-border">相关文档</h3>
<ul class="space-y-3">
<li>
<a href="/ziyuan/OqwVaVyZ.html" class="flex items-start group">
<i class="fa fa-file-pdf-o text-primary mt-1 mr-2"></i>
<div>
<h4 class="text-sm font-medium text-dark group-hover:text-primary transition-colors duration-200 line-clamp-2">陆地直道、弯道模仿教案公开课一等奖</h4>
<p class="text-xs text-gray-500 mt-1">
2026-01-04
</p>
</div>
</a>
</li>
<li>
<a href="/ziyuan/KZ8QXQ2q.html" class="flex items-start group">
<i class="fa fa-file-pdf-o text-primary mt-1 mr-2"></i>
<div>
<h4 class="text-sm font-medium text-dark group-hover:text-primary transition-colors duration-200 line-clamp-2">单手肩上传接球优秀教案设计</h4>
<p class="text-xs text-gray-500 mt-1">
2019-10-18
</p>
</div>
</a>
</li>
<li>
<a href="/ziyuan/Bo3p6p2Z.html" class="flex items-start group">
<i class="fa fa-file-pdf-o text-primary mt-1 mr-2"></i>
<div>
<h4 class="text-sm font-medium text-dark group-hover:text-primary transition-colors duration-200 line-clamp-2">2.刀术主要内容及教案内容</h4>
<p class="text-xs text-gray-500 mt-1">
2019-05-07
</p>
</div>
</a>
</li>
<li>
<a href="/ziyuan/YqKPQPRM.html" class="flex items-start group">
<i class="fa fa-file-pdf-o text-primary mt-1 mr-2"></i>
<div>
<h4 class="text-sm font-medium text-dark group-hover:text-primary transition-colors duration-200 line-clamp-2">停球教案及板书设计</h4>
<p class="text-xs text-gray-500 mt-1">
2019-07-11
</p>
</div>
</a>
</li>
<li>
<a href="/ziyuan/0ogGYDlo.html" class="flex items-start group">
<i class="fa fa-file-pdf-o text-primary mt-1 mr-2"></i>
<div>
<h4 class="text-sm font-medium text-dark group-hover:text-primary transition-colors duration-200 line-clamp-2">现代奥林匹克运动优质课教案</h4>
<p class="text-xs text-gray-500 mt-1">
2021-08-16
</p>
</div>
</a>
</li>
</ul>
</div>
<!-- 下载提示 -->
<div class="bg-white rounded-lg shadow-sm p-4 mb-6">
<div class="flex items-start p-3 bg-primary/5 rounded-lg border border-primary/20">
<i class="fa fa-info-circle text-primary mt-0.5 mr-2"></i>
<div>
<h4 class="font-medium text-dark">下载提示</h4>
<p class="text-sm text-gray-600 mt-1">下载文档后，您可以获得：</p>
<ul class="text-sm text-gray-600 mt-1 space-y-1 ml-5 list-disc">
<li>完整无水印文档</li>
<li>高清阅读体验</li>
<li>随时保存查看</li>
<li>支持打印下载</li>
</ul>
</div>
</div>
</div>
<section class="bg-white rounded-lg shadow-sm p-5 md:p-6 mb-6" aria-labelledby="geo-faq-title">
<h2 id="geo-faq-title" class="text-lg font-bold mb-4">关于本教案的常见问题</h2>
<div class="space-y-4">
<div class="border-b border-border pb-4 last:border-0 last:pb-0">
<h3 class="font-medium text-dark mb-2">Q：环境对健康的影响优秀教案是什么类型的资料？</h3>
<p class="text-gray-600 text-sm leading-relaxed">A：这是一份教学教案文档，可用于备课、课堂讲解与课后复习，支持在线预览正文内容。</p>
</div>
<div class="border-b border-border pb-4 last:border-0 last:pb-0">
<h3 class="font-medium text-dark mb-2">Q：这份教案对应哪篇课文？</h3>
<p class="text-gray-600 text-sm leading-relaxed">A：对应课文《环境对健康的影响》，可从面包屑进入课文目录查看同课其他资料。</p>
</div>
<div class="border-b border-border pb-4 last:border-0 last:pb-0">
<h3 class="font-medium text-dark mb-2">Q：如何找到配套课件？</h3>
<p class="text-gray-600 text-sm leading-relaxed">A：页面提供「配套课件/同课文课件」入口；也可进入课文详情页同时查看教案与课件列表。</p>
</div>
</div>
</section>
</div>
</div>
</main>
</div>
<!-- 底部区域 -->
<footer class="bg-white border-t border-border mt-8">
<div class="container mx-auto px-4 py-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<div class="flex items-center mb-4">
<img src="/static/images/logo.png" style="width:35px;" class=" text-primary text-2xl mr-2">
<span class="text-xl font-bold text-primary">go go go文档</span>
</div>
<p class="text-gray-600 text-sm mb-4">提供教育、经济、法律、医学等各领域优质文档下载，是您学习和工作的好帮手。</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-primary transition-colors duration-200">
<i class="fa fa-weibo text-lg"></i>
</a>
<a href="#" class="text-gray-400 hover:text-primary transition-colors duration-200">
<i class="fa fa-wechat text-lg"></i>
</a>
<a href="#" class="text-gray-400 hover:text-primary transition-colors duration-200">
<i class="fa fa-qq text-lg"></i>
</a>
</div>
</div>
<div>
<h4 class="font-bold mb-4">文档分类</h4>
<ul class="space-y-2 text-sm">
<li><a href="#" class="text-gray-600 hover:text-primary transition-colors duration-200">教育文档</a></li>
<li><a href="#" class="text-gray-600 hover:text-primary transition-colors duration-200">经济管理</a></li>
<li><a href="#" class="text-gray-600 hover:text-primary transition-colors duration-200">工程技术</a></li>
<li><a href="#" class="text-gray-600 hover:text-primary transition-colors duration-200">IT计算机</a></li>
<li><a href="#" class="text-gray-600 hover:text-primary transition-colors duration-200">医药卫生</a></li>
<li><a href="#" class="text-gray-600 hover:text-primary transition-colors duration-200">法律法学</a></li>
</ul>
</div>
<div>
<h4 class="font-bold mb-4">用户中心</h4>
<ul class="space-y-2 text-sm">
<li><a href="#" class="text-gray-600 hover:text-primary transition-colors duration-200">个人中心</a></li>
<li><a href="#" class="text-gray-600 hover:text-primary transition-colors duration-200">我的收藏</a></li>
<li><a href="#" class="text-gray-600 hover:text-primary transition-colors duration-200">我的下载</a></li>
<li><a href="#" class="text-gray-600 hover:text-primary transition-colors duration-200">上传文档</a></li>
<li><a href="#" class="text-gray-600 hover:text-primary transition-colors duration-200">积分充值</a></li>
<li><a href="#" class="text-gray-600 hover:text-primary transition-colors duration-200">会员中心</a></li>
</ul>
</div>
<div>
<h4 class="font-bold mb-4">帮助中心</h4>
<ul class="space-y-2 text-sm">
<li><a href="#" class="text-gray-600 hover:text-primary transition-colors duration-200">新手上路</a></li>
<li><a href="#" class="text-gray-600 hover:text-primary transition-colors duration-200">常见问题</a></li>
<li><a href="#" class="text-gray-600 hover:text-primary transition-colors duration-200">文档下载</a></li>
<li><a href="/legal/agreement" class="text-gray-600 hover:text-primary transition-colors duration-200">用户协议</a></li>
<li><a href="/legal/privacy" class="text-gray-600 hover:text-primary transition-colors duration-200">隐私政策</a></li>
<li><a href="#" class="text-gray-600 hover:text-primary transition-colors duration-200">版权声明</a></li>
<li><a href="#" class="text-gray-600 hover:text-primary transition-colors duration-200">联系我们</a></li>
</ul>
</div>
</div>
<div class="border-t border-border mt-8 pt-6 text-center text-sm text-gray-500">
<p>© 2025 go go go文档 All Rights Reserved. 版权所有</p>
<p class="mt-2">ICP备案号：<a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer" class="hover:text-primary transition-colors duration-200">粤ICP备2023157111号</a></p>
<p class="mt-2 max-w-3xl mx-auto leading-relaxed">本网站资料来源于会员上传，版权解析归上传者所有，如发现作品侵犯您的利益，请立刻联系站长QQ：2572127418</p>
</div>
</div>
</footer>
<!-- 回到顶部按钮 -->
<button id="backToTop" class="fixed bottom-6 right-6 p-2 bg-primary/80 hover:bg-primary text-white rounded-full shadow-lg opacity-0 invisible transition-all duration-300 z-50" aria-label="回到顶部">
<i class="fa fa-arrow-up"></i>
</button>
<script>
// 回到顶部功能
const backToTopBtn = document.getElementById('backToTop');
window.addEventListener('scroll', () => {
if (window.scrollY > 300) {
backToTopBtn.classList.remove('opacity-0', 'invisible');
backToTopBtn.classList.add('opacity-100', 'visible');
} else {
backToTopBtn.classList.remove('opacity-100', 'visible');
backToTopBtn.classList.add('opacity-0', 'invisible');
}
});
backToTopBtn.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// 导航栏滚动效果
const header = document.querySelector('header');
let lastScrollTop = 0;
window.addEventListener('scroll', () => {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
if (scrollTop > 50) {
header.classList.add('shadow');
header.classList.remove('border-b');
} else {
header.classList.remove('shadow');
header.classList.add('border-b');
}
lastScrollTop = scrollTop;
});
</script>
<script src="/static/ziyuan/js/preview-viewer.js"></script>
</body>
</html> 