计算机基础之网页设计.课件.ppt

1、第十一章 网页制作初识11.1 概述11.2 超文本链接标识语言11.3 frontpage应用11.4 frontpage高级应用11.5 网站发布与管理11.1 概述概述1 网页的基本要素网页的基本要素(1)文字文字 文字是网页发布信息所用的主要形式，由文文字是网页发布信息所用的主要形式，由文字制作出的网页占用空间小，但纯文字网页，字制作出的网页占用空间小，但纯文字网页，又会给人带来死板不活泼的感觉，所以，文又会给人带来死板不活泼的感觉，所以，文字性网页一定要注意编排，包括标题得字型字性网页一定要注意编排，包括标题得字型字号，内容的层次样式，是否需要变换颜色字号，内容的层次样式，是否需要变

2、换颜色进行点缀等等。进行点缀等等。u标题标题u字号字号u字型字型(2) 图形图形u 菜单按钮u 背景图形u 链接标志u 交互功能 一、网页制作工具一、网页制作工具1超文本标识语言（超文本标识语言（HTML） HTMLHTML（Hypertext Markup LanguageHypertext Markup Language）是一种专门用于）是一种专门用于WebWeb页制作页制作的编程语言，用来描述超文本各个部分的内容，告诉浏览器如何显的编程语言，用来描述超文本各个部分的内容，告诉浏览器如何显示文本，怎样生成与别的文本或图像的链接点。示文本，怎样生成与别的文本或图像的链接点。2FrontPag

3、e FrontPageFrontPage是由是由MicrosoftMicrosoft公司推出的新一代公司推出的新一代WebWeb网页制作工具。网页制作工具。FrontPageFrontPage使网页制作者能够更加方便、快捷地创建和发布网页，具有使网页制作者能够更加方便、快捷地创建和发布网页，具有直观的网页制作和管理方法，简化了大量工作。直观的网页制作和管理方法，简化了大量工作。3Dreamweaver DreamweaverDreamweaver是由是由MacromediaMacromedia公司推出的一款在网页制作方面大公司推出的一款在网页制作方面大众化的软件，它具有可视化编辑界面，用户不必

4、编写复杂的众化的软件，它具有可视化编辑界面，用户不必编写复杂的HTMLHTML源代源代码就可以生成跨平台、跨浏览器的网页，不仅适合于专业网页编辑人码就可以生成跨平台、跨浏览器的网页，不仅适合于专业网页编辑人员的需要，同时也容易被业余网友们所掌握。员的需要，同时也容易被业余网友们所掌握。 11.1.3 网页制作和美化工具网页制作和美化工具二、二、网页美化工具网页美化工具1Photoshop Photoshop是由是由Adobe公司开发的图形处理软件，它公司开发的图形处理软件，它功能完善、性能稳定、使用方便，所以在几乎所有的广功能完善、性能稳定、使用方便，所以在几乎所有的广告、出版、软件公司，告、

5、出版、软件公司，Photoshop都是首选的平面制作都是首选的平面制作工具。工具。2Fireworks Fireworks是由是由Macromedia公司开发的图形处理工公司开发的图形处理工具，是第一套专门为制作网页图形而设计的软件，同时具，是第一套专门为制作网页图形而设计的软件，同时也是专业的网页图形设计及制作的解决方案。也是专业的网页图形设计及制作的解决方案。3Flash FlashFlash是美国是美国MacromediaMacromedia公司开发的矢量图形编辑和动画公司开发的矢量图形编辑和动画创作的专业软件，是一种交互式动画设计工具，用它可创作的专业软件，是一种交互式动画设计工具，用

6、它可以将音乐、声效、动画以及富有新意的界面融合在一起，以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。以制作出高品质的网页动态效果。FlashFlash广泛应用于网页广泛应用于网页动画制作、教学动画演示、网上购物、在线游戏等的制动画制作、教学动画演示、网上购物、在线游戏等的制作中。作中。 一、准备工作一、准备工作1收集整理资料收集整理资料2准备素材准备素材3内容规划内容规划二、整体规划二、整体规划进行网站的整体规划也就是组织网站的内容和设计其结构。以确保文进行网站的整体规划也就是组织网站的内容和设计其结构。以确保文件内容条理清楚、结构合理，这样不仅可以很好地体现

7、设计者的意件内容条理清楚、结构合理，这样不仅可以很好地体现设计者的意图，也将使网站可维护性与可扩展性增强。图，也将使网站可维护性与可扩展性增强。11.1.4 网页制作的基本步骤网页制作的基本步骤主 页页面1页面2页面3页面4页面5页面6页面7一级标题二级标题层状结构 层状结构层状结构 层状结构类似于目录系统的树型结构，由网站文层状结构类似于目录系统的树型结构，由网站文件的主页开始，依次划分为一级标题、二级标题件的主页开始，依次划分为一级标题、二级标题等等，逐级细化，直至提供给浏览者具体信息。等等，逐级细化，直至提供给浏览者具体信息。 线性结构线性结构 线性结构（如图线性结构（如图1.91.9所

8、示）类似于数据结构中的所示）类似于数据结构中的线性表，用于组织本身的线性顺序形式存在的信息，线性表，用于组织本身的线性顺序形式存在的信息，可以引导浏览者按部就班地浏览整个网站文件。这可以引导浏览者按部就班地浏览整个网站文件。这种结构一般都用在意义是平行的页面上。种结构一般都用在意义是平行的页面上。 通常情况下，网站文件的结构是层状结构和线性通常情况下，网站文件的结构是层状结构和线性结构相结合的。这样可以充分利用两种结构各自的结构相结合的。这样可以充分利用两种结构各自的特点，使网站文件既具有条理性、规范性，又可同特点，使网站文件既具有条理性、规范性，又可同时满足设计者和浏览者的要求。时满足设计者

9、和浏览者的要求。主 页页面1页面2页面3线性结构 Web结构结构 Web结构（如图结构（如图1.10所示）类似于所示）类似于Internet的组成结构，各网页的组成结构，各网页之间形成网状连接，允许用户随意浏览。之间形成网状连接，允许用户随意浏览。主 页页面1页面2页面3页面4页面5页面7页面8一级标题二级标题图1.10 Web结构页面6三、三、 网页设计与制作网页设计与制作1静态网页的设计与制作静态网页的设计与制作 在开始制作网页之前，建议应用少量时间对自己要制作的在开始制作网页之前，建议应用少量时间对自己要制作的主页主页进行总体设计，例如希望主页是怎样的风格，应该放一些什么进行总体设计，例

10、如希望主页是怎样的风格，应该放一些什么信息信息，其他网页如何设计，分几层来处理等等。，其他网页如何设计，分几层来处理等等。（1 1）应根据网站的访问者对象、要提供的信息以及制作目标得）应根据网站的访问者对象、要提供的信息以及制作目标得出一个最适合的网页架构。出一个最适合的网页架构。（2 2）每页排版不要太松散或用太大的字，尽量避免访问者浏览）每页排版不要太松散或用太大的字，尽量避免访问者浏览网网页时要作大幅度的滚动，对于篇幅太长的一页可以使用内部链页时要作大幅度的滚动，对于篇幅太长的一页可以使用内部链接接解决。解决。（3 3）切勿以）切勿以800800600600以上的分辨率设计网页，常用的分

11、辨率是以上的分辨率设计网页，常用的分辨率是640640480480及及800800600600。现在国内的站点基本上都是。现在国内的站点基本上都是800800600600，但但是如果主要是面向国外访问者的站点，建议使用是如果主要是面向国外访问者的站点，建议使用640640480480。（4 4）不应在每页中插入太多的广告。）不应在每页中插入太多的广告。（5 5）不要每页都采用不同的墙纸，采用相同的底色或墙纸还可）不要每页都采用不同的墙纸，采用相同的底色或墙纸还可以增强网页一致性，以树立自己的风格。以增强网页一致性，以树立自己的风格。（6 6）底色或墙纸必须与文字对比强烈，以易于阅）底色或墙纸必

12、须与文字对比强烈，以易于阅读。读。（7 7）不要把图片白色当作透明，外，最好还是用）不要把图片白色当作透明，外，最好还是用图片编辑工具将图片设为透明颜色。图片编辑工具将图片设为透明颜色。2为网页的添加动态效果为网页的添加动态效果 静态网页制作完成后，接下来的工作就是为网静态网页制作完成后，接下来的工作就是为网页添加动态效果，页添加动态效果，包括一些脚本语言程序和数据库程序的设计，以包括一些脚本语言程序和数据库程序的设计，以及加入动画效果及加入动画效果等。等。四、四、测试网页测试网页 当网页设计人员制作完所有网站页面之后，需要对所当网页设计人员制作完所有网站页面之后，需要对所设计的网设计的网页进

13、行审查和测试，测试内容包括功能性测试和完整性测页进行审查和测试，测试内容包括功能性测试和完整性测试两个方试两个方面。面。 五、五、 网页上传发布网页上传发布 网页设计好，必须把它发布到互连网上，否则网站形网页设计好，必须把它发布到互连网上，否则网站形象仍然不能展现出去。发布的服务器可以是远程，也可象仍然不能展现出去。发布的服务器可以是远程，也可以是本地，但必须支持以是本地，但必须支持ASPASP，因为动态程序是建立在，因为动态程序是建立在ASPASP基础上的。基础上的。 11.2 超文本链接语言超文本链接语言1.名词 网页网页:是WWW的基本文档，它是用HTML(Hypertext Marku

14、p Laguage即超文本标识语言）编写的。当网页中包含正常文本和HTML语言标记时，浏览器会“翻译”由这些HTML语言标记提供的网页结构、外观和内容的信息，从而将网页按设计者的要求显示出来，而不是显示一堆奇怪的标记。 超文本超文本:Hypertext,是把一些信息根据需要连接起来的信息管理技术，人们可以通过一个文本的链指针打开另一个相关的文本。首页首页或主页主页（HomePage）:进入网站首先看到的那一页称首页。2.html文件的生成：.htm,.html3.html文件基本语法： HTML编写举例欢迎使用HTML语言编写网页！3.基本元素（1）TITLE元素（2）Hn元素（n为16的自然

15、数） （3）P元素（4）List元素 无序列表（ul） 有序列表（ol）（5）Center元素4.网页风格的设置网页风格的设置6.html（1）字体大小）字体大小 （2）字体风格）字体风格字体风格包括如下几种类型。字体风格包括如下几种类型。 黑体。黑体。 斜体。斜体。 下划线。下划线。 打字机体。打字机体。 （3）字体颜色）字体颜色 8.html指定字体的颜色可以使用如下格式指定字体的颜色可以使用如下格式text （4）标尺线（）标尺线（hr）标尺线可用于分隔网页的不同部分。指定标尺线的格式标尺线可用于分隔网页的不同部分。指定标尺线的格式如下。如下。 text5.表格10.html（1）表格的

16、基本形式一个表格由开始，结束，表的内容由、和定义。表示表格的行。表示表格的列。表示表格的列的名称，通常情况下可以使用代替。Border属性说明表格是否有分隔线，通常在使用表格进行网页区域划分时将border属性设为零或者不使用border属性。 宽度和高度表格的宽度可以使用width属性表示，表格的高度可以使用height属性表示，其格式如下。 表格边框宽度表格的边框宽度由border属性表示，其格式如下。 格间线宽度格与格之间的线为格间线，它的宽度可以使用中的CELLSPACING属性加以调节。格式是：#表示要取用的像素值 文本和边框的距离文本与边框的距离使用cellpadding=#说明，

17、其格式如下。 文本在表格中的位置文本在表格中的横向位置使用align=#说明，align属性可修饰，和元素，其格式如下。 6.超链接标记超文本链接（Hypertext Link）通常称为超链接（Hyperlink）或者简称为链接（Link） 7.多媒体标记(1)插入图像插入图像 7图像作为网页的背景图像作为网页的背景使用图像作为网页背景的语句如下：8在文档中链接声音或视频文件在文档中链接声音或视频文件链接声音文件链接声音文件 11.3 FrontPage2003基本操作基本操作 一、FrontPage2003的界面四种视图:“设计”、“拆分”、“代码”和“预览” 1.新建网页2.打开网页3.保

18、存网页网页框架：容器框架和其他框架（1）框架网页的建立 （2）框架网页的编辑（3）框架网页的保存二、 网页框架三、三、 表格布局表格布局使用“布局表格和单元格”进行布局 四、网页横幅四、网页横幅 1.插入网页横幅2.插入图片3.插入文字五、五、 插入超级链接插入超级链接1.选定文字或图片2.选定链接11.3.4 高级应用高级应用1.添加滚动字幕 2.插入网站计数器3.使用图片 4.设置背景色 5.多媒体元素的添加 :背景音乐11.3.5 网站发布网站发布网站的规划网站的规划1. 文件的组织：不同用途的文件分别组织在不同类型的文件夹下。2. 素材的组织：需要的素材需要采用相对路径的方式进行组织。