我的网页我来做_第1页
我的网页我来做_第2页
我的网页我来做_第3页
我的网页我来做_第4页
我的网页我来做_第5页
已阅读5页,还剩29页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

1、我的网页我来做MY HOMEPAGE DIY网页制作入门培训教程王宁荣誉出品2005年8月目 录第一部分 基础知识及Frontpage2003简介1、网页的概念。2、网页制作的概念3、学习网页制作的要领4、Frontpage2003的获取与安装5、Frontpage2003的特点第二部分 走近Frontpage20031、新建一个站点2、新建一个网页3、打开一个站点4、对文件名的要求5、管理站点内网页文件的方法6、更改网页标题的方法7、保存一个网页:8、为网页加入背景音乐:9、更改网页背景:10、对用于网页的图片文件的要求11、更改网页文字颜色12、页面边距的设置13、文字的输入14、对网页中

2、字体的要求15、为网页插入图片16、对图片属性的设置17、对图片编辑18、图片格式转换19、超链接的含义20、路径的概念21、创建超链接22、为文字创建或修改及去除超级链接23、更改网页中超级链接的颜色24、为图片创建及修改超级链接25、对超级链接目标框架属性的修改26、网页中表格的运用27、插入一个表格的方法28、对表格的设置29、表格的修改和单元格设置30、对行列的平均分配方法31、对单元格的设置32、设置文字33、设置段落34、用CSS轻松实现页面的美化35、学习CSS的HTML代码36、FrontPage的常用组件之水平线37、FrontPage的常用组件之滚动字幕38、用翻转功能实现

3、动态超级链接39、框架网页40、网页的后期修饰第一部分 网页制作基础知识及Frontpage2003简介互联网如今如日中天,过去我们讲:不懂电脑会成为这个时代的文盲,但现在已经不止了,未接触过网络就将成为未来的文盲,IPV6时代离我们已经很近了,也许用不了多久,我们家里的电饭锅都必须要上网了,你可以在下班前半小时用鼠标指挥它为你把米饭焖好或者在你回家之前把空调打开以便回去后就能享受凉爽或者把热水器开启,以便你一回家就能洗到热水澡,我们实现这一切仅靠电脑与网络,而无需一个保姆,当然你需要保姆也可以,那就安一个监控器,在上班的时候也通过网络观察保姆有没有偷吃你的千年人参了:)一、网页的概念。 网页

4、的学名是:HTML超文本文件,所以其实网页只是一个文本文件,超文本的意思即是含超级链接的文本文件,我们可以理解为超级文本文件,为什么这样叫呢?因为网页相对于其它文本文件来说,可以是多媒体的,也可以是互动的,因其功能强大,可以表现图像、语音、音乐、动画等多媒体内容而在近几年迅速成为互联网的灵魂;借助http协议(超文本传输协议),我们就可以让全世界的WEB站点互联互通,实现全球资源共享,利用网页我们可以做很多事情,比如:在线文字及语音聊天,在线音乐欣赏、视频点播、软件下载、数据查询、虚拟社区、论坛、网上短信、网上寻呼、资料搜索等内容等等。在这里我顺便将网页这种特殊的文件格式和大家所熟悉的WORD

5、文档做个比较:WORD文档也可以排出图文并茂的文档来,HTML也可以表现,但WORD文档的主要功能是用于打印输出,而网页主要用于显示输出;WORD文档可以嵌入文档中的图片、艺术字,HTML格式却只是文本文件,不嵌入任何非文本格式文件,网页中所有丰富的元素都是通过链接实现的,用一段文本文件告诉浏览器图片或者声音的位置,然后浏览器会自动加载到网页中显示,但网页本身仍然没有嵌入任何非文本的文件;这种限制使得网页本身的体积非常易于控制,有利于网页无限制的传播。二、网页制作的概念。 网页制作即是通过网页制作软件,创建及编辑超文本文件,使得我们需要的文字、图像等根据我们的意图,精确的显示的浏览器中,编辑超

6、文本文件的软件有很多,而且每台装有Windows操作系统的机器都有,所以大家不用把网页的编辑制作想作是非常神秘不可及的事情,毫不夸张的讲,如果你能熟悉HTML语言,就可以用记事本编出一个非常专业的网页,因为任何网页的内容其实都是由源码构成的,浏览网页的原理即是游览器读取并解释已经编辑好的网页源代码,然而事实我们并不需要学习HTML语言也可以做出成功的网页,因为现在有许多优秀网页制作软件可以帮助我们完成复杂的事情。 而并非我们要求每个人都要熟悉抽像的网页源代码HTML语言,在FrontPage问世前网页制作只属于对HTML语言熟悉的高级IT人才的专利,然而现在,利用微软公司旗下软件Frontpa

7、ge2003为我们提供的可视化的操作界面,即通常所说的所见即所得的核心技术,这就使的学习网页制作的重点放到了页面的美工和创意上而不用花大量的时间用在网页制作本身,所以我可以大胆的讲,学会做网页并不是困难的事情,但要做一个让人叹为观止的网页却是有很大难度的,我们现在所学的将是并不复杂的网页制作,欢迎你加入这次Frontpage2003学习班的愉快旅程,我自信,在我的指导下,大家通过认真学习,会很快和我一样,成为一名网编乃至网页设计师而不是过去的:电脑打字员:) 三、学习网页制作的要领兴趣是最好的老师 学习一门电脑技术,首先要选择一款称手的软件,这通常能达到事半功倍的效果,入门越快,自然兴趣会越浓

8、,这是我们最终选用Frontpage2003做为教学内容的原因,虽然大家有些人可能听说过更为专业的网页制作软件,但由于其是面向专业WEB创作人员设计而使其易学易用性大大下降,不适网页制作入门学习,如果大家中有人有志于将来从事此专业,可以在学好FrontPage的基础上进一步深入学习专业软件。 其次,要学好网页制作就是要尽快熟悉网页制作的基本方法和接受其中的一些专业术语,如必须知道HTML、超级链接、URL、CSS等,这些都是网页制作中最常用的,要学习一门新潮热门的电脑技术,一定要具有一些新的概念与意识。 最后,就是多上机操作,争取当日学习的东西当日掌握,在课外要多上网,多浏览网页,并观察网页的

9、制作方法,还可以从网上找到许多关于做网页知识的文章,或者把自己觉的做的很漂亮的网页下载到自己的电脑中用FrontPage打开研究其制作技巧,这样也是一个很有成效的学习方法,一句话,做网页的知识很零散,技巧繁多,需要投入时间积累经验,而且大家根据学习电脑的经验可以发现,电脑是一门自学性很强的科目,不能过分依赖于老师和教程,人与人对话和人与书对话远不如真正能做到人机沟通的效果好。 四、Frontpage2003的获取与安装。 背景知识:老实说,FrontPage是90年代后期微软公司收购的小软件公司的产品,并不是微软原创,但微软总会利用别人的劳动成果壮大自己,收购后随即开始全面的版本更新,使其融入

10、了微软一贯的易学易用,功能强大、界面简洁等人性化设计,直至现在被全球广泛使用的Frontpage2003已经成为网页编辑的主流产品,也是Office2003产品中的标准组件,我们现在就要开始学习安装并使用Frontpage2003制作网页。 首先是软件的获取途径与安装方法。Frontpage2003是微软公司Office2003的标准组件,只要您将Office2003安装光盘放入光驱,进行典型安装或者在自定义安装中选定组件“Microsoft Frontpage For Windows”即可进行安装(见图),安装成功后可以进入“开始程序Microsoft FrontPage”运行此软件,当然如

11、果你想流畅运行,机器需要一个不错的配置,因为网页编辑软件对系统性能的要求比较高,比如CPU运算速度、内存大小等,如果机器较差,会感觉编辑过程中操作明会有明显的停顿和滞后,不过我已经留意大家办公室里的电脑配置,实际情况比较理想,都比我家的电脑好 _ 。 五、Frontpage2003的特点。 易学易用:相信大家中经常使用电脑的人与WORD打交道的高手一定不乏其人,如果已经有这方面的使用经验,学习Frontpage2003就会感到如鱼得水,似曾相识,因为FrontPage经过四次比较大的改版后,现在的界面已经和其他经典软件如WORD一样简单易学,即使不会用WORD的学员也不必担心,因为它的标准化操

12、作界面很容易上手;所见即所得:做为一个可视化的所见即所得的软件,我们不用担心源代码是什么,只需要在编辑区让我们的文字和图片巧妙排列、和谐搭配,自由创作,即使我们规定相同的页面内容、相同的图片,但不同的创意就可以做出不同的效果,版式可以是千变万化,只为吸引访问,而不必拘泥于WORD的标准文件样式。第二部分 走近Frontpage2003就要开始用Frontpage2003制作自己的第一个网页了,难免有的人会近香情怯,其实每个人学习任何本领都要经历这种感觉的,为了大家能够最短的时间内掌握此软件精华,特亲自撰写此教程,但由于时间仓促头绪繁多,如有内容差错遗漏及错字白字的地方请大家及时斧正。只要按教程

13、内容,部就班的学下去,就会发现FrontPage嘛,哎不过如此。在准备制作一个网页之前,我们需要了解如下重要知识。将网页、图片或在网页制作中用到的各种文件进行分类,以便于您可以更有效率地管理您的站点。具体操作是:您首先应该为您的站点建立一个根目录,就是新建一个文件夹,有关网页的全部文件及相关文件夹应该全部置于此目录下,以保证网页中的元素的完整性,比如我们在C盘建一个名为bmzjs的文件夹,当然这个文件夹可以是中文名称的比如C:巴盟质计所;建好后,应根据需要,在根目录下建立存放不同类型文件的子文件夹,将网页中相同类型的文件归类到同一目录,比如:用于存放网页中所有图片的文件夹,按惯例取名为imag

14、es,用来放置子网页的目录,新建后取名html(见图),但注意,这些子目录及其下的文件万万不可以使用中文文件名!这样,我们就为我们所要创建的网站搭建了一个院子。还有就是网页最通用的浏览分辨率为800*600像素16位色,如果我们要学习网页制作,就应该将自己电脑显示分辨率设置为网页浏览默认值,这样做出的网页兼容好,不会在其它机器浏览时出现严重的变形。 启动FrontPage:点击Frontpage2003快捷方式打开程序,您便完成了启动并新建一个空白网页。第一次启动,您将遇到一个左边有视图栏的界面,因为我们主要学习网页制作,所以对站点规划等附加的整个站点的综合管理功能不作为重点学习,我们只需要一

15、个干净实用的操作界面,因此,我们可以点击“查看”“视图栏”将视图工具栏设置为不显示,这样将满屏显示我们的网页编辑区域(见图)。 在启动FrontPage后,它会自动为我们新建一个文件,叫做new_page_1.htm,通过观察文件名我们可以发现,网页文件默认后缀为.htm,当然我们也可以用.html作为后缀,这些都是标准网页的后缀名。 FrontPage界面如上图所示,操作界面很简洁明了,上边是非常经典的微软应用软件菜单,下面带有图标的是快捷菜单栏,常见操作一目了然,当我们把鼠标指向某快捷按钮,就会出现它的文字含义。常用图标如下面例示: 从左至右分别为新建、打开、保存,这是几乎所有编辑软件都有

16、的图标,相信大家非常熟悉了,只是如果你仔细观察就会发现,新建和打开右边都有一个向下的不箭头,这点要大家注意,我们点击小箭头就会发现,原来新建和打开按钮有两种功能呢,我们点击小箭头,新建可以新建一个网页,也可以新建一个网站;打开可以打开一个网页,也可以打开一个网站,这点要注意,系统默认的直接点击图标是新建和打开一个网页,如果我们要新建或打开一个网站,就需要点击小箭头里的内容了。 这几个按钮的作用分别是:插入组件,你点击它时会弹出一个菜单,里面包括了常用组件;下面一个是插入表格的按钮,直接点击会出现一个行列块,鼠标移动就会拖出行列的数量,这样可以快速插入一个表格(和WORD中操作相同);第三个按钮

17、WORD里也有,大家不会陌生吧,这是插入图片按钮点击后就会弹出一个要求你浏览图片位置的窗口;最后一个是创建超链接按钮,这在以后要以详细讲述。 文件夹视图工具按钮,在对站点内文件进行浏览操作时用此按钮,相当于资源管理器。 FrontPage常用按钮就这么少,相信大家很快能认得它们了,至于菜单区域最下面的文字工具栏,用法和WORD一样,在此不在赘述。 界面上最大面积的是就是白色的编辑区了,我们制作网页的工作区域就在这里,编辑区下面左边有三个切换开关,如图: 普通即是我们可视化的操作区,点HTML可以切换到网页源代码,作为了解大家可以看看网页源代码的构成,而且很容易发现规律,网页中所有标记是是以&l

18、t;html>开始,以</html>结束的;点击预览,即可摸拟浏览器浏览时的实际效果,方便我们在做的过程随时调试效果;最下面为状态栏,右边列出了以某种传输速度下的网页下载时间,系统默认为28.8K猫的传输情况。 还有一点重要知识,我们一般将一个站点的首页名字设置为index.htm,意思是索引页或者是目录页的意思,如果把一个站点比喻做成一本书,首页即是这本书的封皮和目录了,我们门市部一个网站的时候,并不需要在网址中输入index.htm,因为它是默认的首页名,系统会自动在网站根目录下寻找此文件,当然可以用于首页的名字还可以是index.html(比如网易个人主页空间对首页的要

19、求)或者defult.htm(微软2S服务器程序默认的网站首页),但我们最好用常规的惯用的文件名,这样有利于兼容性。 菜单栏上依次为文件,编辑,查看,插入,格式,工具,表格,框架,窗口,帮助,对网页制作来说,常用的是插入、格式、和表格三个菜单,我们所用到的日常操作,通常都是用这几个菜单来执行的,所以我们学习的重点就是通过调用菜单中命令的用法来修改网页中背景、文字、表格、图像,插入各种对象等的方法。 为了使学习更容易,我们采用具体问题具体对待的方式来突出应用重点网页制作部分,方便日后对某种操作的查询,为了使大家能更为快捷的使用Frontpage,我们尽量使用最简化的步骤实现某种操作,结合大量的图

20、形讲解,这样易于记忆,即使上机条件不便的情况下也可以对软件界面熟悉;这其中融入许多鼠标右键的操作,这与一般教材有所不同,因为我们往往习惯用最快的办法找到命令,而我们windows鼠标右键的功能就是弹出快捷菜单,既然如此,我们何必舍近求远呢?1、新建一个站点:点击文件新建站点即可,在弹出菜单中根据需要选择站点类型和站点本地目录,我们一般新建一个空站点;右边可以指定新站点在我们电脑中的放置位置,比如图中的d:Myweb,我们可以在那里修改为我们前面建好的C:bmzjs,修改完成后点确定。确定后会弹出如下图的对话框,点是即可了,FrontPage会自动站内添加一些必要的文件夹及文件,我们不必理会这些

21、东西,我们只要记住我们自己新建的文件夹,并将文件放到我们自定义的文件夹中就可以了,不必对FrontPage建立的不知名文件夹做任何操作。2、新建一个网页:点击文件新建网页即可,Frontpage为我们提供了一些样式可以选择,但我们通常是新建一个空白网页,因为系统带的模板并不实用,当然,懒人可以选择一个自己喜欢的样式,不让那些模板放着也可惜了。3、打开一个站点:如果我们想把已经建立好的站点打开,只要点“文件”“打开站点”,然后通过浏览找到已经建好的站点文件夹,对于已经建立的站点,在打开站点的窗口中站点文件夹会显示为与众不同的图标,如图中的bmzjs目录,选中它,点“打开”就可以完成打开一个站点的

22、工作。 我们准备对一个网页编辑的时候,推荐先打开站点,再用FrontPager的文件管理功能进行选中打开编辑(此功能下面讲到),这样做的好处是在对站点内的文件进行删除重命名等操作时,FrontPager为提醒你有其它文件也在使用此文件,以免你误操作或者配合你更新其它文件对此文件的链接。4、对文件名的要求:我们一般不把网页保存为中文文件名,也不把网页中要用到的文件,如图像、声音、及和网页同类型的,总之就是网页会链接到的文件保存为中文文件名,所以我们保存为英文名或数字组成的名更为通用(多数服务器并不支持中文文件名的读取,如果大家不喜欢看该页无法显示就应该中规中矩的办事)5、管理站点内网页文件的方法

23、:点击“查看”“文件夹列表”即可以类似资源管理器的界面管理站内的文件,在这种视图下进行文件改名等操作,FrontPage会智能的将有关链接改成新的路径,十分方便; 如果双击某网页文件,则会在编辑器打开该文件,进入编辑状态,如需要回到全屏编辑只需再点一次“文件夹列表”即可进入全屏编辑模式,如图所示: 6、更改网页标题的方法:我们在打开一个网页的时候,浏览器左上方出现的文字即为网页标题,更改的方法是在网页空白处点击点鼠标右键网页属性标题一项上输入自己想要的标题即可;标题在网页源代码中的格式标记为:<title>这里是标题文字</title>。7、保存一个网页:点击文件保存或

24、者保存快捷图标,如果是第一次保存,会弹出保存路径和要保存的文件名;这时,如果需要点击“更改”,我们可以修改网页的标题;如果我们已经保存的网页的样式还需要在其它页面中用到,我们可以点击“文件”“另存为”即可按照保存的步骤另存一个文件,这样非常适合于相同版面不同文字内容的页面的制作。8、为网页加入背景音乐:在网页空白处点击鼠标右键网页属性(见上图),点击“背景音乐”右边的浏览按钮,找到自己准备好的音乐文件即可,同时可以在下面设置循环次数,可以选择任意整数次或者设置为不限次数,我们常用的为.wav或者.mid格式的文件,.mid更为常见,因为它体积小巧,适于网络使用。9、更改网页背景:在网页空白处点

25、击鼠标右键网页属性背景,这里的颜色选项下有背景色的下拉菜单,从常用色中选择即可,当然,如果需要更加个性化的颜色,就点中里面的其它颜色,里面可以自定义颜色;还有网页背景不仅设置为颜色,还能设置为图像,只要我们在背景菜单上点击“浏览”按钮,然后找到自己预告放置了图片的文件夹,选中图片,即可使背景图片会以平铺的方式布满网页,如果设置的背景图片是BMP格式的,我们应该将其转换为GIF或者JPEG格式,点击刚才“浏览”右边的“属性”,我们可以对图片格式转换进行设置,具体请参照后面关于对图像格式转换的讲解。一个好的背景图片可以使网页增色很多;当然如果一个已经存在背景图像的网页我们不想要了,只需要在背景设置

26、菜单中将“背景图像”前的对勾去掉即可。小技巧:Frontpage可以将网页背景设置为水印方式显示,仔细的学员会发现背景设置菜单里有一个“水印”样,选中对勾,即可以实现水印效果,具体效果就是在网页上下滚动的时候背景固定不动,有种网页漂在水上的感觉。10、对用于网页的图片文件的要求:由于网络速度的先天不足,使我们要注意文件体积,可以用于网页制作的常用图像格式.bmp、.jpg、.gif等,相对来说.bmp是体积最大的,所以不推荐使用,对于照片等真彩色的图片,我们一般压缩成.jpg的格式用于网页,对于颜色数少于256色的图像,我们一般使用.gif格式。11、图片格式转换:如果我们已有的素材是bmp格

27、式的,我们需要在将其转换为.jpg或者.gif格式来减少体积,用第三方软件Acdsee等软件的转换功能十分方便,如果没有,也可以用FrontPage的图片转换功能来实现,具体操作就是,在已经插入的BMP图像上点击鼠标右键“图片属性”,在类型里有GIF和JPEG两种格式可供我们转换,对于颜色数较少的我们推荐使用GIF格式,选中GIF前的小圆框即可,并推荐选中下面的“交错”小方框;对于颜色数较多的图片,比如拍摄的照片,我们推荐转换为JPG格式的,然后可以选择质量比,比值越高图像越清晰,但文件体积越大,根据情况自己决定吧。选择好后点确定即可,保存网页时会提示把刚刚转换的图片保存到站内。 12、更改网

28、页文字颜色:和上一条操作类似,在背景色下拉菜单下即是文字颜色下拉菜单,在里面找到自己想要的文字颜色即可,需要声明的事情是:请不要将背景色和文字颜色设置为想近或相同,那样的网页是失败的,一般技巧是将网页背景和颜色和文字颜色设置为反差较大的颜色甚至是相反色,比如白底黑字和黑底白字都比较常用。13、页面边距的设置:在网页中,页边距是指网页中可见内容距离浏览器边缘的距离,由于网页主要用于显示输入,所以页面边距可以设置为0或者较小的像素,这样有利于将更多的内容显示出来,仍然是打开网页属性窗口,点“边距”标签,就可以指定页面边距了,在未指定的情况下(边距前的对勾不选),系统默认为6像素,如果对于内容较少的

29、页面,我们可以适当加大页边距以使版面集中些,不至于给人一种空空如也的感觉。14、文字的输入:选择在编辑区,在光标闪烁的地方,我们就可以调用输入法录入文字了,感觉就好象在用WORD但别得意,网页里的文字编辑可全是手动的,并不具备根据纸张自动换行的功能,制作者要根据需要,确定每行显示的文字数量手动换行,而且与WORD极大的不同,并不是直接调用回车可以搞定的,在Frontpage中,回车的意思是段落回车,实现行回车的方法是Shift+Enter键;而且Frontpage中没有标尺,不能像WORD一样方便的首行缩进,需要我们手工加入空格来实现段落首行缩进,毕竟,这是一个网页制作软件,不可能完全针对文字

30、处理。文字输入完成后,我们即可用鼠标拖黑全部或者某部分,再对其定义字体字号和各种修饰,和用WORD类似;如果我们需要将WORD文档或者其它文档中的文字输入到网页之中,并不需要重新手工输入,一个很简单的办法就是在其它选选中要复制的文字区域(用鼠标拖黑),然后新建一个记事本文件,把文字粘贴到记事本内,这样就去除了在其它文档中设置的文字格式等信息,然后再从记事本里选中文字,“复制”“粘贴”到网页中即可;在网页编辑中,为了使文字版面更加美观整齐,我们一般将页面用表格规划好以后再在表格的单元格中输入文字,输入文字时要注意标点符号不能在行首出现。这在文字处理软件中会自动实现将跨行标点放置到上一行(引号括号

31、书名号除外),但网页制作软件无此智能,所以我们要手动将跨行标点退格到上一行(除外情况同上)。15、对网页中字体的要求:在我们使用WORD时,为了文档美观,我们会向系统中安装一些非Windows自带字体,使得文档中文字能显示和打印多种字体。网页制作中,文字必须在宋体为主,标题等大字可以使用黑体、楷体、和仿宋体,因为要显示标准字体库以外的字体,必须要求每台浏览网页的机器都装有同样的字体才行,如果设置了非标准字体,就会出现在自己机器上欣赏网页华丽无比,其它机器浏览全是宋体的惨像:),如果我们把想要表现为非标准字体的那段文字做成图片格式,在网上就可以任意显示了。16、为网页插入图片:如果网页只有文字就

32、很单调了,图片往往是使网页倍添姿色的法宝,实现方法是先将光标移到想要插入图片的位置,然后点击插入图片来自文件,或者直接点击快捷按钮栏的插入图片按钮(图),如果图片在站内,内直接点击images文件夹找到文件即可,如果不存在,则通过最右边的浏览按钮插入放在其它路径的图片,图片不在站内时,保存网页时系统会提示你将要把图像文件保存到站内文件夹,如果文件夹下不是images则点击“改变文件夹”将其保存到图片文件夹下。网页中的图片要尽量精巧美观,体积小巧;对图片的使用一定要让它以相对路径的形式保存于站点目录内,否则当移动文件夹或重命名等操作都会使图片无法正确链接而不能在浏览器中显示,这样会使页面美观程度

33、大大下降,如果不能正确显示,就要认真检查图片链接路径是否正确了。17、对图片属性的设置:选中已经插入的图片,我们可以发现在图片四个角及每打边的中间出现一个黑色小矩形,当我们把鼠标移到上面,就会现在变成上下左右的箭头,这是让我们根据网页内容调整图片尺寸的,我们可以适当放大或者缩小图片来适应网页,当然,尺寸更改的前提是不致于使图片严重失真为度;对于图片更多的设置,可以在选中的图片上点鼠标右键图片属性,在弹出菜单中详细设置,为图片加入超链或者改变图片尺寸、显示方式等,但我们一般很少对图片进行复杂设置,这里不做重点,为图片插入超级链接的方法会在下文中有详细介绍;对于作为背景的图片,我们不能进行尺寸设置

34、也不能插入超级链接等操作,因为它的功能就是作背景显示。18、对图片编辑:大家一定没有想到,FrontPage可以方便的图片进行编辑,选中已经插入的图片,然后将鼠标移到操作界面的快捷按钮区域,点击右键,在弹出的菜单中选中“图片”即可弹出图片工具栏,为了方便使用,我们可以将其拖到快捷栏区,使其嵌入到操作界面。图片编辑工具栏主要功能有:为图片添加文字、自动创建缩略图、旋转、翻转图像、改变图像的对比度、亮度、对图像裁剪、设置透明色、甚至可以将图像变为黑白模式或者将图像变为立体、冲蚀效果等,还可以将所做的修改全部还原的功能因其功能远不如专业图像处理软件,所以不做重点,有兴趣的朋友可以自己深入学习。19、

35、超链接的含义:英文缩写为URL,超链接是从一个网页指向另一个网页及同一网页的不对位置或者指向另一个文件、网址、电子邮件地址等的链接,超链接可以是文本或者图片。当一个站点访问者单击超链接时,目的端将显示在Web浏览器上,并根据目的端的类型来打开或运行。例如指向一个AVI文件的超链接被单击后,该文件将在媒体播放器中打开;如果是指向一个网页的超链接,则它将显示在Web浏览器上;如果指向一个非浏览器可执行的文件,比如程序,则会弹出下载对话框;大家其实只要上网,就在不停的和超链接打交道,当我们把鼠标指向网页中的超链接时,鼠标往往会变成手形或其它形状,或者超级链接的文字发生颜色和状态的变化,提醒是已经选中

36、一个超级链接,同时在浏览器下方的状态栏会同时出现你现在指向的链接地址,如果你想看个究竟,再点击就会打开它了。20、路径的概念:创建一个超级链接其实就是写一段告诉浏览器目标文件的在哪里的代码,目标文件的位置通常就是网页制作中说常说的路径。但路径分为相对路径和绝对路径,我们创建超级链接一定要注意为了保证我们的网页在任何情况下都能顺利链接访问,我们应该创建相对路径而不是绝对路径,相信有很多人并不理解什么是相对路径,什么是绝对路径,举个例子:校园民谣中有首叫做睡在我上铺的兄弟的歌,歌名中的兄弟是睡在我的上铺的,所以相对我的铺来说他是上铺的,这就是一个相对路径的例子,相对路径就是不受具体位置约束的相对于

37、某条件的路径,在一个网站中,根目录就是我们用来规定相对路径的参照目录,比如首页在根目录下,图片在根目录下的images目录下;绝对路径就是受位置不变的指定路径比如一个文件名为girl.gif的图像文件被我们放置到了网站根目录下的images下,这是相对路径,可以表示为imagesgirl.gif,而如果用绝对路径则形式为C:bmzjsimagesgirl.gif,一般网页未保存时FrontPage对其用绝对路径调用文件,如果存盘就一定要使其存为相对路径,用相对路径可以避免因文件夹移动造成的链接无法访问的问题。21、创建超链接:我们要创建一个指向站点中网页或文件的超级链接,能作为超级链接的对象只

38、能是文字和图像,能做为超级链接的目标的可以是网页及任何文件;超级链接如果要链接到某网址,比如搜狐网站的网址的标准格式是:;还有一种常用的超级链接是电子邮件超级链接,点击的效果是打开指定的电子邮件编辑软件(见下文)。22、为文字创建或修改及去除超级链接:用鼠标拖动的办法选中想要创建超级链接的文字,然后点“插入”“超链接”或者直接在选黑的文字上点鼠标右键,在弹出菜单选择“超链接”都可以打开创建超级链接的对话框在URL一栏中输入要链接的网址或者通过点击右边第二个“浏览”按钮指向本地目录某文件,如果我们要创建一个邮件地址链接则按第三个按钮,然后在弹出窗口中输入想要链接的邮件地址即可,邮件地址的标准格式

39、在窗口有相应提示; 网址的标准格式为:也可以是具体指向的文件地址:电子邮件地址的标准格式为注意:以上链接中所用到的冒号与斜杠均为英文输入状态下的半角西文标点,如果用中文标点的冒号是绝对不行的。顺便提一下常用国际域名的含义。标准国际域名为,意思是一个商业组织,或者意思是一个网络机构,中国国家级域名,意思是国家级商业机构,政府部门域名,教育部门域名为。 如果文字已经存在超级链接,我们想对它指向的文件进行修改,那么把鼠标移到超级链接内容中的的任意一个文字文字上,再点击右键“超链接属性”即可在弹出的菜单里对超级链接的内容进行修改了,如果把URL输入栏中的内容全部去掉,就相当于去除了刚才选中的超级链接,

40、而恢复文字为无链接内容的普通文字。23、更改网页中超级链接的颜色:还是刚才的设置菜单中,右边为超级链接的颜色设置项,系统默认三种状态分别为红、紫、蓝,如果你不喜欢,根据喜好设置即可,为了标记访问过的链接,我们一般不把“超链接”和“已访问过的超链接”设置为同一颜色,通常设置为相近颜色即可。24、为图片创建及修改超级链接:选中图片,点击快捷工具栏区的"超链接"按钮或者在图片上点击鼠标右键“超链接”,即可在弹出的菜单里在URL栏输入网址或通过浏览指向一个文件创建超链接;同理,对于一个已经存在超链接的图片,我们也可以在图片上点右键选择"超链接"属性在URL中修改

41、,或者"图片属性"中默认超级链接的位置输入栏都可方便的修改或去除超级链接。25、对超级链接目标框架属性的修改:如果有上网的经验,我们会注意到,浏览网页时,我们点击一个超级链接,一种是在当前浏览器窗口直接打开点击的连接窗口,另一种是在新窗口打开点击的链接,这是通过修改超级链接目标框架实现的。 如果我们期望网页里所有链接为在原来窗口打开,那么不用设置了,系统默认的就是这样,如果我们需要网页里所有链接都在新窗口中打开,那么在网页空白处点鼠标右键-网页属性-常规,有一个铅笔模样的按钮,点击后,选中"新建窗口"即可实现。 如果我只希望某个或某些超链接具有打开新窗口

42、的属性,则在新建或者修改超链接时在URL输入栏右下方的目标框架处点击铅笔样式按钮,然后再弹出的菜单中选择"新建窗口"即可,对于其他框架结构,并不常用,在此不做详细说明。26、网页中表格的运用:此内容将作为网页制作的重中之重,所以大家一定要努力学习掌握表格的用法,如果说前面都是基础的话,这才是真正开始网页的规划制作了。在教大家插入一个表格之前,我们先要了解一下表格在网页中的作用:网页中表格除了能作为像WORD中表格的作用外,最主要的,表格用来对网页中其它元素精确的定位,可以将复杂的元素有条理的分布到网页各个位置,还有我们在网页中输入文字的时候,只要把表格的宽度定死,就可以让文

43、字顶满格后自动换行,方便我们对文字的编辑。如果没有表格,我想谁也无法做出一个复杂的图文混排的版面效果,如果我们打开一个比较专业的网页,有时并看不到表格嘛,但如果你用FrontPage打开的话,就会看到很多交错纵横的虚线,这就是表格的线条了。27、插入一个表格的方法:点击主菜单的“表格”“插入“表格”,在弹出的菜单里列出了表格的各个选项,包括表格的行数、列数,我们最多可以插入一个25行、25列的表格,接下来对齐方式是指表格相对于网页的位置,可以左对齐、或对齐、也可以居中;单元格边距指表格里插入内容的区域距表格边的距离,单元格间距指表格里每个单元格之间的距离;指定列宽可以定义为相对网页宽度的百分比

44、,表格显示时为根据浏览器窗口大小及显示分辨率自动缩放,这样做常常会使网页变形,所以我们经常设置为具体像素,在显示分辨率为800*600时最大设置为796像素即可;还有一个表格样式是可以设置表格里的文字、行字间距等内容,样式的用法会在以后讲到。28、对表格的设置:如果我们要对已经插入的表格属性进行设置,只需在表格任意单元格内点击鼠标右键,在弹出的菜单里选择“表格属性”即可对表格整体进行设置。表格的对齐方式指表格相对于网页的位置,可以选择,默认为左对齐,可以设置为居中或者右对齐或者匀齐;单元格边距和间距及表格宽度上面已经提到过了;边框字样下面的选项可以让我们设置表格边线的颜色(如果已经设置表格线粗

45、细为0则颜色设置不起作用),以及表格亮边框和暗边框的颜色;而且表格也可以有自己独立的背景色和背景图片,点击背景字样下边的颜色右边的下拉框即可对颜色进行设置,点击浏览即可将准备好的图片设置为表格背景。29、表格的修改和单元格设置:如果我们已经建立的表格单元格不够用或者多余了的时候,我们可以通过插入行、插入列、删除单元格、拆分单元格等操作来实现,默认插入行是在选定行的上方,默认插入列是在选定列的右方,删除单元是指把想要删除的单元格用鼠标拖一个区域,菜单中才会有删除单元格字样出现,拆分单元格是指把当前鼠标所指的单元格进行拆分,可以拆分成行,也可以拆分成列,我们也可以在任意一个或同时选中几个单元格对其

46、背景颜色和图像进行设置。30、对行列的平均分配方法:有时我们需要将设置的不规则的单元格重新调整,即可使用表格工具栏中的平均行高或者平均列宽,使用起来非常方便,否则要把尺寸不均的行列调整为一致可是一件让我们非常头疼的事情。用鼠标拖黑选中某行内全部或者部分连续的列,我们就可以在拖黑的部分点击鼠标右键“平均分配列宽”,即可实现对列的宽度平均化;同理,用鼠标拖黑选中某列的全部或部分连续行,即可在拖黑的单元格上点击鼠标右键“平均分配行高”来实现对行高的平均分配,此功能十分体贴。31、对单元格的设置:对表格内的文字和图像等,我们常常需要设置其相对于其所在单元格的位置,如水平对齐方式:靠左,居中或者靠右;垂

47、直对齐方式:顶边对齐、垂直居中、底边对齐等,实现方法进在具体单元格内点击鼠标右键“单元格属性”中的“水平对齐方式”和“垂直对齐方式”中选择需要的对齐样式,当然要依据版面美观整齐的原则对单元格进行个别调整;我们也可以为某个单元或某几个单元格定义背景色,背景图像,设置方法即是在某单元格或者拖黑选中的某几个单元格上点击鼠标右键,点中“单元格属性”在单元格属性窗口即可看到对单元格背景颜色和图像进行设置的界面,如果我们要设置单元格的颜色,就一般不再对其设置背景图像,如果要设置背景图像,对其单元格颜色就不再做设置了,因为实际浏览时只有显示一种效果。而且如果我们已经给表格定义了背景图像,就最好不要再为单元格

48、定义背景图像了,网页即要追求漂亮,也要追求整洁,不要给人杂货铺的感觉最好了。32、设置文字:我们在输入文字后,要对其格式进行设置,快捷菜单栏里有像WORD一样的文字设置区域,在这里我们可以设置字体、字号、边框底纹、加粗、倾斜、下划线、边框和底纹、文字颜色,还有一个比较有意思的功能是像却笔的快捷按钮-"突出显示颜色",它可以方便的将文字背景设置为某种颜色,使得这段文字非常醒目;或者我们用鼠标拖黑某段想要设置的文字,然后在上面点击鼠标右键,点中“字体”即可弹出文字设置对话框设置后下面还可以出现预览效果。在文字设置中,用鼠标拖黑选中想要设置的文字,然后点击鼠标右键,在弹出菜单中选

49、择“字体”即可打开字体设置窗口(如下图),在这个窗口的字体标签内,我们可以设置字体、字号、效果,文字颜色等,设置后的在窗口下面的预览区可以观察的到;窗口上方还有另一个标签看到了吗?就是字符间距了,打开它,在间距里,我们可以设定字间距默认当然是“普通”,我们可以根据需要设置“扩充”、“紧缩”以及在后面可以设置扩充和紧缩的具体值,而且在预览窗口中可以看到效果。33、设置段落:同理我们选择想要进行段落设置(行距)的文字,用鼠标拖黑在文字上面点击鼠标右键点中"段落"即可打开段落设置窗口,可以像在WORD中一样的设置行间距。我们即可以用系统默认的单倍行距,1.5倍、2倍行距,也根据情

50、况输入行距数值微调行距,使行距最符合版面的要求。比如用鼠标选中行距数值栏后,在行距值中填入10、20、25等数字会看到下面预览的窗口行距发生变化,当然也可以输入15pt、20pt等网页用标准像素值。这样更有利于整个网页的数值统一单位,比如我们设置字间距,表格大小,单元格大小、面边距等都是用的像素做为网页中的度量单位。34、用CSS轻松实现页面的美化:说到CSS的大名,业内人士无人不知,无人不用,它是层叠样式表的英文缩写,用它来对网页进行设置那真是非常得心应手随心所欲、它的功能强大、代码简洁,学好和用好CSS对网页制作水平的提高无疑是有巨大帮助的,如果要真正学通CSS,恐怕我们要编上比这本教材还

51、要厚的一本书,但我们只是要利用CSS做文字的设置,这是它最基本最基础的功能了,当然也很容易学,但不要小看,只要你学会一两招,就会让以前丑陋的网页容光焕发,整齐划一。 如果网页上有很多不同类型的文字,有标题、目录、内容、公告,有的相同类型的文字还不在同一个位置,如果一句一句一段设置字体字号一定会非常麻烦,只要学会用CSS(层叠样式表)来统一页面风格,所有的工作都会变的轻松多了。建立样式表的方法是点击“格式”“样式”即可打开样式菜单,在这里的左边列出了网页内部的所有格式标记,但大家并不需要害怕,我们只需要学会最常用的几个就可以轻松规划网页了,它们分别是body(网页身体)、table(表格)、td

52、(单元格),只记三个,够简单吗?因为网页中不外乎表格以外和表格以内,表格内又分为表格整体和个别单元格,你说我们把这三片地皮搞定了,还有什么漏下的地方呢?在样式列表里找到body,点击右下边的修改,然后在弹出的菜单里点左下角的样式按钮,看到了吗?菜单里也不外乎字体和段落两个基本内容,只要分别像设置文字是一样设定就行了,其它两个样式的设置方法一样,分别设置后整个个网页即按要求显示文字了,当然对于个别类型的文字,我们可以为这些文字单独设置一种样式,方法是在样式表菜单点右下靠左的"新建"按钮,起个名字,然后在下面的“格式”按钮里一口气设置好喜欢的样式就可以了。用的时候只要拖黑这部分

53、文字,然后点击“格式”“样式”“用户自定义样式”,找到刚才定义的样式,选中,确定后即可,提醒一点,WORD也同样有这个功能的,不信你试试。35、学习CSS的HTML代码:在我们浏览一个网页的时候,我们可以学习和借鉴CSS源代码,这些代码字数不多,也非常容易理解,通过在浏览器主菜单里点击“查看”“源文件”即可以记事本方式查看网页的源代码,其中CSS的设置应该在网页开头部分,以<style></style>为格式标记,比如下面这段代码:<style type="text/css">a:link text-decoration: none a:

54、active text-decoration: underline a:hover color: red; text-decoration: underline overlinea:visted color: #808080 body font-family: 宋体; font-size: 9pttable font-size: 10pt; font-family: 宋体 td color: #666699; font-family: 宋体; font-size: 10pt; line-height: 14pt </style>第一行尖括号内的意思是:样式表开始 样式类型为文字型层

55、叠样式表第二行:一个超链接的风格为:无下划线第三行:一个激活的超链接风格为:下划线第四行:一个鼠标指向时的超链接:红色上下划线第五行:一个已经访问过的:颜色为#808080第六行:网页身体体字体宋体字号9磅第七行:表格里的字号为10磅,字体是宋体第八行:单元格里的颜色为:#666699,字体是宋体,字号是10磅,行间距为14磅。第九行 样式表结束这就是一段非常经典的CSS源代码,我们在窗口中做设定的样式表无非就是这些代码,为什么要大家了解源代码呢?因为CSS的样式非常多,只靠网页制作软件提供的远远不够,我们应该多学习一些CSS对文字设置方面的代码,提高网页的制作水平,以上只是最基本的网页主体文字设置的例子,希望能引领大家进入CSS之门。36、FrontPage的常用组件之水平线:在网页制作中,一些常用组件已经被FrontPage集成进来了,比如水平线,这个组件很实用又简单,使网页看上去即亲切又动感。在网页制作中我们也许会有这样的感觉,如果对于内容比

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论