网页编辑与设计理论讲义.ppt

第五章网页编辑与设计,授课教师：刘爽,概览,超文本标记语言、脚本语言与动态网页,HTML超文本标记语言设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。,HTML超文本样例,头部主体,脚本语言,常见的网页脚本语言有JavaScript和VBScript两种，当初开发出来的主要目的是为了解决服务器终端语言，比如Perl，遗留的速度问题。当时服务端需要对数据进行验证，由于网络速度相当缓慢,只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。JavaScript的适应范围比VBScript更广泛，多数脚本采用Javascript，脚本语言能够使终端页面交互更为友好，增强用户的交互体验，便利用户的数据操作。脚本语言使静态的网页在与用户的鼠标或键盘输入的数据进行交互时，出现各种自动化的提示信息或页面动态。,Javascript样例：,使用下面的脚本可以在鼠标悬停和移出某区域时改变该区域CSS样式风格该脚本可使TR行的样式在tr3f_one和tr3f_two之间变换Java脚本除了经常用于针对用户的鼠标与键盘操作，即时动态的改变显示内容或风格，也经常用于控制显示与隐藏重要的操作提示信息。如：在进行用户注册的时候，输入密码结束时，提示密码是否足够安全或密码中有系统禁止的非法字符，或提示邮件地址不符合规范等。,常见HTML标签,HTMLSample02.html,H1H2H3H4Size1汉字Size2Arial汉字Size3sans-serif汉字,HTMLSample02.html,Size4Tahoma汉字Size2Tahoma汉字Size1Tahoma汉字Size5汉字Size6汉字,HTMLSample02.html,ABCDEFABCDEFABCDEFABCDEFABCDEFABCDEF,HTMLSample02.html,字体与特殊字符,网页中经常使用的中文字体有：宋体、微软雅黑、仿宋、黑体微软雅黑、仿宋、黑体在启用操作系统的平滑字体特性时才有较好显示效果。网页中经常使用的英文字体有：Arial、Tahoma、sans-serif特殊字符：不断行空格：断行字符：,字体与特殊字符,DreamweaverCS4安装,安装主程序下载：AdobeDreamweaverCS4lite（精简版）序列号1192-1014-7077-3383-4280-7435安装CSS规则定义窗口汉化包如Dreamweaver没有安装在默认路径下，必须注意选择正确的安装位置)默认路径C:ProgramFilesAdobeAdobeDreamweaverCS4zh_CNresources可能的路径D:ProgramFilesAdobeAdobeDreamweaverCS4zh_CNresources或D:AdobeDreamweaverCS4zh_CNresources,搜狗搜索引擎百度搜索引擎,建立网站管理,使用Dreamweaver建立网站切忌直接建立网页，必须先建立站点管理，在站点管理器中创建空白页面后，才开始正式的网页设计与编辑工作。站点管理器使Dreamweaver的设计工作更加智能化，使网页排错工作和断链情况得到很大改善。典型站点结构：,图片样式表留言簿程序,典型大型网站文件夹结构,图像CSS样式信息/公告/新闻（News）产品信息服务/案例(Projects)下载留言簿动态网页程序论坛动态网页程序后台管理程序动态网页程序,建立网站管理的步骤,在站点菜单中选择“新建站点”设置站点名，站点URL地址，下一步选择不使用服务器技术，下一步设置站点存储位置（整个路径必须全英文），下一步设置如何连接到远程服务器为无，下一步，完成在文件面板中右击站点根，新建“images”文件夹在文件面板中右击站点根，新建“styles”文件夹在文件面板中右击站点根，新建index.html文件，此时可开始编辑该页，作为站点首页创建站点文件或文件夹时必须使用英文或数字，忌用中文字符中文字符在网站服务器中经常会导致不可预计的错误，所以很少用,在Dreamweaver中编写网页,认识基本操作区域认识属性面板输入文字字体列表编辑段落(回车)断行(Shift+回车)不断行空格(Ctrl+Shift+空格)首行缩进(两个全角中文空格)缩进项目列表编号列表插入特殊字符插入水平线Dreamweaver手工编写网页代码的方法,课后练习：使用Dreamweaver创建网站结构,正确安装Dreamweaver和CSS面板汉化包创建网站结构编辑恰当的字体列表练习基本的文字排版通过切分视图观察文字排版时出现的各种HTML编码练习不断行回车、空格、首行缩进、版权商标符号的插入,图片,图片需要使用相对地址或绝对地址来显示到网页中图片可设置属性：来源src=“images/pic0free.jpg”宽度与高度width=500height=300边框border=2水平间距vspace=16垂直间距hspace=16提示文字alt=“图1,链接、相对地址与绝对地址,链接的制作,特殊的绝对地址,在使用Dreamweaver的F12快捷键预览时，经常会在地址栏出现这种绝对地址，这种地址浏览正确的网页不一定在发布时能够正常显示，但如果在站点管理器的协调下，能够避免常见的低级错误。,表格,表格列合并,表格行合并,表格属性面板与单元格属性面板,表格排版,网页设计时，我们会发现文字、列表、图片、表格等内容经常是顺序往下排列。如何让文字或图片能够在网页设计时放到指定的位置呢？最早的设计方法是使用透明表格，利用表格的单元格固定网页内可视化元素位置。如文字，图像，列表，水平线等。甚至可见的表格也经常通过透明表格指定位置。,表格排版示例,第二部分层叠式样式表排版,用统一的方法规范网页设计，增强表现力,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）,背景图居中纵向平铺（多数长版型网页使用）bodybackground-attachment:fixed;background-color:#FFF;background-image:url(/image/logo_home_c.png);background-repeat:repeat-y;background-position:centertop;背景图居中横向平铺（多数为短版型网页使用）bodybackground-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层次关系,完整清晰的理解盒子模型，是学好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,#containermargin:0auto;width:900px;#headerheight:100px;background:#6cf;margin-bottom:5px;#menuheight:30px;background:#09c;margin-bottom:5px;#mainContentheight:500px;background:#cff;margin-bottom:5px;#footerheight:60px;background:#6cf;,#containermargin:0auto;width:900px;,DIV标准布局2标准内容页,#Container#Header#Menu/Navbar#MainContent#SideBar#Content#Footer,#containermargin:0auto;width:900px;#headerheight:100px;background:#6cf;margin-bottom:5px;#mainContentmargin-bottom:5px;#sidebarfloat:left;width:200px;height:500px;background:#9ff;#contentfloat:right;width:695px;height:500px;background:#cff;/*因为是固定宽度，采用左右浮动方法可有效避免ie3像素bug*/#footerheight:60px;background:#6cf;,DIV标准布局3标准内容页,#Container#Header#Menu/Navbar#MainContent#SideBar1#SideBar2#Content#Footer,#containermargin:0auto;width:900px;#headerheight:100px;background:#6cf;margin-bottom:5px;#menuheight:30px;background:#09c;margin-bottom:5px;#mainContentheight: