第一章 网页制作基础

1. 涪陵职教中心 第一章 网页制作基础 杨琼

2. 教学目标 • 说明什么是网页 • 解释Internet的工作原理 • 网页设计准则 • 网页制作常用工具 • 熟悉Dreamweaver MX 2004的工作环境 • 创建本地站点并制作一个简单的网页文档

3. 网页实例

4. 网页应具有的特点 • 网页是图形化的和易于导航的 • 网页应与系统无关 • 网页是交互的 • 网页是动态的

5. 认识网页 网页的学名称作HTML文件，是一种包含文本、图片、声音、视频、动画等多媒体内容，可以在互联网上传输，并能被浏览器认识和翻译成页面显示出来的一种文件，网页的默认扩展名是.htm或.html。

6. 网页制作人员的主要任务 网页制作人员的主要任务就是将文本、图像和其他对象有效地组合在一起，即通过对图形、文字和各种媒体元素的合理运用和安排，使浏览者流畅地浏览整个网页。

7. 企业网站的创建流程 一、总体规划企业网站 确定网站主题，规划站点的风格 二、准备网站的相关资料 企业的简介、企业的CI系统、企业产品的相关资料、主要联系方式、售后服务方式等。 三、规划站点结构 站点结构是整个站点的框架，站点结构的规划直接关系到网站是否有良好的可读性以及文件管理的复杂性。

8. 制作网页的常用工具 在实际工作中，人们往往用Fireworks MX处理图片、用Flash MX制作相关网页动画，最后用Dreamweaver MX来创建网站。

9. Dreamweaver 工作环境

10. 创建一个简单网页 • 启动Dreamweaver 后，单击“文件”菜单中的“新建”命令或按“Ctrl+N”快捷键，打开“新建文档”对话框的“常规”选项卡，在左侧的“类别”选项框中选择“基本页”并在右侧的列表框中选择“HTML”选项。 • 单击“创建”按钮，Dreamweaver 将自动创建一个空白文档。 • 在“文档”工具栏的“标题”文本框中输入“我的第二个网页” • 用鼠标在文档窗口的工作区中单击，将插入点置入工作区的左上角，输入“Hello，world！”，按回车键后，再输入“这是一个用Dreamweaver 生成的网页”。 • 用鼠标拖动选中刚输入的两行文字，在“属性”面板的“大小”下拉列表中选择“36”，并单击“居中对齐”按钮，将文字居中放置。 • 单击“文件”菜单中的“保存”命令或按“Ctrl+S”键，打开“另存为”对话框，在“保存在”下拉列表框中选择D盘根目录，在“文件名”列表框中输入“firstpage.htm”,单击“保存”按钮，保存刚创建的网页。 • 按F12键，启动浏览器预览网页。浏览结束后，单击窗口右上角的“关闭”按钮，关闭浏览器窗口。

11. 创建本地站点 • 先启动Windows的资源管理器，在D盘根目录下创建“mysite1”文件夹，并在其中创建“image”和“js”子文件夹。 • 启动Dreamweaver 后，单击“站点”菜单中的“管理站点”命令，打开“管理站点”对话框，单击“新建”按钮，在下拉菜单中选择“站点”选项，将打开“站点定义向导”对话框。 • 打开“基本”选项卡。在“您打算为您的站点起什么名字”文本框中输入站点名称“沈阳电缆厂石家庄办事处”。 • 单击“下一步”按钮，打开“编辑文件，第2部分”对话框，选择“否，我不想使用服务器技术”单选按钮。

12. 创建本地站点 • 单击“下一个”按钮，打开“编辑文件，第3部分”对话框，选择“编辑我的计算机上的本地副本，完成后再上传到服务器”单选按钮，在“您将把文件存储在计算机上的什么位置？”文本框中输入“d:\mysite1\”， • 单击“下一个”按钮，打开“站点定义，共享文件”对话框，在“您如何连接到远程服务器？”下拉列表框中选择“无”选项。 • 单击“下一个”按钮，打开“站点定义，总结”对话框，可以查看到以上步骤所设置的详细信息

13. 作业 • 一、填空题 • 1、网页制作三剑客包括、、。 • 2、Dreamweaver MX 2004中工作区布局有和两种模式。

14. 作业 二、选择题 1﹑ 要隐藏所有面板,应选择“窗口”菜单中的“隐藏面板”，或按下__________快捷键。. a. Alt+F4键　　b. Ctrl+F4键　　c. F4键　　d. Ctrl+F2键 2﹑ __________是将显示在Web浏览器的菜单栏上的名称. a. 文本 b. 标题 c. 脚本 d. HTML 3、按键，可以启动浏览器直接预览网页。 a.F9 b.F10 c.F11 d.F12 4、提供网页浏览的服务器是（　　） a.WWW b. POP3 c. NEWS d. SMTP 5、 网页所使用的超文本标记语言的简写是（　　） a.HTML b. XML c. WAP d.SGML 6、Dreamweaver的网页属性编辑视窗中，左边距是用来设置（　　　）？ A. 距顶边距离 B. 距左边距离 C. 边距高度 D. 边距宽度

15. 第二章 创建企业宣传页面

16. 教学目标 • 能够添加文本并对文本进行格式化 • 创建列表 • 了解Web中常用的图像类型 • 在网页中添加图像，使用图像属性修改图像 • 了解什么是CSS，创建简单的CSS并将其应用到项目中

17. 范例网站的企业宣传页面

18. 新建网页文档 • 在Dreamweaver中创建一个新的基本页，将“标题”栏文字改为“沈阳电缆厂石家庄销售处”，按“Ctrl+S”快捷键，打开“另存为”对话框，在对话框中选择文档存放位置—我们在上一章中创建的本地站点文件夹“d:\mysite1”，并在“文件名”下拉列表框中输入文件名称—“jianjie.htm”。 • 设置页面属性　针对要创建的企业简介页面的特点，我们要修改以下页面属性：单击“修改”菜单中的“页面属性”命令或按“Ctrl+J”快捷键，打开“页面属性”对话框，在“外观”选项组中将“上边距”全部设为0像素，其它设置暂不作修改，保持默认值。

19. 插入表格、规范网页布局 单击“插入”菜单中的“表格”命令，打开“表格”对话框，在“表格大小”一栏中，将其行数设置为4，列数为1，表格宽度设置为770，单位为象素，“边框粗细”、“单元格边距”、“单元格间距”都设置为0，单位都是象素；页眉及辅助功能设置不用更改设置，默认即可。

20. 插入表格、规范网页布局 单击如图状态栏左半部分标签选择器中的<table>标签，选中整个表格，表格的边框就变成了黑色的加粗的颜色，这时属性面板中将显示表格的相关属性。在属性面板里找到“对齐”一项，在其下拉列表中选择“居中对齐”

21. 插入网站主题图片 在刚生成表格的第一行中插入网站主题图片，将插入点光标移到第一行的单元格内，单击鼠标左键，然后按快捷键“Ctrl+Alt+I”，打开“选择图像源文件”对话框，在“选择图像源文件”对话框中选择一个图像文件bt.jpg，单击“确定”。

22. 制作左侧导航菜单 • 将插入点光标移到表格的第二行中，单击表格属性面板中的“拆分”按钮，打开“拆分单元格”对话框，在“把单元格拆分”选项区中选择“列”，将单元格拆分成列；在随后显示的“列表”文本框中输入,“2”，设置将指定单元格拆分成2列. • 将插入点光标移到第二行的左单元格中，在单元格属性面板中的“背景”文本框中输入“image/back.gif”，即为该单元格设置背景图片，再在“垂直”列表中选择“顶端对齐”选项，将设置单元格中内容的水平对齐方式

23. 制作左侧导航菜单 • 在第二行的左单元格中，插入图片“left.gif” • 选中图片“left.gif”再按键盘中向右的方向键将插入点光标移至图片的后面，再单击“Ctrl+Alt+t”快捷键，打开“插入表格”对话框，再设置插入一个行数为“6”，列数为“1”，宽度为“120”，其余各项为0的表格

24. 制作左侧导航菜单 • 将插入点光标移到刚插入表格的第一个单元格中，按住鼠标左键拖动选中所有的单元格，注意是选中所有的单元格不是选中整个表格，这样属性面板才显示的单元格的相关属性，在单元格属性面板的“高”文本框中输入“30”，设置单元格高度为“30”，并在“垂直”下拉列表中选择“居中”，设置单元格中内容垂直居中对齐， • 在第一个单元格中插入图片“an1.gif”，设置链接为“＃”，目标为“_blank”，重复上述步骤，依次添加上其余5个导航按钮，并全部设置成空链接。

25. 制作右侧页面 • 将光标移至第二行的右单元格，选择“属性”面板中的，将该单元格拆分成2行，定义上一行单元格高度为“65”，插入图片“gsjj.gif”. • 光标移至下边单元格，将垂直对齐方式定为“顶端”对齐，输入公司简介文字。

26. 制作右侧页面 • 完成后选中所有文字，点击右方CSS样式面板的“新建样式”按钮，新建一个名为“.wen”的样式，定义在“仅对该文档”，字体设置为“宋体”、大小为12像素，行高为18像素。 • 单击属性面板“样式”列表中的为“.wen”，将单元格中文本定义为该样式，并将单元格中文字设置为“左对齐”

27. 制作右侧页面 • 将光标移至本单元格顶部，插入一个两行一列，宽度为245像素的表格，表格相对于表格外的文字“右对齐”，即选中新建表格后单击属性面板中的“对齐”列表中的“右对齐”选项。将插入点光标移到第一个单元格中，在属性面板的“高”文本框中输入“185”，将新建表格第一行高度设为“185”像素，按相同方法将新建表格的第二行设为“25”像素，并将两个单元格中内容的水平对齐方式设为“居中” • 在新建表格第一行单元格格插入图片“jzm.jpg”，并在第二行输入说明文字：“江泽民同志视察我厂”

28. 制作页面底部 • 将插入点光标移至大表格的第三行单元格，在属性面板中设置样式为“.wen”，单元格中内容水平“居中”对齐，单元格高度为25像素，并设置单元格背景图片为“di.gif”，依照相同办法，第四行也设成相同属性。 • 并分别在单元格内输入文字，所有内容制作完毕，保存文档，按F12预览

29. 企业宣传页面二

30. 新建网页文档　按“Ctrl+N”快捷键，创建一个新的空白文档，在“文档”工具栏的“标题”文本框中输入“电子工业出版社”，为网页创建将来在标题栏中显示的标题。新建网页文档　按“Ctrl+N”快捷键，创建一个新的空白文档，在“文档”工具栏的“标题”文本框中输入“电子工业出版社”，为网页创建将来在标题栏中显示的标题。 • 保存网页文档　单击“文件”菜单中的“保存”命令或按“Ctrl+S”快捷键，打开“另存为”对话框，在对话框中选择文档存放位置—例如：“d:\mysite2”，并在“文件名”下拉列表框中输入文件名称—“intro”，单击“保存”按钮即可。在Dreamweaver环境中网页文档最常用保存格式是.HTM和.HTML。

31. 设置页面属性　针对要创建的企业简介页面的特点，我们要修改以下页面属性：单击“修改”菜单中的“页面属性”命令或按“Ctrl+J”快捷键，打开“页面属性”对话框，在“外观”选项组中将“上、下、左、右边距”全部设为0像素，其它设置暂不作修改，保持默认值。设置页面属性　针对要创建的企业简介页面的特点，我们要修改以下页面属性：单击“修改”菜单中的“页面属性”命令或按“Ctrl+J”快捷键，打开“页面属性”对话框，在“外观”选项组中将“上、下、左、右边距”全部设为0像素，其它设置暂不作修改，保持默认值。 • 单击“插入”菜单中的“表格”命令，打开“表格”对话框，下面我们在这个对话框中初步设置所插表格的属性，如图2.61所示，在表格大小一栏中，将其行数设置为3，列数为1，表格宽度设置为602，（注意：由于我们当前的工作任务其实只是整个网页中的一部分，所以插入的表格宽度为602，而根据目前主流显示器的分辨率1024＊768。）单位为象素，“边框粗细”、“单元格边距”、“单元格间距”都设置为0，单位都是象素；页眉及辅助功能设置不用更改设置。

32. 选中表格，在属性面板里找到“对齐”一项，选择“居中对齐” ，在刚生成的表格的第一行中插入一个图片wsjj_04.gif 。 • 将插入点光标移至第二行的单元格中，选择“插入”工具栏中的“HTML”选项卡，然后单击“水平线”按钮，在第二行表格中插入一条水平线，

33. 就像使用其他的文字编辑软件一样，将插入点光标移至表格的第三行，用熟悉的输入法录入文本。就像使用其他的文字编辑软件一样，将插入点光标移至表格的第三行，用熟悉的输入法录入文本。 • 将插入点光标移至段落的段首。按“Ctrl+Alt+I”快捷键，打开“选择图像源文件”对话框。在“选择图像源文件”对话框中选择一个图像文件D盘“素材”文件夹的子文件夹“session2”中的his_prize.gif，

34. 单击图像将其选中，在图像属性面板中，单击选中“对齐”下拉列表中的“右对齐”按钮，设置图像与同一行文本之间的对齐方式，再单击“左对齐”按钮来设置图像所在文本段落相对页面的水平对齐方式。 • 将插入点光标移到段落首行的前端。单击“插入”工具栏中“文本”选项卡中的“字符”按钮，在弹出的下拉菜单中选择“不换行空格”按钮四次，因为每插入“不换行空格”只是首行缩进半个字符，

35. 输入“企业文化”，用鼠标选中，在属性面板中设置按“居中对齐”按钮设置“居中对齐”格式，按“加粗”按钮设置“加粗”格式。用鼠标单击下一行的行首，将插入点移至下一行，这里如果用回车键实现换行就会将本行的格式设置遗传到下一行。分行录入以下文本，用鼠标手动拖动选中这些文本，单击属性面板中的“项目列表”按钮设置列表格式

36. 按上述方法输入标题“优势与策略”并设置格式，再将插入点移至新行的行首，以上文本内容分六个段落输入。选中刚录入的六段文本，单击属性面板上的“项目列表”按钮，设置整体列表格式。

37. 第三章 企业产品介绍页面的实现

38. 教学目标 • 掌握在网页中建立各种超链接的方法 • 了解网页布局的基础知识，掌握用表格规划网页布局的方法 • 理解框架的基础知识，创建各种类型的框架集并能根据需要修改框架 • 理解模板对于网站建设的重要性，掌握创建和修改模板的方法，能够使用模板更新页面

39. 企业产品页面实例

40. 将现有文档保存为模板 打开上章实例二中制作的“intro.htm”，将其中公司简介部分内容删除，效果如图所示，再将其保存为模板应执行以下操作：单击“文件”菜单中的“另存为模板”命令，在“另存为”域中为该模板输入名称“模板1”

41. 插入可编辑区域 定义模板后，就要指定模板的哪个部分可编辑，以便在其中添加内容，因为默认情况下，整个模板处于锁定状态。可编辑模板区域指在创建基于模板的页面时，模板使用者可以编辑哪些区域。 • 在“文档”窗口中，选择右侧空白单元格中的上面的一个。 • 单击“插入”菜单中的“模板对象”命令，选择“可编辑区域”命令，打开“新建可编辑区域”对话框。 • 在“名称”文本框中为该区域输入唯一的名称，“EditRegion1”，注意不要在“名称”文本框中使用特殊字符。

42. 基于模板创建新的文档 • 在“新建文档”对话框中选择“模板”选项卡，在左侧的“模板用于”列表中选择“沈阳电缆厂石家庄销售处”站点。 • 从中间的模板列表中选择“模板1”，右侧的“预览”窗口中将显示该模板。 • 选中“当模板改变时更新页面”复选框，如果不希望在每次更改模板后 Dreamweaver 都更新基于该模板的页面，可取消选择“当模板改变时更新页面”复选框，那样该文档将不再以模板文件“.dwt”形式存在，而是成为一个独立的 HTML文档。

43. 基于模板创建新的文档 • 单击“创建”按钮，基于选定模板的新文档出现在“文档”窗口中，如图所示。

44. 添加产品介绍页面的内容 • 将新建文档保存为“chanpin.htm”，在第一个可编辑区域中插入“a2.gif”，在第二行的可编辑区域中插入一个8行2列，“宽度”为“500”，边框为“0”的表格，并在属性面板中设置其水平居中对齐，设置各单元格高度为30。 • 合并新建表格第二列的8行单元格，并在左边的8行中分别输入各种产品名称，（6-110kV交联聚乙烯绝缘电力电缆、0.6/1KV交联聚乙烯绝缘电力电缆、聚氯乙烯绝缘电力电缆、聚氯乙烯绝缘控制电缆、架空绝缘电缆、聚氯乙烯绝缘电缆（电线）、橡套电缆、特控电缆），选中左边的8个单元格，应用在上一个网页中创建的样式“.wen”，并分别为每种产品的名称建立链接为“chanpin1.htm”至“chanpin8.htm”

45. 添加产品介绍页面的内容 • 在新建表格的右单元格新建一个2行1列的表格，宽度为“200像素”，边框线为“0”，水平居中。分别在两个单元格中插入图片“chanpin1.jpg”和“chanpin2.jpg”，设计效果如图所示

46. 创建每一种产品的介绍页面

47. 先创建基于新建模板网页文档，并将其保存为“chanpin1.htm”文件，在第一个可编辑区域中插入“a2.gif”，在第二行的可编辑区域中插入一个宽度为“600像素”，3行1列，间距设“2”，边框为“0”的表格，使其水平居中。将第一行拆分成两列，再将第一行右边单元格拆分成两行，如图所示。先创建基于新建模板网页文档，并将其保存为“chanpin1.htm”文件，在第一个可编辑区域中插入“a2.gif”，在第二行的可编辑区域中插入一个宽度为“600像素”，3行1列，间距设“2”，边框为“0”的表格，使其水平居中。将第一行拆分成两列，再将第一行右边单元格拆分成两行，如图所示。

48. 将新建表格中第一行左边列的宽度设为“40%”，并在其中插入产品图片“chanpin01.jpg”，右边单元格分别插入产品名称、编号及用途等内容。在第二行插入产品其他信息。将新建表格中第一行左边列的宽度设为“40%”，并在其中插入产品图片“chanpin01.jpg”，右边单元格分别插入产品名称、编号及用途等内容。在第二行插入产品其他信息。 • 在具体的产品介绍中还应有参数说明的表格，我们可以根据具体情况插入表格，比如在第二行表格中插入一个新的表格，并将表格的宽度应设为“600像素”，边框可设为“1”，可将表头和表体设为不同的颜色以示区别，如表头可设为“#80BFDB”色；表体可设为“#FFFFEE”色，设计效果如图所示。

49. 在下面再插入一个表格，表头设为“#99CCCC”色，；表体可设为“#FFFFEE”色，输入相应的文字。

50. 由于页面内容过多，页面过长，应在页尾加一个返回页首的链接，即在第一个可编辑区域中插入一个名为“top”的锚点，在第三行表格中插入图片“top.htm”，选中新插入的图片后，在图片的属性面板中的“链接”文本框中输入“#top”。由于页面内容过多，页面过长，应在页尾加一个返回页首的链接，即在第一个可编辑区域中插入一个名为“top”的锚点，在第三行表格中插入图片“top.htm”，选中新插入的图片后，在图片的属性面板中的“链接”文本框中输入“#top”。