信息网络技术与网络出版发行04

第五章网页编辑与设计授课教师：刘爽概览超文本标记语言、脚本语言与动态网页HTML超文本标记语言设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。HTML超文本样例头部主体脚本语言常见的网页脚本语言有JavaScript和VBScript两种，当初开发出来的主要目的是为了解决服务器终端语言，比如Perl，遗留的速度问题。当时服务端需要对数据进行验证，由于网络速度相当缓慢,只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。JavaScript的适应范围比VBScript更广泛，多数脚本采用Javascript，脚本语言能够使终端页面交互更为友好，增强用户的交互体验，便利用户的数据操作。脚本语言使静态的网页在与用户的鼠标或键盘输入的数据进行交互时，出现各种自动化的提示信息或页面动态。Javascript样例：使用下面的脚本可以在鼠标悬停和移出某区域时改变该区域CSS样式风格<trclass="tr3f_one"onMouseOver="this.className='tr3f_two'"onMouseOut="this.className='tr3f_one'">该脚本可使TR行的样式在tr3f_one和tr3f_two之间变换Java脚本除了经常用于针对用户的鼠标与键盘操作，即时动态的改变显示内容或风格，也经常用于控制显示与隐藏重要的操作提示信息。如：在进行用户注册的时候，输入密码结束时，提示密码是否足够安全或密码中有系统禁止的非法字符，或提示邮件地址不符合规范等。常见HTML标签名称属性样例效果段落<p>Align对齐Align="center"居中对齐（回车）断行<br/>无强制断行（Shift+回车）字体<font>Size字号Size="3"文字大小为3号字Face字体Face="宋体"字体为宋体Color色彩color="#FF3366”色彩为亮红色标题<h1>…<h6>无项目列表<ul><li>Type类型Type="square"方形项目列表符号编号列表<ol><li>Type类型Type="I"编号列表(罗马数字)水平线<HR>Noshade无阴影Color色彩Size粗细NoshadeColor=graySize=4水平线立体感消失水平线灰色4个像素粗HTMLSample02.html<h1>H1</h1><h2>H2</h2><h3>H3</h3><h4>H4</h4><p><fontsize="1"face="宋体">Size1汉字</font></p><p><fontsize="2"face="Arial">Size2Arial汉字</font></p><p><fontsize="3"face="sans-serif">Size3sans-serif汉字</font></p>HTMLSample02.html<p><fontsize="4"face="Tahoma">Size4Tahoma汉字</font><fontsize="2"face="Tahoma">Size2Tahoma汉字</font><br/><fontsize="1"face="Tahoma">Size1Tahoma汉字</font></p><p><fontsize="5">Size5汉字</font></p><palign="center"><fontsize="6">Size6汉字</font></p>HTMLSample02.html<ultype="square"><li>ABCDEF</li><li>ABCDEF</li><li>ABCDEF</li></ul><oltype="I"><li>ABCDEF</li><li>ABCDEF</li><li>ABCDEF</li></ol><p></p><p></p><p></p><p></p><p></p>HTMLSample02.html字体与特殊字符网页中经常使用的中文字体有：宋体、微软雅黑、仿宋、黑体微软雅黑、仿宋、黑体在启用操作系统的平滑字体特性时才有较好显示效果。网页中经常使用的英文字体有：Arial、Tahoma、sans-serif特殊字符：不断行空格：

版权字符：©注册商标字符：®断行字符：<br>①③②字体与特殊字符DreamweaverCS4安装安装主程序下载：AdobeDreamweaverCS4lite（精简版）序列号1192-1014-7077-3383-4280-7435安装CSS规则定义窗口汉化包如Dreamweaver没有安装在默认路径下，必须注意选择正确的安装位置)默认路径C:\ProgramFiles\Adobe\AdobeDreamweaverCS4\zh_CN\resources可能的路径D:\ProgramFiles\Adobe\AdobeDreamweaverCS4\zh_CN\resources或D:\AdobeDreamweaverCS4\zh_CN\resources搜狗搜索引擎百度搜索引擎建立网站管理使用Dreamweaver建立网站切忌直接建立网页，必须先建立站点管理，在站点管理器中创建空白页面后，才开始正式的网页设计与编辑工作。站点管理器使Dreamweaver的设计工作更加智能化，使网页排错工作和断链情况得到很大改善。典型站点结构：站点根(X:\Sites\Site01)imagesstylesguestbookIndex.aspIndex.html图片样式表留言簿程序典型大型网站文件夹结构站点根imagesstylesInformationProductsServiceDownloadGuestbookForum/bbsManage/admin图像CSS样式信息/公告/新闻（News）产品信息服务/案例(Projects)下载留言簿动态网页程序论坛动态网页程序后台管理程序动态网页程序建立网站管理的步骤在站点菜单中选择“新建站点”设置站点名，站点URL地址，下一步选择不使用服务器技术，下一步设置站点存储位置（整个路径必须全英文），下一步设置如何连接到远程服务器为无，下一步，完成在文件面板中右击站点根，新建“images”文件夹在文件面板中右击站点根，新建“styles”文件夹在文件面板中右击站点根，新建index.html文件，此时可开始编辑该页，作为站点首页创建站点文件或文件夹时必须使用英文或数字，忌用中文字符中文字符在网站服务器中经常会导致不可预计的错误，所以很少用在Dreamweaver中编写网页认识基本操作区域认识属性面板输入文字字体列表编辑段落(回车)断行(Shift+回车)不断行空格(Ctrl+Shift+空格)首行缩进(两个全角中文空格)缩进项目列表编号列表插入特殊字符插入水平线Dreamweaver手工编写网页代码的方法课后练习：

使用Dreamweaver创建网站结构正确安装Dreamweaver和CSS面板汉化包创建网站结构编辑恰当的字体列表练习基本的文字排版通过切分视图观察文字排版时出现的各种HTML编码练习不断行回车、空格、首行缩进、版权商标符号的插入图片<imgsrc=“TestSite/Chrysanthemum.jpg”alt=“太阳花"width="1024"height="768"hspace="16"vspace="16"border="2"/>图片需要使用相对地址或绝对地址来显示到网页中图片可设置属性：来源src=“images/pic0free.jpg”宽度与高度width=500height=300边框border=2水平间距vspace=16垂直间距hspace=16提示文字alt=“图1"链接、相对地址与绝对地址链接的制作特殊的绝对地址在使用Dreamweaver的F12快捷键预览时，经常会在地址栏出现这种绝对地址，这种地址浏览正确的网页不一定在发布时能够正常显示，但如果在站点管理器的协调下，能够避免常见的低级错误。表格<tablewidth="400"height="500"border="3"cellspacing="10"cellpadding="10"bgcolor="#000000"bordercolor="#FF9900"background="../../images/Penguins.jpg"><trbgcolor="#FFCC00"><tdbgcolor="#00CC00"> </td><tdbordercolor="#3333CC"> </td></tr><tr><td> </td><td> </td></tr></table>表格列合并<tablewidth="300"border="1"cellspacing="5"cellpadding="5"><tr><tdcolspan="2"> </td></tr><tr><td> </td><td> </td></tr></table>表格行合并<tablewidth="300"border="1"cellspacing="5"cellpadding="5"><tr><td> </td><tdrowspan="2"> </td></tr><tr><td> </td></tr></table>表格属性面板与单元格属性面板表格排版网页设计时，我们会发现文字、列表、图片、表格等内容经常是顺序往下排列。如何让文字或图片能够在网页设计时放到指定的位置呢？最早的设计方法是使用透明表格，利用表格的单元格固定网页内可视化元素位置。如文字，图像，列表，水平线等。甚至可见的表格也经常通过透明表格指定位置。表格排版示例首页产品服务案例资料下载用户社区联系我们LogoBannerFooterL_ListM_ListR_List第二部分层叠式样式表排版用统一的方法规范网页设计，增强表现力CSS样式表常见的样式表定义创建简单的类，使用类统一相似元素的显示风格。如统一小标题的风格重定义BodyPTDH1H2H3标签重定义复合内容a:linka:hovera:visiteda:active技巧：BODY设置长条背景图可以快速美化网页画面P设置像素单位的缩进，可以方便的控制段落样式P设置行高，可使文字精确对齐使块状元素水平居中对齐

margin:0auto;/*水平居中*/用CSS样式重定义

链接（复合内容）效果重定义a:link黑色无下划线重定义a:hover黑色有下划线重定义a:visited灰色有下划线重定义a:active橙色无下划线重定义a:link褐色无下划线重定义a:hover褐色有下划线重定义a:visited红色有下划线重定义a:active蓝色无下划线CSS美化技巧（1）背景图居中纵向平铺（多数长版型网页使用）body{ background-attachment:fixed; background-color:#FFF; background-image:url(/image/logo_home_c.png); background-repeat:repeat-y; background-position:centertop;背景图居中横向平铺（多数为短版型网页使用）body{ background-attachment:fixed; background-color:#FFF; background-image:url(/image/logo_home_c.png); background-repeat:repeat-x; background-position:leftcenter;创建与链接外部样式表外部样式表是一个独立的样式表代码文件，我们可以通过链接网页到不同的样式表来改变网站的整体显示风格我们甚至可以利用链接不同的精心设计好的样式表将网站的排版格局进行快速转换，包括将背景图，背景色彩进行整体转换，这样，在不同的节日或者季节，我们就可以快速装扮网页了。通过灵活定义和选择外部样式表，网页的创作风格可以千变万化，学好网页的排版设计，样式表技术是一个必须完整掌握的内容。结构与表现的分离拓展：制作可更换皮肤的网页资料来源原理：设置两个风格不同的网页外部样式，分别为a.cssb.css在测试网页的代码中加入这两个样式的链接，并定义title属性利用JS程序遍历有title属性的样式用按钮控制哪个样式产生作用容易出错的地方：资料中有小错误，注意参数的一一对应关系注意JS代码中的大小写严格区分问题盒子模型1尺寸完整清晰的理解盒子模型，是学好CSS样式的首要条件盒子模型2层次关系/dennyxno1@yeah/blog/static/7357517920093432725956/完整清晰的理解盒子模型，是学好CSS样式的首要条件CSS“类型”样式字体大小修饰（加粗、下划线、删除线、变体等）行高色彩CSS“区块”样式单词间距字母间距垂直对齐文本对齐CSS“背景”样式背景色背景图背景图重复背景图附加背景图位置CSS“方框”样式宽高浮动填充距离边界距离CSS“边框”样式实线边框虚线边框边框线粗细边框线色彩CSS“列表”样式列表样式项目符号图像位置CSS“定位”样式DIV标签位置显示Z轴溢出文本内容作业4：制作CSS修饰的单页利用CSS样式对BODYH1、H2、P、a:linka:hovera:visited等标签进行重定义使网页呈现如下图效果：鼠标悬停到链接上，背景变红色有虚线边框，小标题为深绿色Body设置纵向平铺的渐变图片背景作业格式：站点文件夹压缩包第三部分导航条与DIV+CSS排版用CSS样式做导航条效果准备导航条背景图片插入DIV容器标签，定义#Nav制作项目列表定义特殊的CSS样式表，假设样式名为#Nav定义复合内容#Navul定义复合内容#Navli定义复合内容#Nava

定义复合内容#Nava:link

定义复合内容#Nava:visited

定义复合内容#Nava:hoverli需要Float:left;实现横向导航条效果a通过Display:block;使之成为盒子块状元素利用背景的垂直位移可以用同一张背景图实现背景变化效果DIV+CSS样式排版DIV标准布局1横向3栏#Container#Header#Menu/Navbar#MainContent#Footer#container{margin:0auto;width:900px;}#header{height:100px;background:#6cf;margin-bottom:5px;}#menu{height:30px;background:#09c;margin-bottom:5px;}#mainContent{height:500px;background:#cff;margin-bottom:5px;}#footer{height:60px;background:#6cf;}#container{margin:0auto;width:900px;}DIV标准布局2标准内容页#Container#Header#Menu/Navbar#MainContent#SideBar#Content#Footer#container{margin:0auto;width:900px;}#header{height:100px;background:#6cf;margin-bottom:5px;}#mainContent{margin-bottom:5px;}#sidebar{float:left;width:200px;height:500px;background:#9ff;}#content{float:right;width:695px;height:500px;background:#cff;}/*因为是固定宽度，采用左右浮动方法可有效避免ie3像素bug*/#footer{height:60px;background:#6cf;}DIV标准布局3标准内容页#Container#Header#Menu/Navbar#MainContent#SideBar1#SideBar2#Content#Footer#container{margin:0auto;width:900px;}#header{height:100px;background:#6cf;margin-bottom:5px;}#menu{height:30px;background:#09c;margin-bottom:5px;}#mainContent{height:500px;margin-bottom:5px;}#sidebar{float:left;width:200px;height:500px;background:#9ff;}#sidebar2{float:right;width:200px;height:500px;background:#9ff;}#content{margin:0205px!important;margin:0202px;height:500px;background:#cff;}#footer{height:60px;background:#6cf;}常见缩写与简化CSSHack/view/1119452.htm学习资料由于不同的浏览器，比如InternetExplorer6,InternetExplorer7,MozillaFirefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。作业5CSS模板修改演讲完毕，谢谢观看！附录资料：不需要的可以自行删除

信息技术的战略管理应用信息技术创造组织马力本章的重点本章考察七种由IT技术激活的策略,提高组织的竞争能力IT促成完美的服务组织马力的开发质量是组织竞争的基础OHP策略创造竞争优势OHP策略应用激进还是持续?竞争优势什么是竞争优势?如何获得竞争优势?

如何保持竞争优势?

客户对产品或服务的认同。通过对竞争环境及自己企业内的了解，开发新的产品或创建良好的服务。不断创新，保持优势。组织马力组织马力是组织力量与速度的结合。组织力量尽可能地满足顾客的期望体现在更多的适合客户需要的产品或服务组织速度能够迅速地满足客户的期望体现了对客户需求的响应速度利用IT提高OHP的策略准时生产方式Just-in-Time组织团队信息伙伴灵活的运营跨国公司虚拟组织学习型组织质量：竞争的基础什麽是质量？质量不是优良、漂亮、豪华。质量是指满足顾客的期望。质量是OHP的基础。全面质量管理（TQM）满足客户的期望持续不断的改进组织范围的质量观念JIT方法Just-in-Time-----将产品或服务在客户需要时，能及时的生产并送达。JIT的方法将以生产为中心的方式转化为以客户为中心（订单到达之前没有产品），以避免生产的过剩。JIT增强了企业的柔性，减少库存水平。目的：提高组织的速度关键：外部的信息沟通（利用通信技术） 生产过程的管理（内部生产过程的控制）--过程预测--材料需求计划MATERIALREQUIREMENTSPLANNING(MRP)）--制造资源计划MANUFACTURINGRESOURCEPLANNING(MRPII)

组织中的团队团队：项目团队、长期团队-----一组拥有共同的目标、协同工作的人。目的：团队的创造力增强组织的力量关键：网络平台，群件的支持信息伙伴----与客户间加强信息的沟通，实现信息的共享，促进信息的流动。即，通过共享信息增强每个合作组织的实力。目的与战略：提高组织的速度：