网页设计与制作教程网络鞋城
网页设计与制作教学
整理课件
2
2.什么是主页？
❖ 当我们浏览网站时看到的第一个页面。它是 整个站点的入口和门面，通常这样命名： index.html。
整理课件
3
3.什么是超文本？
❖ 包含文字、图像、视频、声音等媒体的文本， 网页就是一个超文本文件，并且可以实现链 接操作。
❖ 超文本可以给浏览者带来视觉和听觉的享受， 所以Web技术又称为超媒体技术。
部分。HTML文档中所有的内容都应该在这 两个标记之间，一个HTML文档总是以
<he<ahdt>m…l><开/h始ea，d>以：<H/hTtMmlL>文结件束的。头部标记，头
部主要提供文档的描述信息，head部分的所有 内容都不会显示在浏览器窗口中，在其中可以
放置页面的标题以及页面的类型、使用的字符
❖ 站外链接：在个人网站上放置一些与网站主题有关的对外链 接，不但可以把好的网站介绍给浏览者，而且能使浏览者乐 意再度光临该网站。(友情链接)整理课件 Nhomakorabea13
❖ 表格是网页中的一种用于控制网页页面布局的有效 方法。为了达到理想的视觉效果，通常不显示表格 的边框。使用表格辅助布局，可以实现网页横竖分 明的风格。
❖ Photoshop ❖ Fireworks（.gif） ❖ Flash(.swf)
整理课件
19
9.HTML的基本结构
整理课件
20
9.HTML的基本结构
<body>…</body>：用来指明文档的主体区域， <ht网m页l>…所<要/h显tm示l>的：内告容诉都浏放览在器这H个TM标L记文内档，开其
整理课件
网页设计与制作教学课件
通过改变DOM元素的属性或样式，实 现动态效果。
05
网页响应式设计
响应式设计概念
01 响应式网页设计是一种网页设计方法，旨在使网 页能够根据不同的设备和屏幕尺寸自适应显示， 提供更好的用户体验。
02 它通过使用媒体查询、流式布局、弹性图片和灵 活的字体等手段，使网页在不同设备上都能呈现 出良好的视觉效果和交互体验。
02 响应式设计可以提高网站的可用性和访问性，从 而增加用户满意度和网站流量。
媒体查询
媒体查询是响应式设计的核心技术之一，它允许网页根据设备的特定特 性（如屏幕宽度、高度、方向等）应用不同的CSS样式。
通过媒体查询，开发者可以针对不同的设备类型和屏幕尺寸编写特定的 CSS样式，以实现更好的布局和视觉效果。
04
网页交互与动画
网页交互设计
交互元素
包括按钮、表单、链接等， 设计时需考虑易用性和用 户体验。
导航菜单
设计清晰、直观的导航菜 单，方便用户快速找到所 需内容。
响应式设计
根据不同设备的屏幕大小 和分辨率，自动调整网页 布局和元素大小。
CSS动画
01
02
03
关键帧动画
通过定义关键帧和过渡效 果，实现元素的平滑运动。
响应性
设计适应不同设备和 屏幕尺寸的响应式网 站，以确保用户在不 同设备上都能获得良 好的浏览体验。
视觉层次
通过合理安排内容元 素的优先级和组织方 式，突出重要信息， 引导用户的注意力。
网页设计流程
需求分析
了解客户需求，明确网站目标和目标受众， 收集相关资料和竞争对手分析。
规划与草图
制定网站结构、布局和导航方案，绘制草图或 线框图，确定基本的设计风格和元素。
（完整版）《网页设计与制作》课程教案
（完整版）《网页设计与制作》课程教案《网页设计与制作》课程教案一、课程定位本课程是计算机应用技术专业的一门专业基础课程，该课程的学习能够提升他们对网页制作的兴趣，让他们学习网页制作的基本技能，为后继课程打下基础，同时扩展其就业面，为就业做好准备。
本课程的目的和任务是让学生学会Dreameaver CS6、Flash和Fireworks 的使用方法，并能够使用这3款软件制作出美观实用的网页。
二、课程总目标掌握网页制作的基本方法和技能，掌握网站建设的流程，能够运用所学知识建设常用的网页和网站，同时能够美化网页，设计人性化、艺术化的网站静态页面部分。
（一）知识目标：1.熟悉网页制作的基本元素；2.掌握Dreamweaver CS6软件的基本操作方法；3.掌握在网页中插入文字、图片、声音、flash等的方法；4.掌握常见的网页布局方法，学会使用CSS美化网页；5.掌握在网页中使用表单和制作网页特效的方法；6.掌握简单图形图像的处理，能够制作符合网页主题的图片和简单动画并巧妙地和网页中内容搭配起来。
7.掌握建设一个功能相对完善的网站的方法并能制作常用的网站的静态页面部分。
（二）职业能力培养目标1. 能够根据网站开发需求，去寻找网页设计和网站开发所需要的文字、图片、动画、声音、视频等素材并作美化处理；2．能够制作出符合主题色彩的网页，网页要求美化、被绝大多数浏览者接受和喜爱；3.能够设计企业网站、政府门户网站、学校网站等常见网站的基本静态页面。
（三）素质目标1.具有勤奋学习的态度，严谨求实、创新的学习精神；2.具有良好的心理素质和职业道德素质；3.具有高度责任心和良好的团队合作精神；4.具有运用理论知识发现问题、分析问题并解决问题的能力，同时能够不断学习，不断创新，让自己的设计越来越完善，有止于至善的精神。
（四）职业技能证书考核要求：可以根据自身情况考取“全国计算机信息高新技术资格证”，“网页设计制作员”，“网页设计师”等职业技能证书。
网页设计教程：网页设计与制作流程
网页设计教程：网页设计与制作流程随着互联网的快速进展，网页设计行业也越来越受到人们的关注。
作为一个网页设计行业专家，我想和大家共享一下网页设计教程中的一些重要学问点，关心大家更好地了解网页设计与制作流程。
网页设计的基本学问1、网页设计的定义网页设计是指通过使用各种设计工具和技术，将文字、图片、音频、视频等多种元素有机地结合在一起，形成一个具有美感和功能性的网页。
2、网页设计的目的网页设计的主要目的是为了吸引用户的留意力，提高用户的满足度和使用体验，同时也要满意网站的商业需求，如提高网站的转化率、增加销售额等。
3、网页设计的原则网页设计需要遵循一些基本原则，如颜色搭配、排版布局、字体选择、图片处理等。
同时也需要考虑用户体验、网站速度、SEO等因素。
网页设计的制作流程1、网页设计的预备工作在进行网页设计之前，需要进行一些预备工作，如确定网站的目标、受众、内容和功能等。
同时也需要进行市场调研，了解竞争对手的网站设计和用户需求。
2、网页设计的规划网页设计的规划包括网站结构、页面布局、导航设计等。
需要考虑用户体验和网站的可用性，同时也需要考虑SEO等因素。
3、网页设计的视觉设计网页设计的视觉设计包括颜色搭配、排版布局、字体选择、图片处理等。
需要考虑网站的品牌形象和用户体验。
4、网页设计的制作网页设计的制作包括HTML、CSS、JavaScript等技术的应用。
需要考虑网站的兼容性和响应式设计。
5、网页设计的测试和上线网页设计完成后，需要进行测试和上线。
测试包括功能测试、兼容性测试、性能测试等。
上线需要考虑网站的平安性和稳定性。
网页设计教程的学习方法1、学习网页设计的基础学问学习网页设计需要把握一些基础学问，如HTML、CSS、JavaScript 等技术的应用。
同时也需要了解一些设计原则和工具的使用。
2、学习网页设计的实践阅历学习网页设计还需要进行实践，通过制作网站来提高自己的技能和阅历。
同时也需要不断地学习和探究新的设计技术和趋势。
鞋店网页代码课程设计
鞋店网页代码课程设计一、课程目标知识目标：1. 学生能够理解并掌握HTML和CSS的基础知识，包括网页结构、标签、属性以及样式表的运用。
2. 学生能够学会使用HTML和CSS创建一个简单的鞋店网页，并正确实现网页布局和设计。
3. 学生能够掌握基本的网页排版和美化的方法，包括字体、颜色、间距和边距的调整。
技能目标：1. 学生能够运用所学的HTML和CSS知识，独立编写和修改鞋店网页的代码。
2. 学生能够运用浏览器开发者工具进行网页调试，发现问题并进行相应的修正。
3. 学生能够通过小组合作，共同完成一个具有创意和实用性的鞋店网页项目。
情感态度价值观目标：1. 学生培养对编程和网页设计的兴趣，提高学习积极性和自主性。
2. 学生培养团队协作意识，学会与他人共同解决问题，体验合作带来的成就感。
3. 学生培养创新思维，敢于尝试新方法，提升解决问题的能力。
课程性质：本课程为信息技术课程，结合实际应用场景，教授学生HTML和CSS知识，培养其编程技能和网页设计能力。
学生特点：学生为初中年级，具有一定的计算机操作基础，对新鲜事物充满好奇心，喜欢动手实践。
教学要求：教师应注重理论与实践相结合，引导学生主动探索，关注个体差异，提高学生的动手能力和解决问题的能力。
教学过程中，注重培养学生的团队协作和创新思维。
通过本课程的学习，使学生能够将所学知识应用于实际项目中，达到学以致用的目的。
二、教学内容1. HTML基础：- 网页结构：HTML文档类型、标签、属性。
- 布局元素：div、span、p、h1-h6等。
- 文本格式：字体、颜色、大小、加粗、斜体等。
- 链接与图像：a标签、img标签。
2. CSS样式：- 选择器：类选择器、id选择器、元素选择器。
- 布局样式：盒子模型、边距、填充、边框、浮动、定位。
- 文本样式：字体、颜色、行高、文本对齐。
- 响应式设计：媒体查询、移动端布局。
3. 鞋店网页设计与实现：- 网页规划：页面布局、导航栏、商品展示、购物车。
网页设计与制作教程PPT课件
案例二：企业官网制作
总结词
专业形象塑造
详细描述
企业官网是企业形象的重要组成部分，设计时需注重专业 形象的塑造。采用符合企业品牌形象的颜色、字体和布局 ，以及专业的图片和内容，提升企业形象和可信度。
总结词
用户体验优化
详细描述
企业官网的用户体验至关重要，设计时应注重用户需求和 习惯。提供清晰的信息架构、便捷的导航和搜索功能，以 及响应式设计，确保用户在不同设备和浏览器上都能获得 良好的访问体验。
使用CSS和JavaScript创建一个模 态对话框，当用户与页面交互时弹 出，并覆盖背景内容。
表单验证
使用JavaScript对表单输入进行验 证，确保用户输入的数据符合要求， 提高数据质量。
特效制作
淡入淡出效果
使用CSS动画实现元素从透明到不透明或从一种颜 色渐变到另一种颜色的效果。
滑动效果
使用CSS或JavaScript实现元素在页面上的滑动效 果，如左右滑动、上下滑动等。
本课程将涵盖网页设计理念、HTML、CSS、JavaScript等前端技术，以及响应 式设计、网页性能优化等方面的知识，使学员能够独立完成一个精美、高效的网 页作品。
学习目标
01
掌握网页设计的基本理 念和原则，能够独立设 计出符合用户需求的网 页。
02
熟悉HTML、CSS、 JavaScript等前端技术， 能够熟练地编写网页代 码。
外部样式表
通过外部CSS文件引入样式，并 在HTML文档中使用`<link>`标
签引入该文件，如`<link rel="stylesheet" type="text/css"
href="styles.css">`
网页设计与制作教案
网页设计与制作教案第一章：网页设计基础1.1 网页设计概述介绍网页设计的概念和重要性讨论网页设计的基本原则和目标1.2 网页设计流程介绍网页设计的基本流程，包括需求分析、设计草图、布局和配色等步骤1.3 网页设计工具介绍常用的网页设计工具，如Photoshop、Illustrator和Fireworks等第二章：HTML与CSS基础2.1 HTML概述介绍HTML的概念和作用讲解HTML的基本结构和语法2.2 CSS概述介绍CSS的概念和作用讲解CSS的基本语法和用法2.3 常用HTML标签介绍常用的HTML标签，如div、span、img等第三章：网页布局与排版3.1 网页布局概述介绍网页布局的概念和重要性讲解常用的网页布局方法，如网格布局和Flexbox等3.2 排版与字体介绍排版和字体的概念和重要性讲解如何使用CSS进行排版和字体设置3.3 响应式设计介绍响应式设计的概念和重要性讲解如何使用CSS媒体查询来实现响应式设计第四章：网页动画与交互4.1 网页动画概述介绍网页动画的概念和作用讲解如何使用CSS动画和JavaScript实现网页动画4.2 网页交互概述介绍网页交互的概念和重要性讲解如何使用JavaScript实现网页交互效果4.3 表单与验证介绍表单的概念和重要性讲解如何使用HTML和JavaScript实现表单的验证和提交第五章：网页设计与制作实践5.1 实践项目概述介绍实践项目的目标和内容讲解如何规划和设计实践项目5.2 实践项目实施讲解如何使用HTML和CSS实现实践项目的布局和排版讲解如何使用JavaScript实现实践项目的动画和交互效果5.3 实践项目总结与评价总结实践项目的成果和经验教训对实践项目进行评价和改进建议第六章：网页素材的运用6.1 图像的使用介绍在网页中使用图像的规范讲解如何优化图像文件大小讲解图像的响应式处理方法6.2 视频和音频的使用介绍在网页中使用视频和音频的规范讲解如何嵌入视频和音频文件讲解视频和音频的响应式处理方法6.3 交互式元素介绍交互式元素的概念和作用讲解如何使用CSS和JavaScript创建交互式元素第七章：网页兼容性与优化7.1 浏览器兼容性介绍浏览器兼容性的概念和重要性讲解如何解决浏览器兼容性问题7.2 网页性能优化介绍网页性能优化的概念和重要性讲解如何优化网页加载速度和性能7.3 搜索引擎优化（SEO）介绍搜索引擎优化的概念和重要性讲解如何优化网页内容以提高搜索引擎排名第八章：网页设计与制作进阶技巧8.1 网页框架和库的使用介绍网页框架和库的概念和作用讲解如何使用常见的网页框架和库，如Bootstrap和jQuery8.2 响应式设计进阶讲解如何使用CSS预处理器（如Sass或Less）讲解如何使用现代CSS技术，如Grid布局和Flexbox8.3 网页编程语言的运用介绍在网页设计与制作中常用的编程语言，如JavaScript、jQuery和PHP 讲解如何使用这些编程语言实现复杂的网页功能第九章：网页设计与制作案例分析9.1 案例分析概述介绍案例分析的概念和重要性讲解如何选择和分析网页设计与制作的成功案例9.2 案例分析方法讲解如何对网页设计与制作案例进行逐层分析和总结讲解如何从案例中吸取经验和启示第十章：网页设计与制作的评估与改进10.1 网页设计与制作的评估介绍网页设计与制作评估的概念和重要性讲解如何对网页设计与制作过程进行评估和反思10.2 用户体验与交互设计介绍用户体验和交互设计的概念和重要性讲解如何提升用户体验和交互设计10.3 持续改进与更新讲解如何根据评估结果进行持续改进和更新强调在不断变化的市场环境中，持续学习和创新的重要性重点和难点解析重点一：网页设计原则与目标理解并运用网页设计的基本原则确定网页设计的具体目标重点二：网页设计流程掌握需求分析的方法和技巧学习设计草图、布局和配色等步骤的具体实现重点三：网页设计工具的使用熟练掌握至少一种网页设计工具的操作了解不同设计工具的优缺点和适用场景重点四：HTML与CSS的基础知识掌握HTML的基本结构和语法理解CSS的基本语法和用法重点五：网页布局与排版的方法学习并应用常用的网页布局方法掌握排版与字体的设置技巧重点六：响应式设计的原则与实现理解响应式设计的概念和重要性学会使用CSS媒体查询实现响应式设计重点七：网页动画与交互的效果实现掌握CSS动画和JavaScript动画的实现方法学习实现网页交互效果的技巧重点八：表单设计与验证理解表单的设计原则学会使用HTML和JavaScript实现表单验证和提交重点九：实践项目的规划与实施掌握实践项目的规划和设计方法学会使用HTML、CSS和JavaScript实现实践项目重点十：网页设计与制作的评估与改进学习如何对网页设计与制作过程进行评估和反思掌握提升用户体验和交互设计的方法全文总结和概括：本教案全面覆盖了网页设计与制作的基本概念、原则、流程、技术要点和实践应用。
《网页设计与制作》教案
《网页设计与制作》教案第一章：网页设计基础1.1 教学目标让学生了解网页设计的基本概念和原则让学生掌握网页设计的流程和方法1.2 教学内容网页设计的概念和定义网页设计的原则和要素网页设计的流程和方法1.3 教学方法讲授法：讲解网页设计的概念和原则实践法：学生动手实践设计简单的网页1.4 教学评价学生能回答出网页设计的概念和定义学生能理解并运用网页设计的原则和要素学生能独立完成简单的网页设计第二章：HTML与CSS基础2.1 教学目标让学生了解HTML和CSS的基本概念和作用让学生掌握HTML和CSS的基本语法和用法2.2 教学内容HTML的基本概念和语法CSS的基本概念和语法HTML和CSS的综合应用2.3 教学方法讲授法：讲解HTML和CSS的基本概念和语法实践法：学生动手实践编写HTML和CSS代码2.4 教学评价学生能回答出HTML和CSS的基本概念和作用学生能理解并运用HTML和CSS的基本语法和用法学生能独立完成简单的HTML和CSS代码编写第三章：网页布局与排版3.1 教学目标让学生了解网页布局和排版的基本原则和方法让学生掌握使用HTML和CSS进行网页布局和排版的技术3.2 教学内容网页布局的基本原则和方法网页排版的基本原则和方法使用HTML和CSS进行网页布局和排版的技术3.3 教学方法讲授法：讲解网页布局和排版的基本原则和方法实践法：学生动手实践进行网页布局和排版3.4 教学评价学生能回答出网页布局和排版的基本原则和方法学生能理解并运用HTML和CSS进行网页布局和排版的技术学生能独立完成具有良好布局和排版的网页设计第四章：网页动画与交互4.1 教学目标让学生了解网页动画和交互的基本概念和原理让学生掌握使用HTML和CSS实现网页动画和交互的技术4.2 教学内容网页动画的基本概念和原理网页交互的基本概念和原理使用HTML和CSS实现网页动画和交互的技术4.3 教学方法讲授法：讲解网页动画和交互的基本概念和原理实践法：学生动手实践实现网页动画和交互4.4 教学评价学生能回答出网页动画和交互的基本概念和原理学生能理解并运用HTML和CSS实现网页动画和交互的技术学生能独立完成具有动画和交互功能的网页设计第五章：网页优化与推广5.1 教学目标让学生了解网页优化和推广的基本概念和方法让学生掌握使用SEO和网络营销技术进行网页优化和推广的技巧5.2 教学内容网页优化的基本概念和方法网页推广的基本概念和方法使用SEO和网络营销技术进行网页优化和推广的技巧5.3 教学方法讲授法：讲解网页优化和推广的基本概念和方法实践法：学生动手实践进行网页优化和推广5.4 教学评价学生能回答出网页优化和推广的基本概念和方法学生能理解并运用SEO和网络营销技术进行网页优化和推广的技巧学生能独立完成具有优化和推广功能的网页设计第六章：网页图像处理与多媒体应用6.1 教学目标让学生了解网页图像处理的基本概念和工具让学生掌握网页图像处理和多媒体应用的技术6.2 教学内容网页图像处理的基本概念和工具（如Photoshop、Fireworks等）多媒体元素在网页中的应用（如音频、视频等）图像和多媒体的HTML和CSS标记6.3 教学方法讲授法：讲解网页图像处理的基本概念和工具实践法：学生动手实践进行网页图像处理和多媒体应用6.4 教学评价学生能回答出网页图像处理的基本概念和工具学生能理解并运用网页图像处理和多媒体应用的技术学生能独立完成具有图像和多媒体应用的网页设计第七章：网页编程技术7.1 教学目标让学生了解网页编程的基本概念和语言让学生掌握常用的网页编程技术和框架7.2 教学内容网页编程的基本概念和语言（如JavaScript、jQuery等）常用的网页编程技术和框架（如Bootstrap、React等）编程实践和项目案例7.3 教学方法讲授法：讲解网页编程的基本概念和语言实践法：学生动手实践进行网页编程和技术应用7.4 教学评价学生能回答出网页编程的基本概念和语言学生能理解并运用常用的网页编程技术和框架学生能独立完成编程实践和项目案例第八章：移动网页设计与制作8.1 教学目标让学生了解移动网页设计的基本概念和原则让学生掌握移动网页设计与制作的技术和工具8.2 教学内容移动网页设计的基本概念和原则移动网页设计与制作的技术和工具（如Responsive Design、Adobe Edge Mobile等）移动网页设计的实践和案例分析8.3 教学方法讲授法：讲解移动网页设计的基本概念和原则实践法：学生动手实践进行移动网页设计与制作8.4 教学评价学生能回答出移动网页设计的基本概念和原则学生能理解并运用移动网页设计与制作的技术和工具学生能独立完成移动网页设计与制作的项目案例第九章：网页项目实战与团队协作9.1 教学目标让学生了解网页项目实战的基本流程和方法让学生掌握团队协作的基本技巧和工具9.2 教学内容网页项目实战的基本流程和方法团队协作的基本技巧和工具（如Git、Project Management Software等）项目案例分析和实战演练9.3 教学方法讲授法：讲解网页项目实战的基本流程和方法实践法：学生分组进行项目实战和团队协作9.4 教学评价学生能回答出网页项目实战的基本流程和方法学生能理解并运用团队协作的基本技巧和工具学生能独立完成项目实战和团队协作的任务第十章：网页设计与制作的未来趋势10.1 教学目标让学生了解网页设计与制作的未来趋势和发展方向让学生掌握前沿技术和创新思维的方法10.2 教学内容网页设计与制作的未来趋势和发展方向（如VR/AR、等）前沿技术和创新思维的方法（如Blockchn、Design Thinking等）创新项目和案例分析10.3 教学方法讲授法：讲解网页设计与制作的未来趋势和发展方向实践法：学生进行创新项目和思维训练10.4 教学评价学生能回答出网页设计与制作的未来趋势和发展方向学生能理解并运用前沿技术和创新思维的方法学生能独立完成创新项目和案例分析重点和难点解析重点环节一：网页设计的概念和原则重点关注学生对网页设计的基本理解，以及如何运用设计原则进行网页创作。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
机械工业出版社同名教材 配套电子教案
第9章 网络鞋城前台页面
9.1 网站的开发流程 9.2 设计首页布局 9.3 首页的制作 9.4 制作商品展示页 9.5 制作商品详细信息页 9.6 制作查看购物车页
9.1 网站的开发流程
典型的网站开发流程包括以下几个阶段。 ① 规划站点：包括确立站点的策略或目标、确定所面向的 用户以及站点的数据需求。 ② 网站制作：包括设置网站的开发环境、规划页面设计和 布局、创建内容资源等。 ③ 测试站点：使用Dreamweaver测试页面的链接及网站的兼 容性。 ④ 发布站点：使用Dreamweaver将站点发布到服务器上。
9.1 网站的开发流程
9.1.3 测试网站 在把站点上传到服务器之前，要先在本地对其测试。实
际上，在站点建设过程中，最好经常对站点进行测试并解决 出现的问题，这样可以尽早发现问题并避免重犯错误。测试 网页主要从以下3个方面着手。
应该确保在目标浏览器中，页面能够正常显示和正常使 用，所有链接都正常，页面下载也不会占用太长时间，这几 点很重要。
9.5 制作商品详细信息页
商品详细信息页面是客户查看商品细节时显示的页面， 商品明细区域包括商品图文介绍和相关商品信息，页面效果 如图9-17所示，布局示意图如图9-18所示。
9.6 制作查看购物车页
当客户单击页面中的“查看购物车”链接或“加入购物车” 按钮时，将打开查看购物车页面。页面中显示添加到购物车 中的商品信息及金额，客户可以修改购买商品的数量，还可 以删除某款商品。页面的效果如图9-20所示，布局示意图如 图9-21所示。
9.1 网站的开发流程
9.1.4 发布站点 在创建一个功能齐全的Web站点后，可以使用
Dreamweaver将文件上传到远程Web服务器以发布该站点。 Dreamweaver中包含管理站点的工具，可以向远程服务器和 从远程服务器传输文件，设置存回/取出过程来防止覆盖文 件，以及同步本地和远端站点上的文件。
9.2 设计首页布局
9.2.2 页面布局规划
鞋城首页包括网站 的Logo、导航、分类、 畅销排行榜、新品上架、 购物车链接等信息，是 一个典型的两列布局页 面。鞋城首页的效果如 图9-8所示。
9.2 设计首页布局
9.2.2 页面布局规划 布局示意图如图9-9
所示。
9.3 首页的制作
1．页面整体的制作 2．页面顶部的制作
9.2 设计首页布局
9.2.1 使用Dreamweaver创建站点
1．建立站点 2．建立目录结构
在制作各网页前，用户需要确定整个网站的目录结构。 对于中小型网站，一般会创建如下通用的目录结构： images目录：存放网站的所有图片。 style目录：存放网站的CSS样式文件，实现内容和样式的 分离。 js目录：存放JavaScript脚本文件。 admin目录：存放网站后台管理程序。
9.1 网站的开发流程
9.1.2 网站制作 完整的网站制作包括以下两个过程： 1．前台页面制作
当网页设计人员拿到美工效果图以后，编写HTML、CSS， 将效果图转换为.html网页，其中包括图片收集、页面布局 规划等工作。 2．后台程序开发
后台程序开发包括网站数据库设计、网站和数据库的连 接、动态网页动态网站设计的课程中学习。
习题9
1．综合使用Div+CSS技术制作什锦果园首页，如图9-23 所示。
2．综合使用Div+CSS技术制作什锦果园产品页，如图924所示。
3．综合使用Div+CSS技术制作什锦果园新闻页，如图925所示。
4．综合使用Div+CSS技术制作什锦果园联系页，如图926所示。
3．菜单区域的制作
4．左侧区域的制作
9.3 首页的制作
5．右侧区域的制作
7．页面底部区域的制作
9.3 首页的制作
7．页面结构代码 至此，网络书城首页制作完毕，读者可以在此基础上根
据自己的喜好修改相关的CSS规则，进一步美化页面。
9.4 制作商品展示页
商品展示页用于显示商品展示列表，页面效果如图9-15 所示，布局示意图如图9-16所示。
9.1 网站的开发流程
9.1.1 站点规划 1．网站结构规划 （1）网站结构图 （2）使用合理的文件夹保存文档 （3）使用合理的文件名称 2．网站内容规划 3．网站界面规划 4．网站功能设置 鞋城前台页面的主要功能包括：鞋城首页展示各种鞋类商品， 帮助客户搜索到欲购买的商品，展示商品的详细信息，会员 的注册与登录，鞋城的购物流程和指南，购买商品的购物车， 客户确认订单并填写送货地址，选择支付方式和物流方式等。 鞋城后台页面的主要功能包括：商品管理，订单管理，促销 管理，广告管理，文章管理，会员管理和系统设置等。