实验 用DREAMWEAVER MX 制作个人网页.docVIP

实验 用Dreamweaver MX 制作个人网页 理解网站制作的过程会收集、制作网页素材Dreamweaver MX的基本功能。 掌握网站设计工具Dreamweaver MX的使用。 掌握简单网制作的步骤与方法。Dreamweaver MX的基础知识 Dreamweaver MX是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。Dreamweaver MX的一些基本知识。从桌面的快捷方式或者开始程序中启动Dreamweaver MX后进入下面的窗口。 图7.1 Dreamweaver MX的窗口 ① 菜单栏 ① 为菜单区，和其它的软件一样，该软件所有的操作命令都可以从这一个区内找到,举个例子，选中该区编辑(E)中的参数选择(S)... CTRL+U,如图这里，可以Dreamweaver MX设为自己喜欢的样式，一般使用默认就可以如图 图7.2 参数选项图 图7.3 字体项的默认值 ②、③ 插入栏 图7.1中，② 是插入项目选择工具(插入面板)，在 选中了某个项目， 中会出现相应的插入项目，下面详细介绍，选中常用这一项后下图： 图7.4 插入栏 锚点用于网页中的定位，如网页的上、中、下等；图像位符是用于动态交换图片的；Fireworks HTML为用Fireworks软件切割出来的图片；交换图像为鼠标移上去时变为另一图片，增强动感；表格数据可以将其它文件的数据转化为表格，插进网页；标签选择器可以插入其它不常用的HTML标签。 在 中选中布局一项，共有标准视图和布局视图两种视图，如图所示： 在标准视图下，可以插入表格和在网页制作区画图层。切换到布局视图下，如图： 在布局视图下，可以在网页制作区描绘布局视图下的表格和单元格，描绘好之后，再切换到标准视图后，可以转化为表格。这个可以用来排版网页。在 中选中文本一项，可以对文本进行格式化，如图： A可以对字体进行全面的格式；B可以将字体变为粗体；I为斜体；S为加强字体。 在 中选择表单，可以插入各种按钮，如图： A 为表单；B 为文本框；C 为隐藏域；D 为文本区域；E 为多选框；F 为单选框；G 为单选按钮组；H 为列表/菜单；I 为跳菜单；J 为图像域；K 为文本字段；L 为按钮；M 为标签；N 为字段集。 在 中选中模版可以使用模版制作网页或自己创建模版，做起网页更加方便快捷。 在 中选中字符可以插入一些特殊的字符，如：? ? ￡,其中BR为换行符（快捷键为CTRL＋ENTER）。 在 中选中媒体，可以插入FLASHLASH按扭FLASH文本Applet等插件。 在 中选中文本头，将出现下面的画面： “文档”窗口 显示您当前创建和编辑的文档。 图7.11 属性工具栏 　“面板组”“面板组”是分组在某个标题下面的相关面板的集合。若要展开一个面板组，请单击组名称左侧的展开箭头 2 个人网页的制作过程 为了更好地利用站点窗口对站点文件进行管理，也可以尽可能的减少一些错误的出现，如路径出错，链接出错（特别是新手），正式开始制作网页之前，最好先定义一个新站区，展开文件一项，选中站点，然后再选编辑站点如图， 图7.12 站点定义 图7.13 编辑站点 点击图7.13的“新建”，进入图7.14所示的对话框。在站点名称中输入您的站点名，注意：名字必须用字母表示。点击“在本地根文件夹”右侧的文件夹，选择预先设计好的文件夹，如：E:\gerenwangzhan，作为网站所有内容的存放地点如图7.14。 图7.14 新建站点 在图7.14中输入完成后，点击“确认”，即初步定义了您的个人网站。 （2）新建页面 在图12中点击“文件”-“新建”，得到图7.15的对话框。 图7.15 新建页面图 图7.16 页面编辑窗口 选中图7.15的“HTML”,点击“创建”，即可进入图16页面内容的编辑窗口。点击菜单栏中的“修改”-“页面属性”，在“标题”中输入您的网页的名字，如：wodewangye，见图7.17。点击“确定”即可进入编辑页面窗口如图7.18。 图7.17 页面属性窗口 图7.18 页面编辑窗口 （3）输入文字 在文档窗口可以直接输入文字,并且可以通过下面的属性窗口调整文字的属性，例如：大小，颜色，居中排列，字体等，如图7.19。 图7.19 页面的文字输入 图7.20 编辑字体列