DW网页制作教程案例Word格式文档下载.docx
《DW网页制作教程案例Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《DW网页制作教程案例Word格式文档下载.docx（42页珍藏版）》请在冰豆网上搜索。
学习单元9：
CSS的应用83
学习单元10：
CSS自定义样式93
学习单元11：
CSS的特殊设置99
学习领域3：
Dreamweaver实例107
网页实例107
网页上机实践113
网站实例
（一）115
网站实例
（二）127
网站制作上机实践135
网页综合实例137
网页综合实例上机实践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建立站点
☐掌握站点文件的创建
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对网页的页面进行设置
☐掌握网页的颜色选取的方法和依据
✧页面设置
双击SGJ站点中的index.htm，打开一个空白的页面。
我们将从这个空白页面开始制作，了解页面属性的设置和作用。
在工作区点鼠标右键，选择页面属性。
打开页面属性对话框
下面是设置的一个页面属性
在标题上输入5dmedia，在背景，文本，链接，访问过的链接，活动链接几部分选取颜色。
设置左边界，顶部边界，边界宽度，边界高度都为0，可以使页面中的表格与背景没有空隙。
如果不设置设置左边界，顶部边界，边界宽度，边界高度，就会与顶部和左边有明显的空隙
用得比较多的还有背景图像，选择一个已经做好的图像，就可以设置成页面的背景图像。
✧颜色布局
网页设计中，颜色是最关键的，决定了一个网站在美工方面是否成功。
现在流行的网页设计配色，采用黑、白、灰这些无彩色作基调，采用一种精确的有彩色作为主色调，大多使用一种颜色的渐变，让人感觉只有一种有彩色。
在下面，主要针对相近颜色，无彩色和有彩色的精确选取三部分。
下面将以调整页面属性的颜色为实例，选择颜色选取框，
打开颜色选取面板
◇精确选取有彩色：
如果要精确选取各种颜色，特别是各种有彩色，就要使用“系统颜色拾取器”
单击“系统颜色拾取器”，打开颜色面板
拖动最右边的滑块，调整高度。
◇选择连续色调，在网页设计时，常使用相近的颜色。
点三角形按钮，选“连续色调”
◇无彩色的选取：
选择“灰度级”，可以选取从白到黑各种无彩色。
不要选中“调整到网页安全色”，如果选中这一项，会减少可选择的颜色数。
背景图不能在IE中预览？
有时候用Dreamweavermx的页面属性设置的背景图不能在IE中预览，因为图片的存储路径是带有中文名的文件夹，Dreamweaver代码里是显示不了中文的编写语言，所以当背景图是选择的带有中文名的文件里添加的，那么在Dreamweaver里的代码视图里会显示乱码。
总而言之将所用的文件都放在定义站点的文件夹,并且文件夹是英文的就没有问题的。
网页的布局和规划
☐了解如何对网页进行整体布局
☐了解网页版式的一般规划
☐掌握使用表格布局
✧网页布局
现在有好几种尺寸的显示器，网页要在每个显示器上显示正常，就要设置恰当的参数，常用的是在页面中插入表格放内容，采用象素和百分比两种。
采用象素为单位，是以使用最多的显示器的分辨率为参照的；
使用百分比，可以在各种显示器上有相同的效果，宽度设置为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之一，并且这个名字不能随便起，必须根据远程服务器的要求来定，而网页就没有此规定。
站点上传
☐掌握站点的测试
☐掌握站点的上传
✧站点的测试
一个站点做好后，需要对站点进行测试。
1．打开窗口菜单>
结果>
链接检查器，或者按“Ctrl+Shift+F9”快捷键，打开
2．点击无效链接，点最右边黄色的文件夹图标，选择正确的文件。
3．在站点报告测试。
4.选择报告的内容。
运行报告。
5.检查浏览器的兼容性。
✧站点上传
一个站点经过测试，修改所有错误之后，就可以上传了。
1．点击“站点菜单”，点击“新建站点”，在高级面板中。
设置远程信息。
访问：
FTP。
FTP主机：
FTP地址。
主机目录：
如果没有特别规定，为空。
登陆：
你的用户名。
密码：
密码。
2.点“防火墙设置”按钮，在参数选择窗口，防火墙主机里输入FTP地址，防火墙端口中输入端口值，常见的是21，这要看空间服务商的规定。
3.点击“测试”按钮，完成测试。
网页空间
站点完成之后，如果要想让更多的人看到就需要上传至网页空间，将网页及程序存放在服务商提供的服务器上，而且一台服务器上要存放多个用户的站点内容。
服务商会采用一种方式，将服务器的硬盘存贮空间划分为许多块，每一块分给一个用户使用。
用户只能将自己的网页文件和程序放在自己的那一块中，但不能查看或处理属于别人的块。
这些划分的存贮块就叫做网页空间（或WEB空间）。
Dreamweaver进阶
表格的设置
☐了解表格的作用
☐掌握表格的功能
☐掌握表格的具体使用方法
4学时
Dreamweaver的表格具有十分重要的作用，在前面已经粗略的介绍过了，本单元的主要内容是表格的使用。
✧初识表格
当单元格边距和单元格间距没有指定数值时，Dreamweaver将以间距2，填充1的设置显示表格。
填充：
单元格内容和单元格边框之间的距离（单位：
象素）。
间距：
单元格之间的距离（单位：
插入一个表格，为了便于分析表格，这里单元格间距设置为10。
插入一个表格：
◇单元格：
在表格中点击以选定单元格，也可以在标签选择器里点击<
td>
标签以选择单元格。
◇表格：
在标签选择器里点击<
table>
标签以选择表格。
◇一行：
标签选择一行。
本例是以一个一行二列的表格为基础的。
◇一个“一行一列”的表格，至少有两个边框。
设置边框为1边框颜色黑色的表格如下图。
◇红色（外侧）为表格边框，绿色（内侧）为单元格边框。
表格边框和单元格边框的颜色可以分别指定。
边框和边框之间的距离就是间距
为了便于观看填充的效果，在属性面板中，填充输入为30。
◇填充：
单元格边框和内容之间的距离就是填充。
✧调整行和列的宽度
◇鼠标放在一列的上面，出现向下的箭头时，单击，就可以选中一列。
在属性面板中可以设置所选列的宽和高。
鼠标放在一行的左边，出现横向的箭头时，单击，就可以选中一行。
在属性面板中可以设置所选行的宽和高。
✧制作一像素表格
◇制作一像素的表格，实质上是设置间距的大小和颜色。
实例为便于观看效果，把间距设置为10。
单元格填充和边框设置为0。
单元格填充和边框不输入数值效果类似。
在单元格中点击，或者选中标签选择器中的<
选中单元格。
设置单元格的背景颜色为白色。
选中表格，设置表格的背景颜色为黑色。
一个10象素宽的表格就做好了。
实际上是把间距的颜色设置成了黑色。
把间距改成1。
发布在浏览器中的效果。
✧拆分和合并单元格
◇嵌套表是在表格中的一个表格。
在一个单元格中，插入一个表格，就是嵌套表
◇合并单元格：
按Ctrl，点单元格，选中表格，在属性面板中点“合并所选单元格，使用跨度”。
合并后的效果：
拆分单元格：
插入一个表格。
◇在单元格中单击，选中单元格。
点击属性面板中的“拆分单元格为行或列”，设置拆分方式。
拆分为二行一列的表格如下图。
怎样使网页页面更美观？
在制作表格的时候,比如做3行2列的表格,就会显示每行表格,但是为了美观,若只想要外框.里面的表格就不要了.请问怎么实现呢?
可以画个大表有格边线,里面嵌套三行两列无边框，即是表格嵌套表格，在网页布局中常常会使用这种方法。
单元格的设置
☐了解单元格的作用
☐掌握单元格的功能
☐掌握单元格的设置
✧设置单元格颜色
选中单元格，在属性面板中，选择一种背景颜色。
把鼠标放在单元格内，出现红色边框时，单击，就可以选中单元格了。
在属性面板中，选择一种背景颜色。
设置了背景颜色的单元格：
✧设置单元格的对齐方式
作用：
可以使单元格里的内容，从不同的地方开始。
在“垂直”下拉栏选择顶端，输入的文字可以从最上面一行开始；
选择中间，文字就开始从中间开始。
在“水平”下拉栏，选择“左对齐”，文字和单元格左对齐；
选择“右对齐”，文字和单元格右对齐。
选中一个单元格，在属性面板中的“水平”，“垂直”下拉栏选择一个参数。
在属性面板中的垂直选项栏选择“中间”，输入的文字从单元格中间开始。
在属性面板中的垂直选项栏选择“顶端”，输入的文字从单元格顶端开始。
输入文字常选择这种方式。
在属性面板中选择水平对齐方式为右对齐：
在属性面板中，如果不想文字换行，不要选中“不换行”。
这种方式可以保持其它表格不变形。
如果选中“不换行”，文字会沿一行扩张，其它表格也被挤压变形。
设置列为自动伸展的作用：
自动伸展列可以随着浏览器调整大小。
选择自动伸展后的效果如下图。
如何在dreamweaver里单元格插入的图片上输入文字?
可以将图片设置为单元格的背景，这样在单元格内就可以添加文字了。
选定表格或单元格，在“属性”栏的“背景”中进行设置，选择相应的图片就可以为单元格设置背景了，同时又不影响文字输入。
网页的布局设置
☐了解布局视图
☐掌握布局视图的功能
☐掌握布局表格的绘制
☐掌握使用跟踪图像快速布局
在DreamweaverMX中，可以在表格中添加内容，但是内容只是在表格的中间出现。
这时需要从标准视图切换到布局视图，精确定位网页内容。
在布局视图中，您可以在页上绘制布局单元格和布局表格。
当您不在布局表格中绘制布局单元格时，Dreamweaver会自动创建一个布局表格以容纳该单元格。
布局单元格不能存在于布局表格之外。
单击插入栏“布局”分类中的“绘制布局单元格”按钮
将鼠标指针放置在页上要开始绘制单元格的位置上，然后拖动指针以创建布局单元格。
若要创建多个单元格而不用每次都单击“绘制布局单元格”按钮，请按住Ctrl键并拖动指针来创建每个布局单元格。
✧绘制布局表格
单击插入栏“布局”分类中的“绘制布局表格”按钮,将鼠标指针放置在页上，然后拖动指针以创建布局表格。
若要绘制多个布局表格而不必重复单击“绘制布局表格”按钮，请在单击“绘制布局表格”按钮时按住Ctrl键。
要将一个布局表格绘制在另一个布局表格中，创建嵌套表格。
单击插入栏“布局”分类中的“绘制布局表格”按钮。
鼠标指针变为加号（+），指向现有布局表格中的空白（灰色）区域，然后拖动指针以创建嵌套布局表格。
转换到标准视图下的表格就是
✧添加内容到布局单元格
在布局单元格中输入文字。
单击插入栏“常用”类别中的“插入图像”按钮插入图像。
如果在单元格中插入了一个大于单元格宽度的图像，在布局标题上就有两种大小，如图：
选择使单元格宽度一致。
✧设置列宽度为自动伸展
设置列宽度为自动伸展的意义：
把一行中的一列设置为自动伸展，可以使这行始终在访问者浏览器窗口整个宽度显示。
自动伸展列的宽度随着浏览器窗口的宽度自动变化。
自动伸展列的列标题区域显示波浪线而不是数字。
在一行中，最好只选择最右边的一列为自动伸展。
选中一列的标题区域，选择“列设置为自动伸展”
如果是第一次设置自动伸展，就会出现“选择间隔图像”对话框，选择“创建间隔图像文件”。
按确定按钮，自动会有一个spacer.gif文件，选择保存。
自动伸展列的标题区域显示波浪线，一个自动伸展列就做好了。
✧布局的一般步骤
在向网页填充内容之前，需要准备素材，包括网站的LOGO，Banner，图片，Flash动画，各种按钮，声音文件，用于布局参考的参考图像。
把这些内容复制到站点中。
通常把图片复制到站点中的images文件夹。
准备各种素材复制到站点中→设置页面的跟踪图像→插入表格确定尺寸→布局→从资源面板中把资源拖到页面。
用Fireworks制作一个页面的效果图，或者用一个已经存在的页面做布局的参考。
打开站点SGJ，打开index.html，设置页面属性，选择跟踪图像，点游览按钮。
选择跟踪图像，这个跟踪图像，是已经做好的图像。
也可以是其它网站页面的截图。
建议设置为50％以下，以便和页面内容区别。
设置了跟踪图像的页面如下图。
跟踪图像并不在最终的页面中出现，仅仅是在设计中起辅助作用。
转换到布局选项卡，点"
绘制布局表格"
，在页面参考跟踪图像布局。
从上到下，一行一行的画好整个页面的表格。
点"
绘制单元格按钮"
，在布局表格里面绘制单元格。
一个页面做好布局之后，再打开页面属性，图像透明度设置为10％，就可以填充内容了。
打开资源面板，把相应的资源拖到布局单元格中。
在拖放的过
升级会员 