(第三章dreamweaver网页制作.ppt

1、网页制作，第3章Dreamweaver网页制作基础，3.1 Dreamweaver网页制作基础，3.1.2 Dreamweaver网页制作基础，3.1.2生产过程操作演示，3.1.3工程技术要点文件操作快捷菜单，3.3 Dreamweaver网页制作基础，生产过程详细描述1。创建新网站。单击“管理站点”打开“管理站点”对话框，单击“新建”弹出未命名站点1的站点定义对话框，在要命名站点的文本框中输入站点名称，单击“下一步”选择“否，我不想使用服务器技术”，单击“下一步”弹出对话框并询问站点的存储路径。选择在我的计算机上编辑本地副本，并在完成后将其上传到服务器。在计算机上存储文件的文本框中输入网站

2、文件的存储路径，然后单击“下一步”。第三章Dreamweaver网页制作基础，制作过程的详细说明，弹出对话框询问如何连接到服务器，使用本地/网络选项。您计划将文件存储在服务器的哪个文件夹中？还可以在的文本框中选择网站文件存储路径。单击“下一步”弹出对话框，选择“否”，不启用签入和签出，然后单击“下一步”。弹出一个对话框，显示所有先前的设置信息。单击“完成”返回到“管理站点”窗口，您将在窗口中看到新创建的站点的名称。单击“完成”。2.在网站下创建一个新文件夹。第三章：Dreamweaver网页制作基础。3.用表格列一张物品清单。3.2.1最终效果。第三章Dreamweaver网页制作基础，详细说

3、明制作过程1。创建一个新的table.html文件并打开文件2。设置界面工具栏，将界面工具栏转换为标签模式3。插入新表格并设置表格参数如下：行数：6，列数：3，边框粗细：0，单元格边距：0，单元格间距：0，页眉：无。4.设置表格辅助信息比例。5.设置表格基本属性。将表格设置为三列，列宽分别为60，420，120。设置表格背景颜色(#666666)、间距(1)、对齐(中心对齐)、设置单元格背景颜色(#FFFFFF)。第三章Dreamweaver网页制作基础。生产过程的详细说明。美化表格单元格的背景色将表格第一行中合并单元格行的“背景色”设置为#F2EBDD，将背景色设置为#E2D3B4，设置每个

4、单元格中的文本对齐方式，第一行：居中对齐，第一列，第二列，第三行，第二行，第六行，居中对齐，左对齐，居中对齐，7。输入表格文本，第3章Dreamweaver网页制作基础，制作过程详细说明8。设置页面属性表格字体设置9点(点)页边距设置0 9。单元格微调第一列行高为20。微调第一条线的线高是2010。再次调整表格，将表格宽度修改为90英寸。设置表格(将表格宽度转换为像素)11。保存文件。第三章Dreamweaver网页制作基础，第三章Dreamweaver网页制作基础，表格参数的几种解释：表格宽度：实际总宽度占页面像素的百分比，第三章Dreamweaver网页制作基础，单元格边距(像素):表格中

5、每个单元格边缘之间的距离。第3章Dreamweaver网页制作基础，单元格间距(像素):表格中单元格之间的间距。第3章Dreamweaver网页制作基础，辅助功能：用于创建一个带有标题的特殊表格。(辅助功能中的标题设置为“表1”)，第3章Dreamweaver网页制作基础，基础培训：制作课程表(ex-table.html):第3章Dreamweaver网页制作基础，课程参数：1)表：80%宽，第6行，第7列，边框厚度1像素，单元格边距0，单元格间距0，边框颜色#000000，居中对齐，标题为课程2)第一行：背景颜色#CCCCCC，高度30，居中对齐，字体12pt 3)第一行中的26行居中对齐4

6、)第三列，第七列，宽度200，高度40，居中对齐，第3章Dreamweaver网页制作基础，表格标记表格标记对于制作网页非常重要。 如今，许多网页使用多个表格。使用表格可以实现多种布局方式，可以保证浏览器改变页面字体大小时页面布局不变，也可以任意设置背景和前景颜色。1.标签对用于创建表格。其属性包括：设置表格的背景颜色，第3章Dreamweaver网页制作基础，设置边框宽度，默认值为0设置边框颜色设置单元格边距设置单元格间距设置表格宽度，单位为像素或百分比。第三章：Dreamweaver网页制作基础；2.标记对用于在表中创建行。注意：标记对只能在标记对之间使用，但是在标记对之间添加文本是没有用

7、的，因为只有紧接在它们之间的标记对才是有效的语法。标签对用于创建一行中的每个网格。注意：该标签对仅在放置在标签对之间时有效，并且要输入的文本仅在放置在标签对之间时有效(即，它可以被显示)。第3章Dreamweaver网页制作基础，3.3制作简单的电子相册3.3.1最终效果，第3章Dreamweaver网页制作基础，制作过程的详细说明1。创建一个新的photo.html文件并打开文件2。插入一个新表，并将表参数设置为：6行和：3列。宽度：670像素，边框厚度：1像素，单元格边距：0，单元格间距：0，页眉：无3。将表格第1列第1、3和5行的“单元格高度”调整为125像素。将第2、4和6行单元格的背

8、景颜色设置为#F2EBDD。将表格中每一列的宽度调整到221。第三章Dreamweaver网页制作基础，详细讲解制作过程4。插入图片，执行菜单栏“插入记录”和“图像”，将任意图片插入第一个单元格，并将弹出的图像标签可访问性属性对话框中的替换文本设置为图片1。将图片高度设置为125，宽度设置为150。(调整图片大小还有其他方法：按住shift键，拖动图片右下角的小方块，实现图片的缩放，将图片调整到合适的大小，松开鼠标左键。)5 .调整图片单元格属性，并将所有单元格图片设置为“居中对齐”。第三章Dreamweaver网页制作基础，详细讲解制作过程。输入图片描述文本在第2、4和6行输入文本描述单击属

9、性面板中的“页面属性”按钮，进入“页面属性”对话框，将页面字体大小设置为9磅，将顶部、底部、左侧和右侧边距设置为0，然后选择第2、4和6行中的文本描述单元格，将描述文本单元格设置为居中和对齐。7.文件保存，第3章Dreamweaver网页制作基础，3.3.3制作要点(1)在此示例中，所有图片都是jpg格式，并且所有图片都保存在此网站文件夹下的images子文件夹中。注：向网站添加其他类型的文件时，首先要创建相应的文件夹，这样可以有一个清晰的网站目录，更方便组织和使用资料。，第3章Dreamweaver网页制作基础，(2)关于插入图像时弹出的“图像标签可访问性属性”对话框，第3章Dreamwea

10、ver网页制作基础，(3)关于图片的“属性”面板，第3章Dreamweaver网页制作基础，基础培训：制作图文并茂的网页(例如照片. html):第3章Dreamweaver网页制作基础，制作过程的详细说明1。创建一个新的ex-photo.html文件并打开文件2。在“属性”面板中设置页面属性，点击“页面属性”按钮，弹出页面属性对话框，将上下左右边距分别设置为5像素。3.插入表格，点击“插入记录”菜单中的“表格”二级菜单，弹出表格对话框。设置参数如下：2行，1列，670像素的表格宽度，1像素的边框厚度，0单元格边距和0单元格间距。单击“确定”。第三章Dreamweaver网页制作基础，详细讲解

11、制作过程4。设置表格属性。在表格中单击鼠标右键，并从快捷菜单中选择5。插入图片，将光标放在表格的第一行单元格中，选择“插入记录”菜单下的“图像”菜单，弹出“选择图像源文件”对话框，选择要插入的图像，单击“确定”和“图像标签可访问性属性”对话框，设置图像的替换文本“确定”，将图像宽度设置为668，高度设置为70。第三章Dreamweaver网页制作基础，制作过程的详细说明将光标放在表格的第二行单元格中，点击属性面板中背景框右侧的单元格背景网址按钮，弹出“选择图像源文件”对话框，选择要插入的图像backgroundwall.jpg，点击“确定”。设置标题文本参数：字体为新宋体，大小为18pt，粗体

12、文本字体为宋体，大小为14pt。第三章Dreamweaver网页制作基础，制作过程详细。7.插入图片，将光标放在表格的第二行单元格，选择“插入记录”菜单下的“图像”菜单，弹出“选择图像源文件”对话框。选择要插入的图片的imageskexuejy6.jpg，点击确定，弹出图像标签的可访问性属性对话框，设置图片的替换文本为确定。在“属性”面板中，设置图片参数如下：宽度为150，高度为200，对齐方式为右对齐。8.保存文件，第3章Dreamweaver网页制作基础，第3.4章使用文本和图片链接制作示例索引页3.4.1最终效果(链接. html)，第3章Dreamweaver网页制作基础，制作过程的详

13、细说明1。创建一个新的link.html文件并打开文件2。插入表格，然后单击“插入”菜单。选择“表格”子菜单，弹出“表格”对话框，设置表格的行数和列数为6，宽度为600，边框厚度为1像素，边距和间距为0。单击“确定”。3.选择所有单元格，在“属性”面板中将行高设置为20，并输入所有字符。4.选择所有单元格，并将布局模式设置为“居中对齐”。第一行的背景色是#333333，第二行的背景色是#A1A1A1。5.选择table.html字符，单击属性面板中链接文本框右侧的浏览图标，弹出选择文件对话框，您可以在其中选择链接的目标文件，然后单击确定。第三章Dreamweaver网页制作基础，详细讲解制作过

14、程。重复步骤5，设置其他photo.html 7的超链接目标文件。插入图片并设置超链接单击“插入”菜单，从“图像”子菜单中选择图像，并在“属性”面板的“链接”列中设置图片的超链接目标地址，该列设置为：将图片的宽度设置为500，高度设置为150。，第3章Dreamweaver网页制作基础，3.5利用热区制作多链图片3.5.1最终效果，第3章Dreamweaver网页制作基础，制作过程的详细说明1。创建一个新的requ.html文件，并打开文件2。单击“属性”面板中的“页面属性”，弹出“页面属性”对话框，将背景颜色设置为黑色，然后单击“确定”3。在图片执行菜单栏中插入图像，插入图片，并调整图片的中

15、心对齐。4.选择图片，下面“属性”面板的左下角有三个按钮，它们是“热点”工具。5.选择矩形热点工具，在图片中画出北京的热点区域，在“属性”面板的替换框中输入“北京”的提示文本。第三章Dreamweaver网页制作基础，详细讲解制作过程。用同样的方法画出天津、重庆和上海的热点，并设置它们的交替字符。7.选择多边形热点工具，在图中成都的红色部分画一个热点，并在“属性”面板的替换框中输入提示文本“成都”。第3章Dreamweaver网页制作基础，3.6利用锚点制作网页书签3.6.1最终效果，第3章Dreamweaver网页制作基础，制作过程的收尾1。插入水平线方法，将光标移动到要插入水平线的位置；单

16、击超文本标记语言选项卡中的水平线按钮，在网页中直接插入一条水平线来分隔段落。2.在网页文本中插入空格的方法：在中文全角状态下连续按空格键，连续输入空格。3.在网页文本中插入锚点的方法将光标移动到需要插入锚点的位置；从菜单中选择“插入命名锚点”，或在“插入”工具栏的“常用”选项卡中单击。弹出命名锚点对话框，设置锚点名称(例如：1)；在第三章Dreamweaver网页制作基础中，在制作过程中选择要链接的文本，并在“属性”面板的“链接”列中输入#1(其中#代表空链接，其功能是将任何可以设置为超链接的元素设置为此页面的链接。4.显示锚点设置方法可视化助手不可见元素5。设置各种段落格式，选择要设置的段落

17、文本；属性检查器中设置的格式是段落；在属性检查器中单击“文本缩进”按钮，整个段落将相应地缩进。相反，要取消段落缩进，请单击属性检查器中的文本突出按钮取消段落缩进。第三章是Dreamweaver网页制作的基础，制作过程是收尾。6.插入特殊字符将光标移动到要插入特殊字符的位置；单击文本选项卡中字符按钮右侧的下拉按钮，在打开的下拉菜单中选择所需的字符；如果下拉菜单中没有需要的字符，可以点击菜单中的【其他字符】命令，弹出【插入其他字符】对话框，点击需要的特殊字符，最后点击【确定】。第三章Dreamweaver网页制作基础，第三章Dreamweaver网页制作基础，第三章Dreamweaver网页制作基础，制作过程的收尾1。插入变换图片对象“插入”、“图像对象”和“鼠标经过图像”弹出“插入鼠标经过图像”对话框，设置原始图像，鼠标经过图像点击