DW网页制作教程案例.docx
- 文档编号：5482452
- 上传时间：2022-12-17
- 格式：DOCX
- 页数：42
- 大小：620.74KB
DW网页制作教程案例.docx
《DW网页制作教程案例.docx》由会员分享，可在线阅读，更多相关《DW网页制作教程案例.docx（42页珍藏版）》请在冰豆网上搜索。
DW网页制作教程案例
“计算机网络技术”系列校本教材
Dreamweaver进阶与实例
施琛编著
苏州技师学院信息工程系
前言
当前，计算机网络技术迅速发展，国民经济各部门对计算机网络技术的应用日益广泛，对计算机网络技术人员的需求越来越迫切。
为了培养计算机网络技术人员的需要，不断提高教学质量，在苏州市劳动与社会保障局领导和苏州技师学院领导的支持下，苏州技师学院信息工程系的专业教师编写了此“计算机网络技术”系列校本教材。
这次编写的计算机网络技术系列校本教材包括投影片制作POWERPOINT、VB程序设计、动画设计FLASH、常用工具软件、C语言程序设计、图形图像处理PHOTOSHOP、网站建设DREAMWEAVER、数据库操作ACCESS和局域网安装与维护技能。
参与编写“学习领域”计算机网络技术系列校本教材的教师有夏国亭、林春生、刘志毅、刘俊燕、崔志华、施琛、罗清波、卜强和华康老师。
计算机网络技术系列校本教材是本着改革创新的精神组织编写的，作为“学习领域”校本教材，适用于“行为引导型”教学法，符合循序渐进的要求，从打好基础入手，突出操作技能训练的特点，着力培养学生多种能力。
作为系列化校本教材，各教材的“工作页结构”得到了“学习领域”王生专家的指点，在此表示衷心感谢。
由于计算机网络技术发展迅速，知识更新快，而编者水平有限，书中不妥之处在所难免，恳请读者批评指正。
编者
2008年9月
学习领域1：
Dreamweaver基础1
学习单元1：
工作区的选取1
学习单元2：
站点的建立5
学习单元3：
页面设置15
学习单元4：
网页的布局和规划21
学习单元5：
站点上传27
学习领域2：
Dreamweaver进阶31
学习单元1：
表格的设置31
学习单元2：
单元格的设置39
学习单元3：
网页的布局设置43
学习单元4：
超级链接的实现51
学习单元5：
库的应用59
学习单元6：
模板的应用65
学习单元7：
表单的应用73
学习单元8：
层的应用77
学习单元9：
CSS的应用83
学习单元10：
CSS自定义样式93
学习单元11：
CSS的特殊设置99
学习领域3：
Dreamweaver实例107
学习单元1：
网页实例107
学习单元2：
网页上机实践113
学习单元3：
网站实例
（一）115
学习单元4：
网站实例
（二）127
学习单元5：
网站制作上机实践135
学习单元6：
网页综合实例137
学习单元7：
网页综合实例上机实践145
附：
教学大纲147
Dreamweaver基础
工作区的选取
学习目标:
☐掌握Dreamweaver工作区的选择
☐掌握Dreamweaver工作区的更改
学习时间：
2学时
DreamweaverMX提供了两种可供选择的工作区布局：
一种将全部元素置于一个窗口中的集成布局和一种非类似于Dreamweaver4的浮动布局。
第一次运行DreamweaverMX需要选择一种工作区布局。
选择DreamweaverMX工作区
两种布局的喜好因人而异，如果选择的是DreamweaverMX工作区，想改成Dreamweaver4工作区，可以使用“参数选择”对话框切换。
选择更改工作区
使用DreamweaverMX工作区，默认的界面中，工作区很小，如果要把工作区变大，选择三角形按钮，就可以隐藏面板组和属性面板。
如果要使用面板组，再点击三角形按钮。
✧
内容延伸：
DreamweaverMX简介
MacromediaDreamweaverMX是一个可视化的网页设计和网站管理工具，支持最新的Web技术，包含HTML检查、HTML格式控制、HTML格式化选项、HomeSite/BBEdit捆绑、可视化网页设计、图像编辑、全局查找替换、全FTP功能、处理Flash和Shockwave等富媒体格式和动态HTML、基于团队的Web创作。
在编辑上你可以选择可视化方式或者你喜欢的源码编辑方式。
DreamweaverMX新增功能如下：
加强的用户界面；多重用户配置；增强的源代码编辑功能；扩展的文档格式支持；加强的服务器模式扩展；改进的数据库链接操作；提升了与外部应用程序的协作功能。
学生分组讨论，由代表上讲台展示讨论内容
Dreamweaver基础
站点的建立
学习目标:
☐了解网页制作的流程
☐掌握使用Dreamweaver建立站点
☐掌握站点文件的创建
学习时间：
2学时
DreamweaverMX中文版的出现，使制作一个功能强大的网站，变得很容易，可以轻易的做出以前被认为很复杂的ASP，PHP网站。
通过建站实例，一步一步的带大家掌握网页制作技术。
做网站制作中，首先要了解的就是制作流程了。
新建站点→站点文件命名→定义页面属性→插入表格→定义页面大小→转换到布局视图→添加内容→插入导航条→转换到标准视图工作→添加链接→使用代码片断→定义及应用CSS→添加动态交互→链接站点各个页面。
以上是一个静态网站建设流程和需要掌握的技术。
在后面的几篇文章中，将通过建立一个网站实例，具体介绍这些内容。
✧站点的建立
建立一个网站，首先要在本地机器上做好网站，再传到网上的虚拟空间上。
接下来主要介绍本地站点的建立，站点文件命名。
简明步骤：
在C盘新建一个文件夹→在Dreamweaver中定义站点→新建文件和文件夹→给文件和文件夹命名。
目标是做一个个人网站。
打开“我的电脑”，打开C盘，点鼠标右键，选择新建。
选择文件夹选项
C盘下会出现一个新建文件夹图标
输入你想要的站点名称，这里输入SGJ,其实可以任意输入名称的，要注意的是，尽量不要用中文命名，以免出现意想不到的麻烦。
现在开始在DreamweaverMX中把SGJ这个文件夹定义为站点。
打开Dreamweaver，在菜单栏上，点击站点菜单，选择新建站点。
接下来需要给站点起一个名字，可以起任意一个名字。
这里起名为SGJ,按下一步
按下一步按钮，选择是否使用服务器技术。
因为实例建立的是一个静态站点，就选择“否，我不想使用服务器技术”。
按下一步按钮，因为要传到网上的虚拟主页空间，就要选择“编辑我的计算机上的本地副本，完成后再传到服务器上”。
接着，选择要定义的本地根文件夹
这里选择SGJ文件夹
点“选择”按钮，因为没有使用远程服务器，就选择“无”。
按下一步
按完成按钮，一个站点就定义好了。
✧新建网页文件和文件夹
站点定义好之后，就要开始新建网页文件和文件夹了，在站点中点击右键，选择新建文件。
给新建的文件输入名称
新建文件夹与新建文件类似，就不重复了。
在文件命名和站点结构方面，养成良好的习惯很重要。
注：
网站首页默认的文件名，取决于你申请的主页空间，一般是index.htm,index.html,default.htm等。
同类型的文件，最好放在一个文件夹中，例如把图片文件，都放在image文件夹中。
不要把所有文件都放在根目录下，把一个栏目的所有文件放在一个文件夹中，在链接网页和维护时，会很方便。
文件和文件夹的命名，可以用栏目名称的拼音，也可以用栏目名称的英文，团队开发时，有统一的命名规则相当重要。
例如jianli、bbs作文件夹名称。
应该有人发现了，DreamweaverMX默认扩展名是.htm，修改DreamweaverMX的一个配置文件，就可以把默认扩展名从.htm改到.html。
以windows2000操作系统，DreamweaverMX默认安装路径为例，找到
文件名（MMDocumentTypes.xml）这个文件，此文件位于：
C:
\ProgramFiles\Macromedia\DreamweaverMX\Configuration\DocumentTypes文件夹下。
双击MMDocumentTypes.xml，在DreamweaverMX中打开
把第三行的html移动到"htm,html,shtml,shtm,stm,lasso,xhtml"这部分最前面的位置，就是改成"html,htm,shtml,shtm,stm,lasso,xhtml"。
然后保存文件。
重新打开DreamweaverMX，新建一个文件，默认扩展名变成.html了，其它扩展名修改方法类似。
✧内容延伸：
为什么要创建站点？
创建站点是第一步很重要，创建之后，Dreamweaver就可以帮忙来管理站点，比较说插入图片的时候将图片都放在定义站点的文件夹内，代码自动写入相对地址，保证网站发布的时候完整，如果不定义站点，则代码就会写成绝对地址，指向本地电脑，发布的时候图片链接会失效。
总而言之将所用的文件都放在定义站点的文件夹内就没有问题的，如果你定义好了站点，一旦出现站点外的文件，Dreamweaver会提醒你的。
学生分组讨论，由代表上讲台展示讨论内容
Dreamweaver基础
页面设置
学习目标:
☐了解整个网页的设置的一般步骤
☐掌握使用Dreamweaver对网页的页面进行设置
☐掌握网页的颜色选取的方法和依据
学习时间：
2学时
✧页面设置
双击SGJ站点中的index.htm，打开一个空白的页面。
我们将从这个空白页面开始制作，了解页面属性的设置和作用。
在工作区点鼠标右键，选择页面属性。
打开页面属性对话框
下面是设置的一个页面属性
在标题上输入5dmedia，在背景，文本，链接，访问过的链接，活动链接几部分选取颜色。
设置左边界，顶部边界，边界宽度，边界高度都为0，可以使页面中的表格与背景没有空隙。
如果不设置设置左边界，顶部边界，边界宽度，边界高度，就会与顶部和左边有明显的空隙
用得比较多的还有背景图像，选择一个已经做好的图像，就可以设置成页面的背景图像。
✧颜色布局
网页设计中，颜色是最关键的，决定了一个网站在美工方面是否成功。
现在流行的网页设计配色，采用黑、白、灰这些无彩色作基调，采用一种精确的有彩色作为主色调，大多使用一种颜色的渐变，让人感觉只有一种有彩色。
在下面，主要针对相近颜色，无彩色和有彩色的精确选取三部分。
下面将以调整页面属性的颜色为实例，选择颜色选取框，
打开颜色选取面板
◇精确选取有彩色：
如果要精确选取各种颜色，特别是各种有彩色，就要使用“系统颜色拾取器”
单击“系统颜色拾取器”，打开颜色面板
拖动最右边的滑块，调整高度。
◇选择连续色调，在网页设计时，常使用相近的颜色。
点三角形按钮，选“连续色调”
◇无彩色的选取：
选择“灰度级”，可以选取从白到黑各种无彩色。
不要选中“调整到网页安全色”，如果选中这一项，会减少可选择的颜色数。
✧内容延伸：
背景图不能在IE中预览？
有时候用Dreamweavermx的页面属性设置的背景图不能在IE中预览，因为图片的存储路径是带有中文名的文件夹，Dreamweaver代码里是显示不了中文的编写语言，所以当背景图是选择的带有中文名的文件里添加的，那么在Dreamweaver里的代码视图里会显示乱码。
总而言之将所用的文件都放在定义站点的文件夹,并且文件夹是英文的就没有问题的。
学生分组讨论，由代表上讲台展示讨论内容
Dreamweaver基础
网页的布局和规划
学习目标:
☐了解如何对网页进行整体布局
☐了解网页版式的一般规划
☐掌握使用表格布局
学习时间：
2学时
✧网页布局
现在有好几种尺寸的显示器，网页要在每个显示器上显示正常，就要设置恰当的参数，常用的是在页面中插入表格放内容，采用象素和百分比两种。
采用象素为单位，是以使用最多的显示器的分辨率为参照的；使用百分比，可以在各种显示器上有相同的效果，宽度设置为100％时，在各种显示器上全屏显示。
下面分别介绍这两种方法。
简明步骤：
打开一个页面→插入表格→设置表格宽度。
在以前建立的SGJ站点中，新建index.htm文件，双击打开。
点击插入表格图标
打开“插入表格”对话框，设置行数为1，列数为1，宽度选百分比，值为100，边框为0
一个可以在各种显示器上全屏幕显示的网页就搭建好了。
以后要做的是在表格里填充内容。
下面介绍象素大小的表格设置，选择像素为单位，值为768。
可以在15英寸显示器上全屏幕显示，在17英寸显示器上也有好的显示效果。
相对使用百分比制作网页，采用像素比较简单。
做一个在800×600分辨率下满屏幕显示的页面，可以大致选择一个近似的值：
“宽768高430”，“宽776高430”等。
用像素为单位的表格，大多是把表格设置为居中对齐。
选中表格，在属性面板选择对齐方式为居中对齐。
✧版式规划
设计精美的网站，都是采用了优秀的版式设计。
做一个网页，先要规划好版式。
这里主要介绍制作网页时的版式设计。
几种常用的版式（分栏结构），LOGO（标志）尺寸，Banner（横幅）尺寸，导航栏类型，导航菜单位置，网页内容，版权声明。
以上是一个主页的简单结构，由三个表格组成。
第一个表格，二行一列，第一行放LOGO和Banner,第二行放导航菜单。
中间一个表格，一行二列，里面再分别插入两个表格，左边表格放导航或者图片，右边表格放网页内容。
典型的二分栏结构。
下面一个表格，一行一列，放版权声明。
实际中Banner和LOGO尺寸是根据设计需要选择大小，并不受标准的限制。
常见的LOGO在页面的左上方，Banner在页面的右上方。
常见的分栏结构，还有三分栏，四分栏。
下面是一个三分栏的结构：
最下面的表格，一行一列，放版权声明，联系方式。
导航栏在网页的设计中，直接关系到使用网页的方便，和整个网页的美观也有很大关系。
✧内容延伸：
主页和网页？
网页（WebPage）和主页（HomePage）是两个不同的概念，每一个HTML文件都是一个网页，而主页指的是一个网站所有网页中的首页，不过平常一般也没有必要严格区分它们，但这里要指定的HomePage就是整个网站的首页，通常首页都命名为index.htm、index.html、default.htm或default.html之一，并且这个名字不能随便起，必须根据远程服务器的要求来定，而网页就没有此规定。
学生分组讨论，由代表上讲台展示讨论内容
Dreamweaver基础
站点上传
学习目标:
☐掌握站点的测试
☐掌握站点的上传
学习时间：
2学时
✧站点的测试
一个站点做好后，需要对站点进行测试。
1．打开窗口菜单>结果>链接检查器，或者按“Ctrl+Shift+F9”快捷键，打开
2．点击无效链接，点最右边黄色的文件夹图标，选择正确的文件。
3．在站点报告测试。
4.选择报告的内容。
运行报告。
5.检查浏览器的兼容性。
✧站点上传
一个站点经过测试，修改所有错误之后，就可以上传了。
1．点击“站点菜单”，点击“新建站点”，在高级面板中。
设置远程信息。
访问：
FTP。
FTP主机：
FTP地址。
主机目录：
如果没有特别规定，为空。
登陆：
你的用户名。
密码：
密码。
2.点“防火墙设置”按钮，在参数选择窗口，防火墙主机里输入FTP地址，防火墙端口中输入端口值，常见的是21，这要看空间服务商的规定。
3.点击“测试”按钮，完成测试。
✧内容延伸：
网页空间
站点完成之后，如果要想让更多的人看到就需要上传至网页空间，将网页及程序存放在服务商提供的服务器上，而且一台服务器上要存放多个用户的站点内容。
服务商会采用一种方式，将服务器的硬盘存贮空间划分为许多块，每一块分给一个用户使用。
用户只能将自己的网页文件和程序放在自己的那一块中，但不能查看或处理属于别人的块。
这些划分的存贮块就叫做网页空间（或WEB空间）。
学生分组讨论，由代表上讲台展示讨论内容
Dreamweaver进阶
表格的设置
学习目标:
☐了解表格的作用
☐掌握表格的功能
☐掌握表格的具体使用方法
学习时间：
4学时
Dreamweaver的表格具有十分重要的作用，在前面已经粗略的介绍过了，本单元的主要内容是表格的使用。
✧初识表格
当单元格边距和单元格间距没有指定数值时，Dreamweaver将以间距2，填充1的设置显示表格。
填充：
单元格内容和单元格边框之间的距离（单位：
象素）。
间距：
单元格之间的距离（单位：
象素）。
插入一个表格，为了便于分析表格，这里单元格间距设置为10。
插入一个表格：
◇单元格：
在表格中点击以选定单元格，也可以在标签选择器里点击
◇表格：
在标签选择器里点击
| 标签选择一行。 本例是以一个一行二列的表格为基础的。 ◇一个“一行一列”的表格，至少有两个边框。 设置边框为1边框颜色黑色的表格如下图。 ◇红色（外侧）为表格边框，绿色（内侧）为单元格边框。 表格边框和单元格边框的颜色可以分别指定。 间距： 边框和边框之间的距离就是间距 为了便于观看填充的效果，在属性面板中，填充输入为30。 ◇填充： 单元格边框和内容之间的距离就是填充。 ✧调整行和列的宽度 ◇鼠标放在一列的上面，出现向下的箭头时，单击，就可以选中一列。 在属性面板中可以设置所选列的宽和高。 鼠标放在一行的左边，出现横向的箭头时，单击，就可以选中一行。 在属性面板中可以设置所选行的宽和高。 ✧制作一像素表格 ◇制作一像素的表格，实质上是设置间距的大小和颜色。 实例为便于观看效果，把间距设置为10。 单元格填充和边框设置为0。 单元格填充和边框不输入数值效果类似。 在单元格中点击，或者选中标签选择器中的 | 选中单元格。 设置单元格的背景颜色为白色。 选中表格，设置表格的背景颜色为黑色。 一个10象素宽的表格就做好了。 实际上是把间距的颜色设置成了黑色。 把间距改成1。 发布在浏览器中的效果。 ✧拆分和合并单元格 ◇嵌套表是在表格中的一个表格。 在一个单元格中，插入一个表格，就是嵌套表 ◇合并单元格： 按Ctrl，点单元格，选中表格，在属性面板中点“合并所选单元格，使用跨度”。 合并后的效果： 拆分单元格： 插入一个表格。 ◇在单元格中单击，选中单元格。 点击属性面板中的“拆分单元格为行或列”，设置拆分方式。 拆分为二行一列的表格如下图。 ✧内容延伸： 怎样使网页页面更美观？ 在制作表格的时候,比如做3行2列的表格,就会显示每行表格,但是为了美观,若只想要外框.里面的表格就不要了.请问怎么实现呢? 可以画个大表有格边线,里面嵌套三行两列无边框，即是表格嵌套表格，在网页布局中常常会使用这种方法。 学生分组讨论，由代表上讲台展示讨论内容 Dreamweaver进阶 单元格的设置 学习目标: ☐了解单元格的作用 ☐掌握单元格的功能 ☐掌握单元格的设置 学习时间： 2学时 ✧设置单元格颜色 简明步骤： 选中单元格，在属性面板中，选择一种背景颜色。 把鼠标放在单元格内，出现红色边框时，单击，就可以选中单元格了。 在属性面板中，选择一种背景颜色。 设置了背景颜色的单元格： ✧设置单元格的对齐方式 作用： 可以使单元格里的内容，从不同的地方开始。 在“垂直”下拉栏选择顶端，输入的文字可以从最上面一行开始；选择中间，文字就开始从中间开始。 在“水平”下拉栏，选择“左对齐”，文字和单元格左对齐；选择“右对齐”，文字和单元格右对齐。 简明步骤： 选中一个单元格，在属性面板中的“水平”，“垂直”下拉栏选择一个参数。 在属性面板中的垂直选项栏选择“中间”，输入的文字从单元格中间开始。 在属性面板中的垂直选项栏选择“顶端”，输入的文字从单元格顶端开始。 输入文字常选择这种方式。 在属性面板中选择水平对齐方式为右对齐： 在属性面板中，如果不想文字换行，不要选中“不换行”。 这种方式可以保持其它表格不变形。 如果选中“不换行”，文字会沿一行扩张，其它表格也被挤压变形。 设置列为自动伸展的作用： 自动伸展列可以随着浏览器调整大小。 选择自动伸展后的效果如下图。 ✧内容延伸： 如何在dreamweaver里单元格插入的图片上输入文字? 可以将图片设置为单元格的背景，这样在单元格内就可以添加文字了。 选定表格或单元格，在“属性”栏的“背景”中进行设置，选择相应的图片就可以为单元格设置背景了，同时又不影响文字输入。 学生分组讨论，由代表上讲台展示讨论内容 Dreamweaver进阶 网页的布局设置 学习目标: ☐了解布局视图 ☐掌握布局视图的功能 ☐掌握布局表格的绘制 ☐掌握使用跟踪图像快速布局 学习时间： 2学时 在DreamweaverMX中，可以在表格中添加内容，但是内容只是在表格的中间出现。 这时需要从标准视图切换到布局视图，精确定位网页内容。 在布局视图中，您可以在页上绘制布局单元格和布局表格。 当您不在布局表格中绘制布局单元格时，Dreamweaver会自动创建一个布局表格以容纳该单元格。 布局单元格不能存在于布局表格之外。 单击插入栏“布局”分类中的“绘制布局单元格”按钮 将鼠标指针放置在页上要开始绘制单元格的位置上，然后拖动指针以创建布局单元格。 若要创建多个单元格而不用每次都单击“绘制布局单元格”按钮，请按住Ctrl键并拖动指针来创建每个布局单元格。 ✧绘制布局表格 单击插入栏“布局”分类中的“绘制布局表格”按钮,将鼠标指针放置在页上，然后拖动指针以创建布局表格。 若要绘制多个布局表格而不必重复单击“绘制布局表格”按钮，请在单击“绘制布局表格”按钮时按住Ctrl键。 要将一个布局表格绘制在另一个布局表格中，创建嵌套表格。 单击插入栏“布局”分类中的“绘制布局表格”按钮。 鼠标指针变为加号（+），指向现有布局表格中的空白（灰色）区域，然后拖动指针以创建嵌套布局表格。 转换到标准视图下的表格就是 ✧添加内容到布局单元格 在布局单元格中输入文字。 单击插入栏“常用”类别中的“插入图像”按钮插入图像。 如果在单元格中插入了一个大于单元格宽度的图像，在布局标题上就有两种大小，如图： 选择使单元格宽度一致。 ✧设置列宽度为自动伸展 设置列宽度为自动伸展的意义： 把一行中的一列设置为自动伸展，可以使这行始终在访问者浏览器窗口整个宽度显示。 自动伸展列的宽度随着浏览器窗口的宽度自动变化。 自动伸展列的列标题区域显示波浪线而不是数字。 在一行中，最好只选择最右边的一列为自动伸展。 选中一列的标题区域，选择“列设置为自动伸展” 如果是第一次设置自动伸展，就会出现“选择间隔图像”对话框，选择“创建间隔图像文件”。 按确定按钮，自动会有一个spacer.gif文件，选择保存。 自动伸展列的标题区域显示波浪线，一个自动伸展列就做好了。 ✧布局的一般步骤 在向网页填充内容之前，需要准备素材，包括网站的LOGO，Banner，图片，Flash动画，各种按钮，声音文件，用于布局参考的参考图像。 把这些内容复制到站点中。 通常把图片复制到站点中的images文件夹。 简明步骤： 准备各种素材复制到站点中→设置页面的跟踪图像→插入表格确定尺寸→布局→从资源面板中把资源拖到页面。 用Fireworks制作一个页面的效果图，或者用一个已经存在的页面做布局的参考。 打开站点SGJ，打开index.html，设置页面属性，选择跟踪图像，点游览按钮。 选择跟踪图像，这个跟踪图像，是已经做好的图像。 也可以是其它网站页面的截图。 建议设置为50％以下，以便和页面内容区别。 设置了跟踪图像的页面如下图。 跟踪图像并不在最终的页面中出现，仅仅是在设计中起辅助作用。 转换到布局选项卡，点"绘制布局表格"，在页面参考跟踪图像布局。 从上到下，一行一行的画好整个页面的表格。 点"绘制单元格按钮"，在布局表格里面绘制单元格。 一个页面做好布局之后，再打开页面属性，图像透明度设置为10％，就可以填充内容了。 打开资源面板，把相应的资源拖到布局单元格中。 在拖放的过
冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。
该用户的其他资源 更多>>
猜你喜欢
关于本文
相关资源
更多
copyright@ 2008-2022 冰点文档网站版权所有 经营许可证编号:鄂ICP备2022015515号-1 |
转基因粮食的危害资料摘编Word下载.docx
