搜索
网页设计基础知识目标和技能目标•知识目标•了解网页的主要组成元素；•了解静态网站和动态网站的区别；•了解网站开发的流程；•了解网页设计的主流工具；•了解网站规划的重要性。•技能目标•认识组成网页的主要元素；•认识DreamweaverCS6的界面操作；•掌握建立网站站点的基本要求。一、网页的基础知识•网页的构成元素•网页的类型•常用的术语•常用的网页制作工具软件•网站的开发流程1、网页的构成元素•构成网页的元素，主要包括：•文字•图像•音频•视频•动画•样式•各类脚本等文字文字是网页最基本的组成元素之一。文字在网页中的表现形式主要涉及到字体、字号和编码。字体指的是文字的风格式样，常见的中文字体有“宋体”、“楷体”、“仿宋”等，常见的英文字体有“Arial”，“TimesNewRoman”等，不同的语言版本的网页，会根据需要选择对应的字体。字号是指文字的大小，在网页中，常用的字号的单位是px和pt。px是Pixel的缩写，相对于显示器屏幕分辨率而言的；pt全称为point，大小为1/72英寸，是一个自然界标准的长度单位，也称为“绝对长度”。图像•图像也是网页中最常见的元素之一，比文字的效果形象、生动。常见的用于网页中的图像的格式主要有jpg、gif、png等。音频•主要采用MP3和MIDI格式的音频文件。•MP3格式：MP3是一种音频压缩技术，其全称是动态影像专家压缩标准音频层面3（MovingPictureExpertsGroupAudioLayerIII），简称为MP3。•MIDI：MIDI是MusicalInstrumentDigitalInterface的简称，意为音乐设备数字接口。视频•在网页中播放视频文件需要视频播放插件的支持，目前网页上常用的视频文件的格式为WMV、FLV、MPEG、RM等。动画•网页动画主要是指swf文件，swf是Flash的专用格式，是一种支持矢量和点阵图形的动画文件格式，被广泛应用于网页设计、动画制作等领域，swf文件通。常也被称为Flash文件。HTML•HTML是用来制作网页的标记语言，HTML是HypertextMarkupLanguage的英文缩写，即超文本标记语言，不需要编译，直接由浏览器执行，例如段落标签为p，HTML对网页元素有对应的标签和属性，可通过对标签的属性的设置，美化网页的效果。CSS•CSS层叠样式表，使用CSS对网页中元素的位置进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。JavaScript•是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，在HTML网页中加入JavaScript，能增加网页的客户端的交互效果，常用来给HTML网页添加动态功能。2、网页的类型•按网页的表现形式，网页主要分为两种类型•静态网页•动态网页静态网页•通常指的是文件后缀名为.html、.htm和.shtml等形式呈现的网页。这类网页的特点是，浏览器端不与服务器端发生交互。在制作静态网页的时候，不需要安装WEB服务器，不连接数据库，本教材所涉及的网页均为静态网页。动态网页•是指网页文件里包含了程序代码，通过后台数据库与Web服务器的信息交互，由后台数据库提供实时数据更新和数据查询服务。这种网页的后缀名称一般根据不同的程序设计语言而不同，如常见的有.asp、aspx、jsp、.php等形式为后缀。动态网页与静态网页是相对应的，动态网页指网页的内容可以根据某种条件的改变而自动改变。3、常用的术语•是环球信息网（WorldWideWeb）的缩写，中文名字为“万维网”，环球网等，常简称为Web。•URL:统一资源定位符（UniformResourceLocator，缩写为URL）是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。•WEB服务器：WORLDWIDEWEB的简称，主要功能是提供网上信息浏览服务常用的术语•域名：是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置，地理上的域名，指代有行政自主权的一个地方区域）•网站发布：是指完成一个网站的制作后，将网站上传到网络中供用户访问的过程。常用的术语•超链接：是指网页间、网页元素间的连接关系，从一个网页通过单击文字、图片或其他元素打开另一个对象的关系.•站点：网站的站点可以看作是网站中所有文件的集合，使用浏览器工具，可以从一个文档跳转到另一个文档，实现对整个网站的浏览。站点分为本地站点和远程站点。4、常用的网页制作工具软件•Dreamweaver：AdobeDreamweaver，简称“DW”，中文名称“梦想编织者”，是Adobe公司开发的集网页制作和管理网站于一身的“所见即所得”。•Flash：Flash是由Adobe公司推出的交互式矢量图和Web动画的标准。•Photoshop：简称“PS”，是由AdobeSystems开发和发行的图像处理软件。常用的网页制作工具软件•记事本：记事本是Windows系统自带的简单的文本编辑软件，但由于大部分代码都是纯文本的，所以记事本可以编写任何网页。•浏览器：浏览器是指可以显示网页服务器或者文件系统的HTML文件内容，并让用户与这些文件交互的一种软件。常用的网页制作工具软件•IETest：是一个免费的IE浏览器测试工具，测试网页在不同IE版本下兼容性的效果，是网页设计者常用的网页测试工具。•FTP上传工具：网站制作完成后，当需要将本地文件上传到远程站点时，往往采用FTP工具实现文件上传，常用的FTP上传工具有CuteFTP、FlashFTP等。5、网站的开发流程•需求分析•网站规划•网站制作•网站测试•网站发布•更新维护网页制作的基本要求(1)•网站中的文件和文件夹的命名主要采用字母、数字和下划线，不采用中文字符或韩文等字符，数字和字母也不采用中文全角下的字符。•网站的首页的名称一般为index.html或index.htm，首页存储在站点的根目录下，合理规划网站中的文件储存的位置，要整齐有条理。网页制作的基本要求(2)•网页的宽度需要不要定义得太大或太小，要根据当前的主流显示器的分辨率来定义，目前采用1000像素的宽度是比较适合，内容设置为居中效果。•网页的字体不宜采用特殊字体，由于浏览网页是在用户的电脑中，如果浏览者的系统中缺乏这些特殊字体，将用系统的默认字体，所有网页字体要选择大众化的字体或直接采用默认字体。网页制作的基本要求(3)•除了制作音频或视频类的网站，一个网页中不要过多的使用网页特效、动画、视频、音频等效果。•图像文件大小要控制在100K以内，不使用超过500K的图像文件。•网站中的网页要有返回首页或上一级网页的设置，切忌一个网页没有任何的超链接效果。二、DreamweaverCS6工具介绍和基本操作•启动DreamweaverCS6•认识DreamweaverCS6工作面板1、启动DreamweaverCS6•单击操作系统中的【程序】【所有程序】2、设置起始页•勾选“起始页”左下角的【不再显示】的复选框，可设置关闭“起始页”的效果，如需重新开启改功能，单击菜单栏的【编辑】【首选参数】【常规】【文档类型】【显示欢迎屏幕】，勾选这个选项重新启动“起始页”3、认识DreamweaverCS6工作面板：工作布局4、DreamweaverCS6常用工具面板介绍•【插入】工具面板【文档】工具栏【文件】工具栏5、创建和管理站点•网站的站点，其实是文件夹，其作用是网站的所有元素、文件全部放置在该文件夹里，方便文件的链接和站点的移动。站点的位置可以是本地计算机，也可以是远端服务器中的虚拟文件夹。Dreamweaver对网页文档的基本操作•创建一个新的网页•保存网页文档•打开网页文档的方式•网页预览的方式案例实施过程：企业网站的规划和站点的管理•网站的需求分析阶段•网站的规划•站点管理本章小结•本章主要介绍了网页的基础知识、DreamweaverCS6的界面和基本操作。先从网页的基础知识开始，介绍网页、网站的定义，常用术语，网页的组成元素，接着介绍网站的开发流程，然后介绍DreamweaverCS6的工具界面的介绍和网页的创建、保存，站点的创建、修改、导入导出的基本操作，重点是站点的创建和管理。最后通过一个简单的实例，让读者学习如何设计网站的内容，如何对站点进行创建和站点的目录安排。