网页设计cs课件(1)

1、内蒙古师范大学美术学院Inner Mongolia Normal University Academy of Fine Arts01教教 师：赵辰龙师：赵辰龙网页设计网页设计Dreamweaver CS5Dreamweaver CS5内蒙古师范大学美术学院Inner Mongolia Normal University Academy of Fine Arts02第第1章章 基础操作基础操作Dreamweaver CS5是业界使用最多的Web创作工具。首先我们要了解它的一些概念。网站、网页、首页、主页的概念。网站是指网页的集合网页是指网站的其中一个页面首页是指网站的第一个页面主页一般是指个人站

2、点根据所采用的技术不同可以把网站分为两类静态站点：静态站点：HTML动态站点：HTML+ASP、ASP 、 NET 、 PHP 、 JSP等内蒙古师范大学美术学院Inner Mongolia Normal University Academy of Fine Arts03工作流程工作流程1、规划和设置站点 确定将在哪里发布文件，检查站点要求、访问者情况以及站点目标。此外，还应考虑诸如用户访问以及浏览器、插件和下载限制等技术要求。在组织好信息并确定结构后您就可以开始创建站点。2、组织和管理站点文件在“文件”面板中，您可以方便地添加、删除和重命名文件及文件夹，以便根据需要更组织结构。在文件面板中还

3、有许多工具，可使用它们管理站点，向从远程服务器传输文件，设置存回取出过程来防止文件被覆盖，以及同步本地和远程站点上的文件。3、设计网页布局选择您要使用的布局方法，或综台使用Dre州硎“布局选项创建站点的外观。您可以使用Dreamweaver AP元素css定位样式或预先设计的css布局来创建布局。利用表格工具，您可以通过绘制并重新安排页面结构来快速地设计页面。首先购买一块空间或者一块域名，如同微博和朋友圈内蒙古师范大学美术学院Inner Mongolia Normal University Academy of Fine Arts04工作流程工作流程4、向页面添加内容添加资源和设计元素，如文本

4、、图像鼠标经过图像、图像地图、颜色、影片、声音、HIML链接、跳转菜单等。您可以对标题和背景等使用内置的页面创建功能，在页面中直接键入，或者从其它文档中导入内容。5、通过手动编码创建页面手动编写WEB页面的代码是创建页面的另种方法。Dreamw eavef提供了易于使用的可视化编辑工具，但同时也提供了高级的编码环境。6、针对动态内容设置w eb应用程序及动态页7、测试和发布测试页面是在整个开发周期中进行的一个持续的过程。在这一工作流程的最后，在服务器上发布该站点，许多开发人员还会安排定期的维护，以确保站点保持最新并且工作正常。内蒙古师范大学美术学院Inner Mongolia Normal U

5、niversity Academy of Fine Arts05第第 2 章章 规规 划划 站站 点点1、站 点 规 划 的 规 则 2、建 立 本 地 站 点 3、站点导入导出复制删除 内蒙古师范大学美术学院Inner Mongolia Normal University Academy of Fine Arts06一、站点规划的规则1.一般来说，在规划站点结构时，应该遵循以下一些规则。 (1).文档分类保存 如果一个复杂站点，它有很多文件，我们必须使用分类保存是它更清晰。 (2).合理地命名文件名称 为了方便管理，文件夹和文件的名称最好要有具体的含义。 (3).本地站点与远程站点结构统一

6、为了方便管理，在设置本地站点时，应该将本地站点与远程站点的结构设计保持一致。内蒙古师范大学美术学院Inner Mongolia Normal University Academy of Fine Arts07二、建立本地站点二、建立本地站点 在建立站点之前，我们要知道所有的文件夹、资源和特定的文件都包含在站点中。因此，首先在硬盘上建立一个新文件夹作为本地根文件夹，用来存放相关文档。如在F盘根目录下创建一个名为MyWeb的文件夹，在MyWeb文件夹里再创建一个名为images的文件夹，用来存放网站中甬道的图象文件。 (1).给站点起个名字，网址无所谓 (2).不适用任何服务器端技术 (3).选择

7、本地的副本 (4).网络连接不需要 (5).完成站点定义 (8).定义默认图像文件夹 (以后的图片均会自动存在这里) 也可以使用高级定义站点，更加的方便。内蒙古师范大学美术学院Inner Mongolia Normal University Academy of Fine Arts08二、导入和导出与复制删除站点导入和导出与复制删除站点 (1).站点导入、导出 (2).站点复制、删除 (3).注意：不要删除了站点源副本内蒙古师范大学美术学院Inner Mongolia Normal University Academy of Fine Arts09第第 3 章章 创建网页的基本对象创建网页的基

8、本对象1、网页的创建与存储2、网页 的 组成 元素 3、文 本 操 作内蒙古师范大学美术学院Inner Mongolia Normal University Academy of Fine Arts010一、网页的创建和存储一、网页的创建和存储 1.创建网页 a).第一次启动Dreamweaver CS4的时候，会让你选择“编码区”和“设计区”，这里我们选择“设计区”。 b).启动界面有四个功能：1.打开最近的项目 2.新建 3.主要功能 4.快速入门 c).勾起“不再显示”，那么下次打开，就不再显示启动界面了。(如果要显示，在首选项里有显示欢迎画面)2.保存页面 编辑好的网页需要保存，我们可

9、以执行“文件-保存”，或者按下Ctrl+S组合键，打开“另存为”对话框，在保存的时候选择保存的位置。也可以直接在文档工具上访选中需要保存的网页文档，然后单击鼠标右键，在弹出的快捷键菜单中选择“保存”3.打开和关闭页面 a).如果要打开电脑中存有的网页文件，则执行“文件-打开”命令，在弹出的对话框中选择需要打开的文件。标准工具栏上的图标，也可以打开页面。 b).单击文档窗口右上方的关闭网页按钮。或者在文档工具条上选择你要关闭的网页，或者执行“文件关闭”。内蒙古师范大学美术学院Inner Mongolia Normal University Academy of Fine Arts011二、网页的

10、组成元素网页主要由三部分组成：文本、图象和超链接 1.文本 a).文本就是网页是的文字，一般文本占用的空间很小（一个中文字符只占2字节）2.图片 a).图片会让我们的网站变的生动有趣，一般网站上的图片格式有这几种，JPG、BMP b).GIF、PNG等。一般用的比较多的是JPG、GIF两种。 c).GIF是图形交换格式，这种格式的特点就是小巧，更重要的是，它可以做为小动画，在网络上传播。 d).JPG图片格式是在网络上被广泛采用的图片格式。 e).PNG是用Macromedia公司推出的网页图片处理软件生成的格式。 3.超级链接 一个网站由很多的网页组成，而这些网页之间通常是通过超级链接的方式

11、进行连接的。 内蒙古师范大学美术学院Inner Mongolia Normal University Academy of Fine Arts012三、文本操作文本操作包括文本的插入、特殊符号的插入、日期以及文本列表的插入等。1、插入文本 a).直接在文档窗口中输入文本，将光标放置在文档窗口中要插入文本的位置，然后直接输入。如果需要跳段，可以按ENTER键。如果是换行，则是Shift+Enter. b).粘贴其他编辑器中生成的文本，首先要将光标插入文本的位置，然后执行“编辑-粘贴”，就能完成文本的插入。也可以直接使用标准工具栏上的“粘贴”按钮。2、调整文本 a).如果要调整文本大小，则选定文本

12、，在属性面板的“大小”下拉列表框中选择合适的大小。 b).如果需要改变文本字体，则先选定文本，在属性面板上“字体”下拉列表中选择字体样式。 c).如果“字体”下拉列表中没有需要的字体，则执行“文本-字体-编辑字体列表”进行操作。 d).可以将字体设置为标题字体，格式：段落，Hx。内蒙古师范大学美术学院Inner Mongolia Normal University Academy of Fine Arts0133、特殊字符 a).在文档窗口中，将光标定位在需要插入特殊字符的位置。 b).执行“插入-HTML-特殊字符”，在子菜单选择合适的字符命令。或者在快捷栏中选择文本，特殊字符。 c).如果

13、在下拉菜单中没有找到需要的字符，那么可以选择“其他字符”。4、插入日期 a).将光标放置到要插入日期的位置。 b).执行“插入日期”，或者在插入面板上点日期按钮，便可以。5、插入文本列表 a).用鼠标选定要插入的项目的文本内容 b).切换成文本面板，然后单击项目列表ul/ol内蒙古师范大学美术学院Inner Mongolia Normal University Academy of Fine Arts014第第 4 章章 插插 入入 图图 片片 1、插 入 图 像 2、图 像 占 位 符 3、交 互 式 图 像 4、图 像 背 景 内蒙古师范大学美术学院Inner Mongolia Norma

14、l University Academy of Fine Arts0151、插插 入入 图图 像像 a).在常用工具栏点击图象按钮，插入。或者菜单插入图象 b).点击属性设置图象属性2、插插 入入 图图 像像 当用户制作网页时，在页面某个位置需要插入一幅图片。但一时找不到自己喜欢合适的图片，这就需要用到Dreamweaver的占位符功能。 图象占位符并不是在浏览器中显示的最终图象，它知识一种临时的、替补的图形。用户不仅可以设置图象占位符的大小和颜色，还可以为图象占位符号提供文本标签。 插入图像占位符 - 找到替换的替换掉内蒙古师范大学美术学院Inner Mongolia Normal Univ

15、ersity Academy of Fine Arts0163、交互式图像、交互式图像 用于创建交互式图象的两幅图象大小必须相同。否则交换的图象再显示时会进行压缩或展开以适应原有图象的大小，这样容易造成图象的失真。在网页中使用交互式图象，可是网页更生动。 插入鼠标经过图像 - 选择原始图像和经过图像4、图像背景、图像背景 在Dreamweaver中，设置网页背景有两种方法：一种时设置背景颜色，另一种时设置背景图象。 修改-页面属性 （Ctrl+J） 内蒙古师范大学美术学院Inner Mongolia Normal University Academy of Fine Arts017第第 5 章

16、章 表表 格格 应应 用用 1. 创建表格2. 表格的应用 3. 选定表格、行、列、单元格元素4. 设置表格、行列、单元格属性5. 添加和删除行或列6. 单元格的合并及拆分内蒙古师范大学美术学院Inner Mongolia Normal University Academy of Fine Arts018在Dreamweaver CS4中，创建一个表格可执行以下操作：(1).插入-表格。或 常用里的表格图标(2).行数和列数文本框分别输入表格的行数和列数(3).表格宽度(4).边框粗细(5).单元格边距(6).单元格间距(6).页眉：无，左，顶部，两者(7).标题(8).对齐(10).摘要1.

17、 创建表格内蒙古师范大学美术学院Inner Mongolia Normal University Academy of Fine Arts0192、表格的应用 3、选定表格、行、列、单元格元素(1).存放文本(2).存放图片在对表格元素进行操作之前，必须先选定表格元素。(1).选定整行(2).选定整列(3).选定整个表格；修改-表格-选择表格，左上右下角，点击标签内蒙古师范大学美术学院Inner Mongolia Normal University Academy of Fine Arts020设置表格属性(1).表格ID(2).行列：(3).宽高(4).填充(5).间距(6).对齐(7).边

18、框(8).背景颜色(9).背景图象(10).边框颜色4、设置表格、行列、单元格属性内蒙古师范大学美术学院Inner Mongolia Normal University Academy of Fine Arts021在表格的操作过程中，可以很方便地添加和删除表格的行或列。(1).在表格添加一行 光标放在单元格内 修改-表格-插入行(2).在表格中添加一列 同上提示：按下组合键能添加一行，按下能添加一列。(3).在表格添加多行或多列 光标放在单元格内 表格-插入行列(4)删除行或列 5、添加和删除行或列内蒙古师范大学美术学院Inner Mongolia Normal University Aca

19、demy of Fine Arts0226、单元格的合并及拆分在制作网页的过程中，有时需要合并或拆分单元格。(1).单元格的合并 表格-合并单元格(2).单元格的拆分 表格-拆分单元格内蒙古师范大学美术学院Inner Mongolia Normal University Academy of Fine Arts023第第 6 章章 超超 级级 链链 接接 1. 什么是什么是URL2. 路径路径3. 创建各种超链接创建各种超链接内蒙古师范大学美术学院Inner Mongolia Normal University Academy of Fine Arts024 超级链接是指站点内不同网页之间，站

20、点与Web之间的链接关系。它可以使站点内的网页成为有机的整体，还能够使不同站点之间建立联系。超级链接由两部分组成：链接载体(源端点)和链接目标（目标端点）。 一个完整的主页是由多网页文档构成的，这些网页文档是分别独立的，而将这些独立的网页文档联系起来的组带，就是超级链接。超级链接的目标可以是另外一个网页，页可以是同一网页的不同位置。内蒙古师范大学美术学院Inner Mongolia Normal University Academy of Fine Arts025 URL中文翻译为统一资源定位器。URL是Internet上用来描述信息资源的字符串。一个URL分为3个部分：协议代码，装由所需文件

21、的计算机地址和主机资源的具体位置。 scheme:/host:post/path/filenamescheme指的是 http,ftp,file,mailto,news,gopher,telnet七种host指的是IP地址或计算机名称post指的是服务器端口path指的是文件路径filename指的是文件名 http:/:80/index.php1. 什么是什么是URL内蒙古师范大学美术学院Inner Mongolia Normal University Academy of Fine Arts026 创建超级链接时必须了解链接与被链接的路径。在一个网站中，路径通常由3种表达方式：绝对路径，根

22、目录相对路径，文档目录相对路径。绝对路径: http:/ c:/windows/index.htm跟目录相对路径： /web/index.htm文档目录相对路径：index.htm2、路径、路径内蒙古师范大学美术学院Inner Mongolia Normal University Academy of Fine Arts027 (1).网页与网页的连接。(2).与互链网链接(3).电子邮件链接(7).FTP链接(4).创建空链接(5).下载链接(6).锚记链接3、创建各种超链接、创建各种超链接内蒙古师范大学美术学院Inner Mongolia Normal University Academy

23、 of Fine Arts028第第 7 章章 表表 单单1. 表单的创建及修改表单的创建及修改2. 创建表单对象创建表单对象内蒙古师范大学美术学院Inner Mongolia Normal University Academy of Fine Arts029 表单由两个重要组成部分组成：一时描述表单的HTML源代码；二时用于处理用户在表单中输入信息的服务器应用程序客户端脚本，如ASP，ASP.net等。本章主要向大家介绍了表单的使用，希望读者通过对本章内容的学习，了解表单的组成，掌握表单与表单对象的创立。(1).执行 插入-表单或者表单快捷面板(2).修改表单1. 表单的创建及修改表单的创建

24、及修改内蒙古师范大学美术学院Inner Mongolia Normal University Academy of Fine Arts030 Dreamweaver表单可以包括标准表单对象。Dreamweaver中的表单对象有文本域，文本区域，输入框，按纽，图象域，复选框，跳转彩单等等。在创建表单之前，必须创建表单区域，将所有的表单对象放入其中(1).文本域 插入文本域(2).插入多行文本域(3).插入密码域(4).复选框(5).单选按纽(6).列表和菜单(7).图象域(8).表单按纽(9).标签(10).字段集2、创建表单对象、创建表单对象内蒙古师范大学美术学院Inner Mongolia

25、Normal University Academy of Fine Arts031第第 8 章章 预预 设设 参参 数数1. 页面设置页面设置2. 首选项首选项3. HEAD内容内容内蒙古师范大学美术学院Inner Mongolia Normal University Academy of Fine Arts032为了在设计网页的过程中更加的能够随着自己的想法创建，我们在设计前期必须做页面做一些设置。(1)执行“修改-页面属性”打开页面属性对话框或者Ctrl+J外观设置:页面字体，大小，文本颜色，背景颜色，背景图象等。链接设置:链接字体，大小，链接颜色，变换图象链接，已访问链接，活动链接标题选

26、项设置:标题字体设置编码设置:设置网页的信息跟踪图象选项:设置跟踪图象。1. 页面设置页面设置内蒙古师范大学美术学院Inner Mongolia Normal University Academy of Fine Arts0332、首选项、首选项3、HEAD内容内容a).常规b).字体a).关键字b).作者信息c).说明信息内蒙古师范大学美术学院Inner Mongolia Normal University Academy of Fine Arts034第第 9 章章 框框 架架 集集1. 预设框架预设框架2. 自定义框架自定义框架3. 嵌入式框架嵌入式框架内蒙古师范大学美术学院Inner

27、Mongolia Normal University Academy of Fine Arts035 利用框架技术可以把浏览器的现实空间分割为几个区域，每个区域可以分别显示不同的网页，而且替换窗口中的内容时，各个窗口之前没有影响。Dreamweaver使用了一个点击界面管理器框架。用户可以很轻松地使用、修改整个框架结构和每个框架的属性的命令。 内蒙古师范大学美术学院Inner Mongolia Normal University Academy of Fine Arts0361、使用预设的框架集、使用预设的框架集a).插入 - HTML - 框架b).快捷面板 - 布局 - 框架2、使用自定义

28、框架、使用自定义框架a).查看 - 可视化助理 - 框架边框3、框架的基本操作、框架的基本操作a).直接拖动边框即可实现增加框架页面b).反之也可以删除框架页面c).按住Alt+Shift可以可以选择其中一个框架页操作内蒙古师范大学美术学院Inner Mongolia Normal University Academy of Fine Arts0374、实现框架的内部链接、实现框架的内部链接a).给主要的框架页起名字b).超链接跳转的目标为名字目标5、插入嵌入式框架、插入嵌入式框架a).快捷面板 - 布局 - iframe内蒙古师范大学美术学院Inner Mongolia Normal Uni

29、versity Academy of Fine Arts038第第 10 章章 模模 板板 与与 库库1. 创建自定义模版创建自定义模版2. 创建模版可编辑区域创建模版可编辑区域3. 编辑和更新模版编辑和更新模版4. 库项目库项目 内蒙古师范大学美术学院Inner Mongolia Normal University Academy of Fine Arts039 用户在制作网页的时候，一些网页元素通常会被多个页面加以使用，如果每次都重新制作这些相同的部分，会浪费很多的时间，而且在后期的维护和修改时也会非常的费力。对于这个问题。Dreamweaver已经有了自己的解决方案。用户可以通过模版和库

30、就能轻松地解决这个问题，从而可以减轻重复的工作，提高网页的制作效率。 内蒙古师范大学美术学院Inner Mongolia Normal University Academy of Fine Arts0401、创建自定义模版、创建自定义模版2、创建模版可编辑区域、创建模版可编辑区域a)空模版 HTML模版 无b)将文档另存为模版 c)使用资源面板创建新模板a)插入可编辑区域 插入 模版对象 可编辑区域b)常用 模版 可编辑区域c)右击 新建可编辑区域d)右击 删除模版标记内蒙古师范大学美术学院Inner Mongolia Normal University Academy of Fine Art

31、s0413、编辑和更新模版、编辑和更新模版4、库项目、库项目a)编辑后会自动更新各个基于模版的网页编辑后会自动更新各个基于模版的网页a)创建库项目创建库项目b)分离库项目分离库项目内蒙古师范大学美术学院Inner Mongolia Normal University Academy of Fine Arts042第第 11 章章 层层 叠叠 样样 式式 表表1. 创建层叠样式表创建层叠样式表2. 样式表的规则样式表的规则3. 样式表常用标签样式表常用标签4. CSS样式样式内蒙古师范大学美术学院Inner Mongolia Normal University Academy of Fine A

32、rts043 CSS技术在网页制作中是必不可少的部分。采用CSS技术可以有效地对页面布局、字体、颜色、背景以及一些特殊效果的实现进行更加精确的控制。使用CSS技术不仅可以使网页在外观上更精美，还能够为网页添加许多特效。内蒙古师范大学美术学院Inner Mongolia Normal University Academy of Fine Arts0441. 创建层叠样式表创建层叠样式表2. 样式表的规则样式表的规则a)创建一个CSS层叠样式表b)附加链接到一个.html文件上c)或者直接通过CSS面板添加a)标签型b)类型 .class c)ID型 #id内蒙古师范大学美术学院Inner Mon

33、golia Normal University Academy of Fine Arts045a)、* (通用标签，即表示所有标签通用标签，即表示所有标签)b)、body （父标签，大部分标签继承于此）（父标签，大部分标签继承于此）c)、p (段落标签段落标签)d)、hr (水平线标签水平线标签)e)、table,tr,td,th (表格标签，行标签，单元格标签表格标签，行标签，单元格标签)f)、div (区块标签区块标签)g)、span (内联标签内联标签) 更多标签，请学习更多标签，请学习XHTML课程课程3、样式表常用标签、样式表常用标签内蒙古师范大学美术学院Inner Mongolia

34、 Normal University Academy of Fine Arts046a)、类型、类型b)、背景、背景c)、区块、区块d)、方块、方块e)、边框、边框f)、列表、列表g)、定位、定位h)、扩展、扩展 4、 CSS样式样式内蒙古师范大学美术学院Inner Mongolia Normal University Academy of Fine Arts047第第 12 章章 个个 人人 博博 客客1. 效果图效果图2. 布局图布局图3. 知识点知识点 内蒙古师范大学美术学院Inner Mongolia Normal University Academy of Fine Arts0481

35、. 效果图效果图内蒙古师范大学美术学院Inner Mongolia Normal University Academy of Fine Arts0492、布局图、布局图内蒙古师范大学美术学院Inner Mongolia Normal University Academy of Fine Arts0503、知识点、知识点 a)、模版的运用b)、CSS的运用内蒙古师范大学美术学院Inner Mongolia Normal University Academy of Fine Arts051第第 13 章章 新绿环保网新绿环保网1. 效果图效果图2. 布局图布局图3. 知识点知识点 内蒙古师范大学美术学院Inner Mongolia Normal University Academy of Fine Arts0521. 效果图效果图内蒙古师范大学美术学院Inner Mongolia Normal University Academy