站设计与开发案例教程雷运发 第2章 使用 Dreamweaver 制作个人网站

《站设计与开发案例教程雷运发 第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简介菜单栏工具栏文档编辑区属性面板状态栏插入面板2.2.2任务二：站点的规划与创建1.站点规划2.2.2任务

3、二：站点的规划与创建2.站点创建2.2.2任务二：站点的规划与创建2.站点创建2.2.2任务二：站点的规划与创建2.站点创建2.2.3任务三：网页文档的基本操作1.新建个人网站网页文档（1）在“页面类型”一栏的选项里，静态网页选择“HTML”，动态网页则选择相应的页面类型。（2）如果希望网页文档不包含任务CSS布局，选择“无”；否则，从“布局”列表中选择预设的CSS布局。（3）如果在“布局”列表中选择了一个布局，则在“布局CSS位置”中需要为其选择一个位置。（4）“首选参数”项可以设置文档的默认首选参数，例如文档类型、编码类型和文件扩展名等。2.2.3任务三：网页

4、文档的基本操作2.保存网页文档3.打开网页文档4.关闭网页文档2.2.4任务四：网页基本元素的插入1.插入布局（1）表格布局表格既可以作为一种元素丰富网页内容也可以作为一种布局工具使网页的整体更加有条理2.2.4任务四：网页基本元素的插入1.插入布局（2）框架布局2.2.4任务四：网页基本元素的插入1.插入布局（2）框架布局框架提供将一个浏览器划分成几个区域的方法，在每个区域里可以显示不同的页面，每个frame里的网页相互独立。框架集则定义了一组框架的布局、属性等。框架集本身不包含要在浏览器中显示的页面内容，它只是向浏览器提供如何显示一组框架以及在这些框架中应该显

5、示哪些文档的信息。2.2.4任务四：网页基本元素的插入2.插入内容（1）文本元素的插入与编辑1）普通文本可以直接在文档窗口中键入，也可以从其他应用程序或窗口中复制粘贴，例如Word，TXT文件等。2）Dreamweaver也提供了插入特殊文本的菜单，选择“插入/HTML/特殊字符”菜单命令，可以看到软件为用户提供的较为常见的多种特殊字符。3）在Dreamweaver里插入空格的做法是将输入法切换到中文输入状态，并将全角打开，此时用户只要在想要插入空格的地方敲击空格键，即可以实现空格的输入；在HTML代码中插入 即可以实现空格。2.2.4任务四：网页基本元

6、素的插入2.插入内容（2）图像元素的插入用于网站制作的图像要求是gif，jpg，png，psd中的一种2.2.4任务四：网页基本元素的插入2.插入内容（3）其他媒体的插入其他媒体包括音频、视频、动画等选择“插入/媒体/SWF”菜单命令，或者在插入面板中选择“媒体/SWF”2.2.5任务五：创建网页超级链接1.文本超级链接文本超级链接是运用最普遍的一种超级链接方式，这里的文本可以是字、词、短语、句子等。2.2.5任务五：创建网页超级链接2.图片超级链接（1）单张图片的超级链接选中图像，在“属性”面板的“链接”文本框中输入要链接的目标，包括网页、图像、应用程序等（2）

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

8、图片等。（