电子商务网站建设与网页设计教案10.docx

《电子商务网站建设与网页设计教案10.docx》由会员分享，可在线阅读，更多相关《电子商务网站建设与网页设计教案10.docx（34页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第1章 构建电子商务网站学习内容一，电子商务网站设计准那么 二，电子商务网站结构设计 三，使用Dreamweaver创立站点教学要求知识目的1 . 了解电子商务网站地定义，熟悉网页地构成元素。2 .掌握电子商务网站地设计准那么。3 .熟悉并掌握常见地电子商务网站地结构。4 .掌握在Dreamweaver CS6中创立站点地方法。技能目的1 .能够根据网站地设计准那么设计电子商务网站结构。2 .能够使用Dreamweaver创立站点。教学重点1 . 了解电子商务网站地定义，熟悉网页地构成元素。2 .掌握电子商务网站地设计准那么。3 .熟悉并掌握常见地电子商务网站地结构。4 .掌握在Dreamwe

2、aver CS6中创立站点地方法。教学难点1 .根据网站地设计准那么设计电子商务网站结构。2.使用Dreamweaver创立站点。教学方法讲授法，案例法课时数4课时学习内容第一节电子商务网站设计准那么一,电子商务网站（一）电子商务网站地定义（二）网页与网页设计（三）网页构成要素文本，图像，动画，超链接等是构成网页地基本元素。除此之外，网页地构成要素还包括网 站Logo,导航栏，表格，框架与表单等。二，电子商务网站设计准那么（一）明确网站建设目地与用户需求（-）总体设计主题鲜明（三）设计人性化地交互界面（四）网页形式与内容相统一2.熟悉Dreamweaver CS6地工作界面，了解各局部地功能。

3、技能目的1 .掌握在Dreamweaver中添加文字与表格地方法。2 .掌握在Dreamweaver中添加图像与Flash动画地方法。3 .掌握在Dreamweaver中添加列表与超链接地方法。教学重点1 .掌握在Dreamweaver中添加文字与表格地方法。2 .掌握在Dreamweaver中添加图像与Flash动画地方法。3 .掌握在Dreamweaver中添加列表与超链接地方法。教学难点1 .能够对网页中地文字进行编辑,在网页中插入图像并美化。2 .能够将图片及Flash动画插入到网页中，并进行相应地编辑操作。教学方法讲授法，案例法课时数4课时学习内容第一节 认识Dreamweaver

4、CS6工作界面荚单栏文档工具栏,文档窗口 .一而板组“惠性”面板一,菜单栏菜单栏主要包括“文件”“编辑” “查看”“插入” “修改”“格式” “命令” “站点”“窗 口”与“帮助”等io个菜单项。二,工具栏工具栏有两种显示方式，一种是以菜单方式显示,另一种是以面板方式显示。三，文档窗口文档窗口显示当前创立与编辑地网页文档，可以在“代码”“拆分”“设计”视图与“实 时视图”中分别查看文档。视图选项中包含了一些辅助设计工具，不同视图下显示地选项也 不尽相同。四，“属性”面板“属性”面板位于状态栏地下方，显示当前处于选中状态地对象地各种属性及参数。五,面板组Dreamweaver CS6将各种工具面

5、板集成到面板组中，如“插入”面板，“行为”面板,“CSS 样式”面板，“文件”面板等，它们可以是折叠状态也可以是展开状态，可以通过单击面板标签 来展开或折叠。第二节添加网页基本元素文本与图像一,添加文本要完成某一内容地描述，至少要用到大标题，小标题与段落文字等元素。在网页中添加文 本也要遵循这一原那么。二，添加图像图像具有形象，直观地特点，在网页中适当地插入一些图像,可以提高网页地美观性与可 读性。例如，在网页中插入商品图片比使用文字进行介绍更能说明问题。第三节添加网页基本元素列表一，添加无序列表无序列表（U1）是指没有序号，每一条列表文字上面都是通过小圆点或者其它图形方式 显示地。二,添加有

6、序列表有序列表（ol）是指具有序列号，列表内容会按照1,2,3,4地顺序进行排列。三，添加自定义列表自定义列表不仅是一列工程，还是工程及其注释地组合。自定义列表以dl标签开始，每 个自定义列表以 出 定义列表标题，以dd定义列表项。第四节添加网页基本元素表格表格在网页中是一个很重要地元素，在网页设计初期，很多布局是通过表格来实现地，但 现在已经使用DIV+CSS布局了，只在制作数据表格时使用表格工具。在HTML语言中，表格是通过table来定义表格，使用vtr来定义行，使用vtd定义单元 格,表格中地文本数据都是写到单元格中地。第五节添加网页基本元素超链接一，认识路径要正确地创立链接，需要使用

7、路径,即从链接源到链接目的之间地文件路径。描述路径地 方式有2种：（一）绝对路径（二）相对路径二,添加文档链接超链接是网页之间联系地桥梁，浏览者通过它可以转到其它页面。Dreamweaver CS6提 供了非常简便地添加超链接地方法，设计人员可以轻松地将文字,图片与Flash动画等网页元 素设置为链接地对象。通常所说地链接主要是指文档链接，因为链接到其它文档在网页中最为常见，可以是文 字与图片链接等。三,添加锚记链接有时一个网页地内容很多，需要拖动滚动条才可以看到下面地网页信息。这时，可以在网 页地开头局部设计不同地超链接，当单击超链接时会跳转到本网页地不同位置上，以便浏览 者快速浏览网页信息

8、。网页文档中地这种链接称为锚记链接。四，添加空链接空链接就是不会跳转到任何位置，但超链接地文本与图片等具有超链接地样式。空链接 可用于向页面上地对象或文本附加行为，如向空链接附加一个行为，以便在指针滑过该链接 时会交换图像或显示绝对定位地元素。通过本章地学习,我们对Dreamweaver有了初步了解,熟悉了其工作界面与 基本功能，并掌握了如何应用该软件来添加文本，图像，表格洌表与超链接等基 本兀素。归纳与Dreamweaver是Adobe公司推出地一款网页编辑软件,用于对网站地设计,提高 编辑与开发。由于它支持代码，拆分，设计，实时视图等多种方式来创作,编写与 修改网页，并拥有可视化编辑界面,

9、所以在电子商务网站地设计与制作中也被 广泛应用。掌握并熟练应用这款软件，可以很好地美化电商网站地显示效果，吸 引消费者注意，提高成单率。第5章 使用CSS样式美化网页一，认识CSS样式表二，在 Dreamweaver 中创立 CSS学习内容 三，应用CSS选择器四,CSS继承性，特殊性，层叠性与重要性 五，使用CSS格式化排版知识目的了解CSS样式表地基本语法。1. 了解CSS样式表地引用方式。教学要求技能目的.学会如何创立CSS样式表。1 .掌握设置CSS样式表属性地方法。2 .掌握管理层叠样式表地方法。教学重点1.学会如何创立CSS样式表。2.掌握设置CSS样式表属性地方法。3.掌握管理层

10、叠样式表地方法。教学难点1 .学会创立CSS样式，以及设置与编辑CSS样式。2 .可以熟练地利用CSS样式来美化网页。教学方法讲授法，案例法课时数4课时学习内容第一节 认识CSS样式表一，了解CSS地基本语法CSS地样式规那么由两局部组成:选择器与声明。选择器是样式地名称，包括自定义地类（也称“类样式”），HTML标签,ID与复合内容。而声明那么用于定义样式元素，它由两局部组成:属性与值。二,在网页中引用CSS地方式当CSS与网页中地内容建立关系时，即可称为CSS样式地引用。CSS样式地引用主要有 以下几种方式：（-）直接添加在HTML标记中（二）将样式表内嵌到HTML文件中（三）将外部样式表

11、链接到HTML文件上（四）联合使用样式表第二节 在Dreamweaver中创立CSS一,创立CSS规那么通过实例介绍如何在Dreamweaver CS6中创立CSS新样式。二，创立CSS文件在Dreamweaver中使用CSS样式时建议创立CSS文件,然后在CSS文件中编写CSS代 码,从使用CSS面板过渡到专业地代码书写中来。第三节应用CSS选择器一，应用元素选择器元素选择器又称为标记选择器，是最常用地一种CSS选择器。它是直接对HTML语言中 地所有标记进行样式设置，如p,hl,a等标记。二，应用群组选择器在css设置样式表中，如果希望对多个标记进行相同地样式设置,可以通过群组选择器 来统

12、一设置样式。三,应用类选择器类选择器也可以理解为自定义样式，它可以单独对网页地某个局部设置样式，操作非常 灵活,是网页设计中最常用地一种方法。四，应用ID选择器ID选择器与类选择器类似,不同地是使用符号来声明样式,ID选择器也与类选择器 一样，需要单独应用在标记元素上。五，应用后代选择器后代选择器可以理解为一种嵌套关系,是一种多条件地样式规那么。六，应用通配符选择器通配符选择器是一种特殊地CSS规那么,其声明方法为* coloured;其中，表示 HTML语言所有地标记元素，该CSS规那么地意义是将所有元素地字体设置为红色。第四节CSS继承性，特殊性，层叠性与重要性一,继承性CSS地某些样式是

13、具有继承性地，继承是一种规那么，它允许样式不仅应用于某个特定html 标签元素,而且应用于其后代。二,特殊性当为同一个元素设置不同地CSS样式代码时，浏览器会根据权值来判断使用哪种CSS样 式，权值高地具有优先权。三,层叠性对于同一个元素可以有多个css样式存在。当有相同权重地样式存在时，会根据这些 CSS样式地先后顺序来决定，处于最后地CSS样式会被应用，这就是CSS地层叠特性。四,重要性在某些特殊情况下,当有相同权重地样式存在时，需要为某些样式设置最高权值,此时可 以通过!important来提高其权值为最高。第五节使用CSS格式化排版一，文字排版在文字排版中，主要设置字体类型(font-

14、family),字体大小(font-size)与字体颜色(color) 等属性。字体属性值字体类型font-family宋体，微软雅黑字号大小font-size像素，如12像素字体颜色color16进制颜色表示法字体加粗font-weightbold字体倾斜font-styleitalic下划线text-decorationunderline删除线text-decorationline-through二，段落排版除了对网页进行字体设置外，还可以单独对文章地段落进行CSS规那么设置，在HTML中p 标记元素为段落标记。字体属，性值段落缩进text-indent2em行间距line-height2

15、em或像素值中文字间距或英文中字 母与字母地间距letter-spacing像素值英文单词之间地间距word-spacing像素值对齐方式text-alignleft （左对齐）,right （右对 齐），centent （居中对齐）三,CSS背景通过background可以设置CSS背景规那么。属性描述background简写属性，作用是将背景属性设置在一个声明中background-color设置元素地背景颜色background-image把图像设置为背景background-position设置背景图像地起始位置background-repeat设置背景图像是否及如何重复backgro

16、und-attachment背景图像是否固定或者随着页面地其余局部滚动（-）背景色（二）背景图像（三）背景重复（四）背景定位单一关键字描述center背景图片设置在中间top背景图片设置顶部bottom背景图片设置到底部right背景图片设置到右边left背景图片设置到左边（五）背景关联四，列表排版属性描述list-style简写属性，用于把所有用于列表地属性设置于一个 声明中list-style-image将图像设置为列表项标志list-style-position设置列表中列表项标志地位置list-style-type设置列表项标志地类型五，表格排版使用CSS对表格进行排版,如设置表格边框

17、为单一边框，设置表格地宽度与高度,设置表 格文本对齐方式，以及设置表格内边距与表格背景颜色。六，链接样式链接状态描述a:link普通地，未被访问地链接a:visited用户已访问地链接a:hover鼠标指针位于链接地上方a:active链接被点击地时刻归纳与提高学习内容教学要求通过本章地学习，我们了解了 CSS样式表地基本语法，引用CSS地方式，掌 握了在Dreamweaver中创立CSS规那么与文件地方法，也学会了如何应用CSS选 择器以及CSS规那么地特殊规定,并运用CSS规那么进行格式化排版。CSS （Cascading Style Sheet,层叠样式表）是一种用于控制网页元素样式显

18、示地标记性语言，也是目前流行地网页设计技术。将网页结构与样式分 离,HTML负责网页地结构设计,CSS负责网页地美化设计，这样有利于网页地 加载与搜索。第6章 使用DIV+CSS布局网页一，使用CSS盒子模型二，标准流与div标记三，盒子地浮动马定位四，使用CSS布局电子商务网站首页知识目的1. 了解CSS盒子模型。2. 了解CSS盒子模型地边框，内边距与外边距。3. 了解标准流,div标记，盒子浮动，盒子定位地意义。技能目的能够运用DIV+CSS进行网页布局。 掌握盒子在标准流中地定位。教学重点教学难点了解标准流,div标记，盒子浮动，盒子定位地意义。能够运用DIV+CSS进行网页布局。掌握

19、盒子在标准流中地定位。了解标准流,div标记，盒子浮动，盒子定位地意义。能够运用DIV+CSS进行网页布局。教学方法讲授法，案例法课时数5课时掌握盒子在标准流中地定位。学习内容第一节使用CSS盒子模型一，认识CSS盒子模型在CSS中,一个盒子模型由content （内容）,border （边框），padding （内边距）与margin （外边距）4个局部组成,所有地网页元素都是由这些局部组成地。margin-topborder-toppadding-topborder-bottommargin-bottom(zgpjoqJp.6fppedcontentpadding-bottompadd-n

20、gsght 一一 border.nghtmarg-nA-ght；box=content + padding border + margin二,CSS盒子模型地边框，内边距与外边距（一）边框（border）border地属性主要有3个,分别为color （颜色）,width （粗细）与style （样式）。（二）内边距（padding）内边距（padding）在盒子模型中地位置是内容与边框之间地距离，可以通过 padding-top,padding-right,padding-bottom,padding-left 属性来设置上，右，下,左地内边距。也可 以通过“padding: 123,4”来

21、直接设置四个方向地内边距，其顺序按照顺时针方向，依次为上, 右，下，左。（三）外边距（margin）外边距（margin）在盒子模型中位于边框外侧用于控制盒子与盒子之间地距离,其使用方法与内边距（padding）相同。第二节标准流与div标记一,标准流所谓标准流,是指在没有任何外部干涉时，网页中各个元素盒子地排列规那么，也就是网页 默认地，自然地排列布局方式。一个网页中地元素可以分为两类:块级元素与行内元素，也可以理解为两种不同类型地 盒子。标准流就是CSS规定地默认地块级元素与行内元素地排列方式。（一）块级元素大局部HTML标记都属于块级元素，每个块级元素都占据着一个矩形地区域，并且跟同 级

22、地兄弟块依次垂直排列，左右撑满。（二）行内元素网页中有一局部元素属于行内元素，基本都是用于文字修饰地标记，如span标记,em标 记声标记等。行内元素不占有独立地区域，行内元素不会左右撑满。二,div标记div标记与p标记都是块级元素渚B符合盒子模型特征。两种标记地区别在于p标记是有 特定意义地HTML标记，代表段落标记;而div标记是一个通用块级元素，没有具体HTML意 义,适合作为布局标记。三，盒子在标准流中地定位（一）块级元素之间地垂直定位margin属性两个块级元素默认是垂直排列地，可以通过上，下外边距来控制两个同级块级元素之间 地距离。两个垂直排列地块级元素之间地距离不是margin

23、-bottom与margin-top地总与，而是 两者中地较大者,这种现象叫做“塌陷”。合并之前合并之后（二）嵌套盒子之间地margin属性当一个盒子包含在另一个盒子中时，就形成了典型地嵌套关系，其中子盒子地margin将 以父盒子地内容为参考。在标准流中，一个块级元素地盒子模型在水平方向上地宽度会自动 延伸至上一级盒子地限制位置。第三节盒子地浮动与定位一，盒子浮动通过给块级元素设置浮动,它将按照浮动位置与外观进行改变，还会脱离默认地排列方 式，也就是不按照标准流地方式排列。二，清除浮动影响与盒子定位(一)使用clear属性清除浮动地影响(二)盒子地定位在CSS中，盒子地定位是通过positi

24、on属性来设置地position属性有3个常用地属性值, 分别为 static,relative 与 absoluteo1 .静态定位(static)2 .相对定位(relative)3 .绝对定位(absolute)第四节 使用CSS布局电子商务网站首页一，使用DIV布局页面结构在进行网页布局之前，最好在设计软件中先设计出网页地整体布局，然后按照设计地样 式进行分拆,再利用DIV+CSS进行布局。二，对网页头部布局演示对网页头部地head局部进行布局。三，对网页主体布局演示对网页主体main局部进行布局。四，对网页底部布局演示对网页底部foot局部进行布局。五,组合首页布局当将网站首页地三个

25、组成局部布局完毕后，可以将它们组合到一起，这样即可完成一个 整体地网页布局。归纳与提高学习内容教学要求通过本章地学习，我们了解了 CSS盒子模型，熟悉了标准流,div标记以及盒 子地浮动与定位，并学会了如何使用CSS布局电子商务网站首页。在网站页面设计中,网页地结构布局非常重要。通过HTML语言中地DIV 标签，结合CSS样式来进行网页布局，是网页设计中地主流布局方式。第7章使用行为与表单一，使用行为二，使用表单三，“新用户注册”表单设计 四，使用行为验证用户注册知识目的1 .知道什么是行为,事件。2 .理解“行为”面板地功能与操作。3 . 了解创立行为与表单地方法。（五）准确无误地链接（六）

26、网站信息地时效性（七）合理利用多媒体功能（八）努力提高网站地性能第二节电子商务网站结构设计一,网站地物理结构（一）扁平式结构（二）树形结构二，网站地逻辑结构网站地逻辑结构也称作链接结构，主要是指由网页内部链接所形成地逻辑结构。与物理结构类似，网站地逻辑结构同样可以分为扁平式与树形两种。三，网站地构成一般来说，网站都至少有两种页面,首页与内页。首页地基本职能首先是为访问网站地用户提供导航地作用。其次,就是表达与突出网站 主题地作用。根据用户需求地不同，内页会有风格各异地设置，但都要遵循一点，那就是内容制胜。四，网页地空间结构（一）网页顶部（二）网页主体（三）网页底部五，网页地布局结构（-）“国”

27、字形结构布局（二）“厂”字形结构布局（三）“回”字形结构布局（四）框架型结构布局（五）自由式结构布局第三节使用Dreamweaver创立站点一，初识 DreamweaverDreamweaver是美国著名地多媒体软件开发商Macromedia公司推出地一套专业可视化 网页开发工具，它与Flash,Fireworks并称为“网页三剑客”，其中Flash用于制作网页动 画,Fireworks用于制作网页图像，而Dreamweaver那么用于网页设计与制作。Dreamweaver具有制作效率高，网站管理系统,控制能力强等优点。二，创立站点地准备（一）注册域名（二）申请空间网站空间按照类型可以分为三种

28、，从低到高地顺序分别为:虚拟主机,VPS （虚拟专用服务技能目的1 .能够创立所需类型地表单。2 .学会给表单添加对象。3 .可以修改表单对象地属性。4 .灵活掌握不同行为特效地属性。教学重点1 .能够创立所需类型地表单。2 .学会给表单添加对象。3 .可以修改表单对象地属性。4 .灵活掌握不同行为特效地属性。教学难点1 .能够创立所需类型地表单。2 .学会给表单添加对象。3 .可以修改表单对象地属性。4 .灵活掌握不同行为特效地属性。教学方法讲授法，案例法课时数3课时学习内容第一节使用行为一，认识行为与事件行为在网页中是比拟常见地，如弹出窗口，鼠标移上去图片切换等。当发生某个事件时执 行某个

29、动作地过程称为行为，行为是事件与动作地组合。(-)行为行为包括两局部内容:一局部是事件，另一局部是动作。行为是某个事件与由该事件触发地动作组合，事件用于指明执行某个动作地条件;动作 是行为地另一个组成局部，它由预先编写地JavaScript代码组成,利用这些代码可以执行特定 地任务。(二)事件事件分为四类:鼠标事件，键盘事件，页面事件与表单事件。二，“行为”面板通过“行为”面板可以使用与管理行为。“行为”面板地显示列表分为两局部，左栏用于 显示触发动作地事件，右栏用于显示动作。css； 不I 属性|行为|标签 雪萨|九- onClick 连弹出信息第二节使用表单一，了解表单一个完整地交互表单由

30、两局部组成:一个是客户端包含地表单页面，用于填写浏览者进 行交互地信息;另一个是服务端地应用程序，用于处理浏览者提交地信息。二，创立表单在网页文档中创立表单地操作非常简单，演示具体地操作方法。三,设置表单属性前面插入地是一个空表单，单击红色虚线框选中表单，在“属性”面板中可以设置表单地 有关属性。属性I三|nj表单id动作目标类无I-forml方法POST 编码类型第三节“新用户注册”表单设计一,插入文本字段(-)插入文本字段(二)设置文本字段属性二，插入复选框在网页中应用复选框可以为用户提供多个选项用户可以选择其中地一项或多项。三插入单项选择按钮单项选择按钮通常不会单一出现，而是多个单项选择

31、按钮一起成组使用，且只允许选择其中地一 个选项。四插入文件域文件域由一个文本框与一个“浏览”按钮组成，主要用于从磁盘上选择文件。在表单中 经常会用到文件域,它能使一个文件附加到正被提交地表单中，如在表单中上传图片,在邮件 中添加附件等。五，插入列表与菜单列表与菜单也是表单中常用地元素之一，它们可以显示多个选项,通过滚动条可以显示 更多地选项。六，插入按钮通过脚本地支持，单击相应地按钮，可以将表单信息提交到服务器，或者重置该表单。标准 表单按钮带有“提交”“重置”或“发送”标签，还可以根据需要分配其它已经在脚本中定义 地处理任务。表单中地按钮一般放置在表单地最后用于实现相应地操作,如提交，重置等

32、。第四节使用行为验证用户注册一，检查表单在会员注册网页中，用户名单行文本框是需要填写地，通过“行为”面板可以设置检查表 单。二，设置密码仅为数字通过添加行为设置密码框，使其只能输入数字作为密码,演示具体操作方法。三,检查邮箱格式邮箱文本框用于收集用户邮箱地址，电子邮箱是有规定格式地，如“mel23163.”，在提 交表单之前，可以先检查用户输入地邮箱信息是否符合电子邮箱地规定格式。归纳与提高通过本章地学习，我们了解了行为，事件地意义，熟悉了 “行为”面板地界面 与基本操作;学会了如何创立表单，并用行为验证用户注册。行为是Dreamweaver中设计网页动作地交互面板，是预先设计好地 JavaS

33、cript代码;表单是用户与服务器之间地桥梁,专门用于接收访问者填写地 信息，使网页具有交互功能。第8章制作网页特效学习内容一，认识JavaScript脚本语言二，使用JavaScript制作网页特效 三，使用JavaScript验证表单 IZ9 JavaScript网页特效实例教学要求知识目的1. 了解JavaScript脚本地功能与一般格式。2. 了解各种网页特效及其制作方法。3. 了解JavaScript验证表单地几种情况。技能目的1 .能够正确地在网页中添加JavaScript脚本来实现网页特效。2 .能够使用JavaScript脚本对网页中地表单进行验证。教学重点1 .能够正确地在网

34、页中添加JavaScript脚本来实现网页特效。2 .能够使用JavaScript脚本对网页中地表单进行验证。教学难点1.能够正确地在网页中添加JavaScript脚本来实现网页特效。2.能够使用JavaScript脚本对网页中地表单进行验证。教学方法讲授法，案例法 课时数 3课时学习内容第一节认识JavaScript脚本语言-JavaScript 简介JavaScript是一种解释性地,基于对象地脚本语言。使用JavaScript地特殊方式Ajax,可以实现网页异步更新，这意味着可以在不重新加载整 个网页地情况下对网页地某些局部进行更新。JavaScript主要是基于客户端运行地，浏览者单击

35、包含JavaScript代码地网页，网页中地 JavaScript代码就传到浏览器，由浏览器对此进行处理。ZZ,JavaScript地基本结构JavaScript脚本是嵌入在HTML代码中一起被浏览器执行地。理论上可以在HTML页 面中地任何位置嵌入JavaScript,但一般都会放置在网页头部。khtml xmlns-hctp: 首页 委要执行的Javascript脚本代码/script三，使用JavaScript向页面输出信息JavaScript最重要地功能是实现用户交互以及事件处理。使用JavaScript可以动态地向 网页输出信息，主要有以下两种方法。（）使用alert语句使用aler

36、t（要显示地内容”）语句，可以让网页在被浏览时弹出提示信息框，显示相应地信 息。（二）使用 document.write。语句使用document.write（要显示地内容”）语句可以向页面中输出信息。document.write。语句可以向页面输出3种类型地信息。输出类型代码实例输出结果输出值document.write(Hhello,world!1);Hello,world!输出变量var str=我爱学习HTML网页!”；我爱学习HTML网页！document, write(str);输出HTML 标记document. write( 本地生活论坛 n);以标题1显示“本地生活论坛”第二

37、节使用JavaScript制作网页特效一,文字滚动特效文字滚动特效就是在较小地页面版块中进行滚动，以显示较多地文字内容，这样不但可 以节约有限地网页版面，还能使文字具有动态地效果,以到达吸引浏览者地目地。文字滚动特效地实现很简单，只需在要滚动地文字两端添加marquee,脚本代码即可。二，日期特效在页面上显示当前日期，不但可以对浏览者起到提示作用，还能使网页地功能更加完善。 要实现日期特效，需要使用JavaScript提供地日期时间函数，并结合前面介绍地 document, write。语句在页面地相应位置显示日期与时间。三，广告特效在电子商务网站中，广告几乎是必不可少地。根据广告地制作原理，

38、可以分为层广告，弹出 广告,漂浮广告等。四,下拉菜单特效下拉菜单是网页中常见地一种显示形式,将鼠标指针移至链接元素上，就会弹出一个下 拉菜单。下拉菜单不仅可以节省网页排版空间，还可以使网页布局简洁，有序，一个新颖地下拉 菜单还会使网页增色不少。下拉菜单地制作需要用到两种鼠标事件:onmouseover （鼠标移入）与onmouseout （鼠标 移出）。第三节使用JavaScript验证表单二、非空睑证当浏览者注册网站会员时,需要填写有关信息。在提交注册信息时,必填项地内容不能为 空，否那么会弹出提示信息框提示有关信息。在使用JavaScript脚本验证表单时，首先要获取表单对象地值燃后对其进

39、行判断,根据判 断情况做出相应地操作。二，验证密码长度与一致性为了防止会员密码设置得过于简单而造成密码被破解，可以要求注册者将密码设置为一 定地长度。此外，还需要验证注册者输入地密码与确认密码是否一致。三,邮箱地址验证在注册会员时，注册者输入地电子邮箱地址需要是有效地,可以通过设置邮箱地址验证 来防止注册者输入错误地邮箱地址。正确地邮箱地址需要包含“与符号，当注册者输入地邮箱地址未包含这两种符号 时应提示重新输入。第四节JavaScript网页特效实例一，下载焦点图代码有很多JavaScript代码都可以从网上进行下载，我们只要按照操作提示就可以直接使用, 没有必要从头编写代码。二，添加焦点图

40、代码将“焦点图”代码下载到本地电脑后，就可以添加此特效到网站首页中了。归纳与 提通过本章地学习，我们了解了 JavaScript地基础知识,熟悉了 JavaScript地基 本结构，掌握了使用JavaScript制作网页特效地方法，运用JavaScript脚本对表单 验证地方法。通过DIV+CSS布局完成网页设计后，还需要对网页添加交互式特性，例如， 使用“图像交换”特效可以进行网站广告图片地轮换;对表单进行验证,可以使 用交互方式来设计，还有很多浏览器特性,这些都是通过JavaScript脚本来实现 地。学习内容第9章 动态网站与S系统应用一,认识动态网站二，认识S系统三，搭建S系统环境四,

41、WSTMart系统管理五,WSTMart系统基础设置教学要求知识目的1 . 了解动态网站地系统架构。2 .认识S系统在网站开发中地作用。3 .掌握S系统地搭建与设置方法。技能目的1 .利用S系统搭建网站功能。2 .利用模板设置S系统地网页效果。教学重点1 . 了解动态网站地系统架构。2 .认识S系统在网站开发中地作用。3 .利用S系统搭建网站功能。4 .利用模板设置S系统地网页效果。教学难点1 .利用S系统搭建网站功能。2 .利用模板设置S系统地网页效果。教学方法讲授法，案例法课时数 3课时学习内容第一节认识动态网站一，动态网页动态网页具有以下特点：（1）动态网页以数据库技术为基础,可以大大降

42、低网站维护地工作量。（2）采用动态网页技术地网站可以实现更多地功能，如用户注册，用户登录，搜索查询，用 户管理，订单管理等。（3）动态网页并不是独立存在于服务器上地网页文件，只有当用户请求时服务器才返回 一个完整地网页。（4）搜索引擎一般不可能从一个网站地数据库中访问全部网页，因此采用动态网站制作 在进行搜索引擎推广时，需要做一定地技术处理才能适应搜索引擎地要求。二,动态网站技术仅仅学会了网页制作工具，是远远不能完成动态网站制作地，还需要了解动态网站技术, 如网页标记语言HTML,网页脚本语言JavaScript与VBScript,动态网页编程语言ASP,PHP与 JSP 等。（一）搭建动态网

43、站平台动态网页大多是由网页编程语言写成地网页程序，访问者浏览地只是其生成地客户端代 码，而且动态网页假设要实现其功能，还需要与数据库相连。关于动态网站制作，目前比拟流行地互动式网页编程语言包括:ASP,PHP,JSP,CGI,ASP.，其 中HTML网页适用于所有环境，它本身也非常简单。（二）动态网页编程语言ASPASP是Active Server Page地缩写，即“活动服务器网页”。ASP是微软公司开发地代替 CGI脚本程序地一种应用，它可以与数据库与其它程序进行交互，是一种简单，方便地编程工 具。ASP网页文件地格式是.asp,常用于各种动态网站中。（三）动态网页编程语言PHPPHP地特

44、性包括：（1） PHP独特地语法混合了 C,Java,Perl以及PHP自创新地语法。（2） PHP可以比CGI或Perl更快速地执行动态网页。与其它编程语言相比,PHP是将 程序嵌入到HTML文档中来执行地,执行效率比完全生成HTML标记地CGI要高许多。PHP 具有非常强大地功能,CGI地所有功能PHP都能实现。（3） PHP支持几乎所有流行地数据库以及操作系统。（4）最重要地是PHP可以使用C,C+进行程序地扩展。（四）网站数据库数据库（Database）是按照数据结构来组织，存储与管理数据地仓库，每个数据库都有一 个或多个不同地API用于创立，访问，管理，搜索与复制所保存地数据。我们也

45、可以将数据存储在文件中，但在文件中读写数据地速度相对较慢,所以现在使用 关系型数据库管理系统（RDBMS）来存储与管理大数据量。（五）MySQL数据库MySQL是一种关联数据库管理系统，关联数据库将数据保存在不同地表中，而不是将所 有数据放在一个“大仓库”内，这样就提升了速度，并提高了灵活性。第二节认识S系统一,什么是S系统S系统是网站内容管理系统地简称,能够快速完成网站功能建设，它是集前台设计,后台程 序，网站数据库于一体地集成化系统，大大缩短了网站地开发流程与本钱，甚至完全可以一个 人就能实现整个网站地功能，甚至开发者不需要懂太多地网站后台开发语言就可以完成，并 且很多S系统都是开源，免费地,非常适合企业与个人网站地开发。二，选择S系统在选择S系统时，要注意以下几个方面:（-）S系统编码类型（二）明确建站需求（三）程序与模板别离（四）支持SEO优化三，国内优秀地电子商务类S系统目前