《网页设计与制作2-HTML文本与.ppt》由会员分享,可在线阅读,更多相关《网页设计与制作2-HTML文本与.ppt(14页珍藏版)》请在三一办公上搜索。
1、网页设计与制作 2,HTML-文本与图片,3.1.1 HTML基础,HTML是一种网页编辑语言HyperText Mark-up Language是标示语言 不是程序语言例如C,JAVA现行版本HTML 4.0Dreamweaver就是方便我们编写HTML文件。任何网页编辑软件都以HTML为根本。,相关知识,DHTML Dynamic HTML 动态超文本标签语言网页下载后仍然能实时变换页面元素效果的网页的设计概念XHTML The Extensible HyperText Markup Language 可扩展的超文本标签语言 XHTML1.0是一种在HTML 4.0基础上优化和改进的的新语
2、言,目的是基于XML应用 SHTML SHTML是一种用于SSI技术的文件。也就是Server Side Include-SSI 服务器端包含指令 XML Extensible Markup Language可扩展标识语言因为它不像HTML 那样只有固定的形式。是定义文档结构的机制,HTML,标签写法:任何标记皆由所围住,如 标签名与小于号之间不能留有空白字符。在起始标签之标签名前加上符号/便是其终结标签,如 标签也有单个出现的 如大小写不区分,与都可以,标签属性,标签可以带参数,参数只可加于起始标签中。如 也称作属性受影响的内容例如标签中可选的属性有:text(网页文字颜色)bgcolor(
3、背景色)link(链接颜色)leftmargin(左边距)alinktopmargin(右边距)vlink等等Background(背景图片)命令-配色方案就是修改了body标签中的属性值,HTML-文本,导入word文档在Dreamweaver中打开word编写的网页,选择“命令”“清理word生成的HTML”。可以减少网页文件的字节数。直接输入文字换行 利用“Enter”换行:在输入文字后按“Enter”键,文字成段,且上下段之间空一行。相当于加入.标签利用“Shift+Enter”键换行:如果想要将文字手动换行,中间又不能出现空白行,可以按“Shift+Enter”键。相当于加入标签,H
4、TML-文本,空格按住“Ctrl+Shift”键,按一次空格键,键入半个空格。将输入法由半角状态切换到在全角状态,按一次空格键,键入一个空格。相当于输入代码,产生半个空格。插入特殊的字符通过“插入”菜单下的“特殊字符”命令来插入,还可以通过插入“字符”面板来直接插入,HTML-文本,与文本相关的HTML标签(HTML Tag)标题文字 分段标签 表示其间文本组成一段回车 水平线 滚动标签 marquee标签的属性:direction(方向)scrollamount(每次移动的像素)scrolldelay(两次移动的间隔时间),HTML-文本,字体设置(已被层叠样式表取代,应少用)字体设置标签
5、Font标签的属性 eg.粗体字.斜体字.打字机字体.底线.删除线.下标字.上标字.文字闪烁效果.等等,HTML-文本,设置文本格式在Dreamweaver MX中设置文本格式可以通过属性面板,类似于Microsoft Word中对文本的属性设置,包括段落的格式、字体、字号、字的颜色、字体加粗/倾斜、对齐方式(左对齐/居中/右对齐)、文字所链接的路径或URL等。与配合在或其他标签中使用style属性,网页文字排版技巧,字体大小 一般为9pt或12px(要16px)绝对大小:mm,cm,in,pt 相对大小:em,ex 相对于设备:px字间距 一般即可 0em 不超过1em行距 normal 1
6、.6em合适 1.2em2em段距 1em每行字数 不大于55个字母,不大于30个汉字,HTML-图片,插入图像打开网页,将光标移到将要插入图像的位置。打开“选择图像源”对话框在插入“常用”面板中,单击插入图像按钮。直接拖曳插入“常用”面板中的插入图像按钮至页面的光标处。选择Dreamweaver主菜单中的“插入”|“图像”命令。Dreamweaver询问是否要将文件拷贝到网站目录下 为了文件的整体性,选择“是”相当于插入,HTML-图片,图片属性指定图像的宽和高图像的边框 设置图像周围的空白图像的对齐,图片使用技巧,不要大量使用无意义及大型的图形必须依据HTML文件、图形文件的大小,考虑传输速率、延迟时间、网络交通状况,以及服务端与使用者端的软硬件条件,估算HomePage 的传输与显示时间 网页背景图片尽量使用背景色而非背景图片背景图片颜色要浅淡 若为深色背景图片则要提亮字体颜色背景色和字体将会先于背景图片被下载。因此对于暗色背景图片亮色字体的网页,要选择暗色背景色衬底,