网页设计与制作-课堂教学

网页设计与制作主讲教师：王璐教学单位：青海大学计算机系导言why1what2how3Why---为什么要学习这门课？一、信息的表现形式有哪些？文字声音图形、图像表格动画视频Why---为什么要学习这门课？二、传统的信息发布方式有哪些？张贴广告发送传单报刊杂志广播电视受众范围窄费用高不及时不丰富Why---为什么要学习这门课？三、网络的出现--给每个人提供了平等的获取信息的机会Why---为什么要学习这门课？四、以企业为例说明为什么要建立网站企业上网商机无限电子商务网上超市网上购物网上广告上网能给企业带来什么？上网之后企业又应该怎么做?Why---为什么要学习这门课？企业为什么要建立网站？充分利用网络资源1开展电子商务2与客户互动往来3建立企业形象4做网络广告5What---这门课主要学习什么？How---如何学习这门课？入门阶段：•先从最简单的HTML网页入手；•选择Dreamweaver作为你的网页制作工具；•粗略地阅读有关Dreamweaver教程，了解这个软件到底能做些什么；•制作你的第一个实验性的网站，遇到任何困难，对照相关教程，如果问题仍然没有解决，请学会与其它同学交流或询问老师，或者去网络上寻找答案。第一章概述网页设计基础知识1Dreamweaver8基础21网页设计基础知识1.1什么是网页和网站1.2网页的分类1.3网页中的常用术语1.4网页设计的相关知识1.1什么是网页和网站•网页是Internet的基本信息单位，一般网页上都会有文本和图片等信息，而复杂一些的网页上还会有声音、视频、动画等多媒体内容。•进入网站看到的是网站的主页，主页集成了指向二级页面以及其他网站的链接，浏览者进入主页后可以浏览最近更新的消息，找到感兴趣的主题，通过单击超链接跳转到其他网页或其他网站，如图1.1所示。1.1什么是网页和网站•网站是有独立域名、独立存放空间的内容集合，这些内容可能是网页，也可能是程序或其他文件，不一定要有很多网页，主要有独立域名和空间，哪怕只有一个页面也可以称为网站。•网站就是一个或多个网页的集合。从广义上讲，网站就是当网页发布到Internet上以后，能通过浏览器在Internet上访问的页面。门户网站/职能网站/专业网站/个人网站1.2网页的分类1.2.1、按所处位置分类按网页在网站中所处的位置可将网页分为主页和子页两类。1.2.2、按表现形式分类按网页的表现形式可将网页分为静态网页和动态网页。1.3网页中的常用术语1.3.1、万维网（）1.3.2、浏览器1.3.3、统一资源定位符（URL）1.3.4、文件传输协议（FTP）1.3.5、IP地址1.3.6、域名1.3.7、超级链接1.3.8、超级文本标记语言（HTML）万维网万维网（）是WorldWideWeb的中文简称，也称为3W网，它的本质是一种基于超级文本技术的交互式信息浏览检索工具，是Internet提供的应用最普及、功能最丰富、使用方法最简便的信息服务，用户可通过它在Internet上浏览、编辑、传递超文本格式的文件（即.html格式文件）。浏览器浏览器是用于阅读网页中信息的一种软件工具，就像使用电脑必须有操作系统一样。InternetExplorer（IE）NetscapeNavigator（NE）腾讯TT浏览器统一资源定位符（URL）URL（UniformResourceLocator）主要是用来指定协议（如HTTP或FTP）以及对象、文档、万维网网页或其他目标在Internet的位置和存取方式。通信协议主机名所要访问的网页路径及名称文件传输协议（FTP）FTP（FileTransferProtocol）是一种广泛使用的文件传输协议，是快速、高效和可靠的信息传输方法。FTP是基于客户/服务器模型的TCP/IP的应用，所以只要在客户端和服务器之间建立了TCP/IP连接，无论两台电脑的位置远近、连接方式的异同以及使用的操作系统的异同，都能通过FTP协议进行文件的传输。IP地址IP地址用来标识连接到Internet上电脑的指定编号，每一个IP地址对应一台电脑，这与用电话号码标识电话网络中的电话相同。电脑识别的IP地址由32位二进制数值组成，电脑上以十进制数值来显示，一组数值分为4部分，每一部分均不能大于255，中间用“.”分隔，如61.139.2.69。域名域名就是常说的网址，它也具有惟一性，如百度的网址、网易的网址等就是一个域名，域名由汉语拼音或英文字符加上数字表示，在访问网络时，域名将通过域名服务器转换成IP地址，这种转换是在后台完成的。超级链接超级链接是网页中最常用的元素之一，网页就是通过无数的超级链接才能组成一个网站。超级链接可以链接到网站内部页面、对象，也可以链接到其他网站，大大方便了用户在各个页面对象之间实现跳转。超文本标记语言---网页的本质HTML（HyperTextMarkupLanguage）是一种用户与电脑之间进行交流的文本技术，各种网页均是用HTML语言来描述的，用HTML语言编写的网页文件的扩展名一般为“*.htm”或“*.html”。1.4网页设计的相关知识1.4.1、网页的基本构成元素1.4.2、设计网页的原则1.4.3、网页设计的一般步骤1.4.4、网页制作的常用工具1.4.1网页的基本构成元素•网页是构成网站的基本元素。不同性质的网站，其页面元素是不同的。一般网页的基本元素包括如下：•1、网站LOGO•2、网站banner•3、导航栏•4、文本•5、图像•6、Flash动画•7、多媒体网站LOGO网站LOGO，也叫网站标志，它是一个站点的象征，也是一个站点是否正规的标志之一。一个好的标志可以很好地树立公司形象。网站标志一般放在网站的左上角，访问者一眼就能看到它。成功的网站标志有着独特的形象标识，在网站的推广和宣传中起到事半功倍的效果。网站标志应体现该网站的特色、内容以及其内在的文化内涵和理念。如图1.2所示是新浪网站、百度网站的标志。网站banner•可以是网站页面的横幅广告，也可以是游行活动时用的旗帜，还可以是报纸杂志上的大标题。Banner主要体现中心意旨，形象鲜明表达最主要的情感思想或宣传中心。导航栏•导航栏既是网页设计中的重要部分，又是整个网站设计中的一个较独立的部分。一般来说网站中的导航位置在各个页面中出现的位置是比较固定的，而且风格也较为一致。导航栏的位置对网站的结构与各个页面的整体布局起到举足轻重的作用。•导航栏的位置一般有4种常见的显示位置：在页面的左侧、右侧、顶部和底部。有的在同一个页面中运用了多种导航，如有的在顶部设置了主菜单，而在页面的左侧有设置了折叠式菜单，同时又在页面的底部设置了多种超链接，这样便增强了网站的可访问性。当然并不是导航在页面中出现的次数越多越好，而是要合理地运用页面达到总体的协调一致。文本•文字一直是人类最重要的信息载体与交流工具，网页中的文字(除网页图像中的文字)也称为文本，网页中的信息也以文本为主。与图像相比，文字虽然不如图像那样易于吸引浏览者的注意，但却能准确地表达信息的内容和含义。•为了克服文字固有的缺点，人们赋予了网页中文本更多的属性，如字体、字号和颜色等，通过不同格式的区别，突出显示重要的内容。图像•图像在网页中具有提供信息、展示形象、美化网页、表达个人情趣和风格的作用。可以在网页中使用GIF、JPEG和PNG等多种图像格式，其中使用最广泛的是GIF和JPEG两种格式。Flash动画•随着Internet技术的发展，网页上出现了越来越多的Flash动画。Flash动画已经成为当今网站不可缺少的部分，美观的动画能够为网页增色需要具有，从而吸引更多的浏览者。Flash动画不仅需要对动画制作软件非常熟悉，更重要的是设计者独特的创意。多媒体•多媒体网页元素中，除了文本、图像和Flash动画外，还有声音、视频等其他媒体。•声音是多媒体网页中的一个重要组成部分，可以将某些声音添加到网页中。在添加声音前，需要考虑的因素包括其用途、格式、文件大小、声音品质及浏览器差别等。不同浏览器对声音文件的处理方法有所不同，彼此之间可能不兼容。•用于网络的声音文件格式非常多，常见的有MIDI、WAV、MP3和AIF等。在使用不同格式文件时，需要加以区别。很多浏览器不用插件也可以支持MIDI、WAV和AIF格式的文件，而MP3和RM格式的声音文件则需要用专门的浏览器插件播放。•视频文件的采用使网页变得精彩而富有动感。视频文件的格式也非常多，常见的有RM、MPEG和AVI等。1.4.2网页设计的原则●整体规划●鲜明的主题●善用图像●醒目的导航●及时更新●易记的网站名称●通用网页●动画适量1.4.3网页设计的一般步骤●规划网站●收集整理资源●配置站点●创建页面●测试站点●发布站点●维护、更新站点1.4.4网页制作工具介绍1、网页编辑工具2、素材处理与创作工具•图像浏览与处理•矢量图创作工具•多媒体制作工具•特效制作工具网页编辑工具•MacromediaDreamweaver•MicrosoftFrontPage•AdobeGoLive•SoftQuadHotMetal素材处理与创作工具1、图像浏览与处理•ACDSee•Photoshop•Fireworks•PhotoImpact2、矢量图创作工具–FreeHand–CorelDraw–Illustrator3、多媒体制作工具–Flash–Director–Authorware–LiveMotion4、特效制作工具●Anfy●Cool3D●GIFAnimator2Dreamweaver8基础—安装使用Dreamweaver8制作网页之前，需先将该软件安装到电脑中，其方法与安装其他软件相似，用户可根据提示操作。2Dreamweaver8基础—启动Dreamweaver8基础—界面•Dreamweaver8的操作界面是由标题栏、菜单栏、插入栏、文档窗口、状态栏、属性面板以及多个浮动面板组成。•2.3.1菜单栏•2.3.2插入栏•2.3.3浮动面板•2.3.4【属性】面板•2.3.5文档窗口Dreamweaver8基础—菜单栏•菜单栏中共包含10个菜单项，分别是【文件】、【编辑】、【查看】、【插入】、【修改】、【文本】、【命令】、【站点】、【窗口】和【帮助】，如图所示，下面逐一介绍每个菜单的功能。2Dreamweaver8基础—插入栏•插入栏包含各种类型的对象，如图像、表格和层。每个对象都是一段HTML代码，允许在插入时设置不同的属性，可以通过单击插入栏中的按钮插入表格，也可以不使用插入栏而使用插入菜单插入对象。如图所示。2Dreamweaver8基础—浮动面板•Dreamweaver8中的面板统称为浮动面板，这些面板浮动于文档窗口之外，如图所示，若要展开一个面板，单击面板名称左侧的展开箭头。•Dreamweaver8提供了多种面板，可以利用【窗口】的子菜单命令打开。2Dreamweaver8基础—属性面板•【属性】面板如图所示，用于显示网页中各个元素的相关属性，用户可以通过设置【属性】面板中的各选项，对网页中的各个属性做精确的修改。•【属性】面板的内容会随当前所选定元素的不同而发生变化，在以后的章节中将结合具体的实例来讲述具体的设置。对于【属性】面板所做的大多数设置会立刻应用到文档窗口中。但是对于有些属性，则要在属性编辑文本域外单击并按Enter键，或者按Tab键切换到其他属性才会使更改生效。2Dreamweaver8基础—文档窗口•如图是文档窗口，文档窗口用于显示当前创建和编辑的网页文档。可以在设计视图、代码视图、拆分视图中查看文档内容。2Dreamweaver的基本操作—新建网页•(1)启动Dreamweaver8软件。选择【文件】|【新建】命令，弹出【新建文档】对话框，在对话框中选择【类别】列表框的【基本页】选项，在【基本页】列表框中选择HTML选项。•(2)单击【创建】按钮，显示创建的HTML网页编辑窗口。•(3)选择【文件】|【保存】命令，弹出【另存为】对话框，在【保存在】