1 / 120

网页制作软件 rontPage2003

网页制作软件 rontPage2003. HTML 文件的结构. 一个 HTML 文件大体分为以下几部分： <HTML> <HEAD> <TITLE> 网页标题 </TITLE> </HEAD> <BODY> 　　　　　　网页的内容 </BODY> </HTML>. HTML 文件的结构. < HTML > 和 < /HTML > ：超文本的开始和结束。 < HEAD > 和 < /HEAD > ：超文本标题的开始和结束。 < TITLE > 和 < /TITLE > ：超文本窗口标题的开始和结束，它被显示在浏览器顶端的标题栏中。

maida
Télécharger la présentation

网页制作软件 rontPage2003

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 网页制作软件rontPage2003

  2. HTML文件的结构 一个HTML文件大体分为以下几部分： <HTML><HEAD><TITLE>网页标题</TITLE></HEAD><BODY>　　　　　　网页的内容</BODY></HTML> 2

  3. HTML文件的结构 < HTML >和< /HTML >：超文本的开始和结束。 < HEAD >和< /HEAD >：超文本标题的开始和结束。 < TITLE >和< /TITLE >：超文本窗口标题的开始和结束，它被显示在浏览器顶端的标题栏中。 < META >：是用来描述HTML文档的元信息，即文档文档自身的信息。 < BODY >和< /BODY >：正文的开始和结束，它被显示在浏览器中。其中可以包含许多元素，是HTML语言的核心部分。 3

  4. HTML命令 • 页面 • 字体 • 文字布局 • 图象 • 表单 • 表格 • 多媒体 4

  5. <HTML><HEAD><TITLE>李正新的网页</TITLE></HEAD><BODY>　　　　　　李正新欢迎您浏览<HTML><HEAD><TITLE>李正新的网页</TITLE></HEAD><BODY>　　　　　　李正新欢迎您浏览 网页的内容……</BODY></HTML> • 用记事本，输入以下内容 • 文件——另存为 lzx.html • 一个简单的网页就制作好了，可以浏览。 5

  6. 本课要点 1.   站点的创建与发布。2.   网页的基本编辑。3.   表格的操作和利用表格布局。4.   文本的设置。5.  网页元素的插入 。6.   超链接的基本操作。7.   表单的基本概念和操作。 8.　框架式网页的制作。 9.　几种特殊动态效果的制作。

  7. 目 录 • 7.1 认识FrontPage2003 • 7.2 案例1――茶文化网页制作 • 7.3 案例2――调查表的制作 • 7.4 案例3――个人就职网站

  8. 7.1 认识FrontPage2003 • FrontPage2003的特点： 1.更容易建立专业、精确的网站。 2.FrontPage2003不仅可以用来制作网页，用户可以使用它来建设和维护整个网站，更简单的检测、更新你的网站。工作组用户可以通过FrontPage2003使分布在世界各地的子公司一起工作。 3.FrontPage2003与其他Office组件的整合性更加提高，打开和运行的速度比FrontPage2000更快。

  9. 一、 FrontPage2003概述 FrontPage2003是Office2003组件之一，运行与启动Office其他软件相同。启动成功后，出现的初始画面可能因机器使用情况的不同而不同，一般的界面如图7-1所示，菜单部分与Office中的其他软件相似，最大区别是工作区的左端有一个视图栏，包含：网页、文件夹、报表、导航、超链接、任务。

  10. 图7-1 FrontPage2003启动后显示页面

  11. 二、视图栏 1．网页。编辑网页需在“网页”视图中进行。在“网页”视图中，有“设计”、“拆分”、“代码”和“预览”4张选项卡。 2．远程网站视图。同步此网站和远程网站之间的文件。 3．文件夹视图。用于管理站点中的文件和文件夹。

  12. 4．报表视图。分析网站并管理其内容。 5．导航视图。显示站点的导航结构，用于对站点结构的管理。 6．超链接视图。用于显示站点中每一页的超链接。 7．任务视图。用于创建和管理站点中的任务。

  13. 7.2 案例1――茶文化网页制作 任务要求：为一茶吧制作一个个性化主页，用于介绍茶知识、茶文化以及趣闻等，其效果如图28-1所示

  14. 28.3.1新建网页 • ⑴ 启动FrontPage 2003。 • ⑵ 新建一张空白网页。

  15. 28.3.2设置网页属性 • ⑴ 单击快捷菜单中的“网页属性”对话框选项，弹出“网页属性”对话框。 • ⑵ 在“网页属性”对话框中单击“格式”选项。 • ⑶ 在“背景”栏中选择“背景图片”选项。 • ⑷ 单击“浏览”按钮，选择“．．/素材/image/house.jpg”文件，再单击“确定”按钮，效果如图28-2。

  16. 28.3.3 表格设置 • 1．插入主表格并编辑 。 • ⑴ 单击“表格”菜单，选择“插入”子菜单下的“表格”选项，弹出“插入表格”对话框。在表格的“大小”栏中的“行数”选项设置为“2”，列数设置为“1”，“边框”栏中的“粗细”选项设置为“0”，其它参数设置如图28-3所示。

  17. ⑵ 单击“确定”按钮。 • ⑶ 选中第1行，单击快捷菜单中的“拆分单元格”选项，弹出“拆分单元格”对话框。 • ⑷ 在“拆分单元格”对话框中，选择“拆分成列”选项，“列数”设置为“2”，如图28-4所示。

  18. ⑸ 单击“确定”按钮。 • ⑹ 选择第2列，单击快捷菜单中的“拆分单元格”选项，弹出“拆分单元格”对话框。 • ⑺ 在“拆分单元格”对话框中选择“拆分成行”选项，“行数”设置为“2”。 • ⑻ 单击“确定”按钮，主表格的效果如图28-5所示。

  19. 2．在第1行第1列的单元格中插入表格。 • 单击“表格”菜单，选择“插入”子菜单下的“表格”选项，弹出“插入表格”对话框。在“插入表格”对话框中，“行数”选项设置为“1”，“列数”选项设置为“1”，“单元格衬距”设置为“0”，“单元格间距”设置为“0”，“边框”栏中的“颜色”设置为“棕红色”，其它参数如图28-6所示。

  20. 3．在第1列插入表格并编辑。 • ⑴ 选择第1列，单击“表格”菜单选择“插入”子菜单下的“表格”选项，弹出“插入表格”对话框。 • ⑵ 在“插入表格”对话框中“行数”选项设置为“1”，“列数”选项设置为“1”，“粗细”选项设置为“0”，其它参数如图28-7所示。

  21. ⑶ 单击“确定”按钮。 • ⑷ 单击快捷菜单的“表格属性”选项，弹出“表格属性”对话框。 • ⑸ 选择“背景”栏中的“使用背景图片”选项。 • ⑹ 单击“浏览”按钮，选择“../素材/image/house1.jpg”图像文件。 • ⑺ 单击“打开”按钮，“表格属性”对话框属性设置如图28-8所示。 • ⑻ 单击“确定”按钮

  22. 4．第3行插入表格并编辑。 • ⑴ 单击“表格”菜单，选择“插入”子菜单下的“表格”选项，弹出“插入表格”对话框。 • ⑵ 在“插入表格”对话框中“行数”选项设置为“3”，“列数”选项设置为“6”，“单元格衬距”选项设置为“1”，“单元格间距”选项设置为“2”，在“边框”栏中的“粗细”选项设置为“1”， “颜色”选项设置为“棕红色”，

  23. ⑶ 单击“确定”按钮。 • ⑷ 选中第1列的第1、第2、第3行，单击快捷菜单中的“合并单元格”命令；选中第3列的第1、第2、第3行，单击快捷菜单中的“合并单元格”命令；选中第5列的第1、第2、第3行，单击快捷菜单中的“合并单元格”命令

  24. 28.3.4输入文本并编辑 ⑴ 在第1列的嵌套表格中输入“广东人的茶饮风俗、茶逢知已、苏轼与茶、新茶与旧茶的鉴别、茶的分类、闽人钟情茶文化、喝茶并不能解酒、中国古代‘斗茶’”等文字，字体为宋体，字号4号，颜色为黑色，

  25. ⑵ 在第3个表格的相应单元格内输入“茶知识、茶的分类、饮茶的方式、新茶与旧茶的鉴别、茶与人生、茶人逸事、茶逢知已、品茶与心灵净化……”等文字，字体为宋体，字号4号，颜色为黑色，

  26. ⑶ 在主表格的第2行输入文本（文字内容保存于“..\素材\中国茶文化拾趣.doc”），字体为宋体，字号4号，颜色为棕红色

  27. 2．保存网页。 • ⑴ 单击“文件”菜单下的“另存为”选项，弹出“另存为”对话框。在“另存为”对话框中，在“文件名”的文本框中输入文件名，例如：indextea，文件类型为“网页”，或html文件。 • ⑵ 单击“保存”按钮。

  28. 28.3.5插入图片 • ⑴ 选择主表格的右侧的第1行。 • ⑵ 单击“插入”菜单，选择“图片”子菜单下的“来自文件”选项，选择“../素材/image/bgc.gif”图像文件。 • ⑶ 单击“插入”按钮。 • ⑷ 选择图像，调整大小直至充满整个单元格。

  29. 28.3.6调试预览并保存网页 • 1．调试预览网页。 • 总体调试网页，在布局上还有不合理的地方重新进行调整，并且边调整边预览，直至达到满意的效果，

  30. 7.3 案例2――茶文化网页制作 任务2： 创建一读者调查表，如下图30-1所示，把一Flash动画文件插入到学校主页.htm文件中，增加网页的动感效果，最后把制作好的网页进行发布。

  31. 30.3.1插入表单并设置 • 1．新建一个空白网页。 • 2．单击“插入”菜单，选择“表单”子菜单下的“表单”选项，新建一个空白表单，“空白表单” • 3．在表单中插入一个表格

  32. 4．在表格的第1行插入艺术字 • ⑴ 把光标定位在图片栏中的第1行，单击“插入”菜单，选择“图片”子菜单下的“来自文件”选项，弹出“图片”对话框。 • ⑵ 在“图片”对话框中选择“../素材/image/image001.gif”图像文件，再单击“插入”按钮。 • 5．在表格的第2行输入文字“基本信息调查：”，字体格式设置为“宋体”，“3号”，“黑色”。

  33. 6．在表格的第3行先输入文字“姓名：”，再单击“插入”菜单，选择“表单”子菜单下的“文本框”命令。6．在表格的第3行先输入文字“姓名：”，再单击“插入”菜单，选择“表单”子菜单下的“文本框”命令。 • 7．选择文本框，把鼠标指针移到控制点处进行大小调整，直到一个比较适合的大小

  34. 8．在表格的第4行插入单选钮，效果如图30-5所示。8．在表格的第4行插入单选钮，效果如图30-5所示。 • ⑴ 输入文字“性别：”。 • ⑵ 单击“插入”菜单，选择“表单”子菜单下的“选项按钮”命令。 • ⑶ 输入文字“男”。 • ⑷ 单击“插入”菜单，选择“表单”子菜单下的“选项按钮”命令。 • ⑸ 输入文字“女”。

  35. 9．在表格的第5行插入下拉框 • ⑴ 输入文字“职业：”。 • ⑵ 单击“插入”菜单，选择“表单”子菜单下的“下拉框”命令。 • ⑶ 双击网页中新创建的下拉框，弹出“下拉框”属性框。 • ⑷ 单击“添加”按钮，弹出“添加选项”对话框。 • ⑸ 在“添加选项”对话框中的“选项”文本框中输入“学生”。

  36. ⑹ 单击“确定”按钮。 • ⑺ 重复⑷～⑹的操作，分别输入选项值为“公司职员、教师、其他”。 • ⑻ 单击“确定”按钮。

  37. 10．在表格的第6行创建复选框 • ⑴ 输入文字“喜欢本书哪里：”。 • ⑵ 单击“插入”菜单，选择“表单”中的“复选框”命令。 • ⑶ 输入文字“封面”。 • ⑷ 重复第⑵～⑶的操作，输入的文字分别为“案例、版式、内容、印刷”，直至所有选项设置完成。

  38. 11．在表格的第7行输入文字“意见与建议：”。11．在表格的第7行输入文字“意见与建议：”。 • 12．创建多行滚动文本框。 • ⑴ 把光标定位在表格的第8行。 • ⑵ 单击“插入”菜单，选择“表单”子菜单下的“文本区”命令。 • ⑶ 双击新建的文本框，弹出“文本区属性”对话框。 • ⑷ 在初始值的文本框中输入文字“不喜欢本书的哪几个方面、改进意见：”，属性设置如图30-8所示。

  39. ⑸ 单击“确定”按钮。 • ⑹ 单击选中新创建的文本区，调节控制点，把文本区调整到一个合适的大小，文本区设置完成。 • 13．在表格的第9行输入文字“注册成为我们的会员：”。 • 14．在表格的第10行输入文字“用户名：”。 • 15．单击“插入”菜单，选择“表单”子菜单下的“文本框”命令。

  40. 16．在表格的第11行输入文字“密码：”。 • 17．插入一个密码框。 • ⑴ 单击“插入”菜单，选择子菜单下的“表单”下的“文本框”。 • ⑶ 双击新创建的文本框，弹出“文本框属性”对话框。 • ⑷ 单击密码域的值“是（Y）”的单选钮，该文本框设置为密码域，

  41. 18．网页属性设置，设置网页的背景图片为“../素材/image/bg.jpg”。18．网页属性设置，设置网页的背景图片为“../素材/image/bg.jpg”。 • 19．调试预览并保存网页

  42. 30.3.2建立超链接 • 1．打开“..\素材\index.htm”网页。 • 2．在网页的左下角的“读者调查”上创建超链接。 • ⑴ 选择文字“读者调查”。 • ⑵ 单击快捷菜单中的“超链接”选项，弹出“插入超链接”对话框

More Related