第9讲_创建站点与网页

1、1创建站点与网页创建站点与网页2 2q教师：柳青 q电子信箱： Lq办公室：信息楼B418q电话： 677038523qDreamweaverCS4简介q创建本地站点和站点中的文件夹q站点中存放文件q创建网页q创建表格和编辑表格q网页中添加文本q网页中添加图片4qDreamweaver CS4是Adobe公司推出的网页制作软件，用于对网站、网页和Web应用程序进行设计、编码和开发。它广泛用于网页制作和网站管理。qDreamewaver CS4新功能q增强了面向专业人士的基本工具和可视技术。q提供了功能强大、开放式且基于标准的开发模式q可以轻而易举地制作出跨平台和浏览器的动感效果网页。qDrea

2、mweaver CS4的工作界面简洁、高效和易用，多数功能都能在工作界面中很方便地找到。q操作界面主要由菜单栏、工具栏、文档窗口(设计区)、属性面板、面板组和状态栏组成q菜单栏q文件、编辑、查看、插入、修改、格式、命令、站点、窗口和帮助q工具栏q插入工具栏、文档工具栏、应用程序工具栏q文档窗口q属性面板q面板组56菜单栏插入工具栏文档编辑状态栏属性面板面板组q打开“查看”菜单可以选择q“代码”视图、“拆分代码”视图、“设计”视图、“代码和设计”视图、“实时”视图q也可以通过文档工具栏进行切换。q“历史记录”的使用q选择“窗口/历史记录”菜单命令，打开“历史记录”面板q通过“历史记录”面板中滑块

3、，回退历史操作q功能键q“F4”隐藏或打开面板q“F12”在浏览器中预览页面7q在Dreamweaver CS4中，“本地站点”是一个文件夹，用于存放网站的所有图像、多媒体、网页等文件，便于用户对站点进行发布、维护和管理。q在创建站点之前，可以先规划好站点，明确创建站点的方向并采用的方法，同时也是确定本地站点所要实现的功能。89q创建本地站点可以使用向导创建也可以使用高级面板创建。q创建本地站点基本步骤：q选择“站点/新建站点”菜单命令q选择“高级”选项卡q设置“站点名称”q建立“本地根文件夹”q注意站点中文件夹或文件名用英文表示10q创建好本地站点后，可以根据需要创建各栏目文件夹和文件。q站

4、点中新建文件夹q打开“文件” 面板，选择需要新建文件夹的位置，按右键，选择“新建文件夹”命令q站点中新建文件(创建网页)q打开“文件” 面板，选择需要新建文件的位置，按右键，选择“新建文件”命令q站点中添加文件q打开“文件” 面板，在文件列表中选择需要添加的文件，然后通过拷贝粘贴，添加到站点指定文件夹中。q站点中文件管理q选中站点中文件或文件夹，按鼠标右键，选择“编辑”菜单，可进行复制、剪切、粘贴、删除和重命名等操作qDreamweaver CS4提供了多种创建文档的方法，可以创建一个新的空白HTML文档，或使用模板创建新文档。q创建空白网页文档 q打开和保存网页文档1112q页面属性包括：q

5、外观设置：背景图像、背景颜色、文本格式、边距q链接：链接文本和颜色q标题和编码q选择“修改/页面属性”菜单命令，打开“页面属性”对话框设置13q创建站点和站点中文件夹q设置站点名称“Mysite”q建立本地根文件夹“C:TestMysite”q建立新文件夹“SC1”q素材导入到站点文件夹中q将“SC”文件夹中素材文件导入站点“SC1”文件夹中q注意复制文件时不能选“复制”命令，要用“拷贝”命令q创建网页q在站点中新建页main.htmlq设置网页标题为“网上冲印服务”q将“SC1”文件夹中的bg.gif设置为网页背景q表格是DreamweaverCS4中最常用的布局工具，表格在网页中不仅可以排

6、列数据，还可以对页面中的图像、文本、动画等元素进行准确的定位，使页面显得整齐有序、分类明确，便于浏览。1415q创建表格的方法：q选择“插入/表格”菜单命令q或者单击“插入”工具栏中“常用”模式中的“表格”按钮q打开“表格”对话框，设置表格参数q表格宽度： “百分比”单位表示表格占整个网页宽度的百分比； “像素”单位表示表格固定宽度q边框粗细： 表格的边框的宽度 0表示不显示边框q单元格边距： 表格的单元格中内容和边框之间的距离 q单元格间距： 单元格和单元格之间的距离 q嵌套表格就是在已经存在的表格中插入的表格。q插入嵌套表格的方法与插入表格的方法相同。1617q选择表格和单元格q选择表格：

7、点击单元格分隔线；或在表格中按右键，“表格/选择表格”q选择单元格：鼠标拖动q表格编辑q选择“修改/表格”菜单命令(或在表格中按右键，选择“表格”)，可以对表格进行编辑q插入行、列 在当前位置上插入行，当前位置前插入列 注意：如果选择“插入行或列”，可以选择插入行或列的位置q删除行、列q合并单元格q拆分单元格18q建立表格后，选择整个表格，可以通过“属性”面板修改表格属性q表格的结构q表格的修饰19q选择表格中的单元格，通过“属性”面板设置单元格属性q单元格内容格式q单元格结构q单元格修饰q在Dreamweaver CS4中表格背景设置需要通过修改代码来实现q表格背景设置步骤q先插入表格q切换

8、到代码视图，在表格代码中添加“bgcolor”、“background”参数q设置表格背景色qqq设置表格背景图片qq21q在网页main.html中插入一个5行2列的表格，表格宽度为800像素，边框粗细为0，背景色为白色，并居中对齐，合并第4行单元格，合并第5行单元格q在表格的第1行，第1列中再插入一个2行2列的表格，宽度为100%，边框粗细为0，并合并该表格的第1行(表格嵌套)22q添加文本q直接在文档窗口中输入文本q通过“复制/粘贴”，输入文本q注意在Dreamweaver中粘贴文本时，将忽略原文本的格式q文本输入后，可通过“属性”面板来完成文本格式设置q“属性”面板可以设置文本的格式、

9、字形、项目列表、文本缩进、文本超级链接q文本的字体、大小、颜色需要通过CSS样式来设置23q表格第4、5行中分别添加文本，文本在表格中居中对齐，文本内容见SC1文件夹中Txt.doc文件，添加 字符q将表格第4行单元格的背景颜色设置为#33990024q插入特殊字符q选择“插入工具栏”中“文本”选项卡，选择相应字符q在网页文档中常见的特殊符号有空格、版权符号、货币符号、注册商标号以及直线等。25q添加空格q(在Dreamweaver中是不能添加多余空格的)q按“Ctrl+Shift+SpaceBar”组合键可以添加空格q选择“插入工具栏”中“字符”选项卡，选择“不换行空格”，可以添加空格q选择

10、“编辑/首选参数”菜单命令，打开“首选参数”对话框，选择“常规”选项卡，选中“允许多个连续空格”复选框q文本换行q自动换行q使用“Enter”键强制换行q使用换行符(“Shift+Enter”换行不换段)q插入日期q选择“插入”面板中“常用”选项卡q选择“日期”，打开“插入日期”对话框q选择日期格式q插入水平线q选择“插入”面板中，选择“水平线”q同时在“属性”面板中对水平线的属性进行设置26q水平线颜色设置q选中水平线，按右键选择“编辑标签”，打开“标签编辑器”q选择“浏览器特定的”，设置颜色q注意：水平线的颜色只能在浏览器中才能看到27q网页文本中，一些类型相同或具有序列关系的文本可以通过

11、列表方式来显示q列表方式可以通过属性面板来设置q编号列表q项目列表q列表属性设置q选择“格式/列表/属性”菜单命令，打开“列表属性”对话框，设置列表属性29q在“main.html”网页表格的第4、5行之间插入2行，并插入水平线和日期 q水平线宽800像素、高5像素、颜色#339900q日期自动更新包括日期和时间，居中对齐q在表格第2行第1列中添加“用户留言”内容，文本内容见SC1文件夹中Txt.doc文件q为文本设置项目符号列表，项目符号为“正方形”30q插入图像q确定插入图像位置q选择“插入/图像”菜单命令，打开“选择图像源”对话框q选择要插入的图像q注意q如果插入的图像不是保存在本地站点

12、内，系统会提示将图像复制到本地站点内保存。否则，在其他计算机上或上传到远程服务器后就无法浏览网页。31q选择图片，在“属性”面板中设置属性q“宽”和“高”设置图像大小q“源文件” 显示图像文件的路径，重新输入路径可以更换图像q“链接”设置图像超链接q“替换”输入文本，当图像在浏览器中不能正常显示时，在图像位置显示文本q “垂直、水平边距”设定图像顶底部和左右侧的空白边距q“边框”设定图像边框，默认为无边框q“重设大小”图像大小恢复原始大小32q参考样张在表格中插入相应图片，图片居中对齐33q完成课堂示例1-5q设置main.html网页中图片pic1.jpg的替换文本“网上冲印服务”，并设置图片大小为“宽600，高240”q在“Mysite”站点中新建网页aa.html，效果如下，图片为SC1中的bg.gifq在“Mysite”站点中新建网页tk.html，并完成以下操作（效果见下张幻灯片）q网页内容见“sc1”文件夹中tk.docq将“SC1”文件夹中的bg.gif设置为网页背景q设置网页标题为“用户须知”q设置正文标题“网上冲印店条款” 设置为“标题1”格式q设置第1段落首行缩进2个字符q将Mysite站点以“Mysite.ste”文件名导出，保存在Mysite站点文件夹内。3435q创建好本地站点后，选择“站点/管理站点”菜单命令，可以进行一些