《网页设计与制作教程与实训》全套ppt电子课件教案-第1章 网页制作基本知识.ppt

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