搜索
《网页设计与制作教程与实训》第1章网页制作基本知识网页设计与制作教程与实训wangyeshejiyuzhizuojiaochengyushixun《网页设计与制作教程与实训》第1章网页制作基本知识第1章网页制作基本知识1.1与网页制作相关的术语1.2HTML简介1.3网页界面的构成要素1.4网页开发的流程1.5网站设计的要求《网页设计与制作教程与实训》第1章网页制作基本知识网站开发的流程网站设计的要求本章要点《网页设计与制作教程与实训》第1章网页制作基本知识1.1与网页制作相关的术语1．网站与网页当我们在浏览器中输入一个已知网址后，即可打开一个页面，让我们了解有关这个网址的一些信息和内容，这个页面就是我们通常所说的网页，而打开网络由网址进入时第一个看到的页面，我们通常把它称为首页（homepage）或主页，所有的信息都会清楚地整理在这个页面上，目的就是为了让用户在使用这个网页时能快速链接到需要的资料，它既是一个单独的网页，同一般网页一样可以存放各种信息,又是一个特殊的网页，是整个Web站点的起始点和汇总点，是用户开始浏览站点的“入口处”。由首页所延伸下去的页面，就是一个个网页。网页又称Web页面，是网络文件的组成部分，是可以被浏览器访问的单个HTML超文本文件,它由文字、表格、图片、声音、视频以及各种功能按钮等组成，这些文字、图片、按钮往往又是指向别的主页的连接点。在Internet网上，这些连接点又叫超级链接。所有由首页链接出去的网页集合起来就是网站。即在设计时，将某个主题明确后，再按所需的单元、内容经过安排，化为各个不同的网页，在同一个结构及诉求下出现的集合体，就是网站（WebSite）。有主题性的网站是要经过规划和构架过的网站。在互联网上，Web站点由一组相互关联的页面组成，如果把整个信息世界看作一个村子，那么一个Web站点可以理解成一个家庭。《网页设计与制作教程与实训》第1章网页制作基本知识1.1与网页制作相关的术语2．服务器（Server）与浏览器（Browser）服务器是局域网的核心设备,它管理着局域网中的各种资源,它的基本功能是网络通信服务、管理和提供网络共享资源，以及进行网络管理。服务器实质是一台配置较高的计算机。不同的电脑操作系统，有不同的适用服务器软件，如：微软视窗windowsXPProfessional操作系统适用的服务器软件IIS5.1．网站上动态的数据，必须要通过网站服务器的服务才能运作。用于查看Web站点的软件被称作浏览器。它是的窗口,用户可以利用浏览器从一个文档跳转到另一个文档实现对整个网站的浏览,也可以下载并解释HTML文档中所描述的动画、声音、文本、图形、图像，并能实现电子邮件查看、下载文件、FTD等功能。它有多种版本,如微软英特尔版本、苹果电脑版本等，大多数浏览者（目前已经超过90％）使用MicrosoftInternetExplorer(简称IE)浏览器.还有一些其他的浏览器，不同版本的浏览器功能大体一样，主要区别在于各功能区在版面上的排列不同。《网页设计与制作教程与实训》第1章网页制作基本知识3.远程站点(RemoteSite)和本地站点（LocalSite）远程站点是指服务器上组成的Web站点。本地站点是指与远程站点上的文件对应的本地磁盘上的文件。在制作网页时，首先要定义一个本地站点。作为一个网站，里面有很多网页文件、图片、Flash动画等，如果不进行管理归档，分散在硬盘的各个地方,就无法方便地进行网页发布。定义本地站点，就是在硬盘上建立一个目录，将所有的网页和相关的文件都放在里面，以便进行网页的制作和管理。一般在设计网页之前，先要以设计的网页的名称新建一个文件夹，把它放在电脑中常用来存储文件的磁盘中，如“我的网页”、“个人网页”等的文件夹里，也可以根据自己的习惯放置文件。1.1与网页制作相关的术语《网页设计与制作教程与实训》第1章网页制作基本知识4.统一资源定位器URLURL即UniformResourceLocator（统一资源定位器）的缩写。用来指明主机或文件在Internet上的位置，一个URL就是一个资源在Internet上的具体位置，URL由Internet资源类型、服务器地址、端口及路径组成，如：就是一个典型的URL。它的作用在于提供一个标准方法，以便能够在Internet上找到任何东西。无论是单一的页面，还是庞大复杂的网站，甚至是一个小小的图片，所有的网络资源都能通过URL系统访问到。1.1与网页制作相关的术语《网页设计与制作教程与实训》第1章网页制作基本知识1.2HTML简介1.2.1HTML基本格式及特点1.2.2HTML的基本语句1.HTML标记符2.“文件头”标记符3.“文件标题”标记符4.“文件体”标记符5.“标题”标记符6.字体和段落标记符7.图像标记符8.表格标记符9.框架标记符10.层标记符11.表单标记符《网页设计与制作教程与实训》第1章网页制作基本知识1.文字文字是网页最基本的构成要素，一个网页上大部分是由文字构成的，由于文字所表达内容比较清楚、直接,而且相对占用网页版面面积较小，使网页所表达的信息量加大，所以网上用来表达内容或链接的大部分是文字。文字也称文本，网页有90％左右是由文本组成。首页上的文本基本上都是用来链接用的。1.3网页界面的构成要素《网页设计与制作教程与实训》第1章网页制作基本知识2.图形图像图形和图像也是网页主要的构成要素，它有动态和静态之分，和文字的功能一样，也是基本上用来链接用的，它比文字看上去更加直观，更让人容易理解内容。图形可提高站点的访问率，但不能因此而在网页上加入过多的图片，这样会适得其反，一方面由于图形占网页空间较大，使网页信息量相对减少；另一方面由于图片较多，使网页显示的速度降低，用户浏览网页花费的时间较长。Web图形的文件标准格式是JPG、GIF和PNG，对颜色具有平滑渐变的图像使用JPG格式，如大多数照片；对于以单一颜色为主的图像，使用GIF格式。1.3网页界面的构成要素《网页设计与制作教程与实训》第1章网页制作基本知识1.3网页界面的构成要素3.超链接超链接由两个端点及一个方向构成。通常开始的位置称为源端点，目标位置称作目标端点。链接就是由源端点指向目标端点的一种跳转。目标端点可以是一个页面、一幅图像、一段声音、或者是页面中的某个位置。利用超链接可以实现文档间或文档中的跳转。根据源端点的不同，可以将超链接分为两种：超文本（Hypertext）和超链接（Hyperlink）。超文本就是源端点的文本的链接。而超链接是利用文本以外的对象作为源端点所创建的链接，如图像、表单等。《网页设计与制作教程与实训》第1章网页制作基本知识1.3网页界面的构成要素4.交互功能交互功能，即网上提供的聊天、论坛、留言本、邮件发送及接收的互动功能。这也是互连网的一大优势所在，它给人提供了一个快捷交流的平台，给人的生活带来了许多便利。《网页设计与制作教程与实训》第1章网页制作基本知识1.3网页界面的构成要素5.多媒体（Multimedia）多媒体就是指各种各样的信息载体在计算机中的应用，是一种文字、声音、图像、动画和视频影像成分的交互组合。网页中的多媒体主要指采用音频和视频功能的软硬件技术，包括数字音响、全动态图像、超媒体连接等，主要是对声音、图像具有编辑处理的功能，即网页上提供的音频和视频下载及播放功能，包括Flash动画、声音与影片文件的播放。它必须通过网络媒体播放器来实现，有多种网络媒体播放器。如常用的有WindowsMediaPlayer和RealonePlayer等播放器。《网页设计与制作教程与实训》第1章网页制作基本知识1.4网站开发的流程设计开发一个网站要考虑很多因素，如站点的定位、确定网站的目录和链接结构、首页的设计制作及网站的测试、发布和维护等，这些因素的考虑，是一个环环相扣的过程，要想设计制作一个成功的网站，对每一个环节的把握都十分重要。《网页设计与制作教程与实训》第1章网页制作基本知识1.4.1确定网站的目的和主题设计一个站点，首先要确定网站主题。主题也就是网站的题材。要选择一个好的主题，就需要注意以下几点：1)主题要小而精。“小”即定位要小，“精”即内容要精。2）题材最好是自己擅长或者喜爱的内容。3）题材不要太平或者目标太高。给网站起名时应做到以下几点：1）名称要正。2）名称要易记。3）名称要有特色。总之，定位题材和名称是设计一个网站的第一步，也是很重要的一部分。如果能想到一个满意的名称，花费一点时间也是值得的。1.4网站开发的流程《网页设计与制作教程与实训》第1章网页制作基本知识1.4.2定位网站CI形象CI形象是借用的广告术语。(CI是英文corporateidentity的缩写)，意思是通过视觉来统一企业的形象。企业一般都要通过CI形象的策划来提高知名度，它是一种营销战略。如较早地成功导入CI战略的世界知名公司有可口可乐、SONY、三菱、麦当劳等。一个网站，和实体公司一样，也需要整体的形象包装和定位准确的、有创意的CI设计，这样对网站的宣传推广有事半功倍的效果。网站主题和名称定下来之后，需要思考的就是网站的CI形象设计。网站的CI形象设计和企业的CI形象设计的内容相似，主要包括：1.4网站开发的流程《网页设计与制作教程与实训》第1章网页制作基本知识1.4网站开发的流程1.4.2定位网站CI形象1.设计网站的标志(logo)即网标。和商品的商标、企业的标志一样，网标是站点特色和内涵的集中体现，看见它就让人联想到它所代表的站点。如新浪网的网标就体现出新浪网的快捷、准确、精华的特色。标志图形可以只由中文、英文字母构成，也可以只由符号、图案（动物、植物、人物、几何）构成，还可以由文字和图形构成。如：soim是用soim的英文做为标志，新浪用字母sina和眼睛作为标志。标志的设计创意来自网站的名称和内容。1）以用与网站名称相关的人物，动物，花草等作为设计的主体对象，通过抽象、概括、变形等手法，使之艺术化、标志化，如迪斯尼的米老鼠、搜狐的卡通狐狸等。2）专业性较强的网站，可以以本专业有代表的物品作为设计的主体对象。如中国银行的古钱标志、奔驰汽车的方向盘标志等。3)最常用和最简单的方式，是用网站的英文名称的字体作为设计的主体对象，用不同的字体、字母的变形及字母的组合，使之艺术化、标志化。《网页设计与制作教程与实训》第1章网页制作基本知识1.4.2定位网站CI形象2.设计网站的标准色彩网站给人的第一印象来自视觉的冲击感，确定网站的标准色彩是相当重要的一步。不同的色彩搭配会产生不同的效果，并可能影响到访问者的情绪。“标准色彩”是指能体现网站形象和延伸内涵的色彩。如：IBM的深蓝色、肯德基的红色条型、Windows视窗标志上的红、蓝、黄、绿色块等，都会给我们不同的视觉感受。一般来说，一个网站的标准色彩不宜超过三种，太多会使人眼花缭乱。标准色彩要用于网站的标志、标题、主菜单和主色块，给人以整体统一的感觉。标准色之外的其它色彩也可以使用，只是作为点缀和衬托，不能大面积使用，以免影响整体感。1.4网站开发的流程《网页设计与制作教程与实训》第1章网页制作基本知识1.4.2定位网站CI形象3.设计网站的标准字体和标准色彩一样，标准字体是指用于标志、标题、主菜单的特有字体。网页默认的字体是宋体。为了体现站点的特有风格，可以根据需要选择一些特殊的字体。如，为了体现专业性，可以使用粗仿宋体；体现艺术性可以用广告体；体现亲切随意可以用手写体等。也可以根据网站所表达的内涵，选择更贴切的字体。目前常见的中文字体有二三十种，常见的英文字体有近百种，网络上还有许多专用的艺术字体下载，但要找到一种和网页内容相符的字体，也不是一件容易的事。严格的讲，标准字体是要经过设计加工的字体，是独一无二的字体，是不能从任何字库里直接任意选用的字体，所以，标准字体最好是根据网站的内容专门设计的字体，这种字体最好用图片的形式在网页上出现。1.4网站开发的流程《网页