网页设计与制作

•第1讲网页设计概述•第2讲HTML语言基础•第3讲Dreamweaver基础•第4讲网页中的基础元素•第5讲网页页面布局•第6讲网页中的层和时间轴•第7讲表单的应用•第8讲在网页中使用行为•第9讲CSS样式使用•第10讲网页中的多媒体应用•第11讲模板和库•第12讲站点测试和发布第1讲网页设计概述$[知识目标]掌握网页、网站及主页的概念了解网页中的主要元素了解各种网页制作工具8[能力目标]各种网页制作工具的配合使用网站的整体规划网站的设计流程•1.1网页和网站•1.2网页中的主要元素•1.3网页制作工具•1.4网页设计的基本流程•本讲小结第1讲网页设计概述1.1网页和网站1.1.1网页1.1.2网站1.1.3网页的基本功能1．网页网页（WEB）：是用html语言编写的，通过网传输，并被web浏览器翻译成可以显示出来的集合文本、图片、声音和动画等信息元素的页面文件（网页示例）。2．网页的类型根据页面内容可以分首页、主页、专栏网页、内容网页和功能网页等类型；按制作技术分为静态网页与动态网页。1.1.1网页1.1网页和网站网站就是把一些网页等信息文件通过超链接的形式关联起来形成的信息文件的集合。信息可以是网页形式也可以是其他的文档形式。网页与网站的区别与联系：网站是一个文件夹，其中的文件不仅是网页还有网站所需的其他文件或文件夹。网页是一个页面文件，用来发布各种信息。网页是网站的构成要素，是网站信息发布与表现的一种主要形式；网站是网页通过超链接形成的集合。1.1.2网站1.1网页和网站1、媒介的作用。使用者与信息之间的媒介。一方面是发布者，功能是发布信息；另一方面是浏览者，功能是提供浏览的信息，通过浏览网页找寻需要的信息。2、互动的作用。浏览者与网页制作单位之间互动的窗口，可以单向或双向传递信息。3、传输的作用。作为传输各种电子文件或信息之用，如下载说明书、更新文件、驱动程序等。1.1.3网页的基本功能1.1网页和网站1.2网页中的主要元素1.2.1文本1.2.2图像1.2.3链接标志1.2.4其他的基本要素网页的基本要素一般包括：文字、图像、动画和链接标志等，除此之外，网页的元素还包声音、多媒体和视频等。是网页中最基本的元素。网页中文字的设计一般从以下几个方面来考虑：1．字体的选择。2．字号、行距的选择。3．特殊字体的使用。4．字体的颜色。1.2.1文本1.2网页中的主要元素现在网络上使用的绝大多数图片和图像是gif、jpeg和png文件格式。网页上使用图像要注意的问题：•JPEG格式适合于照片图像，GIF格式适合于包含纯色的图像，例如插图和线条图。•利用图像编辑软件来放大或缩小图像•屏幕显示图像的分辨率一般为72dpi。制作图像时，不必使用比此再高的分辨率。1.2.2图像1.2网页中的主要元素•如果建立的图像中只有黑色和白色，处理时可将它保存为黑白图像格式，这样可以减少图像文件的大小。•如果设计的GIF格式图像包含了渐变和直线，应尽量使得它们水平，因为GIF格以每条水平线为基础来压缩。•尝试各种不同的JPEG压缩率•使用合适的色彩模式。•慎用动画。1.2.2图像1.2网页中的主要元素链接也叫超链接（Hyperlink），是从一个网页指向另一个目的端的链接，是页面间的链接关系。链接标志（载体）指的是网页中特殊的文本或图像，它们常常用不同的颜色和下划线来标识，在浏览器中，访问者可以用鼠标单击它们，能够从当前的网页转到链接的目的端位置。超链接的标志一般有：文本、图像、热区三种。要注意的是，所有超链接标志均应清晰无误地向浏览者标识出来，让人一看就知道。1.2.3链接标志1.2网页中的主要元素除上述几种要素之外，在网页上经常使用的还有动画、视频、声音等各种信息的形式。1．动画。目前网络上常用的动画类型有gif和Flash动画两种。2．视频。是多媒体网页的一个重要组成部分，常用的视频格式有avi、mpeg和mov等，视频会大大增加网页的文件量，从而使用访问速度受到影响，因此要慎用。3．音频。在网页中插入音频会增加网页的生动性。常用的音频格式有rm(ram)、midi、wav和mp3等格式。音频文件和视频文件一样都会增加网页的文件量，因此要慎用。1.2.4其他的基本要素1.2网页中的主要元素1.3网页制作工具1.3.1网页编辑工具1．超文本标识语言（HTML）2．FrontPage简介3．Dreamweaver1.3.2网页图像编辑工具1.3.3动态网页技术1．Photoshop。是Adobe公司开发的，是当今最流行的图形图象处理软件之一，它能够实现各种专业化的图像制作、处理及合成。2．Fireworks。是由Macromedia公司开发的图形处理工具，它是第一个专门为制作网页图形而设计的软件，同时也提供专业的网页图形设计及制作的解决方案。3.Flash。Macromedia公司出品的Flash是目前非常流行的一种交互式Web矢量动画软件。Dreamweaver和Flash、Fireworks三个软件被称为“网页三剑客”，是现在公认的比较标准的网页制作利器。1.3.2网页图像编辑工具1.3网页制作工具动态网页可以实现网页浏览者和网页设计者的交互，实现交互技术有两种：一种是客户端技术如常用的JavaScript和VBScript；另一种是服务器端技术如目前常用的ASP和PHP。1．ASP(ActiveServerPages)2．PHP(HypertextPreprocessor)3．JSP(JavaServerPages)1.3.3动态网页技术1.3网页制作工具1.4网页设计的基本流程1.4.1网站的设计流程1.4.2网页的设计与制作1.4.3网页的测试1.4.4网页上传和发布1．确定网站的主题2．规划网站的整体结构3．收集整合网页素材4．确定网页版面布局。5．制作网页。6．添加网页特效。7．测试和发布网站。1.4.1网站的设计流程1.4网页设计的基本流程1．确定网页的版面布局（1）平衡性。（2）对称性。（3）对比性。（4）疏密度。（5）比例。（6）韵律感。网页的排版布局是决定网站美观与否的一个重要方面,通过合理的、有创意布局,才可以把文字、图像等内容完美地展现在浏览者前面。2．网页设计与制作网页设计与制作一般分为静态网页制作和动态网页制作两类。1.4.2网页的设计与制作1.4网页设计的基本流程1．浏览器兼容性测试。目前浏览器有：InternetExplorer与Netscape两大主流浏览器，二者对HTML和CSS等语法的支持度是不同的。在Dreamweaver中提供了可以检查网页中是否含有某版本浏览器不能识别的语法功能，设计者可以借助其进行检查。2．平台的兼容性测试。设计要为用户着想，必须最少在一台PC和一台Mac机上测试你的网站网页，看看兼容性如何；3．超链接完好性测试。超链接是连接网页之间、网站之间的桥梁，浏览者是不愿意访问一个经常出现“找不到网页”的问题的网站，作为设计者必须检测超链接的完好性，保证链接的有效性，不要留下太多的坏链接。1.4.3网页的测试1.4网页设计的基本流程网页设计好，必须把它发布到互联网上，否则网站形象仍然不能展现出去。发布的服务器可以是远程，也可以是本地。如果是发布到互联网上，要先申请域名和主页空间，然后再利用专用软件（如：CuteFTP）上传，FTP有很多种软件，最著名的是CuteFTP和LeapFTP，也可以用Dreamweaver内置的FTP上传。1.4.4网页上传和发布1.4网页设计的基本流程本讲小结第1讲网页设计概述网页设计概述网页和网站网页中的主要元素网页设计的基本流程网页制作工具网页网站网页的基本功能文本图像链接标志其他的基本要素网页编辑工具网页图像编辑工具网站的设计流程网页的设计与制作网页的测试网页上传和发布常见的各种网页制作工具动态网页技术$[知识目标]了解HTML文件的基本结构掌握HTML中文本的编辑及图像的语法掌握HTML中各种设置超级链接的语法掌握HTML中表格和框架的基本语法8[能力目标]掌握进行文本及图像的编辑操作掌握创建各种超级链接的操作能够编写简单的HTML网页掌握HTML文件中表格和框架的使用第2讲HTML语言基础•2.1HTML概述•2.2文本的编辑•2.3图像编辑•2.4建立超链接•2.5表格与框架•本讲小结第2讲HTML语言基础2.1HTML概述2.1.1HTML简介2.1.2HTML语法结构HTML（HyperTextMarkupLanguage）又称超文本标识语言，是一种标识性的语言，是网页设计的最初语言。文件的扩展名:“html”或“htm”。例2.1简单的HTML文档htmlheadtitle.长春欢迎您！/title/headbody这里是长春悠游网，我们带您畅游长春！/body/html由“”和“”组成的就是标记。在HTML语言中标记分“单标记”和“围堵标记”。2.1.1HTML简介2.1HTML概述1．围堵标记格式：标记……/标记2．单标记格式：标记只有起始标记，没有结束标记。最常用的单标记是br,它表示段内换行。3．标记属性格式：标记属性1属性2属性3……各属性间无前后顺序，属性也可省略，当省略属性时取标记的默认值。2.1.1HTML简介2.1HTML概述HTML文档的基本结构：HTML文件开始HEAD标头区开始TITLE.../TITLE标题区/HEAD标头区结束BODY文件主体内容开始文件主体内容……/BODY文件主体内容结束/HTML文件结束其中HTML/HTML之间表示这是个网页文件，是必有的标记。2.1.2HTML语法结构2.1HTML概述2.2文本的编辑2.2.1段落标记2.2.2文本标记2.2.3标题显示等级2.2.4列表1．段落（P）基本语法格式为：palign=left/center/right其中参数align用于设定段落的位置是靠左、靠右还是居中。默认值是靠左；除align之外p还有其他参数如class。class参数是可选项，如果没有将按照默认值显示。2．换行br单标记，放在一行的末尾，可以在一个段落内实现文本的强制换行，设置标记后面的文本字、图像和表格等内容显示于下一行。2.2.1段落标记2.2文本的编辑1．字体标记font其基本语法格式为：fontface=？size=？color=？…/fontSize：设置字体的显示字号，范围是从“1～7”，其中“3”是默认值。Color：设置文本的颜色，值可以是颜色名（英文如red代表红色）或颜色的十六进制代码（#000000代表黑色，#FFFFFF代表白色）。Face：设置文本显示的字体，值为字体的名称。在文本的标记中还有很多常用的标记，比如表示字体效果的，b(黑体)，i（斜体），u（加下划线）。2.2.2文本标记2.2文本的编辑2．特殊字符HTML中除了我们上面学的的一些标记外，还有一些我们常用的特殊字符比如“”，这些特殊字符在HTML语言中都有对的转义符，常用的转义符与特殊字符参见下表：2.2.2文本标记2.2文本的编辑HTML代码显示结果说明<小于号或显示标记>大于号或显示标记&&可用于显示其它特殊字符"引号®®注册©©版权™™商标 不断行的空格3．水平线标记hr水平线是在网页上划出一条水平的分割线，用hr来标记水平线。语法格式为：hralign=left/center/rightnoshadesize=？width=？color=？Size：设置水平线的高度，以像素为单位。Color：设置水平线的颜色。Width：设置水平线的宽度，单位是像素或百分比，像素是绝对大小，不会随着程序窗口的大小而改，百分比是相对于程序窗口水平线所占的比例，会随着程序窗口的大小而改变。Align：设置水平线的对齐方式。对齐方式有左对齐，居中，右对齐三种。2.2