《网站设计原理与方法》公选课课件

1、网站设计原理与方法网站设计原理与方法10-11学年第一学期公选课学时：32（理论6实验26）主讲：王红艺邮箱：课程目的课程目的o 加深对计算机网络网络基本原理，特别是对WWW服务、B/S模式的理解o 提高动手能力，学会n 网页制作n 图片、动画制作n 简单的WEB数据库编程n 网站配置与发布o 激发对网络的兴趣，提高使用和利用水平讲课提纲一、万维网（WWW）原理二、超文本标记语言 HTML三、网页制作四、图形编辑与动画制作五、网站设计与发布六、大作业要求附1：数据库操作的核心技术一、万维网 WWWo 计算机网络、Internet与WWW的概念n 计算机网络n Internetn WWWn 计算

2、机网络与Internet的概念区别n Internet与WWW的概念区别o 协议的概念o 网站基本概念n 网页、网站、首页、默认页、主页n 抬头、版权、Logo、导航栏一、万维网 WWWo 三个问题：o 1、如何标志所有网页（文档）？o 2、什么传输协议？o 3、网页标准问题1、如何标志所有文档？oURL（Uniform Resource Locator）n 格式： 访问方式:/主机:端口/路径n 常见的URL：o 网页，http:/o 网页，0:80/news/default.aspo FTP，ftp:/upload:o 发送电子邮件，mailto:o 本地

3、文件，file:/D:/Downloads/rfc.raro 远程登录，telnet:/3:1102、什么传输协议？o 8.5.3 HTTP（HyperText Transfer P.）IISIEDNS服务器的IP是？999/default.shtm9/homepage2006/images/cctvlogo_778.gif组织网页：组织网页：HTML文件文件+图片文件图片文件+Flash文件文件其它图片和Flash等HTML源代码中需要播放的

4、文件9返回返回3、网页标准问题o 超文本标记语言 HTML(HyperText Markup Language)n 超文本标记语言 HTML 中的 Markup 的意思就是“设置标记”。n HTML 定义了许多用于排版的命令（标签）。n HTML 把各种标签嵌入到万维网的页面中。这样就构成了所谓的 HTML 文档。HTML 文档是一种可以用任何文本编辑器创建的 ASCII 码文件。二、超文本标记语言 HTML (HyperText Markup Language)1. HTML 概述o 超文本标记语言 HTML 中的 Markup 的意思就是“设置标记”。o HTML

5、定义了许多用于排版的命令（标签）。o HTML 把各种标签嵌入到万维网的页面中。这样就构成了所谓的 HTML 文档。HTML 文档是一种可以用任何文本编辑器创建的 ASCII 码文件。 2. HTML 文档 o 仅当 HTML 文档是以.html 或 .htm 为后缀时，浏览器才对此 文档的各种标签进行解释。o 如 HTML 文档改换以 .txt 为其后缀，则 HTML 解释程序就不对标签进行解释，而浏览器只能看见原来的文本文件。o 当浏览器从服务器读取 HTML 文档后，就按照 HTML 文档中的各种标签，根据浏览器所使用的显示器的尺寸和分辨率大小，重新进行排版并恢复出所读取的页面。HTML

6、 的格式与标签 o 元素(element)是 HTML 文档结构的基本组成部分。一个 HTML 文档本身就是一个元素。每个 HTML 文档由两个主要元素组成：首部(head)和主体(body) 。o 首部包含文档的标题(title)，以及系统用来标识文档的一些其他信息。标题相当于文件名。o 文档的主体是 HTML 文档的最主要的部分。o 主体部分往往又由若干个更小的元素组成，如段落(paragraph)、表格(table)、和列表(list)等。 HTML 的标签 o HTML用一对标签（即一个开始标签和一个结束标签）或几对标签来标识一个元素。o 开始标签由一个小于字符“”组成。o 结束标签和

7、开始标签的区别只是在小于字符的后面要加上一个斜杠字符“/”。o 虽然标签名并不区分大写和小写。o 有一些标签可以将结束标签省略。 HTML 文档中标签的用法 一个 HTML 的例子 HTML 很容易掌握 这是第一个段落。虽然很 短，但它仍是一个段落。 这是第二个段落。HTML 文档开始HTML 文档中标签的用法 一个 HTML 的例子 HTML 很容易掌握 这是第一个段落。虽然很 短，但它仍是一个段落。 这是第二个段落。首部开始HTML 文档中标签的用法 一个 HTML 的例子 HTML 很容易掌握 这是第一个段落。虽然很 短，但它仍是一个段落。 这是第二个段落。标题HTML 文档中标签的用法

8、 一个 HTML 的例子 HTML 很容易掌握 这是第一个段落。虽然很 短，但它仍是一个段落。 这是第二个段落。首部结束HTML 文档中标签的用法 一个 HTML 的例子 HTML 很容易掌握 这是第一个段落。虽然很 短，但它仍是一个段落。 这是第二个段落。主体开始HTML 文档中标签的用法 一个 HTML 的例子 HTML 很容易掌握 这是第一个段落。虽然很 短，但它仍是一个段落。 这是第二个段落。1 级标题 一个 HTML 的例子 HTML 很容易掌握 这是第一个段落。虽然很 短，但它仍是一个段落。 这是第二个段落。HTML 文档中标签的用法 第一个段落 一个 HTML 的例子 HTML

9、很容易掌握 这是第一个段落。虽然很 短，但它仍是一个段落。 这是第二个段落。HTML 文档中标签的用法 第二个段落HTML 文档中标签的用法 一个 HTML 的例子 HTML 很容易掌握 这是第一个段落。虽然很 短，但它仍是一个段落。 这是第二个段落。主体结束HTML 文档中标签的用法 一个 HTML 的例子 HTML 很容易掌握 这是第一个段落。虽然很 短，但它仍是一个段落。 这是第二个段落。HTML 文档结束插入图像 结束标签开始标签插入图像插入的图像文件名是 portrait.gif高度是 100 像素宽度是 65 像素万维网页面中的超链接1. 链接到其他网点上的页面o 定义一个超链的标

10、签是。字符A表示锚(Anchor)。o 在HTML文档中定义一个超链的语法是： X 超链的起点这个地方填写超链终点的 URL链接举例清华大学超链的起点是某个文档中的这四个字超链的终点是清华大学的主页2. 链接到一个本地文件o 远程链接：超链的终点是其他网点上的页面。o 本地链接：超链指向本计算机中的某个文件。本地链接本地链接可进行许多的简化：o 协议(http:/)被省略表明与当前页面的协议相同。o 主机域名被省略表明是当前的主机域名。o 目录路径被省略表明是当前目录（对于远程链接，表明是主机的默认根目录）。o 文件名被省略表明是当前文件（对于远程链接，表明是对方服务器上默认的文件名，通常是一

11、个名为 index.html 的文件）。相对路径与绝对路径o .o .o /default.htm 网站首页栏目2栏目2-1栏目3-1123号文件歌曲1下载/menu3/file/file123.htm 网站首页栏目2栏目2-1栏目3-1123号文件歌曲1下载/menu2/2-1.htm 网站首页栏目2栏目2-1栏目3-1123号文件歌曲1下载相对路径名与绝对路径名o 使用简化的 URL，在 HREF= 的后面使用的是相对路径名。o 使用完整的 URL 则是使用绝对路径名。o 使用相对路径名的好处n 绝不是为了少键入一些字符n 而是便于目录的变更。 abc 本文件链接（页内锚）举例X abc文

12、件 F本文件链接的 HTML 语句格式： X 本文件链接在此处定义命名锚起点终点命名锚的定义语句：命名锚的名字命名锚的终点在字符 abc 的前面 远程链接举例远程链接： 清华大学 清华大学清华大学主页文件 F远程链接因特网起点终点三、可视化网页设计 o 工具n Macromedia Dreamweaver MX 2004n Microsoft Frontpage 2003n 记事本/Editplus1、 Dreamweaver MX 2004简介o 设计者视图o 界面介绍o 快捷键n Ctrl-Zn Ctrl-Yn Ctrl-Sn Ctrl-F：查找、替换n F8：站点文件o 菜单n 属性面板

13、关闭后如何打开？2、站点操作o 建立站点n 为什么要建立站点？o 管理方便，打开方便o 更新链接n Dreamweaver中的站点就是发布的站点吗？o 不是，这里仅仅是设计时的站点n 实验室的计算机重新启动后会自动恢复o 实验中每次都要重建o 文件建立在Student盘3、网页制作o 表格嵌套o 导航条、当前位置n 在每个网页中的位置都要一致o 样式表n 重复劳动强度大：定义每个对象的属性o一个网页定义一个样式表o多个网页共用一个样式表文件n 新建样式表文件n 拿来主义色彩的RGB表示o 文字o 三原色 R G Bn 每个原色色彩取值从0255（即0 x00-0 xFF）o 整体的色彩空间n

14、000000到FFFFFF共有2828 28 224个取值o 图中共有几种颜色？下列值代表何种颜色？n #00FF00#FFFF00n #FFFFFF#000000n #C0C0C0 #666666超链接的四个状态oA:link Color: #CC00CC; Text-Decoration: noneoA:hover Color: #666666; Text-Decoration: underlineoA:active Color: #FF0000; Text-Decoration: noneoA:visited Color: #CC00CC; Text-Decoration: noneo

15、如何实现“看不出哪些链接被点击过”？n访问过的颜色未访问过的颜色o 实现方法：nIE设置（只能改一台机器的默认样式）n样式表3、网页制作o 服务器端包含n n 包含文件o 文件扩展名：.shtm 或.aspn 被包含文件.htmo 只有到之间的内容n 如果含有及其闭合标记，被包含之后的结果网页中就会有双份，将出错！n 必须发布出来才能显示o 即必须以http:/的方式访问o 具体见“五、网站设计与发布”4、常见问题o 常见操作问题：n 光标选中元素后，才能设置该元素的属性n Table中TR和TD如何选中？o 状态栏：标签检查器四、图形编辑与动画制作 o 图形文件格式n BMP 位图o 色彩空

16、间、分辨率n JPG 压缩格式n GIFo 多帧动画、透明、256色n PSo 源文件的概念n PNGo 矢量图的概念四、图形编辑与动画制作 o Flash动画文件n矢量动画的概念nflanswfo 编辑制作工具nAdobe PhotoshopnMacromedia FireworksnMacromedia Flasho 编辑制作示例n去除背景、添加文字、添加效果、导出n补间动画、元件、引导线、导出五、网站设计与发布o原理（Browser/Server模式）nHTTP负责请求、回应和网页的传输n服务器的任务o1、等待服务o3、接收请求o4、解释ASP，将执行后得到的HTML结果嵌入HTMLo5

17、、回应n浏览器的任务o2、发送请求（地址栏或点击超链接等）o6、接收文档o7、分析文档，做进一步请求o8、解释HTML，将网页展现在IE的主体部分o9、执行Javascript五、网站设计与发布o 操作系统的选择n Windows Server 2003o 同时连接限制o 多站点o CPU、内存优化服务而不是应用程序n 实验中用Windows XP代替o WEB服务器软件的选择n Internet Information Server（Internet信息服务）六、大作业要求o选题n题目自选，可合作完成一个大的网站o检查形式nIIS发布，异地检查o评分标准n每人不少于10个页面，含首页、框架或

18、SSI、CSS、Javascript、表单（ASP）、自制图形、自制动画n主题明确、风格统一、链接正确、文件名规范n整洁美观、布局合理、界面友好、导航清晰、logo和版权统一o上交要求n作品应小于5M，尽量控制在2M以内，压缩成一个文件o文件名： 专业班级_学号_姓名.raro 如： 材成061_06102060104_陈松.rar）大作业题目大作业题目o 设计、制作、发布网站。o 鼓励团队开发，1-2人一组。o 题目自定：n 专业性强的门户网站n 科技科普、宣传介绍、历史地理、科技军事、文学艺术娱乐n 网页制作的心得、技巧、教程考查内容范围考查内容范围o 网页传输原理n 域名解析、域名的申请和设置指向IPn HTTP请求与答复o