当前位置：文档之家 › 第1章 网页设计制作概述

第1章 网页设计制作概述

  • 格式：ppt
  • 大小：699.50 KB
  • 文档页数：26

下载文档原格式

  / 26

合集下载

网页设计与制作- 第01章_网页设计概述

网页设计与制作- 第01章_网页设计概述
14
网页设计与制作
1.1 网页基本概念
– 7．导航栏：导航栏的作用是引导浏览者准确、 方便地查看当前网站的不同内容并在相关页面之 间自由跳转。实际上，导航栏就是一组相对固定 的超链接，链接的目标就是站点中的主要网页。
– 8．表单：网页中的表单类似于Windows程序的 窗体，主要用来将浏览者输入的信息提交给服务 器端程序进行处理。表单是提供交互功能的基本 元素，例如问卷调查、信息查询、用户注册、网 上订购等，都需要通过表单进行客户端信息的收 集工作。
7
网页设计与制作
1.1 网页基本概念
• 例1.1 打开记事本（notepad.exe），输入如
下内容，将文件保存为ep1_1.html，然后双击
ep1_1.html在浏览器中打开并预览。效果如图
所示。
<html> </html>
<head> </head> <body>
</body>
<title>我的HTML网页</title>
– 9．其他常见元素：网页中除了以上几种最基本 的元素之外，还有一些其他的常见元素，包括悬 停按钮、Java特效和ActiveX特效等。这些元素 使网页更加丰富多彩和生动有趣。
15
网页设计与制作
1.2 网页浏览的基本原理
• 1.2.1 WWW服务器工作模式 • 1．客户机和服务器
– Web服务是建立在客户机/应用服务器/数据 库服务器（Client/ Server/ Database Server，C/S/DS）三层结构模型之上的， 在网络环境中，客户机向服务器发出服务请 求，服务器接收并处理客户的请求，最后将 结果返回到客户机。

第一章 网页制作概述

第一章 网页制作概述
春顺制作
1.2.5 页眉和页脚
• 页眉指的是页面顶端的部分， • 大多数网站制作者会再此设置网站宗旨、 宣传口号和广告语等，有的则把他设计成 广告位出租。 • 页眉的风格一般要求和页面的整体风格保 持一致。一个富有个性和特色的页眉将和 网站标志一样起到标识及定义页面主体的 作用 • 站点的名字多数在页眉中。
1.1.3 网页制作相关术语
• 2.统一资源定位器（URL） • 俗称“网址” • 定位器（Locator）的作用就是要指出这些 资源的所在处。 • 3.万维网（WWW） • 是 World Wide Wed（环球信息网）的缩 写，起源于1989年3月。由欧洲粒子物理实 （CERN）所发展出来的主从结构分布式超 媒体系统。
1.1.3 网页制作相关术语
• 9. FTP协议：局域网传输协议 • 10. IP地址： • 32位二进制表示
春顺制作
本节小结
• 网页的基本概念
•
你学会了 吗?
春顺制作
1.2 网页构成要素
• 互动问题 • 1. 不同性质的网站，其页面布局以及类容的安排 是不同的，都有哪些要素？
• 2. 网站的主体内容要注意些什么？
第一章
网页制作概述
主讲： 解春顺
2009年7月20日
1.1 网页基本概念
• • • • • 互动问题 1.什么是网页？ 2.他与网站又有着怎样的关系？ 3.为什么我们要制作网页？ 4.与网页制作的相关术语有哪些？
• 本节将对这些问题进行详细解答……
春顺制作
本节总系
• 1.1 网页基本概念 • 1.1.1 Wed的定义与特点 • 1.1.2 网页与网站 • 1.1.3 网页制作相关术语
春顺制作
1.3.1 中文版Dreamweaver8 的新增功能

网页设计与制作 第1章 网页设计与制作概述

网页设计与制作 第1章 网页设计与制作概述
第1章 网页设计与制作概述
【学习目标】
1.掌握网页设计与制作中有关概念 2.了解Dreamweaver软件的界面构成 3.学会Dreamweaver的站点操作 4.学会Dreamweaver的文件操作 5.了解网站制作的一般流程，能够使用 Dreamweaver制作一个简单的网站
1.1 网站设计与制作的基础知识 1.1.1 网站设计的有关概念 互 联 网
1.3 站点操作 1.3.1 站点的创建
Step3
在“站点名称”文本框中修改站点名称，点击“下一步”进入图所示界面。由于 我们创建一个本地站点，所以不必使用服务器技术，选中“否，我不想使用服务 器技术”，点击“下一步”
1.3 站点操作 1.3.1 站点的创建
Step4
由于不需要连接到远程服务器， 此项选“无”后，单击“下一 步”；出现一个网站的汇总信息， 单击“完成”
1.4 实践与运用——农家院网站的设计与制作 1.4.2 新建网页
新建网页
设置页面属性
1.4 实践与运用——农家院网站的设计与制作 1.4.3 网页的设计 网页布局 设置导航
插入网页图像
互联网又名因特网，英文名字是Internet，是将全球范围内的计算机通过通信线路和 设置，采用标准的TCP/IP协议连接起来，能够实现资源共享和相互通信的计算机网 络。国际互联网络。通过互联网我们能够收发电子邮件、传输文件、上网浏览信息、 进行网络办公、开展电子商务等。目前，互联网已成为我们工作、生活、娱乐等不 可缺少的组成部分，目前全国网民已达4亿，大家除利用网络浏览信息外，还在进行 网上购物、网络办公、网络游戏、网络支付等，网络已渗透到社会生活的各个领域。 又名WWW网，特指利用浏览器对网络进行访问的部分。访问者通过浏览器（如IE） 访问网络资源（如新浪网、网易等），由于操作的简便性，非常受普通网民的欢迎。 正是由于其操作的简便性，许多网络服务都通过WWW来提供，如电子邮件的收发， 早期我们采用的收发软件如FoxMail已被束之高阁，而是直接通过浏览器访问电子 邮件服务器进行收发操作。在网络硬盘中，我们通过浏览器进行文件传输服务，我 们可以讲，对于新一代互联网用户来讲，万维网就是互联网。

网页艺术设计课件(第一章)

网页艺术设计课件(第一章)
数字化和网络化。
5、交流平台类
6、网络社区类
1.5 课后思考
1、查阅有关互联网发展的资料，了解网页界面发展的概况。 2、下载三个不同类型的网页，分析其设计构成元素及主要设计特征。
【内容提要】
作为数字时代新艺术形式之一，网页艺术具有媒体相关性、技术性和艺术性三大基本内涵以 及若干与传统艺术形式不同的新艺术特征。它的要素包括形态要素和构成要素两个方面； 在设计网页时我们要遵循定位准确、技术合理、个性突出、形象统一等主要设计原则。
信息。
5、多媒体 将多媒体元素引入网页界面，可以更大程度上增强对浏览者的吸引力。 主要指音频、视频、动画等。 （1）、音频 主要有：MIDI、MAV、AIF、MP3、.ram等。 （2）、视频 信息丰富、传达便捷 A、形象生动、吸引力更强；B、传达信息的层次更深入。 常用格式：Avi、Rm、Flv等。
文章的题目。
（2）、文字信息 文字信息是标题内容的展开，是传达信息的主体部分。 文字信息虽然简单，但内容要符合标题。 对文字的字体、字形、大小、颜色和编排要进行精心的设置，以达到较好的浏览效果。
（3）、文字链接 最常见的超链接，它能直观的呈现链接的相关主题信息，使浏览者对所包含信息一目了然。
好的版式首先能以清晰的视觉导向是浏览者对网页内容一目了然，其次又以巧妙的图文配置使浏览 者获得悦目的视觉效果。
4、色彩 色彩在网页设计中的重要作用： 首先，彩色网页较单色网页更具吸引力； 其次，彩色网页可以通过色彩传达信息，是增强课理解性和易识别性的有效手段； 第三，色彩具有象征作用，通过带有主题倾向的色彩语言，可以更加有效地与浏览者进行情感交流； 第四，彩色网页具有悦目、装饰性强的特点，可以使浏览者愿意花更多的时间注目于此并了解相关

《网页设计与制作》课程教案

《网页设计与制作》课程教案

《网页设计与制作》课程教案第一章：网页设计与制作概述1.1 课程介绍网页设计与制作的基本概念网页设计与制作的目的与意义网页设计与制作的应用领域1.2 网页设计原则网页设计的基本原则用户体验设计原则响应式网页设计原则1.3 网页制作工具与技术网页设计软件的选择与使用HTML与CSS的基本语法与使用方法JavaScript的基础知识与应用第二章：网页布局与排版2.1 网页布局的基本概念网页布局的定义与作用常见的网页布局方式布局元素的分类与使用2.2 排版的原则与方法排版的基本原则文本的格式化与排版图片与多媒体元素的排版2.3 响应式网页布局与排版响应式网页布局的概念与意义媒体查询的使用方法布局与排版在不同设备上的应用第三章：网页色彩与字体3.1 色彩的基本概念与应用色彩的视觉效应与心理作用色彩的搭配原则与技巧色彩在网页设计中的应用案例3.2 字体的选择与使用字体的分类与特点字体的搭配原则与技巧字体在网页设计中的应用案例3.3 网页色彩与字体的综合应用色彩与字体的协调与平衡字体大小与行距的设置与调整色彩与字体的个性化应用与创新第四章：网页图片与多媒体元素4.1 网页图片的选择与处理图片的格式与特点图片的选择标准与技巧图片的处理与优化方法4.2 多媒体元素的应用音频与视频元素的应用动画与GIF图片的应用交互式多媒体元素的应用4.3 网页图片与多媒体元素的优化图片与多媒体元素的加载优化图片与多媒体元素的响应式应用图片与多媒体元素的视觉效果与用户体验第五章：网页交互与动画5.1 网页交互的基本概念与原理交互的定义与作用交互的实现方式与技术交互的设计原则与技巧5.2 JavaScript基础与应用JavaScript的基本语法与功能事件处理与DOM操作JavaScript库与框架的选择与使用5.3 网页动画的实现与优化CSS动画的制作方法与技巧JavaScript动画的制作方法与技巧动画的加载优化与性能考虑第六章：HTML与CSS高级应用6.1 表单设计与验证表单的基本结构与属性表单元素的使用与布局表单验证的实现方法6.2 网页组件设计与实现导航栏与面包屑的制作折叠面板与标签页的制作轮播图与幻灯片的设计与实现6.3 网页动画与过渡效果CSS过渡与动画的实现JavaScript动画的实现方法动画的性能优化与调试第七章：前端框架与库7.1 前端框架的基本概念前端框架的作用与优势常见的前端框架介绍框架的选择与使用7.2 Bootstrap框架的应用Bootstrap的基本结构与组件栅格系统与布局设计Bootstrap表单与样式定制7.3 React与Vue框架的选择与应用React框架的基本概念与使用方法Vue框架的基本概念与使用方法框架项目结构与组件化开发第八章：网页兼容性与优化8.1 网页兼容性基本概念浏览器兼容性的原因与挑战兼容性测试的方法与工具兼容性解决方案与最佳实践8.2 网页性能优化网页加载速度的影响因素图片与多媒体元素的优化代码压缩与合并技巧8.3 搜索引擎优化（SEO）SEO的基本概念与原则关键词研究与内容优化代码优化与站点结构调整第九章：网页安全与维护9.1 网页安全基本概念网页安全的威胁与挑战跨站脚本攻击（XSS）的预防跨站请求伪造（CSRF）的预防9.2 数据备份与恢复数据备份的重要性与方法数据库备份与文件备份恢复策略与流程9.3 网站维护与更新网站维护的内容与流程网站更新的方法与技巧网站监控与性能调优第十章：项目实践与案例分析10.1 项目实践流程项目需求分析与规划设计阶段与实现阶段项目测试与上线流程10.2 项目案例分析案例一：个人博客网站设计与制作案例二：电子商务网站设计与制作案例三：响应式企业官网设计与制作项目过程中的问题与解决方法网页设计与制作的趋势与展望重点和难点解析1. 第一章：网页设计与制作概述难点解析：网页设计原则的理解与应用、网页制作工具与技术的熟练运用2. 第二章：网页布局与排版难点解析：响应式网页布局与排版的设计与实现3. 第三章：网页色彩与字体难点解析：色彩与字体的协调与平衡、字体大小与行距的设置与调整4. 第四章：网页图片与多媒体元素难点解析：网页图片与多媒体元素的优化方法、响应式应用5. 第五章：网页交互与动画难点解析：JavaScript事件的处理与DOM操作、动画的实现与优化6. 第六章：HTML与CSS高级应用难点解析：表单验证的实现方法、网页组件的布局与样式设计7. 第七章：前端框架与库难点解析：框架的选择与使用、React与Vue框架的选择与应用8. 第八章：网页兼容性与优化难点解析：兼容性解决方案与最佳实践、网页性能优化的实施方法9. 第九章：网页安全与维护难点解析：预防跨站脚本攻击（XSS）与跨站请求伪造（CSRF）的策略、网站维护与更新的方法10. 第十章：项目实践与案例分析难点解析：项目需求的分析与规划、项目测试与上线流程的控制本教案《网页设计与制作》涵盖了网页设计与制作的基本概念、技术应用、项目实践等各个方面。

网页设计与制作教程(第4版)电子教案

网页设计与制作教程(第4版)电子教案

1.2 Web标准
1.2.3 采用Web标准的优点 1．客户端的优点 采用Web标准后，客户端的好处主要体现在以下方面：
• 文件下载与页面显示速度更快； • 内容能被更多的用户所访问（包括失明、弱视、色盲等 残障人士）；
2．服务器端的优点 采用Web标准后，服务器端的好处主要体现在以下方面： • 更少的代码和组件，容易维护； • 带宽要求降低（代码更简洁），成本降低； • 更容易被搜寻引擎搜索到；
1.3 网站的规划与设计
在建设网站之前，需要对网站进行一系列的分析和设计， 然后根据分析的结果提出合理的建设方案，这就是网站的规 划与设计。
网站的规划与设计一般应遵循以下三个原则： • 最大限度地满足用户需要； • 最有效地进行资源利用； • 使用方便，界面友好，运行高效；
常规的规划与设计方法一般有以下三种：自顶向下、自 底向上、不断增补的设计方法。
1.4 网站开发工作流程
典型的Web开发工作流程包括以下几个阶段。
1）规划站点：包括确立站点的策略或目标、确定所面向的 用户以及站点的数据需求。
2）设置开发环境：包括选择Web应Байду номын сангаас程序服务器、利用 Dreamweaver网页制作软件定义站点及数据源。
3）规划页面设计和布局：包括用绘画工具创建页面和界面 模型，以及使用Dreamweaver、FrontPage布置页面。
动态网页技术根据程序运行的区域不同，分为客户端动 态技术与服务器端动态技术。
客户端动态技术不需要与服务器进行交互，实现动态功 能的代码往往采用脚本语言形式直接嵌入到网页中。服务器 发送给浏览者后，网页在客户端浏览器上直接响应用户的动 作。常见的客户端动态技术包括JavaScript、ActiveX和 Flash等。

网页设计与制作教程

网页设计与制作教程目录第1章网页设计与制作概述1.1网络的基础知识1.1.1 TCP/IP协议1.1.2 IP地址1.1.3域名地址1.1.4统一资源定位器1.2图形图像的基础知识1.2.1位图与矢量图1.2.2常用的图像格式1.2.3常用的图形格式1.3网页的布局知识1.3.1网页的基本结构1.3.2页面的布局原则和模式1.4网页的色彩应用1.4.1色彩属性与象征意义1.4.2网页色彩的规划1.5 HTML基础1.5.1 HTML语言的基本结构1.5.2 HTML语言的基本单位1.5.3 HTML标记符基础1.5.4文本格式标记符1.5.5超标记符1.5.6图像标记符1.5.7表格标记符1.5.7框架标记符1.5.8表单标记符1.5.9滚动条1.6 CSS技术1.6.1 什么是CSS1.6.2 在网页中使用CSS1.6.3 CSS 样式定义1.6.4 CSS 属性1.6.5 CSS 过滤器简介1.7 JavaScript技术1.7.1 JavaScript脚本嵌入HTML文档的方法1.7.2使用客户端脚本习题一第2章DreamweaverCS6网页设计基础2.1 Dreamweaver的工作环境2.2构建Dreamweaver站点2.2.1创建本地站点2.2.2管理本地站点2.2.3创建和管理本地站点中文件2.3网页文本编辑2.3.1正文文本的添加2.3.2文本格式的设置2.3.3页面属性的设置2.3.4插入特殊字符2.3.5插入空格2.4 CSS样式设置2.4.1创建CSS规则2.4.2样式表2.5制作一个简单网页2.6 Dreamweaver工作环境的设置习题二第3章图像与多媒体3.1图像的应用3.1.1在网页中插入图像3.1.2设置图像属性3.2创建鼠标经过图像3.3图像占位符与属性的设置3.4插入flash动画3.5音频的应用3.5.1音频文件格式3.5.2网页中添加音频3.6视频的应用习题三第4章超级与其应用4.1超概述4.2创建文本超4.3创建图像超4.4创建电子4.5空习题四第5章网页的布局5.1表格的应用5.1.1插入表格5.1.2表格的嵌套5.2表格编辑与属性设置5.2.1文档中的设置表格格式优先顺序5.2.2选择表格与其它元素5.2.3设置表格属性5.2.4设置单元格、行或列属性5.2.5编辑单元格、行或列5.3应用APDiv布局页面5.4APDiv与表格的相互转换.5.4.1将APDiv转换为表格5.4.2表格转换为APDiv5.5框架的应用5.5.1创建框架集5.5.2查看和设置框架集属性5.5.3查看和设置框架属性5.5.4设置框架中显示的网页5.5.5嵌套的框架集5.5.6框架的编辑习题五第6章表单的应用6.1创建表单6.2添加表单对象6.2.1插入文本域6.2.2插入单选按钮/单选按钮组6.2.3插入复选框/复选框组6.2.4插入选择框〔列表/菜单〕6.2.5插入文件域6.2.6插入按钮6.3表单的提交6.4应用表格布局表单实例习题六第7章行为与脚本语言与模板和库的应用7.1行为在网页中的应用7.1.1行为、事件、动作7.1.2添加行为7.1.3Dreamweaver内置事件7.2 JavaScript脚本7.2.1 JavaScript脚本概述7.2.2 JavaScript脚本语言特效7.3创建与应用模板7.3.1创建模板7.3.2使用模板创建新网页7.3.3修改模板7.3.4文档从模板中分离7.3.5设置模板的首选参数7.4创建与应用库项目7.4.1创建库7.4.2在网页中应用库项目7.4.3编辑并更新库页面7.4.4将库项目从源文件中分离习题七第8章站点的测试8.1站点的测试8.1.1检查浏览器兼容性8.1.2.的检查与修正8.1.3不同分辨率下的测试8.1.4运行站点报告8.1.5内容的编辑8.2创建远程站点8.2.1设置远程服务器8.2.2连接远程站点8.3文件的上传和下载8.3.1文件的上传8.3.2下载文件8.3.3文件的取出与存回习题八第9章FireworksCS6基础与其在网页制作中的应用9.1 FireworksCS6基础9.1.1认识FireworksCS6工作区9.1.2文档管理9.1.3使用布局工具9.1.4各种面板9.1.5常用工具9.2绘制并编辑矢量图形9.2.1绘制与编辑基本形状9.2.2绘制与编辑自动形状9.2.3自由变形形状9.2.4复合形状9.3创建并修饰位图图像9.3.1创建位图图像9.3.2编辑位图图像9.3.3修饰位图9.4创建并编辑文本9.4.1创建文本9.4.2选择文本9.4.3编辑文本9.5应用笔触和填充9.5.1应用颜色工具9.5.2应用和更改笔触9.5.3应用和更改填充9.5.4在笔触和填充中添加纹理9.5.5应用样式9.6应用动态滤镜9.6.1应用动态滤镜9.6.2调整动态滤镜9.7使用切片和热点9.7.1使用切片9.7.2使用热点习题九第10章FlashCS6基本操作与在网页制作中的应用10.1 FlashCS6的基本操作10.1.1 FlashCS6的工作界面10.1.2 Flash文档的创建、打开、保存10.1.3面板组的使用10.2时间轴的使用10.2.1图层10.2.2帧10.2.3播放头10.2.4场景10.3元件、实例和库资源10.3.1元件的创建10.3.2实例10.3.3库面板以与元件与实例的关系10.4创建各种动画10.4.1遮罩层动画10.4.2引导层动画10.4.3形状补间动画10.4.4逐帧动画10.5在动画中添加声音10.6文本的使用10.6.1传统文本字段10.6.2使用文本布局框架(TLF)文本10.7动作面板的使用10.7.1动作面板的介绍10.7.2动作脚本的基本元素10.8 ActionScript基本语句10.8.1时间轴控制命令10.8.2浏览器/网络命令10.9动作的应用10.10测试发布Flash动画10.10.1制作过程中的测试10.10.2测试方法10.10.3下载模拟测试10.10.4发布影片10.10.5优化Flash文档习题十第11章PhotoshopCS6基本操作与在网页设计中的应用11.1 PhotoshopCS6基本操作11.1.1 PhotoshopCS6的工作界面11.1.2文件操作11.1.3环境设置11.1.4基本概念11.1.5选区的创建与编辑11.1.6利用画笔类工具绘制图像11.1.7利用形状绘制工具绘制图像11.1.8图像修饰工具的应用11.1.9调色命令的高级应用11.1.10图层样式11.1.11文字图层11.1.12滤镜11.2页面设计与制作11.2.1整体页面的制作11.2.2制作导航栏11.2.3制作网页内容板块11.2.4制作网页页脚习题十一第12章网页制作工具集成与网页制作综合实训12.1 Fireworks与Dreamweaver的集成12.2使用Photoshop和Dreamweaver12.2.1 Dreamweaver中处理Photoshop文件的工作流程12.2.2创建智能对象12.2.3更新智能对象12.3 Dreamweaver与Flash的集成12.4网页制作综合实训习题十二。

Web习题参考答案

《网页设计与制作》习题参考答案第一章网页设计与制作概述1、填空题（1）静态网页、动态网页（2）HyperText Mark-up Language、超文本标记语言或超文本链接标示语言（3）文字、图形图像、动画、视频（4）Microsoft Frontpage（或SharePoint Designer）、Adobe Dreamweaver2、问答题(1)www的特点有哪些？答：1）万维网是无数个网络站点和网页的集合，它们在一起构成了因特网最主要的部分。

2）WWW是建立在客户机／服务器模型之上的。

3）WWW是以超文本标注语言HTML(Hyper Markup Language)与超文本传输协议HTTP(Hyper Text Transfer Protocol)为基础。

4）WWW能够提供面向Internet服务的、一致的用户界面的信息浏览系统。

5）WWW浏览提供界面友好的信息查询接口。

(2)网页的基本元素有哪些？答：组成网页的元素主要有文字、图像、声音、动画、视频、超链接以及交互式处理等。

它们的特点如下：文字：网页中的大多数信息主要以文本方式显示，文字是网页的主体，负责传达信息的功能。

图像：图片给网页添加了色彩，使网页做到了图文并茂，形象生动。

动画：动画是动态的图形，添加动画可以使网页更加生动。

常用的动画格式包括动态GIF图片和Flash动画声音和视频：声音是多媒体网页中的重要组成部分，支持网络的声音文件格式很多，主要有MIDI、WA V、MP3和AIF等。

网页中支持的视频文件格式主要有Realplay、Mpeg、A VI和DivX等。

表格：在网页中使用表格可以控制网页中信息的结构布局。

超链接：超链接是网页与其他网络资源联系的纽带，是网页区别于传统媒体的重要特点导航栏：导航栏的作用是引导浏览者游历所有站点。

表单：表单类似于Windows程序的窗体，用来将浏览者提供的信息，提交给服务器端程序进行处理。

其他常见元素：包括悬停按钮、Java特效和ActiveX等各种特效。

网页制作(第一章)


第一章
网站设计概述
1.2 网络制作相关软件
4. Fireworks Fireworks也是Macromedia公司的产品，是 网页图形制作软件。 ● Fireworks以处理网页图片为特长，通过 它可以把图做得又小又漂亮。 ● Fireworks是基于屏幕的图像处理软件， 而不是基于出版印刷，所以它对可编辑图像的分 辨率要求不高。
第一章
网站设计概述
1.3 网页基本元素
5、表格 表格是网页排版的灵魂，使用表格排版是网 页的主要制作形式。通过表格可以精确地控制各 网页元素在网页中的位置。
第一章
网站设计概述
1.3 网页基本元素
6、动画 动画是网页上最活跃的元素，通常制作优秀、 创意出众的动画是吸引浏览者的最有效的方法。 网页中的
网站设计概述
● Fireworks可以在同一文本框里改变单个 字的颜色。同时，Fireworks 可以引用Photosho p的所有滤镜，并且可以直接将PSD格式图片导入。 ●Fireworks不仅可生成静态的图像，也可 轻松创作GIF小动画，还可生成包含HTML和 JavaScript代码的动态图像，甚至可以编辑 整幅网页。
欧阳红巍 Happy_weni@
第一章
目 录
网站设计概述
1.1 网络基础知识
1.2 网络制作相关软件
1.3 网页基本元素
1.4 网站开发流程
1.5 网页设计的基本原则
1.6 网站设计相关语言
第一章
网站设计概述
1.1 网络基础知识
1. Internet Internet（国际互联网）是一个由各种不同类 型和规模的独立运行和管理的计算机网络组成的 全球范围的计算机网络，组成Internet的计算机 网络包括局域网（LAN）、城域网（MAN）以及大 规模的广域网（WAN）等。

第1章网页设计基础概述精品PPT课件


Adobe Dreamweaver CS3
1.3 网站设计的流程
1.3.2 新建站点与收集资源
● 文字资料 ● 图片资料 ● 动画资料 ● 其他资料
1.3.3 实现FTP服务器的上传与下载
FTP传输可以用Windows中的FTP命令，也可以借助于一些专门 的FTP软件。
Adobe Dreamweaver CS3
Adobe Dreamweaver CS3
第一章
网Байду номын сангаас设计基础概述
Adobe Dreamweaver CS3
❖ 1.1 全面认识网页 ❖ 1.2 网页制作的常用软件 ❖ 1.3 网站设计的流程 ❖ 1.4 网页的基本组成元素 ❖ 1.5 申请免费空间与发布网站
Adobe Dreamweaver CS3
Adobe Dreamweaver CS3
1.3 网站设计的流程
1.3.1 注册域名与申请空间
1．注册域名 域名是企业、机构或个人的网络标识，是一个通过计算机登录网
络的企业、机构或个人在该Internet网中的地址。 2．申请空间
一个完整的网站系统其实就是一组文件，它提供给网络用户浏览 。这些文件要占据一定的硬盘空间，即所谓的网站空间
1.1 全面认识网页
1.1.1 网站、网页和主页
网站是指在因特网上，根据一定的规则，用于展示特定内容的相 关网页集合。
网页是构成网站的基本元素，是承载各种网站应用的平台。 网站主页是整个网站的主索引页。网站首页名称是特定的。 1.1.2 HTML的组成及语法 1．HTML语言的组成 2．HTML的语法
Dreamweaver 是一款可视化网页设计制作工具和网站管理工具， 支持当前最新的Web技术。
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

HTML语言（Hyper Text Markup Language 超文本标 记语言。
HTML的结构包括头部（Head）、主体（Body）两大部 分，其中头部描述浏览器所需的信息，而主体则包含所要说 明的具体内容。
• 如果在浏览器的地址栏中输入网站地址，浏 览器会自动连接到这个网址所指向的网络服 务器，并出现一个默认的网页（一般为 index.html或default.html），这个最先打 开的默认页面就被称为“主页”或“首页”。
•
生查子· 元夕欧阳修去年元夜时①，花市灯如昼②。月到柳梢头，从约黄昏后。 今年元夜时，月与灯依旧。不见去年人，泪满春衫袖。注释①元夜：正月十 五为元宵节。这夜称为原夜、元夕。②花市：繁华的街市。赏析这是首相思 词，写去年与情人相会的甜蜜与今日不见情人的痛苦，明白如话，饶有韵味。 词的上阕写“去年元也”的事情，花市的灯像白天一样亮，不但是观灯赏月 的好时节，也给恋爱的青年男女以良好的时机，在灯火阑珊处秘密相会。 “月到柳梢有，人约黄昏后”二句言有尽而意无穷。柔情密意溢于言表。下 阕写“今年元夜”的情景。“月与灯依旧”，虽然只举月与灯，时机应包括 二三句的花和柳，时说闹市佳节良宵与去年一样，景物依旧。下一句“不见 去年人”“泪满春衫袖”，表情极明显，一个“满”子，将物是人非，旧情 难续的感伤表现的淋漓尽致。
网页设计与制作教程
(第4版）
第1章 网页设计制作概述
• • • • • • • 一 二 三 四 五 六 七 网页、网站的概念 Web标准 网站的规划与设计 网站开发工作流程 网站策划书撰写要点 常用网页制作软件 实训
1.1 网页、网站的概念
1.1.1 网页、网站和主页 网页（Web Page）是存放在Web服务器上供客户端用 户浏览的文件，可以在Internet上传输。网页是按照网页文 档规范编写的一个或多个文件，这种格式的文件由超文本标 记语言创建，能将文字、图片、声音等各种多媒体文件组合 在一起，这些文件被保存在特定计算机的特定目录中。
1.4 网站开发工作流程
典型的Web开发工作流程包括以下几个阶段。 1）规划站点：包括确立站点的策略或目标、确定所面向的 用户以及站点的数据需求。
2）设置开发环境：包括选择Web应用程序服务器、利用 Dreamweaver网页制作软件定义站点及数据源。
3）规划页面设计和布局：包括用绘画工具创建页面和界面 模型，以及使用Dreamweaver、FrontPage布置页面。 4）创建内容资源：包括使用Fireworks、Photoshop和 Flash创建图像、视频等。 5）组合、测试和部署站点：包括使用Dreamweaver设置 文本格式、编译资源，测试代码将站点发布到服务器上。 6）维护站点：包括使用Dreamweaver保持内容的更新。
1.4 网站开发工作流程
1.4.7 案例一：规划曙光大学网站 【案例综述】规划曙光大学网站的结构。 【案例展示】本书围绕着一个完整网站的制作作为主要讲解 案例，其站点规划结构图及其含义如图1-1所示。
1.5 网站策划书撰写要点
网站策划书应该尽可能地涵盖网站规划中的各个方面， 写作要科学、认真、实事求是。以最常见的企业网站为例， 介绍网站策划书的撰写要点。
1.1 网页、网站的概念
1.1.2 静态网页和动态网页 静态网页指客户端的浏览器发送URL请求给WWW服务 器，服务器查找需要的超文本文件，不加处理直接下载到客 户端，运行在客户端的页面是已经事先做好并存放在服务器 中的网页。其页面的内容使用的仅仅是标准的HTML代码， 静态网页通常由纯粹的HTML/CSS语言编写。
（1）UploadNow!上传工具
（2）WS-FTP上传工具 Dreamweaver软件自身也具有上传网页的功能。
1.6 常用网页制作软件
1.6.5 网页设计工具的发展动向 2005年4月18日，全球知名的应用软件公司Adobe以 34亿美元的价格收购了Macromedia公司，这次收购代表着 多媒体产业领域的融合。随着Adobe公司对Macromedia公 司进行全新的整合，势必推出更加强大的图形网页应用软件， 为图形处理与网页制作开创出新的空间。目前网页制作中的 HTML代码与图片都是单独制作的，需要美工人员与网页制 作人员共同完成，但是，随着两家公司的合并，极有可能推 出新的软件，实现图片与网页的一体化操作，提高网页制作 的效率。
1．前期调研分析 2．网站的功能定位 3．网站技术解决方案 4．网站内容规划 5．网页设计 6．网站维护 7．网站测试 8．网站发布与推广 9．网站设计日程表 10．费用明细
1.6 常用网页制作软件
1.6.1 网页制作工具 网页制作工具分为“可视化”和“非可视化”两大类。 “可视化”网页编辑器的优点是直观、使用方便、容易学习， 在其中制作网页与在Word中编辑相似，缺点是难以精确达 到与浏览器完全一致的显示效果。 “非可视化”的网页编辑 器，因为是用HTML代码来设计的，所以控制精确，但是， 工作效率太低。 1．Dreamweaver 2．FrontPage
• 三．表现
以上虽然从结构上对页面内容进行了分区，但是页 面内容的外光并没有改变。“文章标题”、“作者”、 “文章内容”等各个部分仍让时一样的字体，一样的颜色， 而且内容还依然是简单地罗列在一起。要让阅读者能更好 地阅读页面内容，就需要设置内容部分的字体样式、对齐 方式、背景修饰等，所有这些外观的效果就成之为表现。
另外，Fireworks和ImageReady在未来的地位，也很 有可能被已经强势的Photoshop和Flash取代。
1.7 实训
实训一：规划“爱家美食”网站 【实训综述】规划“爱家美食”网站的结构。 【实训展示】网站的导航条，读者可在此基础上画出网站的 栏目结构图。
1.8 习题
1．简述网页、网站和主页的异同。 2．Web标准主要由哪3部分书？ 5．常用的网页制作工具有哪些？分别有哪些特点？
1.6.3 网页动画制作与特效工具 随着网络速度的提高，越来越多的网页中使用了动画效 果，这些动态显示的画面不仅吸引了浏览者的注意力，而且 也给原本较呆板的画面增添了不少生机。 1．Flash 2．Ulead GIF Animator
1.6 常用网页制作软件
1.6.4 网页上传工具 制作好的网页要上传到提供主页空间的服务器后，才能 让浏览者访问。上传工具选择合适与否将影响对网站更新维 护的效率。 1．CuteFTP 2．FlashFXP 3．LeapFTP 4．其他上传工具
3．Adobe GoLive
4．HomeSite 5．Visual Studio 2005/2008
1.6 常用网页制作软件
1.6.2 网页图形图像处理工具 使用网页图形图像处理工具可以设计、处理适合网页的 图形图像。
1．Fireworks
2．Photoshop 3．CorelDRAW
1.6 常用网页制作软件
1.2 Web标准
1.2.3 采用Web标准的优点 1．客户端的优点 采用Web标准后，客户端的好处主要体现在以下方面： 文件下载与页面显示速度更快； 内容能被更多的用户所访问
2．服务器端的优点
采用Web标准后，服务器端的好处主要体现在以下方面： 更少的代码和组件，容易维护； 带宽要求降低（代码更简洁），成本降低； 更容易被搜寻引擎搜索到；
• 注意： 页面的内容之包含所要传达的基本信息，不包含任 何修饰的成分，也不包含任何布局和排版的部分。
• 二.结构
虽然在上图中已经完全包括了页面所有要传达的信息， 但是这些信息简单地罗列在一起，难于阅读，内容的信息 也不能很清晰地传达给阅读者。将上图所示的页面内容进 行整理，分成文章标题、作者、文章内容、段落、段落标 题、段落内容、列表等各个部分。
动态网页技术根据程序运行的区域不同，分为客户端动 态技术与服务器端动态技术。
客户端动态技术不需要与服务器进行交互，实现动态功 能的代码往往采用脚本语言形式直接嵌入到网页中。服务器 发送给浏览者后，网页在客户端浏览器上直接响应用户的动 作。常见的客户端动态技术包括JavaScript、ActiveX和 Flash等。
内容、结构和表现
内容、结构和表现是一个网页必不可少的组成部分。 其中，内容是页面传达信息的基础，表现使得内容的传 达变得更加明晰和方便，而结构则是内容和表现之间的 纽带。 一.内容 内容就是网页实际要传达的信息，包括文本、图片、 音乐、视频、数据、文档等。其中不包括修饰的图片、 背景音乐等。为了更好地理解，举一个实例的例子。下 面就是一个页面的内容部分。
•
Ｗeb标准的另一个部分行为就是对内容 的交互及操作效果。举例来说，内容好比人 的身体；结构则标明了身体的各个部分（哪 里是头，哪里是脚）；表现好比装扮身体的 衣服；行为就是走、跑、跳等动作。
1.2 Web标准
1.2.2 建立Web标准的目的 简单地说，建立Web标准的目的是： • 提供最大利益给最多的网站用户； • 确保任何网站文档都能够长期有效； • 简化代码，降低建设成本； • 让网站更容易使用，能适应更多不同用户和更多网络设 备； • 当浏览器版本更新或者出现新的网络交互设备时，确保 所有应用能够继续正确执行。
1.2 Web标准
1.2.1 Web标准的概念 Web标准不是某一种标准，而是一系列标准的集合。网 页主要由三部分组成：结构（Structure）、表现 （Presentation）和行为（Behavior）。对应的标准也分 为三类：结构化标准语言主要包括XHTML和XML，表现标 准语言主要为CSS，行为标准主要包括对象模型W3C DOM、 ECMAScript等。这些标准大部分由W3C起草和发布，也有 一些是其他标准组织制定的标准，如ECMA（European Computer Manufacturers Association）的ECMAScript 标准。
1.3 网站的规划与设计
在建设网站之前，需要对网站进行一系列的分析和设计， 然后根据分析的结果提出合理的建设方案，这就是网站的规 划与设计。