网页制作基础由刀豆文库小编整理，希望给你工作、学习、生活带来方便，猜你可能喜欢“网页制作的基础”。
第8章网页制作基础
• 8.1 概述
• 8.1.1 基本概念
• 网页（Web Page）
– 网页是一种可以在① 打开站点zbkq，在面板中单击鼠标右键，从弹出菜单中选择【新建文件】命令，新建一个网页文件。
② 新建网页的默认名称是untitled.html，将untitled.html命名为index.html。
③ 使用同样的方法添加网页zzjs.html。
④ 在index.html上单击鼠标右键，从弹出菜单中选择【设成首页】命令，将其设置成主页。
• 添加文件夹的方法与添加网页的方法类似，在站点zbkq中添加两个文件夹images
和media。
8.2.3 管理本地站点
• Dreamweaver 8提供了强大的站点编辑和管理功能。
• 选择菜单命令【站点】→【管理站点】，弹出“管理站点”对话框
8.3 使用表格布局网页
8.3.1 插入表格
• 向index.html中插入一个表格，操作步骤如下：
① 打开index.html。
② 选择菜单命令【插入】→【表格】，或者在“插入”工具栏的“常用”选项卡中，单击“表格”按钮，弹弹出“表格”对话框。
③ 在“表格”对话框设置行数为2，列数为1，表格宽度为300像素，边框粗细、单元格边距和单元格间距均为0。
• 向index.html的表格中嵌入两个表格，操作如下：
① 将光标定位到表格的第一个单元格，插入一个表格，表格属性为：行数1，列数2，表格宽度100%，边框粗细1，单元格边距0，单元格间距1。
② 将光标定位到表格的第二个单元格，插入一个表格，表格属性为：行数4，列数2，表格宽度100%，边框粗细1，单元格边距0，单元格间距1。
8.3.2 选择表格元素
1.选择表格
– 单击表格中任一单元格，然后在“标签选择器”中选择“”标签。
– 单击表格中任一单元格，然后选择菜单命令【修改】→【表格】→【选择表
格】。
2.选择行或列
– 将鼠标指针移动到行的左边缘或列的上边缘。
– 当鼠标指针变为选择箭头或时，单击以选择当前行或列。
– 按住鼠标左键进行上下或左右拖动，可以选择相邻的多个行或列。
– 选择不相邻的行或列，可以在按住Ctrl键的同时选择行或列。
3.选择单元格
– 选择单个单元格，执行下列操作之一：
• 单击单元格，然后在“标签选择器”中选择“”标签。
• 按住Ctrl键，然后单击单元格。
– 选择一行或矩形的单元格块，执行下列操作之一：
• 从一个单元格拖到另一个单元格。
• 单击一个单元格，然后按住Shift键单击另一个单元格。这两个单元
格定义的直线或矩形区域中的所有单元格都将被选中。
– 选择不相邻的单元格，可以在按住Ctrl键的同时单击要选择的单元格。
8.3.3 设置表格属性
• 表格和单元格分别有各自的属性面板，可以分别进行参数设置。
• 选择index.html中第一个插入的表格。指定表格ID为table0，宽为777像素，对齐
为居中对齐，背景图像为images/table_bg.gif。
• 选择table0的第一行后。设置垂直对齐方式为顶端，高度为162像素。
• 选择第一个嵌套表格，指定ID为table1，高为156像素，边框颜色为#0099CC。选
择table1的第一个单元格，指定宽度为568像素。
• 选择第二个嵌套表格，指定表格ID为table2，边框颜色#0099CC。选择table2的第一行的两个单元格和第三行的两个单元格，指定高度为28像素，背景图像为images/table_title.gif。选择table2的第二行，指定高度为240像素，第一列宽度468像素。选择table2的第四行，指定高度为80像素。
8.3.4 添加及删除行和列
• 在index.html中table2的最后添加一个新行，操作步骤如下：
① 单击table2的最后一个单元格。
② 选择菜单命令【修改】→【表格】→【插入行或列】，弹出“插入行或列”对话框。
③ 选择“行”，设置“行数”为1，位置为“所选之下”，单击【确定】按钮，新的一行出现在表格中。
④ 选择新添加的行，指定高度为36像素。
• 删除某行或列，执行下列操作之一：
– 单击要删除的行或列中的一个单元格，然后选择菜单命令【修改】→【表格】
→【删除行】或【修改】→【表格】→【删除列】。
– 选择完整的一行或列，然后选择菜单命令【编辑】→【清除】或按Delete
键。
8.3.5 拆分和合并单元格
• 合并index.html中table2中的单元格，操作步骤如下：
① 选定table2的最后一行的两个单元格。
② 在“属性”面板中单击“合并单元格”按钮，或者选择菜单命令【修改】→【表格】→【合并单元格】，完成单元格合并。
• 至此，index.html的结构布局已设计完成。
8.4 编辑网页
8.4.1 新建网页
• Dreamweaver 8还提供了一种使用菜单命令创建网页文件的方法。
① 选择菜单命令【文件】→【新建】，弹出“新建文档”对话框中。在“新建文档”对话框中选择“基本页”类别，从“基本页”列表中选择“HTML”，点击【创建】按钮，创建一个网页文件。
② 选择菜单命令【文件】→【保存】，将网页文件保存到站点zbkq下，文件名xzbj.html。
8.4.2 设置网页属性
• 网页的基本属性包括网页中的默认字体、网页的背景颜色或背景图像、页边距、网
页的标题、网页编码等。
• 可以使用“页面属性”对话框设置网页的属性。
① 打开index.html，选择菜单命令【修改】→【页面属性】，或者单击属性面板中的【页面属性】按钮均可打开“页面属性”对话框。
② 选择“分类”中的“外观”类别，在外观选项中指定页面字体为“宋体”，大小为12，背景图像为images/bg.gif。
③ 按F12键在IE浏览器中打开网页。
• 再次打开“页面属性”对话框，设置背景颜色为#DEEBF3，重复为“横向重复”，上边
距0像素。
• 再次在IE浏览器中打开index.html网页。
• 使用同样的方法设置zzjs.html和xzbj.html的背景图片为images/bg.gif，重复为“横向
重复”，背景颜色为#DEEBF3，字体为“宋体”，大小为12。
8.4.3 添加文本
• 文本是网页设计最常用的元素，是网站内容的集中体现。
• 添加文字
– 在Dreamweaver中有两种换行方式：“分段换行”和“段内换行”。
• 添加特殊字符
– 如版权符号、注册商标符号，以及一些特殊的数学符号等。
• 添加空格
– Dreamweaver默认不支持连续输入多个空格，可以将输入法切换到全角状态
输入。
• 添加水平线
– 水平线有利于组织信息，可以使用一条或多条水平线以分隔文本和对象。
• 设置文本属性
– 选择zzjs.html中的“徐志摩介绍”，设置格式为“标题1”，字体颜色为#FFFFFF，居中对齐。
– 选择xzbj.html中的“再别康桥写作背景”，设置格式为“标题1”，字体颜色为
#FFFFFF，居中对齐。
– 设置index.html中表格标题文字为“粗体”，颜色为#FFFFFF，版权符号©为
Arial字体，版权文字居中对齐，设置table2第二行第一个单元格中的“再别
康桥”为“标题1”格式。
• 为实现index.html中“再别康桥”诗词内容的自下向上滚动效果，可进行如下操作： ① 选中table2的第二行的第一个单元格，将文档窗口切换到“拆分”视图。
② 在代码窗口当前选中的内容中找到“”，在其后输入“”
③ 从当前位置向下，找到第一个“”，在其之前输入文字滚动的结束标记“”。滚动效果要在浏览器中打开网页时才能看到。
8.4.4 添加超链接
1.超链接分类
– 内部链接：同一站点内资源之间的链接。
– 外部链接：不同站点资源之间的链接。
– 锚记链接：同一网页或不同网页指定位置的链接。
– Email链接：发送电子邮件的链接。
2.绝对路径和相对路径
（1）绝对路径
“”是一个绝对路径，它表示所链接文档的完整URL。
（2）文档相对路径
“gaoji/preferences.html”是一个文档相对路径，它省略了当前文档和所链接文档URL的相同部分。（3）站点根目录相对路径
“/gaoji/preferences.html”是一个站点根目录相对路径，它表示网页“preferences.html”位于站点根目录（/）下的“gaoji”子文件夹中。
3.网页超链接
– 网页超链接就是指向其他网页或资源的超链接，访问者单击这样的超链接时
将跳转到相应的网页或资源。
4.锚记链接
– 锚记链接常用于包含大量文字的网页，通过点击锚记链接，能够快速跳转到
网页的特定位置，便于访问者查看网页内容。
5.电子邮件链接
– 在网页上创建电子邮件链接，当访问者单击该链接时，可打开浏览器默认的电子邮件处理程序。
8.4.5 添加图像
• 图像是一种重要的网页素材，网页中常用的图像格式是GIF、JPEG和PNG。
• 在index.htm中table1的第二个单元格中插kangqiao.jpg，设置图像的宽为200像素，高为150像素。
8.4.6 添加音频和视频
• 常用的音频文件有WAV、MIDI和MP3，常用的视频文件有MPEG、WMV、RM／
RMVB、ASF等。
1.嵌入视频文件
– 在index.html的table2的第二行的第二个单元格中嵌入“男声朗诵.wmv”。
2.链接到音频文件
– 在index.html的table2的第四行的第三个单元格中链接“林宥嘉-再别康
桥.mp3”。
8.4.7 添加Flash动画
• 添加Flash动画就是将Flash动画直接嵌入到网页中，要求访问者安装有相应浏览器的Flash播放插件，才能播放Flash文件。
• 在index.html中的table1的第一个单元格中插入head.swf。
•在“属性”面板中设置Flash插件的宽度为568像素，高度为150像素。
8.5 发布站点
• Dreamweaver的站点测试功能可以检查站点中是否存在孤立文件，是否有断掉的链
接，以及存在的外部链接等。
• 测试站点zbkq，操作方法如下：
① 在“文件”面板中打开站点zbkq，在站点文件夹上单击鼠标右键。
② 从弹出快捷菜单中选择【检查链接】→【整个本地站点】命令，打开“结果”面板。③修复错误的链接，删除孤立文件。
8.5.2 设置远程信息
• 将站点发布到Internet上，供人们浏览观看，就必须有可访问的域名和主机空间。• 完成站点的测试之后，还需要设置站点的远程信息，之后才可以上传站点
8.5.3 上传站点
• 上传站点可以利用Dreamweaver 8自带的上传功能，也可以用相应的FTP工具。
8.5.4 浏览网页
• 站点上传完毕后，打开IE浏览器，在地址栏中输入站点远程主机的域名或IP地址，浏览器将自动打开站点的主页。
8.6 动态网页技术介绍
• 表单是实现动态网页的一种主要网页元素，是HTML网页与浏览器实现交互的重要
手段。
• 表单在网页中供访问者输入信息，然后将信息提交服务器处理，实现网页交互功能。• Dreamweaver 8提供了大量的表单元素，如按钮、文本框、下拉列表框、单选按钮、复选框。
• 可以使用“插入”工具栏的“表单”选项卡，或者选择菜单命令【插入】→【表单】插
入表单元素。
8.6.1 表单
• 表单是实现动态网页的一种主要网页元素，是HTML网页与浏览器实现交互的重要
手段。
• 表单在网页中供访问者输入信息，然后将信息提交服务器处理，实现网页交互功能。• Dreamweaver 8提供了大量的表单元素，如按钮、文本框、下拉列表框、单选按钮、复选框。
• 可以使用“插入”工具栏的“表单”选项卡，或者选择菜单命令【插入】→【表单】插
入表单元素。
8.6.2 脚本语言
• 脚本语言是一种描述性语言，用于编写嵌入到网页中的脚本程序，既可以用于静态
网页，也可以用于动态网页。
• 脚本程序由浏览器负责解释和执行，可以在网页上产生动态的显示效果和实现与用
户交互的功能。
• 脚本程序代码放置在HTML文档的和标记之间。
• 最常用的两种脚本语言是VBScript和JavaScript，8.6.3 服务器端处理程序
• 服务器端处理程序就是在服务器端执行数据处理的脚本程序，在形式上与客户端脚
本程序没有太大的差别，常用的服务器端处理语言有PHP、ASP和JSP。
• PHP（PHP: Hypertext Preproceor）具有开源、跨平台、简单易学、性能优越等特点，是目前十分流行的服务器端编程语言之一。
• ASP（Active Server Pages）是微软的开发的一种动态网页技术，它没有提供自己的编程语言，默认使用VBScript脚本语言，也可以使用JavaScript语言。
• JSP（Java Server Pages）是Sun公司推出的一种动态网页技术。JSP技术以Java语
言作为脚本语言，普遍认为JSP的执行效率比PHP和ASP都高。
上机实验2上机练习1按P21页1.3.4节内容制作一个简单的网页。上机练习2（1） 在计算机上建立一个自己的文件夹，然后按照课本P30页的步骤使用高级选项卡创建一个站点。（文件夹可按照......
制作网页课堂实践活动方案：将学生分成四组，每组12名学生。（按照平时学习情况进行分组，要保证每组都能独立完成网页制作）每个小组自选一个主题，让学生利用学过的知识进行进行网页制......
你无须去记复杂的HTML语言，你可以用Netscape4.0或者WORD7.0,我用的是Frontpage.打开Netscape,在file菜单里选Edit Page,便可以制作了.文字的处理基本跟Word没什么两样,关键是......
1.先下载网页制作工具，Dreamweaver v8.0 简体注册版下载地址： http://www.daodoc.com/ 2.开始学习，去网易学院学习网页制作的方法。《网站设计系列多媒体教程》 http://tech.16......
网页制作心得做好主页，并不是一件容易的事，它包括个人主页的选题、内容采集整理、图片的处理、页面的排版设置、背景及其整套网页的色调等很多东西。一、准备资料和挑选网页设......
