信息网络技术与网络出发行四

第五章网页编辑与设计授课教师：刘爽概览超文本标记语言、脚本语言与动态网页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;创建与链链接外部部样式表表外部样式式表是一一个独立立的样式式表代码码文件，，我们可可以通过过链接网网页到不不同的样样式表来来改变网网站的整整体显示示风格我们甚至至可以利利用链接接不同的的精心设设计好的的样式表表将网站站的排版版格局进进行快速速转换，，包括将将背景图图，背景景色彩进进行整体体转换，，这样，，在不同的的节日或或者季节节，我们们就可以以快速装装扮网页页了。通过灵活活定义和和选择外外部样式式表，网网页的创创作风格格可以千千变万化化，学好网页页的排版版设计，，样式表表技术是是一个必必须完整整掌握的的内容。。结构与表表现的分分离拓展：制制作可更更换皮肤肤的网页页资料来源源原理：设置两个个风格不不同的网网页外部部样式，，分别为为在测试网网页的代代码中加加入这两两个样式式的链接接，并定定义title属性利用JS程序遍历历有title属性的样样式用按钮控控制哪个个样式产产生作用用容易出错错的地方方：资料中有有小错误误，注意意参数的的一一对对应关系系注意JS代码中的的大小写写严格区区分问题题盒子模型型1尺尺寸寸完整清晰晰的理解解盒子模模型，是是学好CSS样式的首首要条件件盒子模型型2层层次关关系完整清晰晰的理解解盒子模模型，是是学好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#SideBar