搜索
2020/6/13网页设计与制作基础主讲教师:冯波Email:gzfengbo@tom.com•通过本课程的学习，使学生掌握网页制作的基本知识，熟悉常用的网页制作软件Dreamweaver并且具备利用Dreamweaver来设计和制作网页的能力。教学目的与要求教学进度计划周次教学内容教学方式学时课外作业及平时考核2第1章及第2章：网页设计基础课堂讲授2学时3实验一网页的认识实验2学时4、6第2章HTML基础课堂讲授4学时5、7实验二、三网页的基本元素实验4学时8第3章Dreamweaver基本操作课堂讲授2学时9实验四Dreamweaver基本操作实验2学时实验报告110、12第4章Dreamweaver网页布局设计课堂讲授4学时11、13实验五、六Dreamweaver网页布局设计实验4学时14、16第5章Dreamweaver高级应用课堂讲授4学时15、17实验七、八Dreamweaver高级应用实验4学时18答辩课堂讲授2学时实验报告2DWCS4下载地址第一讲网页设计基础1.1网页设计相关概念网页与网站Web服务器和浏览器动态网页和静态网页URLInternet•Internet是由遍布全世界的各种各样的网络通过TCP/IP协议连接成的一个松散结合的全球网，它使网络上的各台计算机（Internet上称为主机，即host）可以互相交换信息。•Internet为用户提供了各种各样的服务，如，Email，FTP，即时通信等。•（WorldWideWeb），简称为Web或“万维网”。它是一个基于C/S体系结构的分布式多平台的超文本(hypertext)超媒体（hypermedia）信息服务系统。•上不同网址的相关数据信息有机地编织在一起，通过浏览器（browser）提供一种友好的信息查询界面。我们使用互联网这个庞大的技术系统的主要方式是什么？网页•网页即是超文本文件，是按照网页文档规范编写的一种纯文本文件。•客户通过浏览器看到的包含了如文字、图像、声音和动画等多媒体信息的每一个页面，其本质是一个纯文本文件。•浏览器对该纯文本文件进行了解释，才生成了多姿多彩的网页，除文本外，其它媒体素材（图像、声音、动画和影像等），都需要保存成单独的文件，通过URL嵌入到网页文件中。•可以看出，服务主要是通过一个个多媒体网页提供给用户各种信息的，因此，网页是的基础文档。HTML超文本标记语言•超文本标记语言HTML作为一种语言，它具有语言的一般特征，即它是一种符号系统，具有自己的词汇（符号）和语法（规则）。•所谓标记，就是作记号。如我们写文章时通常用大体字标记文章的标题，用换行空两格标记一个段落•所谓超文本，就是相比普通文本有超越的地方，如超文本可以通过超链接转到指定的某一页，而普通文本只能一页页翻，超文本还具有图像，视频，声音等元素，并能和用户交互，这些都是普通文本无法达到的HTML的历史•超文本标记语言HTML是一种建立超文本/超媒体文档的语言。作为一种语言，HTML具有语言的一般特征，即它是一种符号系统，具有自己的词汇（符号）和语法（规则）。所谓标记，就是作记号。如我们写文章时通常用大体字标记文章的标题，用换行空两格标记一个段落。HTML用标签标记文档中的文本及图像等各种元素，指示浏览器如何显示这些元素。HTML的发展历程如图所示。GML(1969)SGML(1985)HTML(1993)XML(1998)XHTML(2000)CMLVMLGeneralizedMarkupLanguageStandardGeneralizedMarkupLanguageHyperTextMarkupLanguageeXtensibleMarkupLanguage……网站•网站是一组相关网页以及有关的文件、脚本和数据库等内容的的有机集合，即若干个网页文件经过规划组织后形成完整结构的信息服务体系。•一个网站对应一个文件夹，网站的所有网页和其他资源文件都会存放在该文件夹下或其子文件夹下，设计良好的网站通常是将网页文档及其它资源分门别类地保存在相应的文件夹中以方便管理和维护。这些网页通过链接组织在一起，其中有个网页称为首页，常命名为index.htm，必须放在网站的根目录下。•网页是网站的基本信息单元Web服务器和浏览器•网页被放置在Web服务器上•用户通过Url请求web服务器时，web服务器把相应的网页传送到用户浏览器端•Web服务器的作用：•对于静态网页，web服务器仅仅是定位到网站对应的目录，找到每次请求的网页传送给客户端。•对于动态网页，web服务器找到该网页后要先对动态网页中的服务器端程序代码进行执行，生成静态网页代码再传送给客户端浏览器。Web服务器•由于web服务器对静态网页起的只是一个查找和传输的作用，因此我们测试静态网页时可不安装web服务器，直接找到该网站对应的目录双击网页文件预览测试，•而测试或运行动态网页则一定要在本机上安装web服务器(如IIS)，因为动态网页要经过web服务器解释执行生成html文档才能被浏览器解释浏览器•浏览器：用户浏览网页所用•浏览器的本质：解释html代码生成我们看到的网页•目前常见的浏览器有：IE6，Firefox3，Netscape，Opera静态网页和动态网页•静态网页是不包含服务器端代码的html文件，web服务器只是负责把静态网页发送给浏览器，由浏览器解释执行•动态网页中含有服务器端代码，需要先由web服务器对这些服务器端代码进行解释执行生成客户端代码后再发送给客户端浏览器动态网页的特征•同一个网页根据每次请求的不同，可每次显示不同的内容•因为要显示不同的内容，所以往往需要数据库做支持•从网页的源代码看，动态网页中含有服务器端代码，后缀名不能是.htm。URL•URL（UniversalResourceLocator）是统一资源定位器的英文缩写，每个站点或站点上的每个文件（网页及所有资源文件）都有一个唯一的地址，浏览器是通过URL来定位目标信息的•URL的一般格式为：协议名://主机名[:端口号][/文件夹名/文件名]•常用协议名如：http（超文本传输协议，用于传送网页）；ftp（文件传输协议，用于传送文件）例：网页基本元素网页是网站提供信息服务的主要形式，一般包含文字、图像和表格等内容，以及实现信息块之间跳转的超链接。网页通常以网页文件及其附属文件形式存在。常见的网页元素包括文本、图片、超链接、表格、导航栏、动画、音频和视频、交互表单等。1.3网站的目录结构网站的目录结构是指网页文件的存放结构。不合理的目录结构会使得站点的维护、移植和扩充变得异常的繁琐和困难。1.不要将所有文件都存放在根目录下。2.按栏目内容建立子目录。3.在每个主目录下都建立独立的images目录。4.目录的层次不要太深。5.不要使用中文目录。6.不要使用过长的目录。7.尽量使用意义明确的目录。•一个网站的目录结构：root/|-images/|-message/|-quanzhou/|-member/|-|-01/|-|-...|-|-47/|-index.html1.4网页设计语言与工具•网页设计语言静态网页设计语言网页特效脚本语言动态交互式网页设计语言•网页设计工具•网页设计辅助软件Adobe的DreamweaverCSXMicrosoft的Frontpage和ExpressionWeb1.5网站运行环境的建立域名注册：符合规范、简洁、容易记忆、不容易与其他域名混淆、与公司名称、商标或核心业务相关建站方式的选择：服务器空间虚拟主机主机(服务器)托管独立服务器Web服务器的构建选择操作系统：须具有高性能的操作系统；必须支持多种通信协议；必须独立于硬件；必须支持其他计算机的工作平台；必须方便用户访问网络资源；必须有较好的应用程序编程接口；必须支持远程过程调用（RemoteProcedureCall）；容错技术；有方便使用、功能强大的网络管理工具Web服务器：安全，开放，性价比，可扩展性开发工具数据库：易用，分布，并发，可移植，安全，容错2.HTML与XHTML标准•HTML文档的基本结构•标记(Tags)和元素(Elements)•HTML标记的分类•行内元素和块级元素•从HTML到XHTML的转变•html存在的问题和web标准•XHTML与HTML的区别2.1(X)HTML文档的基本结构html…/html：告诉浏览器HTML文档开始和结束的位置，其中包括head部分和body部分。HTML文档中所有的内容都应该在这两个标记之间，一个HTML文档总是以html开始，以/html结束。head…/head：HTML文件的头部标记，头部主要提供文档的描述信息，head部分的所有内容都不会显示在浏览器窗口中，在其中可以放置页面的标题以及页面的类型、使用的字符集、链接的其它脚本或样式文件等内容body…/body：用来指明文档的主体区域，网页所要显示的内容都放在这个标记内，其结束标记/body指明主体区域的结束编写HTML网页文档的方法•HTML文档是一个纯文本文件，可以使用任何文本编辑器编写保存•使用记事本编辑一个html文件•使用Dreamweaver新建一个html文件2.2标记(Tags)和元素（Elements）•标记是HTML文档中一些有特定意义的符号，这些符号指明内容的含义或结构。标记总是放在三角括号中，大多数标记都是成对出现的，表示开始和结束。•把HTML标记如p…/p和标记之间的内容组合称为元素。网页中文字，图像，链接等所有的内容都是以元素的形式出现在html代码里的。标记相同而标记中的内容不同应视为不同的元素，同一网页中标记和标记中的内容都相同的元素如果出现两次也应视为两个不同的元素，因为任一个元素在网页中浏览器都会为它分配唯一的id，不存在两个元素的id也完全相同的情况。例1下面body内元素的个数是多少bodyahref=box.htmlimgsrc=xxwlzx/cup.gifborder=0align=left//ap图片的说明内容/phr/p图片的说明内容/p/body答案：5个通用标记结构元素名属性=“属性值”内容/元素名•元素名即预定义的标记（签）•属性：用来指定标记的行为确定元素内容的显示方式，如果标记有属性，则将跟在元素名后，属性之间用一个或多个制表符、空格、回车符分开，不区分出现的顺序。•：把标记和标记所描述的内容区分开，一般成对出现，结束标记没有属性•HTML的元素名、属性不区分大小写（xHTML区分且只能用小写），但最好用小写（有的操作系统大小敏感，如unix）•HTML的源文件是纯文本文件，可以用任何一种文本编辑器来编写，但后缀应用.htm或.html。带有属性的HTML元素的结构/例2找出下面html代码的错误•下列HTML元素的写法错在什么地方？1.imgbirthday.jpg/2.iCongratulations!i3.ahref=file.htmllinkedtext/ahref=file.html4.pThisisanewparagraph\p5.liThelistitem/liHTML标记的分类1)头部标记：title,meta,link,style2)文本标记：font,b,i,u,strong,3)段落标记：p,hn,pre,marquee,br,hr4)列表标记：ul,ol,li,dl,dt,dd5)超链接标记：a,map,area6)图像及媒体元素标记：img,embed,object7)表格标记：table,tr,td,t