第十五讲 网页制作.docx

第十五讲 网页制作.docx

《第十五讲 网页制作.docx》由会员分享，可在线阅读，更多相关《第十五讲 网页制作.docx（20页珍藏版）》请在冰豆网上搜索。

第十五讲网页制作

课程名称：

网络新闻编辑（15）

授课教师

罗华

所在单位

娄底职业技术学院公管系

课程类型

理论+实践课

授课时间

4课时

授课对象

新闻采编与制作专业、文秘专业、旅游管理专业

授课内容

第十五讲网页制作

教学目的及要求

了解网页设计制作的一般原则，了解网页制作中常见的文件格式及主要工具，掌握FRONTPAGE或DREAMWEAVER软件的主要操作。

教学重点与难点

教学重点：

网页制作的文件格式及主要工具。

教学难点：

常用网页软件的主要操作。

教学方法与手段

讲授法、演示法、案例法、探究法

参考资料

《助理网络编辑师》，彭兰等编，电子工业出版社，2005年版。

《助理网络编辑师考试指南》，谭云明主编，中央广播电视大学出版社，2008年版。

《网络编辑员基础知识》，彭兰等编，中央广播电视大学出版社，2006年版。

《网络新闻编辑学》，秦州主编，复旦大学出版社，2007年版。

《网络新闻编辑学》，蒋晓丽主编，高等教育出版社，2004年版。

《网络新闻业与跨文化传播》，张咏华著，上海三联书店，2008年版。

《网络新闻实务》，金梦玉主编，北京广播学院出版社，2001年版。

《网络传播案例教程》，彭兰主编，中国人民大学出版社，2010年版。

《网络传播学导论》，赵志立著，四川人民出版社，2009年版。

《网络媒体策划》，郭春燕主编，中央广播电视大学出版社，2009年版。

教学进程和教学内容

教学方法

辅助手段

一、理论知识

（一）网站结构的规划的一般原则

     网页制作虽然是一种技术型的工作，但是在运用技术手段进行设计与制作时，需要了解网页设计的一些基本原则，这样才能制作出结构清晰、美观大方、便于传输的网页。

1．网站的组织结构

 一个内容繁杂的网站，需要有明确的设计意图和清晰的组织结构，明快悦目的设计风格。

而制定合理的网站的结构，是解决问题的关键。

结构在这里指的是页面之间的关系，它既体现了网站内容的分类关系，也反映了网站设计的组织结构关系。

一般网站结构分成3类：

层次树、线形、网状（Web）结构。

（1）层次树结构

     在这样的结构里，主页设立若干个主要栏目，每个栏目里的信息再分成一些子栏目，依次类推。

用导航系统将所有内容组成一棵由主页出发的树，用户的浏览过程是沿着树上下流动的过程，如图所示。

（2）线形结构

     在这样的结构中，所有页面具有同等的地位，用户的浏览过程是从一个页面到另一个页面的水平流动。

（3）网状结构

     也可称为无结构。

页面之间没有明显的结构，而是以内在的逻辑关系存在。

•

一般来说，设计时大多采用树型结构。

这样眉目很清晰，也便于内容的扩充。

2． 网页设计与有效传播

在网页设计时应当考虑网页的传播效果，主要包括：

一是网页的传播的速度，二是传播的质量。

（1）网页设计与传播速度

 网络带宽

在网页设计时，影响传播速度的因素有：

●网页文件的大小 （页面分割） 

●图片的数量和分辨率

●多媒体插件的运用

（2）网页设计与传播质量

网页设计对传播质量产生影响的因素有：

●网页的页面尺寸（一个方向发展或水平或垂直，需要滚动屏幕时要设置回页首的导航条。

）

●色彩运用

●浏览者的机器设备和浏览器

（二）与网页制作相关的文件格式

     在多媒体的网络设计环境中，了解不同的信息格式是正确使用它们的前提。

一般多媒体信息都有多种标准，不同标准有不同的优缺点，应该根据需要进行选择。

1．图像、动画、视频文件格式

（1）*.gif（GraphicInterchangeFormat）

（2）*.bmp（Bitmap）文件

（3）*.tif*.tiff（TagImageFileFormat）文件

（4）*.jpg*、.jpeg文件

（5）*.png（PortableNetworkGraphics）文件

（6）*.tga（TaggedGraphics）文件

（7）*.avi（AudioVideoInterleaved）文件

（8）*.mov、*.move、*.movie文件

2．音频文件格式

（1）*.wav（WaveformAudioFile）文件

（2）.aif/.aiff文件

（3）*.au文件

（4）*.mp1/*.mp2/*.mp3文件

练习一：

下列属于图形、图像处理软件的是（A）

A、PHOTOSHOPILLUSTRATORFREEHANDFIREWORKSCORELDRAW图形图像处理软件

B、FLASH3DSMAX动画制作软件

C、SOUNDFORGECOOLEDITPROWAVELAB音频软件

D、ADOBEPREMIER、品尼高Studio、索尼Vegas、微软MovieMaker、Cyberlink威力导演、友立会声会影视频软件

E、REALMEDIAQUICKTIMEWINDOWSMEDIA三大流媒体软件

练习二：

下列属于音频格式的是（D）

A、*.gif*.bmp*.psd*.tiff*.jpg*.png*.tga图像文件格式其中*.gif和*.png支持透明效果。

B、*.SWF*.GIF动画格式

C、*.AVI*.MOV*.QT*.MPEG*.MPG*.DAT*.RM*.RAM*.ASF*.WMV视频格式

D、*.WAV*.MID*.MP3音频格式

（三）网页开发设计的高级工具

     尽管HTML是网页设计的基础，但是HTML的能量仍是有限的，特别是要处理交互功能或动态效果时，它往往显得力不从心。

下面这些工具是对HTML有力的辅助。

　1．CGI

　2．ASP

　3．JavaScript（脚本）

　4．JavaApplet

　5．Flash

二、操作实训

案例一 创建EDUNET站点

在本机创建名为“edunet”站点

操作步骤：

① 执行【站点】→【管理站点】命令。

此时，系统会弹出“管理站点”对话框，如图所示。

②单击【新建】→【站点】命令，并根据向导进行站点设置。

③ 站点设置包括：

站点名称、动态网页脚本语言和服务器技术、设置测试服务器类型和站点目录、访问站点的虚拟目录、是否使用远程服务器等。

如图所示。

案例二  打开和保存网页

对于需要编辑和修改的网页，须先打开网页。

操作步骤：

①打开网页有三种方法：

其一，单击菜单栏“文件”/“打开”命令。

其二，右击“文件”面板，右击，调出快捷菜单，选择“打开”命令。

其三，在“文件”面板中直接指向要打开的网页文件名双击。

② 制作窗口显示打开网页的内容，进入网页编辑状态，可以对网页进行编辑和修改操作。

③ 单击草单栏“文件”\”保存”命令，保存文件。

提示：

如果需要对已经存在的站点中的页面进行操作，在“文件”窗口中，单击最左边的下拉菜单，选中某一站点名，即可打开该站点。

案例三  编辑基本网页

按以下的图示，编辑一个新建网页。

通过新建或打开站点中已建立的网页，即进入网页的编辑制作状态。

此时可以进行文本、图片、表格、链接等基本网页元素的编辑。

设置背景图像

将c:

\windows\clouds.gif设为背景图像。

操作步骤：

①执行“修改”菜单\“页面属性”命令，弹出“页面属性”对话框，如图所示；

② 在背景图像文本框中输入“c:

\windows\clouds.gif”;

③ 单击“确定”，完成设置。

插入表格

利用表格对网页进行页面布局。

操作步骤：

①在“对象”面板中单击“常用”选项卡上的“”按钮。

出现一个“插入表格”对话框，在对话框内填入如图所示相应数据。

单击“确定”，一个5行3列的表格就插入到编辑窗口中，如图所示。

②与此同时，“表格属性”面板出现在下方，为使表格居中，请在“表格属性”面板“对齐”下拉菜单中选择“居中对齐”命令，如图所示。

3调整表格大小，并根据网页示例，选中第一行的所有单元格，单击“单元格属性”面板中“合并单元格”按钮，如图所示。

插入背景图片

在表格第一行设置背景图片。

操作步骤：

①将光标移到表格第一行，并选中此行；

② 在单元格属性面板的背景文本框中输入背景图片抵制和名称；

插入图片

①标移到表格第一行，单击“对象面板”上的“”按钮，在弹出的“选择图像源”对话框；

②窗口里选择需要插入的图片文件。

如果图片没有在网站根目录下的文件夹内，同样会出现一个要求保存到根目录下的文件夹里去的提示窗口，选定并保存后，可以看见图片已被插入到表格的第一栏内

③同时，在下方出现一个“图片属性”面板，在链接一栏内输入“Illywebphoto／index．by”，使之能链接到网站相册的主页。

最后调整一下图片尺寸，使之和单元格的大小一致。

如图所示。

插入文字

操作步骤：

①在表格的第一栏右侧键人文字“现代网路教育技术培训中心”作为网站名称。

② 选中“现代网路教育技术培训中心”几个字，

③ 选择“文字属性”面板下拉菜单中的“编辑字体列表”命令，如图所示，此时会弹出“编辑字体列表”窗口，在“可用字体”列表框内，选择中文字体“隶书”通过“囚”按钮将其添加到“字体列表”框中，单击“确定”按钮，如图所示。

回到“文字属性”面板。

④将字体设为“隶书”，字号设为“36”，颜色选择深红色，并在链接一栏内输入“厄edunet\index.hm”，使之能链接到网站相册的主页中，如下图所示。

插入E－mail及其链接

  将光标移到表格的第三栏内，单击“常用”对象面板上的“”按钮，进行如图所示的设置，设置完毕后单击“确定”按钮插入E－mail及其链接。

插入链接

将表格中的文字与相应的网页建立链接，例如将第一行中的“联系我们”与ycwlpx@链接、“首页链接”与“index.htm”链接等。

操作步骤：

①选中建立链接的文字；

②在文字属性面板中的

输入链接对象的URL如：

ycwlpx@；或选中建立链接的文字，鼠标指向在文字属性面板中的链接图标拖向站点内的网页，与之建立链接、或双击文件夹图标打开资源管理其选择相应的文件，与之建立链接。

如图所示。

插入更新日期

操作步骤：

1在第四行内输入文本“更新日期：

”，

② 在“更新日期：

”旁插入日期。

单击“常用”对象面板上的按钮，在弹出的“插入日期”对话框内，

③ 选择一个日期格式，将“储存时自动更新”复选框选中，

④ 单击“确定”按钮，如图所示。

保存文件

经过上述步骤，一个首页文件就制作完成，将它保存为homepage.hm首页文件。

选择DreamweaverMX菜单栏“文件”／“保存”命令，选择保存路径为 d:

\edunet，文件名取为homepage.him。

案例导入

多媒体课件

网络视频

作业

课后小结