《电子商务网站建设与管理 （第2版）》第5章利用DreamweaverCS设计网页.pptVIP

本章内容简介 5.1 创 建 站 点 5.1.1 Dreamweaver CS3基础 1．初识Dreamweaver CS3的操作环境 2．设置首选参数 5.1.2 创建站点 1．规划站点结构 2．创建站点 5.1.3 搭建站点目录结构与文件管理 5.2 网页的基本编辑 5.2.1 设置页面属性 5.2.2 文本、图像编辑与超级链接 1．插入文本并进行格式设置 2．插入图像 3．插入其他图像元素 4．创建超级链接 【例】 制作玖丰万象园电子机箱公司企业简介网页 5.2.3 用CSS样式表设置网页样式 1．创建CSS样式 2．编辑CSS样式 3．应用CSS自定义样式 4．附加样式表 5.3 用表格或框架进行网页布局 5.3.1 表格基本操作 1．创建表格 5.3.1 表格基本操作 2．选取表格元素 选择整个表格。将鼠标指针移到表格边框线上，当出现双向箭头标志时单击即可选中整个表格；在表格内任意处单击，然后在状态栏选中table标签；单击鼠标右键，在弹出的快捷菜单中选择【表格】→【选择表格】命令。 选取单元格。按住Ctrl键，在需要选中的单元格上单击即可；选中状态栏中的td标签。 选取行或列。将光标移动到行左侧或列上方，鼠标指针变为向右或向下的箭头图标时单击即可。 5.3.1 表格基本操作 3．设置表格属性 5.3.1 表格基本操作 4．设置单元格属性 5.3.1 表格基本操作 5．嵌套表格 使用嵌套表格，可由总表格负责整体布局，由嵌套的表格负责各个子栏目的排版，并插入到总表格的相应位置中，各司其职，互不冲突。 5.3.2 框架应用 1．框架和框架集 框架（Frame）是浏览器窗口中的一个区域，可以显示与浏览器窗口的其余部分中所显示内容无关的网页文件。 框架集（Frameset）是一个网页文件，定义了一组框架的布局和属性，包括框架的数目、大小和位置以及在每个框架中要显示的网页文件的URL。 5.3.2 框架应用 2．创建框架和框架集 5.3.2 框架应用 3．保存框架和框架集 （演示） 4．选择框架和框架集 （演示） 5．设置框架属性 （演示） 6．在框架中使用超级链接 （演示） 5.4 用DIV与CSS样式布局 1. DIV+CSS相比较与表格布局的优势： （1）代码精简，减少因嵌套多而影响搜索引擎蜘蛛爬行的问题 （2）方便修改与维护 （3）内容与表现分离，页面载入得更快 2. CSS盒子模型 3.网页布局常见问题与思路 （1）保持居中 要保持整体页面居中，可以通过CSS的margin属性对body标记进行设置，实现控制网页居中显示。 body{text-align:center;margin:0 auto;} margin:0 auto代表上下边距为0，左右为自动调整边距。 若保持页面背景居中，可以使用下面的定义。 body{background:url( ) #fff no-repeat center;} 若需要文字图片内容居中，可以直接使用text-align:center。 （2）内容排版 在水平排版时，如导航、水平排列的用户名和输入框、水平排列的图片等，都可以采用水平列表排版，并且通过margin-left或margin-right来调整左右间距达到合适效果；如果垂直排版的内容，则需要采用无序列表，通过margin-top或margin-bottom调整上下间距达到合适的效果。 （3）DIV+CSS设计思路 5.5 表 单 制 作 一个完整的表单由两个部分组成：一是使用HTML语言编写的网页界面，其中包含了用于收集信息的各类表单对象；二是应用程序，可以是服务器端的，也可以是客户端的，用于对客户信息进行分析处理。 5.4 表 单 制 作 1．创建表单 5.5 表 单 制 作 2．表单的应用 【例】制作个人信息调查表（演示） 5.6 模 板 应 用 模板是能够生成其他网页样板的特殊网页。 模板文件的显著特征是分为可编辑区域和锁定区域两个部分。锁定区域用来锁定网站风格，是相对固定、不可改变的；可编辑区域用来定义网页的具体内容。 使用模板建立网页时，用户只需编辑可编辑区域即可，网站的维护由此变得简单。 5.5 模 板 应 用 1．模板的创建 创建模板有两种方法：一是将现有文件另存为模板，二是在【新建】文件对话框中选择【空模板】。这里以第一种方法为例来建立模板。 2．模板的应用 【例5-4】 利用企业产品页面建立模板 （演示操作过程） 3．通过更新模板来更新网页 * * 第5章利用Dreamweaver CS设计网页 《电子商务网站建设与管理 》配套课件 用表格或框架进行网页布局 5.3 表 单 制 作 5.4