81.网站制作基础知识

1、第8章 网页制作基础知识8.1 网站设计与工作流程8.2 HTML的概念与基本结构8.3 Dreamweaver的使用8.4 Fireworks的使用8.5 Flash动画制作 教学目标通过本章的学习，能够让学生了解网站的设计与工作流程，掌握HTML的基本概念和结构，能利用HTML制作网页,了解和DHTML/XML的区别，能熟练掌握利用Dreamweaver制作网页，利用Fireworks制作图片、利用Flash制作动画；并能有机地结合，制作出精美的网页。8.1网站设计与工作流程8.1.1 网站的主题定位8.1.3 网站的形象设计8.1.4 网站的主页设计 制作网站首先要考虑网站的主题。好的网

2、站不仅应该有美感、个性、创意，更要有质。网站的内容是最重要的因素，空洞的网站对人没有任何的吸引力。网站、网页的主题定位是要注意，网站的主题和名称一定要清楚明了，以避免盲目建设。 1.网站的题材 目前网站的题材主要由新闻、体育、网上聊天、即时信息、ICQ、网上社区、邮件列表、计算机技术、网页网站开发、娱乐网站、旅行、参考、资讯、网上求职、家庭、8.1.1网站的主题定位教育、生活、时尚以及一些体现个人特色的网站。 2.网站的名称 网站的名称也很重要，网站的名字的优劣决定着网站是否更容易被别人接受。他在很大程度上也决定了整个网站的定位。一个好名称必须有概括性、简短，有特色、容易记，还要符合自己的网站

3、的主题和风格，决不要取一个名不副实的好名字，别人第一次上了你的当，下次再也不会光顾了；网站的名称还要合情合理，最好能让人感受到亲切感，当然，还一定要合法，坚决不能带有反动的、色情的、迷信的、危害社会安全的名词语句。8.1.2结构设计1.栏目和版块网站的结构设计其实也就是合理的设计网站的栏目和板块。设计哪些栏目和板块呢？如何合理地去设计呢？网站的内容是网站的质。也就是我们所应该表现的。我们要把他们放在最显眼的地方，位置，比如你想做一个有关网站、网页制作的教程，打算在上面放四个栏目，网站介绍、教程、论坛、留言本，如果按照这样放上去，给人的感觉是重点不够突出，没有表现出教程的重要性，如果你改为网站介

4、绍、教程目录、网页制作教程、网站制作教程、论坛、留言本，会让读者更快更明了地知道你的网站所要表现的内容。 其次，应该有个网站指南或更新的列表之类的栏目。如果想让你的网站有更多的常来的访客，就要做一些更新列表之类的栏目，这样读者可以一目了然地知道更新的内容。 2.目录的结构设计 目录的结构设计要注意以下几点： (1) 按栏目内容建立子目录团队站点成员站点1成员站点2成员站点n 网页1 网页2 . . . 网页n+ 图片目录. (2) 在每个目录下都建立独立的images目录 (3) 目录的层次不要太深 (4) 避免使用中文目录 (5) 尽量使用意义明确的目录 1.设计网站的标志（LOGO) 首先

5、你需要设计做一个网站的标志（ logo）。就如同商标一样，logo是站点特色和内涵的集中体现，是网站文化的浓缩，成功的网站标志让大家一看就能想起你的站点。 2.设计网站的标准色彩 色彩是艺术表现的要素之一，他是光刺激眼睛在传导到大脑的中枢而产生的一种感觉。而网站给人的第一印象来自视觉冲击，确定网站的标准色彩是相当重要的一步，不同的色彩搭配产生不同的视觉效果。 8.1.3形象设计 象设计任何东西一样，我们首先应该在草纸上画出一个草图。我们可以尽可能地发挥我们的想象力，想象他是一种意境。我们可以多画几张，然后从中选择出最佳的一个作为继续使用的蓝本。然后在草案的基础上，将你确定需要的位置的功能模块安

6、排到页面上。这些功能模块主要包含网站标志、主菜单、更新列表、搜索、友情链接、广告条、邮件列表、计数器、版权信息等。在这里我们应该遵循突出重点、平衡协调的原则，将网站的标志、主菜单等最重要8.1.4主页设计 的的模块放在最显眼、最突出的位置上，然后再考虑次要的模块的排放。 其他的页面的设计应该根据首页的设计风格进行设计。我们在进行网站或网页设计的时候，除了加强美感、增加阅览性以外、还要重视体贴。何谓体贴？也就是处在网站访问者的角度去看问题、去考虑，更多地方便访问者。我们在设计时应该处处把握这一点，这样能让你的主页更有魅力。 8.2HTML的概念及基本结构8.2.1 HTML的结构8.2.2 中的

7、标记8.2.3 文本体控制标记8.2.4 文本标记8.2.5 HTML文件的链接8.2.6 DHTML和XML简介 HTML 的全称为Hyper Text Markup Language，即超文本标记语言。 HTML文件 是被网络浏览器读取，产生网页的文件。 头信息标记 My first HTML page 头结束标记 正文起始标记 8.2.1HTML结构 Hi How are you. 这是我的第一个HTML程序 正文结束标记 结束标记 浏览器编译的结果:1. TITLE标明该HTML文件的题目。 格式：TITLE文件题目TITLE 标题栏空间有限，即标题应少于80个字符。 标题元素中不允许

8、出现HTML标记 2.LINK/LINK LINK标记用于显示本文档和其他文档之间的连接关系。 例： REL 参数说明HTML文件及URL两个文档之间的关系，HREF说明目标文档名，用来定义URL和 HTML文件的关系。8.2.2 中的标记 3.META/META META标记用于描述不包含在标准HTML里的一些文档信息。 4. STYLE标记用于定义网页的样式。5.（脚本） SCRIPT的SCRIPT和/SCRIPT标记用于包含脚本。 8.2.3文本体控制标记 文件体中描述的是浏览器中页面显示的内容。1.页面的背景设置 BACKGROUND：背景图案BGPROPERTIES：用来设定背景图案

9、的属性。BGCOLOR：用来设定背景色。TEXT：用来设定文字颜色。 LINK：用来设定未阅读过的超文本链接颜色。 VLINK：用来设定阅读过的超文本链接颜色。 ALINK：用来设定动作中的超文本链接颜色。 8.2.4文本标记 FONT/FONT FONT size# HTML有七种字号，l号最小，7号最大。缺省字号为3；FONT color#可以是6位16进制数 ，也可以是 black、 sliver、 white、 red 、 maroon、 yellow 、 green、 olive、blue、 navy、purple等 ； #可以是各种字体；P即Paragraph， 标记表示一个段落的

10、开始，一段结束可用标记指出，但通常不需要结束标记； 标记叫断行符，相当于换行回车； 标题文字 nl，2，3，4，5，6 1 统一资源定位器URL 统一资源定位器（Uniform Resource Locator）是文件名的扩展 protocol：/machineName:port/ directory / filename machinename是存放该资源主机的 IP地址 directory和filename是该资源的路径和文件名 统一资源定位器也有绝对URL和相对URL之分例：http:/ 8.2.5 HTML文件链接 1 基本概念 DHTML：现有的网页技术与标准的组合。 CSS：译作层

11、叠样式表单，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 XML：可扩展标记语言，定义信息的结构或信息在数据库中存储的方式。2 HTML与 DHTML的区别传统的HTML是静态的，当它被加载到浏览器后，它只像一个画面，怎么看也不会发生变化。8.2.6 DHTML 和 XML简介1 基本概念 DHTML：现有的网页技术与标准的组合。 CSS：译作层叠样式表单，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 XML：可扩展标记语言，定义信息的结构或信息在数据库中存储的方式。2 HTML与 DHTML的区别传统的HTML是静态的。而动态HTML则意味着Web

12、页面对用户有响应，即，动态HTML能自动变化。 8.3 Dreamweaver 的使用8.3.1 网站开发工具8.3.2 Dreamweaver界面介绍8.3.3 创建站点8.3.4 站点的结构规划8.3.5 站点的维护操作8.3.6 创建网页8.3.7 网页布局之表格8.3.8 添加网页内容 8.3.1网站开发工具1.编写代码类如：记事本、HotDog、HomeSite2.设计视图类如：Office FrontPage、Visual InterDev、HotMetal、Netscape编辑器、网页制作三剑客3.Dreamweaver 是在多媒体方面颇有建树的Macromedia 公司推出的可

13、视化网页制作工具，它与 Flash 、Fireworks合在一起被称为网页制作三剑客，这三个软件相辅相承， 是制作网页的最佳选择。Dreamweaver 主要用来制作网页文件，制作出来的网页兼容性比较好，制作效率也很高；4.Flash 用来制作精美的网页动画；5.Fireworks 用来处理网页中的图形。8.3.2 Dreamweaver界面介绍1.工作界面标题栏菜单栏文档窗口文档工具栏插入面板属性面板其它功能区域 2.文档工具栏换到视图（设计、代码、拆分）标题文本框 在浏览器中预览视图选项3.文档窗口和状态栏标签选择器：显示环绕当前选定内容的标签的层次结构。窗口大小下载文件大小/下载时间4.

14、插入（对象）面板 5.属性面板6.一些基本的窗口操作 更改工作区切换视图（Ctrl+-）工具栏的显示和关闭查找需要的功能隐藏面板（F4）寻求软件帮助（F1） 8.3.3创建站点1.本地站点 本地文件夹是我们在硬盘上建立的工作目录。Dreamweaver 将该文件夹作为“本地站点”。2.远程站点 远程文件夹是存储文件的位置，Dreamweaver 该文件夹称为“远程站点”。一般说来，远程文件夹位于运行 Web 服务器的计算机上。3.测试服务器 测试服务器文件夹是 Dreamweaver 处理动态页的文件夹。1 建议：使用英文小写字母命名站点中的文件夹和文件； 2 建议：文件名要易记，要统一命名。

15、 8.3.4站点结构规划 选择菜单“站点-管理站点”，打开编辑站点对话框。8.3.5站点维护操作 1 新建站点； 2 编辑站点； 3 复制站点； 4 删除站点； 5 导入和导出站点。8.3.6 创建网页创建网页的一般过程： 1.设置页面属性 选择菜单“修改-页面属性”，打开页面属性对话框。 2.保存网页 (1)为防止一番辛苦付之东流，建议养成经常保存的习惯。 (2)快捷键 Ctrl+S。3.创建页面布局4.添加网页内容 1.表格及其元素的基本操作 8.3.7网页布局之表格选择 表格、行&列、单元格 添加 行&列 删除 行&列 拆分 单元格 合并 单元格 1,11,21,31,41,52,12,

16、22,32,42,53,13,23,33,43,5其他基本操作： a 剪切、复制、粘贴单元格 (编辑) b 输入文字 c 插入其他对象 （插入） d 自动套用表格格式 （命令） e 排序 （命令） f 将表格转换层 （修改）AA2.表格及其元素的属性设置 表格属性行属性3.应用表格进行页面布局 （1）设置页面属性 （2）使用表格创建页面布局 （3）插入网页对象 （4）保存网页 单元格属性8.3.8添加网页内容1.文本(1)文本的输入普通文本(文字录入或文本拷贝) 特殊字符(插入-HTML-特殊字符) (2)设置字符格式1)字体2)字号3)文本颜色(3)设置段落格式1)标题与段落 2)对齐方式3

17、)缩进(4)设置列表格式(5)文本的属性面板 文本是展示网站内涵的主要形式之一。2.图像 插入图像 将插入点置于想要图片出现的地方，再进行图像的插入操作（支持GIF、JPEG、PNG三种图像格式）。 插入轮换图像 轮换图像就是当鼠标指针经过图片时，图片会显示另外一张隐藏图片。 插入占位符设置图像属性 随着网络带宽的不断拓展，高质量的图片更多的出现在网站上。 设置图像热点区域可以利用热点区域，使一幅图像可以同时不着痕迹地链接多个页面。制作相册 准备工作: Dsn:保存相册文件夹； Src:原始图文件夹； 网页相册支持的图片格式： GIF，JPG，JPEG，PNG， PSD，TIF，或TIFF之一

18、。 “命令-创建网站相册”，设置对话框。8.4 Fireworks 的使用8.4.1 Fireworks的工作界面8.4.2 Fireworks的工具8.4.3 Fireworks文字的处理8.4.4 Fireworks图片的处理8.4.5 Fireworks按钮和菜单的处理 8.4.1Fireworks 的工作界面菜 单文件(F) 编辑(E) 视图(V) 选择(S) 修改(M) 文本(T)命令(C) 滤镜(I) 窗口(W) 帮助(H)新建、打开、关闭、保存、退出图片导入、导出、批处理扫描、页面设置、打印文 件 菜 单使用 Fireworks注册关于 Fireworks帮 助 菜 单撤销和重复

19、剪切、复制、粘贴、重制、克隆插入、库编 辑 菜 单选 择 菜 单修 改 菜 单命 令 菜 单文 本 菜 单其他杂点模糊调整颜色锐化Eye Candy 4000 LEAlien Skin Splat LE滤 镜 菜 单隐藏面板工具栏工具、属性其他浮动面板层叠、平铺当前打开的文档窗 口 菜 单8.4.2 Fireworks 的工具1.选择工具 指针、选择后方对象 部分选定 变形（缩放、倾斜、扭曲） 裁切、导出区域 2.位图工具矩形选取框、椭圆形选取框 魔术棒 铅笔 模糊、锐化、减淡、烙印、涂抹 吸管 套索、多边形套索 刷子 橡皮擦 橡皮图章 、替换颜色、消除红眼 颜料桶、渐变 3.矢量工具 直线

20、钢笔、矢量路径、重绘路径 矩形、椭圆、多边形、其他形状 字符 自由变换、更改区域形状 刀子 4.Web 网页工具 热点（矩形、圆形、多边形） 切片（矩形、多边形） 隐藏热点和切片 显示热点和切片5.颜色工具 描边颜色井 填充颜色井 重置描边和填充的颜色 取消描边或填充的颜色 调换描边和填充的颜色6.视图工具 标准屏幕模式 带有菜单的全屏模式 全屏模式 手形 放大镜 7.属性面板8.层面板9.优化面板10.形状面板1.文字实例填充字设置图案填充；8.4.3 Fireworks 文字的处理发光字设置外发光效果；立体字设置斜角效果；描边字印章字2. 文字矢量分割字（小刀工具、路径的合并与组合）文字的

21、曲线分割(1) 画椭圆、输入文字。(2) 选中文字，“文本-转换为路径”，然后“修改-组合路径-合并” 。(3) 再克隆文字、椭圆。(4) 选中克隆出来的文字和椭圆，“修改-组合路径-相交”，这样得到了一个残缺的文字，选中它并改变颜色。3 文字位图动感字网格字1.图像的修饰效果添加边框设置发光效果如图。Edges滤镜8.4.4 Fireworks 图片的处理偏色颜色填充效果。层间混合模式。2.羽化效果3.蒙板效果位图蒙板Alpha 通道、灰度矢量蒙板8.4.5 Fireworks 按钮和菜单的处理(1) 新建按钮操作 使用菜单“编辑-插入-新建按钮”；(2) 按钮的状态 释放、滑过、按下、滑过后按下； (3) 按钮的制作 使用编辑工具制作按钮，或者导入按钮再编辑。 1.按钮的处理2.菜单(1)创建菜单(2)添加热点3.添加弹出菜单4 .调整8.5 Flash动画制作8.5.1 Flash的工作界面8.5.2 Fireworks的工具和面板8.5.3 Flash动画制作8.5.4 Flash的动画效果 8.5.1 Flash 的工作界面 8.5 Flash 动画制作Flash 是矢量图形编辑工具，是网络动画编辑软件。1.时间轴面板8.5