工信版（中职）网页设计与制作项目一了解网页基础电子课件.pptx

《工信版（中职）网页设计与制作项目一了解网页基础电子课件.pptx》由会员分享，可在线阅读，更多相关《工信版（中职）网页设计与制作项目一了解网页基础电子课件.pptx（45页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、YCF（中职）网页设计与制作项目一了解网页基础电子课件=项目一 了解网页基础=任务一 认识网页、了解网站=网页定义 网页元素网站定义网站分类=本节提纲=网页定义网页(web)是网站上的某一个页面，是万维网中的一“页”，它是一个纯文本文件，是向访问者传递信息的载体，以超文本和超媒体为技术，采用HTML、CSS、XML等语言来描述组成页面的各种元素，包括文字、图像、音乐等，并通过客户端浏览器进行解析，从而向浏览者呈现网页的各种内容。=网页元素文本声音视频图像动画=网页元素文本网页中的信息以文本为主。文本一直是人类最重要的信息载体与交流工具，网页中的信息也以文本为主。文本在网页中的主要功能是显示信息

2、和超级链接图像图像的功能：提供信息、展示作品、装饰网页、表现风格和超级链接。网页中使用的图像主要是GIF、JPEG、PNG等格式。动画在网页中使用动画的功能是：提供信息、展示作品、装饰网页、动态交互，可以有效地引起浏览者的注意，比静止的图像更具有吸引力。在网页中使用较多的是GIF动画和Flash动画。=网页元素声音声音是多媒体网页的一个重要组成部分。在网页中添加声音，能丰富浏览者的感官体验，进而延长浏览者在网页的停留时间，以此达到商业目的或其他目的。用于网络的声音文件格式非常多，常用的是MIDI、WAV、MP3和AIF等。视频视频文件的采用让网页变得非常精彩而且有动感。网络上的许多插件也使向网

3、页中插入视频文件的操作变得非常简单。常见的格式有RealPlayer、MPEG、AVI和DivX等。=网站定义网站(Website)是指在因特网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。简单地说，网站是一种沟通工具，人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网络服务。人们可以通过网页浏览器来访问网站，获取自己需要的资讯或者享受网络服务。=交易类网站互动游戏类网站有偿资讯类网站咨讯类网站功能型网站综合类网站办公类网站根据网站所提供的服务分类网站定义=网站分类交易类网站互动游戏类网站有偿资讯类网站咨讯类网站资讯类网站这类网站以提供信息为主

4、要目的，其网站投资者的主要目的是在互联网上建立一个宣传册，不要求实现业务或工作逻辑。目前大部分的政府和企业网站都属于这类网站。代表网站：政府网站交易类网站就是人们通常所理解的电子商务网站。这类网站是以实现交易为目的，以订单为中心的。商品如何展示；订单如何生成；订单如何执行是这类网站必须具备的功能。代表网站：淘宝、京东等资讯类网站代表交易类网站代表=网站分类交易类网站互动游戏类网站有偿资讯类网站咨讯类网站互动游戏类网站这是近年来国内逐渐风靡起来的一种网站。其代表有网站有传奇、仙剑情缘、联众等。这类网站的投入是根据所承载游戏的复杂程度来定。代表网站：魔兽世界有偿资讯类网站与资讯类网站相似，这类网站

5、也是以提供资讯为主。所不同的是它们提供的资讯是要求有直接回报的，就因为这一点，这类网站都有一个业务模型。通常的做法是要求访问者或按次，或按时间，或按量付费。代表网站：101网校互动游戏类网站代表有偿资讯类网站代表=网站分类功能型网站这类网站的特点是将一个具有广泛需求的功能扩展开来，开发一套强大的支撑体系，将该功能的实现推向极值。看似简单的页面实现，却往往需要相当惊人的投入。代表网站：百度综合类网站这类网站可以把它看成一个网站服务的大卖场，不同的服务由不同的服务商去提供。这类网站的首页在设计时都尽可能把所能提供的服务都包含进来，一般看起来非常拥挤代表网站：新浪综合类网站办公类网站功能型网站办公类

6、网站目前很多单位的内联网网站还应该算作资讯类网站，如果它们加上一个多级的权限控制功能，向服务于一种办公管理方式的方向发展，就会变成这种办公类网站。代表网站：清华同方功能类网站代表综合类网站代表办公类网站代表=自主练习网网页名称名称网网页元素元素淘宝网淘宝网京京东商城商城 1号店号店苏宁宁电器器 请浏览以下网页，记录这些网页中都包含了哪些元素。【练习1】请浏览以下类型网站的代表网站，并将这些网站的首页以截图的形式保存下来。【练习2】网站网站类型型网网页截截图有有偿咨咨讯类网站网站功能型网站功能型网站综合合类网站网站办公公类网站网站=任务二 了解网页制作方法=代码制作网页软件制作网页HTML网页制

7、作软件=本节提纲=代码制作网页网页是由HTML语言构建的，所以早期最基本的制作网页方法就是用文本编辑程序，比如记事本编写HTML代码即可做成网页。=HTMLHTML即HypertextMarkupLanguage，是超文本标记语言，用于描述网页文档的一种标记语言，它不是一种编程语言，而是一种标记语言(markuplanguage)。无标题文档=HTMLHTML文档文件分两部份，由至称为开头，至称本文。Head部分用标记界定，一般包含网页标题、文档属性参数等不在页面上显示的网页元素。Body部分是网页的主体，内容均会反映在页面上，用标记来界定，页面的内容组织在其中。页面的内容主要包括文字、图像、

8、动画、超链接等。=案例11、打开windows的记事本,粘贴以下代码：2、点击记事本菜单的“文件”按钮打开“另存为”对话框,填写文件名为“First.html”。3、预览=网页制作软件1、初级网页制作软件初级网页制作软件主要针对网页制作初学者，常见的有FrontPage和dreamweaver软件。2、高级网页制作软件MicrosoftVisualStudio（简称VS）是美国微软公司的开发工具包系列产品。=Dreamweaver CS6Dreamweavercs6（图1-10）是针对专业网页设计师特别设计的一款视觉化网页开发工具，利用它可以轻而易举地制作出跨平台限制和跨越浏览器限制的充满动感

9、的网页。DreamweaverCS6网页设计软件提供了一套直观的可视界面，供使用者创建和编辑HTML网站和移动应用程序。=Dreamweaver CS6=案例2=任务三 了解网页设计基础=网页设计工作流程网页美工标准=本节提纲=网页设计工作流程一个网站的成型，包括四个阶段：设计阶段、制作阶段、检测阶段和发布阶段。1、设计阶段（1）选择主题（2）收集和加工素材2、制作阶段（1）选择网页制制作工具（2）制作网页=网页设计工作流程3、检测阶段检查网页内容的科学性、版面编排的合理性、超链接的正确性以及对网页的内容作适当的增减等。4、发布阶段制作网页的目的是要将网页发布到网上，让更多的浏览者来访问发布的

10、站点=案例3=网页美工标准网页美工是指精通美学，具有良好的创意和一定程度的审美观，并且会photoshop，flash，dreamwaver等网站制作软件的网站制作人员。必要时需要一定的策划知识，将网站所有的页面画出来并用DW和css排版出来。需要设计人员熟悉各种平面设计软件，如Photoshop、ai等软件，完成美术视觉上的设计排版等。=网页美工标准必备技能：基础美术：素描（石膏几何体、静物写生）；色彩（色彩构成、简单色彩静物写生）。Photoshop网页配色及排版设计；Illustrator网页设计；Dreamweaver网页制作软件=网页美工标准必备知识：1.色彩的平衡与呼应2.常用的色

11、彩搭配3.注意页面的分块4.网页安色的运用5.色彩模式=网页美工标准必备知识：1.色彩的平衡与呼应（1）色彩的平衡（2）色彩的呼应=网页美工标准必备知识：2.常用的色彩搭配蓝白橙蓝为主调。白底，蓝标题栏，橙色按钮或ICON做点缀。绿白蓝绿为主调。白底，绿标题栏，蓝色或橙色按钮或ICON做点缀。橙白红橙为主调。白底，橙标题栏，暗红或桔红色按钮或ICON做点缀。暗红黑暗红主调。=网页美工标准必备知识：3.注意页面的分块着手设计一个页面的时候，你必须根据所掌握的内容，以及其风格，对页面的整体进行分块。=网页美工标准必备知识：4.网页安色的运用网页安全色是在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合，简单的说就是网页安全色在任何终端上的显示效果是一样的。=网页美工标准必备知识：5.色彩模式（1）RGB模式（2）位图色彩模式（3）灰度色彩模式（4）CMYK模式=案例4=谢谢