1 / 50

第六章 网页设计与制作基础

第六章 网页设计与制作基础. 本章内容 . 6.1 网页设计的基本方式 6.2 HTML 基础 6.3 Dreamweaver 应用. 什么是网页，网站. 在网站中，供用户阅读的一个个页面，就称之为 “ 网页 ” ，又称为 Web 页。 是 WWW 的基本文档，是用 HTML 或其他语言编写 ，包括文本、图像、表格、按钮、动画等。 网站是众多网页的集合 ，网站的建设者把众多的网页按照一定的顺序和链接放一起，就组成了网站。. 接受请求. 服务器端. 找到静态网页. 发送网页. 普通网页.

gwendolyn-hogan
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. 本章内容 6.1 网页设计的基本方式 6.2 HTML基础 6.3 Dreamweaver应用

  3. 什么是网页，网站 • 在网站中，供用户阅读的一个个页面，就称之为“网页”，又称为Web页。 • 是WWW的基本文档，是用HTML或其他语言编写，包括文本、图像、表格、按钮、动画等。 • 网站是众多网页的集合，网站的建设者把众多的网页按照一定的顺序和链接放一起，就组成了网站。

  4. 接受请求 服务器端 找到静态网页 发送网页 普通网页 • 静态网页：浏览器端与服务器端不发生交互的网页。文件名后缀 .html 和.htm

  5. 接受请求 找到动态网页 服务器端 运行动态网页， 生成静态网页 发送网页 动态网页 • 动态网页 • 服务器端根据客户端的不同请求动态产生网页内容。 • 支持客户端和服务器端的交互功能

  6. 动态网页示例 BBS论坛 留言板 聊天室

  7. 常用的动态网页技术 文件名后缀 .ASP .PHP .JSP CGI ASP PHP JSP ASP.NET J2EE

  8. 网页设计的基本方式 • 手工编程 • 利用可视化工具 • 手工编程与可视化工具结合

  9. 网页设计的基本方式 • 手工编程 • 网页是由HTML超文本标记语言编程的文本文档 • 设计制作网页的过程就是生成HTML代码的过程 • WWW发展初期，制作网页是通过直接编写HTML代码来实现的。 • 手工编程制作网页对网页设计人员的要求较高，编程效率低，调试过程复杂。 • 但手工编程可以灵活地制作出丰富的网页效果。

  10. 网页设计的基本方式 • 可视化工具方式 • FrontPage、Dreamweaver等可视化的网页编辑工具。 • 在可视环境下编辑制作网页元素，由编辑工具自动生成对应的网页代码。 • 操作简单直观，调试方便，是大众化的网页编辑方式。 • 在制作一些特殊网页效果上有一定的局限性。

  11. 网页设计的基本方式 • 编程和可视化工具结合方式 • 编程和可视化工具结合是比较成熟的网页制作方式。 • 具体过程为：一般的网页元素通过可视化工具编辑制作，一些特殊的网页效果通过插入代码生成。 • 效率高、调试方便而且可以实现丰富的网页效果，但要求设计人员既要熟悉Html语言又能运用可视化工具。

  12. Macromedia公司——闪客帝国 • Macromedia公司总部设立在美国加州三番市，在全球50多个国家设有经营机构。 • Macromedia公司的主要软件产品包括 • Macromedia Authorware • Macromedia Cold Fusion • Macromedia Director • Macromedia Dreamweaver • Macromedia Fireworks • Macromedia Flash • Macromedia Flash Player • Macromedia FreeHand • Macromedia JRun 2005-12 Adobe 与Macromedia合并 交易涉及金额34亿美元

  13. 本章内容 6.1 网页设计的基本方式 6.2 HTML基础 6.3 Dreamweaver应用

  14. HTML超文本标记语言 • 那HTML这四个字母代表什么呢？ • 超（Hyper）是相对于线性（linear）来说的。在很久以前，那时计算机程序还是线形运行的：当计算机程序执行完一个动作以后，转向下一行，这行结束后，继续下移，依次类推。但HTML则不同，你可以在任何时候跳转到任何地方。 • 文本（Text）：一连串的字符组成 • 标记（Markup）：指的是你怎么处理文本。 • 加粗、标题等 • 语言（Language）：HTML就是一种语言，它是描述性的标记语言，不是编程语言。

  15. HTML扩展名 • 包含HTML内容的文件最常用的扩展名是.html • 但是像DOS这样的旧操作系统限制扩展名为最多3个字符，所以.htm扩展名也被使用。虽然现在使用的比较少一些了，但是.htm扩展名仍旧普遍被支持 • 它们是可供浏览器解释浏览的文件格式。

  16. HTML超文本标记语言 • 早期的HTML语法被定义成较松散的规则以有助于不熟悉网络出版的人采用。网页浏览器接受了这个现实，并且可以显示语法不严格的网页。 • 随着时间的流逝，官方标准渐渐趋于严格的语法，但是浏览器继续显示一些远称不上合乎标准的HTML。 • 使用XML的严格规则的XHTML（可扩展超文本置标语言）是W3C计划中的HTML的接替者。虽然很多人认为它已经成为当前的HTML标准，但是它实际上是一个独立的、和HTML平行发展的标准。 • W3C目前的建议是使用XHTML 1.1、 XHTML 1.0或者HTML 4.01进行网络出版。

  17. 网页的代码 • 查看方法：通过打开 IE浏览器 查看源代码（称为HTML代码） • 打开一个网站时看到的第一个页面就是主页，也称为首页，主页文件的名称一般为index.htm或index.html；

  18. 元素与标签 • 元素（element）。 • 用于结构化HTML文档，并告知浏览器如何呈现网页。 • 通常，元素由首标签（start tag）、内容（content）和尾标签（end tag）构成。 • “标签”是什么？ • 标签（tag）指示元素的起始与结束。

  19. 标签 • 所有标签都具有相同的格式： • 以小于号“<”开头，以大于号“>”结尾。 • 单标签 • 只需单独使用就能完整地表达意思 • 语法：< 标签名称> • 最常用的单标签是<BR>, 它表示换行。

  20. 标签 • 双标签 • 由“首标签”和“尾标签”两部分构成，须成对使用 • 始标签告诉Web浏览器从此处开始执行该标记所表示的功能 • 尾标签告诉Web浏览器在这里结束该功能。 • 语法：<标签> 内 容</ 标签>

  21. 标签 • 标签属性 • 许多单标记和双标记的始标记内可以包含一些属性 • 语法：< 标签名字 属性1 属性2 属性3 … >

  22. 常用标签 • 1、<html> </html> • 告诉浏览器，你们将采用HTML语言 • <html>标签用于文档的最前边，标识Html文档的开始。 • </html>标签放在Html文档的最后边，用来标识Html文档的结束，两个标签必须一块使用。 • 可以省略不用。

  23. 常用标签 • 2、<head> </head> • 构成Html文档的开头部分 • 3、<title> </title> • 显示网页的主题 • 网页标题（title）尤其重要，因为搜索引擎（比如Google）要用它来索引网页 • 4、<body> </body> • Html文档的主体部分

  24. HTML结构 • 超文本文档分文档头和文档体两部分 • 文档头里，对这个文档进行了一些必要的定义 • 文档体中才是要显示的各种文档信息。 <html> <head>　　　　　　头 部 信 息</head> <body>　　　　　文 档 主 体， 正 文 部 分</body> </html>

  25. 常用标签 5、标题 • 一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标签<Hn>,其中n为标题的等级，HTML总共提供六个等级的标题，n越小，标题字号就越大，以下列出所有等级的标题： • 〈H1>…</H1>　　　　　第一级标题 • 〈H2>…</H2>　　　　　第二级标题 • 〈H3>…</H3>　　　　　第三级标题

  26. 属性 • 属性是什么？ • HTML通过标签告诉浏览器如何展示网页（比如<br />告诉浏览器显示一个换行）。你可以为某些元素附加一些信息，这些附加信息被称为属性（attribute）。 • <h2 style="background-color:#ff0000;">我跟HTML的友谊</h2> • 属性应写在元素的首标签上。具体写法是：属性名称（attribute name）后紧跟一个等号（“=”），后面写上用双引号括起来的属性值（attribute value）。对于style属性的值，可以用分号（“;”）来分隔多个样式指令。

  27. 属性 • 每个颜色都有其对应的十六进制代码。下面是一些例子： • 白色： #ffffff黑色： #000000红色： #ff0000兰色： #0000ff绿色： #00ff00黄色： #ffff00

  28. 常用标签 • 6、<p> </p> • 用来创建一个段落，在此标签对之间加入的文本将按照段落的格式显示在浏览器上。 • <p>标签还可使用align属性，用来说明对齐方式， • 语法是：<p align=“”></p>。align可以是 • Left(左对齐) • Center(居中) • Right(右对齐)

  29. 常用标签 • 7、<br> • 回车换行 • 它没有结束标签 • 8、<font></font> • 改变文本的字体大小、颜色； • 通过对它的两个属性 size 和 color 的控制来实现的。

  30. 常用标签 • 9、img • 指明一个图像在网络的位置。不是把图像的所有信息包含进来，浏览器根据路径到指定的地方去取图像。 • <img src="图形文件地址"> • src属性在<img>标签中是必须赋值的 • <img>标签还有alt、align、border、width和height属性。 src，代表“来源（source）”

  31. 常用标签 • 10 <a> </a>链接标签 • <a HREF=“资源地址”> 链接文字 </a> • 属性“HREF”定义了这个链接所指的地方； • 通过点击“链接文字”可以到达指定的文件。 • 元素a代表“链接（anchor）”； • 属性href代表“超文本引用（hypertext reference）”，它用于指定链接指向何处——通常是一个因特网地址或者一个文件名。

  32. <a> </a>链接 • 链接分为本地链接、URL链接和目录链接。 • 本地链接：　　对同一台机器上的不同文件进行的连接称为本地链接。采用绝对路径或相对路径来指示一个文件。 • URL链接　　如果链接的文件在其它服务器上，我们就要弄清我们所指向的文件时采用的哪一种URL地址。

  33. 路径 • 绝对路径是将主机地址和主机上资源发布目录的路径和资源名称进行完整的描述。 • <a href="HTTP://ctec.xjtu.edu.cn/bbs/index.htm"> • <a href="file:///c:/xitami/webpages/default.htm"> • 相对路径则是相对于当前的网页所在目录或站点根目录的路径 • <img src="Snowwhite.jpg"> 图像文件"Snowwhite.jpg"与当前显示的网页在同一目录下 <img src="../image/Leaves.jpg"> 图像文件"Leaves.jpg "在与当前显示网页所在目录同层次的另一子目录image下

  34. 常用标签 • 11、<table><tr><td> </td></tr></table> 表格标签 • <table></table>表示一个表格； • <tr></tr>表示表格的一行 • <td></td>表示表格的一行中的一列.

  35. 表格的属性

  36. 常用标签 • 12 <form></form> 表单标签 • <form name=“” method=“” action=“”> <input type=“” name=“”> …… </form> • 用来创建一个表单，定义表单的开始和结束位置，在标签对之间的一切都属于表单的内容。 • <form>标签具有action、method和target属性。

  37. 常用标签 • action的值是处理程序的程序名(包括网络路径:网址或相对路径)，如：<form action=“http://xld.home.chinaren.net/counter.cgi”>，当用户提交表单时，服务器将执行网址http://xld.home.chinaren.net/上的名为counter.cgi的CGI程序。 • method属性用来定义处理程序从表单中获得信息的方式，可取值为GET和POST的其中一个。GET方式是处理程序从当前Html文档中获取数据。POST方式与GET方式相反，它是当前的Html文档把数据传送给处理程序，传送的数据量要比使用GET方式的大的多。 • target属性用来指定目标窗口或目标帧。

  38. 常用标签 • <input type=“”>定义一个用户输入区，用户可在其中输入信息。此标签必须放在<form></form>标签对之间。 <input type=“”>标签中共提供了八种类型的输入区域，具体是哪一种类型由type属性来决定。 八种类型的输入区域有一个公共的属性name，此属性给每一个输入区域一个名字。

  39. 常用标签

  40. 常用标签 • <sub></sub> 设置为下标 • <sup></sup> 设置为上标 • <small></small> 把文字缩小一号 • <big></big> 把文字放大一号 • <em></em> 同<i></i> • <strong></strong> 同<b></b>

  41. 本章内容 6.1 网页设计的基本方式 6.2 HTML基础 6.3 Dreamweaver应用

  42. 作业——设计个人网页 • 内容 • 基本情况；教育情况 • 个人特长；社会活动（实习） • 兴趣爱好 • 技术要求 • 采用表格和模板定位技术； • 加入背景音乐、图像查看器或Flash动画； • 层的运用 • 参考样例 • Flash动画讲解（需要耳机）

  43. 交作业 • FTP上传 ftp://202.120.222.71/ • 作业下载区 • 作业上传区/李厦

  44. 网站分类 • 将网站按照主体性质不同分为 • 政府网站 • 企业网站 • 商业网站 • 教育科研机构网站 • 个人网站 • 其它网站

  45. DreamWeaver • Macromedia公司产品 • 版本：8.0 • 早期版本 • Dreamweaver MX 2004（7.0）

  46. Dreamweaver 的工作环境 • Dreamweaver 的工作界面由文档窗口、工具栏、状态栏、上下文菜单、“插入”工具栏和属性检查器等部分组成。

  47. 站点的概念 • 在 Dreamweaver 中，“站点”一词 既表示 Web 站点 又表示属于 Web 站点的文档的本地存储位置

  48. 规划和设计站点 • 创建Dreamweaver站点 • 用户要创建一个站点，一般是先在本地将整个网站制作完成，然后再上传到Web服务器上。因此，在开始创建网页之前，最好用Dreamweaver 建立一个本地站点。 • Dreamweaver 内置了强大的FTP功能，可以帮助用户将站点上传到Internet服务器上。 • 目的 • 便于管理网页 • 便于上传下载

  49. 准备工作 • 收集素材 • 图片 • Flash • Audio • Video • 在站点下分别建立相应的文件夹保存素材

  50. 网页定位技术 • 表格 • 表格由一行或多行组成；每行又由一个或多个单元格组成 • 模板 • 在模板中设计“固定的”页面布局。然后创作者在模板中创建可在基于该模板的文档中进行编辑的区域； • 模板最强大的用途之一在于一次更新多个页面。 • 框架 • 图层 • CSS+Div • ……

More Related