《（中职）多媒体应用技术任务8.2网站首页的制作教学课件（）.pptx》由会员分享，可在线阅读，更多相关《（中职）多媒体应用技术任务8.2网站首页的制作教学课件（）.pptx（18页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、（中职）多媒体应用技术任务8.2 网站首页的制作教学课件（工信版）任务任务8.2 网站首页的制作网站首页的制作【任务描述】【任务目标】【任务分析】郭迪创建好站点并新建好主页后，接下来就是该制作首页了，郭迪该如何制郭迪创建好站点并新建好主页后，接下来就是该制作首页了，郭迪该如何制作好一个美观又能体现郭迪个性的首页呢？作好一个美观又能体现郭迪个性的首页呢？根据郭迪事先设计好的信息内容和郭迪的个性色彩，郭迪采用了根据郭迪事先设计好的信息内容和郭迪的个性色彩，郭迪采用了T型的布局结型的布局结构，橙色为主色调的首页设计，作为初学者，郭迪采用表格的形式进行布局，采用构，橙色为主色调的首页设计，作为初学者，
2、郭迪采用表格的形式进行布局，采用css进行格式定义。进行格式定义。1.会根据信息等设计布局结构。会根据信息等设计布局结构。2.会根据布局结构插入适合的表格。会根据布局结构插入适合的表格。3.能在单元格中插入文字、图片等。能在单元格中插入文字、图片等。4.会使用会使用css定义格式。定义格式。5.会将定义好的格式应用到对象上。会将定义好的格式应用到对象上。任务任务8.2 网站首页的制作网站首页的制作【任务实施】1.郭迪根据事先设计好的信息内容，采用郭迪根据事先设计好的信息内容，采用T型布局结构，设计出大致的网页布局如图型布局结构，设计出大致的网页布局如图8-2-1所示。所示。图图8-2-1 网页
3、布局网页布局任务任务8.2 网站首页的制作网站首页的制作【任务实施】2.由于设计的主色调为橙色，可以先设置网页整体页面颜色为橙色，页面边距为由于设计的主色调为橙色，可以先设置网页整体页面颜色为橙色，页面边距为0。即点击属性面板即点击属性面板“页面属性页面属性”按钮，在弹出的按钮，在弹出的“页面属性页面属性”对话框中设置背景颜色设为对话框中设置背景颜色设为#ffd101，上下左右边距均为，上下左右边距均为0，点击，点击“确定确定”按钮。如图按钮。如图8-2-2所示。所示。图图8-2-2 设置页面属性设置页面属性任务任务8.2 网站首页的制作网站首页的制作【任务实施】3.根据页面布局图，插入一个根
4、据页面布局图，插入一个3行行1列，宽列，宽1024px，“边框粗细边框粗细”、“单元格边距单元格边距”和和“单元格间距单元格间距”均为均为0的表格，并设置表格为水平居中对齐。即选择的表格，并设置表格为水平居中对齐。即选择“插入插入”|“表表格格”，在弹出的，在弹出的“表格表格”对话框中，输入对话框中，输入“行数行数”为为3，“列数列数”为为1，“表格宽度表格宽度”为为1024像素，像素，“边框粗细边框粗细”为为0，“单元格边距单元格边距”为为0,“单元格间距单元格间距”为为0，点击，点击“确定确定”按按钮。在表格选中状态下，在钮。在表格选中状态下，在“属性面板属性面板”中选择中选择“对齐对齐”
5、为为“居中对齐居中对齐”。如图。如图8-2-3所所示。示。图图8-2-3 插入表格，设置表格居中对齐插入表格，设置表格居中对齐任务任务8.2 网站首页的制作网站首页的制作【任务实施】4.插入插入banner图。即插入点移至第图。即插入点移至第1行单元格内，选择行单元格内，选择“插入插入”|“图像图像”，在弹出，在弹出的的“选择图像源文件选择图像源文件”对话框中，选择站点文件下对话框中，选择站点文件下“image”文件夹下的文件夹下的banner01图像图像（该图像可由（该图像可由Photoshop编辑），点击编辑），点击“确定确定”。如图。如图8-2-4所示。所示。图图8-2-4 在第一行单元
6、格内插入图片在第一行单元格内插入图片任务任务8.2 网站首页的制作网站首页的制作【任务实施】5.根据布局图，第二行单元格需要拆分为根据布局图，第二行单元格需要拆分为2列，左边一列设置宽度为列，左边一列设置宽度为240px。即将插。即将插入点插到第二行单元格，在属性面板中选择拆分按钮，在弹出的入点插到第二行单元格，在属性面板中选择拆分按钮，在弹出的“拆分单元格拆分单元格”对话框对话框中，选择中，选择“列列”为为2，点击确定。选择拆出的左边一列单元格，在属性面板中设置其宽度，点击确定。选择拆出的左边一列单元格，在属性面板中设置其宽度为为240px。如图。如图8-2-5所示。所示。图图8-2-5 拆
7、分单元格拆分单元格 设置单元格宽度设置单元格宽度任务任务8.2 网站首页的制作网站首页的制作【任务实施】6.根据锁定项目，即首页、自我介绍、我的照片、我的简历、联系我共根据锁定项目，即首页、自我介绍、我的照片、我的简历、联系我共5个主菜单内个主菜单内容，确定需要在第二行左边宽度为容，确定需要在第二行左边宽度为240像素的单元格中插入像素的单元格中插入5行行1列，宽度为列，宽度为100%，其他，其他均为均为0的表格。并在各个单元格中输入相应的文字。如图的表格。并在各个单元格中输入相应的文字。如图8-2-6所示。所示。图图8-2-6 在单元格中插入表格并输入文字在单元格中插入表格并输入文字任务任务
8、8.2 网站首页的制作网站首页的制作【任务实施】7.使用使用css设置文字格式及文字所在单元格格式。即打开浮动面板中设置文字格式及文字所在单元格格式。即打开浮动面板中CSS样式，点击样式，点击“新建新建CSS规则规则”按钮，在弹出的按钮，在弹出的“新建新建CSS规则规则”对话框中，选择对话框中，选择“类类”，并自定义，并自定义gs1为新建为新建CSS规则的名称，点击规则的名称，点击“确定确定”按钮。在弹出的按钮。在弹出的“.gs1的的CSS规则定义规则定义”对对话框中，设置话框中，设置“类型类型”部分的部分的“Font-size”（字号）为（字号）为16px，“Font-weight”（粗细）
9、（粗细）为为bolder。设置。设置“方框方框”部分的部分的“Height”（单元格高度）为（单元格高度）为30px，“padding”部分部分的的“Top”（文字距顶部距离）为（文字距顶部距离）为10px，“Left”（文字距左边距离）为（文字距左边距离）为40px。点击。点击“确定确定”按钮。如图按钮。如图8-2-7所示。所示。图图8-2-7 新建新建CSS规则规则 并设置文字及单元格格式并设置文字及单元格格式任务任务8.2 网站首页的制作网站首页的制作【任务实施】8.将将“.gs1”CSS规则应用到文字所在单元格中。即分别选中文字所在的单元格（可规则应用到文字所在单元格中。即分别选中文字
10、所在的单元格（可直接单击单元格标签直接单击单元格标签td进行选择），在属性面板中的进行选择），在属性面板中的“类类”选择选择“gs1”。如图。如图8-2-8所所示。示。图图8-2-8 将将gs1的的CSS格式规则应用到单元格中格式规则应用到单元格中任务任务8.2 网站首页的制作网站首页的制作【任务实施】9.制作主要内容部分。设置右边单元格的背景颜色为粉色（制作主要内容部分。设置右边单元格的背景颜色为粉色（#FFFFCC），插入），插入2行行3列，宽度列，宽度100%的表格，将第一行的表格，将第一行3列单元格合并为一个单元格后插入文字图片（即列单元格合并为一个单元格后插入文字图片（即“image
11、”文件夹中的文件夹中的tu1），在第二行），在第二行3个单元格中分别插入相片图片（即个单元格中分别插入相片图片（即“image”文文件夹中的件夹中的ren1、ren2、ren3）。如图）。如图8-2-9所示。所示。图图8-2-9 制作主要内容部分制作主要内容部分任务任务8.2 网站首页的制作网站首页的制作【任务实施】10.制作友情链接部分。制作底部版权部分及友情链接的内容，背景可以选用教深的制作友情链接部分。制作底部版权部分及友情链接的内容，背景可以选用教深的颜色，中间设计一个过渡色进行过渡。因此，可插入一个颜色，中间设计一个过渡色进行过渡。因此，可插入一个2行行1列的表格，第一行为过渡列的表
12、格，第一行为过渡颜色淡蓝色（颜色淡蓝色（#B9D5FF），第二行为深色背景深蓝色（），第二行为深色背景深蓝色（#2626FF）。在第二行单元格插）。在第二行单元格插入两行版权信息及友情链接，则需要插入一个入两行版权信息及友情链接，则需要插入一个2行行4列，宽度为列，宽度为70%的表格。如图的表格。如图8-2-10所示。所示。图图8-2-10 插入友情链接部分的表格及设置颜色插入友情链接部分的表格及设置颜色任务任务8.2 网站首页的制作网站首页的制作【任务实施】11.输入文字信息，并设置文字格式。输入输入文字信息，并设置文字格式。输入2014 郭迪制作，郭迪版权所有，及友情郭迪制作，郭迪版权所有
13、，及友情链接如新浪网、淘宝网、人人网、链接如新浪网、淘宝网、人人网、126邮箱、百度网、腾讯网。定义邮箱、百度网、腾讯网。定义CSS“gs2”，设置文，设置文字颜色为灰白色（字颜色为灰白色（#CCC），字号为），字号为10pt，方框，方框height（高度）为（高度）为40px，top（距离顶部）（距离顶部）为为20px，left（距离左边）为（距离左边）为20px。并在单元格（。并在单元格（td）中应用。如图）中应用。如图8-2-11所示。所示。图图8-2-11 使用使用CSS定义文字格式和单元格格式定义文字格式和单元格格式任务任务8.2 网站首页的制作网站首页的制作【任务实施】12.保存并
14、预览首页效果。点击保存并预览首页效果。点击“在浏览器中预览在浏览器中预览/调试调试”按钮，保存并预览首页效果。按钮，保存并预览首页效果。如图如图8-2-12所示。所示。图图8-2-12 保存并预览保存并预览任务任务8.2 网站首页的制作网站首页的制作【相关知识】1.关于表格关于表格所谓表格就是由一个或多个单元格构成的集合，表格中横向的多个单元格称为行，所谓表格就是由一个或多个单元格构成的集合，表格中横向的多个单元格称为行，垂直的多个单元格称为列。行与列的交叉区域称为单元格，网页中的元素通常都被放垂直的多个单元格称为列。行与列的交叉区域称为单元格，网页中的元素通常都被放置在这些单元格中，以使其置
15、在这些单元格中，以使其“各安其位各安其位”。在在HTML语言中，表格至少由语言中，表格至少由标签、标签、标签和标签和标签这标签这3对标签对标签组成，否则，就不能成为表格。组成，否则，就不能成为表格。标签中间将包括所有表格元素，标签中间将包括所有表格元素，表格元素主要有行、列、单元格等。表格元素主要有行、列、单元格等。2.关于关于CSS样式表样式表CSS在网页中占着极重要的地位，它的使用一直是热门讨论的话题。在网页中占着极重要的地位，它的使用一直是热门讨论的话题。CSS是是Cascading Style Sheet的简写，译为的简写，译为“层叠样式表单层叠样式表单”。CSS几乎可以定义所有的网几
16、乎可以定义所有的网页元素，页元素，CSS虽然功能强大，但平时用到的是很少的，最常见的有：定义字体大小虽然功能强大，但平时用到的是很少的，最常见的有：定义字体大小 (用用CSS定义的字体大小不会浏览器的字体设置而改变定义的字体大小不会浏览器的字体设置而改变)、去掉超链下划线、超链接变色等。、去掉超链下划线、超链接变色等。任务任务8.2 网站首页的网站首页的制作制作【相关知识】2.关于关于CSS(1)CSS加在什么位置？本实例的加在什么位置？本实例的CSS样式属于内部样式表，在代码编辑视图下，找到样式属于内部样式表，在代码编辑视图下，找到和和，在，在和和之间加入之间加入，然后所有的样式表都定义在，
17、然后所有的样式表都定义在和和之间。之间。而外部样式表则需要创建而外部样式表则需要创建*.css文件格式，在网页中，使用文件格式，在网页中，使用来连接来连接CSS文件。文件。(2)CSS作用很大的一方面就是可以用来大量减少网页代码，从而为网页减肥，原理就是在网作用很大的一方面就是可以用来大量减少网页代码，从而为网页减肥，原理就是在网页中自定义样式表的选择符，然后在网页中大量引用这些选择符。目前大部分网站都是使用页中自定义样式表的选择符，然后在网页中大量引用这些选择符。目前大部分网站都是使用class来来引用的。引用的。CSS中，中，class和和id的作用是完全一样的，的作用是完全一样的，“cl
18、ass”单词比单词比“id”多多3个字母。个字母。id的使用方法，的使用方法，在网页在网页和和之间定义选择符名，选择符名前加之间定义选择符名，选择符名前加#，这些选择符名可以是字母或数，这些选择符名可以是字母或数字、或组合，然后在网页的元素中使用字、或组合，然后在网页的元素中使用id=*来引用它。来引用它。如：如：#8color:000080#p2margin-left:20#14font-size:14pt，然后，然后在网页使用这句引用它：在网页使用这句引用它：黑蓝色黑蓝色，14磅的字磅的字。段落段落本实例则是自定义本实例则是自定义.gs1和和.gs2，在网页的元素中使用，在网页的元素中使用
19、class=“gs1”来应用它。来应用它。注意：使用注意：使用class需要在网页的需要在网页的和和之间定义选择符名，名前加之间定义选择符名，名前加.(即点即点)。例。例如如.gs1color:FF0000，然后用，然后用class=“gs1”引用它引用它。任务任务8.2 网站首页的网站首页的制作制作【相关知识】2.关于关于CSS(3)样式样式表语法。样式表的项和它的值应该用冒号连接，例如表语法。样式表的项和它的值应该用冒号连接，例如color:#FF0000。样式表也可直接。样式表也可直接嵌在段落当中，而不用嵌在段落当中，而不用class或或id引用，例如引用，例如12磅字磅字。也就是使用。
20、也就是使用的语法。的语法。(4)样式样式表手册。下面列举最常用的样式表语句：表手册。下面列举最常用的样式表语句：color(颜色，例如颜色，例如FF0000代表红色，代表红色，000000代表黑色代表黑色)font-size(字体大小字体大小)font-family(字体类型字体类型)width和和height(宽度和高度宽度和高度)line-height(段落行距，建议使用百分比的形式，例如段落行距，建议使用百分比的形式，例如150%)margin-top表示段前；表示段前；margin-bottom表示段后。表示段后。margin-left表示整个段落向右缩进，表示整个段落向右缩进，margin-right表示段落右边距离右边的边框的距离。表示段落右边距离右边的边框的距离。text-align(段落的对齐方式，例如段落的对齐方式，例如left、center、right)background-color(背景颜色背景颜色)position:absolute;top:30;left:50 表示绝对定位表示绝对定位(DW中的层中的层)谢谢 谢！谢！