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

《信息网络技术与网络出版发行04》由会员分享，可在线阅读，更多相关《信息网络技术与网络出版发行04（55页珍藏版）》请在装配图网上搜索。

1、第五章 网页编辑与设计授课教师：刘爽概览学习资源:w3school 在线教程 http:/了解：网页的制作流程以及常见的网页制作技术。目的：能够熟练的制作简单网页与进行网页排版。进阶：能够自主创建和管理动态ASP或ASP.net网站超文本标记语言、脚本语言与动态网页HTML 超文本标记语言设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中

2、。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。HTML超文本样例1.2.3.4.无标题文档5.6.7.HTML代码8.示范 9.斜体10.加粗11.12.缩进 Hello!13.14.二次缩进15.16.17.18.文件见HTML Sampl.html 简单的超文本可以用文本编辑器编写头头部部主主体体脚本语言常见的网页脚本语言有JavaScript和VBScript两种，当初开发出来的主要目的是为了解决服务器终端

3、语言，比如Perl，遗留的速度问题。当时服务端需要对数据进行验证，由于网络速度相当缓慢,只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。JavaScript的适应范围比VBScript更广泛，多数脚本采用Javascript，脚本语言能够使终端页面交互更为友好，增强用户的交互体验，便利用户的数据操作。脚本语言使静态的网页在与用户的鼠标或键盘输入的数据进行交互时，出现各种自动化的提示信息或页面动态。Javascript样例：使用下面的脚本可以在鼠标悬停和移出某区域时改变该区域CSS样式风格该脚本可使

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

5、Type 类型Type=square方形项目列表符号编号列表Type 类型Type=I编号列表(罗马数字)水平线Noshade 无阴影Color 色彩Size 粗细NoshadeColor=graySize=4水平线立体感消失水平线灰色4个像素粗HTML Sample02.htmlH1H2H3H4Size1 汉字Size2 Arial 汉字Size3 sans-serif 汉字HTML Sample02.htmlSize4 Tahoma 汉字Size2 Tahoma 汉字Size1 Tahoma 汉字Size5 汉字Size6 汉字HTML Sample02.html ABCDEF ABCDE

6、F ABCDEF ABCDEF ABCDEF ABCDEFHTML Sample02.htmlHTML Sample02.html网页中经常使用的中文字体有：宋体、微软雅黑、仿宋、黑体微软雅黑、仿宋、黑体在启用操作系统的平滑字体特性时才有较好显示效果。网页中经常使用的英文字体有：Arial、Tahoma、sans-serif特殊字符：不断行空格： 版权字符：©注册商标字符：®断行字符：字体与特殊字符字体与特殊字符Dreamweaver CS4安装1.安装主程序下载：AdobeDreamweaverCS4lite（精简版）2.序列号1192-1014-7077-338

7、3-4280-74353.安装CSS规则定义窗口汉化包如Dreamweaver没有安装在默认路径下，必须注意选择正确的安装位置)默认路径 C:Program FilesAdobeAdobe Dreamweaver CS4zh_CNresources可能的路径 D:Program FilesAdobeAdobe Dreamweaver CS4zh_CNresources或D:Adobe Dreamweaver CS4zh_CNresources搜狗搜索引擎百度搜索引擎建立网站管理使用Dreamweaver建立网站切忌直接建立网页，必须先建立站点管理，在站点管理器中创建空白页面后，才开始正式的网页

8、设计与编辑工作。站点管理器使Dreamweaver的设计工作更加智能化，使网页排错工作和断链情况得到很大改善。典型站点结构：站点根站点根(X:SitesSite01)imagesstylesguestbookIndex.aspIndex.html图片图片样式表样式表留言簿程序留言簿程序典型大型网站文件夹结构站点根imagesstylesInformationProductsServiceDownloadGuestbookForum/bbsManage/admin图像CSS样式信息/公告/新闻（News）产品信息服务/案例(Projects)下载留言簿 动态网页程序论坛 动态网页程序后台管理程序

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

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

11、 width=500 height=3003.边框 border=24.水平间距 vspace=165.垂直间距 hspace=166.提示文字 alt=“图1链接、相对地址与绝对地址超文本核心应用技术是链接链接，链接在网页中以相对地址与绝对地址的形式中使用与表现。通过链接，简单的文本才得以链接到各种网络文件与资源，乃至显示图像和播放动画、视频、声音等媒体形式。计算机在网络中寻找与打开网络资源时使用URL地址。但网页中并非单纯的使用URL作为网页制作网页时，需要正正确理解和使用相对地址与绝对地址确理解和使用相对地址与绝对地址。例子：HTML代码例子1HTML代码例子1HTML代码例子1HTML

12、代码例子1链接的制作文字链接的插入链接到外部网站时，使用URL（绝对地址）如:http:/邮件链接的插入图像链接（修改边框为“0”可隐藏链接带来的蓝色边框）图像上的热区链接网页内的锚点链接特殊的绝对地址在使用在使用DreamweaverDreamweaver的的F12F12快捷快捷键预览时键预览时，经经常常会会在地址在地址栏栏出出现这种绝对现这种绝对地址，地址，这种这种地址地址浏览浏览正确的正确的网页网页不一定在不一定在发发布布时时能能够够正常正常显显示，但如果在站点示，但如果在站点管理器的管理器的协调协调下，能下，能够够避免常避免常见见的低的低级错误级错误。表格  &nb

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

14、现力CSS样式表CSS是Cascading Style Sheet 的缩写。译作层叠样式表单。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS样式表分为内部样式表和外部样式表，内部样式表只对所在网页的内容产生风格上的影响。外部样式表被保存为独立的文件，可以链接到多个网页并对这些网页的风格产生影响。资料网站 http:/ P TD H1 H2 H3 标签3.重定义复合内容a:link a:hover a:visited a:active技巧：BODY设置长条背景图可以快速美化网页画面P设置像素单位的缩进，可以方便的控制段落样式P设置行高，可使文字精确对齐使块状元素

15、水平居中对齐 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/

16、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;创建与链接外部样式表外部样式表是一个独立的样式表代码文件，我们可以通过链接网页到不同的样式表

17、来改变网站的整体显示风格我们甚至可以利用链接不同的精心设计好的样式表将网站的排版格局进行快速转换，包括将背景图，背景色彩进行整体转换，这样，在不同的节日或者季节，我们就可以快速装扮网页了。通过灵活定义和选择外部样式表，网页的创作风格可以千变万化，学好网页的排版设计，样式表技术是一个必须完整掌握的内容。结构与表现的分离初学HTML的时候，我们经常用font标签定义文字的色彩、字体等控制表现的属性。CSS，则将表现的工作完全包揽下来，统一进行控制，HTML代码只负责顺序与层次嵌套关系。简单理解来说，标准的CSS网页，在删除CSS代码后，只能显示文字和元素之间的简单位置，不具备丰富的色彩和修饰能力，

18、也不能精确的定位元素表现被分离后，网站风格的统一管理与高效的网页排版成为可能。也方便了网页设计人员、网页程序开发人员与图文编辑之间的协作 http:/ b.css2.在测试网页的代码中加入这两个样式的链接，并定义title属性3.利用JS程序遍历有title属性的样式4.用按钮控制哪个样式产生作用容易出错的地方：1.资料中有小错误，注意参数的一一对应关系2.注意JS代码中的大小写严格区分问题http:/ 尺寸完整清晰的理解盒子模型，是学好完整清晰的理解盒子模型，是学好CSSCSS样式的首要条件样式的首要条件盒子模型2 层次关系http:/ 高浮动填充距离边界距离CSS“边框”样式实线边框虚线边

19、框边框线粗细边框线色彩CSS“列表”样式列表样式项目符号图像位置CSS“定位”样式DIV标签位置显示Z轴溢出文本内容作业4：制作CSS修饰的单页1.利用CSS样式对BODY H1、H2、P、a:link a:hover a:visited等标签进行重定义2.使网页呈现如下图效果：鼠标悬停到链接上，背景变红色有虚线边框，小标题为深绿色3.Body设置纵向平铺的渐变图片背景作业格式：站点文件夹压缩包第三部分 导航条与DIV+CSS排版用CSS样式做导航条效果1.准备导航条背景图片2.插入DIV容器标签，定义#Nav3.制作项目列表4.定义特殊的CSS样式表，假设样式名为#Nav5.定义复合内容#N

20、av ul6.定义复合内容#Nav li7.定义复合内容#Nav a定义复合内容#Nav a:link定义复合内容#Nav a:visited定义复合内容#Nav a:hover1.li需要Float:left;实现横向导航条效果2.a通过Display:block;使之成为盒子块状元素3.利用背景的垂直位移可以用同一张背景图实现背景变化效果http:/ 横向3栏#Container#Header#Menu/Navbar#MainContent#Footer#container margin:0 auto;width:900px;#container margin:0 auto;width:9

21、00px;#header height:100px;background:#6cf;ma#header height:100px;background:#6cf;margin-bottom:5px;rgin-bottom:5px;#menu height:30px;background:#09c;marg#menu height:30px;background:#09c;margin-bottom:5px;in-bottom:5px;#mainContentmainContent height:500px;background:#height:500px;background:#c cff f

22、f;margin-bottom:5px;margin-bottom:5px;#footer height:60px;background:#6cf;#footer height:60px;background:#6cf;#container margin:0 auto;width:900px;#container margin:0 auto;width:900px;DIV标准布局2 标准内容页#Container#Header#Menu/Navbar#MainContent#SideBar#Content#Footer#container margin:0 auto;width:900px;#

23、container margin:0 auto;width:900px;#header height:100px;background:#6cf;mar#header height:100px;background:#6cf;margin-bottom:5px;gin-bottom:5px;#mainContentmainContent margin-bottom:5px;margin-bottom:5px;#sidebar#sidebar float:leftfloat:left;width:200px;height:500px;width:200px;height:500px;backgr

24、ound:#9ff;background:#9ff;#content#content float:rightfloat:right;width:695px;height:500;width:695px;height:500px;background:#px;background:#cffcff;/;/*因因为为是固定是固定宽宽度，采用左度，采用左右浮右浮动动方法可有效避免方法可有效避免ieie 3 3像素像素bugbug*/#footer height:60px;background:#6cf;#footer height:60px;background:#6cf;DIV标准布局3 标准内容页

25、#Container#Header#Menu/Navbar#MainContent#SideBar1#SideBar2#Content#Footer#container margin:0 auto;width:900px;#container margin:0 auto;width:900px;#header height:100px;background:#6cf;mar#header height:100px;background:#6cf;margin-bottom:5px;gin-bottom:5px;#menu height:30px;background:#09c;margi#me

26、nu height:30px;background:#09c;margin-bottom:5px;n-bottom:5px;#mainContentmainContent height:500px;margin-bottom:height:500px;margin-bottom:5px;5px;#sidebar#sidebar float:leftfloat:left;width:200px;height:500px;width:200px;height:500px;background:#9ff;background:#9ff;#sidebar2#sidebar2 float:rightfl

27、oat:right;width:200px;height:500;width:200px;height:500px;background:#9ff;px;background:#9ff;#content margin:0 205px!important;margin:#content margin:0 205px!important;margin:0 202px;height:500px;background:#0 202px;height:500px;background:#cffcff;#footer height:60px;background:#6cf;#footer height:6

28、0px;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-decor

29、ation:none;学习资料：学习资料：15个个CSS技巧技巧http:/ Hack http:/ 学习资料由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。作业5 CSS模板修改CSS样式分析http:/www.freecsstemplates.org/download/zip/equivale

30、ncy/分析样式表文件如何在网页绘制网页布局与各种效果，并修改为中文版（必须修改字体为适合中文显示的微软雅黑或宋体）CSS中添加中文注释，例子：#logo /*定义顶部大定义顶部大Logo区域区域*/width:920px;/*宽宽920像素像素*/height:84px;/*高高84像素像素*/margin:0;/*边界边界0像素像素*/padding:40px 40px 0px 40px;/*上右左方填充上右左方填充40像素、下方像素、下方0填充填充*/color:#000000;/*文字颜色为黑色文字颜色为黑色*/分析方法：改参数，观察产生变化的部分即可明白设计目的分析方法：改参数，观察产生变化的部分即可明白设计目的