教学讲义-课程学习网.doc

《静态网页制作》教学讲义 PAGE 26 项目二 制作个人作品集网站 任务三 制作个人简历页 一、Dreamweaver CS6使用基础 Adobe Dreamweaver，简称“DW”，中文名称梦想编织者，是美国Macromedia公司(2005年被Adobe公司收购)开发的集网页制作和管理网站于一身的所见即所得网页编辑器，DW是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。其最新版本是Adobe Dreamweaver CS6 。 Adobe Dreamweaver CS6比Adobe Dreamweaver CS4和Adobe Dreamweaver CS5支持更多行业标准，如 HTML5 和 CSS3，另外还针对热门平板电脑和智能手机特别设计，通过 jQuery 移动、PhoneGap、多屏幕预览面板、自适应网格版面、CSS3/HTML5 等快速建立移动应用程序。 利用Adobe Dreamweaver CS6的可视化编辑功能，用户可以轻松地完成设计、开发和维护网站的全过程。该软件不仅提供了直观的可视布局界面，而且具备强大的编码功能，成功地整合了所见即所得的编辑方式和动态网站开发功能，用户可以使用服务器语言如ASP、ASP.net、ColdFusion、PHP、JSP等生成支持动态数据库的Web应用程序，使用Ajax的Spry框架进行动态用户界面的可视化设计、开发和部署。 Dreamweaver CS6工作界面 启动Dreamweaver CS6 安装好Dreamweaver CS6，可以双击桌面上的快捷方式图标或从“开始”-“程序”列表中启动。 欢迎屏幕 在一系列的初始化过程之后，首先显示“默认编辑器”对话框，选择Dreamweaver CS6作为哪些网页语言的编辑器，只在安装完成后出现一次； 然后出现“欢迎屏幕”，如图所示，在“欢迎屏幕”中可以打开、新建所需项目； 要创建静态页面，所以选择“新建”列表中的“HTML”。 工作界面 Dreamweaver CS6的主工作区由菜单栏、文档工具栏、文档窗口、属性面板以及浮动面板组组成，整体布局紧凑、合理、高效。 菜单栏 菜单栏对整个环境下的所有窗口提供菜单控制。这些菜单允许用户方便地管理整个主窗口的布局，配置Dreamweaver环境，获得在线帮助等。 菜单栏包括【文件】、【编辑】、【查看】、【插入】、【修改】、【格式】、【命令】、【站点】、【窗口】和【帮助】10个菜单。 文档工具栏 ?文档工具栏中包含视图切换按钮，可以快速切换为“代码”视图、“设计”视图和同时显示“代码”和“设计”视图的拆分视图。 工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。 实时视图：Dreamweaver虽然是一个所见即所得的编辑软件，但有些效果跟浏览器中浏览的效果并不相同，要获得真实的浏览器查看效果，用户需要再浏览器中浏览网页，若预览效果需要修改，需要再返回到Dreamweaver中修改页面，这种频繁的切换会浪费很多时间。实时视图的作用是用户在不离开Dreamweaver工作区的情况下查看像在浏览器中的真实显示效果。激活实时视图后，页面不能进行编辑，并且能看到JavaScript代码给页面带来的变化；可以定位到任何应用了CSS样式名的元素上，准确找到相关代码。 标题：为文档输入一个标题，它将显示在浏览器的标题栏中。如果文档已经有了一个标题，则该标题将显示在该区域中。 浮动面板 工作界面的右侧排列着一些浮动面板，这些面板集中了网页编辑和站点管理过程中最常用的一些工具按钮。这些面板被集合到面板组中，每个面板组都可以展开或折叠或者关闭，并且可以通过拖动和其他面板停靠在一起，选定的面板显示为一个选项卡。 Dreamweaver的三个重要功能是网页设计、代码编写和应用程序开发，相应的面板也进行了这样的分类。 设计类面板组 设计类面板组包括“CSS样式”和“AP元素”两个面板。 “CSS样式”用于CSS样式的编辑和应用操作，利用面板右下角的功能按钮可以实现CSS样式的新建、编辑、删除、应用等操作； AP（absolute position绝对定位元素）是分配有绝对位置的 HTML 页面元素，具体地说，就是 div 标签或其它任何标签。AP 元素可以包含文本、图像或其它任何可放置到 HTML 文档正文中的内容。使用“AP元素”面板可以防止重叠、更改AP元素的可见性、嵌套或堆叠AP元素以及选择一个或多个AP元素。 应用程序类面板组 应用程序类面板包括“数据库”、“绑定”和“服务器行为”三个面板。 使用这些面板，可以进行数据库连接、读取