网站制作基础知识课件

《网站制作基础知识课件》由会员分享，可在线阅读，更多相关《网站制作基础知识课件（96页珍藏版）》请在金锄头文库上搜索。

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.2 网站的结构设计 8.1.3 网站的形象设计 8.1.4 网站

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

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

4、去，给人的感觉是重点不够突出，没,有表现出教程的重要性，如果你改为网站介绍、教程目录、网页制作教程、网站制作教程、论坛、留言本，会让读者更快更明了地知道你的网站所要表现的内容。 其次，应该有个网站指南或更新的列表之类的栏目。如果想让你的网站有更多的常来的访客，就要做一些更新列表之类的栏目，这样读者可以一目了然地知道更新的内容。 2.目录的结构设计 目录的结构设计要注意以下几点： (1) 按栏目内容建立子目录,(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之分 例：,8.2.5 HTML文件链接,1 基本概念 DHTML：现有的网页技术与标准的组合。 C

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

12、动态HTML则意味着Web页面对用户有响应，即，动态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、HomeSite 2.设计视图类 如：Office FrontPage、Visual InterDev、HotMetal、Netscape编辑器、网页制作三剑客 3.Dreamweaver 是在多

13、媒体方面颇有建树的Macromedia 公司推出的可视化网页制作工具，它与 Flash 、Fireworks合在一起被称为网页制作三剑客，这三个软件相辅相承，,是制作网页的最佳选择。 Dreamweaver 主要用来制作网页文件，制作出来的网页兼容性比较好，制作效率也很高； 4.Flash 用来制作精美的网页动画； 5.Fireworks 用来处理网页中的图形。,8.3.2 Dreamweaver界面介绍,1.工作界面 标题栏菜单栏 文档窗口文档工具栏 插入面板属性面板其它功能区域,2.文档工具栏 换到视图（设计、代码、拆分） 标题文本框 在浏览器中预览 视图选项 3.文档窗口和状态栏 标签选

14、择器：显示环绕当前选定内容的标签的层次结构。 窗口大小 下载文件大小/下载时间 4.插入（对象）面板,5.属性面板 6.一些基本的窗口操作 更改工作区 切换视图（Ctrl+-） 工具栏的显示和关闭 查找需要的功能 隐藏面板（F4） 寻求软件帮助（F1）,8.3.3创建站点,1.本地站点 本地文件夹是我们在硬盘上建立的工作目录。Dreamweaver 将该文件夹作为“本地站点”。 2.远程站点 远程文件夹是存储文件的位置，Dreamweaver 该文件夹称为“远程站点”。一般说来，远程文件夹位于运行 Web 服务器的计算机上。 3.测试服务器 测试服务器文件夹是 Dreamweaver 处理动态

15、页的文件夹。,1 建议：使用英文小写字母命名站点中的文件夹和文件； 2 建议：文件名要易记，要统一命名。,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网页布局之表格,选择 表

16、格、行&列、单元格 添加 行&列 删除 行&列 拆分 单元格 合并 单元格,其他基本操作： a 剪切、复制、粘贴单元格 (编辑) b 输入文字 c 插入其他对象 （插入） d 自动套用表格格式 （命令） e 排序 （命令） f 将表格转换层 （修改）,2.表格及其元素的属性设置 表格属性,行属性,3.应用表格进行页面布局 （1）设置页面属性 （2）使用表格创建页面布局 （3）插入网页对象 （4）保存网页,单元格属性,8.3.8添加网页内容,1.文本 (1)文本的输入 普通文本(文字录入或文本拷贝) 特殊字符(插入-HTML-特殊字符) (2)设置字符格式 1)字体 2)字号 3)文本颜色 (3)设置段落格式,1)标题与段落 2)对齐方式 3)缩进 (4)设置列表格式 (5)文本的属性面板 文本是展示网站内涵的主要形式之一。,2.图像 插入图像 将插入点置于想要图片出现的地方，再进行图像的插入操作（支持GIF、JPEG、PNG三种图像格式）。 插入轮换图像 轮换图像就是当鼠标指针经过图片时，图片会显示另外一张隐藏图片。 插入占位符 设置图像