Dreamweaver中的文本格式设置与使用
- 格式:pptx
- 大小:790.11 KB
- 文档页数:57
Dreamweaver文本段落缩进的五种方法Dreamweaver是一款常用的网页制作软件,它具有很多强大的功能,其中包括文本段落缩进。
文本段落缩进是为了美观和规范,在写作文章时非常重要的一个环节。
下面我们介绍一下Dreamweaver文本段落缩进的五种方法。
1. 段落样式在Dreamweaver中,我们可以使用段落样式来设置段落的缩进。
首先,选择我们需要设置缩进的段落,在样式面板中选择“段落样式”选项。
然后,选择“新建样式”选项,并选择“段落”类型。
在弹出的对话框中,选择“对齐”选项卡并设置左缩进。
最后,点击“应用”按钮来应用该样式。
2. CSS样式在Dreamweaver中,我们也可以使用CSS样式来设置段落的缩进。
首先,在样式面板中选择“新建样式表”选项,并创建一个新的样式表。
点击样式面板中的“样式”选项卡,并选择“段落”类型。
在“属性”面板中,选择“文本属性”选项卡,并设置左缩进。
3. 使用标签在HTML中,我们可以使用标签来设置段落的缩进。
首先,选择我们需要设置缩进的段落,在代码视图中添加<blockquote>标签。
然后,在<blockquote>标签中添加缩进文本。
最后,在<blockquote>标签之后添加</blockquote>标签。
4. 嵌套标签在Dreamweaver中,我们也可以使用嵌套标签来设置段落的缩进。
首先,选择我们需要设置缩进的段落,在代码视图中添加<p>标签。
然后,在<p>标签中添加缩进文本。
最后,在<p>标签之后添加</p>标签,并将其嵌套在一个<div>标签中。
5. 制表符在Dreamweaver中,我们还可以使用制表符来设置段落的缩进。
首先,选择我们需要设置缩进的段落。
然后,在“属性”面板中,选择“文本属性”选项卡,并在左缩进栏中添加制表符。
最后,点击“应用”按钮来应用设置。
第二章Dreamweaver 8基础2.1 Dreamweaver 8概述2.1.1 Dreamweaver 8的新增功能Dreamweaver 8新增了许多功能,大大改善了软件的易用性,使用户无论处于设计环境还是编码环境都可以方便地制作页面。
新增的主要功能有:1.用户界面的改进2.多种样式呈现面板3.新的标准CSS面板4.与最新技术和标准集成5.缩放功能6.改进的WebDA V2.1.2 Dreamweaver 8的工作界面Dreamweaver 8的工作界面主要由以下几部分组成:标题栏、菜单栏、插入工具栏、文档工具栏、标准工具栏、文档窗口、状态栏、属性面板和多个浮动面板,如图2-1所示。
图2-1 Dreamweaver 8的工作界面2.2 站点的创建和管理2.2.1 创建站点2.2.2 管理站点1.站点的重新配置2.创建站点的文件夹3.创建网页文件4.为网页文件命名2.3 创建网页2.3.1 页面属性的设定1.设置“外观”页面属性选择“修改”|“页面属性”菜单项,弹出“页面属性”对话框,在“分类”选项区中选择“外观”选项,如图2-2所示。
图2-2 设置“外观”页面属性注:“左边距”和“右边距”设置只对IE浏览器有效,“上边距”和“下边距”设置只对Netscape Navigator 浏览器有效。
2.设置“链接”页面属性在“页面属性”对话框中的“分类”选项区中,选择“链接”选项,如图2-3所示。
图2-3设置“链接”页面属性3.设置“标题”页面属性在“页面属性”对话框中的“分类”选项区中,选择“标题”选项,如图2-4所示。
图2-4 设置“标题”页面属性4.设置“标题/编码”页面属性在“页面属性”对话框中的“分类”选项区中,选择“标题/编码”选项,如图2-5所示。
图2-5 设置“标题/编码”页面属性5.设置“跟踪图像”页面属性在“页面属性”对话框中的“分类”选项区中,选择“跟踪图像”选项,如图2-6所示。
Dreamweaver教程:添加文本和设置文本格式
1.在字符之间添加空格
要插入连续空格,在“插入”栏中,选择“字符”,然后单击“非换行的空格”图标。
或者按 Control+Shift+空格键。
实际上在代码中添加了 这几个字符。
2.添加段落换行:
按 Enter 键。
实际上在文字前后加了<p></p>标签。
3.添加换行符:
按 Shift+Enter 键。
实际上在文字后面加了<br>标签。
4.插入特殊字符:
在“插入”栏中,选择“字符”类别并选择所需的字符。
5.创建项目列表和编号列表:
选中文本>打开“格式”菜单>“列表”>选择“项目列表”或者“编号列表”。
6.对齐文本:
选择要对齐的文本,单击属性检查器中的对齐选项(“左对齐”、“右对齐”或“居中对齐”)。
7.作为代码显示:
选中要作为代码的文字>文本>样式>代码
8.设置文本为粗体:
在“插入”栏,选择“字符”,点击B按钮。
9.设置文本为标题:
在“插入”栏,选择“字符”,点击h1,h2,h3等按钮。
10.使用文本的“已编排格式”:
使用文本的“已编排格式”,可以保留文本中的空格,回车等格式,是一个很有用的功能。
在“插入”栏,选择“字符”,点击PRE按钮
11.定义段落首行缩进两个文字:
重定义段落的标签“p”,2字体高。
12.定义换行的行距:
重定义<br>标签的行距,类似本文中定义段落标签的方法。
《Dreamweaver网页设计》教案一、教案简介二、教学目标1. 掌握Dreamweaver的界面结构和基本操作。
2. 学会使用Dreamweaver制作和管理网页布局。
3. 掌握在Dreamweaver中插入和编辑各种网页元素,如文本、图片、等。
4. 学会使用CSS样式表美化网页。
5. 掌握在Dreamweaver中进行网页代码编辑和调试。
三、教学内容1. Dreamweaver的安装和界面介绍。
2. 网页制作的基本流程和规范。
3. 文本的插入、编辑和格式设置。
4. 图片的插入、编辑和优化。
5. 的创建和管理。
四、教学方法采用讲解、演示、实践相结合的教学方法。
教师先进行理论知识讲解和操作演示,学生跟随实践,巩固所学知识。
在实践过程中,教师会提供指导和解答疑问。
五、教学环境1. 计算机房,每台计算机安装有Dreamweaver软件。
2. 投影仪或白板,用于展示操作过程。
3. 教学PPT或教案文档。
六、教学评估1. 课堂参与度:观察学生在课堂上的积极参与程度,提问和回答问题的积极性。
2. 实践操作:评估学生在实践环节中制作网页的质量和完成情况。
3. 作业和练习:布置相关作业和练习题,评估学生的理解和掌握程度。
4. 期末考核:进行期末考核,包括理论知识和实践操作,以评估学生整体学习效果。
七、教学资源1. Dreamweaver软件:确保每台计算机都安装有Dreamweaver软件,以便学生实践操作。
2. 教学PPT或教案文档:提供清晰的教学内容和操作步骤,方便学生理解和跟随。
3. 网页设计素材:提供一些图片、字体等网页设计素材,供学生自由使用。
4. 网络资源:提供一些优秀的网页设计参考案例和教程,供学生学习和参考。
八、教学进度安排1. 教案一:Dreamweaver的安装和界面介绍(1课时)2. 教案二:网页制作的基本流程和规范(1课时)3. 教案三:文本的插入、编辑和格式设置(1课时)4. 教案四:图片的插入、编辑和优化(1课时)5. 教案五:的创建和管理(1课时)6. 实践环节:学生自主制作网页(4课时)7. 作业和练习:布置相关作业和练习题,学生进行理论知识巩固(1课时)8. 教学评估:进行课堂参与度、实践操作、作业和练习的评估(1课时)9. 期末考核:进行期末考核,包括理论知识和实践操作(2课时)九、教学注意事项1. 确保学生已经掌握基本的计算机操作技能,如文本编辑、图片浏览等。
Dreamweaver1⽹页制作1.站点1.1 创建站点点击菜单栏中站点进⾏站点创建,输⼊站点名称,路径1.2 设置图像⽂件夹1.3 站点管理站点的编辑、复制、删除2.页⾯属性栏2.1 外观1.设置页⾯整体的字体、⼤⼩、颜⾊2.背景颜⾊,背景图像,图像是否重复,怎么重复3.页⾯边距2.2 链接1.链接的字体、⼤⼩、颜⾊2.链接颜⾊:链接颜⾊:本⾝颜⾊变换图像链接:⿏标经过链接时的颜⾊ 已访问链接:已访问之后的颜⾊ 活动链接:⿏标点击时的颜⾊2.3标题1.能分为六层标题2.设置标题字体、颜⾊2.4 标题/编码1.⽹页名称2.5 跟踪图像跟踪图像”是Dreamweaver⼀个⾮常有效的功能,它允许⽤户在⽹页中将原来的平⾯设计稿作为辅助的背景。
这么⼀来,⽤户就可以⾮常⽅便地定位⽂字、图像、表格、层等⽹页元素在该页⾯中的位置了。
跟踪图像的具体使⽤是这样的:⾸先使⽤各种绘图软件作出⼀个想象中的⽹页排版格局图,然后将此图保存为⽹络图像格式(包括gif、jpg、jpeg和png)。
⽤Dreamweaver打开你所编辑的⽹页,在菜单中选择“修改>页⾯属性”,然后在弹出的对话框中的“跟踪图像”项中输⼊刚才创建的⽹页排版格局图所在位置。
再在图像透明度中设定跟踪图像的透明度,OK。
这样你就可以在当前⽹页中⽅便地定位各个⽹页元素的位置了。
使⽤了跟踪图像的⽹页在⽤Dreamweaver编辑时不会再显⽰背景图案,但当使⽤浏览器浏览时正好相反,跟踪图像不见了,所见的就是经过编辑的⽹页(当然能够显⽰背景图案)。
3.制作⽹页基本操作3.1 ⽂本3.11 添加⽂本直接编辑、复制粘贴、其他⽂件导⼊3.12 添加空格1.默认只能添加⼀个空格2.通过插⼊菜单 —— HTML —— 特殊字符 —— 插⼊空格3.Ctrl+shift+空格3.13 添加⽇期插⼊菜单进⾏操作3.14 插⼊⽔平线.通过插⼊菜单 —— HTML —— ⽔平线3.15 添加特殊字符.通过插⼊菜单 —— HTML —— 特殊字符3.16设置⽂本格式字体、⼤⼩、颜⾊3.17 分段与换⾏分段:enter换⾏:shift+enter3.18 设置段落格式1.对齐⽅式:2.列表变编号3.缩进3.2 图像3.21 常⽤图⽚格式1.GIF:特点:图⽚数据量⼩、可带动画信息、可透明背景显⽰,最⾼只⽀持265种颜⾊ ⽤途:⽹站logo、⼴告条、⽹页背景图像2.JPEG:特点:可⾼效的压缩图⽚的数据量、图⽚变⼩却不会丢失颜⾊画质 ⽤途:显⽰照⽚等颜⾊丰富的图像3. PNG:特点:融合了GIF能做透明背景的特点,⼜具有JPEG处理精美图像的特点 ⽤途:绘制⽹页效果图3.22 插⼊图像3.23 设置图像基本属性图像名称、宽、⾼、源⽂件、替代、边框3.24 图⽂混排1.边距2.对齐3.25 编辑图像1.裁剪2.锐化3.对⽐度、亮度4.重新采样5.优化(为图⽚瘦⾝)3.26 ⿏标经过更换图⽚特效插⼊菜单栏完成4.超链接4.1 内部链接——同个⽹站中的其他⽹页4.2 外部链接——不同站点或本站点以外的⽹页1.链接中输⼊链接地址2.⽬标中选择打开位置 _blank :每点击⼀次链接创建⼀个新的窗⼝ _self :会在当前窗⼝、框架页⾯中打开 _new :会在同⼀个刚创建好的窗⼝中打开 _parent :如果是嵌套框架,会在⽗框架中打开 _top :会在完整的浏览器窗⼝中打开4.3 链接样式参考2.24.4 锚点链接——到⽹页中某⼀特定位置1.选中要命名的锚点点击锚点,对该锚点命名2.选择链接点,当前页⾯:在链接中输⼊ #锚点名其他⽹页:⽹页地址#锚点名4.5 E-mail电⼦邮件链接选中需要连接部分,点击电⼦邮件链接,输⼊链接地址4.6 下载链接1.当⽂件是exe⽂件、zip、rar类型问件时浏览器⽆法直接打开,便会提⽰下载4.7 空链接1.在链接中输⼊#2.⼀般导航栏中⾸页位置就是⼀个空链接4.8 图像热区链接在图像中绘制⼀块区域,创建链接4.9 图像导航条图像超链接4.10 跳转菜单选中表单中的跳转菜单,进⾏编辑4.11 脚本链接——通过触发脚本命令在链接中输⼊脚本代码1. 添加到收藏夹:javascript:window.external.addFavorite('⽹址','名称')2. 表⽰关闭窗⼝:javascript:window.close()3. 表⽰弹出⼀个提⽰对话框:javascript:alert('hello!')4. 设置为默认主页:(需通过空链接#,触发onClick事件)在链接中输⼊#选中链接点,在代码中#后输⼊onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('⽹址')"4.12 超链接的管理1.连接路径: 绝对路径:链接中使⽤完整URL地址 相对于⽂档的路径:../ 表⽰上⼀层⽂件夹 相对于站点根⽬录的路径:/ 表⽰根⽬录2. ⾃动更新链接:⽂件位置变动,⾃动更新⽹页中链接路径3. 检查连接5.表格5.1插⼊表格,进⾏设置5.2 选定表格、单元格进⾏设置5.3 表格嵌套在单元格中插⼊表格5.4 应⽤表格布局页⾯5.41 类型:1.国⼦型2.拐⾓型3.标题正⽂型4.左右框架型5.上下框架型6.综合框架型7.封⾯型8.flash型9.变化型5.42 页眉通常放置logo,⼴告条5.43 页脚放置版权信息、联系电话、⽹站介绍、备案信息等5.44 导航栏双倍单元格,空⼀格放⼀个信息,设置⾼度,内容位置5.45 信息栏6.框架6.1 框架⼀个框架就是⼀个区域,可以单独打开⼀个HTML⽂档,多个框架就组成了框架集6.2 创建框架选择框架结构,创建框架6.3保存框架有多少个框架就要保存多少次,再加最外层6.4 作⽤1.做⽹页的布局,将⽹页分成不同的部分2.简化⽹页的编写:⽹页之间相同的内容,只需要编写⼀次3.加快⽹页的浏览:每次⽹页只需要更新变化的那个框架的内容6.5设置框架集和框架属性⿏标单击框架边框,对框架进⾏设置6.6⾃定义框架1.拖动编辑窗⼝的边框:⿏标位于编辑窗⼝的边框,对边框进⾏拖动,创建新的框架2.按住 alt 键时拖动7.多媒体元素7.1多媒体元素flash多媒体元素⾳频多媒体元素视频多媒体元素7.2 插⼊flash多媒体元素7.21 flash动画插⼊flash动画⽂件,扩展名为 .swf7.22 插⼊flash按钮Dreamweaver⾃⾝带有⼀些flash按钮,也可⾃⼰做,⽂件扩展名为 .swf7.23插⼊flash⽂本7.24插⼊图像查看器7.25插⼊flash paper7.26插⼊flash视频7.3 插⼊⾳频多媒体元素8.AP DIV元素8.1. APAP:绝对定位元素,称为层,定位灵活8.2 创建AP DIV1.点击布局中的绘制层,直接在页⾯中绘制2.按住绘制层,拖动⾄页⾯中,这样的层⼤⼩⼀定,颜⾊⼀定,可设置8.3 编辑AP DIV点击层左上⾓,在属性栏中设置8.4 层的可见性设置在窗⼝菜单中打开层,即可对层可见性进⾏设置8.5 层的嵌套将光标置于层中,进⾏绘制8.6 与表格的转换下修改菜单中,选择转换,将层转换为表格,或表格转换为层9.⾏为特效9.1.添加在窗⼝菜单中(或 shift+F4)打开⾏为,选择所要添加⾏为的部分,进⾏添加,添加后选择事件启动⾏为步骤:选择对象、添加动作、调整事件9.2 事件1.常见事件OnMouseOver :⿏标经过OnMouseOut :⿏标移开OnLoad :页⾯打开OnUnLoad :页⾯关闭其他:onClick :单击onDbclick :双击onKeyDown :当按下任意键的同时产⽣。
第一天的内容可能让你觉得枯燥乏味,不过,“工欲善其事,必先利其器”,让我们一起来了解Dreamweaver8的操作环境,完成站点的创建。
一、Dreamweaver8 的操作环境在首次启动Dreamweaver8时会出现一个“工作区设置”对话框,在对话框左侧是Dreamweaver8的设计视图,右侧是Dreamweave 8的代码视图。
Dreamweaver8设计视图布局提供了一个将全部元素置于一个窗口中的集成布局。
我们选择面向设计者的设计视图布局。
在Dreamweave 8 中首先将显示一个起始页,可以勾选这个窗口下面的“不在显示此对话框”来隐藏它。
在这个页面中包括“打开最近项目”、“创建新项目”“从范例创建”3个方便实用的项目,建议大家保留。
新建或打开一个文档,进入Dreamweaver8的标准工作界面。
Dreamweaver8的标准工作界面包括:标题显示、菜单栏、插入面板组、文档工具栏、标准工具栏、文档窗口、状态栏、属性面板和浮动面板组。
1、标题显示栏启动Macromedia Dreamweave 8后,标题栏将显示文字Macromedia Dreamweave 8.0,新建或打开一个文档后,在后面还会显示该文档所在的位置和文件名称。
2、菜单栏Dreamweave 8的菜单共有10个,即文件、编辑、视图、插入、修改、文本、命令、站点、窗口和帮助。
其中,编辑菜单里提供了对Dreamweaver菜单中[首选参数]的访问。
文件:用来管理文件。
例如新建,打开,保存,另存为,导入,输出打印等。
编辑:用来编辑文本。
例如剪切,复制,粘贴,查找,替换和参数设置等。
查看:用来切换视图模式以及显示、隐藏标尺、网格线等辅助视图功能。
插入:用来插入各种元素,例如图片、多媒体组件,表格、框架及超级链接等。
修改:具有对页面元素修改的功能,例如在表格中插入表格,拆分、合并单元格,对其对象等。
文本:用来对文本操作,例如设置文本格式等。
Dreamweaver网页制作教程:定义站点网页教学网【转载】Web 站点是一组具有如相关主题、类似的设计、链接文档和资源。
Dreamweaver MX 2004 是一个站点创建和管理工具,因此使用它不仅可以创建单独的文档,还可以创建完整的 Web 站点。
创建 Web 站点的第一步是规划。
为了达到最佳效果,在创建任何 Web 站点页面之前,应对站点的结构进行设计和规划。
决定要创建多少页,每页上显示什么内容,页面布局的外观以及页是如何互相连接起来的。
请执行以下操作:启动 Dreamweaver MX 2004:选择“站点”>“管理站点”(即,从“站点”菜单选择“管理站点”)。
出现“管理站点”对话框。
在“管理站点”对话框中,单击“新建”,然后从弹出式菜单中选择“站点”。
出现“站点定义”对话框。
如果对话框显示的是“高级”选项卡,则单击“基本”。
出现“站点定义向导”的第一个界面,要求您为站点输入一个名称。
在文本框中,输入一个名称以在 Dreamweaver MX 2004中标识该站点。
该名称可以是任何所需的名称。
单击“下一步”。
出现向导的下一个界面,询问您是否要使用服务器技术。
选择“否”选项,指示目前该站点是一个静态站点,没有动态页。
单击“下一步”。
出现向导的下一个界面,询问您要如何使用您的文件。
选择标有“编辑我的计算机上的本地副本,完成后再上传到服务器(推荐)”的选项。
在站点开发过程中有多种处理文件的方式,初学网页制作的朋友请选择此选项。
单击该文本框旁边的文件夹图标。
随即会出现“选择站点的本地根文件夹”对话框。
单击“下一步”,出现向导的下一个界面,询问您如何连接到远程服务器。
从弹出式菜单中选择“无”。
您可以稍后设置有关远程站点的信息。
目前,本地站点信息对于开始创建网页已经足够了。
单击“下一步”,该向导的下一个屏幕将出现,其中显示您的设置概要。
单击“完成”完成设置。
随即出现“管理站点”对话框,显示您的新站点。
dw中字体微软雅黑的写法在DW(Dreamweaver)中使用微软雅黑字体的写法如下:1. 内联样式(Inline Style),在HTML标签的style属性中直接指定字体样式。
例如,如果你想将一个段落(p)中的文本设置为微软雅黑字体,可以这样写:html.<p style="font-family: '微软雅黑', sans-serif;">这是微软雅黑字体。
</p>。
2. 内部样式表(Internal Style Sheet),在HTML文档的头部(head)部分使用<style>标签定义样式。
在<head>标签中添加以下代码:html.<style>。
p {。
font-family: '微软雅黑', sans-serif;}。
</style>。
然后,在正文部分使用相应的HTML标签,如:html.<p>这是微软雅黑字体。
</p>。
3. 外部样式表(External Style Sheet),将样式定义在一个独立的CSS文件中,然后在HTML文档中引用该CSS文件。
首先,创建一个新的CSS文件,例如style.css,并在其中添加以下代码:css.p {。
font-family: '微软雅黑', sans-serif;}。
然后,在HTML文档的<head>标签中添加以下代码,引用该CSS 文件:html.<link rel="stylesheet" href="style.css">。
接着,在正文部分使用相应的HTML标签,如:html.<p>这是微软雅黑字体。
</p>。
以上是在DW中使用微软雅黑字体的写法。
记得在CSS中使用字体名称时,要用单引号或双引号将其括起来,以防止字体名称中有空格或其他特殊字符。
dw中font作用
在Dreamweaver(DW)中,Font标签是用于设置文本的字体、颜色、大小等属性的标签。
它允许您在网页上使用不同的字体、设置文本的大小、颜色以及字体样式(如粗体、斜体等)。
具体来说,Font标签的属性包括:
* `size`:设置文本的大小,通常以像素(px)为单位。
* `color`:设置文本的颜色。
* `face`:设置文本的字体类型。
除了Font标签外,DW还提供了其他与字体相关的标签和功能,如`<b>`标签用于将文本设置为粗体,`<i>`标签用于将文本设置为斜体等。
这些标签和功能可以方便地帮助您在网页上实现所需的文本样式。
此外,DW还提供了其他更多的字体相关的功能,例如:
1. 字体族(Font-family):用于指定文本的字体族,例如常用的宋体、黑体、楷体等。
2. 字体加粗(Font-weight):用于设置文本的加粗程度,可以设置常规、粗体等不同样式。
3. 字体倾斜(Font-style):用于设置文本的倾斜效果,可以设置斜体文本。
4. 字体效果(Text-decoration):用于设置文本的装饰效果,例如下划线、删除线等。
通过这些标签和功能,您可以轻松地控制网页中文本的字体样式,以实现更好的视觉效果和用户体验。
Html教程:一、新建网页及保存:1.开始——附件——记事本2.打开记事本,输入源码3.文件——另存为——文件名(a1.html),保存类型(所有文件)——保存二、文字格局:1.换行标记<pre></pre>:原样显示文本<br>:换行<p></p>:段落标记,比<br>多了一行空行2.文本格式:字体:<font></font>属性包含:face-字体;size-大小;color-颜色字体样式:<b></b>加粗<i></i>倾斜<u></u>下划线对齐方式:方法一:作为属性可以添加在<p></p>;<div></div>中方法二:直接给一个<center></center>,注意要放在<font></font>的外面。
三、页面1.页面背景颜色及文字颜色:均是作为body标记的属性来进行设置。
bgcolor:背景颜色;text:静态文字的颜色;link:可链接文字的颜色;alink:点击链接时文字的颜色vlink:访问过链接的颜色。
2.背景图像-作为body标记的属性来进行设置background=图像的相对路径,注释:由于放图片的img文件夹和网页a1.html同为test文件夹下的成员,所有盘符和test 文件夹中路径当中就可以省略了。
3.插入图像:<img src=img\daiyu.jpg alt=黛玉是个好姑娘!width=200 height=300 align=left>src:图像存放路径,alt:图像解释文字,width和height是图像中页面中显示的大小,align 指的是图像相对于文字的对齐格式4.插入声音:<embed>标记:src:声音文件存放路径;autostart:自动播放;loop:循环播放,其值可以是true/false,也可是数字代表循环次数hidden:隐藏播放器;width和height是播放器大小<bgsound>标记:src:声音文件存放路径loop:循环播放,其值可以是true/false,也可是数字代表循环次数注意:bgsound嵌入声音文件默认自动播放和隐藏四、表格<table></table>:表格的起始标记:align属性控制整个表格相对于页面的对齐方式width和height属性控制整个表格的宽和高border属性控制表格边框粗细<tr></tr>:表格的行标记align属性控制表格内容相对于表格单元格的对齐方式bgcolor:该行的背景颜色width和height控制当前行的宽和高<td></td>:表格的列标记在表格中是先画大框架,再画行,行里面画列控制表格内容字体可加<font>标记五、超级链接<a href=链接内容的地址>链接内容</a>链接内容的地址:相对路径(本地机器上的某一个页面、图片、文件)电子邮件地址:××××@####:注意,href后面跟的是mailto:××××@####internet上的某一个网站的地址链接内容:1.文字,2.图片六、框架网页框架网页是由框架集页面与分框架网页构成框架集页面:<frameset></frameset>rows:表示将页面横向划分,可以采用像素/百分比/比值三种形式ex:rows=80,*就代表将页面分为上下两个部分,上方高为80像素其余部分为下方所占。
文本是网页中最基本的元素,dreamweaver提供了强大的文本编辑环境1、插入文本文本是传达网页信息的基本途径,dreamweaver提供了多种向文档中添加文本和设置文本格式的方法。
在网页中,除了可以插入普通文本外,还可以插入水平线、Flash文本、日期等其他字符文本。
(1)插入普通文本直接输入复制粘贴导入(2)插入特殊字符定位,插入-HTML-特殊字符(插入面板-文本-字符),如无则打开“其他字符”(3)插入水平线作用是分隔文本插入菜单-HTML-水平线(属性介绍)宽高:以像素为单位或以页面尺寸百分比的形式指定宽=1 高=100 垂直线高控制长短(4)插入时间当前日期定位,插入面板-常用-日期(插入菜单-日期)选择格式,每次保存时更新时间则选中“储存时自动更新”单击插入的日期,如果勾选了,可以在属性面板编辑(5)插入换行符在DW中使用换行符不仅可以换行,而且不会破坏文档的结构定位,enter 行间距较大,代码区生成<p></p>标签;enter+shift小,<br>(6)插入空格在默认的状态下,HTML只允许字符之间包含一个空格,即在文档中按space键只能输入一个空格,若再次……输入多个,手动/自动插入面板-文本-不换行空格插入菜单-HTML-特殊字符-不换行空格ctrl+shift+space自动的话,编辑-首选参数-常规-允许多个连续的空格space可用(7)插入列表编号列表(有序,用数字和字母表示)、项目列表(无序)、定义列表(带缩进,如同字典)定位-属性面板-……(文本-列表)回车继续两次回车结束已有的文档添加列表选择文本-属性-……多级列表次级-缩进2回车返回上一层列表属性项目列表编号列表分别讲述已有文本创建选择、属性-列表嵌套/多级选择、属性-列表次级、文本缩进修改列表光标放在项中文本-列表-属性(属性面板-列表项目)默认-圆圈项目符号-黑点2、设置文本属性(1)设置字体选择(未选则为随后输入的文本)、属性-字体默认字体则删除之前设置文本-字体-编辑字体列表添加/删除移动(2)文本大小选择、属性-大小-字号(3)对齐方式选择或停留属性-对齐方式(4)缩进(5)字体颜色为在页面属性设置则为默认黑色选择,属性-文本颜色(无填充色)文本菜单-颜色(6)设置文本样式文本-样式(7)设置文本格式选择/停留文本-段落格式段落/标题将文本设置为标题格式后,DW自动将下一行当标准段落更改在首选参数里。
Dreamweaver使⽤教程 Dreamweaver⽤表格构建完整的页⾯ ⼀⽹页顶部(⼀般包括图标、⼴告、导航菜单) 1、创建⼀个1⾏2列,宽为760像素,边框及边距均为0的表格。
2、选中表格,设置排列⽅式为居中对齐,背景⾊为#3366CC。
3、将光标置于左边单元格中,设置其⽔平排列为左对齐,垂直排列为顶端对齐,然后插⼊⼀张图像,⼀般在此插⼊的是⽹站的图标,即logo。
4、将光标置于右边单元格中,设置其宽度为500,⽔平排列为居中对齐,垂直排列为中间,然后插⼊图像,⼀般是⽹页⼴告,即banner。
5、将光标置于刚完成的表格之后,插⼊/表格,创建⼀个1⾏1列,宽为760像素,边框及边距均为0的表格。
6、选中刚创建的表格,设置排列⽅式为居中对齐,背景⾊为#005173。
7、在该表格中依次插⼊多个图像,作为导航条菜单。
⼆⽹页中部(左边栏⽬列表、中间⽹站新闻、右边栏⽬列表) 1、在导航条表格后⾯,插⼊/表格,创建⼀个1⾏3列,宽为760像素,边框及边距均为0的表格。
并设置排列⽅式为居中对齐,背景⾊为#FFFFFFF。
2、将光标置于左边单元格中,设置其宽度为18%,⽔平排列为居中对齐,垂直排列为顶端对齐,然后插⼊⼀张图像,插⼊⼀个导航条。
3、将光标置于刚插⼊的图⽚后,插⼊/表格,插⼊⼀个12⾏1列,宽为90%的表格。
设置其单元格间距为1,背景⾊为#CCCCCC。
4、将光标放在表格第⼀个单元中,设置其⾼为20,背景⾊为#FFFFFF。
插⼊/图像,插⼊⼀个导航⽂字前⾯的⼩点。
同样设置其他11个单元格,这样左边的栏⽬分类列表就完成了。
5、将光标置于主体表格的中间单元格中,设置其宽度为66%,⽔平排列为居中对齐,垂直排列为顶端对齐,然后插⼊/图像,插⼊⼀个导航条。
6、将光标置于图像后,插⼊/表格,插⼊⼀个4⾏1列,宽为95%的表格。
设置其单元格间距为1,背景⾊为#CCCCCC。
7、将光标置于表格的第⼀个单元格中,拖动⿏标,将4个单元格都选中,设置⾼为60,背景⾊为#FFFFFF。
图2-18 复制空格 图2-19 粘贴空格
2.1.4 设置文本字体格式
为了使网页更美观,往往需要为网页中的文本设置一定的格式。
本小节重点介绍如何在Dreamweaver中设置文本的字体格式。
1.设置HTML字体格式
按钮,然后通过调节面板中的参数进行设置即可,图2-20所示为
图2-20 HMTL字体格式的设置参数
设置HTML字体格式的其他方法
钮,单击“字体”下拉列表框右侧的下拉按钮,在打开的下拉列
设置CSS字体格式时将打开“新建 CSS 规则”对话框,在“选择或输入选择器名称”下拉列表框中输入“font01”,单击按钮,如图2-22所示。
1)怎样将Dreamweaver 集成到IE 浏览器?Dreamweaver 安装程序会在上下文选单增加一个“ Edit with Dreamweaver ”命令,我们还可以修改Windows 的注册表使它与IE 集成。
就象MS Word 、Frontpage 和Notepad 一样,通过IE 工具栏的编辑按钮来调用Dreamweaver 打开当前网页。
将下面文本的最后一行要改为你自己的Dreamweaver 安装路径,把它们保存为一个*.reg 文件,双击它将信息添加到注册表即可。
REGEDIT4[HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver][HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver\shell][HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver\shell\edit] [HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver\shell\edit\command] @="C:\Program files\Macromedia\Dreamweaver 3\dreamweaver.exe %1"如果要设置为IE 缺省的编辑器,打开IE 的“Internet 选项”,在程序标签指定。
2)为了使用某些脚本,经常要为图形或文本加上空链接,但是浏览时点击有空链接的对象时,会跳到页面的顶端,如何避免?因为浏览器以为链接到同一页,可它又找不到定义的书签(anchor ),于是停留在页面的顶端。
用“ javascript:void(null) ”替换空链接的“ # ”,解决这个问题。
3)使用CSS 、层的时候,在不同浏览器的效果不一样,有时甚至出现错位现象,怎样解决?在对不同浏览器的兼容方面,Dreamweaver 作得不错,但绝不意味用Dreamweaver 作出的网页在IE 和Netscape 中完全一样。