网页设计与制作课件全书全套教学教程电子教案电子讲义.pptx

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2021/5/10,#,1.,互联网基础,2.,网页设计知识,3.,网页标准化技术,4.,网站设计软件,5.,网站制作流程,6.HTML,语言,本章学习主要内容：,第,1,章 网页设计基础,网页设计与制作,Dreamweaver CS6,标准教程,1.1.1Internet,与,Web,服务,1.1.2URL,路径,1.1.3,服务器与客户机,1.1.4,互联网数据中心,1.1,互联网基础,互联网就是借助通信线路将计算机和各种相关设备相连接，并按照统一的标准在各种设备之间进行数据传输和交换，实现互联互通，以达到计算机之间资源共享和信息交换的目的。,1.1.1 Internet,与,Web,服务,互联网提供的主要服务包括万维网（,World Wide Web,，,WWW,，,3W,，,Web,），电子邮件（,E-mail,），文件传输（,FTP,）和远程登录（,Telnet,）等。,Web,网采用超文本标记语言（,Hyper Text Mark-up Language,，,HTML,），可以存取包括文本、图像、动画、音频和视频等多媒体信息，还可以基于超链接通过众多的网页和网站构成了一个全球范围内的庞大信息网络。,1.1.1 Internet,与,Web,服务,Uniform Resource Locator,，统一资源定位器,URL,由三部分组成：协议类型，主机名和路径及文件名，表达为如下形式：,协议名,:/,服务器的,IP,地址或域名,/,路径,/,文件名,URL,路径,服务器是提供共享资源和服务的计算机，其作用是管理大量的信息资源。,客户机是用户用来获取资源和服务的计算机。浏览器软件是客户机上必备软件。,1.1.3,服务器与客户机,互联网数据中心（,Internet Data Center,，,IDC,）为企业、媒体和各类网站提供专业化的网络服务器管理，网络带宽等一系列服务，是网络基础资源的重要组成部分。,IDC,向用户提供服务包括整机租用、服务器托管、机房租用、专线接入和网络管理服务等。,数据中心体系包括四个主要部分：服务器系统，电力保障系统，数据传输保障系统以及环境控制系统。,1.1.4,互联网数据中心,页面设计要具有一定的独创性，符合用户的审美情趣，同时还要兼顾表达主题，满足表达内容和使用便捷的要求。,色彩，网页设计元素和页面布局是网页创意设计的三个重要组成部分。,1.2,网页设计知识,1.2.1,色彩,1.2.2,网页设计元素,1.2.3,页面布局,1.2,网页设计知识,1.,认识色彩,任何色彩都具有色相、明度和纯度三种属性。,色相是色彩的名称，是一个色彩区别与另一个色彩的主要因素。,明度也称为亮度，表示了色彩的明暗程度，明度越大，色彩越亮。,纯度是指色彩的鲜艳程度或饱和度。色彩纯度越高的颜色越鲜艳，纯度越低的颜色越灰暗。,1.2.1,色彩,2.RGB,色彩模式和网页安全色,每种色彩都可以用红,(R),、绿,(G),、蓝,(B)3,种色彩按一定的比例调和而成，这,3,种色彩被称为光的,3,原色,将在不同操作系统和浏览器中具有一致显示效果的颜色定义为网络安全色，网络安全色有,216,种。在网页设计软件中，任何颜色都有一个六位的十六进制编号，如,#D6D6D6,，任何由,00,、,33,、,66,、,99,、,CC,或者,FF,组合而成的颜色值，都表示一个,Web,安全色,3.,利用图像配色,1.2.1,色彩,1.,网站标识,网站,logo,，将网站,logo,置于页面比较醒目的位置，如左上角。,2.,网站,banner,网站,banner,一般位于页面的顶部，即可以表达和突出网站创意和形象，也可以传达某种特定信息。,网站,banner,通常是由,GIF,动画、,JPEG,图像或,Flash,动画完成的。,1.2.2,网页设计元素,3.,导航条,导航条是网站设计中最重要的元素之一，即表现了网站的站点结构和内容分类，又方便了用户对网站的浏览。,4.,图像,Gif,用于画面简单、细节信息少的图像，如背景图片，可以减少图像文件的大小；,Jpeg,用于画面较为复杂、细部信息多的图像；,PNG,用于有透明背景的图像。,一种是独立完整的图像，二是在,Firework,或,Photoshop,中使用切片功能获得的图像。,5.,动画,网页设计中常用的动画有,Gif,动画和,Flash,动画。,6.,背景,使用合理能够增强页面的整体创意效果。,1.2.2,网页设计元素,1.,结构布局,常用的结构布局方式包括“国”字型、拐角型、上下框架和左右框架等类型。,2.,艺术布局,常用的平面艺术设计原则有分割、对称和平衡等。,总之，根据内容和栏目编排要求以及客户审美需求，将各种典型结构灵活运用，将艺术设计原则融会贯通，锐意创新，创作出结构布局合理，页面精美的网页。,1.2.3,页面布局,网页由三部分组成：结构（,Structure,）、表现（,Presentation,）和行为（,Behavior,），相应的技术标准由三个部分组成：结构化标准语言，,CSS,样式表和脚本语言。,1.3,网页标准化技术,1.3.1,结构化语言,1.3.2CSS,样式,1.3.3,脚本语言,1.3.4ASP,技术,1.3,网页标准化技术,结构化语言,HTML,（,Hyper Text Markup Language,，超文本标记语言）,XHTML,（,eXtensible Hyper Text Markup Language,，可扩展的超文本标记语言）是,HTML,的升级版本。,超文本标记语言,HTML5,是将取代,HTML4.01,标准和,XHTML1.0,标准的,HTML,标准版本。,1.3.1,结构化语言,CSS,（,Cascading Style Sheets,，层叠样式表）是由,W3C,指定和发布的，用于描述网页元素格式的一组规则，其作用是设置,HTML,和,XHTML,语言编写的结构化文档外观。,层叠样式,CSS3,版本与超文本标记语言,HTML5,一起，开始获得了业界的广泛认同。,1.3.2 CSS,样式,脚本语言是一种面向对象的程序设计语言，是专为,HTML,设计者提供的一种编程语言。,在,dreamweaver,中，行为就是由内嵌的,JavaScript,脚本语言实现的。,1.3.3,脚本语言,在开发制作动态网站时，除了以上标准化网页技术外，还需要,ASP,技术和数据库技术作为支撑条件和环境。,ASP,（,Active Server Pages,，动态服务网页）是微软公司发布的动态网页开发技术组件，用来创建和运行动态网页或,web,应用程序。,Asp,文件由文本、,HTML,标签，,ASP,脚本代码以及,COM,组件等部分组成。,1.3.4 ASP,技术,1.4.1 Dreamweaver,1.4.2 Flash,1.4.3 Photoshop,1.4,网站设计软件,Photoshop,借助于在平面设计领域的出色功能，将,Web,设计功能融入到软件系统中，提供了图像切片和优化,Web,图形的功能，可以导出,HTML,页面文档用于网页设计。,Dreamweaver,，,Photoshop,和,Flash,是由,Adobe,公司开发的三款软件，具有良好的集成性。,Photoshop,和,Flash,的输出结果可以直接导入,Dreamweaver,网页中。,1.4.3 Photoshop,网站制作已经逐渐发展成为一个由网页界面设计、网页制作、数据库开发和动态应用程序编写等一系列工作构成的系统工程。,1.5,网站制作流程,1.5.1,前期准备工作,1.5.2,方案实施,1.5.3,后期工作,1.5,网站制作流程,在网站建设之前，需要对与本项目相关的互联网市场进行调查和分析，同时收集各种相关的信息和资料，为网站建设提供必要的前期数据，为决策提供依据。,1.5.1,前期准备工作,1.,市场调查与分析,市场调研包括用户需求分析、企业自身情况和竞争对手情况的调查与分析。,2.,收集资料,收集和整理资料为网站建设提供基础素材。,3.,网站定位,在市场调查和分析以及资料收集的基础之上，初步确定网站的定位，包括大致内容和结构，页面创意的基调，以及基本技术架构。,1.5.1,前期准备工作,根据前期准备工作，具体规划网站的栏目和布局，页面设计风格和外观效果；确定网站所使用的各种技术，完成网站制作的全部工作。,1,规划网站,规划网站实际上是网站定位的一个延续。网站规划越详尽，方案实施就越规范。,2,页面设计,采用图形图像类软件进行创意和设计，也可以采用动画软件设计动感十足、富于变化的页面效果。,1.5.2,方案实施,3,静态网页制作,4,动态网页制作,采用动态网页技术。,ASP,技术，数据库技术以及前后台页面设计在动态网站建设中尤为重要。,5,整合网站,在整合过程中，需要对各个部分以及整合后的系统进行检查，发现问题，及时调整。,1.5.2,方案实施,1,网站测试,网站测试包括网站运行的每个页面和程序。兼容性测试，超链接测试是必选的测试内容。,2,网站发布,网站发布包括申请域名，申请服务器空间和上传网站内容。,首先，企业需要申请一个或多个域名；其次，向互联网数据公司申请服务器空间；第三，完成远程站点的设置；第四，再将网站内容上传到服务器。,1.5.3,后期工作,3,网站推广,注册搜索引擎是最直接和有效的方法。,通过在同行或相关行业网站中，建立网站的相互链接；或通过论坛、博客、,QQ,和电子邮件等方式，发布网站信息，是低成本的推广方式。,4,网站维护,日常维护，如更新网站栏目；版本升级。,1.5.3,后期工作,在,Dreamweaver,可视化环境中，制作网页的各种操作都会自动生成,HTML,语言代码，网页是由,HTML,语言编写的文本文件。,HTML,是一个结构化描述语言，格式非常简单，由文字及标签组合而成，其书写规则如下：,任何标签皆由,“”,和文字组成，如,为段落标签；某些起始标签可以加参数，如,Hello,表示字体大小为,12,；大部分标签既有起始标签，又有终结标签，终结标签是在起始标签之前加上符号,“/”,构成的，如,；标签字母大小写均可。,1.6 HTML,语言,1.6.1,文件结构标签,1.6.2,表格标签,1.6.3,文本段落标签,1.6.4,图像标签,1.6.5,链接标签,1.6.6,框架标签,1.6.7,表单,1.6.8,块标签,1.6 HTML,语言,第2章 Dreamweaver CS6基础,网页设计与制作,Dreamweaver CS6 标准教程,1.Dreamweaver CS6,工作界面,2.,创建网站站点,3.,管理站点,4.,网页文档头部信息设置,本章学习的主要内容：,Adobe Dreamweaver CS6,是一款集网页设计、制作和管理网站于一身的可视化网页编辑软件，它保留了,Dreamweaver,早期版本的各种优点，不仅可以轻松设计网站的前台页面，也可以方便地实现网站后台各种复杂功能。,2.1 Dreamweaver CS6工作界面,2.1.1,开始页面,2.1.2,工作环境,2.1.3,工作区布局,2.1.4,多文档的编辑界面,2.1 Dreamweaver CS6工作界面,Dreamweaver CS6,启动后，默认情况下会显示开始页面，用户可以在开始页面中打开已有文档或新建文档。勾选开始页面底部【不再显示】，下次启动,Dreamweaver CS6,时将不会显示开始页面。,选择菜单【编辑】|【首选参数】，在【首选参数】对话框中勾选【显示欢迎屏幕】，单击【确定】按钮，在下次启动时重新显示开始页面。,2.1.1 开始页面,Dreamweaver CS6,的工作环境由菜单栏、文档工具栏、文档窗口、状态栏、属性面板（或属性检查器）和浮动面板组等部分组成。,2.1.2 工作环境,Dreamweaver CS6,为用户提供了多种工作区布局，用户可以根据需要设定工作区环境，也可以新建工作区布局，并对它进行管理和删除操作。,选择菜单【窗口】|【工作区布局】，在子菜单中选择一种工作区布局。,2.1.3 工作区布局,Dreamweaver CS6,提供了多文档的编辑界面，将多个文档集中到一个窗口中，用户可以单击文档编辑窗口上方选项卡的文件名切换到相应的文档，还可以按住鼠标左键拖动选项卡改变文档的顺序。,2.1.4 多文档的编辑界面,站点是存放一个网站所有文件的场所，由若干文件和文件夹组成。用户在开发网站前必须先建立站点，便于组织和管理网站文件。,2.2 创建网站站点,2.2.1,创建新站点,2.2.2,新建和保存网页,2.2.3,管理站点文件和文件夹,2.2.4,课堂案例,慈善救助中心,2.2创建网站站点,站点按站点文件夹所在位置分为两类：本地站点和远程站点。,本地站点是指本地计算机上的一组文件，远程站点是远程,WEB,服务器上的一组文件。,创建本地站点首先要在本地硬盘上新建一个文件夹或者选择一个已经存在的文件夹作为站点文件夹，那么这个文件夹就是本地站点的根文件夹。,2.2.1 创建新站点,创建本地站点的操作步骤如下。,选择菜单【站点】|【新建站点】，或选择【管理站点】并在【管理站点】对话框中单击【新建】按钮，打开【站点设置对象】对话框，在左边选择【站点】，在右侧输入站点名称和本地站点文件夹路径。,单击左侧【高级设置】，展开其他选项，选择【本地信息】，在右侧设置相应的属性。,其他项可以根据需要设置，设置完毕后单击【保存】按钮。在【文件】面板中可以看到新建的本地站点。,2.2.1 创建新站点,1,新建网页文档,选择菜单【文件】|【新建】，打开【新建文档】对话框，在左侧选择【空白页】，在【页面类型】中选择【HTML】，在【布局】中选择【无】。单击【创建】按钮就可以创建网页文档。,2,保存网页文档,保存网页文档有如下两种方法。,（,1,）选择菜单【文件】|【保存】或【全部保存】。在【另存为】对话框的【文件名】文本框中输入网页的名称，单击【保存】按钮完成保存。,（,2,）按,快捷键保存网页文档。,2.2.2 新建和保存网页,1,创建文件和文件夹,2,重命名文件和文件夹,3,移动文件和文件夹,4,删除文件或文件夹,2.2.3 管理站点文件和文件夹,案例学习目标：学习创建站点、管理站点文件和文件夹的方法。,案例知识要点：使用【站点】|【新建站点】创建站点，在【文件】面板中移动文件、重命名文件。,素材所在位置：光盘,/,案例素材,/ch02/,课堂案例,-,慈善救助中心。,案例效果如图,2-17,所示。,2.2.4 课堂案例慈善救助中心,建立站点以后，可以对站点进行打开、编辑、复制和删除等各种操作。,2.3 管理站点,2.3.1,打开站点,2.3.2,编辑站点,2.3.3,复制站点,2.3.4,删除站点,2.3 管理站点,Dreamweaver,允许建立多个站点，并可以通过切换打开需要编辑的站点。打开站点的操作步骤如下。,选择菜单【窗口】|【文件】或按,键打开【文件】面板，单击左边的下拉框，在下拉列表中选择要打开的站点。,打开站点后，在【本地文件】下显示该站点内的所有文件和文件夹。,2.3.1 打开站点,编辑站点可以重新设置站点的一些属性，操作步骤如下。,选择菜单【站点】|【管理站点】，打开【管理站点】对话框，选择要编辑的站点名称，如,webtest,，单击编辑按钮图标 。,打开【站点设置对象,webtest,】对话框。经过对各种设置修改后，单击【保存】按钮，返回【管理站点】对话框。,2.3.2 编辑站点,复制站点可以建立多个结构相同的站点，让这些站点保持一定的相似性，可以提高工作效率。复制站点的操作步骤如下。,选择菜单【站点】|【管理站点】，打开【管理站点】对话框，选择要复制的站点名称，如,webtest,，单击【复制】按钮。这时在左边的站点列表中会出现一个新的复制站点，名称为“,webtest,复制”。,复制的站点和原站点默认使用同一个文件夹，选择复制的站点，对其各种设置进行编辑操作。,2.3.3 复制站点,在,Dreamweaver,中删除站点，只是删除了,Dreamweaver,同本地站点之间的关系。本地站点中的文件夹和文件，仍然保存在硬盘原来的位置上，没有被删除，也没有任何改变。,删除站点的操作步骤如下。,选择菜单【站点】|【管理站点】，打开【管理站点】对话框，选择要删除的站点名称，单击【删除】按钮。,在打开的【Dreamweaver】对话框中单击【是】按钮，选中的站点就被删除，,2.3.4 删除站点,标签位于网页,和,标签之间，用来记录当前页面的相关信息，如字符编码、作者和版权信息、搜索关键字等，它也可以用来向服务器提供信息，如页面的失效日期、刷新时间间隔等。,2.4 网页文档头部信息设置,2.4.1,插入搜索关键字,2.4.2,设置描述信息,2.4.3,插入版权信息,2.4.4,设置刷新时间,2.4 网页文档头部信息设置,插入搜索关键字可以通过以下两种方法完成。,1,在代码视图中插入关键字,在【文档】窗口中切换到代码视图，将光标置于,标签中。,选择菜单【插入】|【HTML】|【文件头标签】|【关键字】，打开【关键字】对话框，输入关键字，如“礼品，节日礼品”，多个关键字用英文逗号分隔。,单击【确定】按钮完成设置，在代码视图下可以看到,标签内新增了如下代码：,2.4.1 插入搜索关键字,2,使用,META,对话框插入关键字,选择菜单【插入】|【HTML】|【文件头标签】|【META】，打开【META】对话框，在【值】文本框中输入,keywords,，在【内容】文本框中输入关键字，多个关键字用英文逗号隔开。,单击【确定】按钮完成设置，在代码视图中可看到相应的,HTML,标签。,2.4.1 插入搜索关键字,设置网页描述信息的操作如下。,在【文档】窗口中切换到代码视图，将光标置于,标签中。选择菜单【插入】|【HTML】|【文件头标签】|【说明】，在【说明】对话框中输入说明文字。,单击【确定】按钮完成描述信息设置，在代码视图下可以看到,标签内新增了如下代码：,2.4.2 设置描述信息,在网页文档中插入版权信息的操作如下。,选择菜单【插入】|【HTML】|【文件头标签】|【META】，打开【META】对话框，在【值】文本框输入,copyright,，在【内容】文本框中输入版权信息，如“本页版权归设计者所有”，单击【确定】按钮。,在代码视图下可以看到,标签内新增了如下代码：,2.4.3 插入版权信息,设置刷新时间具体操作步骤如下。,在【文档】窗口中切换到代码视图，将光标置于,标签内，选择菜单【插入】|【HTML】|【文件头标签】|【刷新】。,在【刷新】对话框中设置相应属性。,单击【确定】按钮，在代码视图下可以看到,标签内新增了如下代码：,2.4.4 设置刷新时间,标签分为,name,属性和,http-equiv,属性。,name,属性主要用于描述网页，如,keywords,（关键字）、,description,（网站内容描述）等。,http-equiv,属性类似于,HTTP,的头部协议，它会给浏览器一些有用的信息，以帮助正确和精确地显示网页内容，如,refresh,（刷新）等。,2.4.4 设置刷新时间,第3章 页面与文本,网页设计与制作,Dreamweaver CS6 标准教程,1.,页面属性,2.,文本属性,3.,项目列表和编号列表,本章学习的主要内容：,网页页面属性主要包括网页标题、网页背景图像和颜色、网页边距、网页默认文字大小和颜色、超链接颜色等。可以通过菜单【修改】|【页面属性】来进行设置和修改。,3.1 页面属性,3.1.1,课堂案例,香格里湾峰会,3.1.2,网页的标题,3.1.3,文本分段与换行,3.1.4,输入空格,3.1.5,页面文字属性,3.1.6,显示不可见元素,3.1.7,设置页边距,3.1.8,背景属性,3.1.9,跟踪图像,3.1 页面属性,案例学习目标：学习网页页面属性的设置方法，以及文本的换行与分段，字体的选择与设置等方法。,案例知识要点：使用【修改】|【页面属性】菜单设置页面属性。,素材所在位置：光盘,/,案例素材,/ch03/,课堂案例,-,香格里湾峰会。,案例效果如图,3-1,所示。,3.1.1课堂案例香格里湾峰会,网页标题设置有两种方法。,（,1,）利用【页面属性】对话框,选择菜单【修改】|【页面属性】或点击文本【属性】面板中的【页面属性】按钮。,单击【页面属性】对话框中【分类】栏中的【标题,/,编码】，在【标题】文本框中输入页面标题，如图,3-22,所示，单击【确定】完成设置。,（,2,）在文档工具栏【标题】文本框中，输入页面标题文字完成设置。,3.1.2 网页的标题,（,1,）将光标置于需要分段处，按回车键形成一个新段落，同时在两个段落之间添加了一个空行。在网页代码中，新形成的两个段落文字均包含在,和,标签中。,（,2,）将光标置于需要换行处，按住,的同时，按回车键换行，但没有形成新的空行。在网页代码中，段落文字依然包含在,和,标签中，并在换行处上添加了一个,标签。,3.1.3 文本分段与换行,选择菜单【编辑】|【首选参数】，在【首选参数】对话框的【分类】栏中，选择【常规】，在【编辑选项】中勾选或取消勾选【允许多个连续空格】完成设置。,除此之外，还可以通过以下四种方法输入空格。,（,1,）选择【插入】面板中【文本】选项卡，单击【字符】按钮 展开选择【不换行空格】选项。,（,2,）选择菜单【插入】|【HTML】|【特殊字符】|【不换行空格】。,（,3,）按,快捷键。,（,4,）将输入法转换到中文全角状态下，按,空格键输入连续空格。,3.1.4 输入空格,新建网页时，页面文字的字体、大小和颜色等均有默认设置，可根据需要进行修改，具体步骤如下。,选择菜单【修改】|【页面属性】。,单击【页面属性】对话框【分类】栏中的【外观（,CSS,）】，在右侧设置【页面字体】、【大小】、【文本颜色】。,页面文字属性设置完后，在【,CSS,样式】面板中出现了,body,td,th,样式，【代码】窗口中新增一段,CSS,样式代码，如：,body,td,th,font-family:,微软雅黑,;,font-size:14px;,color:#666;,3.1.5 页面文字属性,显示或隐藏不可见元素的操作步骤如下。,选择菜单【编辑】|【首选参数】，打开【首选参数】对话框。,在【首选参数】对话框【分类】栏中选择【不可见元素】，在右侧单击相应元素的复选框实现显示或隐藏不可见元素，如图,3-28,所示，单击【确定】完成设置。,3.1.6 显示不可见元素,页边距指整个页面到浏览器左、右边缘和顶部、底部边缘的距离，通常设置为,0,。设置步骤如下。,选择菜单【修改】|【页面属性】,在【页面属性】对话框【分类】栏中选择【外观（,CSS,）】，在【左边距】、【右边距】、【上边距】、【下边距】选项分别输入相应数值，单击【确定】按钮完成设置。,在【代码】窗口中看到新增一段代码：,body,margin-left:0px;,margin-top:0px;,margin-right:0px;,margin-bottom:0px;,3.1.7 设置页边距,网页背景可以填充为颜色，也可以填充为图像。更改网页背景的操作步骤如下。,选择菜单【修改】|【页面属性】。,单击【页面属性】对话框【分类】栏中的【外观（,CSS,）】，在右侧设置【背景颜色】、【背景图像】、【重复】等选项。,【重复】选项下拉列表中，各选项含义如下。,no-repeat,（不重复）：背景图像不重复。,repeat,（重复）：背景图像在页面中重复。,repeat-x,（重复,-x,）：背景图像在页面中横向重复。,repeat-y,（重复,-y,）：背景图像在页面中纵向重复。,如果【重复】空白，默认为,repeat,。,3.1.8 背景属性,网页背景可以填充为颜色，也可以填充为图像。更改网页背景的操作步骤如下。设置跟踪图像的步骤如下。,选择菜单【修改】|【页面属性】。,单击【页面属性】对话框【分类】栏中的【跟踪图像】，在右侧【跟踪图像】文本框中输入跟踪图像的路径和文件名。或者单击【浏览,】,按钮，在【选择图像源文件】对话框中找到并选择跟踪图像，单击【确定】按钮。,在【透明度】选项中设置跟踪图像透明度。,3.1.9 跟踪图像,在制作网页时，应用最多的元素就是文本，文本有很多种，如文字、特殊符号、日期等。在网页中添加文本之后，需要对文本的大小、颜色等属性进行设置，以便网页更加美观。,3.2 文本属性,3.2.1,课堂案例,百货公司,3.2.2,设置文本属性,3.2.3,文本段落,3.2.4,插入日期,3.2.5,插入特殊字符,3.2 文本属性,案例学习目标：学习设置网页中的文字样式。,案例知识要点：使用,CSS,样式改变文本大小、颜色、字体等样式。,素材所在位置：光盘,/,案例素材,/ch03/,课堂案例,-,百货公司。,案例效果如图,3-33,所示。,3.2.1 课堂案例百货公司,Dreamweaver,基于层叠样式表（,CSS,）对网页进行设置，即事先定义好文本的,CSS,样式再应用到文本上。定义的一个,CSS,样式可以应用在多处文本上，要改变文本样式属性只需修改,CSS,样式属性。,3.2.2 设置文本属性,设置文本属性的操作步骤如下。,选择菜单【窗口】|【CSS样式】或按,快捷键打开【CSS样式】面板。单击【CSS样式】面板底部【新建,CSS,规则】按钮，在【新建,CSS,规则】对话框中的【选择器类型】下拉列表中选择“类（可应用于任何,HTML,元素）”，在【选择器名称】文本框中输入样式名称，如,.text,，单击【确定】按钮。,打开【.text的,CSS,规则定义】对话框，在【分类】中选择【类型】，在右侧设置文本的属性。,选中需要设置样式的文本，在【属性】面板中单击【HTML】按钮 切换到,HTML,属性，在【类】下拉列表中选择,.text,。,3.2.2 设置文本属性,在页面文档中，,和,标签主要用于定义一个段落。,如果一段短小的文字段落，需要加大或缩小文字突出表现效果，那么还可以使用标题。,预定义格式在处理空格和空行较多的文本段落时更加方便。,1.,应用段落或标题格式,2.,指定预格式,3.2.3 文本段落,在网页文档中插入日期的操作步骤如下。,在【文档】窗口中将光标置于要插入日期的位置上。,单击菜单【插入】|【日期】，或在【插入】面板中选择【常用】选项卡，单击【日期】按钮。,在【插入日期】对话框中选择需要显示的【星期格式】、【日期格式】或【时间格式】。,如果勾选【储存时自动更新】，则每次保存该网页文档时都会自动更新日期，否则不会更新。,3.2.4 插入日期,可采用以下两种方法在网页中插入特殊字符。,（,1,）使用【插入】|【HTML】|【特殊字符】菜单。,（,2,）使用【插入】面板插入特殊字符。,3.2.5 插入特殊字符,项目列表和编号是放在文本前的点、数字或其他符号，起到强调作用。合理使用项目列表和编号列表，可以使网页内容的层次结构更清晰、更有条理。,3.3 项目符号和编号列表,3.3.1,课堂案例,咨询网站,3.3.2,设置项目列表或编号列表,3.3.3,修改项目符号或编号,3.3 项目符号和编号列表,案例学习目标：学习使用项目列表。,案例知识要点：使用【项目列表】按钮创建列表、改变列表样式。,素材所在位置：光盘,/,案例素材,/ch03/,课堂案例,-,咨询网站。,案例效果如图,3-58,所示。,3.3.1 课堂案例-咨询网站,1,项目列表,设置项目列表有以下两种方法。,（,1,）使用【属性面板】设置,（,2,）使用【格式】,|,【列表】菜单设置,网页中的项目列表也称为无序列表（,unordered lists,），添加完项目符号后，在【代码】视图中可以查看,HTML,代码：,项目列表一,项目列表二,项目列表三,整个项目列表包含在,和,标签之间，列表的每一项包含在,和,标签内。,3.3.2 设置项目列表或编号列表,2,编号列表,设置编号列表有以下两种方法。,（,1,）使用【属性面板】设置,（,2,）使用【格式】|【列表】菜单设置,编号列表也称为有序列表（,ordered lists,），添加完编号列表后，在【代码】视图中可以查看,HTML,代码：,项目列表一,项目列表二,项目列表三,整个项目列表包含在,和,标签之间，列表的每一项包含在,和,标签内。,3.3.2 设置项目列表或编号列表,修改项目符号或编号的操作步骤如下。,将光标置于设置了项目符号或编号的文本中。,单击【属性】面板中【列表项目】按钮 或选择菜单【格式】|【列表】|【属性】，打开【列表属性】对话框。,在【列表类型】下拉列表中选择要修改的列表类型，在【样式】下拉列表中选择符号或编号样式，在【开始计数】文本框中设置编号起始值。,3.3.3 修改项目符号或编号,3.4.1,练习案例,大学生国际电影节,3.4.2,练习案例,移动银行网站,3.4.3,练习案例,化妆品网站,3.4 练习案例,案例练习目标：练习页面属性设置。,案例操作要点：,1,设置网页标题为“大学生国际电影节”。,2.,设置页面的文本属性：页面字体为微软雅黑，文本大小为,14px,，颜色为,#FFF,。,3,设置页面的背景属性：背景颜色为,#CA162F,，背景图像为,bg.jpg,，图像重复为,no-repeat,，图像对齐为水平居中和垂直顶端，左边距、右边距、上边距和下边距分别设为,0px,、,0px,、,240px,和,0px,。,素材所在位置：光盘,/,案例素材,/ch03/,练习案例,-,大学生国际电影节，效果如图,3-75,所示。,3.4.1练习案例-大学生国际电影节,案例练习目标：练习文字样式设定。,案例操作要点：,1,在页面相应位置分别输入文字。,2,设置如下样式，并应用到相应文本上。,样式名称为,.menu,，字体大小,12px,，颜色,#FFF,。,样式名称为,.t1,，字体大小,12px,、颜色,#666,；样式名称为,.t2,，字体大小,14px,，字体颜色,#000,，字体粗细,bold,；样式名称为,.t3,字体大小,13px,，字体颜色,#CD3E00,。,样式名称为,.title1,，字体大小,18px,，字体颜色,#000,；样式名称为,.titile2,，字体大小,18px,，字体颜色,#2C9BC9,；样式名称为,.title3,，字体大小,18px,，字体颜色,#EF9514,。,素材所在位置：光盘,/,案例素材,/ch03/,练习案例,-,移动银行网站，效果如图,3-76,所示。,3.4.2练习案例-移动银行网站,案例练习目标：练习项目列表的使用。,案例操作要点：,1,将表格中的文字设置为项目列表。,2,在标签样式,中，文本大小为,14px,，颜色为,#727272,，行高为,150%,。,素材所在位置：光盘,/,案例素材,/ch03/,练习案例,-,化妆品网站，效果如图,3-77,所示。,3.4.3练习案例-化妆品网站,第4章 图像与多媒体,网页设计与制作,Dreamweaver CS6 标准教程,1.,图像的插入,2.,调整图像,3.,网页中的多媒体,本章学习的主要内容：,图像是网页设计中一个非常重要的元素，它使页面更美观，更具有吸引力。在网页中插入图像也是,Dreamweaver,网页设计中必须掌握的技术。,4.1 图像插入,4.1.1,课堂案例,茶叶网站,4.1.2,插入图像,4.1.3,图像源文件,4.1.4,替换文本,4.1.5,图像占位符,4.1 图像插入,案例学习目标：学习使用多种方法在网页中插入图像。,案例知识要点：使用【插入】面板、【插入】|【图像】菜单和直接拖曳图像等方法将图像插入到网页指定位置。,素材所在位置：光盘,/,案例素材,/ch04/,课堂案例,-,茶叶网站。,案例效果如图,4-1,所示。,4.1.1 CSS样式标准,网站中的图像必须放在站点文件夹内才能在网页中正确显示，所以在建立网站时要在站点文件夹内建立一个专门存放该站点图像的文件夹，通常命名为“,images,”，然后将网站所需的图像都放置其中。,4.1.2 插入图像,在,Dreamweaver,中，可以通过以下三种方法在网页中插入图像。,（,1,）选择菜单【插入】|【图像】，在【选择图像源文件】对话框中找到并选择所需的图像，单击【确定】按钮完成图像插入。,（,2,）选择【插入】面板中【常用】选项卡，单击【图像】按钮 上的黑色三角形，在下拉菜单中选择“图像”选项，在【选择图像源文件】对话框中找到并选择所需的图像，单击【确定】按钮完成图像插入。,（,3,）打开【文件】面板，展开显示图像文件夹中的所有文件，在需要插入的图像名称上按住鼠标左键拖曳到【文档】窗口的相应位置，松开鼠标，完成图像插入。,4.1.2 插入图像,图像源文件是指插入的图像文件所在的位置，可以是本地的图像也可以是网络上的图像，如果插入的图像位于站点文件夹内，【属性】面板中【源文件】文本框中会显示相对路径。,如果要插入的图像不在站点文件夹内，那么会出现提示对话框，询问是否将图像复制到站点文件夹内，选择单击【确定】按钮即可。,也可以直接在【属性】面板【源文件】文本框中修改网页中显示的图像的路径和文件名。,4.1.3 图像源文件,如果网页中有的图像不能正常显示（如图像源文件路径错误或浏览器图像显示被关闭等）就会导致浏览者看不到图像。使用图像【属性】面板中的【替换】文本框，可以给看不到的图像设置说明性文字。,4.1.4 替换文本,图像占位符是指在将最终图像插入到网页中之前所使用的替代图像，以便在不确定图像时对网页进行布局。图像占位符可以设置不同尺寸、颜色和文字来替代图像。,插入图像占位符的步骤如下。,将光标置于要插入图像占位符的位置。,单击菜单【插入】|【图像对象】|【图像占位符】，打开【图像占位符】对话框。,输入名称、宽度、高度、颜色等属性值，单击【确定】按钮，插入图像占位符，通过适当调整，使其满足设计需求。,当需要插入真正的图片时，只需双击该位置的图形占位符，在【选择图像源文件】对话框中找到并选择需要的图像，单击【确定】按钮完成插入。,4.1.5 图像占位符,网页中的图像为了满足布局要求，经常需要进行调整，利用【编辑图像设置】等功能可以对图像尺寸、类型和色彩等进行调整。,4.2 调整图像,4.2.1,课堂案例,墙体装饰,4.2.2,图像效果,4.2 CSS样式控制面板,案例学习目标：学习网页中图像调整的基本操作，包括裁剪、尺寸调整、亮度和对比度、锐化等效果调整。,案例知识要点：在【属性】面板中，选择【编辑图像设置】、【裁剪】、【亮度和对比度】、【锐化】等按钮调整图像效果。,素材所在位置：光盘,/,案例素材,/ch04/,课堂案例,-,墙体装饰。,案例效果如图,4-15,所示。,4.2.1 课堂案例墙体装饰,1,图像裁剪,2,亮度和对比度,3,图像锐化,4.2.2 图像效果,网页不仅由图像和文字组成，而且音频、视频等多媒体也越来越广泛地应用在网页设计中，目前网页中可以插入的多媒体包括动画、视频、,Java Applet,对象和,ActiveX,控件等。,虽然应用多媒体能丰富网页内容，但可能影响浏览速度，所以一般情况下网页中不会大量使用多媒体元素。,4.3 网页中的多媒体,4.3.1,课堂案例,度假村,4.3.2,插入,Flash,动画,4.3.3,插入,Flv,影片,4.3.4,插入插件,瑜伽会所,4.3.5,插入,Applet,程序,4.3 CSS属性,案例学习目标：学习在网页中插入动画、,FLV,视频等元素。,案例知识要点：使用【插入】面板的【媒体】|【SWF】和【FLV】按钮插入多媒体元素。,素材所在位置：光盘,/,案例素材,/ch04/,课堂案例,-,度假村。,案例效果如图,4-25,、图,4-26,所示。,4.3.1课堂案例-度假村,插入,Flash,动画的步骤如下。,在【文档】窗口中单击要插入,Fl