第2章使用Dreamweaver制作个人网站ppt课件

1、第2章 运用 Dreamweaver 制造个人网站学习目的：1) 了解Dreamweaver的任务界面，掌握创建及管理一个站点的方法。2) 掌握网页文档的创建、保管、封锁等根本操作。3) 掌握插入普通文本、特殊文本、图像、表格等网页根本元素的方法，能创建文本、图像、锚点等超级链接。4) 了解CSS规那么，能创建简单的CSS款式表。5) 了解常用的增添网页特效的行为、DIV的根底常识。hd8go hd88go sj93 oemgc/ 189288 hzp580 yjoem oemdg/ xcdnpx/ oemdg yanjigz/ 189286/ xcdnpx/ dgxcdn dgxcpx xc

2、wxpx xunchi-px/ oemfy 0759mz lczx188 189287/ ystdzkj/ nizifn mynzf scnzf mynzg lknzg mysgf mljsgf mljnzf mljsjw0838mlj 023gree 023era 023chigo 023aux dewlisszdlsjm dewishi szdelis szdlshi.2.1 需求分析个人网站的栏目因个人兴趣喜好所致各有不同，可根据主题需求，确定网站栏目和主颜色。本实例需求实现的功能模块包括个人简介用以引见个人根本信息、个人相册用以呈现家庭、朋友及个人的温馨照片、摄影作品用以呈现个人感兴趣

3、的摄影作品、其他作品包括网站作品、平面作品、DV作品等、请您留言可以让阅读者在此提出一些建议或意见等和在线聊天提供应用户交流的一个平台 .2.2 义务分解2.2.1网站制造工具Dreamweaver CS4的熟练操作2.2.2站点的规划与创建2.2.3网页文档的根本操作2.2.4网页根本元素的插入2.2.5创建网页超链接2.2.6运用CSS美化网页2.2.7运用行为增添网页特效.2.2.1 义务一：Dreamweaver CS4简介菜单栏工具栏文档编辑区属性面板形状栏插入面板.2.2.2 义务二：站点的规划与创建1. 站点规划hd8go hd88go sj93 oemgc/ 189288 hz

4、p580 yjoem oemdg/ xcdnpx/ oemdg yanjigz/ 189286/ xcdnpx/ dgxcdn dgxcpx xcwxpx xunchi-px/ oemfy 0759mz lczx188 189287/ ystdzkj/ nizifn mynzf scnzf mynzg lknzg mysgf mljsgf mljnzf mljsjw0838mlj 023gree 023era 023chigo 023aux dewlisszdlsjm dewishi szdelis szdlshi.2.2.2 义务二：站点的规划与创建2. 站点创建.2.2.2 义务二：站点的

5、规划与创建2. 站点创建.2.2.2 义务二：站点的规划与创建2. 站点创建.2.2.3义务三：网页文档的根本操作 1.新建个人网站网页文档 1在“页面类型一栏的选项里，静态网页选择“HTML，动态网页那么选择相应的页面类型。2假设希望网页文档不包含义务CSS规划，选择“无；否那么，从“规划列表中选择预设的CSS规划。3假设在“规划列表中选择了一个规划，那么在“规划CSS位置中需求为其选择一个位置。4“首选参数项可以设置文档的默许首选参数，例如文档类型、编码类型和文件扩展名等。hd8go hd88go sj93 oemgc/ 189288 hzp580 yjoem oemdg/ xcdnpx/

6、 oemdg yanjigz/ 189286/ xcdnpx/ dgxcdn dgxcpx xcwxpx xunchi-px/ oemfy 0759mz lczx188 189287/ ystdzkj/ nizifn mynzf scnzf mynzg lknzg mysgf mljsgf mljnzf mljsjw0838mlj 023gree 023era 023chigo 023aux dewlisszdlsjm dewishi szdelis szdlshihd8go hd88go sj93 oemgc/ 189288 hzp580 yjoem oemdg/ xcdnpx/ oemdg

7、 yanjigz/ 189286/ xcdnpx/ dgxcdn dgxcpx xcwxpx xunchi-px/ oemfy 0759mz lczx188 189287/ ystdzkj/ nizifn mynzf scnzf mynzg lknzg mysgf mljsgf mljnzf mljsjw0838mlj 023gree 023era 023chigo 023aux dewlisszdlsjm dewishi szdelis szdlshi.2.2.3义务三：网页文档的根本操作 2.保管网页文档3.翻开网页文档4.封锁网页文档.2.2.4义务四：网页根本元素的插入 1.插入规划

8、1表格规划表格既可以作为一种元素丰富网页内容也可以作为一种规划工具使网页的整体更加有条理 .2.2.4义务四：网页根本元素的插入 1.插入规划 2框架规划.2.2.4义务四：网页根本元素的插入 1.插入规划 2框架规划 框架提供将一个阅读器划分成几个区域的方法，在每个区域里可以显示不同的页面，每个frame里的网页相互独立。框架集那么定义了一组框架的规划、属性等。框架集本身不包含要在阅读器中显示的页面内容，它只是向阅读器提供如何显示一组框架以及在这些框架中应该显示哪些文档的信息。 hd8go hd88go sj93 oemgc/ 189288 hzp580 yjoem oemdg/ xcdnp

9、x/ oemdg yanjigz/ 189286/ xcdnpx/ dgxcdn dgxcpx xcwxpx xunchi-px/ oemfy 0759mz lczx188 189287/ ystdzkj/ nizifn mynzf scnzf mynzg lknzg mysgf mljsgf mljnzf mljsjw0838mlj 023gree 023era 023chigo 023aux dewlisszdlsjm dewishi szdelis szdlshi.2.2.4义务四：网页根本元素的插入 2.插入内容 1文本元素的插入与编辑1普通文本可以直接在文档窗口中键入，也可以从其他运

10、用程序或窗口中复制粘贴，例如Word，TXT文件等。2Dreamweaver也提供了插入特殊文本的菜单，选择“插入/HTML/特殊字符菜单命令，可以看到软件为用户提供的较为常见的多种特殊字符。3在Dreamweaver里插入空格的做法是将输入法切换到中文输入形状，并将全角翻开，此时用户只需在想要插入空格的地方敲击空格键，即可以实现空格的输入；在HTML代码中插入即可以实现空格。.2.2.4义务四：网页根本元素的插入 2.插入内容 2图像元素的插入用于网站制造的图像要求是gif，jpg，png，psd中的一种 .2.2.4义务四：网页根本元素的插入 2.插入内容 3其他媒体的插入其他媒体包括音频

11、、视频、动画等 选择“插入/媒体/SWF菜单命令，或者在插入面板中选择“媒体/SWF hd8go hd88go sj93 oemgc/ 189288 hzp580 yjoem oemdg/ xcdnpx/ oemdg yanjigz/ 189286/ xcdnpx/ dgxcdn dgxcpx xcwxpx xunchi-px/ oemfy 0759mz lczx188 189287/ ystdzkj/ nizifn mynzf scnzf mynzg lknzg mysgf mljsgf mljnzf mljsjw0838mlj 023gree 023era 023chigo 023aux

12、dewlisszdlsjm dewishi szdelis szdlshi.2.2.5义务五：创建网页超级链接 1.文本超级链接 文本超级链接是运用最普遍的一种超级链接方式，这里的文本可以是字、词、短语、句子等。 .2.2.5义务五：创建网页超级链接 2.图片超级链接 1单张图片的超级链接选中图像，在“属性面板的“链接文本框中输入要链接的目的，包括网页、图像、运用程序等2热区超级链接插入图片，并选中图片，用展开的属性面板上的绘图工具在画面上绘制热区 .2.2.5义务五：创建网页超级链接 3.锚点超级链接 1将光标置于文档窗口想要设置锚点的地方；2选择“插入/命名锚记菜单命令，或者在插入面板中单

13、击“命名锚记，并输入锚记称号，留意锚点区分大小写；3在文档窗口中，选择要建立超级链接的文本或图像，在属性面板中的链接文本框中，输入#和锚点名，例如#top。4保管预览或按F12预览并进展修正。.2.2.5义务五：创建网页超级链接 4.电子邮件超级链接 1将光标置于要显示电子邮件超级链接的地方，或者选定希望显示电子邮件超级链接的文本、图片等。2选择“插入/电子邮件超级链接菜单命令，或者在插入面板中单击“电子邮件超级链接。3在“文本文本框中输入要显示超级链接的文本，假设事先曾经选择了文本，该文本框会自动将文本显示出来，在“文本框中输入邮箱地址，如service163，如图2-30所示。4单击确定并

14、进展测试.2.2.5义务五：创建网页超级链接 5.脚本超级链接和空链接 1脚本超级链接 在属性面板的“链接文本框中，键入Javascript：Javascript代码 例如：javascript:window.close(); 2空链接 空链接是未指派的链接。空链接主要用于页面上的对象或文本附加行为。 例如，可向空链接附加一个行为，以便在滑过该链接时会交换图像或显示绝对定位的元素。 hd8go hd88go sj93 oemgc/ 189288 hzp580 yjoem oemdg/ xcdnpx/ oemdg yanjigz/ 189286/ xcdnpx/ dgxcdn dgxcpx xc

15、wxpx xunchi-px/ oemfy 0759mz lczx188 189287/ ystdzkj/ nizifn mynzf scnzf mynzg lknzg mysgf mljsgf mljnzf mljsjw0838mlj 023gree 023era 023chigo 023aux dewlisszdlsjm dewishi szdelis szdlshi.2.2.6义务六：运用CSS美化页面 CSSCascading Style Sheets层叠款式表，是一种标志言语，它是一系列用来美化和规划网页的格式设置规那么。“层叠指对同一个元素或Web页面运用多个款式的才干。例如，创建

16、一个CSS规那么来运用字体颜色，创建另一个规那么运用行距，然后将两者运用于一个页面的同一段文本。CSS涉及网页字体、颜色、边距、高度、宽度、图像显示方式、表格显示等等 .2.2.6义务六：运用CSS美化页面 1.运用CSS的方法 1内部款式表网页文档运用CSS的一种常用方法，是采用HTML元素的style属性实现的。该款式添加在区块之间 hd8go hd88go sj93 oemgc/ 189288 hzp580 yjoem oemdg/ xcdnpx/ oemdg yanjigz/ 189286/ xcdnpx/ dgxcdn dgxcpx xcwxpx xunchi-px/ oemfy 0

17、759mz lczx188 189287/ ystdzkj/ nizifn mynzf scnzf mynzg lknzg mysgf mljsgf mljnzf mljsjw0838mlj 023gree 023era 023chigo 023aux dewlisszdlsjm dewishi szdelis szdlshi.2.2.6义务六：运用CSS美化页面 1.运用CSS的方法 2外部款式表外部款式表是把款式单独地写在一个文件里，并以扩展名为.CSS的文本文件存储 .2.2.6义务六：运用CSS美化页面 1.运用CSS的方法 3行内款式在运用款式之后，可以为单个元素添加特殊的款式信息。

18、它是运用HTML代码里的款式属性style实现的。 例如：特殊字体.2.2.6义务六：运用CSS美化页面 2.创建CSS款式 1选择“窗口/CSS款式菜单命令，在屏幕右侧CSS款式面板的右上侧点击“新建，或者在属性面板左侧找到“CSS标签，点击编辑规那么。 2输入CSS款式称号、标志或选择器。3在“CSS规那么定义对话框中可以对类型、背景、区块、方框、边框、列表、定位及扩展共8项进展设置。 4创建好的CSS款式可以再进展修正和完善。 hd8go hd88go sj93 oemgc/ 189288 hzp580 yjoem oemdg/ xcdnpx/ oemdg yanjigz/ 189286

19、/ xcdnpx/ dgxcdn dgxcpx xcwxpx xunchi-px/ oemfy 0759mz lczx188 189287/ ystdzkj/ nizifn mynzf scnzf mynzg lknzg mysgf mljsgf mljnzf mljsjw0838mlj 023gree 023era 023chigo 023aux dewlisszdlsjm dewishi szdelis szdlshi.2.2.7义务七：运用行为增添网页特效 Dreamweaver提供了一种称为“行为Behavior的机制，用来协助用户建构页面中的交互行为。行为，顾名思义，就是在网页中进展

20、的一系列动作，经过这些动作可以实现用户与页面的交互。一个行为普通由动作和事件组成，动作是用来完成特定义务预先编译好的Javascript代码，例如交换图片、弹出式菜单等，而事件那么是动作触发的结果。hd8go hd88go sj93 oemgc/ 189288 hzp580 yjoem oemdg/ xcdnpx/ oemdg yanjigz/ 189286/ xcdnpx/ dgxcdn dgxcpx xcwxpx xunchi-px/ oemfy 0759mz lczx188 189287/ ystdzkj/ nizifn mynzf scnzf mynzg lknzg mysgf mlj

21、sgf mljnzf mljsjw0838mlj 023gree 023era 023chigo 023aux dewlisszdlsjm dewishi szdelis szdlshi.2.3 开发流程 2.3.1 页面设计 .2.3 开发流程 2.3.2 开发过程 1首页制造.2.3 开发流程 2.3.2 开发过程 2导航栏制造hd8go hd88go sj93 oemgc/ 189288 hzp580 yjoem oemdg/ xcdnpx/ oemdg yanjigz/ 189286/ xcdnpx/ dgxcdn dgxcpx xcwxpx xunchi-px/ oemfy 0759

22、mz lczx188 189287/ ystdzkj/ nizifn mynzf scnzf mynzg lknzg mysgf mljsgf mljnzf mljsjw0838mlj 023gree 023era 023chigo 023aux dewlisszdlsjm dewishi szdelis szdlshi.2.3 开发流程 2.3.2 开发过程 3内页的设计与开发.2.4 拓展知识 2.4.1 HTML的相关知识 1.文件构造hd8go hd88go sj93 oemgc/ 189288 hzp580 yjoem oemdg/ xcdnpx/ oemdg yanjigz/ 18

23、9286/ xcdnpx/ dgxcdn dgxcpx xcwxpx xunchi-px/ oemfy 0759mz lczx188 189287/ ystdzkj/ nizifn mynzf scnzf mynzg lknzg mysgf mljsgf mljnzf mljsjw0838mlj 023gree 023era 023chigo 023aux dewlisszdlsjm dewishi szdelis szdlshi.2.4 拓展知识 2.4.1 HTML的相关知识 1.文件构造1HTML标签以标志2HTML标签通常是成对出现的，例如文档的主体。“/就是翻开标签和封锁标签的区别。

24、个别标签是不需求终了标志的，例如换行。3HTML代码编写时要有层次感，和标签包括在里，在书写时往内推进一个tab键，依次类推。这样书写的目地是使代码更加明晰。4HTML不区分大小写.2.4 拓展知识 2.4.1 HTML的相关知识 1.HTML的其他标签1HTML 标题:Hheading2HTML段落：Paragraph.3HTML程度线： 4HTML注释：5meta标签：6文字标签： hd8go hd88go sj93 oemgc/ 189288 hzp580 yjoem oemdg/ xcdnpx/ oemdg yanjigz/ 189286/ xcdnpx/ dgxcdn dgxcpx

25、xcwxpx xunchi-px/ oemfy 0759mz lczx188 189287/ ystdzkj/ nizifn mynzf scnzf mynzg lknzg mysgf mljsgf mljnzf mljsjw0838mlj 023gree 023era 023chigo 023aux dewlisszdlsjm dewishi szdelis szdlshi.2.4 拓展知识 2.4.2 运用DIV元素1.插入DIV标签2.AP DIV的插入 .2.4 拓展知识 2.4.3 模板与库1.模板1直接创建模板2将网页转存为模板3重新建文件中创建模板2.库模板用来制造不同网页的一样部分，库那么是面向网页部分一样部分的。 hd8go hd88go sj93 oemgc/ 189288 hzp580 yjoem oemdg/ xcdnpx/ oemdg yanjigz/ 189286/ xcdnpx/ dgxcdn dgxcpx xcwxpx xunchi-px/ oemf