个人网站设计四

,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,个人网站首页制作,姚晓玲,工作任务,根据构思制作个人网站的首页, 知识准备,用Dreamweaver实现已学的HTML标签,一、创立及保存文档,1.新建两种方法,1“文件“新建菜单,2在站点列表中直接创立,2.翻开文档,1 “文件“翻开菜单,2直接在站点中双击,3.保存,1直接保存文件-保存,2另存,二、文本的输入,1.换行：按快捷键【Shift+回车】对应代码为“,2.分段：直接按快捷键【回车】对应代码为“ ,3.连续空格：汉字输入方法变全角,4.复制 粘贴,三、页面背景色或背景图像的设置,单击“页面属性按钮，在“外观选项卡中设置。演示,四、字体、字号的设置,标题标签： . #=1, 2, 3, 4, 5, 6,标签,五、插入图像,六、水平线,七、工程列表,八、链接,1.选择“文件“新建命令或按Ctrl+N键，在翻开的“新建文档对话框中选择要创立的文档类型后,单击“创立按钮即可 在Dreamweaver 中创立一个空白网页文档。,一、创立网页文档,2.在站点列表中直接创立,二、 翻开和保存网页文档,在使用Dreamweaver 8制作网页时，翻开和保存文档是最常用的操作命令,用户可以通过执行这些命令,实现不同文档之间的调用和网页效果的保存。,翻开现有文档,翻开最近使用的文档,保存文档,1.选择“文件|“翻开命令或按Ctrl+O键，在翻开的“翻开对话框中选择需要翻开的网页文件后，单击“翻开按钮即可翻开一个现有的网页文档。,2.在站点列表中直接双击翻开,3.保存,要保存制作好的网页,可以选择“文件|“保存命令，然后在翻开的“另存为 对话框中单击“保存按钮 即可。,实现了以下标签：,三、 设置页面外观属性,要修改 Dreamweaver中被翻开的网页文档页面外观属性,可以选择“修改|“页面属性命令，翻开“页面属性对话框进行设置。 或在属性面板中单击“页面属性按钮,例1 页面外观参数,如果要设置网页文档中文本对象的颜色,用户可以选择“修改|“页面属性命令，翻开“页面属性对话框，在“分类列表框中选择“外观和“链接选项，分别进行设置 。,网页背景图像设置：,如果要将某张图像设置为网页背景图像，可以 选择“修改|“页面属性命令，翻开“页面属性对话框，在“分类列表框中选择“外观选项，然后单击“背景图像文本框后的“浏览按钮，并在翻开的“选择图像源文件对话框中选择该图像文件,单击确定按钮即可。,背景图像和背景颜色,四、 输入文本,在Dreamweaver 中输入文本是非常简单的，其输入方式与其他文本处理软件中的文本输入方式十分类似。,添加文本,复制和粘贴文本,输入特殊字符,复制和粘贴,HTML,代码,插入日期,列表的输入,1.,在Dreamweaver 编辑界面中输入文本的方式，与在记事本或Word 中输入文本的方式相同，它的排列方式由左到右，遇到编辑窗口的边界时会自动换行,用户要在Dreamweaver 的网页文档中输入文本内容,只需要将光标插入要输入的工作区域中即可。,如果需要将现成的文本文件直接粘贴到网页上，可以选中需要粘贴的文本内容，并右击，在弹出的菜单中选择“复制命令，然后进入Dreamweaver 的网页编辑界面，选择“编辑|“粘贴命令即可,3. 换行：按快捷键【Shift+回车】对应代码为“,分段：直接按快捷键【回车】对应代码为“ ,连续空格：汉字输入方法变全角,4.要文档中插入例如版权符号、货币符号、注册商标号以及直线等特殊符号。可以选择“插入工具栏中的“文本选项卡，然后单击“字符按钮旁边的下拉箭头，在弹出的菜单中选择要插入的字符类型即可。,5. 要在文档中插入日期，可以选择“插入|“日期命令，或选择“插入栏中的“常用选项卡，切换到“常用插入栏，然后单击“日期按钮，翻开 “插入日期对话框即可进行设置。,6.创立工程列表和编号列表,列表可以使网页要显示的结构和内容更加清晰。在Dreamweaver中创立列表非常简单，直接选中文字或在文字前面定位，单击属性面板中的“工程列表或“编号列表按钮即可。但是注意一点：列表项都必须为段落文本格式，不是的话必须进行转换多数初学者容易在这里出错!,有序列表,无序列表,7.插入水平线,插入工具栏中选“HTML项 第一个按钮就是水平线,属性面板：, 例3 水平线设置,例2.列表,五、 设置文本格式,通过设置文本格式，可以使文本更加条理清楚、主次清楚。通常，在Dreamweaver中，用户可以使用文本的属性面板，完成文本格式的设置。,应用标准格式,设置文本字体,设置文本字号,设置文本颜色,设置文本对齐方式,标题标签,标签,1.如果要在网页中插入图像，可以选择“插入|“图像命令，或单击“插入栏“图像按钮在翻开的“选择图像文件对话框中选择适宜的图像文件后，单击“确认按钮即可。,六、图像的使用,2. 如果要在网页中插入图像占位符,可以选择“插入|“图像对象|“图像占位符命令，然后在翻开的“图像占位符对话框中完成所需的设置后，单击确定按钮即可。,七、 设置图像属性与编辑图像,在网页中插入图像后，用户需要设置图像属性和排列图像与文本之间的位置，以调整网页的整体效果。,设置图像属性,对齐图像,调整图像大小,使用内部图像编辑器,使用外部图像编辑器,1.要设置图像的属性，可在网页文档中选择一个图像，然后选择“窗口|“属性命令翻开图像属性面板 (如果没有看到下面所示的所有图像属性，单击右下角的扩展箭头)，接下来根据提示进行相关操作即可。,2.在网页中插入图像后，下面最重要的工作就是排列图像与文本之间的位置。要设置图像的格式，可以使用属性面板中的“对齐下拉列表框。,例4图像与文本混排,3.Dreamweaver 集成了Fireworks的根本图形编辑技术，可以不用借助外部图形编辑器，直接对图形进行修剪、重新取样、调整图像的亮度和比照度以及锐化图像等操作。,八、 创立鼠标经过图像,要在网页中插入鼠标指针经过图像，可以选择“插入|“图像对象|“鼠标经过图像命令，翻开“插入鼠标经过图像对话框 进行设置。,例5鼠标经过图像,要在网页中使用Flash动画，可以把光标插入到页面中需要使用Flash动画的位置，然后选择“插入栏中的“常用选项卡，切换到“常用插入栏，并单击“媒体按钮旁边的下拉箭头，在弹出的菜单中选择Flash命令，翻开 “选择文件对话框,最后在该对话框中指定插入的动画文件后，单击“确定按钮即可。,九、插入Flash动画,演示如何插入Flash,要在网页中插入Flash 文本对象，可以选择“插入|“媒体|“Flash文本命令，在翻开的“插入Flash文本对话框中成所需的设置后单击确定按钮即可.,如果要设置网页文档中某个Flash 对象的属性，可在网页文档中选中该Flash对象，然后选择“窗口|“属性命令，翻开Flash 对象属性面板即可 。,要在网页中插入Flash按钮对象，可以选择“插入|“媒体|“Flash按钮命令，在翻开的“插入Flash 按钮对话框完成所需的设置后，单击确定按钮即可。,要在网页中插入Flash视频，可以选择“插入|“媒体| Flash视频命令，在翻开的“插入Flash视频对话框中完成所需的设置后，单击确定按钮即可。,要在网页中插入FlashPaper，可以选择“插入|“媒体| FlashPaper命令，在翻开的Insert FlashPaper对话框中完成所需的设置后，单击确定按钮即可。,十、 插入其他媒体对象,在,Dreamweaver,的文档中，除了插入,Flash,影片、音频或视频对象外，还可以插入,Shockwave,影片、,Java Applets,、,ActiveX,控件。,插入,Shockwave,电影,插入,ActiveX,控件,插入,Java,程序,十一 创立链接,在Dreamweaver 中可以创立各种超链接。当在本地站点内移动或重命名文档或其他链接文件时，Dreamweaver 还可自动更新指向文档的链接。,创立链接的类型和方法,创立网页间超链接,创立网页内的超链接,创立E-Mail链接创,建虚链接及脚本链接,创立图形热点链接,在Dreamweaver 8 中，可以为对象、文本或图像创立超链接，链接到其他文档或文件。要在网页中创立超链接，首先选中要创立链接的对象 。然后在该对象的属性面板的“链接文本框里输入要链接对象的URL或路径即可.,文字链接,到外部网页,创立页内超链接是通过使用“命名锚记(用于标记位置的标识)来完成的，因此，“页内超链接又称为“命名锚记链接。通过对文档中指定位置的命名，允许利用链接翻开目标文档时直接跳转到相应的命名位置。,创立到命名锚记的链接的过程分为两步，第一步先参加一个命名锚记，用户可以将光标置于文本中需要创立超链接的位置，然后选择“插入|“命名锚记命令，或者选择“插入栏中的“常用选项卡，切换到常用插入栏，单击按钮，翻开“命名锚记对话框，在“锚记名称文本框中输入锚记的名称text_top，单击“确定按钮即可.,锚点链接举例,E-mail链接是一种特殊的链接，单击这种链接，将翻开一个空白通讯窗口。在E-mail通讯窗口中，允许用户创立电子邮件，并发送到指定的地址 。,创立E-mail链接方法同创立普通文本链接相似，可以在选择要创立E-mail链接的对象后(如文本、图像等)，然后在该对象“属性检查器的“链接文本框里输入mailto:和E-mail地址即可 。或者选择“插入栏中的“常用选项卡，切换到常用插入栏，然后单击“电子邮件链接按钮,在翻开的“电子邮件链接对话框中输入文本和E-mail地址后，单击“确定按钮完成E-mail链接的创立。,电子邮件链接举例,要创立图形热点链接，首先需要在文档窗口中选中插入的图像，然后使用图像属性检查器中的“地图名称文本框和“热点工具按钮在该图像中绘制热点区域 。最后,选中所创立的热点区域后,在热点的属性检查器的链接文本框中输入链接目标的URL或路径即可.,整张图片链接,图片热点链接,十二、 创立导航条,“导航条由一个或多个图像组成，其显示根据用户的动作而改变。因此，在使用导航条命令之前，应首先创立一个用于导航条的图像集。在该图像集中根据鼠标的动作，“导航条中的图像通常有一般 、滑过 、按下 和按下时鼠标经过 4种状态。,插入导航条,编辑导航条,导航条举例,要在网页中插入导航条，可以选择“插入|“图像对象|“导航条命令，在翻开的“插入导航条对话框中完成所需的设置后,单击确定按钮即可 。,在文档创立导航条后，选择“修改|“导航条命令，可以在翻开的“修改导航条对话框中向导航条添加图像，或从导航条中删除图像。此命令可用于更改图像或图像组、更改单击工程时所翻开的文件、选择在不同的窗口或框架中翻开文件以及重新排序图像 。,大小图转换,