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

项目一网站规划设计1项目一网站规划设计1设计内容网站开发基础网站总体规划2设计内容网站开发基础2网站开发基础3明确课程学习目标。掌握与网站相关的基本概念。掌握静态网页和动态网页的区别。网站开发基础3明确课程学习目标。网页设计制作相关术语术语各专业、行业的专门用语。在网页设计制作中，经常要使用的术语可以包含两部分：网络相关术语网站相关术语4网页设计制作相关术语术语4网络相关术语InternetInternet是覆盖全球的信息基础设施之一，其将全球范围内不同国家、不同区域的众多资源连接起来，为用户提供一个庞大的远程计算机网络。WWW全称WorldWideWeb，简称Web，中文称万维网，是基于超文本的信息查询和信息发布的系统。5网络相关术语Internet5网络相关术语IP地址如同每个人有唯一的身份证号一样，每台与Internet相连的计算机在唯一的网络地址称为IP地址。如：12域名用由字母和数字组成的符号来代替将IP地址，以方便用户记忆站点的字符型地址，称为域名。如：WWW.6网络相关术语IP地址6网站相关术语URLURL的中文全称为统一资源定位符，是一种在WWW中浏览超文本文档时保证准确定位的机制。可指向本地计算机上的某个文件，也可指向Interne的一个网页或其他资源的位置。URL一般格式：访问协议：//主机域名或IP地址[:端口号]/路径/文件名如：、/14/1018/12/A8RE4UDO00014AED.html7网站相关术语URL7网站相关术语静态网页纯粹的HTML文件，每个页面都有一个固定的URL，以.htm、.html、.shtml、.xml等为后缀的文档。其可分为:纯静态网页包含HTML标记、文本、声音、图像、动画、电影以及客户端ActiveX控件的网页，但不包含任何脚本，其内容由开发人员编辑好后不会自行改动的网页。客户端动态网页包含了可在客户端浏览器中执行的脚本程序，并且可以改变网页中各种标记内容的静态网页。8网站相关术语静态网页8网站相关术语动态网页在服务器端运行的程序、网页和组件等。9网站相关术语动态网页9网站开发语言和软件网页制作语言HTMLXMLASPASP.NETPHPJSP网页制作软件DreamweaverFrontPageFlashPhotoshop10网站开发语言和软件网页制作语言10设计内容网站开发基础网站总体规划11设计内容网站开发基础11网站总体规划12熟悉网站建设与网页制作的规划构建部署过程。完成网站的总体功能规划。网站总体规划12熟悉网站建设与网页制作的规划构建部署过程。网站开发流程前期的定位网站目标定位网站风格定位网站创新与创意网站内容与目录结构规划中期设计与制作效果图制作软件设计制作网页测试网站的调试与维护13网站开发流程前期的定位13网站功能规划需求分析网站定位内容规划14网站功能规划需求分析14企业网站设计说明15企业网站设计说明15思考：你用过哪几种浏览器？说说WWW技术原理。16思考：你用过哪几种浏览器？16解答：浏览器浏览器是指可以显示网页服务器或者文件系统的HTML文件内容，并让用户与这些文件交互的一种软件。常用的浏览器有：IEFirefoxOperaMaxthon（IE内核）谷歌浏览器17解答：浏览器17解答WWW技术WWW结构——“客户机/服务器”结构。网页存放在被称为Web服务器(WebServer)的计算机上，等待用户访问。18解答WWW技术18项目二网站搭建与管理19项目二网站搭建与管理19设计内容站点搭建站点和站点文件管理20设计内容站点搭建20站点搭建21熟悉DreamweaverCS6的工作环境和各窗口的作用。掌握DreamweaverCS6设置首选参数的方法。掌握DreamweaverCS6搭建站点的方法。站点搭建21熟悉DreamweaverCS6的工作环境和各Dreamweaver在网站设计中的作用站点的搭建网页的设计网站的模版站点的发布维护实现网站的页面设计和站点的管理22Dreamweaver在网站设计中的作用站点的搭建22DWCS6的工作界面23DWCS6的工作界面23DWCS6的工作界面24主要为标题与菜单栏、文档工具栏、文档窗口、状态栏、属性面板等，右侧是浮动面板组DWCS6的工作界面24主要为标题与菜单栏、文档工具栏、文DWCS6的工作界面25文档工具栏DWCS6的工作界面25文档工具栏DWCS6的工作界面26文档工具栏DWCS6的工作界面26文档工具栏DWCS6的首选参数设置27常规首选参数设置DWCS6的首选参数设置27常规首选参数设置DWCS6的首选参数设置28新建文档设置DWCS6的首选参数设置28新建文档设置DWCS6的首选参数设置29字体参数设置DWCS6的首选参数设置29字体参数设置DWCS6中的站点搭建30本地站点搭建DWCS6中的站点搭建30本地站点搭建DWCS6中的站点搭建31远程站点搭建DWCS6中的站点搭建31远程站点搭建设计内容站点搭建站点和站点文件管理32设计内容站点搭建32掌握网页设计过程中站点的创建与管理方法33掌握网页设计过程中站点的创建与管理方法33站点基本操作打开站点添加站点删除站点修改站点34站点基本操作打开站点34站内文件管理新建文件和文件夹文件/文件夹的基本操作文件新建文件打开与关闭文件的预览35站内文件管理新建文件和文件夹35项目三网站页面设计36项目三网站页面设计36设计内容帮助热线页面设计站内地图页面设计产品展示页面设计注册页面设计在线自助页面设计37设计内容帮助热线页面设计37掌握网页文字的处理中的字体标记、水平线标记、段落标记、换行标记、分隔标记等标记及其属性设置。

38掌握网页文字的处理中的字体标记、水平线标记、段落标记、换行标HTML是HyperTextMarkupLanguage的缩写，是超文本标记语言，其通过标记符描述网页中需显示的文本、图片、声音、多媒体等，也通过标记符形成页面和实现页面之间的链接。文件结构：HTML39HTML是HyperTextMarkupLanguage三种基本格式：①<标记名>文本</标记名>②<标记名属性名1=”值1”属性名2=”值2”…>文本</标记名>（前两种为双标记）③<标记名>（单标记）HTML文档的基本格式40三种基本格式：HTML文档的基本格式40标题是一篇文章或一段文本的题目，是以某种方式被加强、被突出的词组或短语。在网页设计中，使用<Hn>标记设定标题，格式为：

<Hn>标题</Hn>n取1～6的整数值，取1时文字最大，取6时最小，默认为<H6>。标题标记41标题是一篇文章或一段文本的题目，是以某种方式被加强、被突出的…….<h2align="center">桃花庵</h2><h3align="center">桃花坞里桃花庵，</h3><h4align="center">桃花庵下桃花仙。</h4><h5align="center">[唐寅]</h5>……n从1－6，越小字越大42…….n从1－6，越小字越大42用于设置文字的字体，包含设置字体大小、颜色、字体等。格式为：

<fontsize=数字color=颜色face=字体>文本</font>size属性设置文本字体大小，取值范围为1～7，size取7时字最大，而<hn>中n取1时最大。

color属性设定文本的文字颜色。<fontcolor=”#ffffff”>十六进制形式设置文字颜色，白色</font><fontcolor=”red”>文字颜色为红色</font>注意：设置网页所有文字颜色：body标记中text=”颜色”设置。<font>标记43用于设置文字的字体，包含设置字体大小、颜色、字体等。格式为：<fontsize=“+2”color=“red”face=“隶书”> ...</font>44<fontsize=“+2”color=“red”f用于设置在前、后两个段落之间插入一条水平标尺线width用于设置标尺线的长度如:<hrwidth=50>线长为50像素宽

<hrwidth=50%>线长为屏幕宽度的50%size属性用于设置标尺线的的粗细color属性用于设置标尺线的颜色align属性用于设置标尺线的位置如：<hralign=”right”>右对齐

<hralign=”left”>左对齐

<hralign=”center”>居中（默认）<HR>标记45用于设置在前、后两个段落之间插入一条水平标尺线<HR>标记 ...<h2>桃花庵</h2><hrsize="2"width="300"align="left"color="pink"/>桃花坞里桃花庵，<br/>桃花庵下桃花仙。<p>[唐寅]</p> ...46 ...46<h1>判断正误</h1><p>118>62 17>52<br/>0011&1001=0011<br/>1101&1010=1111<br/></p><address>版权所有©2013年</address><address>本站即时更新®技术维护</address>……特殊符号47特殊符号47<bodybgcolor="lightblue"><center><h2><fontcolor="orange">桃花庵</font></h2><hrsize="2"width="300"color="pink"/><p><fontcolor="blue">桃花<big>坞</big>里桃花庵，<br/>桃_花庵下桃^花仙。<br/></font></p><hrsize="2"width="300"color="pink"/><p>[唐寅]</p></center></body>其他标记48<bodybgcolor="lightblue">其他标设计内容帮助热线页面设计站内地图页面设计产品展示页面设计注册页面设计在线自助页面设计49设计内容帮助热线页面设计49掌握列表标记和超级链接标记及其属性设置50掌握列表标记和超级链接标记及其属性设置50用于表现一些结构明确、层次分明的内容，将其进行顺序排序。列表项为列表中并列的数据。分为：无序列表和有序列表。51列表用于表现一些结构明确、层次分明的内容，将其进行顺序排序。51用于创建一个无编号的列表。使用标记<ul></ul>列表项标记<li>格式为:

<ul><li>列表项

<li>列表项

…</ul>52无序列表用于创建一个无编号的列表。使用标记<ul></ul>52无序<h3><i>所学知识</i></h3><ultype="circle"><li>文字</li><litype="disc">列表<ul><litype="square">有序</li><li>无序</li></ul></li></ul>53无序列表的嵌套<h3><i>所学知识</i></h3>53无序列表的嵌套用于创建一个标有编号的列表。使用标记<ol></ol>可以通过type设定序号种类，方法:

type=”1,A,a,i,I”可以通过start设定从任意数字开始序号，方法:

start=”n”

其中，n为任意整数。

54有序列表用于创建一个标有编号的列表。使用标记<ol></ol>54有<ol><li>课前预习</li><li>上课</li><li>课后复习<oltype="i"><li>理论重点</li><li>任务实施代码</li></ol></li><li>作业<oltype="A"><li>网页设计3单元习题</li><li>网站局部设计</li></ol></li></ol>55有序列表的嵌套<ol>55有序列表的嵌套用于超级链接。在网页中通过鼠标单击某些文字或图像找到目标块，即要打开和找到的详细内容或文件、网页、邮箱，称为超级链接。格式:

<ahref=“url”target=“目标窗口”>文本或图像</a>56<a>标记用于超级链接。在网页中通过鼠标单击某些文字或图像找到目标块，

<h1>超链接练习</h1>

<p><ahref="#C5">查看第5章</a><ahref="#C10">查看第10章</a></p><h2>第1章</h2><p>Thischapterexplainsbablabla</p>……………………<h2><aname="C5">第5章</a></h2><p>Thischapterexplainsbablabla</p><h2>第6章</h2><p>Thischapterexplainsbablabla</p>……57页内链接任务3-2的实现方法<h1>超链接练习</h1>57页内链接任务3-2的实现方

<h1>超链接练习</h1><hrsize="1“color="#336699">  <ahref="例3-11.html"target=”_blank”>上一题</a>  <ahref="例3-13.html"target=”_self”>下一题</a>58<h1>超链接练习</h1>58设计内容帮助热线页面设计站内地图页面设计产品展示页面设计注册页面设计在线自助页面设计59设计内容帮助热线页面设计59掌握图像标记和滚动标记及其属性设置60掌握图像标记和滚动标记及其属性设置60用于实现将一张图片加入到网页中。

格式：

<imgsrc=”图像文件名”alt=”图像文本性说明”align=”位置参数”>如：

<imgsrc=”a.gif”width=”20%”height=”20”><IMG>标记61用于实现将一张图片加入到网页中。<IMG>标记61….<BODY><h2align="center">图文混排</h2><hrsize="1"color="#336699"><imgsrc="imgs/img1.jpg"width="135"height="75"align="middle"alt=”可爱的图片”/></BODY>……62例题3-13中，图文混排….62例题3-13中，图文混排图像和文字同样可以链接，即单击图像则转移到被链接的文本或其他文件。格式：

<ahref=“被链接的文件名”><imgsrc=“图像文件名”></a>如：<ahref=“index.html”><imgsrc=“book.gif”></a>

单击图像book.gif转移到网页index.html。63图像链接图像和文字同样可以链接，即单击图像则转移到被链接的文本或其他定义图像热点眏射中的热点区域，即针对一张图片中某个不同形状的区域，而完成的图像热点映射。其与<map>标记一起使用。

格式：<areashape=”形状”coordes=”坐标”href=”URL”target=”显示窗口”>文本</area>shape：用于设置链接的热点区域形状。其值有三种：rect（矩形区域）、poly（多边形区域）和circle（圆形区域）。coordes：用于设置热点区域的坐标值，坐标原点位于图像的左上角。64<area>标记定义图像热点眏射中的热点区域，即针对一张图片中某个不同形状的定义客户端的图像热点眏射。

格式：

<mapname=”名字”>文本</map>name：用于指定唯一的映射名称。其与img标记中的usemap的值相同时，图片才能实现热点链接。65<map></map>标记定义客户端的图像热点眏射。65<map></map>标记用于控制文字或图像移动的标记。格式：<marqueedirection="方向“behavior="方式"loop="次数"scrollamount="快慢"scrolldelay="延时">滚动内容</marquee>direction:控制移动方向,可取“left”,“right”,“up”,“down”四个值，behavior:移动方式,可取“scroll”(循环移动),“slide”(只走一圈),“alternate”(来回移动)。

66<MARQUEE>标记用于控制文字或图像移动的标记。66<MARQUEE>标记<h2>滚动练习</h2><hrsize=1color="pink"><marqueebehavior="alternate"direction="left"width="90%"height="120px"scrolldelay="500"hspace=”20px”loop=”3”bgcolor="#336699"><imgsrc="imgs/tu1.jpg"width="58"height="58">…………</marquee>67<h2>滚动练习</h2>67设计内容帮助热线页面设计站内地图页面设计产品展示页面设计注册页面设计在线自助页面设计68设计内容帮助热线页面设计68掌握表单各元素的加入及其属性设置69掌握表单各元素的加入及其属性设置69定义表单的开始和结束位置。表单元素实现收集并发送用户信息，提交到服务器上的应用程序中处理。所有的表单元素都嵌套在<form>和</form>之间。

格式：<form>

表单元素</form>70<FORM>标记定义表单的开始和结束位置。70<FORM>标记表单元素中用得最多的一种元素。格式：<inputtype=“元素类型”>

type:值为

“text”代表文本框，“password”代表密码框，“hidden”代表隐藏条目，

“checkbox”代表复选框，“radio”代表单选按钮，“submit”代表提交按钮，“reset”代表重置按钮，“button”代表自定义按钮，“image”代表图像按钮，“file”代表文件域。71<input>标记71<input>标记<h2>用户登录</h2><hrsize=1color="pink"><formmethod="get"name="myform">姓名：<inputtype="text"name="text1"size="20"maxlength="25"><p>密码：<inputtype=“password”name=“psw1”size=“20”maxlength=“25”></p></form>72<h2>用户登录</h2>72<form><b>请选择您学习的方式</b><br><inputtype="radio"checkedname="r"value="在读">在读<inputtype="radio"name="r"value="走读">走读<inputtype="radio"name="r"value="函授">函授<p><b>请选择您所要学习的课程</b><br><inputtype="checkbox"value="yes"name="HTML"checked>HTML<br><inputtype="checkbox"value="yes"name="CSS">CSS<br><inputtype="checkbox"value="yes"name="JavaScript">JavaScript</p><p><b>您的选择是</b></p><inputname="textfield"type="text"id="textfield"value=""maxlength="25"/></form>73<form>73用于定义一个下拉菜单或者选项列表。内嵌option标记，创建列表项。格式：

<selectname=”名称”size=”选项数”multiple=”滚动方式”disabled=”不可控”><option>选项</option>……</select><form><h2>请选择你喜欢的季节：</h2><selectname="myseason"onChange="myselect1()"><option>春<option>夏<option>秋<option>冬</select><br/><br/><h2>请选择你喜欢的水果：</h2>74<select>标记用于定义一个下拉菜单或者选项列表。内嵌option标记，创建<selectname="myfruit"multiple><optionvalue="苹果">苹果</option><optionvalue="香蕉">香蕉</option><optionvalue="西瓜">西瓜</option><optionvalue="桔子">桔子</option><optionvalue="桃子">桃子</option></select><br/><h2>你喜欢的是：</h2><textareaname="comment"rows=4cols=50></textarea><br><inputtype="button"name="ok"value="提交"onclick=”f()”><inputtype="reset"name="re-input"value="重选">75<selectname="myfruit"multip用于定义一个可以多行输入文本的文本区。<form>建议:<textareaname="propose"cols="20"rows="5"wrap="virtual">在此填写对网站的建议。</textarea></form>76<textarea>标记用于定义一个可以多行输入文本的文本区。<form>76<te用于定义一个标签或标注。for：用于设置快捷键作用于表单字段元素，即将标签绑定到指定的ID表单控件上。<form><labelfor="red">red</label><inputtype="radio"name="likecolor"id="red"/><labelfor="yellow">yellow</label><inputtype="radio"name="likecolor"id="yellow"/><labelfor="blue">blue</label><inputtype="radio"name="likecolor"id="blue"/><labelfor="green">yellow</label><inputtype="radio"name="likecolor"id="green"/></form>77<LABLE>标记用于定义一个标签或标注。<form>77<LABLE>标记设计内容帮助热线页面设计站内地图页面设计产品展示页面设计注册页面设计在线自助页面设计78设计内容帮助热线页面设计78掌握FLASH元素引用79掌握FLASH元素引用79用于调用称为插件的内置程序来播放MP3、MID、WAV、AVI、WMV、MPEG、SWF等多种类型的音频或视频多媒体文件。HTML4.01并不支持此标记，但大多数浏览器通常是调用插件的内置程序播放多媒体文件。<embedwidth=“920"height=“320"src="swf/ad.swf"/>80<embed>标记用于调用称为插件的内置程序来播放MP3、MID、WAV、AV用于定义一个嵌入页面的多媒体或Apple对象。格式：<object首选嵌入对象标记><param为嵌入对象提供参数/><object第一备用嵌入对象标记></object><embed其他备用转换标记></embed></object>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<object>标记用于定义一个嵌入页面的多媒体或Apple对象。81<obje为嵌入对象提供参数的标记。须在标记内使用才能提供一个参数。<embedsrc="imgs/1.avi"width="400"high="300"align="center"autostart="true”loop="true"></embed><objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase="/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"width="76"height="93"><paramname="movie"value="imgs/top.swf"><paramname="quality"value="high"><embedsrc="imgs/top.swf"quality="high"pluginspage="/go/getflashplayer"type="application/x-shockwave-flash"width="76"height="93"></embed></object>82<param>标记为嵌入对象提供参数的标记。须在标记内使用才能提供一个参数。<项目四网站的测试与发布83项目四网站的测试与发布83设计内容站点测试网站发布网站维护网站推广84设计内容站点测试84站点测试85明确测试内容。掌握测试方法。站点测试85明确测试内容。测试内容和方法兼容性测试查出文档中是否含有浏览器不支持的标记或属性。“文档工具栏”的“检查页面”中的下拉菜单“设置”选项，选择检测浏览器检测。站点范围内的链接测试

为了避免URL地址可以对每个页面进行检查选择菜单栏中的“文件”｜“检查页”｜“链接”菜单，“链接检查器”面板中查看结果。网页验证测试验证当前文档或选定的标记、替代文本、无标题文档、代码中存在标记错误或语法错误。网页的下载速度测试根据页面中的所有链接对象来检测下载速度。86测试内容和方法兼容性测试86设计内容站点测试网站发布网站维护网站推广87设计内容站点测试87网站发布88明确发布方法。掌握发布步骤。网站发布88明确发布方法。发布方法与步骤域名与空间申请免费域名空间收费域名空间通过提供域名和虚拟主机服务的公司三级审核、完成备案、登记到域名。远程站点信息设置做友情链接和营销策划的合作伙伴来推广。文件上传网站发布形式站点管理器上传文件89发布方法与步骤域名与空间申请89设计内容站点测试网站发布网站维护网站推广90设计内容站点测试90网站维护91掌握维护内容与方法。网站维护91掌握维护内容与方法。维护内容和方法上传和下载从远程服务器中下载文件，只需单击“文件”面板中的“获取文件”按钮

操作完成。存回和取出在选择FTP选项，选中“启用存回和取出”复选框激活“存在和取出”功能。同步更新单击“文件”面板上方的同步按钮

，在“同步文件”对话框中的“同步”下拉列表中选择希望同步的对象并选择同步的方向。92维护内容和方法上传和下载92设计内容站点测试网站发布网站维护网站推广93设计内容站点测试93网站推广94熟悉推广方式。网站推广94熟悉推广方式。推广方法搜索引擎拟定好网站的关键字，成为大众化关键字引擎。网站合作推广做友情链接和营销策划的合作伙伴来推广。BBS论坛推广

寻找访问量大的论坛和博客，发有质量的帖子。网络广告推广常用的广告类型有按键广告、弹出式广告、旗帜广告、浮动广告等。95推广方法搜索引擎95项目五网站的版式设计96项目五网站的版式设计96主要内容首页的基本结构网站的配色方案97主要内容首页的基本结构97网页的布局网页的组成元素98网页的布局网页的组成元素98国字型匡字型左右框架型上下框架型封面型首页的布局99国字型首页的布局99页面设计原则导航栏设计网页的布局网页的布局100页面设计原则网页的布局100设计注意网站的风格门户类网站为上网用户提供信息搜索、网站注册、索引、网上导航、网上社区和个人邮件等信息，并进行分类、整合服务的站点。企业类网站提供商务资讯，展示企业形象。娱乐类网站此类网站主要是指吃、穿、住、行等时尚休闲生活类网站。101设计注意网站的风格门户类网站101休闲类网站吃、穿、住、行等时尚休闲生活类网站。文化类网站主要包括文化团体、出版发行、网上教育和院校介绍等网站。功能类网站主要包含搜索引擎，使用特有的程序把因特网上的所有信息归类102休闲类网站102主要内容首页的基本结构网站的配色方案103主要内容首页的基本结构103色彩基础色彩的HSB模式将颜色分为色相、饱和度、明度三个要素。色相

也称色调，指颜色的种类和名称、相貌。三原色三间色基本色饱和度：色彩的鲜艳度明度：色彩的亮度104色彩基础色彩的HSB模式104不同的颜色具备不同的象征性，会给浏览者不同的心理感受。黄色具有愉快，希望，智慧和轻快的个性，它的明度最高。橙色具有轻快，欢欣，热烈，温馨，时尚的效果，是快乐、喜悦、能量的色彩。

红色是一种激奋的色彩，能使人产生冲动，愤怒，热情，活力的感觉。绿色介于冷暖两中色彩的中间，是一种柔顺、恬静、满足、优美的颜色。

105色彩基础不同的颜色具备不同的象征性，会给浏览者不同的心理感受。10蓝色是最具凉爽，清新，专业的颜色，提供一个深远、广埔、平静的空间。灰色具有中庸，平凡，温和，谦让，中立和高雅的感觉。黑色具有深沉，神秘，寂静，悲哀，压抑的感受。白色具有洁白，明快，纯真，清洁的感受。106蓝色是最具凉爽，清新，专业的颜色，提供一个深远、广埔、主色调页面色彩的主要色调、总趋势，其他配色不能超过该主要色调的视觉面积。辅色调仅次与主色调的视觉面积的辅助色，是烘托主色调、支持主色调、起到融合主色调效果的辅助色调。点睛色在小范围内点上强烈的颜色来突出主题效果，使页面更加鲜明生动。背景色衬托环抱整体的色调，协调、支配整体的作用。107网页色调主色调107网页色调近似色对比色分离补色108常见的配色方案近似色108常见的配色方案用一种颜色调整透明度或者饱和度用两种色彩选择对比色用同一色系用一个感觉的色彩调和109色彩搭配技巧用一种颜色109色彩搭配技巧首页效果图设计110首页效果图设计110项目六服务中心栏目设计111项目六服务中心栏目设计111设计内容用户问卷调查页面设计服务中心栏目页面设计112设计内容用户问卷调查页面设计112掌握表格、行、列的标记与属性的使用方法113掌握表格、行、列的标记与属性的使用方法113用于创建一个表格。格式：<table>文本</table>表格内有行标记，用于定义表格的一行。格式：<tr>…</tr>行标记中有列标记，用于定义表格某行中的一个单元格。格式：<td>单元格内容</td>114<TABLE>标记用于创建一个表格。114<TABLE>标记<tableborder="1"><tr><td>

单元格内容

</td> ……</tr>……</table>基本语法115<tableborder="1">基本语法115列标题标记。用于表的第一行或第一列加表头，字为醒目的粗体且居中。格式：<th></th>116<TH>标记列标题标记。116<TH>标记表题标记。用于表格的内容声明。格式：<captionalign=”位置”>表题</caption>117<CAPTION>标记表题标记。117<CAPTION>标记<tablewidth="470px"border="1"height="100px"align="center"><captionalign="top"><fontcolor="#336699">我最喜欢的相片</font></caption><tr><tdwidth="235px"><formid="form1"name="form1"><inputtype="file"name="fileField"id="fileField"/></form></td><tdwidth="235px"align="center"><imgsrc="imgs/1.jpg"width="100px"height="76px"/></td></tr></table>118例题6-1中，创建一个有图像和浏览提示的表如何使用表格属性<tablewidth="470px"border="1<tablewidth="270"border="1"align="center"bordercolor="#6699cc"frame="above"rules="cols"><captionalign="top">成绩单</caption><tr><tdheight="30">语文</td><tdheight="30">数学</td><tdheight="30">英文</td></tr><tr><tdheight="30">80</td><tdheight="30">88</td><tdheight="30">85</td></tr></table>119例题6-3中，创建一个边框异形的表如何使用表格属性<tablewidth="270"border="1"<tr><thheight=“28”colspan=“2”> </th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr><tr><throwspan="2">上午</th><thheight=“27”>第一二节</th><td>数学</td><td>英语</td><td>数学</td><td>英语</td><td>哲学</td></tr><tr><thheight="28">第三四节</th><td>英语</td><td>计算机</td><td>计算机</td><td> </td><td>计算机</td></tr>120如何使用表格属性例题6-5中，创建一个行列有合并的表<tr>120如何使用表格属性例题6-5中，创建一个行列有合表格的嵌套处理如果要做复杂一点的表格或是用表格来进行布局页面，需要用上表格的嵌套。嵌套的基本原则：嵌套的子表格一定是放在<td></td>这对标记里。121表格的嵌套处理如果要做复杂一点的表格或是用表格来进行布局页面<tableborder=”1”width=”500px”><option>嵌套的表格</option><tr><tdwidth=”100px”>表项1</td><tdwidth=”200px”><tableborder=”1”width=”100%”><tr><td>子表项1</td><td>子表项2</td></tr><tr><td>子表项3</td><td>子表项4</td></tr></table></td>…<td>表项n</td></tr></table>122<tableborder=”1”width=”500p设计内容用户问卷调查页面设计服务中心栏目页面设计123设计内容用户问卷调查页面设计123掌握分析和处理网页布局的方法与表格的嵌套124掌握分析和处理网页布局的方法与表格的嵌套124在网页中，为了让网页更加生动、美观，需做了很多的分区处理外观。从结构的角度来考虑一个Web页面，可看成为一个大表格，将整个页面划分为若干个区，成为表中的每个单元格或多个单元格；然后再在各个区域中填充具体的页面内容，当内容较负责时可嵌套表，这样就可以来完成一个页面的规划和实现了。125页面布局方法在网页中，为了让网页更加生动、美观，需做了很多的分区处理外观网页布局的实现126网页布局的实现126实现方法一127实现方法一127实现方法二128实现方法二128模板是一种特殊类型的文档，用于设计锁定的页面布局，形成统一结构与外观的网站。模板可以批量制作网页。129模版模板是一种特殊类型的文档，用于设计锁定的页面布局，形成统一结模板的基本处理新建编辑保存应用管理模板的编辑处理可编辑区可选区可重复区130模版的基本操作模板的基本处理130模版的基本操作项目七新闻中心栏目设计131项目七新闻中心栏目设计131设计内容新闻中心栏目布局设计新闻中心导航132设计内容新闻中心栏目布局设计132掌握用框架布局页面的方法，理解框架与框架集133掌握用框架布局页面的方法，理解框架与框架集133在一个文档内定义一组框架结构的HTML网页，实现在一个浏览器窗口显示多个HTML页面，在一个框架中可显示多个HTML页面。框架技术是框架的组合，即框架集。框架布局网页的基本原理134在一个文档内定义一组框架结构的HTML网页，实现在一个浏览器<html>

<head></head>

<frameset

cols=“水平分割参数”|rows=“垂直分割参数”>

<framesrc=“url地址1”name=“子窗口名称”/>

<framesrc=“url地址2”name=“子窗口名称”/>

</frameset>

</html>语法135<html>

<head></head>

<frrows属性垂直方向分割浏览器窗口，分隔的框架数目以逗号的个数加1来确定。参数可以是数字(单位为像素)，或百分比或剩余值(*)，各值间用逗号分开。如：<framesetcols=“50,80,60”>分成上中下三个窗口，分别为50像素，80像素,60像素

<framesetcols=“20%,*，20%”>分成三个窗口，左窗20%，右窗20%，剩余的中间窗<framesetcols=“*,2*,3*”>分成三个窗口，左窗1/6，右窗2/6，剩余的3/6cols属性

水平方向分割浏览器窗口<FRAMESET>的属性136rows属性<FRAMESET>的属性136<framesetcols="300px,*"><framesrc="left.html"/><framesrc="right.html"/></frameset>137如何水平拆分网页<framesetcols="300px,*">137如左右分割窗口上下分割窗口嵌套分割窗口（既有左右分割又有上下分割）框架集的分割138左右分割窗口框架集的分割138<framesetrows="20%,*"><framesrc="top.html"/><framesetcols="30%,*"><framesrc="downleft.html"/><framesrc="downright.html"/></frameset> </frameset>如何实现窗口嵌套139<framesetrows="20%,*">如何实现窗口嵌要在一个框架中使用链接以打开网页显示在另一个框架中，必须设置链接目标，设为目标框架的名称即name属性的值。设置target属性可以使链接页面在指定打开的框架中显示。带链接的框架设置140要在一个框架中使用链接以打开网页显示在另一个框架中，必须设置

<framesetrows="57,*"framespacing="0"frameborder="no"border="0"bordercolor="#FF9966"><framesrc="a.html"name="topFrame"id="topFrame"title="topFrame"></frame><framesrc="1.html"name="mainFrame"id="mainFrame"title="mainFrame"></frame>如何使用NAME属性141a.html的链接target为mainFrame例题7-1中，上框架中的文字链接选中显示的页面显示在下框架中<framesetrows="57,*"frames设计内容新闻中心栏目布局设计新闻中心导航142设计内容新闻中心栏目布局设计142掌握浮动框架的使用方法143掌握浮动框架的使用方法143浮动框架标记。在浏览器窗口中嵌入一个窗口以显示另一个页面。格式：

<iframesrc=”URL”width=”数值”height=”数值”frameborder=”数值”scrolling=”auto/no”>144<IFRAME>标记浮动框架标记。144<IFRAME>标记<iframesrc="1.html"name="aa"width="500"height="300"></iframe><p><ahref="1.html"target="aa">产品1</a>    <ahref="2.html"target="aa">产品2</a>    <ahref="3.html"target="aa">产品3</a>    <ahref="4.html"target="aa">产品4</a>    <ahref="5.html"target="aa">产品5</a></p>145例题7-1中，通过文字链接在指定位置显示对应网页内容如何使用浮动框架<iframesrc="1.html"name="aa"项目八企业关注栏目设计146项目八企业关注栏目设计146设计内容企业介绍页面样式引用企业荣誉页面设计147设计内容企业介绍页面样式引用147掌握各样式的引用148掌握各样式的引用148网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。结构化标准（主要包括HTML和XML，用于在网页中加入各类元素）、表现标准（主要包括CSS，用于效果优化和布局网页元素）、行为标准（主要包括对象模型、ECMAScript等，用于实时对用户操作进行响应和完成网页特效）。WEB标准149网页主要由三部分组成：结构（Structure）、表现（Pr网页CascadingStyleSheets的缩写，中文译为“层叠样式表”。特点：简化网页的格式代码。调整CSS样式表文件就可以改变整个站点的风格特色CSS150网页CascadingStyleSheets的缩写，中文基本语法结构151CSS样式定义由两部分组成：选择器和声明。格式：选择符（selector）{属性（property）:属性值（value）}选择器是样式的名称（如TR或P），而声明则用于定义样式元素。声明由两部分组成：属性和值。基本语法结构151CSS样式定义由两部分组成：选择器和声明。全体选择符

全体选择符用一个“*”来表示，表示所选定范围内的所有元素。格式：

*{属性:属性值;}如：*{font-size:12px}HTML标签选择器

针对HTML标记的样式设置。格式：标签名{属性:属性值;}如：p{color:red;}CSS选择符152全体选择符CSS选择符152类选择符需要有相同样式规则的不同元素进行类样式设定，在使用时需要用class=”类名”来进行引用。格式：.类名{属性:属性值;}id选择器用来对单一元素进行单独的样式定义，在使用时需要用id=”id名”来进行引用。格式：#id名{属性:属性值;}CSS选择符153类选择符CSS选择符153伪类选择符对相同一个HTML元素的各种状态和其包含的部分内容进行定义的一种方法。格式：HTML元素：伪元素｛属性:值｝锚的伪类四类：a:link（未访问的状态）、a:visited（已访问的状态）、a:hover（鼠标停留的状态）、a:active（成为焦点的状态）。CSS选择符154伪类选择符CSS选择符154选择符组将相同属性和值的几个选择符组合起来，用“，”符号分隔。如：ph1{color:#ff0000;}包含选择符对某对象中的子对象进行样式指定。其间用空格隔开。如：ulli{font-weight:bolder;}CSS选择符155选择符组CSS选择符155CSS的应用外部样式表将样式表保存到一个样式表文件，在网页中用<link>标记链接的方式，样式表扩展名为.css。格式： <head> <linkhref=”*.css“rel=“stylesheet"type="text/css"/> </head>156CSS的应用外部样式表156CSS的应用内部样式表在对单个网页文档进行样式处理时，头部使用<style>标记对。格式： <head> <styletype="text/css"> hr{color:#abefc6;} </style> </head>157CSS的应用内部样式表157CSS的应用内联样式仅需要在一个因素上应用一次时可使用内联样式。格式：<标记名style=“属性：属性值”>

4、输入样式表指将一个外部样式表文件（CSS文件）输入到另外一个CSS文件，用@import导入。格式：<styletype="text/css"><!--@import“CSS文件名”

……--></style>158CSS的应用内联样式158设计内容企业介绍页面样式引用企业荣誉页面设计159设计内容企业介绍页面样式引用159掌握各样式的设置160掌握各样式的设置160字体属性（见表8-1）文本属性（见表8-2）背景属性（见表8-3）边框属性（见表8-4）边距属性（见表8-6）布局属性（见表8-7）列表属性（见表8-9）161常用的CSS属性字体属性（见表8-1）161常用的CSS属性<styletype="text/css">h1{height:100px;width:500px;background-image:url(imgs/1.jpg);}p{font-size:22px;background-color:#9ef362;}162例题8-2中，设置背景和文字等属性如何使用CSS属性<h1>设置标记区域和背景</h1><p>设置标记区域和背景</p><styletype="text/css">162例题8-样式表的继承原则样式表的就近原则样式表的优先原则从高到低：行内样式、内部样式、链入外部样式、导入外部样式和默认浏览器样式163样式规则样式表的继承原则163样式规则项目九产品中心栏目设计164项目九产品中心栏目设计164设计内容产品选项卡销售产品页面布局165设计内容产品选项卡165掌握盒子模型的定位属性166掌握盒子模型的定位属性166网页中的所有元素对象都被放在一个盒子中。所有元素都可以拥有像盒子一样的外形和平面空间，包含有边界、边框、填充、内容区域等。盒子模型是CSS布局的基础，其规定了网页元素如何显示以及元素间的相互关系。盒子模型167网页中的所有元素对象都被放在一个盒子中。所有元素都可以拥有像盒子在网页中所占空间的如何计算？一个网页元素实际宽度为：margin-left+border+padding-left+width+padding-right+border-right+margin-right盒子模型的计算168盒子在网页中所占空间的如何计算？盒子模型的计算168盒子的基本定位169网页中的元素分为：行内元素

如：span、a、label块级元素（独立成行）

如：div、li、hn盒子的基本定位169网页中的元素分为：盒子的浮动170通过对float属性的设置，可对块级元素进行浮动，使元素脱离标准位置，且其后序元素会自动向前流动。设置方法：float:left|right第一块DIV浮动前后的区别见右图若前面的盒子已浮动，而本盒子需要单独成行则使用clear属性清除浮动属性。盒子的浮动170通过对float属性的设置，可对块级元素进行盒子定位的方法有四种。定位属性POSITION格式：position:static|absolute|fixed|relativestatic：默认属性值，指盒子按照标准流（包括浮动方式）进行布局。relative：相对定位，盒子相对于其在标准流中的位置偏移，absolute：绝对定位。盒子位置以其最近的父容器为基准进行偏移。fixed：固定定位，盒子其以浏览器窗口为基准进行定位。盒子的定位设置171盒子定位的方法有四种。盒子的定位设置171设计内容产品选项卡销售产品页面布局172设计内容产品选项卡172掌握DIV布局方法173掌握DIV布局方法173掌握DIV布局方法174掌握DIV布局方法174DIV+CSS布局网页网站中常用的网页布局采用DIV+CSS，先用DIV将页面内容从整体上进行结构划分，再用CSS将各结构分块在网页中进行定位和进行样式设置。一行多列布局一行一列布局、一行两列布局、一行三列布局设置方法

布局可以分成固定宽度和自适应宽度两种模式固定宽度是指块宽度的属性值是固定像素自适应是指宽度随浏览器的变化而发生变化175DIV+CSS布局网页网站中常用的网页布局采用DIV+CSS一列布局在HTML文档的<head>标记对之间的相应位置，输入CSS样式代码固定布局，同时在HTML文档中加入对应CSS中的同选择符名的DIV。固定宽度#div1{background-color:#CCCCCC;border:3pxsolid#ff3399;width:300px;height:200px;}<divid="div1">1列固定宽度，要设置像素值。</div>176一列布局在HTML文档的<head>标记对之间的相应位置，输一列布局一列自适应宽度#div1{background-color:#CCCCCC;border:3pxsolid#ff3399;width:60%;height:70%;}177一列布局一列自适应宽度#div1{177178两列布局178两列布局179两列布局179两列布局两列布局180两列布局180三列布局181三列布局181182三列布局182三列布局三行三列布局183三行三列布局183184三行三列布局184三行三列布局项目十广告服务实现185项目十广告服务实现185设计内容弹出式广告服务广告详情186设计内容弹出式广告服务186掌握javascript概述及基本语法和window对象制作首页打开后的弹出式广告功能187掌握javascript概述及基本语法和window对象制作什么是JavaScript

JavaScript是网景(Netscape)公司开发的一种基于客户端浏览器、面向对象、事件驱动式的网页脚本语言，编写嵌入在网页文档中的程序。JavaScript能实现网页中的对象对一张图片、一个DIV等的即时刷新，动态操作DOM。188什么是JavaScriptJavaScript是网景(Ne什么是JavaScriptJavaScript实现由用户端对网页的操作，以多种方式更改页面或引发某些任务的是事件处理机制，称为事件驱动。事件驱动实现与Web客户实现交互，完成某些特殊功能。189什么是JavaScriptJavaScript实现由用户端对JavaScript的基本语法<html><head><title>脚本的基本结构</title><scriptlanguage="javascript"> varx=8; alert("<h2>x</h2>");</script></head><body>body部分的内容</body></html>190JavaScript的基本语法<html>190

JavaScript保留字

在JavaScript中定义了40多个关键字，不能作为变量名、函数名、方法名和对象名。常用保留字如表所示。内部的函数名和对象名也是保留字。变量的定义191

JavaScript保留字变量的定义191JavaScript的使用直接嵌入在HTML的<script></script>标记中。<scriptlanguage=”javascript”>varx=8;alert(x);</script>独立编写JavaScript文件。如：<html><scriptsrc=”xa.js”language=”javascript”></script></html>作为属性值。如：<inputtype=”button”value=”firsttext”onclick=”alert()”>

192JavaScript的使用直接嵌入在HTML的<script变量的声明和赋值定义变量varcount;//var用于声明变量的关键字赋值count=5;同时声明和赋值变量varcount=10;193变量的声明和赋值定义变量赋值同时声明和赋值变量193运算符运算符对一个或多个变量或值（操作数）进行运算，并返回一个新值根据所执行的运算，运算符可分为以下类别：算术运算符

+、-、*、/、%、++、--、-(求反)比较运算符

==、!=、>、>=、<、<=逻辑运算符

&&、||、！194运算符运算符对一个或多个变量或值（操作数）进行运算，并返回一程序结构if条件语句switch多分支语句for、while循环语句if(条件){//JavaScript代码;}else{//JavaScript代码;}switch(表达式){case常量1: JavaScript语句1; break; case常量2: JavaScript语句2; break; ... default:JavaScript语句3;}for(初始化;条件;增量){

语句集;

}while(条件){

语句集;}195程序结构if条件语句if(条件)switch(表达式)fo函数

将一个大的程序分解成小程序块独立起来，这些独立后的小程序块完成各自的特定功能，即是函数。196函数将一个大的程序分解成小程序块独立起来，这些独立后的小程格式：

function函数名（形式参数表）｛语句块；｝说明：function为关键字，表示定义一个函数，其后跟着的是定义的函数的函数名，也是调用时的名字，其后跟着的小括号中形参列表需要以“,”隔开。函数定义直接给出函数名，并加上参数即可。如：

number=square(10);函数调用197格式：函数定义直接给出函数名，并加上参数即可。如：函数调基本的用户提示向用户发出警告确认用户的选择提示用户输入Alert(“提示”);

confirm(“提示”);prompt(“提示输入”);198基本的用户提示向用户发出警告Alert(“提示”)例题10-4中，实现问卷调查199如何使用无参函数<body><script>question();</script></body><head><script>functionquestion(){varm=prompt("能参与问卷调查吗？您是老顾客吗？请选填1/0",0);if(m==1)alert("欢迎您的再次