工作任务5-网站子页设计与制作

05工作任务5网站子页设计与制作超链接·CSS规则·模板应用·子页设计与制作目录CONTENTS5.1网站子页设计与制作基础知识超链接、CSS规则、模板介绍5.4总结与拓展回顾子页设计与制作基础知识，梳理子页制作脉络，并通过拓展性思考与实践任务提升综合应用能力5.2博客网站子页设计与制作效果图制作、切片优化、布局实现5.5AI技能拓展-AI辅助子页设计与制作探索AI技术在辅助网站子页设计与制作过程中的创新应用，学习如何利用AI工具提升开发效率与内容生成质量5.3校园网站子页设计与制作效果图制作、切片优化、样式表与模板布局05网站子页设计与制作教学目标知识目标·技能目标·素养目标知识目标1掌握链接的类型及设置方法掌握"CSS设计器"面板的应用掌握Dreamweaver模板的操作方法技能目标2熟练运用Photoshop完成子页效果图设计熟练应用CSS设计器完成页面布局熟练应用模板完成页面布局素养目标3培养批判性思维能力培养提出问题的能力培养解决问题的能力05网站子页设计与制作35.1网站子页设计与制作基础知识超链接·CSS规则·模板介绍5.1.1超链接—链接路径绝对路径与相对路径绝对路径包含服务器协议的完整URL路径与源文档地址无关，是精确地址例如：/page.html创建站外链接时必须使用绝对路径相对路径和文档相对的路径：与当前文档所在文件夹相对和根目录相对的路径：从站点根目录开始根目录相对路径以斜线"/"开头适用于站内页面之间的链接05网站子页设计与制作55.1.1超链接—跳转类型与制作链接链接跳转方向与链接制作方式跳转类型跳转到本站点内其他网页（内部链接）跳转到其他站点的网页（外部链接）制作链接的类型文字链接图片热点链接电子邮件链接锚点链接文字链接选中文本设置链接地址图片热点链接绘制热区为热区添加链接电子邮件链接mailto:前缀打开邮件程序锚点链接设置锚点#锚点名称跳转05网站子页设计与制作65.1.1超链接—文字链接制作方法与target属性制作方法方法1：插入→Hyperlink命令选中文本，通过菜单插入超链接方法2：属性面板→浏览文件选中文本，在属性面板中点击浏览文件按钮target属性说明_blank：在新窗口中打开链接_self：在同一窗口中打开（默认）_parent：在父框架中打开_top：在整个窗口中打开_new：在新窗口中打开05网站子页设计与制作75.1.1超链接—电子邮件链接与锚点链接电子邮件链接使用mailto:前缀创建邮件链接点击后打开默认邮件程序格式：mailto:邮箱地址可预设邮件主题和内容mailto:someone@?subject=邮件主题&body=邮件内容锚点链接步骤1：添加锚点将光标定位到目标位置，插入命名锚点步骤2：添加锚点链接链接地址使用#锚点名称格式<aname="top"></a><ahref="#top">返回顶部</a>05网站子页设计与制作9

5.1.1超链接—图片热点链接创建热区、编辑调整、添加链接1创建图像热区选择图片使用矩形热点工具使用椭圆形热点工具使用多边形热点工具2编辑调整热区选择指针热点工具拖动调整热区位置调整热区形状和大小删除不需要的热区3为热区添加链接选中热区在属性面板设置链接地址设置替换文字（Alt）选择目标窗口提示：图片热点链接允许在一张图片上创建多个不同链接区域，常用于导航地图等场景。05网站子页设计与制作85.1.2CSS规则CSS设计器面板的应用CSS样式与CSS源CSS样式概念与CSS源的创建方式CSS样式控制网页外观的格式设置规则将样式与内容分离，便于统一更新修改CSS规则即可更新所有应用该规则的页面创建CSS源在页面中定义（内嵌样式）创建新的CSS文件（外部样式表）附加现有的CSS文件05网站子页设计与制作11CSS选择器CSS设计器面板中选择器的操作1创建选择器单击选择器按钮，创建新的选择器2调整具体程度使用上下箭头调整选择器的具体程度3删除并输入删除不需要的选择器，输入所需选择器4搜索选择器在搜索框中输入关键字查找选择器5重命名选择器双击选择器名称进行重命名6拖动整理拖动选择器调整顺序，整理结构7复制选择器复制现有选择器，快速创建相似规则05网站子页设计与制作12CSS类型属性（Type）字体相关属性定义类型属性列表Font-family：设置字体族Font-size：设置字体大小Font-style：设置字体样式（normal/italic/oblique）Line-height：设置行高Text-decoration：文本修饰（underline/overline/line-through/none）Font-weight：字体粗细（normal/bold/100-900）Font-variant：字体变体（normal/small-caps）Text-transform：文本转换（none/capitalize/uppercase/lowercase）Color：文本颜色（3种表示方法）Color颜色表示方法颜色名称：red、blue、green十六进制：#FF0000、#10B981RGB函数：rgb(255,0,0)05网站子页设计与制作13CSS背景属性与区块属性Background属性与Block属性背景属性（Background）Background-color：背景颜色Background-image：背景图片Background-repeat：背景重复方式Background-attachment：背景附件（scroll/fixed）Background-position(X/Y)：背景位置区块属性（Block）Word-spacing：单词间距Letter-spacing：字母间距Vertical-align：垂直对齐Text-align：文本对齐（left/right/center/justify）Text-indent：文本缩进White-space：空白处理方式Display：显示方式（block/inline/none等）05网站子页设计与制作14CSS方框属性与边框属性Box属性与Border属性方框属性（Box）Width/Height：宽度和高度Float：浮动（left/right/none）Clear：清除浮动（left/right/both/none）Padding：内边距（上右下左）Margin：外边距（上右下左）边框属性（Border）Style：边框样式Width：边框宽度Color：边框颜色none|hidden|dotted|dashed|soliddouble|groove|ridge|inset|outset05网站子页设计与制作15CSS列表属性与定位属性List属性与Positioning属性列表属性（List）List-style-type：列表标记类型List-style-image：列表标记图片List-style-Position：标记位置（inside/outside）定位属性（Positioning）Position：定位方式（static/relative/absolute/fixed）Visibility：可见性（visible/hidden）Z-Index：层叠顺序Overflow：溢出处理（visible/hidden/scroll/auto）Placement：放置位置（Top/Right/Bottom/Left）Clip：裁剪区域05网站子页设计与制作16CSS扩展属性与过渡属性Extensions属性与Transition属性扩展属性（Extensions）break-before：页前分页break-after：页后分页Cursor：鼠标指针样式Filter：滤镜效果（如模糊、透明等）过渡属性（Transition）Transition-property：过渡的CSS属性Transition-duration：持续时间Transition-delay：延迟时间Transition-timing-function：时间函数05网站子页设计与制作175.1.3模板介绍Dreamweaver模板的创建、编辑与应用创建模板两种创建模板的方式方式1：直接创建模板文件→新建选择HTML模板点击"创建"按钮保存时自动生成.dwt文件方式2：从现有文档创建打开现有HTML文档文件→另存为模板选择站点和模板名称保存后自动存入Templates文件夹05网站子页设计与制作19编辑模板可编辑区域的管理可编辑区域与不可编辑区域不可编辑区域：模板默认锁定区域可编辑区域：允许在基于模板的页面中修改可编辑区域操作插入：插入→模板→可编辑区域更改名称：双击可编辑区域标签删除：修改→模板→删除可编辑区域标记05网站子页设计与制作20可选区域和重复区域模板高级区域类型可选区域（OptionalRegion）控制内容的显示或隐藏基本选项卡：设置名称和默认显示状态高级选项卡：设置条件表达式适用于可选内容的显示控制重复区域（RepeatingRegion）可任意次复制的区域用于表格行或其他重复元素添加：插入→模板→重复区域可在基于模板的页面中添加或删除副本05网站子页设计与制作21应用模板与管理模板模板的应用与管理操作应用模板方法1：新建文档→网站模板选择站点，选择模板，点击创建方法2：资源面板→模板在资源面板中右键模板，选择"从模板新建"管理模板删除模板在资源面板中右键删除修改模板修改→模板→更新页面选择更新范围，自动更新所有基于该模板的页面05网站子页设计与制作225.2博客网站子页设计与制作效果图制作·切片优化·布局实现5.2.1子页效果图制作—页眉新建文件与页眉制作制作步骤新建PS文件尺寸：980x790像素分辨率：72dpi，RGB模式设置页面背景背景颜色：#226039（深绿色）制作页眉更换logo背景图片输入"生活感悟"文字调整字体样式和颜色05网站子页设计与制作255.2.1博客网站子页效果图设计设计流程：草图→布局→色彩→内容1绘制草图logo导航条6个栏目版权信息2页面布局页眉区域内容区域页脚区域整体结构规划3色彩设计绿色和白色为主与主页保持一致绿色#226039白色背景4内容设计页眉设计6个栏目内容区域页脚设计图文搭配05网站子页设计与制作245.2.1子页效果图制作—内容区域与页脚6个栏目与页脚制作制作步骤新建"内容区域"文件夹制作6个栏目每个栏目尺寸：460x150像素包含图片和文字内容两列三行排列制作页脚页脚与主页相同包含版权信息05网站子页设计与制作265.2.3博客网站子页布局—建立子页与CSS设置操作步骤建立子页和图片文件夹创建shengHuoGanWu.html创建ganWu_images文件夹设置body样式使用CSS设计器面板字体：宋体字号：13px颜色：黑色(#000000)设置margin和padding为005网站子页设计与制作28

5.2.2切片与优化页眉、内容区域、页脚的切片处理页眉切片隐藏导航文字分为3部分切片分别保存为独立图片内容区域切片隐藏文字内容对图片进行切片保留图片原始质量页脚切片对文字特殊效果切片保留渐变和阴影效果优化为GIF或PNG格式05网站子页设计与制作275.2.3子页布局—logo、通栏与导航条步骤1：制作logo及横向通栏插入表格布局添加.logo样式类插入banner图片步骤2：制作导航条添加.daoHang样式类创建1行7列表格输入导航栏目文字05网站子页设计与制作295.2.3子页布局—内容区域表格布局与栏目制作操作步骤插入7×7表格（49个单元格）合并单元格得到目标布局插入栏目图片设置.greenBackground样式背景色与主页一致输入栏目文字内容设置文字样式和对齐方式05网站子页设计与制作305.3校园网站子页设计与制作效果图制作·切片优化·样式表与模板布局

5.2.3子页布局—页脚与链接设置操作步骤制作页脚添加.yeJiao样式背景色：#032e13设置链接导航栏目链接到主页设置链接样式a:link{color:#FFFFFF;text-decoration:none;}a:visited{color:#CCCCCC;}a:hover{color:#10B981;text-decoration:underline;}05网站子页设计与制作315.3.1校园网站子页效果图设计设计流程：草图→布局→色彩→内容1绘制草图logo导航条学校概况左侧导航右侧内容区域版权信息2页面布局页眉区域左侧导航栏右侧内容区页脚区域3色彩设计蓝色和白色为主与主页保持一致整体风格统一4内容设计左侧6个栏目导航右侧默认显示学校简介图文内容展示05网站子页设计与制作335.3.1子页效果图制作新建文件、页眉、内容区域、页脚制作步骤新建PS文件尺寸：980x900像素制作页眉与主页相同制作内容区域左侧导航栏目：210x200px右侧栏目内容：750x650px制作页脚与主页相同05网站子页设计与制作345.3.2切片与优化页眉、内容区域切片处理页眉切片隐藏导航文字分为3部分切片与博客子页方法相同内容区域切片只需对"校园图片"切片文字部分使用HTML实现减少图片数量，优化加载页脚处理页脚无需切片直接使用CSS实现背景色和文字样式05网站子页设计与制作355.3.3校园网站子页布局—样式表方法方法1：应用CSS样式表实现布局1建立子页及CSS文件创建xueXiaoGaiKuang.html和xueXiaoGaiKuang.css2设置页眉banner区域navigation导航条3设置内容区域布局#content容器#left左侧导航#right右侧内容4设置左侧导航6个栏目链接导航样式设计5设置右侧内容默认显示学校简介图文混排布局6设置页脚版权信息背景色与文字样式#content{width:980px;margin:0auto;}#left{width:210px;float:left;}#right{width:750px;float:right;}05