《计算机基础之网课件.ppt》由会员分享，可在线阅读，更多相关《计算机基础之网课件.ppt（29页珍藏版）》请在三一办公上搜索。
1、第十一章 网页制作初识,11.1 概述11.2 超文本链接标识语言11.3 frontpage应用11.4 frontpage高级应用11.5 网站发布与管理,11.1 概述,网页的基本要素(1)文字 文字是网页发布信息所用的主要形式，由文字制作出的网页占用空间小，但纯文字网页，又会给人带来死板不活泼的感觉，所以，文字性网页一定要注意编排，包括标题得字型字号，内容的层次样式，是否需要变换颜色进行点缀等等。标题字号字型,(2) 图形菜单按钮背景图形链接标志交互功能,一、网页制作工具1超文本标识语言（HTML） HTML（Hypertext Markup Language）是一种专门用于Web页制
2、作的编程语言，用来描述超文本各个部分的内容，告诉浏览器如何显示文本，怎样生成与别的文本或图像的链接点。2FrontPage FrontPage是由Microsoft公司推出的新一代Web网页制作工具。FrontPage使网页制作者能够更加方便、快捷地创建和发布网页，具有直观的网页制作和管理方法，简化了大量工作。3Dreamweaver Dreamweaver是由Macromedia公司推出的一款在网页制作方面大众化的软件，它具有可视化编辑界面，用户不必编写复杂的HTML源代码就可以生成跨平台、跨浏览器的网页，不仅适合于专业网页编辑人员的需要，同时也容易被业余网友们所掌握。,11.1.3 网页制
3、作和美化工具,二、网页美化工具1Photoshop Photoshop是由Adobe公司开发的图形处理软件，它功能完善、性能稳定、使用方便，所以在几乎所有的广告、出版、软件公司，Photoshop都是首选的平面制作工具。2Fireworks Fireworks是由Macromedia公司开发的图形处理工具，是第一套专门为制作网页图形而设计的软件，同时也是专业的网页图形设计及制作的解决方案。3Flash Flash是美国Macromedia公司开发的矢量图形编辑和动画创作的专业软件，是一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。F
4、lash广泛应用于网页动画制作、教学动画演示、网上购物、在线游戏等的制作中。,一、准备工作1收集整理资料2准备素材3内容规划二、整体规划进行网站的整体规划也就是组织网站的内容和设计其结构。以确保文件内容条理清楚、结构合理，这样不仅可以很好地体现设计者的意图，也将使网站可维护性与可扩展性增强。,11.1.4 网页制作的基本步骤, 层状结构 层状结构类似于目录系统的树型结构，由网站文件的主页开始，依次划分为一级标题、二级标题等等，逐级细化，直至提供给浏览者具体信息。, 线性结构 线性结构（如图1.9所示）类似于数据结构中的线性表，用于组织本身的线性顺序形式存在的信息，可以引导浏览者按部就班地浏览整
5、个网站文件。这种结构一般都用在意义是平行的页面上。 通常情况下，网站文件的结构是层状结构和线性结构相结合的。这样可以充分利用两种结构各自的特点，使网站文件既具有条理性、规范性，又可同时满足设计者和浏览者的要求。, Web结构 Web结构（如图1.10所示）类似于Internet的组成结构，各网页之间形成网状连接，允许用户随意浏览。,主 页,页面1,页面2,页面3,页面4,页面5,页面7,页面8,一级标题,二级标题,图1.10 Web结构,页面6,三、 网页设计与制作1静态网页的设计与制作 在开始制作网页之前，建议应用少量时间对自己要制作的主页进行总体设计，例如希望主页是怎样的风格，应该放一些什
6、么信息，其他网页如何设计，分几层来处理等等。（1）应根据网站的访问者对象、要提供的信息以及制作目标得出一个最适合的网页架构。（2）每页排版不要太松散或用太大的字，尽量避免访问者浏览网页时要作大幅度的滚动，对于篇幅太长的一页可以使用内部链接解决。（3）切勿以800600以上的分辨率设计网页，常用的分辨率是640480及800600。现在国内的站点基本上都是800600，但是如果主要是面向国外访问者的站点，建议使用640480。（4）不应在每页中插入太多的广告。（5）不要每页都采用不同的墙纸，采用相同的底色或墙纸还可以增强网页一致性，以树立自己的风格。,（6）底色或墙纸必须与文字对比强烈，以易于阅
7、读。（7）不要把图片白色当作透明，外，最好还是用图片编辑工具将图片设为透明颜色。2为网页的添加动态效果 静态网页制作完成后，接下来的工作就是为网页添加动态效果，包括一些脚本语言程序和数据库程序的设计，以及加入动画效果等。,四、测试网页 当网页设计人员制作完所有网站页面之后，需要对所设计的网页进行审查和测试，测试内容包括功能性测试和完整性测试两个方面。 五、 网页上传发布 网页设计好，必须把它发布到互连网上，否则网站形象仍然不能展现出去。发布的服务器可以是远程，也可以是本地，但必须支持ASP，因为动态程序是建立在ASP基础上的。,11.2 超文本链接语言,1.名词 网页:是WWW的基本文档，它是
8、用HTML(Hypertext Markup Laguage即超文本标识语言）编写的。当网页中包含正常文本和HTML语言标记时，浏览器会“翻译”由这些HTML语言标记提供的网页结构、外观和内容的信息，从而将网页按设计者的要求显示出来，而不是显示一堆奇怪的标记。 超文本:Hypertext,是把一些信息根据需要连接起来的信息管理技术，人们可以通过一个文本的链指针打开另一个相关的文本。首页或主页（HomePage）:进入网站首先看到的那一页称首页。,2.html文件的生成：.htm,.html3.html文件基本语法： HTML编写举例欢迎使用HTML语言编写网页！,3.基本元素（1）TITLE元
9、素（2）Hn元素（n为16的自然数） （3）P元素（4）List元素 无序列表（ul） 有序列表（ol）（5）Center元素,4.网页风格的设置6.html（1）字体大小 （2）字体风格字体风格包括如下几种类型。 黑体。 斜体。 下划线。 打字机体。 （3）字体颜色 8.html指定字体的颜色可以使用如下格式text （4）标尺线（hr）标尺线可用于分隔网页的不同部分。指定标尺线的格式如下。 text,5.表格10.html（1）表格的基本形式一个表格由开始，结束，表的内容由、和定义。表示表格的行。表示表格的列。表示表格的列的名称，通常情况下可以使用代替。Border属性说明表格是否有分隔线
10、，通常在使用表格进行网页区域划分时将border属性设为零或者不使用border属性。, 宽度和高度表格的宽度可以使用width属性表示，表格的高度可以使用height属性表示，其格式如下。 表格边框宽度表格的边框宽度由border属性表示，其格式如下。 格间线宽度格与格之间的线为格间线，它的宽度可以使用中的CELLSPACING属性加以调节。格式是：#表示要取用的像素值, 文本和边框的距离文本与边框的距离使用cellpadding=#说明，其格式如下。 文本在表格中的位置文本在表格中的横向位置使用align=#说明，align属性可修饰，和元素，其格式如下。 ,6.超链接标记超文本链接（Hy
11、pertext Link）通常称为超链接（Hyperlink）或者简称为链接（Link） 7.多媒体标记(1)插入图像,7图像作为网页的背景使用图像作为网页背景的语句如下：8在文档中链接声音或视频文件链接声音文件,11.3 FrontPage2003基本操作,一、FrontPage2003的界面四种视图:“设计”、“拆分”、“代码”和“预览” 新建网页打开网页保存网页,网页框架：容器框架和其他框架（1）框架网页的建立 （2）框架网页的编辑（3）框架网页的保存,二、 网页框架,三、 表格布局,使用“布局表格和单元格”进行布局,四、网页横幅,1.插入网页横幅2.插入图片3.插入文字,五、 插入超级链接,1.选定文字或图片2.选定链接,11.3.4 高级应用,1.添加滚动字幕 2.插入网站计数器3.使用图片 4.设置背景色 5.多媒体元素的添加 :背景音乐,11.3.5 网站发布,网站的规划,文件的组织：不同用途的文件分别组织在不同类型的文件夹下。素材的组织：需要的素材需要采用相对路径的方式进行组织。,
