网页设计与制作(Dreamweaver-CS5).pptx

1、网页设计与制作Dreamweaver CS5)网页设计与制作Dreamweaver CS5)DreamweaverDreamweaver基本操作基本操作1网页设计与制作Dreamweaver CS5)基本操作辅助功能创建站点DreamweaverDreamweaver基本操作基本操作2Dreamweaver基础操作 Dreamweaver的工作环境主要由以下几个部分组成：标题栏、菜单栏、文档窗口、工具栏、属性面板以及多个浮动面板组成，如图所示。网页设计与制作Dreamweaver CS5)基本操作辅助功能创建站点DreamweaverDreamweaver基本操作基本操作3CS3版本8.0版本

2、CS5版本CS6版本网页设计与制作Dreamweaver CS5)基本操作辅助功能创建站点DreamweaverDreamweaver基本操作基本操作Dreamweaver的辅助功能4网页设计与制作Dreamweaver CS5)基本操作辅助功能创建站点DreamweaverDreamweaver基本操作基本操作创建站点5 站点按照位置的不同分为本地站点及远程站点。本地站点是建立在本地计算机硬盘中的一个文件夹，用于存放站点中所有的网页、图像等对象。网页设计与制作Dreamweaver CS5)基本操作辅助功能创建站点DreamweaverDreamweaver基本操作基本操作创建站点6站点文件

3、夹index.html图片文件夹其它文件夹例如：images例如：filessoundswf网页设计与制作Dreamweaver CS5)基本操作辅助功能创建站点DreamweaverDreamweaver基本操作基本操作创建站点7“VB教学课件”站点文件夹（按文件类型分类）“网页教学课件”站点文件夹（按章节内容分类）网页设计与制作Dreamweaver CS5)网页设计与制作Dreamweaver CS5)表格基本操作表格基本操作8网页设计与制作Dreamweaver CS5)知识点实验表格基本操作表格基本操作9表格在网页中的作用组织数据网页设计与制作Dreamweaver CS5)知识点实

4、验表格基本操作表格基本操作10表格在网页中的作用版面布局网页设计与制作Dreamweaver CS5)知识点实验表格基本操作表格基本操作11表格在网页中的作用版面布局网页设计与制作Dreamweaver CS5)知识点实验表格基本操作表格基本操作12表格在网页中的作用 组织信息 表格可以使大量的信息资料有组织的排列起来，以达到查阅快捷，管理便利的目的。版面布局 表格是网页制作中最为重要的一个对象，网页是依靠表格来进行版面布局和组织各元素的。网页设计与制作Dreamweaver CS5)知识点实验表格基本操作表格基本操作13表格在网页中的作用组织信息 表格直接决定了网页是否美观，内容组织是否清晰

5、。合理的利用表格可以美化页面。网页设计与制作Dreamweaver CS5)知识点实验表格基本操作表格基本操作14表格操作新建表格u“行”、“列”：指定表格的行数或列数；u“宽度”：指定表格宽度，以像素或占浏览器窗口百分比为单位；u“边框”：指定边框宽度；u“单元格边距”：指定单元格中的内容到单元格边框之间的空白宽度；u“单元格间距”：指定各个单元格之间的间距。网页设计与制作Dreamweaver CS5)知识点实验表格基本操作表格基本操作15表格操作u 相对宽度：百分比，设置的表格会自动调整大小。u 绝对宽度：像素，设置的表格大小不变。表格的相对宽度和绝对宽度网页设计与制作Dreamweav

6、er CS5)知识点实验表格基本操作表格基本操作16表格操作l表格Id：表格名l行、列：数值框中可修改表格的行数和列数，修改完后按【Enter】键进行确认。l宽：数值框中可修改表格宽度，并在其后的列表中选择“像素”或“百分比”作为度量单位。l填充：数值框中修改单元格内容和单元格边界之间相距的像素数。l间距：数值框中设置相邻的单元格之间相距的像素数。l对齐：下拉列表中选择表格在所属对象中的位置l边框：表格外框的粗细l 类：下拉列表框中选择表格的CSS样式。表格属性网页设计与制作Dreamweaver CS5)知识点实验表格基本操作表格基本操作17表格操作l 可删除表格的列宽值l 可删除行高值l

7、将表格宽度从浏览器窗口的百分比转换为像素l 将表格宽度从浏览器窗口像素转换为百分比表格属性网页设计与制作Dreamweaver CS5)知识点实验表格基本操作表格基本操作18表格操作表格单元格属性l水平：单元格中的数据水平对齐方式l垂直：单元格中的数据水垂直对齐方式l宽：单元格的宽度l高：单元格的高度l背景颜色：单元格的背景颜色网页设计与制作Dreamweaver CS5)知识点实验表格基本操作表格基本操作19实验1l新建表格l设置表格的属性网页设计与制作Dreamweaver CS5)知识点实验表格基本操作表格基本操作20实验2l新建表格l设置表格的属性l单元格的合并网页设计与制作Dream

8、weaver CS5)知识点实验表格基本操作表格基本操作21实验3网页设计与制作Dreamweaver CS5)知识点实验表格基本操作表格基本操作22实验4（选做题）数据导入网页设计与制作Dreamweaver CS5)网页设计与制作Dreamweaver CS5)图像图像23网页设计与制作Dreamweaver CS5)知识点实验图像图像24图像的分类及特点图形图像是构成网页的重要元素网页设计与制作Dreamweaver CS5)知识点实验图像图像25网页中常用的图像格式JPG格式：质量越高，文件越大。支持真彩色，网页中常来表现风景摄影、新闻图片等。GIF格式：支持透明属性，常用于网页中的图

9、形、符号、标题等。PNG格式：支持真彩色和透明属性，文件量较之JPG和GIF格式要大。网页设计与制作Dreamweaver CS5)知识点实验图像图像26添加图像对象图像鼠标经过图像（翻转图）图像占位符网页设计与制作Dreamweaver CS5)知识点实验图像图像27设置图像的属性恢复图像大小恢复图像大小网页设计与制作Dreamweaver CS5)知识点实验图像图像28实验1网页设计与制作Dreamweaver CS5)知识点实验图像图像29实验2翻转图效果网页设计与制作Dreamweaver CS5)知识点实验图像图像30实验3网页设计与制作Dreamweaver CS5)知识点实验图像

10、图像31实验4翻转图效果网页设计与制作Dreamweaver CS5)网页设计与制作Dreamweaver CS5)CSSCSS样式样式32网页设计与制作Dreamweaver CS5)知识点实验CSSCSS样式样式33CSS样式层叠样式表（Cascading Style Sheet）网页设计与制作Dreamweaver CS5)知识点实验CSSCSS样式样式34文字的CSS样式网页设计与制作Dreamweaver CS5)知识点实验CSSCSS样式样式35图像的CSS样式网页设计与制作Dreamweaver CS5)知识点实验CSSCSS样式样式36表格的CSS样式网页设计与制作Dreamw

11、eaver CS5)知识点实验CSSCSS样式样式37项目列表的CSS样式网页设计与制作Dreamweaver CS5)知识点实验CSSCSS样式样式38链接文本的CSS样式网页设计与制作Dreamweaver CS5)知识点实验CSSCSS样式样式39CSS的选择器类型网页设计与制作Dreamweaver CS5)知识点实验CSSCSS样式样式40CSS的选择器类型类ID标签复合内容网页设计与制作Dreamweaver CS5)知识点实验CSSCSS样式样式41文字的CSS样式字体字体大小大小字型字型行距行距颜色颜色网页设计与制作Dreamweaver CS5)知识点实验CSSCSS样式样式

12、42文字的CSS样式文本对齐方式文本对齐方式段落首页空位段落首页空位网页设计与制作Dreamweaver CS5)知识点实验CSSCSS样式样式43文字的CSS样式网页设计与制作Dreamweaver CS5)知识点实验CSSCSS样式样式44图像的CSS样式大小大小与其它元素的间距与其它元素的间距与边框的距离与边框的距离网页设计与制作Dreamweaver CS5)知识点实验CSSCSS样式样式45图像的CSS样式图像的边框图像的边框网页设计与制作Dreamweaver CS5)知识点实验CSSCSS样式样式46图像的CSS样式网页设计与制作Dreamweaver CS5)知识点实验CSSC

13、SS样式样式47表格的CSS样式 表格的边框表格的边框 表格单元格之间的线条表格单元格之间的线条表格起始标签：表格行标签：单元格标签：样式应用样式应用样式应用样式应用网页设计与制作Dreamweaver CS5)知识点实验CSSCSS样式样式48表格的CSS样式大小大小表格内元素表格内元素与边框的距离与边框的距离表格与其它元素表格与其它元素的距离的距离网页设计与制作Dreamweaver CS5)知识点实验CSSCSS样式样式49表格的CSS样式表格或单元格的边框表格或单元格的边框网页设计与制作Dreamweaver CS5)知识点实验CSSCSS样式样式50表格的CSS样式网页设计与制作Dr

14、eamweaver CS5)知识点实验CSSCSS样式样式51项目列表的CSS样式项目标签：列表标签：列表项目符号 列表之间的间隔线网页设计与制作Dreamweaver CS5)知识点实验CSSCSS样式样式52项目列表的CSS样式网页设计与制作Dreamweaver CS5)知识点实验CSSCSS样式样式53项目列表的CSS样式字体字体大小大小行距行距颜色颜色网页设计与制作Dreamweaver CS5)知识点实验CSSCSS样式样式54项目列表的CSS样式列表的下线框列表的下线框网页设计与制作Dreamweaver CS5)知识点实验CSSCSS样式样式55项目列表的CSS样式网页设计与制

15、作Dreamweaver CS5)知识点实验CSSCSS样式样式56链接文本的CSS样式网页设计与制作Dreamweaver CS5)知识点实验CSSCSS样式样式57链接文本的CSS样式网页设计与制作Dreamweaver CS5)知识点实验CSSCSS样式样式58链接文本的CSS样式a:link：链接文本的样式a:visited：被访问过的链接文本样式a:hover：鼠标经过链接文本的样式a:active：激活的链接文本样式网页设计与制作Dreamweaver CS5)知识点实验CSSCSS样式样式59实验1网页设计与制作Dreamweaver CS5)知识点实验CSSCSS样式样式60实

16、验1表格布局1网页设计与制作Dreamweaver CS5)知识点实验CSSCSS样式样式61实验1表格布局1网页设计与制作Dreamweaver CS5)知识点实验CSSCSS样式样式62实验2表格布局CSS样式网页设计与制作Dreamweaver CS5)知识点实验CSSCSS样式样式63实验2表格布局：5行1列表格1行4列表格1行5列表格1行4列表格网页设计与制作Dreamweaver CS5)知识点实验CSSCSS样式样式64实验2CSS样式：body样式文字样式表格单元格样式图像样式列表样式网页设计与制作Dreamweaver CS5)网页设计与制作Dreamweaver CS5)链

17、接链接65网页设计与制作Dreamweaver CS5)知识点实验链接链接66链接的概念 超级链接是指站点内不同网页之间、站点与Web之间的链接关系。它可以使站点内的网页成为有机的整体，还能够使不同站点之间建立联系。网页设计与制作Dreamweaver CS5)知识点实验链接链接67链接的分类 文本链接 图像链接 图像热点链接按创建链接的对象：锚点链接 电子邮件链接 网址链接 空链接 脚本链接 文件下载按链接的目标：网页设计与制作Dreamweaver CS5)知识点实验链接链接68链接的概念 文本链接文本链接 图像链接图像链接 热点链接热点链接 网址链接网址链接 电子邮件链接电子邮件链接网页

18、设计与制作Dreamweaver CS5)知识点实验链接链接69链接的概念 空链接空链接 子页链接子页链接网页设计与制作Dreamweaver CS5)知识点实验链接链接70链接的分类 电子邮件链接 空链接#脚本链接javascript:alert(欢迎光临广州旅游网)mailto:网页设计与制作Dreamweaver CS5)知识点实验链接链接71链接的路径 绝对路径：指某个文件在网络上的完整路径，包括协议、Web服务器、路径和文件名等。相对路径：文件相对路径是指和当前文档所在的文件夹相对的路径。网页设计与制作Dreamweaver CS5)知识点实验链接链接72绝对路径http:/http

19、:/ CS5)知识点实验链接链接73相对路径“.”代表目前所在的根目录“.”代表上一层目录“”用于链接路径中各目录名称。目录路径的建立语法如下：目录路径的建立语法如下：目录名称/目录名称/文件名称 根目录相对路径是从当前站点的根目录开始的，用斜杠“/”代表根目录，然后再书写文件夹名，最后书写文件名。网页设计与制作Dreamweaver CS5)知识点实验链接链接74相对路径 web00index.htmlhtmimagespage1.html page2.htmlsnoopy1.jpgE引用者引用者被引用者被引用者相对路径相对路径Index.htmlPage1.html./htm/page1.

20、html或或htm/page1.thmlPage1.htmIndex.html./index.html网页设计与制作Dreamweaver CS5)知识点实验链接链接75链接目标窗口 _blank：新的浏览器窗口_parent：上一级框架集_self：当前窗口_top：载入到整个浏览器窗口，取消所有的框架网页设计与制作Dreamweaver CS5)知识点实验链接链接76链接文本的样式网页设计与制作Dreamweaver CS5)网页设计与制作Dreamweaver CS5)添加多媒体元素添加多媒体元素77网页设计与制作Dreamweaver CS5)知识点实验添加多媒体元素添加多媒体元素78

21、插入FLASH元素 FLASH动画 FLV视频网页设计与制作Dreamweaver CS5)知识点实验添加多媒体元素添加多媒体元素79FLASH动画 FLASH动画是一种矢量动画，体积小，图像质量高，使用流式播放技术。FLASH电影文件格式的扩展为SWF，它是目前浏览器中使用的格式。网页设计与制作Dreamweaver CS5)知识点实验添加多媒体元素添加多媒体元素80FLV视频FLV网络视频格式，视频质量良好、体积小。网页设计与制作Dreamweaver CS5)知识点实验添加多媒体元素添加多媒体元素81插入Plugin插件利用Plugin插件可以对插入的音频和视频进行控制。音频和视频文件与

22、当前网页同一路径。网页设计与制作Dreamweaver CS5)知识点实验添加多媒体元素添加多媒体元素82添加音效网页设计与制作Dreamweaver CS5)知识点实验添加多媒体元素添加多媒体元素83添加视频在图像上添加视频网页设计与制作Dreamweaver CS5)知识点实验添加多媒体元素添加多媒体元素84插入Java Applet程序在网页中插入Java Applet可以使网页增加动态效果。Class文件与当前网页、图像文件同一路径。网页设计与制作Dreamweaver CS5)网页设计与制作Dreamweaver CS5)表单表单85网页设计与制作Dreamweaver CS5)知识

23、点实验表单表单86表单简介表单作为浏览者交互的一种元素。表单：负责数据采集的功能，收集浏览者输入的信息。表现形式：问卷调查、留言簿等等。创建表单时既可以将整个页面创建为表单，也可以只在页面的某个位置创建表单网页设计与制作Dreamweaver CS5)知识点实验表单表单87登录网页设计与制作Dreamweaver CS5)知识点实验表单表单88注册网页设计与制作Dreamweaver CS5)知识点实验表单表单89留言板网页设计与制作Dreamweaver CS5)知识点实验表单表单90网上调查投票网页设计与制作Dreamweaver CS5)知识点实验表单表单91网上测验网页设计与制作Dre

24、amweaver CS5)知识点实验表单表单92表单的组成一个表单有三个基本组成部分：表单标签(表单区域)：表单对象只能插入在红色虚线内。表单对象（表单域）：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。网页设计与制作Dreamweaver CS5)知识点实验表单表单93创建表单添加表单域添加表单对象添加表单按钮网页设计与制作Dreamweaver CS5)知识点实验表单表单94检查表单网页设计与制作Dreamweaver CS5)网

25、页设计与制作Dreamweaver CS5)AP DivAP Div元素和行为元素和行为95网页设计与制作Dreamweaver CS5)知识点实验AP DivAP Div元素和行为元素和行为96AP元素AP元素（绝对定位元素）是分配有绝对位置的HTML页面元素。AP元素可以包含文本、图像或其他任何可放置到HTML文档正文中的内容。网页中除了利用表格实现网页布局，也可以利用AP Div元素设计页面的布局，实现网页中的图文混排。网页设计与制作Dreamweaver CS5)知识点实验AP DivAP Div元素和行为元素和行为97AP Div的操作网页设计与制作Dreamweaver CS5)知

26、识点实验AP DivAP Div元素和行为元素和行为98行为行为是在某一对象上因为某一事件而触发某一动作的综合描述。它是被用来动态响应用户操作、改变当前页面效果或是执行特定任务的一种方法。行为是由事件、对象和动作构成的。使用行为，我们可以实现很多特效。网页设计与制作Dreamweaver CS5)知识点实验AP DivAP Div元素和行为元素和行为99行为网页设计与制作Dreamweaver CS5)网页设计与制作Dreamweaver CS5)框架框架100网页设计与制作Dreamweaver CS5)知识点实验框架框架101框架结构一个框架结构的页面由两部分构成：框架、框架集。框架（Fr

27、ame）：框架是浏览器窗口中的一个区域，每个框架中显示的是不同的网页文件。框架集（Frameset）：框架集是组织保存框架布局的网页信息，其中包括框架的数目、框架的大小和位置以及最初在每个框架中显示的页面的URL。网页设计与制作Dreamweaver CS5)知识点实验框架框架102框架集和框架网页设计与制作Dreamweaver CS5)知识点实验框架框架103创建框架集和框架网页设计与制作Dreamweaver CS5)知识点实验框架框架104创建框架集和框架网页设计与制作Dreamweaver CS5)知识点实验框架框架105网页中拆分成框架集和框架网页设计与制作Dreamweaver

28、CS5)知识点实验框架框架106“框架”面板网页设计与制作Dreamweaver CS5)知识点实验框架框架107框架与框架集属性框架集属性面板框架属性面板网页设计与制作Dreamweaver CS5)知识点实验框架框架108“框架”链接网页设计与制作Dreamweaver CS5)知识点实验框架框架109保存框架l 保存框架集文件l 保存框架文件网页设计与制作Dreamweaver CS5)知识点实验框架框架110浮动框架浮动框架是一种特殊的嵌入式框架，浮动框架用“iframe”标签来表示，通过使用“iframe”标签将一个网页嵌入到另一个网页中。浮动框架可以自由、独立地插入在页面中的任意位

29、置。网页设计与制作Dreamweaver CS5)知识点实验框架框架111浮动框架方法一：直接在代码视图中输入代码网页设计与制作Dreamweaver CS5)知识点实验框架框架112浮动框架方法二：“插入”面板“布局”项网页设计与制作Dreamweaver CS5)知识点实验框架框架113浮动框架的属性属性值说明Src设置在iframe内显示的网页文件的地址。例：src=“one.html”name设置iframe的名称。例：name=“oneiframe”heightpixels%定义iframe 的高度。例：height=“400”weightpixels%定义 iframe 的宽度。例

30、：weightt=“80%”scrollingyes no auto iframe是否显示滚动条。例：scrolling=yes Frameborder10是否显示iframe 的边框，1表示显示，0表示不显示。例：frameborder=1网页设计与制作Dreamweaver CS5)知识点实验框架框架114浮动框架的链接在设置链接时，在属性面板中的“目标”项，输入iframe的名称：“iframe1”网页设计与制作Dreamweaver CS5)网制页实作习网页设计与制作Dreamweaver CS5)网页制作实训站点文件（广州旅游）文件夹web*为两位学号image*files*Inde

31、x.html子页文件图像文件网页设计与制作Dreamweaver CS5)网页制作实训实训内容l广州旅游主题网页（结构指定、素材自创）广州旅游（首页、子页）网页设计与制作Dreamweaver CS5)网页制作实训首页结构导航至少6个菜单项栏目三个大标题Banner(5个)网站banner栏目banner广告banner网页设计与制作Dreamweaver CS5)网页制作实训主体内容一网页设计与制作Dreamweaver CS5)网页制作实训主体内容一（参照）网页设计与制作Dreamweaver CS5)网页制作实训主体内容二 网页设计与制作Dreamweaver CS5)网页制作实训主体内

32、容二（参照）网页设计与制作Dreamweaver CS5)网页制作实训主体内容二（参照）网页设计与制作Dreamweaver CS5)网页制作实训主体内容二banner（参照）网页设计与制作Dreamweaver CS5)网页制作实训主体内容二文字（参照）网页设计与制作Dreamweaver CS5)网页制作实训主体内容二（参照）网页设计与制作Dreamweaver CS5)网页制作实训主体内容三网页设计与制作Dreamweaver CS5)网页制作实训主体内容三（参照）网页设计与制作Dreamweaver CS5)网页制作实训主体内容三（参照）网页设计与制作Dreamweaver CS5)网

33、页制作实训主体内容三（参照）网页设计与制作Dreamweaver CS5)网页制作实训主体内容四网页设计与制作Dreamweaver CS5)网页制作实训主体内容四（参照）网页设计与制作Dreamweaver CS5)网页制作实训主体内容四（参照）网页设计与制作Dreamweaver CS5)网页制作实训页脚信息网页设计与制作Dreamweaver CS5)网页制作实训页脚信息（参照）网页设计与制作Dreamweaver CS5)网页制作实训标题栏设计（参照）背景+图片、形状网页设计与制作Dreamweaver CS5)网页制作实训标题栏设计（参照）渐变、背景+文字网页设计与制作Dreamwe

34、aver CS5)网页制作实训标题栏设计（参照）小图标+文字+线条网页设计与制作Dreamweaver CS5)网页制作实训标题栏设计（参照）网页设计与制作Dreamweaver CS5)网页制作实训一级子页结构导航至少6个菜单项(首页)栏目至少5个Banner3个网页设计与制作Dreamweaver CS5)网页制作实训页眉网页设计与制作Dreamweaver CS5)网页制作实训主体内容一网页设计与制作Dreamweaver CS5)网页制作实训主体内容二网页设计与制作Dreamweaver CS5)网页制作实训主体内容二网页设计与制作Dreamweaver CS5)网页制作实训主体内容三

35、 网页设计与制作Dreamweaver CS5)网页制作实训主体内容三 网页设计与制作Dreamweaver CS5)网页制作实训主体内容三 网页设计与制作Dreamweaver CS5)网页制作实训主体内容三 网页设计与制作Dreamweaver CS5)网页制作实训二级子页结构u 版式1文字配图u 版式2图片结构网页设计与制作Dreamweaver CS5)网页制作实训二级子页结构u 版式1文字配图网页设计与制作Dreamweaver CS5)网页制作实训二级子页结构u版式2图片结构网页设计与制作Dreamweaver CS5)网页制作实训二级子页结构u版式2图片结构网页设计与制作Dreamweaver CS5)网页制作实训二级子页结构u版式2图片结构