网页设计及制作2-HTML文本及图片.ppt

网页设计与制作 2 HTML-文本与图片 3.1.1 HTML基础 HTML是一种网页编辑语言 HyperText Mark-up Language 是标示语言 不是程序语言例如C，JAVA 现行版本HTML 4.0 Dreamweaver就是方便我们编写HTML文件。任何网页编辑软件都以HTML为根本。 相关知识 DHTML － Dynamic HTML － 动态超文本标签语言网页下载后仍然能实时变换页面元素效果的网页的设计概念 XHTML － The Extensible HyperText Markup Language －可扩展的超文本标签语言 XHTML1.0是一种在HTML 4.0基础上优化和改进的的新语言，目的是基于XML应用 SHTML － SHTML是一种用于SSI技术的文件。 也就是Server Side Include--SSI 服务器端包含指令 XML － Extensible Markup Language可扩展标识语言因为它不像HTML 那样只有固定的形式 。是定义文档结构的机制 HTML 标签写法： 任何标记皆由及所围住，如 P 标签名与小于号之间不能留有空白字符。 在起始标签之标签名前加上符号/便是其终结标签，如 /font 标签也有单个出现的 如br 大小写不区分，HTML与html都可以 标签属性 标签可以带参数，参数只可加于起始标签中。 如 body color=yellow 也称作属性 标记符 属性1=属性值1 属性2=属性值2 …受影响的内容/标记符 例如 body标签中可选的属性有： text（网页文字颜色） bgcolor（背景色） link（链接颜色） leftmargin（左边距） alink topmargin（右边距） vlink 等等 Background（背景图片） 命令-配色方案就是修改了body标签中的属性值 HTML-文本 导入word文档 在Dreamweaver中打开word编写的网页，选择“命令”“清理word生成的HTML”。可以减少网页文件的字节数。 直接输入文字 换行 利用“Enter”换行：在输入文字后按“Enter”键，文字成段，且上下段之间空一行。相当于加入p…./p标签 利用“Shift+Enter”键换行：如果想要将文字手动换行，中间又不能出现空白行，可以按“Shift+Enter”键。相当于加入br标签 HTML-文本 空格 按住“Ctrl+Shift”键，按一次空格键，键入半个空格。 将输入法由半角状态切换到在全角状态，按一次空格键，键入一个空格。 相当于输入nbsp;，输入一组nbsp;代码，产生半个空格。 插入特殊的字符 通过“插入”菜单下的“特殊字符”命令来插入，还可以通过插入“字符”面板来直接插入 HTML-文本 与文本相关的HTML标签（HTML Tag） h1标题文字/h1 … h6 /h6 分段标签 p /p 表示其间文本组成一段 回车 br 水平线 hr 滚动标签 marquee /marquee marquee标签的属性： direction （方向）scrollamount（每次移动的像素） scrolldelay（两次移动的间隔时间） HTML-文本 字体设置（已被层叠样式表取代，应少用） 字体设置标签 font /font Font标签的属性 eg. font size=4 face=arial color=red 粗体字 b/b斜体字 i/i 打字机字体 tt/tt底线 u/u删除线 strike/strike下标字 sub/sub上标字 sup/sup文字闪烁效果 blink/blink 等等 HTML-文本 设置文本格式 在Dreamweaver MX中设置文本格式可以通过属性面板，类似于Microsoft Word中对文本的属性设置，包括段落的格式、字体、字号、字的颜色、字体加粗/倾斜、对齐方式（左对齐/居中/右对齐）、文字所链接的路径或URL等。 style与span配合 在span或其他标签中使用style属性 标签名 style=“属性名1:属性值1;属性名2:属性值2; …” 网页文字排版技巧 字体大小 一般为9pt或12px (要16px) 绝对大小：mm, cm, in, pt 相对大小：em, ex 相对于设备：px 字间距 一般即可 0em 不超过1em 行距 normal 1.6em合适 1.2em2em 段距 1em 每行字数 不大于55个字母，不大于30个汉字 HTML-图片 插入图像 打开网页，将光标移到将要插入图像的位置。 打开“选择图像源”对话框 在插入“常用”面