网页网页边框

第2章!
网页设计与制作电子商务是通过!
"#$%"$#传播信息"!
"#$%"$#是通过$A技术在浏览器中实现信息的浏览"所以实现电子商务的关键是网页设计#一个成功的网页设计"除了应具有强大的功能外"还应具有美观大方的页面!
友好的文档!
漂亮的图片和方便灵活的表单等#电子商务网页设计需要动态视觉化编辑及电子商务功能的网页编辑器#美国6B1%26$@8B公司开发的=%$B3Z$BL$%是集网页制作和网站管理于一身的&所见即所得'网页编辑器"它是第一套针对专业网页设计师发展的视觉化网页开发工具"利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页#本章主要介绍=%$B3Z$BL$%,*'网页编辑器的使用方法与技巧#2"!
!
G)(8'7(8F()概述=%$B3Z$BL$%是6B1%26$@8B公司继网络多媒体开发工具T7B:G以后向因特网$!
"#$%"$#%推出的又一梦幻工具#=%$B3Z$BL$%!
T7B:G以及在=%$B3Z$BL$%之后推出的针对专业网页图像设计的T8%$Z2%P:"三者被6B1%26$@8B公司称为&网页三剑客'#2"!
"!
!
网页编辑器概述随着!
"#$%"$#的家喻户晓!
RU6H技术$详见第+章%的不断发展和完善而产生了众多网页编辑器#根据网页编辑器的基本性质"可以将其分为&所见即所得'网页编辑器和&非所见即所得'网页编辑器$即原始代码编辑器%"两者各有千秋#!
"&所见即所得'网页编辑器&所见即所得'网页编辑器的优点就是直观"使用方便"容易上手#但它同时也存在着致命的弱点#$(%难以精确达到与浏览器完全一致的显示效果#也就是说在&所见即所得'网页编辑器中制作的网页放到浏览器中很难完全达到真正理想的效果"这一点在结构复杂一些的网页$如分帧结构!
动态网页结构%中便可以体现出来#$&%页面原始代码难以控制#例如在&所见即所得'编辑器中制作一张表格只需要几分钟"但修改以使其完全符合要求可能需要几十分钟"甚至更多时间#*"&非所见即所得'网页编辑器&非所见即所得'的网页编辑器"不存在以上问题"例如在第+章中"使用8"@2Z:中的记事本来编辑网页"但是它的工作效率低#0"G)(8'7(8F()=%$B3Z$BL$%实现了两者的完美结合"既产生干净!
准确的RU6H代码"又具备&所见即所得'的高效率和直观性#*+>*2"!
"*!
G)(8'7(8F()的主要功能和特点=%$B3Z$BL$%,主要的两大功能是网页制作和网站管理#!
"网页制作方面的功能和特点"在设计网页时"可利用各种浮动面板来调整网页元素的参数"并在不关闭浮动面板的情况下直接看到修改的结果"真正实现了所见即所得的功能#它是一套提供了网页可视化编辑与RU6H代码编辑同步的网页设计工具#"可使用RU6H标记!
RU6H样式!
*图M*(!
=%$B3Z$BL$%,启动页面命令"或单击=%$B3Z$BL$%,主窗口中的关闭按钮#2"*"*!
工作区和文档窗口!
"G)(8'7(8F();工作区!
!
=%$B3Z$BL$%,工作区$参见图M*&%是非常灵活的"设计者可以根据自己的喜好来定制"因此它可以适应各种工作风格和使用层次#常用的工作区组件如下#$(%文档窗口!
用于显示创建或编辑的当前文档#$&%控制面板!
控制面板包括&文件'!
&标签面板'!
&应用程序'!
&*图M*&!
=%$B3Z$BL$%,的工作区图M*4!
=%$B3Z$BL$%,的状态栏$4%手形工具!
通过该工具"可以进行滚屏控制#$+%缩放工具!
通过该工具"对页面编辑环境进行放大#$M%设置缩放比率!
按固定的比率对页面编辑环境进行缩放#$)%窗口大小弹出菜单!
通过窗口大小弹出菜单改变文档窗口的大小#$-%文档大小和下载时间!
文档大小和页面的下载时间$包括所有独立文件"如图像和XG21PZBL$动画%"下载时间默认是以&,*,PAO:估算的#0"网页的设计模式=%$B3Z$BL$%软件"既提供了&所见即所得'的编辑工具"也提供了代码的编辑模式#图M*+!
编辑模式切换按钮设计者可以随意切换编辑模式"如图M*+所示#当设计者切换到&代码'模式后"就可以看到在第+章介绍的一样的编辑环境"可以在其中直接输入RU6H的代码"来建立网页#使用RU6H语言可以实现设计网页的所有功能"而=%$B3Z$BL$%等软件只是使网页的设计更加方便!
快捷"同时具有&所见即所得'的效果"但有的功能是无法实现的#所以"对于熟悉RU6H语言的设计者来说"应该更多地使用代码设计窗口#*->*2"*"0!
控制面板及其设置方法=%$B3Z$BL$%,中大多数的面板都是浮动的"可停泊在文档窗口的边缘或8"@2Z:桌面上"也可以把某些面板组合到带有多个标签的单个浮动面板中#对于控制面板可以进行组合与拆分#$(%把两到多个面板组合为一个标签式面板!
拖曳一个浮动面板的标签$不是标题栏%到另一个浮动面板上面#当高亮显示的边框显示在目标面板周围时"释放鼠标按键#单击窗口中的任何标签"即可把对应的面板显示在浮动面板的最前面#注意,因为对象面板没有标签"所以不能拖曳对象面板到其他面板上面"但可以拖曳其他面板的标签到对象面板上面来组合它们#$&%从一个标签式面板中移除一个面板!
直接拖它的标签到窗口之外#$4%把一个面板从一个标签式面板中移到另一个标签式面板!
拖它的标签到其他标签式面板中"当高亮显示的边框显示在目标面板周围时"释放鼠标按键#2"*"1!
&插入'面板&插入'面板是最常用的面板之一"如图M*M所示#通过&插入'面板可以很方便地在网页中插入各种对象"如表格!
层和图像等#执行&窗口'(&插入'命令"可以显示或隐藏&插入'面板#单击&插入'面板中相应的按钮或拖曳按钮图标到文档窗口中"即可插入相应的对象#图M*M!
=%$B3Z$BL$%,的&插入'面板&插入'面板默认包含以下几个嵌板,常用!
布局!
表单!
文本!
RU6H!
应用程序!
T7B:G元素和收藏夹#单击&显示为制表符'菜单项"可以显示如图M*)的&插入'面板#图M*)!
=%$B3Z$BL$%,&插入'面板的&制表符'显示方式常用嵌板介绍#$(%&常用'嵌板!
包含最常用的对象"如图像!
表格和层#$&%&布局'嵌板!
可以对页面进行布局设置#*,>*$4%&表单'嵌板!
包含创建表单和表单元素的按钮#$+%&文本'嵌板!
包含特殊字符"如版权符号!
弯曲的双引号和商标符号#2"*"2!
&属性'面板在=%$B3Z$BL$%,主窗口选择&窗口'(&属性'命令"可以打开&属性'面板"如图M*&所示$也可以单击面板左上角的三角标记"展开和折叠&属性'面板%#&属性'面板显示当前选定的页面元素$如页面上的文本!
图像!
表格!
层等%的属性值#选取的页面元素不同时"&属性'面板的显示内容也跟着变化#设计者可以通过单击页面中的不同对象"来查看&属性'面板的变化"并通过&属性'面板来设置页面中的对象#&属性'面板初始显示选定元素的最常用属性#单击&属性'面板右下角的扩展箭头"可以看到选定元素更多的属性#单击恢复箭头"&属性'面板恢复原来的大小#2"*":!
网页的基本操作!
"网页的创建与保存!
!
网页的创建!
打开和存储是制作网页的最基本操作"下面就先来介绍这些操作#$(%创建空白文档!
创建空白文档具体操作如下#启动=%$B3Z$BL$%,"执行&文件'(&新建'命令"在出现的&新建文档'对话框中"单击&常规'中的&基本页'!
&RU6H'"创建空白文件#创建新文档时"=%$B3Z$BL$%,会启动图M*-!
文档窗口切换一个新网页窗口"可在当前窗口中编辑新网页#原来窗口中仍然显示以前的网页内容"该窗口此时被切换到后台#可以通过单击文档窗口标签来进行文档的切换"如图M*-所示"或通过=%$B3Z$BL$%,的&窗口'菜单"完成相应窗口的切换#$&%打开已建的RU6H文档!
打开已有的文档有以下几种方法#!
在8"@2Z:操作系统的资源管理器中选中要打开的文件图标"右击"然后从弹出的快捷菜单中选择&使用=%$B3Z$BL$%,编辑'命令"便可打开该文档#"在=%$B3Z$BL$%,已启动的情况下"执行&文件'(&打开'命令"这时会出现&打开'对话框"选择需要打开的文件"单击&打开'按钮"便可打开该文档##若要编辑由681%2:2[#2%@创建的文件"则可以通过执行&文件'(&导入'(&2%@文档'命令"打开该文件#$在站点管理器中"双击要打开的文件图标"可打开该文件#用上述+种方法打开文件时"系统会启动新的=%$B3Z$BL$%,网页编辑窗口"载入被打开的文件#若该文件已被打开"则会自动切换到载入该文件的窗口#$4%保存指定文件!
保存文档时有以下几种情况#!
若当前同时打开了多个=%$B3Z$BL$%,的窗口"应切换到要保存文件的网页编辑窗口"然后执行&文件'(&保存'命令"或按>*"若希望当前文档以另外的路径和文件名保存"则可执行&文件'(&另存为'命令"然后输入正确的路径和文件名"保存当前文件##在网页设计过程中"有时会同时打开了多个=%$B3Z$BL$%,窗口"编辑多个=%$B3Z$BL$%文件#若希望保存全部文件"可执行&文件'(&保存全部'命令"则可保存所有打开的=%$B3Z$BL$%,窗口中正在编辑的文件#若某些窗口中的文件尚未保存过"则会出现&另存为'对话框"提示输入文件的路径和名称"然后单击&保存'按钮"即可将其保存#$+%关闭文件!
关闭文件时"需要切换到要关闭的文件编辑窗口"然后执行&文件'(&关闭'命令"关闭文件#若文件尚未保存"则会出现提示对话框"提示保存文件#单击&是'按钮则保存文件"单击&否'按钮则不保存文件"单击&取消'按钮则放弃关闭操作#*"页面的属性设置在创建新网页时"默认的页面总是以白色为背景"没有背景图像!
没有标题#制作一个网页页面时"一般需要先对网页的页面标题!
背景图像和颜色!
文本和超级链接的颜色!
文件的文字解码方式和文件中各元素的颜色等属性进行设置#执行&修改'(&页面属性'命令"系统将打开&页面属性'对话框"如图M*,所示#图M*,!
页面属性设计者可对网页页面的各项参数进行设置"页面属性设置完毕后"单击&确定'按钮保存设置结果#0"文本的输入和格式设置=%$B3Z$BL$%,是一种&所见即所得'的网页设计工具"设计者可直接输入西文字符或汉字"然后用=%$B3Z$BL$%,的文本格式化工具对文本进行格式化"在网页编辑窗口中能直接见到文本格式化的结果#$(%将各种汉字字体添加到字体列表中!
开始设置文本的字体时"字体列表中可能并不包含设计者所需要的字体"如图M*>所示#可以选择&编辑字体列表'选项"将需要的字体添加到列表中来"以后就可以直接选择该字体了#*''(*图M*>!
字体列表$&%插入空格!
在编辑网页中文字时"常常要在文档中插入空格#插入空格的操作方法有以下几种#!
将汉字输入方式设置为全角方式"按XOB1$键可输入空格("用与背景颜色相同的字符来完成插入空格(#在&属性'面板中"选择&格式'下拉列表中的&预先格式化的'选项(然后就可在编辑网页时输入空格#2"0!
站点的规划和定义如前所述"=%$B3Z$BL$%,不仅只用来制作网页"它集网页制作与站点管理两大利器于一体#设计者不只是制作几个网页"还要将网页及构成网页的图片!
声音!
动画等一系列对象有机地组合起来"构成一个网站#使用=%$B3Z$BL$%,可以完成这些功能#用=%$B3Z$BL$%,创建和管理网站"应该从站点规划和定义本地站点开始#所谓本地站点"就是指本地硬盘中存放远程网站所有文档的地方$文件夹%#建立网站的通常做法是"在本地硬盘建立一个文件夹"用来存放网站的所有文件"然后就在该文件夹中创建和编辑文档#待网页设计和测试好后"再把它们复制到网站上"供浏览者浏览#图M*('!
简单的站点结构2"0"!
!
站点的规划在定义站点之前"首先要做好站点的规划"包括站点结构和导航系统的规划"网页模板和库的使用等#$(%站点结构!
如果没有对整个站点的结构进行认真的研究就匆匆上马"日后的维护工作将会很大"网页的布局也会杂乱无章!
风格各异#因此"一开始就要精心规划好整个站点"把站点资源分门别类"存于不同的文件夹中"便于日后的维护与管理#图M*('就是一个简单的站点结构#在上述站点结构中"RU6H文件夹用来存放与网页设计有关的网页"!
6DK/文件夹用来存放网页中使用的有关图像"做站点规划时"还要考虑站点导航系统的设计#浏览者进入网站的主要目的"就是要在网站中找到所需的信息#这就要求设计者在网站设计时合理设置好导航栏"帮助浏览者寻找他所要的信息"而且也要让他清楚地知道"他现在处在网站的什么位置"怎样返回到顶层页面#此外"在规模较大的网站中"应该设立搜索功能和索引"让浏览者很快找到所需的信息#还要提供一种反馈渠道$如电子邮件反馈表单%"让浏览者能够与网站管理员或与本网站有关的其他人联系#$4%模板和库!
使用=%$B3Z$BL$%,的模板和库"可以在不同的文档中重用页面布局和页面元素"给网页的维护带来很大的方便#因此"在规划站点时也应考虑模板和库的使用#例如"如果网站中很多网页使用相同的布局"最好使用=%$B3Z$BL$%,的创建模板功能为这些布局相同的网页设计一个模板#然后以该模板为基础创建新的网页#当要修改这些网页的布局时"只要修改模板就可以了#对模板的修改将反映到所有应用该模板的网页上"不需要一页一页进行修改"这就大大方便了设计者对网页的维护#如果有某一页面元素$如一幅图像%将在网站的很多网页中使用"应该先设计好该元素"并把它存入库中"然后在网页上调用它#当要修改该元素时"只要修改库中该元素即可"修改后的元素将出现在所有调用它的网页上"免除了逐页修改的麻烦#2"0"*!
定义本地站点$(%建立站点结构!
在本地的磁盘上"建立一个文件夹"如本例中的$A22P文件夹#在该文件夹下并列建立几个文件夹RU6H!
!
6DK/!
THDXR等#$&%定义站点!
本地站点就是网站文件的本地存储区#定义本地站点要求给站点命名和指定一个计划用于存储所有网站文件的本地根文件夹#定义站点时要注意"不要使用驱动器作为站点的根"也不要使用=%$B3Z$BL$%,的文件夹#一个好的组织方法是创建一个名为X8#$$或其他名字%的文件夹"然后在该文件夹中创建本地根文件夹#定义本地站点的操作步骤如下#!
执行&站点'(&新建站点'命令"在弹出的对话框中选择&高级'选项"如图M*((所示#图M*((!
新建站点*&'(*"在本地站点选项中"定义如下内容#"定义!
站点名称"如3IZ$A:8#$#"指定!
本地根目录文件夹"如前面建立的$A22P文件夹##最后单击&确定'按钮#2"1!
网页基本编辑文字是网页中最重要的元素"通过文字可以最清晰地表达信息#在编辑文字时"可以通过多种方式设置文字的字体!
字型!
字号及颜色等"这样可以使页面更加美观和有条理#除了文字以外"丰富多彩的$A页面总是少不了图像"所以$A页中的图像处理非常重要#不但要求图像的质量"也要求网络的速度"这就要兼顾图像的质量和图像的大小#超链接$RIO$%H8"P%是网页与网页之间联系的纽带"是网页的另一个重要组成部分#有了超链接"才有!
"#$%"$#的流行#2"1"!
!
编辑文本网站是由一个个网页构成的"在一个网页中"文本是网页内容的最基本的部分#一般来说"网页中显示最多的就是文字"所以对文本的控制及布局在设计网页中占了很大的比重#$(%新建网页!
启动=%$B3Z$BL$%,"执行&文件'(&新建'(&基本页'(G#37命令#在网页中添加如图M*(&所示的内容#图M*(&!
新建网页输入后"将文件保存在适当的位置"如在前面建立的站点结构中的RU6H文件夹之下"同时进行文件的命名"如&书城简介'#文件保存之后"可以在控制面板的&文件'面板中看到该文件#$&%格式设置!
对于上面建立的文档可以进行格式上的设置"具体操作可以通过菜单或通过&属性'面板来完成#&属性'面板如图M*(4所示#图M*(4!
&属性'面板经过格式的设置"生成的网页如图M*(+所示#*4'(*