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

1、第五章 网页编辑与设计授课教师：刘爽概览超文本标标记语言言、脚本本语言与与动态网网页HTML超文本标标记语言言设计HTML语言的目目的是为为了能把把存放在在一台电电脑中的的文本或或图形与与另一台台电脑中中的文本本或图形形方便地地联系在在一起，形成有有机的整整体，人人们不用用考虑具具体信息息是在当当前电脑脑上还是是在网络络的其它它电脑上上。我们们只需使使用鼠标标在某一一文档中中点取一一个图标标，Internet就会马上上转到与与此图标标相关的的内容上上去，而而这些信信息可能能存放在在网络的的另一台台电脑中中。HTML文本是由由HTML命令组成成的描述述性文本本，HTML命令可以以说明文文字、图图

2、形、动动画、声声音、表表格、链链接等。HTML的结构包包括头部部（Head）、主体体（Body）两大部部分，其其中头部部描述浏浏览器所所需的信信息，而而主体则则包含所所要说明明的具体体内容。HTML超文本样样例头部主体脚本语言言常见的网网页脚本本语言有有JavaScript和VBScript两种，当初开开发出来来的主要要目的是是为了解解决服务务器终端端语言，比如Perl，遗留的的速度问问题。当当时服务务端需要要对数据据进行验验证，由由于网络络速度相相当缓慢慢,只有28.8kbps，验证步步骤浪费费的时间间太多。于是Netscape的浏览器器Navigator加入了Javascript，提供了了

3、数据验验证的基基本功能能。JavaScript的适应范范围比VBScript更广泛，多数脚脚本采用用Javascript，脚本语语言能够够使终端端页面交交互更为为友好，增强用用户的交交互体验验，便利利用户的的数据操操作。脚脚本语言言使静态态的网页页在与用用户的鼠鼠标或键键盘输入入的数据据进行交交互时，出现各各种自动动化的提提示信息息或页面面动态。Javascript样例：使用下面面的脚本本可以在在鼠标悬悬停和移移出某区区域时改改变该区区域CSS样式风格格该脚本可可使TR行的样式式在tr3f_one和tr3f_two之间变换换Java脚本除了了经常用用于针对对用户的的鼠标与与键盘操操作，即即时动

4、态态的改变变显示内内容或风风格，也也经常用用于控制制显示与与隐藏重重要的操操作提示示信息。如：在进进行用户户注册的的时候，输入密密码结束束时，提提示密密码是否否足够安安全或密密码中有有系统禁禁止的非非法字符符，或提提示邮件件地址不不符合规规范等。常见HTML标签名称属性样例效果段落Align对齐Align=center居中对齐（回车）断行无强制断行（Shift+回车）字体Size 字号Size=3文字大小为3号字Face 字体Face=宋体字体为宋体Color 色彩color=#FF3366”色彩为亮红色标题无项目列表Type 类型Type=square方形项目列表符号编号列表Type 类型T

5、ype=I编号列表(罗马数字)水平线Noshade 无阴影Color 色彩Size 粗细NoshadeColor=graySize=4水平线立体感消失水平线灰色4个像素粗HTML Sample02.htmlH1H2H3H4Size1汉字Size2Arial汉字Size3sans-serif汉字HTML Sample02.htmlSize4 Tahoma汉字Size2 Tahoma汉字Size1 Tahoma汉字Size5汉字Size6汉字HTML Sample02.htmlABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFHTML Sample02.html字体与特特殊字

6、符符网页中经经常使用用的中文文字体有有：宋体、微微软雅雅黑、仿仿宋、 黑体体微软雅黑黑、仿宋宋、黑体体在启用用操作系系统的平平滑字体体特性时时才有较较好显示示效果。网页中中经常使使用的英英文字体体有：Arial、Tahoma、sans-serif特殊字符符：不断行空空格：版权字符符：注册商标标字符：断行字符符：字体与特特殊字符符DreamweaverCS4安装安装主程程序下载载：AdobeDreamweaverCS4lite（精简版版）序列号1192-1014-7077-3383-4280-7435安装CSS规则定义义窗口汉化包如Dreamweaver没有安装装在默认认路径下下，必须须注意选选

7、择正确确的安装装位置)默认路径径C:Program FilesAdobeAdobe Dreamweaver CS4zh_CNresources可能的路路径D:Program FilesAdobeAdobe Dreamweaver CS4zh_CNresources或D:AdobeDreamweaverCS4zh_CNresources搜狗搜索索引擎百度搜索索引擎建立网站站管理使用Dreamweaver建立网站站切忌直直接建立立网页，必须先先建立站站点管理理，在站点管理理器中创建空空白页面面后，才才开始正正式的网网页设计计与编辑辑工作。站点管理理器使Dreamweaver的设计工工作更加加智能化

8、化，使网网页排错错工作和和断链情情况得到到很大改改善。典型站点点结构：站点根(X:SitesSite01)imagesstylesguestbookIndex.aspIndex.html图片样式表留言簿程程序典型大型型网站文文件夹结结构站点根imagesstylesInformationProductsServiceDownloadGuestbookForum/bbsManage/admin图像CSS样式信息/公告/新闻（News）产品信息息服务/案例(Projects)下载留言簿动态网页页程序论坛动态网页页程序后台管理理程序动态网页页程序建立网站站管理的的步骤在站点菜菜单中选选择“新新建站点

9、点”设置站点名，站点URL地址，下一步步选择不使用服服务器技技术，下一步步设置站点点存储位位置（整个路径径必须全全英文），下一一步设置如何何连接到到远程服服务器为为无，下下一步，完成在文件面面板中右右击站点点根，新新建“images”文件夹夹在文件面面板中右右击站点点根，新新建“styles”文件夹夹在文件面面板中右右击站点点根，新新建index.html文件，此时可可开始编编辑该页页，作为为站点首首页创建站点点文件或或文件夹夹时必须须使用英英文或数数字，忌忌用中文文字符中文字符符在网站站服务器器中经常常会导致致不可预预计的错错误，所所以很少少用在Dreamweaver中编写网网页认识基本本操

10、作区区域认识属性性面板输入文字字字字体列表表编辑段落(回车)断行(Shift+回车)不断行空空格(Ctrl+Shift+空格)首行缩进进(两个全角角中文空空格)缩进项目列表表编号列表表插入特殊殊字符插入水平平线Dreamweaver手工编写写网页代代码的方方法课后练习习：使用Dreamweaver创建网站站结构正确安装装Dreamweaver和CSS面板汉化化包创建网站站结构编辑恰当当的字体体列表练习基本本的文字字排版通过切分分视图观观察文字字排版时时出现的的各种HTML编码练习不断断行回车车、空格格、首行行缩进、版权商商标符号号的插入入图片图片需要要使用相相对地址址或绝对对地址来来显示到到网

11、页中中图片可设设置属性性：来源src=“images/pic0free.jpg”宽度与高高度width=500height=300边框border=2水平间距距vspace=16垂直间距距hspace=16提示文字字alt=“图1链接、相相对地址址与绝对对地址链接的制制作特殊的绝绝对地址址在使用Dreamweaver的F12快捷键预预览时，经常会会在地址址栏出现现这种绝绝对地址址，这种种地址浏浏览正确确的网页页不一定定在发布布时能够够正常显显示，但但如果在在站点管管理器的的协调下下，能够够避免常常见的低低级错误误。表格表格列合合并表格行合合并表格属性性面板与与单元格格属性面面板表格排版版网页设

12、计计时，我我们会发发现文字字、列表表、图片片、表格格等内容容经常是是顺序往往下排列列 。如如何让文文字或图图片能够够在网页页设计时时放到指指定的位位置呢？最早的设设计方法法是使用用透明表格格，利用表表格的单单元格固固定网页页内可视视化元素素位置。如文字字，图像像，列表表，水平平线等。甚至可可见的表表格也经经常通过过透明表表格指定定位置。表格排版版示例首页 产品 服务 案例 资料下载 用户社区 联系我们LogoBannerFooterL_ListM_ListR_List第二部分分 层叠叠式样式式表排版版用统一的的方法规规范网页页设计，增强表表现力CSS样式表常见的样样式表定定义创建简单单的类，使

13、用类类统一相相似元素素的显示示风格。如统一小小标题的的风格重定义BodyPTDH1H2H3标签重定义复复合内容容a:linka:hovera:visiteda:active技巧：BODY设置长条条背景图图可以快快速美化化网页画画面P设置像素素单位的的缩进，可以方方便的控控制段落落样式P设置行高高，可使使文字精精确对齐齐使块状元元素水平平居中对对齐margin:0auto;/*水平居中中*/用CSS样式重定定义链链接（复复合内容容）效果果重定义a:link黑色无下下划线重定义a:hover黑色有下下划线重定义a:visited灰色有下下划线重定义a:active橙色无下下划线重定义a:link褐

14、色无下下划线重定义a:hover褐色有下下划线重定义a:visited红色有下下划线重定义a:active蓝色无下下划线CSS美美化技巧巧（1）背景图居居中纵向向平铺（多数长长版型网网页使用用）bodybackground-attachment: fixed;background-color:#FFF;background-image:url(/image/logo_home_c.png);background-repeat:repeat-y;background-position:centertop;背景图居居中横向向平铺（多数为为短版型型网页使使用）bodybackground-attac

15、hment: fixed;background-color:#FFF;background-image:url(/image/logo_home_c.png);background-repeat:repeat-x;background-position:left center;创建与链链接外部部样式表表外部样式式表是一一个独立立的样式式表代码码文件，我们可可以通过过链接网网页到不不同的样样式表来来改变网网站的整整体显示示风格我们甚至至可以利利用链接接不同的的精心设设计好的的样式表表将网站站的排版版格局进进行快速速转换，包括将将背景图图，背景景色彩进进行整体体转换，这样，在不同的的节日或或者季节

16、节，我们们就可以以快速装装扮网页页了。通过灵活活定义和和选择外外部样式式表，网网页的创创作风格格可以千千变万化化，学好网页页的排版版设计，样式表表技术是是一个必必须完整整掌握的的内容。结构与表表现的分分离拓展：制制作可更更换皮肤肤的网页页资料来源源原理：设置两个个风格不不同的网网页外部部样式，分别为为a.cssb.css在测试网网页的代代码中加加入这两两个样式式的链接接，并定定义title属性利用JS程序遍历历有title属性的样样式用按钮控控制哪个个样式产产生作用用容易出错错的地方方：资料中有有小错误误，注意意参数的的一一对对应关系系注意JS代码中的的大小写写严格区区分问题题盒子模型型1尺尺

17、寸寸完整清晰晰的理解解盒子模模型，是是学好CSS样式的首首要条件件盒子模型型2层层次关关系http:/ H1、H2、P、a:linka:hovera:visited等标签进进行重定定义使网页呈呈现如下下图效果果：鼠标标悬停到到链接上上，背景景变红色色有虚线线边框，小标题题为深绿绿色Body设置纵向向平铺的渐渐变图片片背景作业格式式：站点文件件夹压缩缩包第三部分分 导航航条与DIV+CSS排版用CSS样式做导导航条效效果准备导航航条背景景图片插入DIV容器标签签，定义义#Nav制作项目目列表定义特殊殊的CSS样式表，假设样样式名为为#Nav定义复合合内容#Nav ul定义复合合内容#Nav li

18、定义复合合内容#Nav a定义复合合内容#Nav a:link定义复合合内容#Nav a:visited定义复合合内容#Nav a: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;backgroun

19、d:#6cf; margin-bottom:5px;#menu height:30px;background:#09c; margin-bottom:5px;#mainContentheight: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#containe

20、r margin:0auto;width:900px;#header height:100px;background:#6cf; margin-bottom:5px;#mainContentmargin-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#Sid