使用 dreamweaver 制作个人网站

第2章 使用 Dreamweaver 制作个人网站,学习目标：1) 了解Dreamweaver的工作界面，掌握创建及管理一个站点的方法。2) 掌握网页文档的创建、保存、关闭等基本操作。3) 掌握插入普通文本、特殊文本、图像、表格等网页基本元素的方法，能创建文本、图像、锚点等超级链接。4) 理解CSS规则，能创建简单的CSS样式表。5) 了解常用的增添网页特效的行为、DIV的基础常识。,2.1 需求分析,个人网站的栏目因个人兴趣爱好所致各有不同，可根据主题需要，确定网站栏目和主色调。本实例需要实现的功能模块包括个人简介（用以介绍个人基本信息）、个人相册（用以呈现家庭、朋友及个人的温馨照片）、摄影作品（用以呈现个人感兴趣的摄影作品）、其他作品（包括网站作品、平面作品、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. 站点规划,2.2.2 任务二：站点的规划与创建,2. 站点创建,2.2.2 任务二：站点的规划与创建,2. 站点创建,2.2.2 任务二：站点的规划与创建,2. 站点创建,2.2.3任务三：网页文档的基本操作,1.新建个人网站网页文档,（1）在“页面类型”一栏的选项里，静态网页选择“HTML”，动态网页则选择相应的页面类型。（2）如果希望网页文档不包含任务CSS布局，选择“无”；否则，从“布局”列表中选择预设的CSS布局。（3）如果在“布局”列表中选择了一个布局，则在“布局CSS位置”中需要为其选择一个位置。（4）“首选参数”项可以设置文档的默认首选参数，例如文档类型、编码类型和文件扩展名等。,2.2.3任务三：网页文档的基本操作,2.保存网页文档3.打开网页文档4.关闭网页文档,2.2.4任务四：网页基本元素的插入,1.插入布局,（1）表格布局,表格既可以作为一种元素丰富网页内容也可以作为一种布局工具使网页的整体更加有条理,2.2.4任务四：网页基本元素的插入,1.插入布局,（2）框架布局,2.2.4任务四：网页基本元素的插入,1.插入布局,（2）框架布局 框架提供将一个浏览器划分成几个区域的方法，在每个区域里可以显示不同的页面，每个frame里的网页相互独立。框架集则定义了一组框架的布局、属性等。框架集本身不包含要在浏览器中显示的页面内容，它只是向浏览器提供如何显示一组框架以及在这些框架中应该显示哪些文档的信息。,2.2.4任务四：网页基本元素的插入,2.插入内容,（1）文本元素的插入与编辑1）普通文本可以直接在文档窗口中键入，也可以从其他应用程序或窗口中复制粘贴，例如Word，TXT文件等。2）Dreamweaver也提供了插入特殊文本的菜单，选择“插入/HTML/特殊字符”菜单命令，可以看到软件为用户提供的较为常见的多种特殊字符。3）在Dreamweaver里插入空格的做法是将输入法切换到中文输入状态，并将全角打开，此时用户只要在想要插入空格的地方敲击空格键，即可以实现空格的输入；在HTML代码中插入即可以实现空格。,2.2.4任务四：网页基本元素的插入,2.插入内容,（2）图像元素的插入用于网站制作的图像要求是gif，jpg，png，psd中的一种,2.2.4任务四：网页基本元素的插入,2.插入内容,（3）其他媒体的插入其他媒体包括音频、视频、动画等,选择“插入/媒体/SWF”菜单命令，或者在插入面板中选择“媒体/SWF”,2.2.5任务五：创建网页超级链接,1.文本超级链接,文本超级链接是运用最普遍的一种超级链接方式，这里的文本可以是字、词、短语、句子等。,2.2.5任务五：创建网页超级链接,2.图片超级链接,（1）单张图片的超级链接选中图像，在“属性”面板的“链接”文本框中输入要链接的目标，包括网页、图像、应用程序等（2）热区超级链接插入图片，并选中图片，用展开的属性面板上的绘图工具在画面上绘制热区,2.2.5任务五：创建网页超级链接,3.锚点超级链接,（1）将光标置于文档窗口想要设置锚点的地方；（2）选择“插入/命名锚记”菜单命令，或者在插入面板中单击“命名锚记”，并输入锚记名称，注意锚点区分大小写；（3）在文档窗口中，选择要建立超级链接的文本或图像，在属性面板中的链接文本框中，输入#和锚点名，例如#top。（4）保存预览或按F12预览并进行修改。,2.2.5任务五：创建网页超级链接,4.电子邮件超级链接,（1）将光标置于要显示电子邮件超级链接的地方，或者选定希望显示电子邮件超级链接的文本、图片等。（2）选择“插入/电子邮件超级链接”菜单命令，或者在插入面板中单击“电子邮件超级链接”。（3）在“文本”文本框中输入要显示超级链接的文本，如果事先已经选择了文本，该文本框会自动将文本显示出来，在“E-mail”文本框中输入邮箱地址，如，如图2-30所示。（4）单击确定并进行测试,2.2.5任务五：创建网页超级链接,5.脚本超级链接和空链接,（1）脚本超级链接 在属性面板的“链接”文本框中，键入Javascript：Javascript代码 例如：javascript:window.close(); （2）空链接 空链接是未指派的链接。空链接主要用于页面上的对象或文本附加行为。 例如，可向空链接附加一个行为，以便在滑过该链接时会交换图像或显示绝对定位的元素。,2.2.6任务六：使用CSS美化页面,CSS（Cascading Style Sheets）层叠样式表，是一种标记语言，它是一系列用来美化和布局网页的格式设置规则。“层叠”指对同一个元素或Web页面应用多个样式的能力。例如，创建一个CSS规则来应用字体颜色，创建另一个规则应用行距，然后将两者应用于一个页面的同一段文本。CSS涉及网页字体、颜色、边距、高度、宽度、图像显示方式、表格显示等等,2.2.6任务六：使用CSS美化页面,1.应用CSS的方法,（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样式”菜单命令，在屏幕右侧CSS样式面板的右上侧点击“新建”，或者在属性面板左侧找到“CSS”标签，点击编辑规则。 （2）输入CSS样式名称、标记或选择器。（3）在“CSS规则定义”对话框中可以对类型、背景、区块、方框、边框、列表、定位及扩展共8项进行设置。 （4）创建好的CSS样式可以再进行修改和完善。,2.2.7任务七：使用行为增添网页特效,Dreamweaver提供了一种称为“行为”（Behavior）的机制，用来帮助用户建构页面中的交互行为。行为，顾名思义，就是在网页中进行的一系列动作，通过这些动作可以实现用户与页面的交互。一个行为一般由动作和事件组成，动作是用来完成特定任务预先编译好的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.1 HTML的相关知识,1.文件结构,2.4 拓展知识,2.4.1 HTML的相关知识,1.文件结构（1）HTML标签以标志（2）HTML标签通常是成对出现的，例如文档的主体。“/”就是打开标签和关闭标签的区别。个别标签是不需要结束标志的，例如换行。（3）HTML代码编写时要有层次感，和标签包括在里，在书写时往内推进一个tab键，依次类推。这样书写的目地是使代码更加清晰。（4）HTML不区分大小写,2.4 拓展知识,2.4.1 HTML的相关知识,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的插入,2.4 拓展知识,2.4.3 模板与库,1.模板（1）直接创建模板（2）将网页转存为模板（3）从新建文件中创建模板2.库模板用来制作不同网页的相同部分，库则是面向网页局部相同部分的。,本章小结,Dreamweaver工作界面部分要求掌握一些常用的菜单、工具以及界面的构成。站点建立部分旨在要求读者掌握管理个人网站的网页、素材等，为制作网站服务。网页文档的基本操作部分主要掌握新建、保存、打开、关闭网页文档的方法。在网页基本元素的插入中，需要重点掌握如何插入布局，包括表格布局、框架布局以及CSS布局。对于文本、图像以及其他媒体的插入是网页制作