设为首页 | 加入收藏夹

八文网 - 汇聚八方文档 - 做最优秀的免费文档下载网站

通过本章学习

文档类型：

Microsoft PowerPoint PPT 演示文稿文档大小：311KB

通过本章学习,应该掌握以下内容:认识网页构成网页的基本要素制作网页的基本工具美化网页的基本工具网页制作的基本步骤
第1章网页制作初识
1.1 一个校园网的制作示例
1.1.1 主要网页画面
1.1.2 网页的基本功能
1.2 网页的基本要素
1.2.1 文字文字是网页发布信息所用的主要形式,由文字制作出的网页占用空间小,因此,当用户浏览时,可以很快的展现在用户面前.另外,文字性网页还可以利用浏览器中文件菜单下的另存为功能将其下载,便于以后长期阅读,也可对其进行编辑打印.但是没有编排点缀的纯文字网页,又会给人带来死板不活泼的感觉、使得人们不愿意再往下浏览.所以,文字性网页一定要注意编排,包括标题得字型字号,内容的层次样式,是否需要变换颜色进行点缀等等.
1.标题一个网页通常都有一个标题,表明本网页的主要内容.标题是醒目,是吸引浏览者能否注意的一个关键,因此对标题的设计是很重要的.
2.字号网页中的文字不能太大或太小.太大会使得一个网页信息量变,太小又使人们浏览时感到费劲.一个优秀网页中的文字,应统筹规划,大小搭配适当,给人以生动活泼之感觉.
3.字型在网页适当的位置采用不同的字体字型,也能使网页产生吸引人的效果.应该注意的是在报刊上变换字体字型非常普遍、它可以在不同的地方使用不同的字型.但在网页制作上却要慎重.因为有些美丽的字型在制作网页的计算机上有、但将来别人浏览你的网页时,浏览者的计算机上未必装有这种字体.这样浏览者就无法得到你预想的浏览效果,甚至适得相反.如果只是标题或少量的文字,可以将采用的特殊字体制作成图形方式,就可避免其他浏览者看不到的尴尬局面了.当文本内容较多时.可以利用表格形式来实现.
1.2.2 图形这里的图形概念是广义的,它可以是普通的绘制图形,可以是各种图像,还可以是动画.一幅优秀的网页除了有能吸引浏览者的文字形式和内容外,图形的表现功能是不能低估的.网页上的图形格式一般使用JPEG和GIF,这两种格式具有跨平台的特性,可以在不同操作系统支持的浏览器上显示.图形在网页中通常有如下应用.
1.菜单按钮网页上的菜单按钮有一些是由图形制作,通常有横排和竖排两种形式,由此可以转入不同的页面.
2.背景图形为了加强视觉效果,有些网页在整个网页的底层放置了图形,称作背景图.背景图可以使网页更加华丽,使人感到界面友好.但由于这是一个比较大的图形,需要占据较大的空间,致使网页的显示速度明显变慢,所以,近期的网页以及比较著名的访问量比较大网站一般都不设置背景图形.
1.2.3 链接标志链接是网页中一种非常重要的功能,是网页中最重要、最根本的元素之一.通过链接可以从一个网页转到另一个网页,也可以从一个网站转到另一个网站.链接的标志有文字和图形两种.制作一些精美的图形作为链接按钮,使它和整个网页融为一体.
1.2.4 交互功能Internet区别其他媒体的一个重要标志就是它的交互功能.例如在商务网站的页面上,人们经过浏览,选择了某一个产品、就需要将自己的决定通过Internet告诉这个网站,网站能够自动对该产品的数据库进行检索,及时回应有还是没有、数量,规格,价格等信息.如果用户选择确定,那么网站能够返回确认信息.像这种交互功能其他媒体是无法比拟的.通常网页的交互功能都是利用表单来实现的.表单是网页中站点服务器处理的一组数据输入域,当访问者单击按钮或图形来提交表单后,数据就会传送到服务器上.
1.3 网页制作和美化工具
1.3.1网页制作工具
1.超文本标识语言 Markup Language)是一种专门用于Web页制作的编程语言、用来描述超文本各个部分的内容、告诉浏览器如何显示文本,怎样生成与别的文本或图像的链接点.HTML文档由文本,格式化代码和导向其他文档的超链接组成.
2.FrontPage FrontPage是由Microsoft公司推出的新一代Web网页制作工具.
FrontPage使网页制作者能够更加方便,快捷地创建和发布网页,具有直观的网页制作和管理方法,简化了大量工作.FrontPage界面与等软件的界面极为相似,为使用者带来了极大的方便,Microsoft公司将FrontPage封装入Office之中、成为Office家族的一员,使之功能更为强大.
3.Dreamweaver Dreamweaver是由Macromedia公司推出的一款在网页制作方面大众化的软件,它具有可视化编辑界面,用户不必编写复杂的HTML源代码就可以生成跨平台,跨浏览器的网页,不仅适合于专业网页编辑人员的需要、同时也容易被业余网友们所掌握.另外,Dreamweaver的网页动态效果与网页排版功能都比一般的软件好用,即使是初学者也能制作出相当于专业水准的网页,所以Dreamweaver是网页设计者的首选工具.Dreamweaver支持动态HTML,并采用了Roundtrip HTML技术,从而奠定了在网页高级设计功能方面的领先地位.在进行网页设计过程
中、动态HTML技术能够让用户轻松设计复杂的交互式网页,产生动态效果;而Roundtrip HTML技术则可以真正支持HTML源编辑模式,不会产生冗余代码、使网页渲染速度加快.因此,Dreamweaver是一种可以满足多层次需求,功能强大的可视化专业级网页设计及制作工具.
1.3.2网页美化工具为了使制作的网页更为美观,用户在利用网页制作工具制作网页时,还需利用网页美化工具对网页进行美化.
1.Photoshop Photoshop是由Adobe公司开发的图形处理软件,它是目前公认的PC机上最好的通用平面美术设计软件,它功能完善,性能稳定,使用方便,所以在几乎所有的广告,出版,软件公司、Photoshop都是首选的平面制作工具.
2.Fireworks Fireworks是由Macromedia公司开发的图形处理工具,它的出现使Web作图发生了革命性的变化.因为Fireworks是第一套专门为制作网页图形而设计的软件,同时也是专业的网页图形设计及制作的解决方案.作为一款为网络设计而开发的图像处理软件,Fireworks还能够自动切割图像,生成光标动态感应的JavaScript程序等等、而且Fireworks具有强大的动画功能和一个相当完美的网络图像生成器.
3.Flash Flash是美国Macromedia公司开发的矢量图形编辑和动画创作的专业软件,它是一种交互式动画设计工具,用它可以将音乐,声效,动画以及富有新意的界面融合在一起,以制作出高品质的网页动态效果.它主要应用于网页设计和多媒体创作等领域,功能十分强大和独特、已成为交互式矢量动画的标准,在网上非常流行.Flash广泛应用于网页动画制作,教学动画演示、网上购物,在线游戏等的制作中.
1.4 网页制作的基本步骤
1.4.1 整体规划进行网站的整体规划也就是组织网站的内容和设计其结构.网页制作者在明确网页制作的目的及要包括的内容之后,接下来就应该对网站进行规划,以确保文件内容条理清楚,结构合理,这样不仅可以很好地体现设计者的意图,也将使网站可维护性与可扩展性增强.
①层状结构层状结构(如图1.8所示)类似于目录系统的树型结构,由网站文件的主页开始,依次划分为一级标题,二级标题等等、逐级细化,直至提供给浏览者具体信息.主页页面1页面2页面3页面4页面5页面6页面7一级标题二级标题图1.8 层状结构
②线性结构线性结构(如图1.9所示)类似于数据结构中的线性表,用于组织本身的线性顺序形式存在的信息,可以引导浏览者按部就班地浏览整个网站文件.这种结构一般都用在意义是平行的页面上.通常情况下,网站文件的结构是层状结构和线性结构相结合的
.这样可以充分利用两种结构各自的特点、使网站文件既具有条理性,规范性,又可同时满足设计者和浏览者的要求.页面图1.9 线性结构
③Web结构Web结构(如图1.10所示)类似于Internet的组成结构,各网页之间形成网状连接,允许用户随意浏览.页面8图1.10 Web结构
1.收集整理资料
2.准备素材
3.内容规划
1.4.2 网页设计与制作
1.静态网页的设计与制作在开始制作网页之前、建议应用少量时间对自己要制作的主页进行总体设计,例如希望主页是怎样的风格,应该放一些什么信息,其他网页如何设计,分几层来处理等等.通常在进行网页开发时,首先都进行静态网页的制作,然后再在其中加入脚本程序,表单等.静态网页仅仅用来被动地发布信息,而不具有任何交互功能的网页,它是Web网页的重要组成部分.一个好的网站首先是内容丰富、其次就是网页设计美观.对于
网页的外观设计,提供以下建议:
(1)不要先决定网页的外观,然后迫使自己去适应它、应该根据网站的访问者对象,要提供的信息以及制作目标得出一个最适合的网页架构.
(2)每页排版不要太松散或用太大的字,尽量避免访问者浏览网页时要作大幅度的滚动,对于篇幅太长的一页可以使用内部链接解决.须知,在一页的上部是显眼而宝贵的地方、不要只放几个粗大的字或图片.
(3)切勿以800×600以上的分辨率设计网页,常用的分辨率是640×480及800×600.现在国内的站点基本上都是800×600,但是如果主要是面向国外访问者的站点、建议使用640×480.
(4)不应在每页中插入太多的广告.相信任何访问者都不会喜欢浏览尽是些广告的网页,要考虑该页内容与广告的比例,广告太多,只会令人烦厌.
(5)不要每页都采用不同的墙纸、以免每次转页时都要花费过多的时间去下载,采用相同的底色或墙纸还可以增强网页一致性,以树立自己的风格.
(6)底色或墙纸必须与文字对比强烈,以易于阅读.这并不是要求永远使用鲜亮的背景搭配深色的文字,但深色背景常要求与主题配合,有较多的顾虑,如果网页是文章式或是包含大量文字,不妨在底色与文字的搭配上下些工夫、力求让访问者能够舒适地阅读网页.
(7)不要把图片白色当作透明,要知道别人的系统不一定把内定底色设为白色,解决的办法除了真的把该网页的底色设为白色之外,最好还是用图片编辑工具将图片设为透明颜色.
2.为网页的添加动态效果静态网页制作完成后,接下来的工作就是为网页添加动态效果,包括一些脚本语言程序和数据库程序的设计,以及加入动画效果等.
1.4.3 测试网页当网页设计人员制作完所有网站页面之后,需要对所设计的网页进行审查和测试,测试内容包括功能性测试和完整性测试两个方面.所谓功能性测试就是要保证网页的可用性,达到最初的内容组织设计目标,实现所规定的功能,读者可方便快速地寻找到所需的内容.完整性测试就是保证页面内容显示正确,链接准确,无差错无遗漏.如果在测试过程中发现了错误,就要及时修改、在准确无误后,方可正式在Internet上发布.在进行功能性测试和完整性测试后,有的还需要掌握整个站点的结构以备日后的修改.
1.4.4 网页上传发布网页设计好,必须把它发布到互连网上,否则网站形象仍然不能展现出去.发布的服务器可以是远程,也可以是本地,但必须支持ASP,因为动态程序是建立在ASP基础上的.FrontPage和Dreamweaver的基本操作创建站点的方法管理站点的方法能够为站点添加网页导入文件到当前站点的方法发布站点的方法
第2章创建站点
2.1 利用FrontPage 2002创建站点
2.1.1 FrontPage 2002简介
1.FrontPage 2002的特色(1)强大的网页设计功能可以智能地完成HTML文本的编辑,并可以针对不同的浏览器对网页进行设置;可以提供对多种版本的浏览器的支持;完善了所见即所得的网页编辑操作(2)丰富的网页设计模板,设计向导和主题样式提供了多种网页设计模板,网页设计向导和主题样式.使用这些模板,向导和样式,即使是初学者也可以设计出具有专业水准的网站.
2.FrontPage 2002的新增功能FrontPage 2002在FrontPage 2000的原有功能基础上增加了图片库和增强的绘图工具,优化了更新,控制与管理站点的方法.还增加了更多的表格格式选项、Office剪贴板任务窗格,网页选项卡,自定义链接栏和电子商务等其他新功能.
3.FrontPage 2002工作界面(1)标题栏(2)菜单栏(3)常用工具栏(4)格式工具栏(5)窗口栏・网页视图网页视图是进行网页编辑的操作界面.・文件夹视图文件夹视图的功能有些类似于Windows资源管理器,主要是用来对网站的目录和文件夹进行管理.
・报表视图报表视图主要用于查看与网页制作有关的各项参数.・导航视图导航视图用来显示和编辑网页的导航关系.・超链接视图超链接视图显示的是站点中的某个网页与其他网页之间的关系,・任务视图任务视图用来查看网站和网页设计的完成情况.
(6)状态栏
2.1.2 创建站点
1.创建新站点
①选择文件| 新建| 网页或站点命令,在窗口栏打开新建网页或站点窗格;
②单击新建下的空白站点超级链接,打开Web站点模板对话框;
③单击站点模板中的空白站点图标,在指定新站点的位置文本框中输入新站点的位置.单击确定按钮.
注意:在创建站点选择路径时,最好选择某个文件夹作为站点、而不要选择某个磁盘分区(例如F盘)作为站点、否则可能会导致整个磁盘分区瘫痪.
2.导入一个已存在的站点要导入一个站点、首先应选择文件菜单下的导入命令,然后根据提示、依次选择需导入的站点即可.
3.将文件夹转换为站点FrontPage 2002中可以将一个已经存在的文件夹转换为站点
2.1.3 管理站点
1.打开站点单击工具栏中的打开按钮,弹出打开文件对话框,在打开文件对话框中选择要打开得网页,选中之后,单击打开按钮,
2.重命名站点在创建站点时,如果没有为站点创建一个好的名称,可以重新为站点命名.重命名Web站点时,FrontPage 2002会用新站点名称自动更新所有内部超链接以及其他站点设置.
3.删除站点如果创建的站点不理想,修改起来又十分麻烦,可以将站点删除.在FrontPage 2002中选择文件夹视图,并选择要删除的站点、单击Delete键,或单击鼠标右键,从弹出的快捷菜单中选择删除命令,就可以删除所选的站点了.
注意:应用手动方式删除文件,删除的文件会自动放置于回收站中、而应用删除命令方式删除文件,被删除的文件直接从磁盘中删除,是不可恢复的.
2.1.4 为站点添加网页创建完站点、接下来的任务就是为站点添加网页.在FrontPage 中、为站点添加网页的方法有两种.一种是:单击工具栏中的新建网页按钮或者按快捷键CtrlN,打开一个空白网页,设计者可以在网页编辑区编辑自己的网页;另一种是:选择文件|新建|网页或站点命令,在打开的新建网页或站点窗格中单击网页模板超级链接,利用网页模板创建网页.
2.1.5 导入文件到当前站点站点设计者可以通过导入一个页面而减轻自己的工作量,并吸收别人成功的经验(当然要得到版权的许可).导入方法与导入站点的方法类似.
2.1.6 发布站点
1.设置浏览器的兼容性
2.测试站点(1)查看站点中的所有内部超链接(2)验证各个外部超链接的有效性(3)修复断开的超链接(4)更新超链接
2.2 利用Dreamweaver 4.0创建站点
2.2.1 Dreamweaver 4.0简介
1.Dreamweaver 4.0的界面(1)菜单栏(2)工具栏(3)对象面板(4)浮动面板(5)文档窗口(7)启动面板(8)属性面板
2.Dreamweaver的视图作为一种所见即所得的网页编辑软件,Dreamweaver自动在用户创建网页时生成底层的HTML代码、同时提供了很好的HTML代码编辑功能.使用工具栏中的视图切换按钮可以很方便地切换到代码视图,以便查看当前编辑网页的HTML源代码.
2.2.2 定义站点
1.站点窗口在Dreamweaver 4.0的编辑窗口,选择Site|New Site菜单,可以打开站点窗口.
站点窗口是Dreamweaver另一个重要的窗口,左半部是远程站点的目录,一般显示为空、只有在FTP连通状态下才有显示内容;右半部是当前编辑中的本地目录,有点像windows的资源管理器.
2.定义站点
方法1:
在站点窗口的下拉菜单选择最后一项Define Sites,弹出Define Sites对话框,点击New按钮定义一个新网站.
方法2:
在编辑窗口或站点窗口选择命令菜单Site | New Site选项、弹出Site Definition for Unnamed Site对话框,设置结束单击OK 按钮.
2.2.3 站点的基本操作如果要打开站点、可以在文档窗口或站点窗口中单击Site菜单的Open Site命令,然后在弹出列表中选择当前已经定义过的站点名称.也可以使用键盘快捷键F8,此时将打开最后一次打开的站点窗口.
2.复制站点若要复制当前站点、可以使用文档窗口或站点窗口中Site菜单的Define Site命令,打开Define Site对话框.选中要复制的站点名称,单击Duplicate(复制)按钮即可对当前站点进行复制操作.
3.编辑站点如果要更改当前站点设置,比如对站点进行修改站点名称,设置参数选项等编辑操作,可以使用上面的方法打开Define Site对话框,选中一个站点后单击Edit按钮,即可打开该站点的定义对话框进行站点编辑.
4.删除站点在Dreamweaver 4.0中删除一个站点非常容易,在弹出的Define Site对话框中、单击Remove(删除)按钮就可以删除选中的站点.
HTML及其功能利用HTML创建和测试Web页的方法利用HTML设置标题和文字利用HTML设置段落利用HTML进行文本格式的处理利用FrontPage 2002和Dreamweaver 4.0处理文本
第3章网页文本的处理
3.1 利用HTML处理文本
3.1.1 HTML基础
1.标记符标记符又称标签,HTML是影响网页内容显示格式的标记符集合,浏览器根据标记符决定网页的实际显示效果.
在HTML中、所有的标记符都用尖括号括起来.例如,表示HTML标记符.绝大多数标记符都是成对出现的,包括开始标记符和结束标记符. 如.
HTML标记符是不区分大小写的,但通常约定标记符使用大写字母、这有利于HTML文档的维护.
属性是用来描述对象特征的特性.在HTML中、所有的属性都放置在开始标记符的尖括号里、属性与标记符之间用空格分隔、属性的值放在相应属性之后,用等号分隔、而不同的属性之间用空格分隔.格式为:受影响的内容HTML属性通常也不区分大小写.
2.HTML文档的基本结构一个典型的HTML文本的基本结构形式如下:文本标题文本内容
上述文档用到四种标记符,其意义如下:
(1)HTML标记符这两个标记符是HTML文档的标记符.处于文档的最前端,表示文档的开始,即浏览器从开始解释.而则位于文件的最后一行、这样的结果表示这一整份的文档都是HTML语法的文档.
(2)HEAD标记符是HTML文件头标记符,用来描述HTML首部的内容、说明文档的整体信息.所有首部信息并不会出现在利用WWW浏览器所看到的窗体中.通常与某些标记符一起使用,如标记符.
(3)TITLE标记符指的是一份文档的标题.通常来说,每一份文档都应该有一个标题来简述这一份文档的特色或是主题.对于WWW浏览器而言、标题所在的位置虽然依照浏览器的不同而不同、但是大部分都位于浏览器的最上方.
(4)BODY标记符指的是定义出一个HTML文档的体部,位于首部下面.在标记符内的文字,所有使用标记符的地方都可以经浏览器正确地显示在浏览器窗体中.
3.创建和测试Web页由于HTML文件的实质就是文本文件,因此可以用任何文本编辑器编辑HTML文件,通常可以使用Windows系统中的记事本程序.另外,由于系统中捆绑了IE5或IE5.5(Internet Explorer 5.0或5.5),因此用户在Windows中可以方便地对Web页进行简单的测试.
(1)创建Web页保存了Web页之后,在所选择的文件夹中将包含所创建的Web页,可以由IE将其打开.
(2)发布Web页用户创建了Web页之后,通常可以直接将其保存在硬盘,软盘或光盘上,作为一种电子文档,也可以将其发布到Internet上,以便让全世界的浏览者都能够进行浏览.发布Web页时应按以下步骤进行.
①创建本地站点
②申请网页空间
③用FTP上传网页
3.1.2 标题处理在HTML中、用户可以通过Hn标记符来标识文档中的标题和副标题,其中n是1到6的数字.表示最大的标题,表示最小的标题.使用标题样式时,必须使用结束标记符.
标题文字标记符的格式:标题文字属性align用来设置标题在页面中的对齐方式:left(左对齐),center(居中)或right(右对齐).
如:计算机系
.标记符默认显示宋体.标记符会自动插入一个空行、不必再用空行标记符.在一个标题行下无法使用不同大小的字体.
与HEAD中的.定义的网页标题不同、标题格式显示在浏览器窗口内、而不显示在浏览器的标题栏中.
3.1.3 段落处理在HTML中段落处理是通过段落标记来完成的,常用的段落标记符有:
1.注释标记符
HTML的注释标记符的格式为:
2.强制换行标记符强制换行标记符为、放在一行的末尾,可以使后面的文字,图片,表格等显示于下一行、而又不会在行与行之间留下空行、即强制文本换行.
3.强制换段标记符在HTML文档中、无法用多个回车,空格,Tab键来调整文档段落的格式.要用HTML的标记符来强制换行、分段.
(1)强制换段标记符
强制换段标记符的格式为:文字(2)设置段落标记符
设置段落标记符的格式为:
4.显示预排格式标记符当用其他编辑工具编排好了一段文字后,其中很可能有一些HTML文件不支持的控制符号,如同车,多个空格,Tab键等.如果希望在浏览网页时仍保留在编辑工具中已经排好的段落格式,可以使用标记符将预先排好的格式保留下来.
显示预排格式标记符的格式为:预先排好的格式
5.分区显示标记符
分区显示标记符的格式为:文本或图像
6.水平线在页面中插入一条水平标尺线(Horizontal Rules),可以使不同功能的文字分隔开、看起来整齐,明了.
水平线标记符的格式为:
3.1.4 文本格式处理文本格式处理包括文字设置和格式处理.
1.文字设置在网页中为了增强页面的层次,其中的文字可以用不同的大小,字体,字型和颜色,通常用FONT标记符来完成.
FONT标记符设置格式为:被设置的文字size属性是字号属性,用于控制文字的大小,它的取值既可以是绝对值,也可以是相对值.
face属性是字体标记符,用来指定字体样式.color属性可用来控制文字的颜色,属性值可以是颜色名称或十六进制值.
2.格式处理
HTML中的格式标记符有:标记符之间加入的文本将会在浏览器中按两边缩进的方式显示出来.标记符是指Directory List,用来创建一个普通的列表; 用来创建列表中的上层项目;用来创建列表中最下层项目;和都必须放在标志对之间.
标记符指Ordered List,它是用来创建一个标有数字的列表;标记符用来创建一个标有圆点的列表;标记符只能在或标记符内使用,此标记符用来创建一个列表项.
3.设置页面属性(1)设置页面背景颜色标记符中使用bgcolor属性可以为网页设置背景颜色.
(2)设置页面背景图像单纯使用一种颜色作为背景显然有些单调、网页设计者也可选择特定图案作为页面的背景,使用BODY标记符的background属性即可.HTML语句为:
(3)设置文字和超链接的颜色在设置了背景图案或背景颜色后,常常需要更改正文字符和超链接的颜色,以便与背景相适应.设置正文和超链接颜色时,可以使用BODY标记符的和alink属性.其中、text属性用于设置正文的颜色;link属性用于设置未被访问的超链接的颜色;vlink用于设置已被访问过的超链接的颜色;alink用于设置活动超链接(即当前选定的超链接)的颜色.
3.2 其他处理网页文本的方法
3.2.1 利用FrontPage 2002处理网页文本
1.输入文本利用FrontPage 2002创建一个网页后,在文档的编辑区域内、可以看到闪烁的光标,在此可以输入文字.在输入文字的过程中、光标也跟着向后移动.
2.编辑文本应用FrontPage 2002编辑文本的基本操作与其他的文字处理软件有相同之处.常用的文本编辑操作有:选择,移动,复制,粘贴,剪切,删除,查找和替换等.
3.设置文本格式在FrontPage 2002中、不但可以非常灵活地设置各种文本格式,而且可以设置斜体,下划线,上下标,空心、阴影等各种特效.
4.段落式样和对齐方式(1)段落式样FrontPage2002为网页设计者提供了16种样式,其中6种是段落样式.
(2)对齐方式在格式栏中有4个按钮与段落的操作有关,这4个按钮分别代表左对齐,右对齐,居中对齐和分散对齐.
5.编号列表在FrontPage 2002中、设置编号列表可以利用按钮和按钮,是用默认的标准项目符号,也可以自定义项目符号列表.
6.为段落添加水平线
3.2.2 利用Dreamweaver 4.0处理网页文本Dreamweaver 4.0中对文本的输入及编辑,与Word极其相似.
1.编辑文本(1)换行
①自动换行:在输入文字时,若某一行的长度超过了Dreamweaver窗口的显示范围,文字将自动换到下一行.
②利用Enter键换行:在输入文字后按Enter键,文字成段,且上下段之间空一行.
③利用ShiftEnter键换行:如果想要将文字手动换行、中间又不能出现空白行、可以按ShiftEnter键.
(2)插入特殊的字符有时为了内容的需要、要在网页中插入一些键盘上没有的特殊字符,在Dreamweaver 4.0 中、这些特殊字符不仅可以通过Insert菜单下的Special Character命令来插入,还可以通过对象面板来直接插入.
2.查找替换文本的内容如果要在文档中查找或替找某个文字,可利用Dreamweaver 4.0提供的查找和替换功能.选择Edit|Find and Replace(查找与替换)命令,打开Find and Replace对话框,在Dreamweaver 4.0中设置文本格式可以通过属性面板,类似与Microsoft Word中对文本的属性设置,包括段落的格式,字体,字号,字的颜色,字体加粗倾斜,对齐方式(左对齐居中右对齐),文字所链接的路径或URL等.
利用FrontPage 2002创建表格的四种方法编辑表格的方法设置表格的属性的方法用表格设计页面布局利用HTML和Dreamweaver 4.0创建表格的方法
第4章网页表格的处理
4.1 利用FrontPage 创建并编辑表格
4.1.1 创建表格表格以行和列的形式来组织信息,具有容量大,结构严谨和效果直观等多个优点、是网页中不可缺少的记录或总结工具,比如个人简历,产品信息,业务报表甚至家庭理财都能用到表格.
FrontPage 2002提供了强大的制表功能,使得在制作网页的过程中插入表格的操作显得简便,快捷.
在FrontPage 2002中、创建表格有以下4种方法.
1.使用菜单命令创建表格如果用户希望准确地设置要创建的表格的行、列数,可以通过执行菜单命令创建所需的表格.使用这种方法,可以同时设置表格所有的属性,如行和列的数目,边框宽度等.
①选择表格| 插入| 表格命令,打开图4.1所示的插入表格对话框;
②输入行数,列数,设置表格的对齐方式,边框的粗细,单元格边距和间距、单击确定按钮,即可得到相应的表格.
2.使用命令按钮创建表格在编辑网页时,使用常用工具栏中的插入表格按钮,可以快速地在网页中插入一个表格.插入表格时用户可以自由选择表格所包含的行数和列数.
3.绘制表格利用前面两种方法可以建立n乘m单元数的表格,单元格大小会自动平均分配.如果需要的表格比较简单,则可以手动绘制表格.
手动绘制表格的操作步骤如下:
①选择视图|工具栏|表格命令,打开表格对话框;
②单击手绘表格按钮,在编辑区按下鼠标左键并拖动,即可划出表格边框,再在边框内添加线条即可画出需要的表格.
如果有画错的线条可以用表格中的擦除工具擦除.
4.将文本转换成为表格如果有现成的文本,可以把文本转换成为表格.
4.1.2 表格的编辑
1.修改表格应用菜单或命令按钮创建后的表格,有些是需要经过修改才能应用的.修改表格主要包括修改表格的大小,合并单元格,拆分单元格等操作.
(1)修改表格大小在FrontPage 2002中、修改表格的大小有以下两种方法.
通过鼠标拖拽法可以粗略地调整表格的大小.通过表格属性对话框可以精确地调整表格的大小.
(2)合并单元格在FrontPage 2002中合并单元格的方法有以下三种:先选择要合并的单元格,然后执行表格|合并单元格命令即可.选择要合并的单元格,在选中的单元格中单击鼠标右键,从弹出的快捷菜单中选择合并单元格命令.
选择要合并的单元格,单击表格工具栏上的合并单元格按钮.
(3)拆分单元格拆分单元格与合并单元格是两个逆操作.拆分单元格就是将一个单元格拆分为多个单元格.在FrontPage 2002中拆分单元格的方法有以下几种.
将光标放在要拆分的单元格内、执行表格|拆分单元格命令,弹出拆分单元格对话框,如图4.9所示.在该对话框中选择拆分为列或拆分为行、单击确定按钮.
将光标放在要拆分的单元格内、单击鼠标右键,从弹出的快捷菜单中选择拆分单元格命令.
将光标放在要拆分的单元格内、单击表格工具栏上的拆分单元格按钮.
2.在表格中添加文字和图片创建一个表格以后,就可以在表格中添加相应的内容了,在表格中添加的内容有文字与图片两种形式.
(1)在表格中添加文字在创建好的表格内按要求输入文字,调整文字的字号,字体,对齐方式等.
(2)在表格中插入图片
①选中要插入图片的单元格,选择插入| 图片| 来自文件(根据需要选择图片的来源)命令,打开图片对话框;
②在对话框中选择图片,选中图片文件之后,单击插入按钮,则图片及插入到相应的单元格里.调整图片大小及位置.
3.删除表格(1)删除单元格在FrontPage 2002中如果要删除某个单元格,可以通过以下方法:选择要删除的单元格,执行表格|删除单元格命令.选择要删除的单元格,并单击鼠标右键,从弹出的快捷菜单中选择删除单元格命令.
(2)删除列或行在FrontPage 2002中如果要删除某列或某行、可以采用以下方法:选择要删除的列或行、执行表格|删除单元格命令即可.选择要删除的列或行、并单击鼠标右键,从弹出的快捷菜单中选择删除单元格命令.
(3)删除整个表格如果要删除某个表格,只需选中此表格中的所有单元格,然后单击右键并从弹出的快捷菜单中选择删除单元格命令即可.删除整个表格的操作方法如下:
注意:如果在删除表格,单元格,行或列时,使用Delete键删除,则只删除该表格,单元格,行或列中的文本,而不是删除表格.
4.1.3 设置表格的属性将光标置于表格中、然后单击右键并从弹出的快捷菜单中选择表格属性命令,在打开的表格属性对话框中进行表格属性设置.
1.表格的布局(1)表格的对齐方式FrontPage 2002中提供了4种对齐方式:默认,左对齐,右对齐和居中.单击表格属性对话框中的对齐方式下拉列表框,可从中选择所需的对齐方式.
(2)表格的浮动方式此功能有点像图片的环绕功能.创建一个表格后,表格的两侧是不能输入任何文字的.
如果进行了浮动设置,就可以获得与图片环绕差不多的效果了.FrontPage 2002中提供了3种浮动方式:默认,左对齐和右对齐.
(3)单元格的边距与间距如果想设置表格线与表格内容间的距离或两单元格间的距离,可以通过单元格边距与单元格间距两个选项来设置.
2.为表格添加背景为表格添加背景也要应用表格属性对话框.表格背景可分为两种形式:一种是为表格添加背景颜色,另一种是为表格添加背景图片.
(1)为表格添加背景颜色选中表格或单元格后,单击表格属性对话框中的颜色选项右侧的向下箭头,从弹出的颜色面板中选择所需的背景颜色,则此颜色就会显示在表格的背景层中.
(2)为表格添加背景图片选中表格或单元格后,启用表格属性或单元格属性对话框中的使用背景图片复选框,然后选择一个图片作为表格的背景,可为表格添加背景图片.
3.为表格添加边框在FrontPage中如果想要改变表格的边框,可以采用以下方法:选择要设置边框的表格,执行格式| 边框和底纹命令.在要设置边框的表格中单击鼠标右键,从弹出的快捷菜单中选择表格属性命令,打开表格属性对话框,在边框选项组中进行相关设置.
4.1.4使用表格设计页面布局在网页设计中表格还有一个重要的作用,就是设计页面布局.一个空白网页布置起来比较困难,尤其是一些复杂的页面.这时可以利用表格将网页分成若干个单元格,每个单元格对应网页中的一个部分.然后,对每一部分分别进行设计和制作,这样就可以使复杂的网页设计简化,而且所设计的网页清晰,有条理性.
另外,在很多网页上都有各种细线的布局效果,使得页面简洁明快、条理清楚.这些细线要么是用图像的方式生成,要么是利用表格的各种特性制作而成.使用表格实现这些细线可以使页面文件更小,下载更快、因此更为实用.细线效果大致可以分为两类,一类是表格框线,另一类是各种横竖分隔线.
用表格布置页面时,首先要规划页面的布置,然后利用表格的平铺和嵌套,将网页中的各元素定位在各自的位置上.由于浏览器在下载网页时,先下载整个表格,然后再下载表格中的内容.所以在用表格布置页面时,不能将整个网页的内容都放在一个大表格中、以免影响网页的下在速度.
4.2 其他处理网页表格的方法
4.2.1 利用HTML处理网页表格
1.表格的基本构成通常在HTML中创建一个普通的表格应包括以下标记符:TABLE标记符用于定义整个表格,表格内的所有内容都应该位于和之间.
(2)CAPTION如果表格需要标题,那么就应该使用CAPTION标记符将表格标题包括在和之间.
TR标记符用于定义表格的行、对于每一个表格行、都对应一个TR标记符.TR标记符的结束标记符可以省略.
(4)TD和TH在表格行中的每个单元格,都对应于一个TD标记符或者TH标记符,用于标记表格的内容、其中可以包括文字,图像或其他对象.TD与TH的功能和用法几乎完全相同(可以任意混合使用,但效果略有不同)、唯一不同之处在于TD表示普通表格数据,而TH表示表格的行列标题数据(也就是通常所说的表头).TD和TH的结束标记符都可以省略,并且可以不包括任何内容
3.表格的编辑及属性设置(1)合并单元格在和标记内使用rowspan属性可以进行行合并,rowspan的取值表示垂直方向上合并的行数;使用colspan属性可以进行列合并, colspan的取值表示水平方向上的合并的列数.
(2)边框与分隔线在TABLE标记内使用frame,rules和border属性可以设置表格的边框和单元格分隔线.
(3)控制单元格空白在TABLE标记符中使用cellspacing属性可以控制单元格之间的空白,(4)表格的对齐表格的对齐包括页面对齐和内容对齐.
①表格的页面对齐表格在页面中的对齐与其他页面内容一样,可以直接在TABLE标记符中使用align属性.另外,也可以用DIV标记符的align属性设置表格的对齐.
②表格的内容对齐表格单元格内容的对齐包括各数据项在水平方向和垂直方向上的对齐.
设置水平对齐的方法是:在标记符,内使用align属性,其常用的取值可以是 .
设置表格数据在垂直方向的对齐应在TR,TD或TH标记符中使用valign属性,valign属性的常用取值包括:top
(5)控制表格和单元格大小可以使用标记符的width和height属性设置表格和单元格大小.
(6)设置表格和单元格的背景在TABLE,TR或TD标记符内使用bgcolor属性设置背景颜色;使用background属性设置背景图案.
4.2.2 利用Dreamweaver 4.0处理网页表格
1.创建表格(1)创建新表格利用Dreamweaver 4.0创建新表格时,首先选中对象面板上View栏目下Standard View(标准视图)按钮,然后可以通过下列四种方式中的任意一种:
①将对象面板调整到Common类上,单击Insert Table(插入表格)按钮.
②通过主窗口的菜单Insert|Table命令.
③使用快捷组合键CtrlAltT.
④将对象面板调整到Common类上,拖动Insert Table按钮到主窗口的工作区中.
(2)选择表格选择表格可分为选择整个表格和选择表格中的单元格.
①如果要选择整个表格,则可进行如下的操作之一:将光标置于表格中的某个单元格中、选择Modify|Table|Select Table命令.
将光标置于表格中的某个单元格中、再按两次组合键CtrlA.将光标置于表格中的某个单元格中、单击鼠标右键,在弹出的快捷菜单中选择Select Table命令.
将光标置于表格的尾部(在表格的同一行、但不在表格之内)、向左拖动鼠标.
单击表格的边线.
②选择单个单元格的方法有以下几种:将光标置于所要选择的单元格中、按一次组合键CtrlA.将光标置于所要选择的单元格中、向右拖动鼠标.将光标置于所要选择的单元格中、选择Edit|Select All命令.
按住Ctrl键,单击所要选择的单元格,再单击一次则取消对单元格的选择.
③选择多个单元格的方法有以下几种:按住Ctrl键,单击所要选择的所有单元格.将光标置于单元格中、拖动鼠标,选择多个单元格.如果要选择整行、将光标置于该行的左边缘,当光标变成图标时单击鼠标左键.
如果要选择整列,将光标置于该列的上边缘,当光标变成图标时单击鼠标左键.
④选择的全部单元格的方法有以下几种:将光标置于第1个单元格中、并拖动鼠标至最后一个单元格.将光标置于第1个单元格中、按住Shift键,再单击最后一个单元格.
将光标置于第1行的左边缘,当光标变成图标时,向下拖动鼠标至最后一行.
将光标置于第1列的上边缘,当光标变成图标时,向右拖动鼠标至最后一列.
(3)添加删除行列
①在现有的表格中插入单元行、可以选择以下的操作之一:将光标移到要插入单元行的下一行、选择Modify|Table|Insert Row命令.
将光标移到要插入单元行的下一行、按组合键CtrlM.将光标移到要插入单元行的下一行、单击鼠标右键,在弹出的快捷菜单中选择Table|Insert Row命令.
②在现有的表格中插入单元列,可以选择以上的操作之一:将光标移到在插入单元列的右边一列,选择Modify|Table|Insert Column命令.
将光标移到要插入单元列的右边一列,按组合键CtrlShiftA.
将光标移到要插入单元列的右边一列,单击鼠标右键,在弹出的快捷菜单中选择Table|Insert Column命令.
③如果想在现有的表格中添加多行或多列,首先将光标移到要插r入行或列附近的单元格中、单击鼠标右键,在弹出的下拉菜单中选择Table|Insert Rows or Columns命令,弹出Insert Rows or Columns对话框.在此对话框中进行相关的设置,然后单击OK按钮,设置的多列或多行将插入到页面中.
④删除整行整列,可以采用下列办法之一:先选择欲删除的整行或整列,直接按Del键,即可删除.先将光标移到要删除的行或列中、选择Modify|Table|Delete Row或Delete Column命令.
将光标移到要删除的行或列中、单击鼠标右键,在弹出的快捷菜单中选择Table|Delete Row或Delete Column命令.
2.编辑表格(1)设置表格高度在创建表格时,可以通过表格对话框来设置表格的宽度,但无法设置表格的高度,如果要设置表格的高度,则必须通过表格属性面板来确定.
(2)合并拆分单元格对表格中的单元格进行合并拆分,既可以通过菜单命令来实现,也可以通过单元格属性面板(单击任意单元格,属性面板将会自动切换)上的快捷按钮来完成.
(3)设置单元格的宽度及高度在单元格属性面板上可以改变单元格默认的宽度和高度.
3.表格属性的设置(1)设置表格的边框颜色设置表格的边框颜色时,必须指定表格的边框线的宽度不为0.要为表格的边框指定颜色,首先选择表格,单击属性面板上Brdr Color的颜色框,在弹出的调色板中选择颜色,或者是在后面的文本框中直接输入颜色的色码、即可为表格的边框添加颜色.
(2)设置表格的背景表格的背景与网页背景一样,即可以设定为单一的颜色,也可以用图片作为表格的背景.要将表格背景设为单一的颜色,首先选择整个表格,再单击属性面板上Bg Color后面的颜色框,在弹出的调色板中选择颜色,或者是在后面的文本框中直接输入颜色的色码;要将图像设为表格的背景,首先选择整个表格,再在属性面板上的Bg Image文本框中输入图像所在的路径,或是单击其后的文件夹图标,在弹出的对话框中选择图像文件.
4.用表格进行页面布局Dreamweaver 4.0新增加的网页排版功能,可以很方便的实现网页的排版.
认识框架网页创建框架网页的方法编辑框架网页的方法设置框架属性的方法
第5章网页框架的处理
5.1 利用FrontPage 2002处理框架
5.1.1 创建框架网页
1.认识框架网页框架网页是种特殊的HTML网页,它可将浏览器窗口分成不同的区域,称为框架区域.每个区域都可以显示不同的网页.
(1)框架网页的特点
①只要单击某一个框架区域内的超链接,其指向的网页就会在另一个框架区域中显示、而不必将整个浏览器窗口中的内容更换一遍.
②固定网页中的某些内容.
③并不是所有的浏览器都能显示框架网页,这也是框架网页的一个局限.
(2)框架网页的种类根据框架分布的不同和各框架作用的不同、框架网页被分为多种类型.使用FrontPage制作网页时,常用到的框架网页是:标题,标题页脚和目录,垂直拆分,横幅和目录,脚注,目录,嵌套式层次结构,水平拆分,页脚和自顶向下的层次结构.
2.创建框架网页
①选择文件| 新建| 网页或站点命令,打开新建网页或站点窗格;
②单击网页模板超级链接,打开网页模板对话框;
③单击框架网页选项卡,显示十种网页模板,选择其中任一种形式,在对话框右边会出现该模板形式的说明,以及模板预览.选择嵌套式层次结构,单击确定按钮,出现初始框架网页;
④单击每个框架中的新建网页按钮,各编辑区变成编辑状态、可以依次编辑各个网页.单击每一个框架区域中的设置初始网页按钮将打开一个对话框,可以在该对话框中选择一个网页作为框架网页最初显示的网页,并显示在框架区域中.
5.1.2 编辑框架网页编辑框架网页与编辑普通的网页相同、也可以在框架网页中添加和格式化文本,设置网页的背景颜色和背景图片,在网页中插入图片和添加组件,还可以调整框架的大小等.
1.在框架网页中添加和格式化文本在框架网页中添加和格式化文本与在普通的网页中添加和格式化文本相同.
2.调整框架的大小在输入文本时,可能输入的文本内容比较多,但框架又比较小,所以输入文本时会有一部分文本不能显示、这样在查看文本时就有可能看不到文本的整体效果,这时可以调整框架的大小来显示文本.
通常调整框架的大小的方法有两种、即通过拖动框架的边框或指定想要的确切设置来调整框架的大小.
(1)拖动框架的边框调整框架大小将光标放在要调整的框架边框上,当光标变为形状时,按住鼠标左键,并向下拖动.按此方法调整上图中右边两个框架的大小,调整后的框架网页如图5.7所示.
(2)精确设置框架大小
①单击框架,将光标置于框架内、点击鼠标右键,从弹出的快捷菜单中选择框架属性命令,弹出框架属性对话框;
②在框架大小选项组中设置框架大小为固定像素数后,再指定框架的宽度和行高,单击确定按钮.
3.拆分框架在框架网页中不但可以调整框架的大小,还可以设置网页中显示的框架的多少.在框架网页中可以任意地拆分框架.
(1)拖动边框拆分框架将光标放在要拆分的框架边框上,按住Ctrl健,同时按住鼠标左键拖动框架边框,拖出一段距离后放开鼠标左键和Ctrl键,出现一个框架.
(2)将框架平均分成两行或两列将光标放在要拆分的框架边框内、选择框架|拆分框架命令弹出拆分框架对话框.选择拆分为行或拆分为列,单击确定按钮.
4.删除框架
①将光标放在要删除的框架中;
②选择框架| 删除框架命令.
注意:从框架网页中删除框架时,该框架中显示的网页也会被删除,但是框架网页中其余的内容并没有被删除.若框架网页仅含有一个框架,就不能删除该框架.
5.为框架网页设置背景颜色和背景图片(1)设置框架网页的背景颜色
①将光标放在要设置背景颜色的框架中;
②单击鼠标右键,从弹出的快捷菜单中选择网页属性命令,打开网页属性对话框;
③单击背景标签,打开背景选项卡;
④单击背景右侧的按钮,从弹出的颜色面板中选择背景颜色;
⑤单击确定按钮.
(2)设置框架网页的背景图片设置框架网页的背景图片与设置框架网页的背景颜色类似.
5.1.3 设置框架网页属性设置框架的属性包括设置边框的隐藏或显示、设置框架的边距和间距以及设置框架中滚动条的显示和隐藏.
1.显示和隐藏框架边框可以根据所需的网页外观来选择显示或隐藏框架网页的框架周围的边框.
显示和隐藏边框的操作步骤如下:
①将光标放在任意一个框架中;
②单击鼠标右键,从弹出的快捷菜单中选择框架属性命令,弹出框架属性对话框;单击框架网页按钮,打开网页属性对话框;
③选择或禁用显示边框复选框,就显示和隐藏框架边框;
④单击确定按钮,回到框架属性对话框;
2.显示和隐藏框架滚动条在框架属性对话框中、从显示滚动条的下拉列表中选择显示或不显示或者需要时显示.
5.1.4 在框架网页中设置超链接在框架组中设置超级链接后,单击超级链接,该链接所指向的网页通常会在另一个框架中打开、即会在目标框架中打开.在使用FrontPage 2002的框架网页模板所创建的框架网页下,目标框架已经设置好了.在框架组中设置超链接与在普通的网页中设置超链接相同、也可以设置文本超链接和图片超链接.
1.在框架中设置文本超链接
其操作步骤如下:
①在框架中选择要设置超链接的文本,单击常用工具栏中的插入超链接按钮,弹出插入超链接对话框;
②选择要链接的文件,单击目标框架按钮,弹出目标框架对话框;
③选择目标框架,单击确定按钮,回到插入超链接对话框;
④单击确定按钮,则超链接设置完成.
2.在框架中设置图片超链接在框架中设置图片超级链接与在框架中设置文本超级链接基本相同.
5.1.5.保存框架网页创建和编辑完框架后就可以对框架进行保存了.保存框架与保存普通的页面方法相同.
5.2 其他处理网页框架的方法
5.2.1 利用Dreamweaver 4.0处理框架网页
1. 建立框架Dreamweaver 4.0在对象面板Frames(框架)类中提供了许多组框架组,使用者点击鼠标就可以创建框架.
2.编辑框架框架创建好以后,就可以对框架进行编辑了.每一个框架里都是一个文档,可以直接添加内容、也可以在框架内打开已经存在的文档.
3.保存框架每一个框架都包含一个文档,因此一个框架集会包含多个文档.在保存文档的时候,不能只简单地保存一个文档,要将整个网页文档都保存下来.
4.框架属性及框架集属性设置使用框架属性面板可以查看和设置框架的属性.
5.2.2利用HTML创建网页框架
1.指定框架结构在框架集网页中、除了基本的HTML,HEAD等标记符以外,主要包括框架集标记符FRAMESET(必须有结束标记符)和框架标记符FRAME(没有结束标记符).
由于框架是按照行或列排列的,所以在建立框架结构时,使用FRAMESET标记符的rows属性或cols属性分别可以构造出横向分隔框架和纵向分隔框架.
2.框架的嵌套如果网页设计者需要创建一些复杂的框架集,即同时包含横向和纵向的框架,此时可以使用框架嵌套.框架嵌套时只要在要使用FRAME标记时再使用FRAMESET标记一个框架集即可.
3.框架的初始化框架初始化是指为各个框架指定初始显示的页面,此时应使用FRAME标记的src属性,将该属性的值指定为要在框架中显示的页面即可.
4.边框效果(1)框架边框的设置border属性可以用于设置边框的宽度,其值为像素数.
(2)框架滚动条的设置使用FRAME标记符的scrolling属性可以控制是否在框架内加入滚动条,其值可以取为yes,no,auto.
(3)设置边框的不可移动属性使用FRAME标记符的noresize属性,该属性不需要任何取值,即:
(4)设置框架空白FRAME标记符的framespacing属性可以控制框架边框与数据之间的距离,这个属性的取值都是像素数.
5.指定超链接的目标框架控制超链接的目标文件在哪一个框架内显示的方法是在A标记符内使用target属性,格式为:超链接内容能够选择合适的网页颜色了解网页图像的基本格式掌握使用网页图像的要点在网页中插入图像的方法图像属性的设置调整图像的大小及位置
第6章网页图像处理
6.1 利用Dreamweaver 4.0编辑图像
6.1.1 网页中的颜色图像与颜色是分不开的.在网页中是以RGB方式来表示颜色的,RGB颜色包括几百万种之多,这么多的颜色却有一个共同点、都是由红,绿,蓝这三种基色调混和而成的,RGB其实就是Red,Green,Blue的缩写.
在网页中运用色彩一般应遵循下列几个原则.
(1)一个页面中切忌采用过多的颜色,否则会给人一种繁杂的感觉、也烘托不了网页的主题,因此一种风格的网页选用颜色一般不要超过三四种.
(2) 背景的颜色不要太深,显得过于厚重、因为这样会影响整个页面的显示效果.但也有例外,黑色的背景衬托出亮丽的文本和图像,会给人一种另类的感觉.
(3)要保持整个网页的色调统一.
(4)要围绕网页的主题选择颜色,色彩要能烘托出主题.
6.1.2 图像格式由于受网络带宽的限制,在Web页上使用的图像都是一些压缩格式,最常用的包括:GIF格式,JPEG格式,PNG格式和矢量格式.
1.GIF格式GIF格式采用无损压缩算法进行图像的压缩处理,是目前在网页设计中使用最普遍、最广泛的一种图像格式.
2.JPEG格式JPEG格式是另一种在Web上应用广泛的图像格式.由于它支持的颜色数几乎没有限制,因此适用于使用真彩色或平滑过渡色的照片和图片.与GIF格式采用无损压缩不同、JPEG格式使用有损压缩来减小图片文件的大小,因此用户将看到随着文件的减小,图片的质量也降低了.
3.PNG格式PNG格式是近年来新出现的一种图像格式,它适于任何类型,任何颜色深度的图片.
4.矢量格式
6.1.3 使用网页图像的要点在Web页上显示图片之前、通常需要考虑下列三个问题:
①确保文件较小;
②控制图像的数量和质量;
③合理使用动画.
6.1.4 在网页中插入图像
1.插入图像在Dreamweaver中插入图像非常简单,具体操作步骤见课本.
2.图像属性参数在文档中插入图像后,用鼠标单击图像,图像四周出现可编辑的缩放手柄,说明该图像被选定.这时属性面板中显示出关于图像的属性信息.
3.改变图像的尺寸改变图像的尺寸大小可以通过在属性面板中的W和H直接输入数值来改变图像的尺寸大小.此外,还可以通过拖放图像边框来改变图像的尺寸.
4.调整图像在网页中的相对位置
6.1.5 设置网页背景改变网页背景的状态可以通过两种方法来实现,一种是设置背景颜色;另一种是设置背景图像.
1.设置网页背景颜色设置网页背景色在页面属性对话框里设置.
2.设置背景图像设置网页背景色,只能得到单一颜色的背景.如何能使背景发生更多的变化,这就需要设置网页的背景图像.
6.1.6 在Dreamweaver 4.0中巧妙地处理图像
1.给图像加文字说明利用Dreamweaver 中为图像加文字说明的功能,可使网页中的图像在不能被浏览器正常显示时,以说明文字代替,以帮助访问者了解图像的信息.
2.制作低分辨率图像
3.为图像添加热点热点即图像上不可见的区域,该区域分配了一个超链接.为图像添加热点就是在图像上划分区域,从而设定图像上制作超链接的范围.
6.2 网页图像的其他处理方法
6.2.1 利用FrontPage 2002处理图像用FrontPage 2002同样可以处理网页图像,不过在FrontPage中习惯称图像为图片.
1.插入图片(1)插入来自文件的图片(2)插入来自剪贴画的图片
2.修改图片属性(1)调整图片的大小(2)移动图片位置在FrontPage 2002中移动图片位置很容易,只要在图片上单击鼠标左键,然后按住鼠标左键,拖动图片之所需的位置即可.
(3)更改图片属性更改图片属性指的是更改图片的格式属性.
(4)替换图片或文字当图片太大,下载速度很慢,可使用一个分辨率较低的图片代替;而当图片不能被浏览器正常显示时,可以使用一些说明性文字.
3.图片与文字(1)图片与文字的对齐方式(2)图片的环绕样式图片的环绕样式决定了文字在图片周围的排列方式.设置图片的环绕样式可以在图片属性对话框中通过环绕样式命令完成,也可在定位对话框中设置.
6.2.2 利用HTML处理图像
1. 插入图像在HTML中、使用IMG标记符可以在网页中加入图像.它具有两个基本属性:src和alt,分别用于设置图像文件的位置和替换文本.
2.设置图像属性(1)指定图像的宽和高在HTML中、使用IMG标记符的width和height属性可以指定图像的宽度和宽度,以告诉浏览器Web页应分配给图像多少空间(以像素为单位).
(2)图像的边框使用IMG标记符的border属性,可以给图像添加边框效果,边框的取值是像素数.
(3)设置图像周围的空白可以在IMG标记符内使用属性hspace和vspace设置图像周围空白,其中hspace示水平方向的空白,vspace表示垂直方向的空白,它们的取值都是像素数.
(4)图像的对齐
①图像在页面中的对齐设置图像在页面中的对齐与设置文本对齐类似,可以使用DIV或P标记符将IMG标记符括起来,然后使用align属性.
②图像与周围内容的垂直对齐使用IMG标记符的align属性,可以控制图像与周围内容的垂直对齐.
③图文混排时的图像对齐如果要在图像的左,右环绕文字,也应该使用IMG标记符的align属性.
认识超链接利用Dreamweaver创建各种超连接的方法利用Dreamweaver编辑各种超连接的方法利用HTML和FrontPage创建、编辑超链接的方法网页制作的基本步骤
第7章在网页中使用超链接
7.1 利用Dreamweaver 4.0处理超链接
7.1.1 创建文字超链接
1.超链接简介超链接是WWW技术的核心、是网页中最重要、最根本的元素之一.超链接能够使多个孤立的网页之间产生一定的相互联系,从而使单独的网页形成一个有机的整体.
(1)什么是超链接所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址、一个文件,甚至是一个应用程序.而在一个网页中用来超链接的对象,可以是一段文本或者是一个图片.当浏览者单击已经链接的文字或图片后,链接目标将显示在浏览器上,并且根据目标的类型来打开或运行.
按照链接路径的不同、网页中超链接一般分为以下3种类型: 内部链接,锚点链接和外部链接.
如果按照使用对象的不同、网页中的链接又可以分为:文本超链接,图像超链接,E-mail链接,锚点链接,多媒体文件链接,空链接等.
(2)合理安排超链接合理安排超链接在网页的制作中是非常重要的.采用什么结构的链接会直接影响到网页的布局.
在这里给大家一些设计链接的建议.
1.避免孤立文件的存在:应该避免存在孤立的文件,这样能使将来在修改和维护链接时有清晰的思路.
2.在网页中避免使用过多的超级链接:在一个网页中设置过多超链接会导致网页的观赏性不强、文件过大.如果避免不了过多的超链接,可以尝试使用下拉列表框,动态链接等一些链接方式.
3.网页中的超链接不要超过4层:链接层数过多容易让人产生厌烦的感觉、在力求做到结构化的同时,应注意链接避免超过4层.
4.页面较长时可以使用书签:在页面较长时,可以定义一个书签,这样能让浏览者方便地找到想要的信息.
5.设置主页或上一层的链接:有些浏览者可能不是从网站的主页进入网站的,设置主页或上一层的链接,会让浏览者更加方便地浏览全部网页.
2.建立文本超链接在创建超链接之前、首先了解网站中3种类型的文档路径:绝对路径,和根目录相对路径以及和文档相对路径.
绝对路径:是包含服务器协议(对于网页来说通常是http:或ftp:)的完全路径,绝对路径包含的是精确地址而不用考虑源文件的位置.但是如果目标文件被移动,则链接无效.创建外部超链接时必须使用绝对路径.
和根目录相对的路径:是从当前站点的根目录开始的路径.站点上所有可公开的文件都存放在站点的根目录下.和根目录相对的路径使用斜杠以告诉服务器从根目录开始.
和文档相对的路径:是指和当前文档所在的文件夹相对的路径.这种路径通常是最简单的路径,可以用来链接和当前文档处于同一文件夹下的文档.
(1)创建文本超链接
①在网页上选择需要添加超链接的文本,此时属性面板成为文本属性面板;
②在属性面板上指定文字的链接目标.可按以下4种方法指定文字的超链接:・单击Link文本框右侧的文件夹按钮,在弹出的选择文件对话框中选择链接的目标文件.
・在文本框中直接输入目标的绝对路径.・利用属性面板上的Point to File(指向文件)按钮,为文字加入超链接.但必须要建立本地站点、且本地站点上还要有文件存在,才能使用此方法.
・选择Modify|Make Link命令,也可打开选择文件对话框.
③确定完链接目标之后,在Link文本框中出现文字的链接目标.在Target下拉列表框中选择目标文件打开的方式Target表示所链接的目标文件在浏览器中打开的方式,在其下拉列表框中一共有4个选项:
blank:将目标文件载入到新的未命名浏览器窗口中.
parent:将目标文件载入到父框架集或包含该链接的框架窗口中.
self:将目标文件载入与该链接相同的框架或窗口中.
top:将目标文件载入到整个浏览器窗口并删除所有框架只有在使用框架页面时才有效.
设置结束后,在网页中被选择的文字颜色变为蓝色,且在

ppt文档的标签：本章学习通过

更多推荐标签：管理处总结初级统计学篮球的重量广告的范畴陈芝光知识营销出货文件调查案例电子钟原理图大学生成本省锟斤拷读书与创新清款协议书周兆英危险标示下载电力毕业论文模板规范备自投厨房考核世界版画史人才队伍建设公安决策艺术推销实训论文室内设计现状产品销量分解工厂报价单海洋测绘论文个人简历空外应预测学工厂配电方案