计算机:网页设计基础及DWCS5基础.ppt
《计算机:网页设计基础及DWCS5基础.ppt》由会员分享,可在线阅读,更多相关《计算机:网页设计基础及DWCS5基础.ppt(41页珍藏版)》请在三一办公上搜索。
1、第1课 网页设计基础知识及DW CS5基础,:理解网页与网站的区别;了解网页的基本元素;熟悉并掌握HTML语言基础知识;理解并熟悉网页设计的基本流程;掌握通过输入HTML代码和Dreamweaver CS5制作简单的网页。:超文本标记语言(HTML)基础;简单的网页制作。(上机实验):网页与网站的区别;HTML语言基础知识。,一、认识网页与网站,(1)静态网页,也就是HTML静态页面,它是物理存在的文件,这类网页可以由网页浏览器(如:IE、傲游)直接浏览。(2)动态网页,它不能由浏览器直接浏览,而必须经过Web服务器软件解释或编译后,以HTML格式将结果输出到客户端浏览器上。,1、网页,一、认
2、识网页与网站,网站是一个复杂的系统,它不仅包括网页、Web 应用程序,还包括与之相关的数据库及各类媒体文件,甚至还包括操作系统、Web 服务器软件以及承载网站运行的各类硬件设备等。,2、网站,图1-1奥迪A8网站首页,二、网页的基本元素,文本是网页中运用最为广泛的元素之一,是网页存在的基础。在网页设计中,我们可以通过设置字体、字号、颜色、背景等属性来改变文本的视觉效果。,1、文本,图1-2以文本为主体的网页,二、网页的基本元素,目前,网页支持的图像格式主要有3种:JPEG(JPG)、GIF和PNG。其中,GIF和PNG图像支持透明背景。,2、图像,图1-3以图像为主的网页,二、网页的基本元素,
3、目前,在网页设计过程中所使用的动画主要是Flash动画(*.swf)和GIF动画。Flash动画运用最为广泛,而GIF动画则主要用于站标、广告条等组件。,3、动画,图1-4使用Flash制作的网页,二、网页的基本元素,目前,网页上使用最为广泛的音频格式主要有MP3、MIDI和WAV。MP3文件最大的优点就是能以较小的比特率以及较大的压缩比达到近乎完美的CD音质。MIDI文件的音质较好,浏览器不需要安装任何插件就可以播放。WAV文件也具有较好的音质,但是,由于文件较大,在加载过程中会增加系统资源的开销,不适合用来作为背景音乐。,4、音频,二、网页的基本元素,随着网络带宽的不断增加,在网页中使用的
4、视频也越来越多。在网页中添加视频文件可以大大增加站点的可读性,视频的直观性可以给访问者带来很大的视觉冲击。视频和音频一样,都是由与文件类型相适应的插件来进行播放的。目前,网页上使用最为广泛的视频格式包括WMV、RM、ASF、MPEG 和AVI。,5、视频,三、超文本标记语言(HTML)基础,超级文本(Hypertext)简称超文本,它是一种使用户与计算机之间能够更加密切交流的文本显示技术,它通过对相关词汇进行索引链接,可以使带链接的词汇或语句指向文本中的其他段落、注解或文本。,超文本标记语言(HTML)是一种用来制作网络中超文本的简单标记语言。它在文本文件的基础上加上一系列的标签,用以描述其颜
5、色、字体、文字大小和格式,再加上声音、图像、动画、音频、视频等形成精彩的页面。,三、超文本标记语言(HTML)基础,HTML文档由一系列元素组成,用于组织文件的内容和指导文件的输出格式。元素名称不区分大小写,一个元素可以包含多个属性,各个属性用空格分开。元素又是由标签构成,除了极个别标签是单独存在的标签以外,大多数标签是成对出现的,由一个开始标签“”和一个结束标签“”组成。,1、HTML文档,三、超文本标记语言(HTML)基础,(1)单标签语法结构如下:例如:,1、HTML文档,(2)双标签语法结构如下:内容例如:,三、超文本标记语言(HTML)基础,简单的HTML网页制作 欢迎大家来学习网页
6、设计基础!,1、HTML文档,三、超文本标记语言(HTML)基础,(1)文本标签:包括标题标签、文字控制标签和换行标签。,2、常用的HTML标签,a、标题标签:用于设置网页中的标题文字,被设置的文字将以黑体或粗体显示在网页中。其语法结构如下:标题内容例如:,标题标签 标题标签范例!一级标题 二级标题 三级标题 四级标题 五级标题 六级标题,三、超文本标记语言(HTML)基础,(1)文本标签:包括标题标签、文字控制标签和换行标签。,2、常用的HTML标签,b、文字控制标签:用于控制文字的字体、大小和颜色。其语法结构如下:文字例如:,文字控制标签 文字控制标签范例!默认字体 上海世博会欢迎您!上海
7、世博会欢迎您!上海世博会欢迎您!上海世博会欢迎您!,三、超文本标记语言(HTML)基础,(1)文本标签:包括标题标签、文字控制标签和换行标签。,2、常用的HTML标签,c、换行标签:是一个单标签,也称空标签,不包含任何内容。在HTML文档中的任何位置只要使用了标签,当用户通过浏览器浏览该文档时,标签后面的内容将显示在下一行。例如:,换行标签 换行标签范例!新的起航,新的希望!没有使用换行标签!新的起航,新的希望!使用了换行标签!,三、超文本标记语言(HTML)基础,(2)图像标签:通过使用图像标签可以将图像文件插入到页面中。图像标签的语法结构如下:,2、常用的HTML标签,例如:,图像标签 图
8、像标签范例!黄鹤楼送孟浩然之广陵李白故人西辞黄鹤楼,烟花三月下扬州。孤帆远影碧空尽,唯见长江天际流。,三、超文本标记语言(HTML)基础,(3)表格标签:表格标签在网页的设计过程中主要用来排版,以便使页面变得更加美观。,2、常用的HTML标签,创建表格时,通常需要用到表格标签、表格标题标签、表格行标签、以及表格单元格标签和。例如:,表格标签 表格标签范例!员工信息表 工号姓名性别出生年月所属部门 0001张三男1990年1月人事部0002李四女1992年11月财务部,三、超文本标记语言(HTML)基础,(1)每一个HTML文档都不太大,它能够尽可能快地通过网络传输和显示,不需要加入字体或格式等
9、其他控制信息。,3、HTML的优点,(2)HTML文档是独立于平台的,它对多平台兼容。,(3)虽然HTML是一个标识性的语言,但是它比任何一种计算机语言都简单易学。而且制作时并不需要特殊的软件,只要一个字符编辑器就可以完成。,四、网页设计的基本流程,网页设计的基本流程包括前期策划、CI形象设计、栏目与版块规划、确定网站的目录结构、确定网站的整体风格、版面布局及首页设计、网页模板制作、网站测试和发布网站等。,(1)前期策划:主要是为了确定网站的主题和名称。主题要明确、精要,名称要切题、有特色且易记住。,四、网页设计的基本流程,(2)CI形象设计:包括LOGO、色彩、广告语等可以作为标志性的东西。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 计算机 网页 设计 基础 DWCS5
链接地址:https://www.31ppt.com/p-6202853.html