编辑网页基本元素
《网页设计基础》PPT课件
1.4 建立网站的基本流程
图1-2所示的是一个网站的完整制作流程.
确定主题策划与准备来自收集资料与素材规划网站结构
图
-
1
设计网页版式
2
确定网站结构
网
站
制作阶段
制作网页元素
的
制
插入元件与排版
作 流
上传网站
程
后期工作
维护与更新
1.4.1 确定主题
网站的主题也就是网站的题材, 是网站设计首先遇到的问题.
〔2〕利用Fireworks修改图像非常方便.
〔3〕Fireworks无需借助其他工具就可 以完成将一个图像转化为网页元素的全过程.
〔4〕Fireworks具有文件导出功能.
1.3.2 Flash
Flash是Macromedia公司开发 的用于矢量图形编辑和动画创作的 专业软件,它是一种交互式动画设 计工具,用它可以将音乐、声效、 动画以及富有新意的界面融合在一 起,以制作出高品质的网页动态效 果.
网站的定位要小,内容要精.
网站的题材最好选自己擅长或 者喜爱的内容.
网站名称,是网站设计的一部 分,而且是一个关键的要素,和现实 生活中一样,网站名称是否正气、
1.4.2 搜集资料 1.4.3 网站的整体规划
进行网站的整体规划也就是组 织网站的内容并设计其结构. 1.4.4 网页设计与制作
1．静态网页的设计与制 作
Dreamweaver是 Macromedia公司推出的一款大 众化的网页制作软件,它具有可 视化编辑界面,用户不必编写复 杂的HTML源代码就可以生成跨 平台、跨浏览器的网页,不仅适 合于专业网页编辑人员的需要, 同时也容易被业余网页制作人员 所掌握.
1.2.3 FrontPage
网页的基本构成-网页设计组成元素-基本结构介绍
网页的基本构成-网页设计组成元素-基本结构介绍不同性质、不同类别的网站，其页面内容的安排是不同的。
一般网页的基本内容包括标题、网站LOGO、页眉、页脚、导航、主要内容等。
如果想具体了解网页的基本构成，那无妨接着往下看吧!1、网页标题网页标题是对一个网页的高度概括。
网站中的每一个页面都有一个标题，用来表示该页面的主要内容。
它的主要作用是引导访问者清楚地浏览网站的内容。
2、网站的LOGO在IT领域，LOGO意味着标志、标识。
它的主要用途是与其他网站链接，让其他网站链接到该标志和门户，代表一个网站或网站的某个部分。
LOGO的图形形式，特别是动态的LOGO，比文字形式的链接更引人注意。
为了促进互联网上的信息传播，一个统一的国际标准是必要的。
目前，关于网站的LOGO有三种规格：(1) 88×31像素，这是互联网上最常见的LOGO规格。
(2) 120×60像素，这种规格用于一般大小的LOGO。
(3) 120×90像素，这种规格用于大型LOGO。
3、网页页眉网页页眉是指页面顶部的部分，有些页面划分得比较显然，有些页面则没有明确的区分。
通常状况下，页头的〔制定〕风格与页面整体风格一致，富有变化的页眉与网站的标志LOGO具有相同的作用。
页眉的位置比较吸引人，大多数网站制在这里设置网站的目的、口号、广告语等。
4、网页页脚网页页脚位于页面底部，通常用来标注站点所属公司的名称、地址、网站版权、电子邮件地址等信息，使用户能够了解网站所有者的基本状况。
5、网页导航网页导航是指通过一定的技术手段，为访问者提供一定的网页浏览方式，使他们能够方便地获取所必须内容。
网页导航在每个网页中的位置是不同的。
网页导航的表现形式是网页上的栏目菜单设置、辅助菜单和其他在线帮助。
6、网页的主体内容主体内容是〔网页制定〕的元素。
它一般是二级链接内容的标题，或是内容。
1.1.3 网页的基本组成元素[共2页]
![1.1.3 网页的基本组成元素[共2页]](https://img.taocdn.com/s3/m/d35d2ca402768e9950e73822.png)
4 域名是。
1.1.3 网页的基本组成元素网页是由多种元素组成的。
文本和图像是网页中最基本的元素，更是网页信息的主要载体，它们在网页中起着非常重要的作用。
而其他的很多元素（如超链接等）都是基于这两种基本元素而创建的。
从严格意义上讲，网页也是一种“软件”，其界面也是软件界面的一种。
然而，相比各种系统软件和应用软件，网页的界面又有一些不同的地方。
网页是由浏览器打开的文档，因此可以将其看作浏览器的一个组成部分。
以内容来划分，一般的网页界面包括网站Logo、Banner、导航栏、内容栏和版尾等部分。
1．LogoLogo（意译为标识、标志等）是整个网站对外唯一的标识和标志，是网站商标和品牌的图形表现，其制作要点如下。
● Logo的位置通常位于网页的左上角，也可根据需要将其置于其他任何位置，一般需保证Logo醒目，让浏览者能很快看到。
● Logo的内容通常包括特定的图形和文本，其具体内容应与开发网站的企业文化紧密结合，以体现网站的特色，图1-4所示为新浪网的Logo。
2．BannerBanner，中文意思为旗帜或网幅，是一种可以由文本、图像和动画相结合而成的网页栏目。
Banner的主要作用是显示网站的各种广告，包括网站自身产品的广告和与其他企业合作放置的广告。
其标准尺寸有468像素×60像素、392像素×60像素、234像素×60像素、125像素×125像素、120像素×90像素、120像素×60像素、88像素×31像素及120像素×240像素等。
其中，468像素×60像素和88像素×31像素的Banner使用最多，468像素×60像素的Banner文件大小应在15KB左右，而88像素×31像素的Banner文件大小最好在5KB左右。
除此之外，在一些特殊场合也可使用一些非标准尺寸的Banner，图1-5所示为当当网首页特卖活动横幅广告。
网页制作基础知识
4．制作工具的选择
可使用FrontPage、DreamWeaver等网页制作软件。在本案例中，将使用 DreamWeaver MX进行“网页制作学习园地”网站的创建。
1.2 理论知识
1.2.1 HTML语言
在Web的发展历史中，HTML技术是优秀而核心的Web技术之一。目前计算机上包含互 联网在内的大部分应用程序在交互操作上的核心原理都来自于HTML的链接设计思想。
<h#>...</h#> <b>...</b> <i>...</i> <u>...</u> <sup>...</sup> <sub>...</sub> <tt>...</tt> <cite>...</cite>
<em>...</em>
<address>...</address> <strong>...</strong> <pre>...</pre>
<font size=" ">
<font face=" ">
<font color=" ">
设置文字的颜色
2 . 文本样式标记
文本样式标记用于设置网页中文字格式化为特殊的形式，如加粗、倾斜等。
文本样式标记如下表：
标 记 说 明
定义标题级别，黑体字显示。"#"=1～6。<h1>显示的字号最大、<h6>最小。 设置粗体字 设置斜体字 设置下划线 设置文本为上标格式 设置文本为下标格式 设置打字机风格字体的文本 以引用或参考的形式格式化文本，通常显示为斜体。
第3章 网页元素编辑
• •
password file checkbox radio button submit reset
第三章 网页元素编辑
1、文字域text 、文字域 text属性值用来设定在表单的文本域中，输入任何 属性值用来设定在表单的文本域中， 属性值用来设定在表单的文本域中 类型的文本、数字或字母。输入的内容以单行显示。 类型的文本、数字或字母。输入的内容以单行显示。
第三章 网页元素编辑
• • • 3.4 建立表单 表单是实现交互动态网页的一种主要的外 在形式，是网站管理者与浏览者之间沟通的桥梁。 表单的主要功能是收集信息，接受浏览 者在网页中的操作，并传递给服务器端的表单处 理程序。
第三章 网页元素编辑
• 表单是网页上的一个特定区域，它由
• <form></form>标签定义。 • • • • • • 语法： <form name=“form_name” method=“method” action=“url” > …… </form>
文字域属值 name maxlength size value 描述 文字域的名称 文字域的最大输 入字符数 文字域的宽度 文字域的默认值
第三章 网页元素编辑
结果 代码 <form> 姓名： type=“text” 姓名：<input type=“text” name=“name” size=“20” name=“name” size=“20” /> </form>
(1)单选框 当type=“radio”时,表示该输入项是一个 单选项,具有相同name属性的单选按钮形成一个组,用户 只能选择单选项中的一项作为输入信息。 checked属性，用来表示此项被默认选中。 value属性，用来设定选中项目后传送到服务器 端的值。
《网页制作与设计》题库及答案
一、选择题1.构成网页的基本元素主要有文本、图片、水平线、( A )、表单、超链接及各种动态元素。
A.表格B.文件C.实物D.纸张2.静态网页主要是用HTML编写而成的，这种网页文档的扩展名为( C )。
A..txtB..exeC..htmlD..bmp3.在浏览网页时网页标题会出现在IE浏览器窗口的标题栏中，网页标题是由( D )标签定义的。
A.<html></html>B.<head></head>C.<body></body>D.<title></title>4.在Dreamweaver中如果打开“文件”面板，应该选择( C )中的“文件”命令。
A.“命令”菜单B.“编辑”菜单C.“窗口”菜单D.“修改”菜单5.在建立站点目录时以下说法正确的是( B )。
A.目录的层次不能太浅B.按文件的类型建立不同的子目录C.目录名尽量用中文D.可以将所有文件都放在站点根目录下6.在Dreamweaver中编辑好网页后如果想在浏览器中预览网页效果，可以按( D )键。
A.F5B.F6C.F10D.F127.在设计视图中制作网页时，如果要新建一个段落，应按( A )键。
A.EnterB.Alt+EnterC.Shift+EnterD.Ctrl+Enter8.在Dreamweaver CS6中可以直接制作( D )。
A.视频B.音频C.Flash动画D.以上都不对9.用户可以在Dreamweaver中创建电子邮件链接，具体方法是选中需要添加E-mail链接的对象，在“属性”面板的“链接”文本框中输入( A )。
A.mailto:abc@B.mail:***********C.mailto+abc@D.mail+abc@10.如果定义了一个名称为.text的样式表，那么这个样式表的“选择器类型”为( A )。
A.类B.标签C.复合内容D.以上3种任一类型11.外部CSS样式表文件的扩展名是( C )。
网页的基本构成元素有哪些？
网页的基本构成元素有哪些？在设计网页时，我们应该组织页面的基本元素，同时配合一些特效，形成一个色彩丰富的网页。
网页由文本，图像和超链接组成。
内容是网站的灵魂，文本是网站灵魂的物质基础。
文本和图像是网站上使用最广泛的。
具有丰富内容的网站将不可避免地使用大量文本和图像，然后将超链接应用于文本和图像，以使这些文本和图像“生动”。
1.文本元素文本是网页的主体。
虽然flash和图形文本可以达到同样的效果，即使超出了纯文本的效果，Web文本的优点也无法替代。
因为纯文本的存储空间非常小。
但是，在页面上使用相同的字体会使页面过于僵化。
正确调整页面中文本的大小和颜色也可以提高页面的效果。
1）标题在网页或网站上的单独文章中，通常会有一个引人注目的标题。
告诉访问者网站的名称或文章的主题。
现在，许多网页设计师使用图像或Flash动画而不是文本标题。
2）文字大小正确调整文本大小可以使文本排列更加生动，并取得更好的效果。
3）段落具有不同段落和层次感的文章不仅可以使观众更好地阅读，还可以使页面看起来整洁优雅。
4）样式粗体，斜体和下划线是最基本的文本样式。
但是，在网页中不应使用下划线，这会使查看者将其误认为是超链接。
将一些字体样式添加到页面的适当位置将使页面更具装饰X。
5）字体颜色您还可以在页面上为字体添加颜色，以强调页面的焦点并使页面更加华丽。
但我们必须注意色彩搭配。
你不能在页面上使用太多的颜色，太华丽会引起观众的厌恶。
2，图像图像的视觉效果比单词的视觉效果强得多。
灵活应用图像可以在网页中起到修饰作用。
但不当使用会使网页变得混乱。
网页上的图像文本主要是JPG和GIF格式。
因为它们不仅具有柱高压缩比，而且还具有跨平台特X。
无论浏览器使用何种操作系统，它们都可以显示两张图片。
网页中有几种主要的图像应用形式。
1）图像标题通常，网页中应该有一个标题来提醒观众网站正在做什么，这在导航中起作用。
图像标题的应用可以使网页更加美观。
2）背景图像的另一个重要应用是作为网页的背景。
网页习题答案
第一章1．构成网页的基本元素有哪些？在一个网页中，通常由文本、图像、超链接、表单等元素组成。
2．超级链接有哪几种形式？指向另一个网页或相同网页上的不同位置。
这个目的端通常是另一个网页，但也可以是一幅图片、一个电子邮件地址、一个文件、一个程序或者也可以是本页中的其他位置。
3．网页常见的布局方式有哪几种？“同”字型，弯角型，上中下型，框架型，整幅效果型。
第二章一、填空题1.F82.无标题文档3.属性面板4.管理站点二、选择题1. B2. D3. C4. D三、简答题1．如何建立一个本地站点？创建站点有两种方式：使用向导一步一步地进行设置，或者通过在“管理站点”中设置“高级”选项卡信息来创建。
无论哪种方式，都要事先在本地磁盘上建立一个用来存放站点的文件夹，这个文件夹就是本地站点的根目录。
2．已经发布的主页经过了修改，如何在远程服务器上更新你的主页？第三章一、填空题1．表格、层和框架2．单元格边框和单元格内容之间相距的距离3．<table>4．【Shift】，【Shift】5．在新的窗口中打开链接文档，并保留当前窗口6．【Alt】，框架内部二、选择题1．D 2．C 3．C 4．B 5．B三、简答题1．在Dreamweaver CS3中网页布局的方法有哪些？各有哪些优点？答：Dreamweaver CS3提供了三种基本的网页布局方法，即表格、层和框架。
表格是网页中非常重要的元素之一，使用表格不仅可以制作一般意义上的表格，还可以用于布局网页、设计页面分栏以及对文本或图像等元素进行定位等。
对于文本、图片等网页元素的位置为了可以以像素的方式控制，只有通过表格和层来实现，其中表格是最普遍和最好的一种以像素方式控制的方法。
表格之所以应用较多是因为表格可以实现网页元素的精确排版和定位。
层是一种网页元素定位技术，也是网页布局工具之一，使用层可以精确定位页面元素，层能够实现较多的功能，如层的重叠可将多个网页元素重叠在一起，实现一些特殊的效果；层可以放置在页面的任意位置，层中可以放置文本和图像等元素，层可以嵌套，层和表格可以相互转换，将层转换为表格后可以在不支持层的浏览器中进行正常浏览。
网页(百度百科)
网页编辑词条网页网页概述网页(web page)，是网站中的一「页」，通常是HTML格式（文件扩展名为.html或.htm 或.asp或.aspx或.php或.jsp等）。
网页通常用图像档来提供图画。
网页要使用网页浏览器来阅读。
网页是构成网站的基本元素，是承载各种网站应用的平台。
通俗的说，您的网站就是由网页组成的。
如果您只有域名和虚拟主机而没有制作任何网页的话，您的客户仍旧无法访问您的网站。
所谓网站(Website)，就是指在网际网路（因特网）上，根据一定的规则，使用HTML 等工具制作的用於展示特定内容的相关网页的集合。
简单地说，网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯（信息），或者利用网站来提供相关的网路服务（网络服务）。
人们可以通过网页浏览器来访问网站，获取自己需要的资讯（信息）或者享受网路服务什么是网页?现在在你眼前，出现在显示器上的这个“东西”，就是一个网页。
网页实际是一个文件，它存放在世界某个角落的的某一台计算机中，而这台计算机必须是与互联网相连的。
网页经由网址（ URL ）来识别与存取，当我们在浏览器输入网址后，经过一段复杂而又快速的程序，网页文件会被传送到你的计算机，然后再通过浏览器解释网页的内容，再展示到你的眼前。
构成网页的元素:文字与图片是构成一个网页的两个最基本的元素。
你可以简单的理解为：文字，就是网页的内容，图片，就是网页的美观。
除此之外，网页的元素还包括动画、音乐、程序等等。
在网页上点击鼠标右键，选择菜单中的“查看源文件”，就可以通过记事本看到网页的实际内容。
可以看到，网页实际上只是一个纯文本文件，它通过各式各样的标记对页面上的文字、图片、表格、声音等元素进行描述（例如字体、颜色、大小），而浏览器则对这些标记进行解释并生成页面，于是就得到你现在所看到的画面。
为什么在源文件看不到任何图片？网页文件中存放的只是图片的链接位置，而图片文件与网页文件是互相独立存放的，甚至可以不在同一台计算机上。
html文档的基本结构元素的功能。
html文档的基本结构元素的功能。
HTML是一种用于创建网页的标记语言，它的基本结构包括<html>、<head>和<body>三个元素。
每个元素都有自己的功能，下面逐一介绍。
<html>元素是HTML文档的根元素，它包含了整个网页的内容。
它告诉浏览器这是一个HTML文档，其余的内容都是在它的库之下。
html元素通常呈现为一个文件的开始和结束标志。
<html>标记中的内容包括<head>和<body>。
<head>元素用于定义HTML文档的头部信息。
它通常包含一些在浏览器中不直接显示，但对于网页的信息很重要的元素。
例如<title>元素用于指定网页的标题，这个标题将显示在浏览器的标题栏中。
另外，<link>元素可以引入外部样式表，<script>元素可以插入JavaScript代码等。
头部元素的内容不会在浏览器中显示，但它们对网页的优化和功能扩展具有重要的作用。
<body>元素用于定义整个HTML文档的主体内容。
它包含了页面的可见内容，可以包括文本、图像、视频、链接等。
<body>元素中的内容将在浏览器中显示出来，是网页的主要呈现部分。
通过添加各种标签元素，可以组织信息、设置布局和样式，实现各种交互效果等。
例如，<h1>到<h6>元素用于定义标题，<p>元素用于定义段落，<img>元素用于插入图片，<a>元素用于创建链接等。
HTML的基本结构元素相互配合，共同构建了一个完整的网页。
<html>元素作为根元素提供了整个文档的框架；<head>元素定义了文档的头部信息；<body>元素则包含了文档的主要内容。
合理使用这些元素，我们可以创建出生动、全面、有指导意义的网页。
网页的基本结构
网页的基本结构
网页是互联网应用的一种形态，它是将一组超文本标记语言（Hypertext Markup Language，简称HTML）写成的文档，在Web浏览器上呈现友好的用户界面。
它是以标准（XHTML或HTML 5）语言制作而成，使用HTML标记来表示界面上出现的元素，用Cascading Style Sheet（CSS）来描述网页外观和布局，还融合脚本语言形成的客户端和服务器端脚本来实现网页的动态功能等。
网页的结构大致可以分为四部分：Doctype声明、html元素、head元素和body 元素。
Doctype声明告诉浏览器HTML这种文档的版本信息；Html元素是网页的
根元素，将网页的内容包含在它的起止标签中，界定了HTML文档的拓展范围；Head元素包含网页中的一些重要信息，如文档title、meta信息、脚本等，它们约
定了网页的语言，定义了网页外观与布局；Body元素则是网页真正的内容展现部分，就是我们看到的网页正文部分，它放置着网页页面中展示的内容信息，如文本、图片、表单、链接等。
要想创建一个网页，首先要了解网页的基本结构，其次要了解HTML标记语
言和CSS样式语言的相关知识，同时还要掌握脚本语言才能真正将网页充分利用
起来。
每一部分内容都是紧密相连的，遵循标准实现内容到形式的简洁转换，这样才能使网页具有良好的可读性和可访问性。
网页的基本构成元素介绍
网页的基本构成元素介绍
不同性质的网站，构成网页的基本元素是不同的。
网页中除了用法文本和图像外，还可以用法丰盛多彩的多媒体素材等。
1.2.1 网站Logo
网站Logo也称为网站标记，它是一个站点的象征，也是一个站点是否正规的标记之一。
网站的标记应体现该网站的特色、内容以及其内在的文化内涵和理念。
胜利的网站标记有着独特的形象标识，在网站的推广和宣扬中将起到事半功倍的效果。
网站标记普通放在网站的左上角，拜访者一眼就能看到它。
网站标记通常有三种尺寸：88×31、
120×60和120×90像素。
图1-11所示为网站Logo。
标记的设计创意来自网站的名称和内容，大致分以下三个方面。
网站有代表性的人物、动物、花草，可以用它们作为设计的蓝本，加以卡通化和艺术化。
假如是专业性网站，可以用本专业的代表物品作为标记，如中国银行的铜板标记、疾驰汽车的方向盘标记。
最常用和最容易的方式是用自己网站的英文名称作为标记。
采纳不同的字体、字符的变形、字符的组合可以很简单地制作出自己的标记。
1.2.2 网站Banner
网站Banner是横幅广告，是互联网广告中最基本的广告形式。
Banner 可以位于网页顶部、中部或底部随意位置，普通为横向贯通囫囵或者
第1页共4页。
网页的基本构成元素-网页包含什么-分类及介绍
网页的基本构成元素-网页包含什么-分类及介绍构成网页的基本元素主要有这些：文本和图像、超链接、动画、表单、音频、视频。
其中文本和图像是网页中两个基本构成元素，目前所有的网页中都有它们的身影。
一、网页的基本构成元素1、文本和图像。
是网页中两个基本构成元素，目前所有的网页中都有它们的身影。
2、超链接。
网页中的链接又可分为文字链接和图像链接两种，只要访问者用鼠标单击带有链接的文字或者图像，就可自动链接到对应的其他文件，这样才干让网页链接成为一个整体。
超链接也是整个网络的基础。
3、动画。
网页中的动画也可以分为GIF动画和Flash动画两种。
动态的内容总是要比静止的内容能够吸引人们的注意力，因此出色的动画能够让网页更加丰富。
4、表单。
是一种可在访问者和服务器之间进行信息交互的技术，使用表单可以完成搜索、登录、发送邮件等交互功能。
5、音频、视频。
〔制定〕人员会在网页中加入视频、背景音乐等，让网站更加富有个性和魅力，更具时尚感。
二、简单的网页里面都包涵什么一个完整的HTML文档必须包涵三个部分：一个用“html〞元素定义的文档版本信息，一个用“head〞定义各项声明的文档头部和一个由“body〞定义的文档主体部分。
“head〞作为各种声明信息的包涵元素，出现在文档的顶端，并且要先于“body〞出现。
而“body〞用来显示文档主体内容。
三、网站分类及介绍1)门户网站。
门户网站内容丰富，并提供多种服务，如主页服务、股票行情、电子信箱、天气预报、即时新闻、网上论坛、网上商城、网络游戏等。
另外，门户网站一般还提供搜索引擎。
2)信息咨询服务网站。
信息咨询服务网站的功能主要有信息发布、信息检索、在线咨询、资源服务等。
提供的资源一般有软件、图书、图片、技术资料、音乐和影视等。
这类网站上一般建立有BBS、虚拟社区等。
3)远程互动网站。
远程互动网站提供远程教育、医疗诊断等交互性应用服务。
4)娱乐游戏网站。
娱乐游戏网站专门提供各种娱乐、游戏服务。
网页制作复习Frontpage
3、有一个用FrontPage制作的关于“文学世界”网 站，下图为该网站结构。在主页中，为文字“寓言”设 置超链接，链接到标题为“寓言”的网页，则超链接所 yuyan.htm 指向的文件名应为____________________ 。若将主页文件改名 为default.htm ，则该网页中的超链接还能否成功链接？ 能。 ______
练习
网页制作及调试
⑤网页基本属性设置
网页标题、背景音乐、背景图片(必须为相对路径)、 背景颜色和超链接对象字体和颜色的设置。
网页标题 不能显示 FrontPage 中，只能 显示在浏 览器标题 栏里。
网页制作及调试
⑥网页的预览、调试与发布
在FrontPage窗 口左下侧有几个 标签？它们的作 用是什么？ 网站发布时要把 网页文件及用到的 文件(如图片、音 乐文件，超链接目 标文件等)都放在 同一文件夹中，发布时一并上传。
网页的含义及组成
1、网页
网页是按照超文本标记语言(HTML)规范要求表达 文本、图像、动画等多媒体信息的，网页之间遵循超文 本传输协议( HTTP )进行相互链接访问。围绕相关主题 的若干个网页组成一个网站，网页和网站的地址用统一 资源定位器( URL )标识。
2、网页的基本元素？
网页的基本元素是：文字、图形图像和超链接 。 网页中除基本元素外还有 表格、音乐 、表单、动画、 内嵌程序等内容，起着美化网页、双向交流的作用。 网页文件的扩展名为 .htm或.html 网站的主页一般命名为 Index.htm或Default.html
网站中的文件夹
在FrontPage文件夹列表区中，站点中有两个缺省 文件夹 _Private 和 images ，前者用于存放不愿公开的 文件，后者用于存放网页中用到的图像文件。
网页设计基础
实验一网页设计基础（4课时）实验目的：了解网页中基本元素了解网页设计常用工具了解网页常见的布局类型了解网页配色方案了解网页图像和文字的设计原则实验内容：1、搜索下面一些关键词：网页元素、网页工具、网页布局、网页配色、网页（或网站）设计原则、网页（或网站）设计流程）、主页（或首页）设计，从搜索结果中学习掌握相关知识，并回答问题：①网页由哪些基本元素构成？网页元素包括，文字、图片、音频、动画、视频。
文字，符合排版要求。
图片、音频、动画、视频，符合网络传输及专题需要，需要精选。
②有哪些常见的网页布局类型？网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型①1、“国”字型：也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。
这种结构是我们在网上见到的差不多最多的一种结构类型。
②2、拐角型：这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。
在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。
③3、标题正文型：这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。
④4、左右框架型：这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。
我们见到的大部分的大型论坛都是这种结构的，有一些门户网站也喜欢采用。
这种类型结构非常清晰，一目了然。
⑤5、上下框架型：与上面类似，区别仅仅在于是一种上下分为两页的框架。
⑥6、综合框架型：上页两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。
网页的基本功能_主页index_主页是一个网站的核心
网页基本属性，要素，步骤，工具，属性面板，视图，结构，标记符，标题，水平线网页的基本功能主页index 主页是一个网站的核心，进入一个网站后，首先引入眼帘的是该网站主页。
主页的上部是含有该校中，英文名称的LOGO图片，网页的底部是版权区，在LOGO图片的下面，版权区的上面有两行横向导航菜单，包括概括设置资料等，每个子菜单都进行了超链接，浏览者可以根据需要浏览相应的内容，主页的中间部分是校内新闻，提供给浏览者一些最新新闻浏览者可以随意浏览任一条网页的基本要素1文字（标题，字号，字型）2表格：具有容量大，结构严谨或效果直观等优点，表格还可以控制信息的布局方式。
3图形：一般使用JPEG,GIF 4链接标志：有文字图像2种5交互功能6声音和视频网页制作工具：一种是利用网页制作工具进行制作，例：frontpage,dreamweaver另一种采用HTML超文本标识语言的专用格式来进行编制。
网页制作的基本步骤：1网站定位，定位要小内容要精，网站题材，名称要正，易记，有特色。
2整体规划：也就是组织网站的内容和设计其结构。
收集整理资料，准备素材，内容规划整体规划中3重常用结构类型：（1）层状结构，类似与目录系统的树型结构，很强层次性（2）线性结构，类似数据结构中的线性表，用在意义是平行的页面上（3）WEB结构，类似Internet的组成结构，各网页之间形成网状链接，允许用户随意浏览。
3网页的设计与制作，先静态后添加动态效果4测试网页：功能性测试和完整性测试5网页上传发布，服务器可以是远程或本地但必须支持ASP 6网站宣传推广7网站的反馈与评价8更新与维护建立目录结构建议：1不要将所有文件都存放在根目录下，会造成文件管理混乱，很难搞清哪些文件需要编辑和更新，哪些无用，哪些想关联，影响工作效率。
上传速度慢，文件量越大等待时间也越长。
所以尽可能减少根目录文件存放数。
2 在每个主栏目目录下都建立独立的images目录，最方便于管理，而根目录下的images 目录只用来存放首页和一些次要栏目的图片。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
• 使用属性面板中的“格式”下拉列表框，或选择“文本”→“段落格式”菜单命令，可以设 置标准的段落和标题，不过在设置前，首先要选中相应的文本。如果要删除段落格式，可从 菜单或列表中选择“无”选项。
• 要改变网页段落和标题的默认设置，可以选择“修改”→“页面属性”命令，打开“页面属 性”对话框进行设置，如图4-9所示。
• 还可以给字体添加粗体、斜体、下划线、删除线等样式以改变字体的风格和修饰效果。
•
提示：Dreamweaver 8中的某些字体选项中含有多种字体组合，浏览器在显示
时是从前到后的顺序来选择字体的。如果前面的字体在浏览者的计算机上已安装，
则以这种字体来显示，否则，显示它后面的字体。
• （2）编辑字号
• 如果要改变字号，选择改变字号的文本，单击文本属性面板上“大小”下拉列表右侧的下三 角按钮，弹出字号列表，如图4-5所示。
其次要有丰富的内容，才能不断地吸引浏览者进行访问。文字是页面上不可缺少的元素，网 站的诉求思想、内容的表达都需要文字加以传递。同时，适当地配合一些图像，能够提高网 页的欣赏性。页面上的文本和图像应用超级链接就构成了一个有机整体，实现了网络互联， 这样才能够让浏览者在不同的页面间进行跳转，找到所需要的内容。 • 4.1编辑网页文本 编辑文本是最基本的网页制作技能，文字是文类文明的结晶，是网页传递信息最基本的方式。 编辑和设置内容丰富、格式美观的网页文本，既可以传达网站大量的信息，又可以激发浏览 者的阅读兴趣。在Deramweaver 8中可以输入普通文字，也可以插入特殊字符，设置字体大 小，改变文本颜色等。 4.1.1设置文本属性 1.输入文本 • 在Dreamweaver 8中输入文本有三种方法。
• （1）编辑字体样式
• 在设置字体之前，首先在网页中确定要改变格式的范围，将鼠标指针置于要选择的文字之前， 然后拖动鼠标经过所有备选区域，即可完成对文字的选择。如果没有选择范围，新设置的字 体样式只对以后输入的文字有效。
• 要改变字体，首先要选择页面中的文字，然后打开文本属性面板，在鼠标面板中单击“字体” 下拉列表右侧的下三角按钮，如图4-3所示。在下拉列表中提供了可供选择的字体列表。
• 如果在该下拉列表中找不到所需要的字体，则选择最后一项“编辑字体列表”，弹出如图4-4 所示的对话框。在编辑字体列表对话框中，从“可用字体”列表中选择字体，然后单击左边 的添加按钮，将其添加到“选择的字体”窗格内，单击【确定】按钮，所选字体就会出现在 “字体列表”中。
图4-2 首选参数对话框
• 图4-3 字体样式列表 • 图4-4 “编辑字体列表”对话框
•
图4-9 改变网页段落和标题的默认设置
•
4.1.2创建列表
•
列表是Dreamweaver 8中的一个很重要的格式设置功能。列表是将具有相似特征或者是具
有先后顺序的几行文字进行对齐排列。Dreamweaver 8有项目列表、编号列表和定义列表。
列表也可以被嵌入。
•
1. 创建列表
•
1)请按以下步骤操作：
• 图4-5 字号列表 • 在“大小”下拉列表中可以设置字号大小，还可以执行“文本”→“大小”命令，来设置字
体的大小。改变字体大小时可在下拉列表中选择，也可以直接输入字号，还可以执行“文 本”→“改变大小”命令来改变字体的大小。
•
（3）文本颜色
•
默认情况下，网页中文本的字体颜色为黑色。在页面中选中要改变颜色的文字，然后在属
第4章 编辑网页基本元素
• 本章要点 • ·编辑文本 • ·编辑图像 • ·编辑超级链接 • ·插入多媒体 • 为了使读者更好地了解和学习网页设计，本章重点介绍网页基本元素的编辑。读者需要掌握
的是网页中文本和图像的编辑，超级链接的设置和创建多媒体页面。 • 网页的基本组成部分包括文本、图像、多媒体和超级链接。制作网页时，首先要主题鲜明，
• （1）直接输入法 • 执行“文件”→“新建”命令，新建一个HTML文档，将光标定位于页面中，选择输入法，输
入文字，在Dreamweaver中输入的文字可以自动换行。需要重新开始一段时，按〈Enter〉键 即可。如果要缩小段落间距，则可以按〈Shift+Enter〉键。 • （2）剪贴板法 • 可以从其他的程序窗口中复制或者剪贴一些文本，然后粘贴在Dreamweaver 8的文档窗口中。 如果想使用剪贴板，首先在word或其他窗口中选中需要粘贴的文本，然后按〈Ctrl+C〉组合 键在剪贴板上复制文字，或者通过执行“编辑”→“复制”命令，最后再切换到 Dreamweaver 8窗口，按〈Ctrl+V〉组合键，将其粘贴在指定位置。 • （3）导入文档法 • 用Word文档，输入文字并将其做成网页的形式。然后在Dreamweaver 8窗口中，执行“文 件”→“导入”→“Word文档”命令，即可将Word文档插入页面中。 • 2.设置文本字体 • 在Dreamweaver 8中可以很方便地设置文本的大小、颜色和样式等格式。使用文本的属性面 板可以改变大部分格式，而且全部选项都包含与“文本”菜单命令中。
性面板中单击颜色框按钮弹出调色板，如图4-6所示。此时鼠标变成吸管形状，可以在文
档界面中吸取任何看到的颜色。还可以直接在颜色框后的文本框中输入颜色值。也可以执
行“文本”→“颜色”命令，会弹出“颜色”对话框，如图4-7所示。从中选择合适的颜 色，然后单击【确定】按钮。
•
图4-6 属性面板改变颜色
图4-7 “颜色”对话框对齐段落文本，可以使用属性面板中按钮，或选择“文本”→“对齐”命令。在
Dreamweaver 8中，文本的对齐方式共有4中：左对齐、居中对齐、右对齐和两端对齐， 效果如图4-8所示。
• 图4-8 对齐文本
• 在设置文本对齐方式时，只能对整个文本块设置对齐属性，而不能对段落中的部分文本设置 对齐属性。所谓的段落时指用〈Enter〉键分开的文字（网页的HTML代码标记为〈p〉），用 〈Shift+Enter〉键分开的文字（网页的HTML代码标记为〈br〉）是换行而不是分段。