第3章 Dreamweaver基础.pptVIP

《电子商务网页设计》课件;本章学习目标：;本章主要内容：;电子商务网页设计;1.Dreamweaver CS5的界面; Dreamweaver CS5的工作环境由菜单栏、插入工具栏、文档窗口、属性面板和面板组等多部分组成，如图3-2所示。;4、“属性”面板：不同的网页元素，其属性也不相同。编辑网页时，选中的对象不同，“属性”面板中的内容也会随之发生变化，从而查看和设置所选对象的属性。 5、浮动面板：窗口右端包含了CSS样式、AP元素、文件、资源等一系列浮动面板，每个浮动面板又由多个功能面板组合而成，用户可以自行对其进行拆分和组合。单击还可以显示其设置对话框，其中文件面板是常用的功能面板之一，如图3-3。;2 .创建及设置本地站点;◇创建及设置本地站点; 创建本地站点的创建步骤如下： （1）启动Dreamweaver，选择“站点＞管理站点”命令，弹出“管理站点”对话框，选择“新建”按钮，打开“站点设置对象”对话框，如图3-5所示。;（5）单击右面区域中的“默认图像文件夹”文本框右边的 按钮，选择站点内图片的默认保存位置，如“D:\ncpshop\images\”。（6）勾选“启用缓存”复选框，可以提高链接的更新速度，默认为选中状态。（7）单击“确定”按钮，站点“ncpshop”创建成功，如图3-6右。选择“窗口＞文件”命令，打开“文件”面板，就能看到如图3-3所示的站点结构图。;电子商务网页设计; 1.网页文档的基本操作 ◇新建网页文档 在“文件”面板中，用鼠标选中相应文件夹（如ncpshop），单击鼠标右键，在弹出的菜单中选择“新建文件”，这时窗口中会新增加一个名为Untitled.html 的文件，此时可以直接为其重命名，或者在该文件名上单击右键，选择“编辑＞重命名”改名字，如index.html，就创建了第一个网页文件，但是扩展名必须为“.html”。要编辑这个文件，用鼠标双击它就行了。 ◇打开网页文档 在“文件”面板中双击文件名，或者在该文件名上单击右键，选择“打开”，就可以在文档窗口打开该文件，系统默认的视图方式是“设计视图”，接下来就可以在工作区对文档进行编辑了。 ◇保存网页文档 通过上述方式创建??网页已经被保存在了站点文件夹内，编辑后再次保存时，选择“文件＞保存”或按【Ctrl+S】组合键即可。 注意：在编辑网页时，如果文档窗口文件标签后有一个“*”，则表示当前文档没有保存，此时应当按下【Ctrl+S】键或者单击“文件＞保存”命令，对网页进行保存。 ◇关闭网页文档 完成对网页文档的编辑、保存后，可以通过“文件＞关闭”命令，或在文本窗口上的 关闭文档。;2.设置站点首页;3.制作网页的一般过程;电子商务网页设计;1.设置网页页面属性 ; 2.在网页中插入头部内容;◇基础设置 “基础”定义了网页文档的基本URL地址，在文档中，所有相对地址形式的URL都是相对于这个URL地址而言的。设置基础元素的具体操作步骤如下。 （1）执行“插入＞HTML＞文件头标签＞基础”命令，弹出“基础”对话框，如图3-9。 （2）在“基础”对话框中可以设置以下参数。 HREF：基础URL。单击文本框右侧的或在文本框中直接输人路径，或点击“浏览”按钮，在弹出的对话框中选择一个文件。 目标：在其下拉列表中选择打开链接的方式，这里共包括以下4个选项：其含义可参考3.4.2节内容。;3.网页文本的编辑;（4）插入日期 选择“插入记录＞日期”可以将系统的当前日期和时间插入到光标所在位置。 （5）插入文本列表 文本列表有两种，即无序列表和有序列表，也叫项目列表和编号列表。 插入列表的方法：首先要选定插入符号或编号的文本，单击“属性”面板的 或 按钮即可。注意：设置列表时，所有的列表对象必须是段落标记，即p/p。 若要修改项目符号和编号的样式，可以将光标定位在列表中，然后选择“属性”面板中的“列表项目”按钮，打开如图3-10所示的对话框进行修改。;◇文本的编辑 要对文本进行设置，应该先将文本选中，然后在“属性面板”中进行设置。文本属性面板，默认选中 ，如图3-11所示，是Dreamweaver的可视化设置文本的HTML标记的界面，其实质是生成HTML代码来修改文本属性的。;;制作步骤（1）启动Dreamweaver，“文件面板”默认站点为上次定义的站点。如果没有站点，须按照案例3-1的操作步骤新建站点。（2）在文件面板中，用鼠标选择站点文件夹ncpshop，单击右键，新建一个空白文档, 重命名为“techan.html”。（3）双击打开“techan.html”，在文档窗口