信息网络技术与网络出版发行04.ppt
第五章 网页编辑与设计,授课教师：刘爽,概览,学习资源:w3school 在线教程 http:/了解：网页的制作流程以及常见的网页制作技术。目的：能够熟练的制作简单网页与进行网页排版。进阶：能够自主创建和管理动态ASP或ASP.net网站,超文本标记语言、脚本语言与动态网页,HTML 超文本标记语言设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。,HTML超文本样例,无标题文档HTML代码示范 斜体加粗 缩进 Hello!二次缩进 文件见HTML Sampl.html 简单的超文本可以用文本编辑器编写,头部主体,脚本语言,常见的网页脚本语言有JavaScript和VBScript两种，当初开发出来的主要目的是为了解决服务器终端语言，比如Perl，遗留的速度问题。当时服务端需要对数据进行验证，由于网络速度相当缓慢,只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。JavaScript的适应范围比VBScript更广泛，多数脚本采用Javascript，脚本语言能够使终端页面交互更为友好，增强用户的交互体验，便利用户的数据操作。脚本语言使静态的网页在与用户的鼠标或键盘输入的数据进行交互时，出现各种自动化的提示信息或页面动态。,Javascript样例：,使用下面的脚本可以在鼠标悬停和移出某区域时改变该区域CSS样式风格该脚本可使TR行的样式在tr3 f_one和tr3 f_two之间变换Java脚本除了经常用于针对用户的鼠标与键盘操作，即时动态的改变显示内容或风格，也经常用于控制显示与隐藏重要的操作提示信息。如：在进行用户注册的时候，输入密码结束时，提示 密码是否足够安全或密码中有系统禁止的非法字符，或提示邮件地址不符合规范等。,常见HTML标签,HTML Sample02.html,H1H2H3H4Size1 汉字Size2 Arial 汉字Size3 sans-serif 汉字,HTML Sample02.html,Size4 Tahoma 汉字Size2 Tahoma 汉字Size1 Tahoma 汉字Size5 汉字Size6 汉字,HTML Sample02.html,ABCDEF ABCDEF ABCDEF ABCDEF ABCDEF ABCDEF,HTML Sample02.html,字体与特殊字符,网页中经常使用的中文字体有：宋体、微软雅黑、仿宋、黑体微软雅黑、仿宋、黑体在启用操作系统的平滑字体特性时才有较好显示效果。网页中经常使用的英文字体有：Arial、Tahoma、sans-serif特殊字符：不断行空格：断行字符：,字体与特殊字符,Dreamweaver CS4安装,安装主程序下载：AdobeDreamweaverCS4lite（精简版）序列号1192-1014-7077-3383-4280-7435安装CSS规则定义窗口汉化包如Dreamweaver没有安装在默认路径下，必须注意选择正确的安装位置)默认路径 C:Program FilesAdobeAdobe Dreamweaver CS4zh_CNresources可能的路径 D:Program FilesAdobeAdobe Dreamweaver CS4zh_CNresources或D:Adobe Dreamweaver CS4zh_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=500 height=300边框 border=2水平间距 vspace=16垂直间距 hspace=16提示文字 alt=“图1,链接、相对地址与绝对地址,超文本核心应用技术是链接，链接在网页中以相对地址与绝对地址的形式中使用与表现。通过链接，简单的文本才得以链接到各种网络文件与资源，乃至显示图像和播放动画、视频、声音等媒体形式。计算机在网络中寻找与打开网络资源时使用URL地址。但网页中并非单纯的使用URL作为网页制作网页时，需要正确理解和使用相对地址与绝对地址。例子：HTML代码例子1HTML代码例子1HTML代码例子1HTML代码例子1,链接的制作,文字链接的插入链接到外部网站时，使用URL（绝对地址）如:http:/邮件链接的插入图像链接（修改边框为“0”可隐藏链接带来的蓝色边框）图像上的热区链接网页内的锚点链接,特殊的绝对地址,在使用Dreamweaver的F12快捷键预览时，经常会在地址栏出现这种绝对地址，这种地址浏览正确的网页不一定在发布时能够正常显示，但如果在站点管理器的协调下，能够避免常见的低级错误。,表格,表格列合并,表格行合并,表格属性面板与单元格属性面板,表格排版,网页设计时，我们会发现文字、列表、图片、表格等内容经常是顺序往下排列。如何让文字或图片能够在网页设计时放到指定的位置呢？最早的设计方法是使用透明表格，利用表格的单元格固定网页内可视化元素位置。如文字，图像，列表，水平线等。甚至可见的表格也经常通过透明表格指定位置。,表格排版示例,第二部分 层叠式样式表排版,用统一的方法规范网页设计，增强表现力,CSS样式表,CSS是Cascading Style Sheet 的缩写。译作层叠样式表单。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS样式表分为内部样式表和外部样式表，内部样式表只对所在网页的内容产生风格上的影响。外部样式表被保存为独立的文件，可以链接到多个网页并对这些网页的风格产生影响。资料网站 http:/,常见的样式表定义,创建简单的类，使用类统一相似元素的显示风格。如统一小标题的风格重定义Body P TD H1 H2 H3 标签重定义复合内容a:link a:hover a:visited a:active技巧：BODY设置长条背景图可以快速美化网页画面P设置像素单位的缩进，可以方便的控制段落样式P设置行高，可使文字精确对齐使块状元素水平居中对齐 margin:0 auto;/*水平居中*/,用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:center top;背景图居中横向平铺（多数为短版型网页使用）bodybackground-attachment:fixed;background-color:#FFF;background-image:url(/image/logo_home_c.png);background-repeat:repeat-x;background-position:left center;,创建与链接外部样式表,外部样式表是一个独立的样式表代码文件，我们可以通过链接网页到不同的样式表来改变网站的整体显示风格我们甚至可以利用链接不同的精心设计好的样式表将网站的排版格局进行快速转换，包括将背景图，背景色彩进行整体转换，这样，在不同的节日或者季节，我们就可以快速装扮网页了。通过灵活定义和选择外部样式表，网页的创作风格可以千变万化，学好网页的排版设计，样式表技术是一个必须完整掌握的内容。,结构与表现的分离,初学HTML的时候，我们经常用font标签定义文字的色彩、字体等控制表现的属性。CSS，则将表现的工作完全包揽下来，统一进行控制，HTML代码只负责顺序与层次嵌套关系。简单理解来说，标准的CSS网页，在删除CSS代码后，只能显示文字和元素之间的简单位置，不具备丰富的色彩和修饰能力，也不能精确的定位元素表现被分离后，网站风格的统一管理与高效的网页排版成为可能。也方便了网页设计人员、网页程序开发人员与图文编辑之间的协作 http:/,拓展：制作可更换皮肤的网页,资料来源原理：设置两个风格不同的网页外部样式，分别为a.css b.css在测试网页的代码中加入这两个样式的链接，并定义title属性利用JS程序遍历有title属性的样式用按钮控制哪个样式产生作用容易出错的地方：资料中有小错误，注意参数的一一对应关系注意JS代码中的大小写严格区分问题,http:/,盒子模型1 尺寸,完整清晰的理解盒子模型，是学好CSS样式的首要条件,盒子模型2 层次关系,http:/,完整清晰的理解盒子模型，是学好CSS样式的首要条件,CSS“类型”样式,字体大小修饰（加粗、下划线、删除线、变体等）行高色彩,CSS“区块”样式,单词间距字母间距垂直对齐文本对齐,CSS“背景”样式,背景色背景图背景图重复背景图附加背景图位置,CSS“方框”样式,宽 高浮动填充距离边界距离,CSS“边框”样式,实线边框虚线边框边框线粗细边框线色彩,CSS“列表”样式,列表样式项目符号图像位置,CSS“定位”样式,DIV标签位置显示Z轴溢出,文本内容,作业4：制作CSS修饰的单页,利用CSS样式对BODY H1、H2、P、a:link a:hover a:visited等标签进行重定义使网页呈现如下图效果：鼠标悬停到链接上，背景变红色有虚线边框，小标题为深绿色Body设置纵向平铺的渐变图片背景作业格式：站点文件夹压缩包,第三部分 导航条与DIV+CSS排版,用CSS样式做导航条效果,准备导航条背景图片插入DIV容器标签，定义#Nav制作项目列表定义特殊的CSS样式表，假设样式名为#Nav定义复合内容#Nav ul定义复合内容#Nav li定义复合内容#Nav a定义复合内容#Nav a:link定义复合内容#Nav a:visited定义复合内容#Nav a:hoverli需要Float:left;实现横向导航条效果a通过Display:block;使之成为盒子块状元素利用背景的垂直位移可以用同一张背景图实现背景变化效果,http:/,DIV+CSS样式排版,DIV是特殊的盒子元素，通常也可以叫做容器，在HTML中可做对齐标签用，在使用CSS修饰时，可以出现各种显示效果。DIV标签也是层标签，层是一种特殊的网页布局元素现在网页的排版布局多数是使用DIV+CSS来完成学习资料：http:/,DIV标准布局1 横向3栏,#Container#Header#Menu/Navbar#MainContent#Footer,#container margin:0 auto;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:0 auto;width:900px;,DIV标准布局2 标准内容页,#Container#Header#Menu/Navbar#MainContent#SideBar#Content#Footer,#container margin:0 auto;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;/*因为是固定宽度，采用左右浮动方法可有效避免ie 3像素bug*/#footer height:60px;background:#6cf;,DIV标准布局3 标准内容页,#Container#Header#Menu/Navbar#MainContent#SideBar1#SideBar2#Content#Footer,#container margin:0 auto;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:0 205px!important;margin:0 202px;height:500px;background:#cff;#footer height:60px;background:#6cf;,常见缩写与简化,学习CSS时，我们通常会参考和分析各种制作精良的CSS样式模板，通常会存在简化写法。四个方位参数统一的简化写法：body font-family:Verdana;font-size:14px;margin:0;多个标签使用同一样式a:link,a:visited color:#333333;text-decoration:underline;a:active,a:hover color:#990000;text-decoration:none;学习资料：15个CSS技巧http:/,CSS Hack,http:/学习资料由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。,作业5 CSS模板修改,CSS样式分析http:/www.freecsstemplates.org/download/zip/equivalency/分析样式表文件如何在网页绘制网页布局与各种效果，并修改为中文版（必须修改字体为适合中文显示的微软雅黑或宋体）CSS中添加中文注释，例子：#logo/*定义顶部大Logo区域*/width:920px;/*宽920像素*/height:84px;/*高84像素*/margin:0;/*边界0像素*/padding:40px 40px 0px 40px;/*上右左方填充40像素、下方0填充*/color:#000000;/*文字颜色为黑色*/分析方法：改参数，观察产生变化的部分即可明白设计目的,
