网页制作基础_13_网站设计和页面布局设计.pdf

HTMLCSSJavaScript基础 网站设计和页面布局设计 网站开发的流程 需求分析 创建站点 页面内容 页面布局-框架布局 框架布局 •框架布局的优缺点和应用场合 页面布局-表格布局 表格布局 •表格布局的优缺点和应用场合 页面布局-DIV布局 什么是DIV • DIV元素是用来为HTML文档内大块的内容提供结构和背景的元 素。 • 创建DIV的步骤如下： –新建一个空白文档 –选择“插入”-“布局对象”-“层” 或者在“布局”插入栏-使用“绘制层”按钮进行绘制层 什么是DIV DIV层布局 •DIV层布局的优缺点和应用场合 最佳布局 为什么需要模板 制作模板 •制作模板也有两周方式： –将现有文档保存为模板 •打开HTML文档 •选择“文件”-“另存为模板” •设置相关属性，然后“保存” 制作模板 •新建空白模板 制作模板 应用模板 应用模板 应用模板 制作样式表 •创建样式表文件步骤： –选择“文件”-“新建” –选择“基本页”-“CSS” –单击“新建” 制作样式表 •定义样式规则步骤： –选择“窗口”-“CSS样式” –在“CSS样式”面板中，右击-新建 –分别新建标签body、a等的样式 –分别新建ID样式#head、ID样式 #search_form等 –分别新建类样式.fontcolor_white、类样 式.tableBorder等 制作样式表 •应用样式文件： –打开要应用样式的网页 –在属性面板中单击“样 式”下拉框 –选择附加样式 –选择要引入的样式文件 应用样式文件 设置页面间的链接 •设置页面间的链接步骤： –将“首页”和“登录页”、“注册”页链接。 –将宝贝分类栏目中的“装备”和“商品”展 示页链接。 –将“商品展示”页和“快乐幻想去神愿石” 商品详细介绍页链接。 –将“快乐幻想去神愿石”商品详细介绍页的 “立刻购买”和“购买页”链接。 发布站点 •按照IIS –打开“控制面板”。 –双击“添加或删除程序”图标。 –单击“添加/删除Windows组件”按钮。 –选中“应用程序服务器”并单击“详细信息” 按钮。 –选择“Internet信息服务器（IIS）”，单击 “确定”。 –单击“下一步”进行安装，最后单击“完成”。 安装过程中，提示“插入磁盘”，就插入安装光盘 测试并发布站点 发布站点 发布站点 •上传的网站在本地服务器上，访问方式： –/index.html –http://本地服务器IP地址/index.html