搜索
计算机科学与工程系网络教研室：张顺利Tel:13298336271E-mail:zhang_slxx@126.com网页设计与制作1、专业核心课2、其它专业核心课的先修课一、本课程在本专业中的地位二、如何学好？1、下定决心投身网络是当今流行的趋势。在因特网中，要想有一席之地，掌握必要的网络工具、一定的网络编程技术是非常重要的。2、不局限于课堂学习的内容－师傅领进门，修行在个人（1）当我们从网上看到精美的网页，自叹不如时，可以借助浏览器的查看源文件功能，逐磨其HTML代码，提高水平。－－它山之石，可以攻玉（2）通过各种途径收集相关的资料。3、多动口，多动手，做出好作品，培养兴趣多思考、多总结。三、学习要求上课：遵守纪律（按时、尊重）做好预习和复习认真完成作业A级：字迹工整、不抄袭、正确B级：字迹工整、不抄袭、基本正确C级：字迹工整、不抄袭、错误较多D级：字迹不工整或抄袭E级：字迹不工整且抄袭不按时交：0分认真做实验，按时完成老师布置的实验任务平时成绩：50%（提问、点名、作业、实验）四、几点建议学会读书书是直接传授知识的媒体，在作者的精心编排下，系统科学的介绍一个又一个的知识点。浏览、精读学会听课，老师都是精心备课的学会总结第1章网页设计基础本章教学目标：了解网页和网站的实质、与网页相关的基础知识理解HTML与XHTML熟练应用标记语言编写网页文档。本章重点和难点：1．认识网页与网站2．网页与网址、域名、IP地址的关系3．常用的网站开发工具4．XHTML标记的应用网页设计需要掌握的知识（P1）1.1初识网页1.1.1网页是什么网页：webpage存储在web站点上的一个超文本文档。使用标记语言对文字、图片、表格、多媒体等页面元素进行描述和控制，网页代码可使用记事本进行纯文本编辑；最终由客户端浏览器解释标记语言，显示网页样式。主页：homepage访问一个网站的域名或IP，默认打开的页面，一般具有主题呈现、页面导航的门户功能。主流的浏览器MicrosoftInternetExplorer、MozillaFirefox、AppleSafari、Opera、Netscape以及Maxthon等。1.1.2动态网页与静态网页静态网页不需要服务器运行的网页属于静态网页，如HTML、Flash、JavaScript等，它们是保存在服务器上的页面文件，只有通过编辑页面文件才能进行更新维护。动态网页采用了动态网页技术，在服务器端运行的网页和程序属于动态网页，它们会根据编写的程序访问数据库动态地生成页面，如ASP、PHP、JSP、ASP.net等。使用了“动态”网页技术的网站具有以下特点：（1）交互性。（2）自动更新。（3）因人因时而变。各自的优缺点及适用场合（P3）：更新量的大小动静结合是网页设计的普遍原则。（P3）1.2网站的概念1.2.1网站是什么1.2.2网址与域名1.2.3常用网站开发工具1.2.1网站是什么Web站点网站（站点）是按照一定的规则制作的、用于展示特定内容的相关文件的集合，可以通俗地理解成存储在某个服务器上包含了网页、图片、数据库和多媒体信息等资源的一个文件夹。通常把提供网页服务的服务器称为web服务器，相关网站称为web站点。（注意事项：P4）形形色色的网络世界其实就是由分散在世界上各个角落的无数服务器互联所构成的。1.2.2网址与域名（WorldWideWeb，万维网）是一种基于超文本的界面友好的信息服务方式，用于查询和浏览链接到Internet服务器上的资源，由欧洲粒子物理实验室（CERN）研制。它利用HTTP、URL、HTML等技术使用户通过浏览器方便地查询远程站点上的文字、图像和多媒体等信息。信息网、资料库W3C:（WorldWideWebConsortium，万维网联盟）于1994年10月在麻省理工学院计算机科学实验室成立，创始人为万维网之父TimBerners-Lee。旨在指导Web技术标准的开发。IP地址：用来表示网络地址的一串数字DNS（DomainNameSystem，域名系统）域名就是网站的名称，在Internet中与IP地址一一对应。作为企业的网上商标，注册申请一个符合企业特点又易于记忆的域名也很重要。域名解析服务由DNS来完成。域名系统是一个分布式数据库系统，为Internet上的主机分配域名地址和IP地址，根据域名与IP地址的映射关系自动把域名地址转为IP地址。网址的分层管理和分配。一个完整的域名由几个层次所组成，不同层次间用.隔开。分析新浪中国的域名：，为主机名，sina是第三层次域名，com是第二层次域名，cn是国家顶级域名。目前互联网中有两类顶级域名：（１）地理顶级域名：.cn代表中国，.jp代表日本，.uk代表英国等等；（２）类别顶级域名：.com代表商业公司；.net代表网络机构；.org代表组织机构；.edu代表教育机构；.gov代表政府部门等等。URL（UniformResourceLocator，统一资源定位器)URL主要包含三个部分：（１）网络协议。访问Web服务器需要使用HTTP协议（HyperTextTransferProtocol，超文本传输协议）。（２）站点的IP地址或域名（有时也包括端口号）。（３）文件的具体地址。包含所访问的文件在站点中的路径和文件名。如URL:协议域名路径文件名1.2.3常用网站开发工具网页编辑工具（１）Dreamweaver（Adobe,CS4）（２）FrontPage（Microsoftoffice）网页美工设计工具（１）Photoshop（Adobe）（２）Fireworks（Adobe,CS4）（３）Flash（Adobe,CS4）动态交互式网页编程语言（P6）（１）ASP（２）PHP（３）JSP（４）ASP.net1.3HTML与XHTML1.3.1HTML简介1.3.2认识XHTML1.3.3常用文本格式标记1.3.4列表标记1.3.5超链接标记1.3.6表格标记1.3.7图像和字幕标记1.3.1HTML简介（一）什么是HTMLHTML（HyperTextMarkupLanguage，超文本标记语言）是一种为网页所设计的简单标记语言，用来制作超文本文档。利用特殊标记（tag）来描述网页文档内容、格式和网页之间的超链接信息。HTML开发工具（任何支持ASCII的文本编辑器）：记事本、写字板、UltraEdit、Dreamweaver等。HTML文件的扩展名：.htm，.html。使用HTML语言描述的文件，需要通过Web浏览器显示出效果。1993年，W3C组织发布HTML1.0版本。HTML4.0版本已成为广泛使用的统一规范，最新版本为4.01。HTML5.0处于试用状态。（二）HTML的基本语法主要由标记和属性组成。1、标记（１）非空元素标记：标记名称内容/标记名称非空元素标记有h1.../h1、body.../body、html.../html等大部分HTML标记符。（２）空元素标记：标记名称常见的空元素标记有hr、br等。2、标记的属性：标记名称属性1属性2属性3...内容/标记名称说明：属性包含在起始标记内，是可选的，属性为空则用默认值，属性间用空格分隔，属性值要加引号。如定义水平线：hralign=centerwidth=75%size=2htmlhead头部信息/headbody文档主体/body/html表示该文档是HTML文档，包含了整个文档的内容包含了文档的头部信息，定义了一些用于显示文档的参数，如文档标题、meta信息、CSS样式定义等。在网页中不显示。包含了文档主体部分，包括正文内容、图像、表格等元素及标记（三）HTML的文档结构（三个标记、两个部分）body的属性bgcolor（背景颜色）text（文字颜色）link（链接颜色），alink（活动链接颜色），vlink（已访问链接颜色）background（背景图像，文件名或URL）leftmargin（左页边距），topmargin（上页边距）如：bodybackground=“bg.jpg”topmargin=“10”举例1.3.2认识XHTMLXML：可扩展的标记语言，语法严格，结构良好什么是XHTMLXHTML（EXtensibleHyperTextMarkupLanguage，可扩展超文本标记语言）是HTML的XML版本，在HTML的基础上优化改进，并遵循XML的语法严格和结构良好的要求。从语法上来看，由于XHTML直接取用了HTML4.01中可使用的元素、属性，并依照XML的规则进行重新定义，故XHTML完全向下兼容HTML4.01，同时又具有XML的语法。目前，国内外很多推崇web标准的网站纷纷使用XHTML+CSS技术进行重构，注重外观与结构的分离，以建立符合W3C验证标准的网站。XHTML1.0将HTML4.01改造成了XML的一个子集。XHTML的组成（１）DOCTYPE声明文档类型声明位于首行，用于说明网页所使用的XHTML版本，由此决定网页中相应XHTML版本可以使用的标记和属性。XHTML1.0规定了三种DTD(文档类型定义)声明：StrictDTD：严格型，不能使用任何表现层的标记，如br，标记外观完全由CSS来实现。TransitionalDTD：过渡型，允许使用HTML4.01（需符合XHTML语法）的标记。FramesetDTD：框架型，专门针对框架页面设计使用的DTD。（２）html标记和名字空间在XHTML文件中，html标记的代码：htmlxmlns=“”其中，Xmlns（XMLnamespace，XML名字空间），是html标记的一个属性。XHTML需要符合XML文档规则，因此也需要定义名字空间。在XHTML1.0版本中，xmlns属性值是固定的，不能自定义，即。XHTML主要语法规范（１）标记和属性名必须使用小写。（２）标记之间无交叉嵌套。ulli正确的无序列表/li/ul（３）标记必须要封闭。br/或br/brimgsrc=xxx.gif/或imgsrc=xxx.gif/img（４）属性值必须用双引号包括。tablewidth=500border=0（５）属性不可缩写。inputname=rb_weathertype=radiovalue=rainchecked=checked/（６）利用ID属性取代name属性imgsrc=“pic01.gifid=pic01name=pic01/1.3.3常用文本格式标记1．分段标记p…/p浏览器忽略空格、回车和tab非空元素标记，在XHTML1.0中必须成对使用。语法格式：palign=center段落内容/p属性说明：align（对齐）属性的属性值有三个参数：left（左对齐，默认）、center（居中对齐）和right（右对齐）。2．换行标记br/空元素标记，能够使文档强制换行，与p标记分段不同，br只是在该段内进行换行。3．预格式化标记pre…/pre通过在原始的文字排版内容前后加上起始标记pre和结束标记/pre，可以保留文本的原始排版格式。4．区块标记div…/divdiv标记是为HTML文档内大块内容提供结构的容器。在div中可以包含各种网页元素，如文字、图片、动画、表格、表单等等。语法格式：divalign=“center”文本内容/div。除了控制整块文本的位置，使用CSS样式表来定义div标记更可以实现各种网页布局的形式，为