1、第 一 章,网页设计学前基础,学 习 目 标,Dreamweaver系列是专业的网页制作软件，Dreamweaver CS5是目前的最新版本，它强大的网页制作功能和简单易用的特性，受到广大用户的青睐。要制作精美的网页，除了要熟练使用Dreamweaver外，还必须了解一些有关网页制作的基础知识，本章主要介绍网页和网站的基础知识、网页的设计流程和Dreamweaver CS4学前的一些基本操作。,本 章 重 点,网站和网页的基础知识网页的设计构思认识Dreamweaver CS4,:计算机基础与实训教材系列系列丛书官方网站 http:/ :,1.1 网站和网页的基础知识,随着互联网的迅猛发展，可
2、以获取、交换和存错连接到网络上的各计算机上的信息。网络上存放信息和提供服务的地方就是网站。一个成功的网站离不开精美绚丽的网页，要制作出美观的网页，首先要学习网页制作的相关知识，例如制作网页的知识、制作网页元素的知识以及设计网页效果。,:计算机基础与实训教材系列系列丛书官方网站 http:/ :,1.1.1 主流网站解析,网站(Website)是指在互联网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页集合，它建立在网络基础之上，以计算机、网络和通信技术为依托，通过一台或多台计算机向访问者提供服务。平时所说的访问某个站点，实际上访问的是提供这种服务的一台或多台计算机。,:计
3、算机基础与实训教材系列系列丛书官方网站 http:/ :,1.1.2 网页的概念,网页(web)是网站上的某一个页面，它是一个纯文本文件，是向访问者传递信息的载体，以超文本和超媒体为技术，采用HTML、CSS、XML等语言来描述组成页面的各种元素，包括文字、图像、音乐等，并通过客户端浏览器进行解析，从而向浏览者呈现网页的各种内容。,:计算机基础与实训教材系列系列丛书官方网站 http:/ :,1.1.3 网页的基本元素,网页是一个纯文本文件，通过HTML、CSS等脚本语言对页面元素进行标识、然后由浏览器自动生成的页面。一个网页的基本元素主要包括文本、图像和超链接，其他元素包括声音、动画、视频、
4、表格、导航栏、表单等，如图所示。,:计算机基础与实训教材系列系列丛书官方网站 http:/ :,1.1.4 网页类型,目前，常见的网页有静态网页和动态网页两种。静态网页通常以.htm、.html、.shtml、.xml等形式为后缀；动态网页一般以.asp、.jsp、.php、.perl、.cgi等形式为后缀。,:计算机基础与实训教材系列系列丛书官方网站 http:/ :,1.2 网页的设计构思,在制作网页之前，首先要进行网页的设计与构思，主要包括网页的布局、网页的配色、网设计原则，了解这些知识，是制作有别于其他网页的要点之一。网页的布局构思网页的设计原则 网页的配色技巧网页大体构思 网页制作一
5、般流程,:计算机基础与实训教材系列系列丛书官方网站 http:/ :,1.2.1 网页的布局构思,网页布局能决定网页是否美观。合理的布局，可以将页面中的文字、图像等内容完美、直观地展现给访问者，同时合理安排网页空间，优化网页的页面效果和下载速度。在对网页进行布局设计时，应遵循对称平衡、异常平衡、对比、凝视和空白等原则。常见的网页布局形式包括：型布局、T型布局、“三”型布局、对比布局和POP布局等。,:计算机基础与实训教材系列系列丛书官方网站 http:/ :,1.2.2 网页的设计原则,网页的设计不仅涉及各种软件的操作技术，还关联到设计者对生活的理解和体验。网页设计就是要把适合的信息传达给适合
6、的观众，遵循一些必要的原则。,:计算机基础与实训教材系列系列丛书官方网站 http:/ :,1.2.3 网页的配色技巧,颜色的使用在网页制作中起着非常关键的作用，色彩成功搭配的网站可以令人过目不忘。,:计算机基础与实训教材系列系列丛书官方网站 http:/ :,1.2.4 网页的大体构思,在制作网页之前，首先对网页大体上的设计有个系统的构思，主要包括网页的主题、网页的命名、网站标志、色彩搭配和字体等要素。,:计算机基础与实训教材系列系列丛书官方网站 http:/ :,1.2.5 网页的一般设计流程,在制作网页的过程中，要遵循一定的顺序才能协调分配整个制作过程的资源与进度。网页的制作流程主要如下
7、。建立目标规划：在制作网页之前，必须首先明确要制作的网页目标，以及创建的网页将实现的效果。设计页面版式：在进行页面版式设计的过程中，需要安排网页中包括文本、图像、导航条、动画等各种元素在页面中显示的位置以及具体数量。收集与加工网页制作素材：制作网页所需要的素材。编辑网页内容：具体实施设计结果，按照设计的方案制作，通过Dreamweaver等网页编辑工具软件在具体的页面中添加实际内容。 测试并发布网页：在完成网页的制作工作之后，需要对网页效果进行充分的测试，以保证页面中各元素都能正常显示。,:计算机基础与实训教材系列系列丛书官方网站 http:/ :,1.3 认识Dreamweaver CS4,
8、Dreamewaver CS4作为Dreamewaver系列中的最新版本，在增强了面向专业人士的基本工具和可视技术外，同时提供了功能强大、开放式且基于标准的开发模式，可以轻而易举地制作出跨平台和浏览器的动感效果网页。Dreamweaver简介Dreamweaver CS4工作界面,:计算机基础与实训教材系列系列丛书官方网站 http:/ :,1.3.1 Dreamweaver简介,Dreamweaver CS4是Adobe公司最新推出的网页制作软件，用于对网站、网页和Web应用程序进行设计、编码和开发。它广泛用于网页制作和网站管理。,:计算机基础与实训教材系列系列丛书官方网站 http:/ :,1.3.2 Dreamweaver CS4工作界面,Dreamweaver CS4的工作界面秉承了Dreamweaver系列产品一贯的简洁、高效和易用性，多数功能都能在工作界面中很方便地找到。工作界面主要由【文档】窗口(设计区)、菜单栏、状态栏、面板组和【属性】面板组成，如图所示。,
