第
Download
1 / 65

第 4 章 编辑网页 - PowerPoint PPT Presentation


  • 165 Views
  • Uploaded on

第 4 章 编辑网页. 设计站点地图,有助于突出网站的主题,确定网站的内容。而对于每一个网页来说,最重要的除了网页的内容以外,还有就是网页的风格和布局。一个格局凌乱的网页,内容再精彩,也不能说是一个好网页。. 4.1 网页的布局. 4.1 网页的布局. 4.1.1 网页的风格. 针对不同的网页风格,大体可以将网页分为两大类: 商业网页和个人网页 。 商业网站一般都有比较统一的布局设计,而个人主页由于内容专一,不可能象商业网站那样内容丰富、信息量大。但恰恰因为这个原因。个人主页的形式更灵活,更容易创造出美感。. 4.1.1 网页的风格.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' 第 4 章 编辑网页 ' - primo


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

4章 编辑网页

设计站点地图,有助于突出网站的主题,确定网站的内容。而对于每一个网页来说,最重要的除了网页的内容以外,还有就是网页的风格和布局。一个格局凌乱的网页,内容再精彩,也不能说是一个好网页。

4.1网页的布局


4.1网页的布局

4.1.1网页的风格

针对不同的网页风格,大体可以将网页分为两大类:商业网页和个人网页。

商业网站一般都有比较统一的布局设计,而个人主页由于内容专一,不可能象商业网站那样内容丰富、信息量大。但恰恰因为这个原因。个人主页的形式更灵活,更容易创造出美感。


4 1 1
4.1.1网页的风格

在IE浏览器中输入网址:http://www.sohu.com,打开网站“搜狐”的首页,如图所示。通过观察,我们可以发现主页的内容很丰富,色彩鲜艳并有许多大幅广告和浮动广告栏。


4 1 11
4.1.1网页的风格

在IE浏览器中输入网址:http://www.microsoft.com/china ,打开网站“微软中国”的首页,如图所示。微软中国的主页与搜狐相比,内容比较专一,内容非常有条理,栏目突出,不象搜狐给人一种乱糟糟的感觉。


4 1 12
4.1.1网页的风格

在IE浏览器中输入网址:http://b2b.on.net.cn ,打开网站“黑白音乐”的首页,如图所示。这是一个个人主页,它看起来更简单,色彩也不够丰富,但感觉非常清新。


4 1 2
4.1.2网页布局实例

所谓网页的布局,通俗地说,就是确定网页上的网站标志、导航栏、菜单等元素的位置。不同的网页,各种网页元素所出的地位不同,他们的位置也就不同。一般情况下,重要的元素都放在突出的位置。

简单划分,网页的布局一般可以分为:“厂”字型、“同”字型、标题正文型、分栏型、Flash型、封面型等。


4 1 21
4.1.2网页布局实例

“厂”字型结构的特点是内容清晰,一目了然。网页最顶端是徽标和图片(广告)栏,下半部分的左边是导航链接,右边是信息发布区。这种结构非常常见。如图所示。


4 1 22
4.1.2网页布局实例

“同”字型结构是大型网站最常用的一种结构,特点是超链接多、信息量大。网站的顶端是徽标和图片(广告)栏,下部分分为三列,或者更多。两边的两列区域比较小,一般是导航超链接和小型图片广告等,中间是网站的主要内容,最下面是网站的版权信息等。


4 1 23
4.1.2网页布局实例

标题正文型结构的顶端是网站标识和标题,下面是网页正文。内容非常简单。一般在这种注册页面比较常见。


4 1 24
4.1.2网页布局实例

分栏型结构一般分为左右(或上下)两栏,也有的分为多栏。一般将导航链接与正文放在不同的栏中。这样打开新的网页,导航链接栏的内容不会发生变化。在WEB型的电子邮箱中多见这种结构。


4 1 25
4.1.2网页布局实例

Flash型结构,这种结构采用Flash技术来完成,其视觉效果和听觉效果与传统网页不同,往往能够给浏览者以极大的冲击。这种网页逐渐被年轻人所喜爱。


4 1 26
4.1.2网页布局实例

封面型结构,这种结构往往首先看到的是一幅图片或动画,在图片或动画的下面有一个进入下一级网页的超链接提示文字。其中图片或动画可以用Flash来制作,与Flash型不同,这种结构并不是在Flash中完成的,而是在网页制作软件中完成的。


4 1 3
4.1.3网页布局注意事项

⑴平衡性

一个好的网页布局应该给人一种安定、平稳的感觉,它不仅表现在文字、图像等要素的空间占用上分布均匀,而且还有色彩的平衡,要给人一种协调的感觉,而失去平衡的画面会使人产生不安全的感觉,视觉上也不愿多做停留。

⑵对称性

对称是一种美,我们生活中有许多事物都是对称的。但过度的对称就会给人一种呆板、死气沉沉的感觉,因此要适当地打破对称,制造一点变化。

⑶对比性

让不同的形态、色彩等元素相互对比,来形成鲜明的视觉效果。例如色彩对比、图形对比等,往往能够创造出富有变化的效果。

⑷疏密度

页面布局要做到疏密有度,不要整个网页布满密集的文本信息或图片,适当留白反而可以强调整个画面的重点部分,而对于文本信息可以通过改变行间距、字间距来制造一些变化效果。

⑸反复性

反复就是不断的出现,例如由几个有规律的小色块在网页里上下左右地延伸排列,这就是反复之美,利用大小相同的图片进行反复排版,这也是反复之美。

⑹韵律感

具有相通特性的对象,如点、圆、线条,沿曲线反复排列时,就会产生韵律感,使画面显得轻盈而富有灵气。

总之,网页的排版布局是决定网站美观与否的一个重要方面,通过合理的、有创意的布局,才可以把文、图像等内容完美地展现在浏览者面前。


4 1 4
4.1.4画出网页布局草图

网页的标题图案放在左上角,右边是一个图片栏,可以放广告。要实现这种网页的布局有两种方法,一种是采用表格,一种是使用布局视图。


4.2使用表格

按照如左图所示的设置后,就得到下面这个表格:

首先打开一个网页,然后在网页中另起一行,确定光标的位置。然后单击“插入”面板的按钮,得到如下图所示的对话框。

4.2.1插入表格


4 2 2
4.2.2插入、删除表格的行与列

⑴单击表格最下面一行,使光标出现在该行中。然后单击鼠标右键打开快捷菜单,移动鼠标指针到快捷菜单的“表格”上弹出子菜单,在下一级菜单中单击“插入行或列”,如左下图所示,打开如右下图所示“插入行或列”对话框。


4 2 21
4.2.2插入、删除表格的行与列

⑵在“插入行或列”对话框选中“行”,在“行数”右端的栏位中输入1,然后选中“所选之下”。单击“确定”按钮,在图片所在行的下面将插入一行,结果如图所示。


4 2 22
4.2.2插入、删除表格的行与列

删除行的步骤

首先单击鼠标,使光标出现在该行中。然后单击鼠标右键打开快捷菜单,移动鼠标指针到快捷菜单的“表格”上弹出子菜单,在下一级菜单中单击“删除行”,该行被删除,如图所示。


4 2 3
4.2.3合并与拆分单元格

现在将表格最下端的两个单元格合并成一个。拖动鼠标指针选中第三行两个单元格,移动鼠标指针到“属性”面板上,如右上图所示,单击“合并单元格”按钮,两个单元格被合并,结果如右下图所示。


4 2 31
4.2.3合并与拆分单元格

首先单击鼠标,使光标出现在该单元格中。移动鼠标指针到“属性”面板上,单击“拆分单元格”按钮,如上图所示,打开如下图所示“拆分单元格”对话框。在“拆分单元格”对话框中选中“拆分为行”,在“行数”右端的栏位中输入“2”。单击 “确定”按钮 ,该单元格被分为两个单元格,该表格恢复原状。


4 2 4
4.2.4表格的嵌套

我们在第二行第一个单元格中在插入一个表格,用来存放与其它网页连接的一些文字,将来建立超链接后,可以通过单击这些文字打开相应的网页。

单击鼠标,将光标移动到该单元格中,单击“插入”面板的 按钮,打开“插入表格”对话框,如左下图所示。输入5行1列,单击“确定”按钮,结果如右下图所示。


4 2 5
4.2.5使用“表格属性”对话框

对表格进行设置,主要是在属性面板中进行,注意的是选取表格与选取单元格时,属性面板的内容是不同的。在该属性面板中,能够设置框线的宽度、单元格间距,以及背景色等。


4.3布局视图

布局视图是Dreamweaver MX增强的一个功能,使用它可以非常方便地对网页布局进行规划。

⑴在插入面板中,单击“布局”选项卡,如下图所示。

4.3.1布局视图工具栏

⑵单击“布局视图”按钮,切换到布局视图,系统会弹出如左图所示的对话框,提示单击“布局单元格”按钮和“布局表格”按钮的使用方法。


4.3布局视图

4.3.1布局视图工具栏

⑶单击“确定”按钮,可以关闭该对话框。如果不希望该对话框出现,可以在“不再显示此消息”前的复选框内单击,然后再单击“确定”按钮。这时可以发现插入面板右边的两个按钮已经由虚变实,可以使用了。


4 3 2
4.3.2使用布局视图规划网页布局

⑴单击绘制布局表格按钮 ,编辑区顶端出现“布局视图”几个字。移动鼠标到编辑区,指针变成 状,按住鼠标指针拖动,画出一个绿色的表格,如图所示。


4 3 21
4.3.2使用布局视图规划网页布局

⑵用同样的方法,在第一个表格的下面再画两个布局表格,结果如图所示。


4 3 22
4.3.2使用布局视图规划网页布局

⑶在插入面板中单击绘制布局单元格按钮 ,移动鼠标指针,在顶端表格中画出一大一小两个单元格;在第二个表格中,一大五小六个单元格;最后在下面一个表格中画出一个和表格一样大的单元格。结果如下图所示。


4 3 23
4.3.2使用布局视图规划网页布局

⑷如果对表格中各单元格的大小和位置不满意,可以进行修改。将鼠标移动到单元格框线上,这时框线颜色由绿色变成红色,单击鼠标,单元格框线变成蓝色,并出现8个正方形选取块。将鼠标指针放在正方形选取块上鼠标指针变成双向箭头,拖动鼠标可以更改单元格的大小,如下图所示。


4 3 24
4.3.2使用布局视图规划网页布局

⑸在插入面板中单击“标准视图”按钮,返回标准视图,结果如下图所示。


4.4 设置文字

⑴单击窗口菜单下的“属性”命令,可以打开“属性面板”。在“属性面板”中,单击 右端的 ,在下拉菜单中选择 选项,如下图所示。

4.4.1 字体与字号


4 4 1
4.4.1 字体与字号

⑵在弹出的“编辑字体列表”对话框中,如左下图所示,选中“可用字体”栏中的中文字体,本例选中“仿宋_GB2312”,单击 按钮,字体出现在“选择的字体”栏中。单击“确定”按钮,“仿宋_GB2312”被加入到“属性面板”的字体下拉框中,结果如右下图所示。


4 4 2
4.4.2文字的对齐方式

⑴选中整个表格,如上图所示,将属性面板中的“填充”值更改为10,这样各个单元格间的距离更改为10像素;将“间距”值更改为10,这样表格中的文字与表格框线的距离变成10像素。更改后结果如下图所示。


4 4 21
4.4.2文字的对齐方式

⑵将鼠标指针移动到表格最下端的单元格中,拖动鼠标指针选中表格中的所有文字,在属性面板中单击“文本缩进”按钮, 将文字移动到表格中央。


4 4 3
4.4.3文字的风格与颜色

选中“最新动态”几个字,在属性面板中单击 按钮,打开颜色板,选择褐色,将文字设为褐色,如左图所示;单击 按钮,将文字设为加粗。用同样的方法将“产品动态”、“产品下载”、“留言簿”、“与我联系”等设置成褐色、加粗。结果如右图所示。


4.5美化网页

1、图片格式

因特网上应用最广泛的图片格式有两种:GIF文件和JPEG文件。

GIF(Grappler Interchange Format )图片文件是第一种被WWW所支持的图形文件。它采用LZW压缩算法,存储格式从1位到8位,最多支持256种颜色。GIF文件相对体积较小,多数用于图标,按钮,滚动条和背景等等。

JPEG或JPG称为联合图片专家组(Joint Photograph Expert Group)格式,它主要应用于摄影图片的存储和显示,是一种静态影像压缩标准。

4.5.1插入图片

JPG文件一般色彩比较饱满、鲜艳

GIF文件一般都比较小巧


4.5美化网页

GIF文件与JPEG文件的对比

4.5.1插入图片


4 5 1
4.5.1插入图片

2、插入图片的方法

⑴在Dreamweaver中打开网页“index.htm”,在左上角单元格中单击鼠标,光标显示在该单元格中。单击对象面板上的 按钮,弹出“选择图像源”对话框,单击查找范围右边的 按钮,在下拉菜单中,选择C盘,如下图所示。


4 5 11
4.5.1插入图片

⑶在文件夹“images”中选择文件“title”,在对话框右边显示的是图片的预览图像,通过预览可以知道图片的内容。单击“确认”,将图片插入网页,如下图所示。

⑵在C盘中双击文件夹“网页素材”,将它打开,接着在文件夹“网页素材”中双击文件夹“images” ,如下图所示。


4 5 12
4.5.1插入图片

⑷由于图片在C 盘的“网页素材”文件夹中,在网站以外,所以,Dreamweaver弹出一个对话框,如右图所示,提示是否将图片保存到网站中。单击“是”。

⑸网站中现在只有5个网页文件,处于对网站管理的要求,最后将图片、动画、声音等文件保存在另一个新的文件夹中,这样可以保持网站根目录的整洁。在“拷贝文件为”对话框中单击“创建新文件夹”按钮,如右图所示。


4 5 13
4.5.1插入图片

⑹输入images作为新文件夹的名字,然后双击该文件夹,将它打开。在文件名框中输入“title.gif”作为文件名,单击“保存”按钮,如左下图所示。可以看到图片被插入到网页中,如右下图所示。


4 5 14
4.5.1插入图片

⑺用同样的方法在网页顶端右边的单元格中插入另一幅图片,如图所示。


4 5 2
4.5.2设置图片

单击图片,图片被一个黑框框住,同时出现三个小的实心黑框。鼠标指针指向图片右下角,当鼠标指针变成双向箭头时,拖动鼠标,更改图片的大小,如右图所示。

在单击图片时,属性面板同时被打开。单击“对齐”右边的 按钮,选择“居中”。在“替代”框中输入“青岛杰力电子工程有限公司”,如下图所示。这样,当鼠标在浏览器中移动到该图片上时,会显示“青岛杰力电子工程有限公司”几个字;特别地,由于网络慢等原因,图片不能正常下载时,图片区域会显示替代文字,从而不会影响到网页的整体效果。


4 5 3
4.5.3添加网页背景

要使网页漂亮起来,设置页面属性必不可少。在编辑窗口中打开主页index.htm。在左图所示的菜单中单击“页面属性”命令,打开“页面属性”对话框,如右图所示:


4.6创建并使用布局模板

⑴在Dreamweaver中打开网页“index.htm”,用鼠标单击“文件”菜单,在弹出的菜单中选择“另存为模板”命令,如图所示。

4.6.1创建布局模板


4 6 1
4.6.1创建布局模板

⑵在“另存模板”对话框中输入模板的名称,单击“保存”按钮,如左下图所示。这时,可以发现在站点选项卡中出现一个新的文件夹,名为Templates,模板文件就保存在该文件夹中,如右下图所示。


4 6 11
4.6.1创建布局模板

⑶下面为该模板建立可编辑区域。移动鼠标指针,在中间右侧的单元格中单击,使光标出现在该单元格中。然后在编辑区域顶端工具栏区域,单击“模板”选项卡,在“模板”工具栏中单击“可编辑区域”按钮,如图所示。


4 6 12
4.6.1创建布局模板

⑷在出现的“新建可编辑区域”对话框中,出现“可编辑区域”的名称,我们不必更改它,单击“确定”按钮,如下图所示。


4 6 13
4.6.1创建布局模板

⑸完成设置,在该单元格中出现“可编辑区域”的名称。用同样的方法在左边的单元格中创建一个“可编辑区域”,并将嵌套的表格移动到可编辑区域中。最后,用鼠标单击“文件”菜单,在弹出的菜单中选择“保存”命令,将模板文件保存,如图所示。


4 6 2
4.6.2使用网页布局模板

⑴用鼠标单击“文件”菜单,在弹出的菜单中选择“新建”命令,如图所示。


4 6 21
4.6.2使用网页布局模板

⑵如图所示,在“从模板创建”对话框中有三部分内容,在左侧窗口选择站点“青岛杰力电子有限公司”;在中间部分选择网页模板文件“bujv”,在右侧的窗口会见到该模板的预览图。确认无误后,单击“创建”按钮。


4 6 22
4.6.2使用网页布局模板

⑶用鼠标单击“文件”菜单,在弹出的菜单中选择“保存”命令,将网页文件保存,如图所示。


4 6 23
4.6.2使用网页布局模板

⑷在“保存为”对话框中,输入“biaojia”为网页的名称,单击“保存”按钮,如下图所示。


4 6 24
4.6.2使用网页布局模板

⑸由于我们在建立网站地图时,已经建立了一个空的网页文件,名字也是“biaojia”,所以Dreamweaver会弹出一个警告对话框,询问是否覆盖原来的空网页文件。单击“是”按钮,将空网页文件覆盖。

⑹用同样的方法,将网页模板应用到网页“最新动态”、“产品下载”、“留言簿”中。


4.7整齐段落

在Dreamweaver中打开网页“index.htm”,在右侧的单元格中输入主页相关内容,设置字体字号,结果如图所示。


4 7 1
4.7.1段落缩进

⑴首先切换到代码编辑区,单击“查看”菜单。在下拉菜单中选择“代码和设计”命令,如图所示。这时,窗口分为两部分,上面为HTML代码编辑区域,下面为普通编辑区域。


4 7 11
4.7.1段落缩进

⑵在HTML代码编辑区域中,找到要段落缩进的文字,在文字前插入&nbsp。注意由于一个汉字占两个汉字,所以要插入4个标记,如图所示。


4 7 12
4.7.1段落缩进

⑶用鼠标单击“文件”菜单,在弹出的菜单中选择“保存”命令,将网页文件保存,如图所示。


4 7 13
4.7.1段落缩进

⑷单击“查看”菜单。在下拉菜单中选择“设计”命令,如图所示,切换到设计编辑区,这时发现文字的前面并没有出现空格。


4 7 14
4.7.1段落缩进

⑸用鼠标单击菜单栏上的“文件”,移动鼠标指针到“在浏览器中预览”上,在其下一级菜单中单击“iexplore”。或用快捷键F12将网页在浏览器中打开,可以看见每一段首行已经空出两格,如图所示。


4 7 2
4.7.2段落间距

段落间距可以通过使用Shift+Enter组合键更改。将光标移动到段末,然后按键盘上的“Delete”键,将段末符号删除,两段合并成一段。再按下Shift+Enter组合键,重新分段,重复操作,更改所有段间距,结果如图所示。


4 7 21
4.7.2段落间距

在IE浏览器中预览网页可以看到真实的效果,如图所示。如果与设计有偏差,可以返回Dreamweaver编辑窗口中进行修改。


4 7 3
4.7.3插入水平线

⑴将光标移动到正文前边,单击插入面板的按钮 ,网页上自动插入一条水平线,如下图所示。


4 7 31
4.7.3插入水平线

⑵当用鼠标选取水平线时,窗口下面的属性面板显示水平线的相关内容,在该面板中可以修改水平线的宽度和高度,如下图所示。

⑶要更改水平线颜色在属性面板中无法做到,可以通过更改代码来完成。首先单击鼠标选中水平线,然后在水平线上右击鼠标,弹出如右图的快捷菜单,选择“编辑标签”命令。


4 7 32
4.7.3插入水平线

⑷在“标签编辑器”对话框中,在左侧窗口选择“浏览器特定的”,在右侧窗口选择一种颜色,单击“确定”按钮。

注意:在更改水平线颜色以后,在Dreamweaver中不能看到水平线的颜色,要想看到水平线的颜色,必须在浏览器中预览。

在实际的应用中,一般不直接使用水平线,而是用图片代替。只是在没有合适图片的情况下才使用水平线。那么怎样删除水平线呢?只要选中水平线,按下键盘上的“Delete”键即可。


小结

本章主要介绍了常见网页的风格与布局,以及文字、图片在网页中的应用。

实现网页布局的两种方法:表格和布局视图。

对于表格的插入与修饰,本章介绍的比较详细,在使用中要体会表格在网页设计中的作用,特别是在表格中再插入表格,即表格的嵌套在网页制作中被经常使用到,尤其是在一些大型网站中,为了使大量的信息整齐地展示在浏览者面前,表格的嵌套就使用得最为频繁。

由于网页中的表格一般比较简单,所以Dreamweaver MX对表格的支持不象WORD那样好,这使得我们在应用表格规划网页时非常烦琐。Dreamweaver MX提供了布局视图来完成网页布局,然后可以转换成表格达到同样的效果。学习者可以根据情况采用不同的方法来实现网页的布局。

在Dreamweaver MX 中输入文字,设置文字,以及设置背景,插入图片的方法要熟练掌握。包括文字的字体、字号、对齐方式等。其中字号的设置等与其它的文本编辑软件略有不同,这些设置选项大多数都在“属性面板”中,要多加练习,认真体会。


ad