网站制作的建立列表
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编码类型。
Div+CSS网站布局应用教程第8章 使用CSS样式设置列表效果
8.2.2
ul无序列表
Hale Waihona Puke 无序列表是网页中常见的元素之一，用于将一组相关的列表项目排列在 一起，并且列表中的项目没有特别的想顺序。无序列表使用<li>标签来罗列 各个项目，并且每个项目前面都带有特殊符号，比如黑色实心圆等。在 CSS中，可以通过list-style-type属性对无序列表前面的符号进行控制。 list-style-type属性的语法格式如下。 list-style-type: 参数1, 参数2,…;
自测8——为网页元素赋予内 容
自测8：为网页元素赋予内容 最终文件：光盘\最终文件\第8章\8-4-1.html 视 频：光盘\视频\第8章\8-4-1.swf
8.4.2
透明度opacity属性
opacity属性用来设置一个元素的透明度，opacity取值为1时是完全不透 明的，反之，取值为0时是完全透明的。1~0之间的任何值都表示该元素的透 明度。 opacity属性的语法格式如下。 opacity: <length> | inherit;
自测2——设置列表符号
自测2：设置列表符号 最终文件：光盘\最终文件\第8章\8-2-2.html 视 频：光盘\视频\第8章\8-2-2.swf
8.2.3
list-style-image属性
在网页设计中，除了可以使用CSS样式中的列表符号，还可以使用liststyle-image属性自定义列表符号。 list-style-image属性的基本语法如下。 list-style-image: 图片地址;
自测5——制作复杂新闻列表
自测5：制作复杂新闻列表 最终文件：光盘\最终文件\第8章\8-2-5.html 视 频：光盘\视频\第8章\8-2-5.swf
《网页设计与制作》课程标准
《网页设计与制作》课程标准一、课程性质本课程是中等职业学校数字媒体类数字媒体技术应用专业必修的一门专业核心课程，是在《图形图像处理》《程序语言设计》等课程基础上，开设的一门理论与实践相结合的专业课程，其任务是让学生掌握网页设计的基础知识与基本技能，为《多媒体作品设计软件应用》等后续课程的学习奠定基础。
二、学时与学分72学时，4学分。
三、课程设计思路本课程按照立德树人根本任务要求，突出核心素养、必备品格和关键能力，兼顾中高职课程衔接，高度融合网页设计与制作知识技能的学习与职业精神的培养。
1依据《中等职业学校数字媒体类数字媒体技术应用专业指导性人才培养方案》中确定的培养目标、综合素质、职业能力，按照知识与技能、过程与方法、情感态度与价值观三个维度，突出项目操作能力和解决问题能力的培养，结合本课程的性质和职业教育课程教学的最新理念，确定本课程目标。
2.根据“中等职业学校数字媒体技术应用专业'工作任务与职业能力'分析表”，依据课程目标和计算机软件测试员等工作的岗位需求，围绕网页设计与制作关键能力，反映数字媒体行业发展的新知识、新技术，体现科学性、适用性原则，确定本课程内容。
3.以创建一个完整的网络为主线，设置模块和教学单元，将网页设计与制作的基础知识、基本技能和职业素养有机融入，遵循学生认知规律，结合学生的生活经验，确定学习内容的顺序。
四、课程目标学生通过学习本课程，掌握网页设计与制作的基础知识与技能，能独立制作中小型的网站，并通过现代信息化的手段进行表现，初步形成良好的职业意识和职业素养。
1了解网页设计与制作相关的艺术、技术背景知识及发展趋势，能对网站制作产生学习兴趣。
2.熟悉网页制作原理及制作流程，掌握静态网站制作的基本方法。
3.掌握AdobeDreamWeaVer网页制作工具，熟练运用多种网页设计技术，具备网页设计、制作及站点管理的基本知识和基本技能。
4.了解动态网页的初步知识，能合理规划网站，并能根据要求正确创建数据库和数据表，完成网站制作。
企业建站模板网站常见的几个代码列表
企业建站模板网站常见的几个代码列表.txt我这人从不记仇，一般有仇当场我就报了。
没什么事不要找我，有事更不用找我！就算是believe中间也藏了一个lie！我那么喜欢你，你喜欢我一下会死啊?我又不是人民币，怎么能让人人都喜欢我？企业建站模板网站常见的几个代码列表企业网站模板常见的几个代码如下：1、加为收藏，代码如下：<a href="javascript:window.external.addFavorite(','收藏我们')">加为收藏</a>把 换为你的网址即可。
2、设为首页，代码如下：<a href= onClick="this.style.behavior='url(#default#homepage)';this.setHomePage(this.href );return(false);" style="behavior: url(#default#homepage)">设为首页</a>把 换为你的网址即可。
其他还没想到，想到再进行补充。
3、常见给网页添加的背景音乐是wma或者mp3，其实很简单，放一段代码即可解决问题。
代码如下：<BGSOUND src="rainbow.wma" loop=infinite></BGSOUND>说明：rainbow.wma是你要放的音乐名称和格式，这里也可以用连接代替，比如我用下面这个网上的音乐地址：/1.mp3 ，那代码就变为：<BGSOUND src="/1.mp3" loop=infinite></BGSOUND>把这代码加到</body></html>前面即可。
上面是把一段音乐放到任何一个网页上都可以。
网页设计与制作实验报告
网页设计与制作实验指导一览表实验1 HTML语言实训目的:为了让学生能熟悉学习网页不可避免要接触的HTML语言，达到用该语言可以建立一个简单的网页的目的，同时了解建立站点是做网站必不可少的，要掌握建立站点的方法。
素材准备：准备制作网页所需的文字素材、图像素材。
实验课时：2学时实验内容：1.创建站点；2.新建网页以及保存，重命名；3.输入HTML语言。
实验步骤：1.在E盘中新建本地根文件夹，命名为root，并在该文件夹中新建image文件夹以存放网站中所要用到的图片。
2.定义站点：设置 "站点名称"，命名为 "mysite";设置本地根文件夹,指定为E盘下的root文件夹;设置 "HTTP地址"为localhost。
3.创建与设置文档的页面属性：新建一个页面，保存名为“HTML基础”的文档。
4.切换代码模式下，输入代码。
5.保存文件，预览文件效果。
实验过程注意事项:1.在创建站点的过程中注意建立本地文件夹，文件夹命名最好为英文；网站中所有的文件最好取名为英文；注意文件的路径；2.所有的图片文件单独放在image文件夹内。
实验思考:除了用HTML语言来做这个网页，还有没有其它的方法？书写实验报告要求:根据最终所作的网页，写出实验报告。
页面效果图：图1-1实验2 初识Dreamweaver实验目的：为了让学生能熟练掌握Dreamweaver的安装与卸载，启动与退出，基本工作环境和设置，对Dreamweaver操作环境有一定了解。
素材准备：准备好从网上下载的安装程序。
实验课时：2学时实验内容：1.安装Dreamweaver：2.Dreamweaver的启动与退出：3.了解工具栏、菜单栏、标题栏等工作环境：4.卸载Dreamweaver实验步骤：1.打开从网上下载的Dreamweaver程序，双击安装。
2.安装完成后输入注册号。
3.启动Dreamweaver，并查看工具栏、菜单栏、标题栏等工作环境。
网页设计与制作第6章 表单的使用
❖ 一个跳转按钮。
6.3.7 跳转菜单
❖ 1．添加一个跳转菜单 ❖ 2．修改跳转菜单
第6章 表单的使用
操作题: 新建一个文档，在该文档中建立一个个人资料
的表单。该表单如下图所示。
POST请求。 ❖ 【目标】：指定打开链接文件的框架或窗口。 ❖ 【MIME类型】：指定提交服务器处理的数据的MIME编码方式，与 ❖ POST方法连用的一般是application/x-www-form-urlencode。如果创建 ❖ 的是文件上载区域，则指定multipart/form-data MIME格式。
6.2 表单的创建
(1)表单的HTML基本语法 <form>.. .. .. ..</form>
6.3 表单对象的创建
在创建表单之后，就可以通过表单工具面 栏在表单中插入各种表单对象，也可以通过 相应的菜单在表单中插入相应的表单对象。 在表单中可以插入单行文本域、隐藏文本域、 多行文本域、单选按钮、复选框、单选按钮 组、列表菜单以及跳转菜单等多种表单对象。
❖ 【按钮名称】：设置按钮的名字。按钮名有提交和重置两个 保留名。提交用于将表单信息提交至处理信息的应用或脚本； 重置用于以原始值重新设置所有的表单区。
❖ 【标签】：设置在按钮上显示的文本。
❖ 【动作】：指定在单击这个按钮时发生的事件。选择【提交 表单】单选按钮，将会自动将按钮标签设置为【提交】；选 择【重设表单】阅览单选按钮，将会自动将按钮标签设置为 【重置】；选择【无】单选按钮，则表示在按钮被单击后， 既不提交表单也不重置表单。
6.2 表单的创建
❖ 默认，使用浏览器默认的方法（一般为GET）。 ❖ 选择GET，追加表单值到URL，并发送服务器GET请求， ❖ URL限制长度为819个字符，超出长度的部分会被去掉，所以不要对长 ❖ 表单使用GET方法，也不要用GET方法传送用户名、密码、信用卡账号 ❖ 或其他机密信息，因为GET方法不是传送信息的安全方式。 ❖ 选择POST，在HTTP request的消息正文中发送表单的值，并发送服务器
站点设置、列表、插入图像、文本格式化
实验2 :站点设置、列表、插入图像、文本格式化一、实验目的1.掌握在Dreamweaver中建立和设置站点的方法；2.掌握利用文件面板编辑站点文件的方法；3.掌握利用样式面板建立CSS样式、利用属性面板应用CSS样式的方法；4.掌握段落标记<P>、列表标记、区隔标记<SPAN>、插入图像标记<IMG>等的用法；5.掌握HTML文档的一般结构(头部与主体)；6.掌握DW可视化环境的使用；7.掌握DW对标记名、标记属性及属性值的联机支持功能。
二、实验内容及步骤【预备】∙在自己的U盘或本地硬盘上建立一个名为“MyWebSite”的文件夹拟作为站点根目录；∙素材已传到桌面，然后解压到MyWebSite文件夹里。
1.新建站点。
启动DW,使用“站点”菜单，新建站点，设置站点名称为“我的网站”（站点名称可随意命名），设置站点根目录为刚才建立的文件夹“MyWebSite”。
2.查看源代码。
访问/webdesign/sy01.html页面，在本页面的空白处右键，在出现的菜单中选择“查看源文件”，即可查看本页面对应的HTML文档（代码）。
3.保存网页文件。
使用浏览器的菜单“文件”－“另存为”，选择文件类型为“HTML文档”，保存(命名为sy01.html)该网页到刚建立的站点根目录里。
4.认识DW可视化环境，掌握HTML文档的一般结构和素材文件的相对引用。
o在DW集成环境中，打开刚才保存的网页sy01.html，观察该HTML文档的结构（头部和主体）；o使用DW文件菜单，新建一个HTML基本页，并保存到站点根目录里(命名为sj01-4.html)；o选择DW的“拆分”模式，在设计窗口中使用“图像”工具插入一幅图像。
在代码窗口中观察对素材文件引用的代码—是相对引用而不是绝对引用；o在设计窗口中单击图像，在右下角处拖动鼠标改变图像的大小，观察属性面板中属性值的实时变化；o在设计窗口中单击图像，利用属性面板修改图像的宽度和高度；o直接在代码窗口中修改图像的宽度或高度，在设计窗口中观察其变化。
dreamweaver8网页设计教案
初识Dreamweaver 8课题：Dreamweaver8简介及创建文档一、教学基本内容1、什么是网页和网站2、网页的分类3、网页中的常用术语4、网页设计的相关知识5、认识Dreamweaver 86、Dreamweaver 8的基本操作7、Dreamweaver 8工作界面介绍二、课型：新授课三、课时：1个课时四、教学重点与难点重点:什么是网页和网站难点：1、网页的分类2、网页设计的一般步骤3、Dreamweaver 8的基本操作五、教学目的1 、对Dreamweaver这个制作网页的工具及网页有一定的认识，激发学生学习网页设计的兴趣2、一定要学会建立一个空白网页3、会对页面有一个简单的设置六、教学过程1、什么是网页和网站（1）网页网页是由HTML(超级文本标识语言）或者其他语言编写的，通过IE浏览器编译后供用户获取信息的页面，它又称为Web页，其中可包含文字、图像、表格、动画和超级链接等各种网页元素。
(2）网站网站就是一个或多个网页的集合。
从广义上讲，网站就是当网页发布到Internet上以后,能通过浏览器在Internet上访问的页面。
◆门户网站◆职能网站◆专业网站◆个人网站2、网页的分类(1）按所处位置分类按网页在网站中所处的位置可将网页分为主页和子页两类。
（2)按表现形式分类按网页的表现形式可将网页分为静态网页和动态网页。
3、网页设计的相关知识(1)设计网页的原则A、整体规划B、鲜明的主题C、善用图像D、醒目的导航E、及时更新F、易记的网站名称G、通用网页H、动画适量（2）网页设计的一般步骤A、规划网站B、收集整理资源C、配置站点D、创建页面E、测试站点F、发布站点G、维护、更新站点（3）网页制作的常用工具A、网页设计软件Dreamweaver是目前使用最多的网页设计软件。
B、图像处理软件制作网页图像的软件种类繁多，大多数网页设计人员选择的是Fireworks 或Photoshop。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
在html页面中，合理的使用列表标签能够起到提纲和格式排序文件的作用。
列表分为两类，一是无序列表，一是有序列表，无序列表确实是项目各条列间并无顺序关系，纯粹只是利用条列来呈现资料而已，此种无序标签，在各条列前面均有一符号以示区隔。
而有序条列确实是指各条列之间是有顺序的，比如从1、2、3…一直延伸下去。
列表的要紧标签
5-1 无序列表<UL>
无序列表使用的一对标签是<ul></ul>，无序列表指没有进行编号的列表, 每一个列表项前使用<LI>。
<LI>的属性type有三个选项,这三个选项都必须小写:
disc实心园
circle空心园
square小方块
<ul>假如不使用其项目<li>的属性值,即默认情况下的<ul>会加"实心园"。
格式1:
<UL>
<LI>第一项
<LI>第二项
<LI>第三项
</UL>
格式2
<ul>
<li type=disc>第一项
<li type=circle>第二项
<li type=square>第三项
</ul>
示例 5-1.html
<html>
<head>
<title>无序列表</title>
</head>
<body>
<ul>
<li>默认的无序列表加"实心园"
<li>默认的无序列表"实心园"
<li>默认的无序列表"实心园"
</ul>
<ul>
<li type=square>无序列表square加方块<li type=square>无序列表square加方块
<li type=square>无序列表square加方块</ul>
<ul>
<li type=circle>无序列表circle加空心园<li type=circle>无序列表circle加空心园<li type=circle>无序列表circle加空心园</ul>
</body>
</html>
5-2 有序列表<OL>
有序列表和无序列表的使用格式差不多相同，它使用标签
<ol></ol>，每一个列表项前使用<li>。
<ol>列表的结果是带有前后顺序之分的编号。
假如插入和删除一个列表项，编号会自动调整。
顺序编号的设置是由<ol>的两个属性type和start来完成的。
start=编号开始的数字，如start=2则编号从2开始，假如从1开始能够省略，或是在<li>标签中设定value＝"n"改变列表行项目的特定编号，例如<li value="7">。
type=用于编号的数字,字母等的类型，如type=a，则编号用英文字母。
为了使用这些属性，把它们放在<ol>或<li>的的初始标签中。
有序列表type的属性
格式2
<ol>
<li>第1项
<li>第2项
<li>第3项
</ol>
实例：5-2.html
<html>
<head>
<title>有序列表</title> </head>
<body>
<ol>
<li>默认的有序列表
<li>默认的有序列表
<li>默认的有序列表
</ol>
<ol type=a start=5>
<li>第1项
<li>第2项
<li>第3项
<li value= 20>第4项
</ol>
<ol type= I start=2>
<li>第1项
<li>第2项
<li>第3项
</ol>
</body>
</html>
5-3 嵌套列表
将一个列表嵌入到另一个列表中，作为另一个列表的一部分，叫嵌套列表。
不管是有序列表和无序列表的嵌套，扫瞄器都能够自动地分成排列。
实列：5-3.html
<HTML>
<HEAD>
<TITLE>嵌套列表</TITLE>
</HEAD>。