第一章 使用Dreamweaver制作简单页面

《第一章 使用Dreamweaver制作简单页面》由会员分享，可在线阅读，更多相关《第一章 使用Dreamweaver制作简单页面（34页珍藏版）》请在装配图网上搜索。

1、BENET3.0BENET3.0BENET3.0第一学期课程第一学期课程第一学期课程组建与维护企业网站组建与维护企业网站组建与维护企业网站组建与维护企业网站课程目标课程目标课程目标课程目标使用表格或层布局网页使用表格或层布局网页使用表格或层布局网页使用表格或层布局网页使用使用使用使用DIVDIVCSSCSS布局网页并制作出精美页面布局网页并制作出精美页面布局网页并制作出精美页面布局网页并制作出精美页面会创建数据库、数据表、管理数据库和表会创建数据库、数据表、管理数据库和表会创建数据库、数据表、管理数据库和表会创建数据库、数据表、管理数据库和表使用使用使用使用SQLSQL语句对数据库进行增、删、

2、改、查操作语句对数据库进行增、删、改、查操作语句对数据库进行增、删、改、查操作语句对数据库进行增、删、改、查操作搭建动态网站运行环境搭建动态网站运行环境搭建动态网站运行环境搭建动态网站运行环境维护动态网站维护动态网站维护动态网站维护动态网站2 2课程结构课程结构课程结构课程结构精美网页的制作精美网页的制作数据库管理数据库管理维护动态网站维护动态网站1.1.使用使用DWDW创建站点和管理创建站点和管理网站，掌握基础的制作网站，掌握基础的制作网页技术，包括新建页网页技术，包括新建页面、在网页中使用表格、面、在网页中使用表格、层、文本格式化等，页层、文本格式化等，页面元素和面元素和HTMLHTML标

3、记之间标记之间的关系的关系2.2.使用表格和层布局网页使用表格和层布局网页3.3.创建网站虚拟目录创建网站虚拟目录4.4.使用使用DIVDIVCSSCSS布局企业布局企业网站，使用网站，使用CSSCSS精确定位精确定位DIVDIV和美化网页元素和美化网页元素1.1.使用使用SMSSSMSS创建与维创建与维护数据库护数据库2.2.使用使用SMSSSMSS创建数据创建数据库表库表3.3.使用使用SQLSQL语句向对数语句向对数据库表进行查询、据库表进行查询、修改、删除、增加修改、删除、增加等操作等操作4.4.维护数据库维护数据库1.1.搭建动态网站的运行环搭建动态网站的运行环境，修改数据库连接，境

4、，修改数据库连接，使网站能够运行起来使网站能够运行起来2.2.根据企业需求修改动态根据企业需求修改动态页面的控件属性或修改页面的控件属性或修改页面的网页元素使网页页面的网页元素使网页看起来更美观、漂亮看起来更美观、漂亮3.3.使用使用FTPFTP上传工具把修改上传工具把修改后的页面上传到远程服后的页面上传到远程服务器目录，保证网站正务器目录，保证网站正常运行常运行第第1 14 4章章第第5 56 6章章第第7 79 9章章3 3BENET3.0BENET3.0BENET3.0第一学期课程第一学期课程第一学期课程第一章第一章第一章第一章 使用使用使用使用DreamweaverDreamweave

5、r制作简单页面制作简单页面制作简单页面制作简单页面 理论部分理论部分技能展示技能展示技能展示技能展示会使用会使用会使用会使用DreamweaverDreamweaver创建本地站点创建本地站点创建本地站点创建本地站点会使用会使用会使用会使用DreamweaverDreamweaver新建和保存页面新建和保存页面新建和保存页面新建和保存页面会使用会使用会使用会使用DreamweaverDreamweaver添加页面元素添加页面元素添加页面元素添加页面元素会使用会使用会使用会使用DreamweaverDreamweaver修改页面元素属性修改页面元素属性修改页面元素属性修改页面元素属性了解网页标记

6、与页面元素之间的关素了解网页标记与页面元素之间的关素了解网页标记与页面元素之间的关素了解网页标记与页面元素之间的关素5 5本章结构本章结构本章结构本章结构认识开发环境和认识开发环境和创建本地站点创建本地站点编辑页面编辑页面开发环境和工具的介绍开发环境和工具的介绍页面属性的设置页面属性的设置创建本地站点创建本地站点文本格式化和段落文本格式化和段落使用使用Dreamweaver创建网页创建网页站点目录结构站点目录结构使用使用Dreamweaver制作简单网页制作简单网页制作页面制作页面网页的元素和组成网页的元素和组成插入表格和图像插入表格和图像6 6为什么需要制作网页为什么需要制作网页为什么需要制

7、作网页为什么需要制作网页经营网上商店网上办公7 7开发环境和开发工具介绍开发环境和开发工具介绍开发环境和开发工具介绍开发环境和开发工具介绍DreamweaverDreamweaver CS3 CS3菜单栏菜单栏插入栏插入栏文档工具栏文档工具栏面板组面板组属性检查器属性检查器文档窗口文档窗口8 8创建本地站点创建本地站点创建本地站点创建本地站点选择选择选择选择“基本基本基本基本”选项，按推荐步骤创建站点选项，按推荐步骤创建站点选项，按推荐步骤创建站点选项，按推荐步骤创建站点在站点中创建文件夹在站点中创建文件夹在站点中创建文件夹在站点中创建文件夹在站点中创建文件在站点中创建文件在站点中创建文件在站

8、点中创建文件 选择选择选择选择“高级高级高级高级”选项，创建本地站点选项，创建本地站点选项，创建本地站点选项，创建本地站点9 9使用使用使用使用DreamweaverDreamweaver制作淘宝网新闻页面制作淘宝网新闻页面制作淘宝网新闻页面制作淘宝网新闻页面淘宝网新闻页面分析淘宝网新闻页面分析淘宝网新闻页面分析淘宝网新闻页面分析创建网页创建网页创建网页创建网页分析网页元素和组成分析网页元素和组成分析网页元素和组成分析网页元素和组成插入表格插入表格插入表格插入表格插入图像插入图像插入图像插入图像页面属性设置页面属性设置页面属性设置页面属性设置1010使用使用使用使用DreamweaverDre

9、amweaver创建网页创建网页创建网页创建网页创建淘宝网新闻页面创建淘宝网新闻页面创建淘宝网新闻页面创建淘宝网新闻页面创建页面的方法创建页面的方法创建页面的方法创建页面的方法方法一：选择菜单方法一：选择菜单方法一：选择菜单方法一：选择菜单“文件文件文件文件”“”“”“”“新建新建新建新建”的方式的方式的方式的方式方法二：在方法二：在“文件文件”面板中右击面板中右击的方式的方式1111网页元素和组成网页元素和组成网页元素和组成网页元素和组成DOCTYPEDOCTYPEDOCTYPEDOCTYPE声明声明声明声明!DOCTYPE html PUBLIC-/W3C/DTD XHTML transi

10、tional.dtd网页字符编码、文档特性描述网页字符编码、文档特性描述网页字符编码、文档特性描述网页字符编码、文档特性描述meta http-equiv=Content-Type=utf-8/html、head、title、body文档内容在文档内容在htmlhtml标记中标记中headhead标头区放标头区放link、title、meta、style等标记等标记标题在标题在title标记中标记中网页中显示的内容在网页中显示的内容在bodybody标记中标记中1212插入表格插入表格插入表格插入表格在淘宝网新闻页面中插入表格在淘宝网新闻页面中插入表格在淘宝网新闻页面中插入表格在淘宝网新闻页面

11、中插入表格在网页中插入表格的方法在网页中插入表格的方法在网页中插入表格的方法在网页中插入表格的方法方法一：选择菜单方法一：选择菜单方法一：选择菜单方法一：选择菜单“插入记录插入记录插入记录插入记录”“”“”“”“表格表格表格表格”方法二：单击插入栏方法二：单击插入栏方法二：单击插入栏方法二：单击插入栏“常用常用常用常用”类别中类别中类别中类别中“表格表格表格表格”按钮按钮按钮按钮1313插入图像插入图像插入图像插入图像在淘宝网新闻页面中插入图像在淘宝网新闻页面中插入图像在淘宝网新闻页面中插入图像在淘宝网新闻页面中插入图像在网页中插入图像的方法在网页中插入图像的方法在网页中插入图像的方法在网页中

12、插入图像的方法方法一：选择菜单方法一：选择菜单方法一：选择菜单方法一：选择菜单“插入记录插入记录插入记录插入记录”“”“”“”“图像图像图像图像”方法二：单击插入栏方法二：单击插入栏方法二：单击插入栏方法二：单击插入栏“常用常用常用常用”类别中类别中类别中类别中“图像图像图像图像”按钮按钮按钮按钮设置图像属性设置图像属性图像宽和高图像宽和高图像对齐方式图像对齐方式1414插入水平线插入水平线插入水平线插入水平线在淘宝网新闻页面中插入水平线在淘宝网新闻页面中插入水平线在淘宝网新闻页面中插入水平线在淘宝网新闻页面中插入水平线插入水平线的方法插入水平线的方法插入水平线的方法插入水平线的方法选择菜单选

13、择菜单选择菜单选择菜单“插入记录插入记录插入记录插入记录”“HTML”“”“HTML”“”“HTML”“”“HTML”“水平线水平线水平线水平线”水平线的高水平线的高对齐方式对齐方式1515body,td,th font-size:12px;body margin-left:0px;margin-top:0px;h1 font-size:16px;color:#FF0000;页面属性的设置页面属性的设置页面属性的设置页面属性的设置如何设置页面字体、颜色大小等如何设置页面字体、颜色大小等如何设置页面字体、颜色大小等如何设置页面字体、颜色大小等设置页面的边距、字体、大小设置页面的边距、字体、大小设

14、置页面的边距、字体、大小设置页面的边距、字体、大小设置标题的字体大小、样式设置标题的字体大小、样式设置标题的字体大小、样式设置标题的字体大小、样式编辑新闻主要内容编辑新闻主要内容1616淘宝网新闻页面完成效果淘宝网新闻页面完成效果淘宝网新闻页面完成效果淘宝网新闻页面完成效果1717小结小结小结小结请思考：请思考：请思考：请思考：如何向页面中插入一个图像？如何向页面中插入一个图像？如何向页面中插入一个图像？如何向页面中插入一个图像？如何新建一个空白页面？如何新建一个空白页面？如何新建一个空白页面？如何新建一个空白页面？一个一个一个一个HTMLHTML页面有哪几部分组成，分别是什么？页面有哪几部分

15、组成，分别是什么？页面有哪几部分组成，分别是什么？页面有哪几部分组成，分别是什么？如何设置页面字体大小？如何设置页面字体大小？如何设置页面字体大小？如何设置页面字体大小？1818使用使用使用使用DreamweaverDreamweaver编辑淘宝网购物页面编辑淘宝网购物页面编辑淘宝网购物页面编辑淘宝网购物页面淘宝网购物页面完成内容淘宝网购物页面完成内容淘宝网购物页面完成内容淘宝网购物页面完成内容标题的设置标题的设置标题的设置标题的设置插入商品图像插入商品图像插入商品图像插入商品图像商品出售情况商品出售情况商品出售情况商品出售情况编辑商品评价编辑商品评价编辑商品评价编辑商品评价承诺和买家必读承诺

16、和买家必读承诺和买家必读承诺和买家必读淘宝网购物页面分析淘宝网购物页面分析淘宝网购物页面分析淘宝网购物页面分析插入图像和文本插入图像和文本插入图像和文本插入图像和文本文本格式化文本格式化文本格式化文本格式化设置段落设置段落设置段落设置段落1919编辑淘宝网购物页面编辑淘宝网购物页面编辑淘宝网购物页面编辑淘宝网购物页面文本格式化文本格式化文本格式化文本格式化字体大小字体大小文本对齐方式文本对齐方式字体加粗和斜体设置字体加粗和斜体设置文本在单元格中对齐方式文本在单元格中对齐方式设置字体颜色设置字体颜色2020制作商品详情制作商品详情制作商品详情制作商品详情编辑商品标题编辑商品标题编辑商品标题编辑商

17、品标题插入商品图像插入商品图像插入商品图像插入商品图像输入商品信息输入商品信息输入商品信息输入商品信息输入宝贝详情输入宝贝详情输入宝贝详情输入宝贝详情设置字体大小及字体颜色设置字体大小及字体颜色设置字体大小及字体颜色设置字体大小及字体颜色2121段落段落段落段落换行方式换行方式换行方式换行方式选择菜单选择菜单选择菜单选择菜单“插入记录插入记录插入记录插入记录”“”“”“”“HTMLHTMLHTMLHTML”“”“”“”“特殊字符特殊字符特殊字符特殊字符”“”“”“”“换行符换行符换行符换行符”，插入换行符，插入换行符，插入换行符，插入换行符 /按快捷键按快捷键按快捷键按快捷键Shift+Ent

18、erShift+EnterShift+EnterShift+Enter快速输入一个换行符快速输入一个换行符快速输入一个换行符快速输入一个换行符单击按钮单击按钮单击按钮单击按钮 ，插入换行符，插入换行符，插入换行符，插入换行符直接按直接按直接按直接按EnterEnterEnterEnter键，生成键，生成键，生成键，生成和和和和标记换行标记换行标记换行标记换行首行缩进首行缩进首行缩进首行缩进2222制作宝贝详情制作宝贝详情制作宝贝详情制作宝贝详情插入文本插入文本插入文本插入文本设置文本的字体大小、样式和段落设置文本的字体大小、样式和段落设置文本的字体大小、样式和段落设置文本的字体大小、样式和段落

19、插入图像插入图像插入图像插入图像2323本章总结本章总结认识开发环境和认识开发环境和创建本地站点创建本地站点编辑页面编辑页面开发环境和工具的介绍开发环境和工具的介绍页面属性的设置页面属性的设置创建本地站点创建本地站点文本格式化和段落文本格式化和段落使用使用Dreamweaver创建网页创建网页站点目录结构站点目录结构使用使用Dreamweaver制作简单网页制作简单网页制作页面制作页面网页的元素和组成网页的元素和组成插入表格和图像插入表格和图像2424BENET3.0BENET3.0BENET3.0第一学期课程第一学期课程第一学期课程第一章第一章第一章第一章 使用使用使用使用Dreamweav

20、erDreamweaver制作简单页面制作简单页面制作简单页面制作简单页面 上机部分上机部分实验案例实验案例1 1：创建本地站点：创建本地站点v需求描述需求描述使用新建站点中的使用新建站点中的“高级高级”选项创建选项创建paipaipaipai站点站点v实现思路实现思路选择菜单选择菜单“站点站点”“新建站点新建站点”，利用，利用“高级高级”设置设置站点名称为站点名称为paipaipaipai设置图片文件夹名称设置图片文件夹名称imageimage2626实验案例实验案例1 1：创建本地站点：创建本地站点v学员练习学员练习确定站点名称确定站点名称设置本地文件夹路径设置本地文件夹路径1010分钟完

21、成分钟完成2727实验案例实验案例2 2：制作拍拍网新闻页面：制作拍拍网新闻页面v需求描述需求描述在在paipaipaipai站点中创建拍拍网新闻页面站点中创建拍拍网新闻页面网站导航及左侧部分内容用图片代替网站导航及左侧部分内容用图片代替编辑新闻标题及正文内容编辑新闻标题及正文内容2828v实现思路实现思路页面布局，插入一个页面布局，插入一个4行行1列的表格列的表格插入图像和水平线，并在属性检查器中设置其样式插入图像和水平线，并在属性检查器中设置其样式新闻主体部分布局，插入一个新闻主体部分布局，插入一个1行行2列的表格，用来插列的表格，用来插入左边菜单图片和右侧新闻内容入左边菜单图片和右侧新闻

22、内容在页面属性和属性检查器中设置页面的元素在页面属性和属性检查器中设置页面的元素实验案例实验案例2 2：制作拍拍网新闻页：制作拍拍网新闻页面面2929v学员练习学员练习插入表格插入表格插入图像和水平线插入图像和水平线设置字体大小和颜色，以及段落的设置设置字体大小和颜色，以及段落的设置实验案例实验案例2 2：制作拍拍网新闻页：制作拍拍网新闻页面面4040分钟完成分钟完成3030实验案例实验案例实验案例实验案例3 3：编辑拍拍网购物页面：编辑拍拍网购物页面：编辑拍拍网购物页面：编辑拍拍网购物页面需求描述需求描述需求描述需求描述根据素材内容，向页面中插入图像、文本根据素材内容，向页面中插入图像、文本

23、根据素材内容，向页面中插入图像、文本根据素材内容，向页面中插入图像、文本设置文本的字体大小、字体颜色设置文本的字体大小、字体颜色设置文本的字体大小、字体颜色设置文本的字体大小、字体颜色设置文本在单元格中的对齐方式设置文本在单元格中的对齐方式设置文本在单元格中的对齐方式设置文本在单元格中的对齐方式3131实验案例实验案例实验案例实验案例3 3：编辑拍拍网购物页面：编辑拍拍网购物页面：编辑拍拍网购物页面：编辑拍拍网购物页面实现思路实现思路实现思路实现思路制作主体部分，首先使用表格布局，插入一个制作主体部分，首先使用表格布局，插入一个制作主体部分，首先使用表格布局，插入一个制作主体部分，首先使用表格

24、布局，插入一个2 2 2 2行行行行1 1 1 1列列列列的表格的表格的表格的表格插入图片和文字，各个部分再插入表格，然后把图片插入图片和文字，各个部分再插入表格，然后把图片插入图片和文字，各个部分再插入表格，然后把图片插入图片和文字，各个部分再插入表格，然后把图片和文字插入到不同的单元格中和文字插入到不同的单元格中和文字插入到不同的单元格中和文字插入到不同的单元格中3232实验案例实验案例实验案例实验案例3 3：编辑拍拍网购物页面：编辑拍拍网购物页面：编辑拍拍网购物页面：编辑拍拍网购物页面学员练习学员练习学员练习学员练习在标题位置输入文本，在属性检查器中设置文本大小在标题位置输入文本，在属性

25、检查器中设置文本大小在标题位置输入文本，在属性检查器中设置文本大小在标题位置输入文本，在属性检查器中设置文本大小及颜色及颜色及颜色及颜色在图像及立即购买按钮位置插入表格在图像及立即购买按钮位置插入表格在图像及立即购买按钮位置插入表格在图像及立即购买按钮位置插入表格插入商品图像、文本及按钮图像插入商品图像、文本及按钮图像插入商品图像、文本及按钮图像插入商品图像、文本及按钮图像输入商品的详细信息文本输入商品的详细信息文本输入商品的详细信息文本输入商品的详细信息文本在属性检查器中设置文本的字体大小、颜色以及段落在属性检查器中设置文本的字体大小、颜色以及段落在属性检查器中设置文本的字体大小、颜色以及段落在属性检查器中设置文本的字体大小、颜色以及段落设置设置设置设置4040分钟完成分钟完成33333434