网页制作技术教材全套课件教学教程整本书电子教案全书教案课件汇编.ppt

,*,网页制作技术（第二版）,网页制作技术,任务一 设计网页,学习目标,了解网页设计的有关知识和术语，理解相关概念,熟悉网页构成的基本元素,掌握网页制作的基本原则和布局思想,了解网站开发的基本流程和制作步骤,上网浏览总结各种不同类型网页布局的特点,任务一 设计网页,目录：,知识,1,网页的有关术语,知识,2,网页的基本构成元素,知识,3,网页设计的基本原则,知识,4,网页设计的美学法则,知识,5,网页的布局原则,知识,6,网页的布局结构,任务,1,设计网站的标志（,Logo,）,任务,2,设计网站的宣传标语,任务,3,设计网站的标准色彩,任务,4,设计网站的标准字体,任务,5,设计网页,任务一 设计网页,知识,1,网页的有关术语,1.,网页（,Web,）,网页，也称为,Web,页，是万维网中的基本文档，它是用,HTML,（超文本标识语言）或者其他语言（如,javaScript,、,VBScript,、,ASP,、,PHP,、,XML,等）编写而成的。,知识,2,网页的有关术语,2.,网站（,Site,）,网站是指存放在网络服务器上的完整信息的集合体，它包含一个或多个网页，这些网页以超链接方式连接在一起，形成一个整体，描述一组完整的信息。,知识,1,网页的有关术语,3.,超文本,（,Hypertext,）,超文本是一种使用用户 计算机之间进行交流的文本显示技术，通过对关键词或图片的索引链接，可以使这些带有链接的词语或图片指向相关的文件或者文本中的相关段落。,知识,1,网页的有关术语,4.,浏览器,浏览器是安装在电脑中（客户端）用来查看万维网中超级文本的一种工具软件。,5.,FTP,（文件传输协议）,FTP,是文件传输协议的英文缩写，是快速、高效、可靠的信息传输方式。,知识,1,网页的有关术语,6.,静态网页,静态网页是指浏览器与服务器端不发生交互的网页,7.,动态网页,动态网页除了静态网页中的元素外，还包括一些应用程序，这些程序需要浏览器与服务器之间发生交互行为，而且应用程序的执行需要服务器中的应用程序服务器才能完成。,知识,2,网页的基本构成元素,1.,文字,2.,图像,3.,超链接,4.,表格,5.,表单,6.,事件与行为,7.,动画,8.,框架,9.,音频,10.,视,频,11.,交互,知识,3,网页设计的基本原则,1,.,主题鲜明,2.,结构合理,3.,形式与内容统一,4.,技术与艺术统一,5.,整体与局部统一,知识,4,网页设计的美学法则,1,.,统一与变化,2.,对比与调和,3.,对称与均衡,4.,节奏与旋律,5.,单纯与秩序,知识,4,网页设计的美学法则,1,.,统一与变化,2.,对比与调和,3.,对称与均衡,4.,节奏与旋律,5.,单纯与秩序,知识,5,网页的布局原则,1,.,平衡,2.,对比,3.,疏密度,4.,比例,5.,凝视,6.,空白,7.,图片说明,知识,6,网页的布局结构,1.,“,同,”,字型结构布局,(,型结构布局,),所谓同字型结构就是指页面顶部为“网站标志广告条主菜单”或主菜单，下方左侧为二级栏目条，右侧为链接栏目条，屏幕中间显示具体内容的布局。,知识,6,网页的布局结构,2.,“,国,”,字型布局,国字型布局是在同字型布局基础上演化而来的，在保留同字型的同时，在页面的下方增加一横条状的菜单或广告，是一些大型网站所喜欢的类型,。,3.,T,型布局,页面的顶部是“网站标志广告条”，左面是主菜单，右面是主要内容。,知识,6,网页的布局结构,4.,“三”型布局,这种布局多用于国外站点，国内用得不多。特点是在页面上由横向两条色块，将页面整体分割为,3,部分，色块中大多放广告条、更新和版权提示,知识,6,网页的布局结构,5.,对比布局,采取左右或者上下对比的布局,.,6.,POP,布局,页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。,知识,6,网页的布局结构,7.,Flash,布局,整个或大部分幅面的网页本身就是一个,Flash,动画，它本身就是动态的，画面一般比较绚丽、有趣，是一种比较新潮的布局方式。,任务,1,设计网站的标志（,Logo,）,任务,2,设计网站的宣传标语,任务,3,设计网站的标准色彩,网站给人的第一印象来自视觉冲击，确定网站的色彩是相当重要的一步。不同的色彩搭配会产生不同的效果，并可能影响到访问者的情绪。一般来说，适合于网页标准色的颜色有蓝色、黄橙色、黑灰白色,3,大系。,任务,4,设计网站的标准字体,文字是网页的主要组成部分，是信息的重要载体，正确选择字体不仅关系到网页的美观，还对浏览者的阅读及信息的传达有直接的影响，字体同标准色彩一样，标准字体一般指用于标志、标题和主菜单的特有字体。默认的网页字体一般是宋体。为了体现网页的特有风格，也可以根据需要选择一些特别字体，如飘逸的华文行楷、返朴归真的隶书和亲切随意的手写体等。总之，要根据自己网页所要表达的内涵，选择与主题相符合的字体。目前，常见的中文字体有近,30,种，常见的英文字体有近百种，网络上还有许多专用英文艺术字体供下载，所以要寻找一款满意的字体并不是很困难。网页中通常使用的字体为宋体，黑体，楷体，仿宋体，常用的字号有,9pt,，,11pt,。,任务,5,设计网页,1.,草案,2.,粗略布局,3.,定案,本章结束,网页制作技术（第二版）,网页设计与制作,任务二 创建和编辑站点,学习目标,了解,Dreamweaver CS4,的功能和特点,掌握,Dreamweaver CS4,的工具面板及属性面板的使用,了解网站目录管理规范,掌握创建和编辑站点的方法,任务二 创建和编辑站点,目录：,知识,1,Dreamweaver CS4,的功能和特点,知识,2,Dreamweaver CS4,的工作界面,知识,3,站点,任务,1,创建本地站点,任务,2,管理站点,任务,3,创建站点内容,任务二 创建和编辑站点,知识,1,Dreamweaver CS4,的功能和特点,1.,插入表格实时视图新增功能,2.,针对,Ajax,和,JavaScript,框架的代码提示,3.,全新用户界面,4.,相关文件和代码导航器,5.HTML,数据集,6.Adobe,InContext,Editing(,预发布版,),7.Adobe Photoshop,智能对象,8.,更全面的,CSS,支持,9.Subversion,集成,10.Adobe AIR,创作支持新增功能,11.,跨产品集成,12.,跨平台支持,知识,2,Dreamweaver CS4,的工作界面,首次开启,Dreamweaver CS4,时，会出现一个欢迎界面，,知识,2,Dreamweaver CS4,的工作界面,在,Dreamweaver CS4,菜单右上部分有一个工作区选项菜单，可根据格局需要选择不同样式的工作界面。,知识,2,Dreamweaver CS4,的工作界面,应用程序开发人员布局：,知识,2,Dreamweaver CS4,的工作界面,设计人员紧凑布局：,知识,2,Dreamweaver CS4,的工作界面,Dreamweaver CS4,工作界面：,知识,2,Dreamweaver CS4,的工作界面,1.,菜单栏,2.,插入栏,3.,文档工具栏,4.,编辑窗口,5.,状态栏,6.,网页标签,7.,面板组,知识,3,站点,1.,本地站点,本地站点实际上存放网页的本地文件夹，即本地工作目录。它可以放在本地计算机上，也可以放在网络服务器上。,2.,远程站点,远程站点是存储用于测试、生产、协调文件的地方，具体是哪些文件取决于开发环境。一般远程文件夹位于运行,Web,服务器的计算机上。,3.,测试服务器文件夹,测试服务器文件夹是,Dreamweaver,处理动态页面的文件夹。,Dreamweaver,使用此文件夹生成动态内容并在工作时连接到数据库。主要在对动态页面进行测试时使用。,任务,1,创建本地站点,创建站点名为“网页制作学习站点”的本地站点，本地文件夹为“,C:mysite,”（本地文件夹可事先在,Windows,系统中创建，它将作为本站点的根目录。）,任务,2,管理站点,1.,编辑站点,任务,2,管理站点,2.,删除站点,任务,3,创建站点内容,1.,新建页面,任务,3,创建站点内容,2.,新建素材文件夹,本章结束,网页制作技术（第二版）,网页设计与制作,任务四 制作网站链接,学习目标,理解相对路径和绝对路径的概念,掌握内部链接和外部链接的创建方法,掌握各种特殊链接的创建方法,掌握图像链接的制作方法,任务四 制作网站链接,目录：,知识,1,绝对路经与相对路径,知识,2,内部链接与外部链接,知识,3,其它特殊链接,任务,1,制作网站链接,任务,2,制作锚点链接,任务,3,制作图像链接,任务三 制作多媒体页面,知识,1,绝对路经与相对路径,3.,站点根目录相对路径,基于站点根目录的相对路径从站点的根目录开始，同源端点的位置无关。通常使用“,/,”表示根目录，所有基于站点根目录相对路径都以“,/,”开始，。,站点根目录相对路径与绝对路径的源端点位置无关，解决了绝对路径在测试上的麻烦，在测试基于根目录的链接时，可以在本地站点中进行测试，而无须连接到,Internet,上。,知识,2,内部链接与外部链接,1.,内部链接,内部链接指网站内部页面之间的相互链接关系，创建内部链接一般采用“属性”面板设置和拖动指向链接页面的方法。,2.,外部链接,创建外部链接的方法比较简单，不论是图像还是文本，都可以创建链接到绝对地址的外部链接。,知识,3,其它特殊链接,1.,脚本链接,脚本链接是指执行,JavaScript,代码或调用,JavaScript,函数。,2.,下载链接,链接到下载文件的方法，和链接到网页的方法完全一样。当被链接的文件是,exe,文件或,zip,文件等浏览器不支持的类型时，这些文件会被下载，,3.,邮件链接,Email,链接是一种特殊的链接，单击这种链接，将打开一个空白通信窗口。在,Email,通信窗口中，允许用户创建电子邮件，并发送到指定的地址。,4.,空链接,选中要制作空链接的对象（文本或图像），在属性面板的“链接”文本框中直接输入，就制作了一个空链接。,任务,1,制作网站链接,任务,2,制作锚点链接,任务,3,制作图像链接,任务,4,制作热点链接,本章结束,网页设计与制作,任务十三 框架结构布局网页,学习目标,理解框架及框架集的概念。,掌握框架的创建方法,掌握框架面板的使用方法,掌握框架及框架集的属性设置,掌握框架及框架集的各种操作,利用框架制作网页,任务十三 框架结构布局网页,目录：,知识,1,框架和框架集,知识,2,预定义的框架集,知识,3,自定义框架集,知识,4,嵌套框架集,知识,5,保存框架,任务,1,利用框架制作网页,任务,2,制作内联式框架网页,任务十三 框架结构布局网页,知识,1,框架和框架集,框架可以将浏览器窗口划分为若干个区域，每个区域分别显示不同的网页（,HTML,文档）。框架集是,HTML,文件，它向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些文档的有关信息。框架集的功能是定义一组框架的布局和属性。,注意：,框架并不是文件。而是存放文档的容器，任何一个框架都可以显示任意一个文档。,知识,2,预定义的框架集,单击,【,文件,】,|,【,新建,】,命令，在弹出“新建文档”对话框中选择所需的框架集。,知识,3,自定义框架集,新建一个空白的,HTML,文档后，选择,【,查看,】,|,【,可视化助理,】,|,【,框架边框,】,菜单命令，即可在当前文档中显示出框架的边框。,拖动文档窗口四周的边框即可创建新框架。,知识,4,嵌套框架集,选择,【,窗口,】,|,【,框架,】,菜单命令或按,【,Shift+F2,】,键，打开“框架”面板。,在下框架中单击鼠标，选择下部框架，拖动文档编辑窗口左边的边框，则可创建出上部固定左侧嵌套的框架。,知识,5,保存框架,1.,保存框架文档,将光标定位到要保存的框架中，选择,【,文件,】,|,【,保存框架,】,命令。如将框架另存为新文件，则选择,【,文件,】,|,【,框架另存为,】,命令。,2.,保存框架集文档,选中要保存的框架集，选择,【,文件,】,|,【,保存框架页,】,命令。,3.,保存框架集中的所有文档,选择,【,文件,】,|,【,保存全部,】,命令。,说明：,如果框架集中有框架文档未被保存，则会出现“另存为”对话框，提示保存该文档。如果有多个文档未保存，则会依次打开多个“另存为”对话框。当所有的文档都已保存，,Dreamweaver,直接以原先保存的框架名保存文档，不再出现“另存为”对话框。,任务,1,利用框架制作网页,任务,2,制作内联式框架网页,本章结束,