网页设计基础7
dreamweaver网页制作 第7章 表单
第7章表单在制作动态网页时，要实现信息交互，常常用到表单。
常见的表单有搜索表单、用户登录注册表单、调查表单、留言簿表单等。
本章节将和大家一起探讨在表单的基本概念和各个元素，以及在Dreamweaver CS4中如何创建表单，并通过实例掌握表单制作的方法。
【学习目标】●了解Web服务器的作用。
●掌握IIS的安装和设置方法。
●掌握更改站点设置的方法。
●知道表单域的含义；熟练掌握各种表单栏目的插入与设置。
●能够综合使用各种表单栏目制作留言簿。
●知道发送表单结果的多种方法。
●掌握验证表单的方法。
7.1 关于表单表单是用来收集站点访问者信息的域集，可实现网页与浏览者间的交互，达到收集浏览者输入信息的目的。
表单是浏览网页的用户与网站管理者进行交互的主要窗口，Web管理者和用户之间可以通过表单进行信息交流。
表单内有多种可以与用户进行交互的表单元素，如文本框、单选框、复选框、提交按钮等元素。
在服务器端，信息处理由CGI （Common Gete Way Interface）、JSP （Javaserver Page）或ASP （Active Server Page）等应用程序处理。
下面是几个表单应用的例子，邮箱用户注册表单如图14.1所示，搜索引擎表单如图14.2所示，在线测试表单如图14.3所示。
7.2 表单元素表单域简单地说，表单就是用户可以在网页中填写信息的表格，其作用是接收用户信息并将其提交给Web服务器上特定的程序进行处理。
表单域，也称表单控件，是表单上的基本组成元素，用户通过表单中的表单域输入信息或选择项目。
在建立表单网页之前，首先就要建立一个表单域。
在7.1节中详细介绍了表单的基本概念，使用Dreamweaver CS4可以创建各种表单元素，如文本框、滚动文本框、单选框、复选框、按钮、下拉菜单等。
在“插入”工具栏的“表单”类别中列出了所有表单元素，如图14.4所示7.2.1 插入表单（1）将光标放在“编辑区”中要插入表单的位置；然后在“插入”工具栏的“表单”类别中，单击“表单”按钮；此时一个红色的虚线框出现在页面中，表示一个空表单，如图14.5所示（2）单击红色虚线，选中表单；在“属性检查器”中，“表单名称”文本框中输入表单名称，以便脚本语言Javascript通过名称对表单进行控制；在“方法”下拉列表框中，选择处理表单数据的传输方法，“Post”方法是在信息正文中发送表单数据，“Get”方法是将值附加到请求该页面的URL中；在“目标”下拉列表框选择服务器返回反馈数据的显示方式，这里选择“_blank”，即在新窗口打开；“MIME类型”下拉列表框指定提交服务器处理数据所使用MIME编码类型。
网页设计与开发第7章试卷及答案
<INPUT TYPE="CHECKBOX" NAME="ch2" VALUE="c2">电话交易
<INPUT TYPE="CHECKBOX" NAME="ch3" VALUE="c3">经纪人代理
B．<P><B>您用什么方式购买证卷？<B><P>
C)<inputtype="hidden"></input>
D)<inputtype="reset"></input>
答案:C
20.在HTML上，将表单中INPUT元素的TYPE属性值设置为（ ）时，用于创建重置按钮。
A.reset
B.set
C.button
D.Image
答案:A
21.阅读以下代码段，则可知（ ）。
答案:text、submit、reset、password、checkbox、radio、image、hidden、file
4.当type=text时，<input>标记除了有两个不可默认的属性_________和_________外，还有三个可选的属性：_________、_________和_________。
A.<input type=submit></input>
B.<textarea name="textarea"></textarea>
网页制作案例教程 清华大学出版社第7章 利用模板和库创建网页
案例要点
模板可编辑区域、可选区域和重复区域的创建。
案例实施 （1）选择“开始”｜“所有程序”｜“Adobe Dreamweaver CS5”，启动 Adobe Dreamweaver CS5，新建一站点，将素材文件夹复制到本站点文件 夹中。 （2）选择“文件”｜“打开”菜单项，打开如图7-6-1所示的模板网页。 （3）选中如图7-6-1所示的第4个区域，单击菜单栏中“插入”|“模板对 象”|“可编辑区域”命令。
7.4.2利用模板更新网页
（1）更新模板 当模板被重新编辑或修改，保存模板后，会 自动打开“更新模板文件”对话框单击“更 新”按钮，更新文档。
7.5库项目
7.5.1库项目简介
库是一种特殊的 Dreamweaver 文件，其中 包含可放置到网页中的一组单个资源或资源 副本。库中的这些资源称为库项目。可在库 中存储的项目包括图像、表格、声音和使用 Adobe Flash 创建的文件。每当编辑某个库 项目时，可以自动更新所有使用该项目的页 面。
7.5.2创建库项目
（1）创建空白库项目 创建空白库项目的操作为：
1）单击菜单栏中的“窗口”|“资源”命令，打 开“资源”面板，单击左下角的库按钮 ，切换 到“库”类 “库”类别
2）单击面板底部的“新建”按钮 ，面 板中出现一个未命名的库，如图7-5-2所 示。
图7-3-6 “新建重复区域”对话框图
（4）在“名称”文本框输入重复区域名称。 （5）单击“确定”，退出“重复区域对话框”，建立的“重复 区域”为绿色框线区域，如图7-3-7所示。 （6）另存为模板即可使用。
7.4应用模板
网页设计教学教案
网页设计教学教案第一章：网页设计基础1.1 教学目标了解网页设计的基本概念和原则掌握网页设计的工具和软件学习网页设计的基本技能和技巧1.2 教学内容网页设计的定义和作用网页设计的原则和要素网页设计的工具和软件介绍网页设计的技能和技巧讲解1.3 教学方法讲授和演示相结合案例分析和实践操作小组讨论和分享1.4 教学评估课堂参与度和提问案例分析和实践操作的完成情况小组讨论和分享的参与度第二章：网页布局与排版2.1 教学目标学习网页布局的基本概念和原则掌握网页排版的方法和技巧学习使用网页布局工具和软件2.2 教学内容网页布局的定义和作用网页布局的基本原则和要素网页排版的方法和技巧网页布局工具和软件介绍2.3 教学方法讲授和演示相结合案例分析和实践操作小组讨论和分享2.4 教学评估课堂参与度和提问案例分析和实践操作的完成情况小组讨论和分享的参与度第三章：网页配色与图标设计3.1 教学目标学习网页配色的基本原则和方法掌握网页图标设计的基本技巧和风格学习使用网页配色工具和软件3.2 教学内容网页配色的定义和作用网页配色的一般原则网页配色的具体方法网页图标设计的基本技巧网页图标设计的风格3.3 教学方法讲授和演示相结合案例分析和实践操作小组讨论和分享3.4 教学评估课堂参与度和提问案例分析和实践操作的完成情况小组讨论和分享的参与度第四章：网页动画与交互设计4.1 教学目标学习网页动画的基本概念和制作方法掌握网页交互设计的基本原则和技巧学习使用网页动画和交互设计的工具和软件4.2 教学内容网页动画的定义和作用网页动画的基本类型和制作方法网页交互设计的定义和作用网页交互设计的原则和技巧网页动画和交互设计的工具和软件介绍4.3 教学方法讲授和演示相结合案例分析和实践操作小组讨论和分享4.4 教学评估课堂参与度和提问案例分析和实践操作的完成情况小组讨论和分享的参与度第五章：网页设计与网页标准5.1 教学目标学习网页设计的基本标准和规范掌握网页设计的最佳实践和技巧学习使用网页设计的相关工具和软件5.2 教学内容网页设计标准的基本概念和作用网页设计规范的定义和内容网页设计最佳实践的介绍网页设计的工具和软件介绍5.3 教学方法讲授和演示相结合案例分析和实践操作小组讨论和分享5.4 教学评估课堂参与度和提问案例分析和实践操作的完成情况小组讨论和分享的参与度第六章：HTML与CSS基础6.1 教学目标学习HTML的基本结构和语法掌握CSS的使用方法和技巧理解HTML和CSS在网页设计中的重要性6.2 教学内容HTML的定义和作用HTML的基本结构和语法CSS的定义和作用CSS的使用方法和技巧HTML和CSS在网页设计中的应用6.3 教学方法讲授和演示相结合案例分析和实践操作小组讨论和分享6.4 教学评估课堂参与度和提问案例分析和实践操作的完成情况小组讨论和分享的参与度第七章：响应式网页设计7.1 教学目标学习响应式网页设计的基本概念和原则掌握响应式网页设计的技巧和工具学习响应式网页设计的方法和流程7.2 教学内容响应式网页设计的定义和作用响应式网页设计的基本原则和要素响应式网页设计的技巧和工具响应式网页设计的方法和流程7.3 教学方法讲授和演示相结合案例分析和实践操作小组讨论和分享7.4 教学评估课堂参与度和提问案例分析和实践操作的完成情况小组讨论和分享的参与度第八章：网页设计与前端开发8.1 教学目标学习前端开发的基本概念和流程掌握HTML、CSS和JavaScript在网页设计中的应用学习使用前端开发工具和框架8.2 教学内容前端开发的定义和作用HTML、CSS和JavaScript在网页设计中的应用前端开发的流程和步骤前端开发工具和框架的介绍8.3 教学方法讲授和演示相结合案例分析和实践操作小组讨论和分享8.4 教学评估课堂参与度和提问案例分析和实践操作的完成情况小组讨论和分享的参与度第九章：网页设计与后端开发9.1 教学目标学习后端开发的基本概念和流程掌握后端编程语言和数据库在网页设计中的应用学习使用后端开发框架和工具9.2 教学内容后端开发的定义和作用后端编程语言和数据库在网页设计中的应用后端开发的流程和步骤后端开发框架和工具的介绍9.3 教学方法讲授和演示相结合案例分析和实践操作小组讨论和分享9.4 教学评估课堂参与度和提问案例分析和实践操作的完成情况小组讨论和分享的参与度第十章：网页设计项目实践10.1 教学目标培养学生独立完成网页设计项目的能力培养学生团队协作和沟通能力培养学生对网页设计行业的理解和认识10.2 教学内容网页设计项目的定义和作用网页设计项目的流程和步骤网页设计项目的实践操作和技巧团队协作和沟通的方法和技巧10.3 教学方法实践操作和项目实训团队协作和沟通的实践指导和学生互评10.4 教学评估项目完成的质量和效果团队协作和沟通的参与度学生互评和教师评价重点和难点解析一、网页设计基础1.1 教学内容中的网页设计的定义和作用、原则和要素，以及网页设计的工具和软件介绍是本节课的重点。
第7章 网页设计与制作-CSS样式使用
行内样式
这种样式是直接添加在HTML的标签里，语法如下：
<标签名 style=”样式规则的集合”>网页内容< /标签名>
【例】：
<p style=”color: blue; font-size: 10pt”>CSS实例</p>
代码说明：
用蓝色显示字体大小为10pt的“CSS实例”。尽管使用简单、显 示直观，但是这种方法不怎么常用，因为这样添加无法完全发挥 样式表的优势“内容结构和格式控制分别保存”。
案例（文字滚动效果） <marquee direction="up" scrollamount="2" onMouseOver="stop()" onMouseOut="start()"> <div>文字内容</div></marquee>
div设置宽高 400*100 固定定位 top: 20% left: 25%;
复习
第7章 CSS样式使用
$ [知识目标]
了解CSS样式的概念 掌握CSS样式表的创建方法 掌握应用CSS样式表的方法
8 [能力目标]
了解CSS样式的概念 掌握CSS样式表的创建方法 掌握应用CSS样式表的方法
什么是CSS层叠样式表
• CSS（Cascading Stylesheets，层叠样式 表）是一种制作网页的新技术，也有的人称 之为层叠样式表（Cascading Stylesheet） ，现在已经为大多数的浏览器所支持，成为 网页设计必不可少的工具之一。
看看段落中的字体有什么变化？
语法规定
4．注释
你可以在CSS中插入注释来说明你代码的意思 ，注释有利于你或别人以后编辑和更改代码时 理解代码的含义。在浏览器中，注释是不显示 的。CSS注释以"/*" 开头，以"*/" 结尾。
网页设计与开发第7章试卷及答案
《网页设计与开发第７章》试卷一、选择题1、下列关于表单得说法不正确得一项就是( )。
A.表单元素可以单独存在于网页表单之外B。
表单中包含各种对象，例如文本域、列表框、复选框与单选按钮Ｃ。
get与poｓt方法就是浏览器将表单信息提交给服务器程序得两种主要方法Ｄ.表单由两部分组成:一就是描述表单得HTML源代码;二就是用来处理用户在表单域中输入得信息得服务器端应用程序客户端脚本答案： A2、下列不就是表单域得控件就是（).A。
单行文本框B。
复选框C.下拉菜单D。
图文框答案： D3、ＨTMＬ语言中表单得作用就是（)。
A。
显示图像B．设置超链接C.收集用户反馈信息Ｄ.显示网页信息答案： C4、有如下一行代码〈inpuｔtｙpe="text”name=”txｔ＂＞请问它得功能就是（).A.创建一个文本框B.创建一个密码框C.创建一个文本域D．创建一个按钮答案： A5、在HＴML中，<form ａctｉon＝？＞,aｃtion表示( )。
A.提交得方式B.表单所用得脚本语言C．提交得URＬ地址D。
表单得形式答案: Ｂ6、在HTML中,〈foｒm methoｄ=?＞，ｍetｈｏd表示（ ).A.提交得方式B。
表单所用得脚本语言C.提交得UＲＬ地址D.表单得形式答案: A７、增加表单得复选框得HTML代码就是( )。
Ａ。
<ｉnｐut typｅ＝sｕbｍit>B.<iｎpｕt ｔype=imaｇe ＞Ｃ.<input tyｐｅ＝ｔexｔ〉Ｄ.〈iｎpｕt type=ｃｈecｋｂox＞答案： D8、增加表单得密码域得ＨTML代码就是( )。
A。
<inｐut tyｐｅ＝sｕbmit〉Ｂ。
〈inｐut tｙpｅ=ｐａssｗoｒｄ〉C．<ｉnｐut type＝radio＞D。
＜iｎput tyｐe=chｅckｂox〉答案: B9、创建选项菜单应使用以下标记符( )。
Ａ。
网页设计基础知识
增加超链接
5．加入表格
在网页中加入表格，能有效地组织数据、 控制页面布局。方便对网页上众多元素的编辑。 目前大多数网站的网页都是利用表格来制作的。
插入表格的三种方法，请参考教程114页。
插入表格后，右键单击表格，打开“表格 属性”命令，可以设置表格各种属性，如：布 局、边框、背景颜色、背景图片、宽度、高度 等。
新建框架1
3．在框架中加入和保存网页
新建一个框架后，需要创建各个框架中的 网页。方法与新建一个网页基本相同，在保存 框架网页时，不仅要保存各个框架中的网页， 同时还要保存整个框架网页。
新建框架2
4．框架的基本操作
新建一个框架网页后，还可以对框架页面 进行调整，常见的操作有：选择框架网页，改 变框架的大小、拆分框架、删除框架等。
主页与网页
每个网站都是由网页组成的。
网页是单个页面，主页也是网页之一， 但是网页并不一定是主言简介
1．HTML语言
HTML是HyperText Markup Language（超 文本标记语言）的缩写，是一种用于编写超文 本文档的标记语言。是目前网页编辑的主流语 言，只要有浏览器软件即可以运行HTML文档。 一个网页（也称为 Web页）对应于一个 HTML文件（通常以.htm 或.html为扩展名）。 而HTML文件就是用HTML编写的文本文件， 主要由标签和元素体组成。 HTML利用不同类 型标签标记不同的元素体，确定和解释网页各 种内容的显示格式，由浏览器来显示网页。
四、插入元 素
2．插入水平线
在网页中可以插入水平线来分隔版面。 插入水平线的方法：打开“插入”菜单， 选择“水平线”，即可插入一条默认水平线。
右键单击水平线，选择“水平线属性”， 可以对水平线进行设置。如宽度、高度、对齐、 颜色等。
网页设计与开发第7章试卷及答案
《网页设计与开发第7章》试卷一、选择题1。
下列关于表单的说法不正确的一项是（ ).A．表单元素可以单独存在于网页表单之外B．表单中包含各种对象，例如文本域、列表框、复选框和单选按钮C．get和post方法是浏览器将表单信息提交给服务器程序的两种主要方法D．表单由两部分组成：一是描述表单的HTML源代码；二是用来处理用户在表单域中输入的信息的服务器端应用程序客户端脚本答案： A2. 下列不是表单域的控件是( ）。
A．单行文本框B．复选框C．下拉菜单D．图文框答案: D3. HTML语言中表单的作用是( ）。
A．显示图像B．设置超链接C．收集用户反馈信息D．显示网页信息答案: C4。
有如下一行代码〈input type=”text”name="txt”〉请问它的功能是（）。
A．创建一个文本框B．创建一个密码框C．创建一个文本域D．创建一个按钮答案： A5.在HTML中，〈form action=?〉，action表示（）。
A．提交的方式B．表单所用的脚本语言C．提交的URL地址D．表单的形式答案： B6。
在HTML中，〈form method=?〉，method表示（）。
A．提交的方式B．表单所用的脚本语言C．提交的URL地址D．表单的形式答案： A7.增加表单的复选框的HTML代码是（）。
A．<input type=submit〉B．〈input type= image 〉C．〈input type=text>D．<input type=checkbox>答案: D8。
增加表单的密码域的HTML代码是（）.A．〈input type=submit>B．〈input type=password〉C．<input type=radio〉D．〈input type=checkbox>答案： B9. 创建选项菜单应使用以下标记符（ ).A．SELECT 和OPTIONB．INPUT 和LABELC．INPUTD．INPUT 和OPTION10。
《网页设计与制作》教案-第7讲 布局技术之一-表格一
第7讲布局技术之一-表格一1.1教学目标：◆知识目标1.掌握表格的基本操作2.掌握表格各项属性设置的作用◆技能目标能合理运用表格进行页面布局，能合理设置表格属性◆品质目标培养学生认真细致、踏实进取的精神1.2教学重点：掌握表格的插入和表格属性的设置。
1.3 教学难点理解表格进行页面布局的好处和表格各属性的作用。
1.4教学方法：讲练结合，任务驱动、分子任务操练1.5课时安排：2课时1.6教学对象分析：这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。
1.7教学过程：一、激趣导入，揭示课题表格是网页设计制作时不可缺少的重要元素。
无论是用于对齐数据还是在页面上对文本进行排版，表格都体现出强大的功能。
它以简洁明了和高效快捷的方式将数据、文本、图像、表单等元素有序地显示在页面上，从而设计出版式漂亮的页面。
对于使用表格绘制页面布局，而非着重文字数据编排的设计来说，手动绘制表格布局是最佳方法，虽然这种方法极其容易建立表格，但不容易掌握尺度，因为其手动操作的特性，所以非常适合于制作网页版面，但对于内容的编排，就不如标准模式的标准那么方便。
标准表格是表格应用的另一种方法，它以几行几列的方式插入到页面，然后将图像、文字等内容插入表格，即可定位和编排这些内容。
二、使用表格在Dreamweaver MX 2004中，可以导入外部数据文件，还可以将网页中的数据表格导出为纯文本的数据文件。
表格的格式控制能力使设计者可以使用表格来构造网页的框架。
先用较大的表格对网页的版面进行大致的控制，再使用嵌套的表格对细节进行刻画。
使用表格排版的页面在不同的平台、不同的分辨率的浏览器里都能保持布局，所以表格是网页中常用的版面控制和制作模板的强有力的工具。
0.1插入表格Dreamweaver MX 2004提供了强大的工具进行表格编辑，使网页设计者可以对几乎所有的表格属性进行控制。
Web设计基础教程 第7章 网页banner设计与制作
2. 网页banner的设计和制作方法
4．从banner设计上来看，需要注意：
1） banner的文字不能太多，用一两句话来表达即可。 2）广告语要朗朗上口，可以第一时间的让人捕获表达的重点。 3）图形无须太繁杂，文字尽量使用黑体等粗壮的字体，否则在视觉上很容易被网页其他内容淹没。 4）图形尽量选择颜色数少，能够说明问题的事物。 5）如果选择颜色很复杂的物体，要考虑一下在低颜色数情况下，是否会有明显的色斑。 6）尽量不要使用彩虹色、晕边等复杂的特技图形效果，这样做会大大增加图形所占据的颜色数，增大体积。 7）产品数量不宜过多。banner 的显示尺寸非常有限，摆放太多产品，反而被淹没，视觉效果大打折扣。所以，产品图片不是越 多越好，易于识别是关键。
【step4】把教学楼的素材导入到背景组内，放在背景图的右下角处，如图7-2。
图7-2 “教学楼”图层效果
3. 实例1：学校网站banner设计与制作
【step5】把树林的素材导入到背景组内，位置放在背景图的左下角处，树林图层在教学楼图层下面。
图7-3 加入“树林”图层效果
3. 实例1：学校网站banner设计与制作
2. 网页banner的设计和制作方法
1．banner设计中的文字注意事项 虽然辅助图的面积比较大，但如果不加入文字说明的话，banner要表现、说明的主
题就不是很明确，所以文字是整个banner的主角，在制作banner的时候特别要注意对文字的处理和摆放。
1）分清主标和副标 从主次上来说，主标为主，字体要大颜色要醒目。副标起到从内容上和形式上都辅助主标的作用。
3. 实例1：学校网站banner设计与制作
【step14】在logo组新建一个图层，使用椭圆工具画出一个圆，并且填充颜色值为#ffffff。
网页设计基础知识(HTML基础)
第1 章网页设计基础知识1.1 网站网站(Web Site)是一个存放网络服务器上的完整信息的集合体。
它包含一个或多个网页，这些网页以一定的方式链接在一起，成为一个整体，用来描述一组完整的信息或达到某种期望的宣传效果。
有的网站内容众多，如新浪、搜狐等门户网站；有的网站只有几个页面，如个人网站。
1.2 网页网页（Web Page）实际上是一个文件，网页里可以有文字、图像、声音及视频信息等。
网页可以看成是一个单一体，是网站的一个元素。
平常我们所听说的“新浪”、“搜狐”、“网易”等，即是俗称的“网站”。
而当我们访问这些网站的时候，最直接访问的就是“网页”了。
这许许多多的网页则组成了整个站点，也就是网站。
1.3 首页首页(Home page)，它是一个单独的网页，和一般网页一样，可以存放各种信息，同时又是一个特殊的网页，作为整个网站的起始点和汇总点。
例如，当浏览者输入搜狐网站地址“”后出现在第一个页面，即sohu网站的首页。
问题：首页和主页有区别吗？通常网站为方便浏览者查找和分类浏览网站的信息，会将信息分类，并建立一个网页以放置网站信息的目录，即网站的主页。
并非所有的网站都将主页设置为首页，有的网站喜欢在首页放置一段进入动画，并将主页的链接放置在首页上，浏览者需要单击首页的链接进入主页。
1.4网页的表现形式1.静态网页：客户端与服务器端不发生交互访问者只能被动地浏览网站建设者提供的网页内容。
其特点：网页内容不会发生变化，除非网页设计者修改了网页的内容。
不能实现和浏览网页的用户之间的交互。
信息流向是单向的。
2.动态网页：客户端与服务器端要发生交互动态网页是指浏览器可以和服务器数据库进行实时数据交流的交互网页，而不是加上了动画等效果的动感网页。
动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、搜索查询、用户管理、订单管理等。
信息流向是双向的。
2.1 网站LOGO1.通常网站为体现其特色与内涵，涉及并制作一个LOGO图像放置在网站的左上角或其他醒目的位置。
7 DIV+CSS
—— DIV+CSS
项目导读
到目前为止，大多数网站ቤተ መጻሕፍቲ ባይዱ布局是采用表格进行布
局和定位的，但这种方式会逐渐淡出设计舞台，取而
代之的是符合Web标准的DIV+CSS布局方式。本项目
将使用DIV+CSS的方式完成网页布局的搭建和页面内
容的添加与外观设置。
教学目标
熟悉DIV+CSS布局方。 能熟练运用DIV技术、CSS样式及HTML标签 培养页面布局能力
中间部分，又可分为主体内容、侧边栏；
底部，包括一些版权信息。 经过以上的分析，我们设计出首页的基本布局图及DIV的嵌套关系如图7-2所示。
7.1初识DIV+CSS
任务1 设计实验中学首页
【实现方法】
图7-2基本布局图及DIV的嵌套关系
7.1初识DIV+CSS
任务1 设计实验中学首页
【实现方法】
7.1初识DIV+CSS
任务1 设计实验中学首页
【实现方法】
（5）制作主体部分 1、在<div id=” MainBody”></div>添加代码：
<img src="images/xx.jpg" width="414" height="333" class="bk" />
2、向style.css中添加CSS样式； 3、在<div id=” Sidebar”></div>添加代码制作边栏； 4、向style.css中添加CSS样式： #Sidebar h1 {font-size: 16px;text-align: center; }
网页设计与制作项目7超链接
鼠标指向导航图像
7.2 网页制作
步骤 10 重复同样的操作，插入鼠标经过图像，在 图像名称的文本输入框中输入“酒店机票”，用与设置 “首页”相同的方法选择所需要的图像，【插入鼠标经过 图像】对话框中的参数设置如图所示。
【插入鼠标经过图像】对话框参数设置
7.2 网页制作
7.2.2 创建文本与图片超链接 步骤1 创建文本超级链接。在【属性】面板上单击 “页面属性”按钮 ，设置文本链接的属性，参数设置如 图所示。 步骤2 在“目的地”页面中选择文本“预订酒店”， 如图所示；在【属性】面板上单击“链接（L）”右侧的 “浏览文件”按钮 。
步骤7 单击“预览”按钮 ，当鼠标指向 文本“黄山”图片时，单击即可跳转到“黄山” 页面上。 步骤8 按照相同的操作，可以完成图片 “苏州园林”、“桂林”的超级链接。
7.2 网页制作
7.2.3 创建图像映像超链接 步骤1 在“目的地”页面上单击“地图”图片，在 【属性】面板单击“矩形热点工具”按钮 ，在地图上的 “北京”处绘制“矩形”，如图所示。 步骤2 在【属性】面板上单击“链接（L）”右侧的 “浏览文件”按钮 ，或直接输入超级链接的目标文件名， 如图所示。
“目的地”页面效果
7.2 网页制作
7.2.1 设置导航条超链接 步骤1 启动Dreamweaver CS6后，在letuweb 站点中创建新文档，命名为“destination.html”。 步骤2 在destination文档中绘制表格布局页面，输 入相应的文字、选择图像等素材，插入页面顶部LOGO及其 他元素，如图所示。
7.2 网页制作
步骤3 在表格的第3行定位光标，执行【插入】| 【图像对象】|【鼠标经过图像】菜单命令，弹出【插 入鼠标经过图像】对话框，如图所示。
第7讲 设计网页布局
• 2、定案：在草案的基础上，将你确定需要 放置的功能模块安排到页面上。主要包含 网站标志，主菜单，新闻，搜索，友情链 接，广告条，邮件列表，计数器，版权信 息等。注意，这里我们必须遵循突出重点、 平衡谐调的原则，将网站标志，主菜单等 最重要的模块放在最显眼，最突出的位置， 然后再考虑次要模块的排放。
五、课外阅读资料
• 网页页面尺寸一般设置
六、作业布置
• 表格布局网页 • 下拉菜单及层布局网页 • 课堂案例：框架布局网页
七、反馈小结
如：电脑美术专业网
• 5、Flash型：这种类型基本上是出现在一 些网站的首页，大部分为一些精美的平面 设计结合一些小的动画，放上几个简单的 连接或者仅一个“进入”的链接甚至直接 在首页的图片上做链接而没有任何提示。 这种类型大部分出现在企业网站和个人主 页。
• 通常我们的网站布局不会是单一型，一般 是上面几种类型的结合与变化，或不同页 面使用不同的布局，这与网站风格或内容 有关。
四、布局类型
• 网页布局大致可分“国”字型、拐角型、标题正 文型、左右框架型、上下框架型、综合框架型、 封面型、Flash型、变化型。我们在下面逐一看看 各种布局类型。 • 1、“国”字型 字型：也可以称为”同“字型，是一些 、 大型网站所喜欢的类型，即最上面是网站的标题 以及横幅广告条，接下来就是网站的主要内容， 左右分列一些小条内容，中间是主要部分，与左 右一起罗列到底，最下面是网站的一些基本信息、 联系方式、版权声明等。这种结构是我们在网上 见到的差不多最多的一种结构类型。
• 受这些限制，一般来说，我们比较注重页 面宽度的限制，也就是说网页页面在水平 方向一般不设置宽度超出分辨率开成滚动 条，但又要适应常用的两种分辨率，所以 普遍宽度设在900-1000之间。两我们常用 垂直滚动来添加页面内容，但也不是说高 度没有限制，而是常用高度不要超出页面 三个屏。更多的内容，通常使用链接到另 一个页面。
网页设计基础
网页设计基础随着互联网的快速发展，越来越多的企业开始建设网站，通过互联网为企业寻找新的商机；而很多人也开始学习建立个人网页，通过互联网展示自我，寻求个人发展的空间。
无论建设网站还是建立个人网页，都离不开网页设计技术。
本章主要介绍在设计网页之前的一些基础知识，以及设计网页需要进行的各种准备工作，包括网站内容的策划、网站板块的设计、网页配色的理论，以及设计网页所使用的一些基本技术和软件。
1.1 网站整体策划网站的整体策划是一个系统工程，是在建设网站之前进行的必要工作。
1．市场调查市场调查提供了网站策划的依据。
在市场分析过程中，需要先进行3个方面的调查，即用户需求调查、竞争对手情况调查以及企业自身情况的调查。
2．市场分析市场分析是将市场调查的结果转换为数据，并根据数据对网站的功能进行定位的过程。
3．制订网站技术方案在建设网站时，会有多种技术供用户选择，包括服务器的相关技术（NT Server/Linux）、数据库技术（ACCESS/My Sql/SQL Server）、前台技术（XHTML+CSS/Flash/AIR）以及后台技术（ASP//PHP/JSP）等。
4．规划网站内容在制订网站技术方案之后，即可整理收集的网站资源，并对资源进行分类整理、划分栏目等。
网站栏目划分的标准是应尽量符合大多数人理解的习惯。
例如，一个典型的企业网站栏目，通常包括企业的简介、新闻、产品，用户的反馈以及联系方式等。
产品栏目还可以再划分子栏目。
5．前台设计前台设计包括所有面向用户的平面设计工作，例如网站的整体布局设计、风格设计、色彩搭配以及UI设计等。
6．后台开发后台开发包括设计数据库和数据表，以及规划后台程序所需要的功能范围等。
7．网站测试在发布网站之前需要对网站进行各种严密测试，包括前台页面的有效性、后台程序的稳定性、数据库的可靠性以及整个网站各链接的有效性等。
8．网站发布在制订网站的测试计划后，即可制订网站的发布计划，包括选择域名、网站数据存储的方式等。