第1讲网页制作

《第1讲网页制作》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、网页设计与制作主讲：张柱Email：zhangzhuswjtu@gmail.com前言网站设计与制作是一个很大的课题。本课程主要讲述静态网站的设计与制作。从网站的主题、结构、风格、布局等讲述网站设计制作的构思。静态网站静态网站概念在网站设计中，纯粹HTML格式的网页通常被称为“静态网页”，静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难。静态网页的网址形式通常为：以.htm、.html、.shtml、.xml等为后后缀的。在HTML格式的网页上，也可以出现各种动态的效果，如.

2、GIF格式的动画、FLASH、滚动字母等，这些“动态效果”只是视觉上的。动态网站-静态网站的区别程序是否在服务器端运行，是重要标志。在服务器端运行的程序、网页、组件，属于动态网页，它们会随不同客户、不同时间，返回不同的网页，例如ASP、PHP、JSP、ASP.net等。运行于客户端的程序、网页、插件、组件，属于静态网页，例如html页、Flash、JavaScript、VBScript等等，它们是永远不变的。课程内容主要分四部分第一部分：基础知识的讲解（共1课时）第二部分：Dreamweaver软件使用讲解(共11课时)第三部分：个人作业

3、制作(3课时)第四部分：作业提交课程考核平时点名课堂作业(小作业：网页总体设计)最终作品提交最终成绩=平时点名成绩+课堂作业成绩+最终作业成绩第1章网页设计基础知识网站作为新媒体，具有很多与传统媒体不同的特征与特性，在开始制作网页之前，需要对网站的设计有全面的了解和认识。这一章首先介绍网页的基本概念及构成要素，帮助大家理解网页的特点与结构；接下来学习网站建设的基本流程，了解网站是如何从无到有的；此外，网页版式与风格设计是建设一个成功网站的关键，学习基本的规律有助于设计出更美观、实用的网站。1.1网页与网站由于互联网具备同时传送文字、动画、

4、图形、声音等多媒体的能力，使之成为当今最流行的媒体。而形式各异、内容繁杂的网页是这些信息的载体。那么什么是网页？什么是网站？网页与网站究竟有哪些异同？网页包含哪些基本构成要素？1.1.1认识网页与网站网页（WebPage）实际上是一个文件，网页经由网址（URL）来识别与存取。当浏览者输入一个网址或单击某个链接，在浏览器中显示出来的就是一个网页。网站（WebSite）是各种各样网页的集合，有的网站内容众多，如新浪、搜狐等门户网站；有个网站只有几个页面，如个人网站。在构成网站的众多网页中，有一个页面比较特殊，称为首页（HomePage）。例如

5、，当浏览者输入搜狐网站地址“www.sohu.com”后出现在第一个页面，即sohu网站的首页，如图1.1所示。浏览者可以根据首页的导航进入其他页面，了解更多内容。1.1.2网页的基本构成要素虽然网页种类繁多，形式内容各有不同。但网页的基本构成要素大体相同，包括标题（Logo）、导航、文本、图片、动画、超链接、表单、音视频等。网页设计就是要将上述构成要素有机整合，表达出美与和谐。1.2网站建设的基本流程规范的网站建设应遵循一定的流程，主要由规划设计阶段、实施发布阶段、评价阶段组成，各个阶段的具体环节如图所示。那部分最关键？1.3网页版式设

6、计网页的版式设计是网页设计的核心，主要内容包括网页整体布局设计和导航样式的设计。本节将介绍常见的几种网页布局，以及网页导航设计应遵循的原则。1.3.1网页布局网页布局是网页设计的基础，目前网页的布局主要可归为三大类型：分栏式结构、区块分布式结构、无框架局限式结构。1．分栏式结构2．区域分布式结构3．无框架局限式结构1.3.2导航设计导航是网页设计中不可或缺的基础元素之一。导航就如同一个网站的路标，有了它就不会在浏览网站时“迷路”。导航链接着各个页面，只要单击导航中的超级链接就能进入相应的页面。导航设计的好坏，决定着用户是否能很方便地使用网

7、站。导航设计应直观明确，最大限度地为用户使用考虑，尽可能使网页切换更便捷。导航的设计要符合整个网站的风格和要求，不同的网站会采用不同的导航方式。一般来说，在网页的上端或左侧设置导航栏是比较普遍的方式，如图1.9所示。网站采用上端文字作为一级导航，左侧树状结构菜单作为二级导航。导航设计应遵循以下原则：让用户了解当前所处的位置；让用户能根据走过的路径，确定下一步的前进方向和路径；不需要浏览太多的页面才能找到需要的信息，让用户能快速而简捷地找到所需的信息，并以最佳的路径到达这些信息；让用户使用网站遇到困难时，能寻求到解决困难的方法，找到最佳路径

8、；让用户清楚地了解整个网站的结构概况，产生整体性感知；对使用频率不同的信息作有序处理。1.4网页风格设计同样的版式设计，配色不同，文字样式不同，也可以呈现出多种不同的网页风格。本节将结合实例从