网页设计Word格式.docx
- 文档编号:21062764
- 上传时间:2023-01-27
- 格式:DOCX
- 页数:33
- 大小:719.84KB
网页设计Word格式.docx
《网页设计Word格式.docx》由会员分享,可在线阅读,更多相关《网页设计Word格式.docx(33页珍藏版)》请在冰豆网上搜索。
二是直接设计和创建网页;
三是利用FrontPage提供的模板和向导创建网页。
本节只讲直接设计和创建网页。
直接设计和创建网页,具体操作步骤如下:
⑴执行“文件”→“新建”命令;
⑵在主窗口单击“新建网页”选项下的“空白网页”,进入设计窗口进行网页的设计。
5.2.3网页视图
选择“视图”→“网页”命令,进入网页视图,如图5-1所示。
在网页视图的下方,有4个选项卡,单击不同的选项卡,可以进入不同的视图。
⒈“设计”视图。
此视图为默认视图,可以在此视图中设计和编辑网页。
使用设计工具创建网页时,此视图将提供几乎是“所见即所得”的效果。
⒉“代码”视图。
此视图可以将网页设计过程翻译成HTML代码。
在该窗口,可以通过修改代码对网页进行编辑。
⒊“拆分”视图。
可以通过拆分屏幕,将屏幕分成上下两部分,很方便访问和编辑“代码”视图窗和“设计”视图窗中的内容。
⒋“预览”视图。
通过此视图,不保存网页即可看到网页在web浏览器中的显示情况。
5.2.4制作网页
创建一个新的网页或者打开一个已经存在的网页后,可以对网页进行一些设计操作:
使用框架、表格、布局或绝对定位来定位网页上的文本和图形;
使用添加文本、图形、网页横幅、表格、表单、超链接等网页元素来设计网页;
添加Flash内容、视频、声音或GIF动画等动态元素给网页增加动态效果;
添加字幕、计数器、时间、交互式按钮等给网页增加更丰富的内容;
用颜色或图片可以设置网页背景等。
制作网页有一些操作方法与Word相同,相同地方本节不再介绍,例如文本的输入、文本的删除、文本的移动和复制、文本的颜色、文本的字体、字型和大小等。
本节只介绍使用FrontPage2003制作网页的基本方法。
⒈制作网页的基本操作
在网页中可插入如下内容:
⑴插入换行符。
为了使换行后的文本保存在换行前的段落中,此时的换行要使用换行符。
插入换行符的方法如下:
先将插入点置于换行符的位置,执行“插入”→“换行符”命令,然后在出现的换行符对话框中作相应的选择,最后单击“确定”按钮返回。
⑵插入水平线。
水平线主要用于分割段落。
执行“插入”→“水平线”命令,即可在光标处插入一条水平线。
如果要设置或者修改水平线的属性,右击水平线,执行“水平线属性”命令(或者双击水平线),进入“水平线属性”对话框,利用“水平线属性”对话框可以改变水平线的颜色、高度、宽度和位置等。
⑶插入注释。
在创建编辑和修改网页的过程中,经常需要插入一些文字,提示设计的意图和方法,在编辑网页时作为参考和提示,但浏览者通过浏览器是看不到网页里的注释。
插入注释的方法如下:
普通模式下单击当前网页要插入注释的位置,把插入点设置到那里,执行“插入”→“注释”命令,弹出“注释”文本框,在注释文本框中输入注释的内容,最后单击“确定”按钮即可完成注释的插入。
⒉网页背景设置
如果使用图片或者某种颜色作为网页背景,操作步骤如下:
⑴在“网页”视图文档窗口的底部,单击“设计”按钮;
⑵右击该网页,再单击快捷菜单上的“网页属性”,出现“网页属性”对话框,如图5-2所示;
图5-2“网页属性”对话框
⑶选择“格式”选项卡,在“背景”项中,选择“背景图片”,如图5-3所示;
图5-3“格式”对话框
⑷单击“浏览”按钮,选择图片存放的位置;
⑸单击背景图片的文件,然后单击“打开”;
如果要将图片按水印形式添加,选择“使其成为水印”复选框。
⑹单击“确定”命令按钮;
⑺执行“文件”→“在浏览器中预览”命令,浏览设置背景图片的效果。
如果将背景设置成一种颜色,可在“网页属性”对话框中,选择“颜色”项下的“背景”下拉框,选择一种颜色,单击“确定”命令按钮返回。
⒊插入图片和编辑图片
⑴插入图片
执行“插入”→“图片”→“来自文件”命令,可以从当前站点选择图片文件,也可以从对话框提供的资源管理器中选择文件。
当需要对图片进行编辑时,先选择图片,然后利用图片工具栏对图片进行编辑。
如果要将插入的图片作为网页的背景,右击图片区域任意点,在出现的快捷菜单中执行“显示图片工具栏”命令,然后再作相应的选择即可。
⑵在图片上写字(图片文件格式必须为GIF格式)
在图片上写字的具体操作步骤如下:
①选择网页上的图片;
②执行“视图”→“工具栏”→“图片”命令;
③单击“图片”工具栏上的“文本”按钮;
④在图片文本上输入文字;
⑤若改变文本的属性,可以执行“格式”→“字体”命令,在弹出的“字体”对话框中选择有关选项进行设置。
⑶图片透明的设置
透明是指透过图片可以看见背景。
使图片透明的具体操作步骤如下:
①执行“视图”→“工具栏”→“图片”命令;
②单击“图片”工具栏上“设置透明色”按钮;
③在图片的某种颜色上单击。
⑷图片翻转的设置
在网页设计中,需要将图片旋转一个角度,其操作步骤如下:
②单击“图片”工具栏上“向右旋转90º
”(或者向左旋转90º
、水平翻转、垂直翻转)按钮。
⑸图片的剪切
假若只使用一幅图的某一部分时,可以使用剪切的方法。
其具体操作步骤如下:
①执行“视图”→“工具栏”→“图片”命令,出现“图片”工具栏;
②单击“图片”工具栏的“裁剪”按钮,这时图形四周的小点变成黑色,同时还出现了一个裁剪框,调整裁剪框的大小,单击“裁剪”按钮,图片即剪切完成,并将裁剪下来的图片放在网页上。
如果进行了多次剪切操作,图片已不完整,若要重新剪切,可以单击“绘图”工具栏上最右边的“还原”按钮,图片就被恢复。
⒋保存带有图片的网页
如果网页中嵌有图片,保存网页时图片不会与网页保存在一个文件中,如果网页中的图片取自本地磁盘,在保存网页时,会弹出一个“另存为”的对话框,单击对话框中的“保存”按钮,又弹出一个“保存嵌入式文件”对话框,此时可对保存的位置进行选择,最后按“确定”按钮保存返回。
⒌超链接的设置
通过超链接可以访问网页内部及其它的网页、网站的内容。
⑴创建超链接。
在页面视图中选择超链接的文本或者图片,执行“插入”→“超链接”命令,在出现的超链接对话框中,根据超链接的对象(当前网站中的网页、其它网站的网页地址、信箱地址、本地磁盘的文件)选择不同的操作。
⑵创建热点。
热点是图片上能够建立超链接的区域,一幅图片上可以创建多个热点。
创建热点的方法如下:
选定图片,单击图片工具栏上的热点形状按钮(例如圆、矩形、椭圆),拖动鼠标在图片上画出热点区域(例如圆、矩形、椭圆),热点区域画好之后随即弹出一个“创建超链接”对话框,在对话框内设定连接目标,点击“确定”按钮返回。
⑶更改超链接。
选定要更改超链接的目标,执行“插入”→“超链接”命令,打开“编辑超链接”对话框,在“超链接地址栏”中重新输入一个连接对象的名字或网址。
⑷删除超链接。
选定要删除超链接的目标,执行“插入”→“超链接”命令,打开“编辑超链接”对话框,单击“删除链接”,单击“确定”按钮即可。
⒍插入表格和编辑表格
如果要让网页有更好的布局和格式,使用表格是一种好方法。
⑴插入表格
表格插入的方法与在word中插入表格的方法相同,执行“表格”→“插入”→“表格”或“绘制表格”命令创建表格,也可单击工具栏中的“插入表格”按钮插入表格,还可使用手动绘制表格的方法绘制表格。
⑵选定表格中的单元格、行、列和块
①选定一个单元格。
按下Alt键,单击单元格。
②选定行。
当鼠标指针在表格左侧变为向右的箭头时单击。
③选定列。
当鼠标指针在表格某列上侧变为向下的箭头时单击。
④选定块。
按下鼠标左键在表格中拖动。
⑶合并、拆分和删除表格
选定删除、合并、拆分的单元格,执行“表格”菜单中相应的命令完成,如图5-6所示。
⑷格式化表格
在表格中设置表格的背景、底纹、大小等,可执行“表格”→“表格属性”→“表格”菜单相应的命令完成。
⑸给表格添加标题
单击要插入标题的单元格,执行“表格”→“插入”→“标题”命令,这时表格上方出现一个插入点,在插入点中输入标题文字,表格上方的标题即添加完成。
⑹设置隐藏表格线
右单击表格,在弹出的快捷菜单中执行“表格属性”命令,将边框粗细设置为“0”即可。
⑺设置表格背景颜色
设置表格背景颜色的步骤为:
切换到普通模式,在表格上右击,执行“表格属性”命令,在背景颜色下拉列表中选择一种颜色,单击“确定”按钮即可。
⑻设置表格立体效果
设置表格立体效果的步骤为:
在表格上右击,在弹出的快捷菜单中执行“表格属性”命令,设定边框粗细,将“亮边框”颜色和“暗边框”颜色分别设为不同颜色,最后单击“确定”按钮即可。
⑼改变表格对齐方式
改变表格对齐方式的步骤为:
在表格上右击,在弹出的快捷菜单中执行“表格属
性”命令,在“对齐方式”下拉框中选择对齐方式即可。
⒎网页特殊效果的设置
⑴网页动画效果的设置
动画效果是指当用户触发的事件发生时,引起网页上的某一元素发生变化,可以引起浏览网页者的注意,同时使网页显得生动。
添加动画效果的具体操作步骤如下:
①执行“视图”→“工具栏”→“DHTML效果”命令出现“DHTML效果”工具栏,如图5-4所示;
图5-4“DHTML效果”工具栏
②选择“设计”页面视图中需要添加动画效果的文字、图片等;
③单击“DHTML效果”工具栏的“在(0)”右方的下三角图标,选择并单击开始启用效果的事件;
④在“应用(A)”框中,选择一种动画;
⑤在“到顶端”框中,选择一种路径或效果。
⑵滚动字幕的设置
在网页中创建字幕可以在浏览器中显示一条水平滚动的文本信息,具体操作步骤如下:
①选中要设置滚动的文本,然后执行“插入”→“web组件”命令,打开“插入web组件”对话框;
②在“组件类型”下拉列表中,选择“动态效果”项,再在“选择一种效果”列表中选择“字幕”选项;
③单击“完成”按钮,打开“字幕属性”对话框,如图5-5所示;
图5-5“字幕属性”对话框
④在“速度”选项组中设定字幕移动的速度,在“背景色”列表框中设置字幕滚动文本的背景色;
⑤单击“确定”按钮,切换到“预览”视图,即可看到其效果,如图5-6所示。
图5-6在网页中插入滚动字幕的效果
⑶插入Flash动画
Flash动画是一种矢量动画格式,是当今最流行的Web页面动画格式,使用Flash程序编辑完成后导出的文件后缀名一般是SWF。
在网页中插入Flash动画具体操作步骤如下:
①执行“插入”→“Web组件”命令,打开“插入Web组件”对话框;
②在“组件类型”中选择“高级控件”项,然后在右边的列表栏中选择“Flash影片”项,如图5-7所示;
图5-7选择“Flash影片”项
③单击“完成”按钮,打开“选择文件”对话框,选择要插入的Flash文件;
④单击“插入”按钮,即可在网页中插入该Flash动画,此时可以对该对象进行放大或缩小等操作;
⑤编辑完成后切换到“预览”视图,即可播放该Flash动画。
⑷在线电影的设置
发布电影就是在网页中将电影插入进去,然后在浏览器中播放。
在网页中插入电影的方式有两种,一种是不带播放器界面的,另外一种是带有播放器界面的,这两种方式的发布都不需要复杂的程序代码,更不需要深奥的程序设计,下面介绍不带有播放器界面的形式实现在线电影的功能。
这种发布方式并不会在网页浏览器中出现播放器,而是使用快捷菜单命令来控制电影的播放和停止,具体操作步骤如下:
①在视图方式下,执行“插入”→“图片”→“视频”命令,打开“视频”对话框,
在该对话框中,指定要插入的视频文件(文件格式最好是MPEG或其兼容文件);
②单击“打开”按钮,视频文件就作为对象插入到网页中了,这时插入的电影文件在网页编辑模式下只显示为一个小图标;
③对插入的电影文件进行一些参数设置,以便指定在线电影的播放方式。
方法是:
用鼠标右击该图标,在弹出的菜单中选择“图片属性”命令,打开“图片属性”对话框。
在“视频”选项卡中,将“重复”选项选中,当然也可以设定电影只循环播放有限的次数,并在次数设置栏处输入合适的数字。
若需要在电影播放完一遍后,暂停一段时间重复播放下一遍时,将“循环延迟”选项选中,同时在这里输入需要暂停的具体时间数目为多少毫秒;
④单击“确定”按钮,返回FrontPage,选择“文件”→“保存”命令,打开“保存嵌入式文件”对话框;
⑤单击“确定”按钮,用InternetExplorer浏览器打开该网页,即可在网页上实现在线电影了。
⑸插入计数器
计数器一般用来记录网页流量。
使用FrontPage在网页中插入计数器,具体操作步骤如下:
①将光标定位到要插入计数器的位置;
②执行“插入”→“Web组件”命令,打开“插入Web组件”对话框;
③在“组件类型”列表中,选择“计数器”项,再在“选择计数器样式”列表中选择一种样式,如图5-8所示;
图5-8选择计数器样式
④单击“完成”按钮,打开“计数器属性”对话框,选中“计数器重置为”复选框,并在其后面的文本框中输入一组数字,如图5-9所示;
图5-9设置计数器属性
⑤单击“确定”按钮即可。
⑹插入背景音乐
当网页出现时,能产生背景音乐,会增加浏览网页的多种感受,其设置方法为:
进入“网页”视图的文档窗口底部的“设计”窗口,右击网页,在“网页属性”、“常规”选项卡中的“音乐背景”栏中进行选择和设置。
⑺插入音频
在网页中可以使用超链接的方法链接视频文件或是音频文件,也可以使用插入的方法插入视频文件或是音频文件。
执行“插入”→“Web组件”命令,弹出“插入Web组件”对话框。
在“组件类型”列表中选择“高级控件”,在“选择一个控件”栏选择“插件”选项,双击后,在打开的“插件属性”对话框中单击“数据源”右边的“浏览”按钮,选择要播放的音频文件,可以选择扩展名为WAV、MID、SND、AU的音频文件,单击“确定”按钮,然后切换到预览模式,单击播放器的播放按钮,音乐就可以播放了。
5.2.4网页预览
网页设计好之后,单击浏览器“预览”按钮可检查网页设计的效果。
也可执行“文件”→“在浏览器中预览”命令浏览网页设计的效果。
如果不合适,在“设计”视图下进行设置和修改,直至达到目的。
5.3DreamweaverMX2004
5.3.1DreamweaverMX2004基本知识
DreamweaverMX2004是一个“所见即所得”的网页编辑器,可帮助网页设计者轻松设计出十分精彩的互动页面效果。
Dreamweaver与Flash、Firework是网页设计三大工具,它们在功能上结合得十分紧密,一般把Flash和Firework制作的作品作为插件插入到Dreamweaver制作的网页中。
本节讲解使用DreamweaverMX2004制作网页的过程,以及如何将制作好的Flash动画插入到Dreamweaver制作的网页中。
⒈DreamweaverMX2004的界面
执行“开始”→“所有程序”→“macromedia”→“DreamweaverMX2004”命令,显示如图5-10所示Dreamweaver主界面。
图5-10Dreamweaver主界面
⒉文档窗口
文档窗口即中间白色的部分,它用于网页文件的编辑,采用“所见即所得”的编辑方式,因此其外观与在浏览器中的最终显示效果相近。
根据所选视图的不同,文档窗口的内容可能是HTML源代码,称为代码视图,也可能是HTML的页面效果,称为设计视图。
⒊属性面板
属性面板显示文档窗口中所选中元素的属性,并允许用户在属性面板中对各种属性进行设置和修改。
根据选中的对象不同,属性面板上的内容也不同。
如图5-11所示。
图5-11属性面板
⒋工具栏
工具栏提供常用命令的快捷操作功能,包括视图工具、页面标题工具、文件管理工具等。
如图5-12所示。
图5-12工具栏
代码视图用于修改或设计源代码,设计视图用于设计页面。
5.3.2创建简单的网页
Drearnweaver在进行文字与图片的插入时非常直观,它们在编辑器中的样式,基本上与在浏览器中的最终效果是一致的,因此,只要学会使用Word,就能很快掌握Dreamweaver的网页制作技术。
本节从制作一个图文混排的网页入手,开始学习网页制作全过程。
⒈创建空白网页
创建空白网页具体操作步骤如下:
⑴执行“文件”→“新建”命令,然后在“新建文档”对话框中选择“基本页”,再单击“创建”按钮,这时文档窗口中会新增加一个名为Untitled-1.htm的文件;
⑵单击“文件”菜单中的“另存为”命令,弹出“另存为”对话框,选择路径,文件名输入“index”,保存类型输入“HTML文档”,然后单击“保存”按钮。
如图5-13所示。
图5-13空白网页
空白网页指的是文档编辑窗口中没有内容,如果打开HTML源代码窗口,就会发现它还有许多源代码在里面。
通过上面创建新网页文件的办法,开发者可以创建任意数目的网页文件。
index.htm常常是“主页”,而其它网页一般都是相对于这个主页的分页面。
一个网站中,主页只有一个,分页可以是无数个。
⒉页面属性的设置
页面属性的设置,具体操作步骤如下:
⑴在属性面板上单击“页面属性”按钮,弹出“页面属性”对话框,如图5-14所示;
图5-14“页面属性”对话框
⑵单击“标题/编码”选项,在“标题”文本框中输入网页标题“index”,单击“确定”按钮;
标题会出现在“文档”窗口的标题栏中。
页面的文件名和保存文件的文件夹显示在标题栏中标题旁边的括号中。
星号表示文档包含尚未保存的更改。
用浏览器进行查看时,该标题会显示在浏览器的标题栏上。
⑶单击外观选项,再单击“背景颜色”右边的“
”图标设置网页背景色;
色彩设置包括设置背景色、文字颜色、单击过的链接文字色彩、链接文字色彩、单击链接时的文字色彩,这几种色彩可以通过弹出的色板进行选择。
也可以选择任意图像设置为网页的背景图像。
链接的色彩,默认颜色规则是:
链接文字为蓝色,单击时色彩变为红色,单击过的链接文字保持为红色。
⑷设置页面大小和位置,包括页面距屏幕左边界的距离、页面距屏幕上边界的距离、MarginWidth:
边缘宽度、MarginHeight:
边缘高度。
上述4项属性都为0时,网页可以与电脑屏幕完全融合,而不会出现网页边界的空白。
⒊文本编辑
⑴输入文本
在设计视图下可直接输入文本,但是Dreamweaver中的回车键相当于分段,行间空隙比较大,“Shift+回车键”相当于分行,行间空隙比较小,所以这里的文字全部进行分行操作。
也可把用其它文字处理软件制作的文字直接粘贴过来。
⑵通过属性面板设置文字属性,包括字体、属性、颜色等。
在属性面板上的“对齐”属性中选择对齐方式,在“大小”属性中选择字的大小,在“文本颜色”属性中选择文本颜色。
从“字体”下拉列表中选择“编辑字体列表”,弹出对话框,从“可用字体”中选择字体,单击按钮“
”,再单击“确定”按钮。
⒋插入图像(图片)
目前网页上可以使用的图像文件格式包括JPG、JPEG、GIF和PNG,BMP格式的位图占空间太大因此很少使用。
具体操作步骤如下:
⑴单击“插入”菜单中的“图像”命令;
⑵在文件夹中找到图像文件;
⑶单击“确定”按钮。
⒌添加水平线
水平线可以用来分隔文本和对象,具体操作步骤如下:
⑴执行“插入”→“HTML”菜单中的“水平线”命令,即可为网页添加水平线;
⑵在文档窗口选中该水平线,在属性面板中改变水平线属性。
⒍鼠标经过图像的设置
网页上经常有当鼠标移动到某一个图片上时,该图片被另外一个图片替代,鼠标离开后图片恢复成原来的样子。
要制作这样的动态效果,具体操作步骤如下:
⑴执行“插入”→“图像对象”菜单中的“鼠标经过图像”命令,弹出“插入鼠标经过图像”对话框;
⑵在“原始图像”文本框中输入原始图像文件名,在“鼠标经过图像”文本框中输入另外一个图像文件名;
⒎插入Flash动画文件
插入Flash动画文件具体操作步骤如下:
⑴执行“插入”→“媒体”→“Flash”命令;
⑵在弹出的对话框中选择用Flash制作的动画文件;
⒏插入音乐文件
插入音乐文件具体操作步骤如下:
⑴执行“插入”→“媒体”→“插件”命令;
⑵在弹出的对话框中选择音乐文件;
⒐在代码编辑窗口添加音乐文件
在代码编辑窗口添加音乐文件具体操作步骤如下:
⑴切换到“代码”编辑窗口;
⑵执行“窗口”→“参考”命令;
⑶在弹出的“代码片段”对话框的“书籍”对话框中选择“O’REILLYHTMLREFERENCE”,在“标签”对话框中选择“BGSOUND”;
⑷在代码编辑窗口“BODY”的下一行输入“<
BGSOUNDSRC=‘’LOOP=‘3’VOLUME=‘-300’>
”。
注意:
“SRC=‘’”单引号中要选择目标音乐文件。
⒑滚动公告板的制作
滚动公告板的制作具体操作步骤如下:
⑴选定要滚动的内容;
⑵切换到“代码”编辑窗口;
⑶输入代码。
代码为:
<
td>
marqueedirection=upheight=60Width=130Onmouseout=this.start()onmouseover=this.stop()Scr
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计
![提示](https://static.bdocx.com/images/bang_tan.gif)