第十五讲 网页制作.docx

1、第十五讲 网页制作课程名称：网络新闻编辑（15）授课教师罗华所在单位娄底职业技术学院公管系课程类型理论+实践课授课时间4课时授课对象新闻采编与制作专业、文秘专业、旅游管理专业授课内容第十五讲 网页制作教学目的及要求了解网页设计制作的一般原则，了解网页制作中常见的文件格式及主要工具，掌握FRONTPAGE或DREAMWEAVER软件的主要操作。教学重点与难点教学重点：网页制作的文件格式及主要工具。教学难点：常用网页软件的主要操作。教学方法与手段讲授法、演示法、案例法、探究法参考资料助理网络编辑师，彭兰等编，电子工业出版社，2005年版。助理网络编辑师考试指南，谭云明主编，中央广播电视大学出版社，

2、2008年版。网络编辑员基础知识，彭兰等编，中央广播电视大学出版社，2006年版。网络新闻编辑学，秦州主编，复旦大学出版社，2007年版。网络新闻编辑学，蒋晓丽主编，高等教育出版社，2004年版。网络新闻业与跨文化传播，张咏华著，上海三联书店，2008年版。网络新闻实务，金梦玉主编，北京广播学院出版社，2001年版。网络传播案例教程，彭兰主编，中国人民大学出版社，2010年版。网络传播学导论，赵志立著，四川人民出版社，2009年版。网络媒体策划，郭春燕主编，中央广播电视大学出版社，2009年版。教学进程和教学内容教学方法辅助手段一、理论知识（一）网站结构的规划的一般原则 网页制作虽然是一种技术

3、型的工作，但是在运用技术手段进行设计与制作时，需要了解网页设计的一些基本原则，这样才能制作出结构清晰、美观大方、便于传输的网页。 1 网站的组织结构 一个内容繁杂的网站，需要有明确的设计意图和清晰的组织结构，明快悦目的设计风格。而制定合理的网站的结构，是解决问题的关键。 结构在这里指的是页面之间的关系，它既体现了网站内容的分类关系，也反映了网站设计的组织结构关系。一般网站结构分成3类：层次树、线形、网状（Web）结构。（1）层次树结构 在这样的结构里，主页设立若干个主要栏目，每个栏目里的信息再分成一些子栏目，依次类推。用导航系统将所有内容组成一棵由主页出发的树，用户的浏览过程是沿着树上下流动的

4、过程，如图所示。（2）线形结构 在这样的结构中，所有页面具有同等的地位，用户的浏览过程是从一个页面到另一个页面的水平流动。（3）网状结构 也可称为无结构。页面之间没有明显的结构，而是以内在的逻辑关系存在。 一般来说，设计时大多采用树型结构。这样眉目很清晰，也便于内容的扩充。 2网页设计与有效传播 在网页设计时应当考虑网页的传播效果，主要包括：一是网页的传播的速度，二是传播的质量。 （1）网页设计与传播速度 网络带宽在网页设计时，影响传播速度的因素有：网页文件的大小（页面分割）图片的数量和分辨率多媒体插件的运用（2）网页设计与传播质量网页设计对传播质量产生影响的因素有： 网页的页面尺寸（一个方向

5、发展或水平或垂直，需要滚动屏幕时要设置回页首的导航条。） 色彩运用 浏览者的机器设备和浏览器（二）与网页制作相关的文件格式 在多媒体的网络设计环境中，了解不同的信息格式是正确使用它们的前提。一般多媒体信息都有多种标准，不同标准有不同的优缺点，应该根据需要进行选择。1图像、动画、视频文件格式（1）*.gif（Graphic Interchange Format）（2）*.bmp（Bitmap）文件（3）*.tif *.tiff（Tag Image File Format）文件（4）*.jpg *、.jpeg文件（5）*.png（Portable Network Graphics）文件（6）*.t

6、ga（Tagged Graphics）文件（7）*.avi（Audio Video Interleaved）文件（8）*.mov、*.move、*.movie文件2音频文件格式（1）*.wav（Wave form Audio File）文件（2）.aif/.aiff文件（3）*.au文件（4）*.mp1/*.mp2/*.mp3文件练习一：下列属于图形、图像处理软件的是（A）A、 PHOTOSHOP ILLUSTRATOR FREEHAND FIREWORKS CORELDRAW 图形图像处理软件B、 FLASH 3DSMAX 动画制作软件C 、SOUNDFORGE COOLEDIT PRO W

7、AVELAB 音频软件D、ADOBE PREMIER、品尼高 Studio 、索尼 Vegas、微软 Movie Maker、 Cyberlink 威力导演、友立 会声会影视频软件E、REALMEDIA QUICKTIME WINDOWSMEDIA 三大流媒体软件练习二：下列属于音频格式的是（D）A、*.gif *.bmp *.psd *.tiff *.jpg *.png *.tga 图像文件格式 其中*.gif 和*.png 支持透明效果。B、*.SWF *.GIF 动画格式C、 *.AVI *.MOV *.QT *.MPEG *.MPG *.DAT *.RM *.RAM *.ASF *.W

8、MV 视频格式D、*.WAV *.MID *.MP3 音频格式（三）网页开发设计的高级工具 尽管HTML是网页设计的基础，但是HTML的能量仍是有限的，特别是要处理交互功能或动态效果时，它往往显得力不从心。下面这些工具是对HTML有力的辅助。 1CGI 2ASP 3Java Script（脚本） 4Java Applet 5Flash二、操作实训案例一 创建EDUNET站点 在本机创建名为“edunet”站点 操作步骤：执行【站点】【管理站点】命令。此时，系统会弹出“管理站点”对话框，如图所示。 单击【新建】【站点】命令，并根据向导进行站点设置。站点设置包括：站点名称、动态网页脚本语言和服务器

9、技术、设置测试服务器类型和站点目录、访问站点的虚拟目录、是否使用远程服务器等。如图所示。案例二 打开和保存网页 对于需要编辑和修改的网页，须先打开网页。操作步骤： 打开网页有三种方法：其一，单击菜单栏“文件”/“打开”命令。其二，右击“文件”面板，右击，调出快捷菜单，选择“打开”命令。其三，在“文件”面板中直接指向要打开的网页文件名双击。制作窗口显示打开网页的内容，进入网页编辑状态，可以对网页进行编辑和修改操作。单击草单栏“文件”保存”命令，保存文件。提示：如果需要对已经存在的站点中的页面进行操作，在“文件”窗口中，单击最左边的下拉菜单，选中某一站点名，即可打开该站点。案例三 编辑基本网页按以

10、下的图示，编辑一个新建网页。 通过新建或打开站点中已建立的网页，即进入网页的编辑制作状态。此时可以进行文本、图片、表格、链接等基本网页元素的编辑。设置背景图像将c:windowsclouds.gif设为背景图像。操作步骤： 执行“修改”菜单“页面属性”命令，弹出“页面属性”对话框，如图所示；在背景图像文本框中输入“c:windowsclouds.gif”;单击“确定”，完成设置。插入表格利用表格对网页进行页面布局。操作步骤： 在“对象”面板中单击“常用”选项卡上的“ ”按钮。出现一个“插入表格”对话框，在对话框内填入如图所示相应数据。单击“确定”，一个5行3列的表格就插入到编辑窗口中，如图所示

11、。 与此同时，“表格属性”面板出现在下方，为使表格居中，请在“表格属性”面板“对齐”下拉菜单中选择“居中对齐”命令，如图所示。3 调整表格大小，并根据网页示例，选中第一行的所有单元格，单击“单元格属性”面板中“合并单元格”按钮，如图所示。插入背景图片在表格第一行设置背景图片。操作步骤： 将光标移到表格第一行，并选中此行；在单元格属性面板的背景文本框中输入背景图片抵制和名称； 插入图片 标移到表格第一行，单击“对象面板”上的“”按钮，在弹出的“选择图像源”对话框； 窗口里选择需要插入的图片文件。如果图片没有在网站根目录下的文件夹内，同样会出现一个要求保存到根目录下的文件夹里去的提示窗口，选定并保

12、存后，可以看见图片已被插入到表格的第一栏内 同时，在下方出现一个“图片属性”面板，在链接一栏内输入“Illywebphotoindexby”，使之能链接到网站相册的主页。最后调整一下图片尺寸，使之和单元格的大小一致。如图所示。插入文字操作步骤： 在表格的第一栏右侧键人文字“现代网路教育技术培训中心”作为网站名称。选中“现代网路教育技术培训中心”几个字，选择“文字属性”面板下拉菜单中的“编辑字体列表”命令，如图所示，此时会弹出“编辑字体列表”窗口，在“可用字体”列表框内，选择中文字体“隶书”通过“囚”按钮将其添加到“字体列表”框中，单击“确定”按钮，如图所示。回到“文字属性”面板。 将字体设为“

13、隶书”，字号设为“36”，颜色选择深红色，并在链接一栏内输入“厄edunetindex.hm”，使之能链接到网站相册的主页中，如下图所示。插入 Email及其链接 将光标移到表格的第三栏内，单击“常用”对象面板上的“ ”按钮，进行如图所示的设置，设置完毕后单击“确定”按钮插入Email及其链接。插入链接将表格中的文字与相应的网页建立链接，例如将第一行中的“联系我们”与ycwlpx链接、“首页链接”与“index.htm”链接等。操作步骤： 选中建立链接的文字； 在文字属性面板中的 输入链接对象的URL如：ycwlpx；或选中建立链接的文字，鼠标指向在文字属性面板中的链接图标拖向站点内的网页，与之建立链接、或双击文件夹图标打开资源管理其选择相应的文件，与之建立链接。如图所示。插入更新日期操作步骤：1 在第四行内输入文本“更新日期：”，在“更新日期：”旁插入日期。单击“常用”对象面板上的按钮，在弹出的“插入日期”对话框内，选择一个日期格式，将“储存时自动更新”复选框选中，单击“确定”按钮，如图所示。保存文件经过上述步骤，一个首页文件就制作完成，将它保存为homepage.hm首页文件。选择Dreamweaver MX菜单栏“文件”“保存”命令，选择保存路径为 d:edunet，文件名取为homepage.him。案例导入多媒体课件网络视频作业课后小结