1-3教学单元设计(网站首页页面制作)ppt课件(全)

科创资讯网站首页设计——网站首页页面制作

任务编号：1-32021/10/10星期日1地点：网影科技有限公司网站开发部时间：上午8：30主持：网站开发部项目总监参加人员：网站开发部各项目组经理及成员会议议题：如何在Dreamweaver中制作科创资讯网站的首面创建情境网站开发部每周例会2021/10/10星期日2一、网站结构架设远端站点：

在Internet上访问的各种站点，站点文件都储存在Internet服务器上。本地站点：

在本地磁盘上建立的站点。定义本地站点，让用户在本地计算机上定义一个模拟服务器存取方式的站点，以便让设计和管理网页的工作在网站环境中进行。1、站点的概念2021/10/10星期日3一、网站结构架设规范网站的管理，网站的命名规范网站管理解决方法1.网站用到的网页素材需合理放置在网站根目录文件夹下2.网页命名“顾名思义“原则等基本规范

2、站点的命名规范2021/10/10星期日4一、网站结构架设3、以“家居江南网”为例，演示创建本地站点的方法及步骤添加文件夹注意：在为文件夹命名时，最好用英文或数字，可创建嵌套文件夹。添加网页文件注意：1）不能创建嵌套文件2）命名时要用英文或数字，名称的后缀为“*.htm”3）为主页文件命名时通常用Index.htm或Defaut.htm4）文件夹命名一般采用英文，长度一般不超过20个字符，命名采用小写字母。除特殊情况才使用中文拼音，一些常见的文件夹命名如：images(存放图形文件)，flash（存放Flash文件），style(存放CSS文件)，scripts（存放Javascript脚本），inc(存放include文件)，link（存放友情链接），media(存放多媒体文件)等。5）文件名称统一用小写的英文字母、数字和下划线的组合。图片的命名原则名称分为头尾两部分，用下划线隔开，头部分表示此图片的大类性质例如广告、标志、菜单、按钮等等。放置在页面顶部的广告、装饰图案等长方形的图片取名：banner标志性的图片取名为：logo在页面上位置不固定并且带有链接的小图片我们取名为button在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：menu装饰用的照片我们取名：pic不带链接表示标题的图片我们取名：title2021/10/10星期日5一、网站结构架设3、以“家居江南网”为例，演示创建本地站点的方法及步骤4、学生练习创建“家居江南”网站的本地站点，尝试进行修改文件名称、移动文件及删除文件等操作5、请1-2个学生上台演示，其它同学点评并记录过程2021/10/10星期日6二、网页整体页面格式设置1、居中放置页面2、设置页面属性1）设置背景图像：修改->页面属性->外观。2）设置链接属性：修改->页面属性->链接，分别设置各个状态链接的颜色，接着设置“下划线样式”为“仅在变换图像时显示下划线”。3）设置标题／编码属性：修改->页面属性->标题／编码设置标题为“家居江南网”、编码为“简体中文(GB2312)”，如果网页需要提供港台用户浏览，则可以设置“繁体中文(big5)”编码。3、学生完成“家居江南”首页页面的整体页面格式设置4、检查学生完成情况2021/10/10星期日7三、添加网页文本1、给出一个空页，请学生尝试给页面添加文本添加网页文本的方法有两种：（1）直接输入文本按Enter键可以创建一个新的段落<p>……</p>按Shift+Enter可以换行但不分段<br/>（2）拷贝文本可以从其他应用程序中拷贝文本粘帖到网页文档中，但原来的文本格式消失，而换行符保留。注意：HTML文件只允许字符之间包含一个空格。如果要在文档中添加其他的空格，需要将输入法切换到中文全角的输入状态。2021/10/10星期日8三、添加网页文本2、文本属性的含义（1）设置文本字体，如：font-family:"宋体";（2）设置文本大小，如：font-size:12px;（3）设置文本颜色，如：color:#0000FF;（蓝色）（4）设置文本加粗，如：font-weight:bold;（5）设置文本倾斜，如：font-style:italic;以上设置均会自动放置在样式表中：.STYLE1{ font-family:"宋体"; font-size:12px; color:#0000FF; font-weight:bold; font-style:italic;}2021/10/10星期日9四、设置段落格式添加1、请学生尝试设置文本居中对齐、添加项目符号、设置首行缩进2个字符等效果2、上台演示制作效果，其它同学点评3、教师讲解要点（1）应用段落格式：<p>……</p>（2）设置文本对齐方式align="left"（左对齐）；align="center"（居中对齐）；align="right"（右对齐）；align="justify"（两端对齐）3）设置段落缩进<blockquote><p>用户</p></blockquote> font-style:italic;

2021/10/10星期日10五、项目列表与项目编号的创建教师讲解：1、设置为文本添加项目列表（也称无序列表），如：<ul><li>字体</li><li>大小</li><li>颜色</li></ul>连续敲击两次Enter键结束列表的输入2、设置为文本添加项目编号（也称有序列表），如：<ol><li>字体</li><li>大小<</li><li>颜色</li></ol>连续敲击两次Enter键结束列表的输入3、嵌套项目列表的创建2021/10/10星期日11六、其它符号同学们自己尝试完成：插入日期、插入水平线、插入特殊符号等操作2021/10/10星期日12七、家居江南网首页制作1、请同学尝试为“家居江南网”的index.htm页面添加页面文本2、请1-2位同学上台展示介绍所做网页，其它人点评3、同学们跟着老师做下面操作，初步体验表格布局做网页的快乐1）插入6×1表格：设置背景颜色：#006633，居中对齐<tablewidth="787"border="0"align="center"cellpadding="0"cellspacing="0"bgcolor="#006633"><tr><td> </td></tr>……</table>注：设置表格宽度为787（logo.jpg的宽度211+titnew.swf的宽度576）2021/10/10星期日13七、家居江南网首页制作4、请同学尝试进行文字格式设置第一行居中，黑体12号字；第二、三段首行缩进2个字符；为按序排列文字添加项目符号。2）第一行空行，留作间隔，设置高度为53）第二行插入2×1表格，左边插入logo.jpg，并设置单元格宽度为211，右边插入titnew.swf，宽度缺省；4）第三行空作为间隔，设置高度为55）第四行插入1×4表格，作为导航条，第一单元格输入“首页”，宽度为411；第二、第三单元格输入“户型展示”、“园林文化”，宽度为120；第四单元输入“缘起”，宽度缺省。6）第五行插入1×2表格，第一单元格设置宽度为20%，第二单元格插入2×1表格，上面插入nm.jpg，下面输入首页文字，见素材“jiaju.txt”7）第六行输入版本号5、请1-2位同学上台演示，其它同学点评3、同学们跟着老师做下面操作，初步体验表格布局做网页的快乐2021/10/10星期日14八、用样式表进行文本格式化CSS全称CascadingStylesSheet，译为层叠样式表，是由W3C（WorldWideWebConsortium）组织所拟定的，主要用来指定文字、段落、版面等网页素材的格式，可翻译为“层叠样式表”或“级联样式表”。样式表是DHTML的一部分，使得可以使用脚本程序调用和改变对象属性，使网页中的对象产生动态的效果。1、什么是样式表样式表一般可以实现下列功能：1、更加灵活地控制网页中文字的字体、颜色、大小间距等；2、灵活地设置一个文本块的行高缩进并可以加入三维效果的边框；3、可以为网页中各种元素设置各种滤镜，从而产生诸如阴影、模糊和透明等只有在一些图象处理软件中才能实现的效果；4、与脚本语言相结合，使网页中元素产生各种动态效果；5、由于是直接的html格式代码，网页打开的速度快。2021/10/10星期日15八、用样式表进行文本格式化CSS全称CascadingStylesSheet，译为层叠样式表，是由W3C（WorldWideWebConsortium）组织所拟定的，主要用来指定文字、段落、版面等网页素材的格式，可翻译为“层叠样式表”或“级联样式表”。样式表是DHTML的一部分，使得可以使用脚本程序调用和改变对象属性，使网页中的对象产生动态的效果。1、什么是样式表样式表一般可以实现下列功能：1、更加灵活地控制网页中文字的字体、颜色、大小间距等；2、灵活地设置一个文本块的行高缩进并可以加入三维效果的边框；3、可以为网页中各种元素设置各种滤镜，从而产生诸如阴影、模糊和透明等只有在一些图象处理软件中才能实现的效果；4、与脚本语言相结合，使网页中元素产生各种动态效果；5、由于是直接的html格式代码，网页打开的速度快。2021/10/10星期日16八、用样式表进行文本格式化2、建立样式表的方法及步骤2021/10/10星期日173、为家居江南网设置.bg,.title,.text_body,.list样式，并为文本运用样式八、用样式表进行文本格式化2021/10/10星期日18八、用样式表进行文本格式化4.1定义类型属性打开[StyleDefinitionfor](样式定义)对话框，默认状态打开的便是[Type](类型)面板，如图6-3所示。下面是该面板中各项参数的设置。◆[Font](字体)：设置当前样式使用的字体。◆[Size](大小)：设置当前样式使用的文字大小。在此选项中可以通过选择数字和度量单位选择特定的字体大小，也可以选择相对字体大小。◆[Style](样式)：将“正常”、“斜体，，、或‘‘偏斜体’’指定为字体样式，默认设置是“正常”。◆[Line](行高)：设置文本所在行的高度。选择“正常”，自动计算字体大小的行高；选择“值”，可以输入一个确切的值并选择一种度量单位。◆[Weightl(粗细)：对字体应用特定或相对的粗体量。“正常’’等于400，“粗体”等于700。◆[Variant](变量)：设置文本的小型大写字母变量。Dreamweaver不在“文档”窗口中显示该属性。IntemetExplorer支持该属性，但Navigator不支持。◆[Case](大小写)：将选定内容中的每个单词的首字母大写或将文本设置为全部大写或小写。◆[Color](颜色)：设置文本颜色。◆'Decoration](修饰)：该选项提供了五种字体的格式，分别是underline(下划线)，overline(上划线)、line-through(删除线)、blank(闪烁)和none(无格式)。4、各属性的含义2021/10/10星期日19八、用样式表进行文本格式化4.2定义背景属性在[StyleDefinitionfor](样式定义)对话框的分类选项中选择[Background](背景)选项，在右侧将出现[Background](背景)的相关设置。使用[Background](背景)选项可以定义CSS样式的背景属性，并将其应用到网页中。◆[Background](背景颜色)：设置页面元素的背景颜色。◆[Backgroundlmage](背景图像)：设置页面元素的背景图像。◆[Repeat](重复)：用于设定是否允许背景图像重复，分为no-repeat(不重复)、repeat(重复)、repeat-x(横向重复)和repeat-y(纵向重复)。“不重复”设置背景图像不平铺显示，即只显示单个的图像；◆[Attachment](附件)：确定背景图像是固定在它的原始位置还是随内容一起滚动。[Attachment](附件)中有两个选项，即fixed(固定)和scroll(滚动)。“固定”设置背景图像固定在原始位置不动，“滚动”设置背景图像随内容一起滚动。◆[Horizontal](水平位置)：该下拉列表用于指定背景图像相对于应用样式的元素的水平位置，分为left(左对齐)、center(居中对齐)、right(右对齐)和Value(值)。“左对齐”用于设置背景图像相对于元素左对齐；“居中对齐”用于设置背景图像相对于元素垂直中心线对齐；“右对齐”用于设置背景图像相对于元素右对齐；“值”用于设置背景图像相对于元素为一个固定的数值。◆[Vertical](垂直位置)：该下拉列表用于指定背景图像相对于应用样式的元素的水平位置，分为top(顶部)、center(居中)、bottom(底部)和Value(值)。“顶部”设置背景图像相对于元素顶边对齐；“居中”设置背景图像相对于元素水平中心线对齐；“底部”设置背景图像相对于元素底边对齐；“值”设置背景图像相对于元素为一个固定的数值。4、各属性的含义2021/10/10星期日20八、用样式表进行文本格式化4.2定义背景属性4、各属性的含义2021/10/10星期日21八、用样式表进行文本格式化4.3定义区块属性4、各属性的含义在[StyleDef'mitionfor](样式定义)对话框中的分类选项中选择[Block](区块)选项，右侧将出现[Block](区块)的相关设置。使用[Block](区块)选项可以定义标签和属性的间距和对齐设置。◆[WordSpacing](单词间距)：设置单词之间的间距。如果要设置特定的值，在弹出的菜单中选择“值”，然后输入一个数值。在第二个弹出菜单中选择相应的度量单位(如选择像素、点数等)。◆[LetterSpacing](字母间距)：增加或减少字母或字符的间距。◆[VerticalAlignment](垂直对齐)：指定它应用于元素的垂直对齐方式。2021/10/10星期日22八、用样式表进行文本格式化4、各属性的含义4.4定义链接文字的样式接下来我们再设计一个样式表，以控制超链接的形式、颜色变化,此优先级比页面整体链接设置的要高。要达到的目标为：未被点击时超链接文字无下划线，显示为蓝色；当鼠标在链接上时有下划线，链接文字显示为红色；当点击链接后，链接无下划线，显示为绿色。

在新建样式表对话框中选择“UseCSSSelector”(高级)，点下面的下拉列表框，可以看到里面有四个选项：a:link指正常的未被访问过的链接；a:active指正在点链接；a:hover指鼠标在链接上；a:visited指已经访问过的链接；2021/10/10星期日23八、用样式表进行文本格式化4、各属性的含义4.4定义链接文字的样式选“a:link”，弹出对话框，定义正常的未被访问过的链接形式。在Color框中选择蓝色，在“Decoration”（修饰效果）栏中，有五个选项：underline参数表示超链接的文字有下划线；*overline则给超链接文字加上划线；line-through给超链接文字加上删除线；*blink则使文字闪烁。none参数表示超链接文字不显示下划线；我们勾选“None”项，表示让超链接的下划线消失。单击“OK”，a:link设计完毕。用同样方法，我们可以设计a:hover、a:visited等的形式。2021/10/10星期日24八、用样式表进行文本格式化5建立并使用外部样式表只要将定义好的样式表输出成外部就可以了。选中定义好的样式表后，然后选择File下的Export中的ExportCSSStyle…，输入名称保存。如果要使用这个外部样式表，可以点击的Link…按钮，弹出对话框窗口如右下图其中：1．File/URL中可输入外部样式表的路径，或用Browse…在文件列表中找到.css文件。2．AddAs加入方式可以是外部连接Link方式，或直接导入Import方式。2021/10/10星期日25九、用表格布局法制作网页1、学生展示制作的“家居江南网”首页2021/10/10星期日26九、用表格布局法制作网页整个盒模型在页面中所占的宽度：由左边界+左边框+左填充+内容+右填充+右边框+右边界组成css样式中width所定义的宽度仅仅是内容部分的宽度

2、讲解网页布局中盒模型的含义2021/10/10星期日27九、用表格布局法制作网页表格描述<table>定义表格<caption>定义表格标题。<th>定义表格的表头。<tr>定义表格的行。<td>定义表格单元。<thead>定义表格的页眉。<tbody>定义表格的主体。<tfoot>定义表格的页脚。<col>定义用于表格列的属性。<colgroup>定义表格列的组。3、讲解网页布局中表格属性的含义2021/10/10星期日28九、用表格布局法制作网页4、学生展示制作的“科创资讯网”2021/10/10星期日29十、插入图像1）关于图像格式GIF格式(图形交换格式)：最多使用256色，最适合显示色调不连续急迫具有大面积单一颜色的图象。JPEG格式(联合图像专家组标准)：多用来表现网页中色彩较丰富，含有大量过渡色的部分，不过文件较大。PNG格式(可移植网络图形)：是FireworksMX的固有文件格式。2021/10/10星期日30十、插入图像3）设置图像格式注意：在DreamweaverMX中改变图像的大小会使图像的质量下降，因此尽量不要在DreamweaverMX中改变图像的大小。（1）背景图案的设置： 格式：<bodybackground=”URL”> 路径参考超链接的基本方法（2）将图片插入到网页中去 格式:<imgsrc="URL"> 功能:将图片插入到网页中去,单一标签

<img>下的属性： 属性名称 属性值 说明 src URL 图片的路径

图片的注解： 属性名称 属性值 说明 alt 字符串 给图片做注解

图象大小的设置： 属性名称 属性值 说明 width 像素 绝对设置,宽 百分比 相对设置,宽 height