网站设计项目化教程(HTML+CSS+JavaS课件.ppt

1、项目一 网站规划设计1设计内容网站开发基础网站总体规划2网站开发基础3明确课程学习目标。掌握与网站相关的基本概念。掌握静态网页和动态网页的区别。网页设计制作相关术语术语各专业、行业的专门用语。在网页设计制作中，经常要使用的术语可以包含两部分：网络相关术语网站相关术语4网络相关术语Internet Internet是覆盖全球的信息基础设施之一，其将全球范围内不同国家、不同区域的众多资源连接起来，为用户提供一个庞大的远程计算机网络。WWW 全称World Wide Web，简称Web，中文称万维网，是基于超文本的信息查询和信息发布的系统。5网络相关术语IP地址如同每个人有唯一的身份证号一样，每台与

2、Internet相连的计算机在唯一的网络地址称为IP地址。如：172.16.86.112域名用由字母和数字组成的符号来代替将IP地址，以方便用户记忆站点的字符型地址，称为域名。 如：WWW6网站相关术语URLURL的中文全称为统一资源定位符，是一种在WWW中浏览超文本文档时保证准确定位的机制。可指向本地计算机上的某个文件，也可指向Interne的一个网页或其他资源的位置。URL一般格式：访问协议：/主机域名或IP地址:端口号/路径/文件名如：http:/、http:/ HTML标记、文本、声音、图像、动画、电影以及客户端ActiveX控件的网页，但不包含任何脚本，其内容由开发人员编辑好后不会自

3、行改动的网页。客户端动态网页包含了可在客户端浏览器中执行的脚本程序，并且可以改变网页中各种标记内容的静态网页。8网站相关术语动态网页在服务器端运行的程序、网页和组件等。9网站开发语言和软件网页制作语言HTMLXMLASPASP.NETPHPJSP网页制作软件DreamweaverFrontPageFlashPhotoshop10设计内容网站开发基础网站总体规划11网站总体规划12熟悉网站建设与网页制作的规划构建部署过程。完成网站的总体功能规划。网站开发流程前期的定位网站目标定位网站风格定位网站创新与创意网站内容与目录结构规划中期设计与制作效果图制作软件设计制作网页测试网站的调试与维护13网站功

4、能规划需求分析网站定位内容规划14企业网站设计说明15思考：你用过哪几种浏览器？说说WWW技术原理。16解答：浏览器浏览器是指可以显示网页服务器或者文件系统的HTML文件内容，并让用户与这些文件交互的一种软件。常用的浏览器有：常用的浏览器有：IEFirefoxOperaMaxthon（IE内核）谷歌浏览器17解答WWW技术WWW结构 “客户机/服务器”结构。网页存放在被称为Web服务器(Web Server)的计算机上，等待用户访问。18项目二 网站搭建与管理19设计内容站点搭建站点和站点文件管理20站点搭建21熟悉Dreamweaver CS6的工作环境和各窗口的作用。掌握Dreamweav

5、er CS6设置首选参数的方法。掌握Dreamweaver CS6搭建站点的方法。Dreamweaver在网站设计中的作用站点的搭建网页的设计网站的模版站点的发布维护实现网站的页面设计和站点的管理22DW CS6的工作界面23DW CS6的工作界面24主要为标题与菜单栏、文档工具栏、文档窗口、状态栏、属性面板等，右侧是浮动面板组DW CS6的工作界面25文档工具栏DW CS6的工作界面26文档工具栏DW CS6的首选参数设置27常规首选参数设置DW CS6的首选参数设置28新建文档设置DW CS6的首选参数设置29字体参数设置DW CS6中的站点搭建30本地站点搭建DW CS6中的站点搭建31

6、远程站点搭建设计内容站点搭建站点和站点文件管理32掌握网页设计过程中站点的创建与管理方法33站点基本操作打开站点添加站点删除站点修改站点34站内文件管理新建文件和文件夹文件/文件夹的基本操作文件新建文件打开与关闭文件的预览35项目三 网站页面设计36设计内容帮助热线页面设计站内地图页面设计产品展示页面设计注册页面设计在线自助页面设计37掌握网页文字的处理中的字体标记、水平线标记、段落标记、换行标记、分隔标记等标记及其属性设置。38HTML是HyperText Markup Language的缩写，是超文本标记语言，其通过标记符描述网页中需显示的文本、图片、声音、多媒体等，也通过标记符形成页面和

7、实现页面之间的链接。 文件结构：HTML39三种基本格式：文本文本（前两种为双标记）（单标记）HTML文档的基本格式40标题是一篇文章或一段文本的题目，是以某种方式被加强、被突出的词组或短语。在网页设计中，使用标记设定标题， 格式为： 标题n 取16的整数值，取1时文字最大，取6时最小，默认为。标题标记41. 桃花庵桃花坞里桃花庵，桃花庵下桃花仙。 唐寅 n从16，越小字越大42用于设置文字的字体，包含设置字体大小、颜色、字体等。格式为： 文本 size属性设置文本字体大小，取值范围为17，size取7时字最大，而中n取1时最大。 color属性设定文本的文字颜色。 十六进制形式设置文字颜色，

8、白色 文字颜色为红色注意： 设置网页所有文字颜色：body标记中text=”颜色”设置。标记43 . 44用于设置在前、后两个段落之间插入一条水平标尺线 width用于设置标尺线的长度 如: 线长为50像素宽 线长为屏幕宽度的50%size属性用于设置标尺线的的粗细color属性用于设置标尺线的颜色align属性用于设置标尺线的位置 如： 右对齐 左对齐 居中（默认）标记45 . 桃花庵桃花坞里桃花庵， 桃花庵下桃花仙。唐寅 . 46.判断正误118>62  17>520011&1001=00111101&1010=1111版权所有©2013年本

9、站即时更新®技术维护特殊字符转义码空格 引号(“”)"小于()>版权号( )©特殊符号47桃花庵桃花坞里桃花庵，桃花庵下桃花仙。唐寅其他标记48设计内容帮助热线页面设计帮助热线页面设计站内地图页面设计站内地图页面设计产品展示页面设计产品展示页面设计注册页面设计注册页面设计在线自助页面设计在线自助页面设计49掌握列表标记和超级链接标记及其属性设置50用于表现一些结构明确、层次分明的内容，将其进行顺序排序。列表项为列表中并列的数据 。分为：无序列表和有序列表。51列表用于创建一个无编号的列表。使用标记列表项标记格式为: 列表项 列表项 52无序列表 所学

10、知识文字列表有序无序53无序列表的嵌套用于创建一个标有编号的列表。使用标记可以通过type设定序号种类，方法: type=”1,A,a,i,I”可以通过start设定从任意数字开始序号，方法: start=”n” 其中，n为任意整数。 54有序列表 课前预习 上课 课后复习理论重点任务实施代码 作业网页设计3单元习题网站局部设计55有序列表的嵌套用于超级链接。在网页中通过鼠标单击某些文字或图像找到目标块，即要打开和找到的详细内容或文件、网页、邮箱，称为超级链接。 格式: 文本或图像56标记 超链接练习 查看第5章查看第10章第1章This chapter explains ba bla bla

11、第5章This chapter explains ba bla bla第6章This chapter explains ba bla bla57页内链接任务3-2的实现方法 超链接练习  上一题  下一题58设计内容帮助热线页面设计站内地图页面设计产品展示页面设计 注册页面设计在线自助页面设计59掌握图像标记和滚动标记及其属性掌握图像标记和滚动标记及其属性设置设置60用于实现将一张图片加入到网页中。 格式： 如： 标记61.图文混排 62例题3-13中，图文混排图像和文字同样可以链接，即单击图像则转移到被链接的文本或其他文件。 格式： 如： 单击图像bo

12、ok.gif转移到网页index.html。63图像链接图像链接定义图像热点眏射中的热点区域，即针对一张图片中某个不同形状的区域，而完成的图像热点映射。其与标记一起使用。 格式： 文本shape：用于设置链接的热点区域形状。其值有三种：rect（矩形区域）、poly（多边形区域）和circle（圆形区域）。coordes：用于设置热点区域的坐标值，坐标原点位于图像的左上角。64 标记标记定义客户端的图像热点眏射。 格式： 文本name：用于指定唯一的映射名称。其与img标记中的usemap的值相同时，图片才能实现热点链接。 65 标记标记用于控制文字或图像移动的标记。格式：滚动内容direct

13、ion: 控制移动方向,可取“left”, “right”, “up”, “down”四个值，behavior: 移动方式,可取“scroll”(循环移动), “slide”(只走一圈), “alternate”(来回移动) 。 66标记标记滚动练习 67设计内容帮助热线页面设计站内地图页面设计产品展示页面设计注册页面设计在线自助页面设计68掌握表单各元素的加入及其属性设置掌握表单各元素的加入及其属性设置69定义表单的开始和结束位置。表单元素实现收集并发送用户信息，提交到服务器上的应用程序中处理。所有的表单元素都嵌套在和之间 。 格式： 表单元素70 FORM标记标记表单元素中用得最多的一种元

14、素。格式： type:值为 “text”代表文本框， “password” 代表密码框，“hidden”代表隐藏条目， “checkbox”代表复选框，“radio”代表单选按钮，“submit”代表提交按钮，“reset”代表重置按钮，“button”代表自定义按钮，“image”代表图像按钮，“file”代表文件域。71 标记标记用户登录姓名：密码：72请选择您学习的方式在读走读函授请选择您所要学习的课程HTMLCSSJavaScript您的选择是73用于定义一个下拉菜单或者选项列表。内嵌option标记，创建列表项。格式： 选项 请选择你喜欢的季节：春 夏秋 冬请选择你喜欢的水果：74

15、标记标记苹果香蕉西瓜桔子桃子你喜欢的是： 75用于定义一个可以多行输入文本的文本区。建议:在此填写对网站的建议。76 标记标记用于定义一个标签或标注。for：用于设置快捷键作用于表单字段元素，即将标签绑定到指定的ID表单控件上。redyellowblueyellow77LABLE 标记标记设计内容帮助热线页面设计站内地图页面设计产品展示页面设计注册页面设计在线自助页面设计78掌握掌握FLASH元素引用元素引用79用于调用称为插件的内置程序来播放MP3、MID、WAV、AVI、WMV、MPEG、SWF等多种类型的音频或视频多媒体文件。 HTML4.01并不支持此标记，但大多数浏览器通常是调用插件

16、的内置程序播放多媒体文件。80 标记标记用于定义一个嵌入页面的多媒体或Apple对象。 格式： classid：用于指定浏览器引用播放器的URL，通常是Java类的ID。clsid=D27CDB6E-AE6D-11cf-96B8-444553540000，使用flash播放器播放多媒体文件。clsid=22D6F312-B0F6-11D0-94AB-0080C74C7E95，使用RealPlayer播放器播放多媒体文件。clsid=6BF52A2-394A-11D3-B153-00C04F79FAA6，使用MediaPlayer播放器播放多媒体文件。81 标记标记为嵌入对象提供参数的标记。须在

17、标记内使用才能提供一个参数。 82 标记标记项目四 网站的测试与发布83设计内容站点测试网站发布网站维护网站推广84站点测试85明确测试内容。掌握测试方法。测试内容和方法兼容性测试查出文档中是否含有浏览器不支持的标记或属性。“文档工具栏” 的“检查页面”中的下拉菜单 “设置”选项，选择检测浏览器检测。站点范围内的链接测试 为了避免URL地址可以对每个页面进行检查选择菜单栏中的“文件”“检查页”“链接”菜单，“链接检查器”面板中查看结果。网页验证测试验证当前文档或选定的标记、替代文本、无标题文档、代码中存在标记错误或语法错误。网页的下载速度测试根据页面中的所有链接对象来检测下载速度。86设计内容

18、站点测试网站发布网站维护网站推广87网站发布88明确发布方法。掌握发布步骤。发布方法与步骤域名与空间申请免费域名空间收费域名空间 通过提供域名和虚拟主机服务的公司三级审核、完成备案、登记到域名。远程站点信息设置做友情链接和营销策划的合作伙伴来推广。文件上传网站发布形式站点管理器上传文件89设计内容站点测试网站发布网站维护网站推广90网站维护91掌握维护内容与方法。维护内容和方法上传和下载从远程服务器中下载文件，只需单击“文件”面板中的“获取文件”按钮 操作完成。存回和取出在选择FTP选项，选中“启用存回和取出”复选框激活“存在和取出”功能。同步更新单击“文件”面板上方的同步按钮 ，在“同步文件

19、”对话框中的“同步”下拉列表中选择希望同步的对象并选择同步的方向。92设计内容站点测试网站发布网站维护网站推广93网站推广94熟悉推广方式。推广方法搜索引擎拟定好网站的关键字，成为大众化关键字引擎。网站合作推广做友情链接和营销策划的合作伙伴来推广。BBS论坛推广 寻找访问量大的论坛和博客，发有质量的帖子。网络广告推广常用的广告类型有按键广告、弹出式广告、旗帜广告、浮动广告等。95项目五 网站的版式设计96主要内容首页的基本结构首页的基本结构网站的配色方案 97网页的布局网页的组成元素98国字型 匡字型左右框架型上下框架型封面型首页的布局99页面设计原则导航栏设计网页的布局网页的布局100设计注

20、意网站的风格门户类网站为上网用户提供信息搜索、网站注册、索引、网上导航、网上社区和个人邮件等信息，并进行分类、整合服务的站点。企业类网站提供商务资讯，展示企业形象。娱乐类网站 此类网站主要是指吃、穿、住、行等时尚休闲生活类网站。101休闲类网站吃、穿、住、行等时尚休闲生活类网站。文化类网站主要包括文化团体、出版发行、网上教育和院校介绍等网站。功能类网站 主要包含搜索引擎，使用特有的程序把因特网上的所有信息归类102主要内容首页的基本结构网站的配色方案网站的配色方案 103色彩基础色彩的HSB模式将颜色分为色相、饱和度、明度三个要素。色相 也称色调，指颜色的种类和名称、相貌。三原色三间色基本色饱

21、和度：色彩的鲜艳度明度：色彩的亮度104不同的颜色具备不同的象征性，会给浏览者不同的心理感受。 黄色-具有愉快，希望，智慧和轻快的个性，它的明度最高。 橙色-具有轻快，欢欣，热烈，温馨，时尚的效果，是快乐、喜悦、能量的色彩。 红色-是一种激奋的色彩，能使人产生冲动，愤怒，热情，活力的感觉。 绿色-介于冷暖两中色彩的中间，是一种柔顺、恬静、满足、优美的颜色。 105色彩基础蓝色-是最具凉爽，清新，专业的颜色，提供一个深远、广埔、平静的空间。灰色-具有中庸，平凡，温和，谦让，中立和高雅的感觉。 黑色-具有深沉，神秘，寂静，悲哀，压抑的感受。白色-具有洁白，明快，纯真，清洁的感受。106主色调页面色

22、彩的主要色调、总趋势，其他配色不能超过该主要色调的视觉面积。辅色调仅次与主色调的视觉面积的辅助色，是烘托主色调、支持主色调、起到融合主色调效果的辅助色调。点睛色在小范围内点上强烈的颜色来突出主题效果，使页面更加鲜明生动。背景色 衬托环抱整体的色调，协调、支配整体的作用。107网页色调近似色对比色分离补色108常见的配色方案用一种颜色调整透明度或者饱和度用两种色彩选择对比色用同一色系 用一个感觉的色彩调和109色彩搭配技巧首页效果图设计110项目六 服务中心栏目设计 111设计内容用户问卷调查页面设计服务中心栏目页面设计112掌握表格、行、列的标记与属性的使用方法掌握表格、行、列的标记与属性的使

23、用方法113用于创建一个表格。 格式： 文本表格内有行标记，用于定义表格的一行。格式： 行标记中有列标记，用于定义表格某行中的一个单元格。格式： 单元格内容114标记 单元格内容 基本语法115列标题标记。用于表的第一行或第一列加表头，字为醒目的粗体且居中。格式： 116标记表题标记。用于表格的内容声明。 格式： 表题117标记我最喜欢的相片118例题6-1中，创建一个有图像和浏览提示的表如何使用表格属性成绩单语文数学英文808885 119例题6-3中，创建一个边框异形的表如何使用表格属性 星期一星期二星期三星期四星期五上午第一二节数学英语数学英语哲学第三四节英语计算机计算机&nb

24、sp;计算机120如何使用表格属性例题6-5中，创建一个行列有合并的表表格的嵌套处理如果要做复杂一点的表格或是用表格来进行布局页面，需要用上表格的嵌套。嵌套的基本原则：嵌套的子表格一定是放在这对标记里。121 嵌套的表格 表项1 子表项1子表项2 子表项3子表项4 表项n 122设计内容用户问卷调查页面设计服务中心栏目页面设计123掌握分析和处理网页布局的方法与表格的嵌套124在网页中，为了让网页更加生动、美观，需做了很多的分区处理外观。从结构的角度来考虑一个Web页面，可看成为一个大表格，将整个页面划分为若干个区，成为表中的每个单元格或多个单元格；然后再在各个区域中填充具体的页面内容，当内容

25、较负责时可嵌套表，这样就可以来完成一个页面的规划和实现了。 125页面布局方法网页布局的实现126实现方法一127实现方法二128模板是一种特殊类型的文档，用于设计锁定的页面布局，形成统一结构与外观的网站。模板可以批量制作网页。129模版模板的基本处理新建编辑保存应用管理模板的编辑处理可编辑区可选区可重复区130模版的基本操作项目七 新闻中心栏目设计131设计内容新闻中心栏目布局设计新闻中心导航132掌握用框架布局页面的方法，理解框架与框架集掌握用框架布局页面的方法，理解框架与框架集133在一个文档内定义一组框架结构的HTML网页，实现在一个浏览器窗口显示多个HTML页面，在一个框架中可显示多

26、个HTML页面。框架技术是框架的组合，即框架集。框架布局网页的基本原理框架布局网页的基本原理134 . 语法语法135rows属性 垂直方向分割浏览器窗口，分隔的框架数目以逗号的个数加1来确定。参数可以是数字(单位为像素)，或百分比或剩余值(*)，各值间用逗号分开。如： 分成上中下三个窗口，分别为50像素，80像素,60像素 分成三个窗口，左窗20%，右窗20%，剩余的中间窗 分成三个窗口，左窗1/6，右窗2/6，剩余的3/6cols属性 水平方向分割浏览器窗口的属性的属性136 137如何水平拆分网页左右分割窗口 上下分割窗口 嵌套分割窗口（既有左右分割又有上下分割） 框架集框架集的分割的分

27、割138 如何实现窗口嵌套如何实现窗口嵌套139要在一个框架中使用链接以打开网页显示在另一个框架中，必须设置链接目标，设为目标框架的名称即name属性的值。设置target属性可以使链接页面在指定打开的框架中显示。带链接的框架设置带链接的框架设置140 如何使用如何使用NAMENAME属性属性141a.html的链接target为mainFrame例题7-1中，上框架中的文字链接选中显示的页面显示在下框架中设计内容新闻中心栏目布局设计新闻中心导航142掌握浮动框架的使用方法掌握浮动框架的使用方法143浮动框架标记。在浏览器窗口中嵌入一个窗口以显示另一个页面。格式：144标记标记产品1 

28、;   产品2     产品3    产品4    产品5145例题7-1中，通过文字链接在指定位置显示对应网页内容如何使用浮动框架如何使用浮动框架项目八 企业关注栏目设计146设计内容企业介绍页面样式引用企业荣誉页面设计147掌握各样式的引用掌握各样式的引用148网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。 结构化标准（主要包括HTML和XML，用于在网页中加入各类元素）、表现标

29、准（主要包括CSS，用于效果优化和布局网页元素）、行为标准（主要包括对象模型、ECMAScript等，用于实时对用户操作进行响应和完成网页特效）。WEBWEB标准标准149网页Cascading Style Sheets的缩写，中文译为“层叠样式表”。特点：简化网页的格式代码。调整CSS样式表文件就可以改变整个站点的风格特色CSSCSS150基本语法结构基本语法结构151CSS样式定义由两部分组成：选择器和声明。格式：选择符（selector） 属性（property）: 属性值（value）选择器是样式的名称（如TR或P），而声明则用于定义样式元素。声明由两部分组成：属性和值。全体选择符 全

30、体选择符用一个“*”来表示，表示所选定范围内的所有元素。格式： *属性:属性值; 如：*font-size:12pxHTML标签选择器 针对HTML标记的样式设置。格式：标签名属性:属性值; 如：pcolor:red;CSSCSS选择符选择符152类选择符需要有相同样式规则的不同元素进行类样式设定，在使用时需要用class=”类名”来进行引用。格式： .类名属性:属性值;id选择器用来对单一元素进行单独的样式定义，在使用时需要用id=”id名”来进行引用。格式：#id名属性:属性值;CSSCSS选择符选择符153伪类选择符对相同一个HTML元素的各种状态和其包含的部分内容进行定义的一种方法。格

31、式：HTML元素：伪元素属性:值锚的伪类四类：a:link（未访问的状态）、a:visited（已访问的状态）、a:hover（鼠标停留的状态）、a:active（成为焦点的状态）。CSSCSS选择符选择符154选择符组将相同属性和值的几个选择符组合起来，用“，”符号分隔。如：p h1color:#ff0000;包含选择符对某对象中的子对象进行样式指定。其间用空格隔开。如：ul lifont-weight:bolder; CSSCSS选择符选择符155CSSCSS的的应用应用外部样式表将样式表保存到一个样式表文件，在网页中用标记链接的方式，样式表扩展名为.css。格式：156CSSCSS的应用

32、的应用内部样式表在对单个网页文档进行样式处理时，头部使用标记对。格式： hrcolor:#abefc6; 157CSSCSS的应用的应用内联样式仅需要在一个因素上应用一次时可使用内联样式。格式： 4、输入样式表指将一个外部样式表文件（CSS文件）输入到另外一个CSS文件，用import导入。格式： 158设计内容企业介绍页面样式引用企业荣誉页面设计159掌握各样式的设置掌握各样式的设置160字体属性（见表8-1）文本属性（见表8-2）背景属性（见表8-3）边框属性（见表8-4）边距属性（见表8-6）布局属性（见表8-7）列表属性（见表8-9）161常用的常用的CSSCSS属性属性 h1 hei

33、ght:100px;width:500px; background-image:url(imgs/1.jpg); p font-size:22px;background-color:#9ef362; 162例题8-2中，设置背景和文字等属性如何使用如何使用CSSCSS属性属性设置标记区域和背景设置标记区域和背景样式表的继承原则样式表的就近原则样式表的优先原则从高到低：行内样式、内部样式、链入外部样式、导入外部样式和默认浏览器样式163样式规则样式规则项目九 产品中心栏目设计164设计内容产品选项卡销售产品页面布局165掌握盒子模型的定位属性掌握盒子模型的定位属性166网页中的所有元素对象都被放

34、在一个盒子中。所有元素都可以拥有像盒子一样的外形和平面空间，包含有边界、边框、填充、内容区域等。盒子模型是CSS布局的基础，其规定了网页元素如何显示以及元素间的相互关系。盒子模型盒子模型167盒子在网页中所占空间的如何计算？一个网页元素实际宽度为： margin-left+border+padding-left+width+padding-right+border-right +margin-right盒子模型的计算盒子模型的计算168盒子的基本定位盒子的基本定位169网页中的元素分为：行内元素 如：span、a、label块级元素（独立成行） 如：div 、li 、hn盒子的浮动盒子的浮动1

35、70通过对float属性的设置，可对块级元素进行浮动，使元素脱离标准位置，且其后序元素会自动向前流动。设置方法：float: left | right第一块DIV浮动前后的区别见右图若前面的盒子已浮动，而本盒子需要单独成行则使用clear属性清除浮动属性。盒子定位的方法有四种。定位属性POSITION格式：position: static| absolute | fixed | relative static：默认属性值，指盒子按照标准流（包括浮动方式）进行布局。relative：相对定位，盒子相对于其在标准流中的位置偏移，absolute：绝对定位。盒子位置以其最近的父容器为基准进行偏移。f

36、ixed：固定定位，盒子其以浏览器窗口为基准进行定位。盒子的定位设置盒子的定位设置171设计内容产品选项卡销售产品页面布局172掌握DIV布局方法173掌握DIV布局方法174DIV+CSS布局网页网站中常用的网页布局采用DIV+CSS，先用DIV将页面内容从整体上进行结构划分，再用CSS将各结构分块在网页中进行定位和进行样式设置。一行多列布局一行一列布局、一行两列布局、一行三列布局设置方法 布局可以分成固定宽度和自适应宽度两种模式固定宽度是指块宽度的属性值是固定像素自适应是指宽度随浏览器的变化而发生变化175一列布局在HTML文档的标记对之间的相应位置，输入CSS样式代码固定布局，同时在HT

37、ML文档中加入对应CSS中的同选择符名的DIV。固定宽度#div1 background-color: #CCCCCC; border:3px solid #ff3399; width:300px; height:200px; 1列固定宽度，要设置像素值。176一列布局一列自适应宽度#div1 background-color: #CCCCCC; border:3px solid #ff3399; width:60%; height:70%; 177178两列布局179两列布局两列布局180三列布局181182三列布局三行三列布局183184三行三列布局项目十 广告服务实现185设计内容弹出式

38、广告服务广告详情186掌握JAVASCRIPT概述及基本语法和WINDOW对象制作首页打开后的弹出式广告功能187什么是JAVASCRIPT JavaScript是网景(Netscape)公司开发的一种基于客户端浏览器、面向对象、事件驱动式的网页脚本语言，编写嵌入在网页文档中的程序。JavaScript能实现网页 中的对象对一张图片、一个DIV等的即时刷新，动态操作DOM。188什么是JAVASCRIPTJavaScript实现由用户端对网页的操作，以多种方式更改页面或引发某些任务的是事件处理机制，称为事件驱动。事件驱动实现与Web客户实现交互，完成某些特殊功能 。189JAVASCRIPT的

39、基本语法脚本的基本结构var x=8;alert(x); body部分的内容190 JavaScript保留字 在JavaScript中定义了40多个关键字，不能作为变量名、函数名、方法名和对象名。常用保留字如表所示。内部的函数名和对象名也是保留字。变量的定义191JAVASCRIPT的使用直接嵌入在HTML的标记中。var x=8; alert(x);独立编写JavaScript文件。如：作为属性值。如： 192变量的声明和赋值定义变量var count; /var 用于声明变量的关键字赋值count = 5;同时声明和赋值变量var count = 10;193运算符运算符对一个或多个变量

40、或值（操作数）进行运算，并返回一个新值根据所执行的运算，运算符可分为以下类别：算术运算符 +、-、 * 、 / 、%、+、-、-(求反)比较运算符=、!=、=、=逻辑运算符 &、|、！194程序结构if条件语句switch多分支语句for、while循环语句if(条件) /JavaScript代码;else /JavaScript代码;switch (表达式) case 常量1 : JavaScript语句1; break; case 常量2 : JavaScript语句2; break; . default : JavaScript语句3; for(初始化; 条件; 增量) 语句集; whi

41、le(条件) 语句集;195函数 将一个大的程序分解成小程序块独立起来，这些独立后的小程序块完成各自的特定功能，即是函数。196格式： function 函数名（形式参数表）语句块； 说明：function为关键字，表示定义一个函数，其后跟着的是定义的函数的函数名，也是调用时的名字，其后跟着的小括号中形参列表需要以“,”隔开。函数定义直接给出函数名，并加上参数即可。如： number=square(10); 函数调用197基本的用户提示向用户发出警告确认用户的选择提示用户输入 Alert(“提示”); confirm(“提示”); prompt(“提示输入”);198例题10-4中，实现问卷调

42、查199如何使用无参函数 question(); function question() var m=prompt(能参与问卷调查吗？您是老顾客吗？请选填1/0,0); if(m=1) alert(欢迎您的再次光临); 定义有参函数function compute(op) var num1,num2; num1=prompt(“输入第一个数”); num2=prompt(“输入第二个数”); if (op=+) alert（num1+num2 ); if (op=-) alert（num1-num2 ); if (op=*) alert（num1*num2 ); if (op=/ & num2

43、!=0) alert（num1/num2 ); 定义有参函数compute( )，完成计算功能，op参数代表运算符号。 200能不能得到正确结果？注意使用parseInt (String)。 习题10-7：实现输入两个操作数进行加、减、乘、除运算（类似计算器）调用有参函数调用有参函数201类型转换parseInt (String) 将字符串转换为整型数字 如: parseInt (“86”)将字符串“86”转换为整型值86parseFloat(String) 将字符串转换为浮点型数字 如: parseFloat (“34.45”)将字符串“34.45”转换为浮点值34.45202什么是DOM

44、DOMDocument Object Model ,它是W3C国际组织的一套规范，称为文档对象模型，是一个XML层级结构的直观表现，其定义了访问HTML文档对象的一套属性、方法和事件 。203DOM对象204常用的事件WINDOW对象常用的事件名称名称 说明说明 onLoad浏览器窗口装载事件onunload浏览器窗口卸载事件205常用的方法WINDOW对象常用的方法名称名称 说明说明 alert ()显示具有确认按钮的提示对话框confirm()显示具有确认和取消按钮提示对话框open ()打开一个新的浏览器窗口close ( )关闭当前窗口prompt()显示一个用户可以输入信息的对话框s

45、etTimeout() 设置浏览器过多长时间调用指定的程序206如何使用WINDOW对象 function openwin() var name=prompt(请输入会员姓名：,张三); win=window.open(new.html,_blank , width=500, height=200); if(win!=null&!win.closed) win.document.write(您好，,name,!,欢迎光临本网站!); 207 例题10-5中，会员名输入后友好提示WINDOW对象常用的属性名称名称 说明说明 status 设置和返回窗口状态栏中当前的文本内容closed返回win

46、dow对象的窗口是否关闭的ture或false值opener 返回打开当前窗口的父窗口对象常用的属性208如何使用WINDOW对象 var str=欢迎光临本网站！; var flag=0; function showstr() flag=!flag; if(flag) window.status=str; else window.status=*欢迎光临本网站！*; setTimeout(showstr(),5000); 209 例题10-6中，状态栏显示内容设计内容弹出式广告服务广告详情（折叠式菜单的实现）210掌握DOCUMENT对象和WINDOW对象的子对象 211DOCUMENT对象

47、常用的属性常用的方法名称名称 说明说明bgColor Document 对象的背景色 名称名称 说明说明getElementByID( )根据HTML元素指定的ID，返回id值为于指定参数的HTML元素所对应的对象getElementsByName( )根据HTML元素指定的name，返回name值为指定参数的所有HTML元素对应的对象数组。212function usercookie() var name=prompt (请输入您的用户名,游客); document.getElementById(div1).innerHTML=+str1+; 如何使用DOCUMENT对象213例题10-9，

48、显示对输入用户的友好文字欢迎光临！WINDOW对象的子对象frames对象 ：框架对象location对象：地址对象screen对象：屏幕对象history 对象：历史对象navigatior对象：浏览器对象event对象 ：事件对象214如何使用WINDOW子对象任务10-2中，广告报价的选择性显示215普通会员报价 1200元/年216如何使用WINDOW子对象如何使用WINDOW子对象function expand()var aId,src1,aElement;src1=window.event.srcElement;if(src1.className=outline)aId=src1.

49、id+c;aElement=document.all(aId);if(aElement.style.display=none)aElement.style.display=;else aElement.style.display=none; 217项目十一 动态更新实现218设计内容网站时间更新产品图片幻灯播放219掌握JAVASCRIPT的内置对象制作网站在时间不同的换肤功能220MATH对象Math对象的常用方法方法说明 floor返回小于等于数字的最大整数，即数字向下取整ceil返回大于等于数字的最小整数，即数字向上取整random返回介于0-1之间的随机小数round返回与给出的数值表

50、达式最接近的整数random和round方法结合使用，可产生一定范围的随机整数。若要产生1到30之间的随机整数则写为：Math.round(Math.random() * (30-1) +30221如何MATH对象var go,x,y,result,answer; do x=Math.floor(Math.random()*90)+10; y=Math.floor(Math.random()*90)+10;result=+x+y;answer=prompt(请输入验证码：+x+y);if(answer=result) go=confirm(验证码正确，可进入本网站下载！); if(go) wi