1 / 42

项目二：多张格式化网页制作与设计

项目二：多张格式化网页制作与设计. 主讲人： 王 英. 项目二：多张格式化网页制作与设计. 任务一： HTML 语言的使用 任务二：网页中层的使用 任务三： 网页间的链接 任务四： CSS 修饰网页. 任务一： HTML 语言的使用. 任务实施 启动 编辑软件 ，输入标题和文本内容 格式化文本 为页面添加 表格 为页面添加 图片. 任务一： HTML 语言的使用. 知识扩展 <pre>…< ／ pre> 标记 保留原来排版格式 加在 <body>…</body> 之间. 任务一： HTML 语言的使用. 主要的编辑软件

emelda
Download Presentation

项目二：多张格式化网页制作与设计

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 项目二：多张格式化网页制作与设计 主讲人： 王 英

  2. 项目二：多张格式化网页制作与设计 任务一：HTML语言的使用 任务二：网页中层的使用 任务三：网页间的链接 任务四：CSS修饰网页

  3. 任务一：HTML语言的使用 任务实施 启动编辑软件，输入标题和文本内容 格式化文本 为页面添加表格 为页面添加图片

  4. 任务一：HTML语言的使用 知识扩展 • <pre>…<／pre>标记 • 保留原来排版格式 • 加在<body>…</body> 之间

  5. 任务一：HTML语言的使用 • 主要的编辑软件 • Dreamweaver 、FrontPage、 Golive 、EditPlus、记事本、SciTE、E - TextEditor 、GNU Emacs、gedit、TextPad、UltraEdit • 文件的扩展名是htm或html 提示：html是为长文件名的格式命名的。而htm是为了兼容过去的DOS命名格式存在的，在效果上没有区别的。以前htm和html作为不同的服务器上的超文本文件，但现在通用。

  6. 任务一：HTML语言的使用 • 设置第一句话h1号楷体红色居中 。 • <h1>到<h6> ：其大小共有六个选择，依次减小。使用标记会将字体变成粗体，自成一行。 • 字体<front>的属性 • size 1-7，默认3 • Color 颜色名称或编码 • face 字体 • 设置第二句话6号楷体绿色居中 。 • 设置第三句话6号楷体粉红色居中

  7. 任务一：HTML语言的使用 • “主人”默认字号字体带下划线居右 • “2010.1.1” 默认字号字体斜体居右 。 • 文字的格式 • <b>..</b>：粗体 • <i>..</i>：斜体 • <u>..</u>：带下划线 • <strike>..</strike>：带删除线 • <sup>..<／sup>：上标文字 • <sub>..<／sub>：下标文字

  8. 任务一：HTML语言的使用 • <br>：断行标记，强迫文章断行，可以只有一个，不成对出现。 • clear=”left”／”right”／”all” • <p>：分段标记用来分段，可以单个出现，也可以写一对。 • align属性，即对齐方式 • 注意：<br>和<p>的区别是<p>换行后加一空行显示，而<br>没有空行。 • <center>：居中标记，任何可以显示在网页上的东西都可以居中。 • <hr>分隔线 • Align、Size、Width、Color、Noshade（阴影）

  9. 任务一：HTML语言的使用 • <table></table> 表格 • Bgcolor、Border、Bordercolor、Width • <tr> </tr> 行 • Align、Valign • <td> </td> 单元格 • width、height、colspan（单元格跨占的列数 ）、rowspan和nowrap（单元格内的内容自动断行 ）

  10. 任务一：HTML语言的使用 • <img> • src 图像地址、border 、width、height、hspace 、align

  11. 任务二：网页中层的使用 任务实施 将为“我的小屋”综合运用有关图层的一些操作，来实现仅用图层完成的页面布局。

  12. 任务二：网页中层的使用 操作步骤 为“我的小屋”通过图层的方法添加标题和其他子标题 调整图层

  13. 任务二：网页中层的使用 • 层：一种新的网页元素定位技术 。 • 层的作用： • 制作动态效果 • 排版（页面布局） • 层的创建方法： • 插入菜单 【插入】|【布局对象】|【AP DIV】 • 插入面板 【插入】|【布局】|【AP DIV】

  14. 任务二：网页中层的使用 层属性 层面板

  15. 任务二：网页中层的使用 知识扩展 • 嵌套图层 注意： • 嵌套层并不一定子图层一定位于父图层内。 • 嵌套层的本质是HTML代码嵌套，即将一 层的图层标记嵌套在另一图层之内，所以也可以多层级联嵌套。 • 移动父图层，子图层也跟着移动，若删除父图层，子图层也同时被删除了。

  16. 任务二：网页中层的使用 • 图层与表格之间的转换 • 图层转换为表格 • 表格转换为AP Div 注意： • 隐藏的图层不能转换成表格。 • Dreamweaver不允许将重叠的图层转换成表格。 • 如果文档应用了模板或者是模板文档，就不能把图层转换为表格或把表格转换为图层。如果确实需要转换，可在存为模板之前先行转换。

  17. 任务二：网页中层的使用 制作动态下拉菜单 • 操作步骤： • 先插入图层layer1，在图层中插入1行4列的表格; • 在表格单元格中输入主菜单的名称如：学校概况、学生工作、教学科研、招生就业等; • 在每个主菜单下面分别插入图层，输入子菜单，并设置各个子菜单为隐藏;

  18. 任务二：网页中层的使用 • 选中“学校概况”，添加行为显示—隐藏元素，选择显示按钮； • 在行为面板中，选择事件为“onMouseOver” • 将“学校概况”下的子菜单图层选中，添加两个行为都为显示—隐藏元素，先选择隐藏按钮，选择事件为“onMouseOut”，再选择显示按钮，事件为“onMouseOver”； • 其他子菜单同样依次设置，即可完成。

  19. 任务三：网页间链接的使用 任务实施 为“我的小屋”中的各个标题设置链接，完善页面。

  20. 任务三：网页间链接的使用 操作步骤 为“文学赏析”设置文档链接 为“联系我们”设置电子邮件链接 为“返回首页”设置空链接 为“感谢您的光临！”设置脚本链接 为“搜狐网”、“新浪网”等创建外部链接

  21. 任务三：网页间链接的使用 指向文件 使用【属性】面板单击【浏览文件】按钮 使用鼠标拖拽【属性】面板中的【指向文件】按钮 链接文本框中直接输入被链接的文件相对路径 右键选择“创建链接”

  22. 任务三：网页间链接的使用 绝对地址又可以细分为两种：一种是网络绝对地址，一种是本地绝对地址。对于做网页的来说，网络绝对地址是经常用的，而本地绝地址是很少用的。 相对地址是相对于当前网页的地址。在编写网页时，大多数情况下使用的是相对地址。

  23. 任务三：网页间链接的使用 【插入】|【电子邮件链接】 【属性】面板上的"链接”文本框中输 “mailto:xdxy@126.com” 注意：不要把"mailto"写成"mail to”了，否则不被识别，无法正常显示页面了

  24. 任务三：网页间链接的使用 在【属性】面板中的“链接”文本框中输入空链接符号“#”，不发生文件跳转。

  25. 任务三：网页间链接的使用 注意：由于JavaScript代码在链接的HTML代码中是出现在双引号里(作为href属性的值)，所以对于脚本代码中的引号就必须使用单引号，或者使用转义符——反斜杠，将反斜杠加在任何双引号前面即可(例如：＼”谢谢光临！＼”)。 在【属性】面板“链接”文本框中输入“javascript:alert(‘谢谢光临！’)”。 运行后点击文本会出现“谢谢光临”文本框 。

  26. 任务三：网页间链接的使用 选中文本” 搜狐网”， 在文本【属性】面板上的“链接”文本框中输入完整的网址(“http：//www.sohu.com")

  27. 任务四：CSS修饰网页 任务实施 为空文档“文学赏析”制作以宋朝苏轼的《水调歌头》为主体的页面，要求设置多种CSS样式。

  28. 任务四：CSS修饰网页 操作步骤 页面中插入一个5行3列的表格，表格宽度760像素，边框为0，居中对齐 ； 第一行三个单元格合并，在该单元格中插入图片pic.gif，居中对齐 ； 第二行三个单元格合并，并在该单元格中输入文本“丙辰中秋欢饮达旦，大醉作此篇，兼怀子由”。 新建CSS规则“.p1”，设置字体为“隶书”，大小为14pt ，文本对齐方式为center；并套用；

  29. 任务四：CSS修饰网页 将第三行三个单元格合并，并在该单元格中插入一条水平线，宽为95%，高为4像素，居中对齐，没有阴影； 新建CSS规则“.l1”, color参数设置为#663399 ，并为水平线套用该CSS样式 在第四行中间的单元格中输入文本“明月几时有，…,千里共婵娟。” 新建CSS样式 “p2”,字体为隶书，大小18pt，将刚才的文字套用该CSS样式； 最后一行的三个单元格合并，并在该单元格中插入一个1行2列的表格，在左边单元格中输入文字““苏轼(1037－1101)…《水调歌头.丙辰中秋》等 ” ,右边单元格插入图片pic2.gif 。

  30. 任务四：CSS修饰网页 新建CSS样式 “p3”, “宋体”,9pt ,刚输入的字体套用该样式； 新建CSS样式“.bg”, 【规则定义】中选择“新建样式表文件” ，背景图像为bg。

  31. 任务四：CSS修饰网页 CSS一种叫做样式表（stylesheet）的技术。也称为层叠样式表（Cascading Stylesheet）。可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。

  32. 任务四：CSS修饰网页 定义文本属性 定义背景 定义文本格式 网页元素在页面上的放置方式 定义边框属性 项目符号和编号的属性 设置CSS样式的定位格式 扩展属性包括过滤器、分页和光标选项

  33. 任务四：CSS修饰网页 光标属性及说明

  34. 任务四：CSS修饰网页 主要的滤镜及其说明

  35. 任务四：CSS修饰网页 • 知识扩展 • 用CSS样式设置超级链接 • 设置苏轼没有下划线，鼠标经过该文字时，文字呈红色显示状态，其余状态中，文字都显示为绿色。 • 选择“苏轼”，为该文字做一个空链接 • 新建CSS样式 ，在【选择器类型】中选择“复合内容” ，【选择器名称】中选择“a:link” ，宋体，9pt,颜色#009900 ； • 用同样的方法，设置“a:visited” ； • a:hover”设置为在【分类】中选择【类型】，颜色为#FF0000

  36. 任务四：CSS修饰网页 a:link ：设置带有超级链接文字的样式。 a:visited ：设置已经访问过的超级链接的文字样式。 a:hover ：设置鼠标经过超级链接时文字的样式。 a:active: ：设置鼠标点击超级链接文字的时候文字的样式。

  37. 任务四：CSS修饰网页 • 用CSS样式设置图片显示效果 常用的滤镜函数 • alpha滤镜 • Blur滤镜 • DropShadow滤镜 • Wave滤镜 • Glow滤镜

  38. 任务四：CSS修饰网页 • 表达格式为：filter：alpha（opacity=opacity，finishopacity=finishopacity，style=style，startX=startX，startY=startY，finishX=finishX，finishY=finishY） • Opacity：表示不透明程度，数值越小越透明,100表示完全不透明 • finishOpacity：这是一个同opacity同时使用的选择性参数,当同时设定opacity和finishOpacity时可以制作出透明渐进的效果。0表示完全透明，100表示完全不透明。 • Style：指定渐进的显示形状，0为无渐进，1为直线渐进，2为圆形渐进，3为矩形渐进。 • Startx，starty：为渐进开始的坐标值 • Finishx，finishy：为渐进结束的坐标值

  39. 任务四：CSS修饰网页 • 表达格式为：filter：blur（add=add，direction，strength=strength） • Add：是否在已经应用Blur滤镜上的网页对象上显示原来的模糊对象，0表示否，1表示是。 • Direction：设置模糊方向，0上，45右上，90右，135右下，180下，225左下，315左上。 • Strength：只能使用整数来指定，它代表有多少像素的宽度将受到模糊影响。默认值是5像素。

  40. 任务四：CSS修饰网页 • 表达格式为：Filter：DropShadow（Color=color，Offx=Offx，Offy=offy，　　　　　　　　　　　　Positive=positive） • Color：指定阴影颜色 • offx(offy)：阴影相对于元件对象在水平(垂直)方向的偏移量，单位是像素,有正负之分。 • Positive：阴影的透明程度，0表示没有阴影，非0表示有阴影效果。

  41. 任务四：CSS修饰网页 • Filter：Wave（Add=True（False），Freq=频率，LightStrength=增强光效，　　Phase=偏移量，Strength=强度） • Add：是否在已使用了Wave滤镜的元件对象上显示原对象，0表示不显示，非0表示显示。 • Freq：设置波动的个数 • Lightstrength：设置波浪效果光照强度，0表示最弱，100表示最强。 • Phase：指定波浪的起始相角,数值从0到100 • Strength：设置波浪效果摇摆的幅度

  42. 任务四：CSS修饰网页 • 表达格式为：Filter：Glow（Color=color，Strength=strength） • Color：制定光晕的颜色 • Strength：指定光晕的范围，数值为从1到255，数字越大光晕越强

More Related