1 / 51

网页制作

网页制作. 欧阳红巍 happy_weni@126.com. 第二章 初识 Dreamweaver. 2.1 使用 Dreamweaver 创建和管理站点. 第二章 初识 Dreamweaver. 2.1 使用 Dreamweaver 创建和管理站点. 2.1.1 站点规划的规则 规划站点结构是设计站点的必要前提，其操作是将不同的文件分类存放在文件夹中以便于设计者管理。合理地组织站点结构，可提高工作效率，加快对站点的设计。. 第二章 初识 Dreamweaver. 2.1 使用 Dreamweaver 创建和管理站点.

yannis
Download Presentation

网页制作

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 网页制作 欧阳红巍 happy_weni@126.com

  2. 第二章 初识Dreamweaver 2.1 使用 Dreamweaver 创建和管理站点

  3. 第二章 初识Dreamweaver 2.1 使用 Dreamweaver 创建和管理站点 2.1.1 站点规划的规则 规划站点结构是设计站点的必要前提，其操作是将不同的文件分类存放在文件夹中以便于设计者管理。合理地组织站点结构，可提高工作效率，加快对站点的设计。

  4. 第二章 初识Dreamweaver 2.1 使用 Dreamweaver 创建和管理站点 2.1.1 站点规划的规则 1、文档分类保存 如果一个复杂站点，它有很多文件，我们必须分类保存使它更清晰。 2、合理的命名文件的名称 为了方便管理，文件和文件夹最好都有具体的含义。 3、本地站点和远程站点文件结构统一

  5. 第二章 初识Dreamweaver 2.1 使用 Dreamweaver 创建和管理站点 2.1.2 建立本地站点 在建立站点之前，首先在硬盘上建立一个新文件夹作为本地根文件夹，用来存放相关文档。 如：在F盘根目录下创建一个名为MyWeb的文件夹，在MyWeb文件夹里再创建一个名为images的文件夹，用来存放网站中的图像文件。

  6. 第二章 初识Dreamweaver 2.1 使用 Dreamweaver 创建和管理站点 初级新建站点方法： 1、“新建站点”——>定义“站点名字”为myweb、 “站点的网址”(没有网址可以不用输入)——>“下一步”； 2、服务器技术设置选择“否”——>“下一步”； 3、设置文件存储位置“F:\MyWeb”(注：站点名字和目录都是myweb，但两者的意义是不同的)——>“下一步”(如果myweb的文件夹还未创建，做完这一步，myweb的文件夹不会创建在F盘下)；(尽量让网站根目录文件夹名字和网站名字一致)； 4、设置“如何链接到服务器”为无——>“下一步”； 5、站点信息显示。(站点新建完毕后，会发现myweb文件夹自动创建了。)

  7. 第二章 初识Dreamweaver 2.1 使用 Dreamweaver 创建和管理站点 2.1.3 编辑本地站点 使用高级定义站点： 本地信息 ——设置站点名称、本地根文件夹、默认图像文件夹

  8. 第二章 初识Dreamweaver 2.1 使用 Dreamweaver 创建和管理站点 2.1.4 管理站点地图 1)定义主页 在使用站点地图查看站点时必须保证这个站点已定义了一个主页，因为主页是一个站点的根节点，必须有根节点才有各个支节点，也就是各个子页。

  9. 第二章 初识Dreamweaver 2.1 使用 Dreamweaver 创建和管理站点 2.1.4 管理站点地图 2) 查看地图 查看站点地图是在Dreamweaver 8的“文件”面板的“视图”下拉列表框中选择“地图视图”选项。

  10. 第二章 初识Dreamweaver 2.1 使用 Dreamweaver 创建和管理站点 2.1.5 导入和导出与复制删除站点 1)站点导入、导出 2)站点复制、删除 3)注意：不要删除站点源副本

  11. 第二章 初识Dreamweaver 2.2 文本排版

  12. 第二章 初识Dreamweaver 2.2 文本排版 • “旅行社购票卡领取办法”——宋体、24px、#666666 • “时间：2011-08-18”——宋体、12px，#666666 其中，2011-08-18采用菜单插入日期方式：【插入】——>【日期】 • 插入水平线——宽100%、高2、居中对齐、阴影。 • “为了方便各地旅游者到凤凰山风景名胜区观光游览，辽宁凤凰山风景名胜区管理局，就2006年旅游业务对各旅行社做出如下承诺：” ——首行缩进：全角状态输入空格键

  13. 第二章 初识Dreamweaver 2.2 文本排版 • 段落 “一、我局在省内通过各种形式宣传旅游信息，拓展客源。 …… 五、各旅行社旅游团在本景区所在地如发生问题，我局将尽力协助解决。” ——采用文本缩进

  14. 第二章 初识Dreamweaver 2.2 文本排版 • 嵌套列表的创建 (1)首先输入外层列表文字，且每输入一行文字后，采用回车键进行下一行文字输入(必须采用回车键，因为这样才能形成一个段落)。 老人及儿童 残疾人 军人及军人家属 各界立功人员 (2) 选定外层列表文字，点击【属性】面板中的【编号列表】按钮，并选择菜单【文本】——>【列表】——>【属性】，设置其起始数字为2。

  15. 第二章 初识Dreamweaver 2.2 文本排版 • 嵌套列表的创建 (3) 在第一个列表项后输入插入点，按[enter]键添加一个新列表项。当定位插入点到新列表项后，单击【文本缩进】按钮，将新列表项设置为嵌套的子项，依次输入子项的文字内容(每输入一行文字，仍采用回车键)。单击【属性】面板中的【项目列表】按钮，将该子项转换为无序列表项。

  16. 第二章 初识Dreamweaver 2.2 文本排版 ***列表的设置 DW8中有两种项目列表，一种是无序项目列 表，另一种是有序项目列表。它们的区别是有序列 表有先后顺序，无序列表则没有先后顺序。 ● 项目列表的创建方式： (1)选定需设置项目列表的文本段落。 (2)选择【文本】——>【列表】——>【项目列表】/【编号列表】； 或者单击【属性】面板中【项目列表】按钮/【编号列表】按钮。 (3)在最后一行连续按下两次回车键，列表符消失，完成列表。 ●项目列表的设置方式： 选择【文本】——>【列表】——>【属性】，

  17. 第二章 初识Dreamweaver 2.2 文本排版 • 导入表格数据 (1) 【插入】——>【表格对象】——>【导入表 格式数据…】 (2) 弹出‘导入表格式数据’对话框，【数据源 文件】文本框中输入数据源文件(price.txt)， 【定界符】文本框中点击下拉箭头，选择‘tab’ 点击“确定” (3)设置表格宽度为100%，表格内文字为居中对 齐，表格

  18. 第二章 初识Dreamweaver 2.3 图片插入

  19. 第二章 初识Dreamweaver 2.3 图片插入 • 丹顶鹤图片插入 设置单元格内容垂直对齐方式为“顶端”，水平对齐方式为“左对齐”； 插入图片dandinghe.jpg 方式一：【插入】——>【图像】——>打开【选择图像源文件】对话框，选定插入图片——>【确定】 方式二：【常用】面板上的【图像】按钮——>打开【选择图像源文件】对话框，选定插入图片——>【确定】

  20. 第二章 初识Dreamweaver 2.3 图片插入 • 输入文字 • 图片调整 选中图片，【属性】面板中设置图片对齐为“右对齐”，设置图片垂直边距为7px，水平边距为10px。 【属性】面板中的宽度和高度文本框内可以查看图像宽度及高度值，单击【恢复尺寸】按钮可以恢复图片原始宽度和高度。 • 设置文字颜色，文字段落首行缩进，文字大小12px。

  21. 第二章 初识Dreamweaver 2.3 图片插入 • 插入图片01.jpg 插入图片01.jpg，设置单元格内容居中对齐。 • 设置网页背景图片 选择菜单【修改】——>【页面属性】或【属性】面板中点击【页面属性】按钮——>进入【页面属性】对话框——>在【外观】类中设置背景图片bg.jpg——>【确定】。

  22. 第二章 初识Dreamweaver 2.4 插入鼠标经过图像网页

  23. 第二章 初识Dreamweaver 2.4 插入鼠标经过图像网页 • 插入变换图片对象 ①“插入”“图像对象”“鼠标经过图像” ② 弹出‘插入鼠标经过图像’对话框，在其中设置原始图像、鼠标经过图像 ③ 点击“确定”。 • “原始图像”表示鼠标没有放在图像上方时显示的图像文件； “鼠标经过图像”表示鼠标放在图像上方时显示的图像文件。

  24. 第二章 初识Dreamweaver 2.5 设置超链接

  25. 第二章 初识Dreamweaver 2.5 设置超链接 • 设置图片超链接 选定图像【属性】面板 设置【链接】栏中的网页文件名，设置【目标】。 • 设置文本超链接 选定文本【属性】面板 设置【链接】栏中的网页文件名，设置【目标】。 • 设置邮件地址超链接 选定文本【属性】面板 设置【链接】栏中的邮件地址。

  26. 第二章 初识Dreamweaver 2.6 表单

  27. 第二章 初识Dreamweaver 2.6 表单 • 插入表单 【插入】【表单】【表单】；或者【插 入】工具栏的【表单】选项卡中的【表单】。 • 插入表格 【插入】【表格】；或者【插入】工具栏 的【常用】选项卡中的【表格】，弹出【表格】对 话框，设置表格为：7行2列，宽度为100%，边框粗 细为1、单元格边距和间距均为0。 • 设置表格 设置每行行高为25，第一列的列宽为114，最后 一行合并单元格。 输入第一列文字，设置文字大小为9pt。

  28. 第二章 初识Dreamweaver 2.6 表单 • 插入表单控件 (1) 插入姓名输入框控件，设置名称为XM，字符宽度为8，最多字符数为4，类型为单行。 (2) 插入年龄列表/菜单，设置名称为Age，类型为菜单，设置列表值为：15~20(01)、20~30(02)、30以上(03)。 (3) 插入邮件输入框控件，设置名称为Mail，字符宽度为15，最多字符数为15，类型为单行。 (4) 插入单选按钮组，在【单选按钮组】对话框中输入名称为RD；单选按钮分别是：1500元以下(01)、1500~2500元(02)、2500~5000元(03)、5000元以上(04)；布局使用换行符。设置按钮文字大小为9pt。

  29. 第二章 初识Dreamweaver 2.6 表单 • 插入表单控件 (5) 插入多选按钮，设置其名称、选定值、初始 状态。输入文字“雅诗兰黛、贝佳斯、美宝莲、玉 兰油、欧莱雅”，设置文字大小为9pt。 (6) 插入建议文本域控件，设置字符宽度为50， 行数为8，换行为默认，类型为多行，初始值为 “请输入您的意见和建议！” (7) 插入提交按钮和重置按钮。

  30. 第二章 初识Dreamweaver 2.7 热点

  31. 第二章 初识Dreamweaver 2.7 热点 • 绘制热点 【属性】面板中选择【矩形】热点工具在图 像上绘制矩形热点区域。 选择【指针热点工具】按钮，微调热点区域。 • 设置热点超链接 选定热点区域【属性】面板中设置【链 接】网页文件名，设置【目标】。

  32. 第二章 初识Dreamweaver 2.8 使用锚点制作网页书签

  33. 第二章 初识Dreamweaver 2.8 使用锚点制作网页书签 • 网页文本中插入锚点方法 ① 将光标移到要需要插入锚点的位置； ② 选择菜单【插入】—>【命名锚点】或单击 【插入】工具栏中【常用】标签栏中的【命名锚 记】； ③ 弹出【命名锚点】对话框，在其中设置锚点 名称(如：1)； ④ 选中需创建链接文字，在“属性”面板的 “链接”栏中输入‘#1’(其中，#代表空链接，其 作用是将任意可设置为超链接的元素设置为指向本 页的链接。)

  34. 第二章 初识Dreamweaver 2.8 使用锚点制作网页书签 • 锚点显示/隐藏的设置方法 【查看】【可视化助理】【不可见元素】 • 插入特殊字符 ① 将光标移到要插入特殊字符的位置； ② 单击【文本】选项卡中的【字符】按钮 右侧的下拉按钮，在打开的下拉菜单中，选中需要 的字符即可； ③ 如果该下拉菜单中没有需要的字符，可以 单击该菜单中的【其他字符】命令，将弹出【插入 其他字符】对话框，单击需要的特殊字符，最后单 击【确定】即可。

  35. 第二章 初识Dreamweaver 2.9 表格

  36. 第二章 初识Dreamweaver 2.9 表格 • 插入表格 【插入】【表格】；或者【插入】工具栏 的【常用】选项卡中的【表格】，弹出【表格】对 话框，设置表格为：6行3列，宽度为100%，边框粗 细为1、单元格边距和间距均为0，标题为“公司业 绩”。 • 设置表格 选定表格，【属性】面板中设置“高”为136px， 边框颜色为#996633。 设置文字“公司业绩”大小为12pt，颜色为白色 设置第1行~第5行行高为22；第6行行高为24，并 合并单元格。

  37. 第二章 初识Dreamweaver 2.9 表格 • 设置表格 设置第1列和第3列的列宽为30%，第2列的列宽为 40%。 在表格中输入文字，设置文字大小为11px，文字 颜色为白色，文字居中对齐。 • 输入表格下方文字，设置文字大小为10pt，颜色

  38. 第二章 初识Dreamweaver 2.9 表格 ***表格*** 对于表格各部分的颜色设置的优先级：范围越小的 部分其颜色设置的优先级越高。 (单元格>行/列>表格) ***表格的快捷操作*** • Ctrl+M 能添加一行 • Ctrl+Shift+A 能添加一列 • Delete 删除行或列

  39. 第二章 初识Dreamweaver 设置表格行与列 定义表格宽度 设置表格边框宽度 单元格边框和单元格内容相隔的距离 相邻单元格之间相隔的距离 设置表格的页眉 设置表格的标题相对于表格的显示位置 设置表格的标题 表格的说明 2.9 表格 ***表格参数的几点说明***

  40. 第二章 初识Dreamweaver 边距为0 边距为10 2.9 表格 ***表格参数的几点说明*** 　① 表格宽度： 实际总宽度 像素 页面中的百分比 % 　② 单元格边距(像素)： 表格中各单元格边与边之间的距离。

  41. 第二章 初识Dreamweaver 间距为0 间距为10 2.9 表格 ***表格参数的几点说明*** ③ 单元格间距(像素)： 表格中各单元格之间的间距。

  42. 第二章 初识Dreamweaver 2.10 表格布局

  43. 第二章 初识Dreamweaver 2.10 表格布局 • 插入表格 插入表格：3行1列，宽度776px，边框、边距和间 距均为0。 • 设置表格 第一行高度设为101px，合并单元格 第二行高度设为350px. 第三行高度设为50px，合并单元格 第二行第一个单元格宽度设为200px，在其中插入 表格：8行2列，宽度200px，高度100%。1~7行行高为 30，第1行设置背景颜色#0099CC，第2行~第7行分别 输入文字并插入图片。 第二行第二个单元格中插入图片，图片右对齐， 输入文字。

  44. 第二章 初识Dreamweaver 2.10 表格布局—作业

  45. 第二章 初识Dreamweaver 2.10 表格布局—作业 • 插入顶部导航条表格 插入表格：1行3列，宽度607px，边框、边距和间 距均为0。表格高度20 在第一个单元格中插入背景图片tu1.gif • 插入信息表格 插入表格：11行6列，宽度607px，边框、边距和 间距均为0。表格高度20 最后一行合并单元格

  46. 第二章 初识Dreamweaver 2.11 框架

  47. 第二章 初识Dreamweaver 2.12 内嵌框架

  48. 第二章 初识Dreamweaver 2.12 内嵌框架 • 插入内嵌框架 在需插入内嵌框架的单元格中输入如下代码： <iframe name="in" src="cgal.html" width="519" height="520" scrolling="Yes“ frameborder="0"> </iframe> • 设置链接 选定左侧文字“单元房”，【属性】面板中设置 【链接】栏为dyf.html，【目标】为in。 (同理对其他导航链接做设置) • 设置页面超链接属性

  49. 第二章 初识Dreamweaver 2.13 插入Flash动画

  50. 第二章 初识Dreamweaver 2.13 插入Flash动画 • 插入图片 • 编辑图像 • 插入Flash动画 【插入】【媒体】  【flash】

More Related