网页设计与制作Dreamweaver-CS6标准课件.pptx

1、网页设计与制作Dreamweaver CS6 标准教程1. 互联网基础2. 网页设计知识3. 网页标准化技术4. 网站设计软件5. 网站制作流程6. HTML语言1.1.1Internet与Web服务1.1.2URL路径1.1.3服务器与客户机1.1.4互联网数据中心互联网就是借助通信线路将计算机和各种相关设备相连接，并按照统一的标准在各种设备之间进行数据传输和交换，实现互联互通，以达到计算机之间资源共享和信息交换的目的。互联网提供的主要服务包括万维网（World Wide Web，WWW，3W，Web），电子邮件（E-mail），文件传输（FTP）和远程登录（Telnet）等。Web网采用超

2、文本标记语言（Hyper Text Mark-up Language，HTML），可以存取包括文本、图像、动画、音频和视频等多媒体信息，还可以基于超链接通过众多的网页和网站构成了一个全球范围内的庞大信息网络。Uniform Resource Locator，统一资源定位器URL由三部分组成：协议类型，主机名和路径及文件名，表达为如下形式：协议名:/服务器的IP地址或域名/路径/文件名http:/ 服务器 客户机 客户机 客户机 响应 请求 互联网 互联网数据中心（Internet Data Center，IDC）为企业、媒体和各类网站提供专业化的网络服务器管理，网络带宽等一系列服务，是网络基础

3、资源的重要组成部分。IDC向用户提供服务包括整机租用、服务器托管、机房租用、专线接入和网络管理服务等。数据中心体系包括四个主要部分：服务器系统，电力保障系统，数据传输保障系统以及环境控制系统。页面设计要具有一定的独创性，符合用户的审美情趣，同时还要兼顾表达主题，满足表达内容和使用便捷的要求。色彩，网页设计元素和页面布局是网页创意设计的三个重要组成部分。1.2.1色彩1.2.2网页设计元素1.2.3页面布局1.认识色彩任何色彩都具有色相、明度和纯度三种属性。色相是色彩的名称，是一个色彩区别与另一个色彩的主要因素。明度也称为亮度，表示了色彩的明暗程度，明度越大，色彩越亮。纯度是指色彩的鲜艳程度或饱

4、和度。色彩纯度越高的颜色越鲜艳，纯度越低的颜色越灰暗。2. RGB色彩模式和网页安全色每种色彩都可以用红(R)、绿(G)、蓝(B)3种色彩按一定的比例调和而成，这3种色彩被称为光的3原色将在不同操作系统和浏览器中具有一致显示效果的颜色定义为网络安全色，网络安全色有216种。在网页设计软件中，任何颜色都有一个六位的十六进制编号，如#D6D6D6，任何由00、33、66、99、CC或者FF组合而成的颜色值，都表示一个Web安全色3. 利用图像配色1. 网站标识网站logo，将网站logo置于页面比较醒目的位置，如左上角。2. 网站banner网站banner一般位于页面的顶部，即可以表达和突出网站

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

6、包括“国”字型、拐角型、上下框架和左右框架等类型。2. 艺术布局常用的平面艺术设计原则有分割、对称和平衡等。总之，根据内容和栏目编排要求以及客户审美需求，将各种典型结构灵活运用，将艺术设计原则融会贯通，锐意创新，创作出结构布局合理，页面精美的网页。网页由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior），相应的技术标准由三个部分组成：结构化标准语言，CSS样式表和脚本语言。1.3.1结构化语言1.3.2CSS样式1.3.3脚本语言1.3.4ASP技术结构化语言HTML（Hyper Text Markup Language，超文本标记语言）XHTM

7、L（eXtensible Hyper Text Markup Language，可扩展的超文本标记语言）是HTML的升级版本。超文本标记语言HTML5是将取代HTML4.01标准和XHTML1.0标准的HTML标准版本。CSS（Cascading Style Sheets，层叠样式表）是由W3C指定和发布的，用于描述网页元素格式的一组规则，其作用是设置HTML和XHTML语言编写的结构化文档外观。层叠样式CSS3版本与超文本标记语言HTML5一起，开始获得了业界的广泛认同。脚本语言是一种面向对象的程序设计语言，是专为HTML设计者提供的一种编程语言。在dreamweaver中，行为就是由内嵌的

8、JavaScript脚本语言实现的。在开发制作动态网站时，除了以上标准化网页技术外，还需要ASP技术和数据库技术作为支撑条件和环境。ASP（Active Server Pages，动态服务网页）是微软公司发布的动态网页开发技术组件，用来创建和运行动态网页或web应用程序。Asp文件由文本、HTML标签，ASP脚本代码以及COM组件等部分组成。1.4.1 Dreamweaver1.4.2 Flash1.4.3 PhotoshopPhotoshop借助于在平面设计领域的出色功能，将Web设计功能融入到软件系统中，提供了图像切片和优化Web图形的功能，可以导出HTML页面文档用于网页设计。Dream

9、weaver，Photoshop和Flash是由Adobe公司开发的三款软件，具有良好的集成性。Photoshop和Flash的输出结果可以直接导入Dreamweaver网页中。网站制作已经逐渐发展成为一个由网页界面设计、网页制作、数据库开发和动态应用程序编写等一系列工作构成的系统工程。1.5.1前期准备工作1.5.2方案实施1.5.3后期工作在网站建设之前，需要对与本项目相关的互联网市场进行调查和分析，同时收集各种相关的信息和资料，为网站建设提供必要的前期数据，为决策提供依据。1. 市场调查与分析市场调研包括用户需求分析、企业自身情况和竞争对手情况的调查与分析。2. 收集资料收集和整理资料为

10、网站建设提供基础素材。3. 网站定位在市场调查和分析以及资料收集的基础之上，初步确定网站的定位，包括大致内容和结构，页面创意的基调，以及基本技术架构。根据前期准备工作，具体规划网站的栏目和布局，页面设计风格和外观效果；确定网站所使用的各种技术，完成网站制作的全部工作。1规划网站规划网站实际上是网站定位的一个延续。网站规划越详尽，方案实施就越规范。2页面设计采用图形图像类软件进行创意和设计，也可以采用动画软件设计动感十足、富于变化的页面效果。3静态网页制作4动态网页制作采用动态网页技术。ASP技术，数据库技术以及前后台页面设计在动态网站建设中尤为重要。5整合网站在整合过程中，需要对各个部分以及整

11、合后的系统进行检查，发现问题，及时调整。1网站测试网站测试包括网站运行的每个页面和程序。兼容性测试，超链接测试是必选的测试内容。2网站发布网站发布包括申请域名，申请服务器空间和上传网站内容。首先，企业需要申请一个或多个域名；其次，向互联网数据公司申请服务器空间；第三，完成远程站点的设置；第四，再将网站内容上传到服务器。3网站推广注册搜索引擎是最直接和有效的方法。通过在同行或相关行业网站中，建立网站的相互链接；或通过论坛、博客、QQ和电子邮件等方式，发布网站信息，是低成本的推广方式。4网站维护日常维护，如更新网站栏目；版本升级。在Dreamweaver可视化环境中，制作网页的各种操作都会自动生成HTML语言代码，网页是由HTML语言编写的文本文件。HTML是一个结构化描述语言，格式非常简单，由文字及标签组合而成，其书写规则如下：任何标签皆由“”和文字组成，如为段落标签；某些起始标签可以加参数，如 Hello 表示字体大小为12；大部分标签既有起始标签，又有终结标签，终结标签是在起始标签之前加上符号“/”构成的，如；标签字母大小写均可。1.6.1文件结构标签1.6.2表格标签1.6.3文本段落标签1.6.4图像标签1.6.5链接标签1.6.6框架标签1.6.7表单1.6.8块标签