第7章 网页制作_第1页
第7章 网页制作_第2页
第7章 网页制作_第3页
第7章 网页制作_第4页
第7章 网页制作_第5页
已阅读5页，还剩56页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第7章

简单网页的制作

7.1了解HTML语言

7.2认识FrontPage2000

7.3站点和网页的基本操作

7.4WEB网页的设计示例

7.5综合实例

7.6实训7.1了解HTML语言

HTML是英文HyperTextMarkupLanguage的缩写，即超文本标记语言。它基于两个基本概念，即超链接文本和标记语言。超链接文本：提供了一种将同一文档的不同部分或不同文档之间信息联系起来的一种方法。在HTML文档中设置链接后，访问者单击该超级链接时，就可以访问到链接所指向的内容。标记语言：HTML语言是一种标记语言，它使用特殊标记来描述文档结构和表现形式的一种语言。可以用任何一种文本编译起来编辑HTML文件，因为它就是纯文本文件。1．HTML中标记符号的组成标记符号：在HTML中，标记符号用一对“<>”及带斜杠的一对尖括号“</>”表示，前者称为开始符号，后者称为结束符号。如：<title>FrontPage2000网页制作简介</title>

在<title>及</title>中间内容“FrontPage2000网页制作简介”为网页的标题，<title>及</title>分别表示标题的开始和结束处。元素：元素是HTML文件中的一种基本结构单位。处在标记符号之内的所有内容都可以称为一个元素。

如标记<palign="center">

其中

palign="center"即为一个元素，也可以称

p为一个元素，

将align称为p的属性。2．编辑、保存和访问HTML文件HTML文档的文件格式是纯文本文件格式，所以在任何一个可以编辑纯文本文件的编辑器里都可以编写HTML文档，最后以扩展名“.htm”或“.html”将其保存为页面文件。

要想浏览刚保存的页面文件，在Windows资源管理器中双击该页面文件即可。HTML文档是不分区分大小写，但在不同层次之间要有一定的缩进，这样在编辑和修改时，层次更清晰，更方便于阅读。一个简单的例子：<html><head><title>FrontPage2000网页制作简介</title></head><body><palign=“center”><fontsize=“5”><b>FrontPage2000网页制作简 介</b></font></p><palign="left"><fontsize="4">内容介绍</font></p><ul><li><palign=“left”style=“line-height:200%”>FrontPage2000窗 口介绍</p></li><li><palign="left"style="line-height:200%">FrontPage 2000视图模式</p></li>

<li><palign="left"style="line-height:200%">FrontPage网页制作基本操作</p></li><li><palign="left"style="line-height:200%">FrontPage网页制作技巧</li></ul><palign="left"><fontsize="4"><ahref="new_page_2.htm">欢迎大家一起进入学习讨论</a><imgborder="0"src="../help.gif"width="24"height="24"></p></body></html>

HTML文档的基本语法比较简单，它只有一种语法结构：<元素

属性=属性值>在元素和属性之间输入一个空格。一个元素可以不设置任何属性，也可以设置多个属性。Web常用基本元素主要有：<html>标记HTML文件的开始，与此相对应的，在文件结尾处有</html>。<head>……</head>，

用来标记HTML文件的一些属性，如页面的标题、作者等。<title>……</title>，

用来标记页面标题的开始与结束。本例中标题“FrontPage2000网页制作简介”，在浏览时显示在窗口的标题栏中。

<font>用来设置字符格式：color定义字体颜色；size定义字体大小；

face定义字体。字体样式元素<B>、<I>、<U>分别表示将显示字体加粗、字体倾斜、文字加下划线。〈p〉用来定义段落格式，在HTML中，段落与段落之间相当于插入了一个硬回车。〈BR〉表示在出现〈BR〉标记处进行换行，其作用相当于插入一个软回车（shift+enter）。<align>标记文本的对齐方式。<a>用来标记文本超链接，href后面用双引号括起来的内容是链接指向的目标地址，可以是一个URL或电子邮件地址。如<ahref="new_page_2.htm">欢迎大家一起进入学习讨论</a>。<li>定义列表项；<ul>定义无序列表。</body>标记页面正文的结束。<body>标记页面的正文的开始，并确定整个页面的背景色、前景色、字体颜色等属性以及说明链接对象及其颜色。7.2认识FrontPage2000虽然HTML语言简单易学，但毕竟要花费许多时间去学才行。要直接用文本编辑器编写出漂亮的网页来并不是一件容易的事。不过初学者只要能掌握了一种好的网页制作工具，同样也能制作出比较优美的网页来。

FrontPage2000就是这样一个较理想的可视化网页编辑工具。界面保持了Word等软件的一贯风格，许多操作和Word中的操作几乎一样，我们几乎可以想象使用Word一样来制作出一个网页。而且，FrontPage2000在站点管理等方面也比较简单。7.2.1启动FrontPage2000单击任务栏上“开始”→“程序”→“MicrosoftFrontPage”菜单命令，FrontPage将自动按缺省模板新建一个空白网页“new_page_1.htm”，MicrosoftFrontPage主窗口如图7.2所示。与Word窗口最大区别是FrontPage窗口内左边有一个视图栏，包括网页、文件夹、报表、导航、超链接和任务栏按钮，分别对应六种视图方式。

7.2.2认识FrontPage2000窗口界面

图7.2FrontPage启动界面1．“网页”视图在“网页”视图中，在窗口的左下角有“普通”、“HTML”和“预览”3种浏览方式，用户在“普通”窗口中创建和编辑网页；在“HTML”窗口中查看网页的HTML代码或编辑HTML代码，在“预览”窗口中预览网页的制作效果。2．“文件夹”视图“文件夹”视图用于管理网站中文件夹及网页文档。方便用户对网站中文件及文件夹进行新建、复制、删除、重命名等操作。

3．“报表”视图：显示站点总览报表，对当前网站包含的所有文件及工作进行统计，包括所有文件数目，图片数目、各种链链接、组件错误、未完成任务等信息等。4．“导航”视图单击视图栏中“导航”按钮，就可切换到“导航”视图模式。在该模式下，可以更清楚地显示整个站点结构及网页间层次的关系。图7.4所示就是个人站点的简易导航结构。5．“超链接”视图“超链接”视图，用于显示站点中各个网页之间的链接关系，如图7.5所示

。在链接视图中，当前网页放在中间，由超链接指向该网页的其它网页放左边，该网页链接的其它网页或站点放在右边。6．“任务”视图

任务视图用于显示一组与FrontPage网页相关任务。一个优秀的站点的创建和维护并不是一朝一夕就完成的，为了对这些工作进行有效的管理，可以通过任务视图添加若干任务，并对任务的状态及优先级别进行设置和跟踪，以防止网站建设中工作遗漏和疏忽。在任务模式下，单击“编辑”→“任务”

→“添加任务”菜单命令，在弹出的“新建任务”的对话框中，

输入“任务名称”、“说明”，并选择任务的“优先级”，这样一个任务就添加进来了。

课堂练习课堂练习1.

启动FrontPage2000程序，打开光盘第7章下的“简单实例.htm

”，在网页模式下，分别用“普通”、“HTML”及“预览”三种来查看页面。课堂练习2.打开站点Myweb，并打开index.htm网页，在超级链接模式下，观察各网页的超级链接情况。7.3站点和网页的基本操作

7.3.1站点的基本操作

1．什么是站点？站点实际是就是一个文件夹，这个文件夹和一般的文件夹相比，具有一些特殊的属性，它是由一些网页和图片等文件组成，能够通过浏览器浏览其中的网页。2．新建站点在如图7.2所示的窗口中，单击“开始”→“新建”→“站点”菜单命令，弹出“新建”对话框，如图7.6所示。在该对话框中，选择站点的类型及站点存放的位置，单击“确定”按钮即可。图7.6新建站点

3．打开站点要对一个已存在的网站点进行编辑，就必须先打开该站点。单击“文件”→“打开站点”菜单命令，在弹出的打开站点的对话框中，选择要打开的站点的名称，再单击“打开”按钮即可。

4．关闭站点单击

“文件”→“关闭站点”菜单命令就可以关闭整个站点，包括站点中的所有网页。7.3.2网页的基本操作1．新建网页操作步骤如下：单击菜单栏上“文件”→“新建”

→“网页”菜单命令，弹出“新建”对话框如图7.7所示。在“新建”对话框中，包含了“常规”、“框架网页”、“样式表”三张选项卡，用户根据自己不同需要，选择合适的模板、框架网页或样式表来创建自己的网页。２．打开网页单击菜单栏上“文件”→“打开”菜单命令，在弹出的“打开”对话框中，选择要打开的页面，单击“确定”按钮即可。３．保存网页单击“文件”→“另存为”菜单命令，在弹出的“另存为”对话框中，选择“保存类型”，并输入文件名，按“保存”按钮即可。7.4WEB网页的设计示例ＭＷ电子公司以是一个以生产MP3、MP4等电子产品为主电子公司，为了宣传自己的产品，MW公司做了一个简易网站，如图7.8所示。在该网站中，先创建一个空的站点，再创建一个嵌套式层次结构的主页。7.4.1．新建站点及新建网页

1．新建空站点2.新建框架网页单击“文件”→“新建”→“网页”菜单命令，在“新建”对话框中，选择“框架网页”选项卡中的“嵌套式层次结构”模板，单击“确定”按钮，创建的框架网页如图7.9所示所示。

单击“设置初始网页”按钮在这里设置框架初始显示网页的地址或“新建网页”按钮新建一个网页。

图7.9框架网页7.4.2网页的编辑与修饰

1．图片列表（折叠项目符号为例）在网页设计中，经常使用项目列表。图片列表就是将普通的项目列表中的项目符号用图片代替，以达到某种特殊的效果。如图7.11所示。操作步骤如下：单击菜单栏上“格式”→“项目符号与编号”菜单命令，弹出“项目编号与编号方式”对话框，在该对话框中，选择相应的图片文件，单击“确定”按钮即可。如果有不同层次的项目列表，并且实现像Windows资源管理器显示方式一样可折叠，以达更美观大方的效果，如图7.11所示。操作步骤如下： ①

在网页中输入项目符号及内容，通过工具栏“减少缩进”和“增加缩进”按钮来实现项目升级或降级。为不同层次的项目选择不同的图片。 ②

光标定位在项目符号处，单击菜单栏上“格式”→“项目符号与编号”菜单命令，这时弹出“列表属性”对话框，在该对话框中，勾选“可折叠大纲”及“开始时折叠”选项如图7.12所示。 ③预览视图下，就可看到不同层次项目可折叠效果了。图7.11可折叠列表

图7.12列表属性

2．创建和编辑超级链接链接是实现页面之间跳转的向导般路径。超链接一般分为文本链接和图片链接。创建链接方法比较简单。①创建文本超链接：选定文本，单击工具栏上“超链接”按钮，在弹出如图7.13所示的对话框，在URL后的文本框中，可以输入链接的目标地址，也可以单击文本框右边的浏览器按钮，选择一个要链接的目标文件；或单击邮件图标按钮，在弹出在“创建电子邮件超链接”的对话框中，输入电子邮件地址。图7.13创建超链接

②创建图片超链接：选择图片，其余操作同创建文本超链接的操作相同。③编辑的超链接：选定要编辑的超链接，单击工具栏上“超链接”，在弹出“编辑超链接”的对话框中，修改URL地址即可，其余操作方法同创建文本超链接的操作相同。3．插入水平线：（以折叠项目符号为例）步骤：单击菜单栏上“插入”→“水平线”菜单命令，可在网页中光标处插入水平线。右键单击要修改的水平线，在快捷菜单中，单击“水平线属性”命令，弹出“水平线属性”对话框，如图7.15所示。在该对话框中，可以设置水平线的各种属性。其中宽度有两个选项“窗口宽度百分比”和“像素”，如选择前者，直线长度会随着窗口的大小改变而变化。如选择后者，因为度量制是绝对的，直线的长度不会随着窗口的大小改变而变化。注意：如果为网页设置了主题，则“水平线属性”将显示为灰色，不能编辑。图7.15水平线属性

4．表格 ①

设置表格属性 右键单击表格区域，在弹出的快捷菜单中，单击“表格属性”命令，在弹出的“表格属性”对话框中，可设置宽度、单元格边距（指单元格内内容与单元格边框的距离，单位为像素）、单元格间距（相邻单元格之间的距离）、边框线的粗细、颜色、背景等进行设置。 ②

表格与文本间的转换 有时从网上下载文件，含有许多表格，如果只需文本，而不需要边框，这时可利用菜单栏上“表格”→“转换”→“表格到文本”命令可实现表格到文本的转换。同样，也可实现文本到表格的转换。图7.16表格

5．插入日期和时间执行“插入→日期和时间”命令即可插入日期时间。6．目标框架在图7.13所示的“创建超链接”对话框中，单击图标按钮，在弹出的“目标框架”的对话框中，选择相应的目标框架，如图7.17所示。rbottom表示相关链接的网页将在右下框架中显示。7.图片的定位(new_page3为例）读者可能已发现，当插入一幅图片后，用鼠标用力拖还是拖不动的。其实，可以对图片进行定位来达到拖动的效果。操作步骤如下：选择要移动的图片，单击“格式→定位”命令，弹出“定位”对话框，如图7.18所示，在

“定位样式”中选择“绝对”，单击“确定”后，就可随按定位方式随意移动了。快试一下吧！图7.18图片定位对话框

【提示】如果环绕方式选择“右”，只能上下移动8．插入“字幕”（new_page1为例）我们经常看到，许多网页中有从左向右或从右向左滚动了字幕，可以通过插入字幕的方法可以实现。执行“插入→组件→字幕”命令，在弹出如图7.19所示的对话框。在文本框中，输入滚动的文字，还可选择方向、速度、表现方式、大小、重复、背景颜色等属性。设置好后，在预览视图下就可以看到滚动的字幕了。图7.19滚动字幕

9．设置网页的主题主题是一组可应用在网页上的设计元素和颜色方案，主题赋予网页一致和引人注目的外观。使用主题是快速容易地加入精彩的网页内容和赋予网页专业外观的方法。FrontPage包含很多可以使用的主题，您可以使用或修改这些主题以满足您的需求。在网页中，单击“格式”→“主题”菜单命令，弹出“主题”对话框，如图7.20所示。图7.20主题对话框

10．设置网页属性如果要想设置“网页标题”、网页的背景图片、或背景音乐等属性，可以在“网页属性”对话框中完成。单击“文件”→“属性”菜单命令，或在网页的任何地方单击鼠标右键，在快捷菜单中单击“网页属性”命令，都可以打开“网页属性”对话框，如图7.21所示。

图7.21网页属性对话框

【提示】若网页应用了主题，则网页属性不会出现“背景”选项卡，因为主题中包含了背景。7.5综合实例

7.5.1案例1个人网页设计1．主页设计（１）主页的布局主页设计如下图所示，这里作者只起到一个抛砖引玉的作用。主页的标题为“风雨同舟个人主页”，同时，在第一段中输入“风雨同舟个人主页”并居中。在第一段的下方插入一行滚动的字幕“欢迎访问个人主页”。用一条直线上面的内容分开。网页的主题为秋页。图7.22个人主页

（２）用表格来定位栏目中的各项内容，第一列为栏目：小生自传、音乐天地、联系、软件下载等；第二列：请你欣赏。通过合并表格，插入图片，选择美丽的风景图片，甚至设置为不断变化的风景画片，也可以图片为背景。第三栏为信息反馈，插入表单的各元素。（３）信息反馈栏目在信息反馈栏中，先在要插入表单元素的地方按“enter”键，然后再插入表单的各元素，最后插入“提交”和“全部重置”两个按钮。右键单击表单下部区域，在弹出的快捷菜单中，单击“表单属性”命令，在“表单属性”对话框中，选择“发送到”，在电子邮件地址中输入自己的电子邮件：如：gzlijz@163.com。２．其它网页设计及链接、（１）“小生自传”网页设计“小生自传”网页（如：new_page2.htm），在这里读者可介绍的自己的兴趣、爱好、成长过程、相册、工作、交友、友情链接等栏目。最后在本网页上添加一个返回主页的按钮，直接链接回主页。（２）创建链接①“小生自传”链接到小生自传网页，如new_page2.htm。②“音乐天地”、“网址大全”、“软件下载”分别链接到http://www.gjj.cc/，/，

/。③“联系”链接到邮件地址，如gzlijz@163.com。３．网页游览在FrontPage2000窗口的网页视图中，单击“浏览”按钮，可浏览网页，如图7.22所示。7.5.2案例2发布站点

网页制作好后，只有发布到Web服务器上才能被网络浏览者浏览。可以将网页发布到InternetWeb服务器上，也可以发布到局域网中的Web服务器上。这里作者以WindowsServer2000提供了InternetInformationServices（IIS）组件创建和管理WWW（Web）站点。本案例将案例1创建的网页发布到局域网的Web服务器站点上。发布到InternetＷeb站点上操作与此大致相同。操作步骤如下：本案例将案例1创建的网页发布到局域网的Web服务器站点上。发布到InternetＷeb站点上操作与此大致相同。操作步骤如下：1．安装IIS（InternetInformationServices）2．配置Web服务器上默认Web站点单击“开始”→“程序”→“管理工具”→“Internet服务管理器”菜单命令，打开“Internet信息服务”应用程序窗口，如图7.23所示。在这个窗口中，已经有了“默认web网站”，也可以对“默认Web网站”进行重命名，如“Myweb站点”等。

右键单击“默认Web网站”，在弹出的快捷菜单中单击“属性”命令，弹出“默认Web网站属性”对话框，如图7.24所示。在“主目录”选项卡中，选择准备存放Web网页的文件

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论