2021学年第6课 我的网页课文内容ppt课件

这是一份2021学年第6课 我的网页课文内容ppt课件，共23页。PPT课件主要包含了一什么是网页，二网站设计要求，网站导航内容，网页设计的设计法则，版面设计布局等内容，欢迎下载使用。

因特网起源于美国国防部高级研究计划管理局建立的阿帕网。网站是指在因特网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。简单地说，网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网络服务。人们可以通过网页浏览器来访问网站，获取自己需要的资讯或者享受网络服务。
许多公司都拥有自己的网站，他们利用网站来进行宣传、产品资讯发布、招聘等等。随着网页制作技术的流行，很多个人也开始制作个人主页，这些通常是制作者用来自我介绍、展现个性的地方。也有以提供网络资讯为盈利手段的网络公司，通常这些公司的网站上提供人们生活各个方面的资讯如时事新闻、旅游、娱乐、经济等
在因特网的早期，网站还只能保存单纯的文本。经过几年的发展，当万维网出现之后，图像、声音、动画、视频，甚至3D技术开始在因特网上流行起来，网站也慢慢地发展成我们现在看到的图文并茂的样子。通过动态网页技术，用户也可以与其他用户或者网站管理者进行交流。也有一些网站提供电子邮件服务。
因特网与网络和网站建设
网页是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，网页是由网站组成的页面。 如果您只有域名和虚拟主机而没有制作任何网页的话，您的客户仍旧无法访问您的网站。 在互联网上应用最为广泛的功能是网页的浏览,浏览器窗口中显示了一个页面被称为网页.网页中可以包括:文字\图片\动画\视频\音频等 网页的学名称作HTML文件，是一种可以在www网上传输，并被浏览器认识和翻译成页面显示出来的文件。
(一)、建设网站前的市场分析
1、相关行业的市场是怎样的,市场有什么样的特点，是否能够在互联网上开展公司业务。 　　 　　2、市场主要竞争者分析，竞争对手上网情况及其网站策划、功能作用。 　　3、公司自身条件分析、公司概况、市场优势，可以利用网站提升哪些竞争力，建设网站的能力（费用、技术、人力等）。
(二)、建设网站目的及功能定位
1、为什么要建立网站，是为了树立企业形象，宣传产品，进行电子商务，还是建立行业性网站？是企业的基本需要还是市场开拓的延伸？ 　　2、整合公司资源，确定网站功能。根据公司的需要和计划，确定网站的功能类型： 企业型网站、应用型网站、商业型网站（行业型网站）、电子商务型网站；企业网站又分为企业形象型、产品宣传型、网上营销型、客户服务型、电子商务型等。 　　3、根据网站功能，确定网站应达到的目的作用。 　　4、企业内部网（Intranet）的建设情况和网站的可扩展性。
4、确定网站内容的实现方式。如产品中心使用动态程序数据库还是静态页面；营销网络是采用列表方式还是地图展示
1、根据网站的目的确定网站的结构导航。 　　一般企业型网站应包括：公司简介、企业动态、产品介绍、客户服务、联系方式、在线留言等基本内容。更多内容如：常见问题、营销网络、招贤纳士、在线论坛、英文版等等。
2、根据网站的目的及内容确定网站整合功能。 　　如FLASH引导页、会员系统、网上购物系统、在线支付、问卷调查系统、在线支付、信息搜索查询系统、流量统计系统等。
3、确定网站的结构导航中的每个频道的子栏目。 　　如公司简介中可以包括：总裁致词、发展历程、企业文化、核心优势、生产基地、科技研发、合作伙伴、主要客户、客户评价等；客户服务可以包括：服务热线、服务宗旨、服务项目等。
1.网页设计之精彩配色
颜色的使用在网页制作中起着非常关键的作用，有很多网站以其成功的色彩搭配令人过目不忘。但是对于刚开始学习制作网页的人来说，往往不容易驾驭好网页的颜色搭配。
著名网站的颜色搭配方法，让我们的学习少走弯路，快速提高我们的网页制作水平
(1)、网页颜色原理和象征意义
红色：热情、奔放、喜悦、庄严 　　 黄色：高贵、富有、灿烂、活泼 　　 黑色：严肃、夜晚、沉着 　　 白色：纯洁、简单、洁净 　　 蓝色：天空、清爽、科技 　　 绿色：植物、生命、生机 　　 灰色：庄重、沉稳 　　 紫色：浪漫、富贵 　　 棕色：大地、厚朴
介绍十个配色较好的网站，大家可以学习和借鉴一下，培养对色彩的敏感以及独到的审美能力。 1）这是个大型的NBA网站。通常我们经常看到的此类网站以白色为背景，但是这个网站却用灰黑色RGB为（48，48，48/#333333）（以下颜色都用RGB表示），文章标题用色为RGB为（203，201，153/#CCCC99），菜单使用的RGB为（112，119，112/#707770）。这样的配色可以显示独特的个性，又不失大型网站的风采。
2）下面是一个娱乐类的综合性网站UGO，他的配色方案是背景色为黑色RGB为（0，0，0）中嵌套RGB（0，0，82），字体白色RGB（255,255,255）,菜单为RGB（77,114,159）。这样的虽以黑蓝为主色调，但是配以漂亮的图片，给人的感觉是生机盎然，充满了互动色彩和青春气息。如图2。　
3）下面的这个网站是大名鼎鼎的微软公司网站，微软不仅软件做的好，连网页制作也是世界一流。他的每一个网页都是制作的样板。从网页我们就可以看出微软公司的风格、作风，以及雄厚的实力。背景颜色使用蓝色RGB为（0，151，254），菜单为黑色RGB（0，0，11），菜单为灰色RGB（200，200，200），字体为黑色RGB（0，0，0），如图3。
4)现在介绍的网站相对简单，但是她的用色也别具匠心，现在我们来看一看，整体上使用的是白色RGB（255，255，255），辅助色为RGB（79，88，95），菜单色为RGB（48，64，64）和RGB（0，81，111）字体使用的是RGB（83，86，91）。虽然简单，但颜色搭配非常的科学合理。如图4
5）下面的网站采用黄色调为主，很体现公司的个性，现在我们就来看一看她的颜色搭配。主色调为黄色RGB为（255，199，48/#FFC730），辅助色调为RGB（49，102，46）字体为棕色RGB（153，103，0），中间再配以抽象的图片，显得个性十足但又不单调。如图5
6）橘红色如果运用得当的话是一种非常使用于网页上的颜色。下面的这个网站就是一个非常著名的例子。他的主色调为RGB（255，151，0）辅助色调为RGB（255，103，4），菜单RGB为（252，200，0）。字体使用黑色RGB为（0，0，0）。此种配色显得主人较为前卫，色彩热烈，给人的震慑力较强。如图6
7）鲜红色也是一种震撼感很强的颜色，如果搭配不当，也可能使网站没有风格和特点。下面的这个网站就是使用红色比较好的网站。我们来看看他的颜色搭配。他使用的主色调是RGB（200，9，0），配以抽象的图形，文字使用的是RGB（213，229，167）显得美观而不失独特，大气而不逼人。如图7
8）下面介绍的这种色调是我们制作网页的时候不会经常用到的颜色，如果使用到你的网页中，肯定会给人耳目一新的感觉。他的主色调为RGB（144，151，97）辅助色调为RGB（173，168，112）边饰为黑色RGB（0，0，0）字体为黑色RGB（0，0，0）。这样的搭配显得风格独特，颜色和谐而庄重。如图8
9）下面的设计更加的简单化，但是颜色的使用使网页并不呆板，反而让人感觉到一股浓浓的生活和家庭气氛，使人置身于美丽和爱中。他的主体是由两种颜色构成，分别是RGB（239，200，161）和RGB（201，254，200）。如此简单，但是却栩栩如生，跃然网上。如图9
10）下面举出这个例子是想证明一个道理——只要你有足够的想象力，你就能够设计出漂亮的网页。目前在网上非常流行一句话就是网页的搭配不要超过四种主要颜色，否则就有杂乱之感。下面的这个网站远远的超过了三种颜色，但是她并不失美丽。因此重要的还是色彩的驾驭能力。下面这个例子的菜单就使用了7种颜色，但是我们看到的网页并不杂乱，相反感觉作者很有创意。如图10
网页设计的颜色搭配需要在实践中不断的摸索和不断的创新，认真学习别人的先进方法和经验，可以快速的提高我们的制作水平。可以说。网页颜色搭配得当，成功也就走了一半。
就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局
布局，就是以最适合浏览的方式将图片和文字排放在页面的不同位置。
1、正常平衡---亦称“匀称”。多指左右、上下对照形式，主要强调秩序，能达到安定、诚实、信赖的效果。
2、异常平衡---即非对照形式，但也要平衡和韵律，当然都是不均整的，此种布局能达到强调性、不安性、高注目性的效果。
3、对比---所谓对比，不仅利用色彩、色调等技巧来作表现，在内容上也可涉及古与今、新与旧、贫与富等对比。
4、凝视---所谓凝视是利用页面中人物视线，使浏览者仿照跟随的心理，以达到注视页面的效果，一般多用明星凝视状。
5、空白---空白有两种作用，一方面对其他网站表示突出卓越，另一方面也表示网页品?位的优越感，这种表现方法对体显网页的格调十分有效。
6、尽量用图片解说---此法对不能用语言说服、或用语言无法表达的情感，特别有效。图片解说的内容，可以传达给浏览者的更多的心理因素。
7、网页的白色背景太虚，则可以加些色快;
10、表格太规矩，可以改用导角试试。
9、左面文字过多，右面则可以插一张图片保持平衡;
8、版面零散，可以用线条和符号串联;　
版面编排设计要求　　1.主次分明，中心突出。在一个页面上，必然考虑视觉的中心，这个中心一般在屏幕的中央，或者在中间偏上的部位。因此，一些重要的文章和图片一般可以安排在这个部位，在视觉中心以外的地方就可以安排那些稍微次要的内容，这样在页面上就突出了重点，做到了主次有别。　　2.大小搭配，相互呼应。较长的文章或标题，不要编排在一起，要有一定的距离，同样，较短的文章，也不能编排在一起。对待图片的安排也是这样，要互相错开，造成大小之间有一定的间隔，这样可以使页面错落有致，避免重心的偏离。　　3.图文并茂，相得益彰。文字和图片具有一种相互补充的视觉关系，页面上文字太多，就显得沉闷，缺乏生气。页面上图片太多，缺少文字，必然就会减少页面的信息容量。因此，最理想的效果是文字与图片的密切配合，互为衬托，既能活跃页面，又使主页有丰富的内容。
网页制作和美化工具网页制作工具1．超文本标识语言（HTML） HTML（Hypertext Markup Language）是一种专门用于Web页制作的编程语言，用来描述超文本各个部分的内容，告诉浏览器如何显示文本，怎样生成与别的文本或图像的链接点。 HTML文档由文本、格式化代码和导向其他文档的超链接组成。2．FrntPage FrntPage是由Micrsft公司推出的新一代Web网页制作工具。FrntPage使网页制作者能够更加方便、快捷地创建和发布网页，具有直观的网页制作和管理方法，简化了大量工作。 FrntPage界面与Wrd、PwerPint等软件的界面极为相似，为使用者带来了极大的方便，Micrsft公司将FrntPage封装入Office之中，成为Office家族的一员，使之功能更为强大。
网页美化工具 为了使制作的网页更为美观，用户在利用网页制作工具制作网页时，还需利用网页美化 工具对网页进行美化。 1．Phtshp Phtshp是由Adbe公司开发的图形处理软件，它是目前公认的PC机上最好的通用平面美术设计软件，它功能完善、性能稳定、使用方便，所以在几乎所有的广告、出版、软件公司，Phtshp都是首选的平面制作工具。2．Firewrks Firewrks是由Macrmedia公司开发的图形处理工具，它的出现使Web作图发生了革命性的变化。因为Firewrks是第一套专门为制作网页图形而设计的软件，同时也是专业的网页图形设计及制作的解决方案。 作为一款为网络设计而开发的图像处理软件，Firewrks还能够自动切割图像、生成光 标动态感应的JavaScript程序等等，而且Firewrks具有强大的动画功能和一个相当完美的 网络图像生成器。
3．Flash Flash是美国Macrmedia公司开发的矢量图形编辑和动画创作的专业软件，它是一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。它主要应用于网页设计和多媒体创作等领域，功能十分强大和独特，已成为交互式矢量动画的标准，在网上非常流行。Flash广泛应用于网页动画制作、教学动画演示、网上购物、在线游戏等的制作中。