Dreamweaver网页设计+授课教案

第一篇：Dreamweaver网页设计+授课教案

Dreamweaver教案一(一课时)

教学目的：初步了解Dreamweaver的操作

教学重点：Dreamweaver的界面

教学难点：各个面板的调用

一、引入

为什么要用Dreamweaver而不用Frontpage？

Dreamweaver是Macromedia公司的出品，它以程序小、运行速度快、所制作网页代码少这些优点，赢得了网页制作人员的喜爱。

例一：m1.htm和f1.htm的大小比较

例二：frontpage安装程序和dreamweaver安装程序的大小比较

例三：frontpage运行和dreamweaver启动比较

二、Dreamweaver的安装

三、Dreamweaver的界面

1．文档窗口：主菜单、工具栏、底部启动条、文档编辑区

2．对象面板：标准、表格、表单、框架、特殊、文件头、隐藏、字符

3．启动面板：站点管理、代码检查、HTML样式、CSS样式、行为、历史记录、资源管理

4．属性面板：随目前对象不同而内容不同

四、作业

1．写出Dreamweaver对象界面中所有对象的名称

2．新建一个空白网页，写出空白网页的HTML代码

Dreamweaver教案二(一课时)

教学目的：回忆原来学过的网页的文字知识，熟悉 Dreamweaver的操作，熟悉属性面板的 1

使用，掌握页面属性、文本属性的设置

教学难点：向导图片、预格式化、图片的路径

教学重点：常用属性

一、复习引入

1．输入文本

2．回车键的作用

3．如何输入换行符：Shift+ENTER，或者是对象面板à符号

4．换行符对应的HTML标记

二、设置页面属性

1．打开页面属性对话框：右击页面，选择页面属性（page properties）

2．设置标题显示（Title）：

3．设置页面背景（Background image）：选择背景图像，注意路径

4．设置背景颜色Background：

5．设置本页面中文字的颜色Text：在没有设置其它的字体颜色前，这个文字颜色发生作用，一 旦对具体的文字设置颜色，这个设置就不起作用了

6．设置链接的各种颜色（Visited Links、Active Links、Links）

7．设置页面边界（Left Top）：使内容与边框没有空隙

8．设置文档字符集（Document Encoding）：gb2312

9．设置向导图片（Tracing Image）：用于设计时，下面的滑动条用于设置这个图片的透明度（Transparent）

三、设置文本属性

1．格式（Format）：

（1）样式：段落（Paragraph），标题（Heading1）、„„预先格式化的（preformatted）

*预先格式化的：可以输入空格，可以按文本原来的样子排列，缺点是不能实现自动换行

（2）字体：Default Font

（3）大小：Size

（4）颜色：

（5）其它：加粗、倾斜

（6）对齐：

2．链接（Link）：链接到文件，链接到地址，*相关（Relate to）：文档（Document），站根目录（SiteRoot）

3．目标（Target）：打开链接的目标_blank、_self、_parent、_top

4．项目符号、编号和缩进

四、作业

根据示例网页，制作一个网页

Dreamweaver 教案三(两课时)

教学目的：掌握网页中图片的相关操作

教学重点：dreamweaver中设置图片的属性

教学难点： 图像处理软件的使用

一、复习引入 1．网页的页面背景颜色和文本颜色在HTML代码中是如何表示的？ RGB方式表示颜色：红绿兰，0表示最弱，255表示最强 一共可以表示：256╳256╳256=16777216种 颜色 由于浏览器的关系，只有216种颜色能在浏览器中正常显示，多于这个范围的颜色，有的浏览器显 示时就可能发生偏差，不能正常显示。这个范围我们称之为网页安全颜色范畴 2．网页中运用颜色原则

l 切忌采用过多的颜色；

l 背景颜色不要太深；

l 要保持整个网页的色调统一；

l 要围绕网页主题选择颜色

二、网页中的图像格式 *BMP：位图格式 1． GIF：Graphics Interchange Format可交换的图像格式 特点： l 只支持256种颜色 l 支持透明效果 l 可以交错下载 l 可以实现动画效果 l 文件所占用空间小 l 不能支持渐变色彩 l 更改图片大小要从原文件改起 2． JPEG：Joint Photographic Experts Group联合摄影专家组文件格式 特点： l 支持24位图像 l 有损压缩 3． GIF与JPEG比较

三、插入图像 1． 插入图像：InsertàImage；对象面板 2． 图像 属性： l 宽（W）高（H）：默认为图片的大小，可以设置 其它尺寸，但图片会变形 l 源文件（Src）： l 对齐（align）： l 链接（Link）：链接到的图片 l 替代（Alt）：图像注释，当浏览器不能正常显 示图片时所出现的文字提示 l 地图（Map）：制作映射图 l 垂直边距（V space）：与上边界的距离 l 水平边距（H space）与左边界的距离 l 目标（Target）：当链接项有设置时发生作用 l 低品质源（Low Src）：低分辨率副本文件 l 边框（Border）： l 编辑（Edit）：启动图像处理软件来对图像进行 编辑 l 重设大小（Reset size）：当用其它工具修改了 图片大小时，如果不重设图片的大小，则会变形或者在不小心改变了图片的大小时使用此项

四、使用图 像处理软件

1、转换图像格式：打开，另存为

2、更改图像尺寸：

3、更改图像品质：另存为

五、作业 l 下列文件均放于同一文件夹下： 1． 在网上寻找透明背景的GIF图片5张，JPEG图片5张，其中，GIF要有动画的至少一张，JPEG要有一 张风景的。2． 将找到的图片放置在背景为蓝色的页面上 3． 改变第一 张GIF图片的大小 4． 设置第二张GIF图片的替代文字为“试一试” 5． 设 置第三张GIF图片的链接为第三张JPEG图片 6． 设置第四张GIF图片的垂直边距为5，水平边距为9 7． 对第一张JPEG图片设置映射4个，分别链接到第二、三、四、五张JPEG图片 8． 运用图像处理软件，制作风景JPEG图片的低品质图片，并对网页中该风景图片设置低 品质源 l 不看电脑，写出下列RGB值对应什么颜色 #FF000 #00FF00 #0000FF #FFFF00 #FF00FF #00FFFF

Dreamweaver教案四(三课时)

教学目的：掌握dreamweaver中表格的应用 教学难点：表格对应的HTML代码

教学重点：表格的编辑

一、复习引入

1． 文字的定位：空 格、回车

2． 图片的定位：垂 直边距、水平边距

二、表格

1． 插入表格：插入（Insert）à表格（table），或者在对象面板

2． 行数（row）

3． 列数（column）

4． 边距（cell padding）：单元格中的内容与单元格边框之间的距离

5． 间距（cell spacing）：单元格之间的距离

6． 宽度（width）：可以是像素（pixel）或百分比为单位（percent）

7． 边框（boder）：

8． 属性面板：只有 在选定整个表格时才出现表格属性

9． 在表格中也可以 通过右击，调出的快捷菜单中选择表格来对表格进行设置

10． 清除行高和列宽按钮

11． 改变列宽单位按钮

12． 背景颜色：

13． 边框颜色：设置整个表格的格线颜色

14． 背景图像：

三、表格所对应的HTML代码

1．表格：

2．行：

3．列：

四、选定

1． 单击表格左上角 或边框线

2． 在表格内单击表 格任一处，右击，选择表格（table）à选定表格（select table）

3． 选择所有单元格

4． 在文档窗口的左 下角选择标记

5． 选定行

6． 选定单元格

五、表格的编辑

1． 表格的嵌套

在网页中，要进行复杂的定位，一般需要用到嵌套表格。不过，一般不超过三层。

2． 复制剪切粘贴

3． 插入行、列，删 除行列

4． 合并单元格，拆 分单元格

5． 改变行、列、表 格的大小：拖放，属性面板精确定义

6． 表格模板：命令（command）à格式化表格（format table）

六、导入表格数据

1． 文件导入导入表格数据

2． 数据文件

3． 定界符

4． 表格宽度

5． 单元格边距和间距

6． 格式化首行

7． 边框

七、学习网页制作的方法

1． 学习网页制作，要先模仿

2． 在浏览到合适的 网页时，用“另存为”保存，再用dreamweaver来打开

八、作业

1． 将数据文件1.txt转为表格

2． 模仿此页制作页面

Dreamweaver教案五(两课时)

教学目的： 掌握框架

教学难点： 框架的编辑

教学重点： 框架的HTML代码

一、复习引入

回忆：Frontpage中的框架应用

二、框架的应用

1． 重复出现在不同 网页文档中的元素：网页标题、导航栏等等

三、建立框架

1． 将对象面板切换 到框架页（Frame）

2． 插入不同的框架，一个区域对应于一个页面

3． 在框架中打开原 有网页：文件（File）à在框架中打开（Open in Frame）

四、保存框架

1． 选择文件（File）/保存所有框架（Save Frameset），先保存框架文件，接着会出现提示，逐个保存框架中的网页

2． 保存时注意名称

五、框架编辑

1． 框架面板：窗口（Windows）à其它（Other）à框架（Frame）调出框架面板

2． 选定框架组：单 击整个框架组的边框；或在框架面板中单击整个框架的边框

3． 框架属性：名称、源文件，滚动否，是否可以调整大小，是否有边框，边框颜色，边界宽度，边界高度等

4． 拆分框架：按 Alt键，拖动边框；修改（Modify）à框架页（Frameset）à拆分左/右/上/下（split frame top/bottom/left/right）

*注意区别：插入一个新的框架与拆分框架的区别

5． 链接打开的目标

六、框架所对应的HTML代码

1． 框架组：

2． 通过设置：rows 或cols来设定是横的还是竖的，是顶部还是底部

3． 框架组属性： frameborder框架是否有边框，border边框的宽度多少，framespacing框架间距

4． 框架项：

5． 框架属性：src 指向的页面，name框架名，scrolling是否有滚动条，noresize不能由用户改变大小

6． 无框架提示 <body></p><h2><a name="2" >第二篇：Dreamweaver网页设计教学计划</a></h2><p>《Dreamweaver网页设计》教学方案</p><p>第一部分 说明</p><p>1．课程的性质与任务</p><p>“Dreamweaver网页设计”是计算机网络技术专业（专科）的一门统设必修课。本课程的主要任务是介绍利用Dreamweaver开发工具进行网页设计，包括新建、编辑和设置一个Web站点；如何对页面属性进行基本的设置，如何设置、编辑CSS层叠式样式表；如何排版文字、表格和层；如何进行基本的图像处理；建立框架；模板和库的使用和编辑；网站的发布与维护等基本知识与应用。目的是通过本课程的学习，培养学生的实际动手能力和计算机的操作能力，能够运用所学的知识进行网页设计。</p><p>2．与相关课程的衔接、配合、分工</p><p>先修课程：计算机应用基础Photoshop图像处理等。</p><p>后续课程：Flash动画制作等。</p><p>３．课程的教学基本要求</p><p>本课程要求学生掌握基本的HTML语言。学会使用Dreamweaver开发工具进行网页设计。这是一门重在实践的科目，因此需要学生多上机、多进行实际操作，把老师所教授的各种网页制作、版面设计以及程序熟练制作或调试出来，并且能够在此基础上有所创造、有更进一步的发挥。</p><p>4．课程教学要求的层次</p><p>1．掌握：</p><p>要求学生能够全面掌握所学内容，并能够用其分析、应用与Dreamweaver网页设计相关的问题，能够举一反三。</p><p>2．理解：</p><p>要求学生能够较好地理解与Dreamweaver网页设计相关的问题，并且能够进行简单分析和判断。</p><p>3．了解：</p><p>要求学生能够一般地了解的所学内容。第二部分 媒体使用与教学过程建议</p><p>学时分配</p><p>课程教学总学时90学时，5学分。其中授课36学时，实训54学时。</p><p>2．多种媒体教材的总体说明</p><p>1．本课程文字教材为合一型教材，文字教材作为学习的主要媒体，着重反映课程的基本知识和针对性、应用性，在形式上要便于自学。在内容上包括基本理论知识讲解和实训两部分。</p><p>2．视频媒体配合文字教材的讲授，内容重点在于实训及辅导。</p><p>3．CAI课件作为网络教学媒体，可以在互连网上使用也可以单机使用。</p><p>3．教学环节</p><p>以主教材讲授为主，其它媒体作为辅助教学资源，以学生自学为主。</p><p>4．主要教学媒体的使用与学时分配</p><p>内容</p><p>序号 1 2 3 4 5 6 7 8 9 10 11 12 13 14</p><p>第1章 Dreamweaver基础</p><p>第2章 网页设计语言基础</p><p>第3章 文本和图像处理</p><p>第4章 表格与页面布局</p><p>第5章 创建超级链接</p><p>第6章 层与层动画</p><p>第7章 框架与框架网页</p><p>第8章 创建ＣＳＳ样式表</p><p>第9章 资源、模板和库</p><p>第10章 媒体对象的应用</p><p>第11章 表单处理</p><p>第12章 创建Web站点</p><p>第13章 制作动态网站</p><p>第14章 网站的维护和上传</p><p>2学时 3学时 3学时 3学时 2学时 3学时 2学时 3学时 2学时 3学时 3学时 2学时 3学时 2学时</p><p>教学内容 理论学时</p><p>合计</p><p>36学时</p><p>第三部分 教学内容和教学要求</p><p>第1章 Dreamweaver基础（2学时）</p><p>教学内容：</p><p>Dreamweaver 的历史和简介</p><p>Dreamweaver 的安装过程</p><p>Dreamweaver 的全新界面</p><p>改进的设计与开发环境</p><p>主菜单介绍</p><p>对象控制面板介绍</p><p>教学要求：</p><p>掌握：Dreamweaver的基本特点、新增功能及界面组成。基本操作，如安装、新建、打开、导入、保存、关闭等。</p><p>理解：新增功能、界面组成的优点。</p><p>了解：Dreamweaver可以为我们做些什么。</p><p>第2章 网页设计语言基础（3学时）</p><p>教学内容：</p><p>HTML及XHTML语言介绍</p><p>常用的网页语法标记</p><p>教学要求：</p><p>理解：HTML及XHTML语言介绍，常用的网页语法标记</p><p>第3章 文本和图像处理（3学时）</p><p>教学内容：</p><p>文本属性面板</p><p>编辑文本和插入对象</p><p>设置文本的格式</p><p>编号与项目符号</p><p>在网页中插入图像</p><p>图像的应用</p><p>教学要求：</p><p>掌握：设置文本属性和格式；编号与项目符号的使用；插入、编辑和排版图像。</p><p>理解：如何进行图像调整。</p><p>第4章 表格与页面布局</p><p>教学内容：</p><p>表格的基本操作</p><p>单元格的基本操作</p><p>表格的自动套用格式</p><p>表格的创建</p><p>表格的编辑</p><p>创建布局单元和表格</p><p>教学要求：</p><p>掌握：如何插入、编辑表格，创建布局单元和表格。</p><p>理解：表格在网页排版中的作用。</p><p>了解：使用页面布局模式进行网页排版的方法。</p><p>第5章 创建超级链接（2学时）</p><p>教学内容：</p><p>（3学时）</p><p>链接分类</p><p>创建超级链接</p><p>链接的四种状态</p><p>创建Email链接</p><p>管理超级链接</p><p>教学要求：</p><p>掌握：创建超级链接和Email链接，会设置链接的各种状态。</p><p>理解：超级链接几种状态之间的差别和共同点。</p><p>了解：创建Email链接中的各种技巧。</p><p>第6章 层与层动画（3学时）</p><p>教学内容：</p><p>层的概念</p><p>创建层</p><p>层操作</p><p>层与表格的相互转换</p><p>层动画的概念与设计</p><p>教学要求：</p><p>掌握：层的概念与使用</p><p>理解：层动画的概念与设计</p><p>第7章 框架与框架网页（2学时）</p><p>教学内容：</p><p>框架的基本概念</p><p>创建框架和框架集</p><p>框架的使用</p><p>框架和框架集的属性设置</p><p>教学要求：</p><p>掌握：框架和框架集的创建；框架的使用。</p><p>理解：使用框架的优缺点。</p><p>第8章 创建ＣＳＳ样式表（3学时）</p><p>教学内容：</p><p>CSS层叠式样式表</p><p>定义CSS样式表</p><p>创建并链接到外部CSS样式</p><p>设置CSS样式的格式化参数</p><p>设置超链接显示状态</p><p>添加各种ＣＳＳ效果</p><p>教学要求：</p><p>掌握：内部ＣＳＳ和外部ＣＳＳ的添加方法，编辑ＣＳＳ属性，使用ＣＳＳ进行页面的排版，创建各种ＣＳＳ效果。</p><p>理解：使用CSS排版的优点。</p><p>了解：如何使用ＣＳＳ控制背景、鼠标以及添加其它特殊效果。</p><p>第9章 资源、模板和库（2学时）</p><p>教学内容：</p><p>资源管理</p><p>模板的创建</p><p>模板的编辑</p><p>定义模板可编辑区域</p><p>创建，管理和编辑库项目</p><p>教学要求：</p><p>掌握：模板的创建，模板的编辑，定义模板可编辑区域</p><p>理解：资源管理</p><p>了解：创建，管理和编辑库项目</p><p>第10章 媒体对象的应用（3学时）</p><p>教学内容：</p><p>插入Flash对象</p><p>插入Shockwave对象</p><p>插入视频</p><p>插入ActiveX控件与Java小程序</p><p>填加声音</p><p>教学要求：</p><p>掌握：插入Flash对象、插入Shockwave对象、插入视频、插入ActiveX控件与Java小程序、填加声音</p><p>第11章 表单处理（3学时）</p><p>教学内容：</p><p>表单概述</p><p>表单对象</p><p>创建表单</p><p>处理表单</p><p>创建动态表单</p><p>教学要求：</p><p>掌握：创建表单、处理表单和设置表单参数。</p><p>理解：表单的概念和作用。</p><p>了解：如何使用表单创建交互式界面。</p><p>第12章 创建Web站点（2学时）</p><p>教学内容：</p><p>站点规划</p><p>在Dreamweaver8中创建站点</p><p>管理站点与站点文件</p><p>使用站点地图</p><p>为网站指定服务器技术</p><p>教学要求：</p><p>掌握：规划站点、建立和管理站点；使用站点文件和地图。</p><p>理解：创建站点的必要性。</p><p>了解：服务器技术的指定。</p><p>第13章 制作动态网站（3学时）</p><p>教学内容：</p><p>Access数据库基础</p><p>ODBC数据源设置</p><p>ASP与Web服务器配置</p><p>Dreamweaver8动态网站设计</p><p>创建与数据库连接</p><p>教学要求：</p><p>掌握：数据源的设置，如何配置Web服务器，如何创建与数据库的链接。</p><p>理解：数据库在动态网站设计中角色的重要性。</p><p>了解：设置数据源和创建数据库链接的技巧</p><p>第14章 网站的维护和上传（2学时）</p><p>教学内容：</p><p>在本机中测试网站</p><p>预览网页效果</p><p>网站的查错</p><p>发布网站到服务器</p><p>教学要求：</p><p>掌握：Dreamweaver8的测试、预览和发布设置。</p><p>理解：网站排错的必要性。</p><p>了解：如何发布网站到服务器。</p><p>实训内容</p><p>（实训分为必做和选做内容，可根据实际的实验条件选做。实验总计54学时）</p><p>实训1：建立Web网页（必做）</p><p>实训2：文本及其格式化（必做）</p><p>实训3：图像（必做）</p><p>实训4：超级链接（必做）</p><p>实训5：表格和页面布局（必做）</p><p>实训6：框架（必做）</p><p>实训7：层（必做）</p><p>实训8：模板与库（必做）</p><p>实训9：表 单（必做）</p><p>实训10：行 为（必做）</p><p>实训11：多媒体组件的插入、使用代码设计网页与站点管理（必做）实验12： 动态网站制作（选做）</p><p>实验13：ASP与SQL Server数据库相连（选做）</p><h2><a name="3" >第三篇：Dreamweaver网页设计实验报告</a></h2><p>实验报告</p><p>专业</p><p>XXXXXX</p><p>班级</p><p>XX 班</p><p>学号</p><p>XXXXXX</p><p>姓名</p><p>XXX</p><p>报告完成日期</p><p>2012-12-26</p><p>指导教师</p><p>XXX</p><p>评语：</p><p>成绩：</p><p>批阅教师签名：</p><p>批阅时间：</p><p>一、制作时间</p><p>2012年12月18日至2012年12月26日。</p><p>二、实习内容</p><p>1、使用Dreamweaver制作网站，该网站为福建工程学院网站</p><p>2、网站不少于8个页面，主页和各模块相关页面；</p><p>3、页面中包含文字、图片；</p><p>4、使用CSS实现网页相关页面设置，要求在实现网页内能够显示文字，图片等信息；</p><p>5、使用网页浏览器进行网站测试。</p><p>三、实习环境</p><p>1、硬件环境：计算机一台；</p><p>2、软件环境：Dreamweaver cs4；</p><p>3、测试环境：IE、firework等网页浏览器。</p><p>四、网站总体设计</p><p>1、网站主题</p><p>本网页是以福建工程学院网站为主题，针对不同的年龄阶段的人给出了不同的学院的信息。</p><p>2、设计思路</p><p>首先构思了基本网页的布局，主页采取了常用的1-（1+1+1），附页采用了1-（1+1），上了多个网 最后决定参照福建工程学院的官方网站进行制作，但是布局并不相同 素材取自福建工程学院官方网站，部分图片取自百度，网站包括1个主页7个子页，子页包含了所有的学校状况，分别为：学校简介、现任校领导、教学机构、管理机构、校纪校训校歌、校园风光、新校区建设；采用了较难的二级菜单 和 JVAV技术实现导航栏上面的图片进行4张轮播。</p><p>五、制作步骤</p><p>1.首先确定网页的主题后，从网上查看各名校的网站，并从中寻找思路开始做网页。经过长时间的浏览，最终选择福建工程学院作为参照（网址：http://www.xiexiebang.com）</p><p>2.受福建工程学院主页的影响我自学了图片轮播和二级菜单，从而制作了轮播图片和二级菜单。</p><p>3.由于对于JVAV和表单的知识并不是非常了解所以有些地方需要实现的实现不出来放弃了，期中研究了最久的就是 导航轮播和下面的有块区域的图片轮播，结果因为不知道如何同时初始化2个JVAV函数 最后以失败告终 只好放弃</p><p>4.本次制作最难的地方是导航菜单的二级菜单和图片轮换</p><p>在制作过程中，遇到很多次的制作混乱，最后还是老师帮忙解决的。</p><p>5.原计划那些JVAV代码因为无法同时初始化他们放弃了 只好以一些列表代替</p><p>6.最后，将一些小细节的东西做了些处理，最后打包上交。</p><p>六、实习总结</p><p>这次是我们web的期末考试制作，通过这一次的制作，不仅巩固了以前学过的知识，还学会很多课堂上未教授的东西。通过老师的讲解、查阅资料，解决了很多制作上的困难，这一点我在这要好好感谢我们的XX老师和我们宿舍的学姐，谢谢她们帮我很大的忙。</p><p>七、参考文献</p><p>《HTML+CSS网页设计与布局》 《PHP编码》</p><h2><a name="4" >第四篇：dreamweaver网页制作教案</a></h2><p>dreamweaver网页制作教案</p><p>（Dreamweaver MX）</p><p>一、Dreamweaver MX中文版建站初步</p><p>建立一个网站，首先要在本地机器上做好网站，再传到网上的虚拟空间上。现在免费的网页空间很少了，在http://。</p><p>◇使用属性检查器：选中示例中的图像，也可以是文字，点击属性面板中的“浏览文件”图标。</p><p>◇选中一个文件。会出现一个文件相对于“文档”，“站点根目录的选择”。文档相对路径是最适合用于本地链接的路径类型，适合绝大多数Web站点，推荐使用。</p><p>◇根相对路径：如果在一个使用多台服务器的大型Web站点或一台服务器上有多个站点的情况下工作，可能需要使用这种类型的路径。很少用到这种路径。如果没有服务器的控制权限，不要使用这种方式！</p><p>◇绝对路径：完整的URL，称作绝对路径。例如在链接域输入http://vip.5dmedia.com/fuguotao</p><p>◇从打开文档的选取中创建链接：选中文字，按Shift键，拖动出现“指向文件”图标，把“指向文件”图标拖向目标文件，就会建立链接。</p><p>◇选择被链接文档要打开的位置：</p><p>若要使被链接文档不出现在当前窗口或框架中，从属性面板的“目标”弹出式菜单选取一个选项。</p><p>_blank 在新的未命名的浏览器窗口中加载链接文档。</p><p>_parent 在父框架页或包含该链接的框架窗口中加载链接文档。如果包含链接的框架不是嵌套的，则链接文档将加载到整个浏览器窗口中。_self 将链接文档加载到与链接相同的框架或窗口中，该目标是默认值，所以通常您不需要指定它。</p><p>_top 将在整个浏览器窗口中加载链接文件，同时移除所有框架。</p><p>一个网站中，第一级链接或者导航链接选择_self，第二级链接和友情链接选择_blank。</p><p>第二部分：使用锚</p><p>简明步骤：选中文本→在目标文档中插入锚标记→命名→拖动“指向文件”图标到文本。◇链接到文档中的指定位置：在需要插入锚的地方，点一下光标，然后单击常用面板上的命名锚记工具。</p><p>键入锚记名称，一个站点中的锚记名称只可以是唯一的，否则会出现错误。</p><p>在文档中选取要创建链接的文本，打开您需要链接的命名锚记所在文档，不一定要是当前文档，可以是站点中的其它文档，点击属性面板中的“指向文件”图标，并将它拖动到您需要链接的锚记处。</p><p>第三部分：使用空链接</p><p>使用空链接可以为页面上的对象或文本附加行为。创建步骤： 1.在文档窗口中，选中要设置链接的文本、图像或其他对象。2.在属性面板的链接框中，只输入一个“#”号。3.如果单击这种地址为一个“#”的链接，无论当前你处于文档的什么地方，都会自动跳转到文档的开头位置。很多人非常讨厌这种情况，因此出现很多插件。可以用“###”来代替“#”，单击这样的链接的时候，会保持当前页面的浏览位置。4.还可以在属性面板的链接框中输入javascript:;创建空链接。第四部分：创建javascript脚本链接 1.在文档窗口中选取文本，图象或对象</p><p>2.在“属性”检查器的“链接”栏中键入javascript:，其后紧接JavaScript代码或函数调用。</p><p>例如在链接栏中键入javascript:alert('哈哈你上当了')创建一个链接，点击链接后就会出现一个警告框</p><p>第五部分：创建电子邮件链接</p><p>方法一：选取需要创建链接的文本或者图像，点击常用面板中的“电子邮件链接”工具，输入邮件地址。方法二：选取需要创建链接的文本或者图像，在属性面板中的链接栏输入mailto:邮件地址。</p><p>第六部分：创建跳转菜单，例如制作一个友情链接。</p><p>首先将插入点放在要插入链接的位置。点击表单面板中的跳转工具</p><p>在插入跳转菜单对话框中，点添加项添加新链接。</p><p>在属性面板中选择类型为“菜单”。</p><p>在浏览器中发布如图：</p><p>在属性面板中选择类型为“列表”高度为3。</p><p>在浏览器中发布如图：</p><p>点击属性面板中的列表值，可以修改列表值。</p><p>第七部分：给链接增加提示，给链接增加快捷键。首先将插入点放在要插入链接的位置。点击常用面板上的超级链接工具。</p><p>设置链接参数。</p><p>标题是指当指向链接会出现提示。</p><p>访问键是指按键盘上的快捷键会选中链接。例如在实例中按Alt+D键会选中5D多媒体。</p><h2><a name="5" >第五篇：网页设计Dreamweaver CS3 教案(华东师范大学出版社)</a></h2><p>另存为模板。在弹出的“另存模板”对话框中，“站点”下拉列表框用来设置模板保存的站点，课选择一个选项。“现存的模板”选框显示了当前站点的所有模板。“另存为”文本框用来设置模板的命名。单击“另存模板”对话框中的“保存”按钮，就把当前网页转换为了模板，同时将模板另存到选择的站点。9</p><p>单击“保存”按钮，保存模板。系统将自动在根目录下创建Template文件夹，并将创建的模板文件保存在该文件夹中。在保存模板时，如果模板中没有定义任何可编辑区域，系统将显示警告信息。我们可以先单击“确定”，以后再定义可编辑区域。</p><p>3、从文件菜单新建模板 选择“文件/新建”命令，打开“新建文档”对话框，然后再类别中选择“模板页”，并选取相关的模板类型，直接单击“创建”按钮即可。”</p><p>（二）Dreamweaver 8 定义可编辑区域 模板创建好后，要在模板中建立可编辑区，只有在可编辑区里，我们才可以编辑网页内容。可以将网页上任意选中的区域设置为可编辑区域，但是最好是基于HTML代码的，这样在制作的时候更加清楚。在文档窗口中，选中需要设置为可编辑区域的部分，单击常用快捷栏的“模板”按钮，在弹出菜单中选择“可编辑区域”项。10</p><p>在弹出的“新建可编辑区域”对话框中给该区域命名，然后单击“确定”按钮。新添加的可编辑区域有蓝色标签，标签上是可编辑区域的名称。如果希望删除可编辑区域，可以将光标置于要删除的可编辑区域内，选择“修改/模板/删除模板标记”命令，光标所在区域的可编辑区即被删除。这样模板文件就创建好了。</p><p>（三）、其他模板区域 模板中除了可以插入最常用的“可编辑区域”外，还可以插入一些其他类型的区域，分别为“可选区域”、“重复区域”、“可编辑可选区域”和“重复表格”。</p><p>1、可选区域 可选区域是模板中的区域，用户可将其设置为在基于模板的文件中显示或隐藏。当要为在文件中显示的内容设置条件时，即可使用可选区域。</p><p>2、重复区域 重复区域时可以根据需要在基于模板的页面中负值任意次数的模板部分。重复区域通常用于表格，也可以为其他页面元素定义重复区域。</p><p>3、可编辑可选区域 是可选区域的一种，可以设置显示或隐藏所选区域，并且可以编辑该区域中的内容。</p><p>（四）、Dreamweaver 8 使用库 所谓库项目，实际上就是文档内容的任意组合，可以将文档中的任意内容存储为库项目，使它在其它地方被重复使用。</p><p>1、创建库 在文档窗口中选择需要保存为库项目的内容。单击资源面板“库”分类中右下角的“新建库项目”按钮。一个新的项目出现在资源面板“库”分类的列表中，预览框中显示预览的效果，还可以给该项目键入新名称。这样，一个库项目就创建好了。</p><p>2、插入库 将光标方在网页中需要插入库文件的位置，在资源面板“库”分类中选择需要插入的库项目，直接拖动到光标所在位置即可。</p><p>3、更改库 如果修改了库文件，选择“文件/保存”命令，弹出“更新库项目”对话框，询问是否更新网站中使用了该库文件的网页。单击“更新”按钮，将更新网站中使用了该库文件的网页。</p><p>（五）、创建基于模板的页面</p><p>1、打开素材csslianxi.html文件，选择菜单栏的文件>另存为模板命令。</p><p>2、在弹出的另存为模板对话框中，在“站点”文本框选择“xmweb”，在“另存为”给模板命名为mo1，点击确定。</p><p>3、弹出是否更改链接的提示，选择“是”。此时，在站点内自动生成一个名为“Templates”的文件夹，名称为mo1.dwt的模板文件被保存在该文件夹中。</p><p>4、鼠标在网页表格的最下一行空白处单击一下，选中状态栏的<table>标签，选择菜单栏的插入>模板对象>可编辑区域命令。</p><p>5、弹出“可编辑区域”对话框，点击“确定”。这样我们就完成了模板的制作。</p><p>6、新建06.html文件，选择菜单栏>窗口>资源命令，打开资源面板。</p><p>7、点击资源面板的“模板”按钮，在资源面板我们就可以看见mo1.dwt文件，选中mo1.dwt，按住鼠标左键直接拖拽到06.html的文档窗口中。即可将该模板应用到06.html中。第11章 CSS样式表 教学目标： 1.能在网页文档中建立选择器类型为“类”的CSS样式表 2.能在网页文档中通过“class”属性使用类型为“类” 样式表 3.能够建立CSS样式表文件，并在该文件中定义各种样式表 4.能够建立选择器类型为“伪类”的样式表 5.能够在网页文档中引用CSS样式表文件 教学重点： CSS中的各种属性、熟悉CSS面板的使用 教学难点： CSS中的各种属性、熟悉CSS面板的使用 教学课时：理论：2课时 实训：4课时 教学方法：讲授法、任务驱动法。教学过程:</p><p>一、引入新课 12 将样式表与网页相关联，关联的网页将自动套用样式表中的格式。使所有网页中都可以应用相同的样式，这样既保证了站点风格的一次性，又提高了工作效率。</p><p>二、讲授新课：</p><p>（一）、CSS样式定义 层叠样式表(CSS)是一系列格式设置规则，它们控制 Web 页面内容的外观。使用 CSS 设置页面格式时，内容与表现形式是相互分开的。页面内容（HTML 代码）位于自身的 HTML 文件中，而定义代码表现形式的 CSS 规则位于另一个文件（外部样式表）或 HTML 文档的另一部分（通常为 <head> 部分）中。使用 CSS 可以非常灵活并更好地控制页面的外观，从精确的布局定位到特定的字体和样式等。术语“层叠”是指对同一个元素或 Web 页面应用多个样式的能力。例如，可以创建一个 CSS 规则来应用颜色，创建另一个规则来应用边距，然后将两者应用于一个页面中的同一文本。所定义的样式“层叠”到您的 Web 页面上的元素，并最终创建您想要的设计。CSS样式表的创建，可以统一定制网页文字的大小、字体、颜色、边框、链接状态等效果。在Dreamweaver 8中CSS样式的设置方式有了很大的改进，更为方便、实用、快捷。(二）、CSS样式分类 CSS样式包括3种：可应用于任何标签、重新定义的特定标签样式和选择器样式。①可应用于任何标签需要选定应用对象，然后进行应用。使用自定义CSS样式可以控制各种网页元素的外观，其中包括文本的字体变化、字间距和行间距变化以及边框效果等多重属性。②重新定义的特定标签不需要应用，所有网页中的该类标签都将自动生效。重定义HTML标签可以改变标签的默认样式。用户可以通过修改特定标签的样式来改变网页特定标签的属性。③选择器样式也不需要应用，直接生效。CSS选择器可以控制超级链接的样式。在修改CSS选择器样式时，a：link控制网页中链接文本的普 13 通状态外观。a:visited控制已经访问的超级链接文本的外观。a:hover控制的是鼠标悬停状态下超级链接文本的外观。(三）、使用CSS样式美化页面</p><p>1、文本样式的设置 新建CSS样式, “选择器类型”为类，名称为 “style1”定义在“仅对该文档”。保存至站点根目录下的CSS文件夹内，弹出“CSS规则定义”对话框，默认显示的就是对文本进行设置的“类型”项。字体：可以在下拉菜单种选择相应的字体。大小：大小就是字号，可以直接填入数字，然后选择单位。样式：设置文字的外观，包括正常、斜体、偏斜体。行高：这项设置在网页制作种很常用。设置行高，可以选择“正常”，让计算机自动调整行高，也可以使用数值和单位结合的形式自行设置。需要注意的是，单位应该和文字的单位一致，行高的数值是包括字号数值在内的。例如，文字设置为12pt，如果要创建一倍行距，则行高应该为24pt。变量：在英文种，大写字母的字号一般比较大，采用“变量”中的“小型大写字母”设置，可以缩小大写字母。颜色：设置文字的色彩。</p><p>2、背景样式的设置 在HTML中，背景只能使用单一的色彩或利用图像水平垂直方向的平铺。使用CSS之后，有了更加灵活的设置。在CSS规则定义”对话框左侧选择“背景”项，可以在右边区域设置CSS样式的背景格式。背景颜色：选择固定色作为背景。背景图像：直接填写背景图像的路径，或单击“浏览”按钮找到背景图像的位置。重复：在使用图像作为背景的时，可以使用此项设置背景图像的重复方式，包括“不重复”、“重复”、“横向重复”、和“纵向重复“。附件：选择图像做背景的时候，可以设置图像是否跟随网页一同滚动。水平位置：设置水平方向的位置，可以“左对齐“右对齐”、“居中”。还可以设置数值与单位结合表示位置的方式，比较常用的是像素单位。垂直位置：可以选择“顶部”、“底部”、“居中”。还可以设置数值和单位结合表示位置的方式。</p><p>3、区块样式设置 在CSS规则定义”对话框左侧选择“区块”项，可以在右边区域设置CSS样式的区块格式。单词间距“英文单词之间的距离，一般选择默认设置。字母间距：设置英文字母间距，使用正值为增加字母间距，使用负值为减小字母间距。垂直对齐：设置对象的垂直对齐方式。文本对齐：设置文本的水平对齐方式。文字缩进：这是最重要的项目。中文文字的首行缩进就是由它来实现的。首先填入具体的数值，然后选择单位。文字的缩进和字号要保持统一。如字号为12px，像创建两个中文自的缩进效果，文字缩进就应该为18px。空格：对源代码文字空格的控制。选择“正常”，忽略源代码文字之间的所有空格。选择“保留”，将保留源代码中所有的空格形式，包括由空格键、Tab键、Enter键创建的空格。显示：制定是否以及如何显示元素。选择“无”则关闭它被制定给的元素的显示。在实际控制中很少使用。</p><p>4、方框样式的设置 在前面我们设置过图像的大小、设置图像水平和垂直方向上的空白区域、设置图像是否有文字环绕效果等。方框设置进一步完善、丰富了这些设置。在CSS规则定义”对话框左侧选择“方框”项，可以在右边区域设置CSS样式的方框格式。宽：通过数值和单位设置对象的宽度。高：通过设置和单位设置对象的高度。浮动：实际就是文字等对象的环绕效果。选择“右对齐”、对象居右。文字等内容从另外一侧环绕对象。选择“左对齐”。对象居左，文字等内容从另一侧环绕。“无”取消环绕效果。清除：规定对象的一侧不许有层。可以通过选择“左对齐”、“右对齐”，选择不允许出现层的一侧。如果在清除层的一侧有层，对象将自动移到层的下面。“两者”是指左右都不允许出现层。“无”是不限制层的出现。“填充”和“边界”：如果对象设置了边框，“填充”是指边框和其中内容之间的空白区域；“边界”是指边框外侧的空白区域。</p><p>5、边框样式设置 边框样式设置可以给对象添加边框，设置边框的颜色、粗细、样式。在CSS规则定义”对话框左侧选择“边框”项，可以在右边区域设置CSS样式的边框格式。样式设置边框的样式，如果选中“全部相同”复选框，则只需要设置“上”样式，其它方向的样式与“上”相同。宽度：设置4个方向边框的宽度。可以选择相对值：细、中、粗。也可以设置边框的宽度值和单位。颜色：设置边框对应的颜色，如果选中“全部相同”复选框，则其他方向的设置都与“上”相同。</p><p>6、列表样式设置 CSS中有关列表的设置丰富了列表的外观。在CSS规则定义”对话框左侧选择“列表”项，可以在右边区域设置CSS样式的列表格式。类型：设置引导列表项目的符号类型。可以选择圆点、圆圈、方块、数字、小写罗马数字、大写罗马数字、小写字母、大写字母、无列表符号等。项目符号图像：可以选择图像作为项目的引导符号，单击右侧的“浏览”按钮，找到图像文件即可。选择ul标签可以对整个列表应用设置，选中li标签可对单独的项目应用。位置：决定列表项目缩进的程度。选择“外”，列表贴近左侧边框，选择“内”，列表缩进。这项设置效果不明显。</p><p>7、定位样式设置 “定位”项实际上是对层的设置，但是因为DW提供了可视化的层制作功能，所以此项设置在实际操作中几乎不会使用。</p><p>8、扩展样式的设置 CSS样式还可以实现一些扩展功能，这些功能集中在扩展面板上。这个面板主要包括3种效果：分页、光标和过滤器。在CSS规则定义”对话框左侧选择“扩展”项，可以在右边区域设置CSS样式的扩展格式。分页：通过样式来为网页添加分页符号。允许用户指定在某元素前或后进行分页。分页的概念是打印网页种的内容时在某指定的位置停止，然后将接下来的内容继续打印在下一页纸上。光标：通过样式改变鼠标形状，鼠标放置于被此项设置修饰的区域上的时，形状会发生改变。具体的形状包括：Hand（手）、crosshair（交叉十字）、text（文本选择符号）、wait（Windows的沙漏形状）、default（默认的鼠标形状）、help（带问号的鼠标）、e-resize（向东的箭头）、ne-resize（指向东北方的箭头）、n-resize（向北的箭头）、nw-resize（指向西北的箭头）、w-resize（向西的箭头）、sw-resize（向西南的箭头）、s-resize（向南的箭头）、se-resize（向东南的箭头）、auto（正常鼠标）。）过滤器：使用CSS语言实现过滤器（滤镜）效果。单击“过滤器”下拉列表框旁的按钮，可以看见有多种滤镜效果可供选择。(四）、CSS样式表的其他操作</p><p>1、编辑CSS样式 选中需要编辑的样式类型，选择上图中的“编辑”项或直接单击“编辑样式”按钮，在弹出的“CSS规则定义”对话框中修改相应的设置。编辑完成后单击“确定”按钮，CSS样式就编辑完成了。</p><p>2、应用CSS自定义样式 鼠标右键单击在网页中被选中的元素，在弹出的快捷菜单中选择“CSS样式”，在其子菜单中选择需要的自定义样式。</p><p>3、附加样式表 选择“附加样式表”项，打开“链接外部样式表”对话框，可以链接外部的CSS样式文件。“文件/URL”设置外部样式表文件的路径，可以单击浏览按钮，在浏览窗口中找到样式表文件。“添加为”选择“链接”，这IE和Netscape两种浏览器都支持的导入方式。“导入”只有Netscape浏览器支持。16</p> </div> </article> <a href="#" tpid="25" target="_self" class="download_card jhcdown" rel="nofollow"> <img class="download_card_pic" src="//static.xiexiebang.com/skin/default/images/icon_word.png" alt="下载Dreamweaver网页设计+授课教案word格式文档"> <div class="download_card_msg"> <div class="download_card_title" style="text-decoration:none;">下载Dreamweaver网页设计+授课教案.doc</div> <div class="download_card_tip">将本文档下载到自己电脑，方便修改和收藏，请勿使用迅雷等下载。</div> </div> <div class="download_card_btn"> <img src="//static.xiexiebang.com/skin/default/images/icon_download.png"> <div class="downlod_btn_right"> <div>点此处下载文档</div> <p>文档为doc格式</p> </div> </div> </a> <div class="post-tags mt20 mb30"><span>相关专题</span> <a href="/tag/wysjskja/" target="_blank">网页设计授课教案</a> <a href="/tag/dwwysjja/" target="_blank">dw网页设计教案</a> <a href="/tag/dreamweaverqtja/" target="_blank">dreamweaver全套教案</a> </div> <div class="single-info mb40"><span class="hidden-xs ">网址：https://www.xiexiebang.com/a5/201905130/b2a37654c9d6b775.html</span><br>声明：本文内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：645879355@qq.com 进行举报，并提供相关证据，工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。 </div> <div class="single-xg mb40"> <div class="con-title"> <h3><a name="6"></a>相关范文推荐</h3> </div> <div class="sticky mb20"> <ul><h2 class="mb20"><a href="/a5/2019051223/83d0d06c7300179a.html" target="_blank">Dreamweaver网页制作教案[推荐五篇]</a></h2><p> 认识Dreamweaver 一、学习目的 了解Dreamweaver，学会利用Dreamweaver制作网页。 二、学习内容 Dreamweaver的基本知识。 【学习步骤】 1、 Dreamweaver的功能 Dreamweaver可......</p><h2 class="mb20"><a href="/a12/201905144/de1c2d3b612b8731.html" target="_blank">基于Dreamweaver的网页设计(标准格式毕业论文)</a></h2><p>石家庄科技信息职业学院 顶岗实习岗位技术工作论文 基于Dreamweaver的网页设计 学 号: 121404218 姓 名: *** 专 业: 软件技术 年 级: 12级 企业指导老师: 二〇一五年三月......</p><h2 class="mb20"><a href="/a12/201905144/2312584e089d0504.html" target="_blank">电大Dreamweaver的网页设计论文</a></h2><p>鄂尔多斯电视广播大学毕业设计 鄂尔多斯电视广播大学 毕业设计（论文） 题目：个人网站设计——个人网站建设 学 院：_鄂尔多斯电大 _ 专 业：计算机应用技术 班 级： 计算机班 姓 名：___......</p><h2 class="mb20"><a href="/a12/201905144/8da430bcadacb3f3.html" target="_blank">2016届职业高中Dreamweaver网页设计毕业论文</a></h2><p>中等职业技术学校 毕业论文题目：关于Dreamweaver的网页设计 ——————————————— 学生（姓名）： ——————————— 论文指导教师姓名： 所在系及专业名称：___电脑......</p><h2 class="mb20"><a href="/a12/2019051323/1a92e99cc47ce32b.html" target="_blank">Dreamweaver制作网页经典问题</a></h2><p>Dreamweaver制作网页经典问题大整理(1) 1&gt; 在DW中，如何输入一个空格呢？ 输入空格的问题，在DW似乎已成了一个老生常谈的问题，我们可能在许多介绍DW使用方面的书籍或文章中看到过N......</p><h2 class="mb20"><a href="/a14/2019051511/8b632c48dc92c426.html" target="_blank">Dreamweaver网页设计 职业技能实训答案（★）</a></h2><p> Dreamweaver网页设计 1 下列关于域名注册的说法，错误的是( C )。 [A]申请含china，chinese，cn，national等字样的域名，必须经国家有关部门批准 [B]域名申请如果预注册成功，必须......</p><h2 class="mb20"><a href="/a13/2019051422/285f89602e0ac451.html" target="_blank">网页制作《Dreamweaver》制作要点小结</a></h2><p>网页制作 一、准备工作 １、站点的管理（创建、修改和删除站点） ２、网站与网页的关系：首页+子页＝网站 index.htmlp1.htmlp2.htmlp3.html ３、网页的页面属性：“修改”——“页面属性”......</p><h2 class="mb20"><a href="/a1/2019051213/aa40c40930db2ea4.html" target="_blank">Dreamweaver网页制作技巧心得体会</a></h2><p>Dreamweaver网页制作技巧心得体会 熟悉网页设计的网友就知道，调用Style的方法很多，我们可以单击鼠标右键选择Custon Style来调用Style标准，也可以在状态栏中的元素列表上单击右......</p></ul> </div> </div> </div> </div> <div class="right-content-box wow fadeInRight delay300 right-content"> <script src="/e/member/login/loginjs.php"></script> <div class="sidebar"> <div id="sidebar" role="complementary"> <aside id="recent-posts-3" class="widget widget_recent_entries"> <h3 class="widget-title">猜你喜欢</h3> <ul class="new-list"><li><a href="/a4/2019051222/d48f511e225ca2ef.html" title="《Dreamweaver网页制作》考核方案" target="_blank">《Dreamweaver网页制作》考核方案</a></li><li><a href="/a5/201905130/42914773b4d7dd46.html" title="DreamWeaver教案（大全）" target="_blank">DreamWeaver教案（大全）</a></li><li><a href="/a15/201905157/6f3b11d33bbe1bba.html" title="Dreamweaver教案" target="_blank">Dreamweaver教案</a></li><li><a href="/a5/201905130/aebf0cfa675efde6.html" title="教学设计：《Dreamweaver网页制作实用教程》----框架技术" target="_blank">教学设计：《Dreamweaver网页制作实用教程》----框架技术</a></li><li><a href="/a5/201905131/5ce6a3be0fb5d562.html" title="Dreamweaver CS5自学教程-第一课：网页设计基础" target="_blank">Dreamweaver CS5自学教程-第一课：网页设计基础</a></li><li><a href="/a15/201905157/8469b1b4daace923.html" title="《Dreamweaver中网页布局的方法》教学设计" target="_blank">《Dreamweaver中网页布局的方法》教学设计</a></li><li><a href="/a8/201905134/807e36a2c5fba546.html" title="Dreamweaver网页操作命令集合5篇" target="_blank">Dreamweaver网页操作命令集合5篇</a></li><li><a href="/a5/201905130/63b46e4b67737b41.html" title="网页设计教案" target="_blank">网页设计教案</a></li><li><a href="/a9/201905141/b50239d9e2433371.html" title="《网页设计与制作 Dreamweaver CS3》自我测评参考答案" target="_blank">《网页设计与制作 Dreamweaver CS3》自我测评参考答案</a></li><li><a href="/a5/201905130/8128bafa89211ed8.html" title="DREAMWEAVER电子教案" target="_blank">DREAMWEAVER电子教案</a></li></ul> </aside> </div> </div> </div> </div> </div> </section> <section id="footer" class="p30"> <div class="container"> <div class="footer-top clearfix"> <div class="copyr"> <div class="footer-menu clearfix mb10"> <ul class="footer-menu-con"> <li><a href="/a1/">1号文库</a></li><li><a href="/a2/">2号文库</a></li><li><a href="/a3/">3号文库</a></li><li><a href="/a4/">4号文库</a></li><li><a href="/a5/">5号文库</a></li><li><a href="/a6/">6号文库</a></li><li><a href="/a7/">7号文库</a></li><li><a href="/a8/">8号文库</a></li><li><a href="/a9/">9号文库</a></li><li><a href="/a10/">10号文库</a></li><li><a href="/a11/">11号文库</a></li><li><a href="/a12/">12号文库</a></li><li><a href="/a13/">13号文库</a></li><li><a href="/a14/">14号文库</a></li><li><a href="/a15/">15号文库</a></li> </ul> </div> <p>Copyright © 2018 <a href="/">写写帮文库</a> All Rights Reserved &nbsp;&nbsp;<a target="_blank" href="http://www.beian.miit.gov.cn" rel="nofollow"> 浙ICP备11058632号</a>&nbsp;&nbsp; <script type="text/javascript" src="//static.xiexiebang.com/skin/default/js/tj.js"></script></p> </div> </div> </div> </section> <script type='text/javascript' src='//static.xiexiebang.com/skin/default/js/superfish.js'></script> <script type='text/javascript' src='//static.xiexiebang.com/skin/default/js/jquery.slicknav.js'></script> <script type='text/javascript' src='//static.xiexiebang.com/skin/default/js/xs.js'></script> <div class="right_bar hidden-xs "> <ul> <li class="rtbar_li1" style="left: 0px;"><a><img src="//static.xiexiebang.com/skin/default/images/rtbar_liicon3.png"><span id="call_tel"></span></a></li> <li class="rtbar_li2"> <a href="javascript:void(0);"> <img src="//static.xiexiebang.com/skin/default/images/rtbar_liicon4.png"> </a> <div class="rtbar_shwx" style="display: none;"> <img width="188" height="188" alt="微信二维码" src="//static.xiexiebang.com/skin/default/images/wechat.png"> </div> </li> <li class="rtbar_li3" style="left: 0px;"> <a href="tencent://message/?uin=2261362615&amp;Menu=yes"> <img src="//static.xiexiebang.com/skin/default/images/rtbar_liicon2.png"> 点击咨询 </a> </li> <li class="rtbar_li5"><a href="#1">第一篇</a></li> <li class="rtbar_li6"><a href="#2">第二篇</a></li> <li class="rtbar_li7"><a href="#3">第三篇</a></li> <li class="rtbar_li8"><a href="#4">第四篇</a></li> <li class="rtbar_li9"><a href="#5">第五篇</a></li> <li class="rtbar_li10"><a href="#6">更 多</a></li> <li class="rtbar_li4 gotop"> <a href=""><img src="//static.xiexiebang.com/skin/default/images/rtbar_liicon1.png"> </a></li> </ul> </div> </body> </html>