青春驿站网页设计范例概要.pptVIP

第10章 网页设计范例 10.1 设计站点 10.2 制作进站页面 10.3 制作主页 10.4 制作“时尚话题”页面 10.5 制作“头发的时尚”、“城市的性格”及“服装百年”页面 10.6 制作“心情文章”页面 10.7 制作“热点讨论”页面 10.8 测试和上传站点 通过本章的学习，熟悉网站建设的全过程，掌握网页设计常用技术。 10.1 设计站点 “青春驿站”是一个流溢着青春气息的网站，网页的内容围绕着年青人喜欢的主题展开。 10.1.2 建立站点 本例是在E盘book文件夹下建立一个名为youngsite的站点。制作步骤如下： （1）先在E盘book文件夹下建立一个名为youngsite的文件夹，用来存放创建的网页；在youngsite文件夹下建立一个名为images的文件夹，用以存放站点中的图像，可以把要用的图片先放入该文件夹中。 （2）选择【站点】|【管理站点】，打开【管理站点】对话框，单击【新建】按钮，在弹出的下拉菜单中选择【站点】命令，在打开的【站点定义】对话框中做如图10.2所示的设置。此时站点管理面板如图10.3所示。 10.1.3 生成网页 1. 生成进站页面 (1) 选择菜单【文件】|【新建】，则弹出【新建文档】对话框，在该对话框中选择【常规】选项卡，在【类别】选项中选择【基本页】，然后在【基本页】列表框中选择HTML，单击【创建】按钮即创建一个HTML页面文档。 (2) 在文档工具栏的标题栏中，输入网页标题“进站页面”。 (3) 选择菜单【文件】|【保存】，则弹出【另存为】对话框，则将该页面以index.htm的名字保存在E:\book\youngsite中。 2．生成主页及其它页面 以相同方法生成主页及其它页面，各个页面的名称及存储位置见图10.4所示。 10.2 制作进站页面 打开进站页面文档index.htm，进行设计。 1．用表格进行整体布局 选择菜单【插入】|【表格】或在插入工具栏中的【布局】类中选择表格按钮，则会出现【表格】设置对话框，插入一个4行1列宽度为800个像素的表格。 2．添加网页元素 (1) 在表格中的第1行，输入“青春驿站”四个字，选择这四个字，在属性面板中进行设置，字体为“华文行楷”，大小为20。单元格对齐方式为水平“居中对齐”，垂直“居中”。 (2) 在表格中的第2行和第4行，分别输入如图10.5所示的第2行文字“青春的美丽……”和最后一行文字“欢迎你的到来……”。选择这些文字，在属性面板中进行设置，字体和大小都为“默认”。单元格对齐方式为水平“居中对齐”，垂直“居中”。 (3) 选择菜单【插入】|【图像】在表格中的第3行，插入图像43.jpg。 3．页面属性的设置 选择菜单【修改】|【页面属性】，在打开的页面属性对话框中进行设置，将背景颜色设为绿色(#99CC33)，文本颜色设为白色(#FFFFFF)。 10.3 制作主页 10.3.1 整体效果设计 主页采用T形布局，页面上部为横幅及网站标志，下方左半部分为导航区，右半部分为网页主体显示内容的布局。 主页的色彩以蓝绿色为主，给人以青春、旺盛的感觉。 整个页面共插入了六幅gif图像，其中四幅静态图像分别作为网页横幅部分、网页标志、表格单元格的背景，给页面添加了美感，容易使人产生联想；而在左下半部分的主菜单上方及作为网页主页部分的背景的动态gif图像的插入，赋予整个页面以动感，给人以明快的感觉。 主页中的文字采用的是浏览器的默认字体，即中文宋体和英文Times New Roman字体，显得整齐有序。 10.3.2 用表格进行整体布局并设置 (1)插入一个3行1列，宽度为800个像素，边框粗细、单元格边距及单元格间距均为0的表格。 (2) 将光标置于表格第1行，选择【修改】|【表格】|【拆分单元格】，将单元格拆分成2列。拖动两列中间的框线，使左侧宽度大约在150像素。 (3) 将光标置于表格第1行中第1个单元格，选择【修改】|【表格】|【拆分单元格】，将单元格拆分成2行。 (4) 将光标置于表格第2行，选择【修改】|【表格】|【拆分单元格】，将单元格拆分成2列。 10.3.3 网页横幅及标志部分的设计 (1) 将光标置于第1行第2列单元格中，选择菜单【插入】|【图像】，插入图像5.gif，调整大小到适当宽度。 (2) 将光标置于第1行第1列上面的单元格中，选择菜单【插入】|【图像】，插入图像text.gif。在属性面板上，设置图像居中，其余默认。 (3) 将光标置于表格的第3行，输入文字：Copyright 2005 ，All Rights Reserved 青春驿站。在属性面板上，设置文字居中，其余默认。 (4) 横幅部分