2019年DW网页制作教程案例

建立一个网站，首先要在本地机器上做好网站，再传到网上的虚拟空间上。接下来主要介绍本地站点的建立，站点文件命名。简明步骤：在C盘新建一个文件夹→在Dreamweaver中定义站点→新建文件和文件夹→给文件和文件夹命名。目标是做一个个人网站。打开“我的电脑”，打开C盘，点鼠标右键，选择新建。
选择文件夹选项
中间一个表格，一行二列，里面再分别插入两个表格，左边表格放导航或者图片，右边表格放网页内容。典型的二分栏结构。
下面一个表格，一行一列，放版权声明。
实际中Banner和LOGO尺寸是根据设计需要选择大小，并不受标准的限制。常见的LOGO在页面的左上方，Banner在页面的右上方。
常见的分栏结构，还有三分栏，四分栏。下面是一个三分栏的结构：
由于计算机网络技术发展迅速，知识更新快，而编者水平有限，书中不妥之处在所难免，恳请读者批评指正。
编者
2008年9月
Dreamweaver基础
工作区的选取
学习目标:
掌握Dreamweaver工作区的选择
掌握Dreamweaver工作区的更改
学习时间：2学时
DreamweaverMX提供了两种可供选择的工作区布局：一种将全部元素置于一个窗口中的集成布局和一种非类似于Dreamweaver4的浮动布局。第一次运行DreamweaverMX需要选择一种工作区布局。
学生分组讨论，由代表上讲台展示讨论内容
站点上传
学习目标:
掌握站点的测试
掌握站点的上传
学习时间：2学时
一个站点做好后，需要对站点进行测试。
1．打开窗口菜单>结果>链接检查器，或者按“Ctrl+Shift+F9”快捷键，打开
2．点击无效链接，点最右边黄色的文件夹图标，选择正确的文件。
3．在站点报告测试。
C盘下会出现一个新建文件夹图标
输入你想要的站点名称，这里输入SGJ,其实可以任意输入名称的，要注意的是，尽量不要用中文命名，以免出现意想不到的麻烦。
现在开始在DreamweaverMX中把SGJ这个文件夹定义为站点。打开Dreamweaver，在菜单栏上，点击站点菜单，选择新建站点。
接下来需要给站点起一个名字，可以起任意一个名字。
应该有人发现了，DreamweaverMX默认扩展名是.htm，修改DreamweaverMX的一个配置文件，就可以把默认扩展名从.htm改到.html。
以windows2000操作系统，DreamweaverMX默认安装路径为例，找到
文件名（）这个文件，此文件位于：C:\ProgramFiles\Macromedia\DreamweaverMX\Configuration\DocumentTypes文件夹下。
不要选中“调整到网页安全色”，如果选中这一项，会减少可选择的颜色数。
有时候
总而言之将所用的文件都放在定义站点的文件夹
学生分组讨论，由代表上讲台展示讨论内容
网页的布局和规划
学习目标:
了解如何对网页进行整体布局
了解网页版式的一般规划
掌握使用表格布局
学习时间：2学时
现在有好几种尺寸的显示器，网页要在每个显示器上显示正常，就要设置恰当的参数，常用的是在页面中插入表格放内容，采用象素和百分比两种。
选择DreamweaverMX工作区
两种布局的喜好因人而异，如果，可以使用“参数选择”对话框切换。
选择更改工作区
使用DreamweaverMX工作区，默认的界面中，工作区很小，如果要把工作区变大，选择三角形按钮，就可以隐藏面板组和属性面板。
最下面的表格，一行一列，放版权声明，联系方式。
导航栏在网页的设计中，直接关系到使用网页的方便，和整个网页的美观也有很大关系。
网页（Web Page）和主页（Home Page）是两个不同的概念，每一个HTML文件都是一个网页，而主页指的是一个网站所有网页中的首页，不过平常一般也没有必要严格区分它们，但这里要指定的Home Page就是整个网站的首页，通常首页都命名为、、或之一，并且这个名字不能随便起，必须根据远程服务器的要求来定，而网页就没有此规定。
双击，在DreamweaverMX中打开
把第三行的html移动到"htm,html,shtml,shtm,stm,lasso,xhtml"这部分最前面的位置，就是改成"html,htm,shtml,shtm,stm,lasso,xhtml"。然后保存文件。重新打开DreamweaverMX，新建一个文件，默认扩展名变成.html了，其它扩展名修改方法类似。
参与编写“学习领域”计算机网络技术系列校本教材的教师有夏国亭、林春生、刘志毅、刘俊燕、崔志华、施琛、罗清波、卜强和华康老师。计算机网络技术系列校本教材是本着改革创新的精神组织编写的，作为“学习领域”校本教材，适用于“行为引导型”教学法，符合循序渐进的要求，从打好基础入手，突出操作技能训练的特点，着力培养学生多种能力。作为系列化校本教材，各教材的“工作页结构”得到了“学习领域”王生专家的指点，在此表示衷心感谢。
学习时间：2学时
双击SGJ站点中的，打开一个空白的页面。我们将从这个空白页面开始制作，了解页面属性的设置和作用。在工作区点鼠标右键，选择页面属性。
打开页面属性对话框
下面是设置的一个页面属性
在标题上输入5dmedia，在背景，文本，链接，访问过的链接，活动链接几部分选取颜色。设置左边界，顶部边界，边界宽度，边界高度都为0，可以使页面中的表格与背景没有空隙。
按下一步
按完成按钮，一个站点就定义好了。
站点定义好之后，就要开始新建网页文件和文件夹了，在站点中点击右键，选择新建文件。
给新建的文件输入名称
新建文件夹与新建文件类似，就不重复了。在文件命名和站点结构方面，养成良好的习惯很重要。
注：网站首页默认的文件名，取决于你申请的主页空间，一般是,,等。同类型的文件，最好放在一个文件夹中，例如把图片文件，都放在image文件夹中。不要把所有文件都放在根目录下，把一个栏目的所有文件放在一个文件夹中，在链接网页和维护时，会很方便。文件和文件夹的命名，可以用栏目名称的拼音，也可以用栏目名称的英文，团队开发时，有统一的命名规则相当重要。例如jianli、bbs作文件夹名称。
“计算机网络技术”系列校本教材
Dreamweaver进阶与实例
施 琛 编著
苏州技师学院 信息工程系
前言
当前，计算机网络技术迅速发展，国民经济各部门对计算机网络技术的应用日益广泛，对计算机网络技术人员的需求越来越迫切。为了培养计算机网络技术人员的需要，不断提高教学质量，在苏州市劳动与社会保障局领导和苏州技师学院领导的支持下，苏州技师学院信息工程系的专业教师编写了此“计算机网络技术”系列校本教材。这次编写的计算机网络技术系列校本教材包括投影片制作POWERPOINT、VB程序设计、动画设计FLASH、常用工具软件、C语言程序设计、图形图像处理PHOTOSHOP、网站建设DREAMWEAVER、数据库操作ACCESS和局域网安装与维护技能。
4.选择报告的内容。运行报告。
5.检查浏览器的兼容性。
一个站点经过测试，修改所有错误之后，就可以上传了。
1．点击“站点菜单”，点击“新建站点”，在高级面板中。设置远程信息。
访问：FTP。
FTP主机：FTP地址。
主机目录：如果没有特别规定，为空。
登陆：你的用户名。
密码：密码。
2.点“防火墙设置”按钮，在参数选择窗口，防火墙主机里输入FTP地址，防火墙端口中输入端口值，常见的是21，这要看空间服务商的规定。
学生分组讨论，由代表上讲台展示讨论内容
表格的设置
学习目标:
了解表格的作用
掌握表格的功能
掌握表格的具体使用方法
学习时间：4学时
Dreamweaver的表格具有十分重要的作用，在前面已经粗略的介绍过了，本单元的主要内容是表格的使用。
如果要使用面板组，再点击三角形按钮。
Macromedia
Dreamweaver
学生分组讨论，由代表上讲台展示讨论内容
站点的建立
学习目标:
了解网页制作的流程
掌握使用Dreamweaver建立站点
掌握站点文件的创建
学习时间：2学时
DreamweaverMX中文版的出现，使制作一个功能强大的网站，变得很容易，可以轻易的做出以前被认为很复杂的ASP，PHP网站。通过建站实例，一步一步的带大家掌握网页制作技术。做网站制作中，首先要了解的就是制作流程了。
3.点击“测试”按钮，完成测试。
站点完成之后，如果要想让更多的人看到就需要上传至网页空间，将网页及程序存放在服务商提供的服务器上，而且一台服务器上要存放多个用户的站点内容。服务商会采用一种方式，将服务器的硬盘存贮空间划分为许多块，每一块分给一个用户使用。用户只能将自己的网页文件和程序放在自己的那一块中，但不能查看或处理属于别人的块。这些划分的存贮块就叫做网页空间（或WEB空间）。
设计精美的网站，都是采用了优秀的版式设计。做一个网页，先要规划好版式。这里主要介绍制作网页时的版式设计。几种常用的版式（分栏结构），LOGO（标志）尺寸，Banner（横幅）尺寸，导航栏类型，导航菜单位置，网页内容，版权声明。
以上是一个主页的简单结构，由三个表格组成。第一个表格，二行一列，第一行放LOGO和Banner,第二行放导航菜单。
一个可以在各种显示器上全屏幕显示的网页就搭建好了。以后要做的是在表格里填充内容。
下面介绍象素大小的表格设置，选择像素为单位，值为768。可以在15英寸显示器上全屏幕显示，在17英寸显示器上也有好的显示效果。相对使用百分比制作网页，采用像素比较简单。
做一个在800×600分辨率下满屏幕显示的页面，可以大致选择一个近似的值：“宽768高430”，“宽776高430”等。用像素为单位的表格，大多是把表格设置为居中对齐。选中表格，在属性面板选择对齐方式为居中对齐。
如果不设置设置左边界，顶部边界，边界宽度，边界高度，就会与顶部和左边有明显的空隙
用得比较多的还有背景图像，选择一个已经做好的图像，就可以设置成页面的背景图像。
网页设计中，颜色是最关键的，决定了一个网站在美工方面是否成功。现在流行的网页设计配色，采用黑、白、灰这些无彩色作基调，采用一种精确的有彩色作为主色调，大多使用一种颜色的渐变，让人感觉只有一种有彩色。在下面，主要针对相近颜色，无彩色和有彩色的精确选取三部分。
创建站点是第一步很重要，创建之后，
总而言之将所用的文件都放在定义站点的文件夹内就没有问题的，如果你定义好了站点，一旦出现站点外的文件，
学生分组讨论，由代表上讲台展示讨论内容
页面设置
学习目标:
了解整个网页的设置的一般步骤
掌握使用Dreamweaver对网页的页面进行设置
掌握网页的颜色选取的方法和依据
这里起名为SGJ,按下一步
按下一步按钮，选择是否使用服务器技术。因为实例建立的是一个静态站点，就选择“否，我不想使用服务器技术”。
按下一步按钮，因为要传到网上的虚拟主页空间，就要选择“编辑我的计算机上的本地副本，完成后再传到服务器上”。
接着，选择要定义的本地根文件夹
这里选择SGJ文件夹
点“选择”按钮，因为没有使用远程服务器，就选择“无”。
下面将以调整页面属性的颜色为实例，选择颜色选取框，
打开颜色选取面板
◇精确选取有彩色：
如果要精确选取各种颜色，特别是各种有彩色，就要使用“系统颜色拾取器”
单击“系统颜色拾取器”，打开颜色面板
拖动最右边的滑块，调整高度。
◇选择连续色调，在网页设计时，常使用相近的颜色。点三角形按钮，选“连续色调”
◇无彩色的选取：选择“灰度级”，可以选取从白到黑各种无彩色。
新建站点→站点文件命名→定义页面属性→插入表格→定义页面大小→转换到布局视图→添加内容→插入导航条→转换到标准视图工作→添加链接→使用代码片断→定义及应用CSS→添加动态交互→链接站点各个页面。
以上是一个静态网站建设流程和需要掌握的技术。在后面的几篇文章中，将通过建立一个网站实例，具体介绍这些内容。
采用象素为单位，是以使用最多的显示器的分辨率为参照的；使用百分比，可以在各种显示器上有相同的效果，宽度设置为100％时，在各种显示器上全屏显示。下面分别介绍这两种方法。
简明步骤：打开一个页面→插入表格→设置表格宽度。
在以前建立的SGJ站点中，新建文件，双击打开。
点击插入表格图标
打开“插入表格”对话框，设置行数为1，列数为1，宽度选百分比，值为100，边框为0