网页制作与网站设计教学课件 网页制作与网站设计课程组开发

Presentation on theme: "网页制作与网站设计教学课件 网页制作与网站设计课程组开发"— Presentation transcript:

1 网页制作与网站设计教学课件 网页制作与网站设计课程组开发
淮安信息职业技术学院

2 情境2：书法家庄辉个人网站建设 任务6：书法家庄辉个人网站后期网页编辑 1. 任务解析与项目目标 2. 核心技能与概念 3. 任务计划与决策
4. 任务实施 5. 项目检查与评估 6. 项目开发策略与技巧 网页制作与网站设计教程

3 1任务解析与项目目标 任务解析与项目目标 效果图制作完成后将会导出成网页格式，同时也可以制作swf动画或者Gif动画，最重这些素材将通过Dreamweaver软件进行整合形成最终的网页网站。

4 2. 核心技能与概念 核心技能1：Dreamweaver插入Flash元素 执行“插入”→“媒体”→“Flash”命令

5 2）在网页中插入一行一列的表格，设置表格的宽高、填充、间距、边框、背景颜色等。参数如图6-19所示，设置后的效果如图6-20所示。
2. 核心技能与概念 核心技能1：Dreamweaver插入Flash元素 插入透明Flash动画 1）启动Dreamweaver软件，创建一个空网页并与“flash”文件夹保存在同一目录中命名为“transparentflash.html”，设置页面属性设置标题为“透明动画测试”，设置“页面背景”上下左右边距为0。 2）在网页中插入一行一列的表格，设置表格的宽高、填充、间距、边框、背景颜色等。参数如图6-19所示，设置后的效果如图6-20所示。

6 2. 核心技能与概念 核心技能1：Dreamweaver插入Flash元素 插入透明Flash动画 3）将光标置于表格中，然后执行“插入”→“媒体”→“Flash”命令，在弹出的“选择文件”对话框中选择flash文件夹中的“banner.swf”（第五章5.2.1节中制作的动画如图5-12）动画。

7 2. 核心技能与概念 核心技能1：Dreamweaver插入Flash元素 插入透明Flash动画 4）选择动画在“属性”面板中点击“参数”按钮，设置“参数”选项为wmode，值为transparent，具体如图6-21所示。

8 2. 项目资讯 关键知识点六：Dreamweaver插入Flash元素 插入透明Flash动画 5）执行“文件”→“在浏览器中预览”→“iexplore”命令（快捷键<F12>）预览网页如图6-18所示（本例与上例效果相同）。 如果在第3步中，选中“bird.swf”文件的话，效果如图6-22所示。

9 2. 核心技能与概念 核心技能2：Dreamweaver插入特殊字符 “插入”→“HTML”→“特殊字符”→“其他字符”命令

10 3. 项目计划与决策 书法家庄辉个人介绍页面主要是在书法家庄辉个人网站效果图切片后导出的图片的基础上实现新的网页编辑。遵循最初网站设计的思路，适当的做出调整。本页面的表格结构如图所示： 网站logo.jpg 大小996像素×65像素 Banner动画 大小996像素×185像素 网站导航 个人照片 个人文字介绍 版权信息（文字白色）（背景褐色）高100 px

11 4. 任务实施 1）新建一个文件夹，命名为“庄辉个人简介网页”，然后打开文件夹，分别创建“flash”（存放动画）、“images”（存放网页基本文件）、“pic”（存放作者的书法作品）3个文件夹。然后将素材文件夹中的所需的素材分类存放到各自文件夹中。 2）启动Dreamweaver软件，执行 “文件”→“新建”命令或按快捷键<Ctrl+N>，弹出“新建文档”对话框。从“类别”列表中选择“基本页”，然后从右侧的列表中选择“HTML”再单击“创建”按钮创建一个新的HTML网页，执行“文件”→“另存为”命令，保存网页到“庄辉个人简介网页”文件夹中，命名为“grjj.html”。 3) 按<Ctl+J>组合键调出“页面属性”对话框，设置“外观”分类为：字体大小12pixels，文本颜色FFFFFF，背景颜色6d4418，上、下、左、右边距都为0pixels。

12 4. 任务实施 4）设置“页面属性”对话框中的“链接”分类，参数为：字体大小12pixels，链接颜色#FFFFFF，变换图像链接时的颜色为浅黄色（#FFCC00），下划线样式设置为：仅在变换图像时显示下划线，详细如图6-8所示。同时设置“标题”分类，网页的标题为：庄辉个人简介页面，编码为简体中文GB2312。 5）执行“插入”→“表格”命令，在弹出的“表格”对话框中，设置行数为4，列数为2，宽为996像素，边框粗细：0像素，单元格边距0像素，单元格间距1像素，详细的参数也可以通过表格的参数设置来完成，表格的背景色为#edd15e，设置完成后选中所有单元格设置单元格的背景色为6D4418（网页的背景色。

13 4. 任务实施 6）使用鼠标选中第1行的两个单元格，然后执行“修改”→“表格”→“合并单元格”命令（也可以点击属性栏中的“合并单元格”按钮），将其合并，同样的方法合并第2行，第4行，合并后效果如图所示。 7）使用鼠标选择第1行的单元格，然后设置单元格高为：65像素，选择“插入”工具栏中的“常用”分类，然后点击“图像”按钮，插入“images”文件夹中的“logo.gif”图片。如图所示。

14 4. 任务实施 8）使用鼠标选择第2行的单元格，然后设置单元格高为：185像素，选择“插入”工具栏中的“常用”分类，然后点击“媒体：flash”按钮，插入“flash”文件夹中的“banner4.swf”动画。如上图所示。点击“属性”栏中的“播放”按钮，效果如下图所示。

15 4. 任务实施 9）设置第3行的左侧单元格宽为160像素，右侧单元格为833像素（ =996像素，总宽度等于水平显示的各个元素宽之和，要保证网页界面精细就要减少误差），同时设置两个单元格的垂直对齐方式为：顶端，然后在左侧单元格中插入一个宽120像素，11行，2列，居中对齐，填充、间距、边框都为0像素的表格，详细参数如6-30所示。

16 4. 任务实施 10）选中插入的22个单元格，点击“居中对齐”按钮设置单元格为居中对齐，然后选择左侧11个单元格，设置宽为30像素，选中右侧的11个单元格，设置宽为90像素。最后分别给左侧从第2行开始的10个单元格中插入“dot.jpg”图片，分别在右侧的第2行开始的10个单元格中插入“网站首页”、“个人简介”、“书法作品”、“国画作品”、“楷书作品”、“篆书作品”等文本。插入后效果如图6-31所示。

17 4. 任务实施 11）在右侧的表格中插入1个表格6行，2列，宽为95%，居中对齐。然后合并第1、2、3行的表格，设置第2行高为30像素，在第2行中嵌套1个表格1行3列，居中对齐，填充、间距、边框都为0像素，3列宽度分别为1%，3%，96%，第1列的背景颜色为#FF3300，在第3列中输入“个人介绍”（颜色为：#FFFF00），效果如图所示。 12）鼠标选中第3行，然后设置背景色为#FFFF00，插入“images”文件夹中的“space.gif”图片，最后设置行高为1像素，可以得到一条高为1像素的红线，如图所示。

18 4. 任务实施 13）鼠标选中第4行的2个单元格，设置两个单元格的垂直对齐方式为：顶端，然后修改左侧的单元格宽为360像素，插入“grjj.jpg”图片插入到左侧单元格中，打开“素材”文件夹中的“庄辉介绍.txt”文件，将其中的内容复制到第4行右侧的单元格中，对文本进行段落调整，如果觉得文本过于密集，可以利用<Shift+Enter>键进行调整。 14）鼠标选中最后1行，然后设置单元格属性为高100像素，水平居中对齐，最后在表格中输入“版权所有：淮安书画院书法家庄辉”、“建议分辨率：800×600以上分辨率 IE4.0以上版本浏览器”、“联系人:庄辉 电话: ”等文本，最后通过整体调整，按键盘上的<F12>键进行预览，如图6-34所示。

19 4. 任务实施 15）同样的方式制作“书法作品”的网页sfzp.html，然后分别给两个页面的导航栏设置超级链接，个人简介链接grjj.html，书法作品链接sfzp.html。如图所示。

20 5.项目检查与评估 学习目标 评价项目 掌握Dreamweaver的基础知识 能理解静态网页、动态网页、本地站点、远程站点的概念
能认识认识Dreamweaver CS3的工作界面以及Dreamweaver CS3各个面板的功能 掌握Dreamweaver的页面属性的设置 能使设置常规、链接、标题的页面属性设置 掌握Dreamweaver插入文本、图像、表格、超级链接的方法与技巧 能熟练使用Dreamweaver插入文本并设置属性 能熟练使用Dreamweaver插入图像并设置属性 能熟练使用Dreamweaver插入表格并设置属性 能熟练使用Dreamweaver插入超级链接并设置属性 掌握Dreamweaver插入flash动画 能插入flash动画，以及设置透明的flash动画 掌握制作简单的网页能制作简单的网页

21 6. 策略与技巧 ：制作完整的站点 采用同样的方式制作其他的网页，如主页、草书作品、行草作品等 。

22 图 6-43 鼠标经过图像（服务指南模块）的导航效果
6. 策略与技巧 ：滑过图像的翻转效果 图 原始状态下（服务指南模块）的导航效果 图 鼠标经过图像（服务指南模块）的导航效果

23 谢谢大家