《网页设计与制作教程与实训》全套ppt电子课件教案第1章网页制作基本知识.ppt
《《网页设计与制作教程与实训》全套ppt电子课件教案第1章网页制作基本知识.ppt》由会员分享,可在线阅读,更多相关《《网页设计与制作教程与实训》全套ppt电子课件教案第1章网页制作基本知识.ppt(84页珍藏版)》请在三一办公上搜索。
1、网页设计与制作教程与实训 wangyeshejiyuzhizuojiaochengyushixun,第1章 网页制作基本知识,1.1 与网页制作相关的术语 1.2 HTML简介1.3 网页界面的构成要素1.4 网页开发的流程1.5 网站设计的要求,网站开发的流程网站设计的要求,本章要点,1.1 与网页制作相关的术语,1网站与网页 当我们在浏览器中输入一个已知网址后,即可打开一个页面,让我们了解有关这个网址的一些信息和内容,这个页面就是我们通常所说的网页,而打开网络由网址进入时第一个看到的页面,我们通常把它称为首页(home page)或主页,所有的信息都会清楚地整理在这个页面上,目的就是为了让
2、用户在使用这个网页时能快速链接到需要的资料,它既是一个单独的网页,同一般网页一样可以存放各种信息,又是一个特殊的网页,是整个Web站点的起始点和汇总点,是用户开始浏览站点的“入口处”。由首页所延伸下去的页面,就是一个个网页。 网页又称Web页面,是网络文件的组成部分,是可以被浏览器访问的单个HTML超文本文件,它由文字、表格、图片、声音、视频以及各种功能按钮等组成,这些文字、图片、按钮往往又是指向别的主页的连接点。在Internet网上,这些连接点又叫超级链接。所有由首页链接出去的网页集合起来就是网站。即在设计时,将某个主题明确后,再按所需的单元、内容经过安排,化为各个不同的网页,在同一个结构
3、及诉求下出现的集合体,就是网站(Web Site)。有主题性的网站是要经过规划和构架过的网站。在互联网上,Web站点由一组相互关联的页面组成,如果把整个WWW信息世界看作一个村子,那么一个Web站点可以理解成一个家庭。,1.1 与网页制作相关的术语,2服务器(Server)与浏览器(Browser) 服务器是局域网的核心设备,它管理着局域网中的各种资源,它的基本功能是网络通信服务、管理和提供网络共享资源,以及进行网络管理。服务器实质是一台配置较高的计算机。不同的电脑操作系统,有不同的适用服务器软件,如:微软视窗windows XP Professional操作系统适用的服务器软件IIS5.1网
4、站上动态的数据,必须要通过网站服务器的服务才能运作。 用于查看Web站点的软件被称作浏览器。它是WWW的窗口,用户可以利用浏览器从一个文档跳转到另一个文档实现对整个网站的浏览,也可以下载并解释HTML文档中所描述的动画、声音、文本、图形、图像,并能实现电子邮件查看、下载文件、FTD等功能。它有多种版本,如微软英特尔版本、苹果电脑版本等,大多数浏览者(目前已经超过90)使用Microsoft Internet Explorer(简称IE)浏览器.还有一些其他的浏览器,不同版本的浏览器功能大体一样,主要区别在于各功能区在版面上的排列不同。,3. 远程站点(Remote Site)和本地站点(Loc
5、al Site) 远程站点是指服务器上组成的Web站点。本地站点是指与远程站点上的文件对应的本地磁盘上的文件。 在制作网页时,首先要定义一个本地站点。作为一个网站,里面有很多网页文件、图片、Flash动画等,如果不进行管理归档,分散在硬盘的各个地方,就无法方便地进行网页发布。定义本地站点,就是在硬盘上建立一个目录,将所有的网页和相关的文件都放在里面,以便进行网页的制作和管理。一般在设计网页之前,先要以设计的网页的名称新建一个文件夹,把它放在电脑中常用来存储文件的磁盘中,如“我的网页”、“个人网页”等的文件夹里,也可以根据自己的习惯放置文件。,1.1 与网页制作相关的术语,4. 统一资源定位器U
6、RL URL即Uniform Resource Locator(统一资源定位器)的缩写。用来指明主机或文件在Internet上的位置,一个URL就是一个资源在Internet上的具体位置,URL由Internet资源类型、服务器地址、端口及路径组成,如:http:/,1.1 与网页制作相关的术语,1.2 HTML简介,1.2.1 HTML基本格式及特点1.2.2 HTML的基本语句 1. HTML 标记符 2. “文件头”标记符 3. “文件标题”标记符 4. “文件体”标记符 5. “标题”标记符 6. 字体和段落标记符 7. 图像标记符 8. 表格标记符 9. 框架标记符 10. 层标记符
7、 11. 表单标记符,1. 文字 文字是网页最基本的构成要素,一个网页上大部分是由文字构成的,由于文字所表达内容比较清楚、直接,而且相对占用网页版面面积较小,使网页所表达的信息量加大,所以网上用来表达内容或链接的大部分是文字。文字也称文本,网页有90左右是由文本组成。首页上的文本基本上都是用来链接用的。,1.3 网页界面的构成要素,2. 图形图像 图形和图像也是网页主要的构成要素,它有动态和静态之分,和文字的功能一样,也是基本上用来链接用的,它比文字看上去更加直观,更让人容易理解内容。图形可提高站点的访问率,但不能因此而在网页上加入过多的图片,这样会适得其反,一方面由于图形占网页空间较大,使网
8、页信息量相对减少;另一方面由于图片较多,使网页显示的速度降低,用户浏览网页花费的时间较长。 Web图形的文件标准格式是JPG、GIF和PNG,对颜色具有平滑渐变的图像使用JPG格式,如大多数照片;对于以单一颜色为主的图像,使用GIF格式。,1.3 网页界面的构成要素,1.3 网页界面的构成要素,3. 超链接 超链接由两个端点及一个方向构成。通常开始的位置称为源端点,目标位置称作目标端点。链接就是由源端点指向目标端点的一种跳转。目标端点可以是一个页面、一幅图像、一段声音、或者是页面中的某个位置。利用超链接可以实现文档间或文档中的跳转。 根据源端点的不同,可以将超链接分为两种:超文本(Hypert
9、ext)和超链接(Hyperlink)。超文本就是源端点的文本的链接。而超链接是利用文本以外的对象作为源端点所创建的链接,如图像、表单等。,1.3 网页界面的构成要素,4. 交互功能 交互功能,即网上提供的聊天、论坛、留言本、邮件发送及接收的互动功能。这也是互连网的一大优势所在,它给人提供了一个快捷交流的平台,给人的生活带来了许多便利。,1.3 网页界面的构成要素,5. 多媒体(Multimedia) 多媒体就是指各种各样的信息载体在计算机中的应用,是一种文字、声音、图像、动画和视频影像成分的交互组合。网页中的多媒体主要指采用音频和视频功能的软硬件技术,包括数字音响、全动态图像、超媒体连接等,
10、主要是对声音、图像具有编辑处理的功能,即网页上提供的音频和视频下载及播放功能,包括Flash动画、声音与影片文件的播放。它必须通过网络媒体播放器来实现,有多种网络媒体播放器。如常用的有Windows Media Player和 Realone Player等播放器。,1.4 网站开发的流程,设计开发一个网站要考虑很多因素,如站点的定位、确定网站的目录和链接结构、首页的设计制作及网站的测试、发布和维护等,这些因素的考虑,是一个环环相扣的过程,要想设计制作一个成功的网站,对每一个环节的把握都十分重要。,1.4.1 确定网站的目的和主题 设计一个站点,首先要确定网站主题。主题也就是网站的题材。要选择
11、一个好的主题,就需要注意以下几点: 1) 主题要小而精。“小”即定位要小,“精”即内容要精。 2)题材最好是自己擅长或者喜爱的内容。 3)题材不要太平或者目标太高。 给网站起名时应做到以下几点: 1)名称要正。 2)名称要易记。 3)名称要有特色。 总之,定位题材和名称是设计一个网站的第一步,也是很重要的一部分。如果能想到一个满意的名称,花费一点时间也是值得的。,1.4 网站开发的流程,1.4.2 定位网站CI形象 CI形象是借用的广告术语。(CI是英文corporate identity的缩写),意思是通过视觉来统一企业的形象。企业一般都要通过CI形象的策划来提高知名度,它是一种营销战略。如
12、较早地成功导入CI战略的世界知名公司有可口可乐、SONY、三菱、麦当劳等。一个网站,和实体公司一样,也需要整体的形象包装和定位准确的、有创意的CI 设计,这样对网站的宣传推广有事半功倍的效果。网站主题和名称定下来之后,需要思考的就是网站的CI形象设计。网站的CI形象设计和企业的CI形象设计的内容相似,主要包括:,1.4 网站开发的流程,1.4 网站开发的流程,1.4.2 定位网站CI形象 1. 设计网站的标志(logo) 即网标。和商品的商标、企业的标志一样,网标是站点特色和内涵的集中体现,看见它就让人联想到它所代表的站点。如新浪网的 网标就体现出新浪网的快捷、准确、精华的特色。 标志图形可以
13、只由中文、英文字母构成,也可以只由符号、图案(动物、植物、人物、几何)构成,还可以由文字和图形构成。如:soim是用soim的英文做为标志,新浪用字母sina和眼睛作为标志。标志的设计创意来自网站的名称和内容。 1)以用与网站名称相关的人物,动物,花草等作为设计的主体对象,通过抽象、概括、变形等手法,使之艺术化、标志化,如迪斯尼的米老鼠、搜狐的卡通狐狸等。 2)专业性较强的网站,可以以本专业有代表的物品作为设计的主体对象。如中国银行的古钱标志、奔驰汽车的方向盘标志等。 3) 最常用和最简单的方式,是用网站的英文名称的字体作为设计的主体对象,用不同的字体、字母的变形及字母的组合,使之艺术化、标志
14、化。,1.4.2 定位网站CI形象 2. 设计网站的标准色彩 网站给人的第一印象来自视觉的冲击感,确定网站的标准色彩是相当重要的一步。不同的色彩搭配会产生不同的效果,并可能影响到访问者的情绪。“标准色彩”是指能体现网站形象和延伸内涵的色彩。如:IBM的深蓝色、肯德基的红色条型、Windows视窗标志上的红、蓝、黄、绿色块等,都会给我们不同的视觉感受。一般来说,一个网站的标准色彩不宜超过三种,太多会使人眼花缭乱。标准色彩要用于网站的标志、标题、主菜单和主色块,给人以整体统一的感觉。标准色之外的其它色彩也可以使用,只是作为点缀和衬托,不能大面积使用,以免影响整体感。,1.4 网站开发的流程,1.4
15、.2 定位网站CI形象 3. 设计网站的标准字体 和标准色彩一样,标准字体是指用于标志、标题、主菜单的特有字体。网页默认的字体是宋体。为了体现站点的特有风格,可以根据需要选择一些特殊的字体。如,为了体现专业性,可以使用粗仿宋体;体现艺术性可以用广告体;体现亲切随意可以用手写体等。也可以根据网站所表达的内涵,选择更贴切的字体。目前常见的中文字体有二三十种,常见的英文字体有近百种,网络上还有许多专用的艺术字体下载,但要找到一种和网页内容相符的字体,也不是一件容易的事。严格的讲,标准字体是要经过设计加工的字体,是独一无二的字体,是不能从任何字库里直接任意选用的字体,所以,标准字体最好是根据网站的内容
16、专门设计的字体,这种字体最好用图片的形式在网页上出现。,1.4 网站开发的流程,1.4 网站开发的流程,1.4.2 定位网站CI形象 4. 设计网站的宣传标语 网站的宣传标语,就是把网站的精神、目标用一句话或一个词来高度概括。类似生活中的广告语。如鹊巢的“味道好极了”、麦斯威尔的“好东西和好朋友一起分享”、Intel的“给你一个奔腾的心”等。 网站的标志、色彩、字体和标语,是一个网站树立CI形象的关键,也是一个网站档次高低的直接体现,所以,定位网站的CI形象,最好要有艺术设计人员参与。,1.4 网站开发的流程,1.4.3 资料收集、制作与整理 网站资料主要包括文本、图像两大类,大部分在放入网页
17、前都需要做适当的修改和处理。另外,依据网站的主题亮点,还可能准备如声音、Flash影片、图像等需要在网页中展示的内容。搜集资料时范围要广泛,在进行网页设计时再整理与筛选。,1.4 网站开发的流程,1.4.4 规划网站的目录结构和链接结构 站点确定后,接下来就要规划网站的结构,网站的结构分目录结构和链接结构。确定网站的结构目的是便于网站的使用和维护。 网站的目录是指在建立网站定义站点时创建的目录,如有类似“我的网页”的根目录和“我的家”的子目录。目录的结构是一个很容易忽略的问题,目录结构的好坏,对浏览者来说并没有什么太大的感觉,但是对于站点本身的上传维护、内容未来的扩充和移植有着重要的影响。如建
18、立E:/我的网页我的家文字、图片、链接等较清晰的目录,就便于网站的管理和维护。 网站的链接结构是指页面之间相互链接的拓扑结构,它建立在目录结构基础之上,但可以跨越目录。形象地说:每个页面都是一个固定点,链接则是在两个固定点之间的连线。一个点可以和一个点连接,也可以和多个点连接。更重要的是,这些点并不是分布在一个平面上,而是存在于一个立体的空间中。确立网站的链接结构的目的是用最少的链接,使得浏览最有效率。,1.4 网站开发的流程,1.4.4 规划网站的目录结构和链接结构 一般来说,确定网站的链接结构有两种基本方式: 1) 树状链接结构(一对一)。类似DOS的目录结构,首页链接指向一级页面,一级页
19、面链接指向二级页面。立体结构看起来就象蒲公英。这样的链接结构浏览时,一级级进入,一级级退出。优点是条理清晰,访问者明确知道自己在什么位置,不会“迷”路。缺点是浏览效率低,一个栏目下的子页面到另一个栏目下的子页面,必须绕经首页。如: 校园动态-教师活动-学生活动 首页 教学园地-教师成果-学生作品,1.4 网站开发的流程,1.4.4 规划网站的目录结构和链接结构 2) 星状链接结构(一对多)。类似网络服务器的链接,每个页面相互之间都建立有链接。立体结构象东方明珠电视塔上的钢球。这种链接结构的优点是浏览方便,随时可以到达自己喜欢的页面。缺点是链接太多,容易使浏览者迷路,搞不清自己在什么位置、看了多
20、少内容。如: 校园动态-教师活动-学生活动 首页 教学园地-教师成果-学生作品 这两种基本结构都只是理想方式,在实际的网站设计中,一般要将这两种结构混合起来使用。,1.4 网站开发的流程,1.4.5 首页的设计与制作 确立好了网站的结构,就可以对网站的首页进行设计了,首页的设计是一个网站成功与否的关键。用户往往看到第一页就已经对站点有一个整体的感觉,是不是能够促使他们继续点击进入或者使他们的视线留在站点上,首页设计的好坏是至关重要的,所以,首页的设计和制作是一定要重视和花费精力的,一般首页设计和制作占整个制作时间的40%左右,这样可以避免出现全部制作好以后再修改带来的麻烦。 首页,从根本上说就
21、是全站内容的目录,是一个索引,但不是一个简单的目录的罗列,如何设计好一个首页呢?一般的步骤是:,1.4 网站开发的流程,1.4.5 首页的设计与制作 1. 确定首页的功能模块 首页的内容模块是指你需要在首页上实现的主要内容和功能。一般的站点都需要这样一些模块:网站名称(logo)、广告条(banner)、主菜单(menu)、新闻(whats new)、搜索(search)、 友情链接(links)、邮件列表(maillist)、计数器(count)、版权(copyright). 选择哪些模块,实现哪些功能,是否需要添加其他模块都是首页设计首先需要确定的。,1.4 网站开发的流程,1.4.5 首
22、页的设计与制作 2. 设计首页的版面 在功能模块确定后,开始设计首页的版面。就象搭积木一样,每个模块是一个单位积木,如何拼搭出一座漂亮的房子,就要看设计师的创意和想象力了。 设计版面的最好方法是先勾勒出理想中的草图,然后再用网页制作软件来实现。,1.4 网站开发的流程,1.4.6 网站测试与发布 1. 网站测试项目及方法 整个站点编辑制作完成后,最终需要在服务器上发布.但在此之前必须对站点进行测试.测试以后,根据空间商所提供的资料,将本地站点发布到服务器上,并进行最后的测试. 在创建一个Web站点时,测试是绝对需要的,我们无法掌握用户的浏览器版本、类型,用尽可能多的浏览器和系统中浏览自己的页面
23、是很关键的。在进行调整之前,必须对颜色、灰度系数、页面偏移和容量的变化进行观察。可以从Dreamweaver MX2004中进行一个比较基础、初级的测试类型,那就是代码测试。浏览器通常忽略了它们所不理解的标记和属性,但这些标记有可能产生意想不到的不好的效果,所以,要首先检查目标浏览器的兼容性,步骤如下:,1.4 网站开发的流程,1.4.6 网站测试与发布 1. 网站测试项目及方法 (1) 打开【结果】面板组(单击【窗口】|【结果】命令),进入【目标浏览器检查】面板,单击面板左上角的绿色三角形按钮,在弹出的菜单中选择【设置】,系统弹出【目标浏览器】对话框,选择目标浏览器类型、版本。单击【确定】按
24、钮。如图1-1所示。图1-1 目标浏览器类型、版本设定,1.4 网站开发的流程,1.4.6 网站测试与发布 1. 网站测试项目及方法 (2) 单击面板左上角的绿色三角形按钮图标,在弹出的菜单中选择【为整个站点检查目标浏览器】或【检查目标浏览器】,随即开始运行检测报告,在面板下方出现在目标浏览器中的测试信息。如图1-2所示。图1-2 运行目标浏览器检查 单击面板左边的浏览报告按钮一个像地球形状的图标,可以打开一个窗口,先是目标浏览器检查结果,可以非常清楚地看到每个错误和警告信息,从而做相关的完善。,1.4 网站开发的流程,1.4.6 网站测试与发布 1. 网站测试项目及方法 对站点进行测试,还必
25、须从以下几个方面来完成。 1)应在尽可能多的不同的浏览器和平台上预览页面,查看布局、颜色、字体大小和默认浏览器窗口大小等方面的区别。这些区别在目标浏览器检查中是无法预见的。 2)检查站点是否有断开的链接,并修复断开的链接。由于其它站点也在重新设计、重新组织,所以所链接的页面可能已被移动或删除,可运行链接检查报告对链接进行测试。 3)监测页面的文件大小以及下载这些页面所占用的时间。由大型表格组成的页面,在某些浏览器中, 在整张表完全载入之前,访问者将什么也看不到。所以,应考虑将大型表格分为几部分,或者将少量内容放在表以外的页面顶部,这样在下栽表的同时,用户就可以查看这些内容。 4) 在完成对站点
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页设计与制作教程与实训 网页 设计 制作 教程 全套 ppt 电子 课件 教案 基本知识
链接地址:https://www.31ppt.com/p-1307354.html