网站建设与管理 第2章 页面设计初步

《网站建设与管理 第2章 页面设计初步》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、网站建设与管理第2章页面设计初步2.1制作第一个网页2.1.1用Dreamweaver创建第1个网页方法如下：新建一个DreamweaverMX2004文档。输入一段文字“这是我做的第一个网页”。选中输入的文字→在属性面板中设置字的属性。在标题框中输入“网页练习”作为网页标题。给文件起名并将文件保存。2.1制作第一个网页2.1.2用HTML创建第1个网页建立一个空的记事本文档，输入以下代码后保存文档。

2、lor="#FF0000"size="5"face="黑体">这是我做的第一个网页2.1制作第一个网页2.1.3在本地机浏览网页下面分别用两种方法浏览制作的网页文件。1．打开浏览器→单击地址栏的下拉按钮→找到文件网页文件→双击文件将其打开→可在浏览器中看到“网页-1.htm”的内容。2．打开“我的电脑”或“资源管理器”→找到网页文件→双击该文件→系统会自动打开浏览器并在浏览器中显示网页文件的内容。网页标题出现在浏览器窗口的标题栏上，网页内容出现在浏览器窗口中

3、。2.2页面风格与布局2.2.1页面风格页面风格是指网站的结构、色彩、文字、图片等元素组合在一起的整体效果。一般应注意以下几方面：1．首页设计2．结构一致3．色彩一致4．特色元素一致2.2页面风格与布局2.2.2网页基本元素1．表格：一方面，用表格显示条理性的信息，另一方面，表格可以起到布局网页的作用。2．文本：文本是大部分网站显示信息的主要方式。3．图像：至少要有网站Logo和网站Banner。4．超链接：在网站中负责网页之间的相互关联，还负责本网站与其他网站之间的关联。5．交互功能：用来在网上采集信息。2.2页面

4、风格与布局2.2.3页面布局页面布局是指对页面进行合理的版面规划。主页是所有网页中的内容最多的，在给主页添加内容之前，对主页做版面规划尤为重要。所谓版面规划，就是对页面进行合理的版面布置。为了使布局相对固定，规划一般用“框架”技术实现，配以“表格”和“图层”，使页面美观而且易于维护。2.3Dreamweaver基础2.3.1Dreamweaver工作界面1．DreamweaverMX2004开始窗口（1）“打开最近项目”列表（2）“创建新项目”列表（3）“从范例创建”列表2．DreamweaverMX2004工作窗口

5、（1）菜单栏（2）“插入”栏（3）选项卡（4）文档工具栏（5）文档窗口（6）面板组（7）属性面板（8）状态栏2.3Dreamweaver基础2.3.2文档的显示方式1．“设计”视图“设计”视图是默认视图，提供可视化页面编辑的设计环境，对文档的所有操作都直接显示在文档窗口中。例如：设置文字格式、插入图像、插入媒体对象等，都能在文档窗口马上看到结果。在“设计视图”中看到的网页是“所见即所得”的，即在“设计视图”中的网页页面与在浏览器中看到的页面形式大致相同。2.3Dreamweaver基础2.3.2文档的显示方式2．“拆

6、分”视图“拆分”视图将文档窗口分成两部分，一部分显示可视化文档，另一部分显示源代码，能在可视化操作和源代码操作中同时看到工作进程。它的最大好处是既便于控制源代码，又有可视化的直观性。2.3Dreamweaver基础2.3.2文档的显示方式3．“代码”视图“代码”视图提供HTML、JavaScript、ASP等代码的编辑环境，可以在代码窗口中输入或编辑代码，代码视图下看不到可视化结果，必须切换到设计视图中才行。2.3Dreamweaver基础2.3.3属性面板属性面板用于显示或修改已选定对象的属性，是非常重要的面板。属

7、性面板的打开或关闭在“窗口”菜单中定义。在属性面板上可以对文本、图像、表格、层等各种元素进行属性设置，不同的对象对应不同的属性设置。2.3Dreamweaver基础2.3.4其他面板Dreamweaver还提供其他面板，组成面板窗口，位于文档窗口右边，这些面板都浮于文档窗口之上，光标可以在文档和面板之间来回切换，称这些面板为“浮动面板”。面板的打开和关闭在“窗口”菜单中完成。面板窗口的展开或折叠可单击面板窗口左边框的按钮，按钮箭头向右表示面板窗口已展开，按钮箭头向左表示面板窗口已折叠。单个面板的展开和折叠可单击面板左

8、上角的按钮，按钮箭头向下表示该面板窗口已展开，按钮箭头向右表示该面板窗口已折叠。2.4HTML基础2.4.1HTML文档基本结构HTML（HypertextMarkedLanguage）文档分文档头和文档体两部分，格式如下：头部信息文档正文2.4HTML基础说明：（1