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

1、第2章 使用 Dreamweaver 制作个人网站学习目标：1) 了解Dreamweaver的工作界面，掌握创建及管理一个站点的方法。2) 掌握网页文档的创建、保存、关闭等基本操作。3) 掌握插入普通文本、特殊文本、图像、表格等网页基本元素的方法，能创建文本、图像、锚点等超级链接。4) 理解CSS规则，能创建简单的CSS样式表。5) 了解常用的增添网页特效的行为、DIV的基础常识。2.1需求分析析个人网站站的栏目目因个人人兴趣爱爱好所致致各有不不同，可可根据主主题需要要，确定定网站栏栏目和主主色调。本实例需需要实现现的功能能模块包包括个人人简介（用以介介绍个人人基本信信息）、个人相相册（用用以

2、呈现现家庭、朋友及及个人的的温馨照照片）、摄影作作品（用用以呈现现个人感感兴趣的的摄影作作品）、其他作作品（包包括网站站作品、平面作作品、DV作品等）、请您您留言（可以让让浏览者者在此提提出一些些建议或或意见等等）和在在线聊天天（提供供给用户户交流的的一个平平台）2.2任务分解解2.2.1网站制作作工具DreamweaverCS4的熟练操操作2.2.2站点的规规划与创创建2.2.3网页文档档的基本本操作2.2.4网页基本本元素的的插入2.2.5创建网页页超链接接2.2.6使用CSS美化网页页2.2.7使用行为为增添网网页特效效2.2.1任务一：DreamweaverCS4简介菜单栏工具栏文档编

3、辑辑区属性面板板状态栏插入面板板2.2.2任务二：站点的的规划与与创建1.站点规划划2.2.2任务二：站点的的规划与与创建2.站点创建建2.2.2任务二：站点的的规划与与创建2.站点创建建2.2.2任务二：站点的的规划与与创建2.站点创建建2.2.3任务三：网页文文档的基基本操作作1.新建个人人网站网网页文档档（1）在“页页面类型型”一栏栏的选项项里，静静态网页页选择“HTML”，动态网网页则选选择相应应的页面面类型。（2）如果希希望网页页文档不不包含任任务CSS布局，选选择“无无”；否否则，从从“布局局”列表表中选择择预设的的CSS布局。（3）如果在在“布局局”列表表中选择择了一个个布局，则

4、在“布局CSS位置”中中需要为为其选择择一个位位置。（4）“首选选参数”项可以以设置文文档的默默认首选选参数，例如文文档类型型、编码码类型和和文件扩扩展名等等。http:/http:/http:/ http:/ http:/ http:/ http:/ http:/www./ http:/ http:/www.http:/http:/http:/ http:/ http:/www.0759http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/www.http:/ http:/www.http:/ http:/www.023http:/ht

5、tp:/http:/http:/http:/http:/http:/ http:/www.http:/http:/2.2.3任务三：网页文文档的基基本操作作2.保存网页页文档3.打开网页页文档4.关闭网页页文档2.2.4任务四：网页基基本元素素的插入入1.插入布局局（1）表格布布局表格既可可以作为为一种元素丰富富网页内内容也可以作为为一种布布局工具使网页页的整体体更加有条理2.2.4任务四：网页基基本元素素的插入入1.插入布局局（2）框架布布局2.2.4任务四：网页基基本元素素的插入入1.插入布局局（2）框架布布局框架提供供将一个个浏览器器划分成成几个区区域的方方法，在在每个区区域里可可以显示

6、示不同的的页面，每个frame里的网页页相互独独立。框框架集则则定义了了一组框框架的布布局、属属性等。框架集集本身不不包含要要在浏览览器中显显示的页页面内容容，它只只是向浏浏览器提提供如何何显示一一组框架架以及在在这些框框架中应应该显示示哪些文文档的信信息。2.2.4任务四：网页基基本元素素的插入入2.插入内容容（1）文本元元素的插插入与编编辑1）普通文文本可以以直接在在文档窗窗口中键键入，也也可以从从其他应应用程序序或窗口口中复制制粘贴，例如Word，TXT文件等。2）Dreamweaver也提供了了插入特特殊文本本的菜单单，选择择“插入入/HTML/特殊字符符”菜单单命令，可以看看到软件件

7、为用户户提供的的较为常常见的多多种特殊殊字符。3）在Dreamweaver里插入空空格的做做法是将将输入法法切换到到中文输输入状态态，并将将全角打打开，此此时用户户只要在在想要插插入空格格的地方方敲击空空格键，即可以以实现空空格的输输入；在在HTML代码中插插入即可以实实现空格格。2.2.4任务四：网页基基本元素素的插入入2.插入内容容（2）图像元元素的插插入用于网站站制作的的图像要要求是gif，jpg，png，psd中的一种种2.2.4任务四：网页基基本元素素的插入入2.插入内容容（3）其他媒媒体的插插入其他媒体体包括音音频、视视频、动动画等选择“插插入/媒体/SWF”菜单命令令，或者者在插

8、入入面板中选选择“媒媒体/SWF”2.2.5任务五：创建网网页超级级链接1.文本超级级链接文本超级级链接是是运用最最普遍的的一种超超级链接接方式，这里的的文本可可以是字字、词、短语、句子等等。2.2.5任务五：创建网网页超级级链接2.图片超级级链接（1）单张图图片的超超级链接接选中图像像，在“属性”面板的的“链接接”文本本框中输输入要链链接的目目标，包包括网页页、图像像、应用用程序等等（2）热区超超级链接接插入图片片，并选选中图片片，用展展开的属属性面板板上的绘绘图工具具在画面面上绘制制热区2.2.5任务五：创建网网页超级级链接3.锚点超级级链接（1）将光标标置于文文档窗口口想要设设置锚点点的

9、地方方；（2）选择“插入/命名锚记记”菜单单命令，或者在在插入面面板中单单击“命命名锚记记”，并并输入锚锚记名称称，注意意锚点区区分大小小写；（3）在文档档窗口中中，选择择要建立立超级链链接的文文本或图图像，在在属性面面板中的的链接文文本框中中，输入入#和锚点名名，例如如#top。（4）保存预预览或按按F12预览并进进行修改改。2.2.5任务五：创建网网页超级级链接4.电子邮件件超级链链接（1）将光标标置于要要显示电电子邮件件超级链链接的地地方，或或者选定定希望显显示电子子邮件超超级链接接的文本本、图片片等。（2）选择“插入/电子邮件件超级链链接”菜菜单命令令，或者者在插入入面板中中单击“电子

10、邮邮件超级级链接”。（3）在“文文本”文文本框中中输入要要显示超超级链接接的文本本，如果果事先已已经选择择了文本本，该文文本框会会自动将将文本显显示出来来，在“E-mail”文本框中中输入邮邮箱地址址，如，如图2-30所示。（4）单击确确定并进进行测试试2.2.5任务五：创建网网页超级级链接5.脚本超级级链接和和空链接接（1）脚本超超级链接接在属性面面板的“链接”文本框框中，键键入Javascript：Javascript代码例如：javascript:window.close();（2）空链接接空链接是是未指派派的链接接。空链链接主要要用于页页面上的的对象或或文本附附加行为为。例如，可可向空

11、链链接附加加一个行行为，以以便在滑滑过该链链接时会会交换图图像或显显示绝对对定位的的元素。2.2.6任务六：使用CSS美化页面面CSS（CascadingStyleSheets）层叠样样式表，是一种种标记语语言，它它是一系系列用来来美化和和布局网网页的格格式设置置规则。“层叠”指对同同一个元元素或Web页面应用用多个样样式的能能力。例例如，创创建一个个CSS规则来应应用字体体颜色，创建另另一个规规则应用用行距，然后将将两者应应用于一一个页面面的同一一段文本本。CSS涉及网页页字体、颜色、边距、高度、宽度、图像显显示方式式、表格格显示等等等2.2.6任务六：使用CSS美化页面面1.应用CSS的方

12、法（1）内部样样式表网页文档档应用CSS的一种常常用方法法，是采采用HTML元素的style属性实现现的。该该样式添添加在区块之间间2.2.6任务六：使用CSS美化页面面1.应用CSS的方法（2）外部样样式表外部样式式表是把把样式单单独地写写在一个个文件里里，并以以扩展名名为.CSS的文本文文件存储储2.2.6任务六：使用CSS美化页面面1.应用CSS的方法（3）行内样样式在运用样样式之后后，可以以为单个个元素添添加特殊殊的样式式信息。它是使使用HTML代码里的的样式属属性style实现的。例如：特殊字体体2.2.6任务六：使用CSS美化页面面2.创建CSS样式（1）选择“窗口/CSS样式”菜

13、菜单命令令，在屏屏幕右侧侧CSS样式面板板的右上上侧点击击“新建建”，或或者在属属性面板板左侧找找到“CSS”标签，点点击编辑辑规则。（2）输入CSS样式名称称、标记记或选择择器。（3）在“CSS规则定义义”对话话框中可可以对类类型、背背景、区区块、方方框、边边框、列列表、定定位及扩扩展共8项进行设设置。（4）创建好好的CSS样式可以以再进行行修改和和完善。2.2.7任务七：使用行行为增添添网页特特效Dreamweaver提供了一一种称为为“行为为”（Behavior）的机制制，用来来帮助用用户建构构页面中中的交互互行为。行为，顾顾名思义义，就是是在网页页中进行行的一系系列动作作，通过过这些动

14、动作可以以实现用用户与页页面的交交互。一个行为为一般由由动作和和事件组组成，动动作是用用来完成成特定任任务预先先编译好好的Javascript代码，例例如交换换图片、弹出式式菜单等等，而事事件则是是动作触触发的结结果。2.3开发流程程2.3.1页面设计计2.3开发流程程2.3.2开发过程程（1）首页制制作2.3开发流程程2.3.2开发过程程（2）导航栏栏制作2.3开发流程程2.3.2开发过程程（3）内页的的设计与与开发2.4拓展知识识2.4.1HTML的相关知知识1.文件结构构2.4拓展知识识2.4.1HTML的相关知知识1.文件结构构（1）HTML标签以标志（2）HTML标签通常常是成对对出

15、现的的，例如如文档的的主体。“/”就是打开开标签和和关闭标标签的区区别。个个别标签签是不需需要结束束标志的的，例如如换行。（3）HTML代码编写写时要有有层次感感，和标签包括括在里，在书书写时往往内推进进一个tab键，依次次类推。这样书书写的目目地是使使代码更更加清晰晰。（4）HTML不区分大大小写2.4拓展知识识2.4.1HTML的相关知知识1.HTML的其他标标签（1）HTML标题:Hheading（2）HTML段落：Paragraph.（3）HTML水平线：（4）HTML注释：（5）meta标签：（6）文字标标签：2.4拓展知识识2.4.2使用DIV元素1.插入DIV标签2.AP DIV

16、的插入2.4拓展知识识2.4.3模板与库库1.模板（1）直接创创建模板板（2）将网页页转存为为模板（3）从新建建文件中中创建模模板2.库模板用来来制作不不同网页页的相同同部分，库则是是面向网网页局部部相同部部分的。本章小结结Dreamweaver工作界面面部分要要求掌握握一些常常用的菜菜单、工工具以及及界面的的构成。站点建立立部分旨旨在要求求读者掌掌握管理理个人网网站的网网页、素素材等，为制作作网站服服务。网页文档档的基本本操作部部分主要要掌握新新建、保保存、打打开、关关闭网页页文档的的方法。在网页基基本元素素的插入入中，需需要重点点掌握如如何插入入布局，包括表表格布局局、框架架布局以以及CSS布局。对对于文本本、图像像以及其其他媒体体的插