第9讲_创建站点与网页讲义.ppt

* 图像属性设置 选择图片，在“属性”面板中设置属性 “宽”和“高”设置图像大小 “源文件” 显示图像文件的路径，重新输入路径可以更换图像 “链接”设置图像超链接 “替换”输入文本，当图像在浏览器中不能正常显示时，在图像位置显示文本 “垂直、水平边距”设定图像顶底部和左右侧的空白边距 “边框”设定图像边框，默认为无边框 “重设大小”图像大小恢复原始大小 * 示例5_插入图片 参考样张在表格中插入相应图片，图片居中对齐 上对齐 * 课堂练习 完成课堂示例1-5 设置main.html网页中图片pic1.jpg的替换文本“网上冲印服务”，并设置图片大小为“宽600，高240” 在“Mysite”站点中新建网页aa.html，效果如下，图片为SC1中的bg.gif 在“Mysite”站点中新建网页tk.html，并完成以下操作（效果见下张幻灯片） 网页内容见“sc1”文件夹中tk.doc 将“SC1”文件夹中的bg.gif设置为网页背景 设置网页标题为“用户须知” 设置正文标题“网上冲印店条款” 设置为“标题1”格式 设置第1段落首行缩进2个字符 将Mysite站点以“Mysite.ste”文件名导出，保存在Mysite站点文件夹内。 * 网页tk.html样张 * 网页main.html样张 管理本地站点 创建好本地站点后，选择“站点/管理站点”菜单命令，可以进行一些基本的编辑操作。 重新编辑本地站点，修改保存位置、名称 复制和删除创建的本地站点 导出站点 将站点导出到指定位置，导出的站点文件是一个XML文件，扩展名为“.ste”，以后可直接导入使用。 导入站点 将扩展名为“.ste” 的XML文件，导入使用。 * * 课后练习 实验指导 P187：实验28，范例(1)、(2)、(3) P192：实验29，范例(1)、(2)、(3) * 下周教学内容 创建框架网页 创建各种超链接 CSS样式 * Dreamweaver CS4 创建站点与网页 * * 教师信息 教师：柳青 电子信箱： Liuq@shift.edu.cn 办公室：信息楼B418 电话：* 教学内容 DreamweaverCS4简介 创建本地站点和站点中的文件夹 站点中存放文件 创建网页 创建表格和编辑表格 网页中添加文本 网页中添加图片 * DreamweaverCS4简介 Dreamweaver CS4是Adobe公司推出的网页制作软件，用于对网站、网页和Web应用程序进行设计、编码和开发。它广泛用于网页制作和网站管理。 Dreamewaver CS4新功能 增强了面向专业人士的基本工具和可视技术。 提供了功能强大、开放式且基于标准的开发模式 可以轻而易举地制作出跨平台和浏览器的动感效果网页。 DreamweaverCS4操作界面 Dreamweaver CS4的工作界面简洁、高效和易用，多数功能都能在工作界面中很方便地找到。 操作界面主要由菜单栏、工具栏、文档窗口(设计区)、属性面板、面板组和状态栏组成 菜单栏 文件、编辑、查看、插入、修改、格式、命令、站点、窗口和帮助 工具栏 插入工具栏、文档工具栏、应用程序工具栏 文档窗口 属性面板 面板组 * DreamweaverCS4操作界面 * 菜单栏 插入工具栏 文档编辑 状态栏 属性面板 面板组 DreamweaverCS4基本操作 打开“查看”菜单可以选择 “代码”视图、“拆分代码”视图、“设计”视图、“代码和设计”视图、“实时”视图 也可以通过文档工具栏进行切换。 “历史记录”的使用 选择“窗口/历史记录”菜单命令，打开“历史记录”面板 通过“历史记录”面板中滑块，回退历史操作 功能键 “F4”隐藏或打开面板 “F12”在浏览器中预览页面 * 本地站点 在Dreamweaver CS4中，“本地站点”是一个文件夹，用于存放网站的所有图像、多媒体、网页等文件，便于用户对站点进行发布、维护和管理。 在创建站点之前，可以先规划好站点，明确创建站点的方向并采用的方法，同时也是确定本地站点所要实现的功能。 * * 创建本地站点 创建本地站点可以使用向导创建也可以使用高级面板创建。 创建本地站点基本步骤： 选择“站点/新建站点”菜单命令 选择“高级”选项卡 设置“站点名称” 建立“本地根文件夹” 注意站点中文件夹或文件名用英文表示 * 管理本地站点文件 创建好本地站点后，可以根据需要创建各栏目文件夹和文件。 站点中新建文件夹 打开“文件” 面板，选择需要新建文件夹的位置，按右键，选择“新建文件夹”命令 站点中新建文件(创建网页) 打开“文件” 面板，选择需要新建文件的位置，按右键，选择“新建文件”命令 站点中添加文件 打开“文件” 面板，在文件