第一章网页制作基础

地址:北京百万庄大街22号邮编:100037编辑热线:[phone]基于工作过程的网页设计与网站开发教程机械工业出版社主编：张洪斌刘万辉地址:北京百万庄大街22号邮编:100037编辑热线:[phone]机械工业出版社CHINAMACHINEPRESS1.网页的简单制作方法2.网络的基本术语3.网站的分类与网站赏析4.网页设计师的素质(自学)5.网页设计的基本原则(自学)本章要点基于工作过程的网页设计与制作教程第一章网页制作基础地址:北京百万庄大街22号邮编:100037编辑热线:[phone]机械工业出版社CHINAMACHINEPRESS情境1：俞晨视觉传奇个人主页基于工作过程的网页设计与制作教程地址:北京百万庄大街22号邮编:100037编辑热线:[phone]机械工业出版社CHINAMACHINEPRESS俞晨视觉传奇个人主页制作步骤1）启动DreamweaverCS3，出现如图1-2所示的界面，选择“创建新项目”栏目中的HTML，系统便会新建一个HTML文档。图1-2DreamweaverCS3启动界面地址:北京百万庄大街22号邮编:100037编辑热线:[phone]机械工业出版社CHINAMACHINEPRESS2）单击“文件”菜单，选择“另存为”对话框中选择文件保存的位置并给文件命名，如命名为index.html，然后单击“保存”按钮保存文件。注意：在网页编辑之前先将网页保存，这是一个良好的习惯，并且应该为文件取一个英文名称或汉语拼音名称（不要命名为汉字名称），如果网页为主页可以命名为index.html或者为default.html。3）在工具栏中如图1-3所示的位置输入网页标题“欢迎访问俞晨视觉传奇网站!”图1-3工具栏中的文档标题文本框俞晨视觉传奇个人主页制作步骤地址:北京百万庄大街22号邮编:100037编辑热线:[phone]机械工业出版社CHINAMACHINEPRESS4）执行“插入”→“表格”命令，参数如图1-4所示，然后设置表格属性如图1-5所示：高为100%，背景颜色为黑色#000000。俞晨视觉传奇个人主页制作步骤图1-4设置表格大小图1-5设置表格属性地址:北京百万庄大街22号邮编:100037编辑热线:[phone]机械工业出版社CHINAMACHINEPRESS5）执行“插入”→“图像”命令，在“选择图像源文件”对话框中选择“index.jpg”图片，点击“确定”按钮即可完成图像的插入，选择图像设置“居中对齐”。6）插入图像后，按回车键，输入“2007-2009版权所有：俞晨建议1024*768以上分辨率浏览”版权信息。选择输入的文字，在属性栏中修改文字的颜色为白色（#ffffff）。7）按F12键，在IE浏览器中预览该网页，效果如图1-1所示。俞晨视觉传奇个人主页制作步骤注意：这个项目还可以进行优化，在今后的学习中可以进一步提高，在保存的文件夹中的default.html文件为优化过的网页。该页面采用了表格布局，插入了flash动画，设置了样式表，是大家进一步学习的目标，通过浏览default.html网页下面我们来大家学习网页的基本元素。地址:北京百万庄大街22号邮编:100037编辑热线:[phone]机械工业出版社CHINAMACHINEPRESS1.1.2网页的基本要素图1-6俞晨视觉传奇网站default.html网页基本构成要素网页标题LOGO网页文本网页图像网页页脚网页导航超级链接地址:北京百万庄大街22号邮编:100037编辑热线:[phone]机械工业出版社CHINAMACHINEPRESS1．页面标题网站中的每一个页面都有标题，用来提示该页面的主要内容，标题出现在浏览器的标题栏中，而不是出现在页面布局中。它还有一个比较重要的作用就是让浏览者清楚地知道所要浏览的内容，不至于迷失方向。设置页面标题很简单，一般的网页编辑软件都提供这项设置。在HTML文档中的title和/title之间输入网页的标题即可。有些网页编辑软件有一个默认的页面标题，如在Dreamwaver中默认为Untitled-1。1.1.2网页的基本要素地址:北京百万庄大街22号邮编:100037编辑热线:[phone]机械工业出版社CHINAMACHINEPRESS2．网站标志1.1.2网页的基本要素3．页面尺寸由于页面尺寸和显示器大小及分辨率有关，网页的显示无法突破显示器的显示范围，而且浏览器本身也会占去不少空间，因此留给页面的范围受到了限制。一般分辨率为800像素×600像素的情况下，页面的显示尺寸为778像素×430像素，分辨率为1024像素×768像素的情况下，页面的显示尺寸为1000像素×600像素。从以上数据可以看出，分辨率越高，页面尺寸越大。地址:北京百万庄大街22号邮编:100037编辑热线:[phone]机械工业出版社CHINAMACHINEPRESS4．页眉和页脚、导航栏、图片、文本1.1.2网页的基本要素页眉的风格一般要求和页面的整体风格保持一致。一个富有个性特色的页眉将和网站标志一样起到标示的作用。在页眉中常放置含有站点名字的图片、标志、网站宗旨、宣传口号和广告语等LOGO页眉导航栏地址:北京百万庄大街22号邮编:100037编辑热线:[phone]机械工业出版社CHINAMACHINEPRESS5．多媒体1.1.2网页的基本要素在网页中可以使用的媒体对象主要包括flash动画、flash按钮、flash文本、java小程序、音频和视频等。图1-10网页中的Flash动画图1-11网页中的视频地址:北京百万庄大街22号邮编:100037编辑热线:[phone]机械工业出版社CHINAMACHINEPRESS1．互联网1.2网页的基本概念互联网是由多个计算机网络相互连接而成的一个网络，它是在功能和逻辑上组成的一个大型网络。如图所示。图1-11Internet示意图地址:北京百万庄大街22号邮编:100037编辑热线:[phone]机械工业出版社CHINAMACHINEPRESS2．万维网1.2网页的基本概念万维网是Internet的一部分，它基于三个机制向用户提供资源，这三个机制是：1.协议协议是一组标准的规则，用于实现通过通信信道发送信息所需的数据表示、信号发送、身份验证及错误检测，访问Web上的资源都需要遵循这些规则。万维网使用的是HTTP协议（HyperTextTransferProtocol,超文本传输协议）。地址:北京百万庄大街22号邮编:100037编辑热线:[phone]机械工业出版社CHINAMACHINEPRESS2．万维网1.2网页的基本概念万维网是Internet的一部分，它基于三个机制向用户提供资源，这三个机制是：2.地址地址：万维网采用统一的命名方案来访问Web上的资源。URL（UniformResourceLocations,统一资源定位符，网页的网址）用于标识Web上的页面和资源。每个URL均由3部分组成，如下所示。•用于通讯的协议•与之通信的主机（服务器）•服务器上资源的路径（例如文件名）协议主机路径http地址:北京百万庄大街22号邮编:100037编辑热线:[phone]机械工业出版社CHINAMACHINEPRESS2．万维网1.2网页的基本概念万维网是Internet的一部分，它基于三个机制向用户提供资源，这三个机制是：3.HTML（HyperTextMarkupLanguage，超文本标记语言）HTML用于创建网页文档。HTML文档是使用HTML标记和元素创建的，此文件以扩展名.htm或.html保存在Web服务器上。请求响应客户浏览器客户浏览器/服务器工作的过程地址:北京百万庄大街22号邮编:100037编辑热线:[phone]机械工业出版社CHINAMACHINEPRESS3．Web浏览器1.2网页的基本概念Web浏览器的中文名称：网络浏览器或网页浏览器，简称浏览器；英文名称：WebBrowser。浏览器是用于观看网页的工具，是一个显示网页伺服器或档案系统内的HTML文件，并让用户与这些文件进行互动的一种软件。个人电脑上常见的网页浏览器包括微软的InternetExplorer、Mozilla的Firefox、Opera和Safari。浏览器是最经常使用到的客户端程序。地址:北京百万庄大街22号邮编:100037编辑热线:[phone]机械工业出版社CHINAMACHINEPRESS4．网页与网站1.2网页的基本概念网站：网站是万维网上相关网页的集合。网页：网页是万维网上的页面，其文件后缀名通常为.html或.htm。HTML：HTML是超文本标记语言（HyperTextMarkupLanguage）的简称。HTML编辑器：也称网页编辑器，一般是指用于开发网页的工具软件，目前比较流行的HTML编辑器是MacromediaDreamweaver和MicrosoftFrontPage。地址:北京百万庄大街22号邮编:100037编辑热线:[phone]机械工业出版社CHINAMACHINEPRESS1.网站的分类1.3网站的分类与赏析1．资讯类网站如新浪、网易、搜狐等门户网站。这类站点一般会为访问者提供大量的信息，而且访问量较大。因此，应对这些信息进行合理的分类，将页面划分为多个栏目，页面机构要合理、美观，便于浏览者浏览。2．形象类网站如一些中小型公司或单位的网站。这类网站一般较小，有的只有几页，需要实现的功能也比较简单，网页设计的主要任务是宣传企业形象。对于这类网站来说，版式、色彩、动画设计等是项目重点，一般对美工的要求较高。3．资讯与形象相结合的网站如大型公司或高校的网站。这类网站在设计上要求较高，既要考虑到资讯类网站的各项指标，同时又要突出企业、单位的形象。地址:北京百万庄大街22号邮编:100037编辑热线:[phone]机械工业出版社CHINAMACHINEPRESS2.网站的赏析-门户类网站1.3网站的分类与赏析YAHOO是互联网上最知名的公司，一直高居访问流量之首，是互联网上最大的门户，也是一个垂直网站总汇。YAHOO致力于做成互联网上最大的媒体，涉及的领域包括网络门户、电子商务、网络通信等，提供的服务还包括拍卖、购物、开设网上商店、聊天等。YAHOO公司是一家全球性的互联网通信、商贸及媒体公司，是全球第一家提供互联网导航服务、主要以广告为支撑的网站，广告收入占公司收入的60%。YAHOO网站如图1-13所示。地址:北京百万庄大街22号邮编:100037编辑热线:[phone]机械工业出版社CHINAMACHINEPRESS2.网站的赏析-门户类网站1.3网站的分类与赏析YAHOO的网站以浅蓝、紫色系为主要色调，右上新业务栏会不时变化相应的主题，根据相应的主题来定制不同的颜色，使用户总有即时、新鲜的感觉。（1）框架结构-首页上左中右下结构是框架,确切地说是左中右结构。整个网站的主要内容主要集中在中和右的信息内容上。（2）色彩与某些门户网站相比较，YAHOO网站的用色比较清爽、干净。整体看来，YAHOO使用了蓝色、紫色两套邻近色，辅助以灰色，使色彩过渡和谐。点睛色无疑为顶部左侧醒目突出网站的标志“YAHOO！”，这也是网站中纯度最高的颜色。YAHOO网站不仅对色相的微妙区别把握得很好，而且对色彩的纯度主次的把握也值得称赞。（3）文字颜色使用了低纯度的普蓝和黑色，其中普蓝色的文字是网站的超级链接形式，鼠标放上去后会有微妙的明度变化以及下划线的出现。说明性文字用的是黑色。信息内容框里的标题，主次关系排视觉第一位，内容框里的主要内容缩小字号，都做