当前位置：文档库 › 保护环境制作网页框架及设计网页

保护环境制作网页框架及设计网页

保护环境——制作网页框架及设计网页

授课人曾瑜蕾

一、教学目标：

1、知识与技能目标：

通过本课实践任务的完成，让学生初步学会利用Word设计网页框架：掌握用Word制作一个自定主题的网页，并完成网页间的链接，并通过各种方式搜集信息，进行信息的整理、加工和合理应用。

2、情感目标：

通过本次贴近学生生活的实践任务的完成，旨在培养学生进一步树立小组协作的意识和团队的精神，让学生通过实践，学会解决生活中的实际问题，也从中增强学生的环境保护意识。

二、重点难点：

1、教学重点：

如何培养学生对知识的应用能力，即如何把所学的知识和技能合理地运用到实际生活中，去解决实际生活中遇到的问题。

2、难点分析：

如何组织小组内的学生共同完成一个主题任务，即解决学生之间的相互协作问题。

三、教学准备：

1、计算机房：能上因特网，“网上邻居”能相互访问，并能进行复制、粘贴等操

作；

2、学生：小组已建立好，小组成员有一定的网络信息搜集、处理和加工能力。

3、教师：准备好学生上交作业的共享文件夹和资料查询的相关参考网址。

四、学习任务：

通过对我国环境保护相关信息的搜集、整理和加工，各小组制作出一个有关环境保护的综合网页，并根据自身实际，写出有关环境保护的小结。

五、教学过程：

注：1、在表1中的空白处，填上具体负责人员；

2、填完后，以“第*小组的任务实施计划表”重命名，并保存至“Teacher机――>

高二（*）班――>第*小组”共享文件夹中。

表2：常规信息量化表：

（设计此表的原因：让学生通过对“常规信息评价表”的填，了解并熟悉文件的类型，学会对知识的小结。）

表3：成果评价表：

六、评价方案设计：

小组：评选出“最佳合作小组奖”2个；

个人：评选出“最佳个人奖”、“最具智慧奖”、“最佳表现奖”、“最佳能力奖”各2名；

对落选小组和个人：进行鼓励，并帮助指出需改进的地方。

七、师生活动设计：

教师：是活动的组织、引导、协调和督促者；通过教师的网页框架及网页内容制作步骤的展示及课堂中的巡视，对有困难的小组或个人及时提供帮助，对

行为有偏差的小组或个人进行及时干预。

学生：是活动的主体，通过讨论、分析，接受任务，实施任务；对收集到的信息进行整理、加工，在合作中学习，在学习中学会合作。具体知识的运用：

1、文件夹的建立、重命名；

2、文件夹的共享设置；

3、资料的下载（网页、图片、文字）；

4、资料的整理、汇总（资料的分类存储）；

5、网页框架的制作

6、网页内容的设计和加工

7、资料的上传。

8、学生代表的成果展示。

Dreamweaver 8 基础代码 HTML基本结构（每个网页都是在基本结构的基础上添加内容的） -------- 网页文件开始标签 ------- 头部元素开始标签 --------- 网页标题开始标签 …》头部元素 --------- 网页标题结束标签 ------ 头部元素结束标签- ------- 网页内容开始标签 ... —网页具体内容 ------- 网页内容结束标签」 ------- 网页文件结束标签 Dreamweaver的代码里打“< "会出现可选择代码，或在“< > "里打空格也会出现，方便输入。标签书写方式（不同标签书写方式不同） 1. <标签〉对象如:title、head 等。 2. <标签〉如：br 3. <标签该标签的属性1= “参数1”该标签的属性2= “参数2 ” ...> 对象标签> 如: font 注意： 1. 第三种类型的标签也可以使用第一种的格式，即标签的属性不一定要写。 2. 可以嵌套，但要注意顺序。两个代码之间至少要用一个空格隔开。几个常用标签介绍文字：... face:字体，引号中输入字体名。如：face= “黑体"。默认是宋体。 size:字号。可以是-7 -------- +7 之间整数。默认是3。 color:颜色。可使用“red ”之类的颜色名称或进制编码指定。默认黑色。换行：
加粗：... 倾斜：… 滚动字幕: 滚动标签：marquee 最简表达：相关字幕滚动的属性： Direction-- 表示滚动的方向，值可以是left , right , up , down，默认为left Behavior--表示滚动的方式，值可以是scroll （连续滚动）slide （滑动一次）alternate （来回滚动）

栏目结构图（品牌形象站与餐吧服务展示站）

公司网站整体风格：充分体现限公司的特点，以大气、直观、高档、新颖的个性化设计展现公司的品牌形象与主营产品，以求与贵公司网络营销和市场定位达成一致，符合企业形象标准和行业特色，充分展示企业实力和产品特点，展示企业产品营销的风采，能够捕捉客户的需求，双向交流，使客户在网站中充分发表见解，并加以吸收，并从中挖掘潜在的客户，结合行业特色和公司特点，打造一个全新的，符合公司现有发展趋势的网站。（一）我们的设计宗旨塑造客户良好的公司知名品牌形象；进行互联网招商引资，扩大销售网络及经营渠道。提高宣传力度；完善公司销售管理，增强公司内外部交流。体现客户的独特风格；最大限度的发挥站点的实用性和美观性。采用各种先进的数据库以提高公司网站的管理性、灵活性及方便性，并通过网站更好的实现公司信息化与无纸化办公。首页：设计精美，形式新颖，利用FLASH动感的表达公司的产品内涵。充分体现贵公司的公司实力及品牌形象，大方，得体，不落俗套，给人耳目一新的感觉。. 网站内容包括公司公司介绍、产品展示、网上招聘、新闻动态、下载中心、留言版等栏目，根据贵公司的背景，详尽的介绍贵公司的情况。文字图片相结合形势展现，这样从气势上让人感觉是一个非常有实力的公司。此模块有采用“公司信息系统”完成，前台可实现信息的浏览、查找，后台可方便添加、删除、栏目维护（可添加图片）

网站建设费模块

人才招聘系统实现招聘单位在线发布、修改、删除人才招聘信息，招聘信息和在线注册简历、人才简历对不同服务对象有权限限制。为求职者提供职位人才信息订阅和详细人才信息查询等个性化增值服务。设有一个专门的人才库。浏览统计分析系统记录网站和公司产品流览量及点击率并分析出每个上网者来源（可分析出IP地址的来访国家、地区、访问页面、停留时间、用的浏览器等）时间安排：网站建设进度及实施过程项目实施方法我们项目实施方法中的五个基本阶段是：1 规划定义：已完备

网页设计-页面布局篇(Css+Div) >>目录<< 第一步：规划网站，本教程将以图示为例构建网站；第二步：创建html模板及文件目录等；第三步：将网站分为五个div，网页基本布局的基础；第四步：网页布局与div浮动等；第五步：网页主要框架之外的附加结构的布局与表现；第六步：页面内的基本文本的样式(css)设置；第七步：网站头部图标与logo部分的设计；第八步：页脚信息(版权等)的表现设置；第九步：导航条的制作(较难)；第十步：解决各种浏览器之间的兼容性(暂不讨论)

第一步：规划网站，本教程将以图示为例构建网站1.规划网站，本教程将以下图为例构建网站。

其基本布局见下图：主要由五个部分构成： 1.Main Navigation导航条，具有按钮特效。Width: 760px Height: 50px 2.Header网站头部图标，包含网站的logo和站名。 Width: 760px Height: 150px 3.Content网站的主要内容。Width: 480px Height: Changes depending on content 4.Sidebar边框，一些附加信息。Width: 280px Height: Changes depending on 5.Footer网站底栏，包含版权信息等。Width: 760px Height: 66px 第二步：创建html模板及文件目录等 1.创建html模板。代码如下： CompanyName - PageName

52门户网站实训指导（一）实训目标： 1 掌握门户网站的设计技巧。 2 掌握库项目和模板的制作及使用方法。实训步骤：一创建站点。在Dreamweaver CS3中定义一个本地站点，命名为“52menhu”，存储位置为：D：\sample\52menhu\，并将本项目素材文件夹下的图像文件夹image复制到网站的根文件夹下。然后，选择“窗口”→“资源”命令或者按F11键，打开“资源”面板。如图1。图1 资源面板图2 新建库项目二创建库文件。单击“资源”面板右下角的按钮，新建一个库，然后在列表框中输入库的名称banner并加以确认。使用同样的方法创建名称为foot

的库文件。二、制作主页的Banner 基本步骤: 1.在“资源”面板中双击打开，找到库文件banner.lbi。 2.插入一个3行1列，宽为760像素的表格。 3.设置表格属性(具体步骤参照书讲解)。 4.插入图片，输入文本。最终效果如图3所示: 图3 banner效果图制作页脚基本步骤：（1）在资源面板中打开库文件foot.lbi；（2）插入一个3行1列,宽为760像素的表格；（3）设置表格属性，参数如图4；图4 表格属性（4）输入文本，并保存文件。效果如图5所示。

图5 页脚效果图 ●四、库项目的应用 ●1.插入库文件新建页面myindex.html，依据前面做的banner.lib和foot.lib 文件充实首页面myindex.html。打开“资源”面板，点击左下角的“插入”按钮，分别将两个库项目分别插入到页面对应位置。 2.编辑库项目在资源面板中单击“编辑”按钮，可打开库项目进行编辑。编辑的方法同编辑普通页面一样。任务2 制作女性频道子页 1、使用模板建立子页操作步骤：（1）将素材中的首页复制到站点中。选择“文件”→“另存为模板”命令，将已有页面另存为模板，命名为moban1。 2、定义可编辑区域操作步骤：（1）选择“插入”→“常用”命令，单击“可编辑区域”按钮或者选择“插入”→“模板对象”→“可编辑区域”命令，打开“新建可编辑区域”对话框。

伊犁师范学院《网页设计》期末课程设计设计题目：我的个人网页学号：018 姓名：马建武院系：电子与信息工程学院专业班级：计科08-2 指导老师：王雪峰日期：2011-6-20

一、设计思想随着网络技术的飞速发展，网络已经遍及每个人的身边，通过个人网页把自己展示在网络上，不仅可以获得更多的朋友，有用的信息，也是跟随时代发展，做走在时代前沿的一个有效方式，本网站旨在设计一个个性化的个人网站，展现自己的生活，学习，爱好等等信息，通过本网站把自己展示出来。二、开发环境及软件 Windows XP，Macromedia Dreamweaver 8，photoshop等三、系统结构功能图、页面结构草图及部分页面截图四、部分代码（主要添加CSS代码） 1.添加首页背景音乐 2.运用框架