DW网页制作教程案例.docx
- 文档编号:3800247
- 上传时间:2022-11-25
- 格式:DOCX
- 页数:42
- 大小:620.75KB
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 |