网页设计与制作第04章 DreamweaverCS5基础应用.pptx

网页设计与制作第04章 Dreamweaver CS5基础应用本章内容网页设计与制作Dreamweaver CS5入门Dreamweaver CS5站点管理制作简单网页4.1 Dreamweaver CS5入门网页设计与制作4.1.1 Dreamweaver CS5简介Adobe Dreamweaver CS5版本正式发布于2010年4月，是一款集网页制作和管理网站于一身的所见即所得网页编辑器，Dreamweaver CS5是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。由于同新的 Adobe CS Live 在线服务Adobe BrowserLab集成，用户能以可视方式或直接在代码中进行设计，使用内容管理系统开发页面并实现精确的浏览器兼容性测试。4.1 Dreamweaver CS5入门4.1.2 Dreamweaver CS5工作区1．启动Dreamweaver CS5安装好Dreamweaver CS5后，选择“开始”→“程序”→Adobe Dreamweaver CS5命令。经过一系列的初始化过程后，将出现图所示的起始页窗口。在起始页窗口中，用户可以选择“打开最近的项目”、“新建”或“主要功能”选项。如果要创建新的静态网页，选择“新建”项目中的“HTML”选项，将新建一个HTML文档。新建文档后将进入Dreamweaver CS5的工作界面。网页设计与制作4.1 Dreamweaver CS5入门网页设计与制作2．Dreamweaver CS5工作区Dreamweaver CS5的标准工作界面包括文档标题栏、应用程序栏、文档工具栏、标准工具栏、文档窗口、面板区等，如图所示。启梦网站主页走进启梦新闻聚焦招生报名学习中心在线学习学生服务常见问题登录注册4.2 Dreamweaver CS5站点管理本节将通过搭建“启梦教育”网站站点，向大家介绍如何创建网站站点、站点目录结构的创建和管理、目录文件的命名规则等。4.2.1 网站站点规划与创建1．规划站点结构根据前期规划，为“启梦教育”旅游网站安排了8个功能模块，网站结构如图所示。网页设计与制作2．创建本地站点（1）选择“站点”→“新建站点”命令，或者在工作区右侧的“文件”面板（中的“文件”选项卡下单击“管理站点”按钮，将会弹出“管理站点”对话框。单击“新建”按钮，选择弹出快捷菜单中的“站点”选项。网页设计与制作（2）选择新建站点后会弹出“站点设置”对话框，选择“站点”选项，在右侧窗口提示输入“站点名称”和“本地站点文件夹”，站点名称为qmeducation，本地站点文件夹选择E盘并新建文件夹qmedu，单击“保存”按钮后，本地站点创建完成。网页设计与制作3．创建站点目录结构（1）在“文件”面板中右击根目录，在弹出的快捷菜单中选择“新建文件”或“新建文件夹”选项。在根目录中建立文件index.html（首页文件）和文件夹images（存放图片文件）等。 （2）建好一级目录后还可以在各一级目录中建立二级目录，用于分类存放文件。在创建目录时为文件和文件夹命名需要遵守的命名规则如下：最好用英文或者汉语拼音缩写命名。文件多的时候可以与数字、符号组合使用，不能使用中文命名。最好使用小写字母，因为有些操作系统（如UNIX）对大小写敏感。文件和文件夹的名称可以使用下划线“_”，但是不能使用空格、特殊符号以及“~”、“！”、“@”、“#”、“$”、“%”、“^”、“”、“*”等符号，名字不要过长。网页设计与制作2.2.2 站点管理1．编辑站点2．删除站点3．复制站点4．导入和导出站点5．文件与文件夹的管理4.3 制作简单网页4.3.1 项目展示：图文并茂网页4.3.3 文本的插入与编辑文本是网页中不可缺少的重要元素，主要以以下三种格式呈现： （1）标题。标题1～标题6，标记为h1～h6，标题1的字号最大，标题6的字号最小，能自动换行，同时有加粗效果。网页中的“走进启梦”标题就是以标题格式来显示的。（2）段落。标记p，正文段落，在文字的开始和结尾处都会自动换行。（3）列表。为使文本结构更清晰，使用列表来排列文本，主要有两种形式的列表。有序列表。又称为编号列表，列表项目使用有序的数字、英文字母或罗马字符进行排列，其标记代码和显示效果如图4-21所示。无序列表。又称为项目列表，列表项目使用实心或空心圆点、正方形等进行排列，其标记代码和效果如图4-22所示4.3.3 文本的插入与编辑步骤1：打开“设计”视图，在空白文档的第一行输入“走进启梦”，选中文字并在属性面板中选择格式为“标题1”，如图所示。步骤2：为了使标题与正文分隔，插入“水平线”进行简单排版，水平线的标记为hr，是英文单词horizontal line