第1章 网页设计基础幻灯片

1、第1章 网页设计基础,网页设计与制作 Dreamweaver CS5 标准教程,1,2,1. 互联网基础 2. 网页设计知识 3. 网页标准化技术 4. 网站设计软件 5. 网站制作流程 6. HTML语言,本章学习主要内容：,2,2020/6/23,1.1.1 Internet与Web服务 互联网就是借助通信线路将计算机和各种相关设备相连接，并按照统一的标准在各种设备之间进行数据传输和交换，实现互联互通，以达到计算机之间资源共享和信息交换的目的。,1.1互联网基础,3,2020/6/23,互联网提供的主要服务包括万维网（World Wide Web，WWW，3W，Web），电子邮件（E-ma

2、il），文件传输（FTP）和远程登录（Telnet）等。 Web网采用超文本标记语言（Hyper Text Mark-up Language，HTML），可以存取包括文本、图像、动画、音频和视频等多媒体信息，还可以基于超链接通过众多的网页和网站构成了一个全球范围内的庞大信息网络。,1.1互联网基础,4,2020/6/23,1.1.2 URL路径 Uniform Resource Locator，统一资源定位器 URL由三部分组成：协议类型，主机名和路径及文件名，表达为如下形式： 协议名:/服务器的IP地址或域名/路径/文件名 URL地址，或Web地址，或网址，它可以是本地磁盘路径，或局域网上的

3、某一台计算机，也可以是Internet上站点。,1.1互联网基础,5,2020/6/23,1.1.3服务器与客户机 服务器是提供共享资源和服务的计算机，其作用是管理大量的信息资源。 客户机是用户用来获取资源和服务的计算机。浏览器软件是客户机上必备软件。,1.1互联网基础,6,2020/6/23,1.1.4互联网数据中心 互联网数据中心（Internet Data Center，IDC）为企业、媒体和各类网站提供专业化的网络服务器管理，网络带宽等一系列服务，是网络基础资源的重要组成部分。 IDC向用户提供服务包括整机租用、服务器托管、机房租用、专线接入和网络管理服务等。 数据中心体系包括四个主要

4、部分：服务器系统，电力保障系统，数据传输保障系统以及环境控制系统。,1.1互联网基础,7,2020/6/23,页面设计要具有一定的独创性，符合用户的审美情趣，同时还要兼顾表达主题，满足表达内容和使用便捷的要求。 色彩，网页设计元素和页面布局是网页创意设计的三个重要组成部分。 1.2.1色彩,1.2网页设计知识,8,2020/6/23,1.认识色彩 任何色彩都具有色相、明度和纯度三种属性。 色相是色彩的名称，是一个色彩区别与另一个色彩的主要因素。 明度也称为亮度，表示了色彩的明暗程度，明度越大，色彩越亮。 纯度是指色彩的鲜艳程度或饱和度。色彩纯度越高的颜色越鲜艳，纯度越低的颜色越灰暗。,1.2网

5、页设计知识,9,2020/6/23,2. RGB色彩模式和网页安全色 每种色彩都可以用红(R)、绿(G)、蓝(B)3种色彩按一定的比例调和而成，这3种色彩被称为光的3原色 将在不同操作系统和浏览器中具有一致显示效果的颜色定义为网络安全色，网络安全色有216种。在网页设计软件中，任何颜色都有一个六位的十六进制编号，如#D6D6D6，任何由00、33、66、99、CC或者FF组合而成的颜色值，都表示一个Web安全色,1.2网页设计知识,10,2020/6/23,3. 利用图像配色 1.2.2网页设计元素 1. 网站标识 网站logo，将网站logo置于页面比较醒目的位置，如左上角。 2. 网站ba

6、nner 网站banner一般位于页面的顶部，即可以表达和突出网站创意和形象，也可以传达某种特定信息。 网络banner通常是由GIF动画、JPEG图像或Flash动画完成的。,1.2网页设计知识,11,2020/6/23,3. 导航条 导航条是网站设计中最重要的元素之一，即表现了网站的站点结构和内容分类，又方便了用户对网站的浏览。 4. 图像 Gif用于画面简单、细节信息少的图像，如背景图片，可以减少图像文件的大小；Jpeg用于画面较为复杂、细部信息多的图像；PNG用于有透明背景的图像。 一种是独立完整的图像，二是在Firework或Photoshop中使用切片功能获得的图像。,1.2网页设

7、计知识,12,2020/6/23,5. 动画 网页设计中常用的动画有Gif动画和Flash动画。 6. 背景 使用合理能够增强页面的整体创意效果。 1.2.3页面布局 1. 结构布局 常用的结构布局方式包括“国”字型、拐角型、上下框架和左右框架等类型。 2. 艺术布局 常用的平面艺术设计原则有分割、对称和平衡等。,1.2网页设计知识,13,2020/6/23,网页由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior），相应的技术标准由3个部分组成：结构化标准语言，CSS样式表和脚本语言。,1.3网页标准化技术,14,2020/6/23,1.3.1

8、结构化语言 结构化语言HTML（Hyper Text Markup Language，超文本标记语言） XHTML（eXtensible Hyper Text Markup Language，可扩展的超文本标记语言）是HTML的升级版本。,1.3网页标准化技术,15,2020/6/23,1.3.2 CSS样式 CSS（Cascading Style Sheets，层叠样式表）是由W3C指定和发布的，用于描述网页元素格式的一组规则，其作用是设置HTML和XHTML语言编写的结构化文档外观。 1.3.3脚本语言 脚本语言是一种面向对象的程序设计语言，是专为HTML设计者提供的一种编程语言。 在dr

9、eamweaver中，行为就是由内嵌的JavaScript脚本语言实现的。,1.3网页标准化技术,16,2020/6/23,1.3.4 ASP技术 在开发制作动态网站时，除了以上标准化网页技术外，还需要ASP技术和数据库技术作为支撑条件和环境。 ASP（Active Server Pages，动态服务网页）是微软公司发布的动态网页开发技术组件，用来创建和运行动态网页或web应用程序。Asp文件由文本、HTML标签，ASP脚本代码以及COM组件等部分组成。,1.3网页标准化技术,17,2020/6/23,1.4.1 Dreamweaver 1.4.2 Flash 1.4.3 Photoshop

10、Photoshop借助于在平面设计领域的出色功能，将Web设计功能融入到软件系统中，提供了图像切片和优化Web图形的功能，可以导出HTML页面文档用于网页设计。 Dreamweaver，Photoshop和Flash是由Adobe公司开发的3款软件，具有良好的集成性。Photoshop和Flash的输出结果可以直接导入Dreamweaver网页中。,1.4 网站设计软件,18,2020/6/23,1.5.1前期准备工作 在网站建设之前，需要对与本项目相关的互联网市场进行调查和分析，同时收集各种相关的信息和资料，为网站建设提供必要的前期数据，为决策提供依据。 1. 市场调查与分析 市场调研包括用

11、户需求分析、企业自身情况和竞争对手情况的调查与分析。 2. 收集资料 收集和整理资料为网站建设提供基础素材。,1.5 网站制作流程,19,2020/6/23,3. 网站定位 在市场调查和分析以及资料收集的基础之上，初步确定网站的定位，包括大致内容和结构，页面创意的基调，以及基本技术架构。 1.5.2方案实施 根据前期准备工作，具体规划网站的栏目和布局，页面设计风格和外观效果；确定网站所使用的各种技术，完成网站制作的全部工作。,1.5 网站制作流程,20,2020/6/23,1规划网站 规划网站实际上是网站定位的一个延续。 2页面设计 采用图形图像类软件进行创意和设计，也可以采用动画软件设计动感

12、十足、富于变化的页面效果。 3静态网页制作 4动态网页制作 采用动态网页技术。ASP技术，数据库技术以及前后台页面设计在动态网站建设中尤为重要。,1.5 网站制作流程,21,2020/6/23,5整合网站 在整合过程中，需要对各个部分以及整合后的系统进行检查，发现问题，及时调整。 1.5.3后期工作 1网站测试 网站测试包括网站运行的每个页面和程序。兼容性测试，超链接测试是必选的测试内容。 2网站发布 网站发布包括申请域名，申请服务器空间和上传网站内容。,1.5 网站制作流程,22,2020/6/23,3网站推广 注册搜索引擎是最直接和有效的方法。 通过在同行或相关行业网站中，建立网站的相互链接；或通过论坛、博客、QQ和电子邮件等方式，发布网站信息，是低成本的推广方式。 4网站维护,1.5 网站制作流程,23,2020/6/23,在Dreamweaver可视化环境中，制作网页的各种操作都会自动生成HTML语言代码，网页是由HTML语言编写的文本文件。 HTML是一个结构化描述语言，格式非常简单，由文字及标签组合而成，其书写规则如下： 任何标签皆由“”和文字组成，如为段落标签；某些起始标签可以加参数，如