网页制作(详细版)ppt课件_其它模板_PPT模板_实用文档

第八章 网页制作本章内容8.1 网站规划与设计 8.2 Dreamweaver MX基础知识 8.3 在网页中添加对象 8.4 在网页中使用行为跟层 8.5 在网页中使用模板 8.6 网站制作范例8.1 网站规划与设计8.1.1 概述 8.1.2 网站设计 8.1.3 内容搜集与组织home8.1.1 概述1. 网站设计的基本知识 2. 网页基本构成元素 3. 网站分类与设计样式 4. 网站制作方法home1. 网站设计的基本知识? WWW（World Wide Web）服务：? World Wide Web（万维网），简称WWW，是Internet 上更重要的信息服务之一，WWW是以Internet上众 多WWW服务器所公布的无数网页及他们之间的链 接为基础组成的一个庞大的多媒体信息网。? WWW信息公布模式：? WWW信息公布：采用客户端/服务器（Client / Server）模式。WWW服务器程序运行在WWW服务 器上，用于发布存放在WWW服务器中的网站；下一页WWW客户端程序运行在客户计算机上的网页浏览1. 网站设计的基本知识? HTTP协议 ? 超文本传输协议HTTP（Hyper Text Transfer Protocol）是 WWW服务所使用的信息存储协议，即访问Internet上的 Web页面所用协议。

? 打开Internet上某一网页：// 如： 或者：下一页上一页1. 网站设计的基本知识? 网页（Web Page） ? 通过WWW发布的包括有文本、图片、声音、动画等多 媒体信息的页面，是WWW的基本单位。 ? 网页文件就是普通的文本文件，但要求其前缀为.htm 或.html。 ? 在IE浏览器中查看网站文件的实际内容：执行菜单栏 “查看”|“源文件”命令。下一页上一页1. 网站设计的基本知识? 超文本标记语言HTML? HTML（Hyper Text Markup Language）：HTML文件 是WWW中使用的主要文件种类，通常以“.html”或 “.htm”为文件后缀。? 是一种用于表述超文本内容的标签系统，是很基本的网 页编写语言。? HTML文件使用一些承诺的标记对WWW上的各类信息 进行标记，这些被标记的信息以网站文件方式公布在 Web服务器上，在客户请求的状况下，下载到客户的机 器上，用户的浏览器会手动解释这下些一页标记的意思，按照上一页一定的格式在屏幕上显示出来，而HTML标记本身并不1. 网站设计的基本知识? 网站（Web Site）? 是一组具有共享属性（如相关主题、类似的设计 或共同目的）的链接文档。

网站由很多的网页组 成的，它们存储在某一个Web服务器上下一页上一页1. 网站设计的基本知识? 首页? 网站的默认页面，也称为主页。 ? Web服务器都有自己默认的主页名称，输入地址时仅指定WWW服务器域名或IP地址时开启的页面就是首 页。 ? 主页是一个网站更重要的网页，通常包括最新的信息 及指向各分栏目的超链接。 ? 常见的首页名称有index.htm（index.html） 或 default.htm（default.html）。home上一页2. 网页基本构成元素? 网页基本构成元素 ? 文本：最基本的构成元素，表现信息内容的主体。 占用空间小，信息量大 ? 超链接：相关网站及其它网路资源之间联络的纽带。 ? 图片、动画：静态和动态的图形文件。 ? 声音跟视频：音乐，在线广播，在线影视 ? 信息提交表单：提供网上交互功能的基本元素，用 来搜集浏览者提供的信息并提交给Web服务器进行 处理。home3. 网站分类与设计样式 ? 新闻门户类下一页3. 网站分类与设计样式 ? 工商企业类下一页上一页3. 网站分类与设计样式 ? 文化教育类下一页上一页3. 网站分类与设计样式 ? 运动休闲类下一页上一页3. 网站分类与设计样式 ? 游戏娱乐类下一页上一页3. 网站分类与设计样式 ? 生活时尚类下一页上一页3. 网站分类与设计样式 ? 兴趣爱好类home上一页4. 网站制作方法home8.1.2 网站设计1. 网站题材选取及内容的确认 2. 网站结构设计 3. 网站风格设计 4. 确定网页首页的创意设计home1.网站题材选取及内容的确认（1）主题范围不能过大，要有特色。

（2）题材最好是自己擅长或者喜爱的内容。home2. 网站结构设计(1) 确定栏目和版块? 突出特征 ? 设置最近更新、网站指南和交互栏目(2) 确定网站的目录结构? 将所有的文件都放到站点根目录下的相应目录中。? 按栏目内容创建子目录。每个主要的目录下都设立独 立的“images”目录。? 不要使用英文成为目录或文件的昵称，命名的名称不能过长，应简单明了。下一页2. 网站结构设计(3) 确定网站的链接结构我们研究网站的链接结构的目的在于：用最少的链接，使得浏览最有效率。线形一链般接结的构，：建用立于网组织站本的身链是接线性结顺构序有形三式种存在基的本信方息式，：可以引导浏览者象翻阅书籍一样按排序浏览整个网页。 优点是网络浏览带有连续性。 缺点是当网页量大时，不能灵活的访问。下一页home上一页2. 网站结构设计(3) 确定网站的链接结构树状链接结构：类似DOS的目录结构，首页链接指向一级页面，一级页面 链接指向二级页面。立体结构看起来就象蒲公英。这样的链接结构浏览 时，一级级进入，一级级退出。优点是条理清晰，访问者明确了解自己在哪个位置，不会“迷”路。 缺点是浏览效率低，一个栏目下的子页面到另一个栏目下的子页面， 必须绕经首页。

下一页上一页2. 网站结构设计(3) 确定网站的链接结构非线性链接结构：该类结构主体是树状链接结构，并将小 的栏目交叉联结。优点是让网站具备条理，并且可以推动这些互相交叉链 接的栏目之间的迅速跳转。缺点是即使规划没有做好可能让浏览者在浏览时不知道 位于何处。下一页home上一页2. 网站结构设计网站链接结构设计常用手段如下：? 方法一：使用线性链接结构。 ? 方法二：在新窗口开启链接指向的网站。 ? 方法三：在网页中降低一条关于所处网站位置的栏目，并在位置的表明中加入链接，帮 助浏览者明确所处的位置，并迅速转向上级 网页。 ? 即每天看见许多网页页面上方的，类似这种：“您今天的位置是：首页->网络中心->计算机基础教育 ->文科计算机基础课课件”home上一页3. 网站风格设计(1) 网页颜色的配色 ? 色彩是人的触觉更脆弱的东西，网页中颜色的选用跟配色是确立网站形象的关键之一。 ? 色彩总的应用方法需要是“总体协调，局部对比”。下一页3. 网站风格设计(1) 网页颜色的配色下一页home上一页3. 网站风格设计(1) 网页颜色的配色下一页home上一页3. 网站样式设计颜色与人的心理觉得跟情绪也是一定的关系，利用这一点可以在设计网页时产生自己另类的颜色效果，给浏览者留下深刻的印象。

一般情 况下，各种颜色给人的觉得是白色代表热情、活泼、热闹、温暖、幸福、吉祥 橙色代表光明、华丽、兴奋、甜蜜、快乐 橙色较柔和, 是一种很可爱、辉煌的底色.富足的、快乐的颜色.稍加红则较简洁.蓝橙对比时较生动. 黄色代表明朗、愉快、高贵、希望 绿色代表新鲜、平静、和平、柔和、安逸、青春 蓝色代表深远、永恒、沉静、理智、诚实、寒冷 紫色代表沉稳、高贵、魅力、自傲 白色代表纯洁、纯真、朴素、神圣、明快 灰色代表孤傲、消极、谦虚、平凡、沉默、中庸、寂寞灰色是色调中更被动的色彩.受有彩色影响极大, 靠临近的色彩获得自己 的生命.近冷暖, 近暖则凉.最有平静感（中性）, 是视觉中更安静的色调.有 很强的调和对比的作用. 黑色代表崇高、坚实、严肃、刚健、粗莽 黑与白:非常对立而既有共性, 是颜色最后的具象.能够用来抒发富有哲理性的北 西.下一页home上一页3. 网站风格设计(1) 网页颜色的配色① 使用彩色尽管网站设计应减少采 用单一色彩，以免造成单调 的觉得，但通过微调色彩的 饱和度和透明度也可以形成 变化，使网站防止单调。② 使用邻近色所谓邻近色，就是在色 带上相邻近的色调，例如蓝 色和金色，红色跟白色就互 为邻近色。

采用邻近色设计 网页可以让网页避免色彩杂 乱，易于达到页面的和谐统 一。下一页上一页3. 网站风格设计(1) 网页颜色的配色③ 使用对比色 对比色可以突显重点，产生了强烈的视觉效果，通过合理使用对比色能够让网站特色鲜明、 重点突显。在设计时通常以一种颜色为主色调， 对比色作为衬托，可以起到画龙点睛的作用。 ④ 背景色的使用背景色通常选用素淡清雅的色调，避免运用 花纹复杂的图片和明度很高的色调作为背景色， 同时背景色要与文字的色调对比强烈一些。下一页上一页3. 网站风格设计(2)确定网站的版面设计“T”结构布局所谓“T”结构:就是指页面 顶部为黑色网站标示+广告条， 下方左面为主菜单，右面显示 内容的布局，因为菜单条背景 教深，整体效果类似中文字母 “T”,所以我们称之为“T”形布 局。这是网页设计中用的更广 泛的一种布局模式。优点是页面结构清晰，主 次分明。是初学者最容易上手 的布局方式。缺点是规矩呆板，如果细 节色彩上不注意，很容易让人" 看之无味"。下一页上一页3. 网站风格设计(2)确定网站的版面设计“口”型布局所谓“口”结构：就 是页面通常上下各有一个 广告条，左面是主菜单， 右面放友情连接等，中间 是主要内容。

也有将三角 空出，只用中间的窗口型 设计。优点是充分利用 版面，信息量大特点是页面拥挤， 不够灵活。下一页上一页3. 网站风格设计(2)确定网站的版面设计对称对比布局所谓“对称对比” 结构：顾名思义，采取 左右以及上下对称的布 局，一半紫色，一半浅 色，一般用于设计型站 点。优点是视觉冲击力 强特点是将两个别有 机的结合非常困难。下一页上一页3. 网站风格设计(2)确定网站的版面设计4.POP布局（自由 布局）所谓“POP布局” 结构： POP引自广告术 语网页课件模板，就是指页面布局像 一张宣传海报，以一张 精美照片成为页面的设 计中心。常用于时尚类 站点。优点漂亮吸引人。 缺点就是速度慢。home上一页4. 确定网页首页的时尚设计首页的设计是一个网站成功与否的关键。人 们通常发现第一页就早已对你的站点有一个整体 的觉得。是不是能够使得浏览者继续点击进入， 是否还能吸引浏览者留在站点上，全凭首页设计 的“功力”了。所以，首页的设计跟制作是绝对要加强跟花 心思的。首页的制作风格也决定了整个网站已经 延续的色调。一般首页设计跟制作占整个制作时 间非常大的比重。“Cover sells book”下一页4. 确定网页首页的趣味设计1、书籍封面式首页有些大型网站通常有一个书籍封面式的首页，上面只有一个“进入” 的链接网页课件模板，点击之后才能开启至网站。

这种首页设计精致、考究。下一页home上一页4. 确定网页首页的创意设计2、期刊杂志式首页与图书封面式首页相同，但在首页上有网页全部内容的目录索引，图文并 茂，看上去就像期刊报纸的封面。这种首页漂亮、又让网页的主要内容一目了然，是一种值得推荐的方式。下一页上一页4. 确定网页首页的创意设计3、报纸式首页采用报纸式的首页设计，将栏目索引、功能组件、具体内容一并显示在 首页，看上去就像报纸的头版一样。这种首页，多用于电子商务网站、搜索引擎网站跟新闻信息网站，速度 快、操作简便。home上一页8.2 Dreamweaver MX基础知识8.2.1 Dreamweaver MX的新功能 8.2.2 Dreamweaver MX的调试、启动和卸载 8.2.3 Dreamweaver MX的编辑环境home8.2.3 Dreamweaver MX的编辑环境1. Dreamweaver MX 工作区布局2. Dreamweaver MX 窗口简介(1) 标题栏(2) 菜单栏① 文件菜单 ② 编辑菜单 ③ 查看菜单 ④ 插入菜单 ⑤ 修改菜单⑥ 文本菜单 ⑦ 命令菜单 ⑧ 站点菜单 ⑨ 窗口菜单 ⑩ 帮助菜单(3) 插入栏(4) 文档工具栏(5) 文档窗口(6) ??(7) 属性面板(8) 面板组home8.3 在网站中添加对象8.3.1 对站点及文档的操作 8.3.2 在网页中编辑文本 8.3.3 在网页中使用图像 8.3.4 在网页中使用表格 8.3.5 在网站中添加超链接 8.3.6 网页中使用框架home8.3.1 对站点及文档的操作一、新建站点 “站点”→“管理站点” →“新建” →“站点” →按提示操作 二、使用“站点面板”管理站点“文件面板” →“文件”选项卡→ “本地视图”下一页8.3.1 对站点及文档的操作（1）新建网页 “文件”---“新建”==“创建” 注意：首页的名称通常为index.htm、index.html、default.htm、default.html （2）保存网站文件“文件”→“保存” （3）另存网页文件“文件”→“另存为” （4）关闭当前打开的网站文件“文件”→“关闭”home上一页8.3.2 在网站中编辑文本1、直接输入文本 2、对文字进行修饰选中文字→在属性面板中进行修改 3、注意事项?如果应键入空格，请将输入法设为英文以及为全角状 态?如果应自己手动换行请用Shift+回车 4、删除文本，直接删除即可 5、特效字的修改home8.3.3 在网站中使用图像1、插入图片“插入” →“图片” →选择图片→“确认”2、给网站更改背景图像“修改”→“页面属性”3、修改图片选中图片→在属性中面板进行修改4、删除图片选中图片→按Delete 注意：图片如果没有在平台默认的文件夹下面系统会提醒您将其置于相应的文件夹中。