网站建设与网页制作课程知识讲稿

《网站建设与网页制作课程知识讲稿》由会员分享，可在线阅读，更多相关《网站建设与网页制作课程知识讲稿（467页珍藏版）》请在金锄头文库上搜索。

1、网页设计与制作 吕戈静 2016 10 教学目标 通过本章的学习 能够让学生了解网站的设计与工作流程 掌握HTML的基本概念和结构 能利用HTML制作网页 了解和DHTML XML的区别 能熟练掌握利用Dreamweaver制作网页 利用Fireworks制作图片 利用Flash制作动画 并能有机地结合 制作出精美的网页 第1章网页设计概述 知识目标 掌握网页 网站及主页的概念了解网页中的主要元素了解各种网页制作工具8 能力目标 各种网页制作工具的配合使用网站的整体规划网站的设计流程 1 1网页和网站1 2网页中的主要元素1 3网页制作工具1 4网页设计的基本流程本章小结 第1章网页设计概述

2、1 1网页和网站 1 1 1网页1 1 2网站1 1 3网页的基本功能 1 网页网页 WEB 是用html语言编写的 通过www网传输 并被web浏览器翻译成可以显示出来的集合文本 图片 声音和动画等信息元素的页面文件 网页示例 2 网页的类型根据页面内容可以分首页 主页 专栏网页 内容网页和功能网页等类型 按制作技术分为静态网页与动态网页 1 1 1网页 1 1网页和网站 网站就是把一些网页等信息文件通过超链接的形式关联起来形成的信息文件的集合 信息可以是网页形式也可以是其他的文档形式 网页与网站的区别与联系 网站是一个文件夹 其中的文件不仅是网页还有网站所需的其他文件或文件夹 网页是一个页

3、面文件 用来发布各种信息 网页是网站的构成要素 是网站信息发布与表现的一种主要形式 网站是网页通过超链接形成的集合 1 1 2网站 1 1网页和网站 1 媒介的作用 使用者与信息之间的媒介 一方面是发布者 功能是发布信息 另一方面是浏览者 功能是提供浏览的信息 通过浏览网页找寻需要的信息 2 互动的作用 浏览者与网页制作单位之间互动的窗口 可以单向或双向传递信息 3 传输的作用 作为传输各种电子文件或信息之用 如下载说明书 更新文件 驱动程序等 1 1 3网页的基本功能 1 1网页和网站 1 2网页中的主要元素 1 2 1文本1 2 2图像1 2 3链接标志1 2 4其他的基本要素 网页的基本

4、要素一般包括 文字 图像 动画和链接标志等 除此之外 网页的元素还包声音 多媒体和视频等 是网页中最基本的元素 网页中文字的设计一般从以下几个方面来考虑 1 字体的选择 2 字号 行距的选择 3 特殊字体的使用 4 字体的颜色 1 2 1文本 1 2网页中的主要元素 现在网络上使用的绝大多数图片和图像是gif jpeg和png文件格式 网页上使用图像要注意的问题 JPEG格式适合于照片图像 GIF格式适合于包含纯色的图像 例如插图和线条图 利用图像编辑软件来放大或缩小图像 屏幕显示图像的分辨率一般为72dpi 制作图像时 不必使用比此再高的分辨率 1 2 2图像 1 2网页中的主要元素 如果建

5、立的图像中只有黑色和白色 处理时可将它保存为黑白图像格式 这样可以减少图像文件的大小 如果设计的GIF格式图像包含了渐变和直线 应尽量使得它们水平 因为GIF格以每条水平线为基础来压缩 尝试各种不同的JPEG压缩率 使用合适的色彩模式 慎用动画 1 2 2图像 1 2网页中的主要元素 链接也叫超链接 Hyperlink 是从一个网页指向另一个目的端的链接 是页面间的链接关系 链接标志 载体 指的是网页中特殊的文本或图像 它们常常用不同的颜色和下划线来标识 在浏览器中 访问者可以用鼠标单击它们 能够从当前的网页转到链接的目的端位置 超链接的标志一般有 文本 图像 热区三种 要注意的是 所有超链接

6、标志均应清晰无误地向浏览者标识出来 让人一看就知道 1 2 3链接标志 1 2网页中的主要元素 除上述几种要素之外 在网页上经常使用的还有动画 视频 声音等各种信息的形式 1 动画 目前网络上常用的动画类型有gif和Flash动画两种 2 视频 是多媒体网页的一个重要组成部分 常用的视频格式有avi mpeg和mov等 视频会大大增加网页的文件量 从而使用访问速度受到影响 因此要慎用 3 音频 在网页中插入音频会增加网页的生动性 常用的音频格式有rm ram midi wav和mp3等格式 音频文件和视频文件一样都会增加网页的文件量 因此要慎用 1 2 4其他的基本要素 1 2网页中的主要元素

7、 1 3网页制作工具 1 3 1网页编辑工具1 超文本标识语言 HTML 2 FrontPage简介3 Dreamweaver1 3 2网页图像编辑工具1 3 3动态网页技术 1 Photoshop 是Adobe公司开发的 是当今最流行的图形图象处理软件之一 它能够实现各种专业化的图像制作 处理及合成 2 Fireworks 是由Macromedia公司开发的图形处理工具 它是第一个专门为制作网页图形而设计的软件 同时也提供专业的网页图形设计及制作的解决方案 3 Flash Macromedia公司出品的Flash是目前非常流行的一种交互式Web矢量动画软件 Dreamweaver和Flash

8、 Fireworks三个软件被称为 网页三剑客 是现在公认的比较标准的网页制作利器 1 3 2网页图像编辑工具 1 3网页制作工具 动态网页可以实现网页浏览者和网页设计者的交互 实现交互技术有两种 一种是客户端技术如常用的JavaScript和VBScript 另一种是服务器端技术如目前常用的ASP和PHP 1 ASP ActiveServerPages 2 PHP HypertextPreprocessor 3 JSP JavaServerPages 1 3 3动态网页技术 1 3网页制作工具 1 4网页设计的基本流程 1 4 1网站的设计流程1 4 2网页的设计与制作1 4 3网页的测试1

9、 4 4网页上传和发布 1 确定网站的主题2 规划网站的整体结构3 收集整合网页素材4 确定网页版面布局 5 制作网页 6 添加网页特效 7 测试和发布网站 1 4 1网站的设计流程 1 4网页设计的基本流程 1 确定网页的版面布局 1 平衡性 2 对称性 3 对比性 4 疏密度 5 比例 6 韵律感 网页的排版布局是决定网站美观与否的一个重要方面 通过合理的 有创意布局 才可以把文字 图像等内容完美地展现在浏览者前面 2 网页设计与制作网页设计与制作一般分为静态网页制作和动态网页制作两类 1 4 2网页的设计与制作 1 4网页设计的基本流程 1 浏览器兼容性测试 目前浏览器有 Interne

10、tExplorer与Netscape两大主流浏览器 二者对HTML和CSS等语法的支持度是不同的 在Dreamweaver中提供了可以检查网页中是否含有某版本浏览器不能识别的语法功能 设计者可以借助其进行检查 2 平台的兼容性测试 设计要为用户着想 必须最少在一台PC和一台Mac机上测试你的网站网页 看看兼容性如何 3 超链接完好性测试 超链接是连接网页之间 网站之间的桥梁 浏览者是不愿意访问一个经常出现 找不到网页 的问题的网站 作为设计者必须检测超链接的完好性 保证链接的有效性 不要留下太多的坏链接 1 4 3网页的测试 1 4网页设计的基本流程 网页设计好 必须把它发布到互联网上 否则网

11、站形象仍然不能展现出去 发布的服务器可以是远程 也可以是本地 如果是发布到互联网上 要先申请域名和主页空间 然后再利用专用软件 如 CuteFTP 上传 FTP有很多种软件 最著名的是CuteFTP和LeapFTP 也可以用Dreamweaver内置的FTP上传 1 4 4网页上传和发布 1 4网页设计的基本流程 本章小结 第1章网页设计概述 知识目标 了解HTML文件的基本结构掌握HTML中文本的编辑及图像的语法掌握HTML中各种设置超级链接的语法掌握HTML中表格和框架的基本语法8 能力目标 掌握进行文本及图像的编辑操作掌握创建各种超级链接的操作能够编写简单的HTML网页掌握HTML文件中

12、表格和框架的使用 第2章HTML语言基础 2 1HTML概述2 2文本的编辑2 3图像编辑2 4建立超链接2 5表格与框架本章小结 第2章HTML语言基础 2 1HTML概述 2 1 1HTML简介2 1 2HTML语法结构 HTML HyperTextMarkupLanguage 又称超文本标识语言 是一种标识性的语言 是网页设计的最初语言 文件的扩展名 html 或 htm 例2 1简单的HTML文档 长春欢迎您 这里是长春悠游网 我们带您畅游长春 由 组成的就是标记 在HTML语言中标记分 单标记 和 围堵标记 2 1 1HTML简介 2 1HTML概述 1 围堵标记格式 2 单标记格式

13、 只有起始标记 没有结束标记 最常用的单标记是 它表示段内换行 3 标记属性格式 各属性间无前后顺序 属性也可省略 当省略属性时取标记的默认值 2 1 1HTML简介 2 1HTML概述 HTML文档的基本结构 文件开始标头区开始 标题区标头区结束文件主体内容开始文件主体内容 文件主体内容结束文件结束其中之间表示这是个网页文件 是必有的标记 2 1 2HTML语法结构 2 1HTML概述 2 2文本的编辑 2 2 1段落标记2 2 2文本标记2 2 3标题显示等级2 2 4列表 1 段落 基本语法格式为 其中参数align用于设定段落的位置是靠左 靠右还是居中 默认值是靠左 除align之外还

14、有其他参数如class class参数是可选项 如果没有将按照默认值显示 2 换行单标记 放在一行的末尾 可以在一个段落内实现文本的强制换行 设置标记后面的文本字 图像和表格等内容显示于下一行 2 2 1段落标记 2 2文本的编辑 1 字体标记其基本语法格式为 Size 设置字体的显示字号 范围是从 1 7 其中 3 是默认值 Color 设置文本的颜色 值可以是颜色名 英文如red代表红色 或颜色的十六进制代码 000000代表黑色 FFFFFF代表白色 Face 设置文本显示的字体 值为字体的名称 在文本的标记中还有很多常用的标记 比如表示字体效果的 黑体 斜体 加下划线 2 2 2文本标

15、记 2 2文本的编辑 2 特殊字符HTML中除了我们上面学的的一些标记外 还有一些我们常用的特殊字符比如 这些特殊字符在HTML语言中都有对的转义符 常用的转义符与特殊字符参见下表 2 2 2文本标记 2 2文本的编辑 3 水平线标记水平线是在网页上划出一条水平的分割线 用来标记水平线 语法格式为 Size 设置水平线的高度 以像素为单位 Color 设置水平线的颜色 Width 设置水平线的宽度 单位是像素或百分比 像素是绝对大小 不会随着程序窗口的大小而改 百分比是相对于程序窗口水平线所占的比例 会随着程序窗口的大小而改变 Align 设置水平线的对齐方式 对齐方式有左对齐 居中 右对齐三

16、种 2 2 2文本标记 2 2文本的编辑 语法格式为 n 表示不同级别的标题 n值可以是1 6中的任意数字 其中1表示的标题字体最大 另外 可以用align属性设置对齐方式 常用的有左对齐 居中 右对齐三种对齐方式 2 2 3标题显示等级 2 2文本的编辑 在HTML中 列表常用的有 有序列表 和 无序列表 1 有序列表基本语法结构为 项目1项目2 项目n 2 2 4列表 2 2文本的编辑 1 有序列表Type 设置列表的序号类型 常用序号如下 n 1 用数字作为序号 n A 用大写字母作为序号 n a 用小写字母作为序号 n I 用大写罗马数字作为序号 n i 用小写罗马数字作为序号 Start 为可选参数 用于设置序号的起始数值 如不添加 start 则从每类序号的第一个序号开始 2 2 4列表 2 2文本的编辑 2 无序列表基本语法结构为 项目1项目2 项目nType 设置符号形状 有实心圆 小正方形 空心圆三种 具体如下 n disk 符号为实心圆 n square 符号为正方形 n circle 符号为空心圆 2 2 4列表 2 2文本的编辑 2 3图像编辑 2 3 1插入图